@charset "utf-8";
/* ==========================================================================
   L.U.X.I Studio / pricing.css（2026-09-28 新設）
   料金表（/pricing/）専用。studio.css の後に読む。接頭辞は pr-
   色・余白・文字の大きさは studio.css のトークンだけを使い、ここでは新しいトークンを作らない。
   font-size は var(--fs-x, 天井値) の形で書く（check_lp.py が var() を解かないため）。
   目次
     1. ヒーローの補足（チップ）   6. 月々のご相談カード
     2. ページ内の目次             7. 修正対応（2列・約束・宣言）
     3. 注記の箱                   8. 制作の流れ
     4. Web制作プランのカード      9. よくあるご質問
     5. 比較表／動画の料金の端末  10. CTA の本文・フッターの注記
   ========================================================================== */

/* 共通の線画アイコン（SVG の use） */
.pr-ic{
  flex:none;
  width:18px; height:18px;
  color:var(--gold-400);
}

/* ---------- 1. ヒーローの補足 ---------- */
.pr-hero__flex{ max-width:30em; margin-top:var(--sp-3); padding-top:0; }
/* 手前のスマホが、ノートPCに映る炭音LPの屋号に重ならないよう右へ寄せる */
@media (min-width:960px){
  .pr-hero .st-stage__laptop{ left:-3%; }
  .pr-hero .st-stage__phone--1{ left:52%; }
  .pr-hero .st-stage__phone--2{ left:70%; }
  .pr-hero .st-stage__phone--3{ left:84%; }
  .pr-hero .st-hero__lead{ max-width:26em; }
}
.pr-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-5);
}
.pr-chips li{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.3em 1.1em .3em .85em;
  border:1px solid var(--line-gold);
  border-radius:var(--r-pill);
  background-color:rgba(11,26,46,.45);
  color:var(--ivory);
  font-size:var(--fs-body,1rem);
  line-height:1.6;
}
.pr-stage-link:focus-visible{ outline-offset:6px; }

/* ---------- 2. ページ内の目次（錠剤型のリンク） ---------- */
.pr-jump{
  position:relative;
  padding-block:var(--sp-5);
  border-top:1px solid var(--line-gold);
  border-bottom:1px solid var(--line-faint);
  background:var(--navy-950);
}
.pr-jump .st-tabs{ justify-content:center; margin-bottom:0; }
@media (max-width:759.98px){
  .pr-jump .st-tabs{ justify-content:flex-start; }
}

/* ---------- 3. 注記の箱 ---------- */
.pr-notice{
  margin-top:var(--sp-6);
  padding:var(--sp-5) clamp(20px,2.4vw,32px);
  border:1px solid var(--line-gold);
  border-left:3px solid var(--gold-400);
  border-radius:var(--r-s);
  background:var(--grad-surface);
}
.pr-notice__title{
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:var(--sp-2);
  font-family:var(--ff-mincho);
  font-size:var(--fs-lead,1.25rem);
  font-weight:600;
  letter-spacing:var(--tr-mincho);
  color:var(--gold-300);
}
.pr-notice__text{ color:var(--ivory); }
.pr-visual-note{ margin-top:var(--sp-4); }

/* ---------- 4. Web制作プランのカード ---------- */
.pr-plans{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-5);
  align-items:stretch;
  margin-top:var(--sp-6);
}
@media (max-width:1199.98px){ .pr-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:719.98px){ .pr-plans{ grid-template-columns:minmax(0,1fr); } }
/* スマホ幅: 弧の線がリード文を横切らないよう、端末の段まで下げる */
@media (max-width:719.98px){ .pr-hero .st-hero__arc{ top:50%; } }
.pr-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  min-width:0;
  padding:clamp(20px,2vw,28px);
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:var(--grad-surface);
  box-shadow:var(--sh-card);
}
/* 以前の料金表で強調していた 10万円のプラン。理由のない「人気」札は付けない */
.pr-plan--pick{
  border-color:transparent;
  background:
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%) padding-box,
    var(--grad-gold) border-box;
  box-shadow:var(--sh-glow),var(--sh-card);
}
.pr-plan__media{
  overflow:hidden;
  aspect-ratio:3/2;
  border:1px solid var(--line-faint);
  border-radius:var(--r-s);
  background:var(--ivory);
}
.pr-plan__media img{ width:100%; height:100%; object-fit:cover; }
.pr-kind{
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  font-weight:500;
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
.pr-plan__name{ font-size:var(--fs-h3,1.625rem); color:var(--ivory); }
.pr-yen{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0 .2em;
  font-family:var(--ff-mincho);
  font-size:var(--fs-h3,1.625rem);
  line-height:1.15;
  color:var(--gold-300);
}
.pr-yen strong{
  font-family:var(--ff-latin);
  font-size:var(--fs-price,4rem);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--gold-300);
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pr-tax{
  margin-right:.5em;
  font-family:var(--ff-gothic);
  font-size:var(--fs-body,1rem);
  color:var(--ivory-mute);
}
.pr-plan__for{
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line-faint);
  border-radius:var(--r-s);
  background-color:rgba(244,238,226,.05);
  color:var(--ivory);
  font-weight:500;
  line-height:1.8;
}
.pr-label{
  display:block;
  margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line-faint);
  font-size:var(--fs-body,1rem);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--gold-400);
}
.pr-checks{ display:grid; gap:var(--sp-2); }
.pr-checks li{ display:flex; gap:.6em; align-items:flex-start; line-height:1.8; color:var(--ivory); }
.pr-checks .pr-ic{ margin-top:.3em; }
.pr-plan__prep{ color:var(--ivory-mute); line-height:1.8; }
.pr-plan__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-2) var(--sp-3);
  margin-top:auto;
  padding-top:var(--sp-4);
  border-top:1px solid var(--line-faint);
}
.pr-plan__meta dt{
  flex:none;
  padding:0 .8em;
  border:1px solid var(--line-gold);
  border-radius:var(--r-pill);
  color:var(--gold-300);
  font-weight:700;
  letter-spacing:.08em;
}
.pr-plan__meta dd{ color:var(--ivory-mute); }

/* ---------- 5a. 比較表・追加作業の表 ---------- */
.pr-table-block{ margin-top:var(--sp-7); }
.pr-scroll-hint{ display:none; margin-bottom:var(--sp-2); color:var(--ivory-mute); }
@media (max-width:859.98px){ .pr-scroll-hint{ display:block; } }
.pr-table-wrap{
  position:relative; /* 読み上げ用の caption を枠の中に留める */
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:var(--navy-950);
  box-shadow:var(--sh-card);
  scrollbar-color:var(--gold-600) transparent;
}
.pr-table-wrap:focus-visible{ outline-offset:4px; }
.pr-table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--fs-body,1rem);
}
.pr-table caption{
  caption-side:top;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line-gold);
  text-align:left;
  font-family:var(--ff-mincho);
  font-size:var(--fs-lead,1.25rem);
  font-weight:600;
  letter-spacing:var(--tr-mincho);
  color:var(--gold-300);
}
.pr-table th,
.pr-table td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line-faint);
  text-align:center;
  vertical-align:middle;
  line-height:1.7;
  color:var(--ivory);
}
.pr-table thead th{
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--line-gold);
  background:var(--navy-700);
  color:var(--gold-200);
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
}
.pr-table thead th:first-child{ position:sticky; left:0; z-index:3; text-align:left; }
.pr-table tbody th{
  position:sticky;
  left:0;
  z-index:2;
  border-right:1px solid var(--line-gold);
  background:var(--navy-800);
  text-align:left;
  font-weight:700;
  white-space:nowrap;
}
.pr-table tbody tr:nth-child(even) td{ background-color:rgba(244,238,226,.035); }
.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td{ border-bottom:0; }
/* 追加作業の表は左寄せ・先頭の列を固定しない */
.pr-table--opt{ min-width:660px; }
.pr-table--opt th,
.pr-table--opt td,
.pr-table--opt thead th{ text-align:left; }
.pr-table--opt thead th:first-child,
.pr-table--opt tbody th{ position:static; }
.pr-table--opt tbody th{ min-width:220px; white-space:normal; }
/* スマホは固定する先頭の列を細くして、横に流れる列の幅を残す */
@media (max-width:759.98px){
  .pr-table{ min-width:640px; }
  .pr-table thead th:first-child,
  .pr-table tbody th{ width:6.5em; min-width:6.5em; white-space:normal; }
  .pr-table--opt tbody th{ width:9em; min-width:9em; }
}

/* ---------- 5b. 動画の料金カードの上に置く端末（ノートPC＋傾いたスマホ） ---------- */
.pr-vmedia{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:clamp(250px,20vw,300px);
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  border:1px solid var(--line-faint);
  border-radius:var(--r-s);
  background:
    radial-gradient(70% 42% at 50% 100%,rgba(217,188,122,.2) 0%,rgba(217,188,122,0) 70%),
    var(--navy-950);
}
.pr-vmedia__item{
  position:relative;
  display:flex;
  height:100%;
  color:inherit;
  text-decoration:none;
  border-radius:var(--r-m);
}
.pr-vmedia__item > .st-phone{ width:auto; height:100%; transition:transform .6s var(--ease); }
.pr-vmedia__item--l{ z-index:2; transform:perspective(1200px) rotateY(10deg) rotate(-6deg); }
.pr-vmedia__item--r{ z-index:1; height:90%; margin-left:-4%; transform:perspective(1200px) rotateY(-10deg) rotate(6deg); }
.pr-vmedia__item--laptop{ width:100%; height:auto; }
.pr-vmedia__item--laptop > .st-laptop{ transition:transform .6s var(--ease); }
.pr-vmedia__item:hover > .st-phone,
.pr-vmedia__item:focus-visible > .st-phone,
.pr-vmedia__item:hover > .st-laptop,
.pr-vmedia__item:focus-visible > .st-laptop{ transform:translateY(-5px); }
.pr-vmedia__item:focus-visible{ outline-offset:6px; }
.pr-vmedia .st-play{ width:44px; }
.pr-vmedia__item:hover .st-play,
.pr-vmedia__item:focus-visible .st-play{
  border-color:var(--gold-300);
  background-color:rgba(201,164,92,.4);
}
/* 2つ目の料金（月4本・LP制作と同時）は少し小さく、細線で区切る */
.pr-num2{ padding-top:var(--sp-3); border-top:1px solid var(--line-faint); }
.pr-num2 strong{ font-size:var(--fs-h2,3.25rem); }
.pr-vlink{ align-self:flex-start; margin-top:auto; }
.pr-vlink + .st-flex-note{ margin-top:0; }
.pr-more{ display:flex; justify-content:center; margin-top:var(--sp-6); }

/* ---------- 6. 公開後のご相談カード ---------- */
.pr-mcards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-5);
}
@media (max-width:959.98px){ .pr-mcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639.98px){ .pr-mcards{ grid-template-columns:minmax(0,1fr); } }
.pr-mcard{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  min-width:0;
  padding:clamp(20px,2.2vw,32px);
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:var(--grad-surface);
  box-shadow:var(--sh-card);
}
.pr-mcard .pr-plan__media{ margin-bottom:var(--sp-2); }
.pr-mcard__name{ font-size:var(--fs-h3,1.625rem); color:var(--ivory); }
.pr-mcard__price{
  font-family:var(--ff-mincho);
  font-size:var(--fs-lead,1.25rem);
  font-weight:600;
  letter-spacing:var(--tr-mincho);
  color:var(--gold-300);
}
.pr-mcard__text{ color:var(--ivory-mute); }

/* ---------- 7. 修正対応 ---------- */
.pr-rev-figure{
  display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:var(--sp-5);
  align-items:center;
  margin-bottom:var(--sp-6);
}
.pr-rev-figure img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border:1px solid var(--line-faint);
  border-radius:var(--r-s);
  background:var(--ivory);
}
.pr-rev-figure figcaption{ color:var(--ivory); line-height:1.9; }
.pr-rev{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-5);
}
.pr-rev__col{
  padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--line-gold);
  border-top:3px solid var(--gold-400);
  border-radius:var(--r-m);
  background:var(--grad-surface);
  box-shadow:var(--sh-card);
}
.pr-rev__col--paid{ border-top-color:var(--steel-300); }
.pr-rev__title{
  display:flex;
  align-items:flex-start;
  gap:.6em;
  margin-bottom:var(--sp-4);
  font-size:var(--fs-h3,1.625rem);
  color:var(--gold-300);
}
.pr-rev__col--paid .pr-rev__title{ color:var(--ivory); }
.pr-rev__title .pr-ic{ width:24px; height:24px; margin-top:.2em; }
.pr-rev__col--paid .pr-ic{ color:var(--steel-300); }
.pr-rev__list li{
  display:flex;
  gap:.7em;
  align-items:flex-start;
  padding-block:var(--sp-3);
  border-bottom:1px dashed var(--line-faint);
  line-height:1.85;
  color:var(--ivory);
}
.pr-rev__list li:first-child{ padding-top:0; }
.pr-rev__list li:last-child{ padding-bottom:0; border-bottom:0; }
.pr-rev__list .pr-ic{ margin-top:.3em; }
.pr-rules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-5);
  margin-top:var(--sp-6);
}
.pr-rule{
  display:flex;
  gap:var(--sp-4);
  align-items:flex-start;
  padding:var(--sp-5);
  border:1px solid var(--line-faint);
  border-radius:var(--r-m);
  background-color:rgba(11,26,46,.5);
}
.pr-rule__n{
  display:grid;
  place-items:center;
  flex:none;
  width:44px; height:44px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  font-family:var(--ff-latin);
  font-size:var(--fs-lead,1.25rem);
  line-height:1;
  color:var(--gold-300);
}
.pr-rule p{ color:var(--ivory); line-height:1.85; }
.pr-promise{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:var(--sp-6);
  overflow:hidden;
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:linear-gradient(160deg,var(--navy-800) 0%,var(--navy-950) 100%);
}
.pr-promise li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-5);
  text-align:center;
}
.pr-promise li + li{ border-left:1px solid var(--line-gold); }
.pr-promise__icon{
  display:grid;
  place-items:center;
  width:60px; height:60px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(217,188,122,.18) 0%,rgba(217,188,122,0) 70%);
}
.pr-promise__icon .pr-ic{ width:28px; height:28px; }
.pr-promise span:not(.pr-promise__icon){
  font-family:var(--ff-mincho);
  font-size:var(--fs-lead,1.25rem);
  font-weight:600;
  line-height:1.7;
  color:var(--ivory);
}
@media (max-width:859.98px){
  .pr-rev-figure,
  .pr-rev,
  .pr-rules{ grid-template-columns:minmax(0,1fr); }
  .pr-promise{ grid-template-columns:minmax(0,1fr); }
  .pr-promise li{ flex-direction:row; text-align:left; padding:var(--sp-5); }
  .pr-promise li + li{ border-left:0; border-top:1px solid var(--line-gold); }
  .pr-promise__icon{ flex:none; }
}

/* ---------- 8. 制作の流れ ---------- */
.pr-flow{
  position:relative;
  display:grid;
  gap:var(--sp-5);
  max-width:980px;
  margin-inline:auto;
}
.pr-flow::before{
  content:"";
  position:absolute;
  left:23px; top:24px; bottom:24px;
  width:1px;
  background:linear-gradient(180deg,var(--gold-500) 0%,rgba(201,164,92,.15) 100%);
}
/* 図のない工程も、文字の列を図のある工程とそろえる */
.pr-step{
  position:relative;
  display:grid;
  grid-template-columns:48px 200px minmax(0,1fr);
  gap:var(--sp-4) var(--sp-5);
  align-items:center;
}
.pr-step > div{ grid-column:3; }
.pr-step__n{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:48px; height:48px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  background:var(--navy-900);
  font-family:var(--ff-latin);
  font-size:var(--fs-lead,1.25rem);
  line-height:1;
  color:var(--gold-300);
}
.pr-step__img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border:1px solid var(--line-faint);
  border-radius:var(--r-s);
  background:var(--ivory);
  filter:brightness(.82) saturate(.85); /* 昼の明るい挿絵を夜の紺になじませる */
}
.pr-step__t{
  font-family:var(--ff-mincho);
  font-size:var(--fs-lead,1.25rem);
  font-weight:600;
  letter-spacing:var(--tr-mincho);
  color:var(--ivory);
}
.pr-step__d{ margin-top:var(--sp-1); color:var(--ivory-mute); }
.pr-flow-note{ max-width:980px; margin:var(--sp-6) auto 0; color:var(--ivory-mute); }
@media (max-width:639.98px){
  .pr-step{ grid-template-columns:48px minmax(0,1fr); }
  .pr-step__n{ grid-row:1; align-self:start; }
  .pr-step__img{ grid-column:2; max-width:320px; }
  .pr-step > div{ grid-column:2; }
}

/* ---------- 9. よくあるご質問 ---------- */
.pr-faq{ display:grid; gap:var(--sp-3); max-width:920px; margin-inline:auto; }
.pr-faq__item{
  overflow:hidden;
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:var(--grad-surface);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pr-faq__item[open]{ border-color:var(--gold-500); box-shadow:var(--sh-glow); }
.pr-faq__item summary{
  display:flex;
  gap:var(--sp-4);
  align-items:flex-start;
  padding:var(--sp-4) var(--sp-5);
  list-style:none;
  cursor:pointer;
  font-weight:700;
  line-height:1.75;
  color:var(--ivory);
}
.pr-faq__item summary::-webkit-details-marker{ display:none; }
.pr-faq__item summary:hover{ color:var(--gold-200); }
.pr-q,
.pr-a{
  display:grid;
  place-items:center;
  flex:none;
  min-width:44px;
  height:30px;
  padding-inline:.4em;
  border-radius:var(--r-s);
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  font-weight:600;
  line-height:1;
}
.pr-q{ background:var(--grad-gold); color:var(--navy-900); }
.pr-a{ border:1px solid var(--gold-500); color:var(--gold-300); }
.pr-chev{
  flex:none;
  width:20px; height:20px;
  margin-top:.3em;
  margin-left:auto;
  color:var(--gold-400);
  transition:transform var(--dur) var(--ease);
}
.pr-faq__item[open] .pr-chev{ transform:rotate(180deg); }
.pr-faq__a{
  display:flex;
  gap:var(--sp-4);
  align-items:flex-start;
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
  border-top:1px solid var(--line-faint);
}
.pr-faq__a p{ color:var(--ivory-mute); line-height:1.95; }

/* ---------- 10. CTA の本文・フッターの注記 ---------- */
.pr-cta-body{
  max-width:42em;
  margin:0 auto var(--sp-6);
  text-align:center;
  font-size:var(--fs-lead,1.25rem);
  color:var(--ivory-mute);
}
/* 金の曲線が文字の裏を通るので、この一行だけ小さな下地を敷く */
.pr-cta-small{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin:var(--sp-4) auto 0;
  padding:.3em 1em;
  border-radius:var(--r-s);
  background-color:rgba(6,15,28,.72);
  text-align:center;
  color:var(--ivory-mute);
}
.pr-cta-small a{ color:var(--gold-300); }
.pr-foot-notes{ display:grid; gap:var(--sp-1); }
.pr-foot-notes li{ position:relative; padding-left:1.1em; }
.pr-foot-notes li::before{
  content:"";
  position:absolute;
  left:0; top:.85em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold-500);
}

/* 2026-09-29 トップから移したガイド2本への案内 */
.pr-guides{ max-width:920px; margin:var(--sp-6) auto 0; color:var(--ivory-mute); line-height:1.9; }
.pr-guides a{ color:var(--gold-300); text-underline-offset:.25em; }