@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-color: #f9f6f2; /* 背景色は必要に応じて変更 */
  color: #333333
}

.main_container {
  width: 1080px;     /* 画像に合わせた幅 */
  margin: 0 auto;	/* 中央寄せ */
  text-align: center;
  background-color: #ffffff; /* 背景色は必要に応じて変更 */
}

.main_container img {
  width: 100%;
  height: auto;   /* 縦横比を保つ */
  display: block; /* 画像の下に余白が出ないようにする */
}

/* ベージュの背景設定 */
.beckground-bage {
  background-color: #f9f6f2;
  display: block;
}

/* 視覚的に（スクリーンリーダーには読み上げ） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; /* 折り返し防止 */
  border: 0;
}

/* キーボード操作でフォーカス時のみ表示（任意） */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* =========================
   Header (PC Only) — Customizable
   変更しやすい値は :root の変数で調整できます
   ========================= */
:root{
  /* --- ロゴ調整 --- */
  --logo-w: 350px;           /* ロゴの横幅：変更OK */
  --logo-h: 70px;            /* ロゴの縦幅：変更OK */
  --logo-pad: 20px;          /* ロゴの上下左右余白：変更OK */

  /* --- 配色 --- */
  --header-bg: #fff;
  --text: #111;
  --menu-color: #916e41;     /* メニュー通常色（茶） */
  --menu-hover: #4aaa4c;     /* メニューホバー時の緑 */

  /* --- レイアウト --- */
  --container-w: 1080px;     /* ヘッダーのコンテンツ幅：LP基準 */

  /* --- ドロップダウン（店舗紹介） --- */
  --submenu-bg: #4aaa4c;     /* 背景：緑 */
  --submenu-color: #fff;     /* 文字色：白 */
  --submenu-radius: 10px;    /* 角丸：自由に変更してください */
  --submenu-xpad: 10px;      /* 項目の左右余白：自由に変更OK */
  --submenu-ypad: 6px;       /* 項目の上下余白：自由に変更OK */
  --submenu-minw: 140px;     /* パネルの最小幅：狭め（自由に変更OK） */
}

.site-header{
  /* 上部固定にしたい場合は position:sticky を継続 */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  /* ← ヘッダー囲いのボーダーは無し（指定しない） */
  box-shadow: 0 3px 8px rgba(0,0,0,0.30); /* ← 下部に影を追加 */
}

.site-header .container{
  width: var(--container-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* ヘッダー全体の高さはロゴの余白で決まるため固定しない */
}

/* 左：ロゴ */
.header-left{ display: flex; align-items: center; }
.header-logo{
  display: block;
  line-height: 0;
  padding: var(--logo-pad) 0 var(--logo-pad)  15px;  /* 上下左右の余白 */
}
.header-logo img{
  width: var(--logo-w);
  height: var(--logo-h);
  display: block;
  object-fit: contain;       /* ロゴ比率保持／足りない分は余白で */
}

/* 右：ナビ＋CTA */
.header-right{ display: flex; align-items: center; gap: 28px; }

/* ===== グローバルナビ ===== */
.gnav{
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0; padding: 0;
}
.gnav > li{ position: relative; }
.gnav > li > a{
  display: inline-block;
  padding: 10px 4px;
  color: var(--menu-color);           /* 茶 #916e41 */
  text-decoration: none;
  font-weight:bold;
  letter-spacing: .02em;
  line-height: 1;
}
/* ホバー時：緑＆下線 */
.gnav > li > a:hover{
  color: var(--menu-hover);           /* 緑 #4aaa4c */
  text-decoration: underline;         /* 下線を表示 */
  text-underline-offset: 3px;         /* 下線を少し離す（好みで） */
}

/* ===== CTAボタン ===== */
.header-cta{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--menu-hover);
  color: #fff;
  text-decoration: none;
  font-weight:bold;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  margin-right: 15px;
}
.header-cta:hover{ filter: brightness(0.95); }

/* ===== 店舗紹介のドロップダウン（テキストのみ） ===== */
.gnav > li.has-sub > a{
  display: inline-flex; align-items: center; gap: 6px;
}
/* ▼マーク（必要なら残す） */
.gnav > li.has-sub > a::after{
  content: "▾";
  font-size: 12px; line-height: 1;
  transform: translateY(1px);
  color: currentColor; /* リンク色と揃える */
}

.submenu{
  position: absolute;
  top: 100%; left: 0;
  margin-top: 6px;                /* ヘッダーからの距離（調整可） */
  min-width: var(--submenu-minw); /* 横幅を狭めに：自由に変更OK */
  background: var(--submenu-bg);  /* 背景：緑 */
  color: var(--submenu-color);    /* 文字：白 */
  border: none;                   /* 囲いボーダー無し */
  border-radius: var(--submenu-radius); /* 角丸：自由に変更OK */
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  padding: 6px 0;                 /* パネルの上下余白（狭め） */
  display: none; z-index: 120;
}

.submenu ul{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;     /* 店舗が増えたら 2列に可変OK */
}
.submenu li a{
  display: block;
  padding: var(--submenu-ypad) var(--submenu-xpad); /* 余白：自由に調整OK */
  color: var(--submenu-color);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
}
.submenu li a:hover{
  background: rgba(255,255,255,.15); /* うっすら反転 */
}

/* マウス＆キーボードで開く */
.gnav > li.has-sub:hover .submenu,
.gnav > li.has-sub:focus-within .submenu{
  display: block;
}

/* アクセシビリティ：フォーカス可視 */
a:focus-visible{
  outline: 3px solid rgba(74,170,76,.3);
  outline-offset: 2px;
}

/* PCのみ想定（スマホは別CSSで制御） */
.header-menu-toggle{ display: none; }


/* =========================
   CTA Monitor Button (PC)
   ========================= */
#cta-monitor .cta-monitor-container{
  width:1080px;       /* PC基準幅 */
  margin: 0; 
  padding: 110px 25px 120px 25px;    /* 上110px 下120px 左右余白 27px */
  box-sizing: border-box;
  text-align: center;
}

.cta-monitor-link{
  display:inline-block;
  text-decoration:none;
}

.cta-monitor-img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
   CTA：画像ボタンのベース
   ========================= */
.rb-cta{
  display:inline-block;
  position:relative;
  overflow:hidden;          /* シマーのはみ出し隠す */
  transform-origin:center;
  isolation:isolate;        /* シマーのブレンド安定 */
  will-change: transform;   /* 連続アニメをGPU最適化 */

  /* シマー調整（必要なら数値だけ変える） */
  --rb-sheen-speed: 5.2s;     /* 光の速さ（遅め） */
  --rb-sheen-intensity: .7;   /* 明るさ */
  --rb-sheen-width-1: 7%;     /* 光の太さ（細） */
  --rb-sheen-width-2: 14%;    /* 光の太さ（太） */
}

.rb-cta-img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none; /* 画像上でもリンククリック可 */
}

/* クリック感（任意） */
.rb-cta:active{ transform: scale(.995); }

/* =========================
   Diamond Shake (1.5s) + Pause (0.2s)
   ========================= */
.rb-anim--shake-burst {
  animation: rbShakeDiamond 1.7s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes rbShakeDiamond {
  /* 0〜88.2% (1.5s) 揺れ, 88.2〜100% (0.2s) 停止 */
  0%    { transform: translateX(0) skewX(0deg) scale(1,1); }
  6%    { transform: translateX(-3px) skewX(-3deg) scale(1.02,0.98); }
  12%   { transform: translateX(3px)  skewX(3deg)  scale(0.98,1.02); }
  18%   { transform: translateX(-3px) skewX(-2deg) scale(1.015,0.985); }
  24%   { transform: translateX(2px)  skewX(2deg)  scale(0.985,1.015); }
  30%   { transform: translateX(-2px) skewX(-2deg) scale(1.01,0.99); }
  40%   { transform: translateX(2px)  skewX(2deg)  scale(0.99,1.01); }
  50%   { transform: translateX(-2px) skewX(-1.5deg) scale(1.005,0.995); }
  60%   { transform: translateX(1px)  skewX(1.5deg)  scale(0.995,1.005); }
  70%   { transform: translateX(-1px) skewX(-1deg)   scale(1,1); }
  80%   { transform: translateX(0.5px) skewX(0.5deg) scale(1,1); }
  88.2% { transform: translateX(0) skewX(0deg) scale(1,1); }  /* 1.5s終了 */
  100%  { transform: translateX(0) skewX(0deg) scale(1,1); }  /* 停止0.2s */
}

/* =========================
   Diagonal Sheen（斜めに光る）
   方向はクラスで選択：rb-shine-ltr / rb-shine-rtl
   ========================= */

/* 左上 → 右下 */
.rb-shine-ltr::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,var(--rb-sheen-intensity)) var(--rb-sheen-width-1),
    rgba(255,255,255,0) var(--rb-sheen-width-2)
  );
  mix-blend-mode: screen;
  transform: translate(-120%, -120%);
  animation: rbSheenDiagLTR var(--rb-sheen-speed) ease-in-out infinite;
  z-index:1;
}
@keyframes rbSheenDiagLTR{
  0%   { transform: translate(-120%, -120%); }
  50%  { transform: translate(120%, 120%); }
  100% { transform: translate(120%, 120%); }
}


/* 右上 → 左下 */
.rb-shine-rtl::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background: linear-gradient(
    225deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,var(--rb-sheen-intensity)) var(--rb-sheen-width-1),
    rgba(255,255,255,0) var(--rb-sheen-width-2)
  );
  mix-blend-mode: screen;
  transform: translate(120%, -120%);
  animation: rbSheenDiagRTL var(--rb-sheen-speed) ease-in-out infinite;
  z-index:1;
}
@keyframes rbSheenDiagRTL{
  0%   { transform: translate(120%, -120%); }
  50%  { transform: translate(-120%, 120%); }
  100% { transform: translate(-120%, 120%); }
}

/* =========================
   店舗情報セクション
   ========================= */
.store-info {
  width: 100%;
  height: 270px;  /* 背景の高さ */
  background: url("../images/lptenpo01_relaxbody.webp") no-repeat center/cover;
  position: relative;  /* 子要素の絶対配置の基準 */
  text-align: center;
}

/* タイトル文字 */
.store-title {
  text-align: center;
  top: 12px;                 /* ★上下位置をpx単位で調整 */ 
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 5.5rem;         /* 大きめ */
  color: #4aaa4c;            /* 緑色 */
  font-weight: 600;
  margin: 0;
}

.stuff-info {
  width: 100%;
  height: 270px;  /* 背景の高さ */
  background: url("../images/lptenpo01_relaxbody.webp") no-repeat center/cover;
  position: relative;  /* 子要素の絶対配置の基準 */
  text-align: center;
}

/* タイトル文字 */
.stuff-title {
  text-align: center;
  top: 12px;                 /* ★上下位置をpx単位で調整 */ 
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 5.5rem;         /* 大きめ */
  color: #4aaa4c;            /* 緑色 */
  font-weight: 600;
  margin: 0;
}


/* =========================
   店舗外観画像
   ========================= */
.store-photo {
  text-align: center;   /* 中央寄せ */
  margin: 0;            /* 上下余白なし */
  padding: 0 65px;
}

.store-img {
  width: 950px;         /* 固定サイズ */
  height: 710px;
  object-fit: cover;    /* 万一比率違っても崩れない */
  display: inline-block;
}

/* =========================
   店舗詳細テキスト
   ========================= */
.store-detail {
  text-align: center;
  font-family: 'M PLUS Rounded 1c', sans-serif; /* 丸文字 */
  color: #333;          /* 濃いグレー */
  line-height: 1.8;     /* 読みやすい行間 */
  margin: 30px auto;    /* 上下余白 */
  max-width: 800px;     /* 読みやすい幅 */
}

.store-name {
  font-size: 4rem;
  font-weight: 600;     /* 少し太字 */
  color: #916e41;       /* 茶色 */
  margin-bottom: 0;
  padding-bottom: 0;
}

.store-address,
.store-access,
.store-hours,
.store-url {
  font-size: 1.9rem;
  font-weight: 400;     /* 標準の太さ */
  margin-bottom: 25px;
}

.store-url a {
  color: #4aaa4c;
  text-decoration: none;
}
.store-url a:hover {
  color: #4aaa4c;       /* 緑に変化 */
  text-decoration: underline;
}

.staff-movie-txt {
  font-size: 1.9rem;
  font-weight: 400;     /* 標準の太さ */
  margin-bottom: 10px;
  margin-top: 0;
}

.staff-movie-txt strong {
	color: #916e41; font-size: 120%; font-weight: 600;
}

.staff-movie {
	font-size: 85%; color:#999999;
}

.stuff-info-sp{
	margin-top: 50px;
}

.staff-info-txt {
  font-size: 2.4rem;
  font-weight: 400;     /* 標準の太さ */
  margin:　20px 0 20px 0;
}

.staff-info-txt strong {
	color: #916e41; font-size: 140%; font-weight: 600;
}

.staff-info-txt-movie {
	font-size: 85%; color:#999999;
}

/* === スタッフ紹介ボタン（PC強制版） === */
:root{
  --rb-staff-btn-bg: #916e41;
  --rb-staff-btn-fg: #fff;
  --rb-staff-btn-radius: 10px;
  --rb-staff-btn-shadow: 0 5px 10px rgba(0,0,0,.10);
}

@media (min-width: 960px){
  /* 既存の全体リンクスタイルより強く！ */
  a.rb-btn-staff,
  .rb-btn-staff:link,
  .rb-btn-staff:visited{
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 28px;
    min-width: 500px;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: var(--rb-staff-btn-fg) !important;
    background: var(--rb-staff-btn-bg);
    border: 0;
    border-radius: var(--rb-staff-btn-radius);
    box-shadow: var(--rb-staff-btn-shadow);
    text-decoration: none !important;   /* 下線を確実にオフ */
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, opacity .12s ease;
	margin: 30px auto 40px auto;
  }

  .rb-btn-staff:hover{
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
  }
  .rb-btn-staff:active{ transform: translateY(0); opacity: .9; }
  .rb-btn-staff:focus-visible{
    outline: 3px solid rgba(42,128,63,.6);
    outline-offset: 2px;
  }

  /* 中央寄せユーティリティ（必要なら親に付与） */
  .rb-btn-center{ display:flex; justify-content:center; }
}



/* =========================
   店舗情報：Google Map
   ========================= */
.store-map {
  width: 950px;         /* 外観画像と同じ幅 */
  height: 710px;        /* 外観画像と同じ高さ */
  margin: 0 auto 30px auto;       /* 中央寄せ */
  padding: 0;           /* 上下左右余白なし */
}

.store-map iframe {
  width: 100%;
  height: 100%;
  border: 0;            /* 枠線なし */
  display: block;
}

/* =========================
   SP: 画像6枚グリッド
   ========================= */
:root {
  --w: 1080px;     /* 全体の幅 */
  --pad: 24px;     /* 外側余白 */
  --gapx: 36px;    /* 横の間隔 */
  --gapy: 40px;    /* 縦の間隔 */
}

.v {
  width: var(--w);
  margin: 0 auto 40px auto;
  padding: var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gapy) var(--gapx);
  box-sizing: border-box;
}

.v__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Lightbox Player ===== */
.rb-lightbox[hidden]{ display:none; !important; }
.rb-lightbox{
  position: fixed; inset:0; z-index: 9999;
  display: grid; place-items: center;
}
.rb-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  animation: rbFade .25s ease both;
}

/* ダイアログ本体（拡大しながら出現） */
.rb-dialog{
  position: relative;
  width: min(1000px, 86vw);
  aspect-ratio: 16 / 9;
  background:#000; border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  overflow: hidden;
  transform: translateY(8px) scale(.96);
  animation: rbPop .25s cubic-bezier(.22,.61,.36,1) both;
}

/* 埋め込み領域 */
.rb-frame, .rb-frame iframe, .rb-frame video{
  width:100%; height:100%; display:block; border:0;
}

/* 閉じるボタン */
.rb-close{
  position:absolute; right:8px; top:8px;
  z-index: 2;                 /* ★追加 */
  width:40px; height:40px; border:0; border-radius:50%;
  background: rgba(255,255,255,.9); color:#222; font-size:22px; line-height:40px;
  cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.rb-close:hover{ background:#fff; }

/* 開いたときは背面スクロール禁止 */
body.rb-ovh{ overflow:hidden; }

/* 動きを抑える設定配慮 */
@media (prefers-reduced-motion: reduce){
  .rb-dialog, .rb-backdrop{ animation:none !important; transform:none !important; }
}

/* keyframes */
@keyframes rbFade{ from{opacity:0} to{opacity:1} }
@keyframes rbPop{
  from{ opacity:0; transform: translateY(8px) scale(.96); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}

/* ===== PC用スライダー（2枚固定表示／透過対応／余白ゼロ／切り抜き無し） ===== */
@media (min-width: 1024px) {

  /* セクション＆ビューポート */
  .rb-slider {
    margin: 0 !important;
    padding: 0 !important;
  }
  .rb-slider .rb-slider__viewport {
    position: relative;
    width: 100%;
    height: auto;              /* 高さはJSで動的に付与 */
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;   /* 透過.webpの下地を出さない */
    overflow: hidden;
  }
  .rb-slider .swiper-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* スライド：上下左右の余白ゼロ、トリミング無し（contain）で全体表示 */
  .rb-slider .swiper-slide {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 100%;              /* ビューポートの高さに合わせる */
    display: flex;
    align-items: center;       /* 画像は縦横とも中央寄せ */
    justify-content: center;
    background: transparent;
  }
  .rb-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;       /* ← トリミングせず全体表示 */
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
  }

  /* ===== 前へ／次へボタン（端に小さめ領域：アイコンの約1.5倍） ===== */
  .rb-slider .rb-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;               /* 22pxアイコンの約1.5倍 */
    height: 54px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .rb-slider .rb-slider__btn--prev { left: 8px; }
  .rb-slider .rb-slider__btn--next { right: 8px; }

  /* アイコン（白シェブロン＋ドロップシャドウ） */
  .rb-slider .rb-slider__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    background: url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
        <path fill="%23FFFFFF" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>\
      </svg>'
    ) center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }
  .rb-slider .rb-slider__btn--next::before { transform: scaleX(-1); }

  /* ホバー/アクティブ時の薄いシェード（ボタン領域内のみ） */
  .rb-slider .rb-slider__btn:hover::after,
  .rb-slider .rb-slider__btn:active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.08);
    border-radius: 4px;
  }
}

/* ===== Q&A（PC） ===== */
@media (min-width: 1024px) {
  :root{
    --faq-bg: #f7f3ee;      /* 淡いベージュ */
    --faq-border: #cccccc;  /* 薄い境界線 */
    --faq-q: #27b3b0;       /* Q色 */
    --faq-a: #e46a6a;       /* A色 */
    --faq-text: #3d3d3d;
  }

  .rb-faq--pc{
    max-width: 1100px;
    margin: 0 auto 70px auto;
    padding: 0 16px;
    counter-reset: faq;
  }

  /* Q1/A1 ブロックどうしの上下余白 */
  .rb-faq__item{ margin: 5px 0 24px 0 ; }

  /* ── 質問ボタン ───────────────────────── */
  .rb-faq__q{ margin: 0; }
  .rb-faq__q button{
    width: 100%;
    display: flex;                   /* 左寄せ一列配置 */
    align-items: center;
    gap: 12px;
    justify-content: flex-start;     /* ← 左寄せ */
    padding: 18px 20px;
    color: var(--faq-text);
    font-size: clamp(24px, 2.0vw, 32px);  /* ほぼ2倍に拡大 */
    line-height: 1.5;
    background: var(--faq-bg);
    border: 1px solid var(--faq-border);
    border-radius: 0;                /* 角丸ナシ */
    box-shadow: none;                /* 影ナシ */
    cursor: pointer;
    position: relative;
  }
  /* 「Q1.」の自動表示（左先頭に付与） */
  .rb-faq__q button::before{
    counter-increment: faq;
    content: "Q" counter(faq) ".";
    color: var(--faq-q);
    font-weight: 700;
    margin-right: 10px;
  }

  /* 右端の三角（同じ行の右端に固定） */
  .rb-faq__chev{
    margin-left: auto;               /* 右端へ */
    width: 26px; height: 26px;
    opacity: .5;
    transition: transform .2s ease, opacity .2s ease;
    -webkit-mask: url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
        <path fill=\"black\" d=\"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\
      </svg>') center/22px 22px no-repeat;
            mask: url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
        <path fill=\"black\" d=\"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/>\
      </svg>') center/22px 22px no-repeat;
    background: #8c8c8c;
  }
  .rb-faq__q [aria-expanded="true"] .rb-faq__chev{
    transform: rotate(180deg);
    opacity: .7;
  }

  /* ── 回答パネル（Qとピッタリ密着） ─────────────── */
  .rb-faq__a{
    border: 1px solid var(--faq-border);
    border-top: none;                /* ↑ Qと線を共有して密着 */
    border-radius: 0;                /* 角丸ナシ */
    background: #fff;
    overflow: hidden;
  }
  /* 内容ラッパ（JSで自動付与されます／初期表示対策で定義） */
  .rb-faq__a-inner{
    padding: 18px 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--faq-text);
    font-size: clamp(24px, 2.0vw, 32px);  /* A側も大きめ */
    line-height: 1.7;
    text-align: left;
  }
  /* 「A1.」の自動表示 */
  .rb-faq__a-inner::before{
    content: "A" counter(faq) ".";
    color: var(--faq-a);
    font-weight: 700;
  }

  .rb-faq__a p{ margin: 0; }
}

/* ===== Footer (PC) 改訂版：点線ルール＆可変マージン ===== */
@media (min-width: 1024px) {
  :root{
    --rbf-bg: #f4d54a;           /* ベースの黄色 */
    --rbf-text: #333333;         /* 基本文字色＆リンク色 */
    --rbf-green: #20a66b;        /* 県名カラー */
    --rbf-dots: #333333;         /* 点線色（指定どおり#333） */
    --rbf-maxw: 1120px;          /* コンテンツ幅 */
    --rbf-group-pad-y: 20px;     /* 県ブロックの上下余白（自由に変更） */
  }

  .rb-footer--pc{
    background: var(--rbf-bg);
    color: var(--rbf-text);
    font-size: 26px;
    line-height: 1.7;
  }

  .rb-footer--pc a{
    color: var(--rbf-text);
    text-decoration: none;
    transition: text-decoration-color .15s ease, opacity .15s ease;
  }
  .rb-footer--pc a:hover,
  .rb-footer--pc a:active,
  .rb-footer--pc a:focus{
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* コンテンツ横幅 */
  .rb-footer--pc > *{
    max-width: var(--rbf-maxw);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ロゴ */
  .rb-footer__logo{ padding: 24px 0; margin: 0; }
  .rb-footer__logo img{
    display:block; width:100%; height:auto; margin:0; padding:0;
    max-width:100%;
  }

  /* リード */
  .rb-footer__lead{ text-align:center; padding:16px 0 20px; }
  .rb-footer__lead p{ margin:6px 0; font-size:26px; }

  /* 会社名 */
  .rb-footer__company{
    text-align:center; font-weight:700; color:var(--rbf-green);
    font-size:30px; margin:18px auto 10px;
  }

  /* 住所・TEL */
  .rb-footer__address{ text-align:center; font-style:normal; margin:0 auto 22px; }
  .rb-footer__address p{ margin:4px 0; }

  /* 店舗セクション */
  .rb-footer__stores{ padding:8px 0 30px; }

  /* 各県ブロック：上下余白は変数で管理。下だけ点線。 */
  .rb-footer__group{
    padding-top: var(--rbf-group-pad-y);
    padding-bottom: var(--rbf-group-pad-y);
    border-bottom: 3px dotted var(--rbf-dots); /* 基本は下だけ点線 */
	margin: 0 40px;
  }
  /* 先頭（=宮城県）のみ、上にも点線を追加 */
  .rb-footer__group:first-child{
    border-top: 3px dotted var(--rbf-dots);
  }

  /* 県名 */
  .rb-footer__pref{
    color: var(--rbf-green);
    font-size: 30px;
    text-align: center;
    margin: 0 0 10px;
    font-weight: 700;
  }

  /* 店名リンク */
  .rb-footer__links{ text-align:center; margin:0; }
  .rb-footer__links a{
    display:inline-block;
    margin: 6px 10px;
    font-size:26px;
    line-height:1.8;
  }

  /* コピーライト画像 */
  .rb-footer__copyright{ padding:0; margin-top: 50px; }
  .rb-footer__copyright img{
    display:block; width:100%; height:auto; max-width:none;
  }
}

/* ==== スマホ用カウントダウンバナー非表示（PC）==== */
  @media screen and (min-width: 960px) {
    #relaxbody-bottom-banner {
      display: none !important;
    }
  }

/* ==== Back to Top（PC用フル定義）==== */
:root{
  --rb-btt-bg: #4aaa4c;          /* ボタン背景（ブランド緑） */
  --rb-btt-color: #fff;          /* 矢印色 */
}

@media (min-width: 960px){
  #rb-backtotop{
    position: fixed;
    right: 230px;
    bottom: 0;                /* PCはカウントダウン無しなので通常の余白 */
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--rb-btt-bg);
    color: var(--rb-btt-color);
    border: 0;
    border-radius: var(--rb-btt-radius);
    box-shadow: var(--rb-btt-shadow);
    z-index: 10000;
    cursor: pointer;
    opacity: 0;                  /* 初期は非表示。JSで .is-visible 付与 */
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  }
  #rb-backtotop .rb-btt__icon{ pointer-events: none; }
  #rb-backtotop.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  #rb-backtotop:active{ transform: translateY(1px); }
}

/* ======== Shop List (PC) ======== */
.rb-shop {
  width: var(--container-w, 1080px);
  margin: 0 auto 10px auto;
  padding: 0 40px;        /* 余白を広めに */
  box-sizing: border-box;
}

/* 上部アンカー（カテゴリ内リンク） */
.rb-shop-anchor{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: center;
  margin: 6px 0 28px;
}
.rb-shop-anchor a{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: #f2f6f3;
  color: var(--menu-hover, #4aaa4c);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;           /* ≒17px：ひと回り大きく */
  border: 1px solid #e3eee5;
}
.rb-shop-anchor a:hover{ filter: brightness(.96); }

/* セクションタイトル：角丸囲い→緑テキスト＋下線のみ */
.rb-shop-section{ display:block; }
/* カテゴリタイトル調整 */
.rb-shop-title{
  width: 100%;                 /* 横幅いっぱい */
  margin: 48px 0 30px;
  text-align: left;
  line-height: 1;
  position: relative;
}

.rb-shop-title span{
  background: none;
  color: var(--menu-hover, #4aaa4c);
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: 2.1rem;	
  text-decoration: none;        /* 下線は疑似要素で制御 */
}

/* タイトル下に薄い緑の下線 */
.rb-shop-title::after{
  content:"";
  display:block;
  height: 4px;
  width: 100%;
  background: #e9f4eb;          /* 薄い緑 */
  border-radius: 0;
  margin-top: 6px;
}


/* 1列に3店舗（3カラム） ＋ 間隔広め */
.rb-shop-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 34px;                 /* 上下左右とも広げる */
}

/* カード */
.rb-shop-card{
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  border: 1px solid #eee;
  display: grid;
  grid-template-rows: auto 1fr;
}
.rb-shop-thumb{ display:block; line-height:0; }
.rb-shop-thumb img{
  width: 100%; height: auto; display:block;
  aspect-ratio: 4.1 / 3;            /* 縦を少し大きめに */
  object-fit: cover;
  transition: transform .35s ease;
}
.rb-shop-card:hover .rb-shop-thumb img{
  transform: scale(1.02);
}

/* 情報部 */
.rb-shop-info{ padding: 16px 18px 18px; }
.rb-shop-name{
  margin: 0 0 6px;
  color: var(--menu-hover, #4aaa4c);
  font-size: 1.3rem;
  font-weight: 600;
}
.rb-shop-addr{
  margin: 0 0 10px;
  color: #666;
  line-height: 1.5;
  font-size: 0.8rem;              /* 住所はワンサイズ小さく */
}

/* 詳しく見る（ボタン） */
.rb-shop-more{
  display: inline-flex; align-items: center; gap:.4em;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f7f2ec;
  color: #916e41;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #ecdccc;
}
.rb-shop-more::after{ content:"▶"; font-size: .85em; }
.rb-shop-more:hover{ filter: brightness(.97); }

.rb-shop-txt {
	font-size: 90%; color:#999999;
}

/* ======== Price List (PC) ======== */
.rb-plan {
  width: var(--container-w, 1080px);
  margin: 0 auto 80px;
  padding: 0 20px;
  box-sizing: border-box;
}

.rb-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* ← 2列 */
  gap: 24px;                       /* 画像間のすき間だけ */
}

.rb-plan-grid img {
  display: block;
  width: 100%;
  height: auto;                    /* 装飾なし・比率維持 */
}