/* ========================================================= FV / スマホ調整 --------------------------------------------------------- スマホでは2カラムをやめて、上から順に コピー → CTA → 特徴 → 画像 の縦積みにします。 ========================================================= */ /* ========================================================= FV / 斜めパラレル型ビジュアル：SP --------------------------------------------------------- スマホでは2カラムを解除して、 コピー → CTA → ビジュアル の順で縦積みします。 ========================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------- FV全体 ------------------------------------------------------- スマホでは上下余白を少し小さくします。 ------------------------------------------------------- */ .fv-parallel { padding: 56px 0 48px; } /* ------------------------------------------------------- FV内側レイアウト ------------------------------------------------------- PCの2カラムを解除して1カラムにします。 ------------------------------------------------------- */ .fv-parallel__inner { grid-template-columns: 1fr; gap: 40px; min-height: auto; } /* ------------------------------------------------------- コピーエリア ------------------------------------------------------- スマホでは中央寄せにしてFVらしくまとめます。 ------------------------------------------------------- */ .fv-parallel__content { text-align: center; } /* ------------------------------------------------------- 補足ラベル ------------------------------------------------------- スマホで収まりやすいよう少し小さめにします。 ------------------------------------------------------- */ .fv-parallel__label { margin-bottom: 18px; font-size: 0.8rem; } /* ------------------------------------------------------- メインコピー ------------------------------------------------------- スマホで読みやすい文字サイズに調整します。 ------------------------------------------------------- */ .fv-parallel__title { font-size: clamp(2rem, 10vw, 3.4rem); line-height: 1.35; letter-spacing: 0.03em; } /* ------------------------------------------------------- リード文 ------------------------------------------------------- スマホでは本文を左寄せにすると読みやすいです。 ------------------------------------------------------- */ .fv-parallel__lead { max-width: none; margin-top: 22px; font-size: 0.95rem; line-height: 1.9; text-align: left; } /* ------------------------------------------------------- PC専用改行 ------------------------------------------------------- スマホでは自然改行に任せます。 ------------------------------------------------------- */ .u-pc { display: none; } /* ------------------------------------------------------- CTAエリア ------------------------------------------------------- スマホではボタンを横幅いっぱいにします。 ------------------------------------------------------- */ .fv-parallel__buttons { margin-top: 32px; } /* ------------------------------------------------------- CTAボタン ------------------------------------------------------- common.css側で .c-btn はスマホ時 width:100% になります。 ここでは min-width を解除します。 ------------------------------------------------------- */ .fv-parallel__btn { min-width: auto; } /* ------------------------------------------------------- ビジュアルエリア ------------------------------------------------------- スマホでは画像を下に配置します。 ------------------------------------------------------- */ .fv-parallel__visual { justify-items: center; } /* ------------------------------------------------------- 斜めパラレル型画像枠 ------------------------------------------------------- スマホでも斜め感は残します。 ただし切れすぎないよう、比率と幅を小さめにします。 ------------------------------------------------------- */ .fv-parallel__image-frame, .fv-parallel__placeholder { width: min(86vw, 360px); aspect-ratio: 3.4 / 4.3; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); } /* ------------------------------------------------------- 内側ラインもスマホ用の角度に合わせます。 ------------------------------------------------------- */ .fv-parallel__image-frame::before { inset: 8px; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); } } /* ========================================================= さらに小さいスマホ用 ========================================================= */ @media (max-width: 430px) { /* FV全体の余白をさらに調整 */ .fv-parallel { padding: 48px 0 44px; } /* メインコピーを少し小さめに */ .fv-parallel__title { font-size: clamp(1.8rem, 10vw, 2.85rem); } /* 画像枠を少し小さく */ .fv-parallel__image-frame, .fv-parallel__placeholder { width: min(88vw, 320px); } } /* ========================================================= FV / 円形・オーバルビジュアル型：SP --------------------------------------------------------- スマホでは ヘッダー → コピー → CTA → ビジュアル の順で縦積みにします。 ========================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------- FV全体 ------------------------------------------------------- スマホでは余白を少しコンパクトにします。 ------------------------------------------------------- */ .fv-oval { padding: 48px 0 44px; } /* ------------------------------------------------------- 内側カード ------------------------------------------------------- SP向けに余白と角丸を少し小さくします。 ------------------------------------------------------- */ .fv-oval__inner { padding: 20px 18px 26px; border-radius: var(--radius-m); } /* ------------------------------------------------------- ヘッダー ------------------------------------------------------- SPでは「ロゴ」「CTA」を優先して、 ナビは非表示にします。 ------------------------------------------------------- */ .fv-oval__header { grid-template-columns: 1fr auto; gap: 12px; padding-bottom: 14px; } .fv-oval__nav { display: none; } .fv-oval__logo-text { font-size: 1.5rem; } .fv-oval__header-btn { min-height: 42px; padding: 0 16px; font-size: 0.88rem; } /* ------------------------------------------------------- 本体レイアウト ------------------------------------------------------- 2カラムを解除して1カラムにします。 ------------------------------------------------------- */ .fv-oval__body { grid-template-columns: 1fr; gap: 34px; min-height: auto; padding: 28px 0 18px; } /* ------------------------------------------------------- コピーエリア ------------------------------------------------------- SPでは中央寄せにしてFVらしく見せます。 ------------------------------------------------------- */ .fv-oval__content { text-align: center; } .fv-oval__eyebrow { font-size: 0.85rem; } .fv-oval__title { margin-top: 18px; font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.36; letter-spacing: 0.02em; } .fv-oval__lead { max-width: none; margin-top: 20px; font-size: 0.94rem; line-height: 1.9; text-align: left; } /* ------------------------------------------------------- PC専用改行 ------------------------------------------------------- SPでは自然改行に任せます。 ------------------------------------------------------- */ .u-pc { display: none; } /* ------------------------------------------------------- CTAボタンエリア ------------------------------------------------------- SPでは縦並びにして押しやすくします。 ------------------------------------------------------- */ .fv-oval__buttons { display: grid; gap: 12px; margin-top: 28px; } .fv-oval__main-btn, .fv-oval__sub-btn { min-width: auto; width: 100%; } .fv-oval__microcopy { justify-content: center; margin-top: 14px; font-size: 0.8rem; } /* ------------------------------------------------------- ビジュアルエリア ------------------------------------------------------- 下に円形ビジュアルを配置します。 ------------------------------------------------------- */ .fv-oval__visual { min-height: auto; padding-bottom: 12px; } /* ------------------------------------------------------- 円形 / オーバル画像枠 ------------------------------------------------------- SPでは少し小さめにします。 ほんの少し縦長にして“オーバル感”を出してもOKです。 ------------------------------------------------------- */ .fv-oval__image-frame, .fv-oval__placeholder { width: min(82vw, 340px); aspect-ratio: 1 / 1.05; border-radius: 50%; } .fv-oval__image-frame::before { inset: 8px; } .fv-oval__image-shadow { width: 58%; height: 22px; bottom: 6px; } /* ------------------------------------------------------- スクロール誘導 ------------------------------------------------------- SPでは少し小さくします。 ------------------------------------------------------- */ .fv-oval__scroll { margin-top: 4px; } .fv-oval__scroll span { width: 16px; height: 16px; } } /* ========================================================= さらに小さいスマホ用 ========================================================= */ @media (max-width: 430px) { /* 内側カード余白をさらに少し調整 */ .fv-oval__inner { padding: 18px 14px 22px; } /* メインコピーを少し小さく */ .fv-oval__title { font-size: clamp(1.75rem, 9vw, 2.7rem); } /* 円形ビジュアルを少しコンパクトに */ .fv-oval__image-frame, .fv-oval__placeholder { width: min(86vw, 300px); } /* ヘッダーCTAも少し小さく */ .fv-oval__header-btn { padding: 0 14px; font-size: 0.82rem; } } /* ========================================================= FV / 重なりカードビジュアル型：SP --------------------------------------------------------- スマホでは2カラムを解除し、 コピー → CTA → 実績 → 重なりカードビジュアル の順番で縦積みします。 ========================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------- FV全体 ------------------------------------------------------- スマホでは余白を少しコンパクトにします。 ------------------------------------------------------- */ .fv-stack { padding: 56px 0 48px; } /* ------------------------------------------------------- FV内側レイアウト ------------------------------------------------------- PCの2カラムを解除して1カラムにします。 ------------------------------------------------------- */ .fv-stack__inner { grid-template-columns: 1fr; gap: 42px; min-height: auto; } /* ------------------------------------------------------- コピーエリア ------------------------------------------------------- SPでは中央寄せにしてFVらしくまとめます。 ------------------------------------------------------- */ .fv-stack__content { text-align: center; } /* ------------------------------------------------------- 補足ラベル ------------------------------------------------------- スマホでは小さめにします。 ------------------------------------------------------- */ .fv-stack__label { margin-bottom: 18px; font-size: 0.8rem; } /* ------------------------------------------------------- メインコピー ------------------------------------------------------- スマホで読みやすいサイズに調整します。 ------------------------------------------------------- */ .fv-stack__title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.36; letter-spacing: 0.03em; } /* ------------------------------------------------------- リード文 ------------------------------------------------------- 本文は左寄せの方が読みやすいので、SPでは左寄せにします。 ------------------------------------------------------- */ .fv-stack__lead { max-width: none; margin-top: 22px; font-size: 0.95rem; line-height: 1.9; text-align: left; } /* ------------------------------------------------------- CTAエリア ------------------------------------------------------- スマホではボタンとリンクを縦に並べます。 ------------------------------------------------------- */ .fv-stack__buttons { display: grid; gap: 14px; margin-top: 30px; } /* ------------------------------------------------------- メインCTA ------------------------------------------------------- common.css側で .c-btn はスマホ時 width:100% になるため、 min-widthだけ解除します。 ------------------------------------------------------- */ .fv-stack__main-btn { min-width: auto; } /* ------------------------------------------------------- サブ導線リンク ------------------------------------------------------- 中央寄せで表示します。 ------------------------------------------------------- */ .fv-stack__text-link { justify-self: center; font-size: 0.92rem; } /* ------------------------------------------------------- 実績・信頼要素 ------------------------------------------------------- スマホではカード状にまとめて見やすくします。 ------------------------------------------------------- */ .fv-stack__stats { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 30px; } /* ------------------------------------------------------- 実績1項目 ------------------------------------------------------- アイコン左、テキスト右の横並びにします。 ------------------------------------------------------- */ .fv-stack__stat { justify-content: flex-start; padding: 14px 16px; border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(31, 122, 122, 0.12); text-align: left; } /* ------------------------------------------------------- 重なりカードエリア ------------------------------------------------------- SPではカードがはみ出しやすいため、 高さと幅を調整します。 ------------------------------------------------------- */ .fv-stack__visual { min-height: 300px; } /* ------------------------------------------------------- 共通カード ------------------------------------------------------- SPでは横幅を画面に収めます。 ------------------------------------------------------- */ .fv-stack__card, .fv-stack__placeholder { width: min(92vw, 360px); aspect-ratio: 4 / 3.1; } /* ------------------------------------------------------- 背面カード1 ------------------------------------------------------- SP用にずらし幅を小さくします。 ------------------------------------------------------- */ .fv-stack__card--back-1 { top: 8px; right: 20px; transform: rotate(4deg); } /* ------------------------------------------------------- 背面カード2 ------------------------------------------------------- SP用に位置を調整します。 ------------------------------------------------------- */ .fv-stack__card--back-2 { top: 34px; right: 4px; transform: rotate(-3deg); } /* ------------------------------------------------------- 前面カード ------------------------------------------------------- SPでは中央に近い位置へ調整します。 ------------------------------------------------------- */ .fv-stack__card--main, .fv-stack__placeholder { top: 58px; right: 22px; } } /* ========================================================= さらに小さいスマホ用 ========================================================= */ @media (max-width: 430px) { /* FV全体 */ .fv-stack { padding: 48px 0 44px; } /* メインコピー */ .fv-stack__title { font-size: clamp(1.8rem, 9vw, 2.65rem); } /* 重なりカードエリア */ .fv-stack__visual { min-height: 270px; } /* カード幅調整 */ .fv-stack__card, .fv-stack__placeholder { width: min(88vw, 320px); } .fv-stack__card--main, .fv-stack__placeholder { right: 12px; } }