@charset "UTF-8"; /* ============================================================ solution-detail-v2.css ソリューション詳細ページ（課題→ブリッジ→POINT→機能特徴の共通テンプレート）のレイアウト刷新。対象: /solutions/mobile-order/ ・ /solutions/qualite/ ・ /solutions/acquisition/ 適用方法: に data-layout="solution-detail-v2" を付与し、このファイルを main.min.css の後に読み込む。ねらい - 「こんな課題はありませんか？」〜「解決ポイント」の縦の間延びを解消（SP -32% / PC -21%） - 機能特徴をカルーセルから一覧グリッドへ。全件が同時に視認できる - ページ内アンカーナビでロングページの読み飛ばしを可能に main.css は変更していないため、この属性を持たないページには一切影響しない。 ============================================================ */ /* ------------------------------------------------------------ 0. ページ内アンカー ------------------------------------------------------------ */ /* SPは l-header__head が position:fixed（top:0 / height:56px）のため、その分だけ着地位置を下げる。PCヘッダーは static。 56px + 余白14px = 70px（2026-09-11のヘッダー縮小に合わせて88pxから変更） */ [data-layout="solution-detail-v2"] #challenge, [data-layout="solution-detail-v2"] #feature, [data-layout="solution-detail-v2"] #howto, [data-layout="solution-detail-v2"] #case { scroll-margin-top: 70px; } [data-layout="solution-detail-v2"] .l-section-solutionDetailNav { padding: 0 20px; } [data-layout="solution-detail-v2"] .l-section-solutionDetailNav__inner { max-width: 1280px; margin: 0 auto; padding: 24px 0 0; } [data-layout="solution-detail-v2"] .p-solutionDetail-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; } /* SPは2列に揃える（4項目のときに3＋1で割れるのを防ぐ） */ [data-layout="solution-detail-v2"] .p-solutionDetail-nav__item { flex: 0 1 calc(50% - 4px); } [data-layout="solution-detail-v2"] .p-solutionDetail-nav__link { display: block; text-align: center; background: #fff; border: solid 1px #b7e8de; border-radius: 999px; padding: 9px 30px 9px 16px; font-size: 1.3rem; line-height: 1.4; font-weight: bold; color: #1a1a1a; position: relative; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } /* 下方向に飛ぶことを示す矢印（画像を増やさず CSS のみで描画） */ [data-layout="solution-detail-v2"] .p-solutionDetail-nav__link::after { content: ""; position: absolute; top: 50%; right: 14px; width: 6px; height: 6px; border-right: solid 2px #29baa2; border-bottom: solid 2px #29baa2; transform: translateY(-70%) rotate(45deg); transition: border-color 0.3s; } /* ------------------------------------------------------------ 1. 「こんな課題はありませんか？」の圧縮（SP: 2×2グリッド） ------------------------------------------------------------ */ [data-layout="solution-detail-v2"] .l-section-solutionDetailQuestion__inner { padding: 36px 0 0; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__list { width: auto; max-width: 340px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 10px; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__item { flex-direction: column; gap: 6px; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__img { max-width: 88px; margin: 0 auto; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__txt { font-size: 1.4rem; line-height: 1.5; text-align: center; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__decoration { padding: 14px 0 0; } /* ------------------------------------------------------------ 2. ブリッジ装飾の余白圧縮 ------------------------------------------------------------ */ [data-layout="solution-detail-v2"] .l-section-solutionDetailBridge__inner { padding: 78px 0 14px; } /* ------------------------------------------------------------ 3. 解決ポイント：SPは横型カードに。余白も圧縮 ------------------------------------------------------------ */ [data-layout="solution-detail-v2"] .l-section-solutionDetailPoint__inner { padding: 34px 0 40px; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__item { margin-top: 38px; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__icon { width: 56px; height: 56px; top: -20px; font-size: 0.95rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__icon span { font-size: 2.1rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__contents { padding: 46px 16px 20px; grid-template-areas: "title title" "img txt"; grid-template-columns: 112px 1fr; gap: 0 14px; align-items: start; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__title { font-size: 1.7rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__img { max-width: 112px; margin: 14px 0 0; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__txt { margin: 14px 0 0; font-size: 1.35rem; line-height: 1.68; } [data-layout="solution-detail-v2"] .l-section-solutionDetailPoint .p-lower-contactLinkBlock { margin: 40px 0 0; } /* ------------------------------------------------------------ 4. 機能特徴：カルーセル → 一覧グリッド 1枚目を主役カード（全幅）、残りをタイルで並べる ------------------------------------------------------------ */ [data-layout="solution-detail-v2"] .p-solutionDetail-feature__lead { font-size: 1.4rem; line-height: 1.75; margin: 10px 0 0; color: #7c7c7c; } [data-layout="solution-detail-v2"] .p-featureGrid { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 12px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary { grid-column: 1 / -1; } [data-layout="solution-detail-v2"] .p-featureGrid .p-card-feature__title { font-size: 1.5rem; line-height: 1.4; margin-top: 9px; } [data-layout="solution-detail-v2"] .p-featureGrid .p-card-feature__txt { font-size: 1.2rem; line-height: 1.7; margin-top: 6px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__title { font-size: 1.9rem; margin-top: 12px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__txt { font-size: 1.4rem; line-height: 1.8; } /* カード内の関連ページ導線（小さめのボタン） */ [data-layout="solution-detail-v2"] .p-card-feature__btn { margin: 14px 0 0; } [data-layout="solution-detail-v2"] .p-card-feature__link { display: inline-flex; align-items: center; background: #fff; border: solid 1px #29baa2; border-radius: 4px; color: #29baa2; font-size: 1.3rem; font-weight: bold; line-height: 1.4; padding: 10px 34px 10px 16px; position: relative; transition: background-color 0.3s, color 0.3s; } [data-layout="solution-detail-v2"] .p-card-feature__link::after { content: ""; position: absolute; top: 50%; right: 16px; width: 6px; height: 6px; border-right: solid 2px #29baa2; border-bottom: solid 2px #29baa2; transform: translateY(-50%) rotate(-45deg); transition: border-color 0.3s; } [data-layout="solution-detail-v2"] .p-featureGrid .p-card-feature__img img, [data-layout="solution-detail-v2"] .p-featureGrid .p-card-feature__video video { width: 100%; } /* ------------------------------------------------------------ 5. 下部リンクブロックの余白圧縮 ------------------------------------------------------------ */ [data-layout="solution-detail-v2"] .l-section-lowerDetailPageLinkBlock__inner { padding: 38px 0; } /* ============================================================ 2列グリッド時（SP・タブレット共通）の端数カードの中央寄せ ―― 主役カード1枚＋タイルN枚で最終行に1枚だけ余るとき ============================================================ */ @media screen and (max-width: 999.98px) { [data-layout="solution-detail-v2"] .p-featureGrid__item:last-child:nth-child(2n) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } } /* ============================================================ PC（768px〜） ============================================================ */ @media screen and (min-width: 768px), print { [data-layout="solution-detail-v2"] #challenge, [data-layout="solution-detail-v2"] #feature, [data-layout="solution-detail-v2"] #howto, [data-layout="solution-detail-v2"] #case { scroll-margin-top: 24px; } [data-layout="solution-detail-v2"] .l-section-solutionDetailNav__inner { padding: 40px 0 0; } [data-layout="solution-detail-v2"] .p-solutionDetail-nav { gap: 14px 12px; } [data-layout="solution-detail-v2"] .p-solutionDetail-nav__item { flex: 0 0 auto; } [data-layout="solution-detail-v2"] .p-solutionDetail-nav__link { font-size: 1.6rem; padding: 12px 44px 12px 24px; } [data-layout="solution-detail-v2"] .p-solutionDetail-nav__link::after { right: 22px; width: 7px; height: 7px; } [data-layout="solution-detail-v2"] .l-section-solutionDetailQuestion__inner { padding: 86px 0 0; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__list { max-width: none; grid-template-columns: repeat(4, 1fr); gap: 0 40px; margin-top: 42px; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__img { max-width: 186px; max-height: 186px; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__txt { font-size: 1.8rem; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__decoration { padding: 40px 0 0; } [data-layout="solution-detail-v2"] .l-section-solutionDetailBridge__inner { padding: 112px 0 32px; } [data-layout="solution-detail-v2"] .l-section-solutionDetailPoint__inner { padding: 56px 0 84px; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__item { margin-top: 44px; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__icon { width: 104px; height: 104px; top: -26px; left: -26px; font-size: 1.5rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__icon span { font-size: 4rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__contents { grid-template-areas: "img title" "img txt"; grid-template-columns: 200px 1fr; gap: 0 32px; padding: 32px 36px 32px 104px; align-items: center; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__title { font-size: 2rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__img { max-width: 200px; margin: 0; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__txt { font-size: 1.6rem; line-height: 1.75; margin: 14px 0 0; } [data-layout="solution-detail-v2"] .l-section-solutionDetailPoint .p-lower-contactLinkBlock { margin: 88px 0 0; } [data-layout="solution-detail-v2"] .p-solutionDetail-feature__lead { font-size: 1.7rem; margin-top: 14px; } /* main.css の .p-card-feature { max-width: 391px } を解除しないと主役カードが全幅に広がらない */ [data-layout="solution-detail-v2"] .p-featureGrid .p-card-feature { max-width: none; } [data-layout="solution-detail-v2"] .p-featureGrid { margin: 40px 0 0; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary { display: grid; grid-template-columns: 391px 1fr; grid-template-areas: "img title" "img txt" "img btn"; align-content: center; gap: 0 40px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__btn { grid-area: btn; align-self: start; margin: 20px 0 0; } [data-layout="solution-detail-v2"] .p-card-feature__link { font-size: 1.5rem; padding: 12px 42px 12px 20px; } [data-layout="solution-detail-v2"] .p-card-feature__link::after { right: 20px; width: 7px; height: 7px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__img, [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__video { grid-area: img; align-self: center; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__title { grid-area: title; align-self: end; font-size: 2.8rem; margin: 0 0 10px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__txt { grid-area: txt; align-self: start; font-size: 1.8rem; line-height: 1.7; margin: 0; } [data-layout="solution-detail-v2"] .p-featureGrid .p-card-feature__title { font-size: 2rem; margin-top: 18px; } [data-layout="solution-detail-v2"] .p-featureGrid .p-card-feature__txt { font-size: 1.5rem; line-height: 1.75; margin-top: 10px; } [data-layout="solution-detail-v2"] .l-section-lowerFeature__inner { padding: 64px 0 60px; } [data-layout="solution-detail-v2"] .l-section-lowerDetailPageLinkBlock__inner { padding: 64px 0; } } /* 3列グリッド時（1000px〜）に最終行が1枚だけ余るときの中央寄せ */ @media screen and (min-width: 1000px), print { [data-layout="solution-detail-v2"] .p-featureGrid__item:last-child:nth-child(3n+2) { grid-column: 2; } } /* ============================================================ タブレット（768〜999px） ============================================================ */ @media screen and (min-width: 768px) and (max-width: 999.98px) { [data-layout="solution-detail-v2"] .p-solutionDetail-question__list { gap: 0 20px; } [data-layout="solution-detail-v2"] .p-solutionDetail-question__txt { font-size: 1.5rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__contents { grid-template-columns: 150px 1fr; gap: 0 24px; padding: 28px 24px 28px 76px; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__img { max-width: 150px; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__icon { width: 76px; height: 76px; left: -14px; font-size: 1.1rem; } [data-layout="solution-detail-v2"] .p-lower-detailPoint__icon span { font-size: 2.8rem; } [data-layout="solution-detail-v2"] .p-featureGrid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary { grid-template-columns: 44% 1fr; gap: 0 24px; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__title { font-size: 2.2rem; } [data-layout="solution-detail-v2"] .p-featureGrid__item.-primary .p-card-feature__txt { font-size: 1.5rem; } } /* ============================================================ マウス操作環境のホバー ============================================================ */ @media (any-hover: hover) { [data-layout="solution-detail-v2"] .p-solutionDetail-nav__link:hover { background: #29baa2; border-color: #29baa2; color: #fff; } [data-layout="solution-detail-v2"] .p-solutionDetail-nav__link:hover::after { border-color: #fff; } [data-layout="solution-detail-v2"] .p-card-feature__link:hover { background: #29baa2; color: #fff; } [data-layout="solution-detail-v2"] .p-card-feature__link:hover::after { border-color: #fff; } }