/* =========================================================================
   PHASE 2 下層ページ（/features/ /design/ /price/ /start/）
   lp.css の部品を前提にした、下層ページ固有のレイアウト
   ========================================================================= */

/* 見出し ------------------------------------------------------------------ */
.p-sub { padding: clamp(64px, 9vw, 140px) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--c-line); }
.p-sub__en {
	font-family: var(--f-en); font-weight: 700; font-size: clamp(14px, 1.2vw, 16px); letter-spacing: 0.24em; color: var(--c-red);
	display: flex; align-items: center; gap: 14px;
}
.p-sub__en::before { content: ""; width: 10px; height: 10px; background: var(--c-red); transform: rotate(45deg); }
.p-sub__title { margin-top: 20px; font-size: clamp(34px, 6vw, 84px); font-weight: 900; line-height: 1.18; letter-spacing: 0.01em; }
.p-sub__lead { margin-top: 28px; max-width: 46em; color: var(--c-ink-3); font-size: clamp(15px, 1.25vw, 17px); line-height: 2; }
.p-sub__toc { margin-top: clamp(40px, 5vw, 64px); }
.p-sub__toc ol { display: flex; flex-wrap: wrap; gap: 8px; }
.p-sub__toc a {
	display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px;
	border: 1px solid var(--c-line); text-decoration: none; font-size: 14px; font-weight: 700;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.p-sub__toc a span { font-family: var(--f-en); font-size: 13px; color: var(--c-red); letter-spacing: 0.08em; }
.p-sub__toc a:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
@media (max-width: 599px) {
	.p-sub__toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--c-line); }
	.p-sub__toc li { border-bottom: 1px solid var(--c-line); }
	.p-sub__toc li:nth-child(odd) { border-right: 1px solid var(--c-line); }
	.p-sub__toc a { display: flex; border: 0; padding: 14px 10px; font-size: 13px; }
}
.p-subpage > section { scroll-margin-top: calc(var(--header-h) + 8px); }
.b-feat .c-head__title,
.b-other .c-head__title,
.b-steps__head .c-head__title,
.b-env .c-head__title,
.b-roadmap .c-head__title,
.p-subpage .s-faq__head .c-head__title { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.4; }

/* 機能ブロック ------------------------------------------------------------- */
.b-feat { padding: var(--sec) 0; border-bottom: 1px solid var(--c-line); }
.b-feat__top { display: grid; gap: 48px; align-items: center; }
.b-feat__visual { position: relative; }
.b-feat__visual.is-pair .m-browser + .m-browser { width: 64%; margin: -18% 0 0 auto; position: relative; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); }
.b-feat__list { display: grid; gap: 0; margin-top: clamp(48px, 6vw, 80px); border-top: 2px solid var(--c-ink); }
.b-feat__list > div { padding: 22px 0; border-bottom: 1px solid var(--c-line); display: grid; gap: 6px; }
.b-feat__list dt { font-size: 17px; font-weight: 900; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.b-feat__list dd { font-size: 14px; line-height: 1.9; color: var(--c-ink-3); }
.b-feat--dark { background: var(--c-ink); color: var(--c-white); border-bottom: 0; }
.b-feat--dark .c-head__lead, .b-feat--dark .b-feat__list dd { color: rgba(255, 255, 255, 0.72); }
.b-feat--dark .b-feat__list { border-top-color: var(--c-white); }
.b-feat--dark .b-feat__list > div { border-bottom-color: var(--c-line-w); }
.b-feat--dark .m-browser { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px #000; }
@media (min-width: 768px) {
	.b-feat__list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
@media (min-width: 1024px) {
	.b-feat__top { grid-template-columns: 5fr 7fr; gap: 72px; }
	.b-feat--rev .b-feat__top { grid-template-columns: 7fr 5fr; }
	.b-feat--rev .b-feat__text { order: 2; }
	.b-feat__list > div { grid-template-columns: 12em 1fr; gap: 20px; align-items: baseline; }
}

/* ロードマップ ------------------------------------------------------------- */
.b-roadmap { padding: var(--sec) 0; background: var(--c-paper-2); }
.b-roadmap__inner { display: grid; gap: 40px; }
.b-roadmap__list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--c-line); }
.b-roadmap__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.b-roadmap__list li:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--c-line); }
.b-roadmap__list li:nth-child(even) { padding-left: 16px; }
.b-roadmap__list b { font-size: 15px; }
@media (min-width: 1024px) { .b-roadmap__inner { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }

/* 次のページ --------------------------------------------------------------- */
.b-next { padding: clamp(48px, 6vw, 80px) 0; }
.b-next__inner { display: grid; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.b-next__link {
	display: grid; gap: 6px; padding: clamp(24px, 3vw, 40px); background: var(--c-paper); text-decoration: none;
	position: relative; transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.b-next__link span { font-family: var(--f-en); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; color: var(--c-red); }
.b-next__link b { font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; }
.b-next__link::after { content: "→"; position: absolute; right: clamp(24px, 3vw, 40px); top: 50%; transform: translateY(-50%); font-family: var(--f-en); font-size: 28px; transition: transform 0.3s var(--ease); }
.b-next__link:hover { background: var(--c-ink); color: var(--c-white); }
.b-next__link:hover::after { transform: translate(6px, -50%); }
@media (min-width: 768px) { .b-next__inner { grid-template-columns: 1fr 1fr; } }

/* デザイン：デモ ------------------------------------------------------------ */
.b-show { padding: clamp(56px, 7vw, 112px) 0 var(--sec); background: var(--c-ink); color: var(--c-white); }
.b-show__stage { position: relative; padding-right: 10%; }
.b-show__pc { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 120px -50px #000; }
.b-show__sp { position: absolute; right: 0; bottom: -6%; width: 21%; border-color: #000; }
.b-show__text { display: grid; gap: 24px; margin-top: clamp(64px, 8vw, 112px); }
.b-show__text p { color: rgba(255, 255, 255, 0.78); line-height: 2; }
.b-show__cta { margin-top: 28px; }
.b-show .c-btn--primary { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
@media (min-width: 1024px) { .b-show__text { grid-template-columns: 5fr 7fr; gap: 72px; align-items: end; } }

/* デザイン：ページ一覧 ------------------------------------------------------- */
.b-pages { padding: var(--sec) 0; }
.b-pages__grid { display: grid; gap: 40px 24px; margin-top: clamp(40px, 5vw, 64px); }
.b-pages__grid p { margin-top: 14px; display: grid; gap: 2px; }
.b-pages__grid b { font-size: 16px; font-weight: 900; }
.b-pages__grid span { font-size: 13px; color: var(--c-mute); }
@media (min-width: 600px) { .b-pages__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .b-pages__grid { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; } }
.b-pages__sp { display: grid; gap: 40px; margin-top: var(--sec); padding-top: clamp(48px, 6vw, 80px); border-top: 2px solid var(--c-ink); }
.b-pages__sp-en { font-family: var(--f-en); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; color: var(--c-red); }
.b-pages__sp h3 { margin-top: 12px; font-size: clamp(24px, 2.8vw, 36px); font-weight: 900; line-height: 1.4; }
.b-pages__sp-text > p:last-child { margin-top: 20px; color: var(--c-ink-3); line-height: 2; }
.b-pages__phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 32px); }
.b-pages__phones li { display: grid; gap: 12px; justify-items: center; }
.b-pages__phones .m-phone { width: 100%; }
.b-pages__phones span { font-size: 12px; font-weight: 700; color: var(--c-ink-3); text-align: center; }
@media (min-width: 1024px) { .b-pages__sp { grid-template-columns: 4fr 6fr; gap: 72px; align-items: center; } }

/* デザイン：チームの種類 ------------------------------------------------------ */
.b-types { padding: var(--sec) 0; background: var(--c-paper-2); }
.b-types__list { display: grid; margin-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--c-ink); }
.b-types__item { display: grid; gap: 10px; align-content: start; padding: 28px 0; border-bottom: 1px solid var(--c-line); }
.b-types__swatch { display: flex; gap: 4px; }
.b-types__swatch i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.b-types__item h3 { font-size: 24px; font-weight: 900; }
.b-types__target { font-weight: 700; font-size: 14px; }
.b-types__pages { font-size: 13px; color: var(--c-ink-3); line-height: 1.8; }
.b-types__pages span { display: block; font-size: 11px; color: var(--c-mute); letter-spacing: 0.06em; }
.b-types__item .c-tag { justify-self: start; margin-top: 6px; }
.b-types__note { margin-top: 28px; font-size: 14px; color: var(--c-ink-3); }
@media (max-width: 599px) {
	.b-types__list { grid-template-columns: 1fr 1fr; }
	.b-types__item { padding: 22px 12px 24px 0; }
	.b-types__item:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--c-line); }
	.b-types__item h3 { font-size: 20px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.b-types__list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
@media (min-width: 1024px) {
	.b-types__list { grid-template-columns: repeat(4, 1fr); }
	.b-types__item { padding: 32px 24px 36px; border-bottom: 0; border-right: 1px solid var(--c-line); }
	.b-types__item:first-child { padding-left: 0; }
	.b-types__item:last-child { border-right: 0; }
}

/* デザイン：カスタマイズ ------------------------------------------------------ */
.b-custom { padding: var(--sec) 0; }
.b-custom__nums { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--c-ink); }
.b-custom__nums li { display: grid; gap: 6px; align-content: start; padding: 24px 12px 28px 0; border-bottom: 1px solid var(--c-line); }
.b-custom__nums li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--c-line); }
.b-custom__label { font-size: 14px; font-weight: 700; }
.b-custom__nums b { font-family: var(--f-en); font-size: clamp(56px, 7vw, 104px); font-weight: 700; line-height: 0.9; letter-spacing: -0.01em; }
.b-custom__nums small { font-family: var(--f-jp); font-size: 15px; font-weight: 700; margin-left: 4px; }
.b-custom__desc { font-size: 13px; color: var(--c-mute); line-height: 1.7; }
.b-custom__more { display: grid; gap: 0; margin-top: 40px; }
.b-custom__more li { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.b-custom__more li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; background: var(--c-red); transform: translateY(-50%) rotate(45deg); }
@media (min-width: 1024px) {
	.b-custom__nums { grid-template-columns: repeat(3, 1fr); }
	.b-custom__nums li { padding: 32px 24px 36px; border-left: 1px solid var(--c-line); }
	.b-custom__nums li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
	.b-custom__more { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* デザイン：オリジナル -------------------------------------------------------- */
.b-original { padding: var(--sec) 0; background: var(--c-ink); color: var(--c-white); }
.b-original__inner { display: grid; gap: 56px; align-items: center; }
.b-original__visual { position: relative; padding-right: 12%; }
.b-original__visual .m-browser { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px #000; }
.b-original__sp { position: absolute; right: 0; bottom: -8%; width: 24%; border-color: #000; }
.b-original__text > p { margin-top: 24px; color: rgba(255, 255, 255, 0.78); line-height: 2; }
.b-original__case { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 700; color: var(--c-white) !important; }
.b-original__case span { font-family: var(--f-en); font-size: 12px; letter-spacing: 0.16em; padding: 4px 10px; border: 1px solid var(--c-line-w); }
.b-original__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
@media (min-width: 1024px) { .b-original__inner { grid-template-columns: 7fr 5fr; gap: 80px; } }

/* 料金：比較表 ---------------------------------------------------------------- */
.b-compare { padding: var(--sec) 0; }
.b-compare__scroll { margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.b-compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.b-compare__table th, .b-compare__table td { padding: 16px 14px; border-bottom: 1px solid var(--c-line); text-align: center; vertical-align: middle; }
.b-compare__table thead th { border-bottom: 2px solid var(--c-ink); vertical-align: bottom; }
.b-compare__table thead b { display: block; font-family: var(--f-en); font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.04em; }
.b-compare__table thead span { display: block; font-size: 12px; font-weight: 500; color: var(--c-mute); margin-top: 2px; }
.b-compare__table tbody th { text-align: left; font-weight: 700; width: 34%; }
.b-compare__table .is-fee td { font-family: var(--f-en); font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.b-compare__table .is-fee + tr:not(.is-fee) th, .b-compare__table .is-fee + tr:not(.is-fee) td { border-top: 2px solid var(--c-ink); }
.b-compare__table .is-yes { color: var(--c-red); font-size: 20px; font-weight: 900; }
.b-compare__table .is-no { color: #b7b4ab; }
.b-compare__table .is-part { font-weight: 700; font-size: 13px; }
.b-compare__table td:nth-child(2), .b-compare__table th:nth-child(2) { background: rgba(225, 37, 27, 0.05); }
.b-compare__note { margin-top: 20px; font-size: 13px; color: var(--c-mute); }
@media (max-width: 767px) {
	.b-compare__scroll { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
	.b-compare__table tbody th { position: sticky; left: 0; background: var(--c-paper); z-index: 1; width: 9em; }
}

/* 料金：ほかの費用 --------------------------------------------------------------- */
.b-other { padding: var(--sec) 0; background: var(--c-paper-2); }
.b-other__inner { display: grid; gap: 48px; }
.b-other__cols { display: grid; gap: 40px; }
.b-other__col h3 { font-size: 18px; font-weight: 900; padding-bottom: 14px; border-bottom: 2px solid var(--c-ink); }
.b-other__col--free h3 { border-bottom-color: var(--c-red); }
.b-other__col ul { display: grid; }
.b-other__col li { padding: 18px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; color: var(--c-ink-3); line-height: 1.9; }
.b-other__col li b { display: block; font-size: 16px; color: var(--c-ink); margin-bottom: 4px; }
.b-other__cta { margin-top: 24px; }
@media (min-width: 768px) { .b-other__cols { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (min-width: 1024px) { .b-other__inner { grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; } }

/* 料金：支払い・環境（定義リスト） ------------------------------------------------- */
.b-pay { padding: var(--sec) 0; }
.b-pay__list { display: grid; margin-top: clamp(32px, 4vw, 48px); border-top: 2px solid var(--c-ink); }
.b-pay__list > div { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.b-pay__list dt { font-weight: 900; font-size: 15px; }
.b-pay__list dd { font-size: 14px; color: var(--c-ink-3); line-height: 1.9; }
.b-pay__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
@media (min-width: 768px) { .b-pay__list > div { grid-template-columns: 12em 1fr; gap: 24px; align-items: baseline; } }

/* はじめ方：つくり方 ------------------------------------------------------------- */
.b-ways { padding: var(--sec) 0 clamp(56px, 7vw, 96px); }
.b-ways__paths { display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.b-ways__path {
	display: grid; gap: 10px; align-content: start; padding: clamp(28px, 3.4vw, 48px);
	border: 1px solid var(--c-ink); text-decoration: none; position: relative;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.b-ways__path:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.5); }
.b-ways__path--dark { background: var(--c-ink); color: var(--c-white); }
.b-ways__en { font-family: var(--f-en); font-weight: 700; font-size: 14px; letter-spacing: 0.18em; color: var(--c-red); }
.b-ways__path b { font-size: clamp(26px, 3vw, 40px); font-weight: 900; line-height: 1.3; }
.b-ways__desc { font-size: 14px; line-height: 1.9; color: var(--c-ink-3); max-width: 30em; }
.b-ways__path--dark .b-ways__desc { color: rgba(255, 255, 255, 0.72); }
.b-ways__go { margin-top: 16px; font-weight: 700; font-size: 14px; display: inline-flex; gap: 8px; }
.b-ways__go::after { content: "↓"; font-family: var(--f-en); }
@media (min-width: 768px) { .b-ways__paths { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* はじめ方：手順 ----------------------------------------------------------------- */
.b-steps { padding: var(--sec) 0; border-top: 1px solid var(--c-line); }
.b-steps__inner { display: grid; gap: 48px; }
.b-steps__cta { margin-top: 32px; }
.b-steps__list { counter-reset: step; border-top: 2px solid var(--c-ink); }
.b-steps__list li { display: grid; gap: 6px; padding: 26px 0 28px 0; border-bottom: 1px solid var(--c-line); position: relative; }
.b-steps__num { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--c-red); display: flex; align-items: baseline; gap: 6px; }
.b-steps__num b { font-size: 28px; letter-spacing: 0; }
.b-steps__list h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 900; }
.b-steps__list p { font-size: 14px; line-height: 1.9; color: var(--c-ink-3); }
.b-steps__help {
	margin-top: 40px; padding: 24px clamp(20px, 3vw, 36px); background: var(--c-paper-2);
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 14px; line-height: 1.8;
}
.b-steps__help b { font-size: 16px; }
.b-steps--dark { background: var(--c-ink); color: var(--c-white); border-top: 0; }
.b-steps--dark .b-steps__list { border-top-color: var(--c-white); }
.b-steps--dark .b-steps__list li { border-bottom-color: var(--c-line-w); }
.b-steps--dark .b-steps__list p { color: rgba(255, 255, 255, 0.72); }
@media (min-width: 768px) {
	.b-steps__list li { grid-template-columns: 7em 1fr; column-gap: 24px; row-gap: 6px; align-items: baseline; }
	.b-steps__num { grid-row: span 2; }
}
@media (min-width: 1024px) {
	.b-steps__inner { grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
	.b-steps__head { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* はじめ方：用意するもの ----------------------------------------------------------- */
.b-prepare { padding: var(--sec) 0; }
.b-prepare__list { display: grid; margin-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--c-ink); }
.b-prepare__list li { display: grid; gap: 8px; align-content: start; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.b-prepare__list .c-tag { justify-self: start; }
.b-prepare__list b { font-size: 17px; font-weight: 900; }
.b-prepare__list li > span:last-child { font-size: 14px; color: var(--c-ink-3); line-height: 1.85; }
@media (min-width: 768px) {
	.b-prepare__list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* はじめ方：動作環境 ------------------------------------------------------------- */
.b-env { padding: var(--sec) 0; background: var(--c-paper-2); }
.b-env__inner { display: grid; gap: 32px; }
.b-env .b-pay__list { margin-top: 0; }
.b-env__cta { margin-top: 28px; }
@media (min-width: 1024px) { .b-env__inner { grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; } }