/* * 国代耐火工業所テーマ メインスタイル。 * 配色・余白・フォントは :root に集中管理。 * 値変更は本ファイルの :root ブロック1箇所のみで全体に追従する設計。 */ :root { /* Brand colors(仮 — Figma確定後に差し替え) */ --color-brand: #F00; --color-brand-dark: #8e1414; --color-text: #333; /* ベース背景。Figma TOPはページ全体が白なので #fff。古いオフホワイトに戻す場合はここを変える。 */ --color-bg: #fff; --color-bg-alt: #fff; --color-border: #eee; --color-muted: #888; /* Typography(暫定) */ --font-base: "Helvetica Neue", "Yu Gothic", "Hiragino Sans", sans-serif; --font-en: "Helvetica Neue", Arial, sans-serif; --font-en-condensed: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; --line-height-base: 1.6; /* Spacing */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; /* Layout */ --container-max: 1280px; --container-padding: 32px; --header-height: 107px; --header-padding-inline: 40px; /* Figma TOPは画面上端〜ヘッダー上端に40pxの白を確保している。 */ --page-top-offset: 40px; /* Figmaのアートボード幅。ヒーロー等のセクション最大幅としても使う。 */ --design-width: 1440px; /* セクション(GALLERY/PRODUCTS/FIND等)の左右パディング。 ビューポートに応じて 80 → 32 → 24 と段階的に縮小。 side-float の right 計算にも使い、ボタン位置がコンテンツ右端に追従するようにしている。 */ --section-padding-inline: 80px; /* Header theme(Figma TOP node 440:2 準拠 — 背景は透過、ロゴ・文字は黒。 ヒーロー写真が透過ヘッダーの裏まで伸び、ロゴが写真に被るデザイン。 */ --color-header-bg: transparent; --color-header-fg: #000; --color-header-border: rgba(0, 0, 0, 0.08); /* ヒーロー写真がヘッダー裏に入り込む量(Figma: photo y=120, header bottom y=147 → 27px) */ --hero-header-overlap: 27px; /* スクロール後にヘッダー内へ縮小したときのロゴ高さ。残りは flex 中央寄せで自動的に上下余白に化ける。 */ --header-scroll-logo-height: 48px; /* Effects */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.10); --transition-base: .2s ease; /* スクロール状態変化・メガオーバーレイ等、大きめのレイアウト変化に使う柔らかいイージング。 末尾がゆっくり収束するため「バンバン」感が消える。 */ --easing-soft: cubic-bezier(0.22, 1, 0.36, 1); } /* * Breakpoints(参考値 — メディアクエリで直接記述する) * sm: 640px / md: 768px / lg: 1024px / xl: 1280px * ※ CSS変数は @media のクエリ部では展開されないため、ここはコメントで管理。 */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-base); line-height: var(--line-height-base); color: var(--color-text); background: var(--color-bg); /* スティッキーヘッダーの上にFigma準拠の40px白を確保。スクロールで自然に消える。 */ padding-top: var(--page-top-offset); } /* ---------- Accessibility (skip link) ---------- */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .skip-link:focus { background-color: var(--color-bg-alt); clip: auto !important; clip-path: none; color: var(--color-brand); display: block; font-weight: 700; height: auto; left: var(--space-sm); padding: var(--space-sm) var(--space-md); position: absolute; top: var(--space-sm); text-decoration: underline; width: auto; z-index: 100000; } /* ---------- Layout shell ---------- */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .site-main { min-height: 60vh; /* スティッキーヘッダーは通常フローに残るため、固定ヘッダー用のpadding-topは不要。 下余白はフッター側で確保するため site-main 側には付けない。 */ } /* ---------- Site header (sticky / Figma TOP node 440:2 準拠) ---------- */ /* スクロール検知用センチネル。ページ最上部1pxに置き、IntersectionObserverで監視。 */ .scroll-sentinel { position: absolute; top: 0; left: 0; width: 100%; height: 1px; pointer-events: none; } .site-header { position: sticky; top: 0; /* メガパネル(z:1050)より上のレイヤーに置く。 開いた時もロゴ・ハンバーガーがそのまま見え続けて、パネルだけが下層でフェードインする。 */ z-index: 1051; background: var(--color-header-bg); color: var(--color-header-fg); transition: background-color .45s var(--easing-soft), box-shadow .45s var(--easing-soft); } /* パネルを開いている間はヘッダー背景を抜き、パネルの #dedede が常に透ける状態にする (scroll で白になっていてもパネル開時は透明に揃える)。 */ body.mega-open .site-header, body.mega-open .site-header.is-scrolled { background: transparent; box-shadow: none; } /* ヘッダー(z:1051)は透明でも「要素」としてクリックを受けるため、その帯の下にある メガパネル(z:1050)の検索/CTA が押せなくなる。パネル展開中だけヘッダー帯の クリックを透過させ、操作が必要なロゴ・Instagram・✕(ハンバーガー)だけ復活させる。 */ body.mega-open .site-header { pointer-events: none; } body.mega-open .site-branding, body.mega-open .header-actions__insta, body.mega-open .hamburger { pointer-events: auto; } /* スクロール開始時:背景白 + 軽い影でコンテンツと分離 */ .site-header.is-scrolled { background: var(--color-bg-alt); box-shadow: var(--shadow-sm); } /* スクロール時:子要素を縦中央に。ロゴが縮むのでナビとハンバーガーも中央に揃えてバランスを取る。 */ .site-header.is-scrolled .site-header__inner { align-items: center; } .site-header__inner { /* Figmaは 1440幅 / 横余白40px。コンテナで縛らず横いっぱいに展開する。 AGORAロゴは縦フル(107px)、GNAVとハンバーガーはヘッダー上部に揃える(Figma準拠)。 */ max-width: none; display: flex; align-items: flex-start; justify-content: space-between; padding-inline: var(--header-padding-inline); height: var(--header-height); } .site-branding { display: flex; align-items: center; height: 100%; /* mega-overlay (z-index:999) の上に出す。 ロゴ画像が大きい状態でメニューが開いてもロゴが手前で見える状態を担保。 */ position: relative; z-index: 1001; /* GNAV / ハンバーガーに押されてロゴが縮まないよう shrink を止める。 合わせて header-logo-large.svg の preserveAspectRatio を xMidYMid meet にしているので、 仮に何らかの理由で幅が制限されても縦横比は崩れない。 */ flex-shrink: 0; } .site-branding__logo { display: inline-flex; align-items: center; height: 100%; } .site-branding__logo img { display: block; /* Figma: 348×107 のロゴ大。ヘッダー高さ(--header-height)に追従。 */ height: 100%; width: auto; transition: height .5s var(--easing-soft); } /* スクロール時:ロゴを縮小。 .site-branding__logo の align-items:center で残りスペースが自動的に上下マージンに。 */ .site-header.is-scrolled .site-branding__logo img { height: var(--header-scroll-logo-height); } .site-branding img, .site-branding .custom-logo { display: block; height: 100%; width: auto; } .site-branding__text { font-family: var(--font-en); font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; color: var(--color-header-fg); } /* ---------- Global nav (PC bar) ---------- */ .gnav-wrap { height: 100%; } .gnav { display: flex; gap: 0; height: 100%; list-style: none; padding: 0; margin: 0; } .gnav__item { position: relative; display: flex; align-items: center; /* Figma 1061:402 準拠:GNAVチップ高は 80px。 (header高 107 − ヒーロー重なり 27 = 80) 下の27pxはロゴが赤バーに被さるためのスペースとして空ける。 */ height: calc(var(--header-height) - var(--hero-header-overlap)); transition: height .5s var(--easing-soft); } /* スクロール時:sticky で y=0 に貼り付き上の白余白が視界外になるので、 通常通り header 全高(107)に戻す。 */ .site-header.is-scrolled .gnav__item { height: var(--header-height); } /* Figma 1061:402 準拠:ホバー時の黒い縦長ブロックは 120px 相当 (= page-top-offset 40 + gnav__item 80)。 gnav__item 自体の背景 + ::before で上の page-top-offset を塗りつぶす。 切替時に黒背景がフェードアウトで残ってちらつくため、background の transition は付けない。 */ .gnav__item:hover, .gnav__item:focus-within { background: #000; } .gnav__item:hover::before, .gnav__item:focus-within::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: var(--page-top-offset); background: #000; } .gnav__link { /* Figma: ナビ文字は header 上部から 9px の位置に top-align(8.41% of 107px ≈ 9px)。 クリッカブル領域はヘッダー全高をカバーしたいので height:100% は維持。 */ display: flex; align-items: flex-start; padding: 9px 22px 0; height: 100%; font-family: var(--font-en-condensed); font-size: 22px; font-weight: 700; font-stretch: 75%; letter-spacing: 1.5px; color: var(--color-header-fg); text-transform: uppercase; transition: color var(--transition-base), padding-top .5s var(--easing-soft); } /* スクロール時:ナビ文字も上下中央へ */ .site-header.is-scrolled .gnav__link { align-items: center; padding-top: 0; } .gnav__item:hover > .gnav__link, .gnav__item:focus-within > .gnav__link { color: #fff; } /* ---------- Mega overlay (per-item hover sub-nav / Figma node 4174:244 準拠) ---------- */ /* GNAV項目をホバーした時に、その項目直下に開くコンパクトな赤いドロップダウン。 既存の .gnav__item:hover が GNAV チップ全体を黒くするため、その黒(上)+ 赤ボックス(下)で 結果として L 字型に見える。赤ボックス幅は内容にフィットし、GNAV チップ幅より広いことで 右側にはみ出して L のヒゲを作る。 位置:gnav__item を基準に absolute、top:100% で GNAV チップの直下に貼り付く。 sticky 状態(スクロール後)も gnav__item の高さに追従するので追加調整は不要。 開閉の動き: ・開く … ゆっくりふわっとフェードイン + 微小スライド(-4px → 0)、.06s 遅延で誤発火回避。 ・閉じる … transition を付けないことで、ホバーが外れた瞬間に即時消える(残像なし)。 */ .mega-overlay { position: absolute; top: 100%; left: 0; background: var(--color-brand); min-width: 280px; opacity: 0; visibility: hidden; z-index: 999; pointer-events: none; } @keyframes megaOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .gnav__item:hover > .mega-overlay, .gnav__item:focus-within > .mega-overlay { visibility: visible; pointer-events: auto; animation: megaOpen .55s var(--easing-soft) .06s forwards; } /* Figma:左右 28px / 上下 19px。項目は line-height 50px で縦並び。 */ .mega-overlay__inner { padding: 19px 30px 15px; display: flex; flex-direction: column; } .mega-overlay__inner a { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 18px; line-height: 50px; color: #fff; white-space: nowrap; transition: opacity var(--transition-base); } .mega-overlay__inner a:hover, .mega-overlay__inner a:focus-visible { opacity: 0.75; } /* ドロップダウン内のサブナビ(Aboutの三つの柱 / AGORABRIXの5ライン)。 メガパネルの sublist と同じ「常時展開・インデント」ルール。 */ .mega-overlay__sub { display: flex; flex-direction: column; padding-left: 16px; margin: 2px 0 6px; } .mega-overlay__sub a { font-size: 15px; font-weight: 500; line-height: 36px; color: rgba(255, 255, 255, 0.85); } /* ---------- Header actions (hamburger only / Figma TOP準拠) ---------- */ .header-actions { display: flex; align-items: center; gap: 20px; } /* Instagram(Figma 6558:948。ハンバーガーの左、アイコン38px) margin-right はメガメニュー展開時の「お問い合わせCTA・アイコン・✕」の間隔バランス調整。 12px = ✕側32px/CTA側46pxで、CTAから少し離す(2026/07 指示) */ .header-actions__insta { display: block; width: 38px; height: 38px; margin-right: 12px; transition: opacity var(--transition-base); } .header-actions__insta img { display: block; width: 100%; height: 100%; } .header-actions__insta:hover, .header-actions__insta:focus-visible { opacity: .6; } .hamburger { display: block; background: none; border: none; cursor: pointer; width: 60px; height: 40px; position: relative; z-index: 1100; flex-shrink: 0; padding: 0; } .hamburger span { display: block; position: absolute; left: 0; width: 100%; height: 4px; background: var(--color-header-fg); transition: all .3s ease; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); } .hamburger span:nth-child(3) { bottom: 0; } .hamburger.is-active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .hamburger.is-active span:nth-child(2) { opacity: 0; } .hamburger.is-active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); } /* メガパネルを開いている間は GNAV を隠す(ヘッダーがパネル上層なので GNAV が ホバー可能になってしまうのを防ぐ)。ハンバーガーは .is-active で ✕ になり閉じるボタンを兼ねる。 */ body.mega-open .gnav-wrap { visibility: hidden; } /* ---------- Mega panel (hamburger fullscreen mega menu / Figma node 3858:763 準拠) ---------- */ /* 背景全体を覆うオーバーレイ。クリックで閉じる。 閉じる時はパネルより早く・速くフェードアウトさせて「黒幕だけ残る」違和感を消す。 */ .mega-panel-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1049; opacity: 0; /* 閉じる時:早めにスッと消える(パネルより短い) */ transition: opacity .22s var(--easing-soft); } .mega-panel-overlay[hidden] { display: none; } .mega-panel-overlay.is-open { opacity: 1; /* 開く時:パネルと足並みを揃えてふわっと */ transition: opacity .55s var(--easing-soft); } /* Figma:画面全面の #dedede パネル。内側に上部バー(ロゴ/検索/CTA/閉じる)と5カラム。 開閉でイージング/長さを変えて、開く時はふわっと、閉じる時はもう少しキビキビと。 */ .mega-panel { position: fixed; inset: 0; background: #dedede; color: #000; z-index: 1050; overflow-y: auto; opacity: 0; visibility: hidden; /* 閉じる時:中速ですっと退場 */ transition: opacity .35s var(--easing-soft), visibility .35s var(--easing-soft); } .mega-panel[hidden] { display: none; } .mega-panel.is-open { opacity: 1; visibility: visible; /* 開く時:ゆっくりふわっと立ち上げる */ transition: opacity .65s var(--easing-soft), visibility .65s var(--easing-soft); } .mega-panel__inner { /* ヘッダーと同じく全幅 + 左右40pxパディング。 ロゴ位置を site-header(`padding-inline: 40px`)とピクセル単位で揃えるため、 max-width は付けない。Figma アートボード(1440)上では同じ x=40 に並ぶ。 縦は flex column にして、フッター行(margin-top:auto)を画面下端側へ寄せる。 */ padding: 40px; min-height: 100%; display: flex; flex-direction: column; } /* ---------- Mega panel: footer(コピーライト + ポリシー / Figma 6558:936) ---------- */ .mega-panel__footer { margin: auto 0 0; /* flex column 内で下端へ。padding-top がカラムとの最低間隔 */ padding-left: 80px; /* Figma: カラム(x=80)より40px深い x=120 */ padding-top: 60px; display: flex; flex-wrap: wrap; align-items: baseline; font-family: "Noto Sans JP", var(--font-base); font-size: 14px; color: #000; } .mega-panel__footer-copy { font-size: inherit; } .mega-panel__footer-sep { margin: 0 0.9em; } .mega-panel__footer-link { color: inherit; text-decoration: none; transition: opacity var(--transition-base); } .mega-panel__footer-link:hover, .mega-panel__footer-link:focus-visible { opacity: .6; text-decoration: underline; } /* ---------- Mega panel: top bar (search / CTAs) ---------- */ /* ロゴと閉じる(✕)はサイトヘッダー側で常駐(上層レイヤー)。バーには検索と CTA のみ。 - 左:ヘッダーロゴ(348px)は別レイヤーで flex が感知しないため、padding-left で ロゴ幅+24px を明示的に確保する(margin-left:auto 頼みだと狭い幅で検索窓が ロゴの下に潜る)。それでも足りない幅は search 側の min-width まで縮んで逃がす。 - 右:ハンバーガーが ✕ として上に乗るので、その分の padding-right を確保。 */ .mega-panel__bar { position: relative; display: flex; align-items: center; gap: 32px; min-height: 107px; padding-left: 372px; padding-right: 80px; } .mega-panel__logo { display: inline-flex; align-items: center; flex-shrink: 0; transition: opacity var(--transition-base); } .mega-panel__logo:hover, .mega-panel__logo:focus-visible { opacity: 0.85; } .mega-panel__logo img { display: block; height: 107px; width: auto; } /* 検索フォーム:角丸ピル形状、入力欄+右にアイコンボタン。 バーが詰まったら 240px まで縮む(ロゴとの被り回避。1280px以下は折り返しで全幅)。 */ .mega-panel__search { position: relative; display: flex; align-items: center; width: 324px; min-width: 240px; height: 40px; background: #fff; border: 1px solid #b1b1b1; border-radius: 30px; margin-left: auto; } .mega-panel__search-input { flex: 1; min-width: 0; height: 100%; padding: 0 16px 0 22px; border: 0; background: transparent; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; color: #000; } .mega-panel__search-input::placeholder { color: #aaa; font-weight: 700; } .mega-panel__search-input:focus { outline: none; } .mega-panel__search-submit { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 4px; background: none; border: 0; color: #000; transition: opacity var(--transition-base); } .mega-panel__search-submit:hover, .mega-panel__search-submit:focus-visible { opacity: 0.6; } /* WEBカタログ・お問い合わせ(Figma 3858:763 のバー内 CTA)。 gap=ボタン間余白(カタログ↔お問い合わせ)、margin-right=クローズ × との間隔。 */ .mega-panel__actions { display: flex; align-items: center; gap: 30px; margin-right: 96px; flex-shrink: 0; } /* メガメニュー上部の CTA。横長ピル 174×48、左にアイコン + テキスト1行、角丸6px。 */ .mega-panel__cta { display: inline-flex; align-items: center; justify-content: flex-start; width: 174px; height: 48px; padding: 0 0 0 15px; gap: 15px; border-radius: 6px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; color: #fff; letter-spacing: 0; white-space: nowrap; transition: opacity var(--transition-base); } .mega-panel__cta:hover, .mega-panel__cta:focus-visible { opacity: 0.85; } .mega-panel__cta--catalog { background: #000; } .mega-panel__cta--contact { background: var(--color-brand); } /* アイコンは の width/height 属性で個別指定(catalog 34×27 / contact 30×30)。 */ .mega-panel__cta-icon { flex-shrink: 0; } /* 閉じるボタン:Figma準拠の細い黒 × アイコン。 */ .mega-panel__close { flex-shrink: 0; width: 46px; height: 46px; background: none; border: 0; padding: 0; position: relative; cursor: pointer; } .mega-panel__close span { position: absolute; top: 50%; left: 50%; width: 46px; height: 3px; background: #000; transform-origin: center; } .mega-panel__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .mega-panel__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } .mega-panel__close:hover span, .mega-panel__close:focus-visible span { background: var(--color-brand); } /* ---------- Mega panel: 5-column sitemap ---------- */ /* Figma: 上部バーから 167px 下に開始(top:274 − ロゴ上端 0 − ロゴ高 107)。 5カラムは Figma 3858:763 の実寸比率に合わせた非等分: ABOUT 240 / GALLERY 237 / PRODUCTS 241 / FIND 201 / SOLUTIONS 321 ≒ 12:12:12:10:16 左 40px パディングで ABOUT の左に余白を確保(Figma の x=80 位置を再現)。 各列の余白は列幅に内包(items は左寄せなので、SOLUTIONS の余分な幅は自然と右の余白になる)。 */ .mega-panel__columns { margin-top: 60px; padding-left: 40px; display: grid; grid-template-columns: 12fr 12fr 12fr 10fr; gap: 0; } .mega-panel__heading { font-family: var(--font-en-condensed); font-weight: 700; font-stretch: 75%; font-size: 38px; letter-spacing: 0.04em; color: #000; margin: 0 0 24px; text-transform: uppercase; line-height: 1; } .mega-panel__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .mega-panel__list li { margin: 0; } .mega-panel__list a { display: inline-flex; align-items: center; padding: 10px 18px; /* padding-left ぶん負マージンで戻して、テキストの左端を見出し(ABOUT等)と一致させる。 ホバー時の赤地は padding 分外側まで広がる(意図通り)。 */ margin-left: -18px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 18px; line-height: 1.4; color: #000; border-radius: 2px; transition: background-color var(--transition-base), color var(--transition-base); } .mega-panel__list a:hover, .mega-panel__list a:focus-visible, .mega-panel__list a[aria-current="page"] { background: var(--color-brand); color: #fff; outline: none; } /* 親項目の下に常時展開するサブナビ(Aboutの三つの柱 / AGORABRIXの5ライン)。 親より一回り小さく・薄いグレーで階層を見せる。ホバーは親と同じ赤地。 */ .mega-panel__sublist { list-style: none; margin: 6px 0 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 6px; } .mega-panel__sublist li { margin: 0; } .mega-panel__sublist a { font-size: 14px; font-weight: 500; color: #555; padding: 6px 14px; margin-left: -14px; } /* ---------- Floating side buttons (catalog / contact / Figma TOP node 1061:357 準拠) ---------- */ /* 画面右に置く常時アクセス CTA(WEBカタログ / お問い合わせ)。 配置ロジック(C パターン): ボタンの中心が「コンテンツの右端ライン」に来るように置く。 結果として、ボタンの右半分がコンテンツ外側(viewportの余白)にはみ出す。 コンテンツ右端の viewport 右端からの距離 = max(--section-padding-inline, (viewport−1280)/2) ・viewport ≤ 1440 では 1280 コンテンツが viewport 内に収まり、距離は section padding と等しい。 ・viewport > 1440 では 1440 アートボードが中央寄せされ、auto-margin が外側にできるため 距離は (viewport - 1280) / 2 で増える。 その上で「半ボタン幅」だけ内側に戻すことでボタン中心をライン上に置く。 ボタン幅は @media ごとに 42 / 30 / 26 と変わるため、半ボタン幅 21/15/13 もそれぞれの メディアクエリで設定する。 縦方向の挙動はページタイプで変える: ・通常ページ(デフォルト):position:absolute、ヒーロー上端から +55px の位置に置き、 スクロールで一緒に流れて消える。 ・トップページ(body.is-front-page で識別):position:fixed、viewport 中央(60%)に 貼り付き、スクロールしても常時表示。 */ .side-float { position: absolute; /* コンテナの右オフセット。変数化して、内側の各ボタンが同じ値ぶん負マージンを当てることで ビューポート右端にぴったり寄せられるようにする。 */ --side-float-right: calc(max(var(--section-padding-inline), (100vw - var(--container-max)) / 2) - 21px); right: var(--side-float-right); top: 170px; /* page-top-offset(40) + header(107) − hero-overlap(27) + 50 */ z-index: 999; display: flex; flex-direction: column; align-items: flex-end; /* 両ボタンとも右寄せ。負マージンでさらに viewport 右端まで張り出す。 */ gap: 18px; /* カタログ ↔ お問い合わせ間の縦余白(Figma 5633 準拠) */ } /* トップページも中ページと同じ高さ(ヒーロー開始位置 + 55px = .side-float の top)に置く。 top / transform は指定せず .side-float の値(PC 175px / ≤1024 116px)を継承。 position だけ fixed にして、スクロールしても常時表示にする。 */ body.is-front-page .side-float { position: fixed; } /* ブランド・ストーリーの柱ページ: PCは右端固定ボタンがレイアウトの邪魔になるため 非表示、SPの下部バー(≤768ブロックで display を戻す)だけ出す(2026/07 指示)。 */ .side-float--sp-only { display: none; } /* ボタン本体:Figma 42×可変、縦書きで各文字を直立(upright)で上から下へ。 Bold 16px / 白 / 角丸6px / 文字間-1.6px(Figma準拠の詰め)。 高さは中身に追従させ、padding でFigma実寸に近づける。 */ .side-float__btn { width: 42px; display: flex; align-items: center; justify-content: center; padding: 18px 0; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 1.15; letter-spacing: -0.1em; writing-mode: vertical-rl; text-orientation: upright; border-radius: 6px; transition: opacity var(--transition-base); } .side-float__btn:hover, .side-float__btn:focus-visible { opacity: 0.85; } /* カタログ(Figma 5633:602)と お問い合わせ(Figma 5633:598)は同じ 110×110 の正方形。 ベース .side-float__btn の縦書き設定(writing-mode:vertical-rl 等)を打ち消し、 アイコン(上)+ テキスト(下)の縦組みにする。ビューポート右端には貼り付けず 30px 離す。 */ .side-float__btn--catalog, .side-float__btn--contact { writing-mode: horizontal-tb; text-orientation: initial; flex-direction: column; justify-content: flex-start; width: 110px; height: 110px; padding: 20px 0 0; letter-spacing: 0; /* 負マージン(=右端への張り出し)を 30px 戻す。レスポンシブでも --side-float-right に追従。 */ margin-right: calc(-1 * var(--side-float-right) + 30px); border-radius: 6px; } .side-float__btn--catalog .side-float__btn-text, .side-float__btn--contact .side-float__btn-text { line-height: 18px; text-align: center; } /* カタログ(5633:602):黒地、アイコン 42×33 + 2行「WEB / カタログ」。アイコン下 7px。 */ .side-float__btn--catalog { background: #000; gap: 7px; } /* お問い合わせ(5633:598):赤地、アイコン 36×36 + 1行「お問い合わせ」。アイコン下 16px。 */ .side-float__btn--contact { background: var(--color-brand); gap: 16px; } /* アイコンサイズは の width/height 属性で個別指定(catalog 42×33 / contact 36×36)。 flex のシュリンクだけ抑止する。 */ .side-float__icon { flex-shrink: 0; } /* 中規模ビューポート(≤1280):ボタン幅 30、C パターン適用。 right = section_padding − 15(半ボタン幅) ・1024〜1280(padding 80):right = 65 ・768〜1024 (padding 32):right = 17 */ @media (max-width: 1280px) { .side-float { --side-float-right: calc(var(--section-padding-inline) - 15px); } /* メガメニュー: 大ロゴのまま1段バーを維持できるのは 1281px まで (検索窓が min-width まで縮み切る幅)。それ以下はお問い合わせCTAが Instagram・✕に向かって押し出されるため、バー全体をロゴの下へ落とす。 ≤1024 は後続ブロックが小ヘッダー(64px)向けの padding 95px で上書き。 */ .mega-panel__inner { padding: 150px 32px 32px; /* 150 = 大ロゴ107 + 余白43 */ } .mega-panel__bar { flex-wrap: wrap; justify-content: center; gap: 16px; min-height: 0; padding-left: 0; padding-right: 0; } .mega-panel__search { order: 3; margin-left: 0; flex: 1 1 100%; } .mega-panel__actions { margin-left: 0; margin-right: 0; /* 1段時の96pxはハンバーガー避け。中央寄せでは不要 */ } } /* タブレット域(769〜1280):ボタンを少し小さく(90×90)、右余白を 15px に。 ≤768 は下バーに組み替わるので min-width で除外する。 */ @media (max-width: 1280px) and (min-width: 769px) { .side-float__btn--catalog, .side-float__btn--contact { width: 90px; height: 90px; padding-top: 16px; font-size: 14px; margin-right: calc(-1 * var(--side-float-right) + 15px); } .side-float__btn--catalog .side-float__btn-text, .side-float__btn--contact .side-float__btn-text { line-height: 16px; } .side-float__btn--catalog .side-float__icon { width: 34px; height: 27px; } .side-float__btn--contact .side-float__icon { width: 30px; height: 30px; } } /* ハンバーガーが細くなる ≤1024 では、side-float をもう一段小さく(78×78・フォントも縮小)。 右余白 15px は margin-right の式が同じなので維持される。 */ @media (max-width: 1024px) and (min-width: 769px) { .side-float__btn--catalog, .side-float__btn--contact { width: 78px; height: 78px; padding-top: 14px; font-size: 12px; } /* お問い合わせは 1 行ぶんアイコン↔テキストの間隔を詰め、下端に余白を残す。 */ .side-float__btn--contact { gap: 8px; } .side-float__btn--catalog .side-float__btn-text, .side-float__btn--contact .side-float__btn-text { line-height: 15px; } .side-float__btn--catalog .side-float__icon { width: 30px; height: 24px; } .side-float__btn--contact .side-float__icon { width: 26px; height: 26px; } } /* スマホ(≤768)の side-float は画面下の固定バーに組み替える。 ルール本体はファイル後方のSP用 @media (max-width: 768px) ブロック内 (「画面下の固定バー」)にある。≤1024 の top 調整(ヘッダー高さ依存)より 後に書かないと top:auto が上書き負けするため、ここには置かない。 */ /* ---------- Site footer (Figma TOP node 803:14 準拠) ---------- */ /* Figma: 1440×190 / 黒地 / 上に 1行 16px白テキスト(コピー+｜+ポリシー2本)、 下に 120×53 の白抜きロゴ。テキスト上端 y=34、ロゴ上端 y=97。 */ .site-footer { background: #000; color: #fff; padding: 34px var(--container-padding) 40px; text-align: center; } .site-footer__inner { max-width: var(--design-width); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 44px; } /* テキスト行:インラインで横並びにし、狭くなったら自然に折り返す。 */ .site-footer__meta { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 16px; line-height: 1.4; color: #fff; } .site-footer__copy { font-size: inherit; color: inherit; } .site-footer__sep { margin: 0 1em; color: inherit; } .site-footer__link { color: inherit; transition: opacity var(--transition-base); } .site-footer__link:hover, .site-footer__link:focus-visible { opacity: 0.7; } .site-footer__brand { display: inline-block; line-height: 0; transition: opacity var(--transition-base); } .site-footer__brand:hover, .site-footer__brand:focus-visible { opacity: 0.85; } .site-footer__brand img { display: block; width: 120px; height: 53px; } /* ---------- Hero (front page top visual / Figma TOP node 440:2 準拠) ---------- */ .hero { /* Figmaは 1440幅、photos 1280×680、左右余白 80px。 */ --hero-padding-inline: 80px; --hero-photos-aspect: 1280 / 680; --hero-chip-overhang: 21px; position: relative; width: 100%; overflow-x: clip; background: var(--color-bg-alt); /* 写真をヘッダー裏まで27px押し上げ、ロゴがメインビジュアルに被さるFigma準拠の重なりを再現。 */ margin-top: calc(var(--hero-header-overlap) * -1); } .hero__slider { /* Figmaのアートボード幅(1440)で写真高さが上限になるよう中央寄せ。 */ max-width: var(--design-width); margin-inline: auto; position: relative; padding-inline: var(--hero-padding-inline); } /* スライド切替(デザイナー指定): 写真の枠は固定し、次の写真が枠内に右からスライドインして前の写真に被さる。 事例名チップは切替開始でフェードアウト → 新写真が収まったらフェードイン。 スライドは同位置に重ね、.is-current(下層)の上に .is-entering(上層)が滑り込む。 */ .hero__track { position: relative; aspect-ratio: var(--hero-photos-aspect); /* 横フリックはJSが拾い、縦スクロールはブラウザに渡す */ touch-action: pan-y; } .hero__slide { position: absolute; inset: 0; visibility: hidden; } .hero__slide.is-current { visibility: visible; z-index: 1; } .hero__slide.is-entering { visibility: visible; z-index: 2; } /* 入場前は枠の右外に待機(クリップは .hero__photo の overflow:hidden が担う)。 「前へ」の切替(is-reverse)は左外から入場する。 */ .hero__slide.is-entering .hero__photo img { transform: translateX(100%); } .hero__slide.is-entering.is-reverse .hero__photo img { transform: translateX(-100%); } .hero__slide.is-entering.is-active .hero__photo img { transform: translateX(0); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } /* キャプションのフェード: 退場中・入場中は透明、定常(is-current)で不透明に戻る */ .hero__caption { transition: opacity 0.35s ease; } .hero__slide.is-leaving .hero__caption { opacity: 0; } /* 入場待機中のキャプションは「遷移なしで即透明」にする。 (遷移ありだと不透明→透明のフェードが走り、次のスライドの文字が一瞬見える) */ .hero__slide.is-entering .hero__caption { opacity: 0; transition: none; } /* 初回表示のフェードイン: 大きい写真が回線速度なりに上から描画されていくのを隠す。 .hero__img-fade はJSが付与(JS無効時は素のまま表示)。読み込み完了で is-loaded。 キャプションは写真のフェード完了後にフェードイン(is-first-fade → is-caption-in、 完了後はJSが両クラスを外して素の状態に戻す)。 */ .hero__photo img.hero__img-fade { opacity: 0; } .hero__photo img.hero__img-fade.is-loaded { opacity: 1; transition: opacity 0.6s ease; } .hero__slide.is-first-fade .hero__caption { opacity: 0; transition: none; } .hero__slide.is-first-fade.is-caption-in .hero__caption { opacity: 1; transition: opacity 0.35s ease; } @media (prefers-reduced-motion: reduce) { .hero__slide.is-entering.is-active .hero__photo img, .hero__photo img.hero__img-fade.is-loaded, .hero__slide.is-first-fade.is-caption-in .hero__caption, .hero__caption { transition: none; } } .hero__photos { display: flex; width: 100%; aspect-ratio: var(--hero-photos-aspect); overflow: hidden; } .hero__photo { height: 100%; overflow: hidden; } .hero__photo--main { flex: 0 0 100%; } .hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Caption: 写真左下に重ねる 2段の黒チップ。GALLERYタグは写真より40px外側に出る。 */ .hero__caption { position: absolute; left: -40px; bottom: calc(var(--hero-chip-overhang) * -1); display: flex; flex-direction: column; align-items: flex-start; z-index: 2; } .hero__chip { display: inline-flex; align-items: center; background: #000; color: #fff; white-space: nowrap; } .hero__chip--tag { height: 36px; padding: 0 14px; font-family: var(--font-en-condensed); font-weight: 600; font-size: 18px; font-stretch: 75%; letter-spacing: 1.8px; } .hero__chip--title { height: 52px; padding: 0 17px; margin-left: 40px; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 30px; line-height: 1; } /* タイトルチップが事例詳細へのリンクの場合(hero.php で home_flg 事例から生成) */ a.hero__chip--title { color: #fff; text-decoration: none; transition: background var(--transition-base); } a.hero__chip--title:hover, a.hero__chip--title:focus-visible { background: var(--color-brand); } /* スライド選択ドット(現状は装飾。JSスライダー実装時に状態切替を追加) Figma: 写真下端からドットまで 33px(タイトルチップが21px垂れ下がっても被らない位置) */ .hero__selector { display: flex; justify-content: center; gap: 12.5px; padding: 0; margin: 33px 0 0; list-style: none; } .hero__selector-item { display: flex; } .hero__selector-dot { width: 14px; height: 14px; padding: 0; background: #000; border: 0; border-radius: 50%; cursor: pointer; transition: background var(--transition-base), transform var(--transition-base); } .hero__selector-dot:hover { background: var(--color-brand); transform: scale(1.15); } .hero__selector-item.is-current .hero__selector-dot { background: #bbb; cursor: default; } /* イントロ本文(中央寄せ・Noto Sans JP Medium 21px / line-height 32px) Figma: ドット下端からイントロまで 30px、最大幅 899px。 */ .hero__intro { margin: 30px auto 0; padding: 0 var(--container-padding); max-width: 900px; text-align: center; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 21px; line-height: 32px; color: var(--color-text); } /* PC のみ表示する改行(スマホでは出さず、本文は自然な折り返しに任せる)。 ヒーロー本文 / ABOUT リードで共用。 */ .br-pc { display: inline; } /* スマホのみ表示する改行(.br-pc の対。AGORABRIX CTA 等で使用)。 */ .br-sp { display: none; } @media (max-width: 768px) { .br-sp { display: inline; } } @media (max-width: 768px) { .br-pc { display: none; } /* スマホではヒーロー本文を左寄せに(PC は中央のまま)。 */ .hero__intro { text-align: left; } } .hero__intro p { margin: 0; } /* ---------- About (front page / Figma TOP node 679:20 準拠) ---------- */ .about { /* Figma: 1440×440、煉瓦工房写真フルブリード + 微グラデ + 左寄せコピー。 */ position: relative; overflow: hidden; min-height: 440px; color: #fff; isolation: isolate; /* Figma: ヒーロー直後との余白 46px(intro bottom y=1037 → about top y=1083)。 */ margin-top: 46px; } .about::before, .about::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .about::before { /* 画像は人物の背中位置で右端をクロップ済み(2400×766)なので、 右寄せ固定で配置するとウィンドウ縮小時に左の工房から順に切れていく挙動になる。 ・人物は常に右端に貼り付き、狭くなっても消えない ・テキスト下地となる工房の暗い部分が左にスライドして残る */ background: url("../images/about-bg.jpg") right center / cover no-repeat; z-index: -2; } .about::after { /* Figma: linear-gradient(103.49deg, rgba(0,0,0,0.2) 51%, rgba(255,255,255,0.2) 96%) */ background: linear-gradient(103.49deg, rgba(0, 0, 0, 0.2) 51%, rgba(255, 255, 255, 0.2) 96%); z-index: -1; } .about__inner { max-width: var(--design-width); margin-inline: auto; padding: 73px 80px 60px; } .about__tag { margin: 0; font-family: var(--font-en-condensed); font-weight: 600; font-size: 24px; font-stretch: 75%; letter-spacing: 1.68px; color: #fff; text-transform: uppercase; } .about__heading { /* Figma: A-OTF A1 Mincho Std Bold(Morisawa有料書体)。 引き継ぎ時のライセンス問題を避け、無料の Google Fonts「しっぽり明朝」で代替。 A1と同様、擦れ/滲み感のあるクラシックな明朝で雰囲気がもっとも近い。 */ margin: 0; font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 500; font-size: 70px; line-height: 80px; letter-spacing: 0; color: #fff; } /* Figmaのper-charトラッキングを em で再現(font-size に追従)。 ・t1 = -10.5px/70px ≈ -0.15em → 「土と」「紡」 ・t2 → 「え」: Figma原寸は -0.25em だが Shippori Mincho では「る」が押しつぶれて小さく見えるため緩めて -0.10em ・t3 = -21px/70px ≈ -0.30em → 「ぐ」(一番強く詰める) */ .about__heading-t1 { letter-spacing: -0.15em; } .about__heading-t2 { letter-spacing: -0.10em; } .about__heading-t3 { letter-spacing: -0.30em; } /* ---- Figma 書き出しSVG版の見出し(2026/07 デザイン差し替え。字形=A1明朝) ---- */ .about__title { position: relative; width: min(552px, 100%); /* SVG実寸(タイトル482+ボタン域) */ margin-top: 16px; } .about__heading--svg img { display: block; width: 100%; height: auto; /* 影はSVG内のfilterではなくCSSで(ストーリー見出しと同じ流儀)。 SVG側に定義のないfilter参照が残っているとSafariが仕様通り非描画になる罠があった。 */ filter: drop-shadow(4px 4px 7px rgba(0, 0, 0, 0.3)); } /* Read More は「佇まいを。」の右(Figma: x377/552, y133/232) */ .about__cta--overlay { position: absolute; left: 68.3%; top: 57.3%; margin-top: 0; white-space: nowrap; } /* SP: タイトルが縮んでボタンの居場所が無くなるため、リード文の下に通常フローで置く。 .about__title を display:contents で解体し、flex の order で タグ → タイトル → リード → ボタン の順に並べ替える。 */ @media (max-width: 768px) { .about__inner { display: flex; flex-direction: column; align-items: flex-start; } .about__title { display: contents; } .about__tag { order: 0; } .about__heading--svg { order: 1; width: 100%; margin-top: 16px; } .about__lead { order: 2; } .about__cta--overlay { order: 3; position: static; margin-top: 20px; } } .about__lead { margin: 18px 0 0; max-width: 706px; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: 0.05em; color: #fff; } .about__cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; height: 50px; padding: 0 24px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 20px; transition: background var(--transition-base); } .about__cta:hover, .about__cta:focus-visible { background: var(--color-brand); } .about__cta-arrow { display: inline-flex; width: 25px; height: 15px; flex-shrink: 0; } .about__cta-arrow img { display: block; width: 100%; height: 100%; } /* ---------- Projects / Gallery (front page / Figma TOP node 850:304 準拠) ---------- */ .projects { /* Figma: 1440幅、左右余白80px、ABOUT直後との垂直余白77px、PRODUCTS手前との垂直余白56px。 */ padding: 77px 0 64px; background: #dedede; } .projects__inner { max-width: var(--design-width); margin-inline: auto; padding: 0 80px; } /* ヘッダー行: H2 左寄せ + Read More 右寄せ、ベースライン基準で揃える。 */ .projects__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: 26px; } .projects__heading { margin: 0; display: flex; flex-direction: column; gap: 6px; color: #000; } /* 「GALLERY」: Roboto Condensed Bold 40 / wdth 75。 */ .projects__heading-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; letter-spacing: 0.02em; line-height: 1; } /* 「施工事例ギャラリー ー 煉瓦が彩る建築空間」: 前半 Medium / 後半 Regular。 */ .projects__heading-ja { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.4; } .projects__heading-ja-strong { font-weight: 500; } .projects__heading-ja-rule { font-weight: 500; } .projects__heading-ja-soft { font-weight: 400; } /* Read More ボタン(ABOUT と同形状の黒丸ボタン)。 ABOUT 側と独立クラスにしているのは、後で微妙にサイズや色味を分ける可能性があるため。 */ .projects__cta { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; height: 50px; padding: 0 24px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 20px; transition: background var(--transition-base); } .projects__cta:hover, .projects__cta:focus-visible { background: var(--color-brand); } .projects__cta-arrow { display: inline-flex; width: 25px; height: 15px; flex-shrink: 0; } .projects__cta-arrow img { display: block; width: 100%; height: 100%; } /* グリッド: 3列 × 2行。カード間隔は Figma の 40px。 */ .projects__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 40px; } .projects__item { display: block; animation: projects-fade-in 520ms ease both; } /* 1ページ分(9件)にゆるやかなスタッガー。Load More 追記分は nth-child(10+) で ディレイ無しのため、9件まとめてふわっと現れる動きになる。 */ .projects__item:nth-child(1) { animation-delay: 0ms; } .projects__item:nth-child(2) { animation-delay: 40ms; } .projects__item:nth-child(3) { animation-delay: 80ms; } .projects__item:nth-child(4) { animation-delay: 120ms; } .projects__item:nth-child(5) { animation-delay: 160ms; } .projects__item:nth-child(6) { animation-delay: 200ms; } .projects__item:nth-child(7) { animation-delay: 240ms; } .projects__item:nth-child(8) { animation-delay: 280ms; } .projects__item:nth-child(9) { animation-delay: 320ms; } @keyframes projects-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .projects__item { animation: none; } } .projects__card { display: flex; flex-direction: column; gap: 16px; color: inherit; } /* Figma 比率: 400 × 260。 */ .projects__media { aspect-ratio: 400 / 260; overflow: hidden; background: var(--color-border); } .projects__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .projects__card:hover .projects__media img, .projects__card:focus-visible .projects__media img { transform: scale(1.04); } .projects__caption { margin: 0; display: flex; flex-direction: column; gap: 2px; } .projects__title { font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 16px; line-height: 21px; color: #000; } .projects__brand { font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 14px; line-height: 21px; color: var(--color-muted); } /* ---------- Products (front page / Figma TOP node 679:33 準拠) ---------- */ .products { /* Figma: #DEDEDE の上に rgba(255,255,255,0.40) を重ねたフラット色 = #EBEBEB。 上下余白は GALLERY と揃えて 77px(Figma本体は27pxだが視覚バランスを優先)。 */ background: #ebebeb; padding: 77px 0 82px; } .products__inner { max-width: var(--design-width); margin-inline: auto; padding: 0 80px; } /* H2 は GALLERY と同形(Roboto Condensed Bold 40 wdth 75 + 和文サブタイトル)。 2セクション共通の見出しスタイルだが、用途が増えるまでは block 単位で持つ方針。 */ .products__heading { margin: 0 0 34px; display: flex; flex-direction: column; gap: 6px; color: #000; } .products__heading-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; letter-spacing: 0.02em; line-height: 1; } .products__heading-ja { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.4; } .products__heading-ja-strong { font-weight: 500; } .products__heading-ja-rule { font-weight: 500; } .products__heading-ja-soft { font-weight: 400; } /* 2大ブランドカード(AGORABRIX / agoragene)。Figma: 620×360、40px gap。 */ .products__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 40px; } .products__card { position: relative; height: 360px; background: #140d10; overflow: hidden; color: #fff; isolation: isolate; } /* 背景写真は右側にずらして配置。左側にダーク影を残してテキスト可読性を確保する。 */ .products__card-media { position: absolute; inset: 0; background-position: right center; background-size: cover; background-repeat: no-repeat; z-index: 0; } .products__card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #140d10 0%, rgba(20, 13, 16, 0.85) 30%, rgba(20, 13, 16, 0.10) 60%, rgba(20, 13, 16, 0) 100%); } .products__card-body { position: relative; z-index: 1; height: 100%; padding: 75px 40px 40px; display: flex; flex-direction: column; align-items: flex-start; } /* Figma: Roboto Condensed Light 60-62px wdth 75。AGORABRIX / agoragene 共通。 */ .products__card-title { margin: 0; font-family: var(--font-en-condensed); font-weight: 300; font-size: 60px; font-stretch: 75%; line-height: 1; letter-spacing: 0.01em; color: #fff; } .products__card-desc { margin: 22px 0 0; max-width: 520px; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 16px; line-height: 1.6; color: #fff; } /* Read More ボタン:GALLERY と同形だが、暗背景の上に乗るのでホバー時のみ少し明るく寄せる。 */ .products__cta { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; height: 50px; padding: 0 24px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 20px; flex-shrink: 0; transition: background var(--transition-base); } .products__cta:hover, .products__cta:focus-visible { background: var(--color-brand); } .products__cta-arrow { display: inline-flex; width: 25px; height: 15px; flex-shrink: 0; } .products__cta-arrow img { display: block; width: 100%; height: 100%; } /* Outlet 横長帯(Figma: 1280×110、黒地に背景写真+左タイトル+右ボタン)。 */ .products__outlet { position: relative; display: flex; align-items: center; height: 110px; background: #000; overflow: hidden; color: #fff; isolation: isolate; } .products__outlet-media { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 0; } /* 左端だけ黒く落として「Outlet」の白文字を読みやすくする(中央〜右は写真をそのまま見せる)。 */ .products__outlet-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0) 50%); } .products__outlet-body { position: relative; z-index: 1; padding-left: 39px; display: flex; align-items: baseline; gap: 28px; flex: 1; } .products__outlet-title { margin: 0; font-family: var(--font-en-condensed); font-weight: 300; font-size: 62px; font-stretch: 75%; line-height: 1; color: #fff; } .products__outlet-sub { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 16px; color: #fff; } .products__cta--outlet { position: relative; z-index: 1; margin: 0 24px 0 auto; } /* ---------- Find (front page / Figma TOP node 1563:2714 準拠) ---------- */ .find { /* 背景はユーザ指定 #DEDEDE。上下余白は GALLERY/PRODUCTS と揃えて視覚バランスを保つ。 */ background: #dedede; padding: 77px 0 77px; } .find__inner { max-width: var(--design-width); margin-inline: auto; padding: 0 80px; } .find__heading { margin: 0 0 40px; display: flex; flex-direction: column; gap: 6px; color: #000; } .find__heading-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; letter-spacing: 0.07em; line-height: 1; } .find__heading-ja { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.4; } .find__heading-ja-strong { font-weight: 500; } .find__heading-ja-rule { font-weight: 500; } .find__heading-ja-soft { font-weight: 400; } /* 4列グリッド。Figma: 各カード 290×220 / 40px gap。 */ .find__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .find__card { display: flex; flex-direction: column; align-items: center; height: 220px; padding: 37px 16px 32px; background: #fff; color: inherit; transition: transform var(--transition-base), box-shadow var(--transition-base); } .find__card:hover, .find__card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); } .find__label { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 22px; line-height: 1.55; color: #000; text-align: center; } /* アイコンは Figma 個別サイズ(50〜77px)で高さ70px枠内に中央配置。 SVGのviewBoxどおりに描画させるため高さ基準で width:auto。 */ .find__icon { display: flex; flex: 1; align-items: center; justify-content: center; margin-top: 16px; } .find__icon img { display: block; width: auto; height: 70px; max-width: 100%; } /* ---------- Catalogs (CATALOG + KUNISHIRO / Figma TOP node 1093:507 準拠) ---------- */ .catalogs { /* 背景は FIND と同じ #DEDEDE。上下余白は他セクションと統一。 */ background: #dedede; padding: 77px 0 77px; } .catalogs__inner { max-width: var(--design-width); margin-inline: auto; padding: 0 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .catalogs__col { display: flex; flex-direction: column; } .catalogs__heading { margin: 0 0 34px; display: flex; flex-direction: column; gap: 6px; color: #000; } .catalogs__heading-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; letter-spacing: 0.02em; line-height: 1; } .catalogs__heading-ja { font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 16px; line-height: 1.4; } /* カード: 620×360。実装はアスペクト比で追従させる(620/360 = 31/18)。 */ .catalogs__card { position: relative; display: block; aspect-ratio: 620 / 360; background: #000; color: inherit; overflow: hidden; isolation: isolate; } /* 背景はFigmaの Rectangle 30 + Group 12 構造を「コラージュ画像1枚」として再現。 Group 12(CATALOG)は4見開きの2×2配置、Group 11(KUNISHIRO)は2見開きの横並び。 どちらもカード(620×360)の枠より大きいコラージュを敷き、cover で必要な範囲だけ見せる。 ※デザイナーから背景単独のPNGが届いたら差し替え予定。 */ .catalogs__card-bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; z-index: 0; } /* CATALOG: コラージュの上半分(TILE WORKS + 平川市新本庁舎)に画角を合わせる。 */ .catalogs__col--catalog .catalogs__card-bg { background-position: center 20%; } /* KUNISHIRO: 2見開き横並び、アスペクトがほぼカードと一致するので中央寄せでフィット。 */ .catalogs__col--kunishiro .catalogs__card-bg { background-position: center; } /* 暗オーバーレイ rgba(0,0,0,0.5)。Figma準拠で写真をしっかり暗く落とす。 */ .catalogs__card-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } /* 冊子の表紙:カード左半分に少し傾けて配置、白フチ+落ち影。 */ .catalogs__cover { position: absolute; left: 7.4%; /* 46/620 */ top: 13%; /* 47/360 */ width: 29.8%; /* 185/620 */ height: 72.2%; /* 260/360 */ object-fit: cover; border: 4px solid rgba(255, 255, 255, 0.85); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.30); transform: rotate(-4.62deg); transform-origin: center; z-index: 1; transition: transform .35s ease; } .catalogs__col--kunishiro .catalogs__cover { border-color: #fff; transform: rotate(-5.61deg); } .catalogs__card:hover .catalogs__cover, .catalogs__card:focus-visible .catalogs__cover { transform: rotate(-2deg) translateY(-4px); } /* テキストエリア:カード右半分。タイトル+紹介文。 */ .catalogs__card-body { position: absolute; left: 43.2%; /* 268/620 */ top: 26.7%; /* 96/360 */ right: 4%; z-index: 1; color: #fff; } .catalogs__card-title { margin: 0; font-family: var(--font-en-condensed); font-weight: 500; font-size: 60px; font-stretch: 75%; letter-spacing: 0.01em; line-height: 1; } .catalogs__card-desc { margin: 24px 0 0; max-width: 320px; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 16px; line-height: 26px; } /* ---------- Showroom (front page / Figma TOP node 1061:40 準拠) ---------- */ .showroom { /* H2 と地図のセクション。上はGALLERY等と統一の77px、下はNEWSとの間隔を取る。 */ padding: 77px 0 0; background: #dedede; } .showroom__heading-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); max-width: var(--design-width); margin-inline: auto; padding: 0 80px; margin-bottom: 40px; } .showroom__heading { margin: 0; display: flex; flex-direction: column; gap: 6px; color: #000; } .showroom__heading-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; letter-spacing: 0.02em; line-height: 1; } .showroom__heading-ja { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.4; } .showroom__heading-ja-strong { font-weight: 500; } .showroom__heading-ja-rule { font-weight: 500; } .showroom__heading-ja-soft { font-weight: 400; } /* マップエリア:Figma 1440×440 のフルブリード。 */ .showroom__map-wrap { position: relative; width: 100%; height: 440px; overflow: hidden; } .showroom__map { display: block; width: 100%; height: 100%; background: #f5f5f5; /* 地図ロード前のフォールバック色 */ z-index: 0; } /* Figma準拠の薄いブルーオーバーレイ(rgba(2,171,255,0.05))。 地図全体にうっすらブルーグレーの空気感を与える。pointer-eventsで操作は素通し。 */ .showroom__map-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(2, 171, 255, 0.05); pointer-events: none; z-index: 1; } /* マップ上に重ねるショールームカード(写真 + 住所バー)。 Figma: 写真 380×253、20px 白フレーム、下に住所バー。 位置:カード右端を viewport の中心の 50px 左に固定。 viewport が広がっても狭くなってもマップ中央のピンとの相対関係が一定になり、 ピンとカードが分離して見えなくなる現象を防ぐ。 縦はマップに対して上下センター(マップ高さが変わっても追従)。 モバイル(≤768)では @media で position: static に切り替える(transform も戻す)。 */ .showroom__card { position: absolute; right: calc(50% + 50px); top: 50%; transform: translateY(-50%); background: #fff; box-shadow: var(--shadow-md); z-index: 2; } .showroom__card-photo { display: block; width: 380px; height: 253px; object-fit: cover; margin: 20px 20px 0; } .showroom__card-address { margin: 0; padding: 12px 20px 16px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 14px; line-height: 1.5; color: #000; text-align: center; white-space: nowrap; } /* ---------- News (front page / Figma TOP node 1061:59 準拠) ---------- */ .news { background: #dedede; padding: 77px 0; } .news__inner { max-width: var(--design-width); margin-inline: auto; padding: 0 80px; } .news__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: 26px; } .news__heading { margin: 0; display: flex; flex-direction: column; gap: 6px; color: #000; } .news__heading-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; letter-spacing: 0.02em; line-height: 1; } .news__heading-ja { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.4; } .news__heading-ja-strong { font-weight: 500; } .news__heading-ja-rule { font-weight: 500; } .news__heading-ja-soft { font-weight: 400; } /* SP 専用の Read More(リスト下・右寄せ)は PC では隠す。 */ .news__foot { display: none; } /* Read More ボタン(他セクションと同形状の黒丸) */ .news__cta { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; height: 50px; padding: 0 24px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 20px; transition: background var(--transition-base); } .news__cta:hover, .news__cta:focus-visible { background: var(--color-brand); } .news__cta-arrow { display: inline-flex; width: 25px; height: 15px; flex-shrink: 0; } .news__cta-arrow img { display: block; width: 100%; height: 100%; } /* ニュース一覧。Figma: 上下水平線 + 各項目内に日付・タイトル・カテゴリ・抜粋。 */ .news__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #999; } .news__item { border-bottom: 1px solid #999; } .news__link { display: grid; grid-template-columns: 110px 1fr; grid-template-areas: "date title" "date excerpt"; column-gap: 24px; row-gap: 6px; padding: 20px 0 22px; color: inherit; transition: opacity var(--transition-base); } .news__link:hover, .news__link:focus-visible { opacity: 0.7; } .news__date { grid-area: date; margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 1.6; color: #000; align-self: start; } .news__title-row { grid-area: title; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .news__title { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 18px; line-height: 1.4; color: #000; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* カテゴリ・バッジ(80×28、黒地白文字、角丸6px)。種別で色を変えたい場合は modifier ごとに上書き。 */ .news__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; height: 28px; padding: 0 12px; background: #000; border-radius: 6px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 14px; line-height: 1; color: #fff; text-decoration: none; flex-shrink: 0; } .news__excerpt { grid-area: excerpt; margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 16px; line-height: 1.7; color: #333; } /* ---------- Gallery (page-gallery.php / Figma node 844:41 準拠) ---------- */ .gallery { background: var(--color-bg); } /* セクション内側の共通ラッパー。コンテンツ最大幅 1280 + section padding。 */ .gallery__inner { max-width: var(--design-width); margin-inline: auto; padding-inline: var(--section-padding-inline); } /* 1. ヒーロー写真 — TOP のメインビジュアルと同じく 1280px 内側に収める。 Figma 844:49 準拠: ・1280×340 のフレームに 1371×1061 の建築ドローイング画像 ・ヘッダーに 27px 食い込み(他ページのヒーローと同規律) ・背景色 #e4ebf5(画像読込前 or 範囲外フォールバック) ・object-position の vertical 15% で画像の上端寄り(Figma の見え方)を中央化 */ .gallery__hero { margin-top: calc(var(--hero-header-overlap) * -1); } .gallery__hero-img { display: block; width: 100%; aspect-ratio: 1280 / 340; object-fit: cover; object-position: center 25%; background: #e4ebf5; } /* 2. パンくず + 見出し。 */ .gallery__intro { padding: 32px 0 30px; } /* ============================================================= 共通パンくず .breadcrumbs(template-parts/breadcrumbs.php) 旧 .gallery__crumbs / .project__crumbs / .product-detail__crumbs を統合。 既定は下余白15px(一覧・intro用)。詳細(ヒーロー直下)は --detail で上余白に。 ============================================================= */ .breadcrumbs { margin: 0; padding: 0 0 15px; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 16px; line-height: 1.25; color: #000; display: flex; align-items: center; flex-wrap: wrap; } .breadcrumbs a { color: inherit; text-decoration: underline; text-underline-offset: 4px; transition: opacity var(--transition-base); } .breadcrumbs a:hover { opacity: 0.6; } .breadcrumbs__sep { margin: 0 0.6em; } /* 詳細ページ(ヒーロー画像の直下)用: 下余白ではなく上余白を持たせる。 */ .breadcrumbs--detail { padding: 24px 0 0; } /* SP: フォントを縮小し、現在地(とその手前の›)は出さない(2026/07 決定)。 深い階層(AGORABRIXライン詳細等)では省略しても1行に収まらないため、 現在地は直下の H1 に任せて祖先だけを1行で見せる。 */ @media (max-width: 768px) { .breadcrumbs { font-size: 12px; } .breadcrumbs [aria-current="page"], .breadcrumbs__sep:has(+ [aria-current="page"]) { display: none; } } /* 旧 .gallery__crumbs は .breadcrumbs(共通部品)へ統合済み。 */ .gallery__heading { margin: 22px 0 0; display: flex; flex-direction: column; /* Figma 2194:270:GALLERY 行ボックスと日本語副題の行ボックスが 2px overlap するくらいタイト。 line-height の descent/half-leading 分を考慮して 4px に抑える。 */ gap: 4px; color: #000; } /* "GALLERY":Roboto Condensed Bold 64px wdth 75。 */ .gallery__heading-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 64px; font-stretch: 75%; line-height: 1; letter-spacing: 0; text-transform: uppercase; } /* 副題:前半 Medium / 後半 Regular。 */ .gallery__heading-ja { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; font-family: "Noto Sans JP", var(--font-base); font-size: 20px; line-height: 1.5; } .gallery__heading-ja-strong { font-weight: 500; } /* Figma 2194:270:ー(罫)は後半 Regular セクション側に含まれる扱い。 */ .gallery__heading-ja-rule { font-weight: 400; } .gallery__heading-ja-soft { font-weight: 400; } /* 3. カテゴリフィルター行(left:タブ、right:件数)。 下方向の余白は持たず、active pill の下端を .gallery__grid-wrap(#dedede)に直接接続させる。 pill が「選択中タブ」として下のグレー一覧と一体化して見える。 */ .gallery__filters { padding-top: 18px; } /* 型番(?code=)絞り込み時は建築用途フィルターを出さないため、件数を右寄せ + 下余白。 */ .gallery__filters--code { margin-bottom: var(--space-md); } .gallery__filters--code .gallery__filters-row { justify-content: flex-end; } .gallery__filters-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } /* カテゴリ数が増えて横タブだと折り返しが汚いため、常時セレクト式に統一(2026/06)。 横並びタブのスタイルは保守用に残すが display:none で出さない。 */ .gallery-filter { display: none; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; gap: 8px; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.25; } .gallery-filter__item a { display: inline-block; padding: 8px 14px; color: #000; text-decoration: underline; text-underline-offset: 4px; transition: opacity var(--transition-base), background-color var(--transition-base); } .gallery-filter__item a:hover { opacity: 0.6; } /* active = グレーの pill。下線なし。Figma の Rectangle 48(68×49)準拠で 角丸は top のみ(6px 6px 0 0)。下のグリッド一覧(#dedede)へ接続する視覚を作る。 */ .gallery-filter__item.is-active a { background: #dedede; text-decoration: none; border-radius: 6px 6px 0 0; padding: 14px 16px; font-weight: 500; cursor: default; } .gallery-filter__item.is-active a:hover { opacity: 1; } /* 件数表示「24 projects」:Figma 850:506 準拠で数字と単位の二段サイズ。 ・数字 = Noto Sans JP Bold 20px ・projects = Noto Sans JP Regular 14px */ .gallery__count { margin: 0; font-family: "Noto Sans JP", var(--font-base); color: #000; white-space: nowrap; line-height: 1; display: inline-flex; align-items: baseline; gap: 0.25em; } .gallery__count-num { font-weight: 700; font-size: 20px; } .gallery__count-unit { font-weight: 400; font-size: 14px; } /* 3b. カテゴリ選択ドロップダウン(2026/06 から常時表示。横タブを廃止)。 active pill と同じ #dedede + top-rounded のスタイルでデザインの統一感を保つ。 */ .gallery-filter-dropdown { display: inline-block; position: relative; } .gallery-filter-dropdown__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 140px; background: #dedede; border: 0; border-radius: 6px 6px 0 0; padding: 12px 14px; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 18px; /* 建築用途セレクト(常時表示)。PC18px / SP14px(下のメディアクエリ) */ line-height: 1; color: #000; cursor: pointer; } /* ▼ 矢印(CSSのみで描画)。aria-expanded で180°回転。 */ .gallery-filter-dropdown__arrow { display: inline-block; width: 0; height: 0; flex-shrink: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #000; transition: transform .25s ease; } .gallery-filter-dropdown__trigger[aria-expanded="true"] .gallery-filter-dropdown__arrow { transform: rotate(180deg); } /* オープン時のドロップダウンパネル。 */ .gallery-filter-dropdown__list { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 100%; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); border-radius: 0 6px 6px 6px; z-index: 50; } .gallery-filter-dropdown__list[hidden] { display: none; } .gallery-filter-dropdown__list li { margin: 0; } .gallery-filter-dropdown__list a { display: block; padding: 10px 18px; color: #000; text-decoration: none; font-family: "Noto Sans JP", var(--font-base); font-size: 18px; line-height: 1.4; white-space: nowrap; transition: background-color .15s; } .gallery-filter-dropdown__list a:hover, .gallery-filter-dropdown__list a:focus-visible { background: #f5f5f5; } .gallery-filter-dropdown__list a[aria-current="true"] { font-weight: 700; background: #f5f5f5; } /* 4. グリッドラッパー(.projects__grid を内側で使用)。 Figma 準拠で背景は #dedede(TOP の .projects と同じトーン)。 */ .gallery__grid-wrap { background: #dedede; padding: 64px 0 80px; } /* 5. Load More ボタン。中央配置の黒丸 CTA。 */ .gallery__more { display: flex; justify-content: center; margin-top: 64px; } /* hidden 属性を確実に効かせる(クラスの display:flex が UA の [hidden] を上書きするため)。 */ .gallery__more[hidden] { display: none; } .gallery__more-btn { display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 28px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 20px; transition: background var(--transition-base); } .gallery__more-btn:hover, .gallery__more-btn:focus-visible { background: var(--color-brand); } /* about-arrow.svg(横向き)を 90度 回して下向きに使う。 */ .gallery__more-btn-arrow { display: inline-flex; width: 25px; height: 15px; flex-shrink: 0; transform: rotate(90deg); } .gallery__more-btn-arrow img { display: block; width: 100%; height: 100%; } /* ---------- Products Listing: agoragene (page-products-agoragene.php / Figma 1423:1303 準拠) ---------- */ .product { background: var(--color-bg); } /* 1. Hero — Gallery と同じ 1280px 内側、ヘッダーに 27px 食い込み。 */ .product__hero { margin-top: calc(var(--hero-header-overlap) * -1); } .product__hero-img { display: block; width: 100%; aspect-ratio: 1280 / 340; object-fit: cover; background: #e4ebf5; } /* 2. パンくず + 見出し(白背景、左寄せ)。 */ .product__intro { padding: 32px 0 24px; } /* Standard Products ラベル(Figma 1423:1443):Roboto Condensed Bold 28px wdth 75、グレー #999。 */ .product__label { margin: 22px 0 0; font-family: var(--font-en-condensed); font-weight: 700; font-size: 28px; font-stretch: 75%; line-height: 1; letter-spacing: 0; color: #999; } /* タイトル "agoragene" + 標準品チップ を横並び(中央揃え)。 */ .product__title-row { display: flex; align-items: center; gap: 16px; margin: 4px 0 0; } .product__title { margin: 0; font-family: var(--font-en-condensed); font-weight: 700; font-size: 64px; font-stretch: 75%; line-height: 1; letter-spacing: 0; color: #000; } /* 標準品チップ(Figma 1423:1448):透過 + 1px #555 ボーダー + 角丸 20。 高さ 40、内側 padding 0 17。Bold 16px。 */ .product__chip { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 17px; background: transparent; border: 1px solid #555; border-radius: 20px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 1; color: #000; white-space: nowrap; } /* リード文(Figma 1423:1444):Noto Sans JP Medium 32px、line-height 48px。 ブランドサイトらしい大きめの本文。 */ .product__description { margin: 36px 0 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 32px; line-height: 48px; color: #000; max-width: 100%; } /* 3. フィルター行 + 詳細検索リンク。 Gallery と同じく、active pill の下端を .product__grid-wrap(#dedede)に直接接続。 */ .product__filters { padding-top: 18px; } .product__filters-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } /* 「→ 詳細検索(FIND)はこちら」リンク(右寄せ)。 */ .product__filters-link { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 14px; line-height: 1.5; color: #000; } .product__filters-link a { color: inherit; text-decoration: underline; text-underline-offset: 4px; transition: opacity var(--transition-base); } .product__filters-link a:hover { opacity: 0.6; } /* 4. 製品グリッド本体(背景 #dedede)。 */ .product__grid-wrap { background: #dedede; padding: 56px 0 80px; } /* 4列のカードグリッド(Figma 290×193 + 余白 40)。 */ .product__grid { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 40px; } .product__card { display: block; } .product__card-link { display: flex; flex-direction: column; gap: 14px; color: inherit; } /* 画像エリア:290:193 ≈ 1.50。Figma 1423:1333 の「白枠」(border-10 white)を再現。 元画像に内側余白(白マージン)が含まれているケースがあるため、 img は 290×193 いっぱいに cover で敷き詰めて外側を切り落とし、 10px の白枠は ::after を絶対配置で重ね、画像のさらに上のレイヤーに置く。 これで枠は常にきっちり 10px、画像残余白との地続き太化が起こらない。 */ .product__media { position: relative; width: 100%; aspect-ratio: 290 / 193; overflow: hidden; background: var(--color-border); } /* 白枠(::after)はクライアント要望で撤去。 */ .product__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .product__card-link:hover .product__media img, .product__card-link:focus-visible .product__media img { transform: scale(1.04); } .product__name { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 16px; line-height: 1.5; color: #000; } /* ---------- Project Detail (page-gallery-detail.php / Figma node 938:551 準拠) ---------- */ /* セクション共通の H2 ヘッダースタイル(English Roboto Condensed + 日本語 Noto Sans JP)。 Photo Gallery / Materials / Locations / Other Projects などで共通使用。 */ .section-heading { margin: 0 0 24px; display: flex; flex-direction: column; gap: 4px; color: #000; } .section-heading__en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 36px; font-stretch: 75%; line-height: 1; letter-spacing: 0; text-transform: uppercase; } .section-heading__ja { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.4; } .section-heading__ja-strong { font-weight: 500; } .section-heading__ja-rule { font-weight: 500; } .section-heading__ja-soft { font-weight: 400; } /* 小サイズ(About / Specification 用)。 */ .section-heading--sm .section-heading__en { font-size: 28px; } /* ---- Project detail page ---- */ .project { background: var(--color-bg); } /* 1. Hero — 1280×800 の大型写真。TOP メインビジュアルと同じ 1280 内側。 ヘッダーへの食い込みは 27px(デスクトップ)。 */ .project__hero { margin-top: calc(var(--hero-header-overlap) * -1); } .project__hero-img { display: block; width: 100%; aspect-ratio: 1280 / 800; object-fit: cover; background: #e4ebf5; } /* キーワード行 — Figma 998:1219 準拠。 `.project__heading-block`(白背景)内、ブランド行の下に右寄せで配置。 Noto Sans JP Regular 14px、各キーワードに下線、セパレータは全角スペース(下線なし)。 */ .project__keywords { margin: 40px 0 0; text-align: right; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 14px; line-height: 24px; color: #000; } .project__keyword { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .project__keyword-sep { /* 全角スペースをそのまま表示(下線なし) */ } /* 3. パンくず + タイトル + ブランド。 */ .project__heading-block { padding: 30px 0 40px; } /* 旧 .project__crumbs は .breadcrumbs(共通部品)へ統合済み。 */ /* プロジェクト名(Noto Sans JP Bold 52px、Figma 2194:290)。 */ .project__title { margin: 24px 0 16px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 52px; line-height: 1.2; letter-spacing: 0.02em; color: #000; } /* ブランド名(AGORABRIX ― Brick Works)。前半 Medium / 後半 Regular。 */ .project__brand { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 20px; line-height: 1.4; color: #000; } .project__brand-name { font-weight: 500; } .project__brand-rule { font-weight: 500; margin: 0 0.4em; } .project__brand-line { font-weight: 400; } /* 4. About + Specification(2カラム)。 このセクションから下(About / Gallery / Materials / Locations / Other Projects)は 背景 #dedede の「下層エリア」として連続。 */ .project__about { background: #dedede; padding: 40px 0 80px; } /* 下の連続セクションも同色背景を継承させる。 .project__other は既に bg を持っていたが、ここで再宣言して統一管理。 */ .project__gallery, .project__materials, .project__locations, .project__other { background: #dedede; } .project__about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .project__description { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 16px; line-height: 2; color: var(--color-text); } /* Spec list(項目名:値):全幅の行を黒い水平線で区切る一覧。 */ .project__spec-list { margin: 0; padding: 0; display: grid; grid-template-columns: max-content 1fr; /* column-gap は意図的に 0。列ギャップは描画されないため、ここで間を空けると 行下線(border-bottom)が dt / dd の間で途切れて見える。代わりに dt 側の padding-right で「見た目の間隔」を作り、border-bottom を連続させる。 */ border-top: 1px solid #000; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.6; color: var(--color-text); } /* 行ラッパは grid の通過点として扱う(各行の dt / dd を dl 直下の 2列グリッドに乗せる)。 これにより「ラベル列幅 = 全行の中で一番長いラベルの幅」に自動でそろい、 設計協力 / ランドスケープデザイン のような長いラベルが入っても折り返さず一列に並ぶ。 */ .project__spec-row { display: contents; } .project__spec-label, .project__spec-value { margin: 0; padding: 12px 0; border-bottom: 1px solid #000; min-width: 0; word-break: break-word; } .project__spec-label { padding-right: 24px; font-weight: 500; color: #000; } .project__spec-value { font-weight: 400; } .project__spec-credits { margin-top: 16px; font-family: "Noto Sans JP", var(--font-base); font-size: 13px; line-height: 1.7; color: var(--color-muted); } .project__spec-credit { margin: 0; } .project__spec-credit + .project__spec-credit { margin-top: 4px; } /* 5. Photo Gallery — 非対称グリッド(1大+2小)+(3小)。 */ .project__gallery { padding: 56px 0 64px; } .project__photo-grid { list-style: none; margin: 0; padding: 0; display: grid; /* Figma 938:733 + 938:746 準拠の3列グリッド。 ・大写真は span 2×2 で左上に固定(840×560 相当) ・残りの4枚が auto-flow で右と下に配置される ・右下の3行目右端は意図的に空(Figma に倣う) */ grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 40px; } .project__photo-item { overflow: hidden; background: var(--color-border); } .project__photo-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .project__photo-item--large { grid-column: span 2; grid-row: span 2; } /* 6. Materials — 横スクロールカルーセル。 カードを flex で並べ、track を overflow-x:auto + scroll-snap で動かす。 自動進行・矢印・スワイプ(フリック)は JS と native scroll で実現。 */ .project__materials { padding: 56px 0 64px; } .project__material-carousel { position: relative; } /* track は overflow:hidden で固定し、内側の grid を JS から transform: translateX() で動かす。 ブラウザ標準のスクロール(scrollLeft / scroll-snap)を使わない方式。 理由:scrollLeft + 無限ループの teleport は一部ブラウザで「先頭に戻る」ように見える 現象が出るため、slick.js と同じく transform 駆動にすると teleport が完全に不可視になる。 PC でもドラッグ操作を効かせるため cursor: grab を当て、JS は Pointer Events で タッチ/マウスを統一して扱う。touch-action: pan-y で縦スクロールは許可、 横方向のジェスチャだけ JS で捕まえる。 */ .project__material-track { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; } .project__material-track.is-dragging { cursor: grabbing; } /* 3 枚以下(JS で .is-static を付与)は左右の動きを止める。 矢印を隠し、はみ出す場合だけブラウザ標準の横スクロールで全カードに到達可能にする。 */ .project__material-carousel.is-static .project__material-arrow { display: none; } .project__material-carousel.is-static .project__material-track { overflow-x: auto; cursor: default; touch-action: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; } .project__material-track::-webkit-scrollbar { display: none; } .project__material-track::-webkit-scrollbar { display: none; /* Safari/Chrome/Edge */ } .project__material-grid { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; /* JS が transform: translate3d() で動かす。will-change で GPU 合成のヒント。 */ will-change: transform; } .project__material-card { /* 常に 3 枚等幅で見せる。gap 40 × 2 = 80 を差し引いた 1/3。 1440 viewport(content 1280)では (1280-80)/3 = 400 で Figma と一致。 */ flex: 0 0 calc((100% - 80px) / 3); display: flex; flex-direction: column; position: relative; /* リンクありカードの stretched-link オーバーレイの基準 */ } /* リンクありカードはカード全体をクリック領域にする(stretched link)。 名前の を疑似要素でカード全面に広げ、テキストは読みやすいまま。 */ .project__material-card.is-linked { cursor: pointer; } .project__material-card.is-linked .project__material-name::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ホバー時のフィードバック:画像を僅かにズーム + 名前をブランド色に。 */ .project__material-card.is-linked .project__material-media img { transition: transform 0.4s ease; } .project__material-card.is-linked:hover .project__material-media img { transform: scale(1.05); } .project__material-card.is-linked:hover .project__material-name { color: var(--color-brand); } .project__material-media { position: relative; /* Figma 938:809 準拠:カード全体 400×400 のうち画像エリアは 400×280。 下に 120px の白テキストエリアが続く構造。アスペクトはこの 400/280 を維持。 */ aspect-ratio: 400 / 280; overflow: hidden; background: var(--color-border); } /* 画像が解決できない部材の NO IMAGE プレースホルダ(CSSのみ。デザイン確定後に差し替え可) */ .project__material-noimage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en-condensed); font-weight: 600; font-size: 15px; letter-spacing: 2px; color: #b5b5b5; } .project__material-media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* タグチップ(注文生産品 / 標準品)。Figma 1983:237 準拠: 白背景・1px ボーダー(#555)・角丸20px・Bold 16px。写真の右上にオーバーレイ。 */ .project__material-tag { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 18px; background: #fff; border: 1px solid #555; border-radius: 20px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 14px; line-height: 1.5; color: #000; white-space: nowrap; } .project__material-body { /* Figma 準拠:白エリア 120px 高さ、左右パディング 18px、上 18px。 */ min-height: 120px; padding: 18px; background: #fff; display: flex; flex-direction: column; gap: 8px; } .project__material-name { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 1.4; color: #000; } .project__material-desc { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 14px; line-height: 23px; color: #000; } /* 矢印ボタン(Figma 2233:190 準拠):背景なし・枠なしのシェブロン。 SVG で「<」「>」を描画。左右両端に配置(コンテンツ外側の padding 領域)。 */ .project__material-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 32px; height: 57px; padding: 0; background: transparent; border: 0; cursor: pointer; color: #000; display: flex; align-items: center; justify-content: center; transition: opacity var(--transition-base); } .project__material-arrow:hover, .project__material-arrow:focus-visible { opacity: 0.45; outline: none; } .project__material-arrow-svg { display: block; width: 100%; height: 100%; } /* Figma:左 x=23、右 x=1388(1440 canvas 内、コンテンツ右端 x=1360)。 両側を symmetric に -56px としてバランス重視。 */ .project__material-arrow--prev { left: -56px; } .project__material-arrow--next { right: -56px; } /* 7. Locations — マップ(現状はプレースホルダ)。 */ .project__locations { padding: 56px 0 0; } /* マップ本体:showroom-map.js が data-agora-map を見て Google Maps を描画。 TOP の Showroom と同じ構成 — 地図を __map-wrap で包み、薄いブルーオーバーレイ を全体にかけ、上にメイン画像カードを重ねる(住所バーは無し)。 */ .project__locations-map-wrap { position: relative; margin-top: 32px; width: 100%; height: 440px; overflow: hidden; } .project__locations-map { display: block; width: 100%; height: 100%; background: #f5f5f5; /* マップロード前のフォールバック色 */ z-index: 0; } .project__locations-map-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(2, 171, 255, 0.05); pointer-events: none; z-index: 1; } /* マップ上に重ねるメイン画像カード(20px 白フレーム、住所なし)。 位置は Showroom カードと揃え、ピンとの相対関係を一定に保つ。 縦はマップに対して上下センター(モバイルは左下配置に切替、transform も戻す)。 */ .project__locations-card { position: absolute; right: calc(50% + 50px); top: 50%; transform: translateY(-50%); background: #fff; box-shadow: var(--shadow-md); z-index: 2; } .project__locations-card-photo { display: block; width: 380px; height: 253px; object-fit: cover; margin: 20px; } /* 8. Other Projects — 関連施工事例グリッド。.projects__grid を流用。 背景 #dedede は上のグループ宣言で適用済み。 */ .project__other { padding: 64px 0 80px; } .project__other-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: 26px; } /* CTA(Read More)は他セクションと同じ黒丸ボタン。 */ .project__other-cta { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; height: 50px; padding: 0 24px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 20px; transition: background var(--transition-base); } .project__other-cta:hover, .project__other-cta:focus-visible { background: var(--color-brand); } .project__other-cta-arrow { display: inline-flex; width: 25px; height: 15px; flex-shrink: 0; } .project__other-cta-arrow img { display: block; width: 100%; height: 100%; } /* ---------- Product Detail (page-products-agoragene-detail.php / Figma node 1426:1471 準拠) ---------- ★ スケルトン段階。各セクションのレイアウト骨組みのみ。 各エリア(Hero / Color Variation / Jointing / Spec / Related など)の 個別 Figma ノードを順次提示してもらった後、詳細スタイルに置換予定。 */ .product-detail { background: #fff; color: #000; } /* セクション共通の H2(英 + 和)。Gallery 詳細の section-heading と思想は同じ。 - 基本サイズ:Color Variation / Photo Gallery / Related など主要セクション = 40px。 - --sm モディファイア:Usage(3292:221)= 28px。 - 和文 sublabel:16px Medium #000(Figma 1501:2082)。 - en/ja の box は Figma 上で重なるため gap は 4px(Gallery 見出しと同じ思想)。 */ .product-detail__h2 { margin: 0 0 32px; display: flex; flex-direction: column; gap: 4px; color: #000; } .product-detail__h2-en { font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; line-height: 1; letter-spacing: 0; text-transform: none; } .product-detail__h2--sm .product-detail__h2-en { font-size: 28px; } /* Specification 内の「在庫限り」別表見出し(正規表との間に余白 + バッジ併記) */ .product-detail__h2--limited { flex-direction: row; align-items: center; gap: 12px; margin-top: 64px; } .product-detail__h2-ja { font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 16px; line-height: 1.4; color: #000; } /* ---- 1. Hero(Figma 1426:1474 ヒーロー背景 + 1426:1475 ヒーローヘッダ)---- - 背景:1440×1040、白(Figma 上 bg-white)。 - 画像エリア:1000×683、Figma 上 x=360 / y=120 で配置(= 1440 基準で left 25% / right 5.6%)。 viewport が縮んだら比率を維持してスケールダウンし、≤1024 では中央寄せに切替。 - 画像上端を 27px ヘッダーロゴに被せる(GALLERY 一覧・詳細と同じ規律 / --hero-header-overlap)。 Figma 上は header y=40-147 / 画像 y=120 のため、可視部は header 下端から始まる。 - 直下の Title block(.gallery__inner)は通常の 1280 max-width 中央寄せ。 */ .product-detail__hero { background: #fff; margin-top: calc(var(--hero-header-overlap) * -1); /* ヒーロー下端(Title block 下)〜 gray セクション開始までの余白 50px。 */ padding-bottom: 50px; } .product-detail__hero-img-wrap { /* Figma 通り 1000×683、1280 コンテンツ領域の右端に揃える(margin-left: auto)。 */ max-width: 1000px; margin-left: auto; margin-right: 0; aspect-ratio: 1000 / 683; overflow: hidden; background: var(--color-border); } .product-detail__hero-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Title block(Figma 2194:307 / Component 1): - 画像下から 36px の余白で開始(Figma 上 image 下 y=803 → Component 上端 y=839)。 - .gallery__crumbs(padding-bottom 15)+ title-row(margin-top 22)= GALLERY と同じ 37px の合算。 - 中の Title は Noto Sans JP Bold 52px、Subtitle は Noto Sans JP Medium 20px(#000)。 - Title と Subtitle の間隔は Gallery 見出しと同じ 4px の詰めで、Figma 上の box overlap を再現。 */ .product-detail__title-wrap { margin-top: 36px; } .product-detail__title-row { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; } .product-detail__title { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 52px; line-height: 1; color: #000; } .product-detail__subtitle { /* Gallery の en/ja(Roboto)は line-height 1 でも descender 分の 16px が余白として残るが、 日本語 Bold はグリフが em のほぼ全域を使うため、同じ 4px だと窮屈に見える。 Roboto の見た目に合わせて 18px に拡張(line-height 1 の box 内に descender 余裕がない分の補正)。 */ margin: 18px 0 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 20px; line-height: 1.5; color: #000; } /* ---- 2. About + Usage ---- 背景 #dedede。これ以降の全セクションも #dedede 連続。 gray 開始の上余白は 40px、下は About のリード文と次セクション(Color)の境目になるため 80px。 */ .product-detail__about { background: #dedede; padding: 40px 0 80px; } .product-detail__about-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 80px; align-items: flex-start; } .product-detail__about-lead { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 16px; line-height: 26px; color: #000; max-width: 640px; } .product-detail__usage-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; } .product-detail__usage-item { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* Figma 3355:283 から取り出した PNG は 81×112(円 + ラベル)。 円部分のみを上 80×80 で表示するため object-fit: cover + object-position: top。 */ .product-detail__usage-icon { display: block; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; } .product-detail__usage-icon img { display: block; width: 80px; height: 80px; object-fit: cover; object-position: top center; } .product-detail__usage-label { font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 14px; line-height: 1; color: #000; text-align: center; } /* ---- 3. Color Variation(5列 × 3行 = 14スウォッチ)---- */ .product-detail__colors { background: #dedede; padding: 40px 0 80px; } .product-detail__color-grid, .product-detail__variation-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 40px; } .product-detail__color { display: flex; flex-direction: column; gap: 10px; } /* 画像エリアは agoragene 一覧と同じ 290:193、白枠は ::after オーバーレイ。 */ .product-detail__color-media { position: relative; width: 100%; aspect-ratio: 290 / 193; overflow: hidden; /* 白枠(::after)と白背景はクライアント要望で撤去。letterbox はセクション背景(#dedede)が透ける。 */ } /* agoragene 詳細のライトボックス・トリガー(色チップ / Variation / 目地カルーセル)。 メディア枠(aspect-ratio コンテナ)いっぱいに広げ、img のスタイルはそのまま透過させる。 */ .product-detail__lg-trigger { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .product-detail__lg-trigger:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } .product-detail__color-media img { display: block; width: 100%; height: 100%; /* 正方形タイル(14color等)が 1.5:1 枠で上下に切れて質感・輪郭が消えるのを防ぐ。 contain で全体を表示。横長(ボーダー等)は枠とほぼ同比なので従来どおり収まる。 */ object-fit: contain; } /* チップ群:画像の左上に並べる。在庫限り(黒) → Recycle 70%(緑)の順。 どちらか一方のみの場合も自動で左寄せ。 */ .product-detail__color-tags { position: absolute; top: 0; left: 0; z-index: 2; display: flex; } .product-detail__color-tag { display: inline-flex; align-items: center; height: 32px; padding: 0 8px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; } .product-detail__color-tag--stock { width: 76px; background: #000; border: 1px solid #555; } .product-detail__color-tag--recycle { width: 100px; background: #299a00; } /* サーキュラーエコノミーのマーク(数字のリサイクル率は公開NG → アイコンのみ)。 チップ画像の右上に重ねる。クリックは下のライトボックスへ通す。 カタログ準拠のグレー版(grayscale)を白丸台座に乗せ、写真上でも視認性を確保。 ※ .product-detail__color-media img (width/height 100%) に負けないようセレクタを揃える。 */ .product-detail__color-media img.product-detail__color-eco { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; padding: 2px; object-fit: contain; background: rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: var(--shadow-sm); filter: grayscale(1); pointer-events: none; } @media (max-width: 640px) { .product-detail__color-media img.product-detail__color-eco { top: 6px; right: 6px; width: 38px; height: 38px; padding: 1px; } } /* About 末尾のサーキュラー・エコノミー注釈(エコマーク付きチップがある製品のみ) */ .product-detail__eco-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 1.6em; } .product-detail__eco-note-icon { flex-shrink: 0; width: 50px; height: 50px; margin-top: 10px; /* 3行テキストとの天地バランスを取るため少し下げる */ padding: 2px; object-fit: contain; background: rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: var(--shadow-sm); /* チップ上のマークと同じグレー版(カタログ準拠)に統一 */ filter: grayscale(1); } .product-detail__eco-note-text { margin: 0; font-size: 13px; line-height: 1.8; } .product-detail__eco-note-title { font-weight: 700; font-size: 14px; } .product-detail__color-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; } .product-detail__color-name { margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.4; color: #000; } .product-detail__color-code { font-weight: 700; } .product-detail__color-sublabel { font-weight: 400; } /* 施工例 ピル:Figma 1433:2012(68×36、白+1px#555、角丸 18、Bold 14px)。 */ .product-detail__color-link { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 36px; background: #fff; border: 1px solid #555; border-radius: 18px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 14px; color: #000; text-decoration: none; transition: opacity var(--transition-base); } .product-detail__color-link:hover { opacity: 0.7; } /* ---- 4. Jointing(目地色見本 / Figma 3359:310)---- Gallery 詳細の Materials と同じ transform 駆動の無限カルーセル(汎用 [data-carousel])。 3 枚を常時等幅で表示、左右矢印 + ドラッグ + auto 進行。 */ .product-detail__jointing { background: #dedede; padding: 40px 0 80px; } .product-detail__jointing-carousel { position: relative; } .product-detail__jointing-track { overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox: スクロールバー非表示 */ } .product-detail__jointing-track::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* 収まる時(JSが is-static 付与): アロー非表示。3枚を超えはみ出す時のみ表示。 */ .product-detail__jointing-carousel.is-static .product-detail__jointing-arrow { display: none; } /* 端でアロー無効化(無限ループしないので端が存在する)。 */ .product-detail__jointing-arrow:disabled { opacity: .25; cursor: default; } .product-detail__jointing-grid { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; } /* 1280 viewport で 3 枚:(1280 - gap 40×2) / 3 ≈ 400(Figma と一致)。 */ .product-detail__jointing-card { flex: 0 0 calc((100% - 80px) / 3); display: flex; flex-direction: column; background: #fff; } .product-detail__jointing-media { width: 100%; aspect-ratio: 400 / 280; overflow: hidden; background: var(--color-border); } .product-detail__jointing-media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 白ラベル帯:Figma 上 400×120、左右 19px パディング。 */ .product-detail__jointing-meta { min-height: 120px; padding: 18px 19px; background: #fff; } .product-detail__jointing-name { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 23px; color: #000; } .product-detail__jointing-color { margin: 8px 0 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 14px; line-height: 23px; color: #000; } /* 左右矢印(SVG ポリラインの山形)。Materials と同じ規律。 */ .product-detail__jointing-arrow { position: absolute; top: calc((100% - 120px) / 2 + 24px); transform: translateY(-50%); width: 32px; height: 57px; border: 0; background: transparent; color: #000; cursor: pointer; padding: 0; transition: opacity var(--transition-base); } .product-detail__jointing-arrow:hover { opacity: 0.55; } .product-detail__jointing-arrow--prev { left: -56px; } .product-detail__jointing-arrow--next { right: -56px; } .product-detail__jointing-arrow-svg { display: block; width: 100%; height: 100%; } /* ---- 5. Photo Gallery(.project__photo-grid を流用)---- 構造・スタイルとも GALLERY 詳細(page-gallery-detail.php)と完全共通。 ここでは bg #dedede と padding だけ上書き。 */ .product-detail__gallery { background: #dedede; padding: 40px 0 80px; } /* Photo Gallery: 事例リンク付き写真の見せ方。 施工事例(拡大)との挙動差を明示するため、リンク写真には 常時バッジ(↗)+ ホバーで暗転オーバーレイ「事例を見る →」を出す。 */ .product-detail__gallery-link { display: block; position: relative; width: 100%; height: 100%; } /* 常時バッジ(↗ 外部リンク風)。タッチ端末でも「リンク」と分かる。 */ .product-detail__gallery-badge { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; transition: background var(--transition-base); } .product-detail__gallery-badge svg { width: 14px; height: 14px; } /* ホバー/フォーカスで暗転 + ラベル。 */ .product-detail__gallery-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, 0.42); color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; opacity: 0; transition: opacity var(--transition-base); } .product-detail__gallery-overlay-arrow { font-size: 18px; line-height: 1; } .product-detail__gallery-link:hover .product-detail__gallery-overlay, .product-detail__gallery-link:focus-visible .product-detail__gallery-overlay { opacity: 1; } .product-detail__gallery-link:hover .product-detail__gallery-badge, .product-detail__gallery-link:focus-visible .product-detail__gallery-badge { background: var(--color-brand); } /* Variation 小グリッド(layout=grid)。グリッド枠はカラーチップ grid を流用、 アイテムは画像(アスペクト固定)+キャプション。白枠やタグは付けない。 */ .product-detail__variation-item { display: flex; flex-direction: column; gap: 10px; } .product-detail__variation-media { width: 100%; aspect-ratio: 290 / 193; overflow: hidden; } .product-detail__variation-media img { display: block; width: 100%; height: 100%; /* 形状違い(丸/面取り等)の輪郭を切らずに見せるため contain。 */ object-fit: contain; } .product-detail__variation-name { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 14px; line-height: 1.4; color: #000; } /* ---- 6. Specification(Figma 1550:2244)---- 背景は白(灰色フローの中の白アイランド)。 黒帯ヘッダ + 行グループ。 各グループ内:形状/必要枚数/入数 は rowspan で縦結合、品番・設計価格はサブ行ごと。 サブ行間は 1px の罫線、グループ間は太め(2px)の罫線。 */ .product-detail__spec { background: #fff; padding: 40px 0 60px; } .product-detail__spec-table { width: 100%; margin: 24px 0 0; border-collapse: collapse; border-bottom: 2px solid #000; /* テーブル全幅の最終ボーダー。rowspan セルの下にも繋がるように table に直接当てる。 */ font-family: "Noto Sans JP", var(--font-base); font-size: 16px; color: #000; table-layout: fixed; } /* 黒帯ヘッダ:高さ 40、白テキスト、中央寄せ。 */ .product-detail__spec-th { height: 40px; padding: 0 16px; background: #000; color: #fff; font-weight: 400; font-size: 14px; text-align: center; white-space: nowrap; } /* 列幅:Figma 1280 基準を比率(%)で持つ。.gallery__inner の幅が縮んでも比例して縮む。 合計 100%。形状 18.75 / 品番 42.19 / 必要枚数 11.80 / 設計価格 12.97 / 入数 14.30。 */ .product-detail__spec-th--shape { width: 18.75%; } .product-detail__spec-th--codes { width: 42.19%; } .product-detail__spec-th--quantity { width: 11.80%; } .product-detail__spec-th--price { width: 12.97%; } .product-detail__spec-th--unit { width: 14.30%; } /* 本文セル(白背景、黒テキスト、中央寄せ)。 */ .product-detail__spec-cell { padding: 14px 16px; background: #fff; color: #000; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--color-border); } /* 形状セル:ボーダー(Bold 14)+ 線画(115×62)+ 目地幅(Regular 14)+ 寸法(Bold 14)を中央寄せで縦に。 */ .product-detail__spec-cell--shape { text-align: center; padding: 18px 16px; border-bottom: none; } .product-detail__spec-shape-label { display: block; font-weight: 700; font-size: 14px; line-height: 1; } .product-detail__spec-shape-img { display: block; width: 115px; max-width: 100%; /* セルが狭くなったら追従(モバイル等) */ height: auto; /* 縦は素材のアスペクト比に追従 */ margin: 12px auto; object-fit: contain; } .product-detail__spec-shape-jp { display: block; font-weight: 400; font-size: 14px; line-height: 21px; } .product-detail__spec-shape-size { display: block; font-weight: 700; font-size: 14px; line-height: 21px; } /* 品番セル:中央寄せ、サブ行ごとに 1px 罫線。 */ .product-detail__spec-cell--codes { padding: 14px 0; white-space: nowrap; } /* 必要枚数:中央寄せ、rowspan 縦結合、罫線なし。 */ .product-detail__spec-cell--quantity { text-align: center; border-bottom: none; } /* 設計価格:中央寄せ、サブ行ごとに 1px 罫線。 */ .product-detail__spec-cell--price { padding: 14px 0; text-align: center; } /* 入数:中央寄せ、rowspan 縦結合、罫線なし。 */ .product-detail__spec-cell--unit { border-bottom: none; } /* グループの先頭行に太い罫線(グループ間の区切り)。 .gallery__inner の幅が縮んでも、rowspan セル(shape/quantity/unit)を含む全列に乗る。 先頭グループには付かないので、--group-start クラスだけに当てる。 */ .product-detail__spec-row--group-start .product-detail__spec-cell { border-top: 2px solid #000; } /* テーブル底辺の太罫線は table 自身の border-bottom で実現(上記)。 rowspan セルは tr:last-child の中に存在しないため、tr セレクタでは届かない。 */ .product-detail__spec-note { margin: 24px 0 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 13px; line-height: 22px; color: #666; } /* ---- 参考図(single-agoragene_product: スラッグ別のテンプレ内設定で表示)---- */ .product-detail__figures { background: #fff; padding: 0 0 60px; } .product-detail__figure-heading { margin: 0 0 16px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 1.6; color: var(--color-text); } .product-detail__figure-heading + .product-detail__figure-link { margin-bottom: 40px; } .product-detail__figure-link { display: block; border: 1px solid var(--color-border); transition: opacity var(--transition-base); cursor: zoom-in; /* 既存の拡大可能写真(__lg-trigger 等)と同じカーソル */ } .product-detail__figure-link:hover, .product-detail__figure-link:focus-visible { opacity: 0.8; } .product-detail__figure-link:last-child { margin-bottom: 0; } .product-detail__figure-img { display: block; width: 100%; height: auto; } /* ---- Spec PC/SP 出し分け(既存サイト agorabrix.co.jp と同じ規律)---- - ≥1025px:PC 版テーブル(5 列 rowspan)を表示、SP 版は display:none - ≤1024px:PC を hide、SP 版(3 列メイン + ネスト子テーブル)を表示 ブレイクポイントは PC 版の品番列(SP-KAS・BAS・...) が崩れ始める 1024px に設定。 */ .product-detail__spec-table--sp { display: none; } @media (max-width: 1024px) { .product-detail__spec-table--pc { display: none; } .product-detail__spec-table--sp { display: table; } } /* SP 版スタイル:メイン行(形状/必要枚数/入数)+ colspan="3" の子テーブル。 */ .product-detail__spec-sp-main .product-detail__spec-cell { vertical-align: middle; padding: 14px 12px; text-align: center; border-bottom: none; } .product-detail__spec-sp-main--group-start .product-detail__spec-cell { border-top: 2px solid #000; } .product-detail__spec-sp-sub .product-detail__spec-subwrap { padding: 0; background: #fff; } .product-detail__spec-subtable { width: 100%; border-collapse: collapse; } .product-detail__spec-subcell { padding: 12px 14px; background: #fff; color: #000; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 15px; line-height: 1.5; text-align: center; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .product-detail__spec-subtable tbody tr:last-child .product-detail__spec-subcell { border-bottom: none; } .product-detail__spec-subcell--codes { width: 60%; white-space: nowrap; overflow-x: auto; } .product-detail__spec-subcell--price { width: 40%; text-align: center; } /* ---- 7. CTA「この製品について相談する」(Figma 1550:2245)---- 赤背景の角丸ピル(270×50、border-radius 30px、border 1px rgba(229,229,229,0.25))。 左に矢印 SVG(25×~1px の長い棒 + 山形)、右に Bold 16px 白文字。中央寄せ。 */ .product-detail__cta-wrap { display: flex; justify-content: center; background: #dedede; padding: 40px 0 80px; } .product-detail__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 270px; height: 50px; padding: 0 24px; background: var(--color-brand); border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 20px; text-decoration: none; white-space: nowrap; transition: background var(--transition-base); } .product-detail__cta-btn:hover, .product-detail__cta-btn:focus-visible { background: var(--color-brand-dark); } .product-detail__cta-arrow { display: inline-flex; align-items: center; color: #fff; } .product-detail__cta-arrow svg { display: block; width: 25px; height: auto; } /* ---- 8. Related Products(.product__grid を流用)---- */ .product-detail__related { background: #dedede; padding: 80px 0 100px; } .product-detail__related-grid { margin-bottom: 40px; } /* ---------- Media queries ---------- */ /* Desktop小 (≤ 1280px) — GNAVが収まらなくなる前に隠してハンバーガーへ集約。 これより上ではGNAVが余裕を持って並ぶ。 */ @media (max-width: 1280px) { .gnav-wrap { display: none; } } /* Tablet (≤ 1024px) — ヘッダー高さを縮めて、ハンバーガーも小型化 */ @media (max-width: 1024px) { :root { /* ヘッダー上の白を縮める(モバイルでは画面領域を優先) */ --page-top-offset: 24px; /* セクションパディングを縮小(他セクションの実値と一致させる)。 */ --section-padding-inline: 32px; } .site-header__inner { padding-inline: var(--space-md); height: 64px; } /* ヘッダーが64pxに縮むこの帯域では、デスクトップ用の27px食い込みだと ヒーロー写真がInstagram・ハンバーガー(下端62px)に接触する。 12px に縮めると ヒーロー上端76px = ロゴ(下端88px)が12px被さる演出を保ちつつ、 アイコンとの間に14pxの余白が確保される(実測値。2026/07 調整)。 */ .hero, .gallery__hero, .story__hero, .project__hero, .product__hero, .product-detail__hero { --hero-header-overlap: 12px; } /* GALLERY詳細のLocationカード: カードの使える幅は画面半分−50px。 写真380px固定のままだと約940px未満で白フレームから写真がはみ出すため、 この帯域は写真を縮小してカードごと収める(769px でも 334px > カード308px)。 */ .project__locations-card-photo { width: 280px; height: 187px; margin: 14px; } /* side-float の絶対位置はヘッダー高さに依存。 24(page-top-offset) + 64(header) − 27(hero-overlap) + 75 = 136。 */ .side-float { top: 136px; } .hamburger { width: 36px; height: 26px; } .hamburger span { height: 2px; } /* ヘッダー(64px)の下に bar 全体を落とすため上パディングを増やす。 ロゴ・✕(ハンバーガー)は上層レイヤーに残り、その下に検索窓+ボタンが並ぶ。 */ .mega-panel__inner { padding: 95px 32px 32px; } .mega-panel__bar { flex-wrap: wrap; justify-content: center; gap: 16px; min-height: 0; padding-left: 0; padding-right: 0; } .mega-panel__search { order: 3; margin-left: 0; flex: 1 1 100%; } .mega-panel__actions { margin-left: 0; } .mega-panel__columns { grid-template-columns: repeat(3, 1fr); margin-top: 40px; padding-left: 0; gap: 24px; } .mega-panel__footer { padding-left: 0; padding-top: 40px; font-size: 13px; } .mega-panel__heading { font-size: 30px; margin-bottom: 16px; } /* Hero: 余白とチップサイズを縮める */ .hero { --hero-padding-inline: 32px; --hero-chip-overhang: 14px; } .hero__caption { left: -24px; } .hero__chip--tag { height: 30px; font-size: 15px; } .hero__chip--title { height: 44px; margin-left: 24px; font-size: 24px; } .hero__intro { font-size: 17px; line-height: 28px; } /* About: 見出しサイズと余白を縮める */ .about__inner { padding: 56px 32px 48px; } .about__heading { font-size: 48px; line-height: 60px; } .about__lead { font-size: 16px; } /* Projects: 余白とヘッダー行のレイアウトを縮める */ .projects { padding: 56px 0 48px; } .projects__inner { padding: 0 32px; } .projects__heading-en { font-size: 32px; } .projects__grid { gap: 48px 32px; } /* Products: 余白とカード内タイポを縮める。2カラムは維持。 */ .products { padding: 56px 0 64px; } .products__inner { padding: 0 32px; } .products__heading { margin-bottom: 28px; } .products__heading-en { font-size: 32px; } .products__cards { gap: 24px; margin-bottom: 32px; } .products__card { height: 320px; } .products__card-body { padding: 56px 32px 32px; } .products__card-title { font-size: 48px; } .products__card-desc { font-size: 15px; margin-top: 18px; } .products__outlet-body { padding-left: 32px; gap: 20px; } .products__outlet-title { font-size: 48px; } .products__outlet-sub { font-size: 14px; } .products__cta--outlet { margin-right: 16px; } /* Find: 余白とタイポを縮める。4カラムは維持。 */ .find { padding: 56px 0; } .find__inner { padding: 0 32px; } .find__heading-en { font-size: 32px; } .find__grid { gap: 24px; } .find__card { height: 200px; padding: 28px 12px 24px; } .find__label { font-size: 18px; } .find__icon img { height: 56px; } /* Catalogs: 余白とタイポを縮める。2カラムは維持。 */ .catalogs { padding: 56px 0; } .catalogs__inner { padding: 0 32px; gap: 24px; } .catalogs__heading { margin-bottom: 24px; } .catalogs__heading-en { font-size: 32px; } .catalogs__card-title { font-size: 44px; } .catalogs__card-desc { font-size: 14px; line-height: 22px; margin-top: 16px; } /* Showroom: H2まわりを少しコンパクトに、マップは少し低く */ .showroom { padding-top: 56px; } .showroom__heading-wrap { padding: 0 32px; margin-bottom: 32px; } .showroom__heading-en { font-size: 32px; } .showroom__map-wrap { height: 400px; } /* .showroom__card の縦位置はベースの上下センター(top:50% + translateY)が マップ高さ 400px にもそのまま追従するため、ここでの調整は不要。 */ .showroom__card-photo { width: 320px; height: 213px; margin: 16px 16px 0; } .showroom__card-address { font-size: 13px; padding: 10px 16px 14px; } /* News: 余白とタイポを縮める */ .news { padding: 56px 0; } .news__inner { padding: 0 32px; } .news__heading-en { font-size: 32px; } .news__link { grid-template-columns: 100px 1fr; column-gap: 20px; } .news__title { font-size: 16px; } .news__excerpt { font-size: 14px; } /* Gallery: 見出し縮小、フィルター行は折り返し許容、本文余白を詰める。 */ .gallery__intro { padding: 24px 0; } .gallery__heading-en { font-size: 48px; } .gallery__heading-ja { font-size: 17px; } .gallery__filters { /* margin/padding-bottom はデフォルトと同じく持たず、pill が下の灰色一覧へ直接接続。 */ } .gallery-filter { gap: 6px; font-size: 15px; } .gallery-filter__item a { padding: 6px 10px; } .gallery__count-num { font-size: 18px; } .gallery__count-unit { font-size: 13px; } .gallery__grid-wrap { padding: 48px 0 56px; } .gallery__more { margin-top: 48px; } /* Products(agoragene)1024: 見出し縮小、4列維持。 */ .product__label { font-size: 24px; } .product__title { font-size: 48px; } .product__chip { height: 36px; padding: 0 14px; font-size: 15px; } .product__description { font-size: 22px; line-height: 36px; margin-top: 28px; } .product__grid { gap: 40px 28px; } /* Project detail: 見出し縮小、2カラム間隔詰める */ .section-heading__en { font-size: 32px; } .section-heading--sm .section-heading__en { font-size: 24px; } .project__title { font-size: 40px; } .project__brand { font-size: 17px; } .project__about-grid { gap: 48px; } .project__photo-grid { grid-auto-rows: 220px; gap: 32px; } .project__material-grid { gap: 28px; } .project__material-card { /* 1024 viewport(gap 28)でも 3 枚等幅。 */ flex-basis: calc((100% - 56px) / 3); } /* 1024:section padding が 32 に狭くなるので矢印もコンパクトに。 */ .project__material-arrow { width: 22px; height: 40px; } .project__material-arrow--prev { left: -28px; } .project__material-arrow--next { right: -28px; } .project__material-name { font-size: 16px; } .project__other { padding: 48px 0 56px; } } /* Mobile (≤ 768px) */ @media (max-width: 768px) { /* 建築用途セレクト(ドロップダウン)は SP だけ 14px に戻す(PC は 18px)。 */ .gallery-filter-dropdown__trigger, .gallery-filter-dropdown__list a { font-size: 14px; } :root { --page-top-offset: 16px; --section-padding-inline: 24px; /* スクロール時のロゴ高さもモバイル基準に合わせて縮める。 header 高さ 56 に対して 40 だと上下 8px ずつの余白で見やすい。 */ --header-scroll-logo-height: 40px; } .site-header__inner { padding-inline: var(--space-sm); height: 56px; } .header-actions { gap: 16px; } .header-actions__insta { width: 30px; height: 30px; margin-right: 0; } .site-branding img, .site-branding .custom-logo, .site-branding__logo img { height: 48px; } .site-branding__text { font-size: 1.05rem; } .mega-panel__inner { padding: 87px 24px 24px; } .mega-panel__actions { flex-wrap: wrap; gap: 8px; } /* SPは1カラム(2カラムはカテゴリの高低差でバランスが崩れ、並び順の印象も変わるため)。 縦に長くなるぶん、リスト・サブメニューの上下余白を詰めて圧縮する(2026/07 決定)。 */ .mega-panel__columns { display: block; margin-top: 24px; } /* 最後の項目リンク自身の padding 6px + 行送りの余りがあるため、 margin は小さめにして線の上下の見た目を揃える(上≈16px / 下=20px)。 */ .mega-panel__col { margin-bottom: 10px; } /* カテゴリの区切りを薄いヘアラインで明示(1カラムだと見出しだけでは塊の境界が 伝わりにくい)。最初のカテゴリには引かない。線の色はサイト共通の黒罫の淡色版。 */ .mega-panel__col + .mega-panel__col { border-top: 1px solid rgba(0, 0, 0, 0.18); padding-top: 20px; } .mega-panel__sublist { margin-top: 2px; gap: 0; padding-left: 8px; /* 2カラム化で幅が半分になるためインデントを16→8pxに(長い子項目の折り返し回避) */ } /* SP: コピーライトで改行し、2行目=ポリシーリンク(先頭の｜は消す) */ .mega-panel__footer { row-gap: 8px; } .mega-panel__footer-copy { flex-basis: 100%; } .mega-panel__footer-copy + .mega-panel__footer-sep { display: none; } .mega-panel__heading { font-size: 26px; margin-bottom: 12px; } /* 各カテゴリのリンク群を2カラムに流す(右側のガラ空き対策。2026/07)。 先頭のサブメニュー付き項目(国代について/AGORABRIX)が背が高く左に残り、 残りの単独項目(会社概要〜/agoragene・Outlet 等)が右カラムへ回る。 CSS multicolumn の高さ均等配分に任せるので、項目数が変わっても自動追従。 */ .mega-panel__list { display: block; columns: 2; column-gap: 16px; /* 24→16px。長い項目(国代耐火工業所について/Outlet等)を1行に収める幅を捻出 */ } .mega-panel__list > li { break-inside: avoid; /* 親項目とそのサブメニューを途中で分割しない */ margin-bottom: 6px; } .mega-panel__list a { font-size: 14px; padding: 6px 2px 6px 10px; /* 右余白を詰めてテキスト幅を確保(タップ高さは維持) */ margin-left: -10px; } .mega-panel__sublist a { padding: 6px 2px; margin-left: 0; } /* モバイル:上下余白を縮め、テキストは折り返し前提でやや小さく。 */ .site-footer { padding: 28px var(--space-md) 32px; } .site-footer__inner { gap: 32px; } .site-footer__meta { font-size: 13px; line-height: 1.7; row-gap: 6px; } /* SP: メガメニューのフッター行と同じくコピーライトで改行し、 2行目(ポリシーリンク)は中央寄せ。行頭に残る｜は消す。 */ .site-footer__copy { flex-basis: 100%; text-align: center; } .site-footer__copy + .site-footer__sep { display: none; } .site-footer__sep { margin: 0 0.6em; } .site-footer__brand img { width: 96px; height: 42px; } /* 画面下の固定バー: 右端の縦並びピルは画面の3割をふさぐためやめ、 左右2分割(カタログ=黒 / お問い合わせ=赤)のバーを全ページで下部固定にする。 ※SPデザインはFigmaに無く、ここが事実上の仕様(2026/06 橋本さん判断)。 ※≤1024 の top:116px(ヘッダー高さ調整)に上書き負けしないよう、 必ずそれより後方のこの位置に置くこと。 */ .side-float, body.is-front-page .side-float { position: fixed; top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; align-items: stretch; gap: 0; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12); } /* 柱ページもSPでは下部バーを出す(PCのみ非表示の modifier を解除) */ .side-float--sp-only { display: flex; } .side-float__btn--catalog, .side-float__btn--contact { flex: 1 1 50%; width: auto; height: var(--sp-cta-bar-height, 52px); margin-right: 0; border-radius: 0; flex-direction: row; /* PCの縦組み(catalog)を下バーでは横並びに戻す */ justify-content: center; padding: 0; gap: 10px; font-size: 14px; } /* 下バーでは「WEB / カタログ」を 1 行(WEBカタログ)に戻す */ .side-float__br { display: none; } .side-float__icon { transform: scale(0.8); } /* バーの高さぶんページ末尾に余白を足し、フッターの文字が隠れないようにする */ body { padding-bottom: var(--sp-cta-bar-height, 52px); } /* Hero: モバイルは sub 写真を隠し main を全幅で見せる。 ヘッダーへの食い込みはデスクトップの 27px から 16px に縮小: ・ロゴ(高さ48px)の下部がヒーローに被さる演出は維持(Figma同等の世界観) ・ハンバーガー(y=16-42)とヒーロー上端(y=56)の間に 14px の余白が確保される */ .hero { /* 横余白は他ページと同じ24px(2026/07/16 決定)。 ヘッダーロゴが写真の左端より外に出る見え方を優先(16pxだと写真がロゴ直下まで届く)。 */ --hero-padding-inline: 24px; --hero-chip-overhang: 10px; --hero-header-overlap: 16px; } /* Gallery・ブランドストーリーのヒーローも同じく食い込み量をモバイル用に縮小して、 ハンバーガーとの間に余白を確保する。 */ .gallery__hero, .story__hero { --hero-header-overlap: 16px; } .hero__caption { left: 0; } .hero__chip--tag { height: 28px; font-size: 13px; letter-spacing: 1.2px; padding: 0 10px; } .hero__chip--title { height: 40px; margin-left: 16px; font-size: 20px; padding: 0 14px; } .hero__selector { margin-top: 32px; gap: 10px; } .hero__selector-dot { width: 12px; height: 12px; } .hero__intro { margin-top: 28px; padding: 0 var(--space-md); /* 横余白24px(サイト共通。2026/07/16 統一) */ font-size: 15px; line-height: 26px; } /* About: モバイルは1カラム積み、見出し36pxまで縮める */ .about { min-height: 0; } /* スマホは人物が画面に程よく入る位置(55%)。 工場背景と人物のバランスを意識して、手元〜ジャケットの一部が見える程度に。 ・100%(右端):背中だけ ・70%:両手と作業着が中心 ・55%:手元中心+工場背景もそこそこ(現状) ・45%:手は端、工場が広く映る ・0%(左端):工場のみ、人物消える */ .about::before { background-position: 55% center; } .about__inner { padding: 40px var(--space-md); } .about__heading { font-size: 32px; line-height: 44px; letter-spacing: -0.04em; } .about__lead { font-size: 15px; } .about__cta { height: 44px; font-size: 15px; padding: 0 18px; } /* Projects: 1カラム積み、ヘッダー行は左揃えで縦並びにする */ .projects { padding: 40px 0 32px; } .projects__inner { padding: 0 var(--space-md); } .projects__header { flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); } .projects__heading-en { font-size: 28px; } .projects__heading-ja { font-size: 14px; } .projects__cta { height: 44px; font-size: 15px; padding: 0 18px; } .projects__grid { grid-template-columns: 1fr; gap: 32px; } .projects__card { gap: 12px; } /* Products: 1カラム積み、カードはやや低く、Outletは縦並びにする */ .products { padding: 40px 0 48px; } .products__inner { padding: 0 var(--space-md); } .products__heading { margin-bottom: 24px; } .products__heading-en { font-size: 28px; } .products__heading-ja { font-size: 14px; } .products__cards { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; } .products__card { height: 280px; } .products__card-body { padding: 48px 24px 24px; } .products__card-title { font-size: 40px; } .products__card-desc { font-size: 14px; margin-top: 14px; } .products__cta { height: 44px; font-size: 15px; padding: 0 18px; } .products__outlet { height: auto; min-height: 110px; flex-direction: column; align-items: stretch; padding: 20px 0; } .products__outlet-body { padding-left: 24px; gap: 12px; flex-direction: column; align-items: flex-start; } .products__outlet-title { font-size: 40px; } .products__cta--outlet { margin: 16px 24px 0; align-self: flex-end; } /* Find: 2×2 グリッドに切替 */ .find { padding: 40px 0; } .find__inner { padding: 0 var(--space-md); } .find__heading { margin-bottom: 28px; } .find__heading-en { font-size: 28px; } .find__heading-ja { font-size: 14px; } .find__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .find__card { height: 160px; padding: 22px 8px 18px; } .find__label { font-size: 15px; } .find__icon img { height: 46px; } /* Catalogs: 1カラム積み、カードは正方比寄りで本体テキストはサイズダウン */ .catalogs { padding: 40px 0; } .catalogs__inner { grid-template-columns: 1fr; padding: 0 var(--space-md); gap: 32px; } .catalogs__heading { margin-bottom: 20px; } .catalogs__heading-en { font-size: 28px; } .catalogs__heading-ja { font-size: 14px; } .catalogs__card-title { font-size: 36px; } .catalogs__card-desc { font-size: 13px; line-height: 20px; margin-top: 12px; } /* Showroom: カードを地図の下に積み、地図はより低く */ .showroom { padding-top: 40px; } .showroom__heading-wrap { padding: 0 var(--space-md); margin-bottom: 24px; } .showroom__heading-en { font-size: 28px; } .showroom__heading-ja { font-size: 14px; } .showroom__map-wrap { height: 320px; margin-bottom: 0; } /* SPは写真カードを出さない(2026/07 指示)。 旧実装は static + margin -60px でマップ下に出す意図だったが、wrap の overflow:hidden + 高さ320px固定でカード上端44pxだけが白帯として見えていた。 詳細は Read More 先の /showroom/ が担う。 */ .showroom__card { display: none; } /* News: 1カラム積み、日付・タイトル・抜粋を縦並びに */ .news { padding: 40px 0; } .news__inner { padding: 0 var(--space-md); } .news__header { flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); } .showroom__heading-wrap { flex-direction: column; align-items: flex-start; gap: var(--space-md); } .news__heading-en { font-size: 28px; } .news__heading-ja { font-size: 14px; } .news__cta { height: 44px; font-size: 15px; padding: 0 18px; } /* SP: Read More は3件の下に右寄せで出す(ヘッダー右肩の --top は隠す) */ .news__cta--top { display: none; } .news__foot { display: flex; justify-content: flex-end; margin-top: 20px; } .news__link { grid-template-columns: 1fr; grid-template-areas: "date" "title" "excerpt"; row-gap: 8px; padding: 16px 0 18px; } .news__title { font-size: 15px; } .news__excerpt { font-size: 13px; line-height: 1.6; } .news__badge { min-width: 64px; height: 24px; font-size: 12px; padding: 0 10px; } /* Gallery: 見出しさらに縮小、フィルターは横スクロールできるように。 */ .gallery__intro { padding: 16px 0; } .gallery__heading { gap: 2px; margin-top: 14px; } .gallery__heading-en { font-size: 36px; } .gallery__heading-ja { font-size: 14px; gap: 0.25em; } .gallery__filters { padding-top: 14px; } /* (旧)モバイル用ドロップダウン切替は不要に。常時ドロップダウンへ変更したため。 */ .gallery__count-num { font-size: 16px; } .gallery__count-unit { font-size: 12px; } .gallery__grid-wrap { padding: 32px 0 40px; } .gallery__more { margin-top: 32px; } .gallery__more-btn { height: 44px; font-size: 15px; padding: 0 18px; } /* Products(agoragene)モバイル:タイトル縮小、グリッドを 2列に。 */ .product__hero { --hero-header-overlap: 16px; } .product__intro { padding: 16px 0 18px; } .product__label { margin-top: 12px; font-size: 20px; } .product__title-row { flex-wrap: wrap; gap: 10px; } .product__title { font-size: 36px; } .product__chip { height: 32px; padding: 0 12px; font-size: 13px; } .product__description { margin-top: 18px; font-size: 18px; line-height: 30px; } .product__filters { padding-top: 14px; } .product__filters-link { font-size: 12px; } .product__grid-wrap { padding: 32px 0 40px; } .product__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; margin-bottom: 32px; } .product__name { font-size: 14px; } /* Project detail: モバイル — 単一カラム積み、見出しも縮小 */ /* キーワード行: SPは右寄せをやめて左寄せ・小さく・薄く。 タグを inline-block 化してタグ途中の折り返し(「〜ラウン/ジ」の泣き別れ)を防ぐ。 区切りの全角スペースは使わず、タグ自身の margin で間隔を取る(行末の残骸防止)。 */ .project__keywords { margin: 24px 0 0; text-align: left; font-size: 12px; line-height: 1.6; } .project__keyword { display: inline-block; margin: 0 14px 6px 0; color: #666; /* 下線は維持(クリックできる感)。色だけ薄く */ } .project__keyword-sep { display: none; } .section-heading__en { font-size: 26px; } .section-heading--sm .section-heading__en { font-size: 20px; } .section-heading__ja { font-size: 14px; } .project__hero { --hero-header-overlap: 16px; } .project__heading-block { padding: 24px 0 20px; /* 下40pxはタグ行との組み合わせで間延びするため縮小(2026/07) */ } .project__title { font-size: 28px; margin: 16px 0 12px; } .project__brand { font-size: 15px; } .project__about { padding-bottom: 48px; } .project__about-grid { grid-template-columns: 1fr; gap: 40px; } .project__spec-list { font-size: 14px; } .project__spec-label, .project__spec-value { padding-top: 10px; padding-bottom: 10px; } .project__spec-label { padding-right: 16px; } .project__photo-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; } /* モバイルは全カード同サイズ・同 aspect。デスクトップの小カードと同じ 400 / 260。 grid-auto-rows: auto + aspect-ratio で、画面幅に依らず縦横比が一定になる。 */ .project__photo-item { aspect-ratio: 400 / 260; } .project__photo-item--large { grid-column: auto; grid-row: auto; /* span 解除、他のカードと同サイズに */ } .project__material-grid { gap: 16px; } /* モバイルは 1.5 枚見せ(1枚 + 次のカードを半分チラ見せ)で「右にまだある」を伝える。 gap 16px を1つ差し引いて 1.5 等分。スクロールスナップで指の止まりを良くする。 */ .project__material-card { flex-basis: calc((100% - 16px) / 1.5); scroll-snap-align: start; } /* 1枚しかないときはチラ見せ無しで全幅表示(そのまま見せる)。 */ .project__material-card:only-child { flex-basis: 100%; } /* モバイルは矢印を隠す(スワイプで操作)。 */ .project__material-arrow { display: none; } /* media aspect は default の 400/280 を継承(モバイルでも同じ比率) */ .project__locations-map-wrap { height: 280px; } /* モバイルは写真カードを出さない(地図が280pxと低く、縮小してもピンに被るため。 2026/07 指示。当初は左下に小さく重ねていたがそれでも干渉した)。 */ .project__locations-card { display: none; } .project__other { padding: 40px 0; } .project__other-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); } .project__other-cta { height: 44px; font-size: 15px; padding: 0 18px; } } /* ---------- Product Detail: 各ブレイクポイント別オーバーライド(スケルトン段階) ---------- */ @media (max-width: 1024px) { .product-detail__title { font-size: 40px; } .product-detail__subtitle { font-size: 17px; } .product-detail__about { padding: 48px 0 56px; } .product-detail__colors, .product-detail__jointing, .product-detail__gallery, .product-detail__spec, .product-detail__related { padding-top: 40px; padding-bottom: 56px; } .product-detail__about-grid { grid-template-columns: 1fr; gap: 40px; } .product-detail__color-grid, .product-detail__variation-grid { grid-template-columns: repeat(4, 1fr); gap: 48px 24px; } .product-detail__jointing-grid { gap: 24px; } .product-detail__jointing-arrow--prev { left: -32px; } .product-detail__jointing-arrow--next { right: -32px; } .product-detail__h2-en { font-size: 24px; } } @media (max-width: 768px) { /* TOP / GALLERY / agoragene 一覧 と同じく、モバイルでは食い込み量を 16px に縮小して ハンバーガー(y=16-42)と画像上端(y=56)の間に約 14px の余白を確保。 */ .product-detail__hero { --hero-header-overlap: 16px; } .product-detail__about { padding: 32px 0 40px; } .product-detail__title { font-size: 28px; } .product-detail__subtitle { font-size: 14px; } .product-detail__color-grid, .product-detail__variation-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } .product-detail__jointing-grid { grid-template-columns: 1fr; } .product-detail__jointing-arrow { display: none; } .product-detail__spec-table { font-size: 12px; } .product-detail__spec-table thead th, .product-detail__spec-table tbody td { padding: 10px 8px; } /* 注釈文(○ユニット加工…)はスマホで詰める。 */ .product-detail__spec-note { font-size: 12px; line-height: 20px; } .product-detail__h2-en { font-size: 22px; } .product-detail__usage-list { gap: 18px; } .product-detail__usage-item, .product-detail__usage-icon { width: 64px; } .product-detail__usage-icon { height: 64px; font-size: 28px; } } /* ============================================================ 画像ライトボックス(GALLERY 詳細:Hero + Photo Gallery) 外部ライブラリ不使用。JS は assets/js/main.js の最後のモジュール。 ============================================================ */ /* クリック可能な画像トリガー(ボタンだが見た目は画像のまま)。 */ .project__hero-trigger { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .project__photo-trigger { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .project__hero-trigger:focus-visible, .project__photo-trigger:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* オーバーレイ本体 */ .agora-lightbox { position: fixed; inset: 0; z-index: 100001; /* 既存最大 100000(メガメニュー)より前面 */ display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.92); } .agora-lightbox[hidden] { display: none; } .agora-lightbox__stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 24px; box-sizing: border-box; } .agora-lightbox__img { display: block; max-width: 92vw; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } /* 画像切替のフェードイン(切替時に .is-loaded を外す→読み込み完了で付け直す)。 transition を .is-loaded 側にだけ持たせることで、 「消えるのは即時 / 現れるのはフェード」の一方通行にする。 */ .agora-lightbox__img { opacity: 0; } .agora-lightbox__img.is-loaded { opacity: 1; transition: opacity 0.3s ease; } @media (prefers-reduced-motion: reduce) { .agora-lightbox__img { opacity: 1; transition: none; } } .agora-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2; transition: background var(--transition-base); } .agora-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); } .agora-lightbox__nav[hidden] { display: none; } .agora-lightbox__nav--prev { left: 16px; } .agora-lightbox__nav--next { right: 16px; } .agora-lightbox__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 3; transition: background var(--transition-base); } .agora-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); } .agora-lightbox__thumbs { flex: 0 0 auto; display: flex; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 12px 16px; overflow-x: auto; } .agora-lightbox__thumbs[hidden] { display: none; } .agora-lightbox__thumb { flex: 0 0 auto; width: 84px; height: 56px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: 0.5; transition: opacity var(--transition-base), border-color var(--transition-base); } .agora-lightbox__thumb.is-current { opacity: 1; border-color: #fff; } .agora-lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .agora-lightbox__nav { width: 40px; height: 40px; font-size: 24px; } .agora-lightbox__thumb { width: 64px; height: 44px; } .agora-lightbox__stage { padding: 16px 8px; } } /* agoragene 製品(CPT)単体ページの見出し周りだけ最小追加(本体テーブルは 既存 .product-detail__spec-* CSS をそのまま流用)。 */ /* 旧 .product-detail__crumbs は .breadcrumbs --detail(共通部品)へ統合済み。 */ .product-detail__notice { margin: 16px 0 0; font-size: 13px; color: var(--color-muted); } /* ============================================================ Outlet 一覧(archive-outlet.php) サイズ区分ごとにセクション化、各カードは画像+型番+形状+寸法+在庫数 ============================================================ */ .outlet__sections { background: var(--color-bg-alt); padding: 24px 0 80px; } .outlet__section { padding: 32px 0 16px; } .outlet__section + .outlet__section { border-top: 1px solid var(--color-border); margin-top: 24px; } .outlet__section-heading { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--color-text); margin: 0 0 24px; } .outlet__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } .outlet__card { display: flex; flex-direction: column; } .outlet__card-media { width: 100%; aspect-ratio: 4 / 3; background: var(--color-border); overflow: hidden; } /* リード下の注意書き(小さめ・控えめに) */ .outlet__note { margin: 6px 0 0; font-size: 16px; line-height: 1.7; color: var(--color-muted); } /* outlet カードのライトボックス・トリガー(agoragene 詳細と同じ仕組み) */ .outlet__lg-trigger { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .outlet__lg-trigger:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } .outlet__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .outlet__card-meta { padding: 12px 4px 0; font-family: "Noto Sans JP", var(--font-base); font-size: 13px; line-height: 1.6; color: var(--color-text); } .outlet__card-model { margin: 0; font-weight: 700; font-size: 14px; } .outlet__card-shape { margin: 2px 0 0; color: var(--color-muted); } .outlet__card-stock { margin: 4px 0 0; font-weight: 500; font-feature-settings: "tnum"; } .outlet__empty { margin: 24px 0; font-size: 14px; color: var(--color-muted); } @media (max-width: 1024px) { .outlet__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .outlet__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } .outlet__section-heading { font-size: 16px; } } /* ========================================================================= AGORABRIX ブランドランディング (page-agorabrix.php) Figma node 1730:2787 準拠。 - Hero / Intro は agoragene 一覧と同じ .product__* を再利用。 - 以下は AGORABRIX 固有の「補足説明」「5ラインカード」「CTA バナー」のみ。 ========================================================================= */ /* 2. Intro — リード(.product__description)の下に置く補足説明 (Figma 1730:2960):Noto Sans Regular 20px / line-height 32px。 */ .agorabrix-top__sub-description { margin: 32px 0 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 20px; line-height: 32px; color: #000; } /* 導入文の「炙り」前の改行は、ウィンドウ幅が 1405px 以上のときだけ効かせる。 それ未満では改行を外し、自然な折り返しに任せる。 */ .agorabrix-intro-br { display: none; } @media (min-width: 1405px) { .agorabrix-intro-br { display: inline; } } /* 3. 5 lines */ .agorabrix-top__lines { padding: 64px 0 96px; display: flex; flex-direction: column; gap: 60px; } /* 各 line セクションは「コンテナ枠から画像をはみ出させてビューポート端まで伸ばす」構造。 → .gallery__inner で text body だけを 1280 幅の中に収め、 .agorabrix-top__line-media は section に対して absolute で右端(または左端)に寄せる。 - text body 幅 = 480px(Figma 4段準拠) - text と image の間の gap = 40px - image 左端 = gallery__inner content 左端 + 480 + 40 = section 左から (max(0, (vw-1440)/2) + 80 + 520) */ .agorabrix-top__line { position: relative; min-height: 400px; } .agorabrix-top__line-body { width: 480px; max-width: 100%; } /* reverse(画像左)行は body を右側に押し出す。 */ .agorabrix-top__line--reverse .agorabrix-top__line-body { margin-left: auto; } /* デスクトップでは各タイトル(Tile Works 等)の上に 60px の余白を取って、 セクション同士の境界感(gap 60 + padding-top 60 = 計 120px)を出す。 1280px 以下では画像→テキストの縦積みになるため、この余白は無効化する。 */ @media (min-width: 1281px) { .agorabrix-top__line-body { padding-top: 60px; } } .agorabrix-top__line-media { position: absolute; top: 0; height: 400px; overflow: hidden; background: var(--color-border); /* 通常行:画像右端をビューポート右端まで、左端は text 列右 + gap 40 */ right: 0; left: calc(max(0px, (100vw - var(--design-width)) / 2) + var(--section-padding-inline) + 480px + 40px); } /* reverse 行:画像左端をビューポート左端まで、右端は text 列左 - gap 40 */ .agorabrix-top__line--reverse .agorabrix-top__line-media { left: 0; right: calc(max(0px, (100vw - var(--design-width)) / 2) + var(--section-padding-inline) + 480px + 40px); } .agorabrix-top__line-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .agorabrix-top__line-body { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; } /* 見出し2点(en / jp)を密に積む。description との間に 21px の空きを取る。 ※ 元の Figma にあった「Tile / Brick」等の小キャプション(line-sub)は ほぼタイトルの短縮版で意味的に重複していたため、UI 簡素化のため撤去。 */ .agorabrix-top__line-en { margin: 0; font-family: var(--font-en-condensed); font-weight: 700; font-size: 40px; font-stretch: 75%; color: #000; line-height: 1.1; letter-spacing: 0; } .agorabrix-top__line-jp { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 16px; line-height: 1.4; color: #000; } .agorabrix-top__line-desc { /* Figma 3287:187: テキストフレーム 477×97(3 行ぶん確保)。 jp → desc 上 21px、desc → Read More 下 24px。 実コピーが 1〜2 行のときも min-height で 97px の枠を維持して、 Read More の縦位置が事例ごとにブレないようにする。 */ margin: 21px 0 24px; min-height: 97px; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 20px; line-height: 32px; color: #000; } /* ライン Read More ボタン(Figma 3287:192「くわしく」コンポーネント) 168×50 / 矢印=左18px、gap15px、ラベル左58px、右余白4px / line-height 20px。 */ .agorabrix-top__line-cta { display: inline-flex; align-items: center; justify-content: flex-start; gap: 15px; padding: 0 4px 0 18px; width: 168px; height: 50px; border-radius: 30px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 20px; text-decoration: none; transition: background var(--transition-base); box-sizing: border-box; } .agorabrix-top__line-cta:hover, .agorabrix-top__line-cta:focus-visible { background: var(--color-brand); } .agorabrix-top__line-cta-arrow { display: inline-flex; align-items: center; flex-shrink: 0; } .agorabrix-top__line-cta-arrow img { display: block; width: 25px; height: 15px; /* about-arrow.svg は元から白(fill="white")で描かれているので、 暗いボタン上ではフィルタ無しで白いまま使う。 明るい背景で使う他のボタンでは invert(1) を別途付ける運用。 */ } .agorabrix-top__line-cta-label { display: inline-block; } /* 4. CTA バナー */ .agorabrix-top__cta { padding: 80px 0 96px; background: #dedede; } .agorabrix-top__cta-inner { text-align: center; } .agorabrix-top__cta-heading { margin: 0 0 24px; font-size: 30px; font-weight: 400; line-height: 1.5; color: #000; } .agorabrix-top__cta-lead { margin: 0 0 40px; font-size: 18px; line-height: 1.7; color: var(--color-text); } .agorabrix-top__cta-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 32px; background: var(--color-brand); border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; text-decoration: none; transition: background var(--transition-base); } .agorabrix-top__cta-btn:hover, .agorabrix-top__cta-btn:focus-visible { background: var(--color-brand-dark); } .agorabrix-top__cta-btn-arrow img { display: block; width: 25px; height: 15px; /* about-arrow.svg は元から白なのでフィルタ無しでOK(line-cta と同じ規律)。 */ } /* レスポンシブ 1: GNAV がハンバーガーへ集約する 1280px 以下で、 ラインカードも「画像 100% 幅 → テキスト下並び」に切り替え。 これによりラインカードの画像が中間幅で小さく見えてしまう問題を回避。 */ @media (max-width: 1280px) { .agorabrix-top__line { min-height: 0; } .agorabrix-top__line-media, .agorabrix-top__line--reverse .agorabrix-top__line-media { position: static; width: 100%; height: 360px; left: auto; right: auto; } .agorabrix-top__line-body, .agorabrix-top__line--reverse .agorabrix-top__line-body { width: 100%; max-width: 100%; margin-left: 0; margin-top: 32px; } .agorabrix-top__lines { gap: 56px; } } /* レスポンシブ 2: モバイル — タイポ縮小と画像の高さをさらに下げる。 */ @media (max-width: 768px) { .agorabrix-top__sub-description { font-size: 15px; line-height: 1.7; margin-top: 24px; } .agorabrix-top__lines { padding: 48px 0 64px; gap: 48px; } .agorabrix-top__line-media, .agorabrix-top__line--reverse .agorabrix-top__line-media { height: 240px; } .agorabrix-top__line-body, .agorabrix-top__line--reverse .agorabrix-top__line-body { margin-top: 24px; } .agorabrix-top__line-en { font-size: 32px; } .agorabrix-top__line-desc { font-size: 15px; line-height: 1.7; min-height: 0; } .agorabrix-top__cta { padding: 56px 0 64px; } .agorabrix-top__cta-heading { font-size: 22px; } .agorabrix-top__cta-lead { font-size: 15px; margin-bottom: 28px; } } /* ============================================================ マップから探す(page-gallery-map.php) ============================================================ */ .gallery-map { width: 100%; max-width: 1280px; height: 700px; margin-inline: auto; background: var(--color-border); } .gallery-map--error::after { content: "地図を読み込めませんでした"; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-muted); } .gallery-map__note { max-width: 1280px; margin: 10px auto 0; font-size: 13px; color: var(--color-muted); } /* InfoWindow の中身 */ /* Google Maps は吹き出しの中身(.gm-style-iw-d)に overflow: scroll(縦横強制)を 指定するため、実機のスマホ等(クラシックスクロールバー環境)では中身が収まっていても 横バーと右・下のスクロールバー溝が出る。横は封じ、縦は必要時のみ(auto)に上書き。 マップ全種(マップで探す / GALLERY詳細 / ショールーム)の吹き出しに共通で効かせる。 */ .gm-style .gm-style-iw-d { overflow-x: hidden !important; overflow-y: auto !important; } /* 吹き出しの枠パディングを全辺5pxに統一(PC/SP共通)。 Google 既定は「左12px・右0・上下0」の非対称で、余白の見え方がばらつくため。 */ .gm-style .gm-style-iw-c { padding: 5px !important; } /* 吹き出しヘッダー行(✕ボタン)の圧縮。Google 既定はボタン48px(アイコン24+余白12)で、 ヘッダー行ごと48pxになり物件名の上が間延びする。ボタンはインラインスタイルのため !important で上書き(PC=30px、SPはさらに上下右を詰めて26px)。 */ .gm-style-iw-chr button { width: 30px !important; height: 30px !important; } .gm-style-iw-chr button > span { margin: 3px !important; } @media (max-width: 768px) { .gm-style-iw-chr button { width: 26px !important; height: 26px !important; } .gm-style-iw-chr button > span { margin: 1px !important; } } .gallery-map__iw { font-family: "Noto Sans JP", var(--font-base); line-height: 1.6; /* 枠(.gm-style-iw-c)の5pxと合わせて、コンテンツの左右下は計10px。 ✕ボタン(ヘッダー行)は枠の5pxのまま動かさない。PC/SP共通。 */ padding: 0 5px 5px; } .gallery-map__iw-link { display: block; color: inherit; text-decoration: none; } /* InfoWindow を開いた直後に Maps がリンクへフォーカスするため、 ブラウザ標準の青枠が出る。マウス時は消し、キーボード操作時のみ表示。 */ .gallery-map__iw-link:focus { outline: none; } .gallery-map__iw-link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } .gallery-map__iw-name { display: block; font-size: 15px; font-weight: 700; } .gallery-map__iw-address { display: block; font-size: 12px; color: #555; } .gallery-map__iw-photo { display: block; width: 200px; height: auto; margin: 8px 0; } .gallery-map__iw-office, .gallery-map__iw-materials { margin: 2px 0 0; font-size: 12px; } .gallery-map__iw-materials a { color: var(--color-brand); } @media (max-width: 768px) { .gallery-map { height: 480px; } } /* ============================================================ FIND 色でさがす(page-find-color.php / find-color.js) 施工写真 + 製品写真を色で横断フィルタ。GALLERY アーカイブの ヒーロー・見出し・Load More を流用しつつ、独自の色チップとグリッド。 ============================================================ */ /* 見出し(左)と FIND サブナビ(右)を横並びに。 */ .find-color__intro-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } /* タイトル(Figma node 3359:414): 「Find by Color」(グレーの圧縮ボールド・上)→「色でさがす」(大きい黒 + 青い丸アイコン)→ リード文。 */ .find-color__title { margin: 22px 0 0; } .find-color__title-en { margin: 0; font-family: var(--font-en-condensed); font-weight: 700; font-size: 28px; font-stretch: 75%; line-height: 1; letter-spacing: 0; color: #999; } .find-color__title-main { display: flex; align-items: center; gap: 22px; margin-top: 10px; } .find-color__title-ja { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 52px; line-height: 1.1; color: #000; } /* 丸アイコン(トップ FIND と共用の find-color.svg を流用)。 */ .find-color__title-icon { flex-shrink: 0; display: inline-flex; line-height: 0; } .find-color__title-icon img { width: auto; height: 44px; /* 高さ基準で比率維持(色=正方 / 形状=やや横長 にも対応) */ display: block; } /* リード文はタイトルの下にブロックで。 */ .find-color__lead { display: block; margin-top: 20px; font-family: "Noto Sans JP", var(--font-base); font-size: 17px; line-height: 1.85; color: var(--color-text); } /* FIND サブナビ(色 / 形状 / 写真 / 条件)。各項目に下罫線。 */ /* FIND サブナビ(Figma node 3451:427):右カラムに縦並び。 各項目 = 太字 22px + 下罫線。現在地(色でさがす)はグレーでリンクにしない。 余白: 項目テキスト→罫線 14px、罫線→次項目 16px(ピッチ ≒ 53px / Figma 準拠)。 */ .find-color__subnav { flex-shrink: 0; width: 199px; margin-top: 8px; } .find-color__subnav ul { list-style: none; margin: 0; padding: 0; } .find-color__subnav li { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 22px; line-height: 1; padding-bottom: 14px; border-bottom: 1px solid #333; } .find-color__subnav li + li { padding-top: 16px; } .find-color__subnav a, .find-color__subnav span { display: block; color: var(--color-text); text-decoration: none; transition: color var(--transition-base); } .find-color__subnav a:hover, .find-color__subnav a:focus-visible { color: var(--color-brand); } /* アクティブ(色でさがす)はグレー表示でリンクにしない。 */ .find-color__subnav li.is-active span { color: #b1b1b1; } /* 色チップ列 */ .find-color__filters { padding-top: 8px; } /* 色チップ(Figma node 3460:263):高さ32・角丸17・1px グレー枠のピル。 左にドット16(左12)→ 8px → ラベル15px。「すべて」は 2px 黒枠でアクティブ。 */ .find-color__chips { display: flex; flex-wrap: wrap; gap: 12px 10px; list-style: none; margin: 0; padding: 0; } .find-color__chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px 0 12px; border: 1px solid #bbb; border-radius: 17px; background: #fff; cursor: pointer; font-family: "Noto Sans JP", var(--font-base); font-size: 15px; color: var(--color-text); transition: border-color var(--transition-base), box-shadow var(--transition-base); } .find-color__chip:hover { border-color: #888; } /* 選択中:白黒反転(背景黒・文字白)で一目で分かるように。 ドットは色を見せるため反転対象外。太枠ぶん内側を詰めて高さを揃える。 */ .find-color__chip.is-active { border: 2px solid #000; background: #000; color: #fff; height: 32px; padding: 0 15px 0 11px; } .find-color__dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); /* 白・淡色ドットでも輪郭が見えるように */ } /* ブラック系のドットだけ外側に白線を足す。選択中(黒背景)でドットが背景に溶けて 消えるのを防ぐ。非選択時(白背景)は白線が溶けて無害。 */ .find-color__dot--dark { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 1px #fff; } /* 「すべて」のドットは Figma 準拠のダークグレー。 */ .find-color__dot--all { background: #555; } /* 形状でさがす:チップはドット無しのテキストのみ。左右対称パディングに。 */ .find-color__chips--text .find-color__chip { padding: 0 18px; } .find-color__chips--text .find-color__chip.is-active { padding: 0 17px; /* 2px 太枠ぶん詰める */ } /* ============================================================ FIND 条件でさがす(page-find-condition.php / find-condition.js) 2画面フロー: 検索フォーム → 検索結果(条件サマリ + 結果)。 ============================================================ */ /* --- 検索フォーム --- */ /* タイトル部とコンテンツ部を切り分けるため、他テンプレ同様グレー帯の上に置く。 白いフォームボックスがグレー背景に乗る形。 */ .find-cond__form { background: #dedede; padding: 56px 0 72px; } .find-cond__formbox { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 23px 32px 32px; } .find-cond__section { padding: 16px 0; border-bottom: 1px solid var(--color-border); } .find-cond__section:first-child { padding-top: 0; } .find-cond__heading { display: block; margin-bottom: 10px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 14px; color: var(--color-text); } .find-cond__keyword { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #bbb; border-radius: 6px; font-size: 14px; font-family: "Noto Sans JP", var(--font-base); box-sizing: border-box; } .find-cond__keyword:focus { outline: none; border-color: var(--color-brand); } .find-cond__radios { display: flex; flex-wrap: wrap; gap: 8px 16px; } .find-cond__radios label, .find-cond__check { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; } .find-cond__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; } .find-cond__check label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .find-cond__check input, .find-cond__radios input { width: 16px; height: 16px; accent-color: var(--color-brand); cursor: pointer; flex-shrink: 0; } .find-cond__dot { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); } /* 検索 / クリア:中央寄せで縦に並べる(検索ボタン → 下にクリア)。 */ .find-cond__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; } .find-cond__search { width: 100%; max-width: 360px; height: 54px; border: none; border-radius: 8px; background: var(--color-brand); color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; cursor: pointer; transition: background var(--transition-base); } .find-cond__search:hover { background: var(--color-brand-dark); } .find-cond__clear { border: none; background: none; padding: 8px 16px; font-size: 14px; color: var(--color-muted); text-decoration: underline; cursor: pointer; } /* --- 検索結果ビュー --- */ /* 条件サマリ + 「検索条件を変える」は、スクロール中もヘッダー下に固定。 */ .find-cond__summary { position: sticky; top: 107px; /* ヘッダー高さ */ z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; padding: 16px 0; background: #dedede; /* グレー帯に同化させつつ下の写真を隠す */ border-bottom: 1px solid #bbb; box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.25); } .find-cond__summary-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-text); } .find-cond__summary-label { display: inline-block; margin-right: 10px; padding: 2px 10px; background: #333; color: #fff; font-size: 12px; font-weight: 700; border-radius: 3px; } .find-cond__edit { flex-shrink: 0; height: 42px; padding: 0 22px; border: 1px solid #333; border-radius: 23px; background: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 14px; color: #333; cursor: pointer; transition: background var(--transition-base), color var(--transition-base); } .find-cond__edit:hover { background: #333; color: #fff; } .find-cond__grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .find-cond__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .find-cond__formbox { padding: 8px 18px 24px; } .find-cond__grid { grid-template-columns: repeat(2, 1fr); } .find-cond__actions { align-items: stretch; } .find-cond__search { max-width: none; } /* SP: クリアも押しやすいタップ領域に(上下 padding を確保) */ .find-cond__clear { padding: 14px 16px; } /* SP: ヘッダー直下にぴったり寄せる。ラベル → 改行 → 条件 → 改行 → ボタン(右寄せ)の縦並び。 */ .find-cond__summary { top: 56px; padding: 10px 0; flex-direction: column; align-items: stretch; gap: 10px; } .find-cond__summary [data-find-summary] { display: block; margin-top: 6px; } .find-cond__edit { align-self: flex-end; } } /* グリッド(白い正方カードに写真を内接。事例・製品が混在)。 チップ列(白地)とこのグレー帯(#dedede)の間に 40px の余白を空ける。 */ .find-color__grid-wrap { margin-top: 40px; padding-top: 36px; padding-bottom: 56px; } .find-color__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; list-style: none; margin: 0; padding: 0; } /* 案1:フチなし写真 + 下に名前を常時表示(ホバー・バッジなし)。 写真はカード全面に正方クロップ。名前はその下に小さく。 表示時はフェードイン(JS が .is-in を付与。初期表示・絞り込み後・Load More 共通)。 */ .find-color__card { background: transparent; opacity: 0; transform: translateY(10px); } .find-color__card.is-in { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; } @media (prefers-reduced-motion: reduce) { .find-color__card { opacity: 1; transform: none; } .find-color__card.is-in { transition: none; } } .find-color__card-link { display: block; color: inherit; text-decoration: none; } .find-color__card-media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; } .find-color__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } /* ホバーで少し拡大(枠内でズーム。半透明はやめた) */ .find-color__card-link:hover .find-color__card-media img, .find-color__card-link:focus-visible .find-color__card-media img { transform: scale(1.06); } /* 製品(agoragene 写真)は白背景に収める(クロップしない)。 色チップ・製品写真は白地に置く前提のため。事例写真は全面クロップのまま。 */ .find-color__card--product .find-color__card-media img { object-fit: contain; padding: 14px; } /* 名前は常時表示(写真の下)。長い名前は2行で省略。 */ .find-color__card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 9px; font-family: "Noto Sans JP", var(--font-base); font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--color-text); } /* サブタイトル(ブランド/製品名)。色・形状ページでは非表示、写真ページのみ表示。 */ .find-color__card-sub { display: none; } /* 製品カード: 型番(太字)→ 改行 → 製品名(細めグレー)。 */ .find-color__card-code { font-weight: 700; } .find-color__card-pname { font-weight: 400; font-size: 0.92em; color: var(--color-muted); } /* 型番+製品名で3行になるので、製品カードのみクランプを3行に。 */ .find-color__card--product .find-color__card-name { -webkit-line-clamp: 3; } /* ============================================================ FIND 写真でさがす(page-find-photo.php) 絞り込みなし。3カラムのマソンリーで写真を大きく・自然な縦横比で見せる。 カード = 写真 + 名前 + サブタイトル。レイアウト以外は色/形状と共用。 ============================================================ */ /* チップ列が無いため、見出し→グレー帯の余白は page-head-plain の80pxのみ (条件で探すの .find-cond__form と同じ取り合い)。共用の margin-top: 40px を打ち消す。 */ .find-photo .find-color__grid-wrap { margin-top: 0; } /* マソンリー(JS が最短カラムへ追加。カラム数は JS が画面幅で決定)。 CSS columns をやめ、flex の縦積みカラムにすることで Load More 時の 全体再配置(既見写真の再出現)を防ぐ。 */ .find-photo .find-color__grid { display: flex; align-items: flex-start; gap: 28px; } .find-photo__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; } .find-photo .find-color__card { width: 100%; } /* 写真は正方クロップをやめ、自然な縦横比のまま(大きく・リズムよく)。 width/height 属性で場所を先に確保するのでロード中もレイアウトが動かない(リフロー防止)。 */ .find-photo .find-color__card-media { aspect-ratio: auto; background: #ececec; /* ロード中のプレースホルダ */ } .find-photo .find-color__card-media img { height: auto; object-fit: fill; } /* 写真ページは「カード一括フェード」をやめ、画像が読み込めた1枚ずつフェードイン。 */ .find-photo .find-color__card { opacity: 1; transform: none; } .find-photo .find-color__card-media img { opacity: 0; transition: opacity 0.5s ease, transform 0.3s ease; } .find-photo .find-color__card-media img.is-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .find-photo .find-color__card-media img { opacity: 1; transition: none; } } /* キャプション: 名前(太字)+ サブタイトル(グレー)。 */ .find-photo .find-color__card-name { -webkit-line-clamp: 1; margin-top: 12px; font-size: 14px; } .find-photo .find-color__card-sub { display: block; margin-top: 2px; font-family: "Noto Sans JP", var(--font-base); font-size: 12px; color: var(--color-muted); } @media (max-width: 1024px) { /* カラム数は JS(masonryColCount)が決定。CSS は間隔だけ調整。 */ .find-photo .find-color__grid { gap: 20px; } .find-photo__col { gap: 24px; } } .find-color__loading, .find-color__empty { margin: 24px 0; font-size: 14px; color: var(--color-muted); } /* タブレット・モバイル段階 */ @media (max-width: 1024px) { .find-color__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .find-color__intro-row { flex-direction: column; gap: 24px; } /* タブレット・モバイルでは縦の罫線リストをやめ、横並びの簡易ナビに。 */ .find-color__subnav { width: 100%; margin-top: 0; } .find-color__subnav ul { display: flex; flex-wrap: wrap; gap: 10px 24px; } .find-color__subnav li { border-bottom: none; padding: 0; font-size: 16px; } .find-color__subnav li + li { padding-top: 0; } } @media (max-width: 768px) { .find-color__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .find-color__chips { gap: 8px; } .find-color__chip { font-size: 13px; height: 32px; } .find-color__title-en { font-size: 22px; } .find-color__title-ja { font-size: 36px; } .find-color__title-main { gap: 16px; } .find-color__title-icon img { width: auto; height: 32px; } .find-color__lead { font-size: 14px; line-height: 1.8; } /* SP では FIND サブナビ(色/形状/写真/条件)は非表示。導線はグローバルメニューに集約。 */ .find-color__subnav { display: none; } } /* ============================================================ NEWS アーカイブ(/news/, category, tag)+ 詳細(single.php) ============================================================ */ /* 一覧アイテムはトップの NEWS セクション(.news__item)と同一の意匠。 行全体がリンクで、導入文(抜粋)から詳細へ遷移する。 */ .news-archive__list { max-width: 1080px; margin-inline: auto; } .news-archive__empty { padding: 40px 0; text-align: center; color: var(--color-muted); } /* ページャ(WP標準 .pagination を簡易整形) */ .news-archive__pagination .nav-links { display: flex; justify-content: center; gap: 10px; margin-top: 48px; } .news-archive__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: #fff; color: #333; text-decoration: none; font-size: 14px; } .news-archive__pagination .page-numbers.current { background: #000; color: #fff; } .news-archive__pagination a.page-numbers:hover { background: var(--color-brand); color: #fff; } /* ---- 詳細 ---- */ .news-single__inner { max-width: 880px; /* 上下余白はグレー帯(.page-band)側が持つ */ } .news-single__meta { display: flex; align-items: center; gap: 14px; margin: 24px 0 10px; } .news-single__title { margin: 0 0 32px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 28px; line-height: 1.5; } .news-single__content { font-size: 16px; line-height: 1.9; } .news-single__content p { margin: 0 0 1.2em; } .news-single__content img { max-width: 100%; height: auto; } .news-single__content a { color: var(--color-brand); } .news-single__tags { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 8px 14px; } .news-single__tag { font-size: 13px; color: var(--color-muted); text-decoration: none; } .news-single__tag:hover { color: var(--color-brand); text-decoration: underline; } /* 戻るボタンの矢印(左向き) */ .product-detail__cta-arrow--back svg { transform: none; } /* NEWS 詳細の「NEWS一覧に戻る」: 黒ボタン(ホバーで赤)、グレー帯なし。 agoragene/outlet の赤CTAとはここだけ差し替え(クラス共用のためスコープ上書き)。 */ .news-single__back { background: none; padding: 56px 0 0; } .news-single__back .product-detail__cta-btn { background: #000; } .news-single__back .product-detail__cta-btn:hover, .news-single__back .product-detail__cta-btn:focus-visible { background: var(--color-brand); } @media (max-width: 640px) { .news-single__title { font-size: 22px; } .news-archive__list .news__link { padding: 18px 16px; } } /* ============================================================ AGORABRIX 製品ライン詳細ページ共通(line-*) page-tileworks.php / page-brickworks.php ほか5ライン共用。 ワイヤー段階の意匠。デザイン確定後に調整する前提。 ============================================================ */ /* ---- 2. INTRO: 見出し(product__description)下の本文 ---- */ .line-intro__text { margin: 28px 0 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 20px; line-height: 32px; color: #000; } /* SP: ブランドトップの補足説明(.agorabrix-top__sub-description)と同じサイズに揃える */ @media (max-width: 768px) { .line-intro__text { font-size: 15px; line-height: 1.7; margin-top: 24px; } } /* ---- METHOD: 二つの構法(Brick Works)。写真 + 構法名 + 対応構造ラベル + 本文の2カラムカード ---- */ .line-methods { padding: 72px 0 0; } .line-methods__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } .line-methods__item { margin: 0; } .line-methods__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #eee; } /* コラージュ表示(メイン写真+サブ写真1〜複数枚。写真の枚数が工法ごとに違う場合用)。 Brick Works METHOD(2026/07・乾式=1枚サブ/湿式=2枚サブ)で導入。 */ .line-methods__media--collage { display: flex; gap: 8px; aspect-ratio: 4 / 3; } .line-methods__media--collage .line-methods__media-main { flex: 0 0 62%; min-width: 0; } .line-methods__media--collage .line-methods__media-sub { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .line-methods__media--collage img { aspect-ratio: auto; width: 100%; height: 100%; } .line-methods__media--collage .line-methods__media-sub .line-lg-trigger { flex: 1; min-height: 0; } .line-methods__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 20px; line-height: 1.5; color: #000; } /* 構法名の横の対応構造ラベル(S造ファサード対応 / RC造中空積み工法) */ .line-methods__badge { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid #999; border-radius: 14px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--color-text); white-space: nowrap; } .line-methods__text { margin: 12px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 15px; line-height: 2; color: var(--color-text); } /* 工法カード末尾の注記(Technical Ceramic の全面打診調査など) */ .line-methods__note { margin: 10px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 12px; line-height: 1.8; color: var(--color-muted); } /* Technical Ceramic の3工法用: 3カラム変形 */ .line-methods__grid--three { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } /* 3カラム時はタイトルが長いためやや小さく */ .line-methods__grid--three .line-methods__title { font-size: 17px; } @media (max-width: 1024px) { .line-methods__grid--three { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .line-methods { padding-top: 48px; } .line-methods__grid { grid-template-columns: 1fr; gap: 40px; } } /* ---- 3. WORKS: 物件グラビア(全幅 + 2カラムの交互リズム) ---- */ .line-works { padding: 72px 0 0; } .line-works__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 32px; } .line-works__item { margin: 0; grid-column: span 1; } .line-works__item--full { grid-column: 1 / -1; } .line-works__media { overflow: hidden; background: #eee; } .line-works__media img { display: block; width: 100%; height: auto; } /* 全幅アイテムは横長にトリミングして帯感を出す */ .line-works__item--full .line-works__media img { aspect-ratio: 16 / 9; object-fit: cover; } .line-works__item:not(.line-works__item--full) .line-works__media img { aspect-ratio: 4 / 5; object-fit: cover; } /* 切り抜き位置の下端合わせ(床を見せたい写真用。テンプレの 'pos' => 'bottom' で付与) */ .line-works__item--pos-bottom .line-works__media img { object-position: bottom; } .line-works__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 12px; font-family: "Noto Sans JP", var(--font-base); } .line-works__name { font-size: 15px; font-weight: 500; color: #000; } .line-works__spec { font-size: 12px; color: var(--color-muted); } .line-works__link { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 13px; font-weight: 500; color: #000; text-decoration: none; } .line-works__link-label { transition: color var(--transition-base); } .line-works__link:hover .line-works__link-label, .line-works__link:focus-visible .line-works__link-label { color: var(--color-brand); } /* about-arrow.svg をマスクにして背景色で塗る(通常=黒 / ホバー=ブランド赤)。 SVG自体は白矢印(暗色ボタン用)のため、img直置きだと白背景で見えない。 */ .line-works__link-arrow { display: inline-block; width: 16px; height: 10px; flex-shrink: 0; background-color: #000; -webkit-mask: url('../images/about-arrow.svg') no-repeat center / contain; mask: url('../images/about-arrow.svg') no-repeat center / contain; transition: background-color var(--transition-base); } .line-works__link:hover .line-works__link-arrow, .line-works__link:focus-visible .line-works__link-arrow { background-color: var(--color-brand); } /* ---- 4. PROCESS: つくり分けの現場 ---- */ .line-process { padding: 96px 0 0; } .line-process__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } /* Timber Brick の TECH(試験写真4枚)用: 4カラム変形 */ .line-process__grid--four { grid-template-columns: repeat(4, 1fr); } .line-process__item { margin: 0; } .line-process__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #eee; } .line-process__caption { margin: 10px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 13px; color: var(--color-muted); } /* ---- 4a. PROCESS 帯表示(--band modifier): 均等3カラムのまま淡グレーの全幅帯に ---- */ .line-process--band { margin-top: 96px; padding: 72px 0 80px; background: #dedede; } @media (max-width: 768px) { .line-process--band { margin-top: 64px; padding: 48px 0 56px; } } /* ---- 4b. PROCESS モザイク表示(--mosaic modifier)。 外すと上の白背景・均等3カラムに戻る。 炭色の帯 + 大小混在の「乱貼り」グリッド(タイルの貼りパターンのメタファー)。 ---- */ .line-process--mosaic { margin-top: 96px; padding: 72px 0 80px; background: #211f1d; } .line-process--mosaic .section-heading { color: #fff; } /* 乱貼りグリッド: 窯を大きく据えて、工程カットを目地状の間隔で組む。 大1(a) + ワイド2(b,c) + 中3(d,e,f)の3コース構成(レンガの段積みのイメージ)。 */ .line-process--mosaic .line-process__grid { grid-template-columns: repeat(6, 1fr); grid-template-areas: "a a a b b b" "a a a c c c" "d d e e f f"; gap: 10px; /* 目地 */ } .line-process--mosaic .line-process__item--a { grid-area: a; } .line-process--mosaic .line-process__item--b { grid-area: b; } .line-process--mosaic .line-process__item--c { grid-area: c; } .line-process--mosaic .line-process__item--d { grid-area: d; } .line-process--mosaic .line-process__item--e { grid-area: e; } .line-process--mosaic .line-process__item--f { grid-area: f; } /* 写真はマスを埋め尽くす。キャプションは写真の上に重ねる */ .line-process--mosaic .line-process__item { position: relative; overflow: hidden; } .line-process--mosaic .line-process__media { height: 100%; } .line-process--mosaic .line-process__media img { height: 100%; aspect-ratio: auto; min-height: 220px; } /* 大マス(窯)はグリッド2行ぶんに伸びる */ .line-process--mosaic .line-process__item--a .line-process__media img { min-height: 450px; } .line-process--mosaic .line-process__caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 28px 14px 10px; color: #fff; font-size: 12px; letter-spacing: 0.04em; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); } @media (max-width: 768px) { .line-process--mosaic { margin-top: 64px; padding: 48px 0 56px; } /* SP: 窯を全幅で見せて、残りを2列の乱貼りに */ .line-process--mosaic .line-process__grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "a a" "b c" "d e" "f f"; gap: 8px; } .line-process--mosaic .line-process__media img, .line-process--mosaic .line-process__item--a .line-process__media img { min-height: 160px; } .line-process--mosaic .line-process__item--a .line-process__media img { min-height: 240px; } } /* ---- ライトボックス起動ボタン(PROCESS / TECH / METHOD / DRAWING の画像共通)。 GALLERY詳細の project__photo-trigger と同じ意匠(main.js の [data-lg-item] を再利用) ---- */ .line-lg-trigger { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .line-lg-trigger:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* ---- DRAWING: 標準施工図(Timber Brick)。図版プレート2枚 + 注記 ---- */ .line-drawings { padding: 96px 0 0; } .line-drawings__lead { margin: -8px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 15px; line-height: 2; color: var(--color-text); } .line-drawings__figure { margin: 40px auto 0; max-width: 1000px; } .line-drawings__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); background: #fff; } .line-drawings__caption { margin-top: 10px; font-family: "Noto Sans JP", var(--font-base); font-size: 15px; font-weight: 500; color: #000; } .line-drawings__note { max-width: 1000px; margin: 24px auto 0; font-family: "Noto Sans JP", var(--font-base); font-size: 12px; line-height: 1.8; color: var(--color-muted); } @media (max-width: 768px) { .line-drawings { padding-top: 64px; } } /* ---- 5. GALLERY: 施工事例 ---- */ .line-cases { /* 下は次の CTA(グレー帯)との境界余白 */ padding: 96px 0 112px; } /* ---- レスポンシブ ---- */ @media (max-width: 768px) { .line-works { padding-top: 48px; } .line-works__grid { grid-template-columns: 1fr; gap: 40px; } .line-works__item { grid-column: 1 / -1; } .line-works__item--full .line-works__media img { aspect-ratio: 4 / 3; } .line-process, .line-cases { padding-top: 64px; } .line-process__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } } /* ============================================================ お問い合わせフォーム(page-contact.php) _data/Otoiawase_Top.png + Figma 5878:525(テキストボックス) / 5878:522(ボタン)準拠。タイトルエリアの下から #DEDEDE の全幅帯、 枠なしの白入力ボックス、行区切りは白ヘアライン。 ============================================================ */ /* タイトルエリアの下から全幅のグレー帯(タイトルはGALLERY等の .gallery__intro を共用) */ .contact__band { background: #dedede; padding: 56px 0 96px; } .contact__panel { max-width: 840px; margin: 0 auto; } .contact__lead { /* Figma 5828:294: Noto Sans 20px / 黒 */ margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 20px; line-height: 1.6; color: #000; } /* ---- フォーム全体 ---- */ .contact-form { margin-top: 8px; } .contact-form__required-note { margin: 32px 0 8px; text-align: right; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; color: var(--color-text); } .contact-form__notice { margin: 24px 0 0; padding: 12px 16px; border: 1px solid var(--color-brand); font-family: "Noto Sans JP", var(--font-base); font-size: 16px; color: var(--color-brand); background: #fdf3f3; } /* honeypot は視覚・支援技術の双方から隠す */ .contact-form__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; } /* ---- 行(ラベル + 入力)。区切りは白のヘアライン(Figma 5878:525) ---- */ .contact-form__rows { border-top: 0; } /* テーブル全体の上下は線なし(行間の区切りのみ) */ .contact-form__row:last-child { border-bottom: 0; } .contact-form__row { display: grid; grid-template-columns: 215px 1fr; gap: 8px 25px; align-items: center; padding: 20px 0; border-bottom: 1px solid #000; } /* 複数行フィールド(添付・テキストエリア)はラベルを上端に */ .contact-form__row:has(textarea), .contact-form__row:has(input[type="file"]) { align-items: start; } .contact-form__label { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 18px; line-height: 1.6; color: #000; text-align: right; } /* 必須アスタリスク: is-required の行だけ見せる(条件必須の切替に追従) */ .contact-form__asterisk { display: none; margin-left: 1px; } .contact-form__row.is-required .contact-form__asterisk { display: inline; } /* 入力ボックス: 枠なしの白(高さ40px) */ .contact-form__field input[type="text"], .contact-form__field input[type="email"], .contact-form__field input[type="tel"], .contact-form__field select, .contact-form__field textarea { width: 100%; height: 40px; padding: 8px 14px; border: 0; border-radius: 0; background: #fff; font-family: "Noto Sans JP", var(--font-base); font-size: 15px; line-height: 1.6; color: var(--color-text); -webkit-appearance: none; appearance: none; } .contact-form__field select { /* ネイティブ矢印を消したぶん、▼ を右端に描く */ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; } .contact-form__field textarea { height: 184px; resize: vertical; } .contact-form__field ::placeholder { color: #999; } .contact-form__field input:focus, .contact-form__field select:focus, .contact-form__field textarea:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; } .contact-form__input--short { max-width: 200px !important; } .contact-form__field input[type="file"] { font-family: "Noto Sans JP", var(--font-base); font-size: 14px; padding: 8px 0; } .contact-form__hint { margin: 6px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.7; color: #777; } .contact-form__hint--file { color: var(--color-text); font-weight: 500; } .contact-form__error { margin: 6px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; font-weight: 500; color: var(--color-brand); } /* ---- reCAPTCHA(確認画面、送信ボタンの直前) ---- */ .contact-form__recaptcha { margin: 24px 0 0; display: flex; flex-direction: column; align-items: center; } /* ---- ボタン(Figma 5878:522: #333 / 角丸30 / 左に→) ---- */ .contact-form__actions { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 48px; } .contact-form__submit { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 28px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--transition-base); } .contact-form__submit:hover, .contact-form__submit:focus-visible { background: var(--color-brand); } .contact-form__submit-arrow { display: inline-flex; width: 22px; height: 13px; flex-shrink: 0; } .contact-form__submit-arrow img { width: 100%; height: 100%; object-fit: contain; } /* 「入力画面に戻る」: 白地のセカンダリ */ .contact-form__btn--back { display: inline-flex; align-items: center; height: 50px; padding: 0 28px; background: #fff; border: 1px solid #ccc; border-radius: 30px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 15px; color: var(--color-text); cursor: pointer; transition: border-color var(--transition-base), color var(--transition-base); } .contact-form__btn--back:hover, .contact-form__btn--back:focus-visible { border-color: #000; color: #000; } /* ---- 確認画面 ---- */ .contact-confirm { margin: 32px 0 0; border-top: 0; } .contact-confirm__row:last-child { border-bottom: 0; } .contact-confirm__row { display: grid; grid-template-columns: 215px 1fr; gap: 8px 25px; padding: 18px 0; border-bottom: 1px solid #000; } .contact-confirm__row dt { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 18px; color: #000; text-align: right; } .contact-confirm__row dd { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 18px; line-height: 1.8; color: var(--color-text); overflow-wrap: anywhere; } /* ---- 送信完了 ---- */ .contact-done { padding: 24px 0 8px; text-align: center; } .contact-done__heading { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 500; font-size: 24px; color: #000; } .contact-done__text { margin: 20px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 18px; line-height: 2; color: var(--color-text); } /* ---- レスポンシブ ---- */ @media (max-width: 768px) { .contact__band { padding: 40px 0 64px; } /* リード文をSPで縮小(ストーリー/トップABOUTの15pxに合わせる。デスクトップは20px) */ .contact__lead { font-size: 15px; line-height: 1.9; } .contact-form__row, .contact-confirm__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } .contact-form__label, .contact-confirm__row dt { text-align: left; } .contact-form__actions { flex-direction: column-reverse; } } /* contact のタイトルエリア余白: ロゴ下→パンくず = 75px / 見出し下→グレー帯 = 80px */ .contact__head { padding: 75px 0 80px; } /* ============================================================ ヒーロー画像なしページ共通 + 会社概要 / ショールーム / プライバシーポリシー タイトルは gallery__intro / gallery__heading を共用(contactと同じ基本形)。 ============================================================ */ /* タイトルエリア余白: ロゴ下→パンくず = 75px / 見出し下→本文 = 80px */ .page-head-plain { padding: 75px 0 80px; } /* コンテンツ部分の #DEDEDE 帯(お問い合わせフォームと同じ扱い) */ .page-band { background: #dedede; padding: 56px 0 96px; } /* ---- 会社概要(page-company.php) ---- */ .company__panel { max-width: 860px; margin: 0 auto; } .company-table { margin: 0; } .company-table__row { display: grid; grid-template-columns: 200px 1fr; gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid #000; } .company-table__row:last-child { border-bottom: 0; } .company-table__row > dt { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 16px; line-height: 1.8; color: #000; } .company-table__row > dd { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 1.9; color: var(--color-text); } /* 事業所 / 関連施設の入れ子リスト */ .company-table__sub { margin: 0; display: flex; flex-direction: column; gap: 18px; } .company-table__sub-row { display: grid; grid-template-columns: 200px 1fr; gap: 4px 24px; } .company-table__sub-row dt { font-weight: 500; color: #000; } .company-table__sub-row dd { margin: 0; } .company-table__sub-row dd a { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .company-table__sub-row dd a:hover { color: var(--color-brand); } /* ---- ショールーム(page-showroom.php) ---- */ .showroom-page__room { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; align-items: start; max-width: 1080px; margin: 0 auto; } .showroom-page__room + .showroom-page__room { margin-top: 80px; padding-top: 80px; border-top: 1px solid #000; } /* 写真なしの拠点(大阪)は情報のみ1カラム */ .showroom-page__room:not(:has(.showroom-page__photo)) { grid-template-columns: 1fr; max-width: 1080px; } .showroom-page__photo img { display: block; width: 100%; height: auto; background: #eee; } .showroom-page__name { margin: 0 0 20px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 22px; line-height: 1.5; color: #000; } .showroom-page__detail { margin: 0; border-top: 1px solid #000; } .showroom-page__detail-row { display: grid; grid-template-columns: 96px 1fr; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid #000; } .showroom-page__detail-row dt { font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 15px; line-height: 1.8; color: #000; } .showroom-page__detail-row dd { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 15px; line-height: 1.8; color: var(--color-text); } .showroom-page__access { margin: 0; } .showroom-page__access + .showroom-page__access { margin-top: 10px; } .showroom-page__access-line { font-weight: 500; color: #000; } /* コンテンツ冒頭のリード文(contact__lead と同じ扱い) */ .showroom-page__lead { max-width: 1080px; margin: 0 auto 56px; font-family: "Noto Sans JP", var(--font-base); font-weight: 400; font-size: 20px; line-height: 1.8; color: #000; } /* 各拠点の Google Map(showroom-map.js の [data-agora-map] を再利用) */ .showroom-page__map { grid-column: 1 / -1; height: 400px; margin-top: 8px; background: #ccc; } /* ---- TECHNICAL(page-technical.php・公開準備中の暫定ページ) ---- */ /* コンテンツが短く .site-main の min-height:60vh に満たないため、 グレー帯(.technical-page__body)側を伸ばして白い余白が出ないようにする。 */ .technical-page { display: flex; flex-direction: column; min-height: 60vh; } .technical-page__body { flex: 1; display: flex; align-items: center; } .technical-page__body .gallery__inner { width: 100%; } .technical-page__panel { max-width: 860px; margin: 0 auto; text-align: center; } .technical-page__lead { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 2; color: var(--color-text); } .technical-page__lead + .technical-page__lead { margin-top: 16px; } .technical-page__link { color: var(--color-text); text-decoration: underline; } .technical-page__link:hover { color: var(--color-brand); } /* ---- プライバシーポリシー(page-privacy.php) ---- */ .privacy__panel { max-width: 860px; margin: 0 auto; } .privacy__lead { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 2; color: var(--color-text); } .privacy__section { margin-top: 40px; } .privacy__heading { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #000; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 18px; line-height: 1.6; color: #000; } .privacy__section p { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 2; color: var(--color-text); } .privacy__list { margin: 8px 0 0; padding: 0; list-style: none; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 2; color: var(--color-text); } .privacy__list li::before { content: "・"; } .privacy__link { color: var(--color-brand); text-decoration: underline; } .privacy__link:hover, .privacy__link:focus-visible { text-decoration: none; } /* ---- レスポンシブ ---- */ @media (max-width: 768px) { .page-head-plain, .contact__head { padding: 40px 0 28px; } .page-band { padding: 40px 0 64px; } /* リード文をSPで縮小(お問い合わせの .contact__lead と同じ扱い。デスクトップは20px)。 下余白も 56→32px に詰める(写真の上の間延び対策)。 */ .showroom-page__lead { margin-bottom: 32px; font-size: 15px; line-height: 1.9; } .company-table__row, .company-table__sub-row, .showroom-page__room, .showroom-page__detail-row { grid-template-columns: 1fr; gap: 6px; } /* 写真と拠点名の間は 6px だと詰まりすぎるので、部屋グリッドだけ行間を広げる */ .showroom-page__room { gap: 24px; } .showroom-page__room + .showroom-page__room { margin-top: 56px; padding-top: 56px; } } /* ============================================================ 国代ブランド・ストーリー(Aboutの三つの柱 / template-parts/story/page.php) Figma ABOUT_01_a(6432:244) / ABOUT_02(6120:284) 準拠。 A1明朝はテーマ既定の代替 Shippori Mincho、数字は EB Garamond。 ============================================================ */ /* ページ背景: サイト基調(白)と違い、柱ページはFigmaどおり #F5F5F5。 下端の余白はページャの margin だと背景の外に相殺されて白が出るため、こちらの padding で確保。 */ .story { background: #f5f5f5; padding-bottom: 110px; } /* ---- 1. ヒーロー ---- */ .story__hero { position: relative; height: 760px; background: #ddd; /* 画像上端をヘッダーのAGORAロゴに被せる(GALLERY 一覧・詳細と同じ規律) */ margin-top: calc(var(--hero-header-overlap) * -1); } .story__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .story__hero-overlay { position: relative; height: 100%; } /* ヒーロー上のパンくず(白文字・通常ウェイト) */ .breadcrumbs--story { position: absolute; top: 60px; left: var(--section-padding-inline, 0); margin: 0; font-weight: 400; } .breadcrumbs--story, .breadcrumbs--story a, .breadcrumbs--story span { color: #fff; } .story__hero-titles { position: absolute; /* リード文・パンくずと同じ左端に揃える(2026/07 指示。旧: left 0 = 余白の外) */ left: var(--section-padding-inline, 0); bottom: 44px; } /* 柱2/3: タイトルを右寄せ(Figma 6222:381: 右端=1440-1372=68px、下端=880-623=257px)。 右は余白変数基準(80-12px)、下はヒーロー高さ760px比の%でSPも比例させる。 縦位置はデータ側 title_bottom(--title-bottom。柱3=47.2%)で上書き可。 */ .story__hero-titles--right { left: auto; right: calc(var(--section-padding-inline) - 12px); bottom: var(--title-bottom, 33.8%); /* 既定 = 257px / 760px */ } /* 幅が狭いとパンくず(左)と高い位置のタイトル(柱3)が横並びで被るため、 被る手前(~1080pxで衝突)でタイトルを既定の高さまで下げる。 */ @media (max-width: 1100px) { .story__hero-titles--right { bottom: 33.8%; } } .story__hero-label { /* Figma 6432:253/254 の合成SVG(枠ピル + A1明朝テキスト) */ display: block; width: 533px; height: 60px; margin: 0 0 17px 9px; filter: drop-shadow(4px 4px 7px rgba(0, 0, 0, 0.3)); } .story__hero-title { position: relative; width: 561px; } .story__hero-title > img { display: block; width: 100%; height: auto; filter: drop-shadow(4px 4px 7px rgba(0, 0, 0, 0.3)); } /* 45度のスラッシュ(横線を回転) */ .story__slash { position: absolute; left: 50%; top: 50%; width: 140px; height: 0; border-top: 1px solid currentColor; transform: translate(-50%, -50%) rotate(-45deg); } .story__credit { margin: 8px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 12px; color: var(--color-muted); } /* ---- 2. リード + 柱間ナビ ---- */ .story__intro { margin-top: 68px; } .story__intro-grid { display: grid; /* 右の柱ナビは 420px を基本に 300px まで縮む(中間幅で見切れないように)。 リードは残り幅(最大 780px は .story__lead 側で制限)。 */ grid-template-columns: 1fr minmax(300px, 420px); justify-content: space-between; gap: 32px; align-items: start; } .story__lead { max-width: 780px; } .story__lead p { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 20px; line-height: 36px; color: #000; } /* 目次を幅そのままで右へスライドし、右端を下の右寄せ写真の右端に揃える(2026/07 指示)。 1カラム化する幅では通常のコンテンツ幅に戻す。 */ @media (min-width: 1025px) { .story__nav { margin-left: var(--section-padding-inline); margin-right: calc(var(--section-padding-inline) * -1); } } .story__nav-list { list-style: none; margin: 0; padding: 0; } .story__nav-item { border-bottom: 1px solid #000; } .story__nav-item a, .story__nav-item span { display: block; padding: 9px 0; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 22px; line-height: 1.5; color: #000; text-decoration: none; } .story__nav-item a:hover, .story__nav-item a:focus-visible { color: var(--color-brand); } /* 現在地はグレーで非リンク */ .story__nav-item.is-current span { color: #bbb; } /* ---- 3. 柱見出し ---- */ .story__heading { display: flex; align-items: flex-start; gap: 24px; margin: 140px 0 0; padding-left: 130px; } .story__heading-no { position: relative; width: 184px; height: 184px; flex-shrink: 0; color: #000; } .story__slash--lg { width: 260px; } .story__heading-num { position: absolute; left: 22px; top: 26px; font-family: "EB Garamond", "Adobe Garamond Pro", Georgia, serif; font-size: 120px; line-height: 1; } .story__heading-text { font-family: "Shippori Mincho", serif; font-weight: 600; font-size: 62px; line-height: 85px; letter-spacing: -0.04em; color: #000; padding-top: 12px; } /* Figma 書き出しの合成SVG版(heading-no{n}.svg があるとき)。 SVGの実寸(柱ごとに幅が違う)で表示し、狭い画面では縮小のみ。 */ .story__heading--svg img { display: block; width: auto; max-width: 100%; height: auto; } /* リードが無い柱(柱2): 見出しが目次の左=リードの席に入る(Figma ABOUT_01_b)。 Figma: 斜線左端 x126 - コンテナ左 80 = 46px インデント。 ※ .story__heading 本体より後に書く(同詳細度のため margin/padding を上書きする) */ .story__heading--in-intro { margin: 0; padding-left: 46px; } /* ---- 4. セクション ---- */ .story__section { margin-top: 90px; } .story__text { margin-left: var(--story-indent, 276px); max-width: 780px; } /* 写真先行(photo_first)のセクション: 写真の下に続くテキストとの間隔。 セクション間隔(.story__section の margin-top: 90px)と揃える(2026/07 指示) */ .story__figure + .gallery__inner { padding-top: 90px; } /* 本文右に図版(柱2の産地マップなど)を置く場合 */ .story__text--with-extra { display: grid; grid-template-columns: 1fr 300px; gap: 40px; max-width: 1120px; align-items: start; } .story__text--with-extra .story__text-body { max-width: 780px; } .story__extra img { display: block; width: 100%; height: auto; } .story__subheading { margin: 0 0 21px; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 26px; line-height: 1.4; color: #000; } .story__para { margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 18px; line-height: 28px; color: #000; } .story__para + .story__para { margin-top: 28px; } .story__note { margin: 24px 0 0; font-family: "Noto Sans JP", var(--font-base); font-size: 14px; line-height: 1.9; color: var(--color-muted); } /* ---- 写真(880×587、左右交互のブリード)+ 明朝の黒帯キャッチ ---- */ .story__figure { position: relative; width: 880px; max-width: 90%; height: 587px; margin-top: 56px; margin-bottom: 0; /* figure のUA既定margin(1em)を殺す。--flush の密着に必須 */ z-index: 1; /* 重なり時の基準レイヤー(--under はこの下に潜る) */ } /* 重なったとき前の写真の下に潜る変種(柱3: 1枚目が上のペア。データ側の under)。 既定は後のDOM=上(柱2の photo4 が photo3 に乗るパターン)。 */ .story__figure--under { z-index: 0; } .story__figure--left { margin-right: auto; margin-left: max(0px, calc(50% - 720px)); } .story__figure--right { margin-left: auto; margin-right: max(0px, calc(50% - 720px)); } /* 小さめ写真(柱2の工房カットなど。キャッチなし想定) */ .story__figure--small { width: 689px; height: 460px; } .story__figure > img { display: block; width: 100%; height: 100%; object-fit: cover; } .story__catch { position: absolute; top: var(--catch-top, 246px); /* データ側の catch_top で写真上端からの位置を指定可 */ margin: 0; white-space: nowrap; } /* 写真が左 → キャッチは右へはみ出す(階段: 2行目が右に)。 --catch-shift(正=写真の外側へ)と --catch-in-step(段差の深さ、既定40px)で調整可。 */ .story__catch--r { left: calc(100% - 14px + var(--catch-shift, 0px)); text-align: left; } .story__catch--r .story__catch-line--1 { margin-left: var(--catch-in-step, 40px); } /* 写真が右 → キャッチは左へはみ出す(階段: 2行目が左に)。 --catch-shift(正の値)でキャッチ全体を写真の外側へずらせる(データ側の catch_offset)。 */ .story__catch--l { right: calc(100% - 32px + var(--catch-shift, 0px)); text-align: right; } .story__catch--l .story__catch-line--1 { margin-right: 140px; } .story__catch-line { display: table; padding: 0 14px; background: #000; font-family: "Shippori Mincho", serif; font-size: 30px; line-height: 48px; color: #fff; } .story__catch--l .story__catch-line { margin-left: auto; } /* 段差を写真側へ深く入れる変種(柱2 photo1/photo3)。深さは --catch-in-step(既定90px、 データ側の catch_step_size)。中間幅以下は通常の段差に戻す。 */ @media (min-width: 1025px) { .story__catch--l.story__catch--in .story__catch-line--1 { margin-right: calc(var(--catch-in-step, 90px) * -1); } } .story__text--with-extra .story__extra { position: relative; /* 潜り込む写真(z-index:1)より上のレイヤーに */ z-index: 2; margin-top: -30px; /* 地図を30px上げる(2026/07 指示)。行が縮む分、後続の写真も30px上がる */ } /* 前の写真に上下余白ゼロで密着するセクション(柱2 photo2/4。全幅で維持) */ .story__section.story__section--flush { margin-top: 0; } .story__section--flush > .story__figure { margin-top: 0; } /* 写真の横(反対側の余白)に出す説明テキスト(柱3の採石場。Figma 6500:789) */ .story__photo-note { position: absolute; left: calc(100% + 36px); top: 125px; width: 465px; margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 16px; line-height: 2; color: #000; } /* 写真下の小さなクレジット(柱3。位置は --credit-left で指定可) */ .story__figure-credit { position: absolute; top: calc(100% + 8px); left: var(--credit-left, 0px); margin: 0; font-family: "Noto Sans JP", var(--font-base); font-size: 12px; line-height: 1.6; color: var(--color-muted); white-space: nowrap; } /* 写真を直前の要素へ潜り込ませる(柱2: 地図の下へ118px / photo3 の上へ124px)。 重なり量は --pull-up(データ側の pull_up。既定118px)。--flush との併用があるため flush ルールより後に置き、2クラスで勝たせる。SP(768px以下)は media 側で解除。 */ .story__figure.story__figure--pull-up { margin-top: calc(var(--pull-up, 118px) * -1); } /* ---- 5. ページャ ---- */ .story__pager { display: flex; justify-content: center; gap: 16px; margin: 96px 0 0; /* 下余白は .story の padding-bottom 側(背景の内側に収めるため) */ } .story__pager-btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 28px; background: #333; border: 1px solid rgba(229, 229, 229, 0.25); border-radius: 30px; color: #fff; font-family: "Noto Sans JP", var(--font-base); font-weight: 700; font-size: 17px; line-height: 1; text-decoration: none; transition: background var(--transition-base); } .story__pager-btn:hover, .story__pager-btn:focus-visible { background: var(--color-brand); } /* 行き先未実装(柱3)の間の非リンク状態 */ .story__pager-btn--disabled { opacity: 0.35; pointer-events: none; } .story__pager-arrow { display: inline-flex; width: 22px; height: 13px; flex-shrink: 0; } .story__pager-arrow img { width: 100%; height: 100%; object-fit: contain; } .story__pager-arrow--prev { transform: scaleX(-1); } /* ---- レスポンシブ ---- */ /* 中間幅: 写真横の黒帯キャッチのはみ出し分が収まらなくなるので、 文字を一段落として写真側を縮め、キャッチの居場所(約380px)を確保する。 */ @media (max-width: 1366px) { .story__figure { max-width: calc(100% - 380px); height: auto; aspect-ratio: 880 / 587; } .story__figure--small { max-width: 90%; aspect-ratio: 689 / 460; } .story__catch { top: 38%; } .story__catch-line { font-size: 24px; line-height: 40px; } .story__catch--l .story__catch-line--1 { margin-right: 60px; } /* 写真横の説明: 横に465pxの居場所が無くなるので写真の下へ(2026/07 指示)。 左端はコンテンツ余白(--section-padding-inline)に揃える。 */ .story__photo-note { position: static; width: auto; margin: 12px 0 0 var(--section-padding-inline, 32px); } } @media (max-width: 1024px) { .story__intro-grid { grid-template-columns: 1fr; justify-content: start; } /* リード無しの柱(2/3): 1カラム時は目次を上、コンテンツタイトルを下に。 見出し上の余白は柱1(140px)に合わせる(グリッドの行間32pxとの合算)。 */ .story__heading--in-intro { order: 2; margin-top: 108px; /* 32px(grid gap) + 108px = 140px */ } .story__heading { padding-left: 0; } .story__text { margin-left: 0 !important; } /* キャッチを写真下端にまたがせる(1行目の半分が写真に被り、残りは下へはみ出す)。 全部を写真に載せると動きが弱くなるため。横のはみ出しは無くなるので写真幅は戻す。 */ .story__figure { max-width: 90%; } .story__catch { top: calc(100% - 18px); /* 18px = 1行(line-height 36px)の半分 */ bottom: auto; } /* 次のセクションの写真が密着/乗り上げてくる(かつ上のレイヤー=柱2)場合、 写真下端をまたいだキャッチが下の写真に隠れるため、写真の中に収める。 下の写真が --under(柱3)なら上のレイヤーはこちらなので、またぎを維持。 */ .story__section:has(+ .story__section--flush .story__figure:not(.story__figure--under)) .story__catch { top: auto; bottom: 20px; } /* キャッチが写真下端をまたぐ幅では、はみ出した黒帯(約54px)が後続の見出しに 近づきすぎるため、キャッチ付き写真の直後のテキストだけ余白を広げる(柱2の還元焼成)。 */ .story__figure:has(.story__catch) + .gallery__inner { padding-top: 120px; } /* テキスト先行セクション(柱1)版: キャッチ付き写真がセクション末尾のとき、 次のセクション見出し上の余白を同様に確保(90px+はみ出し分)。密着(flush)は除外。 ※ :has() の入れ子は無効なので、相対セレクタ1段で書く。 */ .story__section:has(> .story__figure:last-child .story__catch) + .story__section:not(.story__section--flush) { margin-top: 150px; } /* 写真同士の乗り上げ(flush+pull_up)はこの幅では解除(キャッチと衝突するため密着まで)。 flush でない pull_up(柱2の地図潜り込み)は維持。 */ .story__section--flush > .story__figure.story__figure--pull-up { margin-top: 0; } .story__catch--r { left: 12px; } .story__catch--l { right: 12px; } .story__catch--l .story__catch-line--1 { margin-right: 40px; } .story__catch-line { font-size: 20px; line-height: 36px; } } @media (max-width: 768px) { .story__hero { height: 480px; } .story__hero-label { width: min(340px, 78vw); height: auto; margin: 0 0 10px 4px; } .story__hero-title { width: min(360px, 82vw); } .story__intro { margin-top: 40px; } .story__lead p { font-size: 15px; line-height: 1.9; } .story__nav-item a, .story__nav-item span { font-size: 16px; } .story__heading { margin-top: 72px; gap: 8px; } .story__heading--in-intro { margin-top: 40px; /* 32px(grid gap) + 40px = 柱1と同じ72px */ } .story__heading-no { width: 96px; height: 96px; } .story__slash--lg { width: 130px; } .story__heading-num { left: 8px; top: 12px; font-size: 64px; } .story__heading-text { font-size: 30px; line-height: 1.5; padding-top: 16px; } .story__section { margin-top: 56px; } /* またぎキャッチの次のセクションはSPでも余白を確保(56px+はみ出し分) */ .story__section:has(> .story__figure:last-child .story__catch) + .story__section:not(.story__section--flush) { margin-top: 104px; } .story__subheading { font-size: 20px; } .story__para { font-size: 15px; line-height: 1.9; } .story__text--with-extra { grid-template-columns: 1fr; } .story__extra { max-width: 220px; /* ある程度小さく */ margin-left: auto; /* 右寄せ(写真1が下に潜り込む) */ } .story__figure { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 32px; } /* SPの地図潜り込み: 地図(右寄せ・縮小)に写真上端を60px被せる(2026/07 指示)。 写真同士(flush+pull_up)は1024px以下の flush ルールが勝って密着のまま。 */ .story__figure.story__figure--pull-up { margin-top: -60px; } /* 写真横の説明(1366px以下で写真の下に落ちている)をSPサイズの文字に */ .story__photo-note { font-size: 14px; line-height: 1.9; } .story__catch { top: calc(100% - 16px); /* 16px = 1行(line-height 32px)の半分 */ bottom: auto; } .story__catch--r { left: 12px; } .story__catch--l { right: 12px; } .story__catch--l .story__catch-line--1 { margin-right: 40px; } .story__catch-line { font-size: 18px; line-height: 32px; padding: 0 10px; } .story__pager { flex-direction: column; align-items: center; margin: 64px 0 0; } .story { padding-bottom: 72px; } }