@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

/* ========== Reset / Base ========== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
img,svg{ max-width:100%; height:auto; display:inline-block; }

/* 共通変数 */
:root{
  --header-h: 72px;
  --side-gutter: 32px;          /* PCで右に残す余白 */
  --content-max:1100px;
  --news-max: 980px;            /* Newsセクション最大幅 */
  --bar-thickness: 6px;         /* タブ下線の太さ */
  --tab-w: 180px;               /* タブ幅 */
  --tab-h: 45px;                /* タブ高さ（アクティブ） */
  --tab-h-inactive: 40px;       /* タブ高さ（非アクティブ） */
  --cat-clear: 10px;            /* 猫の持ち上げ量 */
}

body{
  font-family:"M PLUS 1p",sans-serif;
  font-size:16px; color:#2A3950;
}

/* ========== Typography ========== */
h1.site-title{
  font-family:"Kiwi Maru",serif;
  font-size:64px; line-height:1.2; letter-spacing:-.05em;
  color:#F9F6F1; text-align:center; white-space:nowrap;
}
h1 ruby{ 
  ruby-position: over; 
  ruby-align: center; 
  font-size: 1em;
  line-height: 2;
}
h1 ruby rt{ 
  font-size: 0.2em; 
  line-height: 1; 
  color: #F9F6F1; 
}

.safari h1 ruby {
  line-height: 0.5;
  white-space: nowrap;
}

.safari h1 ruby rt {
  font-size: 0.2em;
  line-height: 0.2;
  margin: 2px;
  padding: 0;
}

h2{ 
  font-family:"Kiwi Maru",serif; 
  font-size:26px; 
  line-height:1.2; 
}
h2 ruby{ 
  ruby-position:over; 
  ruby-align:center; }

h2 ruby rt{ 
  font-size:.35em; 
  line-height:1; 
}

.text-light{ color:#F9F6F1; }
.icon-sm{ width:40px; }
.icon-md{ width:60px; }
.icon-bg{ width:80px; }
.logo-size{ width:200px; }
.center-text{ text-align:center; }
.center-media{ display:block; margin-inline:auto; }
.foot-left{margin-left: 30px;}
.foot-right{margin-right: 30px;}

/* ========== Key Visual ========== */
.key-visual{ position:relative; width:100%; height:100vh; overflow:hidden; z-index:0; }
.bg-video{
  position:absolute; top:50%; left:50%;
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover; object-position:50% 45%;
  z-index:-1;
}
.key-visual__content{
  position:relative; z-index:1; color:#F9F6F1; text-align:center;
  padding-top:clamp(80px,16vh,200px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,2.2vh,24px);
}

/* ========== Header ========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000; width:100%;
  --fg:#2A3950; --bg:#F9F6F1; --hover:#72869C;
  color:var(--fg); background:var(--bg);
  border-bottom:4px solid rgba(163,144,124,.25);
  transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}
.site-header .bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
  gap:24px; width:100%; padding:12px clamp(12px,4vw,40px);
}
.site-header .bar a{ color:inherit; text-decoration:none; transition:color .25s; }
.site-header .bar a:hover{ color:var(--hover); }
.site-header .bar svg{ display:block; width:40px; height:auto; color:currentColor; }
.site-header .bar svg [fill]:not([fill="none"]){ fill:currentColor; }
.site-header .bar svg [stroke]:not([stroke="none"]){ stroke:currentColor; }

.header__logo  { grid-column:1; justify-self:start; }
.header__center{ grid-column:2; justify-self:center; }
.header__right { grid-column:3; justify-self:end; display:flex; align-items:flex-end; gap:clamp(12px,2vw,28px); }

.header__logo a{ display:flex; align-items:flex-end; gap:8px; font-size:12px; white-space:nowrap; }
.header__right .nav-ico{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; line-height:1.1; color:inherit; text-decoration:none; }
.header__right .nav-ico span{ display:block; }
.header__logo a:hover, .header__right .nav-ico:hover{ color:var(--hover); }

@media (min-width:769px){
  .header__center{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; }
  .site-header .bar{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; }
  .header__center ul{
    display:flex; gap:clamp(40px,6vw,120px);
    margin:0; padding:0; list-style:none; width:max-content; white-space:nowrap;
  }
  .header__center a{ font-size:16px; }
}
@media (max-width:768px){
  .header__center{ display:none; }
  .header__right .nav-ico.nav-login,
  .header__right .nav-ico.nav-mypage,
  .header__right .nav-ico.nav-logout{ display:none !important; }
  .header__right .nav-ico.nav-menu{ display:flex; }
}
@media (min-width:769px){
  .site-header{ background:transparent !important; color:#F9F6F1 !important; border-bottom:none !important; }
  .site-header.is-light{
    background:#F9F6F1 !important; color:#2A3950 !important;
    border-bottom:4px solid rgba(163,144,124,.25) !important;
  }
}

/* ========== Layout / Sections ========== */
.container{ width:min(1100px, calc(100% - 32px)); margin-inline:auto; }
.section{ padding-block:56px; }
.section__heading{ text-align:center; margin: 60px 0 20px; font-family:"Kiwi Maru",serif; }
.section__body{ max-width:68ch; margin:0 auto; text-align:left; }
.section__body>*+*{ margin-top:1em; }
.map-frame{ width:100%; height:300px; border:none; }

/* ====== Buttons（共通）====== */
.btn {
  display: flex;
  align-items: center;          /* 縦中央 */
  justify-content: center;      /* 横中央 */
  width: 260px;                 /* 幅を固定 */
  height: 60px;                 /* 高さも固定 */
  padding: 0 32px;              /* 上下0・左右のみ確保 */
  font-size: 16px;
  line-height: 1;               /* ベースラインの影響を消す */
  text-align: center;

  color: #2A3950;
  background: #F9F6F1;
  border: 1px solid #2A3950;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: .3s;

  margin: 28px auto;            /* デフォルトはSP中央 */
}

.btn:hover {
  background: #72869C;
  color: #F9F6F1;
  border-color: #72869C;
}

/* ====== PC時（右端32pxに揃える）====== */
@media (min-width: 769px) {
  .btn {
    margin: 24px 64px 0 auto;   /* 右端から64pxで固定 */
  }
}

.btn:hover{ background:#72869C; color:#F9F6F1; border-color:#72869C; }

/* PCは右端32pxガターを残して右寄せ */
@media (min-width:769px){
  .btn{
    margin:24px var(--side-gutter,32px) 0 auto;
  }
}
.btn:hover{ background:#72869C; color:#F9F6F1; border-color:#72869C; }

/* --- ミニカテゴリ用チップ --- */
.btn-sm{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:60px; height:28px; padding:0 10px;
  font-size:14px; line-height:1; color:#2A3950;
  background:#F9F6F1; border:1px solid #2A3950; border-radius:8px;
  text-decoration:none; white-space:nowrap; flex:0 0 auto;
}
.btn-sm:hover{ background:#72869C; color:#F9F6F1; border-color:#72869C; }

/* ========== About ========== */
.section--intro{ position:relative; z-index:1; background:#fff; padding-top:clamp(48px,8vh,140px); }
@media (min-width:769px){ .section--intro{ padding-top:clamp(72px,10vh,180px); } }

.kumohachi-sleeping{
  position:absolute; left:clamp(16px,3vw,40px); top:-120px;
  width:clamp(160px,22vw,256px); height:auto; z-index:3; pointer-events:none;
}
@media (min-width:769px){ .kumohachi-sleeping{ top:-140px; } }

.about{ display:grid; grid-template-columns:1fr; gap:clamp(16px,4vw,28px); align-items:start; }
@media (min-width:769px){
  .about{
    grid-template-columns:44% 1fr;
    grid-template-areas:"visual lead" "visual text" "visual cat";
    column-gap:clamp(24px,4vw,56px);
  }
  .about__visual{ grid-area:visual; }
  .about__lead{ grid-area:lead; text-align:center; }
  .about__text{ grid-area:text; }
  .about__cat{ grid-area:cat; }
}

.exterior-visual{ display:block; width:100%; height:auto; object-fit:cover; }
@media (min-width:769px){
  .exterior-visual{
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover;
    mask-image:linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-repeat:no-repeat; mask-size:cover; mask-position:center;
  }
    .about__lead,
  .about__text,
  .about__cat{
    padding-right: clamp(24px, 6vw, 80px); /* ←好みで増減 */
    box-sizing: border-box;                 /* 横幅をはみ出さない */
  }
  
}

/* ========== BR制御 ========== */
br.sp-only{ display:none; }
@media (max-width:768px){ br.sp-only{ display:inline; } }
.sp-only{ display:inline; }
.pc-only{ display:none; }
@media (min-width:769px){ .sp-only{ display:none !important; } .pc-only{ display:block; } }

.section-text{ margin-left:30px; list-style:none; }

/* ===============================
   Intro / About セクション（Figma寄せ）
   - SP: 1カラム（縦並び）
   - PC: 左=建物 / 右=見出し→本文→看板猫（2カラム）
   - 茶帯はPCのみ、要素より奥へ
   =============================== */

/* セクション土台：帯を奥に敷くための土台 */
.section--intro{
  position: relative;
  overflow: visible;
}

/* コンテンツ本体 */
.about{
  /* SPデフォルトは縦並び（干渉を避けるため block 指定） */
  display: block;
  position: relative; /* 帯の擬似要素の基準 */
  z-index: 1;         /* 帯より前面 */
}

/* ===== PC専用：帯（ブラウン）を .about の“奥”に全幅で敷く ===== */
@media (min-width: 769px){
  .section--intro .about::before{
    content:"";
    position:absolute;
    /* 画面いっぱいに広げる（センター基準で左右いっぱい） */
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    top: 45%;                 /* 帯の開始位置（好みで調整） */
    height: 500px;            /* 帯の高さ（好みで調整） */
    background:#A3907C;
    z-index: -1;              /* 常に奥 */
    pointer-events:none;
  }
}

/* ===== PCレイアウト：2カラム化 ===== */
@media (min-width: 769px){
  .about{
    display: grid;
    grid-template-columns: 44% 1fr;
    grid-template-areas:
      "visual lead"
      "visual text"
      "visual cat";
    column-gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }
  .about__visual{ grid-area: visual; }
  .about__lead  { grid-area: lead;   }
  .about__text  { grid-area: text;   }
  .about__cat   { grid-area: cat;    }
}

/* ===== 左：建物ビジュアル ===== */
.about__visual{ position: relative; z-index: 1; }
.about__visual .exterior-visual{
  display:block; width:100%; height:auto; object-fit:cover;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  /* サイドのフェード（必要なければ削除OK） */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover;
          mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-repeat:no-repeat; mask-size:cover;
}

/* ===== 右：見出しブロック（中央寄せ） ===== */
.about__lead{
  text-align:center;
  padding-top:8px;
}
.about__lead .section__heading{ margin: 40px 0 40px; }
.about__lead .center-media{ width:28px; height:auto; margin:6px auto 14px; }

/* ===== 本文（白地の上をキープ） ===== */
.about__text{
  position:relative; z-index:1; color:#2A3950;
}
.about__text > p{ margin:0 0 1em; }

/* ===== 看板猫（Figma通り・PCのみ表示） ===== */
@media (max-width:768px){
  .about__cat{ display:none; }   /* SPでは非表示 */
}
@media (min-width:769px){
    .about__cat{
    display: grid;
    grid-template-columns: 220px 1fr;   /* 左=画像 右=テキスト */
    grid-template-rows: auto auto;      /* 1行目=見出し, 2行目=本文 */
    grid-template-areas:
      "title title"
      "img   text";
    gap: 24px;
    align-items: start;

    max-width: 68ch;
    margin: 0 auto;
    padding: 40px 0;
    color: #F9F6F1;
  }

  /* 見出し */
  .about__cat h2{
    grid-area: title;
    margin: 0 0 16px;
    text-align: center;
    font-family: "Kiwi Maru", serif;
    font-size: 24px;
    font-weight: 500;
  }

  /* 画像 */
  .about__cat .cat_kuu{
    grid-area: img;
    width: 120px;
    height: auto;
    justify-self: left;
  }

  /* 説明文（右カラムに全部流し込む） */
  .about__cat .profile{
    grid-area: text;
    display: flex;
    flex-direction: column;  /* 段落を縦積み */
    gap: 0.8em;              /* 段落間の余白 */
    line-height: 1.8;
  }

  .about__cat .profile p{
    margin: 0;
  }
}

/* ===== SP最終調整（念のため） ===== */
@media (max-width:768px){
  /* SPは縦並びに固定（他の指定を打ち消し） */
  .about{ display:block; }

/* “もっとみる”ボタンを中央固定に（既存ボタンCSSを尊重） */
  .about__nore .btn{ 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 260px !important;
    height: 60px !important;
    margin: 28px auto !important; 
    padding: 0 32px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
}

/* ====== News（PCタブ＋リスト＋下線）====== */
.news-section{ --side-gutter: 32px; --cat-clear: 10px; }

/* 見出し下の余白 */
.news-section .section__heading{ margin-bottom: 60px; }

/* リスト幅＆左寄せ */
.news-section .section-text{ margin-left:0; }
.news-section .news-list{
  list-style:none; padding:0; margin:18px auto 20px;
  width:min(var(--news-max), calc(100% - 2*var(--side-gutter)));
}
.news-section .news-list{
  list-style:none;
  padding:0;
  margin:18px auto 20px;
  width:min(var(--news-max), calc(100% - 2*var(--side-gutter)));
}
.news-section .news-list li a{
  display:flex;
  align-items:baseline;
  gap:12px;
  width:100%;
  padding:12px 0;              /* ← 左右0（上下だけ） */
  box-sizing:border-box;
  text-decoration:none;
  color:inherit;
  transition:background .25s ease, color .25s ease;
}

.news-section .btn-sm{ margin:0; }
.news-section .news-date{ margin-left:auto; color:#666; font-size:14px; }
@media (max-width:768px){ .news-section .news-date{ display:none; } }

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list li a {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: background .25s ease, color .25s ease;
}

.news-list li a:hover {
  color: #72869C;
}
/* タイトルは可変、日時は常に右端へ */
.news-section .news-title{ flex:1 1 auto; }
.news-section .news-date{ margin-left:auto; text-align:right; }

/* SPは日時を消す仕様のまま */
@media (max-width:768px){
  .news-section .news-date{ display:none; }
}
/* ページネーション：文字リンクのみ */
.news-section .pagination{
  width:min(var(--news-max), calc(100% - 2*var(--side-gutter)));
  margin:4px auto 0; text-align:center;
}
.news-section .pagination a{ text-decoration:none; color:#2A3950; margin:0 8px; }
.news-section .pagination a:hover{ text-decoration:underline; }
.news-section .pagination a[aria-current="page"]{ font-weight:700; text-decoration:underline; }

/* ---- PC タブ ---- */
.news-section .news-tabs{ display:none; }

@media (min-width:769px){
  .news-section .news-tabs{
    position:relative; isolation:isolate; z-index:0;
    display:flex; align-items:flex-end; justify-content:center; gap:10px;
    width:min(var(--news-max), calc(100% - 2*var(--side-gutter)));
    margin:0 auto 16px; padding:0 30px;
  }
  /* 下線＝前面 */
  .news-section .news-tabs::before{
    content:""; position:absolute; left:8px; right:8px; bottom:0;
    height:var(--bar-thickness); background:#2A3950; border-radius:999px; z-index:2;
  }
  /* タブ本体＝背面（線の下に潜る） */
  .news-section .news-tabs .tab{
    width:var(--tab-w); height:var(--tab-h-inactive);
    padding:0 18px; display:flex; align-items:center; justify-content:center;
    border-radius:12px 12px 0 0; background:#72869C; color:#fff; border:none;
    position:relative; z-index:1; cursor:pointer; transition:background .25s, height .25s;
  }
  .news-section .news-tabs .tab:hover{ background:#60768D; }
  .news-section .news-tabs .tab.active{ background:#2A3950; height:var(--tab-h); }

  /* 猫（いちばん上） */
  .news-section .news-tabs .tab-cat{
    position:absolute; top:calc(-1 * (32px + var(--cat-clear)));
    width:32px; height:auto; left:0; transform:translateX(-80%);
    pointer-events:none; z-index:3; transition:left .25s ease;
  }
}

/* ========== SP見出し下の猫 ========== */
/* ==== SPニュース猫（見出し下用） ==== */
img.news-cat-sp {
  display: none; /* PCでは非表示 */
}

@media (max-width: 768px) {
  img.news-cat-sp {
    display: block !important;
    width: 40px !important;       /* 強制で40px */
    height: auto !important;
    max-width: none !important;   /* 共通の max-width:100% を打ち消す */
    margin: 20px auto 55px !important; /* 中央寄せ */
  }
}
  /* タブ上の猫はSPでは消す（被り防止） */
@media(max-width:768px){
  .news-tabs .tab-cat{ display:none !important; }
}
/* ==== Newsリスト（幅と余白を保つ） ==== */
.news-section .news-list {
  list-style: none;
  padding: 0;
  margin: 18px auto 20px;
  width: min(var(--news-max), calc(100% - 2 * var(--side-gutter)));
}

/* ===============================
   施設案内：カルーセル（置き換え用）
   =============================== */
.facility-section { position: relative; }
.facility-section .section__heading{
  margin: 10px 0 28px;          /* h2 下の余白を少し広げる */
}

.facility-carousel{
  position: relative;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  overflow: hidden;             /* 両脇は“チラ見せ” */
  padding: 8px 56px;            /* 矢印ぶんの余白 */
  overflow-x: hidden;
  overflow-y: visible;
}

/* トラック（横並び） */
.facility-track{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  will-change: transform;
  transition: transform .35s ease;
  list-style: none;
  margin: 0;
  padding: 16px 0 32px;         /* 下の余白もやや広め */
}

/* カード（幅は一定。拡大は内側の figure で表現） */
.facility-card{
  --side: 200px;                /* SP 基準サイズ（両脇） */
  --center: 200px;              /* SP は拡大しない */
  flex: 0 0 auto;
  width: var(--side);
  min-height: 500px;
  color: #2A3950;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PCでサイズアップ（中央だけ体感 400） */
@media (min-width: 769px){
  .facility-card{ --side: 300px; --center: 380px; }
}

/* カード全体をリンク化しても崩れないように */
.facility-card a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;                    /* h3 / img / p の間隔を広めに */
  text-decoration: none;        /* 青下線を抑制 */
  color: inherit;
}

/* 見出し（中央以外は非表示） */
.facility-card .title{
  font-size: 20px;
  line-height: 1.3;
  margin: 6px 0 2px;
  display: none;
}

/* 画像は常に“正方形”。拡大は figure に付与 */
.facility-card figure{
  width: 100%;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  margin: 0;
}
.facility-card img{
  width: 100%;
  aspect-ratio: 1 / 1;          /* ← 正方形保証 */
  height: auto !important;      /* 旧 height 指定を無効化 */
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* 説明文（中央以外は非表示） */
.facility-card .caption{
  margin: 0;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.85;
  text-align: left;
  max-width: 40ch;
  display: none;
}

/* ===== 中央カードだけ“見かけ拡大”＋テキスト表示 ===== */
.facility-card.is-center{ z-index: 2; }
.facility-card.is-center figure{
  transform: scale(calc(var(--center) / var(--side)));
}
.facility-card.is-center .title,
.facility-card.is-center .caption{
  display: block;
}

/* ===== ナビ矢印 ===== */
.fc-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 2px solid #2A3950;
  background: #F9F6F1;
  cursor: pointer;
  z-index: 10;

  /* 中のテキスト（‹ ›）は使わない */
  font-size: 0; line-height: 0; padding: 0;
}
.fc-nav.prev{ left: clamp(8px, 2.5vw, 28px); }
.fc-nav.next{ right: clamp(8px, 2.5vw, 28px); }

/* ど真ん中に描く矢印（基本：＞） */
.fc-nav::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.fc-nav.prev::before{
  transform: translate(-50%, -50%) rotate(135deg);  /* ＜ */
}
.fc-nav:hover{
  background: #72869C; color:#F9F6F1; border-color:#72869C;
}
@media (max-width: 768px){
  .fc-nav{ width: 48px; height: 48px; }
  .fc-nav::before{ width: 18px; height: 18px; }
}
.facility-card img{
  width: 100%;
  aspect-ratio: 1 / 1;          /* ← 正方形固定 */
  height: auto !important;      /* 既存の height 指定を無効化 */
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.facility-card .title,
.facility-card .caption{ display: none; }

.facility-card.is-center .title,
.facility-card.is-center .caption{ display: block; }

.facility-section .section__heading{ margin: 12px 0 30px; }
.facility-card a{ gap: 14px; text-decoration:none; color:inherit; }
.facility-card .caption{ margin-top: 6px; line-height: 1.85; max-width: 40ch; }

/* ===============================
   施設案内：カルーセル（置き換え用）
   =============================== */

/* 見出しまわり */
.facility-section { position: relative; }
.facility-section .section__heading{ margin: 12px 0 30px; }

/* 外枠（左右に少し余白＝矢印用 / 上下ははみ出し許容） */
.facility-carousel{
  position: relative;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 8px 56px;                 /* 矢印分 */
  overflow-x: hidden;
  overflow-y: visible;               /* 拡大時に切れない */
}

/* トラック */
.facility-track{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 16px 0 32px;
  will-change: transform;
  transition: transform .35s ease;
}

/* カード（レイアウト幅は “side”。拡大は内側の figure だけ） */
.facility-card{
  --side: 200px;                     /* SP：両脇サイズ */
  --center: 200px;                   /* SP：中央も同じ（拡大しない） */
  flex: 0 0 auto;
  width: var(--side);
  min-height: 500px;                 /* PCで説明が切れない保険（必要に応じて調整） */
  color: #2A3950;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PCでサイズアップ（中央体感 ~380px） */
@media (min-width: 769px){
  .facility-card{ --side: 300px; --center: 380px; }
}

/* カード全体をリンク化しても崩れない */
.facility-card a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;                         /* h3 / img / p の間隔 */
  text-decoration: none;
  color: inherit;
}

/* タイトル・説明：デフォルト非表示（display は使わない） */
.facility-card .title,
.facility-card .caption{
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

/* タイトル体裁／説明体裁 */
.facility-card .title{
  font-size: 20px;
  line-height: 1.3;
  margin: 6px 0 2px;
}
.facility-card .caption{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.85;
  text-align: left;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* 画像は常に“正方形”。拡大は figure に付ける */
.facility-card figure{
  width: 100%;
  margin: 0;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
.facility-card img{
  width: 100%;
  aspect-ratio: 1 / 1;               /* 正方形保証 */
  height: auto;                       /* 念のため */
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* ===== 中央カードだけ見せ方を変える ===== */
.facility-card.is-center{ z-index: 2; }
.facility-card.is-center figure{
  transform: scale(calc(var(--center) / var(--side)));
}
.facility-card.is-center .title,
.facility-card.is-center .caption{
  opacity: 1;
  visibility: visible;
}

/* ===== ナビ矢印 ===== */
.fc-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 2px solid #2A3950;
  background: #F9F6F1;
  cursor: pointer;
  z-index: 10;
  font-size: 0; line-height: 0; padding: 0;   /* 中のテキスト無効化 */
}
.fc-nav.prev{ left: clamp(8px, 2.5vw, 28px); }
.fc-nav.next{ right: clamp(8px, 2.5vw, 28px); }

/* ど真ん中の矢印（基本は ＞） */
.fc-nav::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.fc-nav.prev::before{ transform: translate(-50%, -50%) rotate(135deg); } /* ＜ */

.fc-nav:hover{ background:#72869C; color:#F9F6F1; border-color:#72869C; }

@media (max-width: 768px){
  .fc-nav{ width: 48px; height: 48px; }
  .fc-nav::before{ width: 18px; height: 18px; }
}

/* 造形教室：ベース */
.class-section { margin: 40px auto; text-align: center; }

.class-wrapper{
  display: flex;                 /* SP: 縦並び → column */
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.class-photo{
  width: clamp(280px, 38vw, 520px);
  border-radius: 20px;
  overflow: hidden;
}
.class-photo img{
  display:block; width:100%; height:auto; border-radius:inherit; object-fit:cover;
}

.class-content{
  display:flex; flex-direction:column; gap:20px; align-items:flex-start; text-align:left; width:100%;
}
.class-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.class-list a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#2A3950; }
.class-list a:hover{ color:#72869C; }
.class-list .icon{ width:28px; height:28px; flex-shrink:0; }

/* ※ ボタン専用CSSは書かない（既存の .btn をそのまま利用） */

/* PC：2カラム化だけ（ボタンは触らない） */
@media (min-width:769px){
  .class-wrapper{
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 72px);
    max-width: 1100px;
    margin: 0 auto;
  }
  .class-photo{   flex: 0 0 520px; }   /* 左は最大520pxで固定感 */
  .class-content{ flex: 1 1 auto;   }  /* 右は余り幅いっぱい */
}

/* wrapperの外に出したボタン列：並べ方だけ（見た目は .btn 既存） */
.class-buttons{ 
  display: flex; 
  flex-direction: column; 
  gap: 12px;
}

/* 共通 */
.pc-only { display: none; }
.sp-only { display: block; }

/* PC幅のとき */
@media (min-width: 769px) {
  .pc-only { display: block; }
  .sp-only { display: none; }
}
/* ===============================
   喫茶室（SP=縦並び / PC=左:写真 + 右:本文）
   =============================== */

/* 土台 */
.cafe-section{
  padding: 60px 0 40px;
}
.cafe-section .cafe-inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* 見出し・ロゴ・テキスト（既存クラスを尊重して軽めに） */
.cafe-section .section__heading{ margin: 8px 0 6px; }
.cafe-section .logo-size{ width: 200px; }
.cafe-section .center-text{ margin: 4px 0; line-height: 1.8; }

/* PCで左に置く写真（SPは .pc-only で非表示） */
.cafe-section .cafe-photo figure{ margin: 0; }
.cafe-section .cafe-photo img{
  display: block;
  width: min(560px, 100%);
  height: auto;
  border-radius: 20px;
  object-fit: cover;
}

/* 「今月のおすすめ」カード */
.cafe-section .cafe-card{
  background: #F9F6F1;
  border: 6px solid #A3907C;          /* Figmaの枠イメージ */
  border-radius: 16px;
  padding: 16px 16px 18px;
  width: min(460px, 100%);
  color: #2A3950;
}
.cafe-section .cafe-card .cafe-card__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

/* おすすめリスト：SP=1列 / PC=2列 */
.cafe-section .cafe-items{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;          /* SP */
  gap: 14px 16px;
}
.cafe-section .cafe-items li{
  display: grid;
  grid-template-columns: 90px 1fr;     /* 画像+テキスト */
  align-items: center;
  gap: 12px;
}
.cafe-section .cafe-items img{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.cafe-section .cafe-items p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* ボタン配置：SPは中央（既存.btnのまま）/ PCは右寄せ */
.cafe-section .cafe-btnwrap{
  width: 100%;
  display: flex;
  justify-content: center;             /* SP中央 */
}

/* ============ PC レイアウト ============ */
@media (min-width: 769px){
  /* 左：写真 / 右：本文 の2カラム */
  .cafe-section .cafe-inner{
    display: grid;
    grid-template-columns: minmax(440px, 560px) 1fr;  /* 左=写真 */
    align-items: start;
    column-gap: clamp(40px, 6vw, 72px);
  }

  /* 右カラムの中身を上→下に積む */
  .cafe-section .cafe-body{
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 14px;
    text-align: left;                  /* PCは左揃え */
  }

  /* カードは右カラム内で適度に幅固定 */
  .cafe-section .cafe-card{ width: 420px; }

  /* おすすめ：PCは2列グリッド */
  .cafe-section .cafe-items{
    grid-template-columns: 1fr 1fr;    /* 2列 */
  }
  .cafe-section .cafe-items li{
    grid-template-columns: 84px 1fr;
  }
  .cafe-section .cafe-items img{
    width: 84px; height: 84px;
  }

  /* ボタンは全体の右端ガターに揃える（既存 .btn を尊重） */
  .cafe-section .cafe-btnwrap{
    grid-column: 1 / -1;               /* 2カラムの下段いっぱいに配置 */
    justify-content: flex-end;         /* 右寄せ */
    padding-right: var(--side-gutter, 32px);
  }
}
/* 喫茶室 */
.cafe-section{ padding:60px 0 40px; }
.cafe-inner{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:center;
}

/* 写真（SPは .pc-only で非表示） */
.cafe-photo figure{ margin:0; }
.cafe-photo img{
  display:block; width:min(560px,100%); height:auto;
  border-radius:20px; object-fit:cover;
}

/* 本文側の並び */
.cafe-body{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.cafe-card{
  background:#F9F6F1; border:6px solid #A3907C; border-radius:16px;
  padding:16px 16px 18px; width:min(460px,100%); color:#2A3950;
}
.cafe-card__title{ margin:0 0 10px; font-size:18px; font-weight:600; text-align:left; }
.cafe-items{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:14px 16px;
}
.cafe-items li{
  display:grid; grid-template-columns:90px 1fr; align-items:center; gap:12px;
}
.cafe-items img{ width:90px; height:90px; object-fit:cover; border-radius:12px; display:block; }
.cafe-items p{ margin:0; font-size:14px; line-height:1.5; }

/* ボタンはSP中央（既存.btnそのまま） */
.cafe-btnwrap{ width:100%; display:flex; justify-content:center; }

/* PC：写真左・本文右の2カラム、ボタンは右端ガターに揃える */
@media (min-width:769px){
  .cafe-inner{
    display:grid;
    grid-template-columns:minmax(440px,560px) 1fr;
    column-gap:clamp(40px,6vw,72px);
    align-items:start;
  }
  .cafe-body{ align-items:flex-start; text-align:left; }
  .cafe-card{ width:420px; }
  .cafe-items{ grid-template-columns:1fr 1fr; }
  .cafe-items li{ grid-template-columns:84px 1fr; }
  .cafe-items img{ width:84px; height:84px; }

  .cafe-btnwrap{
    grid-column:1 / -1;                 /* 2カラムの下段いっぱい */
    justify-content:flex-end;           /* 右寄せ */
    padding-right:var(--side-gutter,32px);
  }
}
/* ===== 交通手段（共通）====== */
#access,
#accsess {                     /* ←どちらのIDでも効くように */
  --maxw: 1100px;
  --gap : clamp(16px, 3vw, 40px);
  width: min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) 0;
  text-align: center;
}

#access .access-wrapper,
#accsess .access-wrapper{
  display: grid;
  grid-template-columns: 1fr;       /* SP: 縦並び */
  gap: var(--gap);
  align-items: start;
}

/* 地図のアスペクト比を画面幅ベースで可変に */
#access .map-frame,
#accsess .map-frame{
  width: 100% !important;
  height: clamp(240px, 42vw, 520px) !important; /* ← 画面幅に連動 */
  border: 0;
  border-radius: 12px;
}

/* 説明テキスト */
#access .access-text,
#accsess .access-text{
  text-align: left;
  line-height: 1.8;
  margin-inline: auto;
  max-width: 68ch;
}

/* PC：地図↔テキストを横並びに */
@media (min-width: 769px){
  #access .access-wrapper,
  #accsess .access-wrapper{
    grid-template-columns: 1.2fr 1fr;   /* 左=地図 大きめ / 右=説明 */
    align-items: center;
  }
  #access .access-text,
  #accsess .access-text{
    text-align: left;
    justify-self: start;
  }
}
/* ===============================
   お問い合わせ
   =============================== */
.contact-section{
  position: relative;
  padding: 56px 0;
}

.contact-deco{
  margin: 0;
}
.contact-deco img{
  display:block;
  width:80px; height:auto;
  margin-left: clamp(16px, 3vw, 30px);
}

.contact-inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  text-align: center;
}

.contact-lead{
  margin: 12px 0 8px;
}

.contact-buttons{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;   /* 常に中央寄せ */
}



footer {
  background: #f9f6f1;   /* 背景色（仮） */
  padding: 40px 20px;
  text-align: center;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-inner img {
  display: block;
  margin: 0 auto;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}

.footer-languages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.footer-languages a {
  text-decoration: none;
  color: #2A3950;
}

.footer-languages a:hover {
  color: #72869C;
}

@media (min-width: 769px) {
  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
  }

  .footer-nav ul {
    justify-content: flex-start;
    list-style: none;
  }

  .footer-languages {
    justify-content: flex-end;
  }

  footer p.center-text {
    flex: 1 1 100%;
    text-align: center;
    margin-top: 20px;
  }
}