/* ============================================================ 共通ヘッダー / フッター スタイル（全ページ共通・単一ソース） ※ ヘッダー/フッターの見た目を変えるときは、必ずこのファイルだけを編集する。 各ページの で読み込まれ、ページ内インラインより後に適用されるため ここでの指定が優先される。本体HTMLは各ページに残してあるので このファイルが万一読み込めなくても表示自体は消えない（安全側）。 依存：各ページ :root のデザイントークン --cream / --navy / --navy3 / --gold / --goldh / --tx --ffj / --ffs / --ease / --content-max / --content-pad-x --sp-lg / --sp-sm / --fs-body-sm / --fs-caption --bd-thin / --bd-medium / --rd-sm ============================================================ */ /* ===================== HEADER ===================== ※ var(--x, 既定値) 形式：ページがトークン未定義でも既定値で正しく表示される */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:300; height:80px;background:var(--cream,#ECDFD4); border-bottom:1px solid rgba(11,15,30,.08); transition:box-shadow var(--ease,.28s cubic-bezier(.4,0,.2,1)); } .site-header.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.08)} .header-inner{ max-width:1440px;margin:0 auto;padding:0 40px; height:100%;display:flex;align-items:center;gap:32px; position:relative;justify-content:space-between; } .logo{ flex-shrink:0;display:flex;flex-direction:column; align-items:center;gap:2px;text-decoration:none; } .logo-img{height:39px;width:auto;display:block;mix-blend-mode:multiply;filter:none;opacity:1} .logo-ja{ font-family:var(--ffj,'Noto Sans JP',sans-serif);font-size:9px;letter-spacing:0; color:var(--tx,#0B0F1E);line-height:1;font-weight:500;text-transform:none; /* 社名をロゴ画像の横幅にぴったり両端揃え（レスポンシブ自動追従） */ align-self:stretch;text-align:justify;text-align-last:justify; } .site-nav{ position:absolute;left:50%;transform:translateX(-50%); display:flex;gap:44px;align-items:center; } /* 指示0713①：ナビ4タブ＝CTAと同じ17pxに拡大し「タブ」らしく（余白＋ホバー下地＋金下線） */ .site-nav a{ font-family:var(--ffj,'Noto Sans JP',sans-serif); font-size:17px;font-weight:700;color:var(--navy,#0B0F1E); white-space:nowrap;transition:color var(--ease,.28s cubic-bezier(.4,0,.2,1)),background var(--ease,.28s cubic-bezier(.4,0,.2,1)); display:flex;align-items:center;gap:4px;letter-spacing:.02em; position:relative;text-transform:none; padding:9px 14px;border-radius:2px; } .site-nav a:hover,.site-nav a.active{color:var(--gold,#b89a58)} .site-nav a:hover{background:rgba(184,154,88,.09)} .site-nav .dd::after{content:'∨';font-size:9px;color:var(--navy,#0B0F1E);margin-left:4px;font-weight:400;opacity:.7} .site-nav a::after{ content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px; background:var(--gold,#b89a58);transform:scaleX(0);transform-origin:right; transition:transform .42s cubic-bezier(.22,.61,.36,1); } .site-nav a:hover::after,.site-nav a.active::after{transform:scaleX(1);transform-origin:left} /* 指示0713①：お問い合わせ＝ナビと同じ17px・金グラデの「ハイソなCTAボタン」に */ .btn-hdr{ flex-shrink:0;display:inline-flex;align-items:center;gap:10px; background:linear-gradient(180deg,#d4b870 0%,#b89a58 55%,#8c7237 100%); color:var(--navy,#0B0F1E); padding:15px 28px;font-size:17px;font-weight:700; letter-spacing:.04em;white-space:nowrap; border-radius:2px;border:1px solid rgba(140,114,55,.55); box-shadow:0 3px 14px rgba(140,114,55,.28); transition:box-shadow var(--ease,.28s cubic-bezier(.4,0,.2,1)),transform var(--ease,.28s cubic-bezier(.4,0,.2,1)),filter var(--ease,.28s cubic-bezier(.4,0,.2,1)); } .btn-hdr .ic-mail{width:19px;height:19px;stroke:var(--navy,#0B0F1E);fill:none;stroke-width:2.5;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round} .btn-hdr .ic-arr{width:19px;height:14px;stroke:var(--navy,#0B0F1E);fill:none;stroke-width:3;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round;margin-left:4px} .btn-hdr:hover{background:linear-gradient(180deg,#d4b870 0%,#b89a58 55%,#8c7237 100%);filter:brightness(1.06);box-shadow:0 6px 20px rgba(140,114,55,.4);transform:translateY(-1px)} /* 指示0713①：ハンバーガー＝右揃えの段違い3本線（中段は金の短線）でデザイン性を持たせる */ .hamburger{display:none;flex-direction:column;align-items:flex-end;gap:6px;padding:8px;margin-left:auto;background:none;border:none;cursor:pointer} .hamburger span{display:block;height:2px;border-radius:2px;background:var(--tx,#0B0F1E);transition:all var(--ease,.28s cubic-bezier(.4,0,.2,1))} .hamburger span:nth-child(1){width:26px} .hamburger span:nth-child(2){width:17px;background:var(--gold,#b89a58)} .hamburger span:nth-child(3){width:26px} .hamburger.open span{width:26px} .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .mobile-menu{ display:none;position:fixed;inset:0;top:72px; background:#fff;z-index:290;padding:40px 32px; flex-direction:column;gap:28px; border-top:1px solid rgba(0,0,0,.07); } .mobile-menu.open{display:flex} .mobile-menu a{font-family:var(--ffj,'Noto Sans JP',sans-serif);font-size:18px;font-weight:700;color:var(--tx,#0B0F1E);text-transform:none;letter-spacing:normal} /* フッター等からの深リンク（#services 等）で固定ヘッダーに隠れないための余白 */ [id]{scroll-margin-top:100px} /* ===================== FOOTER ===================== ※ var(--x, 既定値) 形式：ページがトークン未定義でも既定値で崩れない */ footer{ background:var(--cream,#ECDFD4);padding:40px 0 0; position:relative;color:var(--navy,#0B0F1E); border-top:1px solid rgba(11,15,30,.10); /* コンテンツと footer を区切る（他社footerの定石）*/ } /* 非対称エディトリアル：左＝大きなブランドステートメント、右＝ナビ4列 */ .footer-main{ max-width:var(--content-max,1280px);margin:0 auto; padding:0 var(--content-pad-x,64px) 40px; display:flex;justify-content:space-between;align-items:flex-start;gap:64px; border-bottom:1px solid rgba(11,15,30,.10); } /* ── ブランド（ロゴ＋社名は中央揃え＝確定仕様。その下にステートメントを大きく）── */ .ft-brand{flex:0 0 auto;max-width:360px} .ft-logo-wrap{ display:inline-flex;flex-direction:column;align-items:center;gap:2px; margin-bottom:14px;transform:none; /* 指示0713②：サブコピー縮小で浮いた分を詰める */ } .ft-logo-img{height:30px;width:auto;display:block;object-fit:contain; mix-blend-mode:multiply;filter:none} .ft-logo-ja{ font-family:var(--ffj,'Noto Sans JP',sans-serif);font-size:7px;letter-spacing:0; color:rgba(11,15,30,.7);line-height:1;font-weight:500; /* 社名をロゴ画像の横幅にぴったり両端揃え（レスポンシブ自動追従） */ align-self:stretch;text-align:justify;text-align-last:justify; } /* 指示0713②PC：サブコピーを一回り小さく＋金の縦アクセントで「デザイン」に。浮いた分は上余白も圧縮 */ .ft-statement{ font-family:var(--ffj,'Noto Sans JP',sans-serif); font-size:19px;line-height:1.7;font-weight:600; color:var(--navy,#0B0F1E);letter-spacing:.06em;margin:0; position:relative;padding-left:16px; } .ft-statement::before{ content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px; background:linear-gradient(180deg,var(--gold,#b89a58) 0%,rgba(184,154,88,.15) 100%); } /* ── ナビ4列 ── */ .ft-nav-grid{ flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr); gap:28px 32px;max-width:720px; } /* ── 各カラム（見出し＝日本語のページ名リンク、その下に実在セクションへの深リンク）── */ .ft-col-title{ font-family:var(--ffj,'Noto Sans JP',sans-serif);font-size:13px;letter-spacing:.05em; color:var(--gold);margin-bottom:12px;display:inline-block;font-weight:700; transition:opacity var(--ease); } a.ft-col-title:hover{opacity:.65} .ft-links{display:flex;flex-direction:column;gap:8px} .ft-links a{ font-size:var(--fs-body-sm,12px);color:rgba(11,15,30,.75); transition:color var(--ease);font-weight:400;letter-spacing:.02em; line-height:1.4;width:fit-content; } .ft-links a:hover{color:var(--gold)} /* ── 最下部 ── */ .footer-btm{ max-width:var(--content-max,1280px);margin:0 auto;padding:12px var(--content-pad-x,64px); display:flex;justify-content:space-between;align-items:center;gap:var(--sp-lg,24px); } .ft-copy{font-family:var(--ffs);font-size:var(--fs-caption,11px);color:rgba(11,15,30,.55);letter-spacing:.05em} .ft-legal{display:flex;gap:var(--sp-lg,24px)} .ft-legal a{ font-family:var(--ffs);font-size:var(--fs-caption,11px);color:rgba(11,15,30,.55); transition:color var(--ease);letter-spacing:.05em; } .ft-legal a:hover{color:var(--gold)} /* ===================== レスポンシブ ===================== */ @media(max-width:1200px){ .footer-main{gap:40px} .site-nav{gap:16px} .site-nav a{font-size:16px;padding:9px 10px} .site-nav a::after{left:10px;right:10px} .btn-hdr{font-size:16px;padding:14px 20px} } @media(max-width:960px){ .site-nav,.btn-hdr{display:none} .hamburger{display:flex} .header-inner{padding:0 24px;justify-content:space-between} .footer-main,.footer-btm{padding-left:40px;padding-right:40px} .footer-main{flex-direction:column;gap:32px} .ft-brand{flex:none;max-width:none} .ft-nav-grid{width:100%;max-width:none} } @media(max-width:640px){ /* SPフッターの縦間伸び対策：上下余白・ステートメントを圧縮し、ナビは新聞組み2段で高さ自動均等化 */ footer{padding-top:28px} .footer-main{padding:0 24px 26px;gap:20px} /* ロゴ下に3行のステートメントを積むと縦に長くなる→ロゴの横並びにして高さを圧縮。行間も詰める。 上揃え・間隔は下のナビ列(column-gap:24px)に合わせて統一感を出す */ .ft-brand{display:flex;align-items:flex-start;gap:24px;max-width:none} .ft-logo-wrap{margin-bottom:0;flex-shrink:0} .ft-statement{font-size:15px;line-height:1.3;margin-top:7px} /* 指示0713②SP：1行目の上端を社名ロゴ上端に揃える（計測差7px） */ /* 4カラムをgrid2×2から新聞組み(columns:2)へ＝項目数差による行揃えの空白(間伸び)を解消 */ .ft-nav-grid{display:block;columns:2;column-gap:24px} .ft-col{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:20px} .ft-col:last-child{margin-bottom:0} .footer-btm{flex-direction:column;align-items:flex-start;padding:16px 24px;gap:8px} } /* ============================================================ SPハンバーガーメニュー（単一ソース） 色味＝⑥-1（ダークネイビー地・白文字・金アクセント）／構成＝⑥-2（アコーディオン→サブリンク）＋CTA＋フッター 背景画像は後差し込み：各ページの