/* ============================================================
   Quiet Luxe テーマ（style.css の上に重ねる。外すと、元の見た目に戻る）
   参考：離島ラグジュアリーヴィラのサイトに共通する設計
   ・余白を大きく、1画面の情報を少なく
   ・箱（影・枠）をなくし、細い線で区切る
   ・色は、象牙色・深い墨緑・真鍮色の3つに絞る
   ・写真は角を丸めず、大きく、1節に主役を1枚
   ・見出しは細い明朝、英字は小さな大文字で添える
   ※ 予約サイトではなく、プロジェクトの説明サイト。予約ボタンは置かず、
     「視察・協業のご相談」を導線にする。
   ============================================================ */
:root{
  --ink:#2f2926; --sea:#7a584c; --sea-d:#ead9d0; --sand:#f3ede8; --cream:#fbf8f5; --sun:#96562e; --mute:#6c6058;
  --line:#e0d1c6; --brass-l:#96562e; --dk:#ecdcd3; --dk2:#e6d4ca;
}
body{background:var(--cream);font-weight:300;line-height:2;letter-spacing:.02em}

/* ---- 余白とリズム ---- */
.sec{padding:clamp(96px,11vw,160px) 0}
.wrap{max-width:1160px;padding:0 clamp(20px,4vw,48px)}
.lead{max-width:36em;font-size:1rem;line-height:2.1;color:#3b474b}
.dark .lead,.sec.dark .lead{color:#d6e0e1}
.small,.note{letter-spacing:.04em}

/* ---- 見出し：細い明朝、ゆったり ---- */
h2{font-weight:400;font-size:clamp(1.7rem,3.1vw,2.45rem);line-height:1.75;letter-spacing:.09em;margin-bottom:34px}
h1{font-weight:400}
.label{display:flex;align-items:center;gap:16px;letter-spacing:.34em;font-size:.78rem;text-transform:uppercase;color:var(--sun);margin-bottom:26px}
.label::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.dark .label,.symbol-text .label{color:var(--brass-l)}

/* ---- ナビ：細く静かに ---- */
.nav{padding:20px clamp(20px,3.4vw,44px)}
.nav nav{gap:34px;font-size:.78rem;letter-spacing:.16em}
.cta{border-radius:0;padding:9px 20px;letter-spacing:.16em}
.logo{letter-spacing:.3em}
.nav.solid,.sub .nav{background:rgba(250,248,244,.92);box-shadow:0 1px 0 rgba(0,0,0,.05)}

/* ---- ヒーロー：画像を主役に、文字は少なく ---- */
.hero-shade{background:linear-gradient(180deg,rgba(8,22,27,.42) 0%,rgba(8,22,27,.08) 32%,rgba(8,22,27,.18) 60%,rgba(8,22,27,.7) 100%)}
.hero-text{bottom:11vh;padding:0 clamp(24px,7vw,110px)}
.hero h1{font-weight:400;letter-spacing:.14em;line-height:1.55;font-size:clamp(2.2rem,5.6vw,4.4rem)}
.eyebrow{letter-spacing:.5em;font-size:.78rem}
.hero-en{margin-top:18px;font-family:var(--en);font-size:clamp(.95rem,1.6vw,1.2rem);letter-spacing:.28em;opacity:.92;font-style:italic}
.hero-sub{margin-top:26px;letter-spacing:.12em;line-height:2;max-width:38em}
.hbtn{border-radius:0;letter-spacing:.2em;padding:13px 30px;font-size:.82rem;background:transparent;border-color:rgba(255,255,255,.8)}
.hbtn:hover{background:#fff;color:var(--sea-d)}
.hbtn.ghost{border-color:rgba(255,255,255,.4)}

/* ---- 名前の帯：静かな墨色 ---- */
.band{background:var(--sea-d);padding:44px 0}
.name b{letter-spacing:.4em;font-weight:400}

/* ---- 箱をなくし、細い線で区切る ---- */
.card,.stat,.pillars3 a,.steps4>div,.steps4.five a,.steps>div,.box,.compare{
  background:transparent;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:30px 4px 8px;transform:none}
.card:hover,.pillars3 a:hover,.steps4.five a:hover{transform:none}
.card h3,.steps4 h3,.pillars3 b{font-weight:400;letter-spacing:.07em}
.card small,.stat b,.steps4 b,.pillars3 small{letter-spacing:.24em}
.cards{gap:clamp(28px,4vw,64px)}
.cards.four{gap:clamp(24px,3vw,44px)}
.card.photo{border-top:0;padding:0}
.card.photo img{margin-bottom:26px}
.card.photo h3,.card.photo p{padding:0}
.dark .card,.card.dk,.sec.dark .card{background:transparent;border-top:1px solid rgba(255,255,255,.22)}
.compare{padding:30px 4px 8px}
.stat b{font-weight:400;color:var(--sea)}
.stats{gap:clamp(24px,3vw,48px)}
.pillars3{padding-top:96px}
.pillars3 a{padding:34px 4px 8px}
.pillars3 b{font-size:1.5rem;color:var(--ink)}

/* ---- 写真：角を丸めず、影もつけず ---- */
img,.photos img,.gallery img,figure img{border-radius:0 !important}
.photos img,.photos figure img{box-shadow:none}
.gallery{gap:14px}
figcaption{letter-spacing:.06em;font-size:.74rem}

/* ---- 写真の帯：全幅で、余白のあとに ---- */
.break{min-height:70vh;height:70vh}
.break p{font-weight:400;letter-spacing:.2em;line-height:2.1}
.break::before{background:rgba(8,22,27,.3)}

/* ---- 暗い節：墨色で、静かに ---- */
.sec.dark{background:var(--sea-d)}
.symbol{background:var(--sea-d)}
.symbol-text h2{font-weight:400;letter-spacing:.1em}
.rooms div{border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.28);padding:26px 4px 8px;text-align:left}
.rooms h3{font-weight:400}
.spec div{border-bottom-color:rgba(255,255,255,.2)}

/* ---- 淡い節の背景は、ごく薄く ---- */
.sec.sand{background:var(--sand)}
.sand .loop,.loop{background:transparent;border-top:1px solid var(--line);padding:36px 4px 0}
.sand .loop{background:transparent}

/* ---- ボタン・リンク ---- */
.btn{background:transparent;color:var(--sea-d);border:1px solid var(--sea-d);border-radius:0;letter-spacing:.2em;padding:15px 40px;font-size:.88rem}
.btn:hover{background:var(--sea-d);color:#fff}
.contact .btn{background:var(--sea-d);color:#fff}
.contact .btn:hover{background:transparent;color:var(--sea-d)}
.more a{border-bottom:1px solid var(--sun);padding-bottom:5px;letter-spacing:.1em;color:var(--sea)}

/* ---- ページ見出し ---- */
.pagehead{background:var(--sand);padding:clamp(150px,18vw,220px) 0 clamp(60px,8vw,100px)}
.pagehead h1{letter-spacing:.12em}

/* ---- ニュース・フォーム・目次 ---- */
.news-item{padding:28px 4px}
.news-item .tag{border-radius:0;letter-spacing:.14em}
.tabs button{border-radius:0;letter-spacing:.12em}
.form input,.form select,.form textarea{border-radius:0}
.toc{background:rgba(250,248,244,.94)}
.toc .wrap{gap:4px 22px}

/* ---- 引用：控えめに ---- */
.quote{font-weight:400;letter-spacing:.22em}

/* ---- フッター ---- */
footer{background:var(--sea-d);padding:72px 24px}

/* ---- スマホ ---- */
@media (max-width:900px){
  .sec{padding:clamp(72px,16vw,110px) 0}
  .hero-text{bottom:9vh}
  .nav nav{background:var(--sea-d)}
  .pillars3{padding-top:64px}
}

/* ---- 読みやすさの補正 ---- */
.hero-shade{background:linear-gradient(90deg,rgba(8,22,27,.66) 0%,rgba(8,22,27,.3) 38%,rgba(8,22,27,0) 68%),linear-gradient(180deg,rgba(8,22,27,.4) 0%,rgba(8,22,27,.05) 30%,rgba(8,22,27,.1) 58%,rgba(8,22,27,.68) 100%)}
.hero h1,.hero-en,.hero-sub,.eyebrow{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero-en{font-style:normal;letter-spacing:.24em;font-size:clamp(.85rem,1.3vw,1.05rem)}
.symbol .lead,.symbol-text .lead,.symbol-text p{color:#d9e3e4}
.symbol-sub figcaption{color:#a9c0c3}
.dark .more a,.symbol .more a{color:#fff}

/* ---- プロジェクト始動のお知らせ・紹介サイトの注記 ---- */
.hero-badge{display:inline-block;margin-bottom:18px;padding:5px 16px;border:1px solid rgba(255,255,255,.7);font-size:.74rem;letter-spacing:.32em;text-shadow:none}
.intro-band{background:var(--cream);padding:clamp(80px,9vw,130px) 0 clamp(40px,5vw,70px)}
.intro-band .wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,6vw,90px);align-items:end}
.intro-band h2{margin-bottom:26px}
.ib-note{border-top:1px solid var(--sun);padding:22px 4px 6px}
.ib-note b{display:block;font-family:var(--en);letter-spacing:.3em;font-size:.82rem;color:var(--sun);font-weight:500;margin-bottom:8px}
.ib-note p{font-size:.92rem;line-height:2}
.ib-note strong{font-weight:500;color:var(--ink);background:linear-gradient(transparent 62%,rgba(166,127,78,.22) 62%)}
.site-note{margin-top:22px;font-size:.8rem;color:var(--mute);letter-spacing:.06em;padding-left:14px;border-left:2px solid var(--sun)}
@media (max-width:900px){.intro-band .wrap{grid-template-columns:1fr}}
.intro-band .wrap{grid-template-columns:1.75fr 1fr}
.intro-band h2{font-size:clamp(1.45rem,2.5vw,2rem);letter-spacing:.07em;white-space:nowrap}
.intro-band .lead{max-width:38em}
@media (max-width:900px){.intro-band h2{white-space:normal}}
/* 低い画面でも、冒頭の文字がメニューに重ならないように */
.hero-text{max-height:calc(100% - 110px);overflow:visible}
@media (max-height:760px){.hero h1{font-size:clamp(2rem,4.6vw,3.4rem)}.hero-sub{margin-top:16px}.hero-cta{margin-top:18px}.hero .scroll{display:none}}


/* ---- 配色：「夕岩」調整版3（2026-10-10 決定）。濃い面をやめ、淡い赤茶の面＋濃い茶の文字 ---- */
.sec.dark,.symbol{background:var(--dk);color:var(--ink)}
.sec.dark h2,.sec.dark h3,.symbol-text h2,.card.dk h3{color:#2f2926}
.dark .lead,.sec.dark .lead,.symbol .lead,.symbol-text .lead,.symbol-text p,.card.dk p,.sec.dark p{color:#4a3d37}
.dark .label,.symbol-text .label,.card.dk small,.rooms small{color:#a8683f}
.sec.dark .card,.card.dk{border-top:1px solid #d6c3b6}
.sec.dark .note,.symbol-sub figcaption,.sec.dark figcaption,.togyu-hero figcaption,.togyu-photos figcaption{color:#87766d}
.dark .more a,.symbol .more a{color:#7a584c;border-color:#a8683f}
.card.big .num{color:#7a584c}.card.big .num span{color:#2f2926}
.quote{color:#2f2926}.quote span{color:#4a3d37}
.rooms div{border-top:1px solid #d6c3b6}.rooms h3,.rooms p{color:#2f2926}
.spec div{border-bottom-color:#d6c3b6}.spec dt{color:#87766d;opacity:1}.spec dd{color:#2f2926}
.band{background:var(--dk2);color:#2f2926}.name span{color:#5a4a43;opacity:1}
footer{background:var(--dk2);color:#5a4a43}footer .logo{color:#2f2926}footer .small{color:#87766d}footer a{color:#2f2926}

/* ============ 文字組みの調整（2026-10-10） ============ */
/* 見出しを細く、サイズも控えめに（太く重たく見えないように） */
h1,h2,h3,.pagehead h1,.hero h1,.symbol-text h2,.card h3,.box h3{font-family:var(--serif)}
.pagehead h1{font-weight:300;font-size:clamp(1.75rem,3.3vw,2.5rem);letter-spacing:.1em;line-height:1.6;margin-bottom:22px}
h2{font-weight:300;font-size:clamp(1.55rem,2.7vw,2.15rem);letter-spacing:.08em;line-height:1.8}
.hero h1{font-weight:300}
.symbol-text h2{font-weight:300;font-size:clamp(1.7rem,3.2vw,2.6rem)}
.card h3,.steps4 h3,.pillars3 b,.rooms h3,.loop h3,h3.sub{font-weight:400}
.quote,.break p{font-weight:300}
.label{font-weight:400}

/* 日本語の折り返し：語・文節の区切りで折り返す（単語の途中で切れないように） */
html{line-break:strict;overflow-wrap:break-word}
body{word-break:auto-phrase}
h1,h2,h3,h4,p,li,dd,dt,figcaption,blockquote,.lead,.note,.small,.hero-sub,.hero-en,.card p,.news-item .body,.sum,.src,.plain li,.points li,span{word-break:auto-phrase;line-break:strict;text-wrap:pretty}
h1,h2,h3,.hero h1,.break p,.quote,.pagehead h1{text-wrap:balance}
/* 句読点や閉じ括弧が行頭に来ない・最終行が1文字にならない */
p,li,dd,figcaption{hanging-punctuation:allow-end;orphans:2;widows:2}
/* 切れてほしくない語のまとまり（折り返しで途中で切れない。長い語は、前後の文節で折り返す） */
.nb{display:inline;white-space:nowrap}
.nb .nb{white-space:inherit}

/* 切れない塊は、親が block でも inline のまま扱う（短い塊ごとに改行されないように） */
.nb{display:inline !important;white-space:nowrap}
.pillars3 span.nb,.hero-sub .nb,.lead .nb,p .nb,li .nb,dd .nb,figcaption .nb{display:inline !important}

/* ---- 表（項目名と内容の2列）を整える ---- */
.plain li,.points li{overflow-wrap:break-word}
.spec div{grid-template-columns:7.5em 1fr;column-gap:1.4em}
.spec dt{white-space:nowrap}
.plain li{display:grid;grid-template-columns:8.5em 1fr;column-gap:1.4em;align-items:baseline}
.plain li b{min-width:0;white-space:nowrap;font-weight:400}
.points li b{display:block;margin-bottom:4px}
@media (max-width:640px){
  .plain li{grid-template-columns:1fr;row-gap:2px}
  .plain li b{white-space:normal}
  .spec div{grid-template-columns:6.5em 1fr}
}

/* ---- スマホ幅：横にはみ出さないように（2列の帯・ご注意・三つの柱） ---- */
@media (max-width:900px){
  .name{grid-template-columns:1fr;gap:18px}
  .name span{display:block}
  .intro-band .wrap{grid-template-columns:minmax(0,1fr)}
  .ib-note{margin-top:8px}
  .pillars3 .wrap{grid-template-columns:minmax(0,1fr)}
  .pillars3 span{overflow-wrap:anywhere}
  .name>div,.ib-main,.ib-note{min-width:0}
}
.intro-band .wrap>*,.pillars3 .wrap>*,.name>div{min-width:0}
.ib-note p,.name span,.pillars3 span{overflow-wrap:break-word}

/* ---- 徳之島の地図 ---- */
.tmap-fig{margin:0;max-width:520px;justify-self:center;width:100%}
.tmap{display:block;width:100%;height:auto;background:#e7eef0}
.tmap-fig figcaption{font-size:.76rem;color:var(--mute);margin-top:10px;letter-spacing:.06em;text-align:center}
.tm-sea{fill:#e4ecef}
.tm-land{fill:#f6f0e6;stroke:#8a6760;stroke-width:1.4;stroke-linejoin:round}
.tm-halo{fill:rgba(168,104,63,.2)}
.tm-dot-k{fill:#a8683f;stroke:#fff;stroke-width:2.5}
.tm-dot{fill:#7a584c;stroke:#fff;stroke-width:2}
.tm-sq{fill:#fff;stroke:#7a584c;stroke-width:2}
.tm-t{font-family:var(--sans);font-size:15px;fill:#2f2926}
.tm-tt{font-weight:500}
.tm-lead{stroke:#a8683f;stroke-width:1.4}
.tm-card{fill:#fff;stroke:#a8683f;stroke-width:1.2}
.tm-kt{font-family:var(--serif);font-size:19px;font-weight:500;fill:#2f2926}
.tm-ks{font-family:var(--sans);font-size:12.5px;fill:#6b5a50}
.tm-nar{fill:#7a584c}
.tm-ns{font-family:var(--sans);font-size:12px;fill:#6b5a50}
.tm-sl{stroke:#6b5a50;stroke-width:1.5}
@media (max-width:640px){.tm-t{font-size:17px}.tm-kt{font-size:21px}.tm-ks{font-size:14px}}
.tmap-fig{min-width:0;overflow:hidden}
.tmap{max-width:100%}
.split>*{min-width:0}
/* 地図の文字：スマホでも読める大きさに（図が縮小される分、文字は大きく） */
.tm-t{font-size:16px}
.tm-kt{font-size:21px}.tm-ks{font-size:13.5px}.tm-ns{font-size:13px}
@media (max-width:640px){.tm-t{font-size:22px}.tm-kt{font-size:27px}.tm-ks{font-size:18px}.tm-ns{font-size:17px}.tm-lead{stroke-width:2}}


/* ============ 読みやすさの補正（2026-10-10：白い文字・薄い注記の実測にもとづく） ============ */
/* 淡い面に載るリンク・ボタン・注記は、濃い色にする。白い文字は使わない */
.sec.dark a,.symbol a,.sec.dark .more a,.symbol .more a,.dark .more a{color:var(--sea);border-color:var(--sun)}
.sec.dark a:hover,.more a:hover{color:var(--ink)}
.contact .btn,.btn{background:var(--sea);color:#fff;border:1px solid var(--sea)}
.contact .btn:hover,.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.sec.contact a.btn{color:#fff}
.form .btn{background:var(--sea);color:#fff;border:1px solid var(--sea)}
.form .btn:hover{background:var(--ink);color:#fff}
.news-item .tag{background:var(--sea);color:#fff}
.news-item .tag.tokunoshima{background:var(--sun);color:#fff}
/* 写真の説明・注記・出典：濃いめのグレー（コントラスト4.5以上） */
figcaption,.note,.small,.src,.sum,.news-item time,.news-item .src,.spec dt,.rooms small,.site-note,.tmap-fig figcaption,.rabbit-photos figcaption small{color:#65594f}
.sec.dark figcaption,.symbol figcaption,.symbol-sub figcaption,.togyu-hero figcaption,.togyu-photos figcaption,.sec.dark .note,.sec.dark .small,.sec.dark .spec dt{color:#5a4d44}
.plain li b,.points li b{color:var(--sea)}
.label,.card small,.pillars3 small,.steps4 b,.stat b em{color:var(--sun)}
.ib-note b,.steps4 .next b{color:#6c6058}
.steps4 .next b{color:#6c6058}
footer,footer .small,footer p,footer a{color:#5a4d44}
footer .logo{color:var(--ink)}
.bar .out,.stat b{color:var(--sun)}
.stat b{color:var(--sea)}
.name span,.hero-sub{opacity:1}
.name span{color:#5a4d44}

/* 説明文・注記は、半透明にしない（薄くなって読みにくいため）。色そのものを濃くして調整する */
figcaption,.note,.small,.src,.sum,.spec dt,.rooms small,.site-note,.news-item time,.tmap-fig figcaption,
.symbol-sub figcaption,.togyu-hero figcaption,.togyu-photos figcaption,.rabbit-photos figcaption,.rabbit-photos figcaption small,
.sec.dark .note,.sec.dark figcaption,.sec.dark .small,.card.big p,.name span,.hero-sub{opacity:1 !important}

/* ---- 地図：世界自然遺産・国立公園の区域 ---- */
.tm-park{fill:#d9e6d2;fill-opacity:.92;stroke:#9bb78f;stroke-width:.9;fill-rule:evenodd;stroke-linejoin:round}
.tm-buf{fill:#a9c99b;fill-opacity:.95;stroke:#7fa673;stroke-width:.8;fill-rule:evenodd;stroke-linejoin:round}
.tm-heri{fill:#4f8a5e;fill-opacity:.95;stroke:#3d6f4a;stroke-width:.9;fill-rule:evenodd;stroke-linejoin:round}
.tm-coast{fill:none;stroke:#8a6760;stroke-width:1.3;stroke-linejoin:round}
.tm-lt{font-family:var(--serif);font-size:15px;fill:#2f2926}
.tm-ls{font-family:var(--sans);font-size:12.5px;fill:#2f2926}
.tm-ln{font-family:var(--sans);font-size:10.5px;fill:#5a4d44}
@media (max-width:640px){.tm-lt{font-size:19px}.tm-ls{font-size:16px}.tm-ln{font-size:13.5px}}
@media (max-width:640px){.tm-lt{font-size:17px}.tm-ls{font-size:14px}.tm-ln{font-size:12px}}

/* 岩の写真：縦長（岩塔）を切らずに見せる */
.rg .a,.rg .b{height:440px}
.rg .b img{object-position:50% 28%}
.rg .a img{object-position:50% 50%}
@media (max-width:900px){.rg .a,.rg .b{height:300px}}

/* 空港の写真 */
.airport-fig{margin:28px 0 0;max-width:34em}
.airport-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.airport-fig figcaption{margin-top:8px}

/* 集落の小径：縦長の写真を4枚 */
.lanes4{grid-template-columns:repeat(4,1fr) !important;gap:14px;align-items:start}
.lanes4 img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
@media (max-width:900px){.lanes4{grid-template-columns:repeat(2,1fr) !important}}
/* 小径の縦長写真は、切り取らず3:4のまま表示（他の写真用の横長指定に負けないように） */
.photos.lanes4 figure img,.lanes4 img{aspect-ratio:3/4 !important;height:auto !important;width:100%;object-fit:cover}


/* ---- 奄美トレイル ---- */
.trail-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:8px}
.trail-grid>*{min-width:0}
.trail-side{border-top:1px solid var(--sun);padding:22px 4px 6px;background:transparent}
.trail-side b{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:.08em;color:var(--sea);margin-bottom:8px}
.trail-side ul{list-style:none}
.trail-side li{position:relative;padding:8px 0 8px 1.1em;font-size:.88rem;line-height:1.9;border-bottom:1px dashed var(--line)}
.trail-side li:last-child{border:0}
.trail-side li::before{content:"";position:absolute;left:0;top:1.25em;width:6px;height:6px;border-radius:50%;background:var(--sun)}
@media (max-width:900px){.trail-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- 生命力の島（空港・トライアスロン・子宝と長寿） ---- */
.vital-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:12px}
.vital-grid>*{min-width:0}
.vital-photo{margin:0}
.vital-photo img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.vital-photo figcaption{margin-top:10px}
.vital-points{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.vital-points li{display:grid;grid-template-columns:4.5em 1fr;column-gap:1.2em;padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.85}
.vital-points b{font-family:var(--serif);font-weight:400;font-size:1.1rem;letter-spacing:.1em;color:var(--sea)}
@media (max-width:900px){.vital-grid{grid-template-columns:minmax(0,1fr)}.vital-points li{grid-template-columns:3.6em 1fr}}

/* ---- 島の食材 ---- */
.food-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:8px}
.food-grid>*{min-width:0}
.food-main{margin-top:26px;border-top:1px solid var(--sun);padding:22px 4px 6px}
.food-main small{font-family:var(--en);letter-spacing:.24em;color:var(--sun);font-size:.8rem}
.food-main h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;letter-spacing:.06em;margin:4px 0 10px;color:var(--ink)}
.food-main p{font-size:.92rem;line-height:2}
.food-list{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.food-list li{display:grid;grid-template-columns:7em 1fr;column-gap:1.2em;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.85}
.food-list b{font-weight:400;color:var(--sea)}
.food-photo{margin:0}
.food-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.food-photo figcaption{margin-top:10px}
@media (max-width:900px){.food-grid{grid-template-columns:minmax(0,1fr)}.food-list li{grid-template-columns:5.5em 1fr}.food-photo img{aspect-ratio:3/2}}

/* ============ 「長寿と子宝の島」を整理（2026-10-11） ============ */
/* 3枚のカードを、同じ構成（ラベル→見出し→大きな数字→表→ひとこと）にそろえる */
.vital-cards{align-items:stretch}
.vital-cards .card.big{display:flex;flex-direction:column}
.stat{margin:8px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);min-height:5.6em}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,3.4vw,2.9rem);line-height:1.2;color:var(--sea);letter-spacing:.04em;white-space:nowrap}
.stat b em{font-style:normal;font-size:.42em;margin-left:.3em;color:var(--ink)}
.stat span{display:block;margin-top:6px;font-size:.82rem;color:#5a4d44;letter-spacing:.06em}
.facts{margin:0 0 14px}
.facts div{display:grid;grid-template-columns:4.6em 1fr;column-gap:1em;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.88rem;line-height:1.8}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--sun);letter-spacing:.06em}
.facts dd{color:var(--ink)}
.card.big .cap{margin-top:auto;padding-top:10px;font-size:.84rem;line-height:1.9;color:#4a3d37}
/* 「子は宝」：飾りの線で挟む */
.kodakara{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,32px);margin:56px auto 12px;max-width:560px}
.kodakara b{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:.3em;margin-right:-.3em;color:var(--ink);white-space:nowrap}
.kd-line{flex:1;height:1px;background:var(--sun);opacity:.7}
.kodakara-sub{text-align:center;font-size:.95rem;letter-spacing:.08em;color:#4a3d37;margin:0 auto 36px;max-width:40em}
/* 注記と、島の課題を分ける */
.sec .note{max-width:52em}
.now-box{margin-top:28px;max-width:52em;border-left:2px solid var(--sun);padding:6px 0 6px 18px}
.now-box b{display:block;font-family:var(--serif);font-weight:400;font-size:1rem;letter-spacing:.08em;color:var(--sea);margin-bottom:4px}
.now-box p{font-size:.9rem;line-height:2;color:#4a3d37}
@media (max-width:900px){.stat{min-height:0}.facts div{grid-template-columns:4.2em 1fr}}

/* 町ごとの人口：本物の表（見出し行つき）。スマホでは縦に積む */
table.pop{width:100%;border-collapse:collapse;margin-top:18px;font-size:.88rem}
table.pop caption{caption-side:top;text-align:left;font-size:.78rem;letter-spacing:.1em;color:#65594f;padding-bottom:6px}
table.pop th,table.pop td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:baseline}
table.pop thead th{font-size:.76rem;letter-spacing:.1em;color:#65594f;border-bottom:1px solid var(--sun)}
table.pop tbody th{color:var(--sea);white-space:nowrap}
table.pop td{font-variant-numeric:tabular-nums;color:var(--ink)}
table.pop td:nth-child(2),table.pop td:nth-child(3){text-align:right;white-space:nowrap}
table.pop th:nth-child(2),table.pop th:nth-child(3){text-align:right}
@media (max-width:520px){
  table.pop thead{position:absolute;left:-9999px}
  table.pop,table.pop tbody,table.pop tr,table.pop th,table.pop td{display:block}
  table.pop tr{padding:10px 0;border-bottom:1px solid var(--line)}
  table.pop th,table.pop td{border:0;padding:2px 0;text-align:left !important}
  table.pop tbody th{font-size:1rem;padding-bottom:4px}
  table.pop td:nth-child(2)::before{content:"人口　";color:#65594f}
  table.pop td:nth-child(3)::before{content:"世帯数　";color:#65594f}
  table.pop td:nth-child(4)::before{content:"基準日　";color:#65594f}
}
/* 表の項目名（淡い面の上）：基準を満たす濃さに */
.facts dt{color:#8a4f2a}

/* 「切れない塊」(.nb) が、親の span の文字サイズ指定に重なって、二重に縮小されないように */
.quote span .nb,.quote .nb,.kodakara-sub .nb,.stat span .nb,.break p small .nb,.rabbit-photos small .nb{font-size:inherit !important;display:inline !important;letter-spacing:inherit;margin:0;opacity:1}

/* ---- 自然の節：ウサギの写真（縦に2枚） ---- */
.nature-photos{display:grid;gap:18px;align-content:start}
.nature-photos figure{margin:0}
.nature-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.nature-photos figcaption{margin-top:8px;font-size:.8rem;line-height:1.7;color:var(--ink)}
.nature-photos figcaption small{display:block;margin-top:2px;font-size:.7rem;line-height:1.7;color:#65594f}
.nature-photos figcaption small a{color:var(--sea);border-bottom:1px solid var(--line)}

/* 項目名＋本文の2列：本文は、中に塊（span）があっても、右の1つのセルに収める */
.plain li>b{grid-column:1}
.plain li>.li-body{grid-column:2;display:block;min-width:0}
@media (max-width:640px){.plain li>.li-body{grid-column:1}}
.plain li>.li-body .nb{display:inline !important}

/* 金見集落の物件位置図 */
.site-map{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:56px}
.site-map figure{margin:0}
.site-map img{width:100%;height:auto!important;aspect-ratio:1/1!important;object-fit:contain!important;display:block;border:1px solid var(--line)}
.site-map figcaption{margin-top:8px;font-size:.76rem;line-height:1.7;color:#65594f}
.site-map-list{list-style:none;margin:16px 0 20px;padding:0;counter-reset:sm}
.site-map-list li{counter-increment:sm;position:relative;padding:0 0 16px 44px;line-height:1.9}
.site-map-list li::before{content:counter(sm);position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;background:var(--sea);color:#fff;font-size:.85rem;line-height:28px;text-align:center}
.site-map-list b{display:block;font-weight:500;color:var(--ink);letter-spacing:.06em}
@media(max-width:820px){.site-map{grid-template-columns:1fr;gap:24px;margin-top:40px}}

/* 夕方の牛の散歩 */
.walk{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:40px}
.walk figure{margin:0}
.walk img{width:100%;height:auto!important;aspect-ratio:4/3!important;object-fit:cover;display:block}
.walk figcaption{margin-top:8px;font-size:.8rem;line-height:1.7}
.walk .quote{margin:0}
@media(max-width:820px){.walk{grid-template-columns:1fr;gap:20px}}

/* 闘牛：文章と写真を並べる */
.togyu-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:8px}
.togyu-top .lead{margin:0}
.togyu-top .togyu-hero{margin:0}
.togyu-top .togyu-hero img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:55% 60%}
@media(max-width:820px){.togyu-top{grid-template-columns:1fr;gap:24px}}
.cards.four .card.big .num.nw{white-space:nowrap;font-size:clamp(1.3rem,2vw,1.7rem)}
.walk .quote{text-align:left}

/* シンボルロック：縦長の全景を左に、横長2枚を右に */
.symbol-sub img{aspect-ratio:3/4!important;height:auto!important;object-fit:cover;width:100%}

/* シンボルロック：大きな写真を額に入れ、小さな写真と並べて釣り合わせる */
.symbol{min-height:0;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(56px,8vw,104px) clamp(24px,6vw,96px)}
.symbol-main{min-height:0;position:static}
.symbol-main img{position:static;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;display:block}
.symbol-text{padding:0}
@media(max-width:900px){.symbol{grid-template-columns:1fr;padding:48px 24px;gap:28px}.symbol-main img{aspect-ratio:4/3;object-position:50% 30%}}

/* VIEW：写真の上に海の名前を重ねる */
.sea-fig{margin:0}
.sea-wrap{position:relative}
.sea-wrap img{width:100%;height:auto!important;aspect-ratio:4/3!important;object-fit:cover;object-position:50% 45%;display:block}
.sea-tag{position:absolute;top:44%;padding:3px 10px;font-size:.78rem;letter-spacing:.14em;color:#fff;background:rgba(47,41,38,.62);border-radius:2px}
.sea-tag.l{left:12px}.sea-tag.r{right:12px}
.sea-fig figcaption{margin-top:8px;font-size:.78rem;color:#65594f}

/* シンボルロック：写真の大きさを揃えて釣り合わせる（上書き） */
.symbol{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px)}
.symbol-main img{aspect-ratio:4/5;max-height:78vh}
.symbol-sub{grid-template-columns:1fr 1fr;gap:10px}
.symbol-sub img{aspect-ratio:1/1!important}

/* シンボルロック：大きな写真は縦長2枚を並べる */
.symbol-main{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}
.symbol-main img{aspect-ratio:3/4;max-height:none;width:100%;height:auto;object-fit:cover;position:static}
.symbol-sub img{aspect-ratio:3/4!important}
@media(max-width:900px){.symbol-main img{aspect-ratio:3/4}}

/* シンボルロック：大きな写真は縦長の2枚組 */
.symbol-main{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:center}
.symbol-main img{aspect-ratio:3/4;max-height:none;height:auto;width:100%;object-fit:cover}
@media(max-width:900px){.symbol-main img{aspect-ratio:3/4}}
.symbol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.symbol-sub{gap:8px}
.symbol-sub img{aspect-ratio:1/1!important}

/* VIEW：海の写真2枚を縦に並べる */
.view-photos{display:grid;gap:16px}
.view-photos figure{margin:0}
.view-photos img{width:100%;height:auto!important;aspect-ratio:16/9!important;object-fit:cover;display:block}
.view-photos figcaption{margin-top:6px;font-size:.78rem;color:#65594f}
.view-photos.single img{aspect-ratio:4/3!important}

#location .photos{display:grid;gap:14px;align-content:center}
#location .photos img{width:100%;height:auto!important;aspect-ratio:16/9!important;object-fit:cover;display:block}

#kanami .photos{display:grid;gap:14px;align-content:center}
#kanami .photos img{width:100%;height:auto!important;aspect-ratio:16/9!important;object-fit:cover;display:block}

/* 図面・CGの作成者表記 */
figcaption small{display:block;margin-top:2px;font-size:.72rem;opacity:.85}
.plans img.plan{width:100%}

/* 客室のCGイメージ */
.room-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 30px}
.room-gallery figure{margin:0}
.room-gallery img{width:100%;height:auto!important;aspect-ratio:16/9!important;object-fit:cover;display:block}
.room-gallery figcaption{margin-top:6px;font-size:.78rem;color:#65594f}
.room-images .sub{margin-top:28px}
@media(max-width:700px){.room-gallery{grid-template-columns:1fr}}

/* 岩と過ごす滞在：3枚の写真の大きさを、CGの比率にそろえる（CGは切り取らない） */
#symbol-use .photos{align-items:start}
#symbol-use .photos figure{margin:0}
#symbol-use .photos img:not(.cg){width:100%;height:auto!important;aspect-ratio:1280/728!important;object-fit:cover;display:block}
#symbol-use .photos img.cg{width:100%;display:block}

/* 外構：サウナのCG・岩風呂の現況・ファイヤーピットのCGを同じ大きさで並べる */
.outdoor-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.outdoor-photos figure{margin:0}
.outdoor-photos img:not(.cg){width:100%;height:auto!important;aspect-ratio:1280/728!important;object-fit:cover;display:block}
.outdoor-photos img.cg{width:100%;display:block}
@media(max-width:700px){.outdoor-photos{grid-template-columns:1fr}}
.outdoor-photos{grid-template-columns:1.621fr 1.333fr 1.333fr}
.outdoor-photos img:not(.cg){aspect-ratio:4/3!important}
@media(max-width:700px){.outdoor-photos{grid-template-columns:1fr}}

/* 岩と過ごす滞在：サウナ（現況の岩＋CG）とプールテラスの2項目 */
.cards.wt-cards,.wt-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cards.wt-cards .card:first-child{grid-column:span 2}
.wt-photos{margin-top:32px;align-items:start}
@media(max-width:700px){.cards.wt-cards,.wt-photos{grid-template-columns:1fr}.cards.wt-cards .card:first-child{grid-column:auto}}

/* シンボルロックに「岩と過ごす、滞在のかたち」を統合 */
.symbol-more{grid-column:1/-1;padding:0 clamp(24px,6vw,96px) clamp(56px,8vw,104px)}
.symbol-more .wrap{padding-left:0;padding-right:0}
.symbol-more .sub{margin-top:0}

/* 改修計画：説明は横いっぱい、CG4枚と図面2枚は同じ幅の列で揃える */
.reno-text ul.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.cg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;align-items:start;margin-top:20px}
.cg-grid figure{margin:0}
.cg-grid img.cg{width:100%;display:block}
.plans img.plan{aspect-ratio:1.4/1!important;object-fit:contain;width:100%;height:auto}
@media(max-width:700px){.reno-text ul.points{grid-template-columns:1fr}.cg-grid{grid-template-columns:1fr}}

/* 敷地の見どころ：写真2枚を同じ大きさで並べ、エリアは3列 */
.site-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.site-photos figure{margin:0}
.site-photos img{width:100%;height:auto!important;aspect-ratio:3/2!important;object-fit:cover;display:block}
.site-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:28px}
@media(max-width:700px){.site-photos,.site-points{grid-template-columns:1fr}}

.site-overview{margin:24px 0 0}
.site-overview img{width:100%;height:auto!important;aspect-ratio:auto!important;max-height:560px;object-fit:cover;display:block}
.site-overview figcaption{margin-top:8px;font-size:.78rem;color:#65594f}
.site-overview img{max-height:none!important}
.site-overview figcaption b{font-weight:500;color:var(--sea)}

/* 空港の写真の下に、トライアスロンの写真を並べる */
.vital-photos{display:grid;gap:16px;min-width:0}
.vital-photos .vital-photo{margin:0!important}
.vital-photos .vital-photo img{aspect-ratio:16/10}
.vital-photos figcaption small{display:block;margin-top:2px;font-size:.72rem}
.vital-photos figcaption small a{color:var(--sea);border-bottom:1px solid var(--line)}

.food-list li>.li-body{grid-column:2;display:block;min-width:0}
.food-list li>.li-body .nb{display:inline!important}
@media (max-width:640px){.food-list li>.li-body{grid-column:1}}

/* 徳之島ニュース：要約は掲載、出典リンクから元の記事へ */
.news-item.news-ext:hover{background:transparent}
.news-item .src-link{display:inline-block;margin-top:10px;font-size:.8rem;color:var(--sea);border-bottom:1px solid var(--sun);padding-bottom:1px;word-break:auto-phrase}
.news-item .src-link:hover{color:var(--sun)}

/* ニュース記事ページ */
.article-sec .wrap.narrow{max-width:760px}
.news-article .meta{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.news-article .meta time{font-family:var(--en);letter-spacing:.1em;color:#65594f}
.news-article .tag{font-size:.72rem;padding:2px 12px;background:var(--sea);color:#fff;letter-spacing:.14em}
.news-article .tag.tokunoshima{background:var(--sun)}
.news-article h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.6;margin:0 0 22px}
.news-article .lead{margin:0 0 28px}
.source-box{border-top:1px solid var(--line);padding-top:20px}
.source-box .note{margin:0 0 14px}
.source-box .src-line{margin:0 0 8px;color:#65594f;font-size:.9rem}
.src-link.big{font-size:.95rem;padding:8px 0}
.article-sec .back{margin:0 0 20px;font-size:.85rem}
.article-sec .back a{color:var(--sea);border-bottom:1px solid var(--line)}

.news-article .art-body{margin:0 0 1.3em;font-size:1rem;line-height:2.1;color:var(--ink)}
.news-article h1{margin-bottom:28px}

/* 設計者（KURU設計事務所）へのリンク */
a.kuru-link{color:inherit;border-bottom:1px solid var(--sun);padding-bottom:1px}
a.kuru-link:hover{color:var(--sun)}

/* 集落との取り組み：見出しが長いので、見出しの列を広げ、折り返しを許す（本文と重ならないように） */
.together-list li{grid-template-columns:19em minmax(0,1fr)}
.together-list li b{white-space:normal}
@media (max-width:760px){.together-list li{grid-template-columns:1fr}}

/* 写真の帯の言葉：画面幅に収め、はみ出さずに折り返す */
.break{grid-template-columns:minmax(0,1fr)}
.break p{max-width:100%;box-sizing:border-box;min-width:0;overflow-wrap:break-word}
@media(max-width:560px){.break p{font-size:1.05rem;letter-spacing:.06em;line-height:2}}

/* カナンあまちゃんクラブ公式サイトへのリンク */
a.club-link{color:inherit;border-bottom:1px solid var(--sun);padding-bottom:1px}
a.club-link:hover{color:var(--sun)}

/* プロジェクト冒頭：キーコンセプト */
.pagehead .concept-line{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:.12em;line-height:1.7;margin:0 0 .4em;color:var(--sea)}

/* 名前の由来の帯：次のシンボルロックの節と色が近いので、淡い色にして区別する */
.band{background:var(--cream)}

/* カナンあまちゃんクラブ：見出し列を広げ、本文とくっつかないようにする */
#club .plain li{grid-template-columns:12.5em minmax(0,1fr)}
#club .plain li b{white-space:normal}
@media(max-width:640px){#club .plain li{grid-template-columns:1fr}}

/* カナンあまちゃんクラブ：写真2枚を同じ大きさで縦に並べる */
.club-photos{display:grid;gap:16px;align-content:center}
.club-photos figure{margin:0}
.club-photos img{width:100%;height:auto!important;aspect-ratio:3/2!important;object-fit:cover;display:block}

/* FOLLOW：3つのバナーを同じ大きさにそろえる */
.contact a.btn.btn-wide{display:block;box-sizing:border-box;width:min(100%,460px);margin-left:auto;margin-right:auto;padding-left:12px;padding-right:12px;text-align:center;letter-spacing:.14em}