@charset "utf-8";
/* =========================================================================
   料金ページ（接頭辞 pr-）  2026-09-16 新設
   ★指示:「PASSOサイト_surge版/price.html のデザイン・UIを完全に再現する」
     surge版 price.css ＋ そこが使っている共通部品（.subTtl / .tblWrap / .wrap--1100）を
     このページ専用に移植したもの。寸法・余白・角丸・罫・段組みは surge版の値そのまま。
     色と書体だけ、このサイトのトークン（style.css の :root）に差し替えている。
       surge --key   #00abdc → --c-blue   #189ad3
       surge --key-d #0098bc → --c-grad-b #0c95d2
       surge --rb    Roboto  → --f-en     Montserrat
     surge版の水色そのままに戻したいときは、下の .pr-body の3行を書き換えるだけ。
   ★ヘッダー・ページ見出し・CTA帯・フッターは 17-desamis の版面のまま（サイト共通のため）。
   ========================================================================= */

.pr-body {
  /* ページ見出しの装飾（.av-ph__deco は高さ700px）が本文の上に出ないようにする。
     原本の .pg-pol / .pg-company__sec と同じ指定 */
  position: relative;
  z-index: 1;

  --pr-key:   var(--c-blue);              /* キーカラー（罫・チェック・○） */
  --pr-key-d: var(--c-grad-b);            /* 金額・表頭・リンク */
  --pr-pale:  #e8f3fa;                    /* 淡い水色の面（このサイトが使っている値） */
  --pr-tint:  #f2f9fd;                    /* 一括導入の列の面 */
  --pr-face:  var(--c-panel);             /* 灰の面 #f4f8f9 */
  --pr-line:  var(--c-line);              /* 罫 #e3e3e3 */
  --pr-head:  #1c3d5a;                    /* 表頭の1列目（surge版と同じ濃紺） */
  padding: 10px 0 100px;
}

/* ---------------------------------------------------------------- 版面（surge: .wrap--1100） */
.pr-wrap { max-width: 1100px; margin-inline: auto; }

/* ---------------------------------------------------------------- 見出し（surge: 共通 .subTtl） */
.pr-subTtl {
  font-size: 24px; font-weight: 700; line-height: 38.4px;
  border-bottom: 2px solid var(--c-ink); padding-bottom: 15px;
}

.pr-sec { margin-top: 90px; }
.pr-sec:first-child { margin-top: 20px; }
.pr-body strong { font-weight: 700; }

.pr-h3 { margin-top: 48px; font-size: 20px; font-weight: 700; line-height: 32px; }
.pr-h3::before {
  content: ""; display: inline-block; width: 4px; height: 20px; margin-right: 12px;
  vertical-align: -3px; background: var(--pr-key); border-radius: 2px;
}
.pr-lead { margin-top: 24px; font-size: 16px; line-height: 30px; }
.pr-lead + .pr-lead { margin-top: 4px; }
.pr-note { margin-top: 14px; font-size: 13px; line-height: 22px; }
.pr-note + .pr-note { margin-top: 4px; }

/* ---------------------------------------------------------------- 金額（数字は欧文書体・円は小さく） */
.pr-price {
  font-family: var(--f-en); font-size: 34px; font-weight: 700; line-height: 1.2;
  color: var(--pr-key-d); letter-spacing: .01em;
}
.pr-price--lg { font-size: 46px; }
.pr-price--xl { font-size: 64px; }
.pr-price__yen { margin-left: 4px; font-family: inherit; font-size: .42em; font-weight: 700; }
.pr-price__per { margin-left: 6px; font-size: .38em; font-weight: 500; color: var(--c-ink); }
.pr-price__pre { margin-right: 6px; font-size: .42em; font-weight: 700; color: var(--c-ink); }

/* ---------------------------------------------------------------- 一括導入プラン */
.pr-hero {
  margin-top: 36px; padding: 44px 40px; text-align: center;
  background: var(--pr-pale); border-radius: 16px;
}
.pr-hero__label {
  display: inline-block; padding: 5px 18px; border-radius: 9999px; background: #fff;
  font-size: 14px; font-weight: 700; line-height: 22px; color: var(--pr-key-d);
}
.pr-hero .pr-price { margin-top: 14px; }
.pr-hero__txt { margin-top: 14px; font-size: 16px; line-height: 30px; }

/* ---------------------------------------------------------------- 表 */
.pr-tblWrap { margin-top: 32px; }
.pr-tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 26px; }
.pr-tbl th, .pr-tbl td { padding: 16px 22px; border: 1px solid var(--pr-line); vertical-align: middle; }
.pr-tbl thead th { font-size: 14px; font-weight: 700; color: #fff; background: var(--pr-key-d); text-align: center; }
.pr-tbl thead th:first-child { background: var(--pr-head); }
.pr-tbl tbody th { font-weight: 700; text-align: left; background: var(--pr-face); }
.pr-tbl tbody td { text-align: right; background: #fff; }
.pr-tbl a { color: var(--pr-key-d); text-decoration: underline; text-underline-offset: 3px; }
.pr-tbl--compare tbody td.is-plan { text-align: center; background: var(--pr-tint); }
.pr-tbl--compare thead th.is-plan { background: var(--pr-key); }
.pr-tbl--compare th:first-child { width: 40%; }
.pr-ok {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 2.5px solid var(--pr-key); border-radius: 50%; font-size: 0; line-height: 0;
}
.pr-tbl--price tbody td strong { font-family: var(--f-en); font-size: 18px; color: var(--pr-key-d); }

/* ---------------------------------------------------------------- 月額費用 */
.pr-monthly { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.pr-monthly--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-monthly li { padding: 26px 20px; text-align: center; border: 1px solid var(--pr-line); border-radius: 12px; background: #fff; }
.pr-monthly__name { font-family: var(--f-en); font-size: 15px; font-weight: 700; line-height: 24px; }
.pr-monthly .pr-price { margin-top: 8px; }

/* ---------------------------------------------------------------- 金額1件（写真撮影・ホームページ制作） */
.pr-single {
  display: flex; align-items: center; gap: 48px; margin-top: 32px;
  padding: 36px 40px; background: var(--pr-pale); border-radius: 16px;
}
.pr-h3 + .pr-single { margin-top: 20px; }
.pr-single .pr-price { flex: none; }
.pr-single__txt { font-size: 16px; line-height: 30px; }

/* ---------------------------------------------------------------- 動画制作 */
.pr-movie {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px; align-items: start; margin-top: 40px;
}
.pr-movie__col { padding: 24px; }
.pr-movie__col--set { background: var(--pr-pale); border-radius: 12px; }
.pr-movie__col .pr-h3 { margin-top: 0; }
.pr-movie .pr-tbl { margin-top: 16px; }
.pr-h3--flag { position: relative; }

.pr-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.pr-scope__card { padding: 24px 28px; border: 1px solid var(--pr-line); border-radius: 12px; }
.pr-scope__ttl { font-size: 17px; font-weight: 700; line-height: 28px; color: var(--pr-key-d); }
.pr-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-top: 12px; }
.pr-check li { position: relative; padding-left: 24px; font-size: 15px; line-height: 26px; }
.pr-check li::before {
  content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 5px;
  border-left: 2.5px solid var(--pr-key); border-bottom: 2.5px solid var(--pr-key); transform: rotate(-45deg);
}

.pr-deliver { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.pr-deliver > div { padding: 20px 24px; background: var(--pr-face); border-radius: 12px; }
.pr-deliver dt { font-size: 14px; font-weight: 700; line-height: 22px; color: var(--pr-key-d); }
.pr-deliver dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 28px; }

/* ---------------------------------------------------------------- 料金について */
.pr-about { padding: 28px 32px; border: 1px solid var(--pr-line); border-radius: 12px; background: var(--pr-face); }
.pr-about__ttl { font-size: 17px; font-weight: 700; line-height: 28px; }
.pr-about p { margin-top: 8px; font-size: 14px; line-height: 26px; }

/* ---------------------------------------------------------------- 折り返しの制御 */
.pr-nowrap { white-space: nowrap; }

/* 目次から飛んだときに見出しが固定ヘッダーの下に隠れないようにする
   （原本の他ページは節に上余白があるので隠れない。この版面は上余白が0のため必要） */
.pr-sec, #movie-set { scroll-margin-top: calc(var(--hd-h) + 24px); }

/* =========================================================================
   タブレット・スマホ（段組みの折り返しは surge版と同じ 1100 / 900。
   左右の余白だけ 1148px から付ける＝surge版は1100px超で余白が0になり表が窓の端に付くため）
   ========================================================================= */
@media (max-width: 1148px) {
  .pr-wrap { padding-inline: 24px; }
}
@media (max-width: 1100px) {
  .pr-movie { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .pr-movie__col { padding: 0; }
  .pr-movie__col + .pr-movie__col { margin-top: 32px; }
  .pr-movie__col--set { padding: 18px 14px; }
}
@media (max-width: 900px) {
  .pr-body { padding: 0 0 60px; }
  .pr-wrap { padding-inline: 20px; }
  .pr-sec { margin-top: 56px; }
  .pr-subTtl { font-size: 20px; line-height: 32px; padding-bottom: 12px; }
  .pr-h3 { margin-top: 32px; font-size: 17px; line-height: 28px; }
  .pr-lead { margin-top: 18px; font-size: 14px; line-height: 26px; }

  .pr-price { font-size: 28px; }
  .pr-price--lg { font-size: 36px; }
  .pr-price--xl { font-size: 44px; }

  .pr-hero { margin-top: 24px; padding: 28px 18px; }
  .pr-hero__label { font-size: 12px; line-height: 20px; padding: 4px 12px; }
  .pr-hero__txt { font-size: 14px; line-height: 26px; text-align: left; }
  .pr-hero__label, .pr-hero__txt { word-break: auto-phrase; text-wrap: balance; }

  .pr-tblWrap { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pr-tbl { font-size: 13px; line-height: 22px; }
  .pr-tbl th, .pr-tbl td { padding: 12px 10px; }
  .pr-tbl--compare th:first-child { width: auto; }
  .pr-ok { width: 24px; height: 24px; border-width: 2px; }
  .pr-tbl--price tbody td strong { font-size: 15px; }

  .pr-monthly, .pr-monthly--2 { grid-template-columns: 1fr; gap: 10px; }
  .pr-monthly li { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; text-align: left; }
  .pr-monthly .pr-price { margin-top: 0; }

  .pr-single { display: block; padding: 24px 20px; margin-top: 22px; }
  .pr-h3 + .pr-single { margin-top: 14px; }
  .pr-single__txt { margin-top: 10px; font-size: 14px; line-height: 26px; }

  .pr-scope { grid-template-columns: 1fr; gap: 12px; }
  .pr-scope__card { padding: 18px 18px; }
  .pr-check li { font-size: 14px; line-height: 24px; }

  .pr-deliver { grid-template-columns: 1fr; gap: 10px; }
  .pr-deliver > div { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
  .pr-deliver dd { margin: 0; font-size: 15px; }

  .pr-about { padding: 20px 18px; }
  .pr-about p { font-size: 13px; line-height: 24px; }

  /* 見出しは文節で折り返す（このサイトの他ページと同じ扱い） */
  .pr-subTtl, .pr-h3, .pr-scope__ttl, .pr-deliver dt, .pr-tbl th { word-break: auto-phrase; text-wrap: balance; }
  .pr-pcbr { display: none; }
}