@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Inter:wght@300;400;500;600;700&family=Noto+Color+Emoji&display=swap');


/* Material Symbols（アイコンフォント自前ホスティング） */
@font-face{
  font-family:'Material Symbols Outlined';
  font-style:normal;
  font-weight:400;
  src:url('../font/material-symbols-outlined.woff2') format('woff2');
  font-display:block;
}
.material-symbols-outlined {font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align: middle; margin:-0.2rem 0.5rem 0 0;}

/* ============================================================
 * Reset（リセットCSS）
 *  @import / @font-face の直後＝実スタイルの最上部に配置（@import を先頭に保つため）。
 *  以降の :root・body・各コンポーネント指定が、このリセットを上書きする。
 *  ※ メディアの display:block、list-style:none、a の下線除去は
 *    既存の挙動・CMSコンテンツ表示を尊重して意図的に含めない。
 * ============================================================ */
*,*::before,*::after{box-sizing:border-box; position: relative;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x: clip;}
body{min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;}
p { margin-bottom: 2rem;}
img,picture,video,canvas,svg{max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;}
ul{list-style:none}
ol li { margin-left:2rem;}

:root{--teal:#399;--light-teal:#14B8A6;--mint:#5bb;--sand:#F5E6CC;--sand-light:#FAF5EB;--coral:#E65;--coral-light:#F98;--olive:#980;--olive-rgb:116,150,0;--forest:#2D6A4F;--brown:#864;--dark:#222;--g8:#334;--g6:#456;--g3:#DDF1F1;--g2:#D1D6DE77;--g1:#F6FCFC;--w:#FFF;/* エリア専用カラー（map.svg配色に合わせる） */ --area-west:#749600;--area-west-rgb:116,150,0;--area-center:#bf8081;--area-center-rgb:191,128,129;--area-east:#55bcbc;--area-east-rgb:85,188,188;--shadow:0 1.6rem 0.8rem -1.2rem rgba(0,0,0,0.05);}


html{scroll-behavior:smooth; font-size:62.5%;}
/* 固定ヘッダー分のオフセット用アンカー */
.anchor{display:block;height:0;position:relative;top:-14rem;visibility:hidden;pointer-events:none;}
body{font-family:'Zen Kaku Gothic New','Inter','Noto Color Emoji',sans-serif;color:var(--dark);background:var(--w);overflow-x: clip;line-height:1.8; font-size:clamp(1.4rem,1.6vw,1.6rem); font-feature-settings: "palt"; background: var(--w);}
body.tpl-cate {background:var(--g1); }
a { color:var(--dark);}

/* 見出しサイズの基準body を前置きして詳細度を上げ、class 指定の .st 等より弱く保つ */
body h1{font-size:clamp(2.6rem,4vw,4rem);margin-bottom:clamp(1.2rem,2.4vw,2.4rem);font-weight:500;line-height:1.3;}
body h2{font-size:clamp(2.2rem,3.2vw,3.2rem);margin-bottom:clamp(1.2rem,2.4vw,2.4rem);font-weight:500;line-height:1.35;}
body h3{font-size:clamp(1.8rem,2.8vw,2.8rem);margin-bottom:clamp(0.8rem,1.6vw,1.6rem);font-weight:500;line-height:1.4;}
body h4{font-size:clamp(1.6rem,2.4vw,2.4rem);margin-bottom:clamp(0.8rem,1.6vw,1.6rem);font-weight:600;line-height:1.5;}
body h5{font-size:clamp(1.5rem,2vw,2rem);margin-bottom:clamp(0.8rem,1.6vw,1.6rem);font-weight:600;line-height:1.5;}
body h6{font-size:clamp(1.4rem,1.8vw,1.8rem);margin-bottom:clamp(0.4rem,0.8vw,0.8rem);font-weight:600;line-height:1.5;}



/* Header */
.hd{position:fixed;top:0;left:0;right:0;z-index:1100;background:#fff;backdrop-filter:blur(12px);transition:background .5s ease, backdrop-filter .5s ease, box-shadow .5s ease;}
/* トップページのみ: ヒーロー上は透過、画面高スクロール後に不透明（ふわっとフェード） */
body.is-top .hd{background:transparent!important;background:linear-gradient(to bottom,rgba(12,158,158,0.7) 0%,rgba(12,158,158,0.7) 80%,rgba(12,158,158,0.7) 100%); backdrop-filter:none;box-shadow:none;transition:background .5s ease, backdrop-filter .5s ease, box-shadow .5s ease;}
body.is-top .hd.scrolled{background:#fff!important;backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,.06);}
/* ロゴの色違いをクロスフェード */
.logo-w{display:none;}
.logo img{width:100%;}
body.is-top .logo{position:relative;display:inline-block;line-height:0;transform-origin:left top;transform:scale(1.2);transition:transform .5s ease;}
body.is-top .logo img{display:block;width:100%;transition:opacity .5s ease;}
body.is-top .logo .logo-w{display:block;position:absolute;inset:0;opacity:1;filter:drop-shadow(1px 1px 1px rgba(0,17,34,.3));}
body.is-top .logo .logo-c{opacity:0;}
body.is-top .hd.scrolled .logo{transform:scale(1);}
body.is-top .hd.scrolled .logo .logo-w{opacity:0;}
body.is-top .hd.scrolled .logo .logo-c{opacity:1;}
/* ヒーロー上の .hd-right 内の文字（上段サブメニュー・Language・メニュー）：
   白文字に青緑のフチ（8方向の text-shadow）＋ぼかし影で、明るい写真の上でも読めるようにする。
   フチの色・濃さは --nav-edge（右・右下・下は --nav-edge-dark）、ぼかしは --nav-glow で調整 */
body.is-top .hd:not(.scrolled) .hd-right{--nav-edge:rgba(0,17,34,.07);--nav-edge-dark:rgba(0,17,34,.15);--nav-glow:rgba(0,17,34,.2);
  /* 右・右下・下（影側）は --nav-edge-dark で濃く、ほかは --nav-edge */
  --nav-outline:
    1px 0 0 var(--nav-edge-dark), 1px 1px 0 var(--nav-edge-dark), 0 1px 0 var(--nav-edge-dark),
    -1px 0 0 var(--nav-edge), 0 -1px 0 var(--nav-edge), -1px 1px 0 var(--nav-edge), 1px -1px 0 var(--nav-edge), -1px -1px 0 var(--nav-edge),
    1px 1px 3px var(--nav-glow); }
body.is-top .hd:not(.scrolled) nav a{color:#fff;}
body.is-top .hd:not(.scrolled) .hd-right :is(nav a, .subnav a, .nav-lang){text-shadow:var(--nav-outline);}
/* Language ボタンとお問い合わせの円の白い枠線にも、外側・内側の両方に同じフチを付ける */
body.is-top .hd:not(.scrolled) .hd-right :is(.nav-lang, .subnav .subnav-icon){filter:none;
  box-shadow:/*0 0 0 1px var(--nav-edge),*/ inset 0 0 0 1px var(--nav-edge), 0 0 3px var(--nav-glow);
  /* 背景（メイン動画）をぼかして文字を読みやすくする。強さは blur() の数値で調整 */
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
body.is-top .hd:not(.scrolled) .subnav a{color:rgba(255,255,255,1);}
body.is-top .hd:not(.scrolled) .subnav > li:not(.lang-switch):not(:last-child)::after{background:rgba(255,255,255,.8); filter:drop-shadow(1px 1px 1.5px rgba(0,34,51,.33));}
body.is-top .hd:not(.scrolled) .nav-lang{border-color:rgba(255,255,255,0.8); color:#fff; font-weight:500;/*text-shadow:1px 1px 1.5px rgba(0,34,51,.33);backdrop-filter: blur(2px);*/ }
body.is-top .hd:not(.scrolled) .nav-lang:hover { background:rgba(0,34,51,.15);}
body.is-top .hd:not(.scrolled) .hb span{background:#fff;box-shadow:1px 1px 1.5px rgba(0,34,51,.33);}
.hd-in{max-width:none;margin:0 auto;padding:clamp(0.8rem,1.2vw,1.2rem) clamp(1.6rem,3vw,3.2rem);display:flex;align-items:center;justify-content:space-between;height:auto;min-height:8rem;}
.logo{display:flex;align-items:center;gap:1.2rem;text-decoration:none;width: 25%; max-width:280px; }

body.temp .logo-w { display: none;}
.logo-t{color:#fff;font-weight:500;font-size:1.8rem;letter-spacing:.5px;}
.logo-s{color:var(--mint);font-size:1.1rem;font-weight:400;letter-spacing:1px;}
nav{display:flex;align-items:center; }
nav a{text-decoration:none;font-weight:500;padding:0.4rem 0;border-radius:8px;transition:.2s;}
nav a:hover{color:#333; background:rgba(0,34,51,.15);}
.scrolled nav a:hover {background:rgba(255,255,255,.1);}
/* ヘッダメニュー .hm: アイコン大きめ + その下にテキスト */
.hm{display:flex;align-items:flex-end;gap:0.4rem;}
.hm a.pc-hide{display:none;}
.hm a{display:flex;flex-direction:column;color:var(--dark);align-items:center;gap:0.24rem;padding:0.8rem;line-height:1.2;font-size:1.4rem;transition:color .5s ease; font-weight:500;}
.hm a .material-symbols-outlined{font-size:4rem;color:var(--mint);line-height:1;transition:color .5s ease; margin:0;}
.hm a:hover .material-symbols-outlined{color:var(--teal);}
/* トップ透過時: 白アイコン、.scrolledで色復帰（フェード） */
body.is-top .hd:not(.scrolled) .hm a .material-symbols-outlined{color:#fff;/*filter:drop-shadow(1px 1px 1.5px rgba(0,0,0,.15));*/}
body.is-top .hd:not(.scrolled) .hm a:hover .material-symbols-outlined{color:#fff; margin:0;}
.lang-switch{position:relative;margin-left:1.6rem;}
.nav-lang{font-family:inherit;padding:0.4rem 1.2rem;border:1px solid #777;border-radius:20px;font-size:1.4rem;color:#333;background:transparent;cursor:pointer;transition:.2s; line-height:1.5; min-height:3.2rem;}
.nav-lang:hover,.nav-lang[aria-expanded="true"]{border-color:var(--mint);color:var(--mint);background:transparent;}
/* 言語ドロップダウン（PC） */
.lang-menu{position:absolute;top:calc(100% + 0.8rem);right:0;min-width:15.2rem;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.14);padding:0.6rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1200;}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-switch .lang-menu a{display:block;margin:0;padding:0.8rem 1.2rem;border-radius:8px;color:#2D3748;font-size:1.4rem;font-weight:500;text-decoration:none;white-space:nowrap;text-shadow:none;transition:.15s;}
.lang-switch .lang-menu a::after{display:none;}
.lang-switch .lang-menu a:hover{background:#f0fdfa;color:var(--mint);}
body.is-top .hd:not(.scrolled) .lang-switch .lang-menu a{color:#2D3748;text-shadow:none;}
.subnav .subnav-icon{display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;margin-left:0.8rem;padding:0;border:1px solid rgba(20,184,166,.5);border-radius:50%;color:var(--light-teal);text-decoration:none;transition:.2s;}
.subnav .subnav-icon::after{display:none;}
.subnav .subnav-icon:hover{background:rgba(20,184,166,.12);border-color:var(--mint);color:var(--mint);}
body.is-top .hd:not(.scrolled) .subnav .subnav-icon{color:#fff;border-color:rgba(255,255,255,0.8);/*backdrop-filter: blur(2px);*/ }
.subnav .subnav-icon .material-symbols-outlined{font-size:2rem;line-height:1; margin:0;}
.hd-right{display:flex;flex-direction:column;align-items:flex-end;}
.subnav{display:flex;justify-content:flex-end;align-items:center;gap:0.4rem;list-style:none;margin:0;padding:0;}
.subnav li{display:flex;align-items:center;position:relative;}
.subnav a{color:#4A5568;text-decoration:none;font-size:1.4rem;font-weight:500;padding:0.4rem 1.2rem;border-radius:6px;transition:.2s;position:relative;}
/* 区切り縦線は <li> の ::after に付与（a の ::after は target="_blank" の外部リンクアイコンと競合するため） */
.subnav > li:not(.lang-switch):not(:last-child)::after{content:"";position:absolute;right:-0.2rem;top:50%;transform:translateY(-50%);width:1px;height:12px;background:#cbd5e0;}

.subnav a:hover{ background:rgba(0,34,51,.15);}
.scrolled .subnav a:hover{color:#0E7A8A;background:#f7fafc66;}

.hb{display:none;flex-direction:column;justify-content:center;gap:0.5rem;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1100;text-decoration:none;}
.hb.active{/*position:fixed;top:1.4rem;right:1.6rem*/}
.hb span{display:block;width:24px;height:2px;background:#333;border-radius:2px;transition:.3s;margin:0 auto;}
.hb.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hb.active span:nth-child(2){opacity:0;}
.hb.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;top:var(--hd-h,56px);left:0;right:0;bottom:0;background:#fff;z-index:1050;padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,3.2rem) 3.2rem;overflow-y:auto;border-top:1px solid #e2e8f0;}
.mobile-menu.active{display:block;}
.mm-logo-box { display: none;}
.mm-close{/*position:absolute;top:1.4rem;right:1.6rem;*/width:40px;height:40px;background:transparent;border:none;cursor:pointer;font-size:3.2rem;line-height:1;color:#1A1A2E;z-index:1101;padding:0;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.mm-logo{ /*position:absolute;top:1.4rem;left:1.6rem;*/ display:block;line-height:0;z-index:1101;}
.mm-logo img{display:block;width:auto; max-width: 100%; }
.mobile-menu a{display:block;padding:1.6rem 0.8rem;color:#1A1A2E;text-decoration:none;font-weight:500;border-bottom:1px solid #e2e8f0;}
.mobile-menu .mm-logo{padding:0;border-bottom:none; width: 25%; max-width:280px;}
.mobile-menu a:hover{color:#0E7A8A;}
.mobile-menu .mm-section{margin-top:1.6rem;}
.mobile-menu .mm-section:first-child{margin-top:0;}
.mobile-menu .mm-label{display:none;font-size:1.1rem;font-weight:500;color:#A0AEC0;letter-spacing:1px;text-transform:uppercase;padding:0 0.8rem 0.8rem;}
.mobile-menu .mm-section.sub a{display:flex;align-items:center;gap:1.2rem;color:#4A5568;padding:1.4rem 0.8rem;}
.mobile-menu .mm-section.sub a .material-symbols-outlined{font-size:3rem;color:var(--mint);line-height:1;flex-shrink:0; margin:0;}
/* 言語アコーディオン（モバイルメニュー） */
.mobile-menu .mm-lang-section{display:none;}
.mobile-menu .mm-lang{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1.6rem 0.8rem;background:transparent;border:none;border-bottom:1px solid #e2e8f0;color:#1A1A2E;font-family:inherit;font-size:1.6rem;font-weight:500;text-align:left;cursor:pointer;}
.mobile-menu .mm-lang .material-symbols-outlined{font-size:3rem;color:var(--mint);line-height:1;flex-shrink:0; margin:0;}
.mobile-menu .mm-lang .mm-lang-arrow{margin-left:auto;transition:transform .25s ease;}
.mobile-menu .mm-lang[aria-expanded="true"] .mm-lang-arrow{transform:rotate(180deg);}
.mm-lang-list{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.mm-lang-section.open .mm-lang-list{max-height:64rem;}
.mobile-menu .mm-lang-list a{padding-left:4.16rem;color:#4A5568;}
/* バーガーメニュー内のメイン項目（3x2グリッド） */
.mm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.8rem;margin-top:0 !important;}
.mobile-menu .mm-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.6rem;padding:0.8rem 0.4rem;/*color:var(--mint);*/text-decoration:none;font-size:1.36rem;line-height:1.25;text-align:center;border:1px solid #e2e8f0;border-radius:12px;background:#fff;}
.mobile-menu .mm-grid a:hover{background:#f7fafc;border-color:var(--light-teal);color:var(--mint);}
.mobile-menu .mm-grid a .material-symbols-outlined{font-size:4.8rem;color:var(--mint);line-height:1; margin:0;}

/* Hero */
.hero{position:relative;height:100vh;min-height:50vw;display:flex;align-items:center;overflow:hidden;background:transparent; padding:0;
      z-index:1; /* 下のトピックスより手前に置き、切り抜いた部分から背景を覗かせる */}
.hero-ov{position:absolute;inset:0;background:rgba(51,153,255,.05);z-index:1; mix-blend-mode:multiply; }
/* --- メインビジュアルの下端を波形で切り抜く ---------------------------
   以前は .hero-wave（単色の波）を動画の上に重ねていたが、それだと波の部分が
   ベタ塗りになり、トピックスの背景（砂丘の写真）が波の上で途切れてしまう。
   そこで動画側をマスクで切り抜き、切り抜いた部分にトピックスの背景を覗かせる。
   マスクは2枚の合成：
     1枚目 … 波より上をすべて残す矩形グラデーション
     2枚目 … 波の高さの帯のうち「曲線より上」だけを残す（元の波パスの抜き＝evenodd）
   波の形・高さは元の .hero-wave と同じ（viewBox 1440x60 → 60/1440 = 4.17vw）。 */
:root{--hero-wave-h:4.17vw;}
.hero-video,.hero-ov{
  -webkit-mask:var(--hero-wave-mask); mask:var(--hero-wave-mask);
  --hero-wave-mask:
    linear-gradient(#000,#000) no-repeat left top / 100% calc(100% - var(--hero-wave-h)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none"><path fill-rule="evenodd" fill="%23000" transform="translate(1440,0) scale(-1,1)" d="M0,0H1440V60H0Z M0,0C240,60,480,-40,720,20S1221,52,1440,0V80H0Z"/></svg>') no-repeat left bottom / 100% var(--hero-wave-h);
}
/* 単色の波はもう使わない（HTMLの <svg class="hero-wave"> は残したまま非表示） */
.hero-wave{display:none;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* --- メイン動画キャプション（左下・動画の再生位置に連動／JS: top.js） --- */
.hero-cap{position:absolute;left:clamp(2.4rem,5vw,5rem);bottom:clamp(3rem,4vw,7rem);z-index:4;max-width:min(90%,60rem);pointer-events:none;opacity:0;transform:translateY(0.8rem);transition:opacity .4s ease,transform .5s ease;}
.hero-cap.is-show{opacity:1;transform:translateY(0);}
.hero-cap-in{display:inline-block;padding:0.5rem 1.2rem;border-radius:20px;background:rgba(0,0,0,.2);backdrop-filter:blur(8px);/*border:1px solid rgba(255,255,255,.1);*/color:#fff;font-size:clamp(1.3rem,1.5vw,1.5rem);font-weight:500;line-height:1.6;text-shadow:0 1px 6px rgba(0,0,0,.35);}
@media(prefers-reduced-motion:reduce){.hero-cap{transition:none;}}

.section-wave{display:block;width:100%;height:auto;margin-bottom:-1px;}
.section-wave.flip{transform:scaleX(-1);}
.wave-wrap{line-height:0;}
.wave-wrap.bg-sand{background:var(--sand-light);}
.wave-wrap.bg-teal{background:#5bb;}
.hero-ct{position:relative;z-index:2;max-width:1600px;margin:0 auto;padding:20rem clamp(2.4rem,5vw,5rem) 0;width:100%;transform:translateY(-60px);}
.hero-badge{display:inline-flex;align-items:center;gap:0.8rem;background:rgba(0,0,0,.2);backdrop-filter:blur(8px);padding:0.6rem 1.6rem;border-radius:20px;color:#fff;margin-bottom:2rem;/*border:1px solid rgba(255,255,255,.1);*/}
.hero h1{font-size:clamp(3.6rem,6vw,7.2rem);font-weight:500;color:#fff;line-height:1.15;letter-spacing:-1px;margin-bottom:1.6rem; text-shadow:1px 1px 1.5px rgba(0,34,51,.33);}
.hero h1 span{display:block;}
.hero-sub{font-size:clamp(1.6rem,2vw,2rem); color:rgba(255,255,255,.9);max-width:520px;line-height:1.8;font-weight:500; margin-bottom:2.8rem; text-shadow:1px 1px 1.5px rgba(0,34,51,.33);}
.hero-search{display:flex;/*gap:0.8rem;*/max-width:600px; display:none; position: relative;}

/* メインビジュアル右側の動画再生ボタン（右下のAIチャットボタンと重ならない縦中央配置） */
.hero-play{position:relative;z-index:4;margin:0 0 3.2rem;width:clamp(7rem,8.8vw,10rem);height:clamp(7rem,8.8vw,10rem);display:flex;align-items:center;justify-content:center;border-radius:50%;text-decoration:none;color:#fff;cursor:pointer;/*background:rgba(0,0,0,.25);*/backdrop-filter:blur(2px);/*border:1px solid rgba(255,255,255,.35);*/transition:background .3s,transform .3s,box-shadow .3s;}
.hero-play:hover,.hero-play:focus-visible{/*background:rgba(85,188,188,.7);box-shadow:0 8px 32px rgba(0,0,0,.3);*/transform:scale(1.1);}
.hero-play svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:heroPlaySpin 24s linear infinite;}
.hero-play svg path{fill:none;}
.hero-play svg text{fill:#fff;font-size:18px;font-weight:700;letter-spacing:0.02rem; text-shadow:1px 1px 1.5px rgba(0,34,51,.33);}
.hero-play .hero-play-ic{font-size:clamp(4rem,6vw,6rem);line-height:1;margin:0; text-shadow:1px 1px 1.5px rgba(0,34,51,.33);}
@keyframes heroPlaySpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.hero-play svg{animation:none;}}

/* 動画モーダル */
.video-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:clamp(2.4rem,5vw,4.8rem);background:rgba(0,0,0,.85);}
.video-modal.open{display:flex;}
.video-modal-inner{position:relative;width:min(112rem,100%);}
.video-modal video{position:relative;z-index:1;display:block;width:100%;max-height:78vh;border-radius:1.2rem;background:#000;}
.video-modal-close{position:absolute;z-index:3;top:-1.6rem;right:-1.6rem;width:4.8rem;height:4.8rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#fff;color:var(--dark);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .2s;}
.video-modal-close:hover{transform:scale(1.08);}
.video-modal-close .material-symbols-outlined{font-size:2.8rem;line-height:1;margin:0;}

.sb{flex:1;position:relative; display:none;}
.sb input{width:100%;padding:1.6rem 2rem;border:1px solid rgba(255,255,255,.9);border-radius:4.8rem 0 0 4.8rem; background:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:#fff;font-family:inherit;outline:none;transition:.3s; box-sizing: border-box; }
.sb input::placeholder{color:rgba(255,255,255,.5);}
.sb input:focus{border-color:var(--mint);background:rgba(255,255,255,.15);}
.sb-ic{position:absolute;left:1.6rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.5);font-size:1.8rem;}
.btn-ai{display: flex; align-items: center; gap: 1rem; padding: clamp(0.8rem, 1.2vw, 1.2rem) clamp(1.6rem, 3vw, 3.2rem) clamp(0.8rem, 1.2vw, 1.2rem) clamp(1.2rem, 1.6vw, 1.6rem); background: #55bcbc; color: #fff; border: 1px solid #fff; border-radius: 4.8rem; font-weight: 500; font-family: inherit; font-size: 1.6rem; cursor: pointer; box-shadow: 0 8px 32px rgba(85, 188, 188, .35); transition: .3s; animation: fabP 3s ease-in-out infinite;}
.btn-ai:hover{background:#46a5a5;/*transform:translateY(-2px);*/box-shadow:0 8px 24px rgba(85,188,188,.3);}
.btn-ai .ai-ic{width: 3.2rem; height: 3.2rem; background: rgba(255, 255, 255, .2); border-radius: 50%; display: flex; align-items: center; justify-content: center;}

/* Section */
section{padding-top:2.4rem; padding-bottom:2.4rem;}
.si{max-width:1440px;margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem);}
.sl{font-size:1.4rem;font-weight:500;color:var(--light-teal);letter-spacing:2px;text-transform:uppercase;margin-bottom:0.8rem;display:inline-flex;align-items:center;gap:0.6rem;}
/* 中身が空の .sl は非表示（CMSに入力欄が無いページ見出し用。JSでラベルを入れると表示される） */
.sl:empty{display:none;}
.sl .material-symbols-outlined{font-size:2rem;color:inherit;line-height:1; margin:0;}
.st{}
.sd{display:none;color:var(--g6); /*max-width:600px;*/line-height:1.8;margin-bottom:4.8rem;}
/* 見出し右側に「もっと見る」ボタンを並べる横並びヘッダー */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;}
.section-head-text{min-width:0;}
.section-more-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.6rem;padding:0.8rem 1.5rem 0.8rem 2rem;background:transparent;border:1px solid var(--light-teal);border-radius:24px;color:var(--light-teal);text-decoration:none;font-size:1.44rem;font-weight:500;white-space:nowrap;transition:.2s;}
.section-more-btn:hover{background:var(--light-teal);color:#fff;transform:translateY(-2px);}
.section-more-btn .material-symbols-outlined{font-size:1.84rem;line-height:1; margin:0;}

/* 旅スタイル*/
.travel-style{background:var(--sand-light);--ts-label-bg:var(--sand-light);--ts-notch:0.8rem;
  padding-bottom:calc(2.4rem + 6.95vw); /* 末尾はエリアで探すが重なるぶん */}
/* セクション外にあった波の帯は役目を終えたので隠す（エリア側で切り抜く） */
.travel-style + .wave-wrap.bg-sand{display:none;}
.travel-style .ts-head{text-align:center;}
/* 縦長サムネイル＋縦書きラベル（琴浦町観光協会サイトのスタイル） */
.travel-style .ts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2.4rem,3vw,4rem) clamp(1.6rem,2vw,3.2rem);}
/* カード本体は透明・角丸なし。overflow:hidden を外して corner を外側にはみ出させる */
.travel-style .ts-card,.travel-style .cat-card{position:relative;display:block;background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none;transition:transform .3s;cursor:pointer;text-decoration:none;color:inherit;}
.travel-style .ts-card:hover,.travel-style .cat-card:hover{transform:translateY(-0.4rem);box-shadow:none;}
.travel-style .ts-card a{display:block;text-decoration:none;color:inherit;}
/* 角丸は写真ラッパー(.photo)側で処理（.cat-card .photo の汎用指定より優先させる） */
.travel-style .cat-card .photo,.travel-style .ts-card .photo{display:block;position:relative;aspect-ratio:4/3;border-radius:0.8rem;overflow:hidden;}
.travel-style .cat-card .photo img,.travel-style .ts-card .photo img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;}
/* .photo で囲っていないテンプレート(ts-card 直下の img)向け */
.travel-style .ts-card > a > img,.travel-style .ts-card > img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0.8rem;transition:opacity .3s;}
/* ラベル: 写真の左上に切り欠き風で重ねる */
.travel-style .ts-body{position:absolute;top:calc(var(--ts-notch) * -1);left:0;z-index:2;padding:0 var(--ts-notch) var(--ts-notch) 0;background:var(--ts-label-bg);border-radius:0 0 0.8rem 0;max-height:100%;text-align:left;overflow:visible; min-width:27px;}
/* 内側Rの切り欠き: 円を box-shadow で写して四分円を作る */
.travel-style .ts-body .corner{width:var(--ts-notch);height:var(--ts-notch);display:block;position:absolute;bottom:calc(var(--ts-notch) * -1);left:0;overflow:hidden;z-index:3;}
.travel-style .ts-body .corner:nth-of-type(2){left:auto;right:calc(var(--ts-notch) * -1);top:var(--ts-notch);bottom:auto;}
.travel-style .ts-body .corner::before{content:"";display:block;width:200%;height:200%;border-radius:50%;box-shadow:calc(var(--ts-notch) * -1) calc(var(--ts-notch) * -1) 0 0 var(--ts-label-bg);transform:translate(0,0);}
.travel-style .ts-body h3{writing-mode:vertical-rl;font-size:clamp(1.6rem,1.4vw,2.1rem);font-weight:500;color:var(--dark);letter-spacing:.05em;line-height:1.15;margin:0;white-space:nowrap;}
.travel-style .ts-desc{display:none;}
/* 日本語・韓国語以外（翻訳時など html[lang] が ja / ko 以外）：横書きラベルを写真の左下に表示。
   切り欠き(.corner)は上下反転して左下の角に合わせる。長い単語は折り返す */
html:not(:lang(ja)):not(:lang(ko)) .travel-style .ts-body{top:auto;bottom:calc(var(--ts-notch) * -1);padding:var(--ts-notch) var(--ts-notch) 0 0;border-radius:0 0.8rem 0 0;max-width:calc(100% - 2.4rem);}
html:not(:lang(ja)):not(:lang(ko)) .travel-style .ts-body .corner{top:calc(var(--ts-notch) * -1);bottom:auto;transform:scaleY(-1);}
html:not(:lang(ja)):not(:lang(ko)) .travel-style .ts-body .corner:nth-of-type(2){top:auto;bottom:var(--ts-notch);}
html:not(:lang(ja)):not(:lang(ko)) .travel-style .ts-body h3{writing-mode:horizontal-tb;white-space:normal;overflow-wrap:anywhere;word-break:normal;hyphens:auto;font-size:clamp(1.4rem,1.2vw,1.8rem);letter-spacing:0;line-height:1.3;}
@media(max-width:640px){
  html:not(:lang(ja)):not(:lang(ko)) .travel-style .ts-body{max-width:calc(100% - 1.2rem);}
  html:not(:lang(ja)):not(:lang(ko)) .travel-style .ts-body h3{font-size:clamp(1.2rem,3.4vw,1.4rem);}
}
/* 旧Tailwind mb-0 クラスの置換ユーティリティ */
.mb-0{margin-bottom:0;}


/* Topics (Slick carousel) */
/* 背景：手前から「白波 → イラスト → 地色」の3枚重ね。
   波をセクションの中に入れることで、メインビジュアル側の切り抜きと地続きになる。
   波の形は section-wave.flip と同じパス（transform で左右反転）。高さは 100/1440 = 6.95vw。 */
/* メインビジュアルの切り抜き分だけ上に潜り込ませる（padding-top で中身の位置は据え置き） */
.topics{margin-top:calc(-1 * var(--hero-wave-h)); padding-top:calc(2.4rem + var(--hero-wave-h));
  padding-bottom:calc(2.4rem + 6.95vw);
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,40C240,100,480,0,720,60s501,32,720-20v80H0V40Z" fill="%23fff" transform="translate(1440,0) scale(-1,1)"/></svg>') no-repeat left bottom / 100% 6.95vw,
    /* 左下のイラスト（sample03.png）は削除 2026.09.28 */
    #fbf2e6;}
/* セクション外にあった波の帯は役目を終えたので隠す */
.topics + .wave-wrap.bg-sand{display:none;}
/* ===== 【暫定】濃い背景写真の上でのテキスト処理 =====
   .dark を付けない状態 … 文字・ボタンを乗算で砂に馴染ませる（下の :not(.dark) の指定）
   .dark を付けた状態   … 文字を白く反転させる（さらに下のブロック）
   背景写真の扱いが決まったら、この2ブロックごと削除して構わない。 */
.topics:not(.dark) .sl,
.topics:not(.dark) .st,
.topics:not(.dark) .sd,
.topics:not(.dark) .topic-title,
.topics:not(.dark) .topic-desc,
.topics:not(.dark) .section-more-btn,
.topics:not(.dark) .topic-more{mix-blend-mode:multiply;}

/* ----- 白文字バージョン =====
   <section class="topics is-feature dark"> のように .dark を足すと文字色が反転する。
   背景写真の扱いが決まったら、このブロックごと削除して構わない。 */
.topics.dark .sl{color:#fff;}
.topics.dark .st,
.topics.dark .topic-title{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.topics.dark .sd,
.topics.dark .topic-desc{color:rgba(255,255,255,1);text-shadow:0 1px 3px rgba(0,0,0,.3); font-weight:500;}
.topics.dark .section-more-btn{border-color:#fff;color:#fff;}
.topics.dark .section-more-btn:hover{background:#fff;color:var(--dark);}
.topics.dark .slick-dots li button:before{background:#fff;}
.topics.dark .slick-dots li.slick-active button:before{background:#fff;opacity:1;}

/* 1024px以下ではイラストを出さない（2枚目のレイヤーだけサイズ0にして消す） */
@media(max-width:1024px){
  .topics{background-size:100% 6.95vw;}
}
/* カルーセルはコンテナ幅で断ち切らず画面端まで見せる */
.topics,.course{overflow-x:clip;}
.topics-wrap{position:relative;/*margin-top:2.4rem;*/}
.slick-dotted.slick-slider { margin-bottom:0;}
/* 初期化前のレイアウト（FOUC対策） */
.topics-track:not(.slick-initialized){display:flex;gap:2.4rem;overflow:hidden;}
.topics-track:not(.slick-initialized) .topic-card{flex:0 0 calc((100% - 72px) / 4);}
/* Slick初期化後のスライド間スペース */
.topics-track.slick-initialized .slick-list{ margin:0 clamp(-3.2rem,-3vw,-1.6rem);}
.topics-track.slick-initialized .topic-card{ cursor:pointer; padding:1.5rem 1.2rem; }/* 上下paddingはカレント拡大時のはみ出し分の余白 */
.topic-card{cursor:pointer;}
.topic-card a { text-decoration: none;}
.topic-img{width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#cbd5e0;transition:.3s;}
.topic-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.topic-card:hover .topic-img{box-shadow:0 12px 32px rgba(0,0,0,.12);}
.topic-card:hover .topic-img img{transform:scale(1.05);}
.topic-title{font-size:1.8rem; font-weight:500;color:var(--dark);margin-top:1.2rem;line-height:1.5;}
.topic-desc{color:var(--g6);line-height:1.6;margin-top:0.6rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; text-decoration: none; font-weight:500;}
/* 「詳しく見る」ボタンは .is-feature（awanavi風）専用。
   通常カルーセルのカードは画像＋タイトル＋説明のみ */
section:not(.is-feature) .topic-more{display:none;}
.topics-nav{position:absolute;top:calc(40% - 2.4rem); width:clamp(4rem,5vw,4rem);height:clamp(4rem,5vw,4rem);border-radius:4rem;border:none;background:rgba(0,0,0,.7);color:#fff;font-size:2rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0.4rem 1.6rem rgba(0,0,0,.15);transition:background .2s, transform .2s;z-index:5;text-decoration:none;}
.topics-nav:hover{background:rgba(0,0,0,.75);transform:scale(1.05);}
.topics-nav.prev{left:clamp(-3.2rem,-3vw,-1.6rem);}
.topics-nav.next{right:clamp(-3.2rem,-3vw,-1.6rem);}
.topics-nav:disabled,.topics-nav.slick-disabled{opacity:.4;cursor:not-allowed;}
.topics-nav .material-symbols-outlined{font-size:2.8rem;line-height:1; margin:0;}
.topics-thumbs{display:none;}

/* 拡大したカードが .slick-list(overflow:hidden) の上下で切れないよう余白を確保 */
.topics-track.slick-initialized .slick-list{overflow:visible;padding-top:3rem!important;padding-bottom:3rem!important;}


/* カレントスライドを大きく表示（PC=左端 / スマホ=中央） */
.topics-track.slick-initialized .topic-card{position:relative;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s;}
/* PC・タブレット: 左端（カレント）のカードを少し大きく */
@media(min-width:641px){
  .topics-track.slick-initialized .topic-card.slick-current{transform:scale(1.25);transform-origin:left center;z-index:2;}
  /* 拡大した幅ぶん後続を右へ送り、各カードの隙間を均等に見せる
     ずらし量 = 拡大によるはみ出し幅 0.25 x (カード幅 - 左右padding 1.6rem) */
  .topics-track.slick-initialized .topic-card.slick-current ~ .topic-card{transform:translateX(calc(25% - 0.4rem));}
}
/* スマホ: センター（カレント）のカードを大きく、両サイドは少し小さく */
@media(max-width:640px){
  .topics-track.slick-initialized .topic-card.slick-current{transform:scale(1.25);transform-origin:center center;z-index:2;}
  .topics-track.slick-initialized .topic-card.slick-slide:not(.slick-current){transform:scale(.8);opacity:.7;}
  /* 中央拡大(+0.125幅)と両サイド縮小(-0.1幅)の差ぶんを外側へ逃がし、左右の隙間を均等に */
  .topics-track.slick-initialized .topic-card.slick-current ~ .topic-card{transform:translateX(calc(2.5% - 0.08rem)) scale(.8);}
  .topics-track.slick-initialized .topic-card:has(~ .topic-card.slick-current){transform:translateX(calc(-2.5% + 0.08rem)) scale(.8);}
}
.br-480{display:none;}


/* ============================================================
 * Topics / モデルコース：フィーチャーカルーセル（awanavi風）
 *  左＝タイトル＋コメント／中央＝大きなサムネイル／右＝次のサムネイル
 *  ※ <section> に .is-feature が付いたときだけ適用。既存レイアウトは無変更。
 * ============================================================ */
/* 左テキスト用の余白をトラック側に確保
   ＜幅の決め方＞ テキストは読みやすい幅（1440pxで約400px）に留め、
   余ったぶんはトラック側に回してサムネイルを大きくする。
   1スロット幅 S=(100-P)C/300、カード内容幅 W=S-32px、カレント画像=kW（k=2）。
   テキスト左端を見出しに揃える条件は P・C/100 + 16 - 48 - T = 0。
   P=31.4% / テキスト幅=141.5%(W比) で 1025〜1440px の誤差が 0〜+4px に収まる。
   3枚目は右にはみ出す前提（section の overflow-x:clip で画面端で切れる）。 */
.is-feature .topics-wrap{padding-left:31.4%;padding-bottom:calc(8.6% + 4.4rem);min-height:0;}

/* 既存の「カレント1.25倍」変形をリセット（PC/SPどちらの指定より詳細度を高くする） */
.is-feature .topics-track.slick-initialized .topic-card,
.is-feature .topics-track.slick-initialized .topic-card.slick-current,
.is-feature .topics-track.slick-initialized .topic-card.slick-current ~ .topic-card,
.is-feature .topics-track.slick-initialized .topic-card:has(~ .topic-card.slick-current){transform:none;}
.is-feature .topics-track.slick-initialized .slick-list{margin:0;/*padding-top:12rem!important;padding-bottom:12rem!important;*/}
.is-feature .topics-track.slick-initialized .topic-card{padding:0 1.6rem;opacity:0;pointer-events:none;transition:opacity .5s ease;}
/* カレント＋次＋次の次の3枚を見せ、それ以外（＝左に流れた過去スライド）は隠す */
.is-feature .topics-track.slick-initialized .topic-card.slick-current,
.is-feature .topics-track.slick-initialized .topic-card.slick-current + .topic-card,
.is-feature .topics-track.slick-initialized .topic-card.slick-current + .topic-card + .topic-card{opacity:1;pointer-events:auto;}
.is-feature .topics-track.slick-initialized .topic-card.slick-current{z-index:3;}

/* サムネイル：カレントを2倍(k=2)に拡大し、後続2枚は0.85倍(s)に縮小。
   いずれも transform-origin:left center なので左端は動かない。
   隙間を均等(1.6rem×2=32px)に保つためのずらし量は
     次   = (k-1)W = 1.00W → translateX 1.00/s = 117.65%
     次の次= (k+s-2)W = 0.85W → translateX 0.85/s = 100%
   （translateX は縮小後の座標系で効くので s で割る）
   結果として3枚目は本文幅の右へはみ出し、画面端で切れて見える。 */
.is-feature .topic-img{border-radius:1.6rem;transform:scale(.85);transform-origin:left center;transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .3s;}
.is-feature .topic-card.slick-current .topic-img{transform:scale(2);box-shadow:0 0.8rem 1.8rem rgba(0,0,0,.13);}
.is-feature .topic-card.slick-current + .topic-card .topic-img{transform:scale(.85) translateX(117.65%);}
.is-feature .topic-card.slick-current + .topic-card + .topic-card .topic-img{transform:scale(.85) translateX(100%);}
/* 非カレントは白を重ねてトーンを落とす */
.is-feature .topic-card:not(.slick-current) .topic-img::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35);}

/* 左側のテキスト（カレントのみ表示）
   ※ .topic-txt の位置基準になる <a> は既定が display:inline のため、
     ブロック化して包含ブロックを確定させる（Safari等でのズレ・非表示対策） */
.is-feature .topic-card > a{display:block;}
.is-feature .topic-txt{position:absolute;top:50%;right:calc(100% + 4.8rem);width:141.5%;transform:translateY(-50%);text-align:left;opacity:0;visibility:hidden;transition:opacity .5s ease;}
.is-feature .topic-card.slick-current .topic-txt{opacity:1;visibility:visible;}
/* 背景写真の上でも読めるよう、テキストの後ろに半透明のすりガラスを敷く */
.topics .topic-txt::before{content:"";position:absolute;inset:-1.6rem -2rem;z-index:-1; border-radius:1.6rem;/*background:rgba(255,255,255,.45);*/ -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.is-feature .topic-title{margin-top:0;font-size:clamp(2rem,2vw,2.8rem);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.is-feature .topic-desc{margin-top:1.2rem;font-size:1.4rem;-webkit-line-clamp:3;line-clamp:3;}
.is-feature .topic-more{display:inline-flex;align-items:center;gap:0.4rem;margin-top:2rem;padding:0.9rem 2rem 0.9rem 2.4rem;border-radius:999px;background:var(--mint);color:#fff;font-size:1.4rem;font-weight:500;letter-spacing:.05em;line-height:1;transition:background .25s,transform .25s;}
.is-feature .topic-more .material-symbols-outlined{font-size:1.8rem;margin:0;}
.is-feature .topic-card a:hover .topic-more{background:var(--teal);transform:translateX(0.4rem);}
/* 「詳しく見る」ボタン → 右のサムネイルをつなぐ点線
   ・右端：.topic-txt の右端は画像左端のちょうど 4.8rem 左なので right:-4.8rem で画像に接する
   ・左端：ボタン幅は140px固定（ラベル「詳しく見る」＋矢印）なので 14rem ＋ 余白1.6rem
   ・縦位置：ボタン中心は .topic-txt 下端から 1.8rem 上
   ※ ボタンのラベルを変えたら left の値も調整すること */
.is-feature .topic-txt::after{content:"";position:absolute;left:15.6rem;right:-4.8rem;bottom:calc(1.8rem - 1px);border-top:2px dotted var(--mint);opacity:.8;pointer-events:none;}

/* 矢印とドット：JSで .topics-ctrl にまとめ、左テキスト下に
   「◀ ●●●●● ▶」の1行として左カラム幅(31.4%)の中で中央寄せする */
.is-feature .topics-ctrl{position:absolute;left:0;bottom:1.6rem;width:100%;display:flex;align-items:center;justify-content:center;gap:1.6rem;}
.is-feature .topics-ctrl .topics-nav{position:static;top:auto;right:auto;bottom:auto;left:auto;flex:0 0 auto;}
.is-feature .slick-dots{position:static;width:auto;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;text-align:center;}
.is-feature .slick-dots li{width:1.6rem;height:1.6rem;margin:0;}
.is-feature .slick-dots li button{width:1.6rem;height:1.6rem;padding:0;}
.is-feature .slick-dots li button:before{content:'';width:0.7rem;height:0.7rem;border-radius:50%;background:var(--mint);opacity:.35;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0;transition:width .2s,height .2s,opacity .2s;}
.is-feature .slick-dots li.slick-active button:before{width:1.2rem;height:1.2rem;opacity:.95;}

/* slick未初期化／JS無効時は通常のカード（画像＋下にテキスト）にフォールバック */
.is-feature .topics-track:not(.slick-initialized) .topic-card{flex:0 0 calc((100% - 48px) / 3);}
.is-feature .topics-track:not(.slick-initialized) .topic-img{transform:none;}
.is-feature .topics-track:not(.slick-initialized) .topic-txt{position:relative;top:auto;right:auto;width:100%;transform:none;opacity:1;visibility:visible;margin-top:1.6rem;}

/* ===== モデルコース：PCだけ通常のカルーセル（.is-plain-pc） =====
   .is-feature のPC専用レイアウト（左テキスト＋2倍サムネ＋点線）を打ち消し、
   他のカルーセルと同じ標準表示（4枚並び／カレント1.25倍／画像の下にテキスト）に戻す。
   min-width:1025px に閉じているので、タブレット・スマホ側の見た目は一切変わらない。 */
@media(min-width:1025px){
  .is-feature.is-plain-pc .topics-wrap{padding-left:0;padding-bottom:0;min-height:0;}
  /* 初期化前（FOUC対策）も標準と同じ4枚並びに */
  .is-feature.is-plain-pc .topics-track:not(.slick-initialized) .topic-card{flex:0 0 calc((100% - 72px) / 4);}
  /* 標準カルーセルと同じ：左右は画面端へ食い込ませ、上下はカレント拡大分の余白を確保 */
  .is-feature.is-plain-pc .topics-track.slick-initialized .slick-list{overflow:visible;margin:0 clamp(-3.2rem,-3vw,-1.6rem);padding-top:3rem!important;padding-bottom:3rem!important;}
  .is-feature.is-plain-pc .topics-track.slick-initialized .topic-card{padding:1.5rem 1.2rem;opacity:1;pointer-events:auto;}
  /* カレント（左端）を1.25倍にし、後続は拡大したはみ出し幅ぶん右へ送る＝標準の挙動 */
  .is-feature.is-plain-pc .topics-track.slick-initialized .topic-card.slick-current{transform:scale(1.25);transform-origin:left center;z-index:2;}
  .is-feature.is-plain-pc .topics-track.slick-initialized .topic-card.slick-current ~ .topic-card{transform:translateX(calc(25% - 0.4rem));}
  /* サムネイル側の拡大・縮小・白かぶせは解除（ホバー時の影は標準どおり残す） */
  .is-feature.is-plain-pc .topic-img,
  .is-feature.is-plain-pc .topic-card.slick-current .topic-img,
  .is-feature.is-plain-pc .topic-card.slick-current + .topic-card .topic-img,
  .is-feature.is-plain-pc .topic-card.slick-current + .topic-card + .topic-card .topic-img{transform:none;border-radius:12px;box-shadow:none;}
  .is-feature.is-plain-pc .topic-card:hover .topic-img{box-shadow:0 1.2rem 3.2rem rgba(0,0,0,.12);}
  .is-feature.is-plain-pc .topic-card:not(.slick-current) .topic-img::after{display:none;}
  /* テキストは画像の下（通常フロー）へ。標準カードに「詳しく見る」ボタンと点線は無い */
  .is-feature.is-plain-pc .topic-txt{position:relative;top:auto;right:auto;width:100%;transform:none;opacity:1;visibility:visible;margin-top:0;}
  .is-feature.is-plain-pc .topic-txt::after{display:none;}
  .is-feature.is-plain-pc .topic-title{margin-top:1.2rem;font-size:1.8rem;}
  .is-feature.is-plain-pc .topic-desc{margin-top:0.6rem;font-size:inherit;-webkit-line-clamp:2;line-clamp:2;}
  .is-feature.is-plain-pc .topic-more{display:none;}
  /* 矢印はカルーセルの左右へ（ドットはPCでは slick 側で dots:false） */
  .is-feature.is-plain-pc .topics-ctrl{position:static;width:auto;display:block;bottom:auto;}
  .is-feature.is-plain-pc .topics-ctrl .topics-nav{position:absolute;top:calc(40% - 2.4rem);bottom:auto;}
  .is-feature.is-plain-pc .topics-ctrl .topics-nav.prev{left:clamp(-3.2rem,-3vw,-1.6rem);right:auto;}
  .is-feature.is-plain-pc .topics-ctrl .topics-nav.next{left:auto;right:clamp(-3.2rem,-3vw,-1.6rem);}
}

/* モデルコースのカードは画像＋タイトルのみ（説明文は出さない）。
   PC/タブレット/スマホ共通。.course（＝モデルコース）だけに限定。 */
.course.is-feature .topic-desc{display:none;}

/* タブレット・スマホ：画像の下にテキストを置く縦積みへ切替（次のサムネイルは右に見切れ表示） */
@media(max-width:1024px){
  .is-feature .topics-wrap{padding-left:0;padding-bottom:0;min-height:0;}
  .is-feature .topic-txt{position:relative;top:auto;right:auto;width:100%;transform:none;opacity:1;visibility:visible;margin-top:1.6rem;}
  /* 画像下にテキストが回り込む配置では、すりガラスの板は出さない */
  .topics .topic-txt::before{display:none;}
  .is-feature .topic-img,
  .is-feature .topic-card.slick-current .topic-img,
  .is-feature .topic-card.slick-current + .topic-card .topic-img,
  .is-feature .topic-card.slick-current + .topic-card + .topic-card .topic-img{transform:none;}
  /* コントロール行は通常フローに戻す。position:static にしておくことで
     中の矢印の絶対配置が .topics-wrap 基準になる */
  .is-feature .topics-ctrl{position:static;width:auto;display:block;bottom:auto;}
  /* ドットはカルーセル下に通常フローで中央配置（その下にサムネイル列が続く） */
  .is-feature .slick-dots{width:100%;padding:0.8rem 0 0;justify-content:center;}
  .is-feature .slick-dots li,
  .is-feature .slick-dots li button{width:2.4rem;height:2.4rem;}
  .is-feature .slick-dots li button:before{width:0.8rem;height:0.8rem;}
  .is-feature .slick-dots li.slick-active button:before{width:1.4rem;height:1.4rem;}
  .is-feature .topics-track.slick-initialized .topic-card{opacity:.4;pointer-events:auto;}
  .is-feature .topics-track.slick-initialized .topic-card.slick-current{opacity:1;}
  .is-feature .topic-card:not(.slick-current) .topic-img::after{background:rgba(255,255,255,.2);}
  .is-feature .topic-title{font-size:clamp(1.7rem,2.4vw,2.2rem);}
  .is-feature .topic-desc{-webkit-line-clamp:2;line-clamp:2;}
  .is-feature .topic-more{margin-top:1.6rem;}
  .is-feature .topic-txt::after{display:none;}
  .is-feature .topics-track.slick-initialized .slick-list{padding-top:1rem!important;padding-bottom:1rem!important;}
  .is-feature .topics-ctrl .topics-nav{position:absolute;top:calc(40% - 2.4rem);bottom:auto;}
  .is-feature .topics-ctrl .topics-nav.prev{left:clamp(-3.2rem,-3vw,-1.6rem);right:auto;}
  .is-feature .topics-ctrl .topics-nav.next{left:auto;right:clamp(-3.2rem,-3vw,-1.6rem);}
}

/* スマホ：センターのサムネイルをより大きく見せる
   （左右の見切れ幅を詰め、両隣は少し縮小＋トーンダウンして中央を強調） */
@media(max-width:640px){
  .is-feature .topics-track.slick-initialized .topic-card{padding:0 1rem;opacity:.5;}
  .is-feature .topics-track.slick-initialized .topic-card.slick-current{opacity:1;}
  /* 左右の見切れは画像だけでなく topic-card ごと縮小。
     センター側の辺（右隣は左端／左隣は右端）を基準にすることで、
     見切れ幅は変えずにカードだけを小さく見せる */
  .is-feature .topics-track.slick-initialized .topic-card:not(.slick-current),
  .is-feature .topics-track.slick-initialized .topic-card.slick-current ~ .topic-card,
  .is-feature .topics-track.slick-initialized .topic-card:has(~ .topic-card.slick-current){transform:scale(.86);transform-origin:left center;}
  /* 左隣だけは右端基準（＝センター側の辺を固定） */
  .is-feature .topics-track.slick-initialized .topic-card:has(+ .topic-card.slick-current){transform:scale(.86);transform-origin:right center;}
}

.course{ background:#fff; }


/* Entries */
.entries{background:#fff;}
.eg{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;}
.ec{border-radius:20px;overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ec:hover{transform:translateY(-8px);box-shadow:0 1.6rem 4.8rem rgba(0,0,0,.12);}
.ei{height:clamp(14rem,22vw,20rem);position:relative;overflow:hidden;}
.ei-inner{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.ec:hover .ei-inner{transform:scale(1.08);}
.ei-lbl{position:absolute;bottom:1.6rem;left:1.6rem;color:#fff;font-size:clamp(3.2rem,5vw,4.8rem);font-weight:500;opacity:.25;letter-spacing:-2px;}
.eb{padding:2.4rem;}
.etag{display:inline-block;padding:0.4rem 1rem;border-radius:12px;font-size:1.1rem;font-weight:500;margin-bottom:1.2rem;}
.ec:nth-child(1) .etag{background:rgba(14,122,138,.1);color:var(--teal);}
.ec:nth-child(2) .etag{background:rgba(45,106,79,.1);color:var(--forest);}
.ec:nth-child(3) .etag{background:rgba(var(--olive-rgb),.1);color:var(--olive);}
.etitle{font-size:clamp(2rem,2.4vw,2.4rem);font-weight:500;margin-bottom:0.8rem;}
.edesc{color:var(--g6);line-height:1.6;}
.eitems{display:flex;flex-wrap:wrap;gap:0.8rem;margin-top:1.6rem;}
.eitem{padding:0.6rem 1.4rem;background:var(--g1);border-radius:20px;font-size:1.4rem;color:var(--g6);transition:.2s;}
.eitem:hover{background:var(--g2);color:var(--dark);}

/* Ranking */
/* 背景：手前から「風紋の写真 → 地色」の2枚重ね。上端はマスクで波形に切り抜き、
   エリアで探すに重ねることで砂の写真がそのまま繋がる。
   下端の波はデジタルマップ側（.popular）で切り抜くので、こちらには持たない。
   トピックスと同じく波をセクションの中に入れ、PRバナーA枠もこのセクションの中に置いている。
   上の白波は section-wave と同じ曲線の“上側”を白で塗ったもの（＝元の波の抜き）。
   下の青緑の波は section-wave.flip と同じパスを transform で左右反転。高さはどちらも 100/1440 = 6.95vw。 */
.ranking{margin-top:calc(-1 * 6.95vw);
  padding-top:calc(2.4rem + 6.95vw); padding-bottom:calc(2.4rem + 6.95vw); /* 末尾はデジタルマップが重なるぶん */
  background:
    url("../img/bg_fumon.webp") no-repeat left top / cover,
    #fbf2e6;
  -webkit-mask:var(--ranking-mask); mask:var(--ranking-mask);
  --ranking-mask:
    linear-gradient(#000,#000) no-repeat left bottom / 100% calc(100% - 6.95vw),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,40C240,100,480,0,720,60s501,32,720-20v80H0V40Z" fill="%23000"/></svg>') no-repeat left top / 100% 6.95vw;}
/* セクション外にあった上の波の帯は役目を終えたので隠す */
.wave-wrap:has(+ .ranking){display:none;}

/* ===== 【暫定】濃い背景写真の上で使う白文字バージョン =====
   <section class="ranking dark"> のように .dark を足すと文字色が反転する。
   背景写真の扱いが決まったら、このブロックごと削除して構わない。 */
.ranking.dark .sl,
.ranking.dark .is h3,
.ranking.dark .ih,
.ranking.dark .ih a{color:#fff;}
.ranking.dark .st,
.ranking.dark .rname{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.ranking.dark .sd,
.ranking.dark .rvw,
.ranking.dark .rtr{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);}
/* Instagramアイコン（PNG）も白く抜く */
.ranking.dark .is h3 img{filter:brightness(0) invert(1);}
/* タブ：アクティブは teal、その他は背景なし（白0%）＋白文字 */
.ranking.dark .rtab.active{background:var(--teal);color:#fff;border:1px solid #fff;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.ranking.dark .rtab:not(.active){background:rgba(255,255,255,0);color:#fff;border:1px solid #fff;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.ranking.dark .rtab:not(.active):hover{background:rgba(136,102,68,.3);}
/* ランキング項目のホバー地色は白ベタ→半透明の茶（--brown #864） */
.ranking.dark .ri:hover{background:rgba(136,102,68,.25);}
/* PRバナーA枠の見出しと区切り線 */
.ranking.dark .pr-banners .sl::before{background:linear-gradient(to right, transparent, rgba(255,255,255,.7));}
.ranking.dark .pr-banners .sl::after{background:linear-gradient(to right, rgba(255,255,255,.7), transparent);}
.rl{display:grid;grid-template-columns:1fr 1fr;gap:4.8rem;}
/* タブUIは <a> 化（Google翻訳対策）。下線・既定色を無効化して見た目を維持 */
.rtab,.ev-tab,.news-tab,.area-tab,.ev-season-tab{text-decoration:none;}
.rtabs{display:flex;gap:0.8rem;margin-bottom:2.4rem;}
.rtab{padding:0.8rem 2rem;border-radius:24px;font-weight:500;border:none;cursor:pointer;transition:.2s;font-family:inherit;}
.rtab.active{background:var(--mint);color:#fff;}
.rtab:not(.active){background:var(--w);color:var(--g6);}
.rtab:not(.active):hover{background:var(--g2);}
.rlist{list-style:none; margin-left:0; padding-left:0;}
/* ランキング: タブ切替パネル（data-rank 付きの複数パネルのみ active を表示） */
.rlist[data-rank]{display:none;}
.rlist[data-rank].active{display:block;}
.ri{position:relative;display:flex;/*align-items:center;*/gap:1.6rem;padding:clamp(1.2rem,1.6vw,1.6rem);border-radius:1.6rem;transition:.2s;text-decoration:none;color:inherit;}
.ri:hover{background:#fff6;}
.rth{width:clamp(9.6rem,15vw,15.2rem);aspect-ratio:3/2;height:auto;border-radius:1.6rem;flex-shrink:0;background-size:cover;background-position:center;position:relative;overflow:hidden;}
/* ランク番号（サムネ左上からはみ出すように配置 / .ri padding1.6remからの相対） */
.rn {position:absolute;top:0;left:0.8rem;display:flex;align-items:center;justify-content:center;z-index:3;}
.rn span{display:block; position:relative;z-index:2;font-weight:500;font-size:2rem;color:#fff;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.55);margin-top:-0.16rem;}
/* 1〜3位：王冠（Material Symbols） */
.ri:nth-child(-n+3) .rn{ width:4.8rem;height:4.8rem;top:-1.2rem;left:0;}
.ri:nth-child(-n+3) .rn::before{content:"crown";font-family:"Material Symbols Outlined";font-size:4.8rem;font-weight:normal;line-height:1;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;text-shadow:-1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, 1px 1px 0 #fff, 0 1px 0 #fff, -1px 1px 0 #fff, -1px 0 0 #fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
.ri:nth-child(-n+3) .rn span{margin-top:0;}
.ri:nth-child(1) .rn::before{color:#F5C518;}
.ri:nth-child(2) .rn::before{color:#b8bCc3;}
.ri:nth-child(3) .rn::before{color:#CD7F32;}
/* 4〜5位：丸 */
.ri:nth-child(n+4) 
.rn{width:3.2rem;height:3.2rem;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.rinfo{flex:1;min-width:0;}
.rname{font-size:2rem;font-weight:500;line-height:1.5;margin-bottom:0.2rem;}
.rvw{display:inline;margin-right:0.8rem;font-weight:500;color:var(--g6);}
.rtr{display:inline;font-weight:500;color:rgba(45,106,79,.8);white-space:nowrap;}
/* 急上昇タブは伸び率だけ見せる（PV数は出さない） */
.rlist[data-rank="rising"] .rvw{display:none;}

/* Instagram */
.is-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:2rem; font-weight:500;/*text-shadow:0 1px 3px rgba(0,0,0,.3);*/}
.is h3{font-size:2rem;font-weight:500;margin-bottom:0;display:flex;align-items:center;gap:0.8rem;}
.ig-ic{width:24px;height:24px;background:linear-gradient(135deg,#833AB4,#E1306C,#F77737);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;}
.ih{color:var(--dark);margin-bottom:0;}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;}
.iitem{aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;transition:.3s;position:relative;background-size:cover;background-position:center;}
.iitem:hover{transform:scale(1.03);box-shadow:0 4px 1.6rem rgba(0,0,0,.15);}
.iitem::after{content:attr(data-label);position:absolute;bottom:0;left:0;right:0;padding:2.4rem 1rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,.5));color:#fff;font-size:1.1rem;font-weight:500;opacity:0;transition:.3s;}
.iitem:hover::after{opacity:1;}

#instagram-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(0.8rem,1.2vw,1.2rem);}
#instagram-feed a{display:block;aspect-ratio:1/1;overflow:hidden; border-radius: 1.6rem; box-shadow:0 0.3rem 0.3rem rgba(0,0,0,.2);}
#instagram-feed img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s;}
#instagram-feed img:hover{transform:scale(1.05);}


/* Popular */
/* 背景：手前から「海の写真 → 地色」の2枚重ね。下端の波はイベントカレンダー側で切り抜く。
   上端はベタ塗りの波を置かず、セクションごとマスクで波形に切り抜く（メインビジュアルと同じ手法）。
   さらに波の高さぶん margin-top で上に潜り込ませることで、
   切り抜いた部分からランキングの砂丘写真がそのまま覗き、写真が途切れない。
   マスクは2枚の合成：
     1枚目 … 上端の帯をのぞく全体を残す矩形
     2枚目 … 帯のうち「曲線より下」だけを残す（元の section-wave.flip と同じ塗り）
   地色 --mint は写真の読み込み前のフォールバックを兼ねる。高さは 100/1440 = 6.95vw。 */
.popular{margin-top:calc(-1 * 6.95vw);
  padding-top:calc(2.4rem + 6.95vw); padding-bottom:calc(2.4rem + 6.95vw);
  background:
    /* 海の写真（bg_umi.webp）は削除 2026.09.28。地色 --mint のみ */
    var(--mint);color:#fff;
  -webkit-mask:var(--popular-mask); mask:var(--popular-mask);
  --popular-mask:
    linear-gradient(#000,#000) no-repeat left bottom / 100% calc(100% - 6.95vw),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,40C240,100,480,0,720,60s501,32,720-20v80H0V40Z" fill="%23000" transform="translate(1440,0) scale(-1,1)"/></svg>') no-repeat left top / 100% 6.95vw;}
/* セクション外にあった白い波の帯は役目を終えたので隠す */
.popular + .wave-wrap.bg-teal{display:none;}
.popular .sl{color:var(--w);}.popular .st{color:#fff;}.popular .sd{color:var(--w);}
/* 背景が海の写真なので、メインビジュアルと同じ影を付けて白文字を浮かせる */
.popular .sl,
.popular .st,
.popular .sd,
.popular .pmap-link a{text-shadow:1px 1px 1.5px rgba(0,34,51,.33);}
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.pc{border-radius:16px;overflow:hidden;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);transition:.4s;cursor:pointer;}
.pc:hover{transform:translateY(-6px);background:rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.2);}
.pi{position:relative;overflow:hidden; aspect-ratio:3/2;}
.pi-bg{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .5s;}
.pc:hover .pi-bg{transform:scale(1.05);}
.pi-tag{position:absolute;top:1.2rem;left:1.2rem;padding:0.4rem 1rem;border-radius:8px;font-size:1.1rem;font-weight:500;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);color:#fff;}
.pb{padding:1.6rem;}.pname{font-weight:500;margin-bottom:0.4rem;font-size: clamp(1.6rem,2vw,2rem);}.parea{font-size:1.4rem;color:rgba(255,255,255,.5);margin-bottom:1.2rem;}
.ptags{display:flex;gap:0.6rem;flex-wrap:wrap;}
.ptag{padding:0.3rem 0.8rem;border-radius:6px;font-size:1.2rem;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);}
/* PlatinumMaps 埋め込み */
.pmap-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:1.6rem;overflow:hidden;background:rgba(255,255,255,.05); /*box-shadow:0 8px 32px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08);*/}
.pmap-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0; border-radius:1rem;}
.pmap-link{text-align:right;margin-top:1.2rem;}
.pmap-link a{color:var(--w);font-size:1.44rem;font-weight:500;text-decoration:none;transition:.2s;}
.pmap-link a:hover{color:#fff;text-decoration:underline;}




/* ===== Google翻訳経由のページでは AIボタン / ヒーロー内検索を非表示 =====
 * .is-translated  : translate-guard.js が付与（プロキシ経由 .translate.goog / lang差分 なども判定）
 * .translated-ltr / .translated-rtl : Google翻訳ウィジェット・Chrome内蔵翻訳が自動で付与（JSなしでも効く保険） */
html.is-translated .hero-search,html.is-translated .ai-fab-wrap,html.is-translated .aip,html.is-translated .chatbot-window,html.translated-ltr .hero-search,html.translated-ltr .ai-fab-wrap,html.translated-ltr .aip,html.translated-ltr .chatbot-window,html.translated-rtl .hero-search,html.translated-rtl .ai-fab-wrap,html.translated-rtl .aip,html.translated-rtl .chatbot-window{display:none!important;}

/* AI FAB */
.ai-fab-wrap{position:fixed;bottom:clamp(1.6rem,3vw,3.2rem);right:clamp(1.6rem,3vw,3.2rem);z-index:999;display:flex;flex-direction:column;align-items:center; transition:0.5s ; }
.ai-fab{display:flex;align-items:center;gap:1rem; padding: clamp(0.8rem, 1.2vw, 1.2rem) clamp(1.6rem, 3vw, 3.2rem) clamp(0.8rem, 1.2vw, 1.2rem) clamp(1.2rem, 1.6vw, 1.6rem);background:#55bcbc;color:#fff;border:1px solid #fff;border-radius:4.8rem; font-weight:500;font-family:inherit;cursor:pointer;box-shadow:0 8px 32px rgba(85,188,188,.35);transition:.3s;animation:fabP 3s ease-in-out infinite;}
.ai-fab-speech{display:block;width:clamp(9rem,12vw,12rem);height:auto;pointer-events:none;transition:transform .45s cubic-bezier(.34,1.2,.64,1),opacity .5s ease;transform-origin:bottom center;}
/* AIパネルが開いている時はボタン上の吹き出しを非表示 */
body:has(.aip.open) .ai-fab-speech{display:none;}
/* 【暫定】吹き出しを常時非表示。chatbot-embed.js が後から <head> に流し込む
   .ai-fab-speech{display:block} に打ち勝つよう body を付けて詳細度を上げている。 */
body .ai-fab-speech{display:none;}
/* AIパネル左下に固定表示する吹き出し (.aip 内に絶対配置) */
.aip-speech{position:absolute;left:0.8rem;bottom:7.2rem;width:140px;height:auto;z-index:2;pointer-events:none;}
.ai-fab:hover{transform:scale(1.05);box-shadow:0 12px 40px rgba(85,188,188,.45);animation:none;}
@keyframes fabP{
  0%,100%{box-shadow:0 8px 32px rgba(85,188,188,.35);}
  50%{box-shadow:0 8px 32px rgba(85,188,188,.55),0 0 0 8px rgba(85,188,188,.1);}
}
.ai-fab-ic{width:3.2rem;height:3.2rem;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* AI Panel */
.aip{position:fixed;bottom:10rem;right:3.2rem;width:400px;max-height:560px;background:#fff;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.2);z-index:99999;overflow:hidden;display:none;flex-direction:column;animation:panIn .3s ease-out;}
.aip.open{display:flex;}
@keyframes panIn{from{opacity:0;transform:translateY(20px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.aip-hd{padding:2rem 2.4rem;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:space-between;}
.aip-t{font-weight:500;}.aip-s{font-size:1.4rem;color:var(--w);}
.aip-x{background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.aip-bd{flex:1;overflow-y:auto;padding:1.6rem 1.6rem 12rem 1.6rem;}
.am{margin-bottom:1.6rem;max-width:90%;}
.am.bot{background:var(--g1);padding:1.4rem 1.8rem;border-radius:4px 18px 18px 18px;line-height:1.6;color:var(--g8);}
.am.user{margin-left:auto;background:var(--mint);color:#fff;padding:1.4rem 1.8rem;border-radius:18px 4px 18px 18px;line-height:1.6;}
.asg{display:flex;flex-wrap:wrap;gap:0.8rem;margin-top:1.2rem;}
.asg button{padding:0.6rem 1.4rem;border-radius:1.6rem;border:1px solid var(--light-teal);color:var(--teal);font-size:1.4rem;cursor:pointer;transition:.2s;background:none;font-family:inherit;}
.asg button:hover{background:var(--light-teal);color:#fff;}
.arc{display:flex;flex-direction:column;gap:1rem;margin-top:1.2rem;}
.arci{display:flex;gap:1.2rem;padding:1.2rem;background:#fff;border-radius:12px;border:1px solid var(--g2);cursor:pointer;transition:.2s;}
.arci:hover{border-color:var(--light-teal);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.arci-th{width:56px;height:56px;border-radius:10px;flex-shrink:0;background-size:cover;background-position:center;}
.arci-info{flex:1;}.arci-n{font-weight:500;margin-bottom:0.2rem;}.arci-m{font-size:1.1rem;color:var(--g4);line-height:1.5;}.arci-l{font-size:1.1rem;color:var(--light-teal);font-weight:500;text-decoration:none;}
/* AIチャット 入力欄・送信ボタン */
.aip-in{display:flex;align-items:center;gap:1rem;min-height:7.2rem;padding:0.8rem 1.6rem;border-top:1px solid var(--g2);}
.aip-in input{flex:1 1 auto;min-width:0;padding:1rem 1.6rem;border:1px solid var(--g2);border-radius:24px;font-family:inherit;outline:none;}
.aip-in input:focus{border-color:var(--light-teal);}
.aip-in button{flex:0 0 40px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--mint);color:#fff;border:none;border-radius:50%;cursor:pointer;transition:.2s;}
.aip-in button:hover{background:var(--teal);}







/* Footer */
footer{background:#fff;color:var(--g6);padding:3rem 0;border-top:1px solid var(--g2);}
/* 下層ページ（body.temp）：本文が短くてもフッタを画面の一番下に置く（sticky footer）。
   body（または .wrapper）を縦並びの flex にし、main を伸ばして残りの高さを埋める。
   ※ flex の中では margin:auto の要素が中身の幅に縮むため、main / .tpl-body には width:100% を付ける */
body.temp{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;}
body.temp > .wrapper{display:flex;flex-direction:column;flex:1 0 auto;width:100%;}
body.temp > main,
body.temp > .wrapper > main{flex:1 0 auto;width:100%;}
body.temp > .wrapper > .tpl-body{width:100%;}
.fi{max-width:1440px;margin:0 auto 3.2rem;padding:0 clamp(2rem,3vw,3.2rem);/*display:grid;grid-template-columns:1.5fr 0.75fr 0.75fr 0.75fr 1fr;*/ display:flex; flex-flow:row wrap; align-items: flex-start; justify-content: space-between; gap:4rem;}
/* フッタが .fb + .fc 1つだけの簡易構成のときは2カラム表示 */
.fi:has(> :nth-child(2):last-child){grid-template-columns:2fr 1fr;}
.fb .logo-t{color:var(--dark);font-size:2rem;}
.fb .logo-s{color:var(--g6);}
.fb p{margin-top:1.6rem;line-height:1.8; display: none;}
.fc { column-count:2; margin-left: auto; padding-right:16rem; list-style: none;}
.fc h4{color:var(--dark); font-weight:500;margin-bottom:1.6rem;}
.fc a{display:inline-block;color:var(--g6);text-decoration:none;margin-bottom:0.8rem;transition:.2s;}
.fc a:hover{color:var(--mint);}
/* フッタ SNSアイコン */
.f-sns{display:flex;align-items:center;gap:0.5rem;margin:-0.4rem 1.2rem 0 -0.4rem;padding:0;list-style:none;}
.f-sns li{margin:0;}
.f-sns a{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:50%;/*background:var(--sand-light);*/color:#222;text-decoration:none;transition:.25s;}
.f-sns a:hover,.f-sns a:focus-visible{/*background:var(--mint);color:#fff;*/transform:translateY(-2px);}
.f-sns svg{width:3rem;height:3rem;display:block;fill:currentColor;}
.fbot{max-width:1440px;margin:0 auto;padding:2.4rem clamp(2rem,3vw,3.2rem) 0;border-top:1px solid var(--g2);font-size:1.4rem;color:var(--g4);display:flex;justify-content:flex-start;gap:1rem;flex-wrap:wrap;}
.dlbl{position:fixed;top:12rem;right:0;background:#55bcbc;color:#fff;font-size:1.1rem;font-weight:500;padding:0.6rem 1.6rem 0.6rem 2rem;border:1px solid #fff;border-right:none;border-radius:20px 0 0 20px;z-index:1001;letter-spacing:1px;box-shadow:0 2px 12px rgba(85,188,188,.3);}


.youtube { position:relative; width:100%; box-sizing:border-box; overflow:hidden; }
.youtube iframe { border:none; width:100% !important; height:100% !important; aspect-ratio:16/9; vertical-align:bottom; }

.sns-link img { width: 3.2rem; }


/* ===== Event Calendar ===== */
/* 上端をデジタルマップに重ね、波形のマスクで切り抜いて海の写真を覗かせる。
   下端は新着情報側が同じやり方で重なってくる（ランキング→デジタルマップと同じ手法）。 */
.ev-cal{ /*background:var(--sand-light);*/ position:relative; isolation:isolate;
  background-color:#fff; /* 切り抜いた部分以外は白地（下の写真を透かさない） */
  margin-top:calc(-1 * 6.95vw);
  padding-top:calc(2.4rem + 6.95vw); padding-bottom:calc(2.4rem + 6.95vw);
  -webkit-mask:var(--evcal-mask); mask:var(--evcal-mask);
  --evcal-mask:
    linear-gradient(#000,#000) no-repeat left bottom / 100% calc(100% - 6.95vw),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,40C240,100,480,0,720,60s501,32,720-20v80H0V40Z" fill="%23000"/></svg>') no-repeat left top / 100% 6.95vw;}
.ev-cal .si{max-width:1440px;margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem);}
.ev-cal .sl{font-size:1.4rem;font-weight:500;color:var(--light-teal);letter-spacing:2px;text-transform:uppercase;margin-bottom:0.8rem;}
.ev-cal .st{}
.ev-cal .sd{color:var(--g6); /*max-width:600px;*/line-height:1.8;margin-bottom:3.2rem;}

/* Category filter tabs (各タブにカテゴリ色を持たせ凡例を兼ねる) */
.ev-tabs{display:flex;gap:0.8rem;margin-bottom:3.2rem;flex-wrap:wrap;}
.ev-tab{padding:0.8rem 2rem;border-radius:24px;font-weight:500;border:none;cursor:pointer;transition:.2s;font-family:inherit;display:inline-flex;align-items:center;gap:0.8rem;}
.ev-tab.active{background:var(--mint);color:#fff;}
.ev-tab:not(.active){background:#fff;color:var(--g6);border:1px solid var(--g2);}
.ev-tab:not(.active):hover{background:var(--g2);}
/* インアクティブ時: カテゴリ色のドットを表示 (旧 ev-legend の色を流用) */
.ev-tab.gourmet::before,.ev-tab.festival::before,.ev-tab.nature::before,.ev-tab.onsen::before{content:"";display:inline-block;width:1.6rem;height:1.6rem;border-radius:50%;flex-shrink:0;}
.ev-tab.gourmet::before{background:linear-gradient(135deg,#D86060,#E58A8A);}
.ev-tab.festival::before{background:linear-gradient(135deg,#3F8A9A,#6BA8B5);}
.ev-tab.nature::before{background:linear-gradient(135deg,#5C9C73,#82BE96);}
.ev-tab.onsen::before{background:linear-gradient(135deg,#A38463,#C4A682);}
/* アクティブ時: タブ全体をカテゴリ色のグラデーションに */
.ev-tab.gourmet.active{background:linear-gradient(90deg,#D86060,#E58A8A);color:#fff;border-color:transparent;}
.ev-tab.festival.active{background:linear-gradient(90deg,#3F8A9A,#6BA8B5);color:#fff;border-color:transparent;}
.ev-tab.nature.active{background:linear-gradient(90deg,#5C9C73,#82BE96);color:#fff;border-color:transparent;}
.ev-tab.onsen.active{background:linear-gradient(90deg,#A38463,#C4A682);color:#fff;border-color:transparent;}
/* アクティブ時のドットは白で控えめに */
.ev-tab.active::before{background:rgba(255,255,255,.7) !important;}

/* Calendar Chart — full window width */
.ev-chart{ /*background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06);*/border-radius:0;padding:0 clamp(2rem,4vw,4rem) clamp(2rem,4vw,4rem) clamp(2rem,4vw,4rem);overflow-x:auto;margin:0 calc(50% - 50vw) 4rem;width:100vw;max-width:100vw;}
.ev-chart-title{font-size:1.8rem;font-weight:500;margin-bottom:0.4rem;}
.ev-chart-sub{color:var(--g4);margin-bottom:2.4rem;}

/* Gantt-style chart — 12カラム (3月始まり / ラベルは bar 直下に表示) */

.ev-gantt{min-width:900px;}
/* 季節ヘッダ行 (春夏秋冬) */
.ev-gantt-seasons{display:grid;grid-template-columns:0 repeat(12,1fr);gap:0;/*margin-bottom:0.6rem;*/}
.ev-gantt-seasons span{text-align:center;padding:1rem 0;font-size:2.4rem;font-weight:500;/*border-radius:6px;margin:0 0.3rem; font-style:italic;*/letter-spacing:.2em;font-family:'Inter','Zen Kaku Gothic New',sans-serif;}
.evs-spring{background:#FCE4EC;color:#E91E63;}
.evs-summer{background:#E0F2E1;color:#43A047;}
.evs-autumn{background:#FCE5D0;color:#E67E22;}
.evs-winter{background:#DCEAF4;color:#3B82F6;}
/* 月見出し */
.ev-gantt-header{display:grid;grid-template-columns:0 repeat(12,1fr);gap:0;}
.ev-gantt-header span{ font-weight:500;color:var(--g4);text-align:center;padding:0.6rem 0;}
.ev-gantt-header span:first-child{visibility:hidden;overflow:hidden;padding:0;}
/* 月カラムを季節色で薄く塗り分け (3-5春 / 6-8夏 / 9-11秋 / 12-2冬) */
.ev-gantt-row,.ev-gantt-header{background-image:linear-gradient(to right,transparent 0%,rgba(244,114,182,.06) 0%,rgba(244,114,182,.06) 25%,rgba(20,184,166,.06) 25%,rgba(20,184,166,.06) 50%,rgba(var(--olive-rgb),.06) 50%,rgba(var(--olive-rgb),.06) 75%,rgba(10,94,107,.06) 75%,rgba(10,94,107,.06) 100%);}
.ev-gantt-row{display:grid;grid-template-columns:0 repeat(12,1fr);gap:0;align-items:start; padding:1rem 0; border-top:1px solid rgba(0,0,0,.04);}
.ev-gantt-row:hover{background-color:rgba(14,184,166,.04);}
.ev-gantt-row > .ev-gantt-label{display:none;}
.ev-gantt-label{font-weight:500;color:var(--dark);display:flex;align-items:center;gap:0.8rem;}
.ev-gantt-label .ev-icon{}

/* =========================================================
 * カレンダー絵文字アイコン
 * .ev-icon / .ev-item-icon / .ic に ic-◯◯ クラスを付けると
 * 下の content の絵文字が表示される。絵文字の変更・差し替えは
 * ここ（content 値）だけ編集すればよい（HTML側の修正不要）。
 * ========================================================= */
/* 絵文字アイコンは Noto Color Emoji を優先（無い環境はOS絵文字にフォールバック） */
.ev-icon, .ev-item-icon, .ic{font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;}
.ic-crab::before{content:"🦀";}
/* 二十世紀梨は和梨の絵文字が無いため自作SVGを使用。差し替えは ../img/ic-nashi.svg を上書きするだけでOK */
.ic-pear::before{content:"";display:inline-block;width:5rem;height:5rem;vertical-align:-0.15em;background:url('../img/ic-nashi.svg') center/contain no-repeat;}
/* しゃんしゃん祭は傘（真上から見た図）の自作SVG。tottori-shanshan.jp の kasa_b.png を元に作成 */
.ic-shanshan::before{content:"";display:inline-block;width:5.5rem;height:5.5rem;vertical-align:-0.15em;background:url('../img/ic-shanshan.svg') center/contain no-repeat;}
/* がいな祭は万灯（竿に提灯を段々に吊るした形）の自作SVG */
.ic-manto::before{content:"";display:inline-block;width:5.5rem;height:5.5rem;vertical-align:-0.15em;background:url('../img/ic-manto.svg') center/contain no-repeat;}
.ic-grape::before{content:"🍇";}
.ic-watermelon::before{content:"🍉";}
.ic-oyster::before{content:"🦪";}
.ic-squid::before{content:"🦑";}
.ic-sakura::before{content:"🌸";}
.ic-daisen::before{content:"🏔️";}
.ic-leaf::before{content:"🌿";}
.ic-maple::before{content:"🍁";}
.ic-camel::before{content:"🐪";}
.ic-lantern::before{content:"🏮";}
.ic-mountain::before{content:"⛰️";}
.ic-fireworks::before{content:"🎆";}
.ic-onsen::before{content:"♨️";}
.ic-beach::before{content:"🏖️";}
.ic-ski::before{content:"🏂";}
.ic-fishing::before{content:"🎣";}
.ev-gantt-cell{min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0.6rem;padding:0.2rem 0.2rem;}
.ev-bar{border-radius:3rem;position:relative !important;left:auto !important;right:auto !important;width:100%;display:flex;align-items:center;justify-content:center;/*font-size:1.4rem;*/font-weight:500;color:#fff;white-space:nowrap;padding:0 0.6rem;transition:transform .2s,box-shadow .2s;}
.ev-bar:hover{transform:scaleY(1.2);box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:2;}
.ev-bar-caption{font-weight:500;color:var(--dark);text-align:center;line-height:1.3;padding:0 0.4rem;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;white-space:nowrap;/*overflow:hidden;*/text-overflow:ellipsis;}
.ev-bar-caption .ev-icon{font-size:2.4rem;flex-shrink:0;/*line-height:1;*/}
.ev-bar-caption a{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:0.4rem;transition:color .2s;}
.ev-bar-caption a:hover{color:var(--olive);}
.ev-bar.gourmet{background:linear-gradient(90deg,#D86060,#E58A8A);}
.ev-bar.festival{background:linear-gradient(90deg,#3F8A9A,#6BA8B5);}
.ev-bar.nature{background:linear-gradient(90deg,#5C9C73,#82BE96);}
.ev-bar.onsen{background:linear-gradient(90deg,#A38463,#C4A682);}


/* Monthly event cards — 横1列スクロール */
.ev-monthly-wrap{position:relative;}
.ev-monthly-hint{font-size:1.1rem;color:var(--g4);font-weight:500;letter-spacing:.5px;margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem;}
.ev-monthly-hint::before{content:'←';}
.ev-monthly-hint::after{content:'→';}
.ev-monthly{display:flex;gap:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0.4rem 0.4rem 1.8rem;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
.ev-monthly::-webkit-scrollbar{height:8px;}
.ev-monthly::-webkit-scrollbar-track{background:rgba(0,0,0,.05);border-radius:4px;}
.ev-monthly::-webkit-scrollbar-thumb{background:var(--g4);border-radius:4px;}
.ev-monthly::-webkit-scrollbar-thumb:hover{background:var(--g6);}
.ev-month-card{flex:0 0 260px;scroll-snap-align:start;background:#fff;border-radius:16px;padding:2rem;box-shadow:0 1px 6px rgba(0,0,0,.05);transition:.3s;cursor:default;border-left:4px solid transparent;position:relative;}
.ev-month-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.ev-month-card.current{box-shadow:0 4px 20px rgba(var(--olive-rgb),.18);border:1px solid rgba(var(--olive-rgb),.3);border-left:4px solid var(--olive);}
.ev-month-card.current::after{content:'NOW';position:absolute;top:1.4rem;right:1.4rem;font-size:9px;font-weight:500;color:#fff;background:var(--olive);padding:0.3rem 0.8rem;border-radius:6px;letter-spacing:.5px;}
.ev-month-card.spring{border-left-color:#F472B6;}
.ev-month-card.summer{border-left-color:var(--light-teal);}
.ev-month-card.autumn{border-left-color:var(--olive);}
.ev-month-card.winter{border-left-color:var(--mint);}
.ev-month-name{font-size:2rem;font-weight:500;color:var(--dark);margin-bottom:0.2rem;}
.ev-month-season{font-size:1.1rem;font-weight:500;padding:0.2rem 0.8rem;border-radius:8px;display:inline-block;margin-bottom:1.2rem;}
.ev-month-season.spring{background:rgba(244,114,182,.1);color:#DB2777;}
.ev-month-season.summer{background:rgba(20,184,166,.1);color:var(--light-teal);}
.ev-month-season.autumn{background:rgba(var(--olive-rgb),.1);color:var(--olive);}
.ev-month-season.winter{background:rgba(10,94,107,.1);color:var(--mint);}
.ev-item{display:flex;align-items:start;gap:0.8rem;margin-bottom:0.8rem;}
.ev-item-icon{flex-shrink:0;margin-top:0.1rem;}
.ev-item-text{font-size:1.4rem;line-height:1.5;color:var(--g6);}
.ev-item-text strong{color:var(--dark);font-weight:500;}
.ev-highlight{background:rgba(var(--olive-rgb),.06);border-radius:10px;padding:1rem 1.2rem;margin-top:0.8rem;}
.ev-highlight-label{font-size:1.2rem;font-weight:500;color:var(--olive);letter-spacing:.5px;margin-bottom:0.4rem;}
.ev-highlight-text{font-weight:500;color:var(--dark);}

/* ===== モバイル: 季節タブ早見表 ===== */
.ev-seasons{display:none;margin-bottom:3.2rem;--evs-spring:#F472B6;--evs-spring-rgb:244,114,182;--evs-summer:#3E9B4F;--evs-summer-rgb:62,155,79;--evs-autumn:#E08A2E;--evs-autumn-rgb:224,138,46;--evs-winter:#0A5E6B;--evs-winter-rgb:10,94,107;}
.ev-seasons-title{font-weight:500;margin-bottom:0.4rem;}
.ev-seasons-sub{font-size:1.4rem;color:var(--g4);margin-bottom:1.6rem;}
.ev-season-tabs{display:flex;justify-content:flex-end;gap:clamp(0.8rem,1.2vw,1.6rem);margin-bottom:1.6rem; position:absolute; right: 0; top:-8rem; padding-bottom:0.4rem;}

.ev-season-tab{flex:0 0 auto;width:clamp(7rem,8vw,9rem);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.2rem;padding:0;background:var(--sand-light);border:none;border-radius:50%;cursor:pointer;font-family:inherit;transition:.25s;overflow:hidden;line-height:1.2;border:1.5px solid #fff;}
.ev-season-tab .ev-season-ill{width:100%;height:clamp(6.4rem,9vw,8rem);display:block;background:#fff;}
.ev-season-tab .ev-season-ill svg{width:56px;height:56px;margin:1.2rem auto;display:block;}
.ev-season-tab .ev-season-ill img{width:100%;height:100%;object-fit:cover;display:block;}
.ev-season-tab .ev-season-name{font-size:clamp(1.8rem,2.4vw,2.4rem);font-weight:500;color:var(--dark);text-align:center;padding:0;}
.ev-season-tab .ev-season-month{font-size:clamp(1.2rem,1.6vw,1.6rem);font-weight:500;color:var(--g4);text-align:center;padding:0;}
.ev-season-tab.spring{background:rgba(var(--evs-spring-rgb),.15);}
.ev-season-tab.spring .ev-season-name,.ev-season-tab.spring .ev-season-month{color:var(--evs-spring);}
.ev-season-tab.spring.active{background:var(--evs-spring);}
.ev-season-tab.summer{background:rgba(var(--evs-summer-rgb),.15);}
.ev-season-tab.summer .ev-season-name,.ev-season-tab.summer .ev-season-month{color:var(--evs-summer);}
.ev-season-tab.summer.active{background:var(--evs-summer);}
.ev-season-tab.autumn{background:rgba(var(--evs-autumn-rgb),.15);}
.ev-season-tab.autumn .ev-season-name,.ev-season-tab.autumn .ev-season-month{color:var(--evs-autumn);}
.ev-season-tab.autumn.active{background:var(--evs-autumn);}
.ev-season-tab.winter{background:rgba(var(--evs-winter-rgb),.15);}
.ev-season-tab.winter .ev-season-name,.ev-season-tab.winter .ev-season-month{color:var(--evs-winter);}
.ev-season-tab.winter.active{background:var(--evs-winter);}
.ev-season-tab.active .ev-season-name,.ev-season-tab.active .ev-season-month{color:#fff!important;}
.ev-season-tab::after {content: ""; position: absolute; inset: 0; background:#fffe; z-index:-1; border-radius:10rem;}
.ev-season-tab.active::after { background:#fff0;}
/* アクティブは濃い季節色ベタ＋白文字（上の季節色指定より後に置いて上書き） */
.ev-season-tab.active{transform:scale(1.1); border:1px solid #fff;}
.ev-season-panel{display:none;}
.ev-season-panel.active{display:block;padding:0;border-radius:1.6rem;}
.ev-season-event{display:flex;align-items:center;gap:1rem;padding:1.2rem 0.8rem 1.2rem 0;background:none;border:none;border-bottom:1px solid var(--g2);border-radius:0;}
a.ev-season-event{text-decoration:none;color:inherit;transition:background .2s;}
a.ev-season-event:hover{background:none;/*border-bottom-color:var(--light-teal);*/}
a.ev-season-event:hover .name{text-decoration:underline;}
.ev-season-event .ic{font-size:5rem;line-height:1;flex-shrink:0;width:6rem;height:6rem;display:flex;align-items:center;justify-content:center;/*background:#fff;*/border-radius:3rem;}
.ev-season-event .body{flex:1;min-width:0;}
.ev-season-event .name{font-size:clamp(1.5rem,1.8vw,1.8rem);font-weight:500;color:var(--dark);line-height:1.5;}
.ev-season-event .period{font-size:1.5rem;font-weight:500;color:var(--olive);}
.ev-season-panel[data-season="spring"] .period{color:#DB2777;}
.ev-season-panel[data-season="summer"] .period{color:#2F7D3E;}
.ev-season-panel[data-season="autumn"] .period{color:#C2711A;}
.ev-season-panel[data-season="winter"] .period{color:var(--evs-winter);}
/* スマホ：季節パネルの背景色を季節ごとに（アイコン .ic は白） */
/* 季節ごとの薄い地色は非表示（セクション背景の季節写真を活かすため）
.ev-season-panel[data-season="spring"]{background:rgba(var(--evs-spring-rgb),.08);}
.ev-season-panel[data-season="summer"]{background:rgba(var(--evs-summer-rgb),.08);}
.ev-season-panel[data-season="autumn"]{background:rgba(var(--evs-autumn-rgb),.08);}
.ev-season-panel[data-season="winter"]{background:rgba(var(--evs-winter-rgb),.08);}
*/

/* ▼ PCでもスマホと同じ「季節タブ」表示に統一（ガントチャート早見表は非表示） */
.ev-chart{display:none;}
.ev-tabs{display:none;}
.ev-seasons{display:block;}
/* タブは文字だけにして、季節写真はタブの下（パネル先頭）に配置 */

.ev-season-tab .ev-season-ill{display:none;}
/* PC: 季節写真を左30%、右にイベントリストを並べる */
.ev-season-panel.active{display:flex;align-items:stretch;gap:0;padding:0;border-radius:1.6rem;}
.ev-season-photo{flex:0 0 50%;margin:0;border-radius:1.6rem;overflow:hidden;}
.ev-season-photo img{display:block;width:100%;height:100%;min-height:24rem;object-fit:cover;}

/* --- 季節写真スライドショー（CSSのみ・コントロールなし／2枚をフェードで交互表示） --- */
.ev-season-photo{position:relative;display:grid;}
.evp-slide{grid-area:1/1;position:relative;height:100%;min-width:0;border-radius:1.6rem;overflow:hidden;}
.evp-slide:not(.is-base){opacity:0;}
/* 表示中のパネルだけアニメーション（タブ切替のたびに1枚目から再スタート） */
.ev-season-panel.active .evp-slide:not(.is-base){animation:evpFade 7s ease-in-out infinite;}
.ev-season-panel.active .evp-slide.is-base .evp-cap{animation:evpCapOut 7s ease-in-out infinite;}
@keyframes evpFade{0%,35.7%{opacity:0;}50%,85.7%{opacity:1;}100%{opacity:0;}}
@keyframes evpCapOut{0%,35.7%{opacity:1;}50%,85.7%{opacity:0;}100%{opacity:1;}}
@media(prefers-reduced-motion:reduce){
  .ev-season-panel.active .evp-slide:not(.is-base),
  .ev-season-panel.active .evp-slide.is-base .evp-cap{animation:none;}
}
/* 左下キャプション */
.evp-cap{position:absolute;left:1.6rem;bottom:1.6rem;z-index:2;display:inline-block;max-width:calc(100% - 3.2rem);padding:0.5rem 1.4rem;border-radius:20px;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);/*border:1px solid rgba(255,255,255,.14);*/color:#fff;font-size:clamp(1.2rem,1.3vw,1.4rem);font-weight:500;line-height:1.6;text-shadow:0 1px 6px rgba(0,0,0,.35);}
.ev-season-list{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.6rem,2.5vw,2.4rem);align-content:start;padding:clamp(2rem,3vw,3rem) 0 clamp(2rem,3vw,3rem) clamp(4rem,6vw,6rem);}


/* Area Guide Map */
/* =========================================================================
   エリアで探す (area-map) — 白背景レイアウト
   ========================================================================= */
/* 上端を旅のスタイルに重ね、波形のマスクで切り抜いて砂色を覗かせる。
   下端はランキング側が同じやり方で重なってくる（イベントカレンダーと同じ手法）。 */
.area-map{background:#fff; position:relative; isolation:isolate;
  margin-top:calc(-1 * 6.95vw);
  padding-top:calc(2.4rem + 6.95vw); padding-bottom:calc(2.4rem + 6.95vw);
  -webkit-mask:var(--areamap-mask); mask:var(--areamap-mask);
  --areamap-mask:
    linear-gradient(#000,#000) no-repeat left bottom / 100% calc(100% - 6.95vw),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,40C240,100,480,0,720,60s501,32,720-20v80H0V40Z" fill="%23000" transform="translate(1440,0) scale(-1,1)"/></svg>') no-repeat left top / 100% 6.95vw;}
/* エリアの代表写真をぼかして敷く指定は一旦保留（後日ここにエリア別イラストを配置予定）。
   data-area-current は js/top.js の switchArea() が張り替えているのでそのまま使える。
.area-map::before{content:""; position:absolute; inset:-6rem; z-index:-1; pointer-events:none;
  clip-path:inset(6rem);
  background-size:cover; background-position:center; opacity:.3;
  filter:blur(clamp(0.6rem,0.7vw,1.4rem));}
.area-map[data-area-current="west"]::before  {background-image:url("https://www.tottori-guide.jp/files/36633.jpg");}
.area-map[data-area-current="center"]::before{background-image:url("https://www.tottori-guide.jp/files/46371.JPG");}
.area-map[data-area-current="east"]::before  {background-image:url("https://www.tottori-guide.jp/files/36629.jpg");}
*/
.area-map .si{max-width:1440px;margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem);}
.area-map .sl{font-size:1.4rem;font-weight:500;color:var(--mint);letter-spacing:2px;text-transform:uppercase;margin-bottom:0.8rem;}
.area-map .sd{color:var(--g6);max-width:100%;line-height:1.8;margin-bottom:4.8rem;display:none;}

/* 旧レイアウト: .text が .si 直下にあるケース */
.area-map .si:has(> .text){display:flex;align-items:center;flex-flow:row wrap;}
.area-map .si:has(> .text) > .text{flex:0 0 35%;}
.area-map .si:has(> .text) > .map-outer{flex:1 1 65%;min-width:0;}

/* 新レイアウト: 2カラム (左:タイトル+マップ / 右:タブ+スポット) — 6:4 */
.area-grid{display:flex;flex-wrap:wrap;gap:3.2rem;}
.area-col{min-width:0;}
.area-col-left{flex:0 0 calc(60% - 3.2rem);}
.area-col-right{flex:1 1 40%;}

/* マップ枠 */
.map-outer{position:relative;}
.map-scroll-hint{display:none;position:absolute;top:1.2rem;left:1.2rem;width:44px;height:auto;opacity:.85;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 6px rgba(255,255,255,.5));animation:mapScrollHint 1.8s ease-in-out infinite;}
@keyframes mapScrollHint{0%,100%{transform:translateX(0);opacity:.85;}50%{transform:translateX(6px);opacity:1;}}
.map-wrap{position:relative;background:transparent;padding:0;overflow-x:auto;overflow-y:hidden;}
.map-wrap::-webkit-scrollbar{height:10px;}
.map-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,.04);border-radius:5px;}
.map-wrap::-webkit-scrollbar-thumb{background:rgba(94,234,212,.3);border-radius:5px;}
.map-wrap::-webkit-scrollbar-thumb:hover{background:rgba(94,234,212,.5);}
.map-wrap svg{display:block;height:auto;width:100%;min-width:250px;}
.map-svg-stack{position:relative;width:100%;min-width:250px;line-height:0;}
.map-img{display:block;width:100%;height:auto; mix-blend-mode: multiply; border-radius: 1.6rem;}
.map-hit-overlay{position:absolute;inset:0;width:100%;height:100%;min-width:0;}

/* SVG: 島根県 (参考表示) */
.shimane-land{fill:#c2e5d1;stroke:none;pointer-events:none;}
.shimane-spot-dot{fill:#A0AEC0;stroke:#fff;stroke-width:1.5;pointer-events:none;}
.shimane-spot-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:var(--g6);font-size:10px;font-weight:500;pointer-events:none;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:3px;}
.shimane-pref-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:rgba(26,26,46,.06);font-size:42px;font-weight:500;letter-spacing:14px;pointer-events:none;}
.sea-fill{fill:rgba(14,122,138,.08);pointer-events:none;}

/* SVG: エリア領域 + ハイライト */
.area-east,.area-center,.area-west{fill:transparent;stroke:none;cursor:pointer;transition:fill .25s,filter .25s;}
.area-east.hover,.area-east.active{fill:rgba(var(--area-east-rgb),.35);filter:drop-shadow(0 0 18px rgba(var(--area-east-rgb),.2));}
.area-center.hover,.area-center.active{fill:rgba(var(--area-center-rgb),.3);filter:drop-shadow(0 0 18px rgba(var(--area-center-rgb),.2));}
.area-west.hover,.area-west.active{fill:rgba(var(--area-west-rgb),.35);filter:drop-shadow(0 0 18px rgba(var(--area-west-rgb),.2));}
.area-hit{cursor:pointer;pointer-events:all;fill:transparent;stroke:none;}
.area-box-bg{fill:transparent;transition:fill .25s,filter .25s;}
.area-box[data-area="west"]   .area-box-bg{fill:var(--area-west);}
.area-box[data-area="center"] .area-box-bg{fill:var(--area-center);}
.area-box[data-area="east"]   .area-box-bg{fill:var(--area-east);}
.area-box.hover .area-box-bg,.area-box:hover .area-box-bg{filter:brightness(1.08) drop-shadow(0 4px 14px rgba(0,0,0,.18));}
.area-box-sub{font-family:'Zen Kaku Gothic New',sans-serif;font-size:20px;font-weight:500;fill:#fff;pointer-events:none;/* dominant-baseline は使わない（Safari/WebKitとChrome/Firefoxでcentralの位置が食い違うため）。アルファベットベースライン基準でdyで縦中央化 */}
.spot-hit-link{cursor:pointer;}
.spot-hit{fill:transparent;stroke:none;cursor:pointer;pointer-events:all;}

/* SVG: マップラベル */
.map-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:var(--dark);font-weight:500;pointer-events:none;}
.map-label-sm{font-family:'Zen Kaku Gothic New',sans-serif;fill:var(--g6);font-size:1.1rem;pointer-events:none;}
.map-pref-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:rgba(26,26,46,.08);font-size:48px;font-weight:500;letter-spacing:16px;pointer-events:none;}
.map-spot{cursor:pointer;transition:all .3s;pointer-events:none;}
.map-spot:hover{transform:scale(1.15);}
.map-spot-dot{transition:all .3s;pointer-events:none;}
.map-spot-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:var(--dark);font-size:10px;font-weight:500;pointer-events:none;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:3px;}

/* SVG: JR / 高速道路 / 空港 */
.jr-line{stroke:#E8C94A;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.jr-line-branch{stroke:#E8C94A;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:6 3;pointer-events:none;}
.jr-station{fill:#E8C94A;stroke:#fff;stroke-width:2;pointer-events:none;}
.jr-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:#E8C94A;font-size:9px;font-weight:500;pointer-events:none;paint-order:stroke;stroke:rgba(30,35,40,.9);stroke-width:3px;}
.jr-line-label{font-family:'Inter',sans-serif;fill:rgba(232,201,74,.5);font-size:8px;font-weight:500;letter-spacing:2px;pointer-events:none;}
.highway{stroke:#5CB85C;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.highway-branch{stroke:#5CB85C;stroke-width:2.5;fill:none;stroke-linecap:round;pointer-events:none;}
.hw-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:#5CB85C;font-size:8px;font-weight:500;pointer-events:none;paint-order:stroke;stroke:rgba(30,35,40,.9);stroke-width:3px;}
.hw-ic{fill:#5CB85C;stroke:#1e2328;stroke-width:1.5;pointer-events:none;}
.airport-area{fill:rgba(10,94,107,.06);stroke:rgba(10,94,107,.35);stroke-width:1;stroke-dasharray:3 2;pointer-events:none;}
.airport-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:var(--dark);font-size:10px;font-weight:500;pointer-events:none;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:3px;}
.airport-sub{display:none;}

/* SVG: その他 */
.city-dot{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:3;pointer-events:none;}
.city-label{font-family:'Zen Kaku Gothic New',sans-serif;fill:#fff;font-size:1.4rem;font-weight:500;pointer-events:none;paint-order:stroke;stroke:rgba(30,35,40,.9);stroke-width:3px;}
.legend-text{font-family:'Zen Kaku Gothic New',sans-serif;fill:var(--g6);font-size:9px;font-weight:500;pointer-events:none;}
.time-badge{fill:rgba(0,0,0,.5);rx:8;ry:8;pointer-events:none;}
.time-text{font-family:'Zen Kaku Gothic New',sans-serif;fill:#fff;font-size:8px;font-weight:500;pointer-events:none;text-anchor:middle;}
/* japan-mini (白背景用調整) */
.area-map .japan-mini [fill="rgba(94,234,212,.35)"]{fill:rgba(10,94,107,.5);}
.area-map .japan-mini [stroke="rgba(94,234,212,.5)"]{stroke:rgba(10,94,107,.7);}
.area-map .japan-mini [fill="#FBBF24"]{fill:var(--olive);}
.area-map .japan-mini [stroke="#FBBF24"]{stroke:var(--olive);}

/* エリアタブ (現状非表示: マップのエリアボックスが代替) */
.area-tabs{display:none;flex-wrap:nowrap;gap:clamp(0.4rem,1.2vw,0.8rem);margin:clamp(1.6rem,2.4vw,2.4rem) 0;}
.area-tab{min-width:0;justify-content:center;white-space:nowrap;padding:clamp(0.6rem,1.6vw,1rem) clamp(0.8rem,2.5vw,2.4rem);border-radius:clamp(16px,5vw,24px);font-size:clamp(1.2rem,2.8vw,1.6rem);font-weight:500;border:2px solid rgba(0,0,0,.15);background:transparent;color:rgba(0,0,0,.55);cursor:pointer;font-family:inherit;transition:all .3s;display:flex;align-items:center;gap:clamp(0.4rem,1.2vw,0.8rem);}
.area-tab .tab-dot{width:clamp(9px,2.7vw,15px);height:clamp(9px,2.7vw,15px);border-radius:50%;flex-shrink:0;}
.area-tab:hover{border-color:rgba(0,0,0,.4);color:var(--dark);}
.area-tab.active[data-area="east"]{background:rgba(var(--area-east-rgb),.18);border-color:var(--area-east);color:var(--dark);}
.area-tab.active[data-area="center"]{background:rgba(var(--area-center-rgb),.18);border-color:var(--area-center);color:var(--dark);}
.area-tab.active[data-area="west"]{background:rgba(var(--area-west-rgb),.18);border-color:var(--area-west);color:var(--dark);}

/* エリアスポットグリッド */
.area-spots{display:none;grid-template-columns:repeat(2,1fr);gap:1.6rem;}
.area-spots.active{display:grid;}

/* もっと見るボタン (エリア色連動) */
.area-more{grid-column:1 / -1;text-align:center;margin-top:1.2rem;}
.area-more-btn{display:inline-flex;align-items:center;gap:0.6rem;padding:1.04rem 2.8rem;background:var(--mint);border:1px solid #fff;border-radius:24px;color:#fff;text-decoration:none;font-size:1.44rem;font-weight:500;box-shadow:0 4px 14px rgba(85,188,188,.35);transition:.2s;}
.area-more-btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.area-more-btn .material-symbols-outlined{font-size:1.84rem;line-height:1; margin:0;}
#spots-east .area-more-btn{background:var(--area-east);box-shadow:0 4px 14px rgba(var(--area-east-rgb),.35);}
#spots-east .area-more-btn:hover{box-shadow:0 8px 20px rgba(var(--area-east-rgb),.5);}
#spots-center .area-more-btn{background:var(--area-center);box-shadow:0 4px 14px rgba(var(--area-center-rgb),.35);}
#spots-center .area-more-btn:hover{box-shadow:0 8px 20px rgba(var(--area-center-rgb),.5);}
#spots-west .area-more-btn{background:var(--area-west);box-shadow:0 4px 14px rgba(var(--area-west-rgb),.35);}
#spots-west .area-more-btn:hover{box-shadow:0 8px 20px rgba(var(--area-west-rgb),.5);}

/* スポットカード */
.aspot{background:#fff;border:1px solid var(--g2);border-radius:1.6rem;cursor:pointer;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.04);position:relative;}
a.aspot{display:block;text-decoration:none;color:inherit;}
.aspot:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.12);}
.aspot-img{height:auto;aspect-ratio:2/1;background-size:cover;background-position:center;position:relative;border-radius:16px 16px 0 0;overflow:hidden;}
.aspot-pick{position:absolute;top:-1rem;right:-1rem;width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.36rem;font-weight:500;line-height:1.15;box-shadow:0 4px 12px rgba(0,0,0,.25);border:1px solid #fff;z-index:3;letter-spacing:1px;}
.aspot:has(.aspot-badge.east) .aspot-pick{background:var(--area-east);}
.aspot:has(.aspot-badge.center) .aspot-pick{background:var(--area-center);}
.aspot:has(.aspot-badge.west) .aspot-pick{background:var(--area-west);}
.aspot-badge{position:absolute;top:0.8rem;left:0.8rem;padding:0.3rem 1rem;border-radius:12px;font-size:1.2rem;font-weight:500;color:#fff;}
.aspot-badge.east{background:var(--area-east);}.aspot-badge.center{background:var(--area-center);}.aspot-badge.west{background:var(--area-west);}
.aspot-body{position:relative;padding:clamp(0.8rem,1.2vw,1.2rem) clamp(1.2rem,1.6vw,1.6rem);}
.aspot-name{font-weight:500;color:var(--dark);font-size:clamp(1.6rem,2vw,2rem);margin-bottom:0.4rem;}
.aspot-desc{color:var(--g6);font-size:clamp(1.2rem,1.4vw,1.52rem);line-height:1.5;}
/* area-map内のスポットカード：既定は詰めた表示（1024px以下で下のmaxクエリが緩める） */
.area-map .aspot-body{padding:0.8rem 1.2rem 1.2rem;}
.area-map .aspot-name{font-size:1.52rem;}
.area-map .aspot-desc{font-size:1.2rem;line-height:1.4;margin-top:0.24rem;}
.area-map .aspot-pick{width:42px;height:42px;font-size:1.12rem;top:-0.6rem;right:-0.6rem;}
/* タグ：画像下端に被せる白ピル (R + 逆R) — 現状非表示 */
.aspot-tags{display:none;position:absolute;left:0;bottom:100%;z-index:5;flex-wrap:nowrap;gap:0;background:#fff;padding:0.48rem 1.04rem 0.48rem 0.8rem;border-radius:0 1.2rem 0 0;margin:0;}
.aspot-tags::after{content:'';position:absolute;right:-0.8rem;bottom:0;width:0.8rem;height:0.8rem;background:radial-gradient(circle at top right, transparent 0.8rem, #fff 0.8rem);pointer-events:none;}
.aspot-tag{background:transparent;color:var(--g6);font-size:1.12rem;font-weight:500;padding:0;border-radius:0;white-space:nowrap;}
.aspot-tag + .aspot-tag::before{content:'/';margin:0 0.48rem;color:var(--g4);}

/* ===== Feature page（食・グルメ等の個別テーマページ共通） ===== */
.feature-hero{position:relative;width:100%;aspect-ratio:16/7;max-height:500px;background:#333;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.feature-hero video,.feature-hero img{width:100%;height:100%;object-fit:cover;}
.feature-section{max-width:1440px;margin:0 auto; padding:0 clamp(1.6rem,3vw,3.2rem) 6.4rem clamp(1.6rem,3vw,3.2rem);}
.feature-title{font-size:clamp(2.4rem,3vw,2.8rem);font-weight:500;color:var(--dark);margin-bottom:2rem;}

/* ===== Category list page（食・グルメ一覧などの中間ページ） ===== */
.category-section{padding:140px 0 60px;background:var(--g1);}
.shop-title{font-size:clamp(2.2rem,2.8vw,2.8rem);font-weight:500;color:var(--dark);margin-bottom:3.2rem;}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;}
.shop-card{display:block;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);text-decoration:none;color:inherit;}
.shop-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.12);}
.shop-img{position:relative;aspect-ratio:3/2;overflow:hidden;}
.shop-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1); border-radius:1.2rem 1.2rem 0 0;}
.shop-card:hover .shop-img img{transform:scale(1.06);}
.shop-badges{position:absolute;bottom:0.8rem;right:0.8rem;display:flex;gap:0.4rem;}
.badge{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:500;color:#fff;}
.badge-eat{background:#E53E3E;}
.badge-buy{background:#3182CE;}
.badge-michelin{background:#C8A24B;width:auto;padding:0 0.88rem;gap:0.24rem;font-size:1.3rem;white-space:nowrap;}
.shop-info{padding:1.2rem 1.6rem;}
.shop-area{font-size:1.4rem;color:var(--g4);/*margin-bottom:0.4rem;*/}
.shop-name{font-weight:500;/*color:var(--olive);*/text-decoration:none;display:block; line-height:1.5;}
.shop-name:hover{text-decoration:underline;}
/* shop-area（市町村）を写真左下のカテゴリータブに（kotoura .cate_box 風 / .spot-main 配下のみ） */
.spot-main .shop-info{position:relative;}
.spot-main .shop-area{position:absolute;left:0;bottom:100%;z-index:2;margin:0;display:inline-block;padding:0.32rem 1.12rem 0.384rem;background:#fff;color:var(--dark);font-size:1.2rem;font-weight:500;line-height:1.5;border-radius:0 0.96rem 0 0;}
.breadcrumb{max-width:1440px;margin:0 auto;padding:0.4rem /*clamp(1.5rem,3vw,3rem);*/color:var(--g4);font-size:1.3rem; line-height:1.5;}
.breadcrumb a{color:var(--teal);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{margin:0 0.6rem;color:var(--g4);}
.breadcrumb span br {display:none;}

/* カテゴリータイル（画像＋中央見出し＋説明 / グリッドは .shop-grid を流用） */
.cat-card{display:block;position:relative;background:#fff;border-radius:12px;overflow:visible;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);text-decoration:none;color:inherit;box-shadow:0 1.6rem 0.8rem -1.2rem rgba(0,0,0,0.05);}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.12);}
.cat-card .photo{position:relative;overflow:hidden;border-radius:12px 12px 0 0; aspect-ratio:4/3;}
.cat-card .photo img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.cat-card:hover .photo img{transform:scale(1.06);}



.cat-body{padding:clamp(0.8rem,1.2vw,1.2rem) clamp(1.2rem,1.6vw,1.6rem); /*text-align:center;*/}
.cat-body h3{margin:0 0 0.8rem; font-size:clamp(1.6rem,2vw,2rem); font-weight:500;color:var(--dark);}
.cat-desc{margin:0.5rem 0 0 0;font-size:1.4rem;color:var(--g6);line-height:1.6;}

/* ===== PRバナー ===== */
.pr-banners{ padding:4.8rem 0;}
/* A枠はランキングセクションの中に入れているので、背景は親（砂の写真）を透かす */
.pr-banners-a{background:transparent;}
/* セクション外にあった青緑への波の帯は役目を終えたので隠す */
.ranking + .wave-wrap.bg-sand{display:none;}
.pr-banners .si{ margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem);text-align:center; }

.pr-banners .sl{justify-content:center; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; margin-bottom:1.6rem;}
.pr-banners .sl::before, .pr-banners .sl::after { content:""; display: block; height:1px; flex-grow: 1;}
.pr-banners .sl::before { margin-right: 1.6rem; background:linear-gradient(to right, transparent, var(--light-teal));}
.pr-banners .sl::after { margin-left: 1.6rem; background:linear-gradient(to right, var(--light-teal), transparent);}

.pr-banners .st{margin-bottom:3.2rem;}
.banner-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center; align-items: flex-start;}
.banner-grid a{flex:1 1 calc((100% - 4rem) / 3);min-width:0;max-width:320px;display:block;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s; }
.banner-grid a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.12);}
.banner-grid img{display:block;width:100%;height:100%;object-fit:cover;}

/* ===== Access page ===== */
.ac-card h3 .material-symbols-outlined, .ac-note-box h3 .material-symbols-outlined, h3 .material-symbols-outlined {color:var(--mint);font-size:3.2rem;vertical-align:middle; margin:0;}
.temp-hero{padding:clamp(9.6rem,16vw,16rem) 0 3.2rem;}
.temp-hero .si{text-align:center;}
.temp-hero .sl{justify-content:center;}
.temp-hero .sd{max-width:720px;margin:0 auto 1.6rem;}
.access-menu{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(0.8rem,1.6vw,1.6rem);max-width:980px;margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem);}
.access-map-wrap{padding:0;background:#fff;}
.access-map{margin:0 clamp(-1.6rem,-2.56rem,-0.8rem);}
.access-map img{width:100%;height:auto;display:block;}
.access-section{ padding-top:clamp(3.2rem,6vw,6.4rem);padding-bottom:clamp(3.2rem,6vw,6.4rem);}
.access-section.alt{background:var(--sand-light);}

/* 乗り物メニュー */
.ac-mitem{display:flex;flex-direction:column;align-items:center;/*gap:0.4rem;*/padding:1.6rem 0.8rem;border:1px solid var(--g2);border-radius:16px;background:#fff;text-decoration:none !important;color:var(--dark);transition:.2s;}
.ac-mitem:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:var(--mint);color:var(--mint);}
.ac-mic{font-size:5rem;color:var(--mint); margin:0;}
.ac-mlbl{font-weight:500;}

.ac-title{display:flex;align-items:center;gap:0.96rem;/*font-size:clamp(2rem,3vw,2.6rem);*/font-weight:500;color:var(--dark);margin-bottom:1.6rem;}
.ac-title .material-symbols-outlined{font-size:4rem;color:var(--mint); margin:0;}
.ac-desc{color:var(--g6);line-height:1.8;margin-bottom:2.4rem;max-width:840px;}
.ac-note{display:inline-block;color:var(--g4);margin-left:0.8rem;}

/* テーブル */
.ac-table-wrap{overflow-x:auto;background:#fff;border-radius:16px;border:1px solid var(--g2);margin:0.4rem 0 2.4rem;}
.ac-table{width:100%;border-collapse:collapse;min-width:560px;}
.ac-table th,.ac-table td{padding:1.2rem 1.6rem;text-align:left;border-bottom:1px solid var(--g2);vertical-align:middle;}
.ac-table thead th{background:var(--g3);font-weight:500;color:var(--g8);position:sticky;top:0;}
.ac-table tbody tr:last-child td{border-bottom:none;}
.ac-table th,.ac-table td[rowspan]{font-weight:500;color:var(--dark);background:var(--g1);}
.ac-table td:nth-last-child(2){color:var(--mint);font-weight:500;white-space:nowrap;}
/* tpl-prose 内に置かれた際、.tpl-prose th/td の四辺ボーダーと二重化して格子が重なるのを解消（デザイン本来の横罫のみに戻す） */
.tpl-prose .ac-table{margin:0;}
.tpl-prose .ac-table th,.tpl-prose .ac-table td{border:none;border-bottom:1px solid var(--g2); vertical-align:top;}
.tpl-prose .ac-table tbody tr:last-child td{border-bottom:none;}

.ac-links{margin-top:1.6rem;display:flex;gap:1.6rem;flex-wrap:wrap;}
/* 汎用リンク装飾（アンカー単体に付与。.ac-links はレイアウト専用） */
a.link{color:var(--mint);text-decoration:none;font-weight:500;}
a.link:hover{text-decoration:underline;}
/* 外部リンク（target="_blank"）のテキストリンクに別窓アイコン i_blank.svg を付加（↗は使わない／画像・アイコン内包リンクは除外）
   ※ PDF/Word/Excel/Zip 等のファイルリンクは common.css の種別バッジ(PDF/DOC/XLS/Zip)を表示するため、別窓アイコンの対象から除外 */
a[target="_blank"]:not(.ns-card):not(:has(img)):not(:has(svg)):not(:has(.material-symbols-outlined)):not([href$=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"]):not([href$=".zip"])::after,
/* サムネイル画像を含むカードリンクは上の :not(:has(img)) で除外されるため、見出し(.ns-title)側に付ける */
.ns-card[target="_blank"]:not([href$=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"]):not([href$=".zip"]) .ns-title::after{content:"filter_none";font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:1.3rem;line-height:1;display:inline-block;margin-left:0.4rem;vertical-align:-0.05em;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}

/* カード */
.ac-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
.ac-card{background:#fff;border:1px solid var(--g2);border-radius:16px;padding:2.4rem;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.ac-card h3, .ac-note-box h3 {font-weight:500;color:var(--dark);margin-bottom:0.8rem;display:flex;align-items:center;gap:0.6rem;}
.ac-card-route{color:var(--g6);margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--g2);}
.ac-card-meta{list-style:none;padding:0;margin:0 0 1.6rem;}
.ac-card-meta li{padding:0.6rem 0;color:var(--g6);}
.ac-card-meta li strong{display:inline-block;min-width:7em;color:var(--g8);font-weight:500;}
.ac-card-sub{color:var(--g8);font-weight:500;margin:0.8rem 0 0.8rem;padding-top:1.2rem;border-top:1px dashed var(--g2); border-bottom: none !important;}
/* 汎用の箇条書きリスト（中黒・ティールマーカー） */
.disc{list-style:disc;padding-left:2rem;margin:0;}
.disc li{padding:0.3rem 0;line-height:1.5;color:var(--g6);}
.disc li::marker{color:var(--mint);}
.disc li strong{/*color:var(--g8);*/font-weight:500;margin-right:0.8rem;}
.disc a{ /*color:var(--mint);text-decoration:none;font-weight:500;*/}
.disc a:hover{text-decoration:underline;}

/* バスグリッド */
.ac-bus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;}
.ac-bus-item{background:#fff;border:1px solid var(--g2);border-radius:1.6rem;padding:2rem;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.ac-bus-from{display:inline-block;padding:0.4rem 1.2rem;background:var(--mint);color:#fff;font-weight:500;border-radius:999px;margin-bottom:1.2rem;}

/* 乗放題パス */
.ac-pass{display:flex;align-items:flex-start;gap:1.6rem;background:#fff;border:1px solid var(--g2);border-radius:1.6rem;padding:2rem 2.4rem;}
.ac-pass-ic{flex-shrink:0;width:4.8rem;height:4.8rem;border-radius:50%;background:var(--g1); color:var(--mint);display:flex;align-items:center;justify-content:center;}
.ac-pass-ic .material-symbols-outlined{font-size:4rem; margin:0;}
.ac-pass h3{font-weight:500;color:var(--dark);margin-bottom:0.4rem;}
.ac-pass p{color:var(--g6);line-height:1.8;margin:0;}

/* 注意事項 */
.ac-note-box{background:var(--g1);border-radius:16px;padding:2rem 3rem;border:1px solid var(--g2);}
.ac-note-head{display:flex;align-items:center;gap:0.8rem;font-weight:500;color:var(--dark);margin-bottom:1.2rem;}
.ac-note-head .material-symbols-outlined{color:var(--mint); margin:0;}
.ac-note-box p{color:var(--g6);line-height:1.8;margin:0.4rem 0;}
.ac-note-box a{color:var(--mint);text-decoration:none;font-weight:500;}

/* バーガーメニュー切替（PC幅でナビが収まらない領域もハンバーガーに） */




/* =========================================================================
   スポット詳細ページ
   ========================================================================= */
.spot-wrap{max-width:1440px;margin:0 auto;padding:13.6rem clamp(1.6rem,3vw,3.2rem) 6.4rem clamp(1.6rem,3vw,3.2rem);}

.spot-hero-text{padding:0 0 1rem 0;}
.spot-area-tag{display:inline-block;background:var(--sand-light);color:var(--mint);padding:0.4rem 1.2rem;border-radius:999px;font-size:1.4rem;font-weight:500;margin-bottom:1.2rem;border:1px solid var(--g2);}
.spot-hero-text h1{margin:0 0 0.8rem;font-size:clamp(2.6rem,4vw,4rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--dark);}
.spot-hero-text p{margin:0;color:var(--g6);}

.spot-main-img{margin:0 0 3.2rem;border-radius:16px;overflow:hidden;box-shadow:0 10px 36px rgba(0,0,0,.08);}
.spot-main-img img{width:100%;height:clamp(260px,42vw,460px);object-fit:cover;display:block;}

.spot-body{display:grid;grid-template-columns:1fr 240px; gap:4.8rem;}

.spot-main h2{ padding-bottom:1rem;border-bottom:2px solid var(--mint);display:inline-block;}
.spot-main p{line-height:1.9;color:var(--g8);margin:0 0 1.6rem;}

.spot-info,#spotInfo dl {border:1px solid var(--g2);border-radius:1.6rem;overflow:hidden;margin:0;display:grid;grid-template-columns:180px 1fr;}
.spot-info dt,.spot-info dd,#spotInfo dl dt,#spotInfo dl dd{margin:0;padding:1rem 1.2rem;}
.spot-info dt,#spotInfo dl dt{background:var(--sand-light);font-weight:500;color:var(--dark);border-bottom:1px solid var(--g2);display:flex;align-items:center;gap:0.5rem;}
.spot-info dt .material-symbols-outlined,#spotInfo dl dt .material-symbols-outlined{font-size:2rem;color:var(--mint);line-height:1; margin:0;}
.spot-info dd,#spotInfo dl dd{border-bottom:1px solid var(--g2);color:var(--g8);line-height:1.8;}
.spot-info dt:last-of-type,.spot-info dt:last-of-type + dd,#spotInfo dl dt:last-of-type,#spotInfo dl dt:last-of-type + dd{border-bottom:0;}

.map-link-btn{display:inline-flex;align-items:center;gap:0.4rem;margin-top:0.8rem;padding:0.6rem 1.4rem;border-radius:999px;background:var(--mint);color:#fff;font-size:1.4rem;font-weight:500;text-decoration:none;border:1px solid var(--mint);transition:.2s;}
.map-link-btn:hover{background:var(--teal);}
.spot-links {display:inline-flex !important;flex-wrap:wrap;gap:0.6rem;}
.link-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:999px;background:#fff;color:var(--mint);font-weight:500;text-decoration:none;border:1px solid var(--mint);transition:.2s;}
.link-btn img{width:20px;height:20px;vertical-align:middle;}
.spot-info a[href^="tel:"],#spotInfo dl a[href^="tel:"]{color:var(--mint);text-decoration:none;font-weight:500;}
.spot-back{text-align:center;margin-top:32px;}
.link-btn:hover{background:var(--mint);color:#fff;}
.link-btn.ig{color:#dd2a7b;border-color:#dd2a7b;}
.link-btn.ig:hover{background:#dd2a7b;color:#fff;}
.link-btn.fb{color:#1877F2;border-color:#1877F2;}
.link-btn.fb:hover{background:#1877F2;color:#fff;}
.spot-btn{display:inline-flex;align-items:center;gap:0.8rem;padding:1.2rem 2.4rem;border-radius:999px;font-weight:500;text-decoration:none;border:1px solid transparent;transition:.2s;}
.spot-btn.primary{background:var(--mint);color:#fff;}
.spot-btn.primary:hover{background:var(--teal);}
.spot-btn.secondary{background:#fff;color:var(--mint);border-color:var(--mint);}
.spot-btn.secondary:hover{background:var(--sand-light);}

/* サイドバー */
.spot-side{display:flex;flex-direction:column;gap:2.4rem;}
.tpl-prose .spot-side a { color: var(--dark); text-decoration: none;}
/* サイドウィジェット見出し（Instagram等）: アイコンを小さく揃える */
.side-widget h3{display:flex;align-items:center;gap:0.8rem;margin:0 0 1.2rem;font-weight:500;color:var(--dark);}
.side-widget h3 img{width:2rem;height:2rem;flex-shrink:0;}
.side-widget h3 .material-symbols-outlined{font-size:2.4rem;color:#5bb;}
.instagram-embed iframe, iframe.instagram-media { width: 100% !important; min-width: 0 !important; }


/* カテゴリーから探す(リンクリスト) */
.side-cat-list{list-style:none;margin:0;padding:0;border:1px solid var(--g2);border-radius:10px;overflow:hidden;background:#fff;}
.side-cat-list li + li{border-top:1px solid var(--g2);}
.side-cat-list a{display:flex;align-items:center;gap:1rem;padding:1rem 1.4rem;color:var(--dark);text-decoration:none;font-weight:500;transition:background .2s,color .2s;}
.side-cat-list a .material-symbols-outlined{font-size:2.4rem;color:#5bb;flex-shrink:0;}
.side-cat-list a .side-cat-arrow{margin-left:auto;font-size:2rem;color:var(--g3,#bbb);transition:transform .2s,color .2s;}
.side-cat-list a:hover{background:var(--sand-light);}
.side-cat-list a:hover .side-cat-arrow{transform:translateX(3px);}
.side-sticky{position:sticky;top:14rem;align-self:flex-start; width: 100%; }
.side-sticky h3{ margin:0 0 0.8rem; font-weight:500;color:var(--dark);display:flex;align-items:center;gap:0.8rem;/*border-bottom:1px solid var(--g2);*/}
.side-sticky h3 .material-symbols-outlined{font-size:4rem;color:var(--mint); margin:0;}
.side-sticky h3 img{width:20px;height:20px;vertical-align:middle;}
.side-sticky h3 .ic{width:20px;height:20px;display:inline-grid;place-items:center;border-radius:6px;background:var(--mint);color:#fff;font-size:1.1rem;}
.side-sticky ul { margin-bottom:3rem;}
.side-sticky ul li { /*border-bottom:1px solid var(--g2);*/ }

/* Instagram 投稿埋め込み風 */
.ig-post{border:1px solid var(--g2);border-radius:10px;overflow:hidden;background:#fff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Zen Kaku Gothic New',sans-serif;}
.ig-post-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--g2);}
.ig-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);display:grid;place-items:center;color:#fff;font-weight:500;flex-shrink:0;}
.ig-post-user{flex:1;min-width:0;}
.ig-name{font-weight:500;color:var(--dark);line-height:1.2;}
.ig-sub{font-size:1.1rem;color:var(--g6);}
.ig-more{background:transparent;border:none;font-size:1.8rem;color:var(--g8);cursor:pointer;line-height:1;padding:0.4rem 0.6rem;}
.ig-post-media{width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--g1);}
.ig-post-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ig-post-actions{display:flex;align-items:center;gap:1.4rem;padding:1rem 1.2rem;font-size:2rem;}
.ig-post-actions .ig-act{cursor:pointer;line-height:1;}
.ig-post-actions .ig-act-right{margin-left:auto;}
.ig-post-likes{padding:0 1.2rem 0.6rem;color:var(--dark);}
.ig-post-caption{padding:0 1.2rem 0.8rem;color:var(--dark);line-height:1.6;}
.ig-post-caption a{color:var(--g6);text-decoration:none;}
.ig-post-caption a:hover{text-decoration:underline;}
.ig-post-time{padding:0 1.2rem 1rem;font-size:1.2rem;color:var(--g4);letter-spacing:.5px;text-transform:uppercase;}
.ig-post-view{display:block;padding:1rem 1.2rem;border-top:1px solid var(--g2);font-size:1.4rem;font-weight:500;color:var(--mint);text-align:center;text-decoration:none;transition:.2s;}
.ig-post-view:hover{background:var(--sand-light);}

/* 旅のスタイル 一覧 */
.style-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;}
.style-list a{display:flex;align-items:center;padding:0.8rem 1rem;border-radius:8px;text-decoration:none;color:var(--g8);font-weight:500;transition:.2s;gap:1.4rem;}
.style-list a > .ic{font-size:2.56rem;line-height:1;flex-shrink:0;text-align:center;}
.style-list a > .thumb{width:64px;height:48px;border-radius:6px;background-size:cover;background-position:center;background-color:#cbd5e0;flex-shrink:0;}
.style-list a > .label{flex:1;}
.style-list a:hover{background:var(--sand-light);color:var(--mint);}
.style-list a:hover .thumb{box-shadow:0 2px 8px rgba(0,0,0,.12);}
.style-list a::after{content:"→";color:var(--g4);transition:.2s;margin-left:auto;}
.style-list a:hover::after{color:var(--olive);transform:translateX(2px);}

/* 関連店舗 */
.related{margin-top:6.4rem;padding-top:4.8rem;border-top:1px solid var(--g2);}
.related h2{font-size:clamp(2rem,2.4vw,2.4rem);font-weight:500;color:var(--dark);margin:0 0 0.8rem;}
.related-sub{color:var(--g6);margin:0 0 2.8rem;}
.related .shop-grid{grid-template-columns:repeat(3,1fr);gap:1.6rem;}
/* 2カラムレイアウト内のshop-grid: PC3列 / スマホ2列 */
.spot-main > .shop-grid{grid-template-columns:repeat(3,1fr);gap:2rem;}
.spot-main .shop-img{aspect-ratio:1;}
/* 「こちらもご覧ください」バナー */
.related-banner{display:block;max-width:33%;margin:1.6rem 0 0;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:all .4s cubic-bezier(.16,1,.3,1);}
.related-banner:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.12);}
.related-banner img{width:100%;height:auto;display:block;margin:0;border-radius:0;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.related-banner:hover img{transform:scale(1.04);}


/* フッターロゴ画像 */
.f-logo{display:inline-block;max-width:220px;}
.f-logo img{max-width:220px;height:auto;display:block;}


/* ===== 新着情報（タブ式トピックス／サムネイル付き） ===== */
/* 上端をイベントカレンダーに重ね、波形のマスクで切り抜いて季節写真の背景を覗かせる */
.news{background:var(--sand-light);
  margin-top:calc(-1 * 6.95vw); padding-top:calc(2.4rem + 6.95vw);
  -webkit-mask:var(--news-mask); mask:var(--news-mask);
  --news-mask:
    linear-gradient(#000,#000) no-repeat left bottom / 100% calc(100% - 6.95vw),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,40C240,100,480,0,720,60s501,32,720-20v80H0V40Z" fill="%23000"/></svg>') no-repeat left top / 100% 6.95vw;}
/* セクション外にあった波の帯は役目を終えたので隠す */
.ev-cal + .wave-wrap{display:none;}
/* 右下の装飾イラスト（季節ごとの bg_{season}.png）は削除 2026.09.28。戻すときは下のコメントを外す
.ev-cal::after{content:""; position:absolute; z-index:-1; pointer-events:none;
  right:0; bottom:calc(6.95vw + 2rem);
  width:min(45rem,45%); aspect-ratio:1774/887;
  background:url("../img/bg_spring.png") no-repeat center / contain;}
.ev-cal[data-season="summer"]::after{background-image:url("../img/bg_summer.png");}
.ev-cal[data-season="autumn"]::after{background-image:url("../img/bg_autumn.png");}
.ev-cal[data-season="winter"]::after{background-image:url("../img/bg_winter.png");}
*/
.news-tabs{display:flex;gap:clamp(0.4rem,1.4vw,0.8rem);margin-bottom:2.8rem;flex-wrap:wrap;}
.news-tab{padding:0.8rem 1.6rem 0.8rem 1.2rem;border-radius:24px;font-weight:500; /*border:1px solid var(--g2);*/background:#fff;color:var(--g6);cursor:pointer;transition:.2s;font-family:inherit; border: none;}
/* タブの色は data-cat ごとに --tab-c で切り替え（すべて＝ミント、他は .nc-cat と同じ色） */
.news-tab{--tab-c:var(--mint);}
.news-tab[data-cat="info"],.news-more a[data-cat="info"]{--tab-c:var(--cat-info);}
.news-tab[data-cat="event"],.news-more a[data-cat="event"]{--tab-c:var(--cat-event);}
.news-tab[data-cat="recruit"],.news-more a[data-cat="recruit"]{--tab-c:var(--cat-recruit);}
.news-tab[data-cat="pickup"],.news-more a[data-cat="pickup"]{--tab-c:var(--cat-pickup);}
.news-tab.active{background:var(--tab-c);color:#fff;border-color:transparent;}
.news-tab:not(.active):hover{background:var(--g2);}
.news-tab{display:inline-flex;align-items:center;gap:0.4rem;}
.news-tab .material-symbols-outlined{font-size:2.4rem;color:var(--tab-c);transition:color .2s; margin:0;}
.news-tab.active .material-symbols-outlined{color:#fff;}

/* グリッド：1件目を大きく、残り（最大4件）を小さく */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:2.4rem;grid-auto-flow:dense;align-items:stretch;}
.news-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:1.6rem;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.05);transition:.25s;}
.news-card:hover{transform:translateY(-4px);box-shadow:0 1.6rem 3.2rem rgba(0,0,0,.1);}
.news-card[hidden]{display:none;}
.nc-thumb{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;/*background:#cbd5e0;*/background:#fff; border-radius:1.6rem 1.6rem 0 0;}
.nc-thumb img{width:100%;height:100%;object-fit:cover; object-position:top center;transform:.4s;}
.news-card:hover .nc-thumb img{transform:scale(1.06);}
/* NEW バッジ（2週間以内・丸形・ロゴのピンク／角からはみ出す） */
.nc-new{position:absolute;top:-0.8rem;left:-0.8rem;z-index:4;width:46px;height:46px;border-radius:50%;background:#FF80B4;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:1.2rem;font-weight:500;letter-spacing:0.5px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.25);border:2px solid #fff;}
.news-card.is-feature .nc-new{width:58px;height:58px;font-size:1.5rem;top:-1rem;left:-1rem;}
/* NEWバッジの背景色を乗算（写真に馴染ませる）。
   .nc-new に mix-blend-mode を付けると白文字まで乗算で消えるため、
   ピンクの丸だけをカードの ::before に描いて乗算し、.nc-new（文字・白フチ）はその上に重ねる。
   :has() 非対応ブラウザでは従来どおり .nc-new 自身のピンク背景で表示される */
.news-card:has(> .nc-new)::before{content:"";position:absolute;top:-0.8rem;left:-0.8rem;z-index:3;width:46px;height:46px;border-radius:50%;
  background:#FF80B4;mix-blend-mode:multiply;pointer-events:none;}
.news-card.is-feature:has(> .nc-new)::before{width:58px;height:58px;top:-1rem;left:-1rem;}
.news-card:has(> .nc-new) > .nc-new{background:transparent;}
.nc-body{padding:1.4rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:0.8rem;flex:1;}
.nc-meta{display:flex;align-items:center;gap:1rem;}
.nc-cat{font-size:1.1rem;font-weight:600;padding:0.5rem 1rem;border-radius:5px;color:#fff;/*white-space:nowrap;*/ line-height:1.25;}
/* カテゴリ色：ロゴ「とっとり旅」の配色 */
/* 新着情報のカテゴリー色（.nc-cat と .news-tab で共通） */
:root{--cat-info:#9C6CBA;    /* 紫 */
      --cat-event:#54BABA;   /* ティール */
      --cat-recruit:#30B4FC; /* ブルー（旗） */
      --cat-pickup:#BA7E7E;} /* 赤茶 */
.nc-cat.info{background:var(--cat-info);}
.nc-cat.event{background:var(--cat-event);}
.nc-cat.recruit{background:var(--cat-recruit);}
.nc-cat.pickup{background:var(--cat-pickup);}
.nc-date{font-family:'Inter',sans-serif;font-size:1.3rem;color:var(--g4);}
.nc-title{color:var(--dark);font-weight:500;line-height:1.5;font-size:1.5rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card:hover .nc-title{color:var(--mint);}

/* 1件目（フィーチャー）：2×2に拡大 */
.news-card.is-feature{grid-column:span 2;grid-row:span 2;}
.news-card.is-feature .nc-thumb{aspect-ratio:4/3;}
.news-card.is-feature .nc-body{padding:2rem 2.4rem 2.4rem;gap:1.2rem;}
.news-card.is-feature .nc-title{font-size:clamp(1.8rem,1.8vw,2.4rem);-webkit-line-clamp:3;line-clamp:3;}
.news-card.is-feature .nc-cat{font-size:1.2rem;padding:0.32rem 1.2rem;}
.news-card.is-feature .nc-date{font-size:1.4rem;}


.news-more{text-align:center;margin-top:3.2rem;}
/* 背景色は選択中のタブに合わせる（data-cat は js/top.js の filterNews() が付与。すべて＝ミント） */
.news-more a{--tab-c:var(--mint);display:inline-flex;align-items:center;gap:0.6rem;padding:1.12rem 3.2rem;border-radius:28px;background:var(--tab-c);color:#fff;text-decoration:none;font-weight:500;transition:.2s;}
.news-more a:hover{background:color-mix(in srgb,var(--tab-c) 80%,#000);transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,94,107,.25);}
.news-more a:not([data-cat]):hover,.news-more a[data-cat="all"]:hover{background:var(--teal);}
.news-more a .material-symbols-outlined{font-size:1.8rem; margin:0;}



/* ===== 新着情報 一覧ページ（cate_news_temp / カテゴリー808配下） ===== */
/* 本文＋サイドの2カラム。RCMSが出力する親要素名に依存しないよう :has() で指定 */
:where(div,main,section,article):has(> .news-list-main):has(> .news-list-side){
  display:grid;grid-template-columns:1fr 300px;gap:4.8rem;
  max-width:1440px;margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem) 6.4rem;
}
.news-list-main{min-width:0;}
/* サイドなし（カテゴリーをタブ表示にした場合）：1カラム全幅 */
:where(div,main,section,article):has(> .news-list-main):not(:has(> .news-list-side)){
  max-width:1440px;margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem) 6.4rem;
}

/* 一覧グリッド：1行3件（カードはトップの .news-card をそのまま流用） */
.index_area{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;list-style:none;margin:0;padding:0;}
.index_box{display:flex;margin:0;padding:0;list-style:none;}
.index_box::before{content:none;}
.index_box > .news-card{width:100%;}
.index_box.none{grid-column:1 / -1;justify-content:center;padding:4.8rem 0;color:var(--g6);}

/* サイド：現在のカテゴリーを強調 */
.side-cat-list a.active{background:var(--mint);color:#fff;}
.side-cat-list a.active .material-symbols-outlined,
.side-cat-list a.active .side-cat-arrow{color:#fff;}

@media(max-width:1280px){
  .index_area{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:960px){
  :where(div,main,section,article):has(> .news-list-main):has(> .news-list-side){
    grid-template-columns:1fr;gap:3.2rem;
  }
  .index_area{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  .index_area{grid-template-columns:repeat(2,1fr);gap:1.6rem;}
}
@media(max-width:480px){
  .index_area{grid-template-columns:1fr;}
}

/* 新着情報一覧（info_list / 808配下）: サイドのカテゴリーをトップと同じ .news-tabs に置き換え、一覧は全幅。
   PC 3列 → タブレット 2列 → スマホ 1列（カードはトップと同じ横長表示） */
.news-list-tabs{margin:0 0 3.2rem;}
/* イベントカレンダー（本番204／検証2073）配下の一覧：カテゴリーラベルとサムネイルは出さない（is-evcal はテンプレートで付与） */
.index_area.is-evcal .nc-cat,
.index_area.is-evcal .nc-thumb{display:none;}
.news-list-tabs + .spot-main .index_area,.news-list-tabs + .index_area,.tpl-list .inner > .spot-main > .index_area,.news-list-main > .index_area{grid-template-columns:repeat(3,1fr);}
@media(max-width:960px){
  .news-list-tabs + .spot-main .index_area,.news-list-tabs + .index_area,.tpl-list .inner > .spot-main > .index_area,.news-list-main > .index_area{grid-template-columns:repeat(2,1fr);gap:2rem;}
}
@media(max-width:640px){
  .news-list-tabs{gap:0.6rem;margin-bottom:2.4rem;}
  .news-list-tabs .news-tab{padding:0.6rem 1.4rem 0.6rem 1.1rem;font-size:1.4rem;}
  .news-list-tabs .news-tab .material-symbols-outlined{font-size:2rem;}
  .news-list-tabs + .spot-main .index_area,.news-list-tabs + .index_area,.tpl-list .inner > .spot-main > .index_area,.news-list-main > .index_area{grid-template-columns:1fr;gap:1.6rem;}
}

/* ---------------------------- pager */
.pager { display: inline-block; font-size: 0; margin: 20px 0; padding-left: 0; text-align: center; width: 100%; }
.pagenavi { display:flex; justify-content:center; align-items:center; flex-flow:row wrap; gap:0.25rem; }
.pager a, .pager span { /* border: 2px solid #eee; */ background:#fff; /*border: 1px solid var(--g2);*/ box-sizing: border-box; display: flex; align-items:center; justify-content:center; font-size: 1.6rem; height: 4.2rem; width: 4.2rem; margin:0 0.25rem; max-width: 4.2rem; padding: 0; /*text-align: center; vertical-align: top; line-height: 4.2rem;*/ transition: 0.25s all; border-radius: 1000rem; color: #333; }
.pager a span { background:none; margin:0; border:none; }
.pager a.disable { /* pointer-events: none; */ }
.pager .prev { height: 4.2rem; width: 4.2rem; position: relative; }
.pager .prev a::before, .pager .prev span::before { border-left:2px solid #fff; border-top:2px solid #fff; content: ""; display: block; height: 1rem; width: 1rem; left:5%;/*left: 50%; position: absolute; top: 50%;*/ transform:rotate(-45deg);  transition: all 0.2s ease-in-out 0s; }
.pager .next { width: 4.2rem; height: 4.2rem; position: relative; }
.pager .next a::after, .pager .next span::after { border-right:2px solid #fff; border-top:2px solid #fff; content: ""; display: block; height: 1rem; width: 1rem; right:5%; /*left: 50%; position: absolute; top: 50%;*/ transform:rotate(45deg); transition: all 0.2s ease-in-out 0s; }
.pager a::before { display: none; }
.pager a:first-child, .pager a:first-child { margin-left: 0; background: #5bb; border-radius: 1000rem; }
.pager a:last-child, .pager a:last-child { background: #5bb; border-radius: 1000rem; }
.pager .active a, .pager .active span, .pager .active a:hover, .pager .active span:hover, .pager .active a:focus, .pager .active span:focus { background: #000; color: #fff; cursor: default; z-index: 2; }

.pager a.page:hover, .pager a.page:focus { background: #5bb5; }
.pager span.current { background: #5bb5; }



/* =========================================================================
   メディアクエリ（ブレークポイント：960 / 640 / 480 の3段）
   ========================================================================= */

/* --- max-width:960px --- */
@media(max-width:1280px){
  /* .spot-main > .shop-grid はPCから3列にしたのでここでの上書きは不要 */
  .travel-style .ts-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:960px){
  .hd-in { padding:0.8rem 1.6rem;}
  .topics-track:not(.slick-initialized) .topic-card{flex:0 0 calc((100% - 24px) / 2);}
  .topic-card{flex:0 0 calc((100% - 24px) / 2);}
  .eg,.pg{grid-template-columns:repeat(2,1fr);}
  .rl{grid-template-columns:1fr;}
  .fi{grid-template-columns:1fr 1fr;gap:3.2rem;}
  .fi > .fb{grid-column:1 / -1;}
  .shop-grid{grid-template-columns:repeat(2,1fr);}
  .ac-bus-grid{grid-template-columns:repeat(2,1fr);}
  .area-map .aspot-body{padding:clamp(0.8rem,1.2vw,1.2rem) clamp(1.2rem,1.6vw,1.6rem);}
  .area-map .aspot-name{font-size:clamp(1.6rem,2vw,2rem);}
  .area-map .aspot-desc{font-size:clamp(1.2rem,1.4vw,1.52rem);line-height:1.5;margin-top:0;}
  .area-map .aspot-pick{width:54px;height:54px;font-size:1.36rem;top:-1rem;right:-1rem;}
  .area-map .si:has(> .text){display:block;}
  .area-map .si:has(> .text) > .text{width:100%;}
  .area-grid{display:block;}
  .area-col-left, .area-col-right{flex:none;width:100%;}
  .area-col-left{margin-bottom:2.4rem;}
  .map-wrap{margin:0 clamp(-3.2rem,-3vw,-1.6rem);border-radius:0;}
  .area-spots{grid-template-columns:repeat(2,1fr);}
  /* バーガーメニュー切替 */
  nav, .hm{display:none;}
  .subnav{display:flex;justify-content:flex-end;}
  .subnav > li:not(.lang-switch){display:none;}
  .hd-right{margin-left:auto;}
  .lang-switch{margin:0 0.8rem 0 0;}
  .nav-lang{font-size:1.2rem;padding:0.4rem 1rem;}
  .hb{display:flex;}
  body.is-top .logo{transform:scale(1);}
  .dlbl{top:clamp(6.4rem,10vw,9.6rem);}
  .ev-cal{padding:5.6rem 0;}
  .ev-cal .si{padding:0 2rem;}
  /* .ev-chart / .ev-tabs / .ev-seasons の表示切替はベース側で指定 */
  .ev-seasons{margin-bottom:0;}
  /* イベント一覧: 960px以下は2列（960px超は3列） */
  .ev-season-panel.active{flex-direction:column;gap:0;}
  .ev-season-photo{aspect-ratio:5/2;flex:0 0 auto;margin:0;border-radius:1.6rem 1.6rem 0 0;}
  .ev-season-photo img{min-height:0;}
  /* スマホ/タブレット: 季節タブが写真の下部に重なるため、キャプションは右上へ */
  .evp-cap{left:auto;bottom:auto;right:1.2rem;top:1.2rem;}
  .ev-month-card{flex:0 0 240px;}

  .ev-season-tabs { z-index:100; top:calc(40vw - 7rem); right:1rem; }
  .ev-season-list{grid-template-columns:1fr;gap:0;padding:1.6rem;}
  .ev-season-photo{margin:0;border-radius:1.2rem 1.2rem 0 0; aspect-ratio:5/2;}
  .ev-season-photo img{}
  .ev-season-tab{width:6.4rem;}
  
  .spot-body{grid-template-columns:1fr;gap:3.2rem;}
  .side-sticky{position:static;top:auto;}
  .related .shop-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;}
  .news-card.is-feature{grid-column:span 2;grid-row:auto;}
  .news-card.is-feature .nc-thumb{aspect-ratio:3/2;}
  .anchor{top:-9.6rem;}
  .category-section{padding:80px 0 40px;}
  .banner-grid{gap:1.2rem;}
  .banner-grid a{flex:1 1 calc((100% - 1.2rem) / 2);}
  .hd .logo, .mobile-menu .mm-logo, .f-logo{max-width:16rem;width:auto;}
  .feature-hero{/*margin-top:8rem;*/aspect-ratio:16/9;}
  .eg{grid-template-columns:1fr;}
  .hero-sub { margin-bottom:0;}
  .hero-search{display:none;}
  .aip{right:1.6rem;left:1.6rem;width:auto;bottom:8rem;}
  .aip-speech{left:0.8rem;}
  /* 960px以下のみ：スクロール時に吹き出しをボタンへ収納（PCでは常に表示） */
  .ai-fab-wrap.scrolled .ai-fab-speech{transform:translateY(50%) scale(.25);opacity:0;}
  .area-tabs{flex-wrap:nowrap;}
  .fbot{flex-direction:column;}
  .spot-wrap{padding:8rem 1.6rem 4rem;}
  .access-menu{grid-template-columns:repeat(3,1fr)!important;}
  .travel-style .ts-grid{grid-template-columns:repeat(4,1fr);}
}

/* --- max-width:640px --- */
@media(max-width:640px){
  .spot-main > .shop-grid{grid-template-columns:repeat(2,1fr);}
  /* スマホ: 食・買・ミシュランのバッジを画像右上へ移動し、左下の市町村タブとの重なりを回避 */
  .spot-main .shop-badges{top:0.8rem;bottom:auto;}
  .related-banner{max-width:60%;}
  .fb { width: 100%;}
  .fc { column-count:2; margin:0; padding:0;}
  .hero{height:100vw;min-height:100vw;}
  .hero-cap{left:1.6rem;bottom:2rem;}
  .hero-cap-in{padding:0.5rem 1.2rem;font-size:1.2rem;}
  /* スマホ: 動画ボタンは小さめ・やや上寄せ（メインコピーとの重なり回避） */
  .hero-play{width:7rem;height:7rem;margin-top:1.5rem;}
  /* リング文字は viewBox(100単位)基準でボタンごと拡縮するため、
     画面幅ごとの font-size 指定は不要（指定すると一周ぴったりが崩れる） */
  .video-modal-close{top:-5.6rem;right:0;}
  .mm-grid{grid-template-columns:repeat(3,1fr);}
  .topics-track:not(.slick-initialized) .topic-card{flex:0 0 100%;}
  /* Slickドット */
  .topics-track.slick-initialized .slick-dots{bottom:auto;position:static;padding:0.8rem 0 0;}
  .topics-track.slick-initialized .slick-dots li{width:24px;height:24px;margin:0;}
  .topics-track.slick-initialized .slick-dots li button{width:24px;height:24px;padding:0;}
  .topics-track.slick-initialized .slick-dots li button:before{content:'';width:8px;height:8px;border-radius:50%;background:#55bcbc;opacity:.3;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0;transition:width .2s,height .2s,opacity .2s,background .2s;}
  .topics-track.slick-initialized .slick-dots li.slick-active button:before{width:14px;height:14px;opacity:.8;}
  /* サムネイルスライダー */
  .topics-thumbs{display:block; margin:0 clamp(-3.2rem,-3vw,-1.2rem);}
  .topics-thumbs .slick-list{margin:0 -0.4rem;}
  .topics-thumbs .slick-slide{padding:0.4rem;}
  .topics-thumbs .slick-slide img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;opacity:.45;border:2px solid transparent;cursor:pointer;transition:opacity .2s,transform .2s,border-color .2s;}
  .topics-thumbs .slick-current img{opacity:1;border-color:var(--olive);transform:scale(1.1);}
  .topics-thumbs .slick-slide:focus{outline:none;}
  .topics-nav{top:calc(30% - 2.4rem); }
  .topics-nav.prev{left:0;}
  .topics-nav.next{right:0;}
  .spot-info,#spotInfo dl{display:block;}
  .pmap-embed{aspect-ratio:4/5;}
  .ac-bus-grid{grid-template-columns:1fr;}
  .news-grid{grid-template-columns:1fr;gap:1.6rem;grid-auto-rows:auto;}
  .news-card.is-feature{grid-column:auto;}
  .news-card.is-feature .nc-thumb{/*aspect-ratio:4/3;*/}
  .news-card:not(.is-feature){flex-direction:row;align-items:stretch;}
  .news-card:not(.is-feature) .nc-thumb{flex:0 0 45%;/*aspect-ratio:auto*/;min-height:88px;border-radius:14px 0 0 14px;}
  .news-card:not(.is-feature) .nc-body{padding:1rem 1.4rem;gap:0.6rem;justify-content:center;}
  .news-card:not(.is-feature) .nc-title{font-size:1.4rem;}
  .travel-style .ts-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.2rem;}
  /* スマホ：縦書きラベルは文字数ぶんの高さが要る。
     文字数の多いラベル（例:お土産・買い物＝7文字）は 390px 未満で
     写真の高さを超えてしまうため、その範囲だけ字送りを詰める。
     410px 以上では 1.6rem のまま（＝従来の見た目）。 */
  .travel-style .ts-body h3{font-size:clamp(1.2rem,3.9vw,1.6rem);}

  .ev-season-photo{margin:0;border-radius:1.2rem 1.2rem 0 0; aspect-ratio:5/3;}
  .evp-cap{left:auto;bottom:auto;right:1.2rem;top:1.2rem;padding:0.4rem 1.1rem;font-size:1.1rem;}
  .ev-season-photo.winter img { object-position:top center;}
  /* 写真の縦横比(5/3)に合わせてタブ位置を調整＝写真下端からの距離は従来どおり */
  .ev-season-tabs { z-index:100; top:calc(60vw - 7.4rem); }
}

/* --- max-width:480px --- */
@media(max-width:480px){
  .br-480{display:inline;}
  .banner-grid{max-width:360px;margin:0 auto;}
  .banner-grid a{flex:1 1 100%;}
  .pg{grid-template-columns:1fr;}
  .area-box{transform-box:fill-box;transform-origin:center;transform:translateY(20px) scale(1.5);}
  /* AI FAB と footer メニューが被らないよう余白を追加 */
  footer{ /*padding-bottom:11.2rem;*/}
  .hero{height:120vw;min-height:120vw;}
  .ac-pass{flex-direction:column;}

.travel-style .cat-card .photo {aspect-ratio:5/4;}
  /*.cat-card .photo {aspect-ratio:1;}*/
  .cat-card .photo img {object-fit:cover;object-position:center;}
}




/* =========================================================
 * 汎用テンプレート（cate.html / page.html）
 * ヘッダ高さぶんの余白を確保した上に、パンくず→タイトル→本文/一覧
 * ========================================================= */
.tpl-body{padding-top:clamp(8rem,14vw,13.2rem); /*background:#fff; max-width: 1280px;*/ margin: auto;}
.tpl-breadcrumb{/*padding-top:2rem;*/}
.tpl-breadcrumb .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;/*gap:0.56rem 0.8rem;*/font-size:1.3rem;}
.tpl-breadcrumb .breadcrumb .sep{color:var(--g4);}
.tpl-breadcrumb .breadcrumb span:last-child{color:var(--g6); padding: 0.4rem 0; }

/* タイトル帯（temp-hero より余白を詰めた版） */
.tpl-hero{padding:clamp(2rem,4vw,4rem) clamp(1.5rem,3vw,3rem) clamp(3rem,5vw,5rem); text-align:center;}
.tpl-hero .si{text-align:center;}
.tpl-hero .sl{justify-content:center;}
.tpl-hero .tpl-h1{font-weight:500;color:var(--dark);line-height:1.3;margin:0;}
.tpl-hero .tpl-lead{display:block;/*max-width:760px;*/margin:1.6rem auto 0;color:var(--g6);line-height:1.8;}
.tpl-hero .tpl-date{display:inline-block;margin-top:1.6rem;font-size:1.3rem;color:var(--g4);}

/* 一覧（カテゴリーページ）: .shop-grid + .cat-card を流用。更新日/NEW のみ追加 */
.tpl-list{padding:0 0 clamp(4.8rem,7vw,8rem);}
.cat-meta{margin-top:0.8rem;font-size:1.2rem;color:var(--g4);}
.cat-new{display:inline-block;margin:-0.5rem 0 0 0.6rem;padding:0.1rem 0.6rem;border-radius:2rem;background:var(--coral);color:#fff;font-size:1rem;font-weight:500;letter-spacing:.5px;vertical-align:middle;}
.tpl-empty{text-align:center;color:var(--g6);padding:4.8rem 0;}

/* 本文（詳細ページ）: CMS WYSIWYG 出力のベーススタイル */
.tpl-content{padding:0 clamp(1.6rem,3vw,3.2rem) clamp(3.2rem,6vw,6.4rem); position: relative;}
.tpl-prose{ max-width:1280px;margin:0 auto;color:var(--g8);word-break:break-word; position: relative;z-index:0;}
.tpl-prose > *:first-child{margin-top:0;}
/* CMS旧コンテンツ: 横長テーブルはラッパーで横スクロール可能に */
.tpl-prose .responsive-type-outer{overflow-x:auto;}
.tpl-prose h2{ margin-left:auto; margin-right:auto; text-align: center; }
.tpl-prose h3{}
.tpl-prose h4{ border-bottom: 0.1rem solid #333; padding-bottom:0.5rem; }
.tpl-prose h4 + br { display: none; }
.tpl-prose h5 { padding: 0.5rem 1rem; background: #f1f4f7;}


.tpl-prose a:hover{/*color:var(--mint);*/ text-decoration: underline;}
.tpl-prose img{max-width:100%;height:auto; }
.tpl-prose ul,.tpl-prose ol{/*margin:0;padding-left:2.4rem;*/}
.tpl-prose li{/*margin:0.6rem 0;*/}
.tpl-prose blockquote{margin:2.4rem 0;padding:1.6rem 2rem;background:var(--sand-light);border-left:4px solid var(--sand);border-radius:0 12px 12px 0;color:var(--g6);}
.tpl-prose table { width:100%;border-collapse:collapse; margin-bottom:1.6rem; }
.tpl-prose th,.tpl-prose td{border:1px solid var(--g2);padding:0.8rem 1rem;text-align:left;/*vertical-align:top;*/}
.tpl-prose th{ /*background:var(--g1);font-weight:500;*/}
/* イベントカレンダーの表（table.event）：土曜(.sat)・日曜(.sun)の色（セル・行どちらに付けても可） */
.mceContentBody table.event .sat{background:#EEF6FF;}
.mceContentBody table.event .sun{background:#FFF0F0;}
/* カレンダーの表の中の p は下マージンなし */
.mceContentBody table.event p{margin-bottom:0;}
.tpl-prose hr{border:0;border-top:1px solid var(--g2);margin:4rem 0;}

table.deco-tb { width:100%; border-collapse: collapse; background: #fff; -webkit-text-size-adjust: 100%; margin-bottom:3rem; border:none;  }
table.deco-tb thead th { background:var(--g3);}
table.deco-tb th { border:none; border-top:1px solid var(--g2); border-bottom:1px solid var(--g2); padding: 0.8rem 1rem; background: none; vertical-align: top; background:var(--g1); font-weight:500; }
table.deco-tb td { border:none; border-top:1px solid var(--g2); border-bottom:1px solid var(--g2); padding: 0.8rem 1rem; background: none; vertical-align: top; }
table.deco-tb.min th, table.deco-tb.min td { padding: 0.6rem; }
table.fixed { table-layout: fixed; }
table.deco-tb.line { border: none; border-collapse: collapse; border-top: 0.2rem solid var(--g2); background: #fff; }
table.deco-tb.line th { border: none; border-bottom: 1px solid var(--g2); background: none; }
table.deco-tb.line td { border: none; border-bottom: 1px solid var(--g2); }


/* トップへ戻る */
.tpl-backtop{display:flex;justify-content:center;padding:3rem 0 clamp(3.2rem,5vw,4.8rem);}
.tpl-backtop a{display:inline-flex;align-items:center;gap:0.6rem;padding:1rem 2rem;border:1px solid var(--g2);border-radius:3.2rem; background:var(--w);color:var(--g6);text-decoration:none;font-size:1.4rem;transition:.2s;}
.tpl-backtop a:hover{border-color:var(--mint);color:var(--mint);}









/* ------------ list-display（一覧）カード表示 */
.list-display ul{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;list-style:none;margin:0 0 3rem 0;padding:0;width:auto;max-width:none;}
.list-display ul li{float:none;width:auto;margin:0;position:relative;background:#fff;border-radius:1.2rem;overflow:hidden;box-shadow:0 0.2rem 1.2rem rgba(0,0,0,.06);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1);}
.list-display ul li:hover{transform:translateY(-0.6rem);box-shadow:0 1.2rem 4rem rgba(0,0,0,.12);}
.list-display ul li a{display:flex;flex-direction:column;height:100%;padding:0;border:none;text-decoration:none;color:inherit;}
.list-display .thumbnail{float:none;width:100%;margin:0;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--g1,#f2f5f7);}
/* サムネイルがデフォルト画像(icon-default.jpg)のときは枠ごと非表示にし、本文だけでカードを埋める */
.list-display .thumbnail:has(img[src$="icon-default.jpg"]){/*display:none;*/}
.list-display .thumbnail img{width:100%;height:100% !important;object-fit:cover;object-position:center;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.list-display ul li:hover .thumbnail img{transform:scale(1.06);}
.list-display .details-information{display:flex;flex-direction:column;gap:0.6rem;flex:1;padding:1.2rem 1.4rem;line-height:1.5;position:relative;}
.list-display .details-information > br{display:none;}
.contents-wrapper .list-display .heading{ font-size:clamp(1.5rem,1.8vw,1.8rem);font-weight:500;line-height:1.5;color:var(--dark,#222);}
/* PC：更新日(.update)をサムネイル左下に .shop-area と同じ白タブで重ねる（.details-information 基準で bottom:100%＝サムネ下端へ） */
.list-display .update{position:absolute;left:0;bottom:100%;z-index:2;margin:0;display:inline-block;padding:0.32rem 1.12rem 0.384rem;background:#fff;color:var(--mint);font-size:1.3rem;font-weight:500;line-height:1.5;border-radius:0 0.96rem 0 0;white-space:nowrap;}
/* コメント(description)は2行までで省略（…）。空なら非表示 */
.list-display .description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:1.3rem;color:var(--g6,#456);line-height:1.6;}
.list-display .description:empty{display:none;}
.list-display .description:empty{display:none;}
.list-display .category-new-wrap{margin-top:auto;}
.list-display .category{display:inline-block;font-size:1.2rem;font-weight:500;line-height:1.3;color:var(--teal,#0E7A8A);background:var(--sand-light,#FAF5EB);border-radius:100rem;padding:0.4rem 1rem;}
@media(max-width:1280px){
.list-display ul{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:960px){
.tpl-body{ padding-top: 8rem;}
}
@media(max-width:640px){
.list-display ul{grid-template-columns:repeat(2,1fr);gap:1.4rem;}
}
@media(max-width:480px){
.list-display ul{grid-template-columns:1fr;gap:1.2rem;}
.list-display ul li a{flex-direction:row;align-items:flex-start;gap:1.2rem;padding:1.2rem;}
.list-display .thumbnail{flex:0 0 34%;width:34%;max-width:14rem;aspect-ratio:4/3;border-radius:0.8rem;align-self:flex-start;}
.list-display .details-information{flex:1;min-width:0;padding:0;}
.list-display .update{position:static;max-width:none;margin:0;padding:0;color:var(--g6,#456);background:none;box-shadow:none;backdrop-filter:none;white-space:normal;font-size:1.3rem;}
}


.mceContentBody a { color:var(--teal);}
.mceContentBody .link, .linkButton { background: none; margin-bottom:1rem; padding-left: 2.5rem; position: relative; }
.mceContentBody .link::after, .mceContentBody div.link::after, .linkButton::after { /*content:none;*/ }
.mceContentBody .link::before, div.link::before, .linkButton a::before { content:"expand_circle_right"; font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; font-size:2.2rem; line-height:1; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; color:var(--mint); position:absolute; left:0; top:calc(50% - 1.1rem);  vertical-align:middle; z-index:2; font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
.mceContentBody .tr p.link { display: inline-block;}



/* ------------ 観光情報ページ検索結果詳細*/
body.tpl-page.tour .inner { max-width: 100rem; margin: auto;}
body.tpl-page.tour .tpl-hero .tpl-lead { margin-top:0.8rem;}
div.category-tree-display { text-align: left; padding: 1rem; border-radius:0.8rem; border: 0.3rem double var(--g2); margin:0 auto clamp(2rem,6vw,4rem); }
div.category-tree-display a { color:var(--teal); font-weight: 500; text-decoration: underline; }
div.category-tree-display a:hover { text-decoration: none; }

#spotInfo { width: 100%;}
/* 旧 #spotInfo（inline-block 20%/80%）は .spot-info カード（上部の統一ルール）に置き換え。
   グリッドと衝突するため dl/dt/dd の個別指定は削除。 */

/* =========================================================
 * 周辺情報（詳細ページ #spotInfo の下）
 * カード体裁は .list-display（tour 一覧）をそのまま流用し、
 * 2カラム内に収まるよう列数だけ .spot-nearby スコープで上書き
 * ========================================================= */
.spot-nearby{margin:clamp(3.2rem,5vw,4.8rem) 0 0;}
.spot-nearby h3{ /*display:inline-flex;align-items:center;gap:0.8rem;margin:0 0 2rem;font-size:clamp(2rem,2.4vw,2.4rem);font-weight:500;color:var(--dark);padding-bottom:1rem;border-bottom:2px solid var(--mint);*/}
.spot-nearby h3 .material-symbols-outlined{font-size:2.6rem;color:var(--mint);line-height:1;margin:0;}
.spot-nearby .list-display ul{grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,2vw,2rem);margin:0;}
.spot-nearby .list-display ul li{border:1px solid var(--g2);}
.spot-nearby .list-display .thumbnail{aspect-ratio:4/3;}
.spot-nearby .list-display .details-information{gap:0.6rem;padding:1.2rem 1.4rem 1.4rem;}
.spot-nearby .list-display .heading{font-size:1.6rem;font-weight:500;line-height:1.5;color:var(--dark);}
.spot-nearby .list-display .description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:1.3rem;line-height:1.6;color:var(--g6,#456);}
/* 距離表示（カード下端に固定） */
.spot-nearby .nearby-distance{display:inline-flex;align-items:center;gap:0.4rem;margin-top:auto;padding-top:0.4rem;/*font-size:1.2rem;*/font-weight:500;color:var(--teal,#0E7A8A);}
.spot-nearby .nearby-distance .material-symbols-outlined{/*font-size:1.8rem;*/color:var(--mint);line-height:1;margin:0;}
/* 2カラム表示のうちは幅が狭いので早めに 2 列へ。1カラム化(960px)後は 3 列に戻す */
@media(max-width:1200px){
  .spot-nearby .list-display ul{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:960px){
  .spot-nearby .list-display ul{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
  .spot-nearby .list-display ul{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .spot-nearby .list-display ul{grid-template-columns:1fr;gap:1.2rem;}
  .spot-nearby .list-display .thumbnail{aspect-ratio:4/3;}
  .spot-nearby .list-display .details-information{padding:0;}
  .spot-nearby .nearby-distance{margin-top:0.2rem;padding-top:0;}
}

/*ルート表示*/
a.b_route,a.b_route:visited{display:inline-flex;align-items: center;gap:0.5rem;background:var(--mint);color:#fff;border-radius:3rem;padding:0.4rem 1.6rem 0.4rem 1.2rem;margin-right:0.5rem;border:1px solid var(--mint);font-size:1.8rem;font-weight:500;text-decoration:none;}
a.b_route .material-symbols-outlined { color:#fff; font-size:2.4rem; margin:0; }
/* ===== 自然・絶景 一覧（season badge cards） scoped: .ns-grid ===== */
/* このページだけ body の背景色を変更（本文の .ns-grid を目印に :has() で限定） */
body:has(.ns-grid){background:var(--g1);}
.ns-grid,.ns-grid *{box-sizing:border-box;}
.ns-grid{display:flex;flex-wrap:wrap;justify-content:center;/* 端数行も中央寄せ */ gap:clamp(2rem,2.4vw,2.8rem) clamp(1.6rem,2vw,2.4rem);margin:0 auto;padding:0;list-style:none;}
/* 4カラム相当（列間3つ分のgapを差し引いて4等分） */
.ns-grid>li{flex:0 1 calc((100% - 2 * clamp(1.6rem,2vw,2.4rem)) / 3);min-width:0;}
.ns-card{position:relative;/* バッジのはみ出し基準 */ display:flex;flex-direction:column;background:#fff;border-radius:1.6rem;overflow:visible;text-decoration:none;color:inherit;box-shadow:0 .2rem 1.2rem rgba(0,0,0,.06);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;height:100%;}
.ns-card:hover{transform:translateY(-.6rem);box-shadow:0 1.6rem 3.6rem rgba(0,0,0,.12);}
.ns-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eef3f3;border-radius:1.6rem 1.6rem 0 0;}
.ns-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.ns-card:hover .ns-thumb img{transform:scale(1.06);}
/* 季節バッジ：丸型でサムネイル左上にはみ出させる（色はイベントカレンダーと統一） */
.ns-badge{position:absolute;top:clamp(-1.4rem,-1.4vw,-.8rem);left:clamp(-1.4rem,-1.4vw,-.8rem);z-index:3;width:clamp(3.8rem,4.3vw,5.1rem);height:clamp(3.8rem,4.3vw,5.1rem);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(1.6rem,2.1vw,2.2rem);font-weight:700;line-height:1.05;letter-spacing:.04em;border:clamp(.2rem,.24vw,.24rem) solid #fff;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.2);-webkit-backdrop-filter:blur(.4rem);backdrop-filter:blur(.4rem);}
.ns-badge.spring{background:rgba(252,228,236,.8);color:#E91E63;}
.ns-badge.summer{background:rgba(224,242,225,.8);color:#43A047;}
.ns-badge.autumn{background:rgba(252,229,208,.8);color:#E67E22;}
.ns-badge.winter{background:rgba(220,234,244,.8);color:#3B82F6;}
.ns-badge.other {background:rgba(234,243,243,.8);color:#0E7A8A;font-size:clamp(1rem,1.2vw,1.1rem);}
/* 文化・体験ページ用カテゴリバッジ（2文字） */
.ns-badge.culture{background:rgba(209,216,245,.8);color:#3F51B5;font-size:clamp(1.2rem,1.5vw,1.5rem);}
.ns-badge.exp    {background:rgba(203,233,207,.8);color:#2E7D32;font-size:clamp(1.2rem,1.45vw,1.5rem);}
.ns-cbody{flex:1;display:flex;flex-direction:column;padding:clamp(0.8rem,1.6vw,1.6rem) clamp(1.2rem,2vw,2rem);}
.ns-title{/*font-size:clamp(1.3rem,1.6vw,1.6rem);*/font-weight:500;line-height:1.5;margin:0;transition:color .25s; color:var(--dark);}
.ns-card:hover .ns-title{color:var(--teal);}
@media(max-width:760px){ /* 2カラム相当 */
  .ns-grid>li{flex-basis:calc((100% - 1 * clamp(1.6rem,2vw,2.4rem)) / 2);}
}

/* =========================================================
 * tour.html 専用：検索結果（内）の体裁
 * ※ 内側のHTML・classは変更せず、CSSのみで .list-display をカード型に表示
 * （旧 tour_sample.html のインライン<style>から移設）
 * ========================================================= */

/* コンテンツ全体のコンテナ幅 */
.inner{max-width:1440px;margin:0 auto;padding:0 clamp(1.6rem,3vw,3.2rem);}

/* 検索結果の件数表示 */
/* flex にすると中のテキスト/strong/span が個別アイテムになり <br> が無効化されるため、
   float で note を右寄せにして responsive-inline-block の改行を活かす */
.category-result{margin:0 0 1.6rem;color:var(--g6,#456);font-size:1.5rem;line-height:1.8;}
.category-result::after{content:"";display:block;clear:both;}
.category-result strong{color:var(--dark,#222);}
.category-result .count{color:var(--teal,#0E7A8A);font-weight:600;}
.category-result .note{float:right;margin:0 0 0 1.6rem;font-size:1.3rem;color:var(--g4,#8a97a6);text-align:right;}

/* ===== list-display をカード型に ===== */
.list-display ul{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;list-style:none;margin:0 0 3.2rem;padding:0;width:auto;max-width:none;}
/* li カード枠・hover は tottori.css の .list-display に委譲（重複削除） */
.list-display ul li a{display:flex;flex-direction:column;height:100%;padding:0;border:none;text-decoration:none;color:inherit;}
.list-display .thumbnail{float:none;width:100%;margin:0;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--g1,#f2f5f7);}
.list-display .thumbnail span{display:block;width:100%;height:100%;}
/* .thumbnail img / hover ズームは tottori.css の .list-display に委譲（重複削除） */
.list-display .heading{ font-size:clamp(1.6rem,1.8vw,1.8rem);font-weight:500;line-height:1.5;color:var(--dark,#222);}
.list-display .description{font-size:1.3rem;color:var(--g6,#456);}
.list-display .description:empty{display:none;}
.list-display .description font{display:none;}
.list-display .description font + br{display:none;}
.list-display .category-label-display{display:none;}
/* area-display をサムネイル左下に重ねる：details-information を基準にして bottom:100%（＝サムネ下端）へ */
.list-display .details-information{position:relative;}
.list-display .area-display{ position:absolute;left:0;bottom:100%;z-index:2;max-width:calc(100% - 1.6rem); margin:0 0 0.8rem 0.8rem;padding:0.4rem 0.88rem;font-size:1.2rem;font-weight:500;line-height:1.3;color:#fff;background:rgba(14,122,138,.85);border-radius:999px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-shadow:0 1px 4px rgba(0,0,0,.2);backdrop-filter:blur(2px);}
/* エリア別の色分け（data-area は page.js が文言から付与） */
.list-display .area-display[data-area="west"]{   background:rgba(var(--area-west-rgb),.88);}
.list-display .area-display[data-area="center"]{ background:rgba(var(--area-center-rgb),.88);}
.list-display .area-display[data-area="east"]{   background:rgba(var(--area-east-rgb),.88);}
@media(max-width:1280px){
.list-display ul{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:960px){
.list-display ul{grid-template-columns:repeat(3,1fr);}
.tpl-body{ padding-top: 8rem;}
}
@media(max-width:640px){
.list-display ul{grid-template-columns:repeat(2,1fr);gap:1.4rem;}
}
@media(max-width:480px){
.list-display ul{grid-template-columns:1fr;gap:1.2rem;}
.list-display ul li a{flex-direction:row;align-items:flex-start;gap:1.2rem;padding:1.2rem;}
.list-display .area-display{ position:static;max-width:none;margin:0;padding:0; color:var(--teal,#0E7A8A);background:none;box-shadow:none; backdrop-filter:none;white-space:normal;font-size:1.2rem;}
.list-display .area-display[data-area="west"]{   color:var(--area-west);background:none;}
.list-display .area-display[data-area="center"]{ color:var(--area-center);background:none;}
.list-display .area-display[data-area="east"]{   color:var(--area-east);background:none;}
}


/* ============================================================
 * 観光情報 検索ページ（/search.html : body.tpl-search）
 * ============================================================ */
/* ---- 補助 ---- */
body.tpl-search{background:var(--g1);}
.sr-note{display:inline-block;margin-left:0.8rem;font-size:1.3rem;font-weight:400;color:#8E9EA9;}

/* ---- 検索パネル（最大幅800px） ---- */
.srch{padding:0 0 clamp(3.2rem,5vw,4.8rem);}
.srch-panel{max-width:700px;margin:0 auto;background:#fff;border:1px solid var(--g2);border-radius:1.6rem;box-shadow:var(--shadow);padding:clamp(2rem,3vw,3.2rem);}

/* キーワード */
.srch-kw{position:relative;}
.srch-kw input{width:100%;padding:1.2rem 2.4rem;border:2px solid #BBCFD6;border-radius:4.8rem;background:#fff;font-family:inherit;font-size:1.6rem;outline:none;transition:.2s;box-shadow:inset 0 2px 4px rgba(34,68,85,.06);}
.srch-kw input::placeholder{color:#8E9EA9;}
.srch-kw input:hover{border-color:var(--mint);}
.srch-kw input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(51,153,153,.15);}
.srch-kw-clear{position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);display:none;color:#8E9EA9;}
.srch-kw-clear .material-symbols-outlined{font-size:2rem;margin:0;}
.srch-kw.has-value .srch-kw-clear{display:block;}

/* 条件グループ */
.srch-group + .srch-group{margin-top:2rem;padding-top:2rem;border-top:1px dashed var(--g2);}
.srch-legend{font-size:1.8rem;font-weight:500;line-height:1.6;color:var(--g8);margin-bottom:1.2rem;}
.srch-legend label{display:inline;cursor:pointer;}
.srch-legend .material-symbols-outlined{font-size:3rem;color:var(--mint);margin:0 0.4rem 0 0;vertical-align:-0.6rem;}

/* チップ（複数選択：チェックボックス） */
.srch-chips{display:flex;flex-wrap:wrap;gap:1rem;}
.srch-chips input{position:absolute;opacity:0;width:0;height:0;}
.srch-chips label{display:inline-flex;align-items:center;gap:0.4rem;padding:0.8rem 1.5rem 0.8rem 1rem;border:1.5px solid #BBCFD6;border-radius:4.8rem;background:#fff;color:var(--g8);cursor:pointer;transition:.2s;user-select:none;line-height:1.4;}
/* 選択状態を示す丸いチェックボックス */
.srch-chips label::before{content:"";flex-shrink:0;width:2rem;height:2rem;border:1.5px solid #BBCFD6;border-radius:50%;background:#fff center/1.3rem no-repeat;transition:.2s;}
.srch-chips label:hover{border-color:var(--teal);background:#F2FAFA;}
.srch-chips label:hover::before{border-color:var(--teal);}
.srch-chips input:checked + label{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:500;}
.srch-chips input:checked + label::before{border-color:#fff;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23224455' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");}
.srch-chips input:focus-visible + label{outline:3px solid var(--mint);outline-offset:2px;}
/* エリアは3圏域のカラーで色分け */
.srch-chips input[data-zone="east"]:checked + label{background:var(--area-east);border-color:var(--area-east);}
.srch-chips input[data-zone="center"]:checked + label{background:var(--area-center);border-color:var(--area-center);}
.srch-chips input[data-zone="west"]:checked + label{background:var(--area-west);border-color:var(--area-west);}

/* 実行ボタン */
.srch-actions{display:flex;justify-content:center;gap:1.2rem;margin-top:3.2rem;}
.srch-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;min-width:20rem;padding:1.4rem 3.2rem;border-radius:4.8rem;font-size:1.6rem;font-weight:500;transition:.2s;}
.srch-btn .material-symbols-outlined{font-size:2.2rem;margin:0;}
.srch-btn.is-primary{background:var(--teal);color:#fff;box-shadow:0 8px 24px rgba(51,153,153,.25);}
.srch-btn.is-primary:hover{background:var(--light-teal);transform:translateY(-2px);}
.srch-btn.is-reset{background:#fff;border:2px solid #BBCFD6;color:var(--g6);min-width:14rem;}
.srch-btn.is-reset:hover{border-color:var(--teal);color:var(--dark);}

/* ---- レスポンシブ ---- */
@media(max-width:900px){
  .srch-actions{flex-direction:column-reverse;align-items:stretch;}
  .srch-btn{width:100%;}
}
@media(max-width:600px){
  .srch-chips label{padding:0.9rem 1.4rem 0.9rem 1.2rem;}
}


/* =========================================================
   トップページ 装飾イラスト（_new2026/img/il_*.svg）
   ---------------------------------------------------------
   ■ 色の変え方
     SVGを直接読み込まず「マスク＋背景色」で描いているため、
     下の --il-color を1行変えるだけで全イラストの線の色が変わる。
     （--il-opacity で濃さ、--il-color-on-teal は青緑背景の上で使う色）
   ■ 追加・差し替えの手順
     1) .il-◯◯  … マスク画像と縦横比（絵の種類）
     2) .ilp-◯◯ … 置き場所（位置・大きさ・傾き）
     3) HTMLに <span class="il il-◯◯ ilp-◯◯" aria-hidden="true"></span>
        絵を入れ替えたいときは .il-◯◯ の部分だけ書き換える。
   ■ 注意
     装飾専用。読み上げ・クリックの対象外（aria-hidden / pointer-events:none）
   ========================================================= */
:root{
  --il-color:#864;          /* イラストの線の色（= var(--brown)） */
  --il-color-on-teal:#fff;  /* 青緑背景の上で使う色 */
  --il-opacity:.5;         /* 濃さ（大きいほどはっきり） */
  --il-blend:multiply;       /* ブレンドモード */
}

.il{
  position:absolute; z-index:0; display:block;
  pointer-events:none; user-select:none;
  background-color:var(--il-color); opacity:var(--il-opacity);
  -webkit-mask:var(--il-src) no-repeat center/contain; mask:var(--il-src) no-repeat center/contain;
  transform:rotate(var(--il-rot,0deg)) scaleX(var(--il-flip,1));
  mix-blend-mode:var(--il-blend);
}

/* ---- 絵の種類（マスク画像＋縦横比） ---- */
.il-hakuto     {--il-src:url("../img/il_hakuto.svg");      aspect-ratio:276/217;}
.il-ika        {--il-src:url("../img/il_ika.svg");         aspect-ratio:333/307;}
.il-camel      {--il-src:url("../img/il_camel.svg");       aspect-ratio:322/237;}
.il-matsubagani{--il-src:url("../img/il_matsubagani.svg"); aspect-ratio:448/291;}
.il-nashi      {--il-src:url("../img/il_nashi.svg");       aspect-ratio:202/206;}
.il-nashi-cut  {--il-src:url("../img/il_nashi_cut.svg");   aspect-ratio:147/146;}
.il-rakkyo     {--il-src:url("../img/il_rakkyo.svg");      aspect-ratio:237/154;}
.il-ebi        {--il-src:url("../img/il_ebi.svg");         aspect-ratio:287/224;}
.il-mosaebi    {--il-src:url("../img/il_mosaebi.svg");     aspect-ratio:428/254;}
.il-shiro      {--il-src:url("../img/il_shiro.svg");       aspect-ratio:574/516;}
.il-kaigan     {--il-src:url("../img/il_kaigan.svg");      aspect-ratio:641/408;}
.il-itadaki    {--il-src:url("../img/il_itadaki_sasa.svg");aspect-ratio:401/177;}
.il-tofuchikuwa{--il-src:url("../img/il_tofuchikuwa.svg"); aspect-ratio:399/242;}
.il-yakisoba   {--il-src:url("../img/il_yakisoba.svg");    aspect-ratio:606/390;}
.il-sakyu      {--il-src:url("../img/il_sakyu.svg");       aspect-ratio:780/212;}

/* ---- 置き場所A：セクションの区切りの波の上に立たせる ----
   クラス名はどの波か（= 直前のセクション名）を表す。左右交互に配置。 */
.wave-wrap .il{width:auto;height:clamp(6rem,16vw,13rem);bottom:-1.4rem;
               z-index:2; /* 波のSVGより後ろに隠れないように前面へ */}
.wave-wrap .ilp-wave-topics{right:8%; bottom:-3.6rem; --il-rot:-8deg; height:clamp(9rem,20vw,18rem);}
.wave-wrap .ilp-wave-ts    {left:50%; bottom:-3.6rem; --il-rot:6deg; height:clamp(5rem,16vw,10rem);
  transform:translateX(-50%) rotate(var(--il-rot,0deg)) scaleX(var(--il-flip,1));}
.wave-wrap .ilp-wave-area2 {left:50%;  bottom:-6.2rem; height:clamp(8rem,20vw,16rem); transform:translateX(-50%) rotate(var(--il-rot,0deg)) scaleX(var(--il-flip,1));}
.wave-wrap .ilp-wave-pr    {right:9%;  bottom:-4rem; /* 半分ほど青緑にかかる位置 */}
.wave-wrap .ilp-wave-evcal {right:12%; bottom:-3.6rem; --il-rot:4deg;}
.wave-wrap .ilp-wave-news  {left:50%; bottom:clamp(-5rem,-10vw,-4rem); /* 砂丘は水平線なので傾けない */
  transform:translateX(-50%) rotate(var(--il-rot,0deg)) scaleX(var(--il-flip,1));}
/* 中央ぞろえ（translateXを足すので transform を上書き） */
.wave-wrap .ilp-wave-map   {left:50%; bottom:-3.6rem; height:clamp(8rem,20vw,16rem); transform:translateX(-50%) rotate(var(--il-rot,0deg)) scaleX(var(--il-flip,1));}

/* ---- 置き場所B：セクション内の余白 ---- */
.topics .ilp-topics-bl{left:clamp(0.5rem,3vw,5rem);bottom:1.6rem;width:clamp(6rem,14vw,20rem);--il-rot:-6deg;}

.travel-style .ilp-ts-l{left:clamp(1rem,3vw,2rem); top:-6rem;width:clamp(12rem,20vw,28rem);--il-rot:-5deg;}
.travel-style .ilp-ts-r{right:clamp(1rem,3vw,4rem); top:0.4rem;width:clamp(6rem,11vw,15rem);--il-rot:9deg;}

/* ---- レスポンシブ：狭い画面での調整 ---- */
/* タブレット〜スマホ（端末プレビューの幅ぶれに備えて960pxから効かせる） */
@media(max-width:960px){
  /* イカは中央ぞろえ＋少し下げる */
  .wave-wrap .ilp-wave-topics{left:50%; right:auto; bottom:clamp(-8rem,-12vw,-4rem);
    transform:translateX(-50%) rotate(var(--il-rot,0deg)) scaleX(var(--il-flip,1));}
  /* らくだは右寄せ（中央ぞろえの translateX を解除） */
  .wave-wrap .ilp-wave-area2{left:auto; right:6%;
    transform:rotate(var(--il-rot,0deg)) scaleX(var(--il-flip,1));}
}
/* スマホ */
@media(max-width:640px){
  /* トピックスは下部にサムネイルが並ぶので白兎は出さない */
  .topics .ilp-topics-bl{display:none;}
  .travel-style .ilp-ts-l{top:-3.2rem;--il-rot:-5deg;}
}

/* =========================================================
   砂紋の地紋（_new2026/img/bg_sand.svg）
   ---------------------------------------------------------
   ベージュ背景（--sand-light）のセクションの背面に砂紋を敷く。
   ■ 使い方
     .sand-bg    … 右寄せ（既定）
     .sand-bg-l  … 左寄せ＋左右反転（.sand-bg と併記）
       例) <section class="news sand-bg sand-bg-l"> … </section>
     下の一覧に書いたセクションには CSS 側で自動的に付けているので、
     HTML を触らずに付け外しできる。
   ■ 調整
     --sand-bg-max     … 最大幅（80rem = 800px）
     --sand-bg-opacity … 濃さ
     --sand-bg-pos     … 寄せる位置（right bottom / right center など）
   ■ 注意
     装飾専用。中身より背面（z-index:-1）に敷くため、
     親側に isolation:isolate を付けて重なり順を閉じ込めている。
   ========================================================= */
:root{
  --sand-bg-src:url("../img/bg_sand.svg");
  --sand-bg-max:80rem;        /* = 800px */
  --sand-bg-opacity:1;
  --sand-bg-pos:right bottom;
}

/* 右寄せ（既定）: .sand-bg と、自動で敷くベージュ背景のセクション */
.sand-bg,
.travel-style,
.topics,
.ranking,
.pr-banners-a,
.news{position:relative; isolation:isolate;}
.sand-bg::before,
.travel-style::before,
.topics::before,
.ranking::before,
.pr-banners-a::before,
.news::before{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; user-select:none;
  opacity:var(--sand-bg-opacity);
  background:var(--sand-bg-src) no-repeat var(--sand-bg-pos) / min(var(--sand-bg-max),100%) auto;
}
/* 左寄せ＝ボックスごと左右反転（位置指定はそのままで鏡像になる） */
.sand-bg-l::before,
.travel-style::before,
.pr-banners-a::before{transform:scaleX(-1);}

/* ▼一旦非表示（砂紋を戻すときは、この宣言ブロックを削除するだけ） */
.sand-bg::before,
.travel-style::before,
.topics::before,
.ranking::before,
.pr-banners-a::before,
.news::before{display:none;}



/* =========================================================
   フォーム（cgi-bin/pamphlet-form 等）のボタン
   ・.submit-button       … 送信内容を確認する（メイン：ミント塗り）
   ・.modification-button … 修正する（サブ：白地＋ミント枠）
   ・#insert_address      … 郵便番号の「住所検索」（小さめのサブボタン）
   ========================================================= */
.submit-button,
.modification-button{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:28rem;max-width:100%;padding:1.4rem 4rem;margin:0.8rem;
  border:2px solid var(--mint);border-radius:999px;
  font-family:inherit;font-size:1.6rem;font-weight:500;line-height:1.5;letter-spacing:.05em;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .2s;}
.submit-button{background:var(--mint);color:#fff;box-shadow:0 4px 12px rgba(85,187,187,.25);}
.submit-button:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,94,107,.25);}
.modification-button{background:#fff;color:var(--mint);}
.modification-button:hover{background:var(--mint);color:#fff;}
.submit-button:focus-visible,
.modification-button:focus-visible,
#insert_address:focus-visible{outline:3px solid rgba(85,187,187,.45);outline-offset:2px;}

#insert_address{
  -webkit-appearance:none;appearance:none;display:inline-block;vertical-align:middle;
  margin-left:0.8rem;padding:0.6rem 1.6rem;
  background:#fff;color:var(--mint);border:1px solid var(--mint);border-radius:999px;
  font-family:inherit;font-size:1.4rem;font-weight:500;line-height:1.5;cursor:pointer;transition:background .2s,color .2s;}
#insert_address:hover{background:var(--mint);color:#fff;}

@media(max-width:640px){
  .submit-button,.modification-button{display:flex;width:100%;min-width:0;margin:0.8rem 0;}
}


/* =========================================================
   下層ページ用パーツ（824.html など）
   ・.tpl-sec / .tpl-sec-title … セクションと見出し
   ・.tpl-linkgrid            … リンクボタンの一覧（自動で列数調整）
   ・.tpl-newslist            … サムネイルなしのお知らせリスト（日付＋タイトル、2週間以内は NEW）
   ・.tpl-more                … 「一覧へ」リンク
   ========================================================= */
.tpl-sec{max-width:1080px;margin:0 auto clamp(4rem,6vw,6.4rem);}
.tpl-sec-title{display:flex;align-items:center;gap:0.8rem;margin:0 0 2rem;padding-bottom:1.2rem;border-bottom:2px solid var(--mint);
  font-size:clamp(2rem,2.4vw,2.6rem);font-weight:500;color:var(--dark);line-height:1.4;}
.tpl-sec-title .material-symbols-outlined{font-size:1.2em;color:var(--mint);margin:0;}

.tpl-linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));gap:1.6rem;list-style:none;margin:0;padding:0;}
.tpl-linkgrid li{margin:0;padding:0;}
.tpl-linkgrid li::before{content:none;}
.tpl-linkgrid a{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:100%;padding:1.8rem 2rem;
  background:#fff;border:1px solid var(--g2);border-radius:1.2rem;color:var(--dark);font-weight:500;line-height:1.5;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.04);transition:border-color .2s,color .2s,box-shadow .2s,transform .2s;}
.tpl-linkgrid a .material-symbols-outlined{flex-shrink:0;font-size:2rem;color:var(--mint);margin:0;transition:transform .2s;}
.tpl-linkgrid a:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px);box-shadow:0 8px 20px rgba(85,187,187,.15);}
.tpl-linkgrid a:hover .material-symbols-outlined{transform:translateX(3px);}

.tpl-newslist{list-style:none;margin:0;padding:0;border-top:1px solid var(--g2);}
.tpl-newslist li{margin:0;padding:0;border-bottom:1px solid var(--g2);}
.tpl-newslist li::before{content:none;}
.tpl-newslist a{display:flex;align-items:baseline;gap:0.8rem 2rem;padding:1.6rem 0.8rem;color:var(--dark);text-decoration:none;transition:background .2s,color .2s;}
.tpl-newslist a:hover{background:var(--sand-light);color:var(--mint);}
.tpl-newslist-date{flex-shrink:0;width:9rem;font-family:'Inter',sans-serif;font-size:1.4rem;color:var(--g4);}
.tpl-newslist-new{flex-shrink:0;align-self:center;padding:0.2rem 0.8rem;border-radius:999px;background:#FF80B4;color:#fff;
  font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:500;line-height:1.4;letter-spacing:.05em;}
.tpl-newslist-title{flex:1;min-width:0;line-height:1.6;}

.tpl-more{margin-top:1.6rem;text-align:right;}
.tpl-more a{display:inline-flex;align-items:center;gap:0.4rem;color:var(--teal);font-weight:500;text-decoration:none;}
.tpl-more a .material-symbols-outlined{font-size:2rem;margin:0;transition:transform .2s;}
.tpl-more a:hover{color:var(--mint);}
.tpl-more a:hover .material-symbols-outlined{transform:translateX(3px);}

@media(max-width:640px){
  .tpl-linkgrid{grid-template-columns:1fr;gap:1rem;}
  .tpl-linkgrid a{padding:1.4rem 1.6rem;}
  .tpl-newslist a{flex-wrap:wrap;padding:1.4rem 0.4rem;}
  .tpl-newslist-date{width:auto;}
  .tpl-newslist-title{flex-basis:100%;}
}

/* 一覧サムネイルを切り抜かず全体表示（リンク集 214 など。テンプレートで .shop-grid に is-contain を付与） */
.shop-grid.is-contain .cat-card .photo{background:#fff;}
.shop-grid.is-contain .cat-card .photo img{object-fit:contain;}