@charset "utf-8";
/* =========================================================
   お支払いについて /payment/  ページ固有CSS
   デザイン：デザインデータ/お支払いについて/お支払いについて.ai
             アートボード 1500.6 × 5894.1（pt=px・1:1。換算しない）
   土台：assets/company.css（幅・色・見出し・本文・「楽に頼めて」・CTA余白）

   ※共通部品（header / sidebar / cta / footer / .cmp-closing / .cmp-photos2）は
     一切上書きしていない。ここは .pay- から始まる独自クラスと、
     .cmp-〇〇.pay-〇〇 の複合セレクタ（このページだけに効く）しか使わない。

   ★色について
     デザイン実測の青は #0054AC だが、ルール5章により実装は #0954A5（var(--blue)）。
     見出し・ピル・リンクともこれを使う。本文は #262626 → #333333（var(--text)）。

   ★基準：本文カラムの左端 ＝ デザインの x=278.0（横線の左端）
   ========================================================= */

/* ---------- ページタイトル帯 ----------
   デザイン実測：ナビの下端 y=232.5 → 帯の下端 y=626.5 ＝ 394.0px
   タイトル文字「お支払いについて」は白フチ・光彩つきで帯の画像に入っているため、
   帯ごと1枚の画像として切り出している（リファレンス7章）。 */
.cmp-hero.pay-hero{height:394px;}
.cmp-hero.pay-hero img{height:394px;}

/* ---------- 2カラムの開始位置 ----------
   デザイン実測：帯の下端 626.5 → 2カラムの上端 743.1 ＝ 116.6px
   （サイドバーの1つめのボタン y=766.2 から逆算。主要協力会社様専用と同じ値） */
.cmp-wrap.pay-wrap{margin-top:116.6px;}
.cmp-side.pay-side{padding-top:0;}

/* ★本文カラムの高さ
   デザイン実測：最後の※ y=3409.1 →「楽に頼めて」見出し 3729.1
   確定版 .cmp-closing の margin-top は 198.75px（変更禁止）なので、
   本文カラムの高さを 2787.25px にして、下端＋198.75 が 3729.1 になるようにしている。
   （選ばれる10の理由と同じやり方。確定版には触っていない） */
.cmp-main.pay-main{
  padding-top:0;
  position:relative;
  min-height:2787.25px;
}

/* =========================================================
   本文（デザインの座標にそのまま絶対配置する）
   ========================================================= */

/* ---------- 大見出し（青・1行） ----------
   デザイン実測：x=277.5 y=763.1 28.54pt */
.pay-h{
  position:absolute;left:0;top:8px;
  margin:0;width:754px;
  font-size:28.54px;line-height:1;
  font-weight:700;color:var(--blue);
  /* ★この見出しだけ約物を半角に詰める（palt）。
     「後払い」「掛払い」でカギカッコを4つ使っていて、Illustratorはこれを半角で組む。
     全角のままだとデザイン713pxに対して780pxになり、67pxもはみ出す。
     palt で684pxまで詰まるので、字間 .039em を足してデザインと同じ713pxに合わせた。
     ※他のページでは palt を使っていない。カギカッコが多いこの1行だけの措置。 */
  font-feature-settings:"palt";
  letter-spacing:.039em;
}

/* ---------- 小見出し（青・15pt W6） ---------- */
.pay-h3{
  position:absolute;left:0;margin:0;
  font-size:15px;line-height:1;
  font-weight:700;color:var(--blue);
}

/* ---------- 本文 ----------
   ★幅はデザイン実測より広くしてある。
     Illustratorは約物（、。（））を半角に詰めて組むので、同じ文字サイズでも
     Noto Sans JP のほうが1行が長くなる。デザイン実測どおりの幅にすると
     意図しない位置で折り返して、デザインと違う改行になるため。
     改行は <br> で固定してあるので、左端と改行位置はデザインと一致する。
   ⚠️ 幅754pxは「本文ブロックは754px」の確定ルール（2026/08/28 和田さん確定）。
     字間 −.03em とセットでないと収まらないので、両方セットで扱うこと。 */
.pay-p{
  position:absolute;left:0;margin:0;width:754px;
  font-size:15px;line-height:33.07px;
  color:var(--text);
  /* ★デザイン側で字間が −0.2〜−0.5px 詰めて組まれている（.ai の text.tsv）。
     詰めないと1行が3〜5%長くなる。−.03em で誤差1.5%以内に収まる。
     ※ルール3章の「字間0〜.02em・マイナス禁止」は見出しの決まりなので、
     　本文にはデザイン実測に近い値を入れている。要確認事項として報告済み。 */
  letter-spacing:-.03em;
}
.pay-p--intro,.pay-p--houjin{line-height:1;}
.pay-p--marks{line-height:39.05px;}   /* ■の4行はデザインの行送りが広い */

/* ---------- 注記（13pt） ---------- */
.pay-note{
  position:absolute;left:0;margin:0;width:754px;
  font-size:13px;line-height:27.1px;
  color:var(--text);
  letter-spacing:-.03em;   /* 本文と同じ理由。デザイン実測に合わせている */
}
.pay-note--2{
  line-height:1;
  /* この1行だけデザインが761pxあり、754pxルールに収まらない。
     字間を−.055emにして750.7pxに収めた（13pxの注記なので見た目の差はごくわずか）。
     −.05emだと754.7pxで、754pxをわずかに超えて2行に折り返してしまう */
  letter-spacing:-.055em;
}

/* ---------- リンク（13pt・青） ---------- */
.pay-link{
  position:absolute;left:0;margin:0;
  font-size:13px;line-height:1;
}
.pay-link a{color:var(--blue);text-decoration:none;}
.pay-link a:hover{text-decoration:underline;}
/* 本文の中のURL。★和田さん指示 2026/08/29
   「よくある、青文字になってリンクが貼られてるよ、とわかるやつ」にする。
   デザインでは本文と同じ黒・下線なしだが、リンクと分からないため意図的に変更。 */
.pay-p a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.pay-p a:hover{opacity:.75;}

/* ---------- 横線（デザイン実測：x=278.0 幅743.0 1px #000000） ---------- */
.pay-rule{
  position:absolute;left:0;width:743px;height:1px;
  background:#000;
}

/* ---------- 支払方法のピル ----------
   デザイン実測：220×53／角丸は高さの半分／間隔8px
   1段目 x=275 / 503 / 731（本文カラム左端から −3 / 225 / 453） */
.pay-pills{
  position:absolute;left:-3px;
  display:flex;gap:8px;
  margin:0;padding:0;list-style:none;
}
.pay-pills li{
  width:220px;height:53px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:15px;font-weight:700;line-height:53px;
  text-align:center;
  letter-spacing:.04em;
  text-indent:.04em;   /* 中央ぞろえ＋字間のときは字間と同じ値を入れる（リファレンス1章） */
}

/* ---------- 写真・ロゴ（デザインの座標にそのまま置く） ---------- */
.pay-fig{position:absolute;margin:0;}
.pay-fig img{display:block;width:100%;height:100%;object-fit:contain;}
.pay-fig--banner img,.pay-fig--invoice img{object-fit:cover;}

/* =========================================================
   位置（すべて2カラムの上端 743.1 からの距離）
   ========================================================= */
.pay-fig--todoite{left:180.5px;top:91.9px;width:403px;height:74.5px;}   /* y=835.0 */
.pay-rule--1{top:213.9px;}                                              /* y=957.0 */
.pay-pills--1{top:244.4px;}                                             /* y=987.5 */
.pay-pills--2{top:311.4px;}                                             /* y=1054.5 */
.pay-p--intro{top:397.2px;}                                             /* y=1146.3 */
.pay-p--marks{top:455.08px;}                                            /* y=1211.2 */
.pay-fig--banner{left:373px;top:458.9px;width:367.5px;height:192px;}    /* y=1202.0 */
.pay-fig--invoice{left:0;top:673.4px;width:741.5px;height:383px;}       /* y=1416.5 */
.pay-note--1{top:1110.05px;}                                            /* y=1865.2 */
.pay-link{top:1415px;}                                                  /* y=2163.1 */
.pay-fig--mf{left:5.5px;top:1538.4px;width:565px;height:57px;}          /* y=2281.5 */
.pay-rule--2{top:1620.9px;}                                             /* y=2364.0 */
.pay-p--houjin{top:1659px;}                                             /* y=2408.1 */
.pay-pills--3{top:1708.4px;}                                            /* y=2451.5 */
.pay-h3--a{top:1801.5px;}                                               /* y=2551.6 */
.pay-p--a{top:1825.17px;}                                               /* y=2583.3 */
.pay-h3--b{top:1933.5px;}                                               /* y=2683.6 */
.pay-p--b{top:1957.27px;}                                               /* y=2715.4 */
.pay-h3--c{top:2098.7px;}                                               /* y=2848.8 */
.pay-p--c{top:2122.37px;}                                               /* y=2880.5 */
.pay-h3--d{top:2330px;}                                                 /* y=3080.1 */
.pay-p--d{top:2354.67px;}                                               /* y=3111.8 */
.pay-note--2{top:2661px;}                                               /* y=3409.1 */

/* =========================================================
   スマホ（768px以下）
   ※このページはスマホ専用のデザインが無いため、会社概要・特定商取引法と
     同じ考え方（縦積み・左右8%・文字14px前後）にそろえた。
     PCの絶対配置は全部やめて、上から順に流す。
   ========================================================= */
@media (max-width:768px){
  /* タイトル文字が画像に入っているため、高さを固定して切り抜くと文字が欠ける。
     帯まるごと縮めて全部見せる。 */
  /* ---------- ファーストビューの帯（スマホ） ----------
     ★2026/09/04 和田さん指示：10年保証（/security/）と同じ高さに揃える。
     基準は company.css の @media(max-width:768px) の .cmp-hero{height:180px}。
     以前は「幅なり」にしていたが、4ページで見え方がバラついていたため基準に統一した。
     画像は object-fit:cover で左右が切られる。 */
  .cmp-hero.pay-hero{height:180px;}
  .cmp-hero.pay-hero img{height:180px;aspect-ratio:auto;object-fit:cover;}

  .cmp-wrap.pay-wrap{margin-top:40px;}
  .cmp-main.pay-main{min-height:0;}

  /* PCの絶対配置と幅は全部解除する。
     残っていると画面からはみ出して横スクロールが出る */
  .pay-h,.pay-h3,.pay-p,.pay-note,.pay-link,.pay-rule,.pay-pills,.pay-fig{
    position:static;left:auto;top:auto;width:auto;
  }
  .pay-h{font-size:19px;line-height:1.6;}
  .pay-h3{margin-top:30px;font-size:16px;line-height:1.6;}
  /* スマホ専用デザインが無いので、字間・paltは使わず標準に戻す（読みやすさ優先） */
  .pay-h{font-feature-settings:normal;letter-spacing:.02em;}
  .pay-p{margin-top:10px;font-size:14px;line-height:2.05;letter-spacing:normal;}
  .pay-note{letter-spacing:normal;}
  .pay-p--marks{line-height:2.05;}
  .pay-p br{display:none;}
  .pay-p--marks br{display:inline;}   /* ■は行ごとに分けたままにする */
  .pay-note{margin-top:20px;font-size:12px;line-height:1.9;}
  .pay-note br{display:none;}
  .pay-link{margin-top:18px;font-size:13px;line-height:1.7;word-break:break-all;}
  .pay-link a{text-decoration:underline;}

  /* span のままだと高さ・余白が効かず線が消える（選ばれる10の理由で同じ事故があった） */
  .pay-rule{display:block;margin:24px 0 0;height:1px;}

  .pay-pills{margin-top:18px;flex-wrap:wrap;gap:8px;}
  .pay-pills li{
    width:calc(50% - 4px);height:46px;
    font-size:13px;line-height:46px;
    letter-spacing:0;text-indent:0;
  }
  /* 「後払いクレジットカード決済」は13文字あり、半分幅（153px）に入らず
     ピルからはみ出して切れて見える。この1つだけ横いっぱいにする */
  .pay-pills--2 li:first-child{width:100%;}

  .pay-fig{margin-top:20px;height:auto !important;}
  .pay-fig img{height:auto;}
  .pay-fig--todoite{width:70% !important;}
  .pay-fig--todoite img{aspect-ratio:403/74.5;}
  .pay-fig--banner img{aspect-ratio:367.5/192;}
  .pay-fig--invoice img{aspect-ratio:741.5/383;}
  .pay-fig--mf{width:85% !important;}
  .pay-fig--mf img{aspect-ratio:565/57;}
}