/* ========================================================= HITSUJI GROUP 共通ベース（全ページ） design_handoff_hitsuji_group_top のデザイントークンに準拠 英字: EB Garamond ／ 和文: Shippori Mincho ／ 角丸なし ここに入れるもの: デザイントークン / 共通パーツ / 固定ヘッダー / フッター セクション固有のスタイルは front.css（トップ）・pages.css（下層）へ ========================================================= */ .hgt { --paper: #f2ece2; /* 明セクション背景 */ --paper-2: #eae1d3; /* 明セクションの第2トーン（明→明が連続する箇所に使う） */ --paper-ph: #e4dccf; /* 画像プレースホルダ地（明） */ --ink: #1a1211; /* 暗セクション背景・見出し文字 */ --ink-2: #120e0d; /* stores / recruit 背景 */ --ink-hero: #100b0b; /* hero 背景 */ --card-dark: #1a1413; /* 店舗カード背景 */ --footer-bg: #0d0a09; --hover-dark: #241617; /* principles hover */ --wine: #6e2327; /* お客様の声 背景 */ --red: #9e2b28; /* アクセント赤・塗り */ --brick: #c0564a; /* 暗地の小ラベル・漢字・星 */ --rose: #e7b5ac; /* 赤地上のアクセント */ --cream: #f4eee4; --cream2: #f2ece2; --body-gray: #7a6560; --line-light: rgba(26, 18, 16, .16); --font-en: "EB Garamond", "Times New Roman", serif; --font-ja: "Shippori Mincho", serif; /* 余白トークン：全セクションで統一 */ --sec-pad: clamp(96px, 9vw, 124px); /* セクション縦パディング */ --sechead-mb: 60px; /* セクション見出し下の余白 */ --body-lh: 2.2; /* 本文の行間 */ --para-gap: 2em; /* 段落間 */ --header-h: 88px; /* 固定ヘッダーの実効高さ（下層ページの逃げに使う） */ font-family: var(--font-ja); color: var(--ink-2); background: var(--paper); line-height: 1.8; } .hgt * { box-sizing: border-box; } /* :where() で詳細度0にし、各リンクのクラス指定（ボタン白など）が必ず勝つようにする */ .hgt :where(a) { color: inherit; text-decoration: none; } /* :where() で詳細度0にし、各クラスの余白指定が必ず勝つようにする */ .hgt :where(h1, h2, h3, p, dl) { margin: 0; } .hgt ::selection { background: var(--red); color: var(--cream2); } /* ヘッダー／フッターのシェルは背景を持たせない（各要素側で塗る） */ .hgt-shell { background: none; } /* ---- SWELL標準クロームの無効化（全ページ）＋全幅化 ---- ヘッダー・フッター・パンくずは自前のものに置き換えているため、親テーマ側は常に隠す。 コンテンツ幅のリセットは自作テンプレート（.hg-custom-page）に限定し、 通常のブログ記事などは SWELL のレイアウトをそのまま活かす。 */ body { overflow-x: clip; } .l-header, /* SWELLの「スクロール追従ヘッダー」。.l-header とは別要素で、下にスクロールすると 現れる。これを隠さないと自前の固定ヘッダーと二重に重なり、サイト名とSWELL側の グローバルナビが透けて見える。 */ .l-fixHeader, #fix_header, /* SWELLのスマホ用スライドメニュー（自前のモバイルナビがあるので不要） */ .p-spMenu, #sp_menu, #fix_bottom_menu, /* SWELLのパンくず。自前のもの（.hgt-crumbs）に置き換えているので隠す。 バージョンによってクラスが違うため、既知の呼び名をまとめて指定する。 隠し漏れると、明るい帯が半透明ヘッダーの背後に透けて色ムラに見える。 */ .c-breadcrumb, .p-breadcrumb, #breadcrumb, .l-topTitleArea, .l-footer, .p-fixBtnWrap { display: none !important; } .hg-custom-page #content, .hg-custom-page .l-content { max-width: none !important; padding: 0 !important; margin: 0 !important; } .hg-custom-page .hgt { width: 100vw; margin-inline: calc(50% - 50vw); } /* 自作テンプレートは全幅レイアウトなのでサイドバーは出さない。 通常のブログ記事・検索結果では SWELL の設定どおり表示される。 ※ SWELL は body_class() の出力を ではなく #body_wrap に付けるため、 　 .hg-custom-page は body ではなくラッパー側に付く（子孫セレクタとして機能する）。 */ .hg-custom-page .l-sidebar { display: none !important; } /* 自作テンプレート以外（ブログ記事・検索結果・404 等）は固定ヘッダー分を空ける。 自作テンプレートは各ページのヒーローが自前で上余白を持つため不要。 出す・出さないの判定は PHP 側（template-parts/site-header.php）で行うので、 ここでは出力されたときの見た目だけを定義する。 */ .hgt-header-spacer { height: calc(var(--header-h) + 24px); background: var(--ink-2); } html { scroll-behavior: smooth; } /* アンカー着地時に固定ヘッダーで見出しが隠れないようにする */ [id] { scroll-margin-top: 92px; } /* ---- 共通 ---- */ .hgt-wrap { max-width: 1180px; margin-inline: auto; } .hgt-wrap--narrow { max-width: 1000px; } .hgt-label { font-family: var(--font-en); font-size: 13px; letter-spacing: .34em; color: var(--red); margin-bottom: 14px; } .hgt-label--brick { color: var(--brick); } .hgt-label--rose { color: var(--rose); } .hgt-sechead { text-align: center; margin-bottom: var(--sechead-mb); } .hgt-sechead h2 { font-family: var(--font-ja); font-weight: 700; font-size: clamp(28px, 3.8vw, 46px); letter-spacing: .14em; color: var(--ink); text-wrap: balance; /* 一文字だけの改行を防ぐ */ } .hgt-sechead--dark h2 { color: inherit; } .hgt-textlink { font-family: var(--font-en); font-size: 13px; letter-spacing: .18em; color: var(--red); border-bottom: 1px solid var(--red); padding-bottom: 4px; transition: opacity .3s; } .hgt-textlink:hover { opacity: .65; color: var(--red); } .hgt-textlink--ja { font-family: var(--font-ja); font-size: 12.5px; letter-spacing: .14em; padding-bottom: 3px; } .hgt-btn-solid { display: inline-block; text-align: center; font-family: var(--font-en); font-size: 13px; letter-spacing: .16em; color: #fff; background: var(--red); padding: 14px 30px; transition: transform .3s; } .hgt-btn-solid:hover { transform: translateY(-2px); color: #fff; } .hgt-btn-line { display: inline-block; text-align: center; font-family: var(--font-en); font-size: 13px; letter-spacing: .16em; color: var(--cream2); border: 1px solid rgba(192, 86, 74, .4); padding: 14px 30px; transition: background .3s; } .hgt-btn-line:hover { background: rgba(192, 86, 74, .12); color: var(--cream2); } /* 明地（ペーパー背景）に置くアウトラインボタン */ .hgt-btn-line--ink { color: var(--ink); border-color: rgba(26, 18, 16, .28); } .hgt-btn-line--ink:hover { background: rgba(158, 43, 40, .07); color: var(--ink); } /* EB Garamond は小サイズで線が細く見えるため、英字ラベル・ボタン類は 500 で締める */ .hgt-label, .hgt-textlink, .hgt-btn-solid, .hgt-btn-line, .hgt-header__logo-en, .hgt-header__nav > a, .hgt-header__reserve, .hgt-hero__reserve, .hgt-h2en, .hgt-principle__en, .hgt-store__en, .hgt-news__row .date, .hgt-mnav__reserve, .hgt-page__en, .hgt-crumb, .hgt-mcat__en, .hgt-mitem__price, .hgt-footer__head, .hgt-footer__bottom { font-weight: 500; } /* ---- 画像プレースホルダ（実写真差し替え前提） ---- */ .hgt-ph { position: relative; background: var(--paper-ph); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hgt-ph > span { font-size: 11px; letter-spacing: .24em; color: rgba(26, 18, 16, .35); text-align: center; padding: 1em; } .hgt-ph--dark { background: linear-gradient(145deg, #2a1a15, #17100c); } .hgt-ph--dark > span { color: rgba(242, 236, 226, .3); } .hgt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= 背景のあしらい（テクスチャ／透かし文字） ベタ塗り1色だと面が平坦に見えるため、和紙のような微細な粒子と、 セクションの主題を表す大きな透かし文字を重ねる。 どちらも装飾なので pointer-events / user-select は無効化し、 スクリーンリーダーにも読ませない（::before の content は読み上げ対象外）。 ========================================================= */ /* 和紙状の粒子。SVGのノイズをdata URIで持つので追加リクエストは発生しない。 */ .hgt { --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); /* 青海波（せいがいは）。重なる半円を三連で並べた和柄。 国産羊の専門店という和の文脈に合わせた地紋で、文字ではないので どのセクションに敷いても意味が衝突しない。 radial-gradient 3枚で1タイルを作る（左端・中央・右端の扇）。 線は地に溶ける濃さにとどめ、写真やテキストの邪魔をしないこと。 線の色は currentColor にしてある。明地と暗地で色を変えたいが、 カスタムプロパティは**継承する前に var() が解決される**ため、 使う側で --wave-line を上書きしても効かない（一度それで踏んだ）。 currentColor なら使う側の color で切り替えられる。 */ --paper-wave: radial-gradient(circle at 50% 100%, transparent 0 23%, currentColor 23% 24%, transparent 24% 48%, currentColor 48% 49%, transparent 49% 73%, currentColor 73% 74%, transparent 74%), radial-gradient(circle at 0% 100%, transparent 0 23%, currentColor 23% 24%, transparent 24% 48%, currentColor 48% 49%, transparent 49% 73%, currentColor 73% 74%, transparent 74%), radial-gradient(circle at 100% 100%, transparent 0 23%, currentColor 23% 24%, transparent 24% 48%, currentColor 48% 49%, transparent 49% 73%, currentColor 73% 74%, transparent 74%); --wave-size: 72px 36px; } /* 地紋を敷きたくないページ用のスイッチ（.hgt と同じ要素に付ける）。 セクションのクラス（.hgt-menu 等）はトップと店舗ページで共有しているので、 セクション単位ではなくページ単位で切れるようにしてある。 --wave-size も auto に戻すこと。地紋のレイヤーだけ消すと background-size の並びがずれ、粒子が72pxに引き伸ばされる。 */ .hgt-nowave { --paper-wave: none; --wave-size: auto; } /* 明るいセクションに粒子を敷く */ .hgt-concept, .hgt-menu, .hgt-news, .hgt-sconcept, .hgt-menulist, .hgt-topics, .hgt-faq, .hgt-ig, .hgt-newslist, .hgt-recruit-msg, .hgt-steps, .hgt-contact, .hgt-freetext { position: relative; isolation: isolate; } .hgt-concept::after, .hgt-menu::after, .hgt-news::after, .hgt-sconcept::after, .hgt-menulist::after, .hgt-topics::after, .hgt-faq::after, .hgt-ig::after, .hgt-newslist::after, .hgt-recruit-msg::after, .hgt-steps::after, .hgt-contact::after, .hgt-freetext::after { content: ""; position: absolute; inset: 0; z-index: -1; /* 青海波（3枚）＋ 和紙の粒子。順序と background-size の並びを対応させること。 color は地紋の線色（currentColor で参照される）。 */ color: rgba(26, 18, 16, .11); background-image: var(--paper-wave), var(--paper-grain); background-size: var(--wave-size), var(--wave-size), var(--wave-size), auto; opacity: .5; mix-blend-mode: multiply; pointer-events: none; } /* 暗いセクションにも粒子を敷く。 明セクションと同じ multiply では黒地に沈んで一切見えないため、 暗地側は screen（明るく乗せる）で、うんと薄く当てる。 写真を持つセクション（店舗カード・おすすめ・採用）は情報量があるので さらに弱く、平坦になりがちな募集要項・店舗情報・予約CTAは少し強めにする。 */ .hgt-stores, .hgt-principles, .hgt-picks, .hgt-jobs, .hgt-shop, .hgt-cta, .hgt-voices { position: relative; isolation: isolate; } .hgt-stores::after, .hgt-principles::after, .hgt-picks::after, .hgt-jobs::after, .hgt-shop::after, .hgt-cta::after, .hgt-voices::after { content: ""; position: absolute; inset: 0; z-index: -1; /* 暗地には青海波を敷かない。地紋は白系のセクションだけに絞り、 暗いセクションは粒子だけで面のムラを作る。 */ background-image: var(--paper-grain); opacity: .1; mix-blend-mode: screen; pointer-events: none; } /* 写真が主役のセクションは粒子を控えめに */ .hgt-stores::after, .hgt-picks::after { opacity: .06; } /* 主題を表す大きな透かし文字。トップの「主義」と同じ語彙を下層にも広げる。 */ .hgt-wm { position: relative; overflow: hidden; isolation: isolate; } .hgt-wm::before { content: attr(data-wm); position: absolute; top: -.16em; right: .04em; z-index: -1; font-family: var(--font-ja); font-weight: 700; font-size: clamp(150px, 24vw, 340px); line-height: .82; color: rgba(158, 43, 40, .045); user-select: none; pointer-events: none; white-space: nowrap; } /* 暗いセクションでは赤の透かしが沈むのでレンガ色を使う */ .hgt-wm--dark::before { color: rgba(192, 86, 74, .06); } /* 左側に置きたいセクション用 */ .hgt-wm--left::before { right: auto; left: .04em; } @media (max-width: 720px) { .hgt-wm::before { font-size: clamp(120px, 40vw, 200px); opacity: .8; } } /* ---- フェードアップ（JS有効時のみ） ---- */ .hgt-js .hgt-fade { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; } .hgt-js .hgt-fade.is-inview { opacity: 1; transform: none; } @keyframes hgt-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* 動きを減らす設定の環境では、フェード・ライズ演出を無効化する */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hgt-js .hgt-fade { opacity: 1; transform: none; transition: none; } .hgt-hero__wordmark, .hgt-hero__lockup, .hgt-hero__cta { animation: none; } } /* ========================================================= 固定ヘッダー ========================================================= */ .hgt-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: rgba(18, 14, 13, 0); transition: background .4s, box-shadow .4s; } .hgt-header.is-scrolled { background: rgba(18, 14, 13, .98); box-shadow: 0 1px 0 rgba(192, 86, 74, .15); } /* トップ以外はヒーローが常に暗いとは限らないため、初期状態から地を敷く */ body:not(.home) .hgt-header { background: rgba(18, 14, 13, .96); } .admin-bar .hgt-header { top: var(--wp-admin--admin-bar--height, 32px); } .hgt-header__logo { display: flex; flex-direction: column; line-height: 1; gap: 4px; } .hgt-header__logo--img { flex-direction: row; align-items: center; } .hgt-header__logo--img img { display: block; } /* ロゴ（支給素材）。グループ・店舗とも白地の正方形JPG。 白地のまま角丸の長方形プレートとして置き、3つ並んでも体裁が揃うようにする。 */ .hgt-header__logo--shop img, .hgt-header__logo--group img { width: 72px; height: 72px; border-radius: 4px; object-fit: contain; background: #fff; } .hgt-header__logo-en { font-family: var(--font-en); font-size: 26px; letter-spacing: .14em; color: var(--cream2); } .hgt-header__logo-sub { font-size: 10px; letter-spacing: .42em; color: rgba(242, 236, 226, .6); padding-left: 2px; } .hgt-header__nav { display: flex; align-items: center; gap: 30px; } .hgt-header__nav > a:not(.hgt-header__reserve) { font-family: var(--font-en); font-size: 16px; letter-spacing: .16em; color: var(--cream2); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: color .3s; } .hgt-header__nav > a:not(.hgt-header__reserve):hover { color: var(--brick); } .hgt-header__nav > a .ja { font-family: var(--font-ja); font-size: 10px; letter-spacing: .24em; color: rgba(242, 236, 226, .6); } .hgt-header__reserve { font-family: var(--font-en); font-size: 14px; letter-spacing: .18em; color: #fff; background: var(--red); padding: 13px 24px; border: 1px solid var(--red); transition: background .3s, color .3s, border-color .3s; } .hgt-header__reserve span { font-family: var(--font-ja); font-size: 10px; letter-spacing: .2em; margin-left: 8px; opacity: .85; } .hgt-header__reserve:hover { background: transparent; color: var(--red); border-color: var(--brick); } /* 言語切替（ヘッダー右・RESERVE の手前） Polylang が2言語以上あるときだけ出る。JA / EN / ZH / KO の省略表記。 */ .hgt-lang { display: flex; align-items: center; gap: 1px; margin-right: 4px; } .hgt-lang__item { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; line-height: 1; padding: 7px 8px; color: rgba(242, 236, 226, .62); transition: color .3s; } .hgt-lang__item + .hgt-lang__item { border-left: 1px solid rgba(242, 236, 226, .22); } a.hgt-lang__item:hover { color: var(--brick); } .hgt-lang__item.is-current { color: var(--cream2); } /* ハンバーガー（モバイル） */ .hgt-burger { display: none; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; cursor: pointer; } .hgt-burger span { display: block; height: 1px; background: var(--cream2); transition: transform .3s; } .hgt-mnav-open .hgt-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .hgt-mnav-open .hgt-burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } .hgt-mnav { position: fixed; inset: 0; z-index: 49; background: rgba(16, 11, 11, .97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; } .hgt-mnav-open .hgt-mnav { opacity: 1; visibility: visible; } .hgt-mnav a { display: flex; align-items: baseline; gap: 12px; color: var(--cream2); } .hgt-mnav a .ja { font-family: var(--font-ja); font-size: 18px; letter-spacing: .18em; } .hgt-mnav a .en { font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--brick); } .hgt-mnav__reserve { margin-top: 14px; font-family: var(--font-en); font-size: 13px; letter-spacing: .18em; color: #fff; background: var(--red); padding: 14px 34px; } /* モバイルナビの言語切替。狭いので省略表記ではなく各言語の自称で出す。 */ .hgt-mnav__lang { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(242, 236, 226, .16); max-width: 280px; } .hgt-mnav__lang a, .hgt-mnav__lang span { font-family: var(--font-ja); font-size: 13px; letter-spacing: .1em; color: rgba(242, 236, 226, .62); } .hgt-mnav__lang a:hover { color: var(--brick); } .hgt-mnav__lang .is-current { color: var(--cream2); } /* ========================================================= お知らせの一覧行（トップのNEWSと一覧ページで共有） ========================================================= */ .hgt-news__row { display: grid; grid-template-columns: 130px 96px 1fr; gap: 24px; align-items: center; padding: 24px 8px; border-top: 1px solid var(--line-light); transition: background .3s; } .hgt-news__row:hover { background: rgba(158, 43, 40, .05); color: inherit; } .hgt-news__row .date { font-family: var(--font-en); font-size: 15px; letter-spacing: .1em; color: var(--body-gray); } .hgt-news__row .tag { font-size: 11px; letter-spacing: .14em; text-align: center; color: var(--red); border: 1px solid var(--red); padding: 5px 0; } .hgt-news__row .title { font-size: 14.5px; letter-spacing: .06em; color: var(--ink); line-height: 1.6; text-wrap: pretty; } .hgt-news__endline { border-top: 1px solid var(--line-light); } /* ========================================================= FOOTER ========================================================= */ .hgt-footer { background: var(--footer-bg); color: var(--cream2); padding: 70px 40px 36px; } .hgt-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 52px; border-bottom: 1px solid rgba(242, 236, 226, .14); } .hgt-footer__brand { font-family: var(--font-en); font-size: 28px; letter-spacing: .14em; margin-bottom: 6px; } .hgt-footer__catch { font-size: 11px; letter-spacing: .36em; color: rgba(242, 236, 226, .55); margin-bottom: 22px; } .hgt-footer__desc { font-size: 12.5px; line-height: 2.1; letter-spacing: .06em; color: rgba(242, 236, 226, .6); max-width: 300px; text-wrap: pretty; } .hgt-footer__head { font-family: var(--font-en); font-size: 13px; letter-spacing: .2em; color: var(--brick); margin-bottom: 20px; } .hgt-footer__link { display: block; font-size: 13px; letter-spacing: .1em; color: rgba(242, 236, 226, .75); padding: 7px 0; transition: color .3s; } .hgt-footer__link:hover { color: var(--brick); } .hgt-footer__link span { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: rgba(242, 236, 226, .4); margin-left: 10px; } .hgt-footer__link--en { font-family: var(--font-en); letter-spacing: .14em; } .hgt-footer__bottom { margin-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: rgba(242, 236, 226, .4); } .hgt-footer__legal a { transition: color .3s; } .hgt-footer__legal a:hover { color: var(--brick); } /* ========================================================= レスポンシブ（共通パーツ） ========================================================= */ @media (max-width: 1080px) { .hgt-header__nav { gap: 20px; } .hgt-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 960px) { .hgt-header { padding: 14px 20px; } .hgt-header__logo--shop img, .hgt-header__logo--group img { width: 56px; height: 56px; } .hgt-header__nav > a:not(.hgt-header__reserve) { display: none; } .hgt-burger { display: flex; } .hgt-header__reserve { margin-right: 8px; padding: 10px 16px; } /* 言語切替はモバイルナビの中に出すので、ヘッダーからは下げる */ .hgt-lang { display: none; } .hgt { --sec-pad: 80px; --sechead-mb: 44px; --header-h: 72px; } .hgt-footer__grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 560px) { /* 狭幅ではヘッダーのRESERVEを隠す（モバイルメニュー内とヒーローに残る） */ .hgt-header { padding: 12px 16px; } .hgt-header__logo--shop img, .hgt-header__logo--group img { width: 48px; height: 48px; } .hgt-header__reserve { display: none; } .hgt-footer { padding: 56px 24px 32px; } .hgt-news__row { grid-template-columns: 96px 80px 1fr; grid-template-rows: auto auto; gap: 12px; padding: 20px 4px; } .hgt-news__row .date { font-size: 13px; } .hgt-news__row .title { grid-column: 1 / -1; } } /* 運営会社（フッターのブランド列） */ .hgt-footer__company { margin-top: 20px; font-size: 12.5px; line-height: 1.9; } .hgt-footer__company a { color: rgba(242, 236, 226, .9); border-bottom: 1px solid rgba(242, 236, 226, .3); transition: color .3s; } .hgt-footer__company a:hover { color: var(--brick); } .hgt-footer__company span { display: block; color: rgba(242, 236, 226, .5); margin-top: 4px; }