/* ---- RESET (edge-to-edge) ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
/* 画像は常に横100%・縦auto（＝比率維持） */
img, picture { display:block; width:100%; height:auto; }
/* 他のメディアも縦autoに（伸び防止） */
video, canvas, svg { display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; margin:0; background:transparent; border:0; }
summary{ list-style:none; }
details>summary::-webkit-details-marker{ display:none; }
html,body{ width:100%; overflow-x:hidden; }   /* 横スクロール/左右余白の元を遮断 */
:root{ -webkit-tap-highlight-color: transparent; }
/* スライス内の画像は絶対に比率維持で表示
   （<picture>対応のためセレクタを拡張） */
.slice > img,
.slice picture > img{
  width:100% !important;
  height:auto !important;
}


/* ---- Base ---- */
body{ background:#ffffff; color:#5B5B60; line-height:1; }

/* コンテナ：スマホ幅で端まで。PCでは中央寄せ */
.lp-container{
  max-width:750px;
  width:100%;
  margin:0 auto;
  padding:0;
  font-size:0;    /* 画像間の改行隙間を消す */
  line-height:0;  /* 行間由来の僅かな隙間も消す */
}

/* アクセシビリティ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  border: 0; white-space: nowrap;
}

/* レイアウト */
body { background-color: #ffffff; color: #5B5B60; line-height: 1; }

.lp-container {
  max-width: 750px;
  margin: 0 auto;
  font-size: 0;          /* 画像の間の改行隙間を消す */
  line-height: 0;        /* 行間による隙間も消す */
}


/* ===============================
   画像の「下ライン色」をスライスごとに指定する
   =============================== */

/* 1) 好きな色に変更（透明にすれば非表示） */
:root{
  --seam-thick: 1px;                 /* ラインの太さ（0pxにすると消える） */
  --seam-color-default: transparent; /* デフォルト */

  --seam-1-color: transparent;       /* 1枚目の下ライン */
  --seam-2-color: #D9F3FF;           /* 2枚目の下ライン */
  --seam-3-color: #e3e9ff;           /* 3枚目の下ライン */
  --seam-4-color: #F0DFFF;           /* 4枚目の下ライン */
  --seam-5-color: transparent;       /* 5枚目の下ライン */
}

/* 2) 擬似要素で「下ライン」を重ね描画（レイアウトに影響しない） */
.lp-container > .slice { position: relative; }
.lp-container > .slice::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--seam-thick);
  background: var(--seam-color, var(--seam-color-default));
  pointer-events: none;
  z-index: 1;                 /* 画像の上、ボタン等(z-index:2)の下 */
  transform: translateZ(0);   /* ぼやけ防止のための描画ヒント */
}

/* 3) スライスごとに色をバインド（順番に依存） */
.lp-container > .slice:nth-of-type(1){ --seam-color: var(--seam-1-color); }
.lp-container > .slice:nth-of-type(2){ --seam-color: var(--seam-2-color); }
.lp-container > .slice:nth-of-type(3){ --seam-color: var(--seam-3-color); }
.lp-container > .slice:nth-of-type(4){ --seam-color: var(--seam-4-color); }
.lp-container > .slice:nth-of-type(5){ --seam-color: var(--seam-5-color); }

/* 高精細端末で1pxが細すぎる場合の微調整（任意） */
@media (min-resolution: 3dppx){
  :root{ --seam-thick: 1.2px; }  /* 端末次第で 1.4px などに */
}


/* ===============================
   ボタン（縦2行）
   画像内の“固定座標”に中心固定（左右ズレ防止）
   =============================== */

/* スライスごとのSP初期座標（%）—必要なら調整 */
.slice--1 { --cta-x: 50%; --cta-y: 90%; }
.slice--4 { --cta-x: 50%; --cta-y: 87%; }

.is-cta .btn-stack {
  position: absolute;
  left: var(--cta-x);
  top:  var(--cta-y);
  transform: translate(-50%, -50%);  /* ボタン中心を座標へ */
  width: min(73%, 520px);
  display: grid;
  grid-template-columns: 1fr;        /* 縦1列（上下2行） */
  gap: 14px;
  align-items: center;
  justify-items: center;
  z-index: 2;
  top: 93%;
  left: 50%;
}

.is-cta .btn-stack2 {
  position: absolute;
  left: var(--cta-x);
  top:  var(--cta-y);
  transform: translate(-50%, -50%);
  width: min(73%, 520px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
  justify-items: center;
  z-index: 2;
}

.btn-link { display: block; width: 100%; }
.btn-img  { display: block; width: 100%; height: auto; min-height: 44px; }

/* ===============================
   5枚目：FAQ（上端固定）
   =============================== */
.is-embed { --embed-top: 20%; }   /* 上端位置（%/pxどちらでもOK） */

.embed-center {
  position: absolute;
  left: 50%;
  top: var(--embed-top);          /* 上端を固定（開閉で上下に動かない） */
  transform: translateX(-50%);
  transform-origin: top center;
  width: min(92%, 640px);
  line-height: 1.45;
  font-size: 16px;
  contain: layout paint;
  overflow-anchor: none;
}

/* 見出し（任意） */
.faq-head { margin: 0 4px 10px; line-height: 1.2; }
.faq-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.faq-head h2 small { font-size: 12px; font-weight: 600; color: #6b7280; margin-left: 6px; }

/* FAQリスト */
.faq-list { display: grid; gap: 20px; }

/* Qが動かない開閉（summaryは常に固定高さ） */
.faq-item {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* summary は常に 120px 固定。Qの位置は不変 */
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  height: 80px;                        /* 固定（デザインに合わせて変更可） */
  padding: 0 42px 0 14px;
  display: grid;
  grid-template-columns: auto 1fr;      /* [Q] [テキスト] */
  align-items: center;
  gap: 10px;
  position: relative;
  font-size: 14px;
  font-weight: bolder;
  color: #5B5B60;
  line-height: 1;
}
.faq-item > summary::-webkit-details-marker { display: none; }

/* Q（文字） */
.qmark {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 9999px;
  color: #73aadb;
  font-weight: 700;
  font-size: 22px;
}

/* + / − アイコン */
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: #5B5B60;
  font-weight: 700;
}
.faq-item[open] > summary::after { content: "−"; }

/* 回答だけを開閉（summary には影響しない） */
.faq-a {
  margin: 18px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #5B5B60;
  line-height: 1.6;
  max-height: 0;              /* 閉 */
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .28s ease, opacity .2s ease, transform .28s ease;
}
.faq-item[open] .faq-a {
  max-height: 600px;          /* 内容に応じて十分な上限 */
  opacity: 1;
  transform: translateY(0);
  /* height は指定しない（内容に合わせて自動で伸びる） */
}

/* A（文字） */
.amark {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-right: 6px;
  border-radius: 9999px;
  color: #73aadb;
  font-weight: 700;
  font-size: 22px;
}

/* モーション軽減尊重 */
@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
}

/* PC専用：幅・FAQボックス幅・CTA座標・（任意）ボタン幅 */
@media (min-width: 1024px) {
  .lp-container { max-width: 1200px; }
  .embed-center { width: min(70%, 760px); }

  .is-cta .btn-stack {
    width: 30%;
    top: 93%;
    left: 50%;
  }

  /* PCだけの“画像内座標”—必要に応じて数値調整 */
  .slice--1 { --cta-x: 71%; --cta-y: 70%; }
  .slice--4 { --cta-x: 50%; --cta-y: 94%; }

  /* （任意）ボタンをPCで少し小さくしたいとき */
  .btn-link { width: 50%; }  /* 中心固定のまま縮小（ズレません） */

  .slice--4 .btn-stack2{
    width: 35%;
  }
  /* 念のためセル内いっぱいに */
  .slice--4 .btn-stack2 .btn-link{ width: 100%; }

  .embed-center {
    width: 48%;
    left: 33%;
    top: 150px;
  }

}


/* ===============================
   ボタンの「押した感」エフェクト（CSSのみ）
   =============================== */
:root{
  --btn-radius: 16px;         /* 角丸 */
  --btn-press-scale: .985;    /* 押下時の縮小率 */
  --btn-hover-lift: -1px;     /* ホバー時の持ち上げ量（PC向け） */
  --btn-focus-ring: rgba(59,130,246,.35); /* フォーカス枠色 */
}

/* a要素自体に効果を集約（HTML変更不要） */
.btn-link{
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--btn-radius);
  overflow: hidden;                 /* リップルをクリップ */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;       /* 旧300ms遅延の軽減 */
  outline: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* ボタン画像もわずかに反応 */
.btn-link .btn-img{
  display: block;
  width: 100%;
  height: auto;
  will-change: transform, filter;
  transition: transform .12s ease, filter .12s ease;
}

/* PCホバー：ほんの少し持ち上げ＋彩度/明度アップ */
@media (hover:hover){
  .btn-link:hover { transform: translateY(var(--btn-hover-lift)); }
  .btn-link:hover .btn-img{ filter: saturate(1.03) brightness(1.02); }
}

/* 押下：わずかに沈む＆暗くなる */
.btn-link:active .btn-img{
  transform: translateY(1px) scale(var(--btn-press-scale));
  filter: brightness(.98) contrast(1.02);
}

/* フォーカス（キーボード操作時の可視化） */
.btn-link:focus-visible{
  box-shadow: 0 0 0 3px var(--btn-focus-ring);
}

/* さりげないリップル（中心起点・CSSのみ） */
.btn-link::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  background: radial-gradient(circle, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  border-radius:50%;
  transform: translate(-50%,-50%);
  opacity:0; pointer-events:none;
}
.btn-link:active::before{
  animation: btn-ripple .6s ease-out forwards;
}
@keyframes btn-ripple{
  0%   { width:0; height:0; opacity:.45; }
  100% { width:220%; height:220%; opacity:0; }
}

/* 動きを控えめに（ユーザー設定尊重） */
@media (prefers-reduced-motion: reduce){
  .btn-link, .btn-link .btn-img{ transition: none; }
  .btn-link:active .btn-img{ transform: none; filter: brightness(.98); }
  .btn-link::before{ display:none; }
}