@charset "UTF-8";

/* =========================================
   デザイントークン（色・書体・余白）
   ========================================= */
:root {
  --color-ink: #1a1a1a;
  --color-text: #2b2b2b;
  --color-text-light: #6b6b6b;
  --color-navy: #00496b;
  --color-gold: #b8985a;
  --color-brown: #7c5237;
  --color-bg: #ffffff;
  --color-washi: #f6f3ee;
  --color-line: #e2ddd3;
  --color-white: #ffffff;
  --font-mincho: "fot-tsukuaoldmin-pr6n", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --container: 1200px;
  --gutter: 5%;
  --header-h: 84px;
}

/* =========================================
   リセット
   ========================================= */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; font-family: var(--font-mincho); font-size: 16px; line-height: 1.9; letter-spacing: 0.06em; color: var(--color-text); background: var(--color-bg); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img,
picture,
video,
svg { display: block; max-width: 100%; height: auto; }
ul,
ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; transition: opacity 0.2s ease, color 0.2s ease; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
address { font-style: normal; }
h1,
h2,
h3,
h4 { font-weight: 400; line-height: 1.5; }

@media (min-width: 769px) {
  a:hover { opacity: 0.6; }
}

/* 動きの抑制を希望するユーザーへ配慮 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* =========================================
   レイアウト補助
   ========================================= */
.l-container { width: 90%; max-width: var(--container); margin-inline: auto; }
.sp { display: none; }
.pc { display: block; }

@media (max-width: 768px) {
  .sp { display: block; }
  .pc { display: none; }
}

/* =========================================
   アクセシビリティ（スキップリンク）
   ========================================= */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 999; padding: 10px 16px; color: var(--color-white); background: var(--color-ink); transition: top 0.2s ease; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }

/* =========================================
   スクロール連動フェードイン
   ========================================= */
.js-fadein { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease, transform 1.1s ease; }
.js-fadein.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================
   共通セクション見出し
   ========================================= */
.section-title { font-family: var(--font-mincho); font-size: clamp(24px, 3vw, 32px); text-align: center; letter-spacing: 0.14em; position: relative; padding-bottom: 22px; }
.section-title::after { content: ""; display: block; width: 48px; height: 1px; margin: 18px auto 0; background: var(--color-gold); }

/* =========================================
   共通ボタン
   ========================================= */
.button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; font-size: 15px; letter-spacing: 0.1em; color: var(--color-text); border: 1px solid var(--color-ink); background: transparent; position: relative; overflow: hidden; transition: color 0.3s ease; }
.button::before { content: ""; position: absolute; inset: 0; background: var(--color-ink); transform: translateX(-101%); transition: transform 0.3s ease; z-index: -1; }
.button:hover { color: var(--color-white); opacity: 1; }
.button:hover::before { transform: translateX(0); }
.button--light { color: var(--color-white); border-color: var(--color-white); }
.button--light::before { background: var(--color-white); }
.button--light:hover { color: var(--color-ink); }