/* =========================================================
   soryuusui.jp フルコーディング版 / 共通スタイル
   フォント方針:
   - 見出ゴMB1(モリサワ/STUDIO配信) → Noto Sans JP 700 で代替
   - A1ゴシック(モリサワ) → Noto Sans JP 500/600 で代替
   - Roboto / Lato / Poppins / Material Icons は Google Fonts
   ========================================================= */
:root {
  --blue: #008AD7;        /* rgb(0,138,215)  価格ブロック背景 */
  --navy: #1757A2;        /* rgb(23,87,162)  価格文字 */
  --green: #00C600;       /* rgb(0,198,0)    LINE系 */
  --line: #06C755;        /* rgb(6,199,85)   LINE公式色(左ナビ) */
  --btn-gray: #476797;    /* rgb(71,103,151) 通常申込ボタン */
  --red: #DE2828;         /* rgb(222,40,40)  蛇口一覧ボタン */
  --fblue: #007BC3;       /* rgb(0,123,195)  FAQ/フッター */
  --lblue: #57A8D7;       /* rgb(87,168,215) Aマーク */
  --pale: #D4EEFA;        /* rgb(212,238,250) シャワー価格ブロック */
  --ink: #333333;
  --ink2: #4B4B4B;
  --sky: #D4EFFA;

  --f-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --f-mg: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; /* 見出ゴMB1 代替 */
  --f-a1: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; /* A1ゴシック 代替 */
  --f-roboto: "Roboto", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --f-lato: "Lato", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --f-poppins: "Poppins", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

  --shadow: 0 3px 8px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.mg { font-family: var(--f-mg); font-weight: 600; }
.material-icons, .material-symbols-outlined {
  display: inline-block; line-height: 1; vertical-align: middle;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
}

/* ---------- LINEアイコン (inline SVG) ---------- */
.ico-line { width: 30px; height: 30px; flex: 0 0 auto; }

/* ---------- フッター(共通・480カラム版) ---------- */
.site-footer {
  background: var(--fblue);
  color: #fff;
  padding: 36px 24px;
  font-family: var(--f-roboto);
}
.site-footer .links {
  display: flex; justify-content: center; gap: 24px;
  font-size: 10px; font-weight: 700; line-height: 14px;
}
.site-footer .op {
  margin-top: 18px; text-align: center;
  font-size: 10px; font-weight: 700; line-height: 14px;
}
.site-footer .copy {
  margin-top: 18px; text-align: center;
  font-size: 10px; font-weight: 400; line-height: 14px;
}
.site-footer .rights {
  margin-top: 18px; text-align: left;
  font-size: 10px; font-weight: 400; line-height: 14px;
}
@media (max-width: 540px) {
  .site-footer .copy, .site-footer .rights { font-weight: 500; }
}

/* ---------- フッター(共通・全幅版: FAQ/特商法/プライバシー) ---------- */
.wide-footer {
  background: var(--fblue);
  color: #fff;
  padding: 36px 24px;
  font-family: var(--f-roboto);
  text-align: center;
}
.wide-footer .links {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; line-height: 14px;
}
.wide-footer .op { margin-top: 24px; font-size: 10px; font-weight: 700; line-height: 14px; }
.wide-footer .copy { margin-top: 24px; font-size: 10px; font-weight: 400; line-height: 14px; }

/* ---------- FAQアコーディオン(LP・FAQページ共通) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: #fff; border-radius: 12px; padding: 16px; }
.faq-q {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left;
}
.faq-mark {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 48px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-roboto); font-weight: 700; font-size: 24px; line-height: 1; padding-bottom: 1px;
}
.faq-q .faq-mark { background: #fff; color: var(--fblue); border: 1px solid var(--fblue); }
.faq-a .faq-mark { background: var(--lblue); color: #fff; }
.faq-q .txt {
  flex: 1 1 auto; font-family: var(--f-mg); font-weight: 500;
  font-size: 16px; line-height: 1.8; color: var(--ink);
}
.faq-q .material-icons {
  flex: 0 0 24px; font-size: 24px; color: var(--fblue);
  transition: transform .2s;
}
.faq-item:not(.open) .faq-q .material-icons { transform: rotate(180deg); }
.faq-a {
  display: none; align-items: center; gap: 12px; margin-top: 32px;
}
.faq-item.open .faq-a { display: flex; }
.faq-a .txt {
  flex: 1 1 auto; font-family: var(--f-mg); font-weight: 500;
  font-size: 16px; line-height: 1.8; color: var(--ink); white-space: pre-line;
}
.faq-a .txt a { color: #2B85F7; }
@media (max-width: 540px) {
  .faq-q .txt { font-size: 14px; }
}