@charset "UTF-8";
/* ==========================================================================
   ランニング桜島 第46回 トップページ 専用スタイル (main-2026.css)
   原田さん「デザイン仕様書 v1」準拠。唯一の自前CSS（既存3ファイルは参照しない）。
   構成: 1)トークン 2)ベース 3)ユーティリティ 4)ボタン 5)コンポーネント(セクション順)
   ブレイクポイント: L=1999 / M=991 / S=509（現サイト実数値・確定）
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. デザイントークン（仕様書 1・2・3章）
 * ------------------------------------------------------------------ */
:root{
  /* color */
  --c-red:#CE0019;          /* メイン01 */
  --c-red-shadow:#9D0019;   /* ボタン影 */
  --c-navy:#1E2087;         /* メイン02 */
  --c-pink:#FBEBED;         /* ベース01 */
  --c-gray:#F3F3F3;         /* モノ02 */
  --c-charcoal:#222222;     /* フッター背景・標準テキスト */
  --c-text:#222222;
  --c-border:#D9D9D9;       /* モノ01 */
  --c-white:#FFFFFF;
  --c-pagehead:#C9C9C9;     /* 下層ページ タイトル帯 */
  /* type */
  --font-base:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-en:"Inter",var(--font-base);
  /* layout */
  --wrap:1140px;
  --gutter:15px;
  --main-w:870px;
  --side-w:240px;
  --col-gap:30px;
}

/* ------------------------------------------------------------------ *
 * 2. ベース
 * ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-base);
  font-weight:400;
  color:var(--c-text);
  font-size:15px;
  line-height:1.8;
  letter-spacing:.08em;
  background:var(--c-white);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:opacity .3s,color .3s}
ul{list-style:none;margin:0;padding:0}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.5;letter-spacing:.05em}
h1{font-size:30px}h2{font-size:27px}h3{font-size:23px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}
:focus-visible{outline:3px solid var(--c-navy);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------------ *
 * 3. 共通ユーティリティ
 * ------------------------------------------------------------------ */
.container{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.l-section{padding-block:60px}
.l-section--narrow{padding-block:45px}
.l-section--pink{background:var(--c-pink)}
.l-section--gray{background:var(--c-gray)}
.u-center{text-align:center}
.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* セクション見出し（仕様書 4-2：中央寄せ・英字15→(5)→日本語30→(15)→赤ライン60×3→(20)→リード） */
.section-title{text-align:center;margin-bottom:20px}
.section-title__en{display:block;font-family:var(--font-en);font-weight:700;font-size:15px;line-height:1.5;letter-spacing:.05em;color:var(--c-red);margin-bottom:5px}
.section-title__jp{display:block;font-size:30px;font-weight:700;line-height:1.5;letter-spacing:.05em;color:var(--c-text)}
.section-title::after{content:"";display:block;width:60px;height:3px;background:var(--c-red);margin:15px auto 0}
.section-lead{text-align:center;max-width:840px;margin:0 auto 45px}

/* ------------------------------------------------------------------ *
 * 4. ボタン（仕様書 5・9：立体・影5px→ホバー2px・transition .3s）
 * ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:240px;padding:10px 30px;
  background:var(--c-red);color:#fff;font-family:var(--font-base);font-size:15px;font-weight:400;line-height:1.5;
  border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 5px 0 var(--c-red-shadow);
  transition:transform .3s,box-shadow .3s,opacity .3s;
}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--c-red-shadow);color:#fff}
.btn--lg{min-width:300px;padding:15px 30px;font-size:17px;font-weight:700}
.btn--multiline{border-radius:20px}
.btn .fa{font-size:.9em}
.btn-group{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:45px}

/* ------------------------------------------------------------------ *
 * 5-1. ヘッダー（セクション1）
 * ------------------------------------------------------------------ */
.l-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.l-header__bar{display:flex;align-items:center;justify-content:space-between;gap:15px;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding:15px var(--gutter)}
.l-header__logo{display:flex;align-items:center;gap:140px}
/* 書き出し実寸で表示（1xで拡大＝ボケを防ぐ。logo=210x35 / geo=140x35） */
.l-header__logo .logo-main{width:210px;height:35px}
.l-header__logo .logo-geo{width:140px;height:35px}
.l-header__util{display:flex;align-items:center;gap:19px}
.l-header__util a{font-size:14px;font-weight:700;letter-spacing:0;white-space:nowrap}
.l-header__util a:not(.util-entry):not(.util-sns):hover{color:var(--c-red)}
.l-header__util a:not(.util-entry):not(.util-sns) .fa-play{color:var(--c-text);margin-right:4px;font-size:.6em;vertical-align:.12em}
.l-header__util .util-entry{display:inline-flex;align-items:center;justify-content:center;width:150px;height:35px;background:var(--c-red);color:#fff;font-weight:700;padding:0 20px;border-radius:4px;margin-left:4px}
.l-header__util .util-entry .fa-play{margin-right:7px;font-size:.6em;vertical-align:.12em}
.l-header__util .util-entry:hover{opacity:.75}
.l-header__util .util-sns{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:22px;line-height:1;color:var(--c-text)}
.l-header__util .util-facebook{margin-left:4px}
.l-header__util .util-sns .fa-facebook{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--c-text);color:#fff;font-size:14px}
.l-header__util .util-sns:hover{opacity:.75}

.l-gnav{background:var(--c-navy)}
/* .l-header__bar と同じグリッド幅。項目は等幅分割し、区切り線を両端に揃える */
.l-gnav__list{display:flex;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.l-gnav__list>li{position:relative;flex:1 1 auto;min-width:0}
.l-gnav__list>li::after,.l-gnav__list>li:first-child::before{content:"";position:absolute;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,.75)}
.l-gnav__list>li::after{right:0}
.l-gnav__list>li:first-child::before{left:0}
.l-gnav__list a{display:block;text-align:center;white-space:nowrap;color:#fff;font-weight:700;font-size:15px;letter-spacing:.05em;padding:10px 8px}
/* 992〜1199pxでは1140px未満のため僅かに詰める（はみ出し防止） */
@media(max-width:1199px){
  .l-gnav__list a{font-size:14px;letter-spacing:.02em;padding:13px 4px}
  .l-gnav__list a .fa-play{margin-right:4px}
}
.l-gnav__list a .fa-play{margin-right:7px;font-size:.6em;vertical-align:.12em;opacity:.9}
.l-gnav__list a:hover{opacity:.6}

/* ハンバーガー & SPメニュー */
.sp-menubtn{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:var(--c-red);border:0;border-radius:6px;cursor:pointer;padding:0 10px}
.sp-menubtn span{display:block;height:3px;background:#fff;border-radius:2px;transition:.3s}
.sp-menubtn.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.sp-menubtn.active span:nth-child(2){opacity:0}
.sp-menubtn.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.sp-menu{position:fixed;top:0;right:-82%;width:80%;max-width:320px;height:100vh;z-index:1090;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,.2);overflow-y:auto;padding:15px 0 40px;visibility:hidden;transition:right .3s,visibility .3s}
.sp-menu.open{right:0;visibility:visible}
.sp-menu__close{display:flex;align-items:center;gap:8px;margin:0 24px 10px auto;padding:8px 12px;background:#fff;border:1px solid var(--c-border);border-radius:4px;color:var(--c-text);font:400 14px/1.5 var(--font-base);cursor:pointer}
.sp-menu__close .fa{color:var(--c-red)}
.sp-menu li{border-bottom:1px solid var(--c-border)}
.sp-menu a{display:flex;align-items:center;gap:8px;padding:14px 24px;font-size:15px}
.sp-menu a::before{content:"\f04b";font-family:FontAwesome;font-size:.6em;color:var(--c-red);flex:none}
.sp-menu a:hover{color:var(--c-red)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1080;opacity:0;visibility:hidden;transition:.3s}
.overlay.open{opacity:1;visibility:visible}

@media(max-width:991px){
  .l-header__util,.l-gnav{display:none}
  .sp-menubtn{display:flex}
  .l-header__bar{padding:10px 15px}
}
@media(max-width:509px){
  /* 比率維持で縮小（168x28 = 実寸の0.8倍。拡大しないのでボケない） */
  .l-header__logo{gap:0}
  .l-header__logo picture:last-child{display:none}
  .l-header__logo .logo-main{width:168px;height:28px}
  .l-header__logo .logo-geo{display:none}
}
@media(min-width:992px){.sp-menu,.overlay{display:none}}

/* ------------------------------------------------------------------ *
 * 5-2. ヒーロー（セクション2）
 * PC=1140x570 / SP=780x1100。切替は <picture> の media(max-width:509px)
 * ------------------------------------------------------------------ */
.p-hero{background:#fff}
/* 中央=等倍1140px / 左右に前後スライドが覗く（幅制御はSplideの fixedWidth+focus:center） */
.p-hero .splide__slide>a{display:block}
.p-hero .splide__slide picture{display:block}
.p-hero .splide__slide img{width:100%;height:auto}
.splide__arrow{background:rgba(0,0,0,.4);width:2.6em;height:2.6em}
.p-hero .splide__arrow--prev{left:calc(50% - 570px - 1.3em)}
.p-hero .splide__arrow--next{right:calc(50% - 570px - 1.3em)}
.splide__arrow svg{fill:#fff}
.splide__pagination__page.is-active{background:var(--c-red)}

@media(max-width:1199px) and (min-width:510px){
  /* fixedWidth:90%時も、左右矢印の中心を中央スライドの端に合わせる */
  .p-hero .splide__arrow--prev{left:calc(5% - 1.3em)}
  .p-hero .splide__arrow--next{right:calc(5% - 1.3em)}
}
@media(max-width:509px){
  /* 全幅表示時は画面端から少し内側に置き、操作領域を確保する */
  .p-hero .splide__arrow--prev{left:10px}
  .p-hero .splide__arrow--next{right:10px}
}

/* ------------------------------------------------------------------ *
 * 5-3. カウントダウン（セクション3）
 * ------------------------------------------------------------------ */
.p-countdown{background:var(--c-navy);color:#fff}
.p-countdown__inner{display:flex;align-items:center;justify-content:center;gap:45px;flex-wrap:wrap;padding:30px 15px}
.p-countdown__label{font-weight:700;font-size:19px;line-height:1.5;text-align:center;letter-spacing:.05em}
.p-countdown__label small{display:block;font-weight:400;font-size:14px;opacity:.85;letter-spacing:.08em}
.p-countdown__timer{display:flex;gap:15px}
.p-countdown__frame{display:flex;flex-direction:column;align-items:center;min-width:80px;background:rgba(255,255,255,.12);border-radius:8px;padding:10px 8px}
.p-countdown__number{font-family:var(--font-en);font-weight:700;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.p-countdown__unit{font-family:var(--font-en);font-size:12px;letter-spacing:.1em;opacity:.85;margin-top:6px}
@media(max-width:509px){
  .p-countdown__inner{gap:15px}.p-countdown__timer{gap:8px}
  .p-countdown__frame{min-width:64px}.p-countdown__number{font-size:30px}
}

/* ------------------------------------------------------------------ *
 * 5-4. 重要なお知らせ（セクション4：仕様書 4-2 / 7 ボーダーボックス）
 * ------------------------------------------------------------------ */
.p-important{padding-block:45px}
.p-important__box{border:2px solid var(--c-red);border-radius:8px;background:#fff;overflow:hidden}
.p-important__head{background:var(--c-red);color:#fff;font-size:19px;font-weight:700;line-height:1.5;padding:8px 15px}
.p-important__list{padding:15px}
.p-important__list li{position:relative;padding:8px 0 8px 22px}
.p-important__list li:not(:last-child){border-bottom:1px solid var(--c-border)}
.p-important__list li::before{content:"\f0da";font-family:FontAwesome;position:absolute;left:4px;color:#222222}
.p-important__list a{color:#222222}
.p-important__list a:hover{opacity:.75;text-decoration:underline}

/* ------------------------------------------------------------------ *
 * 5-5. お知らせ + サイドエリア（セクション5：2カラム 735+45+360）
 * ------------------------------------------------------------------ */
.news-sponsor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);column-gap:45px;align-items:start;max-width:var(--wrap);margin-inline:auto}
/* お知らせ見出し（左寄せ・英字15→(5)→日本語27→(10)・右にリンク） */
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:0;border-bottom:1px solid var(--c-border);padding-bottom:10px}
.news-head__title .en{display:block;font-family:var(--font-en);font-weight:700;font-size:15px;line-height:1.5;letter-spacing:.05em;color:var(--c-red);margin-bottom:5px}
.news-head__title .jp{display:block;font-size:27px;font-weight:700;line-height:1.5;letter-spacing:.05em}
.news-head .view-more-link{white-space:nowrap}
.news-list{margin-bottom:0}
.news-item{display:flex;gap:20px;padding:14px 4px;border-bottom:1px solid var(--c-border);align-items:baseline}
.news-date{color:var(--c-text);font-family:var(--font-en);font-weight:700;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.news-text a:hover{color:var(--c-red);text-decoration:underline}
.view-more-link{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--c-text)}
.view-more-link:hover{opacity:.75}

.side-banners{display:flex;flex-direction:column;gap:15px}
.side-banners a{display:block}
.side-banners a:hover{opacity:.75}

@media(max-width:991px){
  .news-sponsor-layout{grid-template-columns:1fr;gap:30px}
  .side-banners{flex-direction:row;flex-wrap:wrap}
  .side-banners a{flex:1 1 240px}
}
@media(max-width:509px){
  .side-banners{flex-direction:column;align-items:flex-start}
  .side-banners a{flex:0 0 auto;width:min(360px,100%)}
  .side-banners img{width:100%;height:auto}
}

/* ------------------------------------------------------------------ *
 * 5-6. ENTRY（セクション6：カード＝書き出し画像リンク・2×2）
 * ------------------------------------------------------------------ */
.p-entry__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:var(--wrap);margin-inline:auto}
.p-entry__card{display:block;border-radius:8px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.p-entry__card img{width:100%;height:auto;display:block}
.p-entry__card:hover{opacity:.75}
@media(max-width:509px){.p-entry__grid{grid-template-columns:1fr;gap:15px}}

/* ------------------------------------------------------------------ *
 * 5-7. コース＆アクセス（セクション7）
 * ------------------------------------------------------------------ */
.p-course__inner{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;max-width:var(--wrap);margin-inline:auto}
.p-course__img{border-radius:8px;overflow:hidden}
.p-course__img img{width:100%;height:auto;display:block}
.p-course__body p{margin-bottom:30px}
@media(max-width:991px){.p-course__inner{grid-template-columns:1fr;gap:30px}}
@media(max-width:509px){.p-course__link{display:flex;width:min(300px,100%);min-width:0;margin-inline:auto}}

/* ------------------------------------------------------------------ *
 * 5-8. FAQ（セクション8：アコーディオン）
 * ------------------------------------------------------------------ */
#faq{background:var(--c-white)}
.p-faq__list{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:15px}
.p-faq__item{border:0;border-radius:0;overflow:visible;background:transparent}
.p-faq__q{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--c-gray);border:0;border-radius:8px;cursor:pointer;padding:15px;font-family:var(--font-base);font-size:15px;font-weight:400;line-height:1.7;color:var(--c-text)}
.p-faq__q .mark,.p-faq__a>.mark{display:inline-block;width:18px;color:var(--c-red);font-family:var(--font-en);font-size:19px;font-weight:700;line-height:1.5;text-align:left;flex:none}
.p-faq__q .toggle{width:18px;margin-left:auto;color:var(--c-red);font-size:18px;text-align:center;flex:none}
.p-faq__a{display:none;align-items:flex-start;gap:12px;padding:18px 15px 20px;color:var(--c-text)}
.p-faq__a-body{min-width:0;flex:1}
.p-faq__a-body p+p{margin-top:1em}
.p-faq__item.is-open .p-faq__a{display:flex}
.p-faq__more-lead{text-align:center;margin-top:35px}
#faq .btn-group{margin-top:15px}

/* ------------------------------------------------------------------ *
 * 5-9. 公式SNS（セクション9）
 * ------------------------------------------------------------------ */
.p-sns__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1040px;margin-inline:auto}
.p-sns__card{background:#fff;border:1px solid var(--c-border);border-radius:8px;overflow:hidden}
.p-sns__head{display:flex;align-items:center;gap:10px;padding:20px 30px 15px;background:#fff;color:var(--c-text);font-size:24px;font-weight:700;line-height:1.5;letter-spacing:.03em}
.p-sns__head img{width:35px;height:35px;flex:none}
.p-sns__body{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--c-gray);color:var(--c-text)}
.p-sns__body:hover{opacity:.75}
.p-sns__body--facebook{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:auto;min-height:340px;padding:20px 30px;background:#fff;text-align:center}
.p-sns__body--facebook:hover{opacity:1}
.p-sns__facebook-logo{display:block;width:150px;height:150px;margin-bottom:10px}
.p-sns__facebook-description{max-width:340px;margin:0 auto;font-size:14px;line-height:1.8}
.p-sns__facebook-link{margin:14px auto 5px;max-width:100%;text-align:center}
.p-sns__body--instagram{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;aspect-ratio:auto;min-height:340px;padding:0 30px 24px;background:#fff}
.p-sns__body--instagram:hover{opacity:1}
.p-sns__status{display:flex;align-items:center;justify-content:center;min-height:250px;margin:0;background:var(--c-gray);color:var(--c-text);font-size:14px;text-align:center}
.p-sns__status[hidden]{display:none}
.p-sns__instagram-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.p-sns__instagram-grid[hidden]{display:none}
.p-sns__instagram-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--c-gray)}
.p-sns__instagram-item:hover{opacity:.75}
.p-sns__instagram-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.p-sns__instagram-item:hover img{transform:scale(1.03)}
.p-sns__instagram-link{margin:20px auto 5px;max-width:100%;text-align:center}
@media(max-width:509px){.p-sns__grid{grid-template-columns:1fr;gap:20px}}
@media(max-width:509px){.p-sns__body--facebook{padding-inline:20px}.p-sns__body--instagram{padding-inline:20px}}

/* ------------------------------------------------------------------ *
 * 5-10. 協賛一覧（セクション10：H2 27px+赤ライン1px / H3 23px）
 * ------------------------------------------------------------------ */
.p-sponsor__title{text-align:center;font-size:27px;margin-bottom:8px}
.p-sponsor__title-rule{max-width:var(--wrap);height:1px;background:var(--c-red);margin:0 auto 45px}
.sponsor-category{margin-bottom:45px;max-width:var(--wrap);margin-inline:auto}
.sponsor-category:last-child{margin-bottom:0}
.sponsor-category__title{text-align:center;font-size:23px;margin-bottom:20px}
.sponsor-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px}
.sponsor-category:not(.sponsor-category--special) .sponsor-list{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;justify-items:center}
.sponsor-item{display:flex;align-items:center;justify-content:center}
.sponsor-item img{max-height:80px;width:auto;object-fit:contain}
.sponsor-item a:hover{opacity:.75}
@media(max-width:991px){.sponsor-category:not(.sponsor-category--special) .sponsor-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:509px){
  .sponsor-category:not(.sponsor-category--special) .sponsor-list{grid-template-columns:repeat(2,1fr)}
  .sponsor-category:not(.sponsor-category--special) .sponsor-item:nth-child(n+5){display:none}
}

/* ------------------------------------------------------------------ *
 * 5-11. フッター（主催/協力ロゴ=グレー背景 → ダーク帯 → 赤帯）
 * ------------------------------------------------------------------ */
.l-footer{font-size:14px;line-height:1.8;letter-spacing:.08em}

/* 主催・主管・後援（グレー背景・黒文字） */
.l-footer__org{background:var(--c-gray);color:var(--c-text);padding-block:45px 20px}
.l-footer__org-list{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;max-width:var(--wrap);margin-inline:auto}
.l-footer__org-list dt{font-weight:700;white-space:nowrap}
.l-footer__org-list dd{margin:0}

/* 協力ロゴ列（グレー背景・PCは上段5件+下段3件） */
.l-footer__partners{background:var(--c-gray);padding-block:10px 45px}
.l-footer__logos{display:grid;grid-template-columns:repeat(5,210px);justify-content:space-between;align-items:center;row-gap:10px;max-width:var(--wrap);margin-inline:auto}
.l-footer__logos a{display:block}
.l-footer__logos a:hover{opacity:.75}
.l-footer__logos img{width:210px;height:auto;object-fit:contain}

/* ダーク帯：事務局／メニュー／過去の大会 */
.l-footer__info{background:var(--c-charcoal);color:#fff;padding-block:45px}
.l-footer__info a:hover{opacity:.6}
.l-footer__cols{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:40px;max-width:var(--wrap);margin-inline:auto}
.l-footer__office-name{font-size:15px;font-weight:700;margin-bottom:14px}
.l-footer__office address{font-style:normal;line-height:1.9}
.l-footer__nav-title{font-size:15px;font-weight:700;margin-bottom:15px}
.l-footer__nav-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.l-footer__nav-cols li{position:relative;padding:3px 0 3px 18px}
.l-footer__nav-cols li::before{content:"\f0da";font-family:FontAwesome;position:absolute;left:2px;opacity:.85}
.l-footer__nav-cols .fa-external-link{margin-left:5px;font-size:.85em;opacity:.7}

/* 赤帯コピーライト */
.l-footer__copyright{background:var(--c-red);color:#fff;text-align:center;padding:14px;font-size:13px;letter-spacing:.05em}

@media(max-width:991px){
  .l-footer__cols{grid-template-columns:1fr;gap:32px}
  .l-footer__logos{grid-template-columns:repeat(3,minmax(0,210px));justify-content:center;gap:10px 20px}
}
@media(max-width:509px){
  .l-footer__org-list{grid-template-columns:1fr}
  .l-footer__org-list dt{margin-top:8px}
  .l-footer__nav-cols{grid-template-columns:1fr 1fr}
  .l-footer__logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .l-footer__logos img{width:100%;height:auto}
}

/* pagetop */
#return-pagetop{position:fixed;right:18px;bottom:18px;z-index:900;opacity:0;visibility:hidden;transition:.3s}
#return-pagetop.show{opacity:1;visibility:visible}
#return-pagetop a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:var(--c-navy);color:#fff;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.3);font-size:20px}
#return-pagetop a:hover{opacity:.75}

/* ==========================================================================
   6. 下層ページ共通パーツ（パターンライブラリ：template-2col.html / template-1col.html）
   ========================================================================== */

/* 縦積みの間隔ユーティリティ（デモページの各コンポーネント間の間隔統一） */
.u-stack{display:flex;flex-direction:column}
.u-stack>*+*{margin-top:var(--stack-gap,60px)}

/* ページタイトル帯 */
.p-pagehead{background:var(--c-pagehead);color:#fff;text-align:center;padding:35px 15px}
.p-pagehead h1{color:#fff}

/* パンくず */
.p-breadcrumb{background:var(--c-gray)}
.p-breadcrumb__list{display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;margin:0 auto;max-width:calc(var(--wrap) + var(--gutter)*2);padding:12px var(--gutter);font-size:13px}
.p-breadcrumb a{color:var(--c-text)}
.p-breadcrumb a:hover{color:var(--c-red)}
.p-breadcrumb .fa{font-size:.75em;color:var(--c-border)}
.p-breadcrumb [aria-current]{opacity:.7}

/* 本文＋サイドの2カラムレイアウト（.news-sponsor-layoutと同じトークンを再利用） */
.l-2col{display:grid;grid-template-columns:var(--main-w) var(--side-w);gap:var(--col-gap);align-items:start;max-width:var(--wrap);margin-inline:auto}
@media(max-width:991px){.l-2col{grid-template-columns:1fr;gap:30px}}

/* 見出し等を2列に並べて見せる簡易グリッド（パターンライブラリのデモ用） */
.c-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:767px){.c-grid-2{grid-template-columns:1fr;gap:30px}}

/* 本文見出し：大見出し（左寄せ＋下線） */
.c-h2{font-size:23px;font-weight:700;letter-spacing:.05em;padding-bottom:14px;margin-bottom:20px;border-bottom:2px solid var(--c-border)}

/* 本文見出し：中見出し（赤い左ボーダー） */
.c-h3{padding-left:12px;margin-bottom:14px;font-size:19px;font-weight:700;letter-spacing:.05em;border-left:4px solid var(--c-red)}

/* 本文見出し：小見出し（赤ドット） */
.c-h4{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:16px;font-weight:700;letter-spacing:.05em}
.c-h4::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-red);flex:none}

/* 区切り線 */
.c-divider{border:0;border-top:1px solid var(--c-border);margin:0}

/* カラーボックス */
.c-box{padding:16px 20px;border-radius:4px}
.c-box--gray{background:var(--c-gray)}
.c-box--pink{background:var(--c-pink)}

/* 見出し背景色テーブル */
.c-table{width:100%;border-collapse:collapse;font-size:14px}
.c-table th,.c-table td{border:1px solid var(--c-border);padding:10px 14px;text-align:left;vertical-align:middle}
.c-table thead th{background:var(--c-charcoal);color:#fff;font-weight:700}
.c-table tbody tr:nth-child(even){background:var(--c-gray)}

/* エントリー案内ボックス（赤枠＋赤ヘッダー帯） */
.c-infobox{border:2px solid var(--c-red);border-radius:8px;background:#fff;overflow:hidden}
.c-infobox__head{background:var(--c-red);color:#fff;font-size:17px;font-weight:700;line-height:1.5;padding:10px 20px}
.c-infobox__body{display:flex;flex-direction:column;gap:18px;padding:20px}

/* 1行通知（「※定員になり次第、締め切ります。」） */
.c-notice{border:1px solid var(--c-red);border-radius:6px;background:#fff;color:var(--c-red);font-weight:700;text-align:center;padding:10px 16px;font-size:14px}

/* 締切アナウンス風のピンクバナー */
.c-alert--pink{background:var(--c-pink);border:1px solid var(--c-red);border-radius:6px;color:var(--c-red);font-weight:700;text-align:center;line-height:1.7;padding:16px 20px}

/* 注意事項ボックス */
.c-caution{border:1px solid var(--c-red);border-radius:6px;padding:20px 24px;color:var(--c-red);font-size:14px}
.c-caution li:not(:last-child){margin-bottom:8px}

/* ボタンのホバー見た目を静止表示するデモ専用モディファイア（.btn本体の動作には影響しない） */
.btn--hover-demo{transform:translateY(3px);box-shadow:0 2px 0 var(--c-red-shadow)}

/* サイドメニュー */
.c-sidebar__title{padding-bottom:10px;margin-bottom:16px;font-size:17px;font-weight:700;letter-spacing:.05em;border-bottom:3px solid var(--c-red)}
.c-sidebar__list li{border-bottom:1px solid var(--c-border)}
.c-sidebar__list a{display:flex;align-items:center;gap:6px;padding:10px 2px;font-size:14px}
.c-sidebar__list a:hover{color:var(--c-red)}
.c-sidebar__list a .fa{color:var(--c-red);font-size:.8em}