/* 吉備の児島 — 明るい海辺のトーン。参照：舞子ビラ（構成・ループ・一覧）、mamamamamamama（文字と線の出現）、MIKIMOTO（章と夜の対比）、guntû（余白） */
:root{
  --paper:#F6F3EC; --paper2:#ECE7DB; --sky:#DCE8EF; --sea:#1D4A66; --navy:#132F47; --ink:#1E2833;
  --sand:#86673A; --shu:#B4432E; --mute:#5B6570; --line:rgba(19,47,71,.2); --white:#FFFFFF;
  --gut:clamp(20px,5vw,80px);
  --mincho:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --gothic:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-size:15px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--shu);outline-offset:4px}
h1,h2,h3{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
figure{margin:0}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
.en{font-family:var(--serif);font-style:italic;letter-spacing:.02em}
.label{font-family:var(--serif);font-size:15px;letter-spacing:.08em;color:var(--sea)}
.label::before{content:"( ";}
.label::after{content:" )";}
.cap{margin-top:10px;font-size:11px;letter-spacing:.08em;line-height:1.7;color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch{display:inline-block}

/* 紙の粒子感（全体にごく薄く） */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:var(--grain,none)}

/* 読み込み演出：島 → 半島 */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--paper)}
.intro svg{width:min(62vw,420px);height:auto;overflow:visible}
.intro .ring{fill:none;stroke:var(--line);stroke-width:1}
.intro .shima{fill:transparent;stroke:var(--navy);stroke-width:1.2}
.intro .han{fill:var(--shu);opacity:0}
.intro[hidden]{display:none}

/* ヘッダー */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gut) 18px;transition:padding .4s}
.hd .logo{display:flex;flex-direction:column;text-decoration:none;color:var(--white);line-height:1.2}
.hd .logo b{font-family:var(--mincho);font-weight:700;font-size:22px;letter-spacing:.14em}
.hd .logo span{font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.1em}
.hd nav{display:flex;gap:30px;font-size:13px;letter-spacing:.12em;color:var(--white)}
.hd nav a{text-decoration:none;position:relative}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hd nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd.is-solid{background:var(--paper);box-shadow:0 1px 0 var(--line);padding-block:calc(env(safe-area-inset-top,0px) + 12px) 12px}
.hd.is-solid .logo,.hd.is-solid nav{color:var(--navy)}
.menu-btn{display:none;width:48px;height:48px;border:1px solid currentColor;border-radius:50%;background:transparent;color:var(--white);cursor:pointer;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:13px}
.hd.is-solid .menu-btn{color:var(--navy)}
.sheet{position:fixed;inset:0;z-index:55;background:var(--navy);color:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 110px) var(--gut) 48px;overflow:auto}
.sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sheet a{display:flex;align-items:baseline;gap:16px;text-decoration:none;font-family:var(--mincho);font-size:clamp(26px,7vw,40px);line-height:1.5}
.sheet a small{font-family:var(--serif);font-style:italic;font-size:15px;opacity:.7}
@media (max-width:960px){.hd nav{display:none}.menu-btn{display:inline-flex}}

/* ヒーロー：写真が溶け合いながらゆっくり横へ動く */
.kv{position:relative;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:var(--navy);color:var(--white)}
.kv-slides{position:absolute;inset:0}
.kv-slide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.kv-slide.is-on{opacity:1}
.kv-slide img,.kv-slide video{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 9s linear}
.kv-slide.is-on img,.kv-slide.is-on video{transform:scale(1)}
.kv::before{content:"";position:absolute;inset:auto 0 0 0;height:55%;z-index:1;background:linear-gradient(to top,rgba(10,26,40,.55),rgba(10,26,40,0))}
.kv-copy{position:absolute;z-index:2;left:var(--gut);top:calc(env(safe-area-inset-top,0px) + 120px);writing-mode:vertical-rl;font-family:var(--mincho);font-size:clamp(22px,2.6vw,36px);line-height:1.9;letter-spacing:.24em;text-shadow:0 0 24px rgba(10,26,40,.35);margin:0}
.kv-meta{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:calc(clamp(88px,15vw,210px) + 12px);display:flex;justify-content:space-between;align-items:flex-end;gap:4px 24px;flex-wrap:wrap}
.kv-sub{margin:0;font-size:13px;letter-spacing:.16em;display:flex;flex-wrap:wrap;gap:0 1.2em}
.kv-loop{position:absolute;z-index:2;left:0;right:0;bottom:-.18em;overflow:hidden;pointer-events:none}
.kv-loop div{display:flex;width:max-content;animation:moveX 70s linear infinite}
.kv-loop span{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(88px,15vw,220px);line-height:1;white-space:nowrap;padding-right:.5em;color:rgba(255,255,255,.92)}
.kv-thumbs{position:absolute;z-index:3;right:var(--gut);top:50%;transform:translateY(-50%);display:grid;gap:10px}
.kv-thumbs button{display:block;width:56px;aspect-ratio:4/3;padding:0;border:0;background:none;cursor:pointer;opacity:.55;transition:opacity .4s;position:relative;overflow:hidden}
.kv-thumbs button img{width:100%;height:100%;object-fit:cover}
.kv-thumbs button.is-on{opacity:1;outline:1px solid var(--white);outline-offset:3px}
.kv-credit{margin:0;font-size:10px;letter-spacing:.08em;opacity:.85}
@keyframes moveX{to{transform:translateX(-50%)}}
@media (max-width:760px){.kv-thumbs{display:none}}

/* コンセプト：中央の文章と、浮かぶ写真 */
.concept{position:relative;padding-block:clamp(120px,16vw,240px);text-align:center;overflow:hidden}
.concept .label{display:block;margin-bottom:24px}
.concept h2{margin:0 0 48px;font-family:var(--mincho);font-size:clamp(28px,3.6vw,52px);line-height:1.6;letter-spacing:.12em;color:var(--navy)}
.concept p{margin:0 auto;max-width:31em;font-size:clamp(15px,1.2vw,17px);line-height:2.5}
.floaters{position:absolute;inset:0;pointer-events:none}
.floaters figure{position:absolute;box-shadow:0 30px 60px -40px rgba(19,47,71,.6)}
.floaters img{width:100%;height:100%;object-fit:cover}
.f1{width:clamp(120px,15vw,230px);aspect-ratio:3/4;left:4%;top:12%}
.f2{width:clamp(110px,13vw,200px);aspect-ratio:4/3;right:5%;top:18%}
.f3{width:clamp(120px,14vw,220px);aspect-ratio:1;left:9%;bottom:8%}
.f4{width:clamp(130px,16vw,250px);aspect-ratio:3/2;right:8%;bottom:10%}
@media (max-width:760px){.floaters{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:56px;padding-inline:var(--gut)}.floaters figure{position:static;width:auto}.f1,.f3{aspect-ratio:3/4}.f2,.f4{aspect-ratio:3/4}}

/* 写真の帯（ループ） */
.ribbon{overflow:hidden;padding-block:8px}
.ribbon-track{display:flex;gap:12px;width:max-content;animation:moveX 90s linear infinite}
.ribbon-track figure{height:clamp(180px,24vw,340px);flex-shrink:0}
.ribbon-track img{height:100%;width:auto;object-fit:cover}
.ribbon-track .w{aspect-ratio:3/2}.ribbon-track .t{aspect-ratio:3/4}.ribbon-track .p{aspect-ratio:2.34/1}

/* 見出しの共通 */
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:clamp(40px,6vw,80px)}
.sec-head .en-big{font-family:var(--serif);font-style:italic;font-size:clamp(48px,7vw,104px);line-height:1;color:var(--sea)}
.sec-head h2{margin:0;font-family:var(--mincho);font-size:clamp(20px,1.8vw,26px);letter-spacing:.18em;color:var(--navy)}
.center{text-align:center;align-items:center}

/* 物語：六つの章（重なってくるカード） */
.story{padding-block:clamp(110px,14vw,200px) 0}
.chapters{position:relative}
.chapter{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;background:var(--paper);border-top:1px solid var(--line)}
.chapter:nth-child(even){background:var(--paper2)}
.chapter .wrap{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,110px);align-items:center;padding-block:clamp(72px,9vw,120px)}
.chapter:nth-child(even) .wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.chapter:nth-child(even) .ch-media{order:2}
.ch-media{position:relative}
.ch-media .main{aspect-ratio:4/5;overflow:hidden}
.ch-media .main img,.ch-media .main video,.ch-media .main .gfx{width:100%;height:100%;object-fit:cover}
.ch-media .sub{position:absolute;width:42%;aspect-ratio:1;right:-8%;bottom:-8%;overflow:hidden;border:6px solid var(--paper)}
.chapter:nth-child(even) .ch-media .sub{right:auto;left:-8%;border-color:var(--paper2)}
.ch-media .sub img,.ch-media .sub video{width:100%;height:100%;object-fit:cover}
.ch-body{display:flex;flex-direction:column;gap:20px;max-width:30em}
.ch-no{display:flex;align-items:baseline;gap:18px;color:var(--sea)}
.ch-no .n{font-family:var(--serif);font-size:18px;letter-spacing:.1em}
.ch-no .k{font-family:var(--mincho);font-size:clamp(88px,10vw,150px);line-height:.9;color:var(--navy)}
.ch-no .e{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px)}
.ch-no .e::before{content:"[ ";}
.ch-no .e::after{content:" ]";}
.ch-body h3{margin:0;font-family:var(--mincho);font-size:clamp(24px,2.4vw,34px);line-height:1.6;letter-spacing:.12em;color:var(--navy)}
.ch-body p{margin:0;line-height:2.2}
.ch-body .year{font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:var(--sand)}
.gfx-salt{background-color:#EEF0EE;background-image:repeating-linear-gradient(0deg,rgba(29,74,102,.16) 0 1px,transparent 1px 11px),radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%)}
.gfx-salt{display:grid;place-items:center;font-family:var(--mincho);font-size:clamp(120px,14vw,220px);color:var(--navy)}
@media (max-width:860px){
  .chapter{position:relative;min-height:0}
  .chapter .wrap,.chapter:nth-child(even) .wrap{grid-template-columns:1fr}
  .chapter:nth-child(even) .ch-media{order:0}
  .ch-media .sub{width:38%;right:-2%;bottom:-6%}
  .chapter:nth-child(even) .ch-media .sub{left:-2%}
}

/* 二つのまち */
.towns{padding-block:clamp(110px,14vw,200px)}
.towns-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px)}
.town{border-top:1px solid var(--navy);padding-top:28px}
.town .en-big{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(56px,7vw,112px);line-height:1;color:var(--sea)}
.town h3{margin:8px 0 28px;font-family:var(--mincho);font-size:clamp(22px,2vw,28px);letter-spacing:.2em;color:var(--navy)}
.town h3 small{font-family:var(--gothic);font-size:12px;letter-spacing:.14em;color:var(--mute);margin-left:12px}
.town ol{list-style:none;margin:0;padding:0;counter-reset:s}
.town li{counter-increment:s;display:grid;grid-template-columns:3em minmax(0,1fr);gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
.town li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:15px;color:var(--sand);grid-row:span 2;padding-top:4px}
.town li b{font-family:var(--mincho);font-weight:500;font-size:19px;letter-spacing:.1em;color:var(--navy)}
.town li span{font-size:13px;line-height:1.8;color:var(--mute)}
@media (max-width:860px){.towns-grid{grid-template-columns:1fr}}

/* 地図 */
.map{background:var(--sky);padding-block:clamp(110px,14vw,200px)}
.map-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,100px);align-items:center}
.map-text p{margin:0 0 16px}
.paper{display:block;background:var(--white);padding:12px;box-shadow:0 40px 80px -50px rgba(19,47,71,.7);transform:rotate(-1.4deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.paper:hover{transform:rotate(0) scale(1.01)}
@media (max-width:860px){.map-grid{grid-template-columns:1fr}}

/* 味わう */
.taste{padding-block:clamp(110px,14vw,200px)}
.taste-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px)}
.dish{display:grid;gap:20px;align-content:start}
.dish-media{position:relative;margin-bottom:28px}
.dish-media .main{aspect-ratio:3/2;overflow:hidden}
.dish-media .main img{width:100%;height:100%;object-fit:cover}
.dish-media .sub{position:absolute;width:40%;aspect-ratio:3/2;right:-5%;bottom:-14%;overflow:hidden;border:6px solid var(--paper);box-shadow:0 24px 48px -32px rgba(19,47,71,.6)}
.dish-media .sub img{width:100%;height:100%;object-fit:cover}
.dish-head{display:flex;align-items:flex-end;gap:20px}
.dish-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.dish-pair img{width:100%;aspect-ratio:3/2;object-fit:cover}
.dish .k{font-family:var(--mincho);font-size:clamp(76px,8vw,128px);line-height:.9;color:var(--navy)}
.dish.t .k{color:var(--shu)}
.dish h3{margin:0 0 .3em;font-family:var(--mincho);font-size:clamp(22px,2vw,28px);letter-spacing:.14em;color:var(--navy)}
.dish h3 .en{display:block;font-size:15px;color:var(--sea);letter-spacing:.06em}
.dish p{margin:0}
@media (max-width:860px){.taste-grid{grid-template-columns:1fr;gap:72px}.dish-media .sub{right:-2%}}

/* 行事暦 */
.events{padding-block:0 clamp(110px,14vw,200px)}
.cal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--navy)}
.cal li{min-height:360px;padding:14px 8px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.cal li:first-child{border-left:1px solid var(--line)}
.cal .m{font-family:var(--serif);font-size:18px;color:var(--sea)}
.cal .ev{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:8px}
.cal .ev span{writing-mode:vertical-rl;font-family:var(--mincho);font-size:15px;line-height:1.5;letter-spacing:.1em}
.cal .kj{color:var(--navy)}
.cal .tm{color:var(--shu)}
.legend{display:flex;gap:24px;justify-content:center;margin-top:-40px;margin-bottom:40px;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
@media (max-width:860px){
  .cal{grid-template-columns:1fr}
  .cal li,.cal li:first-child{min-height:0;flex-direction:row;align-items:baseline;gap:20px;border:0;border-bottom:1px solid var(--line);padding:14px 0}
  .cal li.none{display:none}
  .cal .m{width:3em;flex-shrink:0}
  .cal .ev{flex-direction:column;gap:4px}
  .cal .ev span{writing-mode:horizontal-tb}
}

/* 夜：アクセス */
.night{position:relative;color:var(--paper);background:#0B1826;overflow:hidden;isolation:isolate;padding-block:clamp(120px,15vw,220px)}
.night .bg{position:absolute;inset:-10% 0;z-index:-2}
.night .bg img,.night .bg video{width:100%;height:100%;object-fit:cover}
.night::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,20,32,.62)}
.night .sec-head .en-big{color:#CFE0EA}
.night .sec-head h2{color:var(--paper)}
.rows{margin:0;display:grid;border-top:1px solid rgba(246,243,236,.35)}
.rows div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(246,243,236,.35)}
.rows dt{font-family:var(--mincho);font-size:clamp(18px,1.8vw,24px);letter-spacing:.1em}
.rows dd{margin:0;font-size:13px}
.rows .t{text-align:right;font-family:var(--serif);font-size:clamp(34px,3.6vw,52px);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.rows .t small{font-family:var(--gothic);font-size:12px;margin-right:6px}
.night .note{margin:24px 0 0;font-size:12px;opacity:.8}
@media (max-width:760px){.rows div{grid-template-columns:minmax(0,1fr) auto}.rows .how{grid-column:1/-1;order:3}}

/* フッター */
.ft{padding-block:clamp(100px,12vw,160px) calc(env(safe-area-inset-bottom,0px) + 40px);background:var(--paper)}
.ft-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,100px)}
.ft .logo-big b{display:block;font-family:var(--mincho);font-weight:700;font-size:clamp(34px,4vw,56px);letter-spacing:.16em;color:var(--navy)}
.ft .logo-big span{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--sea)}
.ft p{margin:20px 0 0;font-size:13px;line-height:2}
.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:14px}
.links a .arw{display:inline-block;width:28px;height:1px;background:var(--sea);position:relative;transition:width .4s}
.links a .arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--sea);border-right:1px solid var(--sea);transform:rotate(45deg)}
.links a:hover .arw{width:40px}
.credits{margin:40px 0 0;padding:0;list-style:none;font-size:11px;line-height:1.9;color:var(--mute)}
.ft-bottom{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:var(--mute)}
.ft-bottom a{text-decoration:none}
.ft-bottom a:hover{color:var(--sea)}
@media (max-width:860px){.ft-top{grid-template-columns:1fr}.links{grid-template-columns:1fr}}

/* 資料室（ダウンロード専用ページ） */
.dl-page{min-height:100svh;display:flex;flex-direction:column;padding-top:calc(env(safe-area-inset-top,0px) + 140px)}
.dl-page .hd .logo,.dl-page .hd nav{color:var(--navy)}
.dl-head{padding-bottom:40px;border-bottom:1px solid var(--navy)}
.dl-head .en-big{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(56px,8vw,120px);line-height:1;color:var(--sea)}
.dl-head h1{margin:10px 0 0;font-family:var(--mincho);font-size:clamp(22px,2vw,28px);letter-spacing:.2em;color:var(--navy)}
.dl-head p{margin:16px 0 0}
.dl-list{list-style:none;margin:0;padding:0}
.dl-list li{display:grid;grid-template-columns:3em minmax(0,1fr) auto;gap:clamp(12px,3vw,40px);align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.dl-list .no{font-family:var(--serif);font-size:16px;color:var(--sand)}
.dl-list .title{display:block;font-family:var(--mincho);font-size:clamp(18px,1.8vw,22px);letter-spacing:.08em;color:var(--navy)}
.dl-list .title .nw{white-space:nowrap}
.dl-list .meta{display:block;margin-top:4px;font-size:12px;color:var(--mute)}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 26px;border:1px solid var(--sea);border-radius:999px;color:var(--sea);text-decoration:none;font-size:14px;white-space:nowrap;transition:background .3s,color .3s}
.dl-btn:hover{background:var(--sea);color:var(--paper)}
.dl-empty{padding:48px 0;color:var(--mute);display:block!important}
.dl-note{margin-top:auto;padding-block:56px calc(env(safe-area-inset-bottom,0px) + 40px);font-size:12px;color:var(--mute)}
@media (max-width:640px){.dl-list li{grid-template-columns:minmax(0,1fr)}.dl-list .no{display:none}}

@media (prefers-reduced-motion:reduce){
  .kv-loop div,.ribbon-track{animation:none}
  .kv-slide,.kv-slide img{transition:none}
  .kv-slide img,.kv-slide video{transform:none}
  .paper{transition:none}
}