/* ファームコネクト 直販総合支援LP（/tyokuhan/） フルカスタム静的サイト・vw連動rem方式（PC 1920px設計） 1rem = 10px @1920px幅。各値は px ÷ 10 = rem で指定する。 SP（375px設計）は @media(max-width:768px) でルートを切り替える。 */ /* ===== 直販LPスコープ隔離（WPヘッダー/フッター同居対応・2026-07-07）===== ・vw連動の基準を html font-size → CSS変数 --u へ移行（ルートを16pxに保ちSWELLヘッダー/フッターの潰れを防止） ・リセット/基底/カラー変数を .l-tyokuhan 配下へスコープ（SWELLへの染み出し防止） ・全rem値は後段で calc(N * var(--u)) へ一括変換済み（1単位=旧1rem） */ .l-tyokuhan { --u: min(calc(100vw / 192), 10px); /* 1920px設計：1単位=10px相当（旧 html font-size を変数化） */ --color-main: #346A1B; /* ブランドグリーン（XDシーングラフ実測。旧#1a6b00は誤り） */ --color-main-dark: #2A5715; --color-accent: #E2AE38; /* CTA・バッジのオレンジ（XD実測） */ --color-badge-text: #E0F25A; /* バッジ文字の黄緑（XD実測。白ではない） */ --color-card: #9EBE48; /* CTAカード等の薄黄緑（描画ピクセル実測。データの#346A1Bは誤り） */ --color-text: #333333; --color-bg: #ffffff; --color-border: #dcdcdc; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.12); --font-base: "Zen Kaku Gothic New", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* XD設計フォント（Google Fonts）を先頭に */ position: relative; /* 絶対配置の基準をSWELLの #content(.l-content) でなくLP自身に固定 */ box-sizing: border-box; margin: 0; padding-top: 0; /* 実SWELLヘッダー導入により旧「上部帯」は不要（ヘッダー直下にheroを置く） */ font-family: var(--font-base); font-weight: 400; /* SWELL body の font-weight:500 を継承しないよう素の400に戻す */ color: var(--color-text); background: var(--color-bg); line-height: 1.7; overflow-x: clip; /* vw設計のわずかな横はみ出しを抑止（hiddenと違いoverflow-yをautoにしない） */ } @media (max-width: 768px) { .l-tyokuhan { --u: calc(100vw / 37.5); /* 375px設計 */ } } /* margin/paddingリセットは .l-tyokuhan *(0,1,0)＝SWELLの p{margin}等(0,0,1)を打ち消す強さが必要。 LP各セクションのクラス(0,1,0)とは同点になり、後勝ち（LPクラスは後方定義）でLPが優先される。 */ .l-tyokuhan * { box-sizing: border-box; margin: 0; padding: 0; } /* a/img/見出しの色・装飾は :where()(0 specificity)でスコープ。 .l-tyokuhan 接頭辞だと (0,1,1) となりLPのクラス色指定(0,1,0)を上書きしてしまう（＝文字色化けの原因）。 :where で (0,0,1) にすると、SWELLの素の要素スタイルとは同点→後勝ちで打ち消しつつ、LPクラスは尊重される。 */ :where(.l-tyokuhan) img { max-width: 100%; display: block; } :where(.l-tyokuhan) a { color: inherit; text-decoration: none; } :where(.l-tyokuhan) :is(h1, h2, h3, h4, h5, h6) { color: inherit; } /* SWELL見出し色#1a6b00の染み出しを打ち消す（サイズ/太さはLPクラスが指定） */ /* body既定マージンのリセット（このページのbodyのみ・他ページ非影響）。 WPではSWELLが既に0だが、単体プレビュー(index.html)ではUA既定8pxが残り .l-tyokuhan が画面幅にならず左8pxずれる不具合になるため明示リセット。 */ body.page-tyokuhan { margin: 0; } /* SWELLのコンテンツ幅ラッパーを /tyokuhan/ でフルブリード化＋上下余白除去（このCSSは当ページのみ読込のため他ページに影響しない） ※標準文脈では #content.l-content.l-container の直下にLPが入る（main/l-mainContent__inner は無い）。実DOMで確認済 */ #content.l-content { max-width: none; margin: 0; padding: 0; } /* LP直後に出るSWELLパンくずはLPでは非表示 */ #breadcrumb { display: none; } /* SWELLヘッダーは当ページ完全非表示（PC/SP共通・後藤指示 2026-07-21）。 get_header() は /wp_head の出力元のため削除できず、DOMのみ隠す。 .l-fixHeader はスクロールでJSがクラス/インラインstyleを付けるため !important で確実に落とす。 */ #header, .l-header, .l-fixHeader, .p-fixHeaderPlaceholder { display: none !important; } /* ---------- 共通: 右サイド固定CTA（Figma 10:961。右端フラッシュ・アイコン上＋縦書き下。1rem=10px） ---------- */ .global-float-cta { position: fixed; top: calc(18 * var(--u)); /* Figma y=108→実ヘッダー分下げて180px相当（要調整） */ right: 0; z-index: 50; display: flex; flex-direction: column; gap: calc(1.6 * var(--u)); /* Figma gap-16 */ } /* アイコンを上、縦書きテキストを下に積む（内容＋py12で高さ確定＝gapなし） */ .global-float-cta__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.8 * var(--u)); /* アイコン↔文字を少し開ける */ width: calc(10 * var(--u)); /* アイコン/文字の幅を広げる（旧86→100） */ color: #fff; font-weight: 700; padding: calc(1.2 * var(--u)) 0; /* Figma py-12 */ border-radius: calc(1.5 * var(--u)) 0 0 calc(1.5 * var(--u)); /* 角丸15px（右端フラッシュ＝左角のみ） */ box-shadow: 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.5); /* 白グロー 0 0 10 #FFFFFF 50% */ } .global-float-cta__btn span { writing-mode: vertical-rl; text-orientation: upright; /* 英字(LINE)も1文字ずつ縦向き */ white-space: nowrap; font-size: calc(2.4 * var(--u)); /* Figma 24px */ line-height: calc(2.8 * var(--u)); /* Figma leading-28 */ letter-spacing: calc(0.12 * var(--u)); /* Figma tracking-1.2 */ } .global-float-cta__icon { width: calc(3.2 * var(--u)); } .global-float-cta__btn--orange .global-float-cta__icon { width: calc(3 * var(--u)); } /* mail 30×23 */ .global-float-cta__btn--green .global-float-cta__icon { width: calc(4.3 * var(--u)); } /* LINE 43×43 */ .global-float-cta__btn--orange { background: #e2ae38; /* Figma #E2AE38 */ height: calc(21.5 * var(--u)); /* Figma h-215 */ } .global-float-cta__btn--green { background: #346a1b; /* Figma #346A1B */ height: calc(31.9 * var(--u)); /* Figma h-319 */ } /* ---------- sec-hero（Figma 10:546 から再構築。CTAはaboutへ移設） ---------- */ .sec-hero { position: relative; display: flex; flex-direction: column; gap: calc(4.4 * var(--u)); /* Figma gap-44 */ padding: 0 0 calc(4 * var(--u)) calc(26 * var(--u)); /* pl-260 / pb-40。上余白なし（実SWELLヘッダー直下にheroを密着） */ background: #ffffff; } .sec-hero__top { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; } .sec-hero__copy { display: flex; flex-direction: column; gap: calc(0.3 * var(--u)); /* Figma gap-3 */ } .sec-hero__copy-head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(2.4 * var(--u)); /* Figma gap-24 */ } .sec-hero__lead { font-size: calc(2.8 * var(--u)); font-weight: 700; letter-spacing: calc(0.14 * var(--u)); /* Figma tracking-1.4 */ color: #000000; white-space: nowrap; } .sec-hero__badge { position: relative; display: flex; align-items: center; justify-content: center; width: calc(55.6 * var(--u)); /* Figma 556 */ height: calc(6.5 * var(--u)); /* Figma 65 */ background: #346A1B; color: #E0F25A; font-size: calc(3.2 * var(--u)); font-weight: 700; white-space: nowrap; } .sec-hero__badge::after { /* 下向きの吹き出しツノ（Figma Union の尾） */ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-left: calc(1.15 * var(--u)) solid transparent; border-right: calc(1.15 * var(--u)) solid transparent; border-top: calc(1.2 * var(--u)) solid #346A1B; } .sec-hero__copy-title { display: flex; flex-direction: column; align-items: flex-start; gap: calc(0.8 * var(--u)); /* Figma gap-8 */ } .sec-hero__title-line1 { font-size: calc(8.9 * var(--u)); font-weight: 700; letter-spacing: calc(0.445 * var(--u)); /* Figma tracking-4.45 */ color: #346A1B; white-space: nowrap; } .sec-hero__title-row { display: flex; align-items: baseline; gap: calc(3.8 * var(--u)); /* Figma gap-38 */ } .sec-hero__title-box { display: flex; align-items: center; justify-content: center; width: calc(41.3 * var(--u)); /* Figma 413 */ height: calc(16.1 * var(--u)); /* Figma 161 */ border: calc(1 * var(--u)) solid #346A1B; /* Figma border-10 */ font-size: calc(12.4 * var(--u)); font-weight: 700; line-height: 1; color: #346A1B; } .sec-hero__title-suffix { font-size: calc(6.1 * var(--u)); font-weight: 700; color: #346A1B; white-space: nowrap; } .sec-hero__photo { flex: 0 0 calc(99.8 * var(--u)); /* Figma 998 */ height: calc(54.2 * var(--u)); /* Figma 542 */ border-radius: 0 0 0 calc(4 * var(--u)); /* 左下のみ角丸（デザイン準拠。旧は左上も丸めていた） */ overflow: hidden; } .sec-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 実績ピル4つ（左端x260始まり） */ .sec-hero__stats { list-style: none; display: flex; gap: calc(3 * var(--u)); /* Figma gap-30 */ } .sec-hero__stat { display: flex; align-items: flex-end; /* Figma items-end */ gap: calc(0.8 * var(--u)); /* Figma gap-8 */ } .sec-hero__bracket { width: calc(3.921 * var(--u)); /* Figma 39.21 */ height: calc(10.026 * var(--u)); /* Figma 100.258 */ margin-bottom: calc(0.64 * var(--u)); /* Figma pb-6.4 */ } .sec-hero__bracket--r { transform: scaleX(-1); } .sec-hero__stat-center { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); /* Figma gap-16（王冠 ↔ テキスト群） */ } .sec-hero__crown { width: calc(10.804 * var(--u)); /* Figma 108.04 */ height: calc(3.186 * var(--u)); /* Figma 31.864 */ } .sec-hero__stat-figures { display: flex; flex-direction: column; align-items: center; gap: calc(0.8 * var(--u)); /* Figma gap-8 */ } .sec-hero__stat-label { font-size: calc(1.4 * var(--u)); font-weight: 700; letter-spacing: calc(0.07 * var(--u)); color: #346A1B; white-space: nowrap; } .sec-hero__stat-num { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; font-size: calc(4 * var(--u)); font-weight: 600; line-height: 1; color: #346A1B; } .sec-hero__stat-unit { font-size: calc(1.5 * var(--u)); font-weight: 600; } .sec-hero__stat-sub { font-size: calc(1.2 * var(--u)); font-weight: 700; letter-spacing: calc(0.06 * var(--u)); color: #346A1B; } /* 実績ピルの時点注記（後藤指示 2026-07-21）。月桂樹の外側かつ「5,000万円」のピル内に持たせる ＝該当ピルの左右中央・すぐ下。ピル列の下に離して置くと4つ全体への注釈に見えてしまうため。 サイズ・太さ・色・字間は「以上」＝__stat-sub に合わせる */ /* 他のピルは align-items:flex-end で下揃え。このピルだけ column なので justify-content で同じ下揃えにする */ .sec-hero__stat--noted { position: relative; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; } .sec-hero__stat-row { display: flex; align-items: flex-end; gap: calc(0.8 * var(--u)); } /* 注記はフロー外（絶対配置）。フローに置くとこのピルだけ縦に伸び、 ul の stretch で4つ目のメダルだけ20px上にズレるため。 */ .sec-hero__stat-note { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: calc(1.2 * var(--u)); font-weight: 700; letter-spacing: calc(0.06 * var(--u)); color: #346A1B; white-space: nowrap; } .sec-hero__person { position: absolute; right: calc(26.05 * var(--u)); /* Figma right-260.51 */ bottom: 0; width: calc(34.249 * var(--u)); /* Figma 342.49 */ height: auto; z-index: 2; } /* ---------- sec-about（Figma 10:646。CTA=Figma 10:642 を移設） ---------- */ /* 白地セクション（Figma 10:646：bg白・pt-200。CTAはこの上部に絶対配置で重なる） */ .sec-about { position: relative; display: flex; flex-direction: column; align-items: center; background: #ffffff; } /* 緑hexパネル（Figma 10:644：上に200px白を空け、pt-360 pb-160 px-360） */ .sec-about__panel { position: relative; z-index: 1; width: 100%; margin-top: calc(20 * var(--u)); /* Figma pt-200（白帯） */ display: flex; flex-direction: column; align-items: center; padding: calc(36 * var(--u)) calc(36 * var(--u)) calc(16 * var(--u)); /* Figma pt-360 / px-360 / pb-160 */ background: #E6F5E4; overflow: hidden; } .sec-about__panel::before { /* 六角メッシュ背景（パネル内のみ） */ content: ""; position: absolute; inset: 0; background: url("../img/sec-about/sec-about3.webp") center / cover no-repeat; opacity: 0.35; pointer-events: none; z-index: 0; } /* CTA（Figma 10:642：x266 w1400 h396）：パネル上端に重ね、白帯にまたがせて中央配置 */ .sec-about__cta { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; width: calc(140 * var(--u)); /* Figma w-1400 */ max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(4.8 * var(--u)); /* Figma gap-48 */ padding: calc(7 * var(--u)) calc(10 * var(--u)); /* Figma py-70 / px-100 */ background: #9EBE48; border-radius: calc(2 * var(--u)); box-shadow: 0 calc(0.3 * var(--u)) calc(0.6 * var(--u)) rgba(0, 0, 0, 0.16); /* 白枠から移設したドロップシャドウ */ } .sec-about__cta-border { /* Figma 10:643 白内枠：ボックス内で中央揃え（inset均等） */ position: absolute; inset: calc(1.6 * var(--u)); border: calc(0.2 * var(--u)) solid #ffffff; border-radius: calc(2 * var(--u)); pointer-events: none; } .sec-about__cta-pill { position: relative; background: #ffffff; border-radius: calc(5 * var(--u)); padding: calc(1.3 * var(--u)) calc(3.8 * var(--u)); /* Figma py-13 / px-38 */ } .sec-about__cta-pill p { font-size: calc(2.4 * var(--u)); font-weight: 700; letter-spacing: calc(0.12 * var(--u)); color: #333333; white-space: nowrap; } .sec-about__cta-pill strong { font-size: calc(3 * var(--u)); color: #346A1B; } .sec-about__cta-row { position: relative; display: flex; gap: calc(4.8 * var(--u)); /* Figma gap-48 */ justify-content: center; width: 100%; } .sec-about__cta-col { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); /* Figma gap-16 */ } .sec-about__cta-label { display: flex; align-items: center; gap: calc(0.8 * var(--u)); /* Figma gap-8 */ font-size: calc(2.4 * var(--u)); font-weight: 700; letter-spacing: calc(0.12 * var(--u)); color: #ffffff; } .sec-about__cta-label img { width: calc(3.6 * var(--u)); height: calc(3.2 * var(--u)); object-fit: contain; } .sec-about__cta-btn { display: flex; align-items: center; justify-content: center; gap: calc(1.6 * var(--u)); /* Figma gap-16 */ flex-shrink: 0; width: calc(57 * var(--u)); /* Figma 570 */ height: calc(8.8 * var(--u)); /* Figma 88 */ border-radius: calc(1 * var(--u)); color: #ffffff; font-size: calc(2.4 * var(--u)); font-weight: 700; letter-spacing: calc(0.12 * var(--u)); filter: drop-shadow(calc(0.6 * var(--u)) calc(0.6 * var(--u)) 0 #ffffff); } .sec-about__cta-btn img { width: calc(4 * var(--u)); height: auto; } .sec-about__cta-btn--orange { background: #E2AE38; } .sec-about__cta-btn--green { background: #346A1B; } /* 白カード（Figma 10:649） */ .sec-about__card { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(9.1 * var(--u)); /* Figma gap-91 */ padding: calc(18 * var(--u)) calc(22.5 * var(--u)) calc(16 * var(--u)); /* Figma pt-180 / px-225 / pb-160 */ background: #ffffff; border-radius: calc(4 * var(--u)); /* Figma rounded-40 */ box-shadow: 0 calc(0.3 * var(--u)) calc(0.3 * var(--u)) rgba(0, 0, 0, 0.16); } .sec-about__border { /* Figma 10:667 緑内枠 */ position: absolute; inset: calc(3 * var(--u)); /* 上下左右 均等インセットで中央配置（旧: 固定寸法top41/left30で非対称だった） */ border: calc(0.5 * var(--u)) solid #346A1B; border-radius: calc(4 * var(--u)); pointer-events: none; } .sec-about__watermark { position: absolute; top: calc(23.8 * var(--u)); left: 50%; transform: translate(-50%, -50%); font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: calc(1 * var(--u)); color: rgba(52, 106, 27, 0.05); white-space: nowrap; user-select: none; } .sec-about__heading { position: relative; font-size: calc(8 * var(--u)); font-weight: 700; letter-spacing: calc(0.4 * var(--u)); color: #346A1B; text-align: center; white-space: nowrap; } .sec-about__heading-suffix { font-size: calc(6 * var(--u)); } .sec-about__lead { position: relative; font-size: calc(2.4 * var(--u)); font-weight: 700; line-height: calc(6.6 * var(--u)); /* Figma leading-66 */ letter-spacing: calc(0.12 * var(--u)); color: #333333; text-align: center; } .sec-about__person { /* パネル基準・下辺をカード下端に接地 */ position: absolute; z-index: 2; bottom: calc(16 * var(--u)); /* Figma pb-160 相当（カード下端） */ height: auto; } .sec-about__person--left { left: calc(26 * var(--u)); /* Figma left-260 */ width: calc(34.38 * var(--u)); /* Figma 343.8 */ } .sec-about__person--right { left: calc(137.2 * var(--u)); /* Figma left-1372 */ width: calc(28.79 * var(--u)); /* Figma 287.9 */ } /* ---------- sec-problem（data.json: heading60/worry26/marker16。吹き出し・夫婦イラストはvector=POLISH-LEDGER） ---------- */ /* ---------- sec-problem（Figma 10:670。px-260 py-160・見出し＋中央イラスト＋6吹き出し絶対配置） ---------- */ .sec-problem { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(31.4 * var(--u)); /* Figma gap-314（見出し→イラスト） */ padding: calc(16 * var(--u)) calc(26 * var(--u)); /* Figma py-160 / px-260 */ background: #ffffff; } .sec-problem__heading { display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--u)); /* Figma gap-10 */ width: 100%; font-weight: 700; } .sec-problem__heading-text { font-size: calc(6 * var(--u)); /* 60px */ letter-spacing: calc(0.3 * var(--u)); /* tracking-3px */ color: #333333; white-space: nowrap; } /* 『お悩み』緑箱（Figma 10:679：269×95・角丸なし・80px白）。ドットは箱の上 */ .sec-problem__mark { position: relative; display: flex; align-items: center; justify-content: center; width: calc(26.9 * var(--u)); /* Figma 269 */ height: calc(9.5 * var(--u)); /* Figma 95 */ background: #346a1b; color: #ffffff; font-size: calc(8 * var(--u)); /* 80px */ letter-spacing: calc(0.4 * var(--u)); /* tracking-4px */ white-space: nowrap; } /* 『お悩み』上の3ドット（Figma 10:685：緑・幅184px・箱中央） */ .sec-problem__dots { position: absolute; bottom: calc(100% + calc(1 * var(--u))); left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; width: calc(18.4 * var(--u)); /* Figma Frame42 184 */ } .sec-problem__dots span { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); border-radius: 50%; background: #346a1b; } /* 中央の夫婦イラスト（Figma 10:686：450.55×421.079） */ .sec-problem__figure { width: calc(45.055 * var(--u)); height: auto; } /* 吹き出し（Figma 10:688 ほか）：白地・緑枠・下向き尾・第2行に#E0F25Aマーカー */ .sec-problem__bubble { position: absolute; display: flex; align-items: center; justify-content: center; height: calc(14.4 * var(--u)); /* Figma h-144 */ background: #ffffff; border: calc(0.2 * var(--u)) solid #346a1b; border-radius: calc(1.6 * var(--u)); } /* Figma 実座標（frame原点＝section左上。px-260 padding は絶対配置に非干渉） */ .sec-problem__bubble--1 { left: calc(40.7 * var(--u)); top: calc(33.5 * var(--u)); width: calc(39.9 * var(--u)); } /* 10:688 */ .sec-problem__bubble--2 { left: calc(26.0 * var(--u)); top: calc(53.5 * var(--u)); width: calc(48.3 * var(--u)); } /* 10:693 */ .sec-problem__bubble--3 { left: calc(30.6 * var(--u)); top: calc(73.5 * var(--u)); width: calc(36.3 * var(--u)); } /* 10:700 */ .sec-problem__bubble--4 { left: calc(93.8 * var(--u)); top: calc(36.5 * var(--u)); width: calc(55.8 * var(--u)); } /* 10:707 */ .sec-problem__bubble--5 { left: calc(124.1 * var(--u)); top: calc(56.5 * var(--u)); width: calc(40.8 * var(--u)); } /* 10:714 */ .sec-problem__bubble--6 { left: calc(125.8 * var(--u)); top: calc(76.5 * var(--u)); width: calc(35.5 * var(--u)); } /* 10:721 */ .sec-problem__worry { font-size: calc(2.6 * var(--u)); /* 26px */ font-weight: 700; line-height: calc(4.2 * var(--u)); /* Figma leading-42 */ letter-spacing: calc(0.13 * var(--u)); /* tracking-1.3px */ color: #346a1b; text-align: center; } /* 第2行フレーズのハイライト（Figma 各 #E0F25A 矩形 h16＝文字下側に敷く） */ .sec-problem__mk { background: linear-gradient(transparent 58%, #e0f25a 58%); } /* 下向き▽の尾（緑枠＝green三角の上にwhite三角） */ .sec-problem__bubble::before, .sec-problem__bubble::after { content: ""; position: absolute; width: 0; height: 0; } .sec-problem__bubble::before { /* 緑の外形 */ bottom: calc(-2.5 * var(--u)); border-left: calc(1.45 * var(--u)) solid transparent; border-right: calc(1.45 * var(--u)) solid transparent; border-top: calc(2.5 * var(--u)) solid #346a1b; } .sec-problem__bubble::after { /* 白の内側 */ bottom: calc(-2 * var(--u)); border-left: calc(1.2 * var(--u)) solid transparent; border-right: calc(1.2 * var(--u)) solid transparent; border-top: calc(2.1 * var(--u)) solid #ffffff; } /* 左列（couple側＝右寄りに尾） */ .sec-problem__bubble--1::before, .sec-problem__bubble--2::before, .sec-problem__bubble--3::before { right: calc(3.95 * var(--u)); } .sec-problem__bubble--1::after, .sec-problem__bubble--2::after, .sec-problem__bubble--3::after { right: calc(4.2 * var(--u)); } /* 右列（couple側＝左寄りに尾） */ .sec-problem__bubble--4::before, .sec-problem__bubble--5::before, .sec-problem__bubble--6::before { left: calc(3.95 * var(--u)); } .sec-problem__bubble--4::after, .sec-problem__bubble--5::after, .sec-problem__bubble--6::after { left: calc(4.2 * var(--u)); } /* ---------- sec-cost（data.json: 長方形2464緑背景・eyebrow30/heading80/watermark400/para20。白カード＋下向き尾はvector=POLISH-LEDGER） ---------- */ /* ---------- sec-cost（Figma 10:728。濃緑地・pt-160 pb-130 px-360・gap-64・ISSUES透かし） ---------- */ .sec-cost { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(6.4 * var(--u)); /* Figma gap-64（見出し→カード） */ padding: calc(16 * var(--u)) calc(36 * var(--u)) calc(13 * var(--u)); /* Figma pt-160 / px-360 / pb-130 */ background: #346a1b; overflow: hidden; } /* ISSUES透かし（Figma 10:740：400px・字間20px・rgba(255,255,255,0.05)・上289.5px中央） */ .sec-cost__watermark { position: absolute; top: calc(28.95 * var(--u)); left: 50%; transform: translate(-50%, -50%); font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: calc(2 * var(--u)); /* tracking-20px */ color: rgba(255, 255, 255, 0.05); white-space: nowrap; z-index: 0; pointer-events: none; user-select: none; } .sec-cost__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); /* Figma gap-16 */ } /* ＼ 利益が残りづらい今 ／（Figma 10:729：中40px・両端30px・#E0F25A・字間2px） */ .sec-cost__eyebrow { font-size: calc(4 * var(--u)); font-weight: 700; line-height: calc(4.2 * var(--u)); letter-spacing: calc(0.2 * var(--u)); color: #e0f25a; white-space: nowrap; } .sec-cost__eyebrow-mark { font-size: calc(3 * var(--u)); } /* 販売の見直しは（60px）／“後回しにできません”（80px）白・字間4px */ .sec-cost__heading { font-size: calc(8 * var(--u)); font-weight: 700; line-height: 1.3; letter-spacing: calc(0.4 * var(--u)); color: #ffffff; text-align: center; white-space: nowrap; } .sec-cost__heading-l1 { font-size: calc(6 * var(--u)); } /* 白カード（Figma 10:733：全幅・pt-76 pb-35 px-100・gap-84・items-start・下向き尾） */ .sec-cost__card { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(8.4 * var(--u)); width: 100%; padding: calc(5.5 * var(--u)) calc(10 * var(--u)); /* 上下同値：横並びを吹き出し□の上下中央に */ background: #ffffff; border-radius: calc(2 * var(--u)); text-align: left; } /* 葉デコ（sec-cost2：Figma 10:739 カード内・左51/上37・111.2×137.13） */ .sec-cost__card::before { content: ""; position: absolute; left: calc(5.1 * var(--u)); top: calc(3.7 * var(--u)); width: calc(11.12 * var(--u)); height: calc(13.71 * var(--u)); background: url("../img/sec-cost/sec-cost2.webp") left top / contain no-repeat; opacity: 0.5; pointer-events: none; z-index: 0; } /* 下向き尾（Union の三角部分） */ .sec-cost__card::after { content: ""; position: absolute; left: 50%; bottom: calc(-2.8 * var(--u)); transform: translateX(-50%); width: 0; height: 0; border-left: calc(2.8 * var(--u)) solid transparent; border-right: calc(2.8 * var(--u)) solid transparent; border-top: calc(2.8 * var(--u)) solid #ffffff; } .sec-cost__text { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; font-size: calc(2 * var(--u)); /* 20px */ font-weight: 500; /* Medium */ line-height: 1.7; letter-spacing: calc(0.1 * var(--u)); /* tracking-1px */ color: #333333; } .sec-cost__text p { margin: 0; /* Figma mb-0：段落間の余白なし */ } .sec-cost__text strong { font-weight: 700; /* Bold（Figmaは太字のみ・ハイライトなし） */ } /* 写真436×306＋#9EBE48オフセット影(+10,+10)・角丸10px */ .sec-cost__figure { flex: 0 0 calc(43.6 * var(--u)); } .sec-cost__figure img { width: calc(43.6 * var(--u)); height: calc(30.6 * var(--u)); border-radius: calc(1 * var(--u)); object-fit: cover; box-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 0 #9ebe48; } /* ---------- sec-solution（Figma 10:741。濃緑＋メッシュ背景・gap-80・pb-160） ---------- */ .sec-solution { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); /* Figma gap-80 */ padding: 0 0 calc(16 * var(--u)); /* Figma pb-160（pt/px なし） */ background: #346a1b; overflow: hidden; } /* メッシュ背景（Figma Frame52：上14.62%から高さ85.33%・全幅） */ .sec-solution::before { content: ""; position: absolute; inset: 0; background: url("../img/sec-solution/sec-solution1.webp") center bottom / 100% 85.33% no-repeat; z-index: 0; pointer-events: none; } .sec-solution__heading { position: relative; z-index: 1; text-align: center; font-size: calc(5 * var(--u)); /* 50px */ font-weight: 700; letter-spacing: calc(0.25 * var(--u)); /* tracking-2.5px */ line-height: calc(10 * var(--u)); /* Figma leading-100 */ white-space: nowrap; } .sec-solution__heading-l1 { display: block; color: #ffffff; } .sec-solution__heading-l2 { display: block; position: relative; color: #333333; /* Figma：2行目は濃グレー（帯の上） */ } /* #E0F25A 帯（Figma 10:745：880×88・2行目背後） */ .sec-solution__heading-l2::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(88 * var(--u)); height: calc(8.8 * var(--u)); background: #e0f25a; } .sec-solution__lead { position: relative; z-index: 1; width: calc(140 * var(--u)); /* Figma w-1400 */ font-size: calc(2.4 * var(--u)); /* 24px */ font-weight: 700; line-height: calc(6 * var(--u)); /* Figma leading-60 */ letter-spacing: calc(0.12 * var(--u)); color: #ffffff; text-align: center; } .sec-solution__accent { color: #e0f25a; } /* ---------- sec-reality（Figma 10:750。白地・gap-120・px-360 py-160・見出し2行+下線・チェック6+PC男性） ---------- */ .sec-reality { display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); /* Figma gap-120 */ padding: calc(16 * var(--u)) calc(36 * var(--u)); /* Figma py-160 / px-360 */ background: #ffffff; } /* 見出しブロック（Figma 10:752：gap-16・幅=見出し・下線はその全幅） */ .sec-reality__head { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); } .sec-reality__heading { font-weight: 700; line-height: calc(12 * var(--u)); /* Figma leading-120 */ text-align: center; white-space: nowrap; } .sec-reality__heading-l1 { display: block; font-size: calc(6 * var(--u)); /* 60px */ color: #000000; } .sec-reality__heading-l2 { display: block; font-size: calc(8 * var(--u)); /* 80px */ color: #346a1b; } /* 見出し下の横罫（Figma 10:753 Line5：見出し全幅） */ .sec-reality__rule { width: 100%; height: 0; border-top: calc(0.2 * var(--u)) solid #333333; } .sec-reality__body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); /* Figma gap-80 */ width: 100%; } /* リスト（左）と写真（右）：両端揃え */ .sec-reality__row { display: flex; align-items: center; justify-content: space-between; width: 100%; } .sec-reality__list { list-style: none; display: flex; flex-direction: column; gap: calc(2.4 * var(--u)); /* Figma gap-24 */ } .sec-reality__item { display: flex; align-items: center; gap: calc(2.5 * var(--u)); /* Figma gap-25 */ } /* チェックボックス（Figma sec-seminar4 2 = 65×62px。支給SVG sec-reality2.svg に差し替え） */ .sec-reality__check { flex: 0 0 auto; width: calc(6.5 * var(--u)); /* Figma 65 */ height: calc(6.2 * var(--u)); /* Figma 62 */ } .sec-reality__itext { font-size: calc(2.8 * var(--u)); /* 28px */ font-weight: 700; line-height: 1.4; color: #333333; white-space: nowrap; } /* キーフレーズの#E0F25Aハイライト（Figma 各矩形 h16＝文字下側） */ .sec-reality__mk { background: linear-gradient(transparent 58%, #e0f25a 58%); } /* PC男性（Figma 10:790：386.27×359.786） */ .sec-reality__figure { flex: 0 0 auto; width: calc(38.627 * var(--u)); height: auto; } .sec-reality__note { width: 100%; font-size: calc(2 * var(--u)); /* 20px */ font-weight: 500; /* Medium */ line-height: calc(4 * var(--u)); /* Figma leading-40 */ color: #333333; } /* ---------- sec-cause（Figma 10:794。px-360・緑角丸カード#9EBE48・白見出し[両脇ダッシュ]+白本文） ---------- */ .sec-cause { display: flex; align-items: flex-start; justify-content: center; padding: 0 calc(36 * var(--u)); /* Figma px-360（py なし＝上下は隣接セクション余白） */ background: #ffffff; } .sec-cause__card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(6.4 * var(--u)); /* Figma gap-64 */ padding: calc(8.2 * var(--u)) calc(10 * var(--u)); /* Figma py-82 / px-100 */ background: #9ebe48; border-radius: calc(3 * var(--u)); /* 角丸30px */ } .sec-cause__heading { display: flex; align-items: center; justify-content: center; gap: calc(3.95 * var(--u)); /* Figma gap-39.5 */ width: 100%; } .sec-cause__title { font-size: calc(5 * var(--u)); /* 50px */ font-weight: 700; color: #ffffff; text-align: center; white-space: nowrap; } .sec-cause__dash { width: calc(11 * var(--u)); /* Figma 110px */ height: 0; border-top: calc(0.2 * var(--u)) solid #ffffff; } .sec-cause__para { width: 100%; font-size: calc(2.4 * var(--u)); /* 24px */ font-weight: 500; /* Medium */ line-height: calc(4.8 * var(--u)); /* Figma leading-48 */ color: #ffffff; } /* ---------- sec-direction（Figma 10:802。pt-120 pb-160 px-360・gap-85.6・見出し[方向性=緑枠]・右に夫婦） ---------- */ .sec-direction { display: flex; align-items: center; justify-content: center; gap: calc(8.56 * var(--u)); /* Figma gap-85.6 */ padding: calc(12 * var(--u)) calc(36 * var(--u)) calc(16 * var(--u)); /* Figma pt-120 / px-360 / pb-160 */ background: #ffffff; } .sec-direction__body { flex: 0 0 auto; width: calc(76.803 * var(--u)); /* Figma w-768.03 */ display: flex; flex-direction: column; gap: calc(8 * var(--u)); /* Figma gap-80 */ } .sec-direction__heading { position: relative; display: flex; align-items: center; gap: calc(4.8 * var(--u)); /* Figma gap-48 */ } .sec-direction__h-lead { font-size: calc(8 * var(--u)); /* 「必要なのは」＝80px */ font-weight: 700; color: #333333; line-height: 1; white-space: nowrap; flex-shrink: 0; } .sec-direction__h-word { position: relative; /* 緑枠の基準 */ font-size: calc(10 * var(--u)); /* 「方向性」＝100px */ font-weight: 700; line-height: 1; color: #346a1b; white-space: nowrap; flex-shrink: 0; } /* 緑枠（Figma 10:807：347×125・border-5）。方向性テキスト基準で左-27px・縦中央（Figma x421/y10.06=グリフ中央） */ .sec-direction__h-frame { position: absolute; left: calc(-2.7 * var(--u)); /* Figma 枠x421 - 方向性x448 = -27px */ top: 50%; transform: translateY(-50%); width: calc(34.7 * var(--u)); /* Figma 347 */ height: calc(12.5 * var(--u)); /* Figma 125 */ border: calc(0.5 * var(--u)) solid #346a1b; pointer-events: none; } .sec-direction__texts { display: flex; flex-direction: column; gap: calc(4 * var(--u)); /* Figma gap-40 */ } .sec-direction__lead { font-size: calc(3 * var(--u)); /* 30px */ font-weight: 700; line-height: calc(6 * var(--u)); /* Figma leading-60 */ letter-spacing: calc(0.15 * var(--u)); /* tracking-1.5px */ color: #000000; } .sec-direction__mark { background: linear-gradient(transparent 58%, #d1e342 58%); } .sec-direction__sub { font-size: calc(2 * var(--u)); /* 20px */ font-weight: 500; /* Medium */ line-height: calc(4 * var(--u)); /* Figma leading-40 */ color: #000000; } .sec-direction__visual { flex: 0 0 auto; width: calc(34.637 * var(--u)); /* Figma w-346.37 */ height: auto; } /* ---------- sec-flow（Figma 10:817。ファームコネクト式 販売導線とは？ 4STEP導線＋成果カード5枚。1rem=10px） ---------- */ .sec-flow { position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(12 * var(--u)); padding:calc(16 * var(--u)) calc(26 * var(--u)); background:#e6f5e4; overflow:hidden; } /* SALE FLOW 背景透かし（get_design_context には無いが scene graph / 既存markupに準拠） */ .sec-flow__bg-text { position:absolute; top:calc(6 * var(--u)); left:50%; transform:translateX(-50%); z-index:0; font-size:calc(35 * var(--u)); font-weight:700; line-height:1; color:#ffffff; opacity:0.55; white-space:nowrap; pointer-events:none; } /* 上ブロック（見出し群＋4STEP） 10:871 */ .sec-flow__inner-top { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--u)); width:100%; } /* 見出し群 10:831 */ .sec-flow__head { display:flex; flex-direction:column; align-items:center; gap:calc(5.9 * var(--u)); } .sec-flow__head-title { display:flex; flex-direction:column; align-items:center; gap:calc(2.4 * var(--u)); width:calc(100 * var(--u)); } .sec-flow__label { display:inline-flex; align-items:center; padding:calc(0.4 * var(--u)) calc(2.5 * var(--u)); border-radius:calc(1 * var(--u)); background:#346a1b; font-size:calc(5 * var(--u)); font-weight:700; letter-spacing:calc(0.25 * var(--u)); color:#ffffff; white-space:nowrap; } .sec-flow__heading { font-size:calc(8 * var(--u)); font-weight:700; letter-spacing:calc(0.4 * var(--u)); color:#346a1b; line-height:1; white-space:nowrap; } .sec-flow__divider { width:calc(100 * var(--u)); } /* 10:825 line+diamond → sec-flow5.webp */ .sec-flow__divider img { display:block; width:100%; height:auto; } .sec-flow__lead { width:calc(100 * var(--u)); font-size:calc(2.4 * var(--u)); font-weight:400; letter-spacing:calc(0.12 * var(--u)); line-height:calc(4.8 * var(--u)); color:#333333; } /* 4STEP 横並び 10:851 */ .sec-flow__steps { position:relative; display:flex; justify-content:space-between; align-items:flex-start; width:100%; margin:0; padding:0; list-style:none; } .sec-flow__steps-line { position:absolute; z-index:0; top:calc(5.6 * var(--u)); left:calc(15 * var(--u)); width:calc(112.2 * var(--u)); height:calc(0.8 * var(--u)); background:linear-gradient(to right, rgba(52,106,27,0.8), rgba(52,106,27,0.5)); } /* 10:870 */ .sec-flow__step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--u)); width:calc(30 * var(--u)); } .sec-flow__step-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; width:calc(12 * var(--u)); height:calc(12 * var(--u)); border-radius:calc(6 * var(--u)); color:#ffffff; text-align:center; font-weight:700; white-space:nowrap; } .sec-flow__step-badge--01 { background:#98b38c; } .sec-flow__step-badge--02 { background:#84a575; } .sec-flow__step-badge--03 { background:#70965e; } .sec-flow__step-badge--04 { background:#5c8748; } .sec-flow__step-badge-label { font-size:calc(2 * var(--u)); line-height:calc(2 * var(--u)); letter-spacing:calc(0.1 * var(--u)); } .sec-flow__step-badge-num { font-size:calc(5 * var(--u)); line-height:calc(5 * var(--u)); letter-spacing:calc(0.25 * var(--u)); } .sec-flow__step-body { display:flex; flex-direction:column; align-items:center; gap:calc(2.4 * var(--u)); width:calc(30 * var(--u)); } .sec-flow__step-title { font-size:calc(4 * var(--u)); font-weight:700; letter-spacing:calc(0.2 * var(--u)); color:#333333; line-height:1; text-align:center; } .sec-flow__step-photo { width:calc(30 * var(--u)); height:calc(30 * var(--u)); overflow:hidden; } .sec-flow__step-photo img { display:block; width:100%; height:100%; object-fit:cover; } .sec-flow__step-text { width:100%; font-size:calc(1.8 * var(--u)); font-weight:400; letter-spacing:calc(0.09 * var(--u)); line-height:calc(3.2 * var(--u)); color:#333333; } /* 成果見出し（左右装飾＋2行） 10:876 */ .sec-flow__results-head { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; gap:calc(4 * var(--u)); } .sec-flow__results-deco { width:calc(7.6 * var(--u)); height:calc(14 * var(--u)); object-fit:contain; } .sec-flow__results-heading { text-align:center; font-weight:700; letter-spacing:calc(0.2 * var(--u)); color:#333333; white-space:nowrap; } .sec-flow__results-lead { display:block; font-size:calc(4 * var(--u)); line-height:calc(8 * var(--u)); } .sec-flow__results-main { display:block; font-size:calc(6 * var(--u)); line-height:calc(8 * var(--u)); color:#346a1b; } /* 成果カード5枚 10:897 */ .sec-flow__results { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--u)); width:100%; } .sec-flow__card-row { display:flex; justify-content:center; align-items:flex-start; gap:calc(3.5 * var(--u)); width:100%; } .sec-flow__card { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; height:calc(20 * var(--u)); background:#ffffff; border-radius:calc(2 * var(--u)); box-shadow:0 calc(0.3 * var(--u)) calc(0.3 * var(--u)) rgba(0,0,0,0.16); } .sec-flow__card--wide { flex:0 0 auto; width:calc(82.5 * var(--u)); height:calc(20 * var(--u)); } .sec-flow__card-text { text-align:center; font-weight:700; letter-spacing:calc(0.15 * var(--u)); line-height:calc(6 * var(--u)); color:#333333; } /* 成果カードの注記（後藤指示 2026-07-21。sec-case__note と同文・同体裁）。 カード↔注記の間隔は sec-case__area と同値（PC 4u / SP 2u）にするため、 section の gap(12u) から切り離して __area でラップする＝sec-case と同じ構造。 */ .sec-flow__area { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--u)); width:100%; } .sec-flow__note { width:100%; font-size:calc(1.8 * var(--u)); font-weight:500; line-height:calc(3.6 * var(--u)); letter-spacing:calc(0.09 * var(--u)); color:#333333; } .sec-flow__card-l1 { font-size:calc(3 * var(--u)); } .sec-flow__card-l2 { font-size:calc(3 * var(--u)); background:linear-gradient(transparent 65%, #e0f25a 65%, #e0f25a 92%, transparent 92%); } /* 10:879等 下線マーカー #E0F25A h16 */ .sec-flow__card-num { font-size:calc(5 * var(--u)); color:#346a1b; } /* ---------- sec-merit（Figma 10:1008。濃緑背景#346a1b＋MERIT透かし／白カード5チェック＋5行ジグザグ解説。1rem=10px） ---------- */ .sec-merit { position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(17 * var(--u)); padding:calc(16 * var(--u)) calc(26 * var(--u)); background:#346a1b; overflow:hidden; } /* 背景 MERIT 透かし（Figma imgFrame92 = sec-merit6.webp。h56.81% top33.05% left0.47% w99.09%） */ .sec-merit__bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; } .sec-merit__watermark { position:absolute; top:33.05%; left:0.47%; width:99.09%; height:56.81%; object-fit:contain; } /* 見出し帯＋カード（10:1041 gap80） */ .sec-merit__head { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--u)); } .sec-merit__heading { display:flex; flex-direction:column; align-items:center; gap:calc(2.4 * var(--u)); } /* 10:1013 */ .sec-merit__label-box { display:flex; align-items:center; justify-content:center; width:calc(47 * var(--u)); height:calc(7.2 * var(--u)); border-top:calc(0.2 * var(--u)) solid #ffffff; border-bottom:calc(0.2 * var(--u)) solid #ffffff; } /* 10:1011 */ .sec-merit__label { font-size:calc(5 * var(--u)); font-weight:700; color:#ffffff; letter-spacing:calc(0.25 * var(--u)); white-space:nowrap; line-height:1; } /* 10:1010 */ .sec-merit__title { font-size:calc(8 * var(--u)); font-weight:700; color:#ffffff; letter-spacing:calc(0.4 * var(--u)); white-space:nowrap; line-height:1.16; } /* 10:1012 */ .sec-merit__title-em { color:#e0f25a; } /* 白カード（10:1037 px100 py64 w1200 gap40） */ .sec-merit__card { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--u)); width:calc(120 * var(--u)); padding:calc(6.4 * var(--u)) calc(10 * var(--u)); background:#ffffff; } .sec-merit__card::after { content:""; position:absolute; bottom:calc(-2.8 * var(--u)); left:50%; transform:translateX(-50%); border-left:calc(2.8 * var(--u)) solid transparent; border-right:calc(2.8 * var(--u)) solid transparent; border-top:calc(2.8 * var(--u)) solid #ffffff; } /* 下向き白三角（Union 10:1040 のarrow） */ .sec-merit__checklist { list-style:none; margin:0; padding:0; width:100%; border-top:calc(0.1 * var(--u)) solid #d8d8d8; } /* 10:1033 */ .sec-merit__check { display:flex; align-items:center; gap:calc(2.4 * var(--u)); padding:calc(2.4 * var(--u)) 0; border-bottom:calc(0.1 * var(--u)) solid #d8d8d8; } /* 10:1016… */ .sec-merit__check-icon { flex-shrink:0; width:calc(3.2 * var(--u)); height:calc(3.1 * var(--u)); } /* 支給SVG sec-reality2.svg（Figma sec-seminar4 3=32×31） */ .sec-merit__check-text { flex:1 0 0; min-width:0; font-size:calc(2.4 * var(--u)); font-weight:700; color:#333333; letter-spacing:calc(0.12 * var(--u)); line-height:1.4; } /* 10:1015… */ /* それぞれ詳しく解説します！（10:1035／下線ハイライト帯 10:1036） */ .sec-merit__more { position:relative; display:inline-flex; align-items:center; justify-content:center; margin:0; } .sec-merit__more-bar { position:absolute; left:0; top:calc(3.1 * var(--u)); width:calc(54.4 * var(--u)); height:calc(2.9 * var(--u)); background:#e0f25a; } .sec-merit__more-text { position:relative; z-index:1; font-size:calc(4 * var(--u)); font-weight:700; color:#346a1b; letter-spacing:calc(0.2 * var(--u)); white-space:nowrap; line-height:1; } /* 5行ジグザグ（10:1074 gap100 w-full） */ .sec-merit__rows { position:relative; z-index:1; display:flex; flex-direction:column; gap:calc(10 * var(--u)); width:100%; } .sec-merit__row { display:flex; align-items:center; justify-content:center; gap:calc(6 * var(--u)); width:100%; padding-right:calc(14 * var(--u)); } /* 奇数=文左/写真右。gapは元(60px)・左右paddingを縮小して本文幅を確保（改行対策） */ .sec-merit__row--reverse { padding-right:0; padding-left:calc(14 * var(--u)); } /* 偶数=写真左/文右 */ .sec-merit__row-body { flex:1 0 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:calc(5.6 * var(--u)); color:#ffffff; } .sec-merit__row-title { font-size:calc(4 * var(--u)); font-weight:700; letter-spacing:calc(0.2 * var(--u)); line-height:calc(6 * var(--u)); } .sec-merit__row-title--wrap { white-space:normal; } /* row4は折り返し（Figmaは1

全幅） */ .sec-merit__row-text { font-size:calc(2 * var(--u)); font-weight:500; letter-spacing:calc(0.1 * var(--u)); line-height:calc(4 * var(--u)); font-feature-settings:"palt"; } /* 字詰めで改行を抑制 */ .sec-merit__row-figure { flex-shrink:0; width:calc(62 * var(--u)); } .sec-merit__row-figure img { display:block; width:100%; height:100%; object-fit:cover; } /* 各行の写真高さ（Figma実測 h=283/423/483/543/443px） */ .sec-merit__rows > .sec-merit__row:nth-child(1) .sec-merit__row-figure { height:calc(28.3 * var(--u)); } .sec-merit__rows > .sec-merit__row:nth-child(2) .sec-merit__row-figure { height:calc(42.3 * var(--u)); } .sec-merit__rows > .sec-merit__row:nth-child(3) .sec-merit__row-figure { height:calc(48.3 * var(--u)); } .sec-merit__rows > .sec-merit__row:nth-child(4) .sec-merit__row-figure { height:calc(54.3 * var(--u)); } .sec-merit__rows > .sec-merit__row:nth-child(5) .sec-merit__row-figure { height:calc(44.3 * var(--u)); } /* ---------- sec-case（Figma 10:1075。ファームコネクト式 販売導線の成功事例＋事例カルーセル。薄緑背景/白カード1200×824/緑120角box見出し 1rem=10px） ---------- */ .sec-case { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); /* 10:1075 gap-80 */ padding: calc(16 * var(--u)) calc(26 * var(--u)); /* 10:1075 py-160 px-260 */ background: #e6f5e4; } /* 見出し（10:1090 row：左＝ファームコネクト式/販売導線の、右＝成功事例 緑box） */ .sec-case__heading { display: flex; align-items: flex-start; justify-content: center; gap: calc(2 * var(--u)); /* 10:1090 gap-20 */ } .sec-case__heading-left { /* 10:1079 */ display: flex; flex-direction: column; align-items: flex-start; } .sec-case__heading-tag { /* 10:1077 上下ボーダー枠 */ display: flex; align-items: center; justify-content: center; width: calc(31.2 * var(--u)); height: calc(4.1 * var(--u)); border-top: calc(0.1 * var(--u)) solid #346a1b; border-bottom: calc(0.1 * var(--u)) solid #346a1b; font-size: calc(3 * var(--u)); /* 10:1076 Bold30 */ font-weight: 700; line-height: calc(4.1 * var(--u)); color: #346a1b; } .sec-case__heading-sub { /* 10:1078 Bold60 */ font-size: calc(6 * var(--u)); font-weight: 700; line-height: calc(7.2 * var(--u)); letter-spacing: calc(0.3 * var(--u)); color: #333333; white-space: nowrap; } .sec-case__heading-highlight { /* 10:1081/10:1089 成功事例 緑box列 */ display: inline-flex; gap: calc(1.6 * var(--u)); } .sec-case__heading-highlight-char { display: inline-flex; align-items: center; justify-content: center; width: calc(12 * var(--u)); /* 120角box */ height: calc(12 * var(--u)); background: #346a1b; font-size: calc(10 * var(--u)); /* 10:1080 Bold100 */ font-weight: 700; line-height: calc(12 * var(--u)); color: #ffffff; } /* カルーセル領域（10:1116 gap-40：カルーセル行＋注記） */ .sec-case__area { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); } /* カルーセル行（10:1114 gap-60：前矢印＋トラック＋後矢印） */ .sec-case__carousel { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); } .sec-case__nav { /* 10:1111 / 10:1112 矢印40×65 */ flex: 0 0 auto; width: calc(4 * var(--u)); height: calc(6.5 * var(--u)); padding: 0; border: none; background: transparent; cursor: pointer; } .sec-case__nav img { display: block; width: 100%; height: 100%; object-fit: contain; } .sec-case__track { /* ビューポート＝カード幅1200px */ flex: 0 1 calc(120 * var(--u)); min-width: 0; overflow: hidden; } .sec-case__track-inner { /* 全カード横一列・transformスライド（100%=カード1枚幅を確定） */ display: flex; align-items: stretch; width: 100%; transform: translateX(0); transition: transform 0.5s ease; will-change: transform; } .sec-case__card { /* 10:1110 白カード1200×824 */ flex: 0 0 100%; display: flex; gap: calc(8 * var(--u)); align-items: flex-start; justify-content: center; min-height: calc(82.4 * var(--u)); padding: calc(10.4 * var(--u)) calc(10 * var(--u)); background: #ffffff; border-radius: calc(2 * var(--u)); box-shadow: 0 calc(0.3 * var(--u)) calc(0.3 * var(--u)) rgba(0, 0, 0, 0.16); } .sec-case__media { /* 10:1093 左列 w420 gap-15 */ flex: 0 0 calc(42 * var(--u)); display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); /* 後藤指示 2026-07-22：左の画像と右のテキスト群は上揃えに（7/21の上下中央 center を廃止） */ align-self: flex-start; } .sec-case__photo, /* 10:1091 / 10:1092 aspect 840/600 */ .sec-case__proof { width: 100%; aspect-ratio: 840 / 600; overflow: hidden; } .sec-case__photo img, .sec-case__proof img { display: block; width: 100%; height: 100%; object-fit: cover; } .sec-case__content { /* 10:1109 右列 flex-1 gap-40 */ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); } .sec-case__head { /* 10:1098 gap-40（見出し＋区切り線） */ display: flex; flex-direction: column; gap: calc(4 * var(--u)); } .sec-case__title { /* 10:1096 gap-16 */ display: flex; flex-direction: column; gap: calc(1.6 * var(--u)); } .sec-case__name { /* 10:1095 Bold40 */ font-size: calc(4 * var(--u)); font-weight: 700; line-height: normal; letter-spacing: calc(0.2 * var(--u)); color: #333333; } .sec-case__divider { /* 10:1097 Line8 #707070 stroke2 w500 */ width: calc(50 * var(--u)); height: 0; margin: 0; border: none; border-top: calc(0.2 * var(--u)) solid #707070; } .sec-case__status { /* 10:1108 gap-32（導入前/導入後） */ display: flex; flex-direction: column; gap: calc(3.2 * var(--u)); } .sec-case__block { /* 10:1102 / 10:1103 gap-16 */ display: flex; flex-direction: column; gap: calc(1.6 * var(--u)); } .sec-case__badge { /* 10:1100 / 10:1104 緑バッジ120×40 */ display: flex; align-items: center; justify-content: center; width: calc(12 * var(--u)); height: calc(4 * var(--u)); background: #346a1b; font-size: calc(1.8 * var(--u)); font-weight: 700; line-height: normal; letter-spacing: calc(0.09 * var(--u)); color: #ffffff; } .sec-case__text { /* 10:1101 導入前 Medium18 lh36 */ font-size: calc(1.8 * var(--u)); font-weight: 500; line-height: calc(3.6 * var(--u)); letter-spacing: calc(0.09 * var(--u)); color: #333333; } .sec-case__text--after { /* 10:1106 導入後 Bold18 緑 */ font-weight: 700; color: #346a1b; } .sec-case__note { /* 10:1115 Medium18 lh36 w1200 */ width: calc(120 * var(--u)); max-width: 100%; font-size: calc(1.8 * var(--u)); font-weight: 500; line-height: calc(3.6 * var(--u)); letter-spacing: calc(0.09 * var(--u)); color: #333333; } /* ---------- sec-satisfaction（Figma 10:1118。満足度見出し＋左右ガッツポーズ人物(絶対配置)＋声カード横スクロール 1rem=10px） ---------- */ .sec-satisfaction { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); /* Figma root gap 120px */ padding-top: calc(16 * var(--u)); /* Figma pt 160px */ background: #ffffff; overflow: hidden; } /* 上部の葉の装飾帯（sec-satisfaction1）フル幅・背面 */ .sec-satisfaction__bg { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; } .sec-satisfaction__bg img { display: block; width: 100%; height: auto; } /* テキストブロック（見出し群＋本文、gap100px） */ .sec-satisfaction__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); /* Figma 10:1127 gap 100px */ } /* 見出し＋区切り（gap24px） */ .sec-satisfaction__head { display: flex; flex-direction: column; align-items: center; gap: calc(2.4 * var(--u)); /* Figma 10:1125 gap 24px */ } .sec-satisfaction__heading { text-align: center; font-weight: 700; line-height: calc(12 * var(--u)); /* Figma leading 120px */ letter-spacing: calc(0.3 * var(--u)); /* Figma tracking 3px */ white-space: nowrap; } .sec-satisfaction__heading-line1 { display: block; font-size: calc(6 * var(--u)); color: #333333; } /* 60px */ .sec-satisfaction__heading-line2 { display: block; font-size: calc(8 * var(--u)); } /* 80px */ .sec-satisfaction__heading-main { color: #346a1b; } /* お客様の / は高まります */ .sec-satisfaction__heading-accent { color: #9ebe48; } /* 満足度 */ /* 区切り装飾（sec-flow5 流用・幅1080px相当＝Figmaライン530+19.5+530） */ .sec-satisfaction__divider { width: calc(108 * var(--u)); max-width: 100%; } .sec-satisfaction__divider img { display: block; width: 100%; height: auto; } /* 本文 24px / leading60 / Medium / center */ .sec-satisfaction__text { font-size: calc(2.4 * var(--u)); font-weight: 500; line-height: calc(6 * var(--u)); /* Figma leading 60px */ color: #333333; text-align: center; } /* 左右ガッツポーズ人物＝section基準で絶対配置。下辺を声カード上端付近に接地 */ .sec-satisfaction__figure { position: absolute; bottom: calc(39 * var(--u)); z-index: 1; } /* Figma bottom ≈390px */ .sec-satisfaction__figure--left { left: calc(19.7 * var(--u)); width: calc(32.69 * var(--u)); } /* Figma left197 / w326.93 */ .sec-satisfaction__figure--right { right: calc(26.86 * var(--u)); width: calc(25.54 * var(--u)); } /* Figma right268.64 / w255.36 */ .sec-satisfaction__figure img { display: block; width: 100%; height: auto; } /* お客様の声カード＝フルブリード横スクロール（無限ループ・既存踏襲） */ .sec-satisfaction__voices-viewport { position: relative; z-index: 2; /* 声カードを人物イラスト(z-index:1)より前面に */ left: 50%; transform: translateX(-50%); width: 100vw; overflow: hidden; } .sec-satisfaction__voices { list-style: none; display: flex; /* --voices-gap / --voices-card は keyframes の送り量計算でも使う＝値を変えたらここ1箇所で追従する。 カード4枚×2セットのループ。送り量は1セット分＝「(カード幅+gap)×4」を固定長で指定する。 以前は「-50% - gap/2」の%指定だったが、iPhone Safari で1巡後にカードが消える事象が出たため %をやめて固定長に変更（%とlength混在calcのtransformはiOS Safariに解釈バグ報告あり。2026-07-22）。 */ --voices-gap: calc(2.4 * var(--u)); /* Figma 10:1134 gap 24px */ --voices-card: calc(56 * var(--u)); /* Figma card 560×400 */ gap: var(--voices-gap); width: max-content; margin: 0; padding: 0; animation: sec-satisfaction-scroll 40s linear infinite; } .sec-satisfaction__voice { flex: 0 0 var(--voices-card); overflow: hidden; } .sec-satisfaction__voice img { display: block; width: 100%; height: auto; } @keyframes sec-satisfaction-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-4 * (var(--voices-card) + var(--voices-gap)))); } } /* ---------- sec-clients（Figma 10:1138。実績カード5枚/月桂樹バッジ 上段3・下段2 1rem=10px） ---------- */ .sec-clients { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); /* header〜body gap 120px */ padding: calc(16 * var(--u)) calc(22.8 * var(--u)); /* py160 / px228 */ background: #ffffff; } .sec-clients__header { display: flex; flex-direction: column; align-items: flex-start; /* Figma items-start（左寄せ） */ gap: calc(6.4 * var(--u)); /* 見出し〜リード 64px */ } .sec-clients__heading-row { display: flex; justify-content: center; } .sec-clients__heading { font-size: calc(6 * var(--u)); /* 通常文字60px */ font-weight: 700; line-height: 1.375; /* 緑箱h110/文字80 相当 */ letter-spacing: calc(0.3 * var(--u)); /* tracking 3px */ color: #333333; white-space: nowrap; text-align: center; } .sec-clients__heading-normal { vertical-align: middle; } .sec-clients__heading-mark { /* 農家さん・農業法人：緑箱on白文字80px（10:1141/10:1142） */ display: inline-block; vertical-align: middle; font-size: calc(8 * var(--u)); line-height: 1.375; padding: 0 calc(0.5 * var(--u)); background: #346a1b; color: #ffffff; } .sec-clients__lead { width: calc(146.4 * var(--u)); /* Figma w1464px */ max-width: 100%; font-size: calc(3 * var(--u)); font-weight: 500; line-height: calc(4.8 * var(--u)); /* leading48 */ letter-spacing: calc(0.15 * var(--u)); /* tracking 1.5px */ color: #333333; } .sec-clients__body { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); /* 段間80px */ width: 100%; } .sec-clients__row { display: flex; justify-content: center; gap: calc(5.2 * var(--u)); /* カード間52px */ width: 100%; } .sec-clients__row--pad { padding: 0 calc(3.2 * var(--u)); } /* 下段のみ px32 */ .sec-clients__card { display: flex; flex-direction: column; align-items: center; gap: calc(2.4 * var(--u)); /* カード内要素間24px */ width: calc(43.2 * var(--u)); /* card 432px */ } /* ---- 月桂樹バッジ ---- */ .sec-clients__badge { display: flex; align-items: center; justify-content: space-between; width: calc(39.25 * var(--u)); /* Figma w392.5px */ } .sec-clients__badge-branch { flex: 0 0 auto; width: calc(3.747 * var(--u)); /* 枝 w37.47px */ height: calc(8.743 * var(--u)); /* 枝 h87.43px */ object-fit: contain; } /* 右枝は反転済み素材 sec-clients2 を使用（CSS反転は不要） */ .sec-clients__badge-text { text-align: center; letter-spacing: calc(0.12 * var(--u)); /* tracking 1.2px */ } .sec-clients__badge-small { display: block; font-size: calc(2.4 * var(--u)); font-weight: 500; /* Figma Medium */ line-height: calc(5.2 * var(--u)); /* leading52 */ color: #333333; } .sec-clients__badge-large { display: block; font-size: calc(4 * var(--u)); font-weight: 700; line-height: calc(5.2 * var(--u)); color: #346a1b; } /* 3枚目（文字数多）: 小22px/大30px・leading48 */ .sec-clients__badge--compact .sec-clients__badge-small { font-size: calc(2.2 * var(--u)); line-height: calc(4.8 * var(--u)); } .sec-clients__badge--compact .sec-clients__badge-large { font-size: calc(3 * var(--u)); line-height: calc(4.8 * var(--u)); } /* ---- 端末モック ---- */ .sec-clients__figure { width: calc(43.2 * var(--u)); height: calc(32 * var(--u)); /* h320px */ background: #e6f5e4; border-radius: calc(1 * var(--u)); /* rounded10 */ overflow: hidden; } .sec-clients__figure img { display: block; width: 100%; height: 100%; object-fit: cover; /* aspect864/640＝枠と同比でぴったり */ border-radius: calc(1 * var(--u)); } /* ---- 農園名・説明 ---- */ .sec-clients__name { align-self: stretch; font-size: calc(2.4 * var(--u)); font-weight: 700; line-height: 1.5; /* leading normal */ letter-spacing: calc(0.12 * var(--u)); color: #333333; } .sec-clients__text { align-self: stretch; font-size: calc(1.8 * var(--u)); font-weight: 400; line-height: calc(3.6 * var(--u)); /* leading36 */ letter-spacing: calc(0.09 * var(--u)); /* tracking 0.9px */ color: #333333; } /* ---------- sec-demerit ---------- */ .sec-demerit { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); /* texts ↔ cards（Figma gap-80） */ padding: calc(16 * var(--u)) calc(26 * var(--u)); /* Figma py-160 / px-260 */ overflow: hidden; isolation: isolate; } .sec-demerit__bg { position: absolute; inset: 0; z-index: -2; } .sec-demerit__bg::after { content: ""; position: absolute; inset: 0; background: rgba(27, 88, 106, 0.55); /* #1B586A 55% */ } .sec-demerit__bg img { width: 100%; height: 100%; object-fit: cover; } .sec-demerit__texts { display: flex; flex-direction: column; align-items: center; gap: calc(6.4 * var(--u)); /* head ↔ lead（Figma gap-64） */ } .sec-demerit__head { display: flex; flex-direction: column; align-items: center; gap: calc(1.7 * var(--u)); /* 見出し ↔ 点線（Figma gap-17） */ } .sec-demerit__title { font-size: calc(6 * var(--u)); font-weight: 700; line-height: normal; color: #ffffff; text-align: center; white-space: nowrap; } .sec-demerit__title-em { color: #E0F25A; font-size: calc(8 * var(--u)); } .sec-demerit__line { display: block; width: calc(106.1 * var(--u)); /* Figma 1061px 固定 */ height: calc(0.2 * var(--u)); background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0.6) calc(0.6 * var(--u)), transparent calc(0.6 * var(--u)), transparent calc(1.6 * var(--u))); } .sec-demerit__lead { font-size: calc(3 * var(--u)); font-weight: 700; color: #ffffff; text-align: center; } .sec-demerit__lead-line { display: block; line-height: calc(6 * var(--u)); /* Figma leading-60 */ } .sec-demerit__lead-hl { color: #E0F25A; } .sec-demerit__cards { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .sec-demerit__card { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); /* head ↔ 本文（Figma gap-40） */ width: calc(45 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(4.5 * var(--u)); /* Figma px-45 / py なし＝タブ上辺密着 */ background: #ffffff; border: calc(0.5 * var(--u)) solid #1B586A; border-radius: calc(2 * var(--u)); } .sec-demerit__card-head { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); /* タブ ↔ タイトル（Figma gap-50） */ width: 100%; } .sec-demerit__tab { display: flex; align-items: center; justify-content: center; width: calc(22 * var(--u)); height: calc(5.6 * var(--u)); background: #1B586A; color: #ffffff; font-size: calc(3 * var(--u)); font-weight: 700; line-height: calc(4.4 * var(--u)); letter-spacing: calc(0.3 * var(--u)); border-radius: 0 0 calc(2 * var(--u)) calc(2 * var(--u)); /* 下だけ角丸＝上辺密着 */ } .sec-demerit__card-title { font-size: calc(2.8 * var(--u)); font-weight: 700; line-height: calc(4.2 * var(--u)); letter-spacing: calc(0.14 * var(--u)); color: #1B586A; text-align: center; } /* POINT.03 は文字数が多く、Figma で字間 0.84px に詰めて回避 */ .sec-demerit__card-title--tight { letter-spacing: calc(0.084 * var(--u)); } .sec-demerit__card-text { width: 100%; font-size: calc(2 * var(--u)); font-weight: 700; line-height: calc(4 * var(--u)); letter-spacing: 0; /* 詰めて改行増加を抑制 */ font-feature-settings: "palt"; /* 約物・かなを詰める */ color: #333333; } /* ---------- sec-service ---------- */ .sec-service { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); /* head ↔ main（Figma gap-120） */ padding: calc(16 * var(--u)) calc(26 * var(--u)) 0; /* Figma pt-160 / px-260 / pb なし */ background: linear-gradient(to bottom, #E6F5E4 0%, #ffffff 100%); } .sec-service__head { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); /* eyebrow ↔ lead（Figma gap-80） */ width: 100%; color: #346A1B; text-align: center; } .sec-service__eyebrow { font-size: calc(8 * var(--u)); font-weight: 700; line-height: normal; letter-spacing: calc(0.4 * var(--u)); } .sec-service__eyebrow-tick { display: inline-block; font-size: calc(6 * var(--u)); font-weight: 700; } .sec-service__lead { font-size: calc(2.4 * var(--u)); font-weight: 700; line-height: calc(6 * var(--u)); /* Figma leading-60 */ letter-spacing: calc(0.12 * var(--u)); } .sec-service__main { display: flex; flex-direction: column; align-items: center; gap: calc(4.8 * var(--u)); /* divider ↔ cards（Figma gap-48） */ width: 100%; } .sec-service__divider { display: flex; align-items: center; justify-content: space-between; width: 100%; } .sec-service__divider-line { flex: 0 0 calc(23 * var(--u)); /* Figma 230px */ height: calc(0.2 * var(--u)); background: #333333; } .sec-service__divider-title { font-size: calc(5 * var(--u)); font-weight: 700; line-height: normal; letter-spacing: calc(0.25 * var(--u)); color: #333333; white-space: nowrap; } .sec-service__cards-group { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); /* cards ↔ 注記（Figma gap-40） */ width: 100%; } .sec-service__cards { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .sec-service__card { position: relative; box-sizing: border-box; width: calc(45 * var(--u)); height: calc(45 * var(--u)); /* Figma 450×450 */ display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(5.75 * var(--u)) calc(5 * var(--u)) calc(5.5 * var(--u)); /* Figma pt-57.5 / px-50 / pb-55 */ background: #9EBE48; border-radius: calc(2 * var(--u)); color: #ffffff; } .sec-service__card-stroke { position: absolute; inset: calc(1.3 * var(--u)); /* Figma 424/450 → inset 13px */ border: calc(0.4 * var(--u)) solid #ffffff; border-radius: calc(1 * var(--u)); pointer-events: none; } .sec-service__card-icon { height: calc(17.95 * var(--u)); /* Figma h-179.538 */ width: auto; } .sec-service__card-texts { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); /* Figma gap-16 */ width: 100%; } .sec-service__card-title { font-size: calc(3 * var(--u)); font-weight: 700; line-height: normal; letter-spacing: calc(0.15 * var(--u)); } .sec-service__card-text { font-size: calc(2 * var(--u)); font-weight: 700; line-height: calc(4 * var(--u)); /* Figma leading-40 */ letter-spacing: calc(0.1 * var(--u)); } .sec-service__notes { width: 100%; font-size: calc(2 * var(--u)); font-weight: 500; line-height: calc(4 * var(--u)); /* Figma leading-40 */ letter-spacing: calc(0.1 * var(--u)); color: #000000; text-align: left; } /* ---------- sec-strength ---------- */ .sec-strength { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); /* head ↔ list（Figma gap-120） */ padding: calc(16 * var(--u)) calc(36 * var(--u)); /* Figma py-160 / px-360 */ background: #ffffff; } .sec-strength__head { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); /* tag ↔ title（Figma gap-16） */ width: 100%; } .sec-strength__tag { display: flex; align-items: center; justify-content: center; width: calc(40.4 * var(--u)); height: calc(6.4 * var(--u)); /* Figma 404×64 */ background: #346A1B; color: #ffffff; font-size: calc(4 * var(--u)); font-weight: 700; letter-spacing: calc(0.2 * var(--u)); border-radius: calc(4 * var(--u)); white-space: nowrap; } .sec-strength__title { font-size: calc(8 * var(--u)); font-weight: 700; line-height: normal; letter-spacing: calc(0.4 * var(--u)); color: #333333; text-align: center; white-space: nowrap; } .sec-strength__title-bracket { color: #346A1B; } .sec-strength__list { list-style: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); /* カード間を広げる（旧64→80） */ width: 100%; } .sec-strength__item { display: flex; align-items: center; justify-content: center; gap: calc(6.4 * var(--u)); /* テキスト ↔ 画像（Figma gap-64） */ width: 100%; } .sec-strength__item-text { flex: 1 0 0; min-width: 0; } .sec-strength__item-label { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); /* Figma gap-10 */ font-size: calc(2 * var(--u)); font-weight: 700; color: #346A1B; letter-spacing: calc(0.1 * var(--u)); margin-bottom: calc(1.6 * var(--u)); /* label ↔ title（Figma gap-16） */ } .sec-strength__item-num { font-size: calc(2.8 * var(--u)); } .sec-strength__item-label::after { content: ""; width: calc(5 * var(--u)); height: calc(0.2 * var(--u)); background: #346A1B; } .sec-strength__item-title { font-size: calc(3 * var(--u)); font-weight: 700; line-height: calc(4.5 * var(--u)); /* Figma leading-45 */ letter-spacing: calc(0.15 * var(--u)); color: #346A1B; margin-bottom: calc(4 * var(--u)); /* head ↔ body（Figma gap-40） */ } .sec-strength__item-body { font-size: calc(2 * var(--u)); font-weight: 500; line-height: calc(4 * var(--u)); /* Figma leading-40 */ letter-spacing: calc(0.1 * var(--u)); color: #333333; } .sec-strength__item-figure img { display: block; object-fit: cover; border-radius: calc(0.8 * var(--u)); } /* Card1: 2枚コラージュ (475.75×499.2) */ .sec-strength__item-figure--01 { position: relative; flex: 0 0 calc(47.575 * var(--u)); height: calc(49.92 * var(--u)); } .sec-strength__item-figure--01 img:first-child { position: absolute; top: 0; left: 0; width: calc(42.305 * var(--u)); height: calc(26.971 * var(--u)); } .sec-strength__item-figure--01 img:last-child { position: absolute; right: 0; bottom: 0; width: calc(32 * var(--u)); height: calc(28.7 * var(--u)); } /* Card2/3: 単一画像 (460×340) */ .sec-strength__item-figure--02, .sec-strength__item-figure--03 { flex: 0 0 calc(46 * var(--u)); } .sec-strength__item-figure--02 img, .sec-strength__item-figure--03 img { width: calc(46 * var(--u)); height: calc(34 * var(--u)); } /* Card4: 3枚コラージュ (483×564.5) */ .sec-strength__item-figure--04 { position: relative; flex: 0 0 calc(48.3 * var(--u)); height: calc(56.45 * var(--u)); } .sec-strength__item-figure--04 img:nth-child(1) { position: absolute; left: calc(4.4 * var(--u)); top: 0; width: calc(34.9 * var(--u)); height: calc(22.7 * var(--u)); } .sec-strength__item-figure--04 img:nth-child(2) { position: absolute; right: 0; top: calc(17.48 * var(--u)); width: calc(26.55 * var(--u)); height: calc(23.85 * var(--u)); } .sec-strength__item-figure--04 img:nth-child(3) { position: absolute; left: 0; bottom: 0; width: calc(29.9 * var(--u)); height: calc(30.2 * var(--u)); } /* ---------- sec-seminar ---------- */ .sec-seminar { position: relative; background: #346A1B; padding: calc(16 * var(--u)) 0; overflow: hidden; text-align: center; color: #ffffff; } .sec-seminar__bgtext { position: absolute; top: calc(9 * var(--u)); left: 50%; transform: translateX(-50%); font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: calc(2 * var(--u)); line-height: 1; color: #ffffff; opacity: 0.05; /* SEMINAR透かし＝Figma rgba(255,255,255,0.05) */ white-space: nowrap; z-index: 0; } .sec-seminar__inner { position: relative; z-index: 1; max-width: calc(132 * var(--u)); margin: 0 auto; padding: 0 calc(6 * var(--u)); } .sec-seminar__head { margin-bottom: calc(10.8 * var(--u)); } /* 見出し囲い：Figma 9:138 タイトル枠＋9:175 Union（白アウトライン吹き出し・下タブ付き）を背景に敷く */ .sec-seminar__title-wrap { position: relative; width: calc(100 * var(--u)); /* Figma w1000 */ height: calc(22 * var(--u)); /* Figma h220（本体） */ margin: 0 auto; display: flex; align-items: center; justify-content: center; } .sec-seminar__title-bubble { /* Figma 9:175 Union：吹き出し（本体220＋下タブで239） */ position: absolute; left: 0; top: 0; width: 100%; height: calc(23.9 * var(--u)); /* 239 */ overflow: visible; pointer-events: none; } .sec-seminar__title { position: relative; font-size: calc(5 * var(--u)); font-weight: 700; line-height: calc(7.2 * var(--u)); /* Figma leading-72 */ color: #ffffff; text-align: center; } .sec-seminar__title mark { background: none; color: #E0F25A; } .sec-seminar__intro { display: flex; align-items: center; gap: calc(8.45 * var(--u)); text-align: left; margin-bottom: calc(12 * var(--u)); } .sec-seminar__intro-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .sec-seminar__lead { font-size: calc(2.4 * var(--u)); font-weight: 500; line-height: 2; letter-spacing: 0.05em; color: #ffffff; } .sec-seminar__lead:last-child { font-size: calc(2 * var(--u)); } .sec-seminar__intro-figure { flex: 0 0 calc(50.6 * var(--u)); } .sec-seminar__intro-figure img { width: 100%; height: calc(36 * var(--u)); object-fit: cover; display: block; border-radius: calc(1 * var(--u)); /* 画像角丸10px（box-shadowの角も丸める） */ box-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 0 #ffffff; } .sec-seminar__cta { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); border-top: calc(0.1 * var(--u)) solid #ffffff; border-bottom: calc(0.1 * var(--u)) solid #ffffff; padding: calc(8 * var(--u)) 0; margin-bottom: calc(12 * var(--u)); } .sec-seminar__cta-inner { position: relative; background-color: #ffffff; background-image: radial-gradient(circle at calc(1.8 * var(--u)) calc(1.8 * var(--u)), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))), radial-gradient(circle at calc(100% - calc(1.8 * var(--u))) calc(1.8 * var(--u)), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))), radial-gradient(circle at calc(1.8 * var(--u)) calc(100% - calc(1.8 * var(--u))), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))), radial-gradient(circle at calc(100% - calc(1.8 * var(--u))) calc(100% - calc(1.8 * var(--u))), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))); background-repeat: no-repeat; border-radius: calc(1 * var(--u)); width: calc(80 * var(--u)); padding: calc(6.8 * var(--u)) 0; display: flex; flex-direction: column; align-items: center; gap: calc(2.4 * var(--u)); } .sec-seminar__cta-lead { display: flex; align-items: center; justify-content: center; gap: calc(0.6 * var(--u)); font-size: calc(2.8 * var(--u)); font-weight: 700; letter-spacing: 0.05em; color: #333333; } .sec-seminar__cta-mark { font-weight: 700; color: #333333; } .sec-seminar__cta-btn { display: flex; align-items: center; justify-content: center; width: calc(56.1 * var(--u)); height: calc(8 * var(--u)); background: #E2AE38; color: #ffffff; font-size: calc(2.4 * var(--u)); font-weight: 700; letter-spacing: 0.05em; border-radius: calc(1 * var(--u)); transition: opacity 0.2s ease; } .sec-seminar__cta-btn:hover { opacity: 0.85; } .sec-seminar__cta-note { font-size: calc(2 * var(--u)); font-weight: 700; line-height: 1.75; color: #ffffff; width: calc(80 * var(--u)); text-align: left; } .sec-seminar__learn-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(20.7 * var(--u)); /* Figma laurel実寸（人物下端をパネル上端に重ねる） */ margin-bottom: calc(6.4 * var(--u)); /* Figma gap-64 */ } /* 学べる内容：見出しを月桂樹枝（sec-seminar2左/3右）で挟む */ .sec-seminar__learn-titlebox { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); } .sec-seminar__learn-laurel { flex: 0 0 auto; width: calc(8.9 * var(--u)); height: calc(20.7 * var(--u)); object-fit: contain; } .sec-seminar__learn-title { position: relative; z-index: 1; font-size: calc(8 * var(--u)); font-weight: 700; line-height: 1.2; color: #ffffff; } .sec-seminar__learn-title-sub { display: block; font-size: calc(5 * var(--u)); } .sec-seminar__learn-person { position: absolute; z-index: 0; /* パネル（＝リスト）の下に潜らせる */ } .sec-seminar__learn-person--left { top: calc(5.2 * var(--u)); /* Figma 9:259 top52 */ left: calc(6.7 * var(--u)); /* Figma left67 */ width: calc(13.2 * var(--u)); /* Figma w132 */ } .sec-seminar__learn-person--right { top: calc(6.8 * var(--u)); /* Figma 9:260 top68 */ right: calc(8.6 * var(--u)); /* Figma right≈85 */ width: calc(11.455 * var(--u)); /* Figma w114.55 */ } .sec-seminar__learn-panel { position: relative; z-index: 1; /* イラストより前面（リストがイラストの上） */ background: #ffffff; width: 100%; padding: calc(8 * var(--u)) calc(10 * var(--u)); /* Figma Group1: 右下ドッグイヤー（折り返し）64px */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(6.4 * var(--u))), calc(100% - calc(6.4 * var(--u))) 100%, 0 100%); } /* 折り返しフラップ（Figma Group1 Rectangle2：折り角の陰影） */ .sec-seminar__learn-panel::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(6.4 * var(--u)); /* Figma 64 */ height: calc(6.4 * var(--u)); background: linear-gradient(135deg, #ffffff 0%, #c9c9c9 100%); clip-path: polygon(0 0, 100% 0, 0 100%); /* 左上三角＝折り返した紙 */ } .sec-seminar__checklist { list-style: none; text-align: left; } .sec-seminar__checklist li { position: relative; font-size: calc(2.4 * var(--u)); font-weight: 700; line-height: 2; letter-spacing: 0.05em; color: #333333; padding: calc(2.4 * var(--u)) 0 calc(2.4 * var(--u)) calc(5.6 * var(--u)); border-bottom: calc(0.1 * var(--u)) solid #D8D8D8; } .sec-seminar__checklist li:last-child { border-bottom: none; } .sec-seminar__checklist li::before { content: ""; position: absolute; left: 0; top: calc(3 * var(--u)); width: calc(3.2 * var(--u)); /* Figma sec-seminar4 32×31 */ height: calc(3.1 * var(--u)); background: url("../img/sec-reality/sec-reality2.svg") center / contain no-repeat; } .sec-seminar__footnote { font-size: calc(2 * var(--u)); font-weight: 500; line-height: 2; letter-spacing: 0.05em; color: #333333; text-align: left; margin-top: calc(4 * var(--u)); } /* ---------- sec-closing ---------- */ .sec-closing { position: relative; padding: calc(14 * var(--u)) 0; text-align: center; overflow: hidden; } .sec-closing__bg { position: absolute; inset: 0; z-index: 0; } .sec-closing__bg img { width: 100%; height: 100%; object-fit: cover; } .sec-closing__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.5); } .sec-closing__inner { position: relative; z-index: 1; max-width: calc(120 * var(--u)); margin: 0 auto; padding: 0 calc(6 * var(--u)); } .sec-closing__card { position: relative; width: calc(80 * var(--u)); margin: 0 auto; background-color: #ffffff; background-image: radial-gradient(circle at calc(1.8 * var(--u)) calc(1.8 * var(--u)), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))), radial-gradient(circle at calc(100% - calc(1.8 * var(--u))) calc(1.8 * var(--u)), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))), radial-gradient(circle at calc(1.8 * var(--u)) calc(100% - calc(1.8 * var(--u))), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))), radial-gradient(circle at calc(100% - calc(1.8 * var(--u))) calc(100% - calc(1.8 * var(--u))), #346A1B calc(0.5 * var(--u)), transparent calc(0.55 * var(--u))); background-repeat: no-repeat; border-radius: calc(1 * var(--u)); box-shadow: 0 calc(0.3 * var(--u)) calc(0.3 * var(--u)) rgba(0, 0, 0, 0.16); padding: calc(6.8 * var(--u)) 0; display: flex; flex-direction: column; align-items: center; gap: calc(2.4 * var(--u)); } .sec-closing__lead { display: flex; align-items: center; justify-content: center; gap: calc(0.6 * var(--u)); font-size: calc(2.8 * var(--u)); font-weight: 700; letter-spacing: 0.05em; color: #333333; } .sec-closing__lead-mark { font-weight: 700; color: #333333; } .sec-closing__btn { display: flex; align-items: center; justify-content: center; width: calc(56.1 * var(--u)); height: calc(8 * var(--u)); background: #E2AE38; color: #ffffff; font-size: calc(2.4 * var(--u)); font-weight: 700; letter-spacing: 0.05em; border-radius: calc(1 * var(--u)); transition: opacity 0.2s ease; } .sec-closing__btn:hover { opacity: 0.85; } /* ---------- sec-faq ---------- */ .sec-faq { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); /* 見出し ↔ リスト（Figma gap-80） */ padding: calc(16 * var(--u)) calc(55.75 * var(--u)); /* Figma py-160 / px-557.5 */ background: #E6F5E4; } .sec-faq__title { font-size: calc(6 * var(--u)); font-weight: 700; line-height: normal; letter-spacing: calc(0.3 * var(--u)); /* Figma tracking-3 */ color: #346A1B; text-align: center; white-space: nowrap; } .sec-faq__list { width: 100%; } .sec-faq__item { border-top: calc(0.2 * var(--u)) solid #ffffff; /* Figma border-t-2 white */ padding: calc(4 * var(--u)) 0; } .sec-faq__q { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(0.5 * var(--u)); /* Figma gap-5 */ font-size: calc(2.4 * var(--u)); font-weight: 700; line-height: calc(3.2 * var(--u)); /* Figma leading-32 */ letter-spacing: calc(0.12 * var(--u)); color: #333333; margin-bottom: calc(2.4 * var(--u)); /* Q ↔ A（Figma gap-24） */ } .sec-faq__q-mark { font-size: calc(3.8 * var(--u)); font-weight: 700; letter-spacing: calc(0.19 * var(--u)); color: #346A1B; } .sec-faq__q-sub { flex: 1 1 100%; padding-left: calc(4.5 * var(--u)); } .sec-faq__a { font-size: calc(1.8 * var(--u)); font-weight: 400; line-height: calc(3.2 * var(--u)); /* Figma leading-32 */ letter-spacing: calc(0.09 * var(--u)); color: #333333; } /* ---------- sec-member ---------- */ .sec-member { background: #ffffff; padding: calc(16 * var(--u)) 0; } .sec-member__inner { max-width: calc(176 * var(--u)); margin: 0 auto; padding: 0 calc(6 * var(--u)); } .sec-member__head { text-align: center; margin-bottom: calc(6.7 * var(--u)); } .sec-member__head-inner { display: inline-block; } .sec-member__heading { display: block; font-size: calc(6 * var(--u)); font-weight: 700; color: #346A1B; } /* 見出し下のあしらい（Figma 9:383：折れ線＋下向きタブ） */ .sec-member__heading-deco { display: block; width: 100%; height: auto; margin-top: calc(2.6 * var(--u)); } .sec-member__slider { position: relative; } .sec-member__viewport { /* 全幅ビューポート（左右ピークは中央寄せで確保） */ overflow: hidden; } .sec-member__list { /* トラック：transformで無限ループ */ list-style: none; display: flex; gap: calc(2.6 * var(--u)); will-change: transform; } .sec-member__card { flex: 0 0 calc(41 * var(--u)); } .sec-member__arrow { /* Figma 9:495：カード上部の帯（写真の上）に配置 */ position: absolute; top: calc(-5.7 * var(--u)); z-index: 2; border: none; background: none; color: #767676; font-size: calc(4.6 * var(--u)); line-height: 1; cursor: pointer; } .sec-member__arrow--prev { left: calc(5.5 * var(--u)); } .sec-member__arrow--next { right: calc(10 * var(--u)); } /* 右固定CTAレール(8.6rem)を避ける */ .sec-member__photo { overflow: hidden; margin-bottom: calc(2.6 * var(--u)); aspect-ratio: 410 / 272; } .sec-member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sec-member__name-en { font-size: calc(1.4 * var(--u)); font-weight: 700; letter-spacing: 0.04em; color: #767676; margin-bottom: calc(0.8 * var(--u)); } .sec-member__name-jp { font-size: calc(2.4 * var(--u)); font-weight: 700; color: #000000; margin-bottom: calc(2.4 * var(--u)); } .sec-member__text { font-size: calc(1.8 * var(--u)); font-weight: 500; line-height: 2; letter-spacing: 0.05em; color: #000000; } .sec-member__closing { position: relative; max-width: calc(120 * var(--u)); margin: calc(12.4 * var(--u)) auto 0; background: #346A1B; padding: calc(8.4 * var(--u)) calc(10 * var(--u)); clip-path: polygon( calc(8 * var(--u)) 0, 100% 0, 100% calc(100% - calc(8 * var(--u))), calc(100% - calc(8 * var(--u))) 100%, 0 100%, 0 calc(8 * var(--u)) ); } .sec-member__closing::before { content: ""; position: absolute; inset: calc(0.2 * var(--u)); background: #E6F5E4; clip-path: polygon( calc(8 * var(--u)) 0, 100% 0, 100% calc(100% - calc(8 * var(--u))), calc(100% - calc(8 * var(--u))) 100%, 0 100%, 0 calc(8 * var(--u)) ); } .sec-member__closing-title { position: relative; z-index: 1; text-align: center; font-size: calc(3 * var(--u)); font-weight: 700; letter-spacing: 0.05em; color: #346A1B; margin-bottom: calc(4 * var(--u)); } .sec-member__closing-mark { font-size: calc(2.4 * var(--u)); } .sec-member__closing-text { position: relative; z-index: 1; font-size: calc(2 * var(--u)); font-weight: 500; line-height: 2; letter-spacing: 0.05em; color: #000000; } /* ========================================================================== SP レイヤー（375px設計・@media max-width:768px） PCのDOMを共有し、各セクションのレイアウトのみSP用に上書きする。 単位は --u（≤768pxで 100vw/37.5）。SP値は px÷10 = N で calc(N*var(--u))。 Figma SPフレーム「Wireframe - 1 - sp」(29:162) 準拠。上から順に追記していく。 ========================================================================== */ /* PC/SP出し分けユーティリティ（改行の breakpoint 別指定に使用） */ .sp-only { display: none; } @media (max-width: 768px) { .pc-only { display: none; } br.sp-only, span.sp-only { display: inline; } /* 固定CTA：SPは画面下部の横並びバー（Figma 52:148）。FVでは非表示、 少しスクロールで下からふわっと出現／FVに戻ると下へ消える（JSで .is-visible 付与）。 */ .global-float-cta { display: flex; flex-direction: row; top: auto; bottom: 0; left: 0; width: 100%; height: calc(5.6 * var(--u)); /* Figma h-56 */ gap: 0; transform: translateY(100%); transition: transform 0.4s ease; will-change: transform; } .global-float-cta.is-visible { transform: translateY(0); } /* SPは「LINEでセミナーを視聴する」1本に（後藤指示 2026-07-21）。PCの右追従2本はそのまま */ .global-float-cta__btn--orange { display: none; } .global-float-cta__btn { flex: 1 0 0; min-width: 0; flex-direction: row; gap: calc(0.8 * var(--u)); /* Figma gap-8 */ width: auto; height: 100%; padding: 0; border-radius: 0; box-shadow: none; } .global-float-cta__btn--orange, .global-float-cta__btn--green { height: 100%; } .global-float-cta__btn span { writing-mode: horizontal-tb; text-orientation: mixed; font-size: calc(1.6 * var(--u)); /* Figma 16px */ line-height: normal; letter-spacing: 0; } .global-float-cta__btn--orange .global-float-cta__icon { width: calc(2 * var(--u)); } /* mail 20×15 */ .global-float-cta__btn--green .global-float-cta__icon { width: calc(2.2 * var(--u)); } /* LINE 22×22 */ /* ---------- sec-hero（Figma SP 29:163） ---------- */ .sec-hero { /* 下余白＝絶対配置の __stat-note（ピル列の外にはみ出す）が sec-about に被らないぶん */ padding: calc(3.8 * var(--u)) 0 calc(2 * var(--u)) calc(2 * var(--u)); gap: calc(4.4 * var(--u)); } .sec-hero__top { position: relative; /* SPのみ：人物イラストの絶対配置基準を写真バンドへ */ flex-direction: column; align-items: flex-start; gap: calc(4.4 * var(--u)); } .sec-hero__copy-head { gap: calc(0.8 * var(--u)); } .sec-hero__lead { font-size: calc(1.2 * var(--u)); letter-spacing: calc(0.06 * var(--u)); } .sec-hero__badge { width: calc(25 * var(--u)); height: calc(2.4 * var(--u)); font-size: calc(1.3 * var(--u)); } .sec-hero__badge::after { border-left-width: calc(0.55 * var(--u)); border-right-width: calc(0.55 * var(--u)); border-top-width: calc(0.6 * var(--u)); } .sec-hero__copy-title { gap: calc(0.4 * var(--u)); } .sec-hero__title-line1 { font-size: calc(4 * var(--u)); letter-spacing: calc(0.2 * var(--u)); } .sec-hero__title-row { gap: calc(0.7 * var(--u)); } .sec-hero__title-box { width: calc(15.3 * var(--u)); height: calc(6.2 * var(--u)); border-width: calc(0.4 * var(--u)); font-size: calc(4.6 * var(--u)); } .sec-hero__title-suffix { font-size: calc(3.2 * var(--u)); } .sec-hero__photo { flex: none; width: calc(35.5 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(2 * var(--u)) 0 0 calc(2 * var(--u)); } .sec-hero__person { right: calc(0.05 * var(--u)); bottom: 0; width: calc(15.75 * var(--u)); } /* 実績ピル：2×2 折り返しグリッド（各ピル50%幅セルで中央寄せ→確実に2列2段） */ .sec-hero__stats { flex-wrap: wrap; justify-content: center; column-gap: 0; row-gap: calc(2.4 * var(--u)); width: 100%; padding-right: calc(2 * var(--u)); } .sec-hero__stat { flex: 0 0 50%; justify-content: center; } .sec-hero__bracket { width: calc(2.853 * var(--u)); height: calc(7.295 * var(--u)); margin-bottom: 0; } .sec-hero__stat-center { gap: calc(0.6 * var(--u)); } .sec-hero__crown { width: calc(6 * var(--u)); height: calc(1.8 * var(--u)); } .sec-hero__stat-figures { gap: calc(0.4 * var(--u)); } .sec-hero__stat-label { font-size: calc(1 * var(--u)); letter-spacing: calc(0.05 * var(--u)); } .sec-hero__stat-num { font-size: calc(2.9 * var(--u)); white-space: nowrap; } /* 4つ目「5,000万円」は桁が多く月桂樹を押し広げるため数字を小さめに（Figma準拠） */ .sec-hero__stat:nth-child(4) .sec-hero__stat-num { font-size: calc(2.3 * var(--u)); } .sec-hero__stat-unit { font-size: calc(1.1 * var(--u)); } .sec-hero__stat-sub, .sec-hero__stat-note { font-size: calc(1 * var(--u)); letter-spacing: calc(0.05 * var(--u)); } /* SP の .sec-hero__stat{justify-content:center} が --noted にも後勝ちしてしまうので上書き。 row は横中央（他ピルと同じ）、li は縦下揃え（他ピルの align-items:flex-end と同じ）。 */ .sec-hero__stat-row { justify-content: center; } .sec-hero__stat--noted { justify-content: flex-end; } /* ---------- sec-about（Figma SP 29:630） ---------- */ .sec-about__panel { margin-top: calc(25.3 * var(--u)); padding: calc(22.54 * var(--u)) calc(2 * var(--u)) calc(6.4 * var(--u)); } .sec-about__panel::before { opacity: 0.6; } /* #2 SP：薄緑地でメッシュが埋もれるため視認性UP */ .sec-about__card { gap: calc(3.6 * var(--u)); padding: calc(7.6 * var(--u)) calc(3.8 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-about__border { inset: calc(2 * var(--u)); border-width: calc(0.2 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-about__watermark { top: calc(8.81 * var(--u)); font-size: calc(6 * var(--u)); letter-spacing: calc(0.3 * var(--u)); } .sec-about__heading { font-size: calc(2.4 * var(--u)); letter-spacing: calc(0.4 * var(--u)); } .sec-about__heading-suffix { font-size: calc(2 * var(--u)); } .sec-about__lead { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } .sec-about__lead br { display: none; } /* PC用の改行を無効化しSP幅で自然折返し */ .sec-about__person { bottom: 0; } .sec-about__person--left { left: calc(2 * var(--u)); width: calc(10.29 * var(--u)); } .sec-about__person--right { left: auto; right: calc(2.083 * var(--u)); width: calc(8.617 * var(--u)); } /* 上部CTAカード（PCは横並び→SPは縦積み） */ .sec-about__cta { top: calc(6.1 * var(--u)); width: calc(33.5 * var(--u)); gap: calc(3.2 * var(--u)); padding: calc(2.4 * var(--u)) calc(2 * var(--u)) calc(4.5 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-about__cta-border { inset: calc(0.75 * var(--u)); border-width: calc(0.1 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-about__cta-pill { padding: calc(1.3 * var(--u)) calc(2.3 * var(--u)); border: calc(0.2 * var(--u)) solid #346A1B; border-radius: calc(5 * var(--u)); } .sec-about__cta-pill p { white-space: normal; text-align: center; font-size: calc(1.4 * var(--u)); letter-spacing: calc(0.12 * var(--u)); } .sec-about__cta-pill strong { display: block; font-size: calc(1.6 * var(--u)); } .sec-about__cta-row { flex-direction: column; gap: calc(3.6 * var(--u)); } .sec-about__cta-col { align-items: flex-start; gap: calc(0.8 * var(--u)); } .sec-about__cta-label { gap: calc(0.5 * var(--u)); font-size: calc(1.4 * var(--u)); letter-spacing: calc(0.07 * var(--u)); } .sec-about__cta-label img { width: calc(2.6 * var(--u)); height: calc(2.3 * var(--u)); } .sec-about__cta-btn { width: calc(29.5 * var(--u)); height: calc(5.4 * var(--u)); gap: calc(0.8 * var(--u)); border-radius: calc(0.5 * var(--u)); font-size: calc(1.4 * var(--u)); letter-spacing: calc(0.07 * var(--u)); filter: drop-shadow(calc(0.3 * var(--u)) calc(0.6 * var(--u)) 0 #ffffff); } .sec-about__cta-btn img { width: calc(2.2 * var(--u)); } /* ---------- sec-problem（Figma SP 29:701：6吹き出しをジグザグ縦積み＋イラスト下） ---------- */ .sec-problem { gap: calc(2.5 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)) calc(6.5 * var(--u)); } .sec-problem__heading { gap: calc(0.4 * var(--u)); } .sec-problem__heading-text { font-size: calc(1.9 * var(--u)); letter-spacing: calc(0.095 * var(--u)); } .sec-problem__mark { width: calc(8.866 * var(--u)); height: calc(3.02 * var(--u)); font-size: calc(2.5 * var(--u)); letter-spacing: calc(0.125 * var(--u)); } .sec-problem__dots { width: calc(5.731 * var(--u)); bottom: calc(100% + calc(0.4 * var(--u))); } .sec-problem__dots span { width: calc(0.377 * var(--u)); height: calc(0.377 * var(--u)); } /* 吹き出し：絶対配置→フロー。order で表示順、align-self でジグザグ */ .sec-problem__bubble { position: relative; left: auto; top: auto; height: auto; padding: calc(1.6 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-problem__bubble--1 { width: calc(24 * var(--u)); align-self: flex-end; order: 1; } .sec-problem__bubble--4 { width: calc(24.3 * var(--u)); align-self: flex-start; order: 2; } .sec-problem__bubble--2 { width: calc(24.3 * var(--u)); align-self: flex-end; order: 3; } .sec-problem__bubble--5 { width: calc(20 * var(--u)); align-self: flex-start; order: 4; } .sec-problem__bubble--3 { width: calc(22.8 * var(--u)); align-self: flex-end; order: 5; } .sec-problem__bubble--6 { width: calc(20.4 * var(--u)); align-self: flex-start; order: 6; } .sec-problem__worry { font-size: calc(1.6 * var(--u)); line-height: calc(2.6 * var(--u)); letter-spacing: normal; /* SP吹き出しはトラッキング無し（PC値だと行溢れ→孤立文字） */ text-align: left; /* #4 SP：吹き出し内は左揃え */ } /* 尾を小さく＆内向きに（右寄せ1・2・3=左尾／左寄せ4・5・6=右尾） */ .sec-problem__bubble::before { bottom: calc(-1.1 * var(--u)); border-left-width: calc(0.7 * var(--u)); border-right-width: calc(0.7 * var(--u)); border-top-width: calc(1.1 * var(--u)); } .sec-problem__bubble::after { bottom: calc(-0.8 * var(--u)); border-left-width: calc(0.5 * var(--u)); border-right-width: calc(0.5 * var(--u)); border-top-width: calc(0.95 * var(--u)); } .sec-problem__bubble--1::before, .sec-problem__bubble--2::before, .sec-problem__bubble--3::before { right: auto; left: calc(3 * var(--u)); } .sec-problem__bubble--1::after, .sec-problem__bubble--2::after, .sec-problem__bubble--3::after { right: auto; left: calc(3.2 * var(--u)); } .sec-problem__bubble--4::before, .sec-problem__bubble--5::before, .sec-problem__bubble--6::before { left: auto; right: calc(3 * var(--u)); } .sec-problem__bubble--4::after, .sec-problem__bubble--5::after, .sec-problem__bubble--6::after { left: auto; right: calc(3.2 * var(--u)); } .sec-problem__figure { width: calc(18 * var(--u)); order: 7; margin-top: calc(1.5 * var(--u)); } /* ---------- sec-cost（Figma SP 30:62：カード内を縦積み＝写真上→テキスト下） ---------- */ .sec-cost { gap: calc(4 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)) calc(6.92 * var(--u)); } .sec-cost__watermark { top: calc(11.5 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: calc(0.5 * var(--u)); } .sec-cost__head { gap: calc(0.8 * var(--u)); } .sec-cost__eyebrow { font-size: calc(2 * var(--u)); line-height: calc(2.4 * var(--u)); letter-spacing: calc(0.1 * var(--u)); } .sec-cost__eyebrow-mark { font-size: calc(2 * var(--u)); } .sec-cost__heading { font-size: calc(3.2 * var(--u)); line-height: calc(4.4 * var(--u)); letter-spacing: calc(0.4 * var(--u)); } .sec-cost__heading-l1 { font-size: calc(2.6 * var(--u)); } .sec-cost__card { flex-direction: column; align-items: center; gap: calc(4 * var(--u)); padding: calc(2.4 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)); } .sec-cost__card::before { left: calc(2 * var(--u)); top: calc(24.8 * var(--u)); width: calc(9.4 * var(--u)); height: calc(11.5 * var(--u)); opacity: 0.15; /* #5 SP：Figmaは葉デコをごく淡く敷く */ } .sec-cost__card::after { bottom: calc(-1.9 * var(--u)); border-left-width: calc(2 * var(--u)); border-right-width: calc(2 * var(--u)); border-top-width: calc(2 * var(--u)); } .sec-cost__figure { order: -1; flex: none; } .sec-cost__figure img { width: calc(28.9 * var(--u)); height: calc(20.2 * var(--u)); box-shadow: calc(0.7 * var(--u)) calc(0.7 * var(--u)) 0 0 #9ebe48; } .sec-cost__text { flex: none; width: 100%; font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } /* ---------- sec-solution（Figma SP 32:76） ---------- */ .sec-solution { gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(6.4 * var(--u)); } .sec-solution::before { display: none; } /* #6 SP：メッシュ背景は不要 */ .sec-solution__kagi { display: none; } /* #7 SP：見出しのカギ括弧「」を消す（PCは維持） */ .sec-solution__heading { white-space: normal; font-size: calc(2.8 * var(--u)); line-height: calc(4.4 * var(--u)); letter-spacing: calc(0.14 * var(--u)); } /* PC=1帯 → SPは折返し各行に帯（box-decoration-break） */ .sec-solution__heading-l2 { display: inline; background: #e0f25a; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 calc(0.4 * var(--u)); } .sec-solution__heading-l2::before { display: none; } .sec-solution__lead { width: 100%; max-width: calc(33.5 * var(--u)); font-size: calc(1.6 * var(--u)); line-height: calc(3.6 * var(--u)); letter-spacing: calc(0.08 * var(--u)); text-align: left; /* #8 SP：リードは左揃え */ } .sec-solution__lead br { display: none; } /* PC用の改行を無効化しSP幅で自然折返し */ /* ---------- sec-reality（Figma SP 32:84：リスト全幅→写真右寄せの縦積み＋注記） ---------- */ .sec-reality { align-items: center; gap: calc(3.2 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-reality__head { gap: calc(0.8 * var(--u)); } .sec-reality__heading { line-height: calc(3.6 * var(--u)); } .sec-reality__heading-l1 { font-size: calc(2 * var(--u)); } .sec-reality__heading-l2 { font-size: calc(2.4 * var(--u)); } .sec-reality__body { gap: calc(3.2 * var(--u)); } .sec-reality__row { flex-direction: column; align-items: flex-end; gap: calc(2.4 * var(--u)); } .sec-reality__list { width: 100%; gap: calc(1.6 * var(--u)); } .sec-reality__item { gap: calc(1 * var(--u)); } .sec-reality__check { width: calc(2 * var(--u)); height: calc(1.9 * var(--u)); } .sec-reality__itext { font-size: calc(1.6 * var(--u)); line-height: 1.5; white-space: normal; /* SPは2行項目を自然折返し（PCはnowrap） */ } .sec-reality__figure { width: calc(19.93 * var(--u)); } .sec-reality__note { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); } /* ---------- sec-cause（Figma SP 32:132：緑カード・両脇ダッシュ見出し2行・白本文） ---------- */ .sec-cause { padding: 0 calc(2 * var(--u)); } .sec-cause__card { gap: calc(3.2 * var(--u)); padding: calc(4.8 * var(--u)) calc(2 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-cause__heading { gap: calc(1.6 * var(--u)); } .sec-cause__title { font-size: calc(2 * var(--u)); line-height: calc(2.9 * var(--u)); white-space: normal; } .sec-cause__dash { width: calc(3.5 * var(--u)); } /* 両ダッシュを短縮し見出し1行目「原因は努力不足では」を1行に収める */ .sec-cause__para { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); } /* ---------- sec-direction（Figma SP 32:140：見出し→イラスト→本文の縦積み） ---------- */ .sec-direction { flex-direction: column; align-items: center; gap: calc(3.2 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-direction__body { display: contents; } /* 入れ子を平坦化しorderでvisualを中間に */ .sec-direction__heading { order: 1; width: 100%; justify-content: center; gap: calc(2 * var(--u)); } .sec-direction__h-lead { font-size: calc(2.8 * var(--u)); } .sec-direction__h-word { font-size: calc(4 * var(--u)); } .sec-direction__h-frame { left: 50%; transform: translate(-50%, -50%); width: calc(13.9 * var(--u)); height: calc(6.4 * var(--u)); border-width: calc(0.3 * var(--u)); } .sec-direction__visual { order: 2; width: calc(19.389 * var(--u)); align-self: flex-start; /* #11 SP：イラストは左寄せ（Figma x0） */ } .sec-direction__texts { order: 3; width: 100%; gap: calc(3.2 * var(--u)); } .sec-direction__lead { font-size: calc(1.8 * var(--u)); line-height: calc(3.6 * var(--u)); letter-spacing: calc(0.09 * var(--u)); } .sec-direction__sub { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); } /* ---------- sec-flow（Figma SP 32:154：4STEP縦タイムライン＋成果カード5枚縦積み） ---------- */ .sec-flow { gap: calc(4 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-flow__bg-text { /* #13 SP：SALE/FLOW を2行の大透かしに（Figma 32:272 x16 y20 w342 h240） */ top: calc(2 * var(--u)); left: calc(1.6 * var(--u)); transform: none; width: calc(34.2 * var(--u)); white-space: normal; text-align: center; font-size: calc(9.5 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: calc(0.4 * var(--u)); } .sec-flow__inner-top { gap: calc(4 * var(--u)); } .sec-flow__head { gap: calc(2 * var(--u)); } .sec-flow__head-title { width: 100%; gap: calc(1 * var(--u)); } .sec-flow__label { font-size: calc(2 * var(--u)); padding: calc(0.3 * var(--u)) calc(1.5 * var(--u)); letter-spacing: calc(0.1 * var(--u)); } .sec-flow__heading { font-size: calc(3.4 * var(--u)); letter-spacing: calc(0.17 * var(--u)); } .sec-flow__divider { width: calc(23 * var(--u)); } .sec-flow__lead { width: 100%; font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: normal; } /* 4STEP：横並び→縦タイムライン（バッジ左＋縦レール、本文右） */ .sec-flow__steps { flex-direction: column; align-items: stretch; gap: calc(4 * var(--u)); } .sec-flow__steps-line { top: calc(3 * var(--u)); bottom: calc(24.5 * var(--u)); /* STEP4バッジ中心で止める（下へはみ出さない） */ left: calc(2.3 * var(--u)); /* #14 SP：バッジ中央（2.5u）−線幅半分（0.2u） */ width: calc(0.4 * var(--u)); height: auto; background: linear-gradient(to bottom, rgba(52, 106, 27, 0.35), rgba(52, 106, 27, 0.85)); /* 上薄→下濃 */ } .sec-flow__step { flex-direction: row; align-items: flex-start; gap: calc(2 * var(--u)); width: 100%; } .sec-flow__step-badge { flex: none; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(2.5 * var(--u)); } .sec-flow__step-badge-label { font-size: calc(1 * var(--u)); line-height: 1; letter-spacing: calc(0.05 * var(--u)); } .sec-flow__step-badge-num { font-size: calc(2 * var(--u)); line-height: 1.1; letter-spacing: calc(0.1 * var(--u)); } .sec-flow__step-body { flex: 1 1 0; min-width: 0; width: auto; align-items: flex-start; gap: calc(1.2 * var(--u)); } .sec-flow__step-title { font-size: calc(2 * var(--u)); text-align: left; letter-spacing: calc(0.1 * var(--u)); } .sec-flow__step-photo { order: -1; /* #15 SP：写真→タイトル→本文の順（Figmaは写真が先） */ width: 100%; height: calc(18 * var(--u)); /* Figma 180px */ border-radius: calc(1 * var(--u)); } .sec-flow__step-text { font-size: calc(1.4 * var(--u)); line-height: calc(2.4 * var(--u)); letter-spacing: normal; } /* 成果見出し */ .sec-flow__results-head { gap: calc(1 * var(--u)); } .sec-flow__results-deco { width: calc(3.8 * var(--u)); height: calc(7 * var(--u)); } .sec-flow__results-heading { white-space: normal; } .sec-flow__results-lead { font-size: calc(1.8 * var(--u)); line-height: calc(3 * var(--u)); } .sec-flow__results-main { font-size: calc(2 * var(--u)); line-height: calc(3 * var(--u)); letter-spacing: calc(0.05 * var(--u)); /* #16 SP：中央行「以下の成果につながった」を1行に収める */ } /* 成果カード：PC 2+1+2 → SP 5枚縦積み（card-rowをdisplay:contentsで平坦化しorder並べ替え） */ .sec-flow__area { gap: calc(2 * var(--u)); } /* sec-case__area の SP と同値 */ .sec-flow__results { gap: calc(1.6 * var(--u)); } .sec-flow__card-row { display: contents; } .sec-flow__card { width: 100%; flex: none; height: calc(10.1 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-flow__card--wide { width: 100%; height: calc(10.1 * var(--u)); } .sec-flow__results > div:nth-child(1) > .sec-flow__card:nth-child(1) { order: 1; } /* 112箱 */ .sec-flow__results > div:nth-child(2) { order: 2; } /* 梨140万（wide） */ .sec-flow__results > div:nth-child(3) > .sec-flow__card:nth-child(1) { order: 3; } /* トマト24時間 */ .sec-flow__results > div:nth-child(1) > .sec-flow__card:nth-child(2) { order: 4; } /* とうもろこし200万 */ .sec-flow__results > div:nth-child(3) > .sec-flow__card:nth-child(2) { order: 5; } /* イチゴ3500 */ .sec-flow__card-text { line-height: calc(3.4 * var(--u)); letter-spacing: calc(0.075 * var(--u)); } .sec-flow__card-l1 { font-size: calc(1.6 * var(--u)); } .sec-flow__card--wide .sec-flow__card-l1 { font-size: calc(1.4 * var(--u)); } /* #17 SP：梨カードのみ14px */ .sec-flow__card-l2 { font-size: calc(1.8 * var(--u)); } .sec-flow__card-num { font-size: calc(2.8 * var(--u)); } /* ---------- sec-merit（Figma SP 32:273：チェックカード＋メリット5ブロック縦積み[画像上→本文下]） ---------- */ .sec-merit { gap: calc(7 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-merit__watermark { top: 26.56%; left: -4.1%; width: 108.21%; height: 73.44%; } .sec-merit__head { width: 100%; gap: calc(4 * var(--u)); } .sec-merit__heading { gap: calc(1.2 * var(--u)); } .sec-merit__label-box { width: calc(18.8 * var(--u)); height: auto; padding: calc(0.8 * var(--u)) 0; } .sec-merit__label { font-size: calc(2 * var(--u)); letter-spacing: calc(0.1 * var(--u)); } .sec-merit__title { font-size: calc(2.8 * var(--u)); letter-spacing: calc(0.14 * var(--u)); } /* Union=白角丸カードで近似（ブレース形状の凹み・下向き矢印はPOLISH候補） */ .sec-merit__card { width: 100%; gap: calc(3.2 * var(--u)); padding: calc(3 * var(--u)) calc(2 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-merit__card::after { /* #18 SP：吹き出しの下向き▽尾を復活（Figma Union の arrow） */ display: block; bottom: calc(-1.9 * var(--u)); border-left-width: calc(2 * var(--u)); border-right-width: calc(2 * var(--u)); border-top-width: calc(2 * var(--u)); } .sec-merit__check { align-items: flex-start; gap: calc(0.56 * var(--u)); padding: calc(1.6 * var(--u)) 0; } .sec-merit__check-icon { width: calc(2.244 * var(--u)); height: calc(2.14 * var(--u)); margin-top: calc(0.2 * var(--u)); } .sec-merit__check-text { font-size: calc(1.8 * var(--u)); letter-spacing: calc(0.09 * var(--u)); } .sec-merit__more { width: 100%; } .sec-merit__more-bar { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); width: calc(29.5 * var(--u)); height: calc(1.6 * var(--u)); } .sec-merit__more-text { font-size: calc(2 * var(--u)); letter-spacing: calc(0.1 * var(--u)); } /* 5ブロック：横並び交互→縦積み（画像を常に上へ order:-1） */ .sec-merit__rows { gap: calc(7 * var(--u)); } .sec-merit__row, .sec-merit__row--reverse { flex-direction: column; align-items: stretch; gap: calc(2.4 * var(--u)); padding: 0; } .sec-merit__row-figure { order: -1; width: 100%; border-radius: calc(1 * var(--u)); overflow: hidden; } /* #19 SP：ブロック画像を角丸10px */ .sec-merit__rows > .sec-merit__row:nth-child(1) .sec-merit__row-figure, .sec-merit__rows > .sec-merit__row:nth-child(2) .sec-merit__row-figure, .sec-merit__rows > .sec-merit__row:nth-child(3) .sec-merit__row-figure, .sec-merit__rows > .sec-merit__row:nth-child(4) .sec-merit__row-figure, .sec-merit__rows > .sec-merit__row:nth-child(5) .sec-merit__row-figure { height: calc(22 * var(--u)); } .sec-merit__row-body { gap: calc(2.4 * var(--u)); } .sec-merit__row-title { font-size: calc(2.4 * var(--u)); line-height: calc(3.8 * var(--u)); letter-spacing: calc(0.12 * var(--u)); } .sec-merit__row-text { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } /* ---------- sec-case（Figma SP 32:368：単一縦カード＝画像2枚上→内容下。※SPデザインはK農園のみ／カルーセルは内容欠落回避で保持） ---------- */ .sec-case { gap: calc(4 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-case__heading { flex-direction: column; align-items: center; gap: calc(1.2 * var(--u)); } .sec-case__heading-tag { width: calc(18.9 * var(--u)); height: calc(3.5 * var(--u)); font-size: calc(2 * var(--u)); line-height: calc(3.5 * var(--u)); } .sec-case__heading-sub { font-size: calc(3.2 * var(--u)); line-height: normal; letter-spacing: calc(0.16 * var(--u)); } .sec-case__heading-highlight { gap: calc(1.2 * var(--u)); } .sec-case__heading-highlight-char { width: calc(6.2 * var(--u)); height: calc(6.2 * var(--u)); font-size: calc(5 * var(--u)); line-height: calc(6.2 * var(--u)); } .sec-case__area { width: 100%; gap: calc(2 * var(--u)); } /* SP＝矢印をカード下に中央寄せで表示（Figma 62:82：左‹右›・矢印間120px・カードから20px下・矢印15.44×25.09／後藤指摘2026-07-14）。トラックは全幅・スワイプ(main.js attachSwipe)も併用。 */ .sec-case__carousel { width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: calc(12 * var(--u)); row-gap: calc(2 * var(--u)); } .sec-case__track { order: 0; flex: 0 0 100%; min-width: 0; } .sec-case__nav { display: block; width: calc(1.544 * var(--u)); height: calc(2.509 * var(--u)); } .sec-case__nav--prev { order: 1; } .sec-case__nav--next { order: 2; } .sec-case__card { flex-direction: column; align-items: stretch; gap: calc(2.4 * var(--u)); min-height: 0; padding: calc(2 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-case__media { flex: 0 0 auto; align-self: stretch; width: 100%; gap: calc(1 * var(--u)); } /* SPは縦積み＝全幅（PCの align-self:flex-start を戻す） */ .sec-case__content { gap: calc(3.2 * var(--u)); } .sec-case__head { gap: calc(2.4 * var(--u)); } .sec-case__title { gap: calc(0.8 * var(--u)); } .sec-case__name { font-size: calc(2.5 * var(--u)); letter-spacing: calc(0.14 * var(--u)); } /* 28→25px相当＝-3px（後藤指示 2026-07-22） */ .sec-case__divider { width: 100%; } .sec-case__status { gap: calc(2.4 * var(--u)); } .sec-case__block { gap: calc(1.6 * var(--u)); } .sec-case__badge { width: calc(9 * var(--u)); height: calc(3.2 * var(--u)); font-size: calc(1.6 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } .sec-case__text { font-size: calc(1.6 * var(--u)); line-height: calc(2.4 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } /* lh 2.8→2.4u＝カードを1画面に収める調整（後藤指示 2026-07-22） */ .sec-case__note, .sec-flow__note { width: 100%; font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } /* ---------- sec-satisfaction（Figma SP 32:407：見出し＋左右人物＋声カード横スクロール） ---------- */ .sec-satisfaction { gap: calc(11.6 * var(--u)); padding-top: calc(6.4 * var(--u)); } .sec-satisfaction__inner { width: 100%; gap: calc(4.6 * var(--u)); padding: 0 calc(2 * var(--u)); } .sec-satisfaction__head { width: 100%; gap: calc(1.2 * var(--u)); } .sec-satisfaction__heading { white-space: normal; line-height: calc(3.3 * var(--u)); letter-spacing: calc(0.085 * var(--u)); } .sec-satisfaction__heading-line1 { font-size: calc(1.7 * var(--u)); } .sec-satisfaction__heading-line2 { font-size: calc(2.2 * var(--u)); } .sec-satisfaction__divider { width: calc(29.45 * var(--u)); } /* 本文：PC用の
を無効化して自然折返し・左寄せ（Figma 32:415） */ .sec-satisfaction__text { align-self: stretch; text-align: left; font-size: calc(1.5 * var(--u)); line-height: calc(3.5 * var(--u)); } .sec-satisfaction__text br { display: none; } .sec-satisfaction__figure { bottom: calc(10.65 * var(--u)); } .sec-satisfaction__figure--left { left: calc(2 * var(--u)); width: calc(7.528 * var(--u)); } .sec-satisfaction__figure--right { right: calc(2.02 * var(--u)); width: calc(5.88 * var(--u)); } .sec-satisfaction__voices { --voices-gap: calc(0.8 * var(--u)); --voices-card: calc(15.4 * var(--u)); } /* ---------- sec-clients（Figma SP 43:79：見出し＋実績カード5枚縦積み[3+2→1列]） ---------- */ .sec-clients { gap: calc(4.8 * var(--u)); padding: calc(6.4 * var(--u)) calc(4 * var(--u)); } .sec-clients__header { width: 100%; gap: calc(3.2 * var(--u)); } .sec-clients__heading-row { width: 100%; } .sec-clients__heading { white-space: normal; font-size: calc(2 * var(--u)); line-height: calc(3.8 * var(--u)); letter-spacing: calc(0.1 * var(--u)); } .sec-clients__heading-mark { font-size: calc(2.6 * var(--u)); line-height: calc(3.8 * var(--u)); } .sec-clients__lead { width: 100%; font-size: calc(1.6 * var(--u)); line-height: calc(2.8 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } .sec-clients__body { gap: calc(4.8 * var(--u)); } /* 3+2段→1列縦積み（rowをdisplay:contentsで平坦化） */ .sec-clients__row, .sec-clients__row--pad { display: contents; } .sec-clients__card { width: 100%; gap: calc(2.4 * var(--u)); } .sec-clients__badge { width: 100%; } .sec-clients__badge-branch { width: calc(2.559 * var(--u)); height: calc(5.971 * var(--u)); } .sec-clients__badge-small, .sec-clients__badge--compact .sec-clients__badge-small { font-size: calc(1.8 * var(--u)); line-height: calc(3.2 * var(--u)); } .sec-clients__badge-large, .sec-clients__badge--compact .sec-clients__badge-large { font-size: calc(2.4 * var(--u)); line-height: calc(3.2 * var(--u)); } .sec-clients__figure { width: 100%; height: auto; aspect-ratio: 864 / 640; } .sec-clients__name { font-size: calc(2 * var(--u)); letter-spacing: calc(0.1 * var(--u)); } .sec-clients__text { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } /* ==== バッチ3（Figma「Wireframe - 3 - sp」43:190）: demerit〜closing ==== */ /* ---------- sec-demerit（Figma SP 43:191：3カード縦積み） ---------- */ .sec-demerit { gap: calc(4.8 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-demerit__texts { gap: calc(3.2 * var(--u)); } .sec-demerit__head { gap: calc(1.6 * var(--u)); } .sec-demerit__title { font-size: calc(2.4 * var(--u)); white-space: normal; } .sec-demerit__title-em { display: block; font-size: calc(3.2 * var(--u)); } .sec-demerit__line { /* #22 SP：Figmaは細かい丸ドット（dash小・周期短） */ width: calc(16.752 * var(--u)); height: calc(0.2 * var(--u)); background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0.85) calc(0.2 * var(--u)), transparent calc(0.2 * var(--u)), transparent calc(0.65 * var(--u))); } .sec-demerit__lead { font-size: calc(2 * var(--u)); } .sec-demerit__lead-line { line-height: calc(4 * var(--u)); } .sec-demerit__cards { flex-direction: column; align-items: stretch; gap: calc(2.4 * var(--u)); } .sec-demerit__card { width: 100%; height: auto; gap: calc(2.4 * var(--u)); padding: 0 calc(3 * var(--u)) calc(4.8 * var(--u)); border-radius: calc(1 * var(--u)); } .sec-demerit__card-head { gap: calc(3.2 * var(--u)); } .sec-demerit__tab { width: calc(16.6 * var(--u)); height: calc(4.2 * var(--u)); font-size: calc(2.2 * var(--u)); line-height: normal; letter-spacing: calc(0.22 * var(--u)); border-radius: 0 0 calc(2 * var(--u)) calc(2 * var(--u)); } .sec-demerit__card-title { font-size: calc(2.2 * var(--u)); line-height: calc(3.3 * var(--u)); letter-spacing: calc(0.11 * var(--u)); } .sec-demerit__card-title--tight { letter-spacing: 0; } .sec-demerit__card-text { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); font-feature-settings: normal; } /* ---------- sec-service（Figma SP 43:216：3カード縦積み） ---------- */ .sec-service { gap: calc(4.8 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)) 0; } .sec-service__head { gap: calc(4 * var(--u)); } .sec-service__eyebrow { font-size: calc(2.4 * var(--u)); letter-spacing: calc(0.12 * var(--u)); } .sec-service__eyebrow-tick { font-size: calc(2 * var(--u)); } /* PC用
を無効化し自然折返し・左寄せ */ .sec-service__lead { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); text-align: left; } .sec-service__lead br { display: none; } .sec-service__main { gap: calc(4 * var(--u)); } .sec-service__divider-line { flex: 0 0 calc(5.75 * var(--u)); height: calc(0.1 * var(--u)); } /* 罫線1px */ .sec-service__divider-title { font-size: calc(2 * var(--u)); line-height: calc(2.8 * var(--u)); letter-spacing: calc(0.1 * var(--u)); white-space: normal; text-align: center; } /* 中央揃え */ .sec-service__cards-group { gap: calc(2.4 * var(--u)); } .sec-service__cards { flex-direction: column; align-items: stretch; gap: calc(2.4 * var(--u)); } .sec-service__card { width: 100%; height: calc(33.5 * var(--u)); padding: calc(5.51 * var(--u)) calc(3.7 * var(--u)); border-radius: calc(1.5 * var(--u)); } .sec-service__card-stroke { inset: calc(2 * var(--u)); border-width: calc(0.1 * var(--u)); } /* 内側罫線1px */ .sec-service__card-icon { width: calc(9.4 * var(--u)); height: auto; } .sec-service__card-texts { gap: calc(1.2 * var(--u)); } .sec-service__card-title { font-size: calc(2.4 * var(--u)); letter-spacing: calc(0.12 * var(--u)); } .sec-service__card-text { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); text-align: center; } /* #25 SP：カード説明文を中央揃え */ .sec-service__notes { font-size: calc(1.4 * var(--u)); line-height: calc(2.8 * var(--u)); letter-spacing: calc(0.07 * var(--u)); } /* ---------- sec-strength（Figma SP 43:246：4カード縦積み[画像上→本文下]） ---------- */ .sec-strength { gap: calc(4.8 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-strength__head { gap: calc(0.8 * var(--u)); } .sec-strength__tag { width: calc(18 * var(--u)); height: calc(2.6 * var(--u)); font-size: calc(1.8 * var(--u)); letter-spacing: calc(0.09 * var(--u)); border-radius: calc(4 * var(--u)); } .sec-strength__title { font-size: calc(2.8 * var(--u)); letter-spacing: calc(0.14 * var(--u)); } .sec-strength__list { gap: calc(4.8 * var(--u)); } .sec-strength__item { flex-direction: column; align-items: stretch; gap: calc(2 * var(--u)); } .sec-strength__item-figure { order: -1; } .sec-strength__item-label { font-size: calc(1.6 * var(--u)); gap: calc(0.37 * var(--u)); letter-spacing: calc(0.08 * var(--u)); margin-bottom: calc(1.6 * var(--u)); } .sec-strength__item-label::after { width: calc(2.458 * var(--u)); } .sec-strength__item-num { font-size: calc(2.4 * var(--u)); } .sec-strength__item-title { font-size: calc(2 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.1 * var(--u)); margin-bottom: calc(2.8 * var(--u)); } .sec-strength__item-body { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } /* card1 コラージュ（335幅・h214.842） */ .sec-strength__item-figure--01 { flex: none; width: 100%; height: calc(21.4842 * var(--u)); } .sec-strength__item-figure--01 img:first-child { width: calc(23.503 * var(--u)); height: calc(14.9842 * var(--u)); } .sec-strength__item-figure--01 img:last-child { width: calc(14.495 * var(--u)); height: calc(13.0002 * var(--u)); } /* card2/3 単一画像 aspect920/680 全幅 */ .sec-strength__item-figure--02, .sec-strength__item-figure--03 { flex: none; width: 100%; } .sec-strength__item-figure--02 img, .sec-strength__item-figure--03 img { width: 100%; height: auto; aspect-ratio: 920 / 680; } /* card4 コラージュ（335幅・h391.46） */ .sec-strength__item-figure--04 { flex: none; width: 100%; height: calc(39.146 * var(--u)); } .sec-strength__item-figure--04 img:nth-child(1) { left: calc(4.4 * var(--u)); top: 0; width: calc(24.206 * var(--u)); height: calc(15.7443 * var(--u)); } .sec-strength__item-figure--04 img:nth-child(2) { right: 0; top: calc(11.294 * var(--u)); width: calc(18.415 * var(--u)); height: calc(16.5423 * var(--u)); } .sec-strength__item-figure--04 img:nth-child(3) { left: 0; bottom: 0; width: calc(20.738 * var(--u)); height: calc(20.9461 * var(--u)); } /* ---------- sec-seminar（Figma SP 43:293） ---------- */ .sec-seminar { padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-seminar__bgtext { top: calc(7.448 * var(--u)); font-size: calc(8 * var(--u)); letter-spacing: calc(0.4 * var(--u)); } .sec-seminar__inner { max-width: 100%; width: 100%; padding: 0; } .sec-seminar__head { margin-bottom: calc(4.5 * var(--u)); } .sec-seminar__title-wrap { width: 100%; height: auto; min-height: calc(15 * var(--u)); padding: calc(2.55 * var(--u)) 0; } .sec-seminar__title-bubble { height: calc(15 * var(--u)); } .sec-seminar__title { font-size: calc(2 * var(--u)); line-height: calc(3 * var(--u)); } /* 講師写真を上・本文を下の縦積み・左寄せ */ .sec-seminar__intro { flex-direction: column; gap: calc(3.05 * var(--u)); margin-bottom: calc(4.8 * var(--u)); text-align: left; } .sec-seminar__intro-figure { flex: none; width: 100%; order: -1; } .sec-seminar__intro-figure img { height: auto; aspect-ratio: 1013 / 721; box-shadow: calc(0.66 * var(--u)) calc(0.66 * var(--u)) 0 0 #ffffff; } .sec-seminar__lead { font-size: calc(1.6 * var(--u)); line-height: calc(3.2 * var(--u)); } .sec-seminar__lead:last-child { font-size: calc(1.4 * var(--u)); } .sec-seminar__cta { gap: calc(2.4 * var(--u)); padding: calc(4.8 * var(--u)) 0; margin-bottom: calc(4.8 * var(--u)); } .sec-seminar__cta-inner { width: 100%; padding: calc(5.08 * var(--u)) 0; gap: calc(1.6 * var(--u)); } .sec-seminar__cta-lead { display: block; font-size: calc(1.8 * var(--u)); line-height: 1.6; } .sec-seminar__cta-btn { width: calc(29.7 * var(--u)); height: calc(5.6 * var(--u)); font-size: calc(1.5 * var(--u)); border-radius: calc(0.5 * var(--u)); } .sec-seminar__cta-note { width: 100%; font-size: calc(1.4 * var(--u)); line-height: calc(2.8 * var(--u)); } /* #28 SP：注記の行高をFigma lh28に */ .sec-seminar__learn-head { min-height: calc(8.3 * var(--u)); margin-bottom: calc(4 * var(--u)); } .sec-seminar__learn-titlebox { gap: calc(0.8 * var(--u)); } .sec-seminar__learn-laurel { width: calc(3.585 * var(--u)); height: calc(8.3316 * var(--u)); } .sec-seminar__learn-title { font-size: calc(2.8 * var(--u)); line-height: calc(4 * var(--u)); } .sec-seminar__learn-title-sub { font-size: calc(2 * var(--u)); } .sec-seminar__learn-person--left { top: calc(5.294 * var(--u)); left: 0; width: calc(4.235 * var(--u)); } .sec-seminar__learn-person--right { top: calc(5.794 * var(--u)); right: 0; width: calc(3.666 * var(--u)); } /* パネル白地・角の折り返しはSPでは省略（Figmaは枠のみ＝POLISH） */ .sec-seminar__learn-panel { /* #29 SP：右下ドッグイヤーは20×20px（Figma実測） */ padding: calc(3.2 * var(--u)) calc(2 * var(--u)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(2 * var(--u))), calc(100% - calc(2 * var(--u))) 100%, 0 100%); } .sec-seminar__learn-panel::after { display: block; width: calc(2 * var(--u)); height: calc(2 * var(--u)); } .sec-seminar__checklist li { font-size: calc(1.6 * var(--u)); line-height: 1.75; padding: calc(1.6 * var(--u)) 0 calc(1.6 * var(--u)) calc(2.8 * var(--u)); } .sec-seminar__checklist li::before { top: calc(1.8 * var(--u)); width: calc(2.125 * var(--u)); height: calc(2.027 * var(--u)); } .sec-seminar__footnote { font-size: calc(1.6 * var(--u)); line-height: 1.625; margin-top: calc(2.4 * var(--u)); } /* ---------- sec-closing（Figma SP 43:362 / 49:89） ---------- */ .sec-closing { padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-closing__inner { max-width: 100%; width: 100%; padding: 0; } .sec-closing__card { width: 100%; padding: calc(5.08 * var(--u)) 0; gap: calc(1.6 * var(--u)); border: calc(0.2 * var(--u)) solid #346A1B; } .sec-closing__lead { display: block; font-size: calc(1.8 * var(--u)); line-height: 1.6; } .sec-closing__btn { width: calc(29.7 * var(--u)); height: calc(5.6 * var(--u)); font-size: calc(1.5 * var(--u)); border-radius: calc(0.5 * var(--u)); } /* ---------- sec-faq（Figma SP 43:371） ---------- */ .sec-faq { gap: calc(4 * var(--u)); padding: calc(6.4 * var(--u)) calc(2 * var(--u)); } .sec-faq__title { font-size: calc(2.8 * var(--u)); letter-spacing: calc(0.14 * var(--u)); } .sec-faq__item { padding: calc(3.2 * var(--u)) 0; } /* #31 SP：Q.(4u固定列)＋質問文（折返しは質問列内でぶら下げ）。flex縦積みをやめ block+hanging indent */ .sec-faq__q { display: block; font-size: calc(2 * var(--u)); line-height: calc(3 * var(--u)); letter-spacing: calc(0.1 * var(--u)); margin-bottom: calc(2.4 * var(--u)); padding-left: calc(4 * var(--u)); text-indent: calc(-4 * var(--u)); } .sec-faq__q-mark { display: inline-block; width: calc(4 * var(--u)); text-indent: 0; font-size: calc(2.8 * var(--u)); letter-spacing: calc(0.14 * var(--u)); } .sec-faq__q-sub { display: inline; flex: initial; padding-left: 0; } .sec-faq__a { font-size: calc(1.6 * var(--u)); line-height: calc(2.8 * var(--u)); letter-spacing: calc(0.08 * var(--u)); } /* ---------- sec-member（Figma SP 43:414：6名カルーセル＋締めbox） ---------- */ .sec-member { padding: calc(6.4 * var(--u)) 0; } .sec-member__head { margin-bottom: calc(5.2 * var(--u)); } .sec-member__heading { font-size: calc(2.4 * var(--u)); } .sec-member__heading-deco { margin-top: calc(1.6 * var(--u)); } .sec-member__list { gap: calc(1.45 * var(--u)); } .sec-member__card { flex: 0 0 calc(29.428 * var(--u)); } .sec-member__arrow { display: none; } /* #32 SP：前後矢印は非表示（スワイプ操作に統一） */ .sec-member__photo { margin-bottom: calc(1.6 * var(--u)); } .sec-member__name-en { font-size: calc(1.2 * var(--u)); margin-bottom: calc(0.8 * var(--u)); } .sec-member__name-jp { font-size: calc(2.4 * var(--u)); margin-bottom: calc(1.6 * var(--u)); } .sec-member__text { font-size: calc(1.6 * var(--u)); line-height: 2; } .sec-member__closing { width: calc(33.5 * var(--u)); max-width: 100%; margin: calc(4.8 * var(--u)) auto 0; padding: calc(5.6 * var(--u)) calc(2 * var(--u)); clip-path: polygon(calc(2 * var(--u)) 0, 100% 0, 100% calc(100% - calc(2 * var(--u))), calc(100% - calc(2 * var(--u))) 100%, 0 100%, 0 calc(2 * var(--u))); } .sec-member__closing::before { clip-path: polygon(calc(2 * var(--u)) 0, 100% 0, 100% calc(100% - calc(2 * var(--u))), calc(100% - calc(2 * var(--u))) 100%, 0 100%, 0 calc(2 * var(--u))); } .sec-member__closing-title { font-size: calc(2 * var(--u)); line-height: 1.6; margin-bottom: calc(4 * var(--u)); } .sec-member__closing-mark { font-size: calc(2 * var(--u)); } .sec-member__closing-text { font-size: calc(1.6 * var(--u)); line-height: 2; } }