/* FILE: assets/css/layout.css */ /* ========================================================= Header ========================================================= */ .site-header { background-color: var(--color-surface); border-bottom: var(--line-width) solid var(--color-line); position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); } /* ロゴを左端に、ナビ以降を右端にまとめる。 CTAとハンバーガーボタンが増えたので space-between では 要素が均等にばらけてしまうため、margin-left: auto で寄せている。 モバイルではナビが非表示・CTAが固定配置なので、 ハンバーガーボタン側の指定が効いて右端に寄る */ .site-nav, .nav-toggle { margin-left: auto; } /* ロゴは横組み（王冠マーク＋社名を左右に配置。640×150）。 36px高で幅154px、モバイルは32px高で幅137px。 縦組みだった第5弾までの52px指定より、ヘッダーを低く保てる。 */ .site-header__logo img { height: 36px; width: auto; } @media (max-width: 767px) { .site-header__logo img { height: 32px; } } .site-nav { display: flex; gap: var(--space-lg); } .site-nav a { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; } /* 第25弾：NEWS が加わってナビ項目が6つになった。 ハンバーガーに切り替わる1023pxまでの間（1024〜1199px）は 項目の間隔を詰めて、ヘッダーが折り返さないようにする */ @media (max-width: 1199px) { .site-header__inner { gap: var(--space-sm); } .site-nav { gap: var(--space-sm); } } /* ========================================================= 言語切替（JP / EN） 英語サイトは日本語サイトの完成後に作成するため、 現時点で EN を押すと 404 になる（想定どおり）。 ========================================================= */ .lang-switch { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.04em; padding-left: var(--space-md); border-left: var(--line-width) solid var(--color-line); } .lang-switch__current { font-weight: var(--fw-bold); } .lang-switch__sep { color: var(--color-muted); } .lang-switch__link { color: var(--color-muted); } .lang-switch__link:hover { color: var(--color-ink); text-decoration: underline; } /* 現在地の明示 */ .site-nav a[aria-current="page"] { border-bottom: 2px solid var(--color-ink); } /* ========================================================= お問い合わせCTA 1024px以上：ヘッダー内の黒いボタンとして並ぶ 1023px以下：画面下部に固定して常に追従する （ヘッダーのDOMに置いたまま position: fixed にしているので、 マークアップは1つで済む。JavaScriptも不要） ========================================================= */ .nav-cta { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-cta); color: #FFFFFF; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.04em; padding: 0.7em 1.4em; border-radius: var(--radius-sm); white-space: nowrap; transition: background-color 0.15s; } .nav-cta:hover { background-color: var(--color-cta-hover); } @media (max-width: 1023px) { /* 画面下部に固定し、スクロールしても付いてくる */ .nav-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; border-radius: 0; font-size: var(--fs-base); /* 指で押しやすい高さ。iPhoneのホームバーに隠れないよう、 端末が申告する安全領域の分だけ下に余白を足す */ padding: var(--space-sm) var(--space-md); padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15); } } /* ========================================================= ハンバーガーメニュー（1023px以下） 仕組み： - 1024px以上ではボタンを隠し、ナビを横並びで出す（従来どおり） - 1023px以下ではナビを隠し、ボタンを押したときだけ ヘッダーの下に引き出しのように開く - JavaScriptが動かない環境では、ボタンを隠してナビを 展開したまま表示する（メニューに触れなくなるのを防ぐため）。 この切り替えは に付く .js クラスで行っている （assets/js/nav-toggle.js が先頭で付ける） ========================================================= */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; /* 指で押せる大きさ（44px四方）を確保 */ height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; } .nav-toggle__bar { display: block; width: 24px; height: 2px; margin-inline: auto; background-color: var(--color-ink); transition: transform 0.2s ease, opacity 0.2s ease; } /* 開いているときは×印にする */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1023px) { /* JSが動いている場合：ボタンを出し、ナビは引き出しにする */ .js .nav-toggle { display: flex; } .js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background-color: var(--color-surface); border-bottom: var(--line-width) solid var(--color-line); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); padding: var(--space-sm) var(--container-padding) var(--space-md); max-height: 80vh; /* 項目が増えても画面からはみ出さない */ overflow-y: auto; } .js .site-nav.is-open { display: flex; } /* 引き出しの中は縦並び。1行ずつ押しやすい高さにする */ .js .site-nav > a { display: block; width: 100%; font-size: var(--fs-base); padding-block: var(--space-sm); border-bottom: var(--line-width) solid var(--color-line); } .js .site-nav > a[aria-current="page"] { border-bottom: var(--line-width) solid var(--color-line); font-weight: var(--fw-bold); text-decoration: underline; } .js .site-nav .lang-switch { padding-top: var(--space-sm); } /* JSが動かない場合：ボタンを隠し、ナビは折り返して展開表示する */ html:not(.js) .site-header__inner { flex-wrap: wrap; } html:not(.js) .site-nav { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); width: 100%; padding-bottom: var(--space-xs); } /* 狭い画面では言語切替の区切り線と余白を詰める */ .lang-switch { padding-left: 0; border-left: none; } } /* 引き出しが開いている間、背面をスクロールさせない */ body.nav-open { overflow: hidden; } /* ========================================================= パンくずリスト ========================================================= */ .breadcrumb { padding-top: var(--space-sm); /* 第25弾：ファーストビューを詰めるため24px→16px */ } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--fs-xs); color: var(--color-ink-sub); } .breadcrumb li + li::before { content: "／"; margin-right: var(--space-xs); color: var(--color-muted); } .breadcrumb a { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--color-muted); } /* ========================================================= Footer ========================================================= */ .site-footer { background-color: var(--color-ink); color: #FFFFFF; padding-block: var(--space-xl) var(--space-lg); margin-top: var(--space-2xl); } /* モバイルでは画面下部にお問い合わせCTAが固定されるので、 コピーライトがバーに隠れないよう、その高さぶんの余白を足す。 フッターに持たせることで、黒い背景がバーの下まで続き、 すき間に地色のグレーが見えない。 ★この指定は .site-footer の定義より後に置くこと。 先に書くと上の padding-block に上書きされて効かない */ @media (max-width: 1023px) { .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } } .site-footer__sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); } .site-footer__group { min-width: 0; } .site-footer__group-title { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--color-muted); padding-bottom: var(--space-xs); border-bottom: var(--line-width) solid rgba(255, 255, 255, 0.25); margin-bottom: var(--space-xs); } .site-footer__group li + li { margin-top: var(--space-xs); } .site-footer__group a { font-size: var(--fs-sm); color: #FFFFFF; overflow-wrap: break-word; } .site-footer__group a:hover { text-decoration: underline; } .site-footer__copyright { font-size: var(--fs-xs); color: var(--color-muted); } /* ========================================================= /services/ 3カラム縦位置揃え：CSS Subgrid （HANDOVER_v3.md §6-1 最重要事項） ★注意：.services-columns に align-items / justify-items の 指定を追加しないこと。子（.service-column）が親の行いっぱいに 引き伸ばされないと subgrid の行境界が共有されず、縦位置揃えが 無効化される。 ========================================================= */ /* リード文と3カラムはどちらも .section（上下 6rem）なので、 間に約192pxの空きができて離れて見えていた。 このページだけリード文の下と3カラムの上を詰める。 .section の共通値そのものは変えない（他ページに波及するため）。 */ .services-lead { padding-bottom: 0; } .services-columns-section { padding-top: var(--space-lg); /* 6rem → 2.5rem */ } .services-columns { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--space-lg); } .service-column { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: var(--space-md); background-color: var(--color-surface); padding: var(--space-md); border-radius: var(--radius-md); min-width: 0; /* グリッド子要素のはみ出し防止 */ } /* 行の定義。プログラムロゴの行は削除しました（第12弾） */ .service-column__bar { grid-row: 1; } .service-column__menu { grid-row: 2; } .service-column__images { grid-row: 3; } .service-column__more { grid-row: 4; } /* 領域名の帯ラベルは見出し（h2）なので、既定の見出しサイズを打ち消す */ .service-column__bar .bar-label { font-size: var(--fs-md); line-height: 1.5; } /* カラム内の箇条書き（行間をやや広めに） */ .service-column__menu-list { line-height: 1.9; } /* カラム内のイメージ。トップページと同じ画像を使う。 比率は base.css の共通ルール（16:10 / contain）に従う。 */ .service-column__images { display: grid; gap: var(--space-xs); align-content: start; } .service-column__images--quad { grid-template-columns: 1fr 1fr; } .service-column__images--single { grid-template-columns: 1fr; } /* 「この領域を詳しく見る」のボタンを、3カラムとも同じ高さに揃える。 Subgridで行の開始位置は揃うが、行の中身（箇条書きの件数）は 領域ごとに違うため、最後の行を縦方向のflexにして ボタンだけを下端へ押し出す。 */ .service-column__more { display: flex; flex-direction: column; } .service-column__more > .mt-xs { margin-top: auto; padding-top: var(--space-md); } /* Subgrid非対応ブラウザ向けフォールバック */ @supports not (grid-template-rows: subgrid) { .service-column { display: block; min-height: 640px; /* 暫定値。Phase 2で実コンテンツを見て調整 */ } } /* 1023px以下：3カラム→縦積み。grid-row指定も無効化する */ @media (max-width: 1023px) { .services-columns { display: block; } .service-column { display: block; margin-bottom: var(--space-lg); } .service-column__bar, .service-column__menu, .service-column__images, .service-column__more { grid-row: auto; margin-bottom: var(--space-md); } } /* ========================================================= /works/ カードグリッド：flexbox縦積み + margin-top:auto （HANDOVER_v3.md §6-1） ========================================================= */ /* カードの幅を「1枚あたり同じ」に固定する。 flex（flex: 1 1 280px）だと最終行の枚数が少ないときにカードが 横に伸びて、行によって大きさが変わってしまう。 グリッドなら列幅が先に決まるので、8件でも3件でも1枚の大きさは同じ。 auto-fit は空の列を潰すので、3枚なら3列に収まる。 */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); align-items: stretch; /* 同じ行のカードを同じ高さに */ } .card { display: flex; flex-direction: column; background-color: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; min-width: 0; } .card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-md); /* 第25弾で16px→24px。0にはしない */ } .card__title { font-weight: var(--fw-bold); margin-bottom: var(--space-xs); } /* 見出しの行数がカードごとに違っても、クライアント名から下が 必ず同じ高さに揃うようにする（HANDOVER_v3.md §6-1 の 「flexbox の縦積み + margin-top: auto」パターン）。 固定pxや行数の打ち切りは使わない。 */ .card__client { font-size: var(--fs-sm); color: var(--color-ink-sub); margin-top: auto; padding-top: var(--space-xs); margin-bottom: var(--space-xs); } /* カードの最下部に必ず貼り付くタグ行 */ .card__meta { margin-top: auto; padding-top: var(--space-xs); display: flex; flex-wrap: wrap; gap: var(--space-xs); } /* クライアント名がある場合は、そこで既に下端へ寄っているので タグ行はその直下に続ける（二重に押し出さない） */ .card__client + .card__meta { margin-top: 0; } @media (max-width: 767px) { .card-grid { grid-template-columns: 1fr; } } /* ========================================================= カードの縦位置揃え（Subgrid） サムネイル・見出し・クライアント名・タグの4つを、 同じ行に並ぶカード同士で必ず同じ高さに揃える。 見出しが1行のカードと3行のカード、タグが1個のカードと 2個のカードが混ざっても、行の境界を共有するので 「ガタガタ」にならない。固定pxや行数の打ち切りは使わない （HANDOVER_v3.md §6-1 の禁止事項）。 ★使い方：カードが「サムネイル ＋ card__body（見出し／ クライアント名／タグ）」の標準の形をしているグリッドに、 .card-grid--aligned を足すだけ。 この形をしていないカード（メールマガジンページなど）には 付けないこと。行数が合わず崩れる。 ========================================================= */ .card-grid--aligned { row-gap: var(--space-md); } .card-grid--aligned .card { display: grid; /* ★flexのままだとsubgridが効かない */ grid-row: span 4; /* サムネ / 見出し / クライアント名 / タグ */ grid-template-rows: subgrid; row-gap: 0; /* カード内側の行間は0。余白はpaddingで作る */ } /* card__body は「箱」をやめて、中の3つを直接グリッドの行に置く。 こうしないと見出し・クライアント名・タグが1つの行に まとまってしまい、行を共有できない。 */ .card-grid--aligned .card__body { display: contents; } /* 箱をやめた分、余白は中の要素それぞれに持たせる。 見出しのクラス名はページごとに違う（card__title / home-solution__title）ため、 クラスではなく「card__body の子すべて」を対象にする */ .card-grid--aligned .card__body > * { padding-inline: var(--space-md); /* 第25弾で16px→24px。0にはしない */ margin: 0; } .card-grid--aligned .card__body > :first-child { padding-top: var(--space-md); } /* 一番下の要素だけ下に余白をつける。 タグが無いカード（トップのWORKSなど）にも効く */ .card-grid--aligned .card__body > :last-child { padding-bottom: var(--space-md); } /* 行を共有しているので、下端へ押し出す必要がなくなった */ .card-grid--aligned .card__client, .card-grid--aligned .card__meta { margin-top: 0; } .card-grid--aligned .card__client { padding-top: var(--space-xs); } .card-grid--aligned .card__meta { padding-top: var(--space-xs); align-content: start; } /* Subgrid非対応ブラウザ向けフォールバック。 行の共有はできないが、card__body を通常の箱に戻し、 margin-top:auto でタグ行だけは下端に揃える */ @supports not (grid-template-rows: subgrid) { .card-grid--aligned .card { display: flex; flex-direction: column; grid-row: auto; } .card-grid--aligned .card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-sm); } .card-grid--aligned .card__body > * { padding-inline: 0; } .card-grid--aligned .card__body > :first-child { padding-top: 0; } .card-grid--aligned .card__client { margin-top: auto; } } /* ========================================================= 矢羽根（シェブロン）：clip-pathで実装。画像化しない （HANDOVER_v3.md §5-4 / RESONANCE Execution Model 工程表示） ========================================================= */ .chevron-flow { display: flex; flex-wrap: wrap; gap: 2px; } .chevron-flow__step { flex: 1 1 200px; background-color: var(--color-bar); color: #FFFFFF; padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); } .chevron-flow__step:first-child { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); padding-left: var(--space-md); } .chevron-flow__step h4 { color: #FFFFFF; font-size: var(--fs-sm); margin-bottom: var(--space-xs); } .chevron-flow__step ul { font-size: var(--fs-xs); } @media (max-width: 767px) { .chevron-flow__step, .chevron-flow__step:first-child { clip-path: none; padding-left: var(--space-md); } } /* ========================================================= 水車モデル：黒い正方形の連番 + 淡いブルーの横帯 （HANDOVER_v3.md §5-4） ========================================================= */ .numbered-bar { display: flex; align-items: stretch; margin-bottom: var(--space-xs); } .numbered-bar__num { flex: 0 0 64px; background-color: var(--color-bar); color: #FFFFFF; font-size: var(--fs-lg); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; } .numbered-bar__text { flex: 1; background-color: var(--color-accent); display: flex; align-items: center; padding-inline: var(--space-md); padding-block: var(--space-xs); font-weight: var(--fw-medium); overflow-wrap: break-word; }