/* ======================================================================
   デザイン切り替え（body data-design）
   pop     … 明るくにぎやか（標準。style.css そのもの）
   clean   … 白基調・直線的で誠実な印象
   natural … クリーム色と緑の、温かく地域に寄り添う印象
   ※ site.json の theme.colors を指定すると、各デザインの色を上書きする
   ====================================================================== */
.demo__opts--3{grid-template-columns:repeat(3,1fr)}
.demo__opts--4{grid-template-columns:repeat(4,1fr)}
.demo__opts--5{grid-template-columns:repeat(5,1fr)}
/* 見本パネル：イメージカラー14色 */
.demo__colors{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:12px}
.demo__colors a{display:block;aspect-ratio:1;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);transition:.15s}
.demo__colors a:hover{transform:scale(1.12)}
.demo__colors a.is-active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
/* ポップの傾いた帯が画面端からはみ出して、スマホで横に揺れないようにする */
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* ポップ：背景の淡い色をイメージカラー（sub）から自動で作る */
body[data-design="pop"]{--sky-pale:color-mix(in srgb,var(--sky) 13%,#fff)}
body[data-design="pop"] .hero{background:
  radial-gradient(circle at 88% 12%,rgba(255,214,10,.75) 0 70px,rgba(255,214,10,.25) 71px 140px,transparent 141px),
  linear-gradient(180deg,color-mix(in srgb,var(--sky) 50%,#fff) 0%,color-mix(in srgb,var(--sky) 22%,#fff) 55%,color-mix(in srgb,var(--sky) 6%,#fff) 100%)}
/* 見本サイトの注意書き（settings.sampleNotice） */
.sample-notice{display:inline-block;margin:0 0 14px;padding:4px 14px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}

/* ---------- クリーン ---------- */
body[data-design="clean"]{--navy:#14213d;--blue:#1d4e89;--sky:#8fb8de;--sky-pale:#f3f6fa;--red:#c1121f;--yellow:#e9c46a;--yellow-deep:#c9a227;--text:#1f2937;--radius:6px;--shadow:0 1px 3px rgba(20,33,61,.08)}
body[data-design="clean"] .header{box-shadow:0 1px 0 #e3e8ef}
body[data-design="clean"] .nav__cta{background:var(--blue);color:#fff;border-radius:4px;box-shadow:none}
body[data-design="clean"] .hero{background:linear-gradient(90deg,#fff 0 58%,var(--sky-pale) 58%);color:var(--navy);padding-bottom:90px}
body[data-design="clean"] .hibiscus,body[data-design="clean"] .hero__sea{display:none}
body[data-design="clean"] .hero__bgword{-webkit-text-stroke:1px rgba(20,33,61,.06);bottom:-2vw}
body[data-design="clean"] .hero__tag{box-shadow:none;border:1px solid #d5dde8;border-radius:4px}
body[data-design="clean"] .hero__tag span{border-radius:3px}
body[data-design="clean"] .hero__copy{transform:none}
body[data-design="clean"] .hero__copy mark{color:var(--blue)}
body[data-design="clean"] .hero__copy mark::after{height:.08em;border-radius:0;transform:none;background:var(--blue);bottom:-.08em}
body[data-design="clean"] .hero__name{color:var(--navy);text-shadow:none;border-left:8px solid var(--blue);padding-left:18px}
body[data-design="clean"] .hero__poster{transform:none;border:0;border-radius:4px;box-shadow:24px 24px 0 var(--navy)}
body[data-design="clean"] .hero__poster:hover{transform:none}
body[data-design="clean"] .hero__badge{border-radius:4px;transform:none;animation:none;background:var(--navy);width:96px;height:96px}
body[data-design="clean"] .marquee{transform:none;margin:0;background:var(--navy);color:#fff;box-shadow:none}
body[data-design="clean"] .btn{border-radius:4px}
body[data-design="clean"] .btn--yellow{background:var(--blue);color:#fff;box-shadow:none}
body[data-design="clean"] .btn--yellow:hover{background:var(--navy);transform:none}
body[data-design="clean"] .btn--ghost{border-color:var(--navy);color:var(--navy)}
body[data-design="clean"] .btn--outline{box-shadow:none}
body[data-design="clean"] .contact .btn--yellow{background:#fff;color:var(--navy)}
body[data-design="clean"] .section__en{color:var(--blue);letter-spacing:.35em;font-size:13px}
body[data-design="clean"] .section__title::after{width:40px;height:3px;border-radius:0;background:var(--blue)}
body[data-design="clean"] .stat{background:#fff;border:1px solid #e3e8ef}
body[data-design="clean"] .stat--hot{background:var(--navy);border-color:var(--navy)}
body[data-design="clean"] .stat--hot .stat__num{color:#fff}
body[data-design="clean"] .message{border-left:4px solid var(--blue);border-radius:0 6px 6px 0}
body[data-design="clean"] .message::before{display:none}
body[data-design="clean"] mark{background:linear-gradient(transparent 70%,rgba(29,78,137,.18) 70%)}
body[data-design="clean"] .card{border:1px solid #e3e8ef}
body[data-design="clean"] .card::after{left:0;right:0;bottom:auto;width:auto;height:3px}
body[data-design="clean"] .card--hot{background:var(--navy)}
body[data-design="clean"] .card--hot h3{color:#fff}
body[data-design="clean"] .card--hot::after{background:var(--sky)}
body[data-design="clean"] .news__item,body[data-design="clean"] .gikai__item,body[data-design="clean"] .short,body[data-design="clean"] .profile{border:1px solid #e3e8ef}
body[data-design="clean"] .news__thumb span{border-radius:3px}
body[data-design="clean"] .news__thumb span.is-yellow{background:var(--red);color:#fff}
body[data-design="clean"] .gikai__tags li{border-radius:3px}
body[data-design="clean"] .gikai__play{border-radius:4px}
body[data-design="clean"] .profile__avatar{border-color:var(--sky-pale);border-radius:6px}
body[data-design="clean"] .profile__motto{box-shadow:none;background:var(--navy);border-radius:4px}
body[data-design="clean"] .profile__motto span{color:var(--sky)}
body[data-design="clean"] .contact{background:var(--navy)}
body[data-design="clean"] .contact::before{display:none}
body[data-design="clean"] .footer{background:#0d1526;border-top:0}
body[data-design="clean"] .float-cta{background:var(--blue);color:#fff;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
@media (max-width:900px){body[data-design="clean"] .hero{background:#fff}}

/* ---------- ナチュラル ---------- */
body[data-design="natural"]{--navy:#2f3e2c;--blue:#4a7c59;--sky:#a7c4a0;--sky-pale:#f3eddf;--red:#d9822b;--yellow:#f2d398;--yellow-deep:#d9b26a;--text:#3b3a30;--muted:#6b6a5c;--radius:24px;--shadow:0 10px 30px rgba(74,60,30,.10);background:#fbf8f1}
body[data-design="natural"] .header{background:rgba(251,248,241,.96);box-shadow:0 2px 0 var(--sky)}
body[data-design="natural"] .nav__cta{background:var(--blue);color:#fff;box-shadow:none}
body[data-design="natural"] .hero{background:radial-gradient(ellipse at 85% 30%,rgba(167,196,160,.55) 0 30%,transparent 31%),radial-gradient(ellipse at 10% 90%,rgba(242,211,152,.6) 0 22%,transparent 23%),#fbf8f1;color:var(--navy);padding-bottom:90px}
body[data-design="natural"] .hibiscus,body[data-design="natural"] .hero__sea,body[data-design="natural"] .hero__bgword{display:none}
body[data-design="natural"] .hero__tag{box-shadow:none;background:#fff}
body[data-design="natural"] .hero__tag span{background:var(--blue)}
body[data-design="natural"] .hero__copy{transform:none}
body[data-design="natural"] .hero__copy mark{color:var(--red)}
body[data-design="natural"] .hero__copy mark::after{background:var(--yellow);height:.35em;border-radius:20px;transform:none}
body[data-design="natural"] .hero__name{color:var(--navy);text-shadow:none}
body[data-design="natural"] .hero__name-kana{color:var(--blue)}
body[data-design="natural"] .hero__poster{transform:none;border:8px solid #fff;border-radius:999px 999px 28px 28px;box-shadow:var(--shadow)}
body[data-design="natural"] .hero__poster:hover{transform:none}
body[data-design="natural"] .hero__badge{background:var(--red);animation:none;transform:none}
body[data-design="natural"] .marquee{transform:none;margin:0;background:var(--blue);color:#fbf8f1;box-shadow:none}
body[data-design="natural"] .btn--yellow{background:var(--red);color:#fff;box-shadow:none}
body[data-design="natural"] .btn--yellow:hover{background:#c06f1d;transform:translateY(-2px)}
body[data-design="natural"] .btn--ghost{border-color:var(--blue);color:var(--blue)}
body[data-design="natural"] .btn--ghost:hover{background:var(--blue);color:#fff}
body[data-design="natural"] .btn--outline{border-color:var(--blue);color:var(--blue);box-shadow:none}
body[data-design="natural"] .btn--outline:hover{background:var(--blue);color:#fff}
body[data-design="natural"] .section{background:#fbf8f1}
body[data-design="natural"] .section--tint{background:var(--sky-pale)}
body[data-design="natural"] .section__en{color:var(--blue)}
body[data-design="natural"] .section__title::after{background:var(--red);width:12px;height:12px;border-radius:50%;box-shadow:-22px 0 0 var(--sky),22px 0 0 var(--yellow)}
body[data-design="natural"] .stat{background:#fff}
body[data-design="natural"] .stat--hot{background:var(--blue)}
body[data-design="natural"] .stat--hot .stat__num{color:var(--yellow)}
body[data-design="natural"] .message::before{color:var(--sky)}
body[data-design="natural"] mark{background:linear-gradient(transparent 60%,var(--yellow) 60%)}
body[data-design="natural"] .card::after{display:none}
body[data-design="natural"] .card__icon{color:var(--sky-pale)}
body[data-design="natural"] .card--hot{background:var(--blue)}
body[data-design="natural"] .card--hot h3{color:var(--yellow)}
body[data-design="natural"] .news__thumb span{background:var(--blue)}
body[data-design="natural"] .news__thumb span.is-yellow{background:var(--red);color:#fff}
body[data-design="natural"] .news__body time{color:var(--red)}
body[data-design="natural"] .gikai::before{background:linear-gradient(var(--sky),var(--blue))}
body[data-design="natural"] .gikai__play{background:var(--blue)}
body[data-design="natural"] .gikai__play:hover{background:var(--red)}
body[data-design="natural"] .gikai__tags li{background:var(--sky-pale)}
body[data-design="natural"] .profile__avatar{border-color:var(--sky)}
body[data-design="natural"] .profile__table th{color:var(--blue)}
body[data-design="natural"] .profile__motto{background:var(--blue);box-shadow:8px 8px 0 var(--yellow)}
body[data-design="natural"] .contact{background:linear-gradient(160deg,var(--blue),#35583f)}
body[data-design="natural"] .contact::before{color:rgba(255,255,255,.07)}
body[data-design="natural"] .contact .btn--yellow{background:var(--yellow);color:var(--navy)}
body[data-design="natural"] .footer{background:#2a3826;border-top-color:var(--sky)}
body[data-design="natural"] .float-cta{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.2)}