:root {
  --color-primary: #e50038;
  --color-primary-light: #ffe4ec;
  --color-bg: #f7f7f7;
  --color-gray: #f6f6f6;
  --color-text: #333333;
  --max-width: 1120px;
  --radius-lg: 24px;
  --radius-md: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 15px;
}

img {
  /* max-width: 100%; */
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 16px 0 16px;
  
}

/* ========== HEADER ========== */
.site-header {
  margin-top: 0 !important;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #f0f0f0;
  
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 11px;
}

.header-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-top-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.eyebrow {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 11px;
}

.top-link {
  font-size: 11px;
  padding-bottom: 2px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

/* 3カラム横並び固定配置 */
.header-main {
  font-weight: 600;
  background-color: #f7f7f7;
}
/* 右端に表示 */
/* .header-cta-double.inline-style {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap; 
  justify-content: flex-end; 
  background-color: #f7f7f7;
} */
/* ヘッダー内用に小さめサイズ */
.header-cta-double .cta-box.small {
  padding: 10px 14px;
  text-align: center;
  max-width: 260px;
  position: relative;
  background-color: #fff;
}

.header-cta-double .cta-box.small .cta-label-black {
  font-size: 10px;
  padding: 2px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  background: #111;
  color: #fff;
  font-family: josefin Sans;
  height: 20px;
  position: absolute;
  top:-10px;
  left: 50%;                 /* 親の幅のちょうど真ん中に基点を持ってくる */
  transform: translateX(-50%); /* 自分自身の幅の半分だけ左に戻す → 中央揃え */}

.cta-label-black::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 57%;
  border-style: solid;
  border-width: 10px 5px 0 0;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
  transform: skew(-24deg);
  transform-origin: top;
}


.header-cta-double .cta-box.small {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;

}

.header-cta-double .cta-box.small .cta-btn {
  font-size: 12px;
  padding: 6px 12px;
  min-width: 180px;
}

/* スマホでは非表示なども可能（任意） */
@media (max-width: 820px) {
  .header-cta-double.inline-style {
    display: none;
  }
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: center;
  padding-left: 0;
  font-weight: 600;
  white-space: nowrap;
}

.header-nav a {
  position: relative;
  padding-bottom: 3px;
  font-size: 16px;
}

.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width .2s ease;
}

.header-nav a:hover::after {
  width: 100%;
}

/* ====== 追加：ナビ右横のボタン（管理ページ/ログイン/新規登録） ====== */
/* 820px 以下（スマホ）は表示しない：既存レイアウトへの影響を避ける */
@media (max-width: 820px) {
  .header-auth {
    display: none;
  }

  /* ナビは従来通り見せたいので、wrapper は最小限の影響にする */
  .header-center {
    display: flex;
    align-items: center;
    gap: 0;
  }
}

/* PC〜iPad（821px〜）は「ロゴ｜(ナビ+小ボタン)｜CTA」の3カラムとして安定させる */
@media (min-width: 821px) {

  .header-logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }

  .header-center {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0; /* 長い文言でもレイアウト崩れを抑制 */
  }

  .header-nav {
    width: auto;
    padding-left: 0;
    gap: 22px;
    justify-content: center;
    white-space: nowrap;
  }

  .header-auth {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .header-auth-btn {
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 999px;
    line-height: 1;
  }
}

/* iPad 幅（821px〜1024px）は少しだけ詰める */
@media (min-width: 821px) and (max-width: 1024px) {
  .header-main {
    gap: 12px;
    padding: 8px 12px;
  }

  .header-nav a {
    font-size: 15px;
  }

  .header-auth {
    gap: 8px;
  }

  .header-auth-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

.header-cta {
  display: flex;
  gap: 8px;
}
.logo-img {
  height: 65px;
  width: auto;
}

.logo-text {
  font-weight: 700;
  font-size: 17px;
  color: #111;
  white-space: nowrap;
  font-family: 'Josefin Sans', system-ui, sans-serif;
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-outline {
  background-color: #fff;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary-light);
}

/* ========== HERO ========== */
.hero {
  padding: 30px 0 30px;
}
.hero-text {
  width: 100%;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.0fr) minmax(0, 1.0fr);
  /* gap: 20px; */
  align-items: center;
  width: 1024px;
  margin: 0 auto;
}
.hero-image {
  text-align: center;
}

.hero-image img {
  max-width: 180%;
  width: 100%;
  height: auto;
  display: flex;
}

.hero-copy-small {
  font-size: 13px;
  color: #777;
  margin: 0;
}

.hero-title {
  font-size: 48px;
  line-height: 1.4;
  margin: 4px 0 10px;
}

.highlight {
  background: linear-gradient(transparent 60%, #ffe4ec 60%);
  font-weight: 700;
}

.hero-lead {
  font-size: 16px;
  color: #000;
  margin: 8px 0 8px;
  font-weight: 500;
}

.hero-sub {
  font-size: 13px;
  margin-top: 12px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.hero-cta-note {
  font-size: 11px;
  color: #777;
}

.hero-side {
  padding: 10px;
}

.hero-card {
  background-color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 18px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  font-size: 13px;
}

.hero-side-heading {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--color-primary);
}

.hero-side-text {
  margin: 0;
  font-size: 13px;
}
.nayami-pc {
  max-width: var(--max-width) ;
  margin: 50px auto 50px auto;
}
.nayami-sp {
  display: none;
}
.nayami-sub {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.hero-sub {
  width: 580px;
  background-color: #666666;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  border-radius: 9999px;
  position: relative;
  line-height: 2.75;
  height: 55px;
  text-align: center;
}
.hero-sub::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #666666 transparent transparent;
  translate: -50% 100%;
}

.animaru {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  gap: 50px;
}

.animaru-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 190px;
}

.animaru-img img{
  width: auto;
  object-fit: contain;
}
/*上の段*/
.animaru.upper-row {
  display: flex;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto 20px;
}
/*下の段*/
.animaru.lower-row {
  display: flex;
  justify-content: center;
  gap: 60px; /* ワニとヘビの間隔調整 */
}

/*動物の上の吹き出し */
.animaru-black {
  width: 190px;
  display: inline-block;
  background-color: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  /* padding: 5px 5px; */
  margin-bottom: 20px;
  position: relative;
  line-height: 3.0;
  height: 50px;
  text-align: center;
}
/*吹き出しの三角 */
.animaru-black::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 57%;
  border-style: solid;
  border-width: 15px 8px 0 0;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
  transform: skew(-24deg);
  transform-origin: top;
}
.banner {
  width: 100%;
}
/* 画面いっぱいの赤帯メッセージ */
.auto-banner {
  width: 100%;
  height: 90px;
  background-color: var(--color-primary);
  color: #fff;
  padding: 14px 0;
  font-size: 28px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.auto-banner span {
  font-size: 32px;
}
.jidouka {
  font-size: 30px;
  font-weight: 500;
}


/* ========== SECTIONS 共通 ========== */
/* section {
  /* padding: 56px 0; */


.section-tag {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'Josefin Sans', system-ui, sans-serif;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  margin: 50px;
}

/* ========== FEATURES ========== */
.features {
  background-color: var(--color-gray);
}
.mark {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff; 
  text-align: center;
  line-height: 38px;  
  margin-right: 10px;
}

.point {
  position: relative;
}
.point-sp  {
  display: none;
}

.point-sp1 {
  display: none;
}


.point2 {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin: auto;
  padding-bottom: 50px;
}
.feature-grid img:not(.point-sp1) {
  width: 80%;
  margin: 50px auto 10px auto;
}

.feature-card1 {
  font-size: 13px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  background-color: rgba(246, 246, 246, 0.7);
  width: 1000px;
  text-align: center;
  /* background-color: #fff; */
}

.feature-card2 {
  font-size: 13px;
}

.feature-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #999;
}
/*ポイント題名*/
.feature-heading {
  margin: 0 0 8px;
  font-size: 24px;
  color: #000000;
  font-weight: 800;
  text-align: center; 

}
/*説明文字*/
.feature-heading1 {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin: 10px 0 10px 0;
  text-align: center;
}
.feature-heading2 {
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0 10px 0;
  text-align: center;
  width: 600px;
} 

/* ========== CAMPAIGN ========== */
.campaign {
  background-color: #e5003800;
  color: #000000;
  text-align: center;
}
.campaign-wrapper {
  background: var(--color-primary);
  height: 120px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 50px;
  overflow: visible; /* ← はみ出しを許可 */
}
.campaign-back {
  background-color: #fff;
}

/* キャンペーン帯の下向き三角 */
.campaign-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;              /* 三角の高さ分だけ下に出す */
  transform: translateX(-50%);
  border-width: 20px 18px 0 18px;  /* 高さ・幅はお好みで調整 */
  border-style: solid;
  border-color: var(--color-primary) transparent transparent transparent;
}

/* 三角とその下のテキストがかぶらないように少し余白を足す */
.campaign-wrapper {
  margin-bottom: 30px;  /* 既存ルールにこの1行を追加でもOK */
}



.campaign-box {
  width: 423px;
  background: #fff;
  padding: 15px 10px 0 10px;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-family: "Noto Sans JP", sans-serif;
  position: relative;
  z-index: 2;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  height: 55px;
  vertical-align: bottom;
}

/* PC画像をボックスの外に配置し「浮かせる」 */
.campaign-pc-wrap {
  position: relative;
  z-index: 1;
}

.campaign-pc {
  width: 380px;
  height: auto;
  object-fit: contain;
  margin-left: 50px; /* 左方向にはみ出す */
  position: absolute;
  height: auto;
  transform: translate(50%, -50%);
  z-index: 1;
  top: 50%;
}


.text-normal {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  height: 87%;
}

.text-big {
  font-size: 38px;
  font-weight: 700;
  color: #111;
}

.text30 {
  position:absolute;
  left:20%;                   /* 先着 と 社 の間に来る位置。お好みで調整 */
  top:46%;                      /* 真ん中基準にして… */
  transform:translateY(-60%);   /* 少し上に飛び出させる */
  font-size:70px;
  z-index:2; 
  width: 100px;                   /* 白帯より上 */
}

.campaign-title {
  font-size: 36px;
  margin: 0 0 5px;
  font-weight:bolder;
  color: #e50038;
}

.campaign-lead {
  font-size: 28px;
  margin: 0 0 5px;
  font-weight: 800;
  border-bottom: 2px solid #e50038;
  display: inline-block;}

.campaign-lead-row {
  display: flex;
  align-items: center;   /* 縦中央揃え */
  gap: 12px;             /* 画像と文字の間隔 */
  margin-left: 70px;
}

.campaign-text {
  font-size: 16px;
  margin: 0 0 6px;
  font-weight: 600;
  font-family: Josefin Sans;
  letter-spacing: -1px;
}

.campaign-text2 {
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: -3px;
  margin: 0;
}
.campaign-set {
  width: 900px;
  margin: 30px auto;
}

.num1 {
  font-size: 45px;
  font-weight: 700;
}
.num2 {
  font-size: 54px;
  font-weight: 700;
  font-family: Josefin Sans;
}
.num3 {
  font-size: 24px;
}

.text3 {
  font-size: 36px;
  font-family: HGTE角ゴシック;
  font-weight: bold;
}
.chance {
  font-size: 47px;
  font-weight: bolder;
  font-family: HGTE角ゴシックU;
}

.campaign-note {
  font-size: 12px;
  margin: 0 0 18px;
}

.campaign-ctas {
  justify-content: center;
}
.Benefits {
  position: relative;
  top: 10px;
  left: 12px;
}

/* キャンペーンの黒吹き出し */
.label-bubble {
  font-size: 24px;
  font-family: josefin Sans;
  margin-bottom: 4px;
  align-items: baseline;
  background: #111;
  color: #fff;
  position: absolute;
  top: -67%;
  left: 75%;
  transform: translateX(-50%);
  height: 40px;
  width: 220px;
  text-align: center;
}
/* 黒吹き出しの三角部分*/
.label-bubble::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 15px 15px 0 0;
  border-style: solid;
  border-color: #000 transparent transparent transparent;  
} 


/* ================= 残りあと◯社 バッジ ================= */
.remain-badge {
  width: 140px;
  height: 110px;
  border: 2px solid var(--color-primary);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px auto 0 ;
  background: #fff;
  position: relative;
}

/* 上の赤い pill  */
.remain-label {
  background: var(--color-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 4px 20px;
  border-radius: 20px;
  position: absolute;
  top: -10px;
}

/* 大きい数字 */
.remain-number {
  font-size: 80px;
  font-weight: 600;
  color: #000;
  margin-top: 30px;
  line-height: 1;
  font-family: Josefin Sans;
}

/* "社" の部分 */
.remain-unit {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-primary);
  margin-left: 4px;
}



/* ================= PRICE COMPARISON ================= */
.price-compare {
  padding: 10px 0;
  background: #ffffff;
}

.price-compare-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px;
  padding: 10px 0;
  font-family: Josefin Sans;
}

.price-box {
  padding: 0 10px;
  width: 500px;
}

.price-title {
  font-size: 27px;
  font-weight: 900;
  margin-bottom: 10px;
  font-family: Josefin Sans;
  text-align: center;

}

.price-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
  font-size: 16px;
  padding: 30px 0 30px 0;
}
.price-pro {
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 18px;
}
.kome {
  font-weight: 600;
  font-size: 15px;
  margin-top: 10px;
}

/* 「初期」の行の上に空間 */
.price-table tr:first-child th,
.price-table tr:first-child td {
  padding-top: 20px;
}

/* 「合計」の行の下に空間 */
.price-table tr:last-child th,
.price-table tr:last-child td {
  padding-bottom: 20px;
}


/*初期から合計*/
.price-label-discount {
  font-size: 20px;
  text-align: left;
  font-weight: 900;
  font-family: HGTE角ゴシック;
  padding: 5px 0 5px 40px;
}

/*値段左*/
.price-value-discount {
  font-size: 22px;
  padding: 5px 60px 5px 0;
  font-weight: 900;
  text-align: right;
  width: 70%;
}

/*スターターからプロフェッショナル*/
.price-label-regular {
  font-size: 20px;
  text-align: left;
  font-weight: 900;
  font-family: HGTE角ゴシックU;
  padding: 5px 0 5px 40px;
}
/*値段右*/
.price-value-regular{
  font-size: 20px;
  padding: 5px 45px 5px 0;
  font-weight: 800;
  text-align: right;
  width: 70%;
}

.price-bold {
  font-weight: 900;
  font-size: 28px;
  width: 30%;
}


/* .price-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.month,
.year {
  margin: 2px 0;
  font-size: 12px;
  font-weight: 600;
  color: #4d4d4d;
  position: relative;
  left: -7px;
} */
.en1 {
  font-size: 27px;
  font-family: josefin Sans;
  font-weight: 700;
  color: #000;

}
.plan-price {
  font-size: 20px;
}

.en {
  font-size: 16px;
}
.plan-move {
  position: relative;
  top: 7px;
}



/* ================= CTA BAND (ダブルボタン帯) ================= */
/* 赤帯（高さ固定） */
.cta-band {
  background-color: var(--color-primary);
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center; /* ここで上下中央に揃える */
}

.cta-band-inner {
  max-width: 45%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.cta-card {
  background-color: #fff;
  border-radius: 9px;
  padding: 1px 1px 1px;
  text-align: center;
  border: 2px solid #f7f7f7;
  width: 300px;
  height: 90px;
}
.cta-area {
  padding: 10px 14px;
  border: 1px solid #e50038;
  border-radius: 12px;
  position: relative;
  height: 85px;
  text-align: center;
}
.cta-label {
  font-size: 10px;
  font-family: Josefin Sans;
  font-weight: 600;
  padding: 2px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  background: #111;
  color: #fff;
  height: 20px;
  position: absolute;
  top:-10px;
  left: 50%;                 /* 親の幅のちょうど真ん中に基点を持ってくる */
  transform: translateX(-50%); /* 自分自身の幅の半分だけ左に戻す → 中央揃え */
  letter-spacing: -0.5px;
}
.cta-label::after {
    content: "";
  position: absolute;
  bottom: 0;
  left: 57%;
  border-style: solid;
  border-width: 6px 5px 0 0;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
  transform: skew(-24deg);
  transform-origin: top;
}

.cta-box {
  border: 1px solid #e50038;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  max-width: 320px;
  flex: 1;
  min-width: 280px;
}

.cta-text {
  font-size: 13px;
  font-weight: 900;
  font-family: HGTE角ゴシック;
  margin: 6px 0 5px;
}

.cta-btn {
  min-width: 200px;
  font-size: 16px;
  font-weight: bold;
  padding: 4px 16px;
  border-radius: 999px;
}
.migi {
  font-size: 12px;
  font-weight: 100;
}

/* LINEボタンは赤背景に白文字で強調 */
.line-style {
  background-color: #e50038;
  color: #fff;
}
.header-logo-group {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 260px;
  margin-left: 30px;
}

/* ================ PRICING ================ */

.plan-comparison {
  background: url("img/back.png");
  background-repeat: no-repeat; /* 画像を繰り返さない */
  background-size: 65%;
  background-position: 86% 45%;
  background-color: #f7f7f7; 
  height: 1315px;
  width: 1200px;
  margin: auto;
}

.comparison-grid {
  width: 1096spx;
  height: 1300px;
  display: flex;
  position: relative;
  left: 65px;
  gap: 10px;
}
.comparison-grid-sp {
  display: none;
}
  .campaign-lead-sp {
      display: none;
 }



.plan-box {
  display: flex;
  width: 300px;
  gap: 20px;
}
/*左側1*/
.box1 {
  width: 100px;
}

.function p {
  font-size: 17px;
  font-family: Josefin Sans;
  font-weight: 600;
  color: #4d4d4d;
  background-color: #fff;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  margin: 15px auto;
  text-align: center;
  padding-top: 7px;
  position: relative;
  left:-30px;
  top:512px;
}


/*左側2*/
.box2 {
  width: 180px;
  text-align: center;
  position: relative;
  left: -40px;
  top: 323px;
}

.box-item1 {
  list-style-type: none;
  font-size: 16px;
  font-family: Noto Sans JP;
  font-weight: 800;
  color: #4d4d4d;
  margin: 0;
}


.box-item2 {
  list-style-type: none;
  font-size: 16px;
  font-family: Noto Sans JP;
  font-weight: 800;
  color: #4d4d4d;
  margin-top: -11px;
  position: relative;
  top: 31px;
}
.box-item3 {
  list-style-type: none;
  font-size: 16px;
  font-family: Noto Sans JP;
  font-weight: 800;
  color: #4d4d4d;
  margin-top: 50px;
  position: relative;
  top: 31px;
}


.box-item1 li {
  border-bottom: 2px solid #b3b3b3;
  width: 170px;
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}

.box-item2 li {
  border-bottom: 2px solid #b3b3b3;
  width: 170px;
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}
.box-item3 li {
  width: 170px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}


/*赤枠上*/
.ulli1 {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  top: 8px;
}

/*赤枠下*/
.ulli2 {
  list-style-type: none;
  padding: 20px 0 20px 0;
  margin: 0;
  position: relative;
  top: 8px;
}

.ulli3 {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  top: 8px;
}


/*赤枠内リスト上*/
.ulli1 li {
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  width: 220px;
  height: 68px;
  background-color: #fff;
  margin: auto;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Arial;
  font-weight: 700;
  color: #4d4d4d;
}

/*赤枠内リスト下*/
.ulli2 li {
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  width: 220px;
  height: 68px;
  background-color: #fff;
  margin: auto;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Arial;
  font-weight: 700;
  color: #4d4d4d;
}

.ulli3 {
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  width: 220px;
  height: 68px;
  background-color: #fff;
  margin: auto;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Arial;
  font-weight: 700;
  color: #4d4d4d;
}
/*赤枠内リスト上*/
.ulli1-1 li {
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  width: 220px;
  height: 68px;
  background-color: #fff;
  margin: auto;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Arial;
  font-weight: 700;
  color: #4d4d4d;
}

/*赤枠内リスト下*/
.ulli2-1 li {
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  width: 220px;
  height: 68px;
  background-color: #fff;
  margin: auto;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Arial;
  font-weight: 700;
  color: #4d4d4d;
}

.ulli3-1 li {
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  width: 220px;
  height: 68px;
  background-color: #fff;
  margin: auto;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: Arial;
  font-weight: 700;
  color: #4d4d4d;
}

.user {
  font-size: 12px;
  font-weight: 600;
  color: #4d4d4d;
  margin: auto;
  padding: 5px 0;
  text-align: center;
}

.amount {
  font-size: 27px;
  font-family: josefin Sans;
  font-weight: 700;
  padding: 0;
  margin: auto;
  text-align: center;
}

.plan-box.recommended {
  width: 786px;
  display: flex;
  gap: 13px;
  position: relative;
  top: 50px;
  left: -11px;
  text-align: center;
}

.starter {
  width: 250px;
  position: relative;
  left: 0px;
}

.standard {
  width: 250px;
  position: relative;
  left: 2px;
}

.standard h1 {
  color: #b7451f;
}

.plan-sub {
  position: relative;
  top: -10px;
}

.professional {
  width: 250px;
  position: relative;
  left: 1px;
}
.plan-title {
  display: block;
  font-size: 16px;
  font-family: Josefin Sans;
  background-color: #fff;
  width: 160px;
  height: 20px;
  border-radius: 999px;
  text-align: center;
  margin: auto;
  padding-top: 4px;
  font-style: italic;
}

.Target {
  font-size: 14px;
  font-family: Noto Sans JP;
  font-weight: 600;
  margin: 5px 0 30px 0;
  text-align: center;
}

.Registration {
  font-size: 15px;
  font-family: Josefin Sans;
  color: #fff;
  background-color:  var(--color-primary);
  width: 210px;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  margin: 10px auto;
  vertical-align: middle;
  padding-top: 9px;
  padding-left: 30px;
}


/* ========== BENEFITS ========== */
.benefits {
  background-color: var(--color-gray);
}

.benefit-target {
  text-align: center;
  font-size: 13px;
  margin-top: 0;
  margin-bottom: 10px;
}

.benefit-quote {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
}


/* ========== FAQ ========== */
.faq {
  background-color: #fff;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

details {
  border-radius: var(--radius-md);
  border: 1px solid #eee;
  background-color: #fff;
  padding: 10px 14px;
}

summary {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

details[open] {
  border-color: var(--color-primary-light);
  background-color: #fff9fb;
}

.faq-answer {
  font-size: 13px;
  margin-top: 6px;
}

.benefit-cards {
  max-width: 100%;
  margin:  auto; 
  display: flex;
  justify-content: center;
  gap: 24px;   /* カード間の余白 */  
}

.benefit-card {
  border: 1px solid #a94442;
  padding: 20px 18px 0 18px;
  background-color: #fff;
  position: relative;
  margin-top: 70px;
  margin-bottom: 80px;
  width: 580px;
  height: 200px;
}
/* デフォルト：PC */
.sp-only { display: none; }

.benefit-label img{
  padding: 4px 14px;
  border-radius: 999px;
  position: absolute;
  top: -1px;
  left: 16%;
  transform: translateY(-50%);
}
.benefit-text {
  font-size: 15px;
  font-family: Noto Sans JP;
  font-weight: 600;
  line-height: 1.8;
  margin: 24px 8px 8px 15px;
  color: #333;
  letter-spacing: -1px;
}

.benefit-caption {
  margin: auto;
  text-align: center;
  position: relative;
  top: 25px;
  left: -1%;
}


.benefit-caption2 {
  padding: 22px 0 0 10px ;
  margin: auto;
  text-align: center;
  position: relative;
  top: 3px;
  left: -1%;

}

.QA {
  max-width: var(--max-width);
  height: 500px;
}
.faq-vertical-container {
  width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  padding: 50px 0;
  background: #fff;
}

.faq-vertical-item {
  position: relative;
  width: 100%;
  max-width: 1200px;
  /* margin: auto; */
}

.faq-vertical-item img {
  width: 100%;
  height: auto;
  display: block;
}

.faq-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.faq-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 100%;
  box-sizing: border-box;
  font-size: 16px;
}

.faq-q-box {
  width: 55%;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.faq-a-box {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* Qの文字 */
.faq-q {
  font-size: 23px;
  font-family: Noto Sans JP;
  font-weight: 600;
  width: 400px;
  margin: 0;
  position: absolute;
  top: 20px;
  left: 86px;
  letter-spacing: -1.5px;
}
/* Aの文字一番上 */
.faq-a1 {
  font-size: 20px;
  font-family:  Noto Sans JP;
  font-weight: 600;
  width: 560px;
  margin: 0;
  position: absolute;
  top: 53px;
  left: 590px;
  letter-spacing: -2px;
}
/* Aの文字２．３番目 */
.faq-a2 {
  font-size: 19px;
  font-family:  Noto Sans JP;
  font-weight: 600;
  width: 560px;
  margin: 0;
  position: absolute;
  top: 40px;
  left: 590px;
  letter-spacing: -1px;
}



/* スマホ対応 */
@media (max-width: 820px) {
  .faq-question,
  .faq-answer {
    font-size: 14px;
  }
}
/* .header-cta-double {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 8px 16px;
  background-color: #fafafa;
  flex-wrap: wrap;
} */

/* ========== BOTTOM CTA ========== */
.bottom-main {
  width: 1200px;
  height: 777px;
  margin: auto;
}

.gradient-underline {
  font-size: 45px;
  position: relative;
  font-family: Arial;
  font-weight: 900;
  text-align: center;
  width: 1000px;
  margin-top: 80px;
  margin-bottom: 150px;
  margin-left: auto;
  margin-right: auto;
}

.gradient-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    #e91e63 0%,
    #d40037 30%,
    #a0002a 60%,
    transparent 100%
  );
}

.bottom-sub {
  text-align: center;
  font-size: 38px;
  font-family: Arial;
  font-weight: 900;
  margin: 0 0 14px;
}

.bottom-version {
  font-family: Arial;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -2px;
}

.bottom-explanation {
  font-size: 20px;
  font-family: Arial;
  font-weight: 500;
  text-align: center;
}
.bottom-cta p {
  justify-content: center;
  font-size: 20px;
  font-family: Arial;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
}


/*AI自動化の枠関連配置など*/
.auto-box-wrap {
  display: flex;
  justify-content: center;
  margin-top: 56px;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}
/*グレーの枠の中*/
.auto-box {
  position: relative;
  width: 700px;
  height: 263px;
  max-width: 980px;
  background: #ffffff;
  border: 2px solid #b3b3b3;
  border-radius: 28px;
  padding: 28px 80px 15px;
}

/* 上部のグレー帯タイトル */
.auto-box-title {
  width: 380px;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #b3b3b3;
  color: #ffffff;
  font-size: 23px;
  font-weight: 500;
  padding: 8px 40px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* リスト */
.auto-box-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

/*リスト文字*/
.auto-box-list li {
  position: relative;
  font-size: 22px;
  font-family: ArialS;
  font-weight: 500;
  line-height: 1.8;
  padding-left: 28px;
}

/* 赤丸 */
.auto-box-list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
}

.bottom-note {
  text-align: center;
  color: #ffe4ec;
}

/* ========== FOOTER ========== */
.site-footer {
  background-color: #e50038;
  padding: 15px 0;
  font-size: 12px;
  height: 140px;
}

.footer-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  color: #ffffff;
  width: 900px;
  margin: auto;
}

.footer-left {
  height: 60px;
  margin: auto;
}

.footer-logo p {
  font-size: 24px;
  margin: auto;
  width: 680px;
}
/* ===============================
   FOOTER ロゴ配置
================================ */

.footer-logo-img {
  height: 90spx;     /* ロゴの見た目サイズ */
  width: auto;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 960px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }


  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .hero-side {
    padding-top: 0;
  }


  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {

  .hero-title {
    font-size: 22px;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .header-main {
    flex-wrap: wrap;
  }

  .header-cta {
    margin-left: auto;
  }

  .bottom-list {
    font-size: 12px;
  }
}

/* =================== レスポンシブ対応 =================== */
@media screen and (max-width: 820px) {

  html, body {
    overflow-x: hidden;
  }
  .hero {
    padding-top: 100px; /* header実寸より少し大きめ */
  }

  .hero-text {
  width: 100%;
  }

  .auto-banner {
    height: auto;              /* ← 固定高さをやめる */
    padding: 16px 20px;        /* ← 上下余白で高さを作る */
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .auto-banner span {
    display: inline-block;     /* ← 改行してもズレない */
    white-space: nowrap;       /* ← 「自動化」が割れない */
  }
  
  .auto-banner span {
    font-size: 16px;
  }


  .logo-text {
    font-size: 12px;
  }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff; /* 必要に応じて元の背景色に */
    border-bottom: 1px solid #ddd;
  }

  body {
    padding-top: 70px; /* ヘッダーの高さに応じて調整（例：70px） */
  }

  .container,
  .hero-inner,
  .nayami,
  .faq-vertical-container,
  .bottom-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .auto-box-wrap {
    padding: 30px 0 20px;
    margin: auto;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;

  }

   .nayami-sub {
    display: flex;
    justify-content: center;
  }

  .hero-sub {
    /* 見た目を固定 */
    width: 420px;              /* ← 吹き出しの横幅を固定 */
    max-width: 420px;
    height: 45px;              /* ← 高さも固定 */
    line-height: 45px;         /* ← 縦中央揃え */

    /* 文字制御 */
    white-space: nowrap;       /* ← 絶対に折り返させない */
    text-align: center;
    font-size: 13px;

    /* 既存デザイン維持 */
    margin: 25px auto;
  }
  .hero-sub::after {
    bottom: 1px;
  }
  .point-pc {
    display: none;
  }
  .feature-grid img.point-sp {
    margin: 30px auto;
    width: 75%;
  }
  .point-sp {
    width: 100%;
    display: block;
    height: auto;
  }
  .point-sp1  {
    width: 110px; 
    display: block;
    height: auto;
    margin: auto;  
  }
.point2 {
  padding: 0;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  left: 0 !important;

}

.feature-card2 {
  padding: 20px;
}
/*ポイント題名*/
.feature-heading {
  margin: 0 0 8px;
  font-size: 18px;
  color: #000000;
  font-weight: 800;
  text-align: center;
}

  /*説明文字*/
.feature-heading1 {
  font-size: 11px;
  font-weight: 500;
  color: #000;
  margin: 10px 0 10px 0;
  text-align: center;
}
.feature-heading2 {
  font-size: 11px;
  font-weight: 500;
  margin: 10px 0 10px 0;
  text-align: center;
  width: 600px;
} 

  .section-title {
    font-size: 20px;
    margin: 20px;
  }
  .hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    left: 0 !important;

  }

  .header-main,
  /* .header-cta-double.inline-style, */
  .plan-box,
  .plan-box.recommended {
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    left: 0 !important;
  }
  /* =========================
   CTA BAND スマホ横並び対応
========================= */
@media (max-width: 820px) {

  .cta-band {
    height: auto;            /* 高さ固定を解除（中身に合わせる） */
    padding: 10px 0;
  }

  .cta-band-inner {
    display: flex;           /* 念のため明示 */
    flex-direction: row;     /* ← 横並びにする核心 */
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }

  .cta-card {
    width: 48%;              /* ← 幅だけ注意点 */
    min-width: unset;
    height: auto;
    padding: 0;
  }
    /* ラベル下の余白を削る */
  .cta-text {
    font-size: 7px;
  }

  .cta-area {
    height: auto;
    padding: 6px 8px;
  }

  .cta-btn {
    min-height: 20px;
    font-size: 11px;
    padding: 0 6px;
    min-width: 150px;
  }
   /* 上の黒ラベル位置を微調整 */
  .cta-label {
    top: -8px;
    height: 18px;
    font-size: 9px;
  }
}

  .header-nav {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-left: 0;
  }
  .img-AI {
    height: auto;
    margin: 40px auto 15px ;
    position: static;
    width: 80%;
  }
  .hero-lead {
    font-size: 2.5vw ;
    text-align: left;
    margin-left: 14%;
    font-weight: 600;
  }

  .hero-image img,
  .feature-card1,
  .feature-heading2,
  .faq-q,
  .faq-a1,
  .faq-a2,
  .plan-comparison {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center;
  }


.comparison-grid {
  display: none;
}

  .animaru,
  .animaru.upper-row,
  .animaru.lower-row {
    flex-direction: column;
    gap: 24px;
  }


  /* .faq-vertical-item img {
    display: none;
  } */

  .plan-box,
  .faq-vertical-container {   
    width: 100% !important;
    margin: auto;
    position: static !important;
    min-height: 370px;
  }

  .faq-vertical-container .faq-vertical-item .faq-q, .faq-a1, .faq-a2, .faq-a3 {
    font-size: 2.5vw;
  }

  .faq-vertical-container {
    gap: unset;
    padding-bottom: 30px;
  }

  .faq-vertical-item {
    margin-top: 30px;
  }

  .faq-q, .faq-a1 {
    height: 43%;
    text-align: left;
  }

  .faq-q {
    padding: 3.5% 0 0 14%;

  }

  .faq-a1 {
    height: 57%;
    padding: 6.5% 0 0 16%;
  }

  .faq-a2, .faq-a3 {
    text-align: left;
    height: 57%;
    padding: 4.5% 0 0 16%;
  }
  .plan-price {
    /* width: 100% !important;
    margin: auto; */
    position: relative;
  }
  /* .faq-overlay {
    padding: 16px;
  } */

  .plan-comparison {
    background: none !important;
    height: 2150px;
  }
  .Registration {
    width: 90% !important;
    font-size: 14px;
    padding: 10px 0;
  }

  .gradient-underline {
    font-size: clamp(28px, 3vw, 31px) !important;
    max-width: 820px;
    width: 100%;
    margin-bottom: 60px;
    margin-top: 60px;
  }

  .bottom-version {
    font-size: 32px !important;
  }


}
/* ===============================
   動物ブロック：スマホ版（flex・順序固定）
=============================== */
@media screen and (max-width: 820px) {
  .nayami-pc {
    display: none;
  }

  .nayami-sp {
    display: block;
  }

  .nayami-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 32px;
  }

  .nayami-row:last-child {
    justify-content: center;
  }

  .nayami-row .animaru-img {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .animaru-img img {
    height: 100px;
  }

  .animaru-black {
    font-size: 14px;
    width: 160px;
    line-height: 3.5;
  }
}
/* =====================================
   CAMPAIGN（スマホ版・正規完成版）
===================================== */
@media screen and (max-width: 820px) {

  /* 白いキャンペーンBOX（中央） */
 .campaign-wrapper {
    overflow: hidden;
    height: 120px;              /* ← 元の帯の高さに固定 */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: none;            /* ← scaleを完全に無効化 */
  }
  .campaign-wrapper{
    transform-origin: top center;
  }
  .campaign-pc,
  .campaign-pc-wrap {
    display: none !important;
  }

  .campaign-box .text-big:first-of-type {
    margin-right: 60px; /* ← 30の半分＋余白 */
  }

  .campaign-box {
    transform: translate(-50%, -50%) scale(0.9);
    transform-origin: center center;
  }
  
  .campaign-lead {
    display: none;  }

  .campaign-lead-row {
    flex-direction: column;   /* ← 縦並び */
    justify-content: center;
    align-items: center;      /* 横中央 */
    margin-left: 0;           /* PC用offset解除 */
    gap: 8px;                 /* 画像と文字の間 */
    text-align: center;
  }  
  .campaign-lead-sp {
    display: block;
    font-size: 18px;
    margin: 0 0 5px;
    font-weight: 800;
    border-bottom: 2px solid #e50038;
    text-align: center;
    width: 360px;
  }

  /* 特典画像とテキストを縦でも横でも自然に中央へ */
  .campaign-lead-row img {
    margin: 0;
  }
  
  .campaign-text {
    font-size: 14px;
    margin: 0 0 6px;
    font-weight: 600;
    font-family: Josefin Sans;
    letter-spacing: -1px;
    display: block;          /* インライン状態を解除 */
    width: 100%;
    margin: 12px auto;       /* ← 画面中央 */
    text-align: center;      /* テキストも中央寄せ */
  }
  
  .campaign-text2 {
  font-size: 16px;
  font-weight: bolder;
  letter-spacing: -3px;
  margin: 0;
  }
  .campaign-title {
    font-size: 4.5vw;
    margin: 0 0 8px;
    font-weight:bolder;
    color: #e50038;
  }
  .campaign-set {
    max-width: 360px;
    width: 100%;
    margin: 24px auto;
  }

  .Benefits {
    width: 88px;
    position: relative;
    top: 10px;
    left: 12px;
  }
  .num1 {
  font-size: 17px;
  font-weight: 700;
  }
  .num2 {
    font-size: 22px;
    font-weight: 700;
    font-family: Josefin Sans;
  }
  .num3 {
    font-size: 21px;
  }
    /* 黒の吹き出し：位置を元の距離感に戻す */
  .label-bubble {
    top: -28px;        /* ← 距離感はほぼ維持 */
    font-size: 21px;
    height: 35px;
    width: 200px;
  }

  .label-bubble::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 0;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
  }

  .text30 {
    position: absolute;
    top: -44px;
    left: -128px;
    transform: none;
  }
  
  .text-number {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  }

}
@media screen and (max-width: 820px) {
  .header-main {
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
  }

  .header-logo-group {
    align-items: center;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding: 13px 0 11px 0;
  }

  .hero {
    padding: 0;
  }

  .logo-img {
    width:50px;
    height: auto;
  }

  .logo-text {
    font-size: 12px;
    white-space: nowrap;
    position: relative;
    top: 4px;
  }

  .header-nav {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 0;
    background-color: #e50038; /* 赤背景 */
    padding: 8px 12px;
  }

  .header-nav a {
  color: #000; 
  font-weight: bold;
  background-color: #fff;
  border-radius: 20px;
  width: 105px;
  text-align: center;
  }
  .header-cta-double.inline-style {
    display: none;
  }

  /*-------------------------プラン--------------------------------------*/

  .comparison-grid {
    display: none;
  }

  .comparison-grid-sp {
    display: block;
    align-items: center;  
  }
  .addition {
    position: relative;
    top: -64px;
  }


.starter-sp {
  /* 見た目 */
  background-image: url("img/gray.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center; /* ← ％指定はやめる */
  background-color: #f7f7f7;
  background-size: 120%;
  background-position: center top;
  border-radius: 16px;   /* ← 角丸 */

  /* レイアウト（重要） */
  width: 100%;
  max-width: 360px;   /* ← ここで“見た目の幅”を安定させる */
  height: 550px;

  margin: 10px auto;    /* ← 水平中央 */
  display: flex;
  justify-content: center;
  align-items: center;
}
  .standard-sp {
  /* 見た目 */
  background-image: url("img/yellow.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center; /* ← ％指定はやめる */
  background-color: #f7f7f7;
  background-size: 120%;
  background-position: center top;
  border-radius: 16px;   /* ← 角丸 */


  /* レイアウト（重要） */
  width: 100%;
  max-width: 360px;   /* ← ここで“見た目の幅”を安定させる */
  height: 700px;

  margin: 30px auto;    /* ← 水平中央 */
  align-items: center;
 }
  .professional-sp {
  /* 見た目 */
  background-image: url("img/gray.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center; /* ← ％指定はやめる */
  background-color: #f7f7f7;
  background-size: 120%;
  background-position: center top;
  border-radius: 16px;   /* ← 角丸 */


  /* レイアウト（重要） */
  width: 100%;
  max-width: 360px;   /* ← ここで“見た目の幅”を安定させる */
  height: 800px;

  margin: 30px auto;    /* ← 水平中央 */
  display: flex;
  justify-content: center;
  align-items: center;
  display: block;
 }
  .starter-sp,
  .standard-sp,
  .professional-sp {
    position: relative;
  }

  .plan-sub-sp1,
  .plan-sub-sp2 {
    display: block;
    position: relative;
    height: 0; /* pill 用の土台 */
  }

  .plan-sub-sp2 {
    display: block;
    position: relative;
  }

  .plan-title2 {
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 14px;
    font-family: Josefin Sans;
    background-color: #fff;
    color: #b7451f;
    width: 160px;
    height: 20px;
    border-radius: 999px;
    text-align: center;
    padding-top: 4px;
    font-style: italic;
    left: 50%;
    transform: translateX(-50%);

  }
  .starter-sp,
  .standard-sp,
  .professional-sp {
    display: block;
    margin-bottom: 32px;
  }

  .plan-sub-sp1,
  .plan-sub-sp2,
  .plan-sub-sp3 {
    display: block;
  }
  .plan-sub-sp1,
  .plan-sub-sp2,
  .plan-sub-sp3 {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
  }

  /* プラン名 pill */
  .plan-title {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 17px;
    font-family: Josefin Sans;
    background-color: #fff;
    width: 160px;
    height: 24px;
    line-height: 21px;
    border-radius: 999px;
    font-style: italic;
    margin: auto;
    position: relative;
    top: 10px;
  }
  .plan-title2 {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 15px;
    font-family: Josefin Sans;
    background-color: #fff;
    width: 160px;
    height: 21px;
    line-height: 19px;
    border-radius: 999px;
    font-style: italic;
    margin: auto;
    position: relative;
    top: 8px;
    left: 78px;
  }
  .plan-title3 {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 15px;
    font-family: Josefin Sans;
    background-color: #fff;
    width: 160px;
    height: 20px;
    line-height: 26px;
    border-radius: 999px;
    font-style: italic;
    margin: auto;
    position: relative;
    top:6px;
  }

  /* 説明文 */
  .Target-sp1 {
    font-size: 15px;
    font-weight: 600;
    margin: 12px 0 20px;
    position: relative;
    top: 10px;
  }
  .Target-sp2 {
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0 10px;
    position: relative;
    top: 5px;
  }
  .Target-sp3 {
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0 20px;
    position: relative;
    top: 5px;
  }

  .user {
    font-size: 14px;
    margin-top: 8px;
  }

  .amount {
    font-size: 38px;
    font-family: Josefin Sans;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .Registration1 {
    margin: 0 auto ;
    width: 100%;
    max-width: 240px;
    height: 44px;
    line-height: 42px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    top: 10px;
  }
    .Registration2 {
    margin: 16px auto 0;
    width: 100%;
    max-width: 240px;
    height: 44px;
    line-height: 42px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    top: -80px;
  
  }
  .Registration3 {
    margin: 16px auto 0;
    width: 100%;
    max-width: 240px;
    height: 44px;
    line-height: 42px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    top: -6px;
  }

  .Post p,
  .report p,
  .team p {
    font-size: 18px;
    font-family: Josefin Sans;
    font-weight: 600;
    background-color: #fff;
    width: 100%;
    height: 36px;
    max-width: 140px;
    border-radius: 999px;
    margin:2px auto 0 20px;
    line-height: 42px;

  }
  /*プランul*/
  .Post ul,
  .report ul,
  .team ul {
    list-style: none;
    padding-inline-start: 27px;
  }
  /*プランli*/
  .Post li,
  .report li,
  .team li {
    text-align: left;
    margin: 6px 0 6px;
    font-size: 14px;
    font-family: Josefin Sans;
    font-weight: 600;
    max-width: 307px;

  }
  /*人気NO1の画像*/
  .plan-sub-sp2 img {
    position: relative;
    left: -1px;
    top: -60px;
    width: 70px;
  }
  /*プラン横並び*/
   .price-grid1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
    column-gap: 20px;
    margin: 8px auto 12px;
    max-width: 300px;
    position: relative;
    top: 15px;
  }
   .price-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
    column-gap: 20px;
    margin: 8px auto 12px;
    max-width: 300px;
    position: relative;
    top: -70px;
  }
   .price-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
    column-gap: 20px;
    margin: 8px auto 12px;
    max-width: 300px;
    position: relative;
    top: 2px;
  }

  .price-grid .user {
    font-size: 12px;
    font-weight: 600;
    color: #4d4d4d;
    text-align: center;
    margin: 0;
  }

  .price-grid .amount {
    font-size: 28px;
    font-family: Josefin Sans;
    font-weight: 700;
    text-align: center;
    margin: 0;
  }

  .pr1 {
    position: relative;
    top: 35px;
    margin: auto;
  }
  .pr2 {
    position: relative;
    top: -58px;
    margin: auto;
  }
  .pr3 {
    position: relative;
    top: 18px;
    margin: auto;
  }
}
/* ================= PRICE COMPARISON スマホ版 ================= */
@media screen and (max-width: 820px) {

  .price-compare-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;   /* ← 画面中央基準 */
    gap: 10px;
  }

  .price-box {
    width: 100%;             /* 横幅いっぱい */
    max-width: 350px;
    margin-bottom: 0px;     /* 2ブロックの間隔 */
    padding: 0 ;
  }
  .price-pro {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .price-title {
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  /*残り〇社*/
  .remain-badge {
    margin: 40px auto 30px;
  }

  .price-table {
    font-size: 15px;
  }
    .price-table {
    table-layout: fixed;
  }

  .price-table th {
    width: 40%;
  }

  .price-table td {
    width: 60%;
  }

  .price-label-discount,
  .price-label-regular {
    padding-left: 0;         /* 左の余白リセット */
    font-size: 15px;
  }

  .price-value-discount,
  .price-value-regular {
    padding-right: 0;
    font-size: 15px;
  }

  .price-bold {
    font-size: 22px;
  }

  .kome {
    font-size: 13px;
    line-height: 1.6;
  }
  .price-table th {
    white-space: nowrap;   /* ← 改行させない */
  }

}

/* スマホだけ切り替え */
@media screen and (max-width: 820px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* ===============================
   BENEFIT：スマホ完全修正版
================================ */
@media screen and (max-width: 820px) {

  /* 親：縦並び */
  .benefit-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    height: 345px;
  }

  /* 各ブロック */
  .benefit-wrap.sp-only {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* カード本体：幅固定を殺す */
  .benefit-card,
  .benefit-card--sp {
    width: 100%;
    max-width: 420px;
    height: auto;              /* ← 超重要 */
    max-height: 150px;
    margin: 0 auto;
    padding: 24px 16px 0;
    box-sizing: border-box;
  }

  /* テキスト */
  .benefit-text {
    font-size: 9px;
    line-height: 1.8;
    margin: 0 auto 12px;
    text-align: left;
    max-width: 300px;
  }

  /* 英字：absolute をやめて自然配置 */
  .benefit-en {
    position: static;
    display: block;
    margin: 8px auto 0;
    font-size: 11px;
    text-align: center;
    width: 90%;
  }

  /* 上の赤ラベル位置調整 */
  .benefit-label {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: -12px;
    z-index: 2;
  }

  .benefit-label img {
    height: 28px;
    width: auto;
    position: relative;
    left: 0%;
    top: 15px;
    transform: translateY(-50%);
  }

  .bottom-sub {
  text-align: center;
  font-size: 24px;
  font-family: Arial;
  font-weight: 900;
  margin: 0 0 14px;
}
  .bottom-cta p{
    width: 100% !important;
    margin: 30px auto;
    font-size: 12px;
  }

  .bottom-main {
  width: px;
  height: 550px;
  margin: auto;
 }
  /* リスト */
  .auto-box-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: auto !important;
  }


  .auto-box-list li {
    width: 100% !important;
    max-width: 360px !important;
    transform: none !important;
    margin: auto !important;
    text-align: left;
    font-size: 15px !important;
    padding-left: 20px;
    position: relative;
  }

  .auto-box-list li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 50%;
}
    .auto-box-title {
    font-size: 13px;
    padding: 8px;
    width: 50% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center;
    position: relative;
    left: 0;
    top: -28px;

  }
   .auto-box {
    width: 100% !important;
    max-width: 500px !important;
    transform: none !important;
    padding: 10px  !important;
    height: 213px;

  }
  .site-footer {
  background-color: #e50038;
  padding: 15px 0;
  font-size: 12px;
  height: 140px;
}
.footer-logo-img {
  width: 70px;

}
.site-footer {
  background-color: #e50038;
  padding: 15px 0;
  font-size: 12px;
  height: 87px;
}

.footer-inner {
  display: flex;
  gap: 3px;
  align-items: flex-start;
  color: #ffffff;
  max-width: 320px;
  width: 100%;
  margin: auto;
}

.footer-left {
  height: auto;
  margin: auto;
}

.footer-logo p {
  font-size: 13px;
  margin: auto;
  max-width: 250px;
}
}
/* 改行制御用：既存デザインには影響しない */
.sp-br {
  display: none;
}

@media (max-width: 450px) {
  .sp-br {
    display: inline;
  }
}
/* =========================================
   Step1: 820px以下で「ヘッダーだけ」スマホ仕様に寄せる
   （形を崩さず、PC版には影響なし）
========================================= */
@media screen and (max-width: 820px) {

  /* ① 820pxでも、スマホ同様にPC専用を消す */
  .pc-only { display: none; }
  .sp-only { display: block; }

  /* ② 2連CTAはスマホ同様に非表示（今は820以下でしか消えてない） */
  .header-cta-double.inline-style { display: none; }

  /* ③ ヘッダー全体を「縦に」揃えて、詰まりを防ぐ */
  .header-main{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }


  /* ⑤ ロゴ周り（見た目そのままで少しだけ収まりよく） */
  .logo-text{ font-size: 15px; } /* 17px → 少しだけ */
    /* Step2: HERO をスマホ同様に収める */
  .hero-inner{
    width: 100%;
    max-width: 500px;   /* 820スマホ時の感覚に寄せる。好みで520までOK */
    margin: 0 auto;
    box-sizing: border-box;
  }

  .hero-image img{
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  .header-nav{
    overflow-x: auto;
  }

  .header-nav::-webkit-scrollbar{
    display: none;
  }

  .header-nav a{
    flex: 0 0 auto;
    width: 90px;              /* ← 重要：110 → 96 */
    text-align: center;
    padding: 4px 0;
    font-size: 12px;
    white-space: nowrap;
  }
  /* ロゴ＋文字のグループ */
  .header-logo-group{
    gap: 10px;                 /* ロゴと文字の間隔を詰める */
  }

  /* ロゴ画像 */
  .logo-img{
    height: 42px;              /* ← 65px → 42px */
    width: auto;
  }

  /* 英字テキスト */
  .logo-text{
    font-size: 13px;           /* 少しだけ小さく */
    line-height: 1.2;          /* 縦の余白を削る */
    white-space: nowrap;
  }
    .header-logo-group{
    margin-left: 0;        /* ← 左の余白を消す */
    min-width: auto;       /* ← 固定幅も解除 */
  }
.hero-sub{
    width: 100%;
    max-width: 92%;
    height: auto;

    /* 1行固定 */
    white-space: nowrap;

    /* 三角が消える原因なので消す */
    overflow: visible;

    /* 1行に収めるために文字を調整 */
    font-size: 2.8vw;
    line-height: 1.4;
    padding: 10px 14px;

    margin: 0 auto 18px;
    text-align: center;
    position: relative; /* 念のため */
  }

  .hero-sub::after{
    border-width: 12px 7px 0 7px;
  }
  .nayami-sub {
    margin-top: 20px;
  }
  
  /* 行全体：左右に余白 */
  .nayami-row{
    gap: 12px;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* 各カード：画面幅に応じて縮む */
  .nayami-row .animaru-img{
    width: min(46vw, 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 黒い吹き出し（文字） */
  .animaru-black{
    width: 100%;
    font-size: 12px;          /* ← 1行に収める */
    line-height: 1.2;
    height: auto;
    padding: 10px 6px;
    margin-bottom: 14px;

    white-space: nowrap;      /* ← 改行させない */
    overflow: visible;        /* ← 三角を消さない */
    text-align: center;
  }

  /* 吹き出しの三角 */
  .animaru-black::after{
    left: 50%;
    border-width: 12px 8px 0 8px;
    border-color: #000 transparent transparent;
    transform: none;
    translate: -50% 100%;
  }

  /* 動物画像 */
  .animaru-img img{
    max-width: 100%;
    height: auto;
  }
    .animaru-black{
    height: 44px;             /* ← 全吹き出しを同じ高さに */
    display: flex;
    align-items: center;      /* 縦中央 */
    justify-content: center;  /* 横中央 */
    padding: 0 6px;           /* 高さ固定なので上下paddingは使わない */
  }

  .animaru-black::after{
    bottom: -12px;            /* 三角位置を固定 */
  }
  .animaru-black{
    width: 100%;
    height: 44px;               /* 吹き出しを全て同じ高さに */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;

    font-size: 12px;
    line-height: 1;
    text-align: center;

    white-space: nowrap;        /* 改行しない */
    overflow: visible;          /* 三角を切らない */
    position: relative;         /* 三角の基準 */
  }

  /* 三角：常に“吹き出しの外側”に固定 */
  .animaru-black::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;              /* ← ここで吹き出しの外に出す */
    transform: translateX(-50%);
    border-style: solid;
    border-width: 10px 7px 0 7px;
    border-color: #111 transparent transparent transparent;

    /* 以前の skew/translate の影響を消す */
    translate: unset;
  }
  
  /* 2列行：念のため上揃え */
  .nayami-sp .nayami-row{
    align-items: flex-start;
  }

  /* 1カード：吹き出しを絶対配置できるようにする */
  .nayami-sp .animaru-img{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* 下段の黒枠（「やっているつもりで成果が出ない」）だけ調整 */
  .nayami-sp .nayami-row:last-child .animaru-black{
    white-space: normal;        /* 折り返しOK */
    text-align: center;
    line-height: 1.3;
    font-size: 12px;            /* ←最小限だけ下げる */
    padding: 6px 8px;           /* 高さは変えずに文字だけ収める */
  }
   /* 「その課題、OkwiのAIツールが「自動化」します。」の赤帯だけ */
  .auto-banner#features{
    flex-direction: column;   /* 2行に積む */
    height: auto;             /* 固定90pxだと窮屈なので、この帯だけ可変 */
    padding: 12px 10px;
    text-align: center;
    gap: 2px;
  }

  .auto-banner#features .line1{
    white-space: normal;      /* ← ここが重要：折り返しOK */
    font-size: clamp(14px, 4.6vw, 18px);
    line-height: 1.25;
    max-width: 100%;
  }

  .auto-banner#features .line2{
    white-space: nowrap;      /* 「自動化」します。は基本1行維持 */
    font-size: clamp(16px, 5.2vw, 20px);
    line-height: 1.25;
    max-width: 100%;
  }
  
  .campaign-lead-sp{
    /* 変な分割の主因を止める */
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    line-break: strict;

    /* 端末が狭いとき用の微調整（“形は崩さず”収める） */
    font-size: clamp(13px, 4.2vw, 16px);
    letter-spacing: -0.01em;
    line-height: 1.35;

    /* 白枠内の左右余白（端ギリ回避） */
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
    /* 白背景BOXを基準にする */
  .campaign-back{
    position: relative;
    overflow: hidden;   /* ← 赤線を白背景内に閉じ込める */
  }

  /* 白枠の内側に収めるための左右余白（見た目も良くなる） */
  .campaign-set{
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  .campaign-set .price-table{
    /* 320pxを基準に、最大 1.15 まで拡大 */
    --pt-s: clamp(1, calc((100vw - 24px) / 320), 1.15);

    transform: scale(var(--pt-s)) !important;
    transform-origin: center top;

    /* スケールしても枠内に入るよう、レイアウト幅を逆算して調整 */
    width: calc(100% / var(--pt-s)) !important;
    max-width: none !important;

    margin: 0 auto;
    table-layout: auto !important;
  }

  /* 切れ防止：金額は1行維持（ただし表全体が収まるので切れない） */
  .campaign-set .price-table th,
  .campaign-set .price-table td{
    white-space: nowrap !important;
  }
  
  /* 金額側セル（discount/regular 両方）と、その中の要素すべて */
  .campaign-set .price-value-discount,
  .campaign-set .price-value-regular,
  .campaign-set .price-value-discount *,
  .campaign-set .price-value-regular *{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict;
  }

  /* 基準：カード 300×2 + gap 24 = 624px */
  .cta-band{
    --cta-base-w: 624px;
    --cta-s: min(1, calc(100vw / var(--cta-base-w)));

    height: 100px !important;        /* 赤帯の高さは固定（912pxと同じ見え方） */
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  .cta-band-inner{
    width: var(--cta-base-w) !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;     /* 絶対に折り返さない */
    gap: 24px !important;
    justify-content: center !important;
    align-items: center !important;

    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(var(--cta-s)) !important;
    transform-origin: center !important;
  }

  /* ↓ ここから下は「スマホ用つまみ調整」を全部“PC基準に戻す” */
  .cta-card{
    width: 290px !important;
    height: 90px !important;
    padding: 1px !important;
    flex: 0 0 auto !important;
  }

  .cta-area{
    padding: 9.5px 14px !important;
    border-radius: 12px !important;
  }

  .cta-text{
    font-size: 13px !important;
    margin: 6px 0 5px !important;
  }

  .cta-btn{
    min-width: 200px !important;     /* これが48% + min-width150 と衝突してた */
    font-size: 16px !important;
    padding: 4px 16px !important;
    min-height: unset !important;
  }

  .cta-label{
    top: -10px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
  
}

  






/* 820px以下：位置は元のまま（赤帯の見え方を維持） */
@media screen and (max-width: 820px){
  .campaign-box{
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center;
  }
}


/* ===============================
   フッター：444px以下で TEL から改行
   =============================== */
@media screen and (max-width: 444px) {

  .site-footer .footer-inner {
    text-align: center; /* 既存と同じなら影響なし */
  }

  /* TELだけを改行させる */
  .site-footer .footer-inner .tel {
    display: block;
    margin-top: 0px;
  }
}


/* 423px以下：白BOXを等比縮小して“必ず収める”（412pxもここに入る） */
@media screen and (max-width: 423px){
  .campaign-box{
    transform: translate(-50%, -50%)
      scale(clamp(0.72, calc((100vw - 24px) / 423px), 0.98)) !important;
  }
}
/* 320pxだけ：料金表を少し縮めて「円」落ちを防ぐ */
@media screen and (max-width: 340px){

  .campaign-set .price-table{
    --pt320: clamp(0.88, calc((100vw - 24px) / 340), 0.98);

    transform: scale(var(--pt320)) !important;
    transform-origin: center top;

    /* 縮小しても白枠内に収めるための補正 */
    width: calc(100% / var(--pt320)) !important;
    max-width: none !important;
  }

  /* 念押し：金額セル内は絶対に改行させない */
  .campaign-set .price-value-discount,
  .campaign-set .price-value-regular,
  .campaign-set .price-value-discount *,
  .campaign-set .price-value-regular *{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}
/* ================= PRICE COMPARISON：320px対策（改行させず白枠内に収める） ================= */
@media screen and (max-width: 340px){

  /* 表全体を等比縮小（白枠内に確実に収める） */
  .price-compare-inner .price-table{
    --pcmp-s: clamp(0.88, calc((100vw - 24px) / 340), 1);

    transform: scale(var(--pcmp-s));
    transform-origin: center top;

    /* 縮小してもレイアウト幅が詰まりすぎないように補正 */
    width: calc(100% / var(--pcmp-s));
    max-width: none;

    margin: 0 auto;
    table-layout: auto;
  }

  /* ラベル・金額は絶対に改行させない（“円”落ち防止） */
  .price-compare-inner .price-table th,
  .price-compare-inner .price-table td,
  .price-compare-inner .price-value-discount,
  .price-compare-inner .price-value-regular,
  .price-compare-inner .price-value-discount *,
  .price-compare-inner .price-value-regular *{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* 320pxでは余白が勝ちやすいので、最小限だけ詰める（他の画面は影響なし） */
  /* .price-compare-inner .price-label-discount,
  .price-compare-inner .price-label-regular{
    padding-left: 0 !important;
  } */
  .price-compare-inner .price-value-discount{
    padding-right: 10px !important;
  }
  .price-compare-inner .price-value-regular{
    padding-right: 12px !important;
  }

  /* “太字金額”が原因で折れやすいので、320pxの時だけ僅かに下げる */
  .price-compare-inner .price-bold{
    font-size: 24px !important;
  }
  .price-label-discount {
    padding-left: 10px !important;
  }
  
  .cta-band {
    --cta-base-w: 624px;   /* 375pxでベストな設計幅（触らない） */
    --cta-base-h: 150px;

    /* ★ここが重要：320px対応 */
    --cta-s: clamp(0.46, calc(100vw / var(--cta-base-w)), 1);

    position: relative;
    height: calc(var(--cta-base-h) * var(--cta-s));
    padding: 0;
    overflow: hidden;
  }

  .cta-band-inner {
    width: var(--cta-base-w);
    max-width: none;

    display: flex;
    flex-wrap: nowrap;        /* 絶対に改行させない */
    gap: 24px;
    justify-content: center;
    align-items: center;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--cta-s));
    transform-origin: center;
  }

  .cta-card {
    flex: 0 0 auto;
  }
    .cta-btn {
    min-width: unset !important;
  }
   /* 360px固定が原因で溢れていたので、画面幅に追従させる */
  .campaign-lead-sp{
    width: 100% !important;      /* 360px固定を打ち消し */
    max-width: 320px !important; /* 念のため上限 */
    box-sizing: border-box;
  }

  /* セット全体も 320px に合わせて“同じ形のまま”収める */
  .campaign-set{
    max-width: 320px !important; /* 360px基準を320に */
    width: 100% !important;
    padding: 0 10px;             /* 端末320で“白枠に対する余裕”を確保 */
    box-sizing: border-box;
  }

  /* 特典行（画像＋テキスト）も左右の溢れを防ぐ */
  .campaign-lead-row{
    width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
  }

  /* 特典画像が横幅を押すケース対策（比率は維持） */
  .campaign-lead-row .Benefits,
  .campaign-lead-row img.Benefits{
    max-width: 240px;
    height: auto;
  }

  /* 横スクロールが出るのを最後に封じる（このブロック内だけ） */
  .campaign-back{
    overflow-x: clip;
  }
  
  /* スマホ用プランカード3種を、360px設計のまま縮小表示 */
  .comparison-grid-sp .starter-sp,
  .comparison-grid-sp .standard-sp,
  .comparison-grid-sp .professional-sp{
    --spPlanS: clamp(0.88, calc((100vw - 24px) / 360), 1);

    transform: scale(var(--spPlanS));
    transform-origin: center top;

    /* 縮小しても “レイアウト上の幅” が詰まらないように補正 */
    width: calc(100% / var(--spPlanS));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* 念押し：Standardのタイトルpillのズレを完全に中央固定（混在指定を上書き） */
  .comparison-grid-sp .plan-title2{
    transform: translateX(-50%) !important;
  }
}
/* =====================================
   374px以下だけ：375pxの完成形を“丸ごと等比縮小”して収める
   ※375px以上は一切変化しない
===================================== */
@media screen and (max-width: 374px){

  /* 余白を確保（左右12px）した上で、360px設計を等比縮小 */
  .comparison-grid-sp{
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* プランカード3枚を“幅を詰めずに”丸ごと縮小 */
  .comparison-grid-sp .starter-sp,
  .comparison-grid-sp .standard-sp,
  .comparison-grid-sp .professional-sp{
    /* 360px（max-width）を基準に、374以下で縮小 */
    --planS: calc((100vw - 24px) / 360);

    transform: scale(var(--planS));
    transform-origin: center top;

    /* レイアウトは維持：中央寄せのまま */
    margin-left: auto;
    margin-right: auto;

    /* はみ出しで横スクロールが出るのを封じる */
    overflow: visible;
  }

  /* 左右に飛びやすい要素（年払いバッジ等）があっても横スクロールを出さない */
  html, body{
    overflow-x: clip;
  }
}





/*ここから821px～1024pxです*/
/* =========================================
   821px〜1024px の間だけ：ヘッダー右上2連CTAを非表示
   ※PC(1025px以上)とスマホ(820px以下)には影響しない
========================================= */
@media screen and (min-width: 821px) and (max-width: 1024px) {
  .header-cta-double.inline-style {
    display: none !important;
  }

  /* ヘッダー全体 */
  .header-main {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* HERO */
  .hero-inner {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* キャンペーン・比較系など幅固定対策 */
  .plan-comparison,
  .faq-vertical-container,
  .bottom-main {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
  }
  .campaign-pc-wrap {
    display: none !important;
  }

    /* 左右の余白を確保して“はみ出し”防止 */
  .feature-grid {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* この範囲ではPC画像だけを表示（ここが重要） */
  .point .point-pc {
    display: block !important;
    width: 100% !important;
    max-width: 900px;
    margin: 40px auto 10px;
  }
  .point .point-sp {
    display: none !important;
  }

  /* Point1の説明ボックス：固定1000pxをやめて可変に */
  .feature-card1 {
    width: calc(100% - 32px) !important; /* 画面幅に追従 */
    max-width: 860px;
    padding: 12px 16px;
    box-sizing: border-box;

    /* “元のデザイン”通り、図の上に重ねる */
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 下のPoint2/3の文章幅（600px固定のはみ出し対策） */
  .feature-heading2 {
    width: min(600px, 100%) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Point2/3の横並びが詰まりすぎる場合だけ少し縮める */
  .point2 {
    gap: 40px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

    /* 特典説明の白背景ブロック（固定900pxを解除してフィット） */
  .campaign-set {
    width: 100% !important;
    max-width: 960px;         /* この範囲の最大想定 */
    margin: 24px auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* 特典の「画像 + 見出し」行：左の余白が強いとズレるので中央基準に */
  .campaign-lead-row {
    margin-left: 0 !important;     /* 既存: margin-left:70px を打ち消し :contentReference[oaicite:2]{index=2} */
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;               /* 821px付近で詰まるのを防ぐ */
  }

  /* 価格比較：2カラムは維持しつつ、幅固定(500px)とgap(70px)を解除 */
  .price-compare-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列のまま縮む */
    gap: 24px;                                        /* 既存:70px を縮める :contentReference[oaicite:3]{index=3} */
  }

  .price-box {
    width: auto !important;        /* 既存: width:500px を解除 :contentReference[oaicite:4]{index=4} */
    max-width: none;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* テーブル内で文字が押し合う場合の保険（見た目はほぼ変えない） */
  .price-table {
    table-layout: fixed;
  }
  
  /* ラベル側（初期費用 / 月額費用 / 合計） */
  .price-label-discount,
  .price-label-regular {
    font-size: 18px;          /* 元: 20px */
    white-space: nowrap;      /* 改行させない */
  }

  /* 金額側 */
  .price-value-discount,
  .price-value-regular {
    font-size: 20px;          /* 元: 20〜22px */
    white-space: nowrap;      /* 改行させない */
    letter-spacing: -0.2px;   /* 数字の詰まり防止 */
  }

  /* 強調金額（太字） */
  .price-bold {
    font-size: 24px;          /* 元: 28px */
    white-space: nowrap;
  }
   /* まずコンテナを画面幅にフィットさせる（PCのwidth:1200pxをこの範囲だけ解除） */
  .faq-vertical-container {
    width: 100% !important;
    max-width: 1024px;
    margin: 0 auto;
    padding: 50px 16px;
    box-sizing: border-box;
  }


    /* 1200px前提の中身がはみ出しても横スクロールを出さない（FAQ内だけ） */
  .faq-vertical-container{
    width: 100% !important;
    max-width: 1024px;
    margin: 0 auto;
    padding: 50px 16px;
    box-sizing: border-box;
    overflow-x: clip; /* ここ重要：横の欠け/スクロールを抑制 */
  }


  
  /* 左右余白だけ確保（画像は画面にフィット） */
  .faq-vertical-container{
    width: 100% !important;
    margin: 0 auto;
    padding: 50px 16px;
    box-sizing: border-box;
  }

  /* 画像を基準にする：この箱が“表示幅”になる */
  .faq-vertical-item{
    position: relative;
    width: calc(100vw - 32px);   /* padding 16px x 2 と一致 */
    max-width: 1024px;
    margin: 0 auto;
    overflow: hidden;            /* はみ出し防止 */
  }

  /* 画像は箱いっぱいに縮む */
  .faq-vertical-item img{
    width: 100% !important;
    height: auto;
    display: block;
  }

  /* 文字レイヤーはPCデザイン(1200px基準)の座標のまま、
     “表示幅 ÷ 1200” の倍率で zoom して画像に追従させる */
  .faq-overlay{
    position: absolute;
    inset: 0;
    width: 1200px; /* PC基準の横幅（あなたのabsolute座標はこれ前提） */
  }

  /* 変な日本語分割を抑える（改行は必要な時だけ） */
  .faq-q, .faq-a1, .faq-a2{
    word-break: keep-all;
    overflow-wrap: normal;
  }
   /* Q（質問） */
  .faq-q {
    line-height: 1.5;
  }

  /* A（回答）1行目・2行目 */
  .faq-a1,
  .faq-a2 {
    line-height: 1.6;
  }
    /* 画面内に収める表示幅（左右16px余白込み） */
  .faq-vertical-container{
    width: 100% !important;
    margin: 0 auto;
    padding: 50px 16px;
    box-sizing: border-box;
  }

  /* FAQの1行（画像＋文字）を“表示幅”にフィット */
  .faq-vertical-item{
    position: relative;
    width: min(1024px, calc(100vw - 32px));
    margin: 0 auto;
  }

  /* 画像は表示幅に合わせて縮む（形はそのまま） */
  .faq-vertical-item img{
    width: 100% !important;
    height: auto;
    display: block;
  }

  /* ここが肝：文字レイヤーを「1200px基準の座標のまま」比率スケール */
  .faq-overlay{
    position: absolute;
    inset: 0;
    width: 1200px;                 /* PC基準（既存absolute座標が1200px前提） */
    height: 100%;
    transform-origin: top left;
    pointer-events: none;
  }

  
 /* 左右余白は現状のまま（ここは触らないなら消してOK） */
  .faq-vertical-container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* PCの完成形(1200px基準)をそのまま維持して、表示だけ縮小する */
  .faq-vertical-item{
    width: 1200px;      /* ここが基準。既存のabsolute(px)配置が前提にしている幅 */
    max-width: none;
    margin: 0 auto;

    /* 画面幅に合わせて縮小率を自動計算（= 位置が変わらない） */
  }
  
  /* FAQは画面幅にフィット（画像側） */
  .faq-vertical-container{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .faq-vertical-item{
    position: relative;
    width: min(1200px, calc(100vw - 32px));
    margin: 0 auto;
  }

  .faq-vertical-item img{
    width: 100% !important;
    height: auto;
    display: block;
  }

  /* 文字だけを “1200px基準の座標” のまま縮小して、位置関係を固定 */
  .faq-overlay{
    position: absolute;
    inset: 0;
    width: 1200px;                /* PC基準（absoluteのleft/topがこの幅前提） */
    transform-origin: top left;
  }
   /* FAQ全体の左右余白（現状に合わせているだけ） */
  .faq-vertical-container{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* 1行（画像＋文字）共通の「表示幅」と「倍率」をここで定義 */
  .faq-vertical-item{
    position: relative;
    --faqW: min(1200px, calc(100vw - 32px));  /* 表示される横幅 */
    --faqS: calc(var(--faqW) / 1200);         /* 1200px基準からの倍率 */

    width: var(--faqW);
    margin: 0 auto;
  }

  /* 背景画像：表示幅に合わせて縮む（従来通り） */
  .faq-vertical-item img{
    width: 100% !important;
    height: auto;
    display: block;
  }

  /* 文字レイヤー：1200px基準の座標のまま、同じ倍率で縮める */
  .faq-overlay{
    position: absolute;
    inset: 0;
    width: 1200px;
    transform-origin: top left;
    will-change: transform;
  }
   /* FAQ外枠（見た目は触らない） */
  .faq-vertical-container{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* FAQ1行：基準幅を 912px に固定（中央寄せ） */
  .faq-vertical-item{
    position: relative;
    margin: 0 auto;
  }

  /* 背景画像：サイズも位置も一切変更しない */
  .faq-vertical-item img{
    width: 100% !important; /* 912px基準で固定 */
    height: auto;
    display: block;
  }

  /* 文字レイヤー：912px時の位置をそのまま使う */
  .faq-overlay{
    position: absolute;
    inset: 0;
  }
   /* FAQの外枠は画面内に収める（左右16px余白） */
  .faq-vertical-container{
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 50px 16px;
    box-sizing: border-box;
    overflow-x: clip; /* はみ出しによる横スク防止（FAQ内だけ） */
  }

  /* 1行（画像＋文字）の表示幅：画面に合わせて可変 */
  .faq-vertical-item{
    position: relative;
    --baseW: 912; /* 912pxの見た目を基準にする */
    --viewW: min(1024px, calc(100vw - 32px));
    width: var(--viewW);
    margin: 0 auto;
  }

  /* 背景画像：表示幅に合わせて縮小（位置関係は維持） */
  .faq-vertical-item img{
    width: 100% !important;
    height: auto;
    display: block;
  }

  /* 文字レイヤー：912px基準の座標のまま、同じ比率で縮小 */
  .faq-overlay{
    position: absolute;
    inset: 0;
    width: calc(var(--baseW) * 1px);
    transform-origin: top left;
    pointer-events: none;
  }

   .faq-vertical-container{
    padding: 50px 16px;
    box-sizing: border-box;
    overflow-x: clip;
  }

  /* 表示幅（=画像の幅） */
  .faq-vertical-item{
    position: relative;
    --viewW: min(1024px, calc(100vw - 32px));
    --scale: calc(var(--viewW) / 1200px);  /* ★基準は必ず1200px */

    width: var(--viewW);
    margin: 0 auto;
  }

  /* 背景画像：表示幅に合わせて縮む（これが基準） */
  .faq-vertical-item img{
    width: 100% !important;
    height: auto;
    display: block;
  }

  /* 文字：1200px前提の座標のまま、同倍率で縮める */
  .faq-overlay{
    position: absolute !important;
    inset: 0 !important;
    width: 1200px !important;     /* ★ここも必ず1200px */
    height: 100% !important;
    margin: 0 !important;

    transform-origin: top left !important;
    transform: scale(var(--scale)) !important;
    pointer-events: none;
  }

  /* 2枚を並べる親（gapは元の24pxのままにする） */
  .benefit-cards{
    width: min(1024px, calc(100vw - 32px));
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 24px;
    box-sizing: border-box;

    /* ここで縮小率を計算（1024では1、821では小さくなる） */
    --s: calc((min(1024px, calc(100vw - 32px)) - 24px) / 1160px); /* 580*2=1160 */
  }

  /* カード：基準幅を固定し、表示だけ縮小 */
  .benefit-card{
    width: 580px !important;   /* ← 改行を固定するため、ここは固定 */
    max-width: none !important;
    box-sizing: border-box;

    /* 縮小（1を超えないように） */
    zoom: clamp(0.70, var(--s), 1);
  }

  /* 英語の画像（下の英文がimgの場合）：カード幅に追従させる */
  .benefit-card img{
    max-width: 100%;
    height: auto;
  }


  /* 背景を持つセクションはそのまま（=背景は動かさない） */
  .plan-comparison{
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    /* background 系は既存のまま使う */
  }

  /* ここが縮小用の「表示窓」 */
  .comparison-scale-wrap{
    --baseW: 1042;
    --baseH: 1315;
    --viewW: calc(100vw - 32px);
    --scale: calc(min(1024px, var(--viewW)) / (var(--baseW) * 1px));

    width: min(1024px, var(--viewW));
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    /* 縮小後の高さに合わせて確保（下が切れないように） */
    height: calc(var(--baseH) * 1px * var(--scale));
  }

  /* 中身（表）を“丸ごと”縮小：形は崩れない */
  .comparison-grid{
    width: calc(var(--baseW) * 1px);
    height: calc(var(--baseH) * 1px);

    position: absolute;
    top: 0;
    left: 0;

    /* 既存のズレ指定を無効化 */
    transform-origin: top left;
    transform: translateX(35px) scale(var(--scale));
  }

  /* 既存CSSの left:65px を潰す（ズレ防止） */
  .comparison-grid{
    left: 0 !important;
  }
   .plan-comparison{
    height: 1107px;   /* ← ここを調整 */
  }
  .plan-comparison {
    /* 821〜1024の間で 0.802〜1 の比率に縮小 */
    --cmp-s: clamp(0.802, calc(100vw / var(--cmp-base-w)), 1);

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: none !important; /* 背景はwrapに持たせる（重要） */
    height: calc(var(--cmp-base-h) * var(--cmp-s)); /* 縮小に合わせて高さも追従 */
    overflow: hidden; /* はみ出し防止 */
  }

  /* 背景＋中身をこの箱にまとめて固定し、ここを縮小する */
  .comparison-scale-wrap {
    --cmp-base-w: 1024px;   /* 基準幅（基本触らない） */
    --cmp-base-h: 1315px;   /* 背景高さ（短くしたいならここを減らす） */
    --cmp-x: 0px;           /* 右にずらしたいなら +、左なら - */

    width: var(--cmp-base-w);
    height: var(--cmp-base-h);
    margin: 0 auto;

    /* 背景（元の .plan-comparison と同じ指定） */
    background: url("img/back.png");
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: 53% 10%;
    background-color: #f7f7f7;

    /* 1024基準の完成形を、そのまま縮小 */
    transform-origin: top center;
    transform: translateX(var(--cmp-x)) scale(var(--cmp-s));
  }

  /* 中身の横スクロール発生防止（安全策） */
  .plan-comparison .comparison-grid {
    max-width: 100%;
  }

  .comparison-grid {
    max-width: 100%;
    --cmp-base-w: 1024px;   /* 基準幅（基本触らない） */
    --cmp-base-h: 1315px;   /* 背景高さ（短くしたいならここを減らす） */
    --cmp-x: 0px;           /* 右にずらしたいなら +、左なら - */

  }

  .hero-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 2列固定 */
    align-items: center;
    gap: 1px;
    width: 100%;
    max-width: calc(100% - 48px); /* 左右24pxずつ余白 */
    margin: 0 auto;
    padding: 0 0 0 20px;
    box-sizing: border-box;
  }
  .img-AI {
    max-width: 482px;
    width: 95%;
  }

  /* 右画像は右側に固定 */
  .hero-image{
    justify-self: end;
    text-align: right;
  }

  /* 画像が大きすぎて押し出さないようにする */
  .hero-image img{
    width: 100%;
    max-width: 520px; /* 好みで。大きいなら 480〜560 で調整 */
    height: auto;
  }
  .gradient-underline {
    font-size: 3.5vw;
    max-width: 1000px;
    width: 100%;
    margin-bottom: 80px;
  }
  .bottom-main {
    height: 700px;
  }
  .footer-inner {
    gap: 30px;
    max-width: 800px;
    width: 100%;
  }
  .footer-logo p {
    font-size: 2.2vw  !important ;
  }
  .footer-logo-img {
    margin-left: 20px;
  }
  .footer-left {
    height: auto;
  }
  .price-title {
    font-size: 3vw;
  }
  .cta-text {
    font-size: 1.3vw;
  }
  .cta-area {
    padding: 10px 5px 0 5px ;
    border-radius: 10px;
  }
  .cta-band-inner {
    max-width: 60%;
  }
  .header-nav {
    padding-left: 1px;
  }
  .feature-heading {
    font-size: 2.4vw;
    word-break: keep-all;     /* 日本語を途中で切らない */
    line-break: strict;       /* 日本語の禁則処理を厳密に */
    white-space: normal;      /* 1行固定にはしない */
  }
  .feature-heading1,.feature-heading2 {
    font-size: 1.5vw;
    word-break: keep-all;     /* 日本語を途中で切らない */
    line-break: strict;       /* 日本語の禁則処理を厳密に */
    white-space: normal;      /* 1行固定にはしない */
  }
  /* 説明文（赤枠内テキスト） */
  .benefit-text,
  .benefit-quote,
  .benefit-target,
  .feature-card p {
    word-break: keep-all;     /* 日本語を途中で割らない */
    line-break: strict;       /* 禁則処理を厳密に */
    white-space: normal;      /* 必要なところだけ自然改行 */
  }
   /* 赤枠ボックスの中身を読みやすい幅に */
  .benefit-text {
    max-width: 36em;          /* 日本語にちょうどいい行幅 */
    margin-left: auto;
    margin-right: auto;
  }
}
/* =========================================
   821px〜1024px：821pxを“完成形”として固定
   - 背景も表も同じ見た目のまま
   - 幅が広がった分は左右余白が増えるだけ
   - PC(1025px〜)には一切影響しない
========================================= */
@media screen and (min-width: 821px) and (max-width: 1024px) {

  /* ① セクション自体は画面幅に合わせる（外側の余白だけ増える） */
  .plan-comparison{
    width: 100%;
    margin: 0 auto;
    /* 背景は“固定キャンバス”側に持たせる */
    background: none !important;
    /* 高さはキャンバス側に合わせる */
    height: auto !important;
  }

  /* ② 背景画像を持つ“固定キャンバス” */
  .comparison-scale-wrap{
    /* PCの基準サイズ（あなたの現状CSSに合わせる） */
    --cmp-base-w: 1200px;
    --cmp-base-h: 1315px;

    /* 821pxを基準に固定倍率（= 821/1200） */
    --cmp-s821: calc(821 / 1200);

    /* 位置微調整したい時だけここを触る（基本0でOK） */
    --cmp-x: 0px;

    width: 821px; /* ★ここが“821基準で固定”のキモ */
    height: calc(var(--cmp-base-h) * var(--cmp-s821));
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    /* 背景（元の .plan-comparison と同じ指定を入れる） */
    background: url("img/back.png");
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: 86% 45%;
    background-color: #f7f7f7;
  }

  /* ③ 中身（表）を“丸ごと”縮小して固定（形を崩さない） */
  .comparison-scale-wrap .comparison-grid{
    /* 元の left:65px が右寄り原因なので、この範囲だけ無効化 */
    left: 0 !important;

    position: absolute;
    top: 0;
    left: 0;

    transform-origin: top left;
    transform: translateX(var(--cmp-x)) scale(var(--cmp-s821));
  }
  
  /* セクション側で横だけガード（縦は切らない） */
  .plan-comparison{
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* 背景担当のキャンバス：縦を切らない + 少しだけ高さバッファ */
  .comparison-scale-wrap{
    overflow: visible !important;   /* ←ここが重要（文字切れ防止） */

    /* もし高さ固定してるなら、バッファ足す（任意だけど効く） */
    height: calc(1315px * var(--cmp-s821) + 40px) !important;
  }

  /* 横ははみ出し防止、縦は切らない */
  .plan-comparison{
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* 背景担当のキャンバス */
  .comparison-scale-wrap{
    width: 821px;
    margin: 0 auto;
    position: relative;
    overflow: visible; /* ← 縦方向の切れ防止 */
  }

  /* ★ここが肝：中身を「中央基準」に固定 */
  .comparison-grid{
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;

    /* 微調整用：プラスで右へ、マイナスで左へ */
    --cmp-offset-x: 100px;

    transform-origin: top center;
    transform: translateX(calc(-50% + var(--cmp-offset-x))) scale(0.66);
  }
}
@media screen and (min-width: 821px) and (max-width: 1024px) {

  /* ここを変えたら必ず動くようにする */
  .comparison-scale-wrap{
    --cmp-offset-x: 10px;  /* ←ここを 6px / 14px に変えて調整 */
    --cmp-scale: 0.66;     /* ←821で確定したscale */
  }

  /* transform を確実にこれで上書き */
  .comparison-scale-wrap .comparison-grid{
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;

    transform-origin: top center !important;
    transform: translateX(calc(-50% + var(--cmp-offset-x))) scale(var(--cmp-scale)) !important;
  }

  /* 切れ対策：縦は切らない */
  .comparison-scale-wrap{
    overflow: visible !important;
  }
  .plan-comparison{
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}
/* =========================================
   821〜1024：文字/枠を「真ん中」に固定（右寄り解消）
   - PC(1025+)には影響しない
   - 縮小率/上下位置は固定のまま
   ========================================= */
@media screen and (min-width: 821px) and (max-width: 1024px) {

  /* 821px基準のキャンバスを中央に置く（幅が広がると左右余白が増えるだけ） */
  .comparison-scale-wrap{
    width: 821px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* ★ここが肝：PCの left:65px を無効化して“中央基準”にする */
  .comparison-scale-wrap .comparison-grid{
    /* PC側の width:1096spx（無効）＆ left:65px（右寄り原因）を、この範囲だけ潰す */
    width: 1096px !important;        /* 中央計算が安定する */
    position: absolute !important;
    top: 0 !important;               /* 上下は動かさない */
    left: 41% !important;
    right: auto !important;

    transform-origin: top center !important;

    /* ↓ scaleは“今の値”のまま固定してね（0.66/0.64/0.62など） */
    transform: translateX(-50%) scale(0.66) !important;
  }
}
/* =========================================
   821〜1024：背景は固定
   文字・枠（comparison-grid）だけを少し大きく
   位置・上下・中央は一切動かさない
   ========================================= */
@media screen and (min-width: 821px) and (max-width: 1024px) {

  .comparison-scale-wrap{
    width: 821px;
    margin: 0 auto;
    position: relative;
    overflow: visible;

    /* 背景はそのまま */
    background-position: 86% 45%;
    background-size: 65%;
  }

  .comparison-scale-wrap .comparison-grid{
    position: absolute;
    top: 0;
    left: 50%;

    /* ★ 位置は完全固定 */
    transform-origin: top center;

    /* ★ ここだけ変更：少し大きくする */
    transform: translateX(-50%) scale(1.5);
  }
}
/* =========================================
   821〜1024：拡大率を“確実に”反映させる最終上書き
   ========================================= */
@media screen and (min-width: 821px) and (max-width: 1024px) {

  /* ここを変えると必ず大きさが変わる */
  .comparison-scale-wrap{
    --cmp-scale: 0.68 !important;   /* ← 0.66→0.70→0.72…で調整 */
    --cmp-offset-x: 0px !important; /* ← ずれ要因をゼロに固定 */
    transform: none !important;     /* ← wrap自体を縮小する旧ルールがあっても無効化 */
  }

  /* 中央固定（位置・上下はそのまま） */
  .comparison-scale-wrap .comparison-grid{
    top: 2% !important;
    left: 40% !important;
    right: auto !important;

    transform-origin: top center !important;
    transform: translateX(-50%) scale(var(--cmp-scale)) !important;
  }
}
/* =================================================
   821〜1024：821pxの“この形”を完全ロック
   - 1024まで左右余白が増えるだけ
   - 上下位置も横位置も動かない
   - top/leftはここでpx調整できる
   ================================================= */
@media screen and (min-width: 821px) and (max-width: 1024px){

  /* 画面が広がっても「固定キャンバス」を中央に置くだけ */
  .plan-comparison{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: none !important; /* PC背景はこのレンジだけ無効化 */
  }

  /* 背景も含めて、821pxキャンバスとして固定 */
  .plan-comparison .comparison-scale-wrap{
    width: 821px !important;
    flex: 0 0 821px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important;

    background: url("img/back.png") no-repeat !important;
    background-size: 65% !important;
    background-position: 86% 45% !important;
    background-color: #f7f7f7 !important;

    /* ここは“動かさない”ための固定値 */
    --lockScale: 0.68 !important;  /* ←821での見た目に合わせて固定（例：0.68） */
    --lockTop: 5px !important;     /* ←必要なら  -6px / 8px とかで調整OK */
    --lockLeft: 45px !important;    /* ←必要なら  10px / -10px とかで調整OK */
  }

  /* 競合している transform/left/top を全部無視して、この指定でロック */
  .plan-comparison .comparison-scale-wrap > .comparison-grid{
    position: absolute !important;
    top: var(--lockTop) !important;
    left: var(--lockLeft) !important;
    right: auto !important;
    margin: 0 !important;

    /* これが一番大事：他の translate / offset / %指定を全部打ち消す */
    transform: scale(var(--lockScale)) !important;
    transform-origin: top left !important;
  }
   .comparison-scale-wrap{
    height: calc(1315px * var(--cmp-s821)) !important; /* ← +40px を外す */
    overflow: hidden !important; /* はみ出しを切る（中のスクロールを発生させない） */
  }

  /* セクション側も念のため「この箱でスクロールさせない」 */
  .plan-comparison{
    overflow: hidden !important;
  }
}
/* =====================================
   374px以下：プランカードを“そのまま”もっと小さく（CSSのみ）
   文字/背景/ボタン/バッジ全部まとめて等比縮小
===================================== */
@media screen and (max-width: 374px){

  html, body{ overflow-x: hidden; }

  /* 親を中央揃えの基準にする（右寄り防止） */
  .comparison-grid-sp{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding-left: 16px;
    padding-right: 16px;
    padding-top: 10px;
    box-sizing: border-box;
    overflow: visible !important;
  }

  /* カード本体：余計な位置指定を全部無効化して scale だけ効かせる */
  .comparison-grid-sp .starter-sp,
  .comparison-grid-sp .standard-sp,
  .comparison-grid-sp .professional-sp{
    max-width: 360px !important;

    position: static !important;   /* 右寄りの元（relative+left等）を切る */
    left: auto !important;
    right: auto !important;

    margin: 10px auto !important;
    overflow: visible !important;

    /* ここで「もっと小さく」：安全係数を下げるほど小さくなる */
    --planS: calc(((100vw - 32px) / 320) * 0.01);

    transform: scale(var(--planS)) !important;   /* scale のみ */
    transform-origin: top center !important;
  }
  .price-grid1 {
    margin: 12px 8px 8px 0;
  }

  /* もし親側に hidden が残っていて切れる場合の保険（横だけ） */
  .comparison-grid-sp,
  .price-comparison-sp,
  .price-section,
  section{
    overflow-x: visible;
  }
  .Target-sp1,
  .Target-sp2,
  .Target-sp3 {
    font-size: 3.5vw;
    margin: 4px 0 18px;
    top: 5px;
    height: 20px;
  }
  .Post li {
    font-size: 12px;
  }
  .Post p {
    font-size: 17px;
  }
  .Target-sp2 {
    position: relative;
    left: 12px;
    font-size: 3vw;
    top: 2px;
  }
    .Target-sp3 {
    position: relative;
    font-size: 3vw;
    top: 2px;
  }

  .plan-title {
    top: 7px;
    font-size: 14px;
  }
  .plan-title2 {
    top: 5px;
    font-size: 14px;
    height: 20px;
  }
  .plan-title3 {
    top: 5px;
    font-size: 14px;
  }
  

}
/* =====================================
   374px以下：3カードの背景“見た目の幅”を統一
   - 背景は擬似要素で描画（カード本体の影響を受けない）
   - background-size を 100% に固定してズレを消す
===================================== */
@media screen and (max-width: 374px){

  /* 背景は本体から外して、必ず同じルールで描画する */
  .comparison-grid-sp .starter-sp,
  .comparison-grid-sp .standard-sp,
  .comparison-grid-sp .professional-sp{
    background: none !important;
    background-image: none !important;
    position: relative !important;
    overflow: hidden !important;     /* 角丸に合わせて背景も切る */
    border-radius: 16px;             /* 既存が別なら同じ値に合わせてOK */
  }

  .comparison-grid-sp .starter-sp::before,
  .comparison-grid-sp .standard-sp::before,
  .comparison-grid-sp .professional-sp::before{
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;      /* ★ここで幅を必ず揃える */
    z-index: 0;
  }

  /* 画像だけ差し替え */
  .comparison-grid-sp .starter-sp::before{ background-image: url("img/gray.png"); }
  .comparison-grid-sp .standard-sp::before{ background-image: url("img/yellow.png"); }
  .comparison-grid-sp .professional-sp::before{ background-image: url("img/gray.png"); }

  /* 中身は背景の上に出す */
  .comparison-grid-sp .starter-sp > *,
  .comparison-grid-sp .standard-sp > *,
  .comparison-grid-sp .professional-sp > *{
    position: relative;
    z-index: 1;
  }
}

/* =========================================
   FIX: 820px以下（BOTTOM CTA & FOOTER）
   - 820px時の形を保ったまま、さらに小さい幅でも崩れないようにスケール
   - PC/iPad（821px以上）には影響しない
========================================= */
@media screen and (max-width: 820px) {

  /* ================= BOTTOM CTA ================= */
  .bottom-main {
    height: auto !important;
    padding: 0 20px 40px !important;
    box-sizing: border-box;
  }

  .gradient-underline {
    width: 100% !important;
    max-width: 560px;
    font-size: clamp(22px, 6vw, 34px);
    margin: 56px auto 36px;
    line-height: 1;
  }

  .bottom-sub {
    font-size: clamp(24px, 6.4vw, 34px);
    margin: 0 0 12px;
    line-height: 1.25;
  }

  .bottom-version {
    display: inline-block; /* 「バージョンUP」を変な位置で折らない */
    font-size: clamp(28px, 7.2vw, 40px);
    letter-spacing: -1px;
  }

  /* p.bottom-cta（class名がsectionと被っているので明示） */
  .bottom-main > p.bottom-cta {
    font-size: clamp(12px, 3.6vw, 16px);
    line-height: 1.7;
    margin: 12px auto 0;
    letter-spacing: 0.2px;
  }

  .auto-box-wrap {
    width: 100% !important;
    margin-top: 26px !important;
  }

  .auto-box {
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    padding: 22px 18px 14px !important;
    border-radius: 22px;
  }

  .auto-box-list li {
    font-size: clamp(14px, 3.8vw, 18px);
    line-height: 1.7;
    padding-left: 22px;
  }

  .auto-box-list li::before {
    width: 8px;
    height: 8px;
    top: 0.65em;
  }

  /* ================= FOOTER ================= */
  .site-footer {
    height: auto !important; /* 固定高さで切れるのを防止 */
    padding: 14px 0 16px;
  }

  .footer-inner {
    width: 92vw !important;
    max-width: 92vw !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .footer-logo-img {
    width: 56px;
    height: auto;
  }

  .footer-logo p {
    font-size: 12px !important;
    width: auto !important;
    max-width: none !important;
    line-height: 1.35;
  }

  /* ロゴ + 文字を“内容幅”でまとめて中央に置く */
  .site-footer .footer-inner{
    display: inline-flex !important;   /* ← inline-flex がポイント（幅が内容にフィット） */
    align-items: center !important;
    gap: 6px !important;               /* ロゴと文字の距離 */
    width: auto !important;
    margin: 0 auto !important;         /* まとめた塊を中央へ */
  }

  /* ロゴの余計な余白を除去 */
  .site-footer .footer-inner img{
    display: block !important;
    margin: 0 !important;
  }

  /* 文字側（div/p等）が100%に伸びるのを止める */
  .site-footer .footer-inner :is(p, div, span){
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto !important;
  }

  /* 文字を中央に見せたい場合（今まで通りなら） */
  .site-footer{
    text-align: center;
  }
  .auto-box-title{
    white-space: nowrap !important;      /* 改行禁止 */
    width: fit-content !important;       /* 内容幅に合わせる（50%指定を潰す） */
    max-width: 92vw !important;          /* 画面からはみ出さない上限 */
    overflow: hidden !important;         /* はみ出し防止 */
    text-overflow: ellipsis !important;  /* 万一でも枠外に出さない保険 */

    /* 画面幅に応じて自然に縮む */
    font-size: clamp(12px, 3.6vw, 16px) !important;
    padding: 8px clamp(10px, 4vw, 28px) !important;

    /* 位置は今の“中央”を維持（あなたの既存スマホ仕様に合わせる） */
    position: relative !important;
    left: 0 !important;
    top: -40px !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center !important;
  }


  /* 中身を上寄せに固定（flex対策） */
  .auto-box-inner,
  .auto-box-content {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* タイトル直下の余白を詰める */
  .auto-box-title + * {
    margin-top: 8px !important;
  }
    /* 箇条書き全体（ul / ラッパー）を微調整 */
  .auto-box ul,
  .auto-box-list {
    margin-top: -2px !important; /* ← 2pxだけ上へ */
  }
    /* タイトルを“浮かせる”（高さぶんの空きを発生させない） */
  .auto-box-title{
    position: absolute !important;
    top: -18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  /* タイトルが浮いた分、箱の上だけ必要量を確保 */
  .auto-box{
    padding-top: 30px !important;  /* 28〜34で微調整可 */
  }

  /* 箇条書き全体を2pxだけ上に */
  .auto-box-list{
    margin-top: -2px !important;
  }
}
/* =====================================
   373px以下：年払いバッジを 374px時と同じ「右上」に固定（最終）
===================================== */
@media screen and (max-width: 373px) {

  /* バッジの基準を Professional のカード内に固定 */
  .professional-sp .plan-sub-sp3{
    position: relative !important;
    overflow: visible !important;
  }

  /* バッジ：レイアウトから外して “右上固定” */
  .professional-sp .plan-sub-sp3 .discount-badge-sp{
    position: absolute !important;
    left: auto !important;      /* 既存の left を殺す */
    top: 58px !important;       /* ← ここが肝：右上の高さ（微調整はこの値だけ） */
    right: 14px !important;     /* 右からの距離 */
    width: 48px !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 30 !important;
    display: block !important;
    transform: rotate(15deg) !important;
  }
}
/* =====================================
   373px以下：年払いバッジを右上固定しつつ
   「月払い/月額」が上がらないように余白を戻す
===================================== */
@media screen and (max-width: 374px) {

  .professional-sp .plan-sub-sp3{
    position: relative !important;
    overflow: visible !important;
  }

  /* バッジをフローから外して右上固定 */
  .professional-sp .plan-sub-sp3 .discount-badge-sp{
    position: absolute !important;
    left: auto !important;
    right: 4px !important;
    top: 36px !important;     /* ここは微調整OK */
    width: 36px !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 30 !important;
    transform: rotate(15deg) !important;
  }

  /* ★重要：バッジ(48px)が押していた分を price-grid 側で復元 */
  .professional-sp .plan-sub-sp3 .price-grid3{
    margin-top: 12px !important;  /* 44〜56pxで微調整 */
  }
}

/* =====================================
   820px以下：CTA BAND が切れるのを防ぐ（形は維持）
===================================== */
@media screen and (max-width: 820px){

  /* 赤帯が「100px固定＋hidden」で切れているので上書き */
  .cta-band{
    height: 150px !important;        /* ←ここが核心（必要なら 140〜170 で調整） */
    overflow: visible !important;     /* 切れ防止 */
    padding: 12px 0 !important;       /* 上下に少し余白 */
  }

  /* 中身がabsolute中央寄せ＆scaleされていても確実に見せる */
  .cta-band-inner{
    top: 50% !important;
    transform: translate(-50%, -50%) scale(var(--cta-s, 1)) !important;
  }
}
/* =====================================
   820px以下：CTA BAND 左が切れるのを防ぐ（2枚横並び維持）
===================================== */
@media screen and (max-width: 820px){

  /* 赤帯：切れ防止（すでに入れていればOK） */
  .cta-band{
    overflow: visible !important;
  }

  /* 中身を“画面内に収める幅”に制限して中央配置 */
  .cta-band-inner{
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(768px, calc(100vw - 24px)) !important; /* ←左右12px余白を確保 */
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
  }

  /* 2枚横並びを維持したまま、はみ出さないように縮む設定 */
  .cta-band-inner{
    display: flex !important;
    gap: 12px !important;
  }
  .cta-card{
    flex: 0.75 0 !important;
    min-width: 0 !important;  /* ←これがないと中身で押し広げてはみ出す */
  }

  /* ボタンやテキストがカード幅を超えてはみ出すのを防ぐ */
  .cta-card *{
    max-width: 100% !important;
  }
}
/* =====================================
   820px以下：CTA帯は「形を保って縮小」＋「横スクロール禁止」
===================================== */
@media screen and (max-width: 820px){

  /* 横スクロールを強制的に禁止（CTA以外が原因でも止める） */
  html, body{
    overflow-x: hidden !important;
  }

  /* CTA帯自体も横方向だけはみ出しを切る（縦は切らない） */
  .cta-band{
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    padding: 16px 0 !important;
  }

  /* 820px時の“元の形”を基準に、画面内に収まる比率で縮小 */
  .cta-band-inner{
    --cta-base: 820px;
    --cta-s: min(1, calc((100vw - 24px) / var(--cta-base))); /* 左右12px余白 */

    width: var(--cta-base) !important;          /* 形（比率）を保つため固定 */
    max-width: none !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) scale(var(--cta-s)) !important;
    transform-origin: top center !important;
  }

  .cta-band-inner{
    --cta-base: 820px;
    --cta-s: min(1, calc((100vw - 24px) / var(--cta-base)));
  }

  /* 赤帯の高さ＝（元のinner高さ × 縮小率）＋上下padding で決める */
  .cta-band{
    --cta-inner-h: 120px; /* ← 820px時のcta-band-innerの“実高さ”に合わせる */
    padding: 10px 0 !important; /* 余白を短く */
    height: calc(var(--cta-inner-h) * var(--cta-s) + 20px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* =====================================
   820px以下：CTA BAND 最終安定版
   ・形は保つ（2枚横並び/比率維持）
   ・横スクロール禁止
   ・赤帯の高さを必要最小限に
===================================== */
@media screen and (max-width: 820px){

  /* 横スクロールは絶対に出さない */
  html, body{ overflow-x: hidden !important; }

  /* 820px時の形を基準に、等比で縮めて収める */
  .cta-band{
    --cta-base-w: 624px;   /* 300*2 + gap24 の設計幅 */
    --cta-base-h: 93px;  
    --cta-s: min(1, calc((100vw - 24px) / var(--cta-base-w))); /* 左右12px余白 */

    height: calc(var(--cta-base-h) * var(--cta-s) + 16px) !important; /* 赤帯を短く */
    padding: 8px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important; /* 横はみ出しを切る（縦は base-h で確保） */
  }

  /* ★重要：innerは absolute にしない（赤帯が無駄に伸びる原因を排除） */
  .cta-band-inner{
    width: var(--cta-base-w) !important;
    max-width: none !important;

    position: relative !important;   /* absolute解除 */
    left: auto !important;
    top: auto !important;

    margin: 0 auto !important;
    transform: scale(var(--cta-s)) !important;
    transform-origin: top center !important;
  }
}
@media screen and (max-width:430px){
  .cta-band{
    --cta-base-w: 624px;   /* 300*2 + gap24 の設計幅 */
    --cta-base-h: 70px;  
    --cta-s: min(1, calc((100vw - 24px) / var(--cta-base-w))); /* 左右12px余白 */

  }
}
/* ===== 361px以下だけ指定改行 ===== */
.br-361 {
  display: none; /* PC・タブレット・通常スマホでは改行しない */
}

@media screen and (max-width: 430px) {
  .br-361 {
    display: inline;
  }
}
@media screen and (max-width: 374px) {
  .hero-title {
    white-space: nowrap;   /* 1行目を強制的に1行にする */
  }
}
/* ===== bottom CTA 見出し：374px以下だけ改行位置を固定 ===== */
.bottom-title .sp-br { display: none; } /* 既定：改行しない（他画面は無影響） */

@media screen and (max-width: 374px) {
  .bottom-title .sp-br { display: inline; } /* 374px以下だけ改行を有効化 */

  /* 1行目を「途中で折り返さない塊」にする（"を、" の単独落ち防止） */
  .bottom-title .bottom-keep {
    display: inline-block;
    white-space: nowrap;
  }
}
/* ===== 374px以下：見出しの横切れを解消（この部分だけ） ===== */
@media screen and (max-width: 374px) {

  /* 見出しの1000px固定を解除して、画面内に収める */
  .bottom-title.gradient-underline {
    width: auto !important;        /* 1000px固定を無効化 */
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;            /* 端に当たらないよう余白 */
    padding-right: 16px;
    box-sizing: border-box;

    /* 文字をこの範囲でだけ小さく（320pxでも切れない） */
    font-size: 23px !important;               /* まずはこれでOK（必要なら 30px に） */
    line-height: 1;
  }

  /* 下線も同じ幅に追従させて、欠けを防ぐ */
  .bottom-title.gradient-underline::after {
    width: calc(100% - 32px);      /* 左右padding分を差し引く */
    left: 16px;
  }
}

/* ===============================
   320px以下：切れ防止の最終保険
================================ */
@media screen and (max-width: 320px) {
  .bottom-title {
    font-size: 0.8em;      /* 全体を10%だけ縮小 */
    line-height: 1.4;      /* 行間も軽く詰める */
  }

  .bottom-title .bottom-keep {
    white-space: nowrap;   /* 念押し */
  }
}

/*変更点ここから*/


/* =====================================================
   HEADER：ナビ＋(管理/ログイン/新規登録) 追加による崩れ防止
   - PC（1025px〜）：1行で「ロゴ｜(ナビ+ボタン)｜右CTA」
   - iPad（821〜1024px）：2段で「1段目：ロゴ｜右CTA」「2段目：ナビ+ボタン」
   - スマホ（〜820px）：ボタン非表示（既存レイアウト維持）
===================================================== */

/* PC：1段レイアウト（重なり防止のため grid 化） */
@media (min-width: 1025px) {

  .header-logo-group { grid-area: logo; }
  .header-center { grid-area: center; }
  .header-cta-double.inline-style { grid-area: cta; }

  .header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    flex-wrap: wrap; /* 画面が狭いPCでも「重なり」ではなく折返しにする */
  }

  .header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding-left: 0 !important;
    width: auto !important;
  }

  .header-auth {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

/* iPad：2段レイアウト（幅不足での重なりを根本回避） */
@media (min-width: 821px) and (max-width: 1024px) {
  .header-main {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo . cta"
      "center center center";
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
    padding: 8px 12px;
    justify-content: initial !important;
  }

  .header-logo-group { grid-area: logo; }
  .header-center { grid-area: center; }
  .header-cta-double.inline-style { grid-area: cta; }

  .header-center {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  /* ナビは1行固定しつつ、中央揃え */
  .header-nav {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding-left: 0 !important;
    width: auto !important;
  }

  .header-nav a {
    font-size: 15px;
  }

  /* 3ボタンはナビの右横（収まらない場合は下段に回る） */
  .header-auth {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex: 0 0 auto;
  }

  .header-auth-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* ロゴ文字は iPad で少しだけ詰める（被り防止） */
  .logo-text {
    font-size: 15px;
  }
}

/* ===============================
   iPad（821px〜1024px）
   ロゴ＋タイトルを常に中央に戻す
   =============================== */
@media screen and (min-width: 821px) and (max-width: 1024px) {

  .header-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 左右を同幅に */
    grid-template-areas:
      ". logo cta"
      "nav nav nav";
    align-items: center;
  }

  /* ロゴ＋タイトルを中央カラムへ */
  .header-logo-group {
    grid-area: logo;
    justify-self: center;
    text-align: center;
  }

  /* 右側CTAは右寄せ維持 */
  .header-cta {
    grid-area: cta;
    justify-self: end;
  }

  /* ナビ＋管理/ログイン/新規登録（2段目） */
  .header-center {
    grid-area: nav;
    justify-content: center;
  }
}
/* =========================================
   821px〜：ヘッダーを小さく＆1行固定（スマホは触らない）
   ========================================= */
@media screen and (min-width: 821px) {

  /* ヘッダー全体：折り返し禁止で1行固定 */
  .header-main {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    gap: 12px;                 /* 全体の余白を少し詰める */
    padding: 8px 14px;         /* 高さを小さく */
  }

  /* ロゴ＋タイトル：小さく＆折り返し禁止 */
  .header-logo-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
  .header-logo-group img,
  .header-logo {
    height: 34px;              /* ロゴを小さく（元に合わせて調整可） */
    width: auto;
  }
  .header-title {
    font-size: 18px;           /* タイトルを小さく */
    line-height: 1;
    white-space: nowrap;
  }

  /* ナビ＋右横の3ボタン：1行固定 */
  .header-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    min-width: 0;
    flex-wrap: nowrap !important;
  }

  .header-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    flex-wrap: nowrap !important;

    /* 既存の固定幅・paddingが干渉するのを無効化 */
    width: auto !important;
    padding-left: 0 !important;
    justify-content: center !important;
  }
  .header-nav a {
    font-size: 15px;           /* ナビ文字を小さく */
    line-height: 1;
    white-space: nowrap;
  }

  .header-auth {
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
    flex-wrap: nowrap !important;
  }
  .header-auth .header-auth-btn {
    font-size: 12px;
    padding: 6px 12px;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* 右側の2連CTA：小さく＆折り返し禁止 */
  .header-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .header-cta .cta-box {
    width: 300px;              /* 元より少し小さく */
    padding: 10px 12px;
  }
  .header-cta .cta-box .cta-text {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .header-cta .cta-box .cta-btn {
    font-size: 13px;
    padding: 8px 12px;
    white-space: nowrap;
  }
}
/* =========================================
   PC（1025px以上）だけ：右2連CTAを“形そのまま”縮小して
   ナビ/ボタンの横幅を確保する（高さは潰さない）
   ========================================= */
@media screen and (min-width: 1025px){

  /* 右2連CTAをまとめて縮小（見た目の形を維持） */
  .header-cta-double{
    transform: scale(0.78);          /* ← ここで縮小率調整 */
    transform-origin: right center;  /* 右端基準で縮める（左を空ける） */
  }

  /* scaleすると“見た目”は小さくなるが、レイアウト上の幅は変わらないので
     右2連CTAの占有幅も縮める（実幅を縮小率に合わせる） */
  .header-cta-double{
    width: calc(100% * 0.78);
    max-width: 520px; /* 念のための上限。環境により調整可 */
  }
}
/* =========================================
   PC（1025px以上）だけ：CTAを“形そのまま”自動縮小して
   ナビ文字が絶対かぶらないようにする
   ※ 1024px以下は一切触らない
   ========================================= */
@media screen and (min-width: 1025px) {

  /* 左（ロゴ/ナビ/ボタン）は潰さない */
  .header-logo-group,
  .header-nav,
  .header-auth {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 右CTAは縮小してでも収める（かぶり防止の主役） */
  /* .header-cta-double.inline-style {
    flex: 0 0 auto;

    --cta-scale: clamp(0.55, calc(100vw / 1900), 0.78);

    transform: scale(var(--cta-scale));
    transform-origin: right center;
  } */
}
@media (min-width: 821px) {
  .nav-divider {
    display: inline-block;
    height: 16px;
    width: 2px;
    background-color: var(--color-primary); /* 赤色 */
    margin: 0 12px;
    vertical-align: middle;
  }
}
@media (max-width: 1480px) {
  .header-cta-double {
    display: none !important;
  }
}
/* 1025px〜1590pxだけ：ヘッダーの“グレー部分”を縦に増やす（中身はそのまま） */
@media screen and (min-width: 1025px) and (max-width: 1590px) {
  .header-main{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

@media (min-width: 1025px) {
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .campaign-wrapper,
  .campaign-back,
  .cta-band,
  .site-footer {
    width: 100%;
  }

  .campaign-set,
  .price-compare-inner,
  .faq-vertical-container,
  .bottom-main {
    max-width: 1200px;
    margin: 0 auto;
  }

  .campaign-title,
  .campaign-lead,
  .campaign-text,
  .campaign-text2,
  .remain-badge {
    text-align: center;
  }

  .cta-band-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .site-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

}
@media (min-width: 1025px) and (max-width: 1264px) {
  .feature-grid {
    transform: scale(0.8);
    transform-origin: top center;
    margin-bottom: -100px; /* ←下余白を詰める */

  }
}

@media (min-width: 1025px) and (max-width: 1230px) {
  .campaign-pc {
    /* 元の位置調整（translate）を残したまま、scaleだけ追加 */
    transform: translate(25%, -50%) scale(0.6);
    transform-origin: center center;
  }
}
@media (min-width: 1025px) and (max-width: 1045px) {
  .hero {
    padding-left: 32px;
    padding-right: 32px;
  }

  .hero-image img {
    transform: scale(0.88);
    transform-origin: center center;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .campaign-set,
  .price-compare-inner,
  .faq-vertical-container,
  .bottom-main {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}
/* 活用メリット：1025〜1199pxだけ
   2枚を“そのまま縮小”＋縮小後の見た目で中央配置＋左右余白 */
@media screen and (min-width: 1025px) and (max-width: 1199px) {

  /* このセクション内だけ左右余白を確保（赤帯は触らない） */
  .benefits{
    padding: 0 16px;       /* ← 両端余白 */
    overflow-x: hidden;    /* はみ出し保険 */
  }

  .benefit-cards{
    --baseW: 1184px;                 /* 580*2 + gap24 */
    --viewW: calc(100vw - 32px);     /* padding(16*2)ぶん引く */
    --s: min(1, calc(var(--viewW) / var(--baseW)));

    width: var(--baseW);
    max-width: none;
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
    justify-content: center;

    /* 縮小 */
    transform-origin: top left;
    transform: scale(var(--s));

    /* ★縮小後の“見た目幅”で中央に来るように左余白を計算 */
    margin-left: calc((var(--viewW) - (var(--baseW) * var(--s))) / 2);
    margin-right: 0;
  }

  /* 念のため：中身が押し広げない */
  .benefit-card { min-width: 0; }
}
/* 活用メリット：赤帯は常に画面いっぱい（他には影響させない） */
.auto-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* FAQ：1025〜1230px だけ、現状デザインのまま “全部同倍率で縮小” ＋ A文字のはみ出し防止 */
@media screen and (min-width: 1025px) and (max-width: 1230px) {

  /* 左右に同じ余白（必要なら 16→20,24 に） */
  .faq-vertical-container{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
    overflow-x: clip; /* FAQ内だけ横はみ出し抑止 */
  }

  /* 画像の表示幅（=縮小後の見た目）を決める：常に中央 */
  .faq-vertical-item{
    --viewW: min(1200px, calc(100vw - 32px));   /* 16px×2 の余白込み */
    --scale: calc(var(--viewW) / 1200px);       /* ★基準は必ず1200px */

    width: var(--viewW) !important;
    margin: 0 auto !important;
    position: relative;
  }

  /* 背景画像は表示幅に追従（形はそのまま） */
  .faq-vertical-item img{
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 文字レイヤーは 1200px 基準の座標のまま、同倍率で縮小 */
  .faq-overlay{
    position: absolute !important;
    inset: 0 !important;
    width: 1200px !important;
    height: 100% !important;
    transform-origin: top left !important;
    transform: scale(var(--scale)) !important;
    pointer-events: none;
  }

  /* ★ここが本命：A文字を「枠内の安全領域」に必ず収める
     width固定(560px)をやめて、rightで内側余白を確保する */
  .faq-a1,
  .faq-a2{
    left: 590px !important;     /* 元の位置は維持（デザインそのまま） */
    right: 60px !important;     /* ← 枠の内側余白（必要なら 70px 等） */
    width: auto !important;     /* 固定幅を解除 */
    max-width: none !important;

    white-space: normal;
    box-sizing: border-box;
  }
}
/* FAQ：1200〜1230pxだけ
   画像＋枠＋文字を“丸ごと同倍率”で縮小して、A横文字のズレも解消 */
@media screen and (min-width: 1200px) and (max-width: 1230px) {

  .faq-vertical-container{
    overflow-x: clip;
  }

  /* 1行（背景画像＋overlay）をまとめて縮小する */
  .faq-vertical-item{
    --pad: 32px; /* 左右余白（16px×2） */
    --viewW: calc(100vw - var(--pad));
    --s: min(1, calc(var(--viewW) / 1200px) * 0.95); /* ← 少し強めに縮小（切れ防止） */

    width: 1200px !important;     /* “完成形”を基準にして */
    margin: 0 auto !important;    /* 常に中央 */
    transform-origin: top center; /* 中央を基準に縮小 */
    transform: scale(var(--s));   /* ★ここで丸ごと縮小 */
  }

  /* overlay側に別scaleが残ってると二重になるので止める */
  .faq-overlay{
    width: 100% !important;
    transform: none !important;
  }
}
/* =========================================
   PRICE COMPARISON（左右2カラム）だけ：
   1025〜1100pxで “形そのまま” 縮小＆必ずど真ん中
   他の箇所は絶対に触らない
========================================= */
@media screen and (min-width: 1025px) and (max-width: 1100px){

  /* このブロックがはみ出しても他を巻き込まない保険（このセクション内だけ） */
  .campaign-back{ overflow-x: hidden; }

  /* 価格比較ブロック（container付き）を viewport 基準で中央固定して丸ごと縮小 */
  .campaign-back .container.price-compare-inner{
    --baseW: 1070px;                 /* 500*2 + gap70 */
    --pad: 32px;                     /* 左右に同じ余白を確保 */
    --viewW: calc(100vw - var(--pad));
    --s: clamp(0.92, calc(var(--viewW) / var(--baseW)), 1);

    width: var(--baseW);
    max-width: none;

    margin: 0;                       /* containerの余計な寄せを排除 */
    position: relative;
    left: 50vw;                      /* ★viewport基準で中央 */
    transform-origin: top center;
    transform: translateX(-50%) scale(var(--s));
  }
  .price-compare-inner{
    gap: 0 !important;
  }
}
/* 特典2（2つ目の行）だけ：1025〜1200pxで
   形そのまま縮小・1行固定・赤線を文字に密着 */
@media screen and (max-width: 1200px) and (min-width: 1025px) {

  .campaign-set .campaign-lead-row:nth-of-type(2) .campaign-lead{
    /* 1行固定 */
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict;

    /* フォントは今まで通り自然に縮小 */
    font-size: clamp(20px, 2.2vw, 28px) !important;

    /* 見た目調整（今の形を維持） */
    letter-spacing: -0.02em;

    /* 赤線を疑似要素に切り替える準備 */
    position: relative;
    padding-bottom: 0;
    border-bottom: none;
  }

  /* 赤線（文字にピタッと） */
  .campaign-set .campaign-lead-row:nth-of-type(2) .campaign-lead::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;          /* ← ここが“近さ”の決め手 */
    height: 2px;
    background-color: #e50038;
  }
}
/* ヒーロー文：1025px以上は「brの位置だけ」で改行を固定 */
@media screen and (min-width: 1025px) {
  .hero-lead {
    white-space: nowrap;      /* br以外では折り返さない（変な改行防止） */
    word-break: keep-all;
    overflow-wrap: normal;
    line-break: strict;
    margin: 6px;
  }

  /* 1025px以上では br を有効化（この3行に固定） */
  .hero-lead .sp-br {
    display: block;
  }
}
/* =========================================
   PLAN COMPARISON：1025〜1160pxだけ
   821〜1024と同じ思想（形は崩さず等比縮小）で、
   scale を固定ではなく viewport に合わせて可変にする
========================================= */
@media screen and (min-width: 1025px) and (max-width: 1160px){

  /* セクション：外側は中央寄せするだけ（背景はwrap側へ） */
  .plan-comparison{
    width: 100%;
    margin: 0 auto;
    background: none !important;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* 背景＋表示窓（ここをviewport幅に合わせる） */
  .plan-comparison .comparison-scale-wrap{
    --baseW: 1200;                 /* 821〜1024の“完成形”基準幅:contentReference[oaicite:2]{index=2} */
    --baseH: 1315;                 /* 同じく基準高さ:contentReference[oaicite:3]{index=3} */
    --viewW: min(1160px, calc(100vw - 32px)); /* 左右16px余白込み */
    --scale: calc(var(--viewW) / (var(--baseW) * 1px));

    width: var(--viewW) !important;
    margin: 0 auto !important;
    position: relative !important;

    /* ここ重要：高さを縮小後に追従させて “上に小さく＋下がスカスカ” を防ぐ */
    height: calc(var(--baseH) * 1px * var(--scale)) !important;
    overflow: hidden !important;

    /* 背景は今のまま（821〜1024と同じ見え方） */
    background: url("img/back.png") no-repeat !important;
    background-size: 65% !important;
    background-position: 86% 45% !important;
    background-color: #f7f7f7 !important;

    /* 過去の transform ロックが残ってても無効化 */
    transform: none !important;
  }

  /* 中身（表）を“丸ごと”縮小：形は崩れない:contentReference[oaicite:4]{index=4} */
  .plan-comparison .comparison-grid{
    width: calc(var(--baseW) * 1px) !important;
    height: calc(var(--baseH) * 1px) !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;           /* PC側の left:65px 系を潰す:contentReference[oaicite:5]{index=5} */
    right: auto !important;
    margin: 0 !important;

    transform-origin: top left !important;
    /* 右に寄せる微調整（+で右、-で左） */
    --nudgeX: 24px;

    transform: translateX(calc((35px * var(--scale)) + var(--nudgeX))) scale(var(--scale)) !important;
    }
  }
  /* PLAN COMPARISON：縮小時の“下余白”を自動で詰める（該当箇所だけ） */
@media screen and (min-width: 1025px) and (max-width: 1160px){

  /* 1) セクション側の「固定の余白/高さ」があれば無効化（ここだけ） */
  .plan-comparison{
    height: auto !important;
    padding-bottom: 0 !important;  /* 余白が増えている原因がpaddingならこれで消える */
    margin-bottom: 0 !important;
  }

  /* 2) 縮小後の高さぶんだけ、ラッパーの高さを“計算して”持たせる */
  .plan-comparison .comparison-scale-wrap{
    --baseH: 1315; /* ←あなたの基準高さ（既に使ってる値と同じでOK） */
    height: calc(var(--baseH) * 1px * var(--scale)) !important;
    overflow: hidden !important;   /* はみ出し防止（見た目そのまま） */
  }
}
/* ヘッダー：821px〜1024pxでも少し縦を広げる（1025px以上と思想を揃える） */
@media screen and (min-width: 821px) and (max-width: 1024px) {

  /* グレーの帯（実際に見えている部分）だけを伸ばす */
  .header-main{
    padding-top: 20px;
    padding-bottom: 20px;
  }

}
/* 821〜925px：ヘッダー中央（ナビ＋ボタン）だけ “もっと縮小” して被り防止 */
@media screen and (min-width: 821px) and (max-width: 925px){

  /* flexの中で押しつぶせるように（被りの原因になりがちな最小幅制限を解除） */
  .header-center{
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .header-nav, .header-auth, .header-nav ul{
    min-width: 0 !important;
  }

  /* まず間を詰める（サイズは基本そのまま） */
  .header-center{ gap: 20px !important; }
  .header-nav ul{ gap: 10px !important; }
  .header-auth{ gap: 8px !important; }
  .header-auth a,
  .header-auth .btn{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 本命：zoom が使えるブラウザでは “占有幅ごと” 縮小（これで被りが消える） */
  @supports (zoom: 1){
    .header-center{
      zoom: 0.84;                 /* ← もっと縮小（0.78→0.74くらい） */
    }
  }
}
/* 1300px以上：ヘッダー右側にCTAを「そのまま縮小」してボタンの右へ */
@media screen and (min-width: 1300px) {

  /* space-around をこの範囲だけ解除して、右側に寄せやすくする */
  .header-main{
    justify-content: flex-start !important;
    gap: 14px !important;  /* ロゴ〜中央〜CTA間の距離（好みで調整OK） */
  }

  /* ロゴを左に固定して、残り（ナビ＋ボタン＋CTA）を右側に寄せる */
  .header-logo-group{
    margin-right: auto !important;
  }

  /* CTAをボタンの右に「近く」配置 */
  .header-cta-double.inline-style{
    margin-left: 10px !important;         /* ボタンとの間隔 */
    transform: scale(0.9) !important;    /* ← おもいっきり縮小 */
    transform-origin: right center !important;
  }
}
/* 1300〜1480px：ナビ＋ボタン＋CTAを「形そのまま」同倍率で縮小（ロゴはそのまま） */
@media screen and (min-width: 1300px) and (max-width: 1480px){

  /* space-around由来のズレを避ける（この範囲だけ） */
  .header-main{
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  /* ロゴを左固定、右側グループを右寄せしやすくする */
  .header-logo-group{
    margin-right: auto !important;
  }

  /* 縮小率：1300で小さめ → 1480で少し戻す（“思いっきり縮小”寄り） */
  .header-main{
    --hScale: clamp(
      0.60,
      calc(0.60 + ((100vw - 1300px) * 0.18 / 180)),
      0.78
    );
  }

  /* 既存のCTA個別縮小（transform/width）をこの範囲だけ無効化して競合を消す */
  .header-cta-double,
  .header-cta-double.inline-style{
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 本命：レイアウトごと縮む（= 形も配置も崩れにくい） */
  .header-center,
  .header-cta-double.inline-style{
    zoom: var(--hScale) !important;
  }

  /* zoom非対応ブラウザの保険（見た目だけでも同倍率に） */
  @supports not (zoom: 1){
    .header-center,
    .header-cta-double.inline-style{
      transform: scale(var(--hScale)) !important;
      transform-origin: center center !important;
    }
  }
}

/*ログイン後の画面*/
/* ===============================
   HEADER 右側（管理ページ + ユーザー）
   ※ ナビ・他ページに影響なし
================================ */

.site-header .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  margin-right: 24px;
}

/* 管理ページボタン */
.site-header .header-admin-btn {
  padding: 10px 18px;
  font-size: 14px;
}

/* ユーザー表示 */
.site-header .header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* ユーザー名 */
.site-header .header-user-name {
  line-height: 1;
}

/* 丸アイコン */
.site-header .user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #e5e5e5 ;
  border: 1px solid var(--color-primary);
}



/*ヘッダー変更*/
/* =========================================
   820px以下：ヘッダーを添付画像レイアウトに（スマホのみ）
   上段：ロゴ＋管理/ログイン/新規登録
   下段：赤帯ナビ（特徴・機能｜料金プラン｜Q&A）
========================================= */
@media screen and (max-width: 820px) {

  /* 念のため：2連CTAはスマホでは不要なので非表示（既存にもあるが保険） */
  .header-cta-double.inline-style { display: none !important; }

  /* ヘッダー全体を「上段＋下段」の2段構成にする */
  .header-main{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo auth"
      "nav  nav";
    align-items: center;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important; /* 上段は白 */
  }

  /* header-center配下（nav/auth）を grid に参加させる */
  .header-center{
    display: contents !important;
  }

  /* 上段：左 ロゴ */
  .header-logo-group{
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 !important;
    min-width: 0;
  }

  /* スマホでは英字キャッチは不要なので非表示（文字詰まり防止） */
  .logo-text{ display: none !important; }

  /* ロゴサイズ（必要なら微調整OK） */
  .logo-img{
    height: 42px !important;
    width: auto;
  }

  /* 上段：右 3ボタン（スマホでは「表示」に戻す） */
  .header-auth{
    grid-area: auth;
    display: flex !important;            /* 既存の display:none を上書き */
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    white-space: nowrap;
  }

  /* 3ボタンの見た目：赤い丸角ピル */
  .header-auth .header-auth-btn{
    padding: 8px 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  /* 下段：赤帯ナビ（画面幅いっぱい） */
  .header-nav{
    grid-area: nav;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: var(--color-primary) !important;
    color: #fff !important;

    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px !important;
    flex-wrap: nowrap !important; /* 文字が切れない前提で折り返しはさせない */
  }

  /* ナビ文字（画像に近いサイズ感） */
  .header-nav a{
    font-size: 16px !important;
    padding: 0 !important;
    white-space: nowrap;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 600;
    line-height: 1.2 !important;

    /* 追加分：各ナビ項目を「同じ幅」にして中央寄せ */
    flex: 1;                 /* ← これが重要 */
    text-align: center;
  }

  /* PC向けの下線アニメはスマホ帯では不要なので消す（見た目安定） */
  .header-nav a::after{
    display: none !important;
  }

  /* 区切り線（縦線） */
  .header-nav .nav-divider{
    display: block;
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.6);
    flex: 0 0 1px; /* 区切り線は幅固定 */
  }

}
@media screen and (max-width: 345px) {

  /* ボタン群だけをそのままの形で縮小 */
  .header-auth{
    transform: scale(0.88);          /* ← 縮小率（0.86〜0.9で微調整可） */
    transform-origin: right center;  /* 右基準で縮小（ロゴに被らない） */
  }

}
/* ▼キャンペーン帯：スマホでも赤い▼を表示（overflowで切れていたのを復活） */
@media screen and (max-width: 820px) {
  .campaign-wrapper{
    overflow: visible !important;  
    margin-bottom: 20px;         
  }

  /* 念のため：スマホ側で他ルールに負けないように再宣言（任意だが安全） */
  .campaign-wrapper::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -19px;
    transform: translateX(-50%);
    border-width: 20px 18px 0 18px;
    border-style: solid;
    border-color: var(--color-primary) transparent transparent transparent;
  }
}
@media screen and (max-width: 820px){

  .cta-band{
    /* ここは前のままでOK（中央寄せは親でやる） */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: hidden !important;
  }

  /* ▼ここだけ変更：left/translate を使わず “flex中央寄せ” に統一 */
  .cta-band-inner{
    width: 830px !important;
    max-width: none !important;

    position: relative !important;
    left: auto !important;           /* ← 無効化 */
    transform: scale(var(--cta-s)) !important;  /* ← translateX(-50%) を外す */
    transform-origin: center center !important;

    margin: 0 auto !important;       /* 念のため */
    display: flex !important;
    gap: 24px !important;
  }
}
/* =====================================
   681px〜820px：821pxの見た目を固定で維持（CTAだけ）
   ・CTAは縮小しない（821pxと同じ）
   ・赤帯の高さもそのまま
   ・左右は赤い余白が増えるだけ
===================================== */
@media screen and (min-width: 681px) and (max-width: 820px){

  /* 赤帯（高さは固定で、中央に配置） */
  .cta-band{
    height: 140px !important;     /* ← 821px側の見た目に合わせる */
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;  /* 横スクロール禁止のまま */
  }

  /* 中身：821pxと同じ「固定幅・縮小なし・中央寄せ」 */
  .cta-band-inner{
    width: 450px !important;      /* 300*2 + gap24 の設計幅 */
    max-width: none !important;

    position: relative !important; /* absolute/translate/scale を無効化 */
    left: auto !important;
    top: auto !important;
    transform: none !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 0 !important;
  }
}
/* デフォルト（PC・タブレット）：改行しない */
.sp-br {
  display: none;
}

/* スマホ版だけ改行を有効にする */
@media screen and (max-width: 820px) {
  .sp-br {
    display: inline !important;
  }
}
/*ログイン後のヘッダー*/
/* ===========================
   HEADER : スマホ専用（〜820px）
   他の画面には影響しない
=========================== */
@media screen and (max-width: 820px) {

  /* ヘッダー全体 */
  .site-header {
    backdrop-filter: none;
    background-color: #fff;
  }

  .header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
  }

  /* ナビは非表示（スマホは使わない） */
  .header-center {
    display: none;
  }

  /* ロゴ */
  .header-logo-group {
    margin-left: 0;
    min-width: auto;
  }

  .logo-img {
    height: 42px;
  }

  .logo-text {
    display: none; /* スマホでは非表示（画像準拠） */
  }

  /* 右側エリア */
  .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* 管理ページボタン */
  .header-admin-btn {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1;
  }
  /* ユーザー情報（PC版と同じ構造を使う） */
  .header-user {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .header-user-name {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  /* PC版と同じ丸 */
  .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    flex-shrink: 0;
  }
}
@media screen and (max-width: 360px) {

  /* 右側（管理ページ + 名前 + 丸）だけ縮小 */
  .site-header .header-right {
    transform: scale(0.78);
    transform-origin: right center;
  }
}
/* ===========================
   340px以下：右側（管理ページ＋名前＋丸）だけを左寄りに
   ※ロゴは触らない
=========================== */
@media screen and (max-width: 340px) {
  .site-header .header-right{
    position: relative;
    right: 22px;              /* ←この数字を増やすほど左へ */
    margin-right: 0 !important; /* margin調整は打ち消す */
  }  
}
/* =========================================================
   820px以下：index / login のヘッダーをCSSだけで分岐して安定化
   - どちらも「赤帯ナビ」は同じ表示
   - index：header-auth（3ボタン）
   - login：header-right（管理ページ + 名前 + 丸）
========================================================= */
@media screen and (max-width: 820px){

  /* 共通：スマホでもナビは出す（既存の header-center 非表示を打ち消す） */
  .site-header .header-center{
    display: contents !important;
  }

  /* 共通：2連CTAはスマホでは不要 */
  .site-header .header-cta-double.inline-style{
    display: none !important;
  }

  /* ----------------------------
     A) index.html（.header-auth がある方）
     ---------------------------- */
  .site-header:has(.header-auth) .header-main{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo auth"
      "nav  nav";
    align-items: center;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .site-header:has(.header-auth) .header-logo-group{
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 !important;
    min-width: 0;
  }

  .site-header:has(.header-auth) .logo-text{
    display: none !important;
  }

  .site-header:has(.header-auth) .logo-img{
    height: 42px !important;
    width: auto;
  }

  .site-header:has(.header-auth) .header-auth{
    grid-area: auth;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    white-space: nowrap;
  }

  .site-header:has(.header-auth) .header-auth .header-auth-btn{
    padding: 8px 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  /* index：赤帯ナビ（共通見た目） */
  .site-header:has(.header-auth) .header-nav{
    grid-area: nav;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: var(--color-primary) !important;
    color: #fff !important;

    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  .site-header:has(.header-auth) .header-nav a{
    font-size: 16px !important;
    padding: 0 !important;
    white-space: nowrap;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 600;
    line-height: 1.2 !important;

    flex: 1;
    text-align: center;
  }

  .site-header:has(.header-auth) .header-nav a::after{
    display: none !important;
  }

  .site-header:has(.header-auth) .header-nav .nav-divider{
    display: block;
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.6);
    flex: 0 0 1px;
  }


  /* ----------------------------
     B) login.html（.header-user がある方）
     ---------------------------- */
  .site-header:has(.header-user) .header-main{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo right"
      "nav  nav";
    align-items: center;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .site-header:has(.header-user) .header-logo-group{
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 !important;
    min-width: 0;
  }

  .site-header:has(.header-user) .logo-text{
    display: none !important;
  }

  .site-header:has(.header-user) .logo-img{
    height: 42px !important;
    width: auto;
  }

  /* login：右側（管理ページ + 名前 + 丸） */
  .site-header:has(.header-user) .header-right{
    grid-area: right;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 12px;
    white-space: nowrap;
  }

  .site-header:has(.header-user) .header-admin-btn{
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1;
  }

  /* 重要：loginだけはスマホでも名前＋丸を表示（既存のdisplay:noneを打ち消す） */
  .site-header:has(.header-user) .header-user{
    display: flex !important;
    align-items: center;
    gap: 6px;
  }

  .site-header:has(.header-user) .header-user-name{
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
  }

  .site-header:has(.header-user) .user-avatar{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    flex-shrink: 0;
  }

  /* login：赤帯ナビ（indexと同じ見た目） */
  .site-header:has(.header-user) .header-nav{
    grid-area: nav;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: var(--color-primary) !important;
    color: #fff !important;

    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  .site-header:has(.header-user) .header-nav a{
    font-size: 16px !important;
    padding: 0 !important;
    white-space: nowrap;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 600;
    line-height: 1.2 !important;

    flex: 1;
    text-align: center;
  }

  .site-header:has(.header-user) .header-nav a::after{
    display: none !important;
  }

  .site-header:has(.header-user) .header-nav .nav-divider{
    display: block;
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.6);
    flex: 0 0 1px;
  }
}

/* 345px以下：indexの3ボタンだけ縮小（既存仕様を維持） */
@media screen and (max-width: 345px){
  .site-header:has(.header-auth) .header-auth{
    transform: scale(0.88);
    transform-origin: right center;
  }
}
/* PC版：右CTAをさらに右へ */
@media (min-width: 821px) {
  .header-cta-double.inline-style {
    margin-left: 48px; /* ← ここを調整 */
  }
}
/* PC(1025px以上)だけ：ナビ＋ボタン＋CTAを全体的に右へ寄せる */
@media (min-width: 1025px) {

  /* 中央の「ナビ＋管理/ログイン/新規登録」を右へ */
  .header-center{
    margin-left: 100px;   /* ← 右寄り量（30〜60で調整） */
  }

.header-cta-double .cta-box.small {
      margin-left: 120px !important; 
}
}
/* 横スクロールの主因（Heroのはみ出し）だけを止める */
.hero {
  overflow-x: clip; /* 対応してない場合は hidden と同じ扱いになります */
}
.hero-image img {
  max-width: 100%;
  width: 100%;
  display: block; /* flex は不要。はみ出し/ズレの原因になりやすい */
}