/* ===========================================================
   HEART LINK WEB STUDIO  公式サイト
   =========================================================== */

:root{
  --ivory:#FFFFFF;
  --gold:#C5A772;
  --beige:#FAEEEB;
  --charcoal:#241F1E;
  --white:#FFFFFF;
  /* サイト全体を游ゴシックに統一（端末に入っている書体を使います） */
  --font:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",
         "Yu Gothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",
         Meiryo,"メイリオ",sans-serif;
  --serif-en:var(--font);
  --serif-ja:var(--font);
  --sans-ja:var(--font);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans-ja);
  font-weight:400;
  line-height:1.9;
  letter-spacing:.04em;
}
a{color:inherit;text-decoration:none}

/* ---------- ヘッダー ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.9rem clamp(1.4rem,4vw,3.6rem);
  background:linear-gradient(to bottom,rgba(255,255,255,.96) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.38) 72%,rgba(255,255,255,0) 100%);padding-bottom:clamp(2.2rem,4vh,3.2rem);pointer-events:none;
}
.header > *{pointer-events:auto}
.brand{display:flex; flex-direction:column; gap:.34rem; line-height:1}
.brand__name{
  font-family:var(--serif-en);
  font-size:clamp(.98rem,1.15vw,1.18rem);
  letter-spacing:.42em; text-transform:uppercase;
}
.brand__sub{
  font-size:.53rem; letter-spacing:.44em; text-transform:uppercase;
  color:#8C8177;
}
.nav{display:flex; align-items:center; gap:clamp(1.2rem,2.3vw,2.4rem)}
.nav a{
  font-family:var(--serif-en);
  font-size:.79rem; letter-spacing:.24em; text-transform:uppercase;
  position:relative; padding-bottom:.28rem;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after{width:100%}
.nav__menu{display:none}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center;
}
.hero__media{position:absolute; inset:0; background:var(--beige)}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  display:block;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(97deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 20%,
      rgba(255,255,255,.62) 36%,
      rgba(255,255,255,.18) 52%,
      rgba(255,255,255,0) 66%);
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:1560px; margin:0 auto;
  padding:0 clamp(1.5rem,5.4vw,6rem);
}
.hero__col{max-width:38rem}

.eyebrow{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--serif-en);
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  color:#7F7469;
}
.eyebrow::before{content:""; width:clamp(1.6rem,3vw,2.8rem); height:1px; background:var(--gold)}

.hero__en{
  font-family:var(--serif-en); font-weight:300; font-style:italic;
  font-size:clamp(1.28rem,2.1vw,1.98rem);
  letter-spacing:.05em; line-height:1.4; color:#76674F;
  margin-top:clamp(1.6rem,4vh,2.6rem);
}
.hero__title{
  font-family:var(--serif-ja); font-weight:400;
  font-size:clamp(1.78rem,2.85vw,2.85rem);
  line-height:2; letter-spacing:.1em;
  margin-top:clamp(1.1rem,2.4vh,1.7rem);
}
.hero__title span{display:block}
.hero__rule{
  width:clamp(2.6rem,5vw,4.2rem); height:1px; background:var(--gold);
  margin:clamp(1.6rem,3.4vh,2.3rem) 0 clamp(1.3rem,2.6vh,1.8rem);
}
.hero__sub{
  font-size:clamp(.9rem,1vw,1rem);
  line-height:2.25; letter-spacing:.06em; color:#4E463F;
  max-width:30em;
}

.actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(2rem,4.4vh,3rem)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
  min-height:3.5rem; padding:0 clamp(1.5rem,2.4vw,2.3rem);
  font-size:.79rem; letter-spacing:.2em;
  border:1px solid var(--gold);
  transition:background .55s ease,color .55s ease,border-color .55s ease;
}
.btn--fill{background:var(--gold); color:var(--white); border-color:var(--gold)}
.btn--fill:hover{background:rgba(255,255,255,.5); color:var(--charcoal)}
.btn--line{color:var(--charcoal); border-color:rgba(48,43,41,.3); background:rgba(255,255,255,.45)}
.btn--line:hover{border-color:var(--gold); background:rgba(255,255,255,.8)}
.btn__arrow{font-family:var(--serif-en); font-size:.9rem; letter-spacing:0}

/* ---------- 下部の帯 ---------- */
.hero__foot{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(3rem,7vh,5rem) clamp(1.5rem,5.4vw,6rem) clamp(1.6rem,3.4vh,2.6rem);
  background:linear-gradient(to top,rgba(255,255,255,.92) 0%,rgba(255,255,255,.6) 46%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hero__foot > *{pointer-events:auto}
.scroll{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--serif-en); font-size:.62rem;
  letter-spacing:.36em; text-transform:uppercase; color:#7F7469;
}
.scroll__line{display:block; width:3.4rem; height:1px; background:rgba(48,43,41,.22); position:relative; overflow:hidden}
.scroll__line::after{
  content:""; position:absolute; inset:0 auto 0 0; width:40%;
  background:var(--gold); animation:trace 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes trace{0%{transform:translateX(-100%)}60%,100%{transform:translateX(250%)}}
.hero__note{
  font-family:var(--serif-en); font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:#6E655C; text-align:right;
}

/* ---------- 導入アニメーション ---------- */
.fade{opacity:0; transform:translateY(14px); animation:rise 1.5s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.d1{animation-delay:.25s}.d2{animation-delay:.5s}.d3{animation-delay:.7s}
.d4{animation-delay:.9s}.d5{animation-delay:1.1s}.d6{animation-delay:1.3s}
.hero__media img{opacity:0; animation:reveal 2.4s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes reveal{from{opacity:0; transform:scale(1.05)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .fade,.hero__media img{animation:none; opacity:1; transform:none}
  .scroll__line::after{animation:none}
}

/* ---------- スマートフォン ---------- */
.sp-br{display:none}

@media (max-width:900px){
  .header{
    padding:1.05rem 1.4rem;
    background:linear-gradient(to bottom,rgba(255,255,255,.9) 0%,rgba(255,255,255,.55) 60%,rgba(255,255,255,0) 100%);
  }
  .brand__name{font-size:.86rem; letter-spacing:.3em}
  .brand__sub{font-size:.46rem; letter-spacing:.36em}
  .nav{display:none}
  .nav__menu{
    display:flex; flex-direction:column; gap:.34rem; align-items:flex-end;
    background:none; border:0; cursor:pointer;
  }
  .nav__menu span{display:block; width:1.45rem; height:1px; background:var(--charcoal)}
  .nav__menu span:last-child{width:.9rem}

  .hero{display:block; min-height:0; align-items:initial}
  .hero__media{position:relative; inset:auto; height:34svh; min-height:13rem}
  .hero__media img{object-position:56% 56%}
  .hero__media::after{
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,.3) 0%,
        rgba(255,255,255,0) 34%,
        rgba(255,255,255,.55) 78%,
        rgba(255,255,255,.9) 100%);
  }
  .hero__inner{padding:1.8rem 1.5rem 0}
  .hero__col{max-width:none}
  .eyebrow{font-size:.58rem; letter-spacing:.34em}
  .hero__en{font-size:1.06rem; margin-top:1.2rem}
  .hero__title{
    font-size:clamp(1.38rem,5.4vw,1.72rem);
    line-height:1.95; letter-spacing:.08em; margin-top:1.1rem;
  }
  .hero__rule{margin:1.4rem 0 1.1rem}
  .hero__sub{font-size:.88rem; line-height:2.05; letter-spacing:.04em}
  .sp-br{display:inline}
  .actions{flex-direction:column; align-items:stretch; gap:.7rem; margin-top:1.6rem}
  .btn{width:100%; min-height:3.25rem}
  .hero__foot{position:static; bottom:auto; padding:1.35rem 1.5rem 1.8rem; margin:0; background:none}
  .hero__note{display:none}
}

/* ===========================================================
   以下、トップページの各セクション
   =========================================================== */

html{scroll-behavior:smooth}
body{display:flex;flex-direction:column;min-height:100svh}
main{flex:1}
img{display:block;max-width:100%}
:root{--pad:clamp(1.5rem,5.4vw,6rem);--muted:#413A35;--faint:#6B6158;
  --gold-deep:#9A7B3A;--line-1:rgba(36,31,30,.22);--line-2:rgba(36,31,30,.14)}

/* ---------- 共通 ---------- */
.sec{padding:clamp(4.6rem,12vh,9rem) var(--pad);scroll-margin-top:clamp(4.4rem,9vh,6rem)}
.sec--band{background:var(--beige)}
.sec--soft{background:#FDF6F4}
.wrap{max-width:74rem;margin:0 auto}
.wrap--narrow{max-width:44rem;margin:0 auto}
.kicker{display:flex;align-items:center;gap:1rem;font-family:var(--serif-en);font-size:.66rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--faint)}
.kicker::before{content:"";width:2.2rem;height:1px;background:var(--gold)}
.kicker--c{justify-content:center}
.ttl{font-family:var(--serif-ja);font-weight:400;font-size:clamp(1.4rem,2.5vw,2.3rem);
  line-height:2;letter-spacing:.11em;margin-top:clamp(1rem,2.4vh,1.6rem)}
.ttl-en{font-family:var(--serif-en);font-style:italic;font-size:clamp(.92rem,1.15vw,1.12rem);
  letter-spacing:.18em;color:#6A5A44;margin-top:.8rem}
.body{font-size:clamp(.93rem,1.03vw,1.03rem);line-height:2.35;letter-spacing:.07em;color:var(--muted)}
.mt{margin-top:clamp(1.2rem,2.6vh,1.8rem)}
.c{text-align:center}
.line{width:clamp(2.6rem,5vw,4rem);height:1px;background:var(--gold);margin:clamp(1.6rem,3.2vh,2.3rem) 0}
.line--c{margin-inline:auto}
.small{font-size:.8rem;line-height:2.1;color:var(--faint);letter-spacing:.06em}

/* ---------- 3つの特徴 ---------- */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3.4vw,3.4rem);margin-top:clamp(2.4rem,5vh,3.6rem)}
.feat{padding-top:1.9rem;border-top:1px solid var(--line-1)}
.feat__no{font-family:var(--serif-en);font-size:1.5rem;letter-spacing:.1em;color:var(--gold);line-height:1}
.feat__h{font-family:var(--serif-ja);font-size:clamp(1rem,1.25vw,1.16rem);letter-spacing:.09em;
  line-height:1.95;margin-top:1.1rem}
.feat__t{font-size:.93rem;line-height:2.25;color:var(--muted);margin-top:.9rem}

/* ---------- モデル一覧 ---------- */
.model{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  gap:clamp(2rem,5vw,4.6rem);align-items:center;
  padding:clamp(3rem,7vh,5.4rem) 0;border-bottom:1px solid var(--line-1)}
.model:first-of-type{border-top:1px solid var(--line-1)}
.model:nth-of-type(even) .model__view{order:2}
.model__view{position:relative;background:var(--white);padding:.55rem .55rem 0;
  border:1px solid var(--line-2);box-shadow:0 22px 48px rgba(48,43,41,.07)}
.model__bar{display:flex;gap:.34rem;padding:.3rem .2rem .5rem}
.model__bar i{width:.42rem;height:.42rem;border-radius:50%;background:var(--line-1)}
.model__shot{position:relative;aspect-ratio:16/10;overflow:hidden}
.model__shot img{width:100%;height:100%;object-fit:cover}
.model__mark{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1rem}
.model__mark b{font-weight:400;font-size:clamp(1.1rem,2.2vw,2rem);letter-spacing:.3em;
  text-transform:uppercase;line-height:1.2}
.model__mark span{font-size:clamp(.56rem,.78vw,.72rem);letter-spacing:.2em}
.model__no{font-family:var(--serif-en);font-size:.68rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--faint)}
.model__name{font-family:var(--serif-en);font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:.24em;
  text-transform:uppercase;line-height:1.2;margin-top:.8rem}
.model__ja{font-size:.76rem;letter-spacing:.14em;color:var(--faint);margin-top:.7rem}
.model__t{font-size:.93rem;line-height:2.25;color:var(--muted);margin-top:1.3rem}
.sw{display:flex;gap:.5rem;margin-top:1.3rem}
.sw i{width:1.5rem;height:1.5rem;border:1px solid var(--line-2)}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.tags span{font-size:.7rem;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line-1);padding:.24rem .7rem}
.acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.acts .btn{min-height:3rem;padding:0 1.5rem;font-size:.73rem}

/* ---------- サイトの種類・料金 ---------- */
.plan{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);
  gap:clamp(1.2rem,3.4vw,3.4rem);padding:clamp(2rem,4.6vh,3.2rem) 0;
  border-bottom:1px solid var(--line-1)}
.plan:first-of-type{border-top:1px solid var(--line-1)}
.plan__name{font-family:var(--serif-ja);font-size:clamp(1.04rem,1.45vw,1.3rem);
  letter-spacing:.1em;line-height:1.95}
.plan__en{font-family:var(--serif-en);font-style:italic;font-size:.82rem;letter-spacing:.16em;
  color:#6A5A44;margin-top:.4rem}
.plan__price{font-family:var(--serif-ja);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:.06em;
  margin-top:1rem;white-space:nowrap}
.plan__price small{font-size:.66rem;letter-spacing:.1em;color:var(--faint);margin-left:.6rem}
.plan__t{font-size:.93rem;line-height:2.3;color:var(--muted)}
.plan__list{margin-top:1rem;font-size:.89rem;line-height:2.15;color:var(--muted)}
.plan__list li{list-style:none;padding-left:1.1rem;position:relative}
.plan__list li::before{content:"";position:absolute;left:0;top:1.02em;width:.42rem;height:1px;
  background:var(--gold)}

/* ---------- 流れ ---------- */
.flow{position:relative;margin-top:clamp(2.4rem,5vh,3.6rem);padding-left:clamp(2.4rem,5vw,4rem)}
.flow::before{content:"";position:absolute;left:clamp(.55rem,1.3vw,1rem);top:.6rem;bottom:2.4rem;
  width:1px;background:rgba(197,167,114,.55)}
.step{position:relative;padding-bottom:clamp(2rem,4.4vh,3rem)}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:calc(clamp(2.4rem,5vw,4rem) * -1 + clamp(.2rem,.55vw,.45rem));
  top:.55rem;width:.75rem;height:.75rem;border:1px solid var(--gold);background:var(--ivory);
  border-radius:50%}
.step__no{font-family:var(--serif-en);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold)}
.step__h{font-family:var(--serif-ja);font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:.09em;
  line-height:1.95;margin-top:.55rem}
.step__t{font-size:.92rem;line-height:2.2;color:var(--muted);margin-top:.6rem;max-width:36em}

/* ---------- 月額 ---------- */
.zero{font-family:var(--serif-en);font-size:clamp(3.4rem,9vw,7rem);line-height:1;letter-spacing:.06em;
  color:var(--gold);margin-top:1.4rem}
.zero span{font-family:var(--serif-ja);font-size:.28em;letter-spacing:.14em;color:var(--charcoal);
  margin-left:.4rem}
.edit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin-top:clamp(2rem,4.4vh,3rem);background:var(--line-1);border:1px solid var(--line-1)}
.edit div{background:var(--ivory);padding:clamp(1.2rem,2.6vw,1.9rem)}
.edit b{display:block;font-weight:400;font-size:.8rem;letter-spacing:.08em;line-height:1.9}
.edit p{font-family:var(--serif-ja);font-size:1.06rem;letter-spacing:.05em;margin-top:.7rem}
.edit small{display:block;font-size:.7rem;color:var(--faint);margin-top:.5rem;line-height:1.9}

/* 納品後のちょこっと変更：いくらから */
.edit-from{text-align:center;margin:clamp(1.4rem,3vh,2rem) 0 0;
  font-family:var(--serif-en);font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:.06em;line-height:1.4;color:var(--gold)}
.edit-from span{font-family:var(--serif-ja);font-size:.92rem;letter-spacing:.12em}

/* ---------- お申し込みの方限定オプション ---------- */
.opt{
  position:relative; overflow:hidden;
  margin-top:clamp(3.2rem,7vh,5rem);
  padding:clamp(2.6rem,5.5vw,4.4rem) clamp(1.6rem,4.5vw,3.6rem);
  border:2px solid var(--gold);
  background:linear-gradient(180deg,rgba(197,167,114,.16),rgba(197,167,114,.04));
  text-align:center;
}
/* 四隅のかざり */
.opt::before,.opt::after{
  content:""; position:absolute; width:clamp(1.6rem,4vw,2.6rem); aspect-ratio:1;
  border:1px solid var(--gold); pointer-events:none;
}
.opt::before{ left:.7rem; top:.7rem; border-right:none; border-bottom:none }
.opt::after{ right:.7rem; bottom:.7rem; border-left:none; border-top:none }

.opt__label{
  display:inline-block; margin:0 0 1.2rem; padding:.5rem 1.4rem; border-radius:99px;
  background:var(--gold); color:#fff;
  font-size:.76rem; letter-spacing:.16em; line-height:1.9;
}
.opt__h{
  font-family:var(--serif-ja);
  font-size:clamp(1.45rem,3.2vw,2.3rem);
  letter-spacing:.09em; line-height:1.7; margin:0;
}
.opt__sub{
  margin:clamp(.9rem,2vh,1.3rem) 0 0;
  font-family:var(--serif-ja);
  font-size:clamp(1rem,1.6vw,1.22rem); letter-spacing:.08em; line-height:2;
  color:var(--gold-deep,#9A7B3A);
}
.opt__rule{
  width:3rem; height:1px; background:var(--gold);
  margin:clamp(1.4rem,3vh,2.1rem) auto 0;
}
.opt__lead{
  margin:clamp(1.4rem,3vh,2rem) 0 0;
  font-size:.92rem; letter-spacing:.04em; line-height:2.2; color:var(--faint);
}
.opt__plans{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.8vw,2rem);
  margin-top:clamp(2.2rem,5vh,3.2rem);
}
.opt__plans > div{
  background:var(--ivory); border:1px solid var(--line-1);
  padding:clamp(1.6rem,3.4vw,2.4rem);
  box-shadow:0 3px 18px rgba(60,45,30,.05);
}
.opt__time{
  margin:0; font-family:var(--serif-en); font-size:1rem;
  letter-spacing:.2em; color:var(--faint);
}
.opt__price{
  margin:.45rem 0 0; font-family:var(--serif-en);
  font-size:clamp(1.9rem,4.2vw,2.8rem); letter-spacing:.04em; color:var(--gold);
  line-height:1.35;
}
.opt__price span{ font-family:var(--serif-ja); font-size:.86rem; letter-spacing:.08em }
.opt__n{
  margin:1.1rem 0 0; font-family:var(--serif-ja);
  font-size:clamp(1.02rem,1.5vw,1.2rem); letter-spacing:.06em; line-height:1.9;
  color:var(--charcoal);
}
.opt__b{
  margin:.7rem 0 0; font-size:.82rem; letter-spacing:.02em;
  line-height:2.05; color:var(--faint);
}
@media (max-width:720px){
  .opt__plans{ grid-template-columns:1fr }
  .opt__label{ font-size:.68rem; letter-spacing:.1em; padding:.45rem 1rem }
  .opt__lead{ font-size:.86rem; line-height:2.05 }
}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(2.2rem,5vh,3.4rem);border-top:1px solid var(--line-1)}
.faq details{border-bottom:1px solid var(--line-1)}
.faq summary{display:flex;gap:1rem;align-items:flex-start;cursor:pointer;list-style:none;
  padding:clamp(1.1rem,2.4vh,1.5rem) 2.4rem clamp(1.1rem,2.4vh,1.5rem) 0;position:relative;
  font-family:var(--serif-ja);font-size:clamp(.92rem,1.15vw,1.05rem);letter-spacing:.08em;
  line-height:1.95}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--serif-en);font-size:.9rem;color:var(--gold);
  letter-spacing:.1em;flex:none;padding-top:.15em}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:.62rem;height:.62rem;
  border-right:1px solid var(--faint);border-bottom:1px solid var(--faint);
  translate:0 -60%;rotate:45deg;transition:rotate .4s ease}
.faq details[open] summary::after{rotate:225deg}
.faq__a{display:flex;gap:1rem;padding:0 2.4rem 1.6rem 0;font-size:.93rem;line-height:2.3;
  color:var(--muted)}
.faq__a::before{content:"A";font-family:var(--serif-en);font-size:.9rem;color:var(--faint);
  letter-spacing:.1em;flex:none;padding-top:.15em}

/* ---------- 最後のご案内 ---------- */
.end{text-align:center}
.end__en{font-family:var(--serif-en);font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:.3em;
  text-transform:uppercase;line-height:1.3}

/* ---------- フッター ---------- */
.foot{background:var(--charcoal);color:#E4DDD2;padding:clamp(3rem,7vh,4.6rem) var(--pad) 2.2rem}
.foot__in{max-width:74rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem 3rem;
  justify-content:space-between;align-items:flex-start}
.foot__logo{font-family:var(--serif-en);font-size:1.05rem;letter-spacing:.4em;text-transform:uppercase}
.foot__sub{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:#A79C90;margin-top:.5rem}
.foot__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem}
.foot__nav a{font-family:var(--serif-en);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase}
.foot__note{max-width:74rem;margin:clamp(2.2rem,5vh,3.2rem) auto 0;padding-top:1.6rem;
  border-top:1px solid rgba(228,221,210,.18);font-size:.68rem;line-height:2.1;color:#A79C90}
.foot__c{display:block;font-family:var(--serif-en);font-size:.64rem;letter-spacing:.2em;margin-top:1rem}

/* ---------- 画面に入ったら表示 ---------- */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{transition:none;opacity:1;transform:none}}

/* ---------- スマートフォン ---------- */
@media (max-width:900px){
  .feats{grid-template-columns:1fr;gap:1.8rem}
  .model,.model:nth-of-type(even) .model__view{grid-template-columns:1fr;order:0;gap:1.6rem}
  .plan{grid-template-columns:1fr;gap:.9rem}
  .plan__price{margin-top:.7rem}
  .edit{grid-template-columns:1fr}
  .acts{flex-direction:column}
  .acts .btn{width:100%}
  .foot__in{flex-direction:column;gap:1.6rem}
}

/* ---------- お問い合わせのご案内（ボタンを押すと表示） ---------- */
.formnote{
  max-width:34rem;margin:clamp(1.8rem,4vh,2.6rem) auto 0;
  border:1px solid var(--gold);background:var(--white);text-align:center;
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3.4vw,2.1rem);
}
.formnote__h{
  font-family:var(--serif-ja);font-size:clamp(.96rem,1.25vw,1.12rem);
  letter-spacing:.09em;line-height:1.95;padding-bottom:.9rem;margin-bottom:.9rem;
  border-bottom:1px solid rgba(197,167,114,.4);
}
/* 一文だけのときは、下の区切り線を出しません */
.formnote__h:only-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
.formnote__t{font-size:.8rem;line-height:2.25;letter-spacing:.06em;color:var(--muted)}
button.btn{font-family:inherit;cursor:pointer;color:inherit}

/* ---------- 画面の狭いスマートフォン ---------- */
@media (max-width:380px){
  .hero__media{height:30svh;min-height:11rem}
  .hero__title{font-size:1.32rem;line-height:1.9}
  .hero__en{font-size:.98rem}
  .hero__sub{font-size:.84rem;line-height:2}
  .actions{margin-top:1.3rem}
  .btn{min-height:3.05rem}
}

/* ---------- プロフィール ---------- */
.prof{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  gap:clamp(2rem,5vw,4.6rem);align-items:center}
.prof__img{position:relative;aspect-ratio:3/4;overflow:hidden}
.prof__img img{width:100%;height:100%;object-fit:cover}
.prof__frame{position:absolute;inset:0;border:1px solid var(--gold);
  translate:clamp(.7rem,1.6vw,1.2rem) clamp(.7rem,1.6vw,1.2rem);pointer-events:none;z-index:-1}
.prof__wrap{position:relative;padding-right:clamp(.7rem,1.6vw,1.2rem);
  padding-bottom:clamp(.7rem,1.6vw,1.2rem)}
.prof__name{font-family:var(--serif-ja);font-size:clamp(1.14rem,1.7vw,1.44rem);
  letter-spacing:.13em;line-height:1.9;margin-top:1.4rem}
.prof__role{font-family:var(--sans-ja);font-size:.78rem;letter-spacing:.16em;
  color:var(--faint);margin-top:.7rem;line-height:1.9}
.prof__list{margin-top:clamp(1.4rem,3vh,2rem);padding-top:1.3rem;
  border-top:1px solid var(--line-1);display:grid;gap:.5rem 1.6rem;
  grid-template-columns:auto 1fr;font-size:.86rem;letter-spacing:.06em;line-height:2}
.prof__list dt{font-family:var(--serif-en);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);padding-top:.42rem}
.prof__list dd{color:var(--muted)}

@media (max-width:900px){
  .prof{grid-template-columns:1fr;gap:1.8rem}
  .prof__img{aspect-ratio:3/2}
  .prof__wrap{padding-right:.7rem;padding-bottom:.7rem}
  .prof__list{grid-template-columns:1fr;gap:.1rem}
  .prof__list dt{padding-top:.9rem}
  .prof__list dt:first-of-type{padding-top:0}
}

/* ===========================================================
   トップページに変化をつけるための調整
   （同じ2列の繰り返しに見えないようにする）
   =========================================================== */
@media (min-width:901px){

  /* ---------- About：左右非対称・右側を下げる ---------- */
  .about2{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    gap:clamp(2.4rem,6vw,6.5rem);align-items:start}
  .about2__ttl{font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.95}
  .about2__r{padding-top:clamp(3.4rem,9vh,7rem)}
  .about2__r .body{max-width:30em}

  /* ---------- 3つの特徴：段差をつける ---------- */
  .feats > :nth-child(2){margin-top:clamp(2rem,5vh,4rem)}
  .feats > :nth-child(3){margin-top:clamp(4rem,10vh,8rem)}
  .feat:nth-child(2){border-top-color:rgba(197,167,114,.5)}

  /* ---------- モデル：1件ずつ幅と位置を変える ---------- */
  .model{position:relative;border:0;padding:clamp(3.4rem,8vh,6rem) 0}
  .model:first-of-type{border-top:0}
  .model + .model{border-top:1px solid rgba(48,43,41,.1)}
  .model__view{position:relative;z-index:2}
  .model > div:not(.model__view){position:relative;z-index:2}
  .model__big{position:absolute;z-index:1;top:clamp(.5rem,2vh,2rem);
    font-family:var(--serif-en);font-size:clamp(6rem,15vw,13rem);line-height:.78;
    letter-spacing:.02em;color:rgba(197,167,114,.2);pointer-events:none;user-select:none}

  /* 01：写真を大きく、番号は左上に */
  .model:nth-of-type(1){grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
  .model:nth-of-type(1) .model__big{left:-.4rem;top:-1.4rem}

  /* 02：写真は右、やや小さめ。全体を少し下げる */
  .model:nth-of-type(2){grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
  .model:nth-of-type(2) .model__view{transform:translateY(clamp(1rem,3vh,2.6rem))}
  .model:nth-of-type(2) .model__big{right:-.6rem;top:-1rem}

  /* 03：写真をいちばん大きく */
  .model:nth-of-type(3){grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
  .model:nth-of-type(3) .model__big{left:-1.2rem;right:auto;bottom:1rem;top:auto}

  /* 04：文字を広く、写真は小さく右へ */
  .model:nth-of-type(4){grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
  .model:nth-of-type(4) .model__view{transform:translateY(clamp(.6rem,2vh,1.8rem))}
  .model:nth-of-type(4) .model__big{left:auto;right:-1.2rem;bottom:1rem;top:auto}

  /* 文字側も少し下げて、横一直線にしない */
  .model:nth-of-type(odd) > div:last-child{padding-top:clamp(1rem,3vh,2.6rem)}

  /* ---------- 料金：見出しを左に寄せる ---------- */
  .plan{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
  .plan:nth-of-type(2){background:rgba(255,255,255,.4)}

  /* ---------- プロフィール：文字が写真に重なる ---------- */
  .prof{grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:center}
  .prof > .rv:last-child{
    margin-left:clamp(-5rem,-5vw,-2rem);position:relative;z-index:2;
    background:var(--ivory);padding:clamp(2rem,4vw,3.2rem);
    box-shadow:0 20px 50px rgba(48,43,41,.06);
  }
}

/* ---------- スマートフォンでは素直に縦並び ---------- */
@media (max-width:900px){
  .about2__ttl{font-size:clamp(1.4rem,5.6vw,1.9rem)}
  .about2__r{margin-top:1.4rem}
  .model__big{display:none}
}

/* ===========================================================
   ヒーローの流れ星（軽い装飾・画像の上に重ねています）
   =========================================================== */
.stars{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}

/* ---- 流れ星の尾 ---- */
.shoot{
  position:absolute;height:2.5px;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,
    rgba(255,252,240,0) 0%,
    rgba(255,246,220,.5) 30%,
    rgba(255,255,255,1) 100%);
  /* 明るい写真の上でも見えるよう、白い光のまわりに淡い影を重ねています */
  filter:
    drop-shadow(0 0 3px rgba(146,113,64,.55))
    drop-shadow(0 0 7px rgba(255,238,196,1))
    drop-shadow(0 0 16px rgba(197,155,80,.7));
}
/* ---- 先端の「キラン」 ---- */
.shoot::after{
  content:"";position:absolute;right:-3px;top:50%;translate:0 -50%;
  width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:
    0 0 4px 1px rgba(146,113,64,.4),
    0 0 10px 3px rgba(255,250,232,1),
    0 0 26px 9px rgba(197,155,80,.6);
}

/* ページを開いてから1回だけ流れます（くり返しません） */
@keyframes shoot{
  0%   {opacity:0; transform:rotate(var(--ang)) translateX(-14vw) scaleX(.4)}
  16%  {opacity:1; transform:rotate(var(--ang)) translateX(-4vw)  scaleX(1)}
  74%  {opacity:1; transform:rotate(var(--ang)) translateX(26vw)  scaleX(1)}
  100% {opacity:0; transform:rotate(var(--ang)) translateX(40vw)  scaleX(.5)}
}

.shoot{--ang:28deg; top:13%; left:4%; width:240px;
  animation:shoot 2.4s cubic-bezier(.3,0,.25,1) 1.6s both}

/* ---- そっと瞬く小さな光 ---- */
.glint{
  position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:
    0 0 3px 1px rgba(146,113,64,.4),
    0 0 9px 3px rgba(255,250,232,1),
    0 0 20px 7px rgba(197,155,80,.5);
}
@keyframes glint{
  0%,100%{opacity:0;transform:scale(.4)}
  6%     {opacity:.95;transform:scale(1)}
  14%    {opacity:0;transform:scale(.5)}
}
.glint--1{top:18%; left:18%; animation:glint 7s ease-in-out 0.6s infinite}
.glint--2{top:11%; left:52%; animation:glint 9s ease-in-out 3.4s infinite}
.glint--3{top:31%; left:68%; animation:glint 8s ease-in-out 5.2s infinite}
.glint--4{top:22%; left:84%; animation:glint 10s ease-in-out 7.8s infinite}

/* 動きを減らす設定の方には表示しません */
@media (prefers-reduced-motion:reduce){ .stars{display:none} }

@media (max-width:900px){
  .shoot{top:15%; left:2%; width:160px}
  .glint--3{left:60%}
  .glint--4{display:none}
}

/* ===========================================================
   料金（シンプルな A / B / C 構成）
   =========================================================== */
.pricebox{
  max-width:34rem;margin:clamp(2rem,5vh,3.4rem) auto 0;text-align:center;
  padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,4vw,2.4rem);
  background:var(--white);border:1px solid rgba(197,167,114,.55);
}
.pricebox__lead{font-size:.82rem;letter-spacing:.18em;color:var(--muted)}
.pricebox__num{
  font-family:var(--serif-en);font-size:clamp(3rem,7vw,5rem);line-height:1;
  letter-spacing:.02em;margin-top:.7rem;
}
.pricebox__num span{
  font-family:var(--serif-ja);font-size:.3em;letter-spacing:.1em;margin-left:.2em;
  vertical-align:.12em;
}
.pricebox__tax{font-size:.7rem;letter-spacing:.24em;color:var(--faint);margin-top:.6rem}
.pricebox__note{
  font-size:.82rem;line-height:2.1;color:var(--muted);margin-top:1.2rem;
  padding-top:1.1rem;border-top:1px solid var(--line-1);
}

.plans{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line-1);border:1px solid var(--line-1);
  margin-top:clamp(2rem,4.6vh,3rem);
}
.plan2{background:var(--ivory);padding:clamp(1.6rem,3vw,2.2rem)}
.plan2__mark{
  font-family:var(--serif-en);font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;
  letter-spacing:.06em;color:var(--gold);
}
.plan2__name{
  font-family:var(--serif-ja);font-weight:400;
  font-size:clamp(1.02rem,1.35vw,1.2rem);letter-spacing:.09em;line-height:1.9;
  margin-top:1rem;
}
.plan2__en{
  font-family:var(--serif-en);font-style:italic;font-size:.8rem;letter-spacing:.14em;
  color:#6A5A44;margin-top:.35rem;
}
.plan2__lead{
  font-size:.88rem;line-height:2.05;color:var(--charcoal);margin-top:1rem;
  padding-top:.9rem;border-top:1px solid rgba(197,167,114,.45);
}
.plan2__list{margin-top:.8rem;font-size:.8rem;line-height:2.05;color:var(--muted)}
.plan2__list li{list-style:none;padding-left:1rem;position:relative}
.plan2__list li::before{
  content:"";position:absolute;left:0;top:1em;width:.4rem;height:1px;background:var(--gold);
}

@media (max-width:900px){
  .plans{grid-template-columns:1fr}
  .pricebox__num{font-size:clamp(2.6rem,13vw,3.6rem)}
}

/* ===========================================================
   ドメイン・サーバーのご説明カード
   =========================================================== */
.card{
  max-width:50rem;margin:clamp(2rem,5vh,3.4rem) auto 0;background:var(--white);
  border:1px solid rgba(197,167,114,.55);
  padding:clamp(1.8rem,4vw,3rem) clamp(1.4rem,4vw,3rem);
}
.card__h{
  font-family:var(--serif-ja);font-weight:400;
  font-size:clamp(1.14rem,1.9vw,1.6rem);letter-spacing:.1em;line-height:1.9;text-align:center;
}
.card__t{
  font-size:clamp(.88rem,.98vw,.98rem);line-height:2.3;color:var(--muted);
  margin-top:clamp(1.1rem,2.4vh,1.6rem);max-width:34em;margin-inline:auto;
}
.card__t b{font-weight:400;color:var(--charcoal);border-bottom:1px solid var(--gold)}

/* ---- 料金の比較 ---- */
.cmp{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-1);border:1px solid var(--line-1);
  margin-top:clamp(1.6rem,3.4vh,2.4rem);
}
.cmp__col{background:var(--white);padding:clamp(1.2rem,2.6vw,1.8rem);text-align:center}
.cmp__col--main{background:rgba(237,228,215,.5)}
.cmp__label{font-size:.76rem;letter-spacing:.14em;color:var(--faint)}
.cmp__num{
  font-family:var(--serif-ja);font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:.04em;
  margin-top:.8rem;line-height:1.3;
}
.cmp__num span{font-size:.5em;letter-spacing:.08em;margin-left:.2em}
.cmp__num--gray{color:var(--faint)}
.cmp__col--main .cmp__num{color:var(--gold);font-size:clamp(1.9rem,4.4vw,3rem)}
.cmp__note{font-size:.74rem;letter-spacing:.06em;color:var(--faint);margin-top:.7rem;line-height:1.9}

/* ---- アドレスの説明 ---- */
.urlbox{
  margin-top:clamp(1.6rem,3.4vh,2.4rem);padding:clamp(1.2rem,3vw,1.9rem);
  background:rgba(237,228,215,.36);text-align:center;
}
.urlbox__label{font-size:.74rem;letter-spacing:.2em;color:var(--faint)}
.urlbox__url{
  margin-top:1rem;font-family:var(--serif-en);
  font-size:clamp(1rem,2.2vw,1.55rem);letter-spacing:.04em;
  word-break:break-all;line-height:2;
}
.urlbox__fix{color:#8A8077}
.urlbox__free{
  display:inline-block;font-family:var(--sans-ja);font-size:.78em;letter-spacing:.08em;
  color:var(--charcoal);background:var(--white);
  border:1px dashed var(--gold);border-radius:2px;
  padding:.1em .6em;margin:0 .15em;
}
.urlbox__legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;
  margin-top:1.1rem;font-size:.73rem;letter-spacing:.06em;color:var(--muted);
}
.urlbox__legend span{display:inline-flex;align-items:center;gap:.5rem}
.urlbox__mark{width:.85rem;height:.85rem;border:1px solid #B5ACA2;background:#fff;flex:none}
.urlbox__mark--free{border:1px dashed var(--gold)}
.urlbox__ex{
  margin-top:.9rem;font-family:var(--serif-en);font-size:.8rem;letter-spacing:.06em;
  color:var(--faint);
}

.card__voice{
  margin-top:clamp(1.6rem,3.4vh,2.2rem);padding-top:clamp(1.2rem,2.6vh,1.6rem);
  border-top:1px solid rgba(197,167,114,.45);
  font-size:.84rem;line-height:2.2;color:var(--muted);text-align:center;
  max-width:32em;margin-inline:auto;
}

@media (max-width:900px){
  .cmp{grid-template-columns:1fr}
  .urlbox__url{font-size:1rem;line-height:2.2}
  .urlbox__free{display:inline-block;margin:.3em .15em}
}

/* ---------- 追加オプションの明示（打ち合わせの追加など） ---------- */
.addon{
  margin-top:clamp(1.4rem,3vh,2rem);border:1px solid rgba(197,167,114,.55);
  background:var(--white);padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1.2rem,3vw,1.9rem);
}
.addon__row{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 1.4rem;padding-bottom:.9rem;border-bottom:1px solid rgba(197,167,114,.4);
}
.addon__name{font-family:var(--serif-ja);font-size:clamp(1rem,1.3vw,1.16rem);letter-spacing:.09em}
.addon__name small{font-family:var(--sans-ja);font-size:.7rem;color:var(--faint);letter-spacing:.06em;margin-left:.4em}
.addon__price{font-family:var(--serif-ja);font-size:clamp(1.06rem,1.5vw,1.3rem);letter-spacing:.05em;
  white-space:nowrap}
.addon__price small{font-size:.58em;color:var(--faint);letter-spacing:.1em;margin-left:.6em}
.addon__note{font-size:.84rem;line-height:2.15;color:var(--muted);margin-top:.9rem}
.addon__note b{font-weight:400;color:var(--charcoal)}
@media (max-width:900px){
  .addon__row{flex-direction:column;gap:.5rem}
}

/* ===========================================================
   華やかさを足すための装飾（おもにページ後半）
   =========================================================== */

/* ---------- セクションの区切りの飾り ---------- */
.orn{display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:clamp(1.6rem,4vh,2.8rem) var(--pad);background:var(--ivory)}
.orn span{display:block;width:clamp(3rem,10vw,7rem);height:1px;
  background:linear-gradient(90deg,rgba(197,167,114,0),rgba(197,167,114,.75))}
.orn span:last-child{background:linear-gradient(90deg,rgba(197,167,114,.75),rgba(197,167,114,0))}
.orn i{position:relative;width:.5rem;height:.5rem;rotate:45deg;
  border:1px solid var(--gold);background:rgba(197,167,114,.18)}
.orn i::after{content:"";position:absolute;inset:-.28rem;border:1px solid rgba(197,167,114,.32)}

/* ---------- 背景にやわらかな光 ---------- */
.sec--band{position:relative;overflow:hidden}
.sec--band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 40% at 18% 12%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 40% 44% at 88% 82%,rgba(197,167,114,.16) 0%,rgba(197,167,114,0) 70%)}
.sec--band > *{position:relative;z-index:1}
.sec--soft{position:relative;overflow:hidden}
.sec--soft::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 54% 46% at 78% 16%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 70%)}
.sec--soft > *{position:relative;z-index:1}

/* ---------- 月額0円を主役に ---------- */
.zero{position:relative;display:inline-block}
.zero::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(9rem,22vw,15rem);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,250,235,.95) 0%,rgba(197,167,114,.22) 45%,rgba(197,167,114,0) 72%)}
.zero::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(7.6rem,18vw,12rem);aspect-ratio:1;border-radius:50%;z-index:-1;
  border:1px solid rgba(197,167,114,.4)}

/* ---------- 制作の流れ：金の点を光らせる ---------- */
.flow::before{background:linear-gradient(to bottom,
  rgba(197,167,114,0),rgba(197,167,114,.75) 12%,rgba(197,167,114,.75) 88%,rgba(197,167,114,0))}
.step::before{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px var(--ivory), 0 0 0 5px rgba(197,167,114,.35), 0 0 14px 3px rgba(197,167,114,.5)}
.step__h{position:relative}

/* ---------- FAQ：ふれたときに反応する ---------- */
.faq details{transition:background .45s ease}
.faq details[open]{background:rgba(255,255,255,.55)}
.faq summary:hover{color:#6B5A3E}
.faq summary::before{transition:transform .45s ease}
.faq details[open] summary::before{transform:scale(1.25)}

/* ---------- 最後のお問い合わせ：濃い色で締める ---------- */
.sec--dark{position:relative;overflow:hidden;color:#F1E9DC;
  background:linear-gradient(165deg,#3B3430 0%,#302B29 55%,#272220 100%)}
.sec--dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 44% at 22% 16%,rgba(197,167,114,.26) 0%,rgba(197,167,114,0) 70%),
    radial-gradient(ellipse 44% 40% at 82% 84%,rgba(197,167,114,.18) 0%,rgba(197,167,114,0) 70%)}
.sec--dark > *{position:relative;z-index:2}
.sec--dark .kicker{color:#C3B49C}
.sec--dark .kicker::before{background:var(--gold)}
.sec--dark .end__en{color:#FBF6EC}
.sec--dark .body{color:#D6CBBA}
.sec--dark .small{color:#A99C8A}
.sec--dark .btn--fill{background:var(--gold);color:#2A2523;border-color:var(--gold)}
.sec--dark .btn--fill:hover{background:transparent;color:#FBF6EC}
.sec--dark .formnote{background:rgba(255,255,255,.06);border-color:rgba(197,167,114,.7)}
.sec--dark .formnote__h{color:#FBF6EC;border-bottom-color:rgba(197,167,114,.45)}
.sec--dark .formnote__t{color:#D6CBBA}
.darkstars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.darkstars .glint{box-shadow:0 0 8px 3px rgba(255,248,226,.95), 0 0 22px 8px rgba(197,167,114,.55)}

/* ---------- フッターの上に金の線 ---------- */
.foot{position:relative}
.foot::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,rgba(197,167,114,0),rgba(197,167,114,.7),rgba(197,167,114,0))}

@media (max-width:900px){
  .orn{padding:1.4rem 1.4rem}
  .zero::before{width:9rem}
  .zero::after{width:7.6rem}
}

/* ---------- 期間限定のご案内（控えめに） ---------- */
.pricebox{position:relative}
.campaign{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  margin:0 auto clamp(1.6rem,3.4vh,2.2rem);padding-bottom:clamp(1.4rem,3vh,1.9rem);
  border-bottom:1px solid rgba(197,167,114,.4);
}
/* 細い線ではさんだ、小さな英字 */
.campaign__en{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--serif-en);font-style:italic;
  font-size:clamp(.9rem,1.15vw,1.08rem);letter-spacing:.2em;color:#6A5A44;
}
.campaign__en::before,.campaign__en::after{
  content:"";width:clamp(1.6rem,4vw,2.6rem);height:1px;background:rgba(197,167,114,.7);
}
.campaign__main{
  font-size:clamp(.78rem,.92vw,.88rem);letter-spacing:.18em;color:var(--muted);line-height:2;
}

.pricebox__was{
  font-family:var(--serif-ja);font-size:clamp(.95rem,1.15vw,1.08rem);
  letter-spacing:.06em;color:#7A6F64;margin-top:.9rem;
}
.pricebox__was s{text-decoration:none;position:relative}
.pricebox__was s::after{
  content:"";position:absolute;left:-.1em;right:-.1em;top:54%;height:1px;
  background:#A29889;
}
.pricebox__num{margin-top:.5rem}

/* ===========================================================
   販売ページとしてのコントラスト強化
   =========================================================== */

/* ---- ボタン：白抜き文字が読みにくかったので、濃い色に ---- */
.btn--fill{background:var(--charcoal);color:#F7F2E8;border-color:var(--charcoal)}
.btn--fill:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
.btn{border-color:rgba(36,31,30,.4);font-size:.82rem;letter-spacing:.18em;min-height:3.7rem}
.btn:hover{background:var(--charcoal);color:#F7F2E8;border-color:var(--charcoal)}

/* ---- 見出しをもう一段大きく ---- */
.ttl{font-size:clamp(1.55rem,2.8vw,2.5rem);letter-spacing:.09em}
.about2__ttl{font-size:clamp(1.7rem,3.2vw,2.9rem)}
.kicker{color:#6A5A44;font-size:.68rem}
.kicker::before{background:var(--gold-deep);height:1px}

/* ---- 本文をはっきり ---- */
.body{color:var(--muted);font-size:clamp(.95rem,1.05vw,1.05rem);line-height:2.25}
.feat__t,.model__t,.plan__t,.step__t,.faq__a{color:var(--muted)}
.feat__h,.step__h{color:var(--charcoal)}
.small{color:#5E554C}

/* ---- 特徴：番号と枠をしっかり ---- */
.feat{border-top:2px solid var(--gold-deep);padding-top:2.1rem}
.feat__no{color:var(--gold-deep);font-size:1.7rem}
.feat__h{font-size:clamp(1.06rem,1.35vw,1.24rem);line-height:1.95}

/* ---- 料金：いちばん見せたい数字を強く ---- */
.pricebox{border:2px solid var(--gold-deep);box-shadow:0 18px 44px rgba(36,31,30,.1)}
.pricebox__num{color:var(--charcoal);font-size:clamp(3.2rem,7.4vw,5.4rem)}
.pricebox__lead{color:var(--muted);font-weight:400}
.campaign__en{color:var(--gold-deep)}
.campaign__main{color:var(--charcoal);font-size:clamp(.84rem,.98vw,.94rem)}
.plan2__mark{color:var(--gold-deep)}
.plan2__lead{color:var(--charcoal);font-size:clamp(.94rem,1.1vw,1.06rem);
  border-top:1px solid rgba(154,123,58,.5)}
.plans{background:var(--line-1);border-color:var(--line-1)}

/* ---- 流れ：番号をはっきり ---- */
.step__no{color:var(--gold-deep);font-size:.72rem;letter-spacing:.28em}
.flow::before{background:linear-gradient(to bottom,
  rgba(154,123,58,0),rgba(154,123,58,.6) 12%,rgba(154,123,58,.6) 88%,rgba(154,123,58,0))}
.step::before{background:var(--gold-deep);border-color:var(--gold-deep)}

/* ---- 月額0円 ---- */
.zero{color:var(--gold-deep)}
.zero span{color:var(--charcoal)}

/* ---- FAQ ---- */
.faq summary{color:var(--charcoal)}
.faq summary::before{color:var(--gold-deep);font-weight:600}
.faq details{border-bottom:1px solid var(--line-1)}

/* ---- 比較表・カード ---- */
.card{border:2px solid var(--gold-deep)}
.card__h{font-size:clamp(1.24rem,2.1vw,1.75rem)}
.card__t b{border-bottom:2px solid var(--gold-deep)}
.cmp__col--main .cmp__num{color:var(--gold-deep)}
.cmp__num--gray{color:#6B6158}
.cmp__label{color:var(--muted);font-size:.8rem}
.cmp__note{color:#5E554C}
.addon{border:2px solid var(--gold-deep)}

/* ---- 飾りの線も少し濃く ---- */
.orn span{background:linear-gradient(90deg,rgba(154,123,58,0),rgba(154,123,58,.8))}
.orn span:last-child{background:linear-gradient(90deg,rgba(154,123,58,.8),rgba(154,123,58,0))}
.orn i{border-color:var(--gold-deep);background:rgba(154,123,58,.2)}
.hr,.line{background:var(--gold-deep);height:2px}

/* ===========================================================
   書体をひとつに統一したことによる調整
   （丸ゴシックは斜体を持たないので、斜体をやめています）
   =========================================================== */
body,h1,h2,h3,p,li,dt,dd,a,span,button,input,select,textarea,summary{font-style:normal}

/* 英字の見出しは、字間を少しつめて落ち着かせる */
.brand__name{letter-spacing:.3em;font-weight:500}
.brand__sub{letter-spacing:.3em}
.nav a{letter-spacing:.16em;font-weight:400}
.kicker{letter-spacing:.3em;font-weight:500}
.ttl{font-weight:700;letter-spacing:.06em;line-height:1.85}
.ttl-en{letter-spacing:.1em;font-weight:400}
.hero__en{letter-spacing:.06em;font-weight:400}
.hero__title{font-weight:700;letter-spacing:.06em;line-height:1.85}
.end__en,.cta__en,.pagehead__en{letter-spacing:.18em;font-weight:500}
.model__name{letter-spacing:.14em;font-weight:700}
.model__no,.step__no,.item__no,.plan2__en,.svc__en,.item__en,.campaign__en,
.footer__tag,.foot__sub,.urlbox__ex,.prof__en,.bio__en{letter-spacing:.14em}
.pricebox__num,.cmp__num,.zero{font-weight:700;letter-spacing:.02em}
.plan2__mark{font-weight:700;letter-spacing:.04em}
.feat__no{font-weight:700}
.feat__h,.step__h,.plan2__name,.card__h,.svc__name,.item__name,
.prof__name,.bio__name,.addon__name{font-weight:700}
.faq summary{font-weight:500}
.btn{font-weight:500}
.copy,.lead{font-weight:400}

/* 丸ゴシックは線が太めなので、本文の太さを少し戻す */
body{font-weight:400}
.body,.txt,.feat__t,.model__t,.plan__t,.step__t,.faq__a,.small,
.plan2__list,.cmp__note,.urlbox__legend,.addon__note{font-weight:400}

/* 斜体指定が残っていた箇所を、まとめて解除 */
.hero__en,.ttl-en,.h2-en,.plan2__en,.svc__en,.item__en,.campaign__en,
.footer__tag,.tagline,.model__mark span,.bio__en,.prof__en{font-style:normal}

/* ---------- 丸ゴシックは字幅が広いので、見出しを少し小さく ---------- */
.ttl{font-size:clamp(1.34rem,2.4vw,2.05rem);line-height:1.9}
.about2__ttl{font-size:clamp(1.4rem,2.5vw,2.15rem);line-height:1.9}
.hero__title{font-size:clamp(1.6rem,2.5vw,2.45rem)}
.card__h{font-size:clamp(1.16rem,1.8vw,1.5rem)}
.h2{font-size:clamp(1.2rem,1.9vw,1.68rem)}
.end__en,.cta__en{font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:.14em}
.pagehead__en{font-size:clamp(1.7rem,3.4vw,2.7rem);letter-spacing:.16em}
.model__name{font-size:clamp(1.3rem,2.2vw,1.85rem);letter-spacing:.1em}
.brandmark{letter-spacing:.2em}

@media (max-width:900px){
  .ttl{font-size:clamp(1.22rem,4.9vw,1.6rem)}
  .about2__ttl{font-size:clamp(1.22rem,4.9vw,1.6rem)}
  .hero__title{font-size:clamp(1.34rem,5.2vw,1.66rem)}
  .end__en,.cta__en,.pagehead__en{font-size:clamp(1.5rem,7vw,2rem)}
  .model__name{font-size:clamp(1.18rem,5.4vw,1.5rem)}
}
@media (max-width:380px){
  .hero__title{font-size:1.24rem}
  .ttl,.about2__ttl{font-size:1.16rem}
}

/* ---------- 主ボタン：ゴールド地に濃い文字（読みやすさと上品さの両立） ---------- */
.btn--fill{
  background:var(--gold);color:#241F1E;border-color:var(--gold);
  font-weight:700;letter-spacing:.16em;
  box-shadow:0 10px 26px rgba(154,123,58,.28);
}
.btn--fill:hover{
  background:var(--gold-deep);color:#FFFBF2;border-color:var(--gold-deep);
}

/* ===========================================================
   3つの特徴：カード仕立てにして、地味さを解消
   =========================================================== */
.feats{gap:clamp(1.2rem,2.4vw,2rem)}
.feat{
  position:relative;background:var(--white);border:0;border-radius:4px;
  padding:clamp(2.6rem,4vw,3.2rem) clamp(1.5rem,2.6vw,2.2rem) clamp(1.8rem,3vw,2.4rem);
  box-shadow:0 2px 6px rgba(36,31,30,.05), 0 18px 40px rgba(36,31,30,.08);
  text-align:center;
}
/* 上辺の金の帯 */
.feat::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-deep) 50%,var(--gold) 100%);
}
/* うっすら大きな番号を背景に */
.feat::after{
  content:attr(data-no);position:absolute;right:.6rem;bottom:.2rem;
  font-size:5.4rem;font-weight:700;line-height:1;color:rgba(154,123,58,.07);
  pointer-events:none;
}

.feat__icon{
  display:flex;align-items:center;justify-content:center;
  width:4.6rem;height:4.6rem;margin:0 auto;border-radius:50%;
  background:linear-gradient(160deg,#FBF6EC 0%,#F2E7D3 100%);
  border:1px solid rgba(154,123,58,.45);color:var(--gold-deep);
  box-shadow:0 8px 20px rgba(154,123,58,.18);
}
.feat__icon svg{width:2.3rem;height:2.3rem}

.feat__no{
  font-size:.8rem;letter-spacing:.3em;color:var(--gold-deep);
  margin-top:1.1rem;line-height:1;
}
.feat__h{
  margin-top:.9rem;padding-bottom:1rem;position:relative;
  font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.9;
}
.feat__h::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:2.2rem;height:2px;background:var(--gold-deep);
}
.feat__t{margin-top:1rem;text-align:left}

@media (min-width:901px){
  /* 段差は控えめに */
  .feats > :nth-child(2){margin-top:1.8rem}
  .feats > :nth-child(3){margin-top:3.6rem}
}
@media (max-width:900px){
  .feats{gap:1.4rem}
  .feat{padding:2.2rem 1.4rem 1.8rem}
  .feat__icon{width:4rem;height:4rem}
  .feat__icon svg{width:2rem;height:2rem}
  .feats > :nth-child(2),.feats > :nth-child(3){margin-top:0}
}

/* ===========================================================
   配色：白 ＋ ゴールド ＋ 淡いピンク
   =========================================================== */
:root{
  --pink:#F0D3CE;        /* 淡いピンク（線・面） */
  --pink-soft:#FDF6F4;   /* ごく淡いピンク（背景） */
  --pink-deep:#C0837A;   /* 濃いピンク（強調） */
}

body{background:#fff}
.sec--band{background:var(--beige)}
.sec--soft{background:var(--pink-soft)}
.orn{background:#fff}

/* 帯の中の光も、ピンクみを帯びさせる */
.sec--band::before{
  background:
    radial-gradient(ellipse 46% 40% at 18% 12%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 40% 44% at 88% 82%,rgba(197,167,114,.14) 0%,rgba(197,167,114,0) 70%);
}
.sec--soft::before{
  background:radial-gradient(ellipse 54% 46% at 78% 16%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 70%);
}

/* カード類は白のままで、影にピンクみを足して浮かせる */
.feat{box-shadow:0 2px 6px rgba(192,131,122,.08), 0 18px 40px rgba(192,131,122,.14)}
.feat__icon{
  background:linear-gradient(160deg,#FFF8F6 0%,#F6E3DD 100%);
  border-color:rgba(192,131,122,.45);
  box-shadow:0 8px 20px rgba(192,131,122,.2);
}
.feat::after{color:rgba(192,131,122,.1)}

.pricebox{box-shadow:0 18px 44px rgba(192,131,122,.16)}
.model__view{box-shadow:0 22px 48px rgba(192,131,122,.14);border-color:rgba(192,131,122,.2)}
.plan2{background:#fff}
.plans{background:rgba(192,131,122,.24);border-color:rgba(192,131,122,.24)}
.cmp{background:rgba(192,131,122,.24);border-color:rgba(192,131,122,.24)}
.cmp__col{background:#fff}
.cmp__col--main{background:var(--pink-soft)}
.edit{background:rgba(192,131,122,.24);border-color:rgba(192,131,122,.24)}
.edit div{background:#fff}
.urlbox{background:var(--pink-soft)}
.urlbox__free{background:#fff;border-color:var(--gold)}
.note{background:var(--pink-soft);border-color:rgba(192,131,122,.45)}
.faq details[open]{background:var(--pink-soft)}
.step::before{box-shadow:0 0 0 4px #fff, 0 0 0 5px rgba(192,131,122,.3), 0 0 14px 3px rgba(197,167,114,.45)}

/* プロフィールの枠と重なりも、ピンク寄りに */
.prof__frame{border-color:var(--pink-deep)}
.prof > .rv:last-child{background:#fff;box-shadow:0 20px 50px rgba(192,131,122,.14)}
.about__img::after{border-color:rgba(192,131,122,.4)}

/* 区切りの飾りを、金とピンクの2色に */
.orn i{border-color:var(--pink-deep);background:rgba(240,211,206,.55)}

/* 最後のお問い合わせは、濃いローズ寄りの色で締める */
.sec--dark{
  color:#FBF3F1;
  background:linear-gradient(165deg,#4A3A38 0%,#3A2C2B 55%,#2E2322 100%);
}
.sec--dark::before{
  background:
    radial-gradient(ellipse 50% 44% at 22% 16%,rgba(197,167,114,.3) 0%,rgba(197,167,114,0) 70%),
    radial-gradient(ellipse 44% 40% at 82% 84%,rgba(240,211,206,.2) 0%,rgba(240,211,206,0) 70%);
}
.sec--dark .body{color:#E4D5D1}
.sec--dark .kicker{color:#D7BEB8}
.sec--dark .small{color:#B59F9A}
.foot{background:#3A2C2B}

/* 金額が折り返さないように */
.pricebox__num{white-space:nowrap}
.pricebox__num span{white-space:nowrap}
@media (max-width:900px){
  .pricebox__num{font-size:clamp(2.3rem,11vw,3.4rem)}
  .cmp__num{font-size:clamp(1.3rem,6vw,1.9rem);white-space:nowrap}
  .cmp__col--main .cmp__num{font-size:clamp(1.9rem,9vw,2.6rem)}
}

/* ===========================================================
   3つの特徴のカードを、大理石に
   =========================================================== */
.feat{
  background-color:#FDFAF8;
  background-image:url("marble.svg");
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 8px rgba(192,131,122,.1),
    0 20px 44px rgba(192,131,122,.18);
}
/* 3枚それぞれ、石の柄をずらす */
.feats > .feat:nth-child(1){background-position:18% 22%}
.feats > .feat:nth-child(2){background-position:62% 58%}
.feats > .feat:nth-child(3){background-position:34% 86%}

/* 石の上でも読みやすいよう、アイコンの円は白く */
.feat__icon{
  background:linear-gradient(160deg,#FFFFFF 0%,#FBF3EF 100%);
  border-color:rgba(197,167,114,.6);
  box-shadow:0 8px 20px rgba(192,131,122,.22), 0 1px 0 rgba(255,255,255,.9) inset;
}
/* 背景の大きな番号は控えめに */
.feat::after{color:rgba(150,120,110,.09)}

/* ===========================================================
   料金の比較：0円のほうを主役にする
   =========================================================== */
.cmp{
  grid-template-columns:1fr auto 1fr;
  background:transparent;border:0;gap:0;align-items:stretch;
}
/* 左：ふつうの場合（控えめに） */
.cmp__col{
  background:#FBF7F5;border:1px solid rgba(192,131,122,.28);
  display:flex;flex-direction:column;justify-content:center;
}
.cmp__col .cmp__label{color:#7A6F68;font-size:.76rem;letter-spacing:.1em;line-height:1.9}
.cmp__num--gray{
  font-size:clamp(1.15rem,1.8vw,1.5rem);color:#8A7F78;margin-top:.7rem;font-weight:400;
}
.cmp__num--gray s{text-decoration:none;position:relative;white-space:nowrap}
.cmp__num--gray s::after{
  content:"";position:absolute;left:-.1em;right:-.1em;top:54%;height:2px;
  background:#B58E86;rotate:-4deg;
}
.cmp__col .cmp__note{color:#8A7F78;font-size:.72rem;margin-top:.6rem}

/* 矢印 */
.cmp__arrow{display:flex;align-items:center;justify-content:center;padding:0 clamp(.6rem,1.6vw,1.4rem)}
.cmp__arrow span{
  display:block;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--gold);position:relative;box-shadow:0 6px 16px rgba(154,123,58,.35);
}
.cmp__arrow span::after{
  content:"";position:absolute;left:50%;top:50%;translate:-62% -50%;rotate:-45deg;
  width:.6rem;height:.6rem;border-right:2px solid #fff;border-bottom:2px solid #fff;
}

/* 右：このサービス（主役） */
.cmp__col--main{
  background:linear-gradient(165deg,#FFFDF8 0%,#FDF4EF 100%);
  border:2px solid var(--gold);
  box-shadow:0 14px 34px rgba(154,123,58,.22);
  position:relative;
}
.cmp__badge{
  display:inline-block;margin:0 auto;padding:.34rem 1.1rem .38rem;
  background:var(--gold);color:#241F1E;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;border-radius:2px;
}
.cmp__col--main .cmp__num{
  font-size:clamp(2.8rem,6.4vw,4.4rem)!important;color:var(--gold-deep);
  margin-top:.8rem;line-height:1;font-weight:700;
}
.cmp__col--main .cmp__num span{font-size:.36em;margin-left:.1em;color:var(--charcoal)}
.cmp__col--main .cmp__note{
  color:var(--charcoal);font-size:.8rem;font-weight:400;margin-top:.9rem;line-height:1.95;
}

@media (max-width:900px){
  .cmp{grid-template-columns:1fr;gap:0}
  .cmp__arrow{padding:.7rem 0}
  .cmp__arrow span{rotate:90deg}
  .cmp__col--main .cmp__num{font-size:clamp(2.6rem,13vw,3.6rem)!important}
}

/* ===========================================================
   游ゴシックに合わせた調整
   （游ゴシックは線が細いので、太さを一段上げています）
   =========================================================== */
body{font-weight:500}
.body,.txt,.feat__t,.model__t,.plan__t,.step__t,.faq__a,.small,
.plan2__list,.cmp__note,.urlbox__legend,.addon__note,.lead,.copy,
.hero__sub,.footer__note,.foot__note{font-weight:500}

/* 見出しははっきり太く */
.ttl,.about2__ttl,.hero__title,.h2,.feat__h,.step__h,.plan2__name,
.card__h,.svc__name,.item__name,.prof__name,.bio__name,.addon__name,
.pricebox__num,.cmp__num,.zero,.plan2__mark,.feat__no,.model__name{font-weight:700}

/* 英字まわりは字間をやや広めに */
.brand__name{letter-spacing:.36em;font-weight:500}
.nav a{letter-spacing:.2em}
.kicker{letter-spacing:.34em}
.end__en,.cta__en,.pagehead__en{letter-spacing:.22em}
.ttl-en,.hero__en{letter-spacing:.12em;font-weight:500}

/* 游ゴシックは字幅が狭いので、見出しを少し大きく戻す */
.ttl{font-size:clamp(1.42rem,2.6vw,2.25rem)}
.about2__ttl{font-size:clamp(1.5rem,2.8vw,2.4rem)}
.hero__title{font-size:clamp(1.7rem,2.7vw,2.7rem)}
@media (max-width:900px){
  .ttl,.about2__ttl{font-size:clamp(1.3rem,5.2vw,1.72rem)}
  .hero__title{font-size:clamp(1.42rem,5.6vw,1.8rem)}
}

/* ===========================================================
   プロフィール写真は控えめな大きさに
   =========================================================== */
@media (min-width:901px){
  .prof{grid-template-columns:minmax(0,30fr) minmax(0,70fr);gap:clamp(2rem,4.4vw,3.6rem)}
  .prof__wrap{max-width:17rem}
}
.prof__img{aspect-ratio:1/1}
.prof__frame{translate:clamp(.55rem,1.2vw,.9rem) clamp(.55rem,1.2vw,.9rem)}

@media (max-width:900px){
  .prof{grid-template-columns:1fr}
  .prof__wrap{max-width:11.5rem;margin:0 auto}
  .prof__img{aspect-ratio:1/1}
}

/* ---------- モデル名の由来 ---------- */
.model__origin{
  display:inline-block;margin-top:.9rem;padding:.5rem .9rem;
  background:var(--pink-soft);border-left:2px solid var(--gold);
  font-size:.78rem;letter-spacing:.06em;line-height:1.95;color:var(--muted);
}

/* 5件目（ARCTURUS）の並び */
@media (min-width:901px){
  .model:nth-of-type(5){grid-template-columns:minmax(0,60fr) minmax(0,40fr)}
  .model:nth-of-type(5) .model__big{left:-.6rem;top:-1.2rem;right:auto;bottom:auto}
}

/* 金額を外した「ちょこっと変更」の見た目を整える */
.edit b{font-size:.92rem;line-height:1.95}
.edit small{margin-top:.8rem;font-size:.78rem;line-height:2}
.formnote__t b{font-weight:400;color:var(--charcoal)}

/* ---------- モデルのプレビューを、デモのヒーローに近づける ---------- */
.model__mark--star{align-items:flex-end;text-align:right;padding-right:7%}
.model__mark--star b{line-height:1.05}
.model__mark--star b+b{margin-top:-.32rem}
.model__mark--star span{margin-top:.15rem}
.model__mark2{color:#C98F84}
.model__eyebrow{font-size:clamp(.44rem,.62vw,.58rem);letter-spacing:.3em;
  text-transform:uppercase;opacity:.75;margin-bottom:.3rem}
/* 写真はそのままの美しさを活かし、文字側にうすいにじみを付けます */
.model__shot--photo .model__mark{z-index:1;
  text-shadow:0 0 .5em rgba(255,255,255,.9),0 0 1.4em rgba(255,255,255,.7)}
/* 暗い写真の上では、白い文字に暗いにじみを付けます */
.model__shot--photo-dark .model__mark{z-index:1;
  text-shadow:0 0 .5em rgba(10,16,34,.9),0 0 1.4em rgba(10,16,34,.75)}

/* ---------- プロフィールの引用（16年続けられた理由） ---------- */
.prof__quote{font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:2.15;letter-spacing:.06em;
  color:var(--charcoal);margin-top:clamp(1.5rem,3vh,2.1rem);
  padding:clamp(1rem,2.2vh,1.4rem) 0 clamp(1rem,2.2vh,1.4rem) clamp(1.1rem,2.4vw,1.6rem);
  border-left:2px solid var(--gold)}

/* ---------- SNSの先に「住所」を持つ ---------- */
.addr__flow{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;
  gap:clamp(.8rem,2vw,1.6rem);margin-top:clamp(2.2rem,4.5vh,3.2rem)}
.addr__step{flex:1 1 13rem;max-width:17rem;background:var(--pink-soft);
  border:1px solid rgba(197,167,114,.32);
  padding:clamp(1.2rem,2.6vh,1.7rem) clamp(1rem,2.2vw,1.4rem);
  display:flex;flex-direction:column;align-items:center;gap:.5rem}
.addr__step--last{background:#FFFFFF;border-color:var(--gold);
  box-shadow:0 10px 30px rgba(154,123,58,.13)}
.addr__no{font-family:var(--serif-en);font-size:.72rem;letter-spacing:.3em;color:#896D34}
.addr__h{font-weight:500;font-size:clamp(.96rem,1.25vw,1.08rem);letter-spacing:.06em;
  color:var(--charcoal);line-height:1.8}
.addr__t{font-style:normal;font-size:.84rem;line-height:1.95;color:var(--muted)}
.addr__arrow{align-self:center;font-style:normal;color:var(--gold);font-size:1.1rem}
@media (max-width:760px){
  .addr__flow{flex-direction:column;align-items:stretch}
  .addr__step{max-width:none}
  .addr__arrow{transform:rotate(90deg)}
}

/* ---------- 「SNSの先に住所を」の締めの一文 ---------- */
.addr__close{position:relative;display:inline-block;
  margin-top:clamp(2.2rem,4.5vh,3.2rem);padding-top:clamp(1.6rem,3.2vh,2.2rem);
  font-size:clamp(1.14rem,1.85vw,1.6rem);line-height:2;letter-spacing:.08em;
  font-weight:500;color:var(--charcoal)}
.addr__close::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:clamp(2.6rem,5vw,4rem);height:1px;background:var(--gold)}

/* ---------- モデル一覧：会員ページの案内 ---------- */
.model__opt{margin-top:1.4rem;padding:clamp(1rem,2.2vw,1.3rem) clamp(1.1rem,2.4vw,1.5rem);
  background:var(--pink-soft);border:1px solid rgba(197,167,114,.42)}
.model__opt-h{display:flex;align-items:flex-start;gap:.6rem;
  font-size:.88rem;font-weight:500;line-height:1.85;letter-spacing:.04em;color:var(--charcoal)}
.model__opt-h svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.35em;color:#896D34}
.model__opt-t{font-size:.82rem;line-height:2.05;color:var(--muted);margin-top:.7rem}
.model__opt-n{font-size:.76rem;line-height:1.95;color:var(--muted);margin-top:.8rem;
  padding-top:.7rem;border-top:1px dotted rgba(197,167,114,.42)}

/* ---------- プロフィールの小見出しと、経歴の表 ---------- */
.prof__h{font-size:clamp(1.06rem,1.6vw,1.3rem);font-weight:500;letter-spacing:.08em;
  line-height:1.95;color:var(--charcoal);margin-top:clamp(1.8rem,3.6vh,2.4rem)}
.prof__h--2{margin-top:clamp(2.4rem,5vh,3.2rem);padding-top:clamp(1.6rem,3.2vh,2.2rem);
  border-top:1px solid rgba(197,167,114,.32)}
.prof__label{font-family:var(--serif-en);font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);
  margin-top:clamp(2.4rem,5vh,3.2rem);padding-top:clamp(1.6rem,3.2vh,2.2rem);
  border-top:1px solid rgba(197,167,114,.32)}
.prof__list dt small{display:block;font-family:var(--font);font-size:.68rem;
  letter-spacing:.08em;text-transform:none;color:var(--muted);margin-top:.2rem}

/* 日本語は文節で折り返します（対応していない環境では従来どおり） */
.body,.txt,.prof__h,.faq__a,.small,.feat__t,.plan2__li,.card__t{word-break:auto-phrase}

/* ---------- もう一つのパターン（名刺とQRコード） ---------- */
.alt{max-width:44em;margin:clamp(2.2rem,4.8vh,3rem) auto 0;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);align-items:center;
  background:var(--pink-soft);border:1px solid rgba(197,167,114,.42);
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3.2vw,2.2rem)}
.alt__card{width:clamp(8rem,13vw,10rem)}
.alt__card svg{width:100%;height:auto;display:block}
.alt__h{font-size:.94rem;font-weight:500;letter-spacing:.05em;line-height:1.85;
  color:var(--charcoal);padding-bottom:.6rem;margin-bottom:.7rem;
  border-bottom:1px solid rgba(197,167,114,.4)}
.alt__t{font-size:.86rem;line-height:2.1;color:var(--muted)}
@media (max-width:620px){
  .alt{grid-template-columns:1fr;justify-items:center;text-align:center}
  .alt__card{width:min(100%,12rem)}
  .alt__h{width:100%;text-align:center}
}