@charset "UTF-8";

:root{
  --bg:#f6f1e8;
  --bg2:#fffaf1;
  --ink:#1f1b16;
  --sub:#6d6257;
  --gold:#b89554;
  --gold2:#d7bf83;
  --green:#17382c;
  --line:rgba(31,27,22,.14);
  --shadow:0 24px 70px rgba(0,0,0,.16);
  --radius:26px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.9;
  letter-spacing:.05em;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  width:100%;
  display:block;
  object-fit:cover;
}

ul{
  list-style:none;
}

/* ローディング */
.loading{
  position:fixed;
  inset:0;
  background:var(--green);
  z-index:9999;
  display:grid;
  place-items:center;
  transition:opacity .8s,visibility .8s;
}

.loading.hide{
  opacity:0;
  visibility:hidden;
}

.loading__logo{
  width:500px;
  max-width:80%;
  height:auto;
  display:block;
  margin:0 auto 30px;
}

.loading__line{
  display:block;
  width:180px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
  margin:24px auto 0;
  animation:loadLine 1.5s infinite;
}

@keyframes loadLine{
  0%{transform:scaleX(.1);opacity:.3}
  50%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(.1);opacity:.3}
}

/* ヘッダー */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  color:#fff;
  transition:.4s;
}

.site-header.scrolled{
  background:rgba(23,56,44,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 35px rgba(0,0,0,.18);
}

.header-inner{
  height:86px;
  max-width:1280px;
  margin:auto;
  padding:0 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  display:flex;
  align-items:center;
}

.logo img{
  width:260px;
  height:auto;
  display:block;
  transition:.3s;
}

.site-header.scrolled .logo img{
  width:220px;
}

.global-nav{
  display:flex;
  gap:26px;
  font-size:14px;
}

.global-nav a{
  position:relative;
}

.global-nav a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:1px;
  background:var(--gold2);
  transition:.3s;
}

.global-nav a:hover:after{
  width:100%;
}

.menu-button{
  display:none;
  background:none;
  border:0;
  width:42px;
  height:42px;
  position:relative;
}

.menu-button span{
  display:block;
  height:1px;
  background:#fff;
  margin:8px 0;
}

/* 固定予約ボタン */
.fixed-reserve{
  position:fixed;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:900;
  display:grid;
  gap:10px;
}

.fixed-reserve a{
  writing-mode:vertical-rl;
  background:rgba(184,149,84,.92);
  color:#fff;
  padding:18px 12px;
  border-radius:999px;
  box-shadow:0 12px 35px rgba(0,0,0,.2);
  font-size:14px;
}

/* メインビジュアル */
.hero{
  height:100vh;
  min-height:720px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
}

.hero-slider,
.hero-slide,
.hero-overlay{
  position:absolute;
  inset:0;
}

.hero-slide{
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.6s,transform 8s;
}

.hero-slide.active{
  opacity:1;
  transform:scale(1);
}

.hero-overlay{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.58),
    rgba(0,0,0,.2),
    rgba(0,0,0,.48)
  );
}

/* キャッチコピー部分 */
.hero-copy{
  position:relative;
  z-index:1;
  text-align:center;
  padding:0 20px;
}

.hero-title{
  display:inline-block;
  padding:70px 95px;
  border-radius:30px;
  position:relative;
  overflow:hidden;
  background-image:url("images/title-bg.jpg");
  background-size:cover;
  background-position:center;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.hero-title::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),
    rgba(23,56,44,.25);
  z-index:1;
}

.hero-title h1{
  position:relative;
  z-index:2;
  font-size:clamp(38px,6vw,78px);
  line-height:1.35;
  font-weight:400;
  color:#fff;
  text-shadow:0 8px 30px rgba(0,0,0,.55);
}

.hero-copy p{
  margin-top:24px;
  font-size:clamp(15px,1.8vw,20px);
  text-shadow:0 6px 20px rgba(0,0,0,.5);
}

.scroll-sign{
  position:absolute;
  bottom:35px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:.24em;
  z-index:1;
}

/* 共通セクション */
.section{
  padding:110px 7vw;
}

.section-kicker{
  font-size:13px;
  color:var(--bg);
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.section-heading{
  text-align:center;
  max-width:820px;
  margin:0 auto 58px;
}

.section-heading h2,
.split-heading h2,
.feature-wide__text h2,
.parallax h2,
.contact-box h2,
.access h2,
.daytrip h2{
  font-size:clamp(30px,4vw,52px);
  font-weight:400;
  line-height:1.4;
}
/* Welcomeエリアの見出しだけ調整 */
.feature-wide__text h2{
    font-size:clamp(28px,3.5vw,48px);
    line-height:1.5;
    max-width:700px;
    text-wrap:balance;
}

.section-heading p:last-child{
  color:var(--sub);
  margin-top:16px;
}
/* ABOUTセクションだけ */
#about .section-heading{
    max-width:1000px;
}

#about .section-heading h2{
    font-size:clamp(28px,3.5vw,46px);
    line-height:1.5;
    text-wrap:balance;
}

/* 予約パネル */
.booking-panel{
    width:min(1120px,88vw);
    margin:-70px auto 0;
    background:rgba(255,250,241,.96);
    position:relative;
    z-index:5;
    border-radius:var(--radius);
    padding:50px;
    display:flex;
    flex-direction:column;   /* 縦並び */
    align-items:center;      /* 横中央 */
    justify-content:center;
    text-align:center;       /* 文字中央 */
    gap:30px;
    box-shadow:var(--shadow);
}
.booking-panel__text{
    text-align:center;
    max-width:800px;
    margin:0 auto;
}

.booking-panel__text span{
    display:block;
    color:var(--gold);
    font-size:13px;
    letter-spacing:.2em;
    margin-bottom:12px;
}

.booking-panel__text h2{
    font-size:42px;
    font-weight:400;
    margin-bottom:20px;
    line-height:1.4;
}

.booking-panel__text p{
    max-width:750px;
    margin:0 auto;
    color:var(--sub);
    line-height:2;
    font-size:17px;
}
.booking-panel__buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}
.booking-panel__text span{
  color:var(--gold);
  font-size:12px;
  letter-spacing:.22em;
}

.booking-panel h2{
  font-size:28px;
  font-weight:400;
}

.booking-panel p{
  color:var(--sub);
}

.booking-panel__buttons,
.contact-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:13px 22px;
  border-radius:999px;
  transition:.3s;
  border:1px solid var(--gold);
  font-size:14px;
}

.btn--gold{
  background:var(--gold);
  color:#fff;
}

.btn--gold:hover{
  background:#9c7b3e;
  transform:translateY(-2px);
}

.btn--outline{
  color:var(--gold);
  background:transparent;
}

.btn--outline:hover{
  background:rgba(184,149,84,.12);
}

/* 魅力カード */
.intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.intro-card{
  background:var(--bg2);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 16px 45px rgba(0,0,0,.08);
}

.intro-card img{
  height:300px;
}

.intro-card div{
  padding:28px;
}

.intro-card span,
.plan-card span{
  color:var(--gold);
  font-size:12px;
  letter-spacing:.2em;
}

.intro-card h3,
.photo-card h3,
.room-card h3,
.cuisine h3,
.plan-card h3{
  font-size:24px;
  font-weight:400;
}

.intro-card p,
.photo-card p,
.room-card p,
.plan-card p,
.split-heading p{
  color:var(--sub);
}

.photo-card p{
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.card-slider{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.card-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  filter:brightness(.72);
  transform:scale(1);
  transition:
    opacity 1.8s ease,
    transform 7s ease;
}

.card-slider img.active{
  opacity:1;
  transform:scale(1.08);
}
.photo-card > div:last-child{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
}

/* 大きな写真 */
.feature-wide{
  margin:40px 7vw 0;
  min-height:560px;
  border-radius:34px;
  overflow:hidden;
  position:relative;
  color:#fff;
  display:grid;
  align-items:end;
  box-shadow:var(--shadow);
}

.feature-wide img{
  position:absolute;
  inset:0;
  height:100%;
  filter:brightness(.62);
}

.feature-wide__text{
  position:relative;
  padding:70px;
  max-width:660px;
}

/* 写真レイアウト */
.split-heading{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:end;
  margin-bottom:54px;
}

.photo-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  grid-template-rows:1fr 1fr;
  gap:24px;
}

.photo-card{
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  min-height:300px;
  box-shadow:0 16px 45px rgba(0,0,0,.12);
  background:#000;
  color:#fff;
}

.photo-card--large{
  grid-row:span 2;
}

.photo-card img{
  height:100%;
  position:absolute;
  inset:0;
  filter:brightness(.72);
  transition:transform .8s;
}

.photo-card:hover img{
  transform:scale(1.06);
}

.photo-card div{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:34px;
  background:linear-gradient(transparent,rgba(0,0,0,.74));
}

/* 客室 */
.room-highlight{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  background:var(--green);
  color:#fff;
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:32px;
}

.room-highlight img{
  height:100%;
  min-height:520px;
}

.room-highlight__body{
  padding:58px;
}

.room-highlight h3{
  font-size:clamp(30px,4vw,50px);
  font-weight:400;
  line-height:1.35;
}

.room-highlight p{
  margin:22px 0;
  color:rgba(255,255,255,.82);
}

.room-highlight li{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.room-highlight .btn{
  margin-top:28px;
}

.room-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.room-card{
  background:var(--bg2);
  border-radius:24px;
  overflow:hidden;
}

.room-card img{
  height:260px;
}

.room-card div{
  padding:24px;
}

/* パララックス */
.parallax{
  min-height:540px;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  position:relative;
}

.parallax:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.46);
}

.parallax__inner{
  position:relative;
  max-width:760px;
  padding:0 20px;
}

/* 料理 */
.cuisine-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:260px 260px;
  gap:24px;
}

.cuisine-main{
  grid-row:span 2;
  background:var(--green);
  color:#fff;
  border-radius:var(--radius);
  overflow:hidden;
}

.cuisine-main img{
  height:70%;
}

.cuisine-main div{
  padding:30px;
}

.cuisine-sub{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  color:#fff;
  background:#000;
}

.cuisine-sub img{
  height:100%;
  filter:brightness(.7);
}

.cuisine-sub h3{
  position:absolute;
  left:24px;
  bottom:20px;
}

/* プラン */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.plan-card{
  background:var(--bg2);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 16px 45px rgba(0,0,0,.08);
}

.plan-card img{
  height:270px;
}

.plan-card div{
  padding: 20px;px;
}

.plan-card a{
  display:inline-block;
  margin-top:18px;
  color:var(--gold);
  border-bottom:1px solid var(--gold);
}

/* 日帰り */
.daytrip-box{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px;
  align-items:center;
  background:var(--bg2);
  border-radius:34px;
  padding:48px;
  box-shadow:0 16px 45px rgba(0,0,0,.08);
}

.daytrip-box img{
  height:440px;
  border-radius:26px;
}

.daytrip dl{
  margin-top:24px;
}

.daytrip dt{
  color:var(--gold);
  font-weight:bold;
}

.daytrip dd{
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
  margin-bottom:10px;
}

/* ギャラリー */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:190px;
  gap:14px;
}

.gallery-grid img{
  height:100%;
  border-radius:18px;
}

.gallery-grid img:nth-child(1),
.gallery-grid img:nth-child(6){
  grid-column:span 2;
  grid-row:span 2;
}

.gallery-grid img:nth-child(3){
  grid-column:span 2;
}

/* アクセス */
.access-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:40px;
  align-items:center;
}

.map-placeholder{
  min-height:430px;
  border-radius:34px;
  background:linear-gradient(135deg,#e7dcc8,#f8f0df);
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--sub);
  border:1px solid var(--line);
}
.map-placeholder iframe{
    width:100%;
    height:100%;
    min-height:430px;
    border:none;
    border-radius:34px;
}

.map-placeholder p{
  font-size:42px;
  color:var(--gold);
  letter-spacing:.16em;
}

/* お問い合わせ */
.contact-box{
  text-align:center;
  background:var(--green);
  color:#fff;
  border-radius:34px;
  padding:70px 30px;
}

.contact-box p{
  max-width:720px;
  margin:14px auto 28px;
  color:rgba(255,255,255,.8);
}

.contact-actions{
  justify-content:center;
}

/* フッター */
.site-footer{
  background:#f3e9b0;
  color:rgba(235, 82, 11, 0.699);
  padding:48px 7vw;
  display:flex;
  justify-content:space-between;
  gap:30px;
}
.footer-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-logo{
    width:260px;
    height:auto;
    margin-bottom:20px;
}

.footer-info p{
    color:rgba(24, 18, 1, 0.9);
    line-height:1.9;
    margin:4px 0;
}
/* アニメーション */
.reveal,
.fade-up{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s ease,transform .9s ease;
}

.reveal.visible,
.fade-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* タブレット */
@media(max-width:980px){

  .global-nav{
    position:fixed;
    inset:86px 0 auto 0;
    background:rgba(23,56,44,.96);
    display:grid;
    gap:0;
    padding:20px 32px;
    transform:translateY(-130%);
    transition:.35s;
  }

  .global-nav.open{
    transform:translateY(0);
  }

  .global-nav a{
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .menu-button{
    display:block;
  }

  .fixed-reserve{
    right:10px;
  }

  .booking-panel,
  .split-heading,
  .room-highlight,
  .daytrip-box,
  .access-grid{
    grid-template-columns:1fr;
  }

  .booking-panel{
    display:grid;
  }

  .intro-grid,
  .plan-grid{
    grid-template-columns:1fr;
  }

  .photo-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .photo-card--large{
    grid-row:auto;
  }

  .room-grid{
    grid-template-columns:1fr 1fr;
  }

  .cuisine-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .cuisine-main{
    grid-row:auto;
  }

  .cuisine-main img,
  .cuisine-sub img{
    height:300px;
  }

  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .gallery-grid img:nth-child(n){
    grid-column:auto;
    grid-row:auto;
  }

  .site-footer{
    display:grid;
  }

  .feature-wide__text{
    padding:42px;
  }

  .hero{
    min-height:640px;
  }

  .hero-title{
    padding:55px 60px;
  }

  .parallax{
    background-attachment:scroll;
  }
}

/* スマホ */
@media(max-width:560px){

  .header-inner{
    height:74px;
    padding:0 18px;
  }

  .logo img{
    width:190px;
  }

  .loading__logo{
    width:330px;
  }

  .hero{
    min-height:620px;
  }

  .hero-title{
    padding:42px 26px;
    border-radius:22px;
  }

  .hero-title h1{
    font-size:32px;
  }

  .hero-copy p{
    font-size:14px;
  }

  .section{
    padding:78px 22px;
  }

  .booking-panel{
    width:92vw;
    padding:26px;
  }

  .room-grid{
    grid-template-columns:1fr;
  }

  .room-highlight__body{
    padding:34px 26px;
  }

  .room-highlight img{
    min-height:340px;
  }

  .fixed-reserve{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    transform:none;
    display:flex;
  }

  .fixed-reserve a{
    writing-mode:horizontal-tb;
    flex:1;
    border-radius:0;
    text-align:center;
    padding:12px 8px;
  }

  .daytrip-box{
    padding:28px;
  }

  .gallery-grid{
    grid-template-columns:1fr;
  }

  .site-footer{
    padding-bottom:90px;
  }
}
/* マスコット歓迎エリア */
.mascot-welcome{
  padding:80px 7vw;
  background:var(--bg);
}

.mascot-welcome__inner{
  max-width:1080px;
  margin:0 auto;
  padding:56px 70px;
  background:rgba(255,250,241,.95);
  border:1px solid rgba(184,149,84,.28);
  border-radius:34px;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:50px;
  align-items:center;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.mascot-welcome__text h2{
  font-size:clamp(30px,4vw,48px);
  font-weight:400;
  line-height:1.4;
  margin-bottom:20px;
}

.mascot-welcome__text p{
  color:var(--sub);
  margin-bottom:26px;
}

.mascot-welcome__image{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    writing-mode:horizontal-tb;   /* ←横書きにする */
}
.mascot-welcome__image h3{
    writing-mode:horizontal-tb;
    margin-top:15px;
    margin-bottom:10px;
    font-size:20px;
    color:var(--green);
}

.mascot-welcome__image p{
    writing-mode:horizontal-tb;
    text-align:center;
    line-height:1.8;
    color:var(--sub);
    max-width:280px;
}
.mascot-welcome__image img{
  width:320px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

/* スマホ対応 */
@media(max-width:768px){
  .mascot-welcome{
    padding:60px 22px;
  }

  .mascot-welcome__inner{
    grid-template-columns:1fr;
    padding:38px 26px;
    text-align:center;
  }

  .mascot-welcome__image{
    order:-1;
  }

  .mascot-welcome__image img{
    width:240px;
    margin:0 auto;
  }
}
/* ==========================
   KAME CHARACTER
========================== */

.kame{
    position:fixed;
    bottom:25px;
    left:-180px;
    width:140px;
    z-index:999;
    pointer-events:none;
    animation:kameWalk 30s linear infinite;
}

.kame img{
    width:100%;
    animation:kameBounce 1s ease-in-out infinite;
}

@keyframes kameWalk{

    0%{
        left:-180px;
    }

    45%{
        left:40%;
    }

    55%{
        left:40%;
    }

    100%{
        left:110%;
    }

}

@keyframes kameBounce{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}
.room-slow-slider{
  position:relative;
  width:100%;
  min-height:520px;
  overflow:hidden;
}

.room-slow-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1);
  transition:
    opacity 2.8s ease,
    transform 12s ease;
}

.room-slow-slider img.active{
  opacity:1;
  transform:scale(1.06);
}
.room-sub-layout{
  display:grid;
  gap:28px;
}

.room-card--wide{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:stretch;
  background:var(--bg2);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.10);
}

.room-card--wide .room-card-slider{
  height:420px;
}

.room-card--wide > div:last-child{
  padding:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.room-label{
  color:var(--gold);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.room-grid--three{
  grid-template-columns:repeat(3,1fr);
}

.room-card-slider{
  position:relative;
  width:100%;
  height:260px;
  overflow:hidden;
}

.room-card-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1);
  transition:opacity 2.4s ease, transform 10s ease;
}

.room-card-slider img.active{
  opacity:1;
  transform:scale(1.05);
}

@media(max-width:900px){
  .room-card--wide{
    grid-template-columns:1fr;
  }

  .room-card--wide .room-card-slider{
    height:320px;
  }

  .room-grid--three{
    grid-template-columns:1fr;
  }
}
/* ==========================
   44㎡露天風呂付客室
========================== */

.room-card--wide{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:stretch;
    background:var(--green);
    color:#fff;
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.room-card--wide > div:last-child{
    padding:55px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.room-card--wide h3{
    color:#fff;
    font-size:38px;
    font-weight:400;
    line-height:1.4;
    margin-bottom:20px;
}

.room-card--wide p{
    color:rgba(255,255,255,.85);
    line-height:2;
    font-size:16px;
}

.room-label{
    color:var(--gold2);
    font-size:13px;
    letter-spacing:.22em;
    text-transform:uppercase;
    margin-bottom:14px;
}
/* ==========================
   奥出雲の四季スライダー
========================== */

.season-slider{
  min-height:560px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
  color:#fff;
}

.season-slider__images,
.season-slide,
.season-slider__overlay{
  position:absolute;
  inset:0;
}

.season-slide{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:
    opacity 2.8s ease,
    transform 12s ease;
}

.season-slide.active{
  opacity:1;
  transform:scale(1);
}

.season-slider__overlay{
  z-index:1;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.48),
      rgba(0,0,0,.22),
      rgba(0,0,0,.48)
    );
}

.season-slider__inner{
  position:relative;
  z-index:2;
  width:min(850px,88vw);
  padding:70px 40px;
}

.season-slider__inner .section-kicker{
  color:var(--gold2);
}

.season-slider__inner h2{
  font-size:clamp(32px,4.8vw,58px);
  font-weight:400;
  line-height:1.4;
  margin-bottom:24px;
  text-shadow:0 5px 22px rgba(0,0,0,.55);
}

.season-message{
  display:none;
  max-width:720px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(15px,1.8vw,19px);
  line-height:2;
  text-shadow:0 3px 15px rgba(0,0,0,.7);
  animation:seasonTextFade 1.2s ease;
}

.season-message.active{
  display:block;
}

@keyframes seasonTextFade{
  from{
    opacity:0;
    transform:translateY(12px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.season-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:32px;
}

.season-dot{
  width:10px;
  height:10px;
  padding:0;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:.3s;
}

.season-dot.active{
  width:28px;
  border-radius:999px;
  background:var(--gold2);
  border-color:var(--gold2);
}

.season-dot:hover{
  background:rgba(255,255,255,.65);
}

@media(max-width:768px){

  .season-slider{
    min-height:500px;
  }

  .season-slider__inner{
    padding:60px 24px;
  }

  .season-slider__inner h2{
    font-size:34px;
  }

}

@media(max-width:560px){

  .season-slider{
    min-height:460px;
  }

  .season-slider__inner{
    width:92vw;
    padding:50px 18px;
  }

  .season-slider__inner h2{
    font-size:30px;
  }

  .season-message{
    font-size:14px;
    line-height:1.9;
  }

}
/* 44㎡客室：タブレット・スマホ対応 */
@media(max-width:900px){

  .room-card--wide{
    grid-template-columns:1fr;
  }

  .room-card--wide .room-card-slider{
    height:320px;
  }

  .room-card--wide > div:last-child{
    padding:36px 30px;
  }

  .room-card--wide h3{
    font-size:32px;
  }
}

@media(max-width:560px){

  .room-card--wide{
    display:block;
    border-radius:24px;
  }

  .room-card--wide .room-card-slider{
    height:260px;
  }

  .room-card--wide > div:last-child{
    padding:28px 22px 32px;
  }

  .room-label{
    display:block;
    font-size:11px;
    letter-spacing:.14em;
    margin-bottom:10px;
  }

  .room-card--wide h3{
    font-size:26px;
    line-height:1.45;
    margin-bottom:14px;
    word-break:keep-all;
  }

  .room-card--wide p{
    font-size:14px;
    line-height:1.9;
    word-break:normal;
  }
}
/* 90㎡・44㎡客室の画像と説明欄の高さを揃える */

.room-highlight,
.room-card--wide{
  align-items:stretch;
}

.room-highlight > img,
.room-highlight .room-slow-slider,
.room-card--wide .room-card-slider{
  height:100%;
  min-height:520px;
}

.room-highlight__body,
.room-card--wide > div:last-child{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* 画像を枠いっぱいに表示 */
.room-highlight > img,
.room-highlight .room-slow-slider img,
.room-card--wide .room-card-slider img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.room-highlight{
  grid-template-columns:1.2fr .8fr;
}

.room-card--wide{
  grid-template-columns:1.15fr .85fr;
}
.room-highlight,
.room-card--wide{
  grid-template-columns:1.15fr .85fr;
}
@media(max-width:900px){
  .room-highlight,
  .room-card--wide{
    grid-template-columns:1fr;
  }

  .room-highlight > img,
  .room-highlight .room-slow-slider,
  .room-card--wide .room-card-slider{
    min-height:320px;
    height:320px;
  }
}
/* ==========================
   44㎡客室 レスポンシブ
========================== */

@media (max-width: 900px){

    .room-card--wide{
        display:flex;
        flex-direction:column;
    }

    .room-card-slider{
        width:100%;
        height:320px;
    }

    .room-card--wide > div:last-child{
        width:100%;
        padding:35px;
    }

}

@media (max-width: 600px){

    .room-card-slider{
        height:240px;
    }

    .room-card--wide > div:last-child{
        padding:28px 22px;
    }

    .room-card--wide h3{
        font-size:28px;
    }

    .room-card--wide p{
        font-size:15px;
        line-height:1.8;
    }

}
/*==================================
 DayTrip Slider
===================================*/

.daytrip-slider{

    position:relative;

    height:460px;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 18px 50px rgba(0,0,0,.15);

}

.daytrip-slider img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1.08);

    transition:

        opacity 2.5s ease,

        transform 10s ease;

}

.daytrip-slider img.active{

    opacity:1;

    transform:scale(1);

}
/* =========================================
   INFORMATION
========================================= */

.information-section {
  padding: 90px 7vw;
  background: #fffaf1;
}

.information-inner {
  max-width: 1100px;
  margin: 0 auto;
}


/* 見出し */

.information-heading {
  text-align: center;
  margin-bottom: 45px;
}

.information-heading h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.4;
}


/* お知らせ一覧 */

.information-list {
  border-top: 1px solid rgba(31, 27, 22, .14);
}


/* 1件ごとのお知らせ */

.information-item {
  display: grid;
  grid-template-columns: 130px 110px 1fr 30px;
  align-items: center;

  gap: 20px;

  padding: 24px 10px;

  border-bottom: 1px solid rgba(31, 27, 22, .14);

  transition:
    background .3s ease,
    padding .3s ease;
}


/* マウスを乗せた時 */

.information-item:hover {
  background: rgba(184, 149, 84, .08);
  padding-left: 20px;
}


/* 日付 */

.information-item time {
  font-size: 14px;
  color: #6d6257;
  letter-spacing: .08em;
}


/* カテゴリー */

.information-category {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-width: 90px;

  padding: 5px 12px;

  border: 1px solid #b89554;
  border-radius: 999px;

  color: #b89554;

  font-size: 12px;
  letter-spacing: .08em;
}


/* タイトル */

.information-item p {
  margin: 0;
  color: #1f1b16;
  font-size: 16px;
  line-height: 1.7;
}


/* 矢印 */

.information-arrow {
  color: #b89554;
  font-size: 20px;
  text-align: right;

  transition: transform .3s ease;
}


.information-item:hover .information-arrow {
  transform: translateX(5px);
}


/* 一覧ボタン */

.information-more {
  text-align: center;
  margin-top: 38px;
}


/* =========================================
   INFORMATION スマホ
========================================= */

@media (max-width: 700px) {

  .information-section {
    padding: 65px 22px;
  }

  .information-heading {
    margin-bottom: 30px;
  }

  .information-item {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;

    padding: 20px 5px;
  }

  .information-item:hover {
    padding-left: 5px;
  }

  .information-item time {
    grid-column: 1;
    grid-row: 1;

    font-size: 13px;
  }

  .information-category {
    grid-column: 2;
    grid-row: 1;

    min-width: 75px;

    font-size: 11px;
    padding: 4px 10px;
  }

  .information-item p {
    grid-column: 1 / 3;
    grid-row: 2;

    font-size: 15px;
    line-height: 1.7;
  }

  .information-arrow {
    display: none;
  }

}
/* =========================================
   お知らせ詳細ページ
========================================= */

.news-page {
  background: var(--bg);
}


/* ページ上部 */

.news-hero {
  padding: 160px 20px 70px;
  background: var(--green);
  color: #fff;
  text-align: center;
}

.news-hero__inner p {
  color: var(--gold2);
  font-size: 13px;
  letter-spacing: .25em;
  margin-bottom: 10px;
}

.news-hero__inner h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
}


/* 記事 */

.news-article {
  padding: 80px 22px 120px;
}

.news-article__inner {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg2);
  padding: 60px 70px;
  border-radius: 26px;
  box-shadow: 0 16px 45px rgba(0,0,0,.07);
}


/* 日付・カテゴリー */

.news-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
}

.news-meta time {
  color: var(--sub);
  font-size: 14px;
}

.news-meta span {
  display: inline-block;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 4px 18px;
  font-size: 12px;
}


/* 記事タイトル */

.news-article h2 {
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.6;

  padding-bottom: 25px;
  margin-bottom: 40px;

  border-bottom: 1px solid var(--line);
}


/* 本文 */

.news-body {
  font-size: 16px;
  line-height: 2.2;
}

.news-body p {
  margin-bottom: 28px;
}


/* 署名 */

.news-signature {
  text-align: right;
  margin-top: 50px;
}


/* 戻るボタン */

.news-back {
  text-align: center;
  margin-top: 60px;
}


/* =========================================
   スマホ
========================================= */

@media (max-width: 700px) {

  .news-hero {
    padding: 120px 20px 50px;
  }

  .news-article {
    padding: 45px 18px 90px;
  }

  .news-article__inner {
    padding: 35px 25px;
    border-radius: 20px;
  }

  .news-meta {
    flex-wrap: wrap;
  }

  .news-article h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .news-body {
    font-size: 15px;
    line-height: 2;
  }

}
/* =========================================
   世界農業遺産イベント
========================================= */

.event-information {
  margin: 45px 0;
  padding: 35px 40px;
  background: rgba(184,149,84,.08);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line);
}

.event-information h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 25px;
}

.event-information dl {
  margin: 0;
}

.event-information dl div {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.event-information dl div:last-child {
  border-bottom: none;
}

.event-information dt {
  color: var(--gold);
}

.event-information dd {
  margin: 0;
}


/* 小見出し */

.news-subtitle {
  margin: 55px 0 25px;
  font-size: 25px;
  font-weight: 400;
  text-align: center;
}


/* イベント内容 */

.event-card {
  margin-bottom: 18px;
  padding: 25px 30px;
  background: #fff;
  border-radius: 15px;
  border: 1px solid var(--line);
}

.event-card h4 {
  margin-bottom: 10px;
  color: var(--green);
  font-size: 18px;
  font-weight: 500;
}

.event-card p {
  margin: 0;
}


/* 500円など強調 */

.event-emphasis {
  color: #a87828;
  font-size: 22px;
  font-weight: bold;
}


/* 最後のメッセージ */

.event-message {
  margin-top: 45px !important;
  padding: 30px;
  text-align: center;
  background: rgba(23,56,44,.06);
  line-height: 2.2;
}


/* スマホ */

@media (max-width:700px) {

  .event-information {
    padding: 25px 20px;
  }

  .event-information dl div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .event-card {
    padding: 22px 20px;
  }

  .event-message {
    padding: 25px 18px;
    text-align: left;
  }

}
/* =========================================
   温泉イベントカレンダーページ
========================================= */

.calendar-page {
  background: var(--bg);
  min-height: 100vh;
}


/* ページタイトル */

.calendar-hero {
  padding: 150px 20px 55px;
  text-align: center;
  background: var(--green);
  color: #fff;
}

.calendar-hero .section-kicker {
  color: var(--gold2);
}

.calendar-hero h1 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.5;
}


/* カレンダー */

.calendar-content {
  padding: 70px 30px 110px;
}

.calendar-image {
  max-width: 1100px;
  margin: 0 auto;
}

.calendar-image img {
  width: 100%;
  height: auto;
  display: block;

  border-radius: 20px;

  box-shadow:
    0 20px 60px rgba(0,0,0,.14);
}


/* 戻るボタン */

.calendar-back {
  margin-top: 55px;
  text-align: center;
}


/* スマホ */

@media (max-width: 700px) {

  .calendar-hero {
    padding: 120px 18px 40px;
  }

  .calendar-hero h1 {
    font-size: 27px;
  }

  .calendar-content {
    padding: 35px 12px 80px;
  }

  .calendar-image img {
    border-radius: 10px;
  }

  .calendar-back {
    margin-top: 35px;
  }

}
/* =========================================
   お知らせ一覧ページ
========================================= */

.information-page {
  background: var(--bg);
  min-height: 100vh;
}


/* タイトル */

.information-page-hero {
  padding: 150px 20px 60px;
  background: var(--green);
  color: #fff;
  text-align: center;
}

.information-page-hero .section-kicker {
  color: var(--gold2);
}

.information-page-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
}


/* 一覧エリア */

.information-page-content {
  padding: 80px 22px 120px;
}

.information-page-inner {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bg2);
  padding: 50px 60px;
  border-radius: 26px;
  box-shadow: 0 16px 45px rgba(0,0,0,.07);
}


/* 最初の線 */

.information-page-inner .information-item:first-child {
  border-top: 1px solid var(--line);
}


/* 戻る */

.information-page-back {
  margin-top: 55px;
  text-align: center;
}


/* スマホ */

@media (max-width: 700px) {

  .information-page-hero {
    padding: 120px 20px 45px;
  }

  .information-page-content {
    padding: 45px 18px 90px;
  }

  .information-page-inner {
    padding: 25px 20px;
    border-radius: 18px;
  }

}
/* =========================================
   世界農業遺産イベント ポスター
========================================= */

.event-poster {
  max-width: 850px;
  margin: 50px auto 70px;
  text-align: center;
}

.event-poster img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(0,0,0,.15);
}

.event-list {
  margin: 15px 0 10px;
  padding: 0;
}

.event-list li {
  position: relative;
  padding: 5px 0 5px 20px;
}

.event-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.event-small {
  margin-top: 15px !important;
  color: var(--sub);
  font-size: 14px;
}


/* スマホ */

@media (max-width: 700px) {

  .event-poster {
    margin: 35px auto 50px;
  }

  .event-poster img {
    border-radius: 10px;
  }

}
/* ========================================
   ACCESS
======================================== */

/* 基本情報＋Google Map */
.access-main{
  max-width:1200px;
  margin:0 auto 80px;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:50px;
  align-items:center;
}

.access-info{
  padding:20px 0;
}

.access-label{
  color:var(--gold);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.access-info h3{
  font-size:clamp(27px,3vw,38px);
  font-weight:400;
  margin-bottom:22px;
}

.access-address{
  color:var(--sub);
  font-size:16px;
  line-height:2;
  margin-bottom:8px;
}

.access-tel{
  font-size:18px;
  letter-spacing:.08em;
  margin-bottom:28px;
}


/* Google Map */
.access-map{
  width:100%;
  height:450px;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}

.access-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}


/* ========================================
   車でのアクセス
======================================== */

.car-access{
  max-width:1200px;
  margin:0 auto;
  padding:55px;
  background:var(--bg2);
  border-radius:34px;
  box-shadow:0 16px 45px rgba(0,0,0,.08);
}


/* 見出し */
.car-access__heading{
  display:block;
  margin-bottom:42px;
  text-align:center;
}

.car-access__heading .section-kicker{
  margin-bottom:6px;
}

.car-access__heading h3{
  font-size:clamp(27px,3.5vw,42px);
  font-weight:400;
  line-height:1.3;
}


/* ルート一覧 */
.car-route-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}


/* ルートカード */
.car-route{
  background:#fff;
  border:1px solid rgba(184,149,84,.28);
  border-radius:24px;
  padding:28px;
  transition:.3s;
}

.car-route:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 35px rgba(0,0,0,.08);
}


/* 地域名と時間 */
.car-route__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}

.car-route__top h4{
  font-size:21px;
  font-weight:400;
}

.car-route__time{
  flex-shrink:0;
  padding:6px 15px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-size:14px;
  letter-spacing:.06em;
}


/* 経路 */
.car-route__line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 8px;
  font-size:14px;
  line-height:1.8;
  color:var(--sub);
}

.car-route__line span{
  display:inline-flex;
  align-items:center;
}

.car-route__line b{
  color:var(--gold);
  font-weight:400;
}


/* 玉峰山荘 */
.car-route__line .destination{
  color:var(--green);
  font-weight:bold;
  border-bottom:1px solid var(--gold);
}


/* 注意書き */
.car-access__note{
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid var(--line);
  text-align:center;
  color:var(--sub);
  font-size:13px;
  line-height:1.9;
}


/* ========================================
   タブレット・スマートフォン
======================================== */

@media(max-width:980px){

  .access-main{
    grid-template-columns:1fr;
    gap:35px;
    margin-bottom:60px;
  }

  .access-info{
    text-align:center;
  }

  .access-map{
    height:400px;
  }

  .car-access{
    padding:42px 30px;
  }

  .car-route-grid{
    grid-template-columns:1fr;
  }

}


/* ========================================
   スマートフォン
======================================== */

@media(max-width:600px){

  .access{
    padding-left:20px;
    padding-right:20px;
  }

  .access-main{
    margin-bottom:45px;
  }

  .access-info h3{
    font-size:27px;
  }

  .access-address{
    font-size:14px;
  }

  .access-map{
    height:330px;
    border-radius:22px;
  }


  /* 車アクセス全体 */
  .car-access{
    padding:32px 18px;
    border-radius:24px;
  }


  /* 見出し */
  .car-access__heading{
    flex-direction:column;
    text-align:center;
    gap:10px;
    margin-bottom:30px;
  }

  .car-access__heading .section-kicker{
    text-align:center;
  }


  .car-access__heading h3{
    font-size:27px;
  }


  /* カード */
  .car-route{
    padding:22px 18px;
    border-radius:18px;
  }

  .car-route__top{
    align-items:flex-start;
  }

  .car-route__top h4{
    font-size:18px;
  }

  .car-route__time{
    font-size:12px;
    padding:5px 11px;
  }

  .car-route__line{
    font-size:13px;
    gap:5px 6px;
  }

  .car-access__note{
    text-align:left;
    font-size:12px;
  }

}
/* スマートフォンのみチャットボタン調整 */
@media (max-width: 560px) {

  body > div[style*="position:fixed"][style*="bottom:10px"] {
    width: 120px !important;
    right: 10px !important;
    left: auto !important;

    /* 下部の固定ボタンを避ける */
    bottom: 90px !important;

    z-index: 9999 !important;
  }

  body > div[style*="position:fixed"][style*="bottom:10px"] img {
    width: 120px !important;
    height: auto !important;
  }

}
/* =====================================
   新商品 奥出雲クラフトビール
===================================== */

.craftbeer {
  background: #f5efe5;
}

.craftbeer__heading {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
}

.craftbeer__new {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 22px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  letter-spacing: .2em;
  border-radius: 999px;
}

.craftbeer__heading h2 {
  margin-bottom: 20px;
  color: var(--green);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: .06em;
}

.craftbeer__lead {
  color: var(--sub);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.9;
}

.craftbeer__grid {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: center;
}

.craftbeer__poster img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .15);
}

.craftbeer__item {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.craftbeer__item:first-child {
  padding-top: 0;
}

.craftbeer__type {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .18em;
}

.craftbeer__item h3 {
  margin-bottom: 14px;
  color: var(--green);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
}

.craftbeer__item p:last-child {
  color: var(--sub);
  line-height: 1.9;
}

.craftbeer__note {
  margin-top: 28px;
  color: var(--sub);
  font-size: 11px;
}


/* スマートフォン */
@media(max-width: 800px) {

  .craftbeer__grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .craftbeer__heading {
    margin-bottom: 40px;
  }

}
/* ==============================
   ゆるキャラグッズ
============================== */

.character-goods {
  background: #fffaf1;
}

.character-goods__heading {
  max-width: 1180px;
  margin: 0 auto 55px;
  text-align: center;
}

.character-goods__new {
  display: inline-block;
  margin: 8px 0 16px;
  padding: 6px 20px;
  border-radius: 999px;
  background: #e94d79;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
}

.character-goods__heading h2 {
  margin-bottom: 18px;
  color: var(--green);
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 400;
  line-height: 1.4;
}

.character-goods__lead {
  color: var(--sub);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.9;
}

.character-goods__grid {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 65px;
  align-items: center;
}

/* チラシ */

.character-goods__poster {
  padding: 12px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .12);
}

.character-goods__poster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
}

/* 説明 */

.character-goods__body {
  text-align: left;
}

.character-goods__body > p {
  margin-bottom: 24px;
  color: var(--sub);
  line-height: 2;
}

.character-goods__message {
  margin: 35px 0;
  padding: 28px 30px;
  border-left: 4px solid #e94d79;
  background: #fff;
}

.character-goods__message span {
  display: block;
  margin-bottom: 8px;
  color: #e94d79;
  font-size: 12px;
  letter-spacing: .14em;
}

.character-goods__message strong {
  color: var(--green);
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.7;
}

.character-goods__note {
  margin-top: 30px;
  font-size: 12px;
  color: var(--sub);
}


/* ==============================
   タブレット
============================== */

@media(max-width:980px) {

  .character-goods__grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .character-goods__poster {
    max-width: 850px;
    margin: auto;
  }

  .character-goods__body {
    max-width: 760px;
    margin: auto;
  }
}


/* ==============================
   スマートフォン
============================== */

@media(max-width:560px) {

  .character-goods__heading {
    margin-bottom: 35px;
  }

  .character-goods__heading h2 {
    font-size: 29px;
  }

  .character-goods__lead br {
    display: none;
  }

  .character-goods__grid {
    gap: 32px;
  }

  .character-goods__poster {
    padding: 6px;
    border-radius: 14px;
  }

  .character-goods__poster img {
    border-radius: 9px;
  }

  .character-goods__body > p {
    line-height: 1.9;
  }

  .character-goods__message {
    margin: 28px 0;
    padding: 22px 20px;
  }
}
/* ==============================
   休館日・重要なお知らせ
============================== */

.information-item--important {
  background: #fff8f5;
  border-left: 4px solid #a64b3c;
}

.information-item--important:hover {
  background: #fff1ec;
}

.information-category--closed {
  background: #a64b3c !important;
  color: #fff !important;
  border-color: #a64b3c !important;
}
/* =========================================
   休館日のお知らせ
========================================= */

.closed-days {
  margin: 45px 0;
  padding: 35px 40px 40px;

  background: rgba(184,149,84,.08);

  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line);

  text-align: center;
}


/* 休館日の見出し */

.closed-days__label {
  margin: 0 0 25px !important;

  color: var(--gold);

  font-size: 15px;
  letter-spacing: .18em;
}


/* 日付 */

.closed-day {
  max-width: 520px;

  margin: 12px auto;
  padding: 20px 30px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  background: #fff;

  border-radius: 14px;
  border: 1px solid var(--line);
}


/* 9月 */

.closed-day__month {
  font-size: 20px;
}


/* 日にち */

.closed-day strong {
  color: var(--green);

  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}


/* 曜日 */

.closed-day__week {
  color: var(--sub);
  font-size: 16px;
}


/* スマホ */

@media (max-width:700px) {

  .closed-days {
    margin: 35px 0;
    padding: 28px 18px;
  }

  .closed-day {
    padding: 18px 15px;
    gap: 12px;
  }

  .closed-day__month {
    font-size: 17px;
  }

  .closed-day strong {
    font-size: 36px;
  }

  .closed-day__week {
    font-size: 14px;
  }

}
/* =========================================
   サンドバス営業終了のお知らせ
========================================= */

.sandbath-closed-box {
  margin: 45px 0;
  padding: 35px 40px;

  background: rgba(184, 149, 84, .08);

  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line);

  text-align: center;
}


/* 見出し */

.sandbath-closed-box__label {
  margin: 0 0 12px !important;

  color: var(--gold);

  font-size: 15px;
  letter-spacing: .15em;
}


/* 営業終了日 */

.sandbath-closed-box__date {
  margin: 0 0 20px !important;

  color: var(--green);

  font-size: clamp(28px, 4vw, 38px);
  font-weight: 500;
}


/* 予約済みのお客様について */

.sandbath-closed-box__note {
  max-width: 650px;

  margin: 0 auto !important;

  padding-top: 18px;

  border-top: 1px solid var(--line);

  font-size: 14px;
  line-height: 1.9;
}


/* スマホ */

@media (max-width: 700px) {

  .sandbath-closed-box {
    margin: 35px 0;
    padding: 28px 20px;
  }

  .sandbath-closed-box__date {
    font-size: 28px;
  }

}