/* ==========================================================
   Website Designer 共通リセット v1（2026-08-10）
   使い方: 新案件の style.css の【先頭】にこの内容を貼り込む。
   <link>で別ファイル読み込みにはしない（納品物は1CSSにまとめる）。
   変更したくなったら、このファイルを直してバージョンを上げること。
   案件側だけ直して満足しない（次の案件に伝わらない）。
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* iPhone横向きで文字が勝手に拡大されるのを防ぐ */
}

body {
  margin: 0;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0; /* 余白はブラウザ任せにせず、必ず自分のクラスで指定する */
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; /* 点付きリストが必要な箇所だけ個別に戻す */
}

img, picture, video {
  display: block;
  max-width: 100%;
  height: auto; /* width/height属性を書いても比率が崩れないように */
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  text-align: left;
  font-weight: inherit;
}

/* フォーム部品はフォント・色を継承しない初期値なので必ず揃える */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

textarea {
  resize: vertical;
}

/* アニメーション酔いしやすい人への配慮（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== リセットここまで。以下に案件のスタイルを書く ========== */

/* ==========================================================
   ゆかべえLP HTML版 v3（2026-11-07）: 画像8枚の構図・絵・色を保ったまま、文字を16px以上にして縦に伸ばすスマホ版
   絵は images/（文字を消した画像から切り出し）。パネル・カード・ボタン・線はCSSで描く。
   色: plans.md「v4 の色の設計」。書体: 見出し Shippori Mincho B1、本文 Zen Kaku Gothic New、ロゴ英字 Pinyon Script。
   ========================================================== */
:root{--ink:#23323A;--text:#4A4A4A;--muted:#66707A;--gold:#B8862B;--gold-l:#E8C87A;--rose:#A85C66;--rose-l:#B07A86;--cream:#FBF4E6;--cream2:#F3E7CE;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;--sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;--script:"Pinyon Script",cursive}
html{font-size:16px}
body{background:#F7F4EE;font-family:var(--sans);color:var(--ink);line-height:1.75;letter-spacing:.02em;font-feature-settings:"palt"}
.lp{max-width:600px;margin-inline:auto;background:var(--cream);overflow:hidden}
.nb{display:inline-block}
.pg{position:relative}
img{display:block;max-width:100%;height:auto}
.label{font-size:1rem;color:var(--gold);letter-spacing:.18em;font-weight:500}
.h1{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:clamp(1.7rem,7.2vw,2.5rem);line-height:1.4;letter-spacing:.03em}
.h2{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:clamp(1.45rem,6.2vw,2.1rem);line-height:1.45;letter-spacing:.03em}
.h2 em{font-style:normal;color:var(--gold)}
.h2 .big{font-family:var(--sans);font-weight:300;font-size:1.4em;line-height:1}
.h3{font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.5;color:var(--ink)}
.lead{font-size:1rem;color:var(--ink);line-height:1.9}
.lead.strong{font-weight:500}
.note{font-size:1rem;color:var(--muted);line-height:1.7}
.center{text-align:center}
.muted{color:var(--muted)}
.closing{font-family:var(--serif);font-size:1.1rem;color:var(--ink);text-align:center;line-height:1.9;padding:1.6rem 1.2rem 0}
.btn{display:flex;align-items:center;justify-content:center;min-height:3.4rem;padding:.6rem 1.2rem;border-radius:999px;background:var(--gold);color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.06em}
strong{font-weight:700;color:var(--ink)}

/* 01 FV */
.p01 .art{position:relative}
.fv-text{position:absolute;left:4.5%;top:2.2%;width:92%}
.logo{display:flex;flex-direction:column;line-height:1.15;margin-bottom:.5rem}
.logo-en{font-family:var(--script);font-size:clamp(2.2rem,9.6vw,3.3rem);color:var(--rose-l);line-height:1}
.logo-jp{font-family:var(--serif);font-size:1.1rem;color:var(--ink);letter-spacing:.12em;margin-top:.15rem}
.logo-by{font-family:var(--script);font-size:1.1rem;color:var(--rose-l)}
.p01 .label{margin-bottom:.4rem;text-shadow:0 0 8px #fff,0 0 16px #fff}
.p01 .h1{text-shadow:0 0 10px rgba(255,255,255,.95),0 0 24px rgba(255,255,255,.9)}
.fv-lead{margin-top:clamp(.8rem,6.5vw,2.6rem);width:64%;font-size:1rem;line-height:1.6;color:var(--rose);font-weight:500;text-shadow:0 0 8px #fff,0 0 14px #fff}
.band{background:var(--cream);padding:0 1.2rem 1.6rem;margin-top:-1px}
.fv-sub{font-size:1rem;color:var(--text);line-height:1.8;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}
.chips li{font-size:1rem;color:var(--ink);border:1px solid var(--gold);border-radius:999px;padding:.15rem .9rem .15rem 1.6rem;background:#fff;position:relative}
.chips li::before{content:"";position:absolute;left:.7rem;top:50%;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);transform:translateY(-50%)}
.band .note{text-align:center;margin-top:.7rem}

/* 02・07 ジグザグ */
.head{position:relative}
.p02 .head .h2{position:absolute;left:5%;right:5%;bottom:8%}
.head .head-text{position:absolute;left:6%;right:6%;top:9%}
.head img{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.foot{-webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}
.head .head-text .label{margin-bottom:.4rem}
.zig{padding:.6rem 0 0}
.row{position:relative;display:grid;grid-template-columns:1fr;margin:0 0 1.2rem}
.row img{width:57%;border-radius:.2rem;clip-path:polygon(0 0,85% 0,100% 14%,100% 100%,0 100%)}
.row.r-right img{justify-self:end;clip-path:polygon(0 0,100% 0,100% 100%,15% 100%,0 86%)}
.row .box{position:relative;background:#fff;padding:.9rem 1rem;font-size:1rem;line-height:1.75;color:var(--ink);width:63%;margin:-2.2rem 0 0 auto;margin-right:4%;box-shadow:0 6px 20px rgba(35,50,58,.06)}
.row.r-right .box{margin:-2.2rem auto 0 4%}
.row.r-left img{margin-left:4%}
.row.r-right img{margin-right:4%}
.p02{background:linear-gradient(180deg,#e2d0f0 0,#ebcfdb 55%,#fae4f1 100%)}
.p02 .closing{padding-bottom:.6rem}
.p02 .foot{width:100%}
.p07 .h2{font-size:clamp(1.35rem,5.7vw,1.9rem)}
.p07{background:linear-gradient(180deg,#e5ccd2 0,#f0dbd5 45%,#fcf2e6 100%);padding-bottom:1.6rem}
.p07 .box strong{display:block;margin-top:.5rem;font-family:var(--serif)}
.sign{font-family:var(--serif);font-size:1.2rem;text-align:right;padding:0 1.2rem;margin-top:.4rem}
.p07 .note{padding:0 1.2rem;margin-top:.4rem}

/* 03 こんな方へ */
.p03{background:linear-gradient(180deg,#f9e4ec 0,#fbf3f5 50%,#fceaec 100%)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding:.4rem 1.1rem 0}
.card{position:relative;background:#fff;border-radius:.9rem;padding:2rem .75rem 1rem;box-shadow:0 8px 24px rgba(35,50,58,.07)}
.card p{font-size:1rem;line-height:1.7}
.card strong{font-size:1.05rem}
.num{position:absolute;top:.5rem;left:.8rem;font-family:var(--serif);color:var(--gold);font-size:1.05rem;letter-spacing:.08em}
.card-art{padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-art img{width:100%;height:100%;object-fit:cover}
.p03 .note{margin-top:.6rem}
.p03 .foot{width:100%;margin-top:1rem}

/* 04 流れ */
.p04{background:#fcf3e6}
.art-img{width:100%}
.p04 .body{position:relative;padding:0 1.2rem 1.6rem;margin-top:-14%}
.ring{position:absolute;right:4%;top:-30%;width:32%;aspect-ratio:1;border:1.5px solid var(--gold);border-radius:50%;opacity:.8}
.p04 .label{margin-bottom:.3rem}
.steps{margin-top:1rem}
.steps li{display:grid;grid-template-columns:2.6rem 1fr;gap:.4rem;padding:.9rem 0;border-bottom:1px solid var(--gold-l)}
.steps li:last-child{border-bottom:0}
.steps .num{position:static;font-family:var(--sans);font-weight:300;font-size:1.35rem;line-height:1.3}
.steps p{font-size:1rem;color:var(--text);margin-top:.2rem}
.p04 .note{margin-top:.6rem}

/* 05 願いは叶う */
.p05{background:#fdf5ea}
.p05 .body{padding:.6rem 1.2rem 1.6rem;margin-top:-6%}
.p05 .lead{margin:.6rem 0 1.2rem}
.timeline{position:relative;padding-left:2.4rem}
.timeline::before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:.6rem;width:1.5px;background:var(--gold)}
.timeline li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;padding:.3rem 0 1rem}
.tl-n{position:absolute;left:-2.4rem;top:.35rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--gold);color:#fff;font-size:1rem;line-height:1.2rem;text-align:center;font-weight:700}
.tl-key{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--ink);white-space:nowrap;min-width:6rem}
.tl-body{font-size:1rem;color:var(--text);line-height:1.6;padding-top:.15rem}
.timeline li > div{display:grid;grid-template-columns:6rem 1fr;gap:.4rem;align-items:start}

/* 06 料金 */
.p06{background:#fdf6ec}
.p06 .head .head-text{top:30%;right:26%}
.p06 .body{padding:.4rem 1.2rem 1.6rem}
.prices{display:grid;gap:.9rem;margin:1.2rem 0 1.4rem}
.price{position:relative;background:#fff;border-radius:1rem;padding:1.2rem 1rem 1rem;display:grid;justify-items:center;gap:.2rem;text-align:center;box-shadow:0 8px 24px rgba(35,50,58,.06)}
.price.done{background:#E9E6E2;box-shadow:none}
.price.done .p-range,.price.done .p-amount{color:var(--muted)}
.price.now{border:1.5px solid var(--gold);padding-top:2.2rem}
.p-now{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:1rem;font-weight:700;padding:.1rem 1.2rem;border-radius:999px;letter-spacing:.1em;white-space:nowrap}
.p-range{font-size:1rem;color:var(--ink);letter-spacing:.08em}
.p-amount{font-family:var(--serif);font-size:2.2rem;line-height:1.2;color:var(--ink);font-weight:700}
.p-amount small{font-size:1.1rem;margin-left:.1em}
.p-note{font-size:1rem;color:var(--text);line-height:1.6}
.done-note{color:var(--rose)}
.price-foot{display:grid;grid-template-columns:1fr 36%;gap:.6rem;align-items:center}
.price-foot img{border-radius:.6rem}
.p06 .note{margin-top:.8rem}

/* 08 申込 */
.p08{background:#f5e9d3}
.p08 .art{position:relative}
.cta-head{position:absolute;left:5%;right:5%;top:7%}
.h2.white{color:#fff;text-shadow:0 1px 8px rgba(70,50,110,.45),0 0 20px rgba(70,50,110,.3)}
.cta-sub{color:#fff;font-size:1rem;font-weight:500;margin-top:.5rem;text-shadow:0 1px 4px rgba(70,50,110,.8),0 0 12px rgba(70,50,110,.6)}
.p08 .body{padding:.4rem 1.1rem 1.8rem}
.flow{display:grid;gap:.45rem}
.flow li{display:grid;grid-template-columns:5.6rem 1fr;gap:.6rem;padding:.8rem .9rem;background:#fff}
.flow li:nth-child(odd){background:var(--cream2)}
.f-when{font-size:1rem;color:var(--gold);font-weight:700;padding-top:.25rem}
.flow p{font-size:1rem;color:var(--text);line-height:1.6;margin-top:.15rem}
.p08 .btn{margin-top:1.4rem}
.p08 .note{margin-top:.7rem}

.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:.8rem;font-size:1rem;opacity:0;pointer-events:none;transition:.3s;z-index:60;max-width:calc(100% - 2rem);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}