/* ============================================
   喜多方蔵守り隊 共通スタイル
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700;900&family=Zen+Maru+Gothic:wght@400;500;700;900&family=Yuji+Syuku&family=Klee+One:wght@400;600&display=swap');

:root {
  /* ベース */
  --paper: #FBF6EC;
  --paper-deep: #F5EDE0;
  --paper-shadow: #E8DCC8;
  --washi-line: #D4C5A9;

  /* 墨 */
  --sumi: #2A2622;
  --sumi-soft: #4A413A;
  --sumi-mute: #7A6F65;

  /* 蔵守り隊カラー */
  --men-gold: #D4A445;       /* 麺蔵 */
  --men-gold-deep: #A87A20;
  --rata-red: #C44536;       /* ラー太 */
  --rata-red-soft: #E08074;
  --water-blue: #7BB8D9;     /* 伏流水くん */
  --water-blue-deep: #4A89AC;
  --soba-green: #8FA968;     /* そば姫 */
  --soba-green-deep: #5C7A3E;
  --himawari: #F5C846;       /* ひまわり大仏丸 */
  --himawari-deep: #C99A1F;

  /* ヴィラン */
  --villain-mist: #6B6976;
  --villain-mist-deep: #3F3D4A;
  --villain-rust: #8B5A4A;
  --villain-dry: #B8A285;
  --villain-fake: #D67BA8;

  /* アクセント */
  --shu: #C44536;            /* 朱色（落款・印） */
  --kin: #C9A961;            /* 金 */
  --kuro: #1A1816;

  /* 影 */
  --shadow-soft: 0 4px 16px rgba(42, 38, 34, 0.08);
  --shadow-mid: 0 8px 24px rgba(42, 38, 34, 0.12);
  --shadow-deep: 0 16px 48px rgba(42, 38, 34, 0.18);

  /* フォント */
  --font-mincho: 'Zen Old Mincho', serif;
  --font-maru: 'Zen Maru Gothic', sans-serif;
  --font-brush: 'Yuji Syuku', serif;
  --font-klee: 'Klee One', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-maru);
  color: var(--sumi);
  background: var(--paper);
  line-height: 1.7;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* 和紙テクスチャ背景 */
.washi-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212, 197, 169, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(212, 164, 69, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(123, 184, 217, 0.06) 0%, transparent 50%);
  position: relative;
}

.washi-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 2px,
      rgba(212, 197, 169, 0.04) 2px,
      rgba(212, 197, 169, 0.04) 3px
    );
  pointer-events: none;
  z-index: 0;
}

.washi-bg > * {
  position: relative;
  z-index: 1;
}

/* ナビゲーション */
.global-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--washi-line);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.global-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--sumi);
}

.global-nav__brand-mark {
  width: 36px;
  height: 36px;
  background: var(--shu);
  color: white;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-brush);
  font-size: 22px;
  box-shadow: 0 2px 6px rgba(196, 69, 54, 0.4);
}

.global-nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.global-nav__brand-text strong {
  font-family: var(--font-mincho);
  font-size: 18px;
  font-weight: 700;
}

.global-nav__brand-text small {
  font-size: 10px;
  color: var(--sumi-mute);
  letter-spacing: 0.15em;
}

.global-nav__links {
  display: flex;
  gap: 4px;
  list-style: none;
}

.global-nav__links a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--sumi-soft);
  font-family: var(--font-maru);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
}

.global-nav__links a:hover {
  background: var(--paper-deep);
  color: var(--sumi);
}

.global-nav__links a.is-active {
  background: var(--sumi);
  color: var(--paper);
}

/* 共通：印鑑バッジ */
.stamp {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--shu);
  color: var(--paper);
  font-family: var(--font-brush);
  font-size: 22px;
  border-radius: 8px;
  transform: rotate(-4deg);
  box-shadow: 0 2px 0 rgba(0,0,0,0.1);
  letter-spacing: -2px;
  line-height: 1;
  text-align: center;
  padding: 4px;
}

/* セクションタイトル */
.section-title {
  text-align: center;
  margin-bottom: 48px;
}

.section-title__kanji {
  font-family: var(--font-mincho);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--sumi);
  position: relative;
  display: inline-block;
  padding: 0 24px;
}

.section-title__kanji::before,
.section-title__kanji::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--sumi-mute);
}

.section-title__kanji::before { right: 100%; }
.section-title__kanji::after { left: 100%; }

.section-title__romaji {
  display: block;
  font-family: var(--font-mincho);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--sumi-mute);
  margin-top: 8px;
  text-transform: uppercase;
}

.section-title__sub {
  display: block;
  font-family: var(--font-maru);
  font-size: 14px;
  color: var(--sumi-soft);
  margin-top: 16px;
}

/* 縦書きラベル */
.tategaki {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  letter-spacing: 0.2em;
}

/* 共通フッター */
.global-footer {
  margin-top: 80px;
  padding: 48px 32px 32px;
  text-align: center;
  background: var(--sumi);
  color: var(--paper);
  position: relative;
}

.global-footer__motto {
  font-family: var(--font-brush);
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--himawari);
}

.global-footer__sub {
  font-size: 13px;
  color: var(--paper-deep);
  opacity: 0.7;
}

/* 共通：ちいかわ風カード */
.kira-card {
  background: var(--paper);
  border: 2px solid var(--sumi);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 4px 4px 0 var(--sumi);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kira-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--sumi);
}

/* 蔵窓モチーフ */
.kura-window {
  width: 60px;
  height: 80px;
  background: var(--paper-deep);
  border: 3px solid var(--sumi);
  border-radius: 30px 30px 4px 4px;
  position: relative;
}
.kura-window::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sumi);
}

/* responsive utility */
@media (max-width: 768px) {
  .global-nav {
    flex-wrap: wrap;
    padding: 10px 16px;
  }
  .global-nav__links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .section-title__kanji {
    font-size: 28px;
  }
}

/* ============================================
   kitakata-life.com 帰還バナー
   ============================================ */
.portal-bridge {
  background: linear-gradient(135deg, #1a1816 0%, #2A2622 100%);
  border-top: 3px solid var(--himawari);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.portal-bridge__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-bridge__icon {
  width: 40px;
  height: 40px;
  background: var(--himawari);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}

.portal-bridge__text {
  color: rgba(251, 246, 236, 0.6);
  font-family: var(--font-maru);
  font-size: 12px;
  line-height: 1.4;
}

.portal-bridge__text strong {
  display: block;
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.portal-bridge__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--himawari);
  color: var(--sumi);
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.portal-bridge__link:hover {
  background: var(--paper);
  transform: translateX(-3px);
}

.portal-bridge__link::before {
  content: '←';
}

@media (max-width: 600px) {
  .portal-bridge {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .portal-bridge__link {
    width: 100%;
    justify-content: center;
  }
}