/* ========================================================= FV / スマホ調整 --------------------------------------------------------- スマホでは2カラムをやめて、上から順に コピー → CTA → 特徴 → 画像 の縦積みにします。 ========================================================= */ /* ========================================================= FV / コピー＋特徴カード連動型：SP --------------------------------------------------------- スマホでは2カラムを解除して、 コピー → CTA → 画像 → 特徴カード の順に縦積みします。 ========================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------- FV全体 ------------------------------------------------------- スマホでは余白を少し小さくします。 ------------------------------------------------------- */ .fv-feature { padding: 56px 0 48px; } /* ------------------------------------------------------- FV内側レイアウト ------------------------------------------------------- PCの2カラムを解除して、1カラムにします。 ------------------------------------------------------- */ .fv-feature__inner { grid-template-columns: 1fr; gap: 36px; } /* ------------------------------------------------------- 左側コンテンツ ------------------------------------------------------- スマホでは中央寄せにしてFVらしくまとめます。 ------------------------------------------------------- */ .fv-feature__content { text-align: center; } /* ------------------------------------------------------- 補足ラベル ------------------------------------------------------- スマホでは少し小さくします。 ------------------------------------------------------- */ .fv-feature__label { margin-bottom: 18px; font-size: 0.8rem; } /* ------------------------------------------------------- メインコピー ------------------------------------------------------- スマホで読みやすいサイズにします。 ------------------------------------------------------- */ .fv-feature__title { font-size: clamp(1.95rem, 8.8vw, 3rem); line-height: 1.36; letter-spacing: 0.03em; } /* ------------------------------------------------------- リード文 ------------------------------------------------------- 読みやすい行間・文字サイズに調整します。 ------------------------------------------------------- */ .fv-feature__lead { margin-top: 20px; font-size: 0.94rem; line-height: 1.9; text-align: left; } /* ------------------------------------------------------- CTAエリア ------------------------------------------------------- スマホではボタンを縦並びにして押しやすくします。 ------------------------------------------------------- */ .fv-feature__buttons { display: grid; gap: 14px; margin-top: 30px; } /* ------------------------------------------------------- CTAボタン ------------------------------------------------------- common.css 側で .c-btn はスマホ時 width:100% になるため、 min-widthだけ解除します。 ------------------------------------------------------- */ .fv-feature__main-btn, .fv-feature__sub-btn { min-width: auto; } /* ------------------------------------------------------- 右側エリア ------------------------------------------------------- スマホではコピー下に表示される通常コンテンツにします。 ------------------------------------------------------- */ .fv-feature__visual-area { gap: 18px; } /* ------------------------------------------------------- メイン画像枠 ------------------------------------------------------- スマホでは少し横長の画像枠にします。 ------------------------------------------------------- */ .fv-feature__image-frame { aspect-ratio: 4 / 3; border-radius: var(--radius-m); } /* ------------------------------------------------------- 特徴カード一覧 ------------------------------------------------------- スマホでは1列にして読みやすくします。 ------------------------------------------------------- */ .fv-feature__cards { grid-template-columns: 1fr; gap: 12px; } /* ------------------------------------------------------- 特徴カード ------------------------------------------------------- スマホではアイコン左・テキスト右の横並びにして、 縦に長くなりすぎないようにします。 ------------------------------------------------------- */ .fv-feature__card { grid-template-columns: 54px 1fr; justify-items: start; align-items: center; column-gap: 14px; row-gap: 4px; padding: 16px; text-align: left; } /* ------------------------------------------------------- 特徴カードアイコン ------------------------------------------------------- スマホでは少し小さくします。 ------------------------------------------------------- */ .fv-feature__card-icon { grid-row: span 2; width: 50px; height: 50px; font-size: 1.2rem; } /* ------------------------------------------------------- 特徴カード見出し ------------------------------------------------------- 横並びカード内で読みやすいサイズにします。 ------------------------------------------------------- */ .fv-feature__card-title { font-size: 0.98rem; } /* ------------------------------------------------------- 特徴カード説明文 ------------------------------------------------------- スマホ用に少し小さめにします。 ------------------------------------------------------- */ .fv-feature__card-text { font-size: 0.8rem; line-height: 1.65; } } /* ========================================================= さらに小さいスマホ用 ========================================================= */ @media (max-width: 430px) { /* FV全体の余白調整 */ .fv-feature { padding: 48px 0 44px; } /* メインコピーを少し小さめに */ .fv-feature__title { font-size: clamp(1.75rem, 8.8vw, 2.55rem); } /* 特徴カードの内側余白を微調整 */ .fv-feature__card { padding: 14px; } } /* ========================================================= FV / 動画・実績帯付き型：SP --------------------------------------------------------- スマホでは2カラムを解除し、 コピー → CTA → 動画 → 実績 の順に縦積みします。 ========================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------- FV全体 ------------------------------------------------------- スマホでは余白を少し小さくします。 ------------------------------------------------------- */ .fv-demo { padding: 56px 0 48px; } /* ------------------------------------------------------- FV内側 ------------------------------------------------------- スマホでは外側カードの余白を小さくします。 ------------------------------------------------------- */ .fv-demo__inner { padding: 30px 20px 28px; border-radius: var(--radius-m); } /* ------------------------------------------------------- 上段メインレイアウト ------------------------------------------------------- PCの2カラムを解除して1カラムにします。 ------------------------------------------------------- */ .fv-demo__main { grid-template-columns: 1fr; gap: 34px; } /* ------------------------------------------------------- コピーエリア ------------------------------------------------------- スマホでは中央寄せにします。 ------------------------------------------------------- */ .fv-demo__content { text-align: center; } /* ------------------------------------------------------- 補足ラベル ------------------------------------------------------- スマホで1行に収まりやすいよう小さめにします。 ------------------------------------------------------- */ .fv-demo__label { margin-bottom: 18px; font-size: 0.8rem; } /* ------------------------------------------------------- メインコピー ------------------------------------------------------- スマホで読みやすいサイズに調整します。 ------------------------------------------------------- */ .fv-demo__title { font-size: clamp(1.95rem, 8.8vw, 3rem); line-height: 1.36; letter-spacing: 0.03em; } /* ------------------------------------------------------- リード文 ------------------------------------------------------- スマホでは左寄せにすると本文が読みやすいです。 ------------------------------------------------------- */ .fv-demo__lead { margin-top: 20px; font-size: 0.94rem; line-height: 1.9; text-align: left; } /* ------------------------------------------------------- PC専用改行 ------------------------------------------------------- スマホでは自然改行に任せます。 ------------------------------------------------------- */ .u-pc { display: none; } /* ------------------------------------------------------- CTAエリア ------------------------------------------------------- スマホではボタンを縦並びにして押しやすくします。 ------------------------------------------------------- */ .fv-demo__buttons { display: grid; gap: 14px; margin-top: 28px; } /* ------------------------------------------------------- CTAボタン ------------------------------------------------------- common.css側で .c-btn はスマホ時 width:100% になるため、 min-widthだけ解除します。 ------------------------------------------------------- */ .fv-demo__main-btn, .fv-demo__sub-btn { min-width: auto; } /* ------------------------------------------------------- CTA補足文 ------------------------------------------------------- 中央に配置します。 ------------------------------------------------------- */ .fv-demo__microcopy { justify-content: center; } /* ------------------------------------------------------- 動画カード ------------------------------------------------------- スマホでは少し横長の動画枠にします。 ------------------------------------------------------- */ .fv-demo__video-card { aspect-ratio: 4 / 3; border-radius: var(--radius-m); } /* ------------------------------------------------------- 再生ボタン ------------------------------------------------------- スマホでは少し小さくします。 ------------------------------------------------------- */ .fv-demo__play-button { width: 68px; height: 68px; font-size: 1.55rem; } /* ------------------------------------------------------- 動画説明テキスト ------------------------------------------------------- スマホ向けのサイズにします。 ------------------------------------------------------- */ .fv-demo__video-text { bottom: 24%; font-size: 1rem; } /* ------------------------------------------------------- 実績・数値バンド ------------------------------------------------------- スマホでは縦並びにして読みやすくします。 ------------------------------------------------------- */ .fv-demo__stats { grid-template-columns: 1fr; margin-top: 30px; padding: 0; overflow: hidden; } /* ------------------------------------------------------- 実績1項目 ------------------------------------------------------- アイコン左・テキスト右の横並びにします。 ------------------------------------------------------- */ .fv-demo__stat { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 20px; } /* PCでは縦線だった区切りを、SPでは横線に変更 */ .fv-demo__stat + .fv-demo__stat { border-left: none; border-top: 1px solid rgba(31, 122, 122, 0.14); } /* 実績アイコン */ .fv-demo__stat-icon { width: 52px; height: 52px; font-size: 1.2rem; } /* 実績数値 */ .fv-demo__stat-value { font-size: 1.85rem; } /* スクロール誘導 */ .fv-demo__scroll { margin-top: 24px; } .fv-demo__scroll span { width: 20px; height: 20px; } } /* ========================================================= さらに小さいスマホ用 ========================================================= */ @media (max-width: 430px) { /* FV全体 */ .fv-demo { padding: 48px 0 44px; } /* 内側カード */ .fv-demo__inner { padding: 26px 18px 24px; } /* メインコピー */ .fv-demo__title { font-size: clamp(1.75rem, 8.8vw, 2.55rem); } /* 実績項目 */ .fv-demo__stat { padding: 16px; } } /* ========================================================= FV / アーチ型ビジュアル：SP --------------------------------------------------------- スマホでは2カラムを解除して、 コピー → CTA → アーチ型ビジュアル の順に縦積みします。 ========================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------- FV全体 ------------------------------------------------------- スマホでは余白を少し小さくします。 ------------------------------------------------------- */ .fv-arch { padding: 56px 0 48px; } /* ------------------------------------------------------- FV内側レイアウト ------------------------------------------------------- 1カラムに変更します。 ------------------------------------------------------- */ .fv-arch__inner { grid-template-columns: 1fr; gap: 40px; min-height: auto; } /* ------------------------------------------------------- 左側コピーエリア ------------------------------------------------------- スマホでは中央寄せにして、FVらしくまとめます。 ------------------------------------------------------- */ .fv-arch__content { text-align: center; } /* ------------------------------------------------------- メインコピー ------------------------------------------------------- スマホでは大きすぎないように調整します。 ------------------------------------------------------- */ .fv-arch__title { font-size: clamp(2.1rem, 10vw, 3.4rem); line-height: 1.35; letter-spacing: 0.06em; } /* ------------------------------------------------------- リード文 ------------------------------------------------------- スマホでも読みやすい文字サイズ・行間にします。 ------------------------------------------------------- */ .fv-arch__lead { margin-top: 24px; font-size: 0.95rem; line-height: 1.9; } /* ------------------------------------------------------- PC専用改行 ------------------------------------------------------- スマホでは自然な折り返しに任せます。 ------------------------------------------------------- */ .u-pc { display: none; } /* ------------------------------------------------------- CTAエリア ------------------------------------------------------- スマホではボタンを横幅いっぱいにします。 ------------------------------------------------------- */ .fv-arch__buttons { margin-top: 32px; } /* ------------------------------------------------------- CTAボタン ------------------------------------------------------- common.css側で .c-btn はスマホ時 width:100% になります。 ここでは min-width だけ解除します。 ------------------------------------------------------- */ .fv-arch__btn { min-width: auto; } /* ------------------------------------------------------- ビジュアルエリア ------------------------------------------------------- スマホでもアーチ型は残します。 ただし大きすぎないように幅を制限します。 ------------------------------------------------------- */ .fv-arch__visual { justify-items: center; } /* ------------------------------------------------------- アーチ型画像枠 ------------------------------------------------------- スマホでは横幅を少し小さめにします。 ------------------------------------------------------- */ .fv-arch__image-frame, .fv-arch__placeholder { width: min(82vw, 340px); aspect-ratio: 3 / 4.05; border-radius: 180px 180px var(--radius-s) var(--radius-s); } /* ------------------------------------------------------- 二重枠の角丸もスマホ用に調整 ------------------------------------------------------- */ .fv-arch__image-frame::before { inset: 8px; border-radius: 170px 170px var(--radius-s) var(--radius-s); } /* ------------------------------------------------------- スクロール誘導 ------------------------------------------------------- スマホでは少し下余白を整えます。 ------------------------------------------------------- */ .fv-arch__scroll { margin-top: 4px; } .fv-arch__scroll span { width: 18px; height: 18px; } } /* ========================================================= さらに小さいスマホ用 ========================================================= */ @media (max-width: 430px) { /* FV全体の余白調整 */ .fv-arch { padding: 48px 0 44px; } /* メインコピーを少し小さめに */ .fv-arch__title { font-size: clamp(1.9rem, 10vw, 2.8rem); } /* 画像枠をさらに少し小さめに */ .fv-arch__image-frame, .fv-arch__placeholder { width: min(86vw, 310px); } } /* ========================================================= FV / オーガニック曲線ビジュアル型：SP --------------------------------------------------------- スマホでは2カラムを解除して、 コピー → CTA → ビジュアル の順に縦積みします。 ========================================================= */ @media (max-width: 768px) { /* ------------------------------------------------------- FV全体 ------------------------------------------------------- スマホでは余白を少しコンパクトにします。 ------------------------------------------------------- */ .fv-organic { padding: 56px 0 48px; } /* ------------------------------------------------------- 背景装飾の調整 ------------------------------------------------------- スマホでは装飾をやや小さく・薄くします。 ------------------------------------------------------- */ .fv-organic::before { top: 72px; left: -18%; width: 90%; height: 140px; opacity: 0.8; } .fv-organic::after { left: -16%; bottom: 100px; width: 86%; height: 120px; opacity: 0.8; } /* ------------------------------------------------------- FV内側レイアウト ------------------------------------------------------- PCの2カラムを解除して1カラムにします。 ------------------------------------------------------- */ .fv-organic__inner { grid-template-columns: 1fr; gap: 40px; min-height: auto; } /* ------------------------------------------------------- コピーエリア ------------------------------------------------------- スマホでは中央寄せにしてFVらしくまとめます。 ------------------------------------------------------- */ .fv-organic__content { text-align: center; } /* ------------------------------------------------------- メインコピー ------------------------------------------------------- スマホで読みやすいサイズに調整します。 ------------------------------------------------------- */ .fv-organic__title { font-size: clamp(2rem, 10vw, 3.4rem); line-height: 1.35; letter-spacing: 0.03em; } /* ------------------------------------------------------- リード文 ------------------------------------------------------- スマホでは少し小さくしつつ、左寄せにすると本文が読みやすいです。 ------------------------------------------------------- */ .fv-organic__lead { max-width: none; margin-top: 22px; font-size: 0.95rem; line-height: 1.9; text-align: left; } /* ------------------------------------------------------- CTAエリア ------------------------------------------------------- スマホではボタンを縦並びにして押しやすくします。 ------------------------------------------------------- */ .fv-organic__buttons { display: grid; gap: 14px; margin-top: 30px; } /* ------------------------------------------------------- CTAボタン ------------------------------------------------------- common.css 側で .c-btn はスマホ時 width:100% になる想定です。 ここでは min-width を解除します。 ------------------------------------------------------- */ .fv-organic__main-btn, .fv-organic__sub-btn { min-width: auto; } /* ------------------------------------------------------- ビジュアルエリア ------------------------------------------------------- スマホでは少しコンパクトに見せます。 ------------------------------------------------------- */ .fv-organic__visual { min-height: auto; } /* ------------------------------------------------------- オーガニック形状の画像枠 ------------------------------------------------------- スマホでも形は残しますが、少し小さめにします。 ------------------------------------------------------- */ .fv-organic__image-frame, .fv-organic__placeholder { width: min(82vw, 360px); aspect-ratio: 1 / 1; } /* ------------------------------------------------------- 二重枠装飾 ------------------------------------------------------- スマホ向けに内側の余白を少し小さくします。 ------------------------------------------------------- */ .fv-organic__image-frame::before { inset: 8px; } /* ------------------------------------------------------- 装飾ドット ------------------------------------------------------- スマホでは位置とサイズを調整します。 ------------------------------------------------------- */ .fv-organic__dot--lg { left: 10%; bottom: 12%; width: 28px; height: 28px; } .fv-organic__dot--sm { left: 4%; bottom: 8%; width: 10px; height: 10px; } /* ------------------------------------------------------- スクロール誘導 ------------------------------------------------------- スマホでは少し小さくします。 ------------------------------------------------------- */ .fv-organic__scroll { margin-top: 0; } .fv-organic__scroll span { width: 18px; height: 18px; } } /* ========================================================= さらに小さいスマホ用 ========================================================= */ @media (max-width: 430px) { /* FV全体の余白をさらに調整 */ .fv-organic { padding: 48px 0 44px; } /* メインコピーをやや小さく */ .fv-organic__title { font-size: clamp(1.8rem, 10vw, 2.85rem); } /* ビジュアル幅を少し調整 */ .fv-organic__image-frame, .fv-organic__placeholder { width: min(86vw, 320px); } }