/* ============================================================
   common.css — 共通スタイル
   タイポグラフィ・コンテナ・ボタン・ユーティリティ
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@400;500;600;700&display=swap');


/* --------------------------------------------------
   Body ベース
   -------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}


/* --------------------------------------------------
   コンテナ
   -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--xl  { max-width: var(--container-xl); }


/* --------------------------------------------------
   タイポグラフィ
   -------------------------------------------------- */

/* 英字見出し（ローマン体） */
.text-roman {
  font-family: var(--font-roman);
  letter-spacing: var(--ls-wide);
}

/* 明朝体見出し */
.text-mincho {
  font-family: var(--font-mincho);
}

/* セクションラベル（小さい英字）*/
.label {
  font-family: var(--font-roman);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* 本文 */
.body-text {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* リード文 */
.lead {
  font-family: var(--font-mincho);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-base);
}

/* キャプション */
.caption {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-base);
}

/* ミュートテキスト */
.text-muted {
  color: var(--color-text-muted);
}


/* --------------------------------------------------
   セクション共通ヘッダー
   -------------------------------------------------- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header__en {
  font-family: var(--font-roman);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-3);
}

.section-header__ja {
  font-family: var(--font-mincho);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-6);
}

.section-header__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-inline: auto;
}

/* セクション区切り線（飾り） */
.section-header::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 1px;
  background-color: var(--color-accent);
  margin: var(--space-6) auto 0;
  opacity: 0.6;
}


/* --------------------------------------------------
   セクション間余白
   -------------------------------------------------- */
.section {
  padding-block: var(--space-32);
}

.section--lg {
  padding-block: var(--space-40);
}

.section--sm {
  padding-block: var(--space-20);
}

/* 背景バリエーション */
.section--white {
  background-color: var(--color-white);
}

.section--dark {
  background-color: var(--color-bg-dark);
}


/* --------------------------------------------------
   ボタン
   -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-roman);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border: 1px solid currentColor;
  transition:
    background-color var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out),
    border-color var(--duration-base) var(--ease-in-out);
  cursor: pointer;
  white-space: nowrap;
}

/* プライマリ（塗り） */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* アウトライン */
.btn--outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* ゴースト（白地用） */
.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-white);
  color: var(--color-accent);
}

/* サイズ修飾 */
.btn--sm {
  font-size: var(--fs-xs);
  padding: var(--space-2) var(--space-6);
}

.btn--lg {
  font-size: var(--fs-base);
  padding: var(--space-5) var(--space-10);
}

/* 矢印付き */
.btn__arrow {
  font-size: 1.2em;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}


/* --------------------------------------------------
   区切り線
   -------------------------------------------------- */
.divider {
  border: none;
  border-top: var(--border-thin);
  margin-block: var(--space-12);
}

.divider--accent {
  border-color: var(--color-accent);
  opacity: 0.4;
}


/* --------------------------------------------------
   ページ内共通: メインコンテンツ
   position:sticky のため padding-top は不要
   -------------------------------------------------- */
.page-main {}


/* --------------------------------------------------
   ページヒーロー（サブページ共通）
   -------------------------------------------------- */
.page-hero {
  background-color: var(--color-bg-dark);
  padding-block: var(--space-24) var(--space-20);
  text-align: center;
  border-bottom: var(--border-thin);
}

.page-hero__en {
  font-family: var(--font-roman);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-3);
}

.page-hero__ja {
  font-family: var(--font-mincho);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  display: block;
}


/* --------------------------------------------------
   カード共通
   -------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border: var(--border-thin);
  padding: var(--space-8);
}

.card--hover {
  transition: box-shadow var(--duration-base) var(--ease-in-out),
              transform var(--duration-base) var(--ease-in-out);
}

.card--hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}


/* --------------------------------------------------
   フォーカスリング（アクセシビリティ）
   -------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* --------------------------------------------------
   モバイル専用改行
   -------------------------------------------------- */
.sp-br { display: none; }
@media (max-width: 600px) {
  .sp-br { display: inline; }
}


/* --------------------------------------------------
   スクリーンリーダー専用
   -------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------
   レスポンシブ: タブレット (768px)
   -------------------------------------------------- */
@media (max-width: 768px) {
  .section       { padding-block: var(--space-24); }
  .section--lg   { padding-block: var(--space-32); }
  .section--sm   { padding-block: var(--space-16); }

  .section-header       { margin-bottom: var(--space-12); }
  .section-header__ja   { font-size: var(--fs-lg); }
}


/* --------------------------------------------------
   レスポンシブ: スマートフォン (480px)
   -------------------------------------------------- */
@media (max-width: 480px) {
  .section       { padding-block: var(--space-16); }
  .section--lg   { padding-block: var(--space-20); }

  .section-header__ja   { font-size: var(--fs-md); }

  .btn           { font-size: var(--fs-xs); }
}


/* --------------------------------------------------
   ページフェードイン
   ページ遷移時のコンテンツ登場アニメーション
   -------------------------------------------------- */
@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-main {
  animation: page-fade-in var(--duration-slow) var(--ease-out) both;
}


/* --------------------------------------------------
   印刷スタイル (@media print)
   -------------------------------------------------- */
@media print {
  /* ナビ・インタラクティブUI を非表示 */
  .nav-toggle,
  .nav-toggle-label,
  .nav-drawer,
  .site-header,
  .btn {
    display: none !important;
  }

  /* ベーススタイルリセット */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.6;
    color: #000;
    background: #fff;
  }

  /* リンク */
  a {
    color: #000;
    text-decoration: underline;
  }

  /* 外部リンクにURLを表示 */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  /* tel / アンカーリンクはURL非表示 */
  a[href^="tel"]::after,
  a[href^="#"]::after {
    content: '';
  }

  /* セクション余白を縮小 */
  .section      { padding-block: 1cm; }
  .section--lg  { padding-block: 1.5cm; }
  .section--sm  { padding-block: 0.5cm; }

  /* 画像・SVGの幅制限 */
  img,
  svg {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* 見出し直後の改ページ禁止 */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  p, li {
    page-break-inside: avoid;
  }

  /* フッターを白背景・黒テキストに */
  .site-footer {
    background: #fff !important;
    border-top: 1pt solid #000;
    padding-top: 1em;
  }

  .site-footer,
  .site-footer * {
    color: #000 !important;
  }
}