/* 鳥羽グランドホテル FAQ（B 写真）。テーマの #faq_sec .faq_list の見た目を上書きする */
:root{--navy:#1e3c64;--navy2:#4b6383;--mist:#8e9db1;--line:rgba(30,60,100,.16);--pale:rgba(30,60,100,.05)}
#faq_sec[class^=fq] .fq-search{position:relative}
#faq_sec[class^=fq] .fq-search input{width:100%;box-sizing:border-box;padding:15px 48px 15px 18px;border:1px solid rgba(30,60,100,.3);border-radius:2px;background:#fff;font:inherit;font-size:1.5rem;letter-spacing:.08em;color:var(--navy);-webkit-appearance:none;appearance:none}
#faq_sec[class^=fq] .fq-search input::placeholder{color:#7d8ea5}
#faq_sec[class^=fq] .fq-search input:focus{outline:none;border-color:var(--navy)}
#faq_sec[class^=fq] .fq-search svg{position:absolute;right:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--navy);pointer-events:none}
#faq_sec[class^=fq] .fq-hint{margin-top:10px;font-size:1.25rem;letter-spacing:.06em;line-height:1.9;color:var(--navy2)}
#faq_sec[class^=fq] .fq-hint button{margin:0 6px 0 0;padding:0;border:0;background:none;font:inherit;color:var(--navy);text-decoration:underline;text-decoration-color:rgba(30,60,100,.35);text-underline-offset:4px;cursor:pointer}
#faq_sec[class^=fq] .fq-cat{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;text-align:left}
#faq_sec[class^=fq] .fq-result{font-size:1.4rem;letter-spacing:.1em;color:var(--navy2)}
#faq_sec[class^=fq] .fq-result[hidden],#faq_sec[class^=fq] .fq-group[hidden],#faq_sec[class^=fq] .list_row[hidden],#faq_sec[class^=fq] .fq-more[hidden],#faq_sec[class^=fq] .fq-empty[hidden]{display:none}
#faq_sec[class^=fq] .fq-empty{margin-top:40px;font-size:1.5rem;letter-spacing:.08em}

/* 質問の行（3案共通の土台）：細い罫・欧文の Q・開くと淡い面 */
#faq_sec[class^=fq] .faq_list{margin:0}
#faq_sec[class^=fq] .faq_list .list_row{margin:0;border:0;border-bottom:1px solid var(--line)}
#faq_sec[class^=fq] .faq_list .list_row:first-child{border-top:1px solid var(--line)}
#faq_sec[class^=fq] .faq_list dt{padding:21px 56px 21px 48px;font-size:1.6rem;letter-spacing:.08em;line-height:1.8;color:var(--navy);background:none;transition:color .3s}
#faq_sec[class^=fq] .faq_list dt.open{background:none;color:var(--navy)}
@media (any-hover:hover){#faq_sec[class^=fq] .faq_list dt:hover{background:none;color:var(--navy2)}}
#faq_sec[class^=fq] .faq_list .q,#faq_sec[class^=fq] .faq_list .a{left:8px;top:21px;font-size:2rem;line-height:1.4;color:var(--mist)}
#faq_sec[class^=fq] .faq_list .a{top:22px;color:#a3895a}
#faq_sec[class^=fq] .faq_list dt .plus{width:18px;height:18px;right:12px;border:0}
#faq_sec[class^=fq] .faq_list dt .plus::before,#faq_sec[class^=fq] .faq_list dt .plus::after{right:0;width:16px;border-top-color:var(--navy)}
#faq_sec[class^=fq] .faq_list dt .plus::after{transition:opacity .3s,transform .3s}
#faq_sec[class^=fq] .faq_list dd{padding:20px 56px 26px 48px;margin:0 0 20px;background:var(--pale);font-size:1.5rem;letter-spacing:.06em;line-height:2.05}
#faq_sec[class^=fq] .faq_list mark{background:#e2eaf4;color:inherit;padding:0 2px}
#faq_sec[class^=fq] .fq-more{display:block;margin:18px 0 0 auto;padding:6px 0;border:0;background:none;font:inherit;font-size:1.35rem;letter-spacing:.1em;color:var(--navy);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(30,60,100,.35);text-underline-offset:6px}
#faq_sec[class^=fq] .fq-more::after{content:"  →"}

/* ---------- B 写真（ホテルの写真で選ぶ） ---------- */
/* B はページ名の下のキャッチコピーも出さない（10-29 畔栁さん「縦が長すぎる」） */
body#faq #pagetit .pagetit_lead{display:none}
#faq_sec.fqB{padding-top:56px}
#faq_sec.fqB .fqb-hero{margin-top:0;padding:60px 0 50px;text-align:center;background:linear-gradient(rgba(16,34,60,.42),rgba(16,34,60,.6)),var(--img) center/cover}
#faq_sec.fqB .fqb-ttl{font-family:"Marcellus",serif;font-size:3.2rem;letter-spacing:.3em;color:#fff;line-height:1}
#faq_sec.fqB .fqb-sub{margin-top:12px;font-size:1.3rem;letter-spacing:.2em;color:#fff}
#faq_sec.fqB .fqb-hero .fq-search{width:600px;margin:26px auto 0}
#faq_sec.fqB .fqb-hero .fq-search input{border-color:#fff;padding-top:17px;padding-bottom:17px}
#faq_sec.fqB .fqb-hero .fq-hint{color:#fff}
#faq_sec.fqB .fqb-hero .fq-hint button{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
#faq_sec.fqB .fqb-tabs{display:none}
#faq_sec.fqB .fqb-bar{display:flex;justify-content:space-between;align-items:baseline;margin:64px 0 18px}
#faq_sec.fqB .fqb-bar p{font-size:1.7rem;letter-spacing:.2em}
#faq_sec.fqB .fqb-all{font-size:1.4rem!important;letter-spacing:.1em;text-decoration:underline;text-decoration-color:rgba(30,60,100,.35);text-underline-offset:6px}
#faq_sec.fqB .fqb-all.is-on{font-weight:700}
#faq_sec.fqB .fq-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#faq_sec.fqB .fq-cats .fq-cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;padding:16px 18px;overflow:hidden;color:#fff;background:linear-gradient(to bottom,rgba(16,34,60,0) 30%,rgba(16,34,60,.78)),var(--img) center/cover;transition:transform .5s}
#faq_sec.fqB .fq-cats .fq-cat::after{content:"";position:absolute;inset:0;border:2px solid transparent;transition:border-color .3s}
@media (any-hover:hover){#faq_sec.fqB .fq-cats .fq-cat:hover{transform:translateY(-3px)}}
#faq_sec.fqB .fq-cats .fq-cat.is-on::after{border-color:#fff;inset:6px}
#faq_sec.fqB .fq-cats .fq-cat.is-on{box-shadow:0 0 0 3px var(--navy)}
#faq_sec.fqB .fq-cat .en{font-family:"Marcellus",serif;font-size:1.15rem;letter-spacing:.2em;opacity:.9}
#faq_sec.fqB .fq-cat .jp{font-size:1.6rem;letter-spacing:.1em;line-height:1.5;white-space:nowrap;padding-right:44px}
#faq_sec.fqB .fq-cat .n{position:absolute;right:16px;bottom:16px;font-family:"Marcellus",serif;font-size:1.2rem;letter-spacing:.05em}
#faq_sec.fqB .fq-result{margin:48px 0 0;text-align:center}
#faq_sec.fqB .fq-empty{text-align:center}
#faq_sec.fqB .fq-groups{width:880px;margin:0 auto}
#faq_sec.fqB .fq-group{margin-top:80px}
#faq_sec.fqB .fq-head{position:relative;display:flex;align-items:flex-end;gap:18px;height:150px;padding:0 28px 22px;margin-bottom:8px;color:#fff;background:linear-gradient(90deg,rgba(16,34,60,.78),rgba(16,34,60,.15) 70%),var(--img) center/cover}
#faq_sec.fqB .fq-head .en{font-family:"Marcellus",serif;font-size:3rem;letter-spacing:.08em;line-height:1}
#faq_sec.fqB .fq-head h2{margin:0;font-size:1.7rem;font-weight:500;letter-spacing:.16em}
#faq_sec.fqB .fq-head .n{margin-left:auto;font-size:1.25rem;letter-spacing:.1em}
#faq_sec.fqB .faq_list .list_row:first-child{border-top:0}

/* お問い合わせのボタンは欄の幅いっぱいにして、テーマで枠の外へ出ている矢印を中に収める（PC 10-31・スマホ 10-29 畔栁さん） */
body#faq #faq_contact .col_btn .btn{display:block;box-sizing:border-box;width:100%;padding-left:24px;padding-right:72px;text-align:center}
body#faq #faq_contact .col_btn .btn::after{left:auto;right:20px;width:40px;background-size:auto 100%;background-position:right center;background-repeat:no-repeat}

/* ---------- B スマホ（810px 以下） ---------- */
@media (max-width:810px){
  /* テーマの #wrapper の overflow:hidden が貼り付き（sticky）を止めるため clip にする */
  body#faq #wrapper{overflow:visible;overflow-x:clip}
  /* ページ名の前後に少しだけ間を取る（10-29 畔栁さん「バランスよく・広すぎない」） */
  body#faq #pagetit .pagetit_tit{margin-top:14px}
  #faq_sec.fqB{padding-top:44px}
  /* FAQ の終わりとお問い合わせの間を詰める（10-29 畔栁さん） */
  #faq_sec.fqB{padding-bottom:0}
  body#faq #faq_contact{padding-top:56px}
  #faq_sec.fqB .fqb-hero{margin:0 -20px;padding:36px 20px 28px}
  #faq_sec.fqB .fqb-ttl{font-size:2.4rem}
  #faq_sec.fqB .fqb-sub{margin-top:8px;font-size:1.2rem}
  #faq_sec.fqB .fqb-hero .fq-search{width:auto;margin-top:18px}
  #faq_sec.fqB .fq-search input{padding:14px 44px 14px 14px;font-size:1.6rem;letter-spacing:.04em}
  #faq_sec.fqB .fq-hint{font-size:1.25rem;letter-spacing:.04em}
  #faq_sec.fqB .fq-hint .lb{display:block}
  #faq_sec.fqB .fq-hint button{margin-right:10px;padding:4px 0}
  /* スマホは写真のカテゴリを出さず、検索のすぐ下の横送りの帯だけで選ぶ（10-29 畔栁さん「縦に長くなる」。帯は上に貼り付くので兼ねられる） */
  #faq_sec.fqB .fqb-bar,#faq_sec.fqB .fq-cats{display:none}
  /* 質問を読んでいる間も上に貼り付くカテゴリ */
  #faq_sec.fqB .fqb-tabs{display:block;position:sticky;top:0;z-index:20;margin:0 -20px;background:#f7fafc;box-shadow:0 1px 0 var(--line),0 6px 14px -10px rgba(16,34,60,.35)}
  #faq_sec.fqB .fqb-tabs .in{display:flex;gap:2px;overflow-x:auto;padding:8px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #faq_sec.fqB .fqb-tabs .in::-webkit-scrollbar{display:none}
  #faq_sec.fqB .fqb-tabs::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;background:linear-gradient(90deg,rgba(247,250,252,0),#f7fafc);pointer-events:none}
  #faq_sec.fqB .fqb-tabs .fq-cat{flex:0 0 auto;padding:8px 12px;font-size:1.3rem;letter-spacing:.08em;line-height:1.2;color:var(--navy);white-space:nowrap;border-radius:2px}
  #faq_sec.fqB .fqb-tabs .fq-cat.is-on{background:var(--navy);color:#fff}
  #faq_sec.fqB .fq-result{margin-top:24px;font-size:1.3rem}
  #faq_sec.fqB .fq-groups{width:auto}
  #faq_sec.fqB .fq-group{margin-top:36px}
  #faq_sec.fqB .fq-head{height:96px;gap:12px;padding:0 14px 14px;margin-bottom:2px;background:linear-gradient(90deg,rgba(16,34,60,.8),rgba(16,34,60,.2) 85%),var(--img) center/cover}
  #faq_sec.fqB .fq-head .en{font-size:2.1rem;white-space:nowrap}
  #faq_sec.fqB .fq-head h2{min-width:0;font-size:1.3rem;letter-spacing:.06em;line-height:1.5;white-space:normal;word-break:keep-all}
  #faq_sec.fqB .fq-head .n{white-space:nowrap}
  #faq_sec.fqB .fq-head .n{font-size:1.1rem}
  #faq_sec.fqB .faq_list dt{padding:15px 32px 15px 30px;font-size:1.45rem;letter-spacing:.04em;line-height:1.7}
  #faq_sec.fqB .faq_list .q{left:2px;top:13px;font-size:1.7rem}
  #faq_sec.fqB .faq_list .a{left:2px;top:15px;font-size:1.7rem}
  #faq_sec.fqB .faq_list dt .plus{right:2px;width:14px}
  #faq_sec.fqB .faq_list dt .plus::before,#faq_sec.fqB .faq_list dt .plus::after{width:13px}
  #faq_sec.fqB .faq_list dd{padding:14px 14px 18px 30px;margin-bottom:14px;font-size:1.4rem;letter-spacing:.03em;line-height:1.95}
  #faq_sec.fqB .fq-more{margin:0;width:100%;padding:14px 0;text-align:center;font-size:1.3rem;text-decoration:none;border-bottom:1px solid var(--line)}
  #faq_sec.fqB .fq-more::after{content:"  ↓"}
  #faq_sec.fqB .fq-more-cat{display:none}
}