/* =============================================
   豊田南ライオンズクラブ  デザインカンプ共通CSS
   キーカラー：紺（ダークブルー）
   ============================================= */
:root{
  --blue:#0D386D;          /* キーカラー：紺 */
  --blue-deep:#0C2C53;     /* 濃紺（フッター・オーバーレイ） */
  --gold:#E8BC09;          /* アクセント：ライオンズゴールド */
  --pale:#E6EBF2;          /* 薄い青グレー（ホバー・面） */
  --paper:#FFFFFF;
  --white:#FFFFFF;
  --ink:#333333;
  --ink-soft:#666666;
  --line:#D6D6D6;
  --rule:#707070;
  --serif:"Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --en:"EB Garamond",serif;
  /* 下層ページ互換エイリアス（旧マルーン配色 → 紺系へ統一） */
  --maroon:var(--blue);
  --maroon-deep:var(--blue-deep);
  --gold-pale:var(--pale);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden;}
/* clip はスクロールボックスを作らないので position:sticky を壊さない。非対応環境は上の hidden を使う */
@supports (overflow-x:clip){html{overflow-x:clip;}}
html,body{width:100%;max-width:100%;}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:2;letter-spacing:.05em;font-weight:400;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;transition:.2s ease-in-out;}
ul{list-style:none;}
.container{max-width:1200px;margin:0 auto;padding:0 40px;}

/* ---------- header ---------- */
.header{position:absolute;top:0;left:0;right:0;z-index:50;background:transparent;}
.header.solid{position:sticky;background:#fff;border-bottom:1px solid var(--line);}
/* 幅を狭めても改行させない：nowrap＋clamp()で文字・余白を無段階に縮小 */
.header-inner{max-width:1600px;margin:0 auto;padding:0 clamp(84px,7vw,120px) 0 clamp(16px,2vw,28px);height:96px;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,24px);flex-wrap:nowrap;}
.brand{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex-shrink:0;}
.brand-logo{width:clamp(42px,4vw,58px);height:auto;flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;line-height:1.35;white-space:nowrap;}
.brand-jp{font-size:clamp(16px,1.5vw,21px);font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap;}
.brand-en{font-size:clamp(9px,.75vw,10px);letter-spacing:.2em;color:rgba(255,255,255,.85);white-space:nowrap;}
.header.solid .brand-jp{color:var(--blue);}
.header.solid .brand-en{color:var(--ink-soft);}
.gnav{display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);flex-wrap:nowrap;}
.gnav a{font-size:clamp(12px,1.05vw,13px);font-weight:600;letter-spacing:.08em;color:#fff;padding:6px 0;white-space:nowrap;}
.header.solid .gnav a{color:var(--ink);}
.gnav a:hover{color:var(--gold);}
.header.solid .gnav a:hover{color:var(--blue);}
.gnav a.current{color:var(--gold);}
.header.solid .gnav a.current{color:var(--blue);}
/* 入会案内・お問い合わせはスマホメニューのみ（PCは縦書きボタンとフッターから） */
.gnav a.nav-sp-only{display:none;}

/* ハンバーガー（900px以下でドロワー表示・JS不要） */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;}
.nav-btn{display:none;width:30px;height:22px;position:relative;cursor:pointer;flex-shrink:0;}
.nav-btn span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.25s ease-in-out;}
.nav-btn span:nth-child(1){top:0;}
.nav-btn span:nth-child(2){top:10px;}
.nav-btn span:nth-child(3){bottom:0;}
.header.solid .nav-btn span{background:var(--blue);}

@media (max-width:920px){
  .header-inner{height:72px;padding:0 clamp(76px,9vw,84px) 0 16px;}
  .nav-btn{display:block;}
  /* inset:0 のまま画面ぴったりに固定し、clip-path で開閉する。
     画面外にはみ出す要素が一切できないため、右へスクロールできない */
  .gnav{position:fixed;inset:0;z-index:95;flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:0;padding:92px 24px 40px;overflow-y:auto;background:var(--blue-deep);
    clip-path:inset(0 0 0 100%);opacity:0;visibility:hidden;pointer-events:none;
    transition:clip-path .3s ease-in-out, opacity .25s ease-in-out, visibility 0s .3s;}
  .gnav a,.header.solid .gnav a{font-size:15px;color:#fff;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.16);}
  .gnav a.current,.header.solid .gnav a.current{color:var(--gold);}
  .gnav a.nav-sp-only{display:block;}
  .gnav a:hover,.header.solid .gnav a:hover{color:var(--gold);}
  .nav-toggle:checked ~ .gnav{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;pointer-events:auto;transition:clip-path .3s ease-in-out, opacity .2s ease-in-out, visibility 0s 0s;}
  .nav-toggle:checked ~ .nav-btn{position:fixed;top:26px;right:60px;z-index:96;}
  .nav-toggle:checked ~ .nav-btn span{background:#fff;}
  .nav-toggle:checked ~ .nav-btn span:nth-child(1){top:10px;transform:rotate(45deg);}
  .nav-toggle:checked ~ .nav-btn span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .nav-btn span:nth-child(3){bottom:10px;transform:rotate(-45deg);}
}
@media (max-width:380px){
  .brand-logo{width:34px;}
  .brand-jp{font-size:14px;}
  .brand-en{font-size:8px;letter-spacing:.14em;}
}

/* 固定「お問い合わせ」縦書きボタン */
.contact-fix{position:fixed;top:0;right:0;z-index:100;background:var(--blue);color:#fff !important;writing-mode:vertical-rl;font-size:13px;font-weight:600;letter-spacing:.4em;line-height:1.7;padding:40px 16px 26px;text-align:center;}
.contact-fix::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:12px;height:8px;background:var(--gold);clip-path:polygon(0 0,100% 0,50% 100%);}
.contact-fix:hover{background:var(--blue-deep);}

/* ---------- 見出し（om-lc準拠：日本語太字＋英字細字） ---------- */
.h-set{text-align:center;line-height:1.5;}
.h-set .jp{display:block;font-size:19px;font-weight:500;letter-spacing:.1em;}
.h-set .en{display:block;font-size:13px;font-weight:300;letter-spacing:.08em;color:var(--ink-soft);}
.h-orn{width:46px;margin:16px auto 0;border-top:2px solid var(--blue);padding-top:4px;}
.h-orn::after{content:"";display:block;border-top:2px solid var(--gold);}

/* 旧共通見出し（下層ページ用） */
.sec-head{margin-bottom:48px;}
.sec-en{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--blue);font-weight:700;display:flex;align-items:center;gap:14px;}
.sec-en::before{content:"";width:34px;height:1px;background:var(--gold);}
.sec-jp{font-size:30px;font-weight:700;letter-spacing:.1em;margin-top:10px;line-height:1.5;}
.sec-head.center{text-align:center;}
.sec-head.center .sec-en{justify-content:center;}
.sec-head.center .sec-en::after{content:"";width:34px;height:1px;background:var(--gold);}

/* ---------- page header (下層ページ) ---------- */
.page-hero{background:var(--blue-deep);color:#fff;position:relative;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 400px at 85% 120%, rgba(232,188,9,.16), transparent 60%),
  linear-gradient(120deg, rgba(13,56,109,.9), rgba(12,44,83,.97));}
.page-hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:84px 40px 78px;}
.page-hero .en{font-family:var(--en);font-size:14px;letter-spacing:.4em;color:var(--gold);font-weight:700;}
.page-hero h1{font-size:38px;letter-spacing:.14em;font-weight:700;margin-top:14px;}
.breadcrumb{background:#fff;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-soft);}
.breadcrumb .container{padding-top:14px;padding-bottom:14px;}
.breadcrumb span{margin:0 10px;color:var(--gold);}
.breadcrumb a:hover{color:var(--blue);}

/* ---------- 事務局案内 ---------- */
.info-sec{background:var(--white);border-top:1px solid var(--line);padding:96px 0;}
.info-table{max-width:820px;margin:0 auto;}
.info-club{font-size:22px;font-weight:700;letter-spacing:.1em;border-bottom:2px solid var(--blue);padding-bottom:14px;margin-bottom:8px;}
.info-row{display:flex;border-bottom:1px solid var(--line);padding:20px 8px;font-size:15px;align-items:center;}
.info-row dt{width:120px;color:var(--ink-soft);letter-spacing:.14em;font-size:13px;}
.info-row dd{flex:1;display:flex;align-items:center;gap:14px;}
.pill{border:1px solid var(--gold);color:var(--blue);font-size:12px;padding:5px 16px;border-radius:99px;letter-spacing:.08em;}
a.pill:hover{background:var(--gold);color:#fff;}

/* ---------- footer ---------- */
.footer{background:var(--blue);color:rgba(255,255,255,.9);}
.footer-main{max-width:1200px;margin:0 auto;padding:64px 40px 48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:60px;}
.footer .brand-jp{color:#fff;}
.footer .brand-en{color:rgba(255,255,255,.75);}
.footer-note{font-size:12px;line-height:2;color:rgba(255,255,255,.7);margin-top:18px;max-width:420px;}
.fnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 48px;font-size:13px;font-weight:600;align-content:start;padding-top:6px;min-width:0;}
.fnav a{display:flex;align-items:center;gap:10px;padding:6px 0;color:rgba(255,255,255,.9);}
.fnav a::before{content:"";width:12px;height:1px;background:var(--gold);}
.fnav a:hover{color:var(--gold);}
.copyright{border-top:1px solid rgba(255,255,255,.16);text-align:center;font-size:11px;letter-spacing:.14em;padding:22px;color:rgba(255,255,255,.6);}

/* ページTOPボタン */
.page-top{position:fixed;bottom:14px;right:14px;z-index:60;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--blue);display:flex;align-items:center;justify-content:center;}
.page-top::before{content:"";width:12px;height:12px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(-45deg) translate(-2px,2px);}
.page-top:hover{background:var(--pale);}

/* ---------- 共通パーツ ---------- */
.btn{display:inline-flex;align-items:center;gap:16px;font-size:13px;letter-spacing:.18em;color:var(--blue);font-weight:700;border:1px solid var(--blue);padding:16px 34px;border-radius:2px;background:transparent;}
.btn:hover{background:var(--pale);}
.btn .arrow{width:26px;height:1px;background:var(--blue);position:relative;}
.btn .arrow::after{content:"";position:absolute;right:0;top:-3px;width:8px;height:1px;background:var(--blue);transform:rotate(35deg);transform-origin:right;}
.btn.solid{background:var(--blue);color:#fff;}
.btn.solid:hover{background:var(--blue-deep);}
.btn.solid .arrow{background:#fff;}
.btn.solid .arrow::after{background:#fff;}

/* 「詳しく見る」型テキストリンク（om-lc準拠） */
.more-link{text-align:right;}
.more-link a{position:relative;display:inline-block;font-size:14px;font-weight:600;letter-spacing:.1em;padding-right:34px;}
.more-link a::after{content:"";position:absolute;top:50%;right:0;width:16px;height:16px;border-top:2px solid var(--rule);border-right:2px solid var(--rule);transform:translateY(-50%) rotate(45deg);transition:.2s ease-in-out;}
.more-link a:hover::after{right:-6px;}
.more-link.white a{color:#fff;}
.more-link.white a::after{border-color:#fff;}
.more-link.white a:hover{color:var(--gold);}
.more-link.white a:hover::after{border-color:var(--gold);}

.tag{display:inline-block;background:var(--blue);color:#fff;font-size:11px;letter-spacing:.1em;padding:3px 12px;border-radius:1px;}
.tag.outline{background:transparent;border:1px solid var(--gold);color:var(--blue);}
section{padding:104px 0;}
.bg-white{background:var(--white);}
.bg-pale{background:var(--pale);}
.note-sample{font-size:11px;color:var(--ink-soft);letter-spacing:.08em;}

/* =============================================
   スマートフォン／タブレット対応（共通パーツ）
   ============================================= */
@media (max-width:768px){
  section{padding:64px 0;}
  .container{padding:0 24px;}

  /* 見出し */
  .sec-head{margin-bottom:32px;}
  .sec-jp{font-size:22px;letter-spacing:.06em;}
  .sec-en{font-size:12px;letter-spacing:.2em;}
  .h-set .jp{font-size:17px;}
  .h-set .en{font-size:12px;}

  /* 下層ページのページ見出し・パンくず */
  .page-hero-inner{padding:52px 24px 48px;}
  .page-hero h1{font-size:26px;letter-spacing:.08em;margin-top:10px;}
  .page-hero .en{font-size:12px;letter-spacing:.28em;}
  .breadcrumb{font-size:11px;}
  .breadcrumb span{margin:0 6px;}

  /* 事務局のご案内：ラベルと内容を縦積み */
  .info-sec{padding:64px 0;}
  .info-club{font-size:18px;}
  .info-row{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 4px;font-size:14px;}
  .info-row dt{width:auto;font-size:12px;}
  .info-row dd{width:100%;flex-wrap:wrap;gap:10px;}

  /* フッター：縦積み */
  .footer-main{flex-direction:column;gap:32px;padding:48px 24px 36px;}
  .footer-note{max-width:none;font-size:11.5px;}
  .fnav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;font-size:12px;}

  /* 共通パーツ */
  .btn{padding:14px 24px;font-size:12px;}
  .more-link a{font-size:13px;}
  .page-top{width:46px;height:46px;bottom:10px;right:10px;}
}
@media (max-width:560px){
  .fnav{grid-template-columns:minmax(0,1fr);}
}