/* ============================================================ 共通ヘッダー・フッター スタイル 各ページの で読み込みます: ページ側の :root で定義済みの変数（--color-ink, --font-en 等）を 前提にしています。変数名は各ページと揃えてください。 ============================================================ */ .site-header{ position:relative; z-index:10; background:var(--color-white, #ffffff); border-bottom:1px solid rgba(30,28,25,0.1); } .site-header__inner{ max-width:1280px; margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; gap:32px; } .site-header__logo{ order:1; flex-shrink:0; display:block; line-height:0; } .site-header__logo img{ height:40px; width:auto; display:block; } .site-header__nav{ order:2; flex:1; display:flex; justify-content:center; gap:36px; } .site-header__nav a{ display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--color-ink, #1e1c19); opacity:0.82; transition:opacity 0.25s ease; } .site-header__nav a:hover{ opacity:1; } .site-header__nav-en{ font-family: var(--font-en, 'Cormorant Garamond', serif); font-size:19px; font-weight:500; letter-spacing:0.03em; } .site-header__nav-jp{ font-family: var(--font-jp-sans, 'Noto Sans JP', sans-serif); font-size:11px; letter-spacing:0.05em; } .site-header__nav-actions{ display:none; /* デスクトップでは非表示。モバイル時のみメニュー内に表示 */ } /* ---- 右側：ボタン＋ハンバーガーのラッパー ---- */ .site-header__right{ order:3; flex-shrink:0; display:flex; align-items:center; gap:16px; } .site-header__actions{ display:flex; gap:12px; } .site-header__btn{ display:inline-block; padding:11px 20px; font-family: var(--font-jp-sans, 'Noto Sans JP', sans-serif); font-size:14px; font-weight:500; letter-spacing:0.05em; text-decoration:none; white-space:nowrap; text-align:center; transition:background 0.25s ease, color 0.25s ease, opacity 0.25s ease; } .site-header__btn--outline{ border:1px solid var(--color-ink, #1e1c19); color:var(--color-ink, #1e1c19); background:transparent; } .site-header__btn--outline:hover{ background:var(--color-ink, #1e1c19); color:#ffffff; } .site-header__btn--fill{ background:var(--color-ink, #1e1c19); color:#ffffff; border:1px solid var(--color-ink, #1e1c19); } .site-header__btn--fill:hover{ opacity:0.8; } /* ---- ハンバーガーボタン（モバイルのみ表示） ---- */ .site-header__toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:34px; height:34px; padding:0; border:none; background:none; cursor:pointer; flex-shrink:0; position:relative; z-index:101; } .site-header__toggle span{ display:block; width:22px; height:2px; background:var(--color-ink, #1e1c19); transition:transform 0.3s ease, opacity 0.3s ease; } body.site-header-open .site-header__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); } body.site-header-open .site-header__toggle span:nth-child(2){ opacity:0; } body.site-header-open .site-header__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:960px){ .site-header__inner{ align-items:flex-start; } .site-header__toggle{ display:flex; } .site-header__right{ flex-direction:column; align-items:flex-end; gap:12px; } .site-header__right .site-header__btn{ padding:9px 16px; font-size:12px; } .site-header__nav{ position:fixed; inset:0; z-index:100; background:var(--color-white, #ffffff); flex-direction:column; justify-content:center; align-items:center; gap:30px; padding:100px 24px 60px; transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } body.site-header-open .site-header__nav{ opacity:1; visibility:visible; transform:translateY(0); } body.site-header-open{ overflow:hidden; } .site-header__nav-en{ font-size:22px; } .site-header__nav-jp{ font-size:12px; } .site-header__nav-actions{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:280px; margin-top:12px; } .site-header__nav-actions .site-header__btn{ padding:14px 20px; } } @media (max-width:600px){ .site-header__logo img{ height:32px; } } /* ============ FOOTER ============ */ .site-footer{ background:var(--color-white, #ffffff); color:var(--color-ink, #1e1c19); } /* ---- 上段ナビ ---- */ .site-footer__nav{ border-top:1px solid rgba(30,28,25,0.25); } .site-footer__nav-inner{ max-width:1280px; margin:0 auto; padding:22px 32px; display:flex; } .site-footer__nav-inner a{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 12px; text-decoration:none; color:var(--color-ink, #1e1c19); opacity:0.9; transition:opacity 0.25s ease; } .site-footer__nav-inner a:hover{ opacity:1; } .site-footer__nav-inner a:not(:first-child)::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:34px; background:rgba(30,28,25,0.2); } .footer-nav__en{ font-family: var(--font-en, 'Cormorant Garamond', serif); font-size:19px; font-weight:500; letter-spacing:0.02em; } .footer-nav__jp{ font-family: var(--font-jp-sans, 'Noto Sans JP', sans-serif); font-size:11px; letter-spacing:0.04em; color:rgba(30,28,25,0.6); } /* ---- 中段：リンクカラム ---- */ .site-footer__columns{ max-width:1280px; margin:0 auto; padding:64px 32px 40px; display:grid; grid-template-columns:0.7fr 1fr 1fr 1fr; gap:40px; } .site-footer__col-heading{ font-family: var(--font-jp-serif, 'Noto Serif JP', serif); font-weight:700; font-size:18px; letter-spacing:0.04em; margin-bottom:22px; } .site-footer__col-list{ list-style:none; } .site-footer__col-list li + li{ margin-top:15px; } .site-footer__col-list a{ font-family: var(--font-jp-sans, 'Noto Sans JP', sans-serif); font-size:14px; letter-spacing:0.02em; color:rgba(30,28,25,0.78); text-decoration:none; transition:color 0.25s ease; } .site-footer__col-list a:hover{ color:var(--color-ink, #1e1c19); } /* ---- SNSアイコン ---- */ .site-footer__social{ display:flex; justify-content:center; gap:26px; padding:36px 24px 56px; } .site-footer__social a{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; color:var(--color-ink, #1e1c19); } .site-footer__social svg{ width:100%; height:100%; } /* ---- 下段：コピーライト ---- */ .site-footer__bottom{ border-top:1px solid rgba(30,28,25,0.25); padding:26px 24px; text-align:center; } .site-footer__copyright{ font-family: var(--font-jp-sans, 'Noto Sans JP', sans-serif); font-size:13px; font-weight:500; letter-spacing:0.04em; color:var(--color-ink, #1e1c19); } /* ---- レスポンシブ ---- */ @media (max-width:960px){ .site-footer__nav-inner{ flex-wrap:wrap; padding:20px 24px; gap:20px 0; } .site-footer__nav-inner a{ flex:1 1 33.33%; } .site-footer__nav-inner a:nth-child(3n+1)::before{ display:none; } .site-footer__columns{ grid-template-columns:1fr 1fr; padding:48px 24px 32px; } .site-footer__spacer{ display:none; } } @media (max-width:600px){ .site-footer__nav-inner a{ flex:1 1 50%; } .site-footer__nav-inner a:nth-child(3n+1)::before{ display:block; } .site-footer__nav-inner a:nth-child(2n+1)::before{ display:none; } .footer-nav__en{ font-size:16px; } .site-footer__columns{ grid-template-columns:1fr; gap:32px; } .site-footer__social{ gap:20px; } } /* ============ BREADCRUMB ============ */ .breadcrumb{ background:var(--color-white, #ffffff); border-bottom:1px solid rgba(30,28,25,0.08); } .breadcrumb__list{ list-style:none; max-width:1200px; margin:0 auto; padding:14px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .breadcrumb__item{ font-family: var(--font-jp-sans, 'Noto Sans JP', sans-serif); font-size:12px; letter-spacing:0.03em; } .breadcrumb__item a{ color:var(--color-ink, #1e1c19); opacity:0.6; text-decoration:none; transition:opacity 0.25s ease; } .breadcrumb__item a:hover{ opacity:1; } .breadcrumb__item span[aria-current="page"]{ color:var(--color-ink, #1e1c19); opacity:0.85; } .breadcrumb__sep{ font-size:12px; color:rgba(30,28,25,0.35); }