/*
Theme Name: GR オリジナル
Author: greenrichhotels
Version: 1.0.0
Description: GRオリジナルテーマ
Text Domain: 
*/

body.page,
body.page * {
  font-family: var(--font-family-serif) !important;
}

.facility-title{
  text-align:center;
  font-size:28px; letter-spacing:.2em; font-weight:500;
  margin:0 0 48px;
}
.facility-img{
  margin:0 auto 64px; max-width:1140px; text-align:center;
}
.facility-img img{width:100%; height:auto; display:block;}
.facility-text{
  text-align:center; max-width:640px; margin:0 auto;
  font-size:16px; line-height:2;
}

/* =========================================================
   1. 画像とテキストを “同じ幅” で中央配置
   ========================================================= */
.facility-section{
  /* ★ ページ中央に寄せる */
  width: 100%;                 /* レスポンシブに full-width */
  max-width: 950px;            /* 画像の実幅 (= <img> width 属性) に合わせる */
  margin: 0 auto;              /* ← 左右中央寄せ */
  box-sizing: border-box;
}

/* =========================================================
   2. 画像
   ========================================================= */
.facility-img{
  margin: 0;                   /* 余白をリセット */
}
.facility-img img{
  width: 100%;                 /* 親 (= .facility-section) 幅いっぱい */
  height: auto;
  display: block;
  border-radius: 14px;         /* 角丸。不要なら削除 */
  object-fit: cover;
}

/* =========================================================
   3. キャプション (見出し 30 % / 本文 70 %)
   ========================================================= */
.facility-caption{
  /* Gutenberg Columns の独自レイアウトを上書き */
  display: flex !important;
  gap: 2rem;                   /* 見出しと本文のあいだ */
  margin-top: 1.8rem;          /* 画像との間隔 */
}

/* ── 子カラム共通 ───────────────────────────── */
.facility-caption > .wp-block-column{
  padding: 0 !important;       /* Gutenberg が入れる余白をゼロに */
  margin: 0 !important;
}

/* 左: 見出しカラム 30% */
.facility-caption > .wp-block-column:first-child{
  flex: 0 0 30% !important;
  max-width: 30% !important;
}

/* 右: 本文カラム 70% */
.facility-caption > .wp-block-column:nth-child(2){
  flex: 1 1 70% !important;
  max-width: 70% !important;
}

/* 見出し文字サイズなどお好みで */
.facility-caption .c-heading-set__main{
  margin: 0 0 0.8rem;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  font-weight: 700;
  line-height: 1.35;
}

/* =========================================================
   4. レスポンシブ（～768px：縦並び）
   ========================================================= */
@media (max-width: 768px){
  .facility-caption{
    flex-direction: column;
    gap: 1.2rem;
  }
  .facility-caption > .wp-block-column{
    flex: 0 0 100% !important;
    max-width: 100%  !important;
  }
}

/* ====== KV 説明文サイズ調整 ========================== */
.p-top-kv__text{
  font-size: 18px;   /* 既定 16px → 18px にアップ（お好みで） */
}

@media (max-width: 767px){     /* スマホでは少し縮める */
  .p-top-kv__text{
    font-size: 16px;
  }
}
/* =====================================================
 *  Layout
 * ===================================================== */


.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* =====================================================
 *  Card Grid — 2-column fixed
 * ===================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2カラム固定 */
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ========== 共通 / PC ========== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
}

/* ========== SP(～768px) 横スクロール ========== */
@media(max-width:768px){
  /* 横並びフレックス + スクロール */
  .card-grid{
    display:flex;                /* 横並びに切り替え          */
    overflow-x:auto;             /* 横スクロールを許可         */
    -webkit-overflow-scrolling:touch; /* iOS 慣性スクロール     */
    gap:1.6rem;
    padding-inline:1.4rem;       /* 左右に余白（見切れ対策）   */
    margin-inline:-1.4rem;       /* wrapper の padding と相殺   */
    scroll-snap-type:x mandatory;/* スナップ挙動（任意）       */

    /* スクロールバーを非表示にする（アクセスビリティは保つ） */
    scrollbar-width:none;        /* Firefox */
  }
  .card-grid::-webkit-scrollbar{ display:none; } /* Chrome / Safari */

  /* 各カードは 8〜9 割幅で見切れ感を出す */
  .card{
    flex:0 0 80%;
    max-width:80%;
    scroll-snap-align:start;     /* スナップ位置（任意）       */
  }
  /* サムネイル画像を横幅いっぱいに */
  .card__thumb img{width:100%;height:auto;}
}

/* =====================================================
 *  Card Container
 * ===================================================== */
.card {
  background: #f8f8f8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  transition: transform .25s ease;
}

.card:hover {
  transform: translateY(-4px);
}

/* -----------------------------------------------------
 *  Thumbnail
 * --------------------------------------------------- */
.card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

/* -----------------------------------------------------
 *  Badge
 * --------------------------------------------------- */
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  border-radius: 4px;
}

.badge--sale { background: #1fb87c; }
.badge--sold { background: #757575; }

/* -----------------------------------------------------
 *  Card Body
 * --------------------------------------------------- */
.card__body {
  padding: 1.25rem 1rem 1.5rem;
}

.card__catch {
  font-size: 1.15rem;
  color: #666;
  line-height: 1.4;
}

.card__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: .4rem 0 1rem;
}

/* -----------------------------------------------------
 *  Spec List
 * --------------------------------------------------- */
.card__spec {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.25rem;
  line-height: 1.5;
}

.card__spec dt { width: 38%; color: #666; }
.card__spec dd { width: 62%; margin: 0; }

.l-container-2
 {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin: 0 auto;
}

/* ─── ROOM LIST のカードだけ Serif 強制 ───────────────── */
.room-list .card,
.room-list .card *{
  font-family: var(--font-family-serif) !important;
}

/* =====================================================
 *  Responsive Adjustments
 * ===================================================== */
@media (max-width: 640px) {
  .wrapper       { padding: 2.5rem 1rem; }
  .section-title { font-size: 1.4rem; }
}



/* --------------- テーマ共通ラッパー ---------------- */
.wrapper { 
  max-width: 1000px; 
  margin-inline: auto; 
  padding-inline: 1rem; 
  padding-top: 5%;
  padding-bottom: 5%;
}

/*-------------------------------------------------
  room-list だけフル幅背景にする
-------------------------------------------------*/
.room-list{
  position:relative;          /* 疑似要素配置用 */
  isolation:isolate;          /* z-index を独立させる */
}

/* 背景用の疑似要素 */
.room-list::before{
  content:"";
  position:absolute;
  inset:0;                    /* 高さはセクションに追従 */
  
  /* ▼ 横幅いっぱいに広げるトリック */
  width:100vw;                /* 画面幅いっぱい */
  left:50%;                   /* 中央基準にして */
  transform:translateX(-50%); /* 画面中央へ引き戻す */
  
  background:#f2f6fa;         /* お好みの背景色 */
  z-index:-1;                 /* 背景なので後ろへ */
  pointer-events:none;        /* クリック判定を無効化（念のため） */
}

/* --------------- タイトル & サブリンク ------------- */
.share-table__title{
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  font-weight: 700;
  margin: 0 0 1.2rem;
}
.share-table__link{
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: .9rem;
  color: #0066ff;
  text-decoration: underline;
}

/* --------------- テーブル --------------------------- */
:root{
  --st-border   : #e4e8ee;
  --st-bg-head  : #f2f5f9;
  --st-bg-left  : #f2f5f9;
  --st-bg-reco  : #fff9ef;
  --st-accent   : #0066ff;
  --st-tag      : #007aff;
}

.share-table__scroll{ overflow-x: auto; }

/* 外枠を丸めるため <table> を wrap */
.share-table__table{
  width: 100%;
  min-width: 720px;            /* 3列時に崩れない最小幅 */
  border-collapse: collapse;
  border: 1px solid var(--st-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 1.3rem;
  font-family: var(--font-family-serif) !important;
}

/* ★ 正式に rounded table を実現するテク */
.share-table__table thead,
.share-table__table tbody{ background:#fff; }
.share-table__table thead th:first-child      { border-top-left-radius: 8px; }
.share-table__table thead th:last-child       { border-top-right-radius: 8px; }
.share-table__table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.share-table__table tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }

/* ------- 見出し列 (left) & ヘッダー列 (top) --------- */
.row-label{
  background: var(--st-bg-left);
  font-weight: bold;
  text-align: left;
  width: 215px;
  padding-left: 1.4rem;
}
.row-label.has-icon svg{ width: 18px; height: 18px; vertical-align:-3px; margin-right:.5rem; }

.share-table__table thead th{
  background: var(--st-bg-head);
  font-weight: 600;
  padding: 1rem .5rem;
  border-bottom: 1px solid var(--st-border);
}
.share-table__table thead th.is-recommend{ background: var(--st-bg-head); }

/* ------- 推しプラン装飾 ----------------------------- */
.tag{
  display: inline-block;
  margin-left: .4em;
  padding: .2em .6em;
  font-size: .65rem;
  line-height: 1;
  color: #fff;
  background: var(--st-tag);
  border-radius: 999px;
}

/* ------- セル共通 ----------------------------------- */
.share-table__table td{
  padding: 1.2rem .5rem;
}
.is-recommend{ background: var(--st-bg-reco); }

/* ------- 区切り線 ---------------------------------- */
.share-table__table th,
.share-table__table td{
  border-right: 1px solid var(--st-border);
  border-bottom: 1px solid var(--st-border);
}
.share-table__table tr > *:last-child{ border-right: none; }
.share-table__table tr:last-child > *{ border-bottom: none; }

/* ------- “●” マーク -------------------------------- */
.dot{
  display:inline-block;
  width:10px; height:10px;
  background:#000;
  border-radius:50%;
}

/* ------- 備考 -------------------------------------- */
.share-table__note{
  font-size: .8rem;
  line-height: 1.6;
  color: #666;
  margin-top: 1.2rem;
}

/* --------------- Responsive ≤768px ------------------ */
@media(max-width: 768px){
  .share-table__table{ min-width: 100%; }
  .share-table__table thead{ display: none; }

  .share-table__table tbody tr{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
    border: 1px solid var(--st-border);
    border-radius: 8px;
  }
  .row-label{
    grid-column: 1 / 3;
    padding: 1rem 1rem .8rem;
    border-right: 0;
    border-bottom: 1px solid var(--st-border);
    width: auto;
  }
  .share-table__table td{
    padding: .9rem .5rem;
    border-right: 0;
  }
  .share-table__table tr > td:last-child{ border-top: 1px solid var(--st-border); }
}



/* ── Scoped CSS ── */
#gallery-kins{position:relative;isolation:isolate;}
#gallery-kins .ssg-pin{
  position:sticky;top:calc(var(--hdr,0));
  height:calc(100vh - var(--hdr,0));display:flex;z-index:5;
}

/*─ 左：画像エリア ─*/
#gallery-kins .ssg-g{flex:0 0 55%;margin:0;padding:0;list-style:none;
  position:relative;height:100%;background:#000;overflow:hidden;}
#gallery-kins .ssg-img{position:absolute;inset:0;will-change:transform;}
#gallery-kins .ssg-img img{width:100%;height:100%;object-fit:cover;}

/*─ 右：キャプションエリア（背景白） ─*/
#gallery-kins .ssg-cap{
  flex:1;margin:0;list-style:none;display:flex;align-items:center;justify-content:center;
  background:#f2f6fa;color:#000;padding:4rem 6vw;
  font-family:var(--font-family-serif);
  position:relative;                 /* ← li を絶対配置するため */
}
#gallery-kins .ssg-c{
  position:absolute;inset:0;
  display:flex;
  flex-direction:column;
  /*
  justify-content:center;
  */
  opacity:0;transition:opacity .4s;
  margin-top: 12%;
  margin-left: 10%;
  margin-right: 10%;
}
#gallery-kins .ssg-c.ssg-active{opacity:1;}

/*─ 見出し：黒背景＋白字 ─*/
#gallery-kins .ssg-c h3{
  margin:0 0 1rem;font-size:2.2rem;
  background:#000;color:#fff;display:inline-block;padding:.3em .9em;
  line-height:1.3;font-weight:600;
}

/*─ 説明文 ─*/
#gallery-kins .ssg-c p{margin:0;line-height:1.7;font-size:1.5rem;}

@media(max-width:768px){
  #gallery-kins .ssg-pin{flex-direction:column;}
  #gallery-kins .ssg-g  {flex:0 0 45%;}
  #gallery-kins .ssg-cap{padding:2rem 8vw;}
  #gallery-kins .ssg-c h3{font-size:1.6rem;}
}

/* =========================================================
   ACCESS  (NEWS セクションのトーン＆マナーを継承)
========================================================= */
.p-top-access             { --gap: 2rem; }
.p-top-access__body       { margin-top: 3rem; }
.p-top-access__row        { display:flex; flex-wrap:wrap; gap:var(--gap); }
.p-top-access__col        { flex:1 1 0; min-width:280px; }

.p-top-access__map iframe { width:100%; height:100%; min-height:320px; display:block; }

/* 右カラムの文字組み */
.p-top-access__info       { display:flex; flex-direction:column; height:100%; }
.p-top-access__hotel-name { font-size:1.8rem; font-weight:700; margin:0 0 1rem; }
.p-top-access__address    { font-style:normal; line-height:1.6; margin:0 0 1.5rem; }
.p-top-access__route dt   { font-weight:600; margin-top:.8rem; }
.p-top-access__route dd   { margin:0 0 .5rem 1em; line-height:1.6; }
.p-top-access__button     { margin-top:auto; }    /* 最下部に押し込む */

/* --- Breakpoint (同じ並びを保ちたい場合は不要) --- */
@media (max-width: 768px){
  .p-top-access__row      { flex-direction:column; }
}


/* === section fade-in ===================================== */
.js-fade {
  opacity: 0;
  transform: translateY(40px);          /* ↓からふわっと */
  transition: opacity .8s ease-out,
              transform .8s ease-out;
  will-change: opacity, transform;
}

.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* “よりゆっくり／早く” など調整したい場合は data-speed を渡して上書き */
.js-fade[data-speed="slow"]   { transition-duration: 1.3s; }
.js-fade[data-speed="fast"]   { transition-duration: .5s; }


/* 6ボタンレイアウト  ----------------------------------- */
.p-top-guide__list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3.2rem;               /* 余白 */
  margin-top:4rem;
}

.p-top-guide__item a{
  width:100%;               /* ボタンをセルいっぱいに */
}

/* 2 カラム → 1 カラム レスポンシブ */
@media(max-width:1024px){
  .p-top-guide__list{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:767px){
  .p-top-guide__list{grid-template-columns:1fr;}
}

/* =========================================================
   NEWS MODAL  –  CLEAN FINAL
   ======================================================= */
html.is-modal-open       { overflow:hidden; }      /* 背景縦スクロール停止 */
html.is-modal-open body  { box-sizing:border-box; }/* 横ブレ防止           */


/* 初期状態：#news-modal が閉じている時は overlay をクリック不可 */
#news-modal:not(.is-open) .news-modal__overlay{
  pointer-events:none;
}

/* 開いたらオーバーレイもクリック可（既存と同じ見た目） */
#news-modal.is-open .news-modal__overlay{
  pointer-events:auto;
}


/* ---------- ラッパー ---------- */
#news-modal              { display:none; }
#news-modal.is-open      {
  display:block; position:fixed; inset:0; z-index:1000000;
  animation:modal-fade .3s ease forwards;
}

/* ---------- オーバーレイ ---------- */
.news-modal__overlay     { position:absolute; inset:0;
  background:rgba(0,0,0,.6); cursor:pointer; }

/* ---------- モーダル ---------- */
.news-modal__content     { position:relative;
  max-width:720px; margin:60px auto; padding:40px;
  background:#fff; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.2);
  max-height:calc(100vh - 120px);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; touch-action:pan-y;
  transform:translateY(20px); opacity:0;
  animation:modal-slide .3s ease forwards .05s; }

/* ---- SP ---- */
@media(max-width:640px){
  .news-modal__content{
    max-width:100%; width:calc(100% - 32px);
    margin:20px auto; padding:24px;
    max-height:calc(100dvh - 40px);
    position:relative;   /* z-index を効かせるため */
    z-index: 1000000;      /* ヘッダーより大きい値にする */
  }
}

/* ---------- Close ---------- */
.news-modal__close       { position:absolute; top:16px; right:16px;
  width:32px;height:32px; border:none; cursor:pointer;
  background:url('/img/close.png') center/contain no-repeat; }

/* ---------- Loading ---------- */
.news-modal__loading     { text-align:center; padding:40px 0; font-size:1rem; opacity:.7; }

/* ---------- Animations ---------- */
@keyframes modal-fade  { from{opacity:0} to{opacity:1} }
@keyframes modal-slide { from{opacity:0;transform:translateY(20px)}
                         to  {opacity:1;transform:translateY(0)} }


.news-modal__content{
  display:flex;
  flex-direction:column;      /* ボタン＋スクロール領域を縦並び */
  /* ほかの見た目は前回と同じ */
}

.news-modal__inner{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;              /* 余った高さを占有してスクロール領域に */
}

/* ボタンは従来どおり absolute で OK */
.news-modal__close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border:none; cursor:pointer;
  background:url('/img/close.png') center/contain no-repeat;
  z-index:10;                 /* 念のため本文より上に */
}


/* ==============================================
   1. グローバル保険
   ============================================== */
html,body{ overflow-x:hidden; box-sizing:border-box; }


/* モーダルが閉じているときはオーバーレイを完全にクリック不可にする */
#news-modal:not(.is-open) .news-modal__overlay{
  pointer-events: none !important;
}

/* =========================================================
   FAQ  –  Accordion ＋ Page-Jump Navigation  (full style)
   ======================================================= */

/* ---------- 1) Accordion 基本 ---------- */
.faq-list{
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.faq-item + .faq-item{                     /* 区切り線 */
  border-top: 1px solid #e4e8ee;
}

.faq-question{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.2rem 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-icon{
  flex: 0 0 1rem;
  height: 1rem;
  position: relative;
  transition: transform .3s;
}
.faq-icon::before,
.faq-icon::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 2px;
  background: #333;
}
.faq-icon::after{              /* 縦線 */
  transform: rotate(90deg);
}

.faq-question[aria-expanded="true"] .faq-icon{
  transform: rotate(45deg);    /* ＋ → × 表現 */
}

.faq-answer{
  padding: 0 0 1.5rem;
  font-size: 1.5rem;
  line-height: 1.7;
  color: #555;
  animation: faq-slide .4s ease;
}

@keyframes faq-slide{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ---------- 2) ページ内ナビ（カテゴリリンク） ---------- */
.faq-nav{
  margin: 1.5rem 0 2.5rem;
  text-align: center;
}

.faq-nav__list{
  display: inline-flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.faq-nav__list a{
  display: block;
  padding: .6rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  color: #555;
  background: #f4f6f9;
  border: 1px solid #d5dbe3;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s, color .25s, box-shadow .25s;
}

.faq-nav__list a:hover,
.faq-nav__list a:focus{
  background: #0066ff;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0,102,255,.2);
}

/* ---------- 3) カテゴリ見出し ---------- */
.faq-heading{
  position: relative;
  margin: 3.5rem 0 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
}

.faq-heading::before{                      /* 上罫線 */
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e4e8ee;
}

/* :target で現在位置を強調 */
.faq-heading:target::after{
  content: "";
  display: block;
  width: 2.5rem;
  height: .25rem;
  margin-top: .4rem;
  background: #0066ff;
}

/* ---------- 4) Responsive ---------- */
@media(max-width: 640px){
  /* ナビは横スクロールに */
  .faq-nav__list{
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .faq-nav__list::-webkit-scrollbar{display:none;}

  .faq-nav__list a{
    white-space: nowrap;
    font-size: 1.3rem;
  }
}



/* =============================================
   大浴場＆サウナ – SECTION STYLE
   ============================================= */

/* ------- グリッド ------- */
.bath-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);     /* ❶ 2 列固定 */
  gap: 1rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}
.bath-grid__item img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;        /* お好みで調整（例：3/2 など） */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ------- 説明文 ------- */
.bath-desc{
  font-size: 1.5rem;
  line-height: 1.8;
  color: #444;
}
.bath-note{
  margin-top: 1rem;
  font-size: 1.35rem;
  color: #666;
}

/* ------- モバイル調整（列は変えず gap だけ縮小） ------- */
@media (max-width: 640px){
  .bath-grid{ gap: 0.6rem; }
  .bath-desc{ font-size: 1.4rem; }
  .bath-note{ font-size: 1.2rem; }
}



/* FAQの最低限の表示制御（テーマCSSに左右されない保険） */
.p-top-faq .faq-answer[hidden] { display: none !important; }
.p-top-faq .faq-item.is-open > .faq-answer { display: block !important; }

/* ===========================
   Helpie FAQ – slim & clean
   既存クラスのみでデザイン調整
   =========================== */

/* アクセント色（必要ならここだけ変更） */
.helpie-faq.accordions { --faq-accent: #2563eb; }

/* 1) コンテナ幅を狭めて中央寄せ */
.helpie-faq.accordions {
  max-width: min(90vw, 780px);
  margin: 2.5rem auto;
  padding: 0 1rem;
}

/* 2) タイトル/カテゴリ見出しを整える */
.helpie-faq.accordions .collection-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 3rem;
  color: #111;
}


.helpie-faq.accordions .accordion__heading {
  font-weight: 700;
  font-size: clamp(1.05rem, 0.65rem + 0.8vw, 2.25rem);
  margin: 2rem 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--faq-accent);
  line-height: 1.4;
}

/* 3) 検索フォーム（あれば）をスッキリ */
.helpie-faq.accordions .search { margin-bottom: 7rem; }
.helpie-faq.accordions .search__wrapper {
  max-width: 520px; margin: 0 auto; position: relative;
}
.helpie-faq.accordions .search__input {
  width: 100%; padding: 12px 42px 12px 14px;
  border: 1px solid #e5e7eb; border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.02);
}
.helpie-faq.accordions .search__input:focus {
  outline: none; border-color: var(--faq-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.helpie-faq.accordions .search__icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  opacity: .6;
}