/* ============================================================
   初めての方へ(first-visit.html)専用スタイル
   ─ 白磁トーンの案内ページ。共通の見た目は style.css を継承。
   ============================================================ */

/* ---------- ページヘッド ---------- */
.g-head{position:relative;overflow:hidden;padding:118px 0 46px;}
.g-title{font-size:clamp(30px,8vw,44px);font-weight:700;letter-spacing:.04em;}
.g-en{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.34em;color:var(--sian-deep);}
.g-intro{margin-top:18px;font-size:13.5px;line-height:2.1;color:#4A515E;}

/* 右上の装飾(円+ドット+花) */
.g-deco{position:absolute;top:0;right:0;width:260px;height:260px;pointer-events:none;}
.g-deco i{position:absolute;border-radius:50%;}
.g-deco .gd1{top:26px;right:-40px;width:150px;height:150px;background:var(--sian-c1);
  background-image:radial-gradient(rgba(62,108,150,.25) 1px,transparent 1.4px);background-size:10px 10px;}
.g-deco .gd2{top:-36px;right:44px;width:86px;height:86px;background:#fff;}
.g-deco .gd3{top:168px;right:120px;width:52px;height:52px;background:var(--muul-c2);opacity:.7;}
.g-deco .gd-rose{position:absolute;top:104px;right:196px;font-size:20px;color:var(--sian-deep);opacity:.55;}

/* ---------- セクション共通 ---------- */
.g-sec{padding:26px 0 10px;}
.g-h{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:700;letter-spacing:.12em;margin-bottom:20px;}

/* ---------- ご利用の流れ(5ステップ) ---------- */
.g-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.g-step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:18px 16px 18px 76px;box-shadow:0 6px 18px rgba(43,41,48,.05);}
.g-step .num{position:absolute;left:20px;top:18px;
  font-family:'Montserrat',sans-serif;font-size:22px;font-weight:800;letter-spacing:.04em;}
.g-step .ic{position:absolute;left:22px;top:52px;width:30px;height:30px;display:block;}
.g-step .ic svg{width:100%;height:100%;stroke-width:1.8;}
.g-step h3{font-size:14.5px;font-weight:700;letter-spacing:.06em;margin:0 0 5px;}
.g-step p{margin:0;font-size:12.5px;line-height:1.95;color:var(--gray);}
/* 青→紅の交互アクセント */
.g-step:nth-child(odd) .num, .g-step:nth-child(odd) .ic, .g-step:nth-child(odd) h3{color:var(--sian-deep);}
.g-step:nth-child(even) .num, .g-step:nth-child(even) .ic, .g-step:nth-child(even) h3{color:var(--mauve-acc);}
.g-step h3{color:var(--ink) !important;}
/* モバイル: 縦並び+左の縦ラインで接続 */
.g-step::after{content:"";position:absolute;left:34px;bottom:-13px;width:2px;height:13px;background:var(--line);}
.g-step:last-child::after{display:none;}

/* ---------- 初回来店のポイント ---------- */
.g-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.g-point{background:var(--white);border:1.5px solid;border-radius:16px;padding:20px 14px;text-align:center;}
.g-point .ic{display:block;width:34px;height:34px;margin:0 auto 10px;}
.g-point .ic svg{width:100%;height:100%;stroke-width:1.7;}
.g-point h3{font-size:13.5px;font-weight:700;line-height:1.55;letter-spacing:.04em;margin:0 0 8px;white-space:pre-line;}
.g-point p{margin:0;font-size:11.5px;line-height:1.9;color:var(--gray);text-align:left;}
.g-point:nth-child(odd){border-color:var(--sian-c2);}
.g-point:nth-child(odd) .ic, .g-point:nth-child(odd) h3{color:var(--sian-deep);}
.g-point:nth-child(even){border-color:var(--muul-c2);}
.g-point:nth-child(even) .ic, .g-point:nth-child(even) h3{color:var(--mauve-acc);}

/* ---------- FAQ ---------- */
.g-faq details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;
  box-shadow:0 4px 14px rgba(43,41,48,.04);}
.g-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;font-size:13.5px;font-weight:700;letter-spacing:.02em;}
.g-faq summary::-webkit-details-marker{display:none;}
.g-faq summary::after{content:"+";flex:0 0 auto;font-size:19px;font-weight:400;color:var(--sian-deep);
  transition:transform .25s ease;}
.g-faq details[open] summary::after{content:"−";}
.g-faq details p{margin:0;padding:0 18px 16px;font-size:12.5px;line-height:2;color:var(--gray);}

/* ---------- 締め ---------- */
.g-last{padding-bottom:76px;}
.g-last-inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding-top:16px;}
.g-last-copy{margin:0;font-size:13.5px;line-height:2.1;color:#4A515E;}
.g-cta{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;
  letter-spacing:.06em;border-radius:999px;padding:14px 34px;box-shadow:0 4px 0 rgba(43,41,48,.25);
  transition:transform .15s ease;}
.g-cta:active{transform:scale(.96);}

/* ---------- PC ---------- */
@media (min-width:760px){
  .g-head{padding-top:132px;}
  /* 5ステップを横並び+矢印接続(モックと同じリズム) */
  .g-steps{grid-template-columns:repeat(5,1fr);gap:26px;}
  .g-step{padding:24px 16px 20px;text-align:center;}
  .g-step .num{position:static;display:block;margin-bottom:12px;}
  .g-step .ic{position:static;display:block;margin:0 auto 12px;width:34px;height:34px;}
  .g-step h3{font-size:14px;}
  .g-step p{text-align:left;}
  .g-step::after{content:"→";left:auto;right:-22px;top:50%;bottom:auto;width:auto;height:auto;
    background:none;transform:translateY(-50%);color:#B8BEC9;font-size:15px;}
  .g-points{grid-template-columns:repeat(4,1fr);gap:16px;}
  .g-point p{text-align:center;}
}