@charset "utf-8";

/* ========= 基本トークン ========= */
:root{
  /* ゴールドグラデ（外枠） */
  --gold-a:#d7b67a;
  --gold-b:#f0e2c6;
  --gold-c:#b9955c;
  --gold-line:#c7a162;

  /* 黒帯 */
  --ink:#fff;
  --black-1:#0e0e0f;
  --black-2:#141516;

  /* カードR/影 */
  --r-lg:22px;
  --r-md:18px;
  --shadow:0 18px 42px rgba(0,0,0,.35);

  /* 罫線感（微金色の1px） */
  --divider:linear-gradient(#c7a162,#c7a162);
}

/* ========= カード外枠（ゴールドの額縁＋上下帯） ========= */
.price-card{
  position: relative;
  margin: 32px auto 0;
  max-width: 1160px;
  padding: clamp(14px,2.2vw,22px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at -5% -5%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(120% 80% at 105% 105%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(180deg, var(--gold-a), var(--gold-b) 52%, var(--gold-c));
  box-shadow: var(--shadow);
  isolation: isolate;
}

/* 角の飾り（CSSのみの繊細装飾） */
.price-card::before,
.price-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--r-lg);
  -webkit-mask:
    radial-gradient(80px 80px at 20px 20px, #000 25%, transparent 26%) top left,
    radial-gradient(80px 80px at calc(100% - 20px) 20px, #000 25%, transparent 26%) top right,
    radial-gradient(80px 80px at 20px calc(100% - 20px), #000 25%, transparent 26%) bottom left,
    radial-gradient(80px 80px at calc(100% - 20px) calc(100% - 20px), #000 25%, transparent 26%) bottom right;
  -webkit-mask-repeat:no-repeat;
  pointer-events:none;
}
.price-card::before{
  background:
    radial-gradient(18px 18px at 20px 20px, rgba(0,0,0,.25), transparent 60%) top left,
    radial-gradient(18px 18px at calc(100% - 20px) 20px, rgba(0,0,0,.25), transparent 60%) top right,
    radial-gradient(18px 18px at 20px calc(100% - 20px), rgba(0,0,0,.25), transparent 60%) bottom left,
    radial-gradient(18px 18px at calc(100% - 20px) calc(100% - 20px), rgba(0,0,0,.25), transparent 60%) bottom right;
  background-repeat:no-repeat;
}

/* ========= タイトル帯 ========= */
.price-card__title{
  display:flex;
  justify-content:center;
  align-items:center;
  height: clamp(58px,6.4vw,74px);
  margin: clamp(10px,1.8vw,16px) auto clamp(18px,2.2vw,22px);
  max-width: 78%;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.16)),
    linear-gradient(180deg, #dfc9a1, #b79b6e 60%, #a48757);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.25),
    inset 0 -6px 14px rgba(0,0,0,.25);
}
.price-card__title span{
  color:#fff;
  font-weight:600;
  letter-spacing:.22rem;
  font-size: clamp(18px,2.2vw,24px);
  text-shadow:
    0 1px 0 rgba(0,0,0,.25),
    0 0 6px rgba(0,0,0,.25);
}

/* ========= 表本体（CSS Grid 高精細） ========= */
.price-table{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(56px,6.8vw,74px);
  border-radius: var(--r-md);
  overflow: clip;
  position: relative;
  background:
    /* 縦の金ライン（2本） */
    linear-gradient(90deg, transparent 0 calc(33.333% - .5px), var(--gold-line) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), var(--gold-line) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    /* 外枠の影を受ける土台 */
    #0000;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* セル共通 */
.price-table__cell{
  display:flex; align-items:center; justify-content:center;
  padding: 0 2rem;
  font-size: clamp(15px,1.8vw,18px);
  color:#e9e9e9;
  background: #fcfcfc;
  color:#333;
}

/* 黒帯（ダマスク＋微光沢＋丸端） */
.price-table__head{
  color: var(--ink);
  font-weight:700;
  letter-spacing:.08rem;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  background:
    /* 光沢 */
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.40)),
    /* ダマスク風SVGタイル（1行・#は%23にエンコード / stop-opacityへ分離） */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><defs><radialGradient id='g' cx='0.5' cy='0.5' r='0.5'><stop offset='0' stop-color='%23ffffff' stop-opacity='.06'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></radialGradient></defs><rect width='64' height='64' fill='rgb(18,18,18)'/><circle cx='16' cy='16' r='12' fill='url(%23g)'/><circle cx='48' cy='16' r='12' fill='url(%23g)'/><circle cx='16' cy='48' r='12' fill='url(%23g)'/><circle cx='48' cy='48' r='12' fill='url(%23g)'/></svg>"),
    /* ベース黒 */
    linear-gradient(180deg, var(--black-2), var(--black-1));
  background-size: auto, 64px 64px, auto;
  background-repeat: no-repeat, repeat, no-repeat;
  position: relative;
}

/* 1行目の左右端を強く丸める（スクショの柔らかい角） */
.price-table__head:nth-child(1){ border-top-left-radius: var(--r-md); }
.price-table__head:nth-child(3){ border-top-right-radius: var(--r-md); }

/* 3行目の左右端 */
.price-table__head:nth-child(7){ border-bottom-left-radius: 0; }
.price-table__head:nth-child(9){ border-bottom-right-radius: 0; }

/* 白地行の質感（軽いテクスチャ＋行間ライン） */
.price-table__cell:nth-child(4),
.price-table__cell:nth-child(5),
.price-table__cell:nth-child(6),
.price-table__cell:nth-child(10),
.price-table__cell:nth-child(11),
.price-table__cell:nth-child(12){
  background:
    radial-gradient(20px 20px at 20px 20px, rgba(0,0,0,.02), transparent 60%),
    linear-gradient(#e9e9e9, #ffffff);
  color:#3a3a3a;
  font-weight:600;
}

/* 行の水平金ライン（上段と下段の境界） */
.price-table{
  background-image:
    linear-gradient(90deg, transparent 0 calc(33.333% - .5px), var(--gold-line) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), var(--gold-line) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(#c7a162,#c7a162);
  background-repeat:no-repeat;
  background-size: 100% 100%, 100% 1px;
  background-position: center, 0 50%;
}

/* カード内余白調整（スクショ感に寄せる） */
.price-card .price-table{
  margin: clamp(12px,1.6vw,18px) clamp(10px,2.6vw,28px) clamp(14px,1.8vw,22px);
}

/* ======= レスポンシブ ======= */
@media (max-width: 900px){
  .price-card{ padding: 14px; }
  .price-card__title{ max-width: 88%; }
}
@media (max-width: 680px){
  /* モバイルでもスクショの“ワイド感”を維持：横スクロール許容 */
  .price-card{ overflow:auto; }
  .price-card .price-table{ min-width: 640px; }
}



/* ========== Section3 簡易プランボックス（角丸なし・隙間ゼロ・シンプル版） ========== */
:root{
  --s3-free:#669af3;
  --s3-std:#f993ea;
  --s3-biz:#9279f3;
  --s3-prm:#111;
}

.s3-pricing-row{
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  margin:20px 0;
  border:1px solid var(--s3-border);
  border-left:none;
}

.s3-box{
  flex:1;
  min-width:220px;
  background:#fff;
  text-align:center;
  border-left:1px solid var(--s3-border);
  padding:18px 10px 14px;
  color:#222;
}

.s3-box__name{
  margin:0 0 4px;
  font-size:15px;
  font-weight:700;
}

.s3-box__price{
  margin:6px 0 8px;
  line-height:1.2;
}

.s3-box__price .num{
  font-size:26px;
  font-weight:900;
}

.s3-box__price .yen{
  margin-left:2px;
  font-weight:700;
}

/* 上部ライン（各プランカラー） */
.s3-box--free{border-top:10px solid var(--s3-free);}
.s3-box--standard{border-top:10px solid var(--s3-std);}
.s3-box--business{border-top:10px solid var(--s3-biz);}
.s3-box--premium{border-top:10px solid var(--s3-prm);}

/* スマホ対応 */
@media(max-width:900px){
  .s3-pricing-row{flex-direction:column;border:none;}
  .s3-box{border:1px solid var(--s3-border);border-top-width:4px;margin-bottom:8px;}
}

/* ===== Section3 延長・指名（2×2グリッド） ===== */
:root{
  --extend-grad-a:#e77a6a;    /* 見出しの左寄り色 */
  --extend-grad-b:#f0a24f;    /* 見出しの右寄り色 */
  --extend-border:#f19ac0;    /* 仕切り線（ピンク） */
  --extend-text:#111;
}

.s3-extend{
  max-width: 980px;
  margin: 18px auto 0;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-radius: 10px;
  overflow:hidden;
}

/* 上の帯（グラデ＋中央タイトル） */
.s3-extend__head{
  background: linear-gradient(90deg, var(--extend-grad-a), var(--extend-grad-b));
  color:#fff;
  text-align:center;
  font-weight:700;
  letter-spacing:.25em;
  padding: 12px 18px;
  font-size: 18px;
}

/* 中身グリッド */
.s3-extend__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto; /* 左:項目/価格｜右:項目/価格 */
  gap: 12px 20px;
  align-items:center;
  padding: 16px 20px;
  color: var(--extend-text);
  background: #fff;
}

/* 中央の縦破線（|） */
.s3-extend__grid::before{
  content:"";
  position:absolute; inset:12px auto 12px 50%;
  transform:translateX(-50%);
  border-left:2px dashed var(--extend-border);
}

/* 行の横破線（……） */
.s3-extend__sep{
  grid-column:1 / -1;
  height:0;
  border-top:2px dashed var(--extend-border);
  margin: 2px 0;
}

/* テキスト */
.s3-extend__label{
  font-size: 18px;
  font-weight: 600;
  text-align:right;
}
.s3-extend__price{
  font-size: 22px;
  font-weight: 800;
}
.s3-extend__label--r{ text-align:left; padding-left: 8px; }
.s3-extend__price--r{ text-align:left; }

/* モバイル */
@media (max-width: 640px){
  .s3-extend{ border-radius: 8px; }
  .s3-extend__grid{
    grid-template-columns: 1fr auto; /* 縦積み（左右を上下に） */
    row-gap: 8px;
    padding: 14px;
  }
  .s3-extend__grid::before{ display:none; }
  .s3-extend__sep{ margin: 6px 0; }
  .s3-extend__label{ text-align:left; }
}

/* ===== 縦型3カラム（基本｜オプション｜延長） ===== */
:root{
  --v-border:#e5e7eb;
  --v-muted:#6b7280;
  --v-head-bg:#f8f9fb;
  --v-row-alt:#fcfcfd;
  --v-top-free:#2f5dac;   /* 左カラム上ライン色：既存のトーンに寄せる */
  --v-top-opt:#d74a4a;    /* 中央 */
  --v-top-ext:#111;       /* 右 */
}

/* 外枠 */
.s3-vert{
  margin: 16px 0 0;
  border:1px solid var(--v-border);
  background:#fff;
}

/* 見出し（3カラム固定） */
.s3-vert__head{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--v-head-bg);
  border-bottom:1px solid var(--v-border);
  font-weight:800;
  text-align:center;
}
.s3-vert__head > div{
  padding:10px 8px;
  position:relative;
}
.s3-vert__head > div:nth-child(1)::before,
.s3-vert__head > div:nth-child(2)::before,
.s3-vert__head > div:nth-child(3)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
}
.s3-vert__head > div:nth-child(1)::before{ background:var(--v-top-free); }
.s3-vert__head > div:nth-child(2)::before{ background:var(--v-top-opt); }
.s3-vert__head > div:nth-child(3)::before{ background:var(--v-top-ext); }

/* 本体グリッド */
.s3-vert__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.s3-vert__cell{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:12px 14px;
  border-right:1px solid var(--v-border);
  border-bottom:1px solid var(--v-border);
}
.s3-vert__cell:nth-child(3n){ border-right:none; } /* 行末の右枠を消す */

/* 左カラムだけセンタリング気味の余白調整 */
.s3-vert__cell--left{ padding-left:16px; }
.s3-vert__cell--right{ padding-right:16px; }

/* 交互行の薄い帯 */
.s3-vert__grid > .s3-vert__cell:nth-child(6n+1),
.s3-vert__grid > .s3-vert__cell:nth-child(6n+2),
.s3-vert__grid > .s3-vert__cell:nth-child(6n+3){
  background:transparent;
}
.s3-vert__grid > .s3-vert__cell:nth-child(6n+4),
.s3-vert__grid > .s3-vert__cell:nth-child(6n+5),
.s3-vert__grid > .s3-vert__cell:nth-child(6n+6){
  background:var(--v-row-alt);
}

/* ラベルと金額 */
.s3-vert__label{ color:#111; font-weight:700; }
.s3-vert__price{ color:#111; font-weight:900; }

/* スマホ（1列×3行＝1セットで縦積み） */
@media (max-width: 720px){
  .s3-vert__head{ grid-template-columns: 1fr; text-align:left; }
  .s3-vert__head > div{ padding-left:14px; }
  .s3-vert__head > div + div{ border-top:1px solid var(--v-border); }

  .s3-vert__grid{ grid-template-columns: 1fr; }
  .s3-vert__cell{ border-right:none; }
  /* 交互帯を無効化して均一に */
  .s3-vert__grid > .s3-vert__cell{ background:#fff; }
}



/* ===== オプション／指名料／出張費 を4列整列＆枠カラー分け ===== */
/* PCは必ず4つ/行、スマホは既存のレイアウトのまま可変 */
@media (min-width: 1024px){
  .s3-pricing-row .s3-box{
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* ベース（既存の白） */
.s3-pricing-row .s3-box{
  background:#fff;
}

/* ── グループ別カラー（上部帯と薄い背景で区切り） ── */
/* 1) オプション（先頭1〜15） */
.s3-pricing-row .s3-box:nth-child(-n+15){
  background: #ffffff;
  /* 既存の上部帯色はそのまま（各 .s3-box--free 等の色が効く） */
}

/* 2) 指名料（16〜18） */
.s3-pricing-row .s3-box:nth-child(n+16):nth-child(-n+18){
  background: #fff8f1;               /* ごく薄いオレンジ */
  border-top-color: #f59e0b !important; /* 見出し帯をオレンジに寄せる */
}
/* 3) 出張費（19〜21） */
.s3-pricing-row .s3-box:nth-child(n+19):nth-child(-n+21){
  background: #f5fbff;               /* ごく薄いブルー */
  border-top-color: #0ea5e9 !important; /* 見出し帯をブルーに */
}
/* 4) チェンジ・キャンセル（22） */
.s3-pricing-row .s3-box:nth-child(22){
  background: #f9fafb;               /* グレー系で独立感 */
  border-top-color: #6b7280 !important;
}

/* グループ間にわずかな段落ち（区切り）を付ける：PCのみ */
@media (min-width: 1024px){
  /* 指名料ブロックの先頭4件ぶんに上マージン（見た目の段落ち） */
  .s3-pricing-row .s3-box:nth-child(16),
  .s3-pricing-row .s3-box:nth-child(17),
  .s3-pricing-row .s3-box:nth-child(18){
    margin-top: 12px;
  }
  /* 出張費ブロック */
  .s3-pricing-row .s3-box:nth-child(19),
  .s3-pricing-row .s3-box:nth-child(20),
  .s3-pricing-row .s3-box:nth-child(21){
    margin-top: 12px;
  }
  /* 最後の1件も段落ち */
  .s3-pricing-row .s3-box:nth-child(22){
    margin-top: 12px;
  }
}

/* 見出し文字を少し強調（読みやすさアップ） */
.s3-pricing-row .s3-box__name{
  font-weight: 800;
  letter-spacing: .02em;
}


/* ===== 料金表全体の文字色を黒系に統一 ===== */

/* 各プランボックス内のテキストを黒に */
.s3-pricing-row .s3-box,
.s3-pricing-row .s3-box__name,
.s3-pricing-row .s3-box__price,
.s3-pricing-row .s3-box__price .num,
.s3-pricing-row .s3-box__price .yen {
  color: #111 !important;   /* しっかり黒で統一 */
}

/* 見出し行などが白背景で埋もれていた場合も */
.s3-vert__head > div,
.s3-vert__label,
.s3-vert__price {
  color: #111 !important;
}

/* ===== 見出し（基本料金 含まれるプレイ）を黒文字に強制 ===== */
.s3-title,
.s3-title *,
.hero__inner,
.hero__inner *,
.pricing-section h2,
.pricing-section .title {
  color: #111 !important;
}


/* ===============================
   「禁止事項」article限定のデザイン調整
   =============================== */
/* ===============================
   禁止事項ブロック（利用規約風＋黄色下線）
   =============================== */

/* タイトル */
.s3-box--rules .s3-box__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
  letter-spacing: 0.03em;
  display: inline-block;
  padding-bottom: 6px;
}

/* 黄色下線（アクセント） */
.s3-box--rules .s3-box__name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 70%;
  height: 4px;
  background: linear-gradient(to right, #facc15, #fcd34d);
  transform: translateX(-50%);
  border-radius: 2px;
}

/* 本文（利用規約風） */
.s3-box--rules .s3-box__price {
  font-size: 0.9rem;
  line-height: 1.9;
  color: #222;
  font-weight: 200;
  text-align: justify;
  background: none;      /* フラット化 */
  border: none;          /* 枠線なし */
  padding: 0;
  margin: 0 auto;
  max-width: 900px;      /* 可読範囲を制限 */
  letter-spacing: 0.02em;
}

/* 箇条書き「･」を整列 */
.s3-box--rules .s3-box__price .num {
  display: block;
  white-space: pre-line;
  text-indent: -1em;
  padding-left: 1em;
}

/* 最後の注意文を薄めて区別 */
.s3-box--rules .s3-box__price span {
  display: block;
  margin-top: 10px;
  color: #555;
  font-size: 0.85rem;
}