@charset "UTF-8";
/* =========================================
   Price page (/price/) styles
   - Apricot のミニマルなトーン（黒・グレー・白）に統一
   - takizawa-design.jp/price/ 参考の構造を踏襲しつつ、シンプルに
========================================= */

/* ANCHOR NAV — ヒーロー直下のジャンプリンク */
.pr-anchors {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-soft);
}
.pr-anchors a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px) clamp(12px, 1.5vw, 20px);
  text-decoration: none;
  text-align: center;
  align-items: center;
  border-right: 1px solid var(--c-line);
  transition: background .25s ease, color .25s ease;
}
.pr-anchors a:last-child { border-right: 0; }
.pr-anchors a:hover {
  background: var(--c-black);
}
.pr-anchors a:hover .num,
.pr-anchors a:hover .jp { color: #fff; }
.pr-anchors a .num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
}
.pr-anchors a .jp {
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.06em;
  color: var(--c-black);
  font-weight: 500;
  position: relative;
}
.pr-anchors a .jp::after {
  content: '↓';
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--c-sub);
  transition: transform .25s ease;
}
.pr-anchors a:hover .jp::after { color: #fff; transform: translateY(2px); }
@media (max-width: 900px) {
  .pr-anchors {
    grid-template-columns: repeat(3, 1fr);
    border-right: 1px solid var(--c-line);
    margin-left: clamp(20px, 4vw, 32px);
    margin-right: clamp(20px, 4vw, 32px);
  }
  .pr-anchors a:nth-child(3n) { border-right: 0; }
  .pr-anchors a { border-bottom: 1px solid var(--c-line); }
  .pr-anchors a:nth-last-child(-n+1) { border-bottom: 0; }
  .pr-anchors a:last-child { border-right: 0; }
}
@media (max-width: 540px) {
  .pr-anchors { grid-template-columns: repeat(2, 1fr); }
  .pr-anchors a:nth-child(3n) { border-right: 1px solid var(--c-line); }
  .pr-anchors a:nth-child(2n) { border-right: 0; }
}

/* INTRO */
.pr-intro {
  padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 80px);
  text-align: center;
}
.pr-intro p {
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  margin: 0;
}

/* セクションの基本余白 */
.pr-section {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--c-bg-soft, #fff);
}
.pr-section-alt {
  background: var(--c-bg, #f2f2f2);
}

/* セクション見出し */
.pr-section .section-head {
  margin-bottom: clamp(48px, 6vw, 80px);
}
.pr-section .section-head .sub {
  max-width: 680px;
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 2;
  color: var(--c-sub);
  text-align: center;
}

/* =========================================
   CASE - 制作事例の費用イメージ
========================================= */
.pr-case,
body.is-sub-page section.pr-case { padding-top: 0 !important; padding-bottom: 0 !important; }
.pr-case-list {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  max-width: 920px;
  margin: 0 auto;
}
.pr-case-card {
  background: #fff;
  border: 0;
  padding: clamp(32px, 4.5vw, 56px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
.pr-case-head {
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--c-line);
}
.pr-case-num {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--c-black);
  margin-bottom: 14px;
}
.pr-case-head h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin: 0 0 12px;
}
.pr-case-desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-sub);
  margin: 0;
}

.pr-case-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pr-case-table th,
.pr-case-table td {
  padding: 14px 0;
  border-bottom: 1px dotted var(--c-line);
  text-align: left;
}
.pr-case-table th {
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.pr-case-table td {
  text-align: right;
  font-family: var(--font-en);
  font-weight: 400;
  color: var(--c-black);
  white-space: nowrap;
}
.pr-case-table tr.div th,
.pr-case-table tr.div td {
  border-top: 1px solid var(--c-line);
  padding-top: 22px;
}
.pr-case-table tfoot th,
.pr-case-table tfoot td {
  padding: 22px 0 0;
  border-bottom: none;
  font-size: 15px;
}
.pr-case-table tfoot th { font-weight: 500; color: var(--c-black); }
.pr-case-table tfoot td strong {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pr-case-note {
  margin-top: 20px;
  font-size: 12px;
  color: var(--c-sub);
}

/* =========================================
   PLAN cards (BRANDING / SUPPORT)
========================================= */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin: 0 auto;
}
.pr-plans-3 { grid-template-columns: repeat(3, 1fr); }

.pr-plan {
  position: relative;
  background: var(--c-bg-soft, #fff);
  border: 1px solid var(--c-line);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  min-width: 0; /* grid 1fr が content-width に押し広げられないよう固定 */
}
.pr-plan-price .unit { overflow-wrap: anywhere; }
.pr-plan.is-recommended {
  border-color: var(--c-black);
  box-shadow: 0 0 0 1px var(--c-black);
}
.pr-plan-tag {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--c-sub);
  margin-bottom: 14px;
  display: block;
}
.pr-plan-badge {
  position: absolute;
  top: -14px;
  right: 24px;
  background: var(--c-black);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 6px 14px;
}
.pr-plan h3 {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin: 0 0 8px;
}
.pr-plan-target {
  font-size: 12px;
  line-height: 1.8;
  color: var(--c-sub);
  margin: 0 0 24px;
}
.pr-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  border-top: 1px solid var(--c-line);
  padding-top: 24px;
}
.pr-plan-price .num {
  font-family: var(--font-en);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
  color: var(--c-black);
  letter-spacing: 0.02em;
  line-height: 1;
}
.pr-plan-price .unit {
  font-size: 12px;
  color: var(--c-sub);
}
.pr-plan-period {
  font-size: 12px;
  color: var(--c-sub);
  margin: 0 0 24px;
}
.pr-plan-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}
.pr-plan-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text);
}
.pr-plan-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--c-black);
}
.pr-plan-bonus {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--c-bg);
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text);
  text-align: center;
}

/* =========================================
   TABLE 共通
========================================= */
.pr-tables {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  max-width: 920px;
  margin: 0 auto;
}
.pr-table-block + .pr-table-block { margin-top: 0; }
.pr-table-head {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-black);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-black);
}

.pr-table {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  font-size: 14px;
}
.pr-table th,
.pr-table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.pr-table th {
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: 0.02em;
  line-height: 1.7;
}
.pr-table th small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 0;
}
.pr-table th sup {
  font-size: 12px;
  color: var(--c-sub);
  margin-left: 6px;
  vertical-align: baseline;
  letter-spacing: 0.1em;
  font-family: var(--font-en);
}
.pr-table td {
  text-align: right;
  font-family: var(--font-en);
  font-weight: 400;
  color: var(--c-black);
  white-space: nowrap;
  font-size: 16px;
}
.pr-table td small {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--c-sub);
  margin-left: 2px;
}
.pr-table td strong {
  font-weight: 500;
}

/* 親子関係（is-sub 行は親項目の派生として一段下げる） */
.pr-table tr.is-sub th {
  padding-left: 28px;
  font-size: 13px;
  color: var(--c-sub);
}
.pr-table tr.is-sub td {
  font-size: 14px;
  color: var(--c-text);
}
.pr-table tr.is-sub .sub-mark {
  display: inline-block;
  margin-right: 8px;
  color: var(--c-line);
  font-family: var(--font-en);
  letter-spacing: 0;
}
/* 親行の border-bottom を消して、子行と一体に見せる */
.pr-table tr:not(.is-sub):has(+ tr.is-sub) th,
.pr-table tr:not(.is-sub):has(+ tr.is-sub) td {
  border-bottom-color: transparent;
}

/* スポット料金は3カラム */
.pr-table-spot {
  max-width: 920px;
  margin: 0 auto;
}
.pr-table-spot thead th {
  background: var(--c-black);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  padding: 14px 14px;
  text-align: left;
}
.pr-table-spot thead th:nth-child(2),
.pr-table-spot thead th:nth-child(3) {
  text-align: center;
}
.pr-table-spot tbody td {
  font-size: 13px;
  text-align: left;
  white-space: normal;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--c-text);
  padding: 14px 14px;
}
.pr-table-spot tbody td:nth-child(2) {
  text-align: center;
  font-family: var(--font-en);
  color: var(--c-sub);
  white-space: nowrap;
  width: 110px;
}
.pr-table-spot tbody td:nth-child(3) {
  text-align: right;
  font-family: var(--font-en);
  color: var(--c-black);
  font-size: 15px;
  white-space: nowrap;
  width: 140px;
}

/* 注釈 / NOTES */
.pr-notes,
.pr-notes-list {
  list-style: none;
  padding: 0;
  margin: clamp(36px, 4vw, 56px) auto 0;
  max-width: 920px;
  display: grid;
  gap: 10px;
}
.pr-notes li,
.pr-notes-list li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--c-sub);
}
.pr-notes li::before,
.pr-notes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--c-sub);
}
.pr-notes li sup,
.pr-notes-list li sup {
  font-family: var(--font-en);
  color: var(--c-black);
  margin-right: 4px;
}
.pr-payment {
  max-width: 920px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--c-line);
  font-size: 13px;
  line-height: 2;
  color: var(--c-text);
}

/* SUPPORT 内のサブ見出し */
.pr-block-head {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: clamp(48px, 5vw, 72px) 0 12px;
  text-align: center;
}
.pr-block-head:first-of-type { margin-top: 0; }
.pr-block-lead {
  text-align: center;
  font-size: 13px;
  line-height: 2;
  color: var(--c-sub);
  max-width: 680px;
  margin: 0 auto clamp(28px, 3vw, 40px);
}

/* セクション間の "詳しく見る" リンク */
.pr-cta-link {
  margin-top: clamp(48px, 5vw, 72px);
  text-align: center;
}
.pr-cta-link a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--c-black);
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 4px;
  transition: opacity .3s;
}
.pr-cta-link a .arr {
  transition: transform .3s;
  font-family: var(--font-en);
}
.pr-cta-link a:hover { opacity: 0.7; }
.pr-cta-link a:hover .arr { transform: translateX(4px); }

/* =========================================
   CTA at bottom
========================================= */
.pr-cta {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--c-bg-soft, #fff);
  text-align: center;
}
.pr-cta .en-label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--c-black);
  margin-bottom: 24px;
}
.pr-cta h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 24px;
}
.pr-cta p {
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  max-width: 620px;
  margin: 0 auto 48px;
}
.pr-cta-actions {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =========================================
   Responsive
========================================= */
@media (max-width: 900px) {
  .pr-plans,
  .pr-plans-3 { grid-template-columns: 1fr; }
  .pr-case-card { padding: 28px 22px; }
}
@media (max-width: 700px) {
  .pr-table th,
  .pr-table td {
    padding: 14px 8px;
  }
  .pr-table th { font-size: 13px; }
  .pr-table td { font-size: 14px; }
  .pr-table-spot tbody td:nth-child(2) { width: 70px; font-size: 12px; }
  .pr-table-spot tbody td:nth-child(3) { width: 110px; font-size: 13px; }
  .pr-case-table { font-size: 13px; }
  .pr-case-table tfoot td strong { font-size: 18px; }
  .pr-cta-actions { gap: 12px; }
  .pr-cta-actions .btn { width: 100%; max-width: 320px; }
}

/* ============================================
   2026-06-14 websupport ラウンド（/price/ = page-id-18099, #1921-#1927）
============================================ */
body.page-id-18099 section.pr-intro { padding: 80.2px 0 0; }                        /* #1921→#2247 上80 / 下 160→0 */
body.page-id-18099 .pr-table-head { font-size: 18px; font-weight: 700; }            /* #1922/#1923 14→18 / 500→700（全 pr-table-head） */
body.page-id-18099 .pr-notes { text-align: left; }                                  /* #1924 注記を左寄せ */
body.page-id-18099 .pr-table-spot thead th { font-size: 16px; }                     /* #1925/#1926/#1927 12→16 */
body.page-id-18099 .pr-table th { font-size: 15px; }                                /* #1928 通常行 th 14→15（全テーブル統一） */
body.page-id-18099 .pr-table tr.is-sub th { font-size: 14px; }                      /* #1929 サブ行 th 13→14 */
body.page-id-18099 .pr-section .sub { font-size: 15px; }                            /* #1930 セクションリード 14→15 */

/* 2026-06-20 #2235/#2236 /price/ セクション順変更＋CASE を WEB制作内へ移動 */
body.page-id-18099 #web .pr-web-case { margin-top: clamp(56px, 7vw, 96px); }

/* 2026-06-26 websupport #3450-#3473 /price/（page-id-18099）SP。toc無し＝price.php の section id 直指定。 */
@media (max-width: 900px) {
  /* セクション余白（base 80 0 80 0 → 指定値。conflictした #creative/#web-strategy/#support は後ピン[80 0 100 0]採用） */
  body.page-id-18099 #web { padding-bottom: 100px; }                                /* #3456 */
  body.page-id-18099 #design { padding-top: 100px; padding-bottom: 100px; }         /* #3457 */
  body.page-id-18099 #creative { padding-bottom: 100px; }                           /* #3460/#3461 */
  body.page-id-18099 #branding { padding-bottom: 100px; }                           /* #3463 */
  body.page-id-18099 #web-strategy { padding-bottom: 100px; }                       /* #3464/#3466 */
  body.page-id-18099 #support { padding-bottom: 100px; }                            /* #3467/#3470 */
  body.page-id-18099 #web-spot { padding-top: 100px; padding-bottom: 100px; }       /* #3471 */
  body.page-id-18099 #notes { padding-top: 100px; padding-bottom: 100px; }          /* #3472 */
  body.page-id-18099 .pr-cta { padding-top: 100px; padding-bottom: 100px; }         /* #3473 section(11) */
  /* #3450 アンカーnavを1列縦並びボタンに */
  body.page-id-18099 .pr-anchors { grid-template-columns: 1fr; }
  body.page-id-18099 .pr-anchors a { flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--c-line); }
  body.page-id-18099 .pr-anchors a:last-child { border-bottom: 0; }
  /* #3451 pr-intro p：手動改行を外し font14/lh28 */
  body.page-id-18099 .pr-intro .container-narrow p { font-size: 14px; line-height: 28px; }
  body.page-id-18099 .pr-intro .container-narrow p br { display: none; }
  /* #3453 #web pr-tables gap36->60 / #3454 CASE見出しの en-label 上margin50 */
  body.page-id-18099 #web > .container > .pr-tables { gap: 60px; }
  body.page-id-18099 #web .pr-web-case > .section-head > .en-label { margin-top: 50px; }
  /* #3469 #support 2つ目の pr-block-head 上margin48->80 */
  body.page-id-18099 #support > .container > h3.pr-block-head:nth-of-type(2) { margin-top: 80px; }
  /* #3452等 価格 p.sub 14/28（#1930 の pr-section .sub 15px を上書き） */
  body.page-id-18099 .pr-section .sub { font-size: 14px; line-height: 28px; }
  /* 全ページ系（pr-table/pr-block-head は price でのみ使用） */
  .pr-table th { font-size: 13px; line-height: 26px; padding: 5px 0 15px 0; }       /* #3459 全th */
  .pr-block-head { font-size: 20px; }                                               /* #3468 全pr-block-head */
}