/* =========================================================
   kakuyasu.html（格安ページ）専用：最終版（これを一番下に）
   ※ ここから下は「格安ページ専用」だけにする（重複禁止）
========================================================= */
:root{
  --cheap-text: #111;
  --cheap-sub: #333;
  --cheap-line: rgba(0,0,0,0.12);
  --cheap-accent: #b00020;   /* 暗めの赤（落ち着いた赤） */
  --cheap-panel: rgba(255,255,255,0.86);
}

body.kakuyasu{
  background:#fff;
}

/* kakuyasu内だけ：他ページ見出し装飾の混入を止める */
body.kakuyasu h2,
body.kakuyasu h3{
  border:none !important;
  background:none !important;
  padding-left:0 !important;
}

/* ---------- 共通（セクション幅） ---------- */
body.kakuyasu .cheap-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  line-height:1.9;
  color:var(--cheap-text);
}

body.kakuyasu .cheap-h2{
  margin:0 0 14px;
  font-size:clamp(22px, 2.2vw, 34px);
  font-weight:900;
  color:var(--cheap-text);
  border-left:6px solid var(--cheap-accent);
  padding-left:12px;
}

body.kakuyasu .cheap-lead{
  margin:0 0 18px;
  color:var(--cheap-sub);
}

/* =========================================================
   HERO（hg1.webp）※暗幕なし・黒文字
========================================================= */
body.kakuyasu .cheap-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  min-height:520px;
}
@media screen and (min-width:750px){
  body.kakuyasu .cheap-hero{ min-height:762px; } /* 1920×762想定 */
}

body.kakuyasu .cheap-hero-img{
  display:block;
  width:100%;
  height:100%;
  min-height:inherit;
  object-fit:cover;
  object-position:center;
}

/* 暗幕は使わない */
body.kakuyasu .cheap-hero::before{ content:none; }

/* 文字は左寄せ（Stripe風） */
body.kakuyasu .cheap-hero-inner{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1100px, calc(100% - 40px));
}

/* 読みやすさ用の白パネル（背景は暗くしない） */
body.kakuyasu .cheap-hero-box{
  width:min(560px, 100%);
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(0,0,0,0.10);
  border-radius:16px;
  padding:22px 22px 20px;
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

body.kakuyasu .cheap-hero-kicker{
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--cheap-sub);
}

body.kakuyasu .cheap-hero-title{
  margin:0 0 10px;
  font-size:clamp(26px, 3.2vw, 44px);
  font-weight:900;
  line-height:1.15;
  color:var(--cheap-text);
}

body.kakuyasu .cheap-hero-lead{
  margin:0 0 16px;
  font-size:clamp(14px, 1.4vw, 18px);
  color:var(--cheap-sub);
}

body.kakuyasu .cheap-hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

body.kakuyasu .cheap-btn{
  display:inline-block;
  padding:10px 18px;
  font-weight:800;
  text-decoration:none;
  border-radius:9999px;
  transition:transform .15s, opacity .15s;
}
body.kakuyasu .cheap-btn:hover{ transform:translateY(-1px); opacity:.92; }

body.kakuyasu .cheap-btn.primary{
  background:var(--cheap-accent);
  color:#fff !important;
}
body.kakuyasu .cheap-btn.ghost{
  background:#fff;
  color:var(--cheap-text) !important;
  border:1px solid rgba(0,0,0,0.22);
}

body.kakuyasu .cheap-hero-points{
  margin:0;
  padding-left:1.2em;
  color:var(--cheap-sub);
}

/* =========================================================
   ① 格安の理由（sc1.webp：右寄せ）
   ※ いまの方向性維持（明るい背景・黒文字）
========================================================= */
body.kakuyasu .cheap-reason{
  position:relative;
  padding:178px 0;                 /* ←①基準 */
  background-image:url("webp/sc1.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 右寄せレイアウト */
body.kakuyasu .cheap-reason .cheap-section-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  justify-content:flex-end;
}

body.kakuyasu .cheap-reason .cheap-text{
  width:48%;
  background:var(--cheap-panel);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  padding:22px 22px 20px;
  box-shadow:0 18px 40px rgba(0,0,0,0.10);
  color:var(--cheap-text);
}

body.kakuyasu .cheap-reason .cheap-text p{
  margin:0 0 12px;
  color:var(--cheap-sub);
}

body.kakuyasu .cheap-reason .cheap-point{
  margin:0 0 14px;
  padding-top:10px;
  border-top:1px solid var(--cheap-line);
}
body.kakuyasu .cheap-reason .cheap-point:first-child{
  border-top:none;
  padding-top:0;
}

body.kakuyasu .cheap-reason .cheap-point h3{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:900;
  color:var(--cheap-text);
}
body.kakuyasu .cheap-reason .cheap-point h3 .accent{
  color:var(--cheap-accent);
}


/* ① 格安の理由：影・囲み線を消して白50%透明に */
body.kakuyasu .cheap-reason .cheap-text{
  box-shadow: none !important;                  /* 影を消す */
  border: none !important;                      /* ← 囲み線を消す */
  background: rgba(255,255,255,0.5) !important;/* 白50%透明 */
}






/* =========================================================
   ② 対応サイズ（中央揃え）
   ★ ①より上下 +100px ＝ 178px
   ★ 背景画像あり（文字は中央安全領域）
   ★ 文字：白系／カード：黒系／見出し(cheap-h3)：赤
========================================================= */
body.kakuyasu .cheap-sizes{
  position: relative;
  padding:178px 0 !important;   /* ←①(78px) +100px */
  text-align:center;

  /* ▼ 背景画像設定 */
  background-image: url("webp/sc2.webp"); /* ←②用背景画像 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ▼ 背景が暗い画像でも文字が読めるように、うっすら暗幕 */
body.kakuyasu .cheap-sizes::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  z-index:0;
}

/* セクション中身は必ず前面に */
body.kakuyasu .cheap-sizes .cheap-inner{
  position: relative;
  z-index: 1;
  text-align:center;
}

/* 見出し・本文色（全体は白系） */
body.kakuyasu .cheap-sizes h2,
body.kakuyasu .cheap-sizes h3:not(.cheap-h3){
  color:#ffffff;
}

body.kakuyasu .cheap-sizes p,
body.kakuyasu .cheap-sizes li{
  color: rgba(255,255,255,0.86); /* 白に近い灰 */
}

/* 「cheap-h3」だけ赤のまま */
body.kakuyasu .cheap-sizes .cheap-h3{
  color: var(--cheap-accent);
}

/* 説明文：中央・幅制限 */
body.kakuyasu .cheap-sizes .cheap-lead{
  margin:0 auto 60px;
  max-width:760px;
}

/* 「価格表」リンク：白に近いピンク */
body.kakuyasu .cheap-sizes .cheap-lead a{
  color: rgba(255,205,225,0.98);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .15em;
}
body.kakuyasu .cheap-sizes .cheap-lead a:hover{
  opacity: .9;
}

/* サイズカード配置 */
body.kakuyasu .cheap-size-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  max-width:1100px;
  margin:0 auto;
}

@media screen and (min-width:750px){
  body.kakuyasu .cheap-size-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
  }
}

/* 各サイズカード（黒へ変更） */
body.kakuyasu .cheap-size{
  display:block;
  text-decoration:none;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  padding:36px 28px;
  box-shadow:0 12px 26px rgba(0,0,0,0.35);
  transition:transform .15s, box-shadow .15s;
  text-align:center;
  backdrop-filter: blur(2px);
}

body.kakuyasu .cheap-size:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(0,0,0,0.45);
}

/* カード内のタイトル・本文：白系 */
body.kakuyasu .cheap-size h3,
body.kakuyasu .cheap-size h4{
  color:#ffffff;
}

body.kakuyasu .cheap-size p{
  margin:0;
  color: rgba(255,255,255,0.86);
  line-height:1.9;
}



/* =========================================================
   サイズラベル（①の cheap-btn primary 風）
   - 長方形＋角丸
   - 暗めの赤背景
   - 白文字
========================================================= */
body.kakuyasu .cheap-size-badge{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  padding:6px 14px;
  border-radius:8px;                 /* ← pill ではなく角丸長方形 */
  background: var(--cheap-accent);   /* 暗めの赤 */
  color:#ffffff;                     /* 白文字 */
  margin:0 auto 14px;
  letter-spacing:.04em;
}





/* =========================================================
   ③ 注文の流れ＋安心材料（③まるごと上書き用）
   ・②と同等の上下余白
   ・背景画像：sc3.webp（1920×1200）
   ・文字は中央寄せ
   ・h2：線で四角囲み
   ・ol/liのデフォ番号（1,2,3）は非表示
   ・h3：長丸 黒ベタ＋文字黄色（リンク無し）
========================================================= */
body.kakuyasu .cheap-flow{
  position: relative;
  padding: 178px 0;                       /* ←②と同じ上下余白 */
  background-color: #ffeb00;              /* 画像が出ない時の保険 */
  background-image: url("webp/sc3.webp"); /* ←背景画像（名前sc3） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 中央の安全領域（文字が被らない範囲） */
body.kakuyasu .cheap-flow .cheap-inner{
  max-width: 900px;                       /* ←左右に余白＝安全域 */
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  color: #111;
}

/* h2：線で四角に囲う（強制上書き） */
body.kakuyasu .cheap-flow .cheap-h2{
  display: inline-block !important;
  margin: 0 auto 32px !important;
  padding: 14px 26px !important;

  border: 3px solid #111 !important;      /* ←枠線 */
  border-radius: 10px !important;

  background: transparent !important;
  color: #111 !important;
  font-weight: 900 !important;

  /* 既存の左線デザイン（border-left）を確実に無効化 */
  border-left: 3px solid #111 !important; /* ←四角が欠けないよう左も明示 */
  padding-left: 26px !important;          /* ←左線無効化の副作用対策 */
}

/* 手順リスト：デフォの番号（1.2.3）を消す */
body.kakuyasu .cheap-flow .cheap-steps{
  list-style: none !important;            /* ←olの番号を消す */
  margin: 0 auto 24px;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

/* 各ステップ幅 */
body.kakuyasu .cheap-flow .cheap-steps li{
  width: min(760px, 100%);
}

/* h3：黒ベタ長丸＋黄色文字（強制上書き） */
body.kakuyasu .cheap-flow .cheap-steps .cheap-h3{
  display: inline-block !important;
  margin: 0 auto 10px !important;
  padding: 12px 24px !important;

  background: #111 !important;            /* ←黒ベタ */
  color: #ffeb00 !important;              /* ←黄色文字 */
  border-radius: 9999px !important;       /* ←長丸 */

  font-weight: 900 !important;
  line-height: 0.4;
  letter-spacing: .04em;
}

/* 説明文 */
body.kakuyasu .cheap-flow .cheap-steps p{
  margin: 0;
  line-height: 1.9;
  color: #111;
}

/* ボタン行も中央に */
body.kakuyasu .cheap-flow .cheap-inline-cta{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* 注意書き */
body.kakuyasu .cheap-flow .cheap-note{
  margin: 18px 0 0;
  color: #111;
  opacity: .9;
}

/* SP（スマホ） */
@media (max-width:768px){
  body.kakuyasu .cheap-flow{
    padding: 120px 0;
  }
  body.kakuyasu .cheap-flow .cheap-h2{
    padding: 12px 16px !important;
    border-width: 2px !important;
  }
  body.kakuyasu .cheap-flow .cheap-steps{
    gap: 14px;
  }
  body.kakuyasu .cheap-flow .cheap-steps .cheap-h3{
    padding: 10px 16px !important;
  }
}




/* Font Awesome 不要化：メニューの▶をCSSで付ける */
#nav-content a::before{
  content:"▶";
  display:inline-block;
  margin-right:.55em;
  font-size:.9em;
  transform: translateY(-1px);
}


/* =========================================================
   kakuyasu.html 潰れ対策（ヘッダー画像は 100% 指定の影響を受けない）
   ※ bcss2.css の一番下に追記
========================================================= */
body.kakuyasu header img,
body.kakuyasu #unavi img{
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

/* スマホ側の「img{width:100%}」の影響を、kakuyasu の本文だけに寄せる */
@media only screen and (max-width: 768px){
  body.kakuyasu main img,
  body.kakuyasu .cheap-hero-img{
    width: 100% !important;
    height: auto !important;
  }
}



/* ---------- SP調整 ---------- */
@media (max-width:768px){
  body.kakuyasu .cheap-hero{ min-height:360px; }
  body.kakuyasu .cheap-hero-inner{
    top:auto;
    bottom:18px;
    transform:translateX(-50%);
  }
  body.kakuyasu .cheap-hero-box{
    padding:18px 16px 16px;
    border-radius:12px;
  }

  body.kakuyasu .cheap-reason{ padding:120px 0; }
  body.kakuyasu .cheap-reason .cheap-text{ width:100%; }

  /* ②はSPでは詰める（それでも①より長め） */
  body.kakuyasu .cheap-sizes{ padding:120px 0 !important; }
}


/* =========================================================
   〆：ページ下部ナビ（kakuyasu専用）
========================================================= */
body.kakuyasu .cheap-footer-nav{
  padding: 70px 0 40px;
  background: #fafafa;
  border-top: 1px solid rgba(0,0,0,0.08);
  color: var(--cheap-text);
}

body.kakuyasu .cheap-footer-title{
  margin: 0 0 10px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 900;
}

body.kakuyasu .cheap-footer-lead{
  margin: 0 0 18px;
  color: var(--cheap-sub);
  font-size: 0.98rem;
}

body.kakuyasu .cheap-footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 750px){
  body.kakuyasu .cheap-footer-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

body.kakuyasu .cheap-footer-item{
  display: block;
  text-decoration: none;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 14px 14px 12px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  color: var(--cheap-text);
}

body.kakuyasu .cheap-footer-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.14);
}

body.kakuyasu .cheap-footer-item .t{
  display: block;
  font-weight: 900;
  letter-spacing: .02em;
}

body.kakuyasu .cheap-footer-item .s{
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--cheap-sub);
}

body.kakuyasu .cheap-footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,0.16);
}

body.kakuyasu .cheap-footer-copy{
  color: rgba(0,0,0,0.55);
}

body.kakuyasu .cheap-to-top{
  text-decoration: none;
  font-weight: 900;
  color: var(--cheap-accent);
}

body.kakuyasu .cheap-to-top:hover{
  opacity: .85;
}

/* 〆の安心材料テキストを少しだけ読みやすく */
body.kakuyasu .cheap-footer-copy{
  font-size: 0.85rem;
  line-height: 1.6;
  letter-spacing: .02em;
}