/* ============================================================
   ベース設定 / カラー変数
============================================================ */
:root{
  --color-primary:        #E95513;   /* 結婚物語のオレンジ */
  --color-primary-dark:   #C9430A;
  --color-primary-light:  #FCE5D5;   /* 薄いピーチ */
  --color-primary-lighter:#FFF4ED;
  --color-text:           #333333;
  --color-text-sub:       #666666;
  --color-text-light:     #888888;
  --color-border:         #DDDDDD;
  --color-border-light:   #EEEEEE;
  --color-bg:             #FFFFFF;
  --color-bg-form:        #F7F7F7;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-btn:  0 4px 12px rgba(233,85,19,0.25);

  --font-jp: "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
}

/* 本ページ専用スコープ : 既存サイトのCSSと干渉しないよう .ms-page 配下にまとめる想定 */
.ms-page,
.ms-page *,
.ms-page *::before,
.ms-page *::after{
  box-sizing: border-box;
}

.ms-page{
  font-family: var(--font-jp);
  color: var(--color-text);
  line-height: 1.7;
  font-size: 16px;
  background:#fff;
  -webkit-font-smoothing: antialiased;
}

.ms-page img{
  max-width:100%;
  height:auto;
  display:block;
}

.ms-page a{ text-decoration:none; }

/* 共通コンテナ : PC時は中央 1129px */
.ms-container{
  width:100%;
  max-width: 1129px;
  margin:0 auto;
  padding: 0 20px;
}
/* よくある質問のみ 900px */
.ms-container--narrow{
  max-width: 900px;
}

/* 共通見出し
   ※ .ms-form-intro__title と .ms-bottom-cta__title はそれぞれ個別スタイルあり */
.ms-section-title{
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}

.ms-section-lead{
  text-align:center;
  font-size: 15px;
  color: var(--color-text-sub);
  margin: 0 0 50px;
}

/* セクション余白 */
.ms-section{ padding: 80px 0; }


/* ============================================================
   1) ヒーローセクション
   - 中央1129pxの枠の中に背景色 (#FFFBF9)
   - 上下50px、左右65pxのパディング
   - 波形画像は別要素として画面いっぱいに配置 (.ms-hero__bg-wave)
============================================================ */
.ms-hero{
  position: relative;
  max-width: 1129px;
  margin: 0 auto;
  padding: 50px 65px;
  background-color: #FFFBF9;
  /* 複数背景 : 先に書いたものが上に重なる
     → 上 : request_main.png (代表画像)
     → 下 : request_bg1.png (波形背景・#FFFBF9の底面に幅100%で配置)
     → さらに下 : background-color (#FFFBF9) */
  background-image:
    url("../img/request_main2.png"),
    url("../img/request_bg1.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 95% 100%, center bottom;
  /* request_main.png は元と同じ (auto 100%)、
     request_bg1.png は #FFFBF9 の幅と同じ = 100% width、縦横比は維持 (auto) */
  background-size: auto 100%, 100% auto;
  overflow: visible;
}

.ms-hero__inner{
  position: relative;
  z-index: 3;
  height: 100%;
}

.ms-hero__copy{
  position: relative;
  z-index: 3;                    /* 画像と被ってもテキスト/CTAは前面で見える */
  max-width: 660px;              /* 画像領域とぶつからない幅 */
}

/* 波形背景画像 : 画面いっぱい・背景色の下端にぴったり */
.ms-hero__bg-wave{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                  /* 画面幅いっぱい */
  z-index: 1;                    /* 背景色の上、コンテンツの下 */
  pointer-events: none;
  line-height: 0;
}
.ms-hero__bg-wave img{
  display: block;
  width: 100%;
  height: auto;
}

/* タグ : 「本気で始める」その前に。 */
.ms-hero__tag{
  display: inline-block;
  background: #fff;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  padding: 6px 20px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
  border: 2px solid var(--color-primary);
}

/* メインコピー */
.ms-hero__title{
  font-size: 36px;
  font-weight: 900;
  line-height: 1.4;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
  color: #2A2A2A;
  white-space: nowrap;           /* 1行目を折り返さない */
}
.ms-hero__title .big{
  display: block;
  font-size: 86px;
  color: var(--color-primary);
  line-height: 1.1;
  margin-top: 4px;
  letter-spacing: 0.02em;
  white-space: normal;
}

.ms-hero__sub{
  font-size: 16px;
  color: #555;
  margin: 0 0 24px;
}

/* 3つのチェックボックス
   - フォント16px / 枠2px #FEF3EA / 角丸5px / 影なし / 横並び  */
.ms-hero__checks{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.ms-hero__check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 10px 18px 10px 12px;
  border: 2px solid #FEF3EA;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  box-shadow: none;
}
.ms-hero__check::before{
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5 L9 14 L15.5 7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  flex-shrink: 0;
}

/* CTAボタン
   - 白文字20px / 下E54600 → 上F57E49 のグラデーション  */
.ms-btn-primary{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: linear-gradient(to top, #E54600 0%, #F57E49 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 22px 30px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(229,70,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  position: relative;
}
.ms-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(229,70,0,0.35);
}
/* 書類アイコン */
.ms-btn-primary::before{
  content: "";
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14 3 H6 a2 2 0 0 0 -2 2 v14 a2 2 0 0 0 2 2 h12 a2 2 0 0 0 2 -2 V9 z M14 3 v6 h6 M8 13 h8 M8 17 h5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 右矢印 */
.ms-btn-primary::after{
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* ヒーロー画像コンテナ
   - PCではメインビジュアルが .ms-hero の background-image になっているため、このコンテナは非表示
   - SP用合成画像 (.ms-hero__image-sp__*) はSPでのみ復活させる */
.ms-hero__image{
  display: none;
}
.ms-hero__image-sp{ display: none; }

/* ============================================================
   2) POINT セクション
============================================================ */
.ms-points{
  background:#fff;
  position: relative;
}

.ms-points__header,
.ms-faq__header{
  position: relative;
  text-align:center;
  margin-top: 50px;           /* 飾り文字を20px上にずらした分、上の隙間を50px追加 */
  margin-bottom: 40px;        /* h2の下40pxでPOINTブロックがスタート */
  z-index: 1;
}

/* h2の後ろの飾り文字 - h2の下端ラインから20px上 (h2との重なりを減らす) */
.ms-points__header::before,
.ms-faq__header::before{
  content: attr(data-deco);
  position: absolute;
  bottom: 20px;                /* h2底辺の20px上 (旧 bottom:0 から20px上昇) */
  left: 50%;
  transform: translateX(-50%);
  font-family: "AllMembersGatheringPop", "Impact", "Arial Black", sans-serif;
  font-size: 90px;
  font-weight: 700;
  color: #FFF2ED;
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 「資料請求はこちら」フローティングボタン
   - 画面右下に固定表示 (right: 40px / bottom: 40px)
   - ボトムCTAセクションが見えた時にJSで非表示
   - SP時は非表示 */
.ms-points__cta{
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 9999;                /* 全要素より前面に出すため十分大きな値 */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(to top, #E54600 0%, #F57E49 100%);
  color: #fff;
  padding: 16px 30px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(229,70,0,0.25);
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
  text-decoration: none;
}
.ms-points__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(229,70,0,0.35);
}
.ms-points__cta::after{ content: "›"; font-size: 22px; line-height: 1; }

/* ページ下端に近づいたら非表示 (JSで .is-hidden を付与) */
.ms-points__cta.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.ms-points__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ms-point-card{
  background: #fff;
  border: 1px solid #E6D8CB;         /* 通常時の枠線 1px #E6D8CB */
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ms-point-card:hover{
  transform: translateY(-2px);
  border-color: #E54600;             /* マウスオーバーで枠線1px #E54600 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);  /* うっすらしたシャドウ */
}

.ms-point-card__label{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}

/* 44x44 アイコン (画像) ※後で実画像に差し替え予定 */
.ms-point-card__icon{
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
}

/* "POINT 01" のラベル部分 : ラベル(POINT)と数字を別フォントサイズ・色で */
.ms-point-card__num{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Acumin Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.ms-point-card__num-label{
  font-size: 18px;
  color: #C79263;
}
.ms-point-card__num-value{
  font-size: 25px;
  color: #E54600;
}

.ms-point-card__title{
  font-size: 20px;             /* PC : 20px */
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.5;
}

.ms-point-card__text{
  font-size: 16px;             /* PC : 16px */
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.7;
}


/* ============================================================
   3) Inside the Booklet セクション
============================================================ */
.ms-booklet{
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* 背景イメージ : 画面幅いっぱい、セクション下端にぴったり */
.ms-booklet__bg-image{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  line-height: 0;
}
.ms-booklet__bg-image img{
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px){
  .ms-booklet__bg-image{
  width: 150%;
}
  .ms-booklet__bg-image img{
  width: 150%;
}
}

/* コンテンツを bg画像より前面に */
.ms-booklet > .ms-container{
  position: relative;
  z-index: 1;
}

/* booklet 用 ヘッダー : POINTセクションと同じデザイン */
.ms-booklet__header{
  position: relative;
  text-align: center;
  margin-bottom: 30px;            /* h2の下30pxでリード文がスタート */
  z-index: 1;
}
/* 飾り文字のみ20px上にずらす (※このセクションは margin-top の追加なし) */
.ms-booklet__header::before{
  content: attr(data-deco);
  position: absolute;
  bottom: 20px;                   /* h2底辺の20px上 (旧 bottom:0 から20px上昇) */
  left: 50%;
  transform: translateX(-50%);
  font-family: "AllMembersGatheringPop", "Impact", "Arial Black", sans-serif;
  font-size: 90px;
  font-weight: 700;
  color: #FFF2ED;
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* このセクションのリード文だけ : 黒・16px、下40pxで次の要素 */
.ms-booklet .ms-section-lead{
  color: #000;
  font-size: 16px;
  margin: 0 0 40px;
}

/* ============================================================
   3-2) 冊子記事カルーセル (中央500x400px + 左右90%サイズの重なり)
============================================================ */
.ms-booklet__carousel{
  position: relative;
  max-width: 1129px;
  margin: 0 auto;
  overflow: hidden;             /* 1129pxからはみ出す部分をクリップ */
  padding: 30px 0 40px;         /* シャドウ用の縦余白 */
}

.ms-booklet__articles{
  position: relative;
  height: 400px;                /* 中央カードと同じ高さ */
}

.ms-booklet-article{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 400px;
  background: #fff;
  border: 1px solid #E6D8CB;       /* 枠線 1px #E6D8CB */
  border-radius: 10px;
  transform: translate(-50%, -50%);
  transition: transform .5s ease, opacity .5s ease, width .5s ease, height .5s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  flex-direction: column;
}

/* 吹き出し画像 : 記事の左上にかぶる */
.ms-booklet-article__bubble{
  position: absolute;
  top: -22px;
  left: -28px;
  width: 130px;
  height: auto;
  z-index: 10;
  pointer-events: none;
  display: block;
}

/* 画像エリア (上部、残りスペース全体) */
.ms-booklet-article__image{
  flex: 1;
  overflow: hidden;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  min-height: 0;
}
.ms-booklet-article__image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 10px;
}

/* 下部テキストエリア : 上に1pxの仕切り線、上下7pxパディング、中央揃え */
.ms-booklet-article__footer{
  border-top: 1px solid #E6D8CB;
  padding: 7px;
  text-align: center;
  font-size: 16px;
  color: #333;
  flex-shrink: 0;
  line-height: 1.4;
}
.ms-booklet-article__page{
  color: #E54600;                   /* ページ番号だけオレンジ */
  font-weight: 700;
  margin-right: 6px;
}

/* 中央 : 最前面、不透明度100%、薄いシャドウ */
.ms-booklet-article.is-active{
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 左側 : 84%サイズ、不透明度50%、中央の左に20pxかぶる位置
   (中央500px / 左右420pxで20pxの重なりを維持するため offset = 440px) */
.ms-booklet-article.is-prev{
  z-index: 1;
  width: 420px;
  height: 336px;
  opacity: 0.5;
  transform: translate(calc(-50% - 440px), -50%);
  pointer-events: auto;
  cursor: pointer;
}

/* 右側 : 84%サイズ、不透明度50%、中央の右に20pxかぶる位置 */
.ms-booklet-article.is-next{
  z-index: 1;
  width: 420px;
  height: 336px;
  opacity: 0.5;
  transform: translate(calc(-50% + 440px), -50%);
  pointer-events: auto;
  cursor: pointer;
}

/* スライダードット */
.ms-booklet__dots{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 24px;
}
.ms-booklet__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(233,85,19,0.25);
  cursor:pointer;
  transition: background .2s ease;
  border: none;
  padding: 0;
}
.ms-booklet__dot.is-active{ background: var(--color-primary); }

/* ============================================================
   3-3) カルーセル前後送りボタン (PC/SP共通)
        - .ms-booklet__articles 内に absolute 配置で左右に表示
        - クリック/タップで JS の showSlide() を前後に呼び出す
============================================================ */
.ms-booklet__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E6D8CB;
  color: var(--color-primary, #E54600);
  cursor: pointer;
  z-index: 5;                    /* is-active(z:3)よりも上に重ねる */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  padding: 0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ms-booklet__nav:hover,
.ms-booklet__nav:focus-visible{
  background: var(--color-primary, #E54600);
  color: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
}
.ms-booklet__nav:focus-visible{
  outline: 2px solid var(--color-primary, #E54600);
  outline-offset: 2px;
}
.ms-booklet__nav:active{
  transform: translateY(-50%) scale(0.94);
}
.ms-booklet__nav svg{
  width: 22px;
  height: 22px;
  display: block;
}
.ms-booklet__nav svg path{
  stroke-width: 3.2;             /* SVG属性(2.4)を上書きして矢印を太めに */
}
.ms-booklet__nav--prev{ left: 16px; }
.ms-booklet__nav--next{ right: 16px; }


/* ============================================================
   4) Voice / ご入会された方の話
============================================================ */
.ms-voice{ background:#fff; }

.ms-voice__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Voice 用 ヘッダー : POINTセクションと同じデザイン */
.ms-voice__header{
  position: relative;
  text-align: center;
  margin-top: 50px;               /* 飾り文字を20px上にずらした分、上の隙間を50px追加 */
  margin-bottom: 30px;            /* h2の下30pxでリード文がスタート */
  z-index: 1;
}
.ms-voice__header::before{
  content: attr(data-deco);
  position: absolute;
  bottom: 20px;                   /* h2底辺の20px上 (旧 bottom:0 から20px上昇) */
  left: 50%;
  transform: translateX(-50%);
  font-family: "AllMembersGatheringPop", "Impact", "Arial Black", sans-serif;
  font-size: 90px;
  font-weight: 700;
  color: #FFF2ED;
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* このセクションのリード文 : 黒・16px、下40pxで次の要素 */
.ms-voice .ms-section-lead{
  color: #000;
  font-size: 16px;
  margin: 0 0 40px;
}

.ms-voice-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid #E6D8CB;         /* 枠線 1px #E6D8CB */
  padding: 28px 24px;
  transition: transform .2s ease, box-shadow .2s ease;   /* hover時の上昇 + シャドウ */
}
.ms-voice-card:hover{
  transform: translateY(-3px);                            /* 若干上に浮かせる */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);             /* シャドウを少し濃く */
}

.ms-voice-card__head{
  display:flex;
  align-items:center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #E6D8CB;     /* 実線 #E6D8CB に変更 */
}
.ms-voice-card__avatar{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light);
  overflow:hidden;
  flex-shrink: 0;
}
.ms-voice-card__avatar img{ width:100%; height:100%; object-fit:cover; }

.ms-voice-card__meta{ flex:1; }
.ms-voice-card__title{
  font-size: 20px;                  /* PC : 20px */
  font-weight: 700;
  margin: 0 0 3px;                  /* タイトル→タグの間隔を縮める */
}
.ms-voice-card__tag{
  display:inline-block;
  font-size: 14px;                  /* 14px */
  background: #fff;                 /* 白背景 */
  color: #E54600;                   /* 文字 #E54600 */
  border: 1px solid #E54600;        /* 枠線 1px #E54600 */
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

/* リード文 (諦めかけたタイミングで入会) :
   下に同じ仕切り線、内部にバッジ風のテキスト */
.ms-voice-card__lead{
  padding-bottom: 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid #E6D8CB;
}
.ms-voice-card__lead-badge{
  display: inline-block;
  background: #FFF0E8;              /* 背景色 #FFF0E8 */
  color: #000;                      /* 黒文字 */
  font-size: 14px;                  /* PC : 14px */
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

/* 引用 : 背景色削除、左に5px幅 #E54600 のバー、20px */
.ms-voice-card__quote{
  background: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 20px;
  border-left: 5px solid #E54600;
  padding: 0 0 0 12px;
  margin: 0 0 14px;
  line-height: 1.5;
  border-radius: 0;
}

/* 本文 */
.ms-voice-card__text{
  font-size: 16px;                  /* PC : 16px */
  color: #000;                      /* 黒 */
  margin: 0;
  line-height: 1.8;
}


/* ============================================================
   5) 資料請求フォーム
============================================================ */
.ms-form-section{
  background: var(--color-primary-light);
  padding: 60px 0;
}

.ms-form-wrap{
  max-width: 1129px;
  margin: 0 auto;
  padding: 0 20px;                       /* ビューポート < 1129pxでの折り返し用 */
  display: grid;
  grid-template-columns: 440px 1fr;      /* 左:440px / 右:1fr (1129pxの右端まで) */
  gap: 80px;
  align-items: start;
}

.ms-form-intro{
  width: 100%;
  text-align: center;
}

/* タイトル+テキストエリア */
.ms-form-intro__header{
  position: relative;
  padding-top: 50px;                     /* 「資料を受け取る」を50px下に */
  padding-bottom: 30px;
}

.ms-form-intro__title{
  position: relative;
  z-index: 1;
  font-size: 25px;
  color: #000;
  font-weight: 700;
  margin: 0 0 12px;
}
.ms-form-intro__text{
  position: relative;
  z-index: 1;
  font-size: 16px;
  color: #000;
  margin: 0;
  line-height: 1.7;
}

/* 画像エリア (440 x 292) - 装飾なしのプレーン画像 */
.ms-form-intro__image{
  width: 100%;
  background: none;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  position: relative;        /* request_white.png より前面に出すため */
  z-index: 1;                /* under-image (z-index:0) の上に重ねる */
}
.ms-form-intro__image img{
  display: block;
  width: 100%;
  height: auto;
}

/* request_white.png : ヘッダー(タイトル + テキスト)の中央に絶対配置
   - .ms-form-intro__header の中央に重ねる
   - 文字より背面(z-index:0)、文字側は z-index:1 で前面に */
.ms-form-intro__under-image{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 280px;
  z-index: 0;
  pointer-events: none;
  margin: 0;
}
.ms-form-intro__under-image img{
  display: block;
  width: 100%;
  height: auto;
}

.ms-form{
  background:#fff;
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.ms-form__row{
  margin-bottom: 16px;
}
.ms-form__row--split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ms-form__label{
  display:block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ms-form__label .req{
  color: var(--color-primary);
  font-size: 12px;
  margin-left: 4px;
}

.ms-form__input,
.ms-form__select{
  width: 100%;
  border: 1px solid #E6D8CB;           /* 枠線 : 1px #E6D8CB */
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: #FAF7F5;                  /* 入力欄背景 : #FAF7F5 */
  transition: border-color .2s ease;
}
.ms-form__input:focus,
.ms-form__select:focus{
  outline: none;
  border-color: var(--color-primary);
}
.ms-form__input::placeholder{ color: #BBBBBB; }

/* セレクトボックスのカスタム矢印
   - ネイティブ矢印を消して、独自のSVG矢印を背景画像で配置
   - ブラウザ標準の位置より「もう10pxほど左」に表示するため、right: 22px に設定
     (デフォルトは概ね 12px 程度なので +10px ぶん左へ) */
.ms-form__select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 12px 8px;
  padding-right: 40px;
}

.ms-form__note{
  font-size: 11px;
  color: var(--color-text-light);
  margin: 18px 0 16px;
  line-height: 1.7;
}
.ms-form__note a{ color: var(--color-primary); text-decoration: underline; }

/* 都道府県セレクト : 中の文字が小さすぎるため見やすいサイズに拡大
   - select 自体の文字サイズも 16px (iOSでズームしない最小)
   - option の文字サイズも 16px / 行間広め
   - ドロップダウン展開時、ブラウザは画面内に収まるよう自動でスクロールを付与する
   - Firefox など対応ブラウザでは option の max-height でリスト自体の高さも制限可能 */
#pref{
  font-size: 16px;
}
#pref option{
  font-size: 16px;
  padding: 8px 12px;
  line-height: 1.6;
}

/* 「ご記入ありがとうございました。」
   - 16px / 太字 / 黒 / 中央寄せ
   - 上のEメール入力欄(.ms-form__row mb16) との視覚的な間隔を 30px にする
     → margin-top: 30px ; 隣接するEメール行の margin-bottom:16 と相殺(大きい方=30)で視覚 30px を確保 */
.ms-form__thanks{
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin: 30px 0 16px;
  line-height: 1.6;
}

.ms-form__submit{
  width: 100%;
  background: var(--color-primary);
  color:#fff;
  font-size: 17px;
  font-weight: 700;
  padding: 16px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform .2s ease;
}
.ms-form__submit:hover{ transform: translateY(-1px); }

.ms-form__footer{
  text-align:center;
  font-size: 11px;
  color: var(--color-text-light);
  margin-top: 14px;
}


/* ============================================================
   6) FAQ
============================================================ */
.ms-faq{ background: #fff; }

.ms-faq__list{
  max-width: 900px;            /* 中央900pxの範囲内に収める */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;                   /* ボックス間の余白 */
}

/* QAボックス : 白背景・角丸10px・1px #E6D8CB ボーダー・ドロップシャドー */
.ms-faq-item{
  background: #fff;
  border: 1px solid #E6D8CB;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 0 24px;             /* 左右の内側余白 */
  transition: box-shadow .2s ease;
}
.ms-faq-item[open]{
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);   /* 展開中はシャドーをやや強める */
}

/* Q部分 (タップ前から見える) */
.ms-faq-item__q{
  display:flex;
  align-items:center;
  gap: 10px;                   /* Q1とその右の質問文の間 10px */
  padding: 20px 0;             /* 上下の余白 (左右はitemに設定済み) */
  cursor: pointer;
  font-size: 18px;             /* 質問文 : PC 18px */
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
}
.ms-faq-item__q::-webkit-details-marker{ display:none; }

/* "Q1" "Q2" ... ラベル : Mozilla Text / 30px / 色はそのまま */
.ms-faq-item__q::before{
  content: attr(data-q);
  font-family: "Mozilla Text", Georgia, serif;
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  color: var(--color-primary);
  flex-shrink: 0;
  min-width: 50px;             /* Q1〜Q5の表示幅を固定し、質問文/Aの開始位置を揃える */
  line-height: 1;
}

/* 右の矢印 : 形状はそのまま、色 #E54600 / サイズUP */
.ms-faq-item__q::after{
  content: "›";
  margin-left: auto;
  flex-shrink: 0;
  font-size: 36px;             /* 24px → 36px に拡大 */
  color: #E54600;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .35s ease;
}
.ms-faq-item[open] .ms-faq-item__q::after{ transform: rotate(-90deg); }

/* A部分 (タップで開く) : 開始位置はQの質問文と揃える (Q幅 50px + gap 10px = 60px)
   ※ overflow:hidden は JS による高さアニメーション(滑らかな開閉)用 */
.ms-faq-item__a{
  padding: 0 0 20px 60px;
  font-size: 16px;             /* PC : 16px */
  color: var(--color-text-sub);
  line-height: 1.8;
  overflow: hidden;
}


/* ============================================================
   7) ボトムCTA
============================================================ */
.ms-bottom-cta{
  background:#fff;
  padding: 60px 20px 80px;
  text-align:center;
  position: relative;
  isolation: isolate;          /* タイトル::before の z-index:-1 をセクション内に閉じる */
}

/* タイトル : 全て黒文字 / PC 25px・SP 20px
   2文を <span class="ms-bottom-cta__title-line"> で包み、間隔調整できる構造に */
.ms-bottom-cta__title{
  position: relative;          /* ::before の基準 */
  font-size: 25px;
  font-weight: 700;
  line-height: 1.8;
  color: #000;
  margin: 0 0 8px;
}

.ms-bottom-cta__title .accent{ color: inherit; }   /* 旧.accentのオレンジを黒に */
.ms-bottom-cta__title-line{ display: block; }       /* 2文をそれぞれ1ブロックに */

/* テキスト部 (タイトル + 注釈) のラッパー
   - PC : セクション全体の中心に画像を配置するため特別な配置はしない
   - SP : この要素を基準に request_orange.png を中央配置するため position:relative */
.ms-bottom-cta__text{
  position: relative;
  z-index: 1;                    /* セクション ::before(画像) より前面に */
}

/* ボタン群も画像より前面に */
.ms-bottom-cta__buttons{
  position: relative;
  z-index: 1;
}

/* request_orange.png をセクション要素の下(背面)・中心に配置 (PC)
   - .ms-bottom-cta は position:relative なので、それを基準に絶対配置
   - 中央には title + note + buttons 全体の中心(セクションのコンテンツ中央)が来る */
.ms-bottom-cta::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 476px;
  height: 447px;
  background: url("../img/request_orange.png") no-repeat center / contain;
  z-index: 0;
  pointer-events: none;
}

/* SP時のみ表示する改行 (PCでは無効) */
.ms-br-sp{ display: none; }

/* よくあるご質問など、HTML上で <br class="sp"> と書いている改行も
   SP (max-width:768px) のときだけ有効にする。
   .ms-page スコープ内のみ適用するため、他ページの .sp クラスには影響しません。 */
.ms-page br.sp{ display: none; }

.ms-bottom-cta__note{
  font-size: 14px;
  color: #000;
  margin: 0 0 28px;
}

.ms-bottom-cta__buttons{
  display:flex;
  gap: 20px;
  justify-content:center;
  flex-wrap: wrap;
}

/* ボタン内アイコン枠 : 後でSVG等をここに入れるだけで差し替え可能
   <span class="ms-cta-icon" aria-hidden="true"><!-- アイコン --></span> */
.ms-cta-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.ms-cta-icon:empty{ display: none; }   /* 中身が空なら詰めて見せる */

/* 「来店予約はこちら」アウトラインボタン */
.ms-btn-primary-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-size: 20px;             /* PC : 20px */
  font-weight: 700;
  padding: 30px;               /* PC : 30px */
  border-radius: 10px;
  cursor:pointer;
  width: 350px;                /* 固定幅 350px */
  transition: all .2s ease;
  text-decoration: none;
  box-sizing: border-box;
}
.ms-btn-primary-outline:hover{
  background: var(--color-primary);
  color: #fff;
}
.ms-btn-primary-outline::after{ content: none; }   /* 矢印を非表示 */

/* 「資料請求はこちら」ボタン (ボトムCTA配下)
   - 既存 .ms-btn-primary::before(書類アイコン) / ::after(矢印) は両方とも非表示
   - 文字サイズPC20px / SP18px / 横並び対応 */
.ms-btn-primary--bottom{
  width: 350px;                 /* 固定幅 350px / .ms-btn-primary の width:100% を上書き */
  padding: 30px;                /* PC : 30px */
  font-size: 20px;              /* PC : 20px */
  border-radius: 10px;
  gap: 10px;
}
.ms-btn-primary--bottom::before,
.ms-btn-primary--bottom::after{ content: none; }   /* 書類アイコン・矢印ともに非表示 */


/* ============================================================
   レスポンシブ (スマホ : ~768px)
============================================================ */
@media (max-width: 768px){

  .ms-section{ padding: 50px 0; }

  /* SP : .ms-hero の背景画像を 2枚重ねる
     ─── バックグラウンドイメージの配置順は下から
          1) request_bg1.png   (波形背景・最下層)
          2) request_kariya.png (代表画像・中間層)
     ※ request_book.png は回転 (transform: rotate) をかけるため
       背景画像ではなく独立した <div class="ms-hero__image-sp__book"> として配置している
       (背景画像は個別に回転できないため)。
     CSSのmultiple-background構文では「先に書いたものが上」なので
     kariya → bg1 の順で記述する。 */
  .ms-hero{
    height: auto;
    padding: 30px 16px 40px;     /* 下パディングは40px (CTA下に画像が伸びる分の余白) */
    background-image:
      url("../img/request_kariya2.png"),
      url("../img/request_bg1.png");
    background-repeat: no-repeat, no-repeat;
    background-position:
      right -6px bottom,           /* kariya : 右下、右へ6pxはみ出させる */
      80% bottom;               /* bg1 : 横方向中央、底面に揃える */
    background-size:
      auto 315px,                  /* kariya : 高さ290px・幅は自動 (縦横比維持) */
      200% auto;                   /* bg1 : 幅120% (#FFFBF9の幅より20%大)・高さは自動 (縦横比維持) */
    overflow: hidden;             /* 120% width のbg1 や はみ出した kariya をクリップ */
  }
  .ms-hero__inner{
    height: auto;
  }
  .ms-hero__copy{ max-width: 100%; }
  .ms-hero__tag{ font-size: 13px; padding: 5px 14px 2px 14px; margin-bottom: 10px;}
  /* タイトル1行目「料金もサポートも、他社との違いも、」は必ず1行に収める
     - white-space: nowrap で折り返しを禁止
     - font-size は viewport 幅に応じて clamp で可変 (最小14px / 最大20px) */
  .ms-hero__title{
    font-size: clamp(14px, 4.5vw, 20px);
    white-space: nowrap;
    letter-spacing: 0;
  }
  .ms-hero__title .big{ font-size: clamp(38px, 12vw, 48px); }   /* 2行目「この一冊で。」は余裕を持ってクランプ */
  .ms-hero__sub{ font-size: 13px; margin-bottom: 14px;}
  .ms-hero__checks{ gap: 5px; margin-bottom: 0;}    /* checks と CTA の間隔は下の .ms-hero__image (clamp可変高さ) で確保 */
  .ms-hero__check{ font-size: 13px; padding: 7px 12px 7px 10px;}
  .ms-hero__check::before{ width: 16px; height: 16px; }
  .ms-btn-primary{
    font-size: 16px;
    padding: 18px 24px;
  }
  .ms-btn-primary::after{ right: 18px; width: 10px; height: 10px; }
  .ms-btn-primary::before{ width: 18px; height: 18px;}

  /* 画像コンテナ : checks と CTA の間の placeholder。
     ※ kariya は .ms-hero の background-image として配置
        book は子要素 (.ms-hero__image-sp__book) として配置 (回転をかけるため) */
  .ms-hero__image{
    display: block;
    position: relative;
    width: 100%;
    height: clamp(170px, 48vw, 200px);
    margin: 0;
    overflow: visible;
  }

  /* SP用デコレーション要素の入れ物 : 親 .ms-hero__image の枠いっぱい */
  .ms-hero__image-sp{
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;        /* 装飾要素なのでクリックは透過 */
  }

  /* kariya は .ms-hero の background-image に統合済み = この <div> は使わない */
  .ms-hero__image-sp__kariya{
    display: none;
  }

  /* ============================================================
     book (冊子) : 回転をかけるため独立した <div> として配置
     ── ★★ 大きさ・位置の調整はここで ★★ ──
  ============================================================ */
  .ms-hero__image-sp__book{
    display: block;
    position: absolute;

    /* ─── ① 大きさ ─────────────────────────────
       高さ 170px を基準に、幅は背景画像の縦横比で自動描画。
       width は「画像が収まる十分な値」として確保する箱のサイズ。
       描画される画像自体は background-size: auto 100% で
       高さ100% (=170px)・幅は縦横比維持なので width の数値そのものでは
       拡大縮小されません。もし width が画像実寸より狭くて右端が
       見切れた場合は width の値を大きくしてください。 */
    height: 120px;
    width:  260px;

    background-image: url("../img/request_book.png");
    background-size: auto 100%;     /* 高さ100% (=170px)、幅は自動で縦横比維持 */
    background-repeat: no-repeat;
    background-position: left center;

    /* ─── ② 回転 ────────────────────────────────
       左へ 4度 傾ける。マイナス値で反時計回り (左傾き) */
    transform: rotate(-4deg);
    transform-origin: center center;

    /* ─── ③ 位置 (★ここを編集して動かしてください) ──
       top / bottom / left / right の値で配置を調整。
       基準は親 .ms-hero__image-sp の枠 (= checks と CTA の間のエリア)。
       マイナス値で枠の外へはみ出させることもできます。 */
    bottom: 30px;          /* 下端からの距離 (大きくすると上へ移動) */
    left:   10px;         /* 左端からの距離 (マイナスで左外へはみ出し) */
    /* top:    auto; */    /* 必要に応じて使用 */
    /* right:  auto; */    /* 必要に応じて使用 */

    /* ─── ④ 影 (任意) ──────────────────────────── */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));

    /* ─── ⑤ レイヤー順 (kariya・bg1 より前面) ─── */
    z-index: 2;
  }

  /* CTA ボタンを kariya の前面に出して、kariya がボタンの後ろを通る形に */
  .ms-btn-primary{
    position: relative;           /* 念のため(既存のbase CSSでも relative) */
    z-index: 5;                   /* kariya (z-index:1) と book (z-index:2) より前面 */
  }

  /* セクションタイトル */
  .ms-section-title{
    font-size: 20px;          /* SP : h2 = 20px */
    line-height: 1.3;         /* SP : h2 の行間は 1.3 */
    margin-bottom: 0;         /* SP : h2 の下マージンは無し */
  }
  .ms-section-lead{ font-size: 13px; margin-bottom: 30px; padding: 0 16px;}

  /* Points */
  .ms-points__cta{ display: none !important; }   /* SPでは非表示 */
  .ms-points__header,
  .ms-faq__header{ text-align:center; }

  /* h2 後ろの飾り文字 ─ SP時、h2が2行になっても被って見えなくならないように上方向へ移動
     PCでは bottom:20px (h2底辺の20px上) のままで、SPでのみ top基準に切り替え
     PCの20pxずらしに合わせて、SPは10px上にずらす (-25px → -35px) */
  .ms-points__header::before,
  .ms-faq__header::before,
  .ms-booklet__header::before,
  .ms-voice__header::before{
    bottom: auto;
    top: -35px;             /* 飾り文字の上端を、h2上端の35px上に (旧 -25px から10px上昇) */
  }

  /* SP : 飾り文字を10px上にずらした分、上の隙間を30px追加
     ※ Booklet (中身を少しだけご紹介) のみ例外 ─ margin-top を追加しない */
  .ms-points__header,
  .ms-voice__header,
  .ms-faq__header{
    margin-top: 30px;
  }
  .ms-points__header::before,
  .ms-faq__header::before{ font-size: 50px; }  /* SP : 飾り文字 = 50px */
  .ms-points__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ms-point-card{ padding: 20px 18px; }
  .ms-point-card__title{ font-size: 18px; }       /* SP : title = 18px */
  .ms-point-card__text{ font-size: 14px; }        /* SP : text = 14px */

  /* Booklet */
  .ms-booklet__header::before{ font-size: 36px; }   /* SP : 飾り文字を縮小 */
  .ms-booklet .ms-section-lead{ font-size: 14px; margin-bottom: 30px; }
  /* カルーセル : 左右に余裕(16px)を持たせて、記事と吹き出しが切れないように */
  .ms-booklet__carousel{ padding: 24px 16px 30px; }
  .ms-booklet__articles{ height: 260px; }
  .ms-booklet-article{
    width: 80vw;                 /* 88vw → 80vw に縮小して左右の見切れを防止 */
    max-width: 320px;            /* 360px → 320px に縮小 */
    height: 260px;
  }
  /* SP は中央1枚のみ表示 (左右を非表示) */
  .ms-booklet-article.is-prev,
  .ms-booklet-article.is-next{
    opacity: 0;
    pointer-events: none;
    width: 80vw;
    max-width: 320px;
    height: 260px;
    transform: translate(-50%, -50%);
  }
  /* フッターを12pxに */
  .ms-booklet-article__footer{ font-size: 12px; padding: 7px; }
  /* 吹き出し : 負のオフセットを小さくして、カルーセル左端のクリップを防ぐ */
  .ms-booklet-article__bubble{
    width: 80px;                 /* 90px → 80px */
    top: -10px;                  /* -14px → -10px */
    left: -8px;                  /* -16px → -8px : 切れないように内側へ */
  }
  /* SP : カルーセル前後送りボタンを少し小さく、左右端ぎりぎりに */
  .ms-booklet__nav{
    width: 40px;
    height: 40px;
  }
  .ms-booklet__nav svg{ width: 18px; height: 18px; }
  /* 中央カードに被らないよう、カルーセルのパディング分(16px)まで外側へ押し出す */
  .ms-booklet__nav--prev{ left: -16px; }
  .ms-booklet__nav--next{ right: -16px; }

  /* Voice */
  .ms-voice__header::before{ font-size: 50px; }      /* SP : 飾り文字 = 50px */
  .ms-voice .ms-section-lead{ font-size: 14px; margin-bottom: 30px; }
  .ms-voice__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ms-voice-card__title{ font-size: 18px; }          /* SP : 18px */
  .ms-voice-card__tag{ font-size: 12px; }            /* SP : 12px */
  .ms-voice-card__lead-badge{ font-size: 12px; }     /* SP : 12px */
  .ms-voice-card__text{ font-size: 14px; }           /* SP : 14px */

  /* Form */
  /* ── SP : .ms-form-wrap は PC では 2カラム grid (440px + 1fr) で
        .ms-form-intro と .ms-form を左右に並べているが、SP ではこれを
        単純な縦並びの block 配置に切り替える。
        理由 : SPで `display: grid; grid-template-columns: 1fr` のまま
              にしていると、grid item のデフォルト `min-width: auto` の
              影響で内側の HubSpot フォームフィールドが grid item を
              予期せず広げ、コンテンツが視覚的に右へズレてしまう問題が
              発生する。display: block にすればこの問題は解消し、子要素は
              wrap content area の 100% 幅で素直に縦並びで中央配置される。
     ── padding は PC継承の 0 20px (左右対称) のまま。
     ── PC は影響を受けない (display: grid のままで2カラムレイアウト維持)。
  */
  .ms-form-wrap{
    display: block;
    /* gap, grid-template-columns は display: block では無効なため指定不要 */
  }
  /* SP : 縦並びになった .ms-form-intro と .ms-form の間の余白
     (PC の SP gap: 24px 相当を margin-bottom で代替) */
  .ms-form-intro{
    margin-bottom: 24px;
  }
  .ms-form-intro__header{ padding-top: 30px; padding-bottom: 20px; }
  .ms-form-intro__title{ font-size: 22px; }
  .ms-form-intro__text{ font-size: 14px; }
  .ms-form-intro__image{ max-width: 360px; margin: 0 auto; }
  .ms-form-intro__under-image{ max-width: 240px; }
  .ms-form{ padding: 22px 18px; }
  .ms-form__row--split{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* FAQ (SP)
     - 質問文 : 16px (PC 18px から SPで小さく)
     - Q1〜Q5 ラベル : 20px (Mozilla Text フォントは共通CSSで設定済み) */
  .ms-faq-item{ padding: 0 18px; }
  .ms-faq-item__q{ font-size: 16px; gap: 10px; }                  /* 質問文 : SP 16px */
  .ms-faq-item__q::before{ font-size: 20px; min-width: 36px; }    /* Q1 : SP 20px / 幅も20pxに合わせて拡張 */
  .ms-faq-item__q::after{ font-size: 30px; }                       /* 矢印は SP では少し控えめに */
  .ms-faq-item__a{ padding-left: 46px; font-size: 14px;}           /* Q幅36px + gap10px = 46px */

  /* Bottom CTA (SP) */
  .ms-bottom-cta__title{ font-size: 20px; }
  /* SP : PC用のセクション中央配置画像は非表示にし、
          代わりにテキスト部分(.ms-bottom-cta__text)の中央に配置 */
  .ms-bottom-cta::before{ display: none; }
  .ms-bottom-cta__text::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 300px;
    background: url("../img/request_orange.png") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
  /* SP : .ms-bottom-cta__text の ::before(z-index:-1)を内側に閉じる stacking context */
  .ms-bottom-cta__text{ isolation: isolate; }
  .ms-bottom-cta__title-line + .ms-bottom-cta__title-line{ margin-top: 15px; }  /* 2文の間に15px */
  .ms-br-sp{ display: inline; }    /* SP時のみ改行を有効化 */
  .ms-page br.sp{ display: inline; }   /* <br class="sp"> も SP時のみ改行 */
  .ms-bottom-cta__note{ font-size: 12px; }
  .ms-bottom-cta__buttons{ flex-direction: column; gap: 20px; align-items: stretch; padding: 0 20px;}
  .ms-btn-primary-outline,
  .ms-btn-primary--bottom{
    width: 100%;                   /* SP : 画面幅いっぱい(縦並び) */
    font-size: 18px;               /* SP : 18px */
    padding: 20px;                 /* SP : 20px */
  }
}



/* ============================================================
   ▼▼▼ WordPress組み込み時のCSS干渉対策 (追加分) ▼▼▼
   既存テーマの h1/main/.contact-request 等のCSSが、本LP CSSより
   高い specificity を持ち上書きされてしまうケースに対応。
   すべて `.ms-page` スコープ配下なので他ページには影響しません。
============================================================ */

/* ------------------------------------------------------------
   HEROセクション : 画像の重なり問題と bg1の全画面表示問題を修正
   ------------------------------------------------------------
   問題A : <div class="ms-hero__bg-wave"><img src=".../request_bg1.png"></div>
           は width:100vw で配置されているため PC で画面いっぱいに表示される。
   問題B : 上記 <img> は DOM要素 のため、.ms-hero の CSS background-image
           (request_main.png + request_bg1.png) より z軸上で前面に来てしまい、
           bg1 が main の上に被ってしまう。
   対策  : .ms-hero__bg-wave を非表示にする。
           bg1 は .ms-hero の CSS background-image にすでに含まれているため、
           表示上は変わらず、上記2問題が両方解消される。
------------------------------------------------------------ */
.ms-page .ms-hero__bg-wave {
  display: none;
}

/* .ms-hero の背景画像配置を .ms-page スコープで明示的に再宣言
   (specificity を上げて他テーマCSSの上書きを防止)
   レイヤー順 (下→上): background-color #FFFBF9 → bg1 (波形) → main (代表画像) */
.ms-page .ms-hero {
  position: relative;
  background-color: #FFFBF9;
  background-image:
    url("../img/request_main2.png"),
    url("../img/request_bg1.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 95% 100%, center bottom;
  background-size: auto 100%, 100% auto;
  overflow: hidden;
}

/* ------------------------------------------------------------
   HEROタイトル : 「料金もサポートも、他社との違いも、この一冊で。」
   .ms-page プレフィックスだけでは specificity が足りずテーマCSSに
   上書きされ続けるため、font-size 系は !important で確定させる。
   PC : 1行目 36px / 「この一冊で。」86px
------------------------------------------------------------ */
.ms-page .ms-hero__title {
  font-size: 36px !important;
  font-weight: 900;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  color: #2A2A2A;
  white-space: nowrap;
  margin: 0 0 10px;
}
.ms-page .ms-hero__title .big {
  display: block;
  font-size: 86px !important;
  color: var(--color-primary);
  line-height: 1.1 !important;
  margin-top: 4px;
  letter-spacing: 0.02em;
  white-space: normal;
}

/* ------------------------------------------------------------
   VOICEカードのバッジ「諦めかけたタイミングで入会」等 : 14px
   テーマCSSの p / span 系ルールに上書きされていたため確定させる。
   PC : 14px / SP : 12px
------------------------------------------------------------ */
.ms-page .ms-voice-card__lead-badge {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.5;
  display: inline-block;
  background: #FFF0E8;
  color: #000;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------
   VOICEカードのタグ「ご入会後2年でご成婚」等 (3箇所)
   テーマCSSの span 系ルールに上書きされる可能性があるため確定。
   PC : 14px / SP : 12px
------------------------------------------------------------ */
.ms-page .ms-voice-card__tag {
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  background: #fff;
  color: #E54600;
  border: 1px solid #E54600;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------
   ボトムCTAタイトル : 「まずは結婚物語。について知りたい方は…」
   テーマCSSの h2 系ルールに上書きされて小さく表示されていたため確定。
   PC : 25px / SP : 20px
------------------------------------------------------------ */
.ms-page .ms-bottom-cta__title {
  font-size: 25px !important;
  font-weight: 700;
  line-height: 1.8 !important;
  color: #000;
  margin: 0 0 8px;
  position: relative;
}
.ms-page .ms-bottom-cta__title-line {
  display: block;
  font-size: inherit !important;     /* 親 (25px) を継承 */
  line-height: inherit !important;
}

/* ------------------------------------------------------------
   SP対応 : 768px以下でも上記スコープを維持
------------------------------------------------------------ */
@media (max-width: 768px) {
  /* SP : .ms-hero__bg-wave も非表示維持 (SPでも bg1 は .ms-hero CSS背景に含まれる) */
  .ms-page .ms-hero__bg-wave {
    display: none;
  }

  /* SP : .ms-hero の背景画像配置 (kariya + bg1) */
  .ms-page .ms-hero {
    padding: 30px 16px 40px;
    background-color: #FFFBF9;
    background-image:
      url("../img/request_kariya2.png"),
      url("../img/request_bg1.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right -6px bottom, 80% bottom;
    background-size: auto 315px, 200% auto;
    overflow: hidden;
  }

  /* SP : HEROタイトル文字サイズ */
  .ms-page .ms-hero__title {
    font-size: clamp(14px, 4.5vw, 20px) !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    letter-spacing: 0;
  }
  .ms-page .ms-hero__title .big {
    font-size: clamp(38px, 12vw, 48px) !important;
    line-height: 1.1 !important;
  }

  /* SP : VOICEバッジ */
  .ms-page .ms-voice-card__lead-badge {
    font-size: 12px !important;
  }

  /* SP : VOICEタグ「ご入会後2年でご成婚」等 */
  .ms-page .ms-voice-card__tag {
    font-size: 12px !important;
  }

  /* SP : ボトムCTAタイトル */
  .ms-page .ms-bottom-cta__title {
    font-size: 20px !important;
  }
}

/* ------------------------------------------------------------
   スクロールバー対策 (強化版)

   ヘッダー / フッターを除く中央エリアにスクロールバーが出る原因は
   下記いずれか (両方の可能性あり) :

   (a) 既存テーマ側で <main> 等に overflow:auto / 固定height が指定されている
   (b) 前バージョンで .ms-page に overflow-x:hidden を入れていたが、
       CSS仕様により overflow-y が auto に自動計算されてしまう
       (一方の軸が hidden/scroll/auto だと、もう一方の visible は auto になる)
       → .ms-page の祖先に固定heightがあると、.ms-page 内側でスクロール発生

   両方を解消するため :
   ① 想定される親コンテナ (main / .main / .contact-request 等) の overflow を解除
   ② :has() で .ms-page を含む全祖先要素の overflow を解除 (モダンブラウザ用フォールバック)
   ③ .ms-page 自身は overflow:visible に戻す (前バージョンの overflow-x:hidden は解除)

   本CSSは page-lp-test.php でのみ読み込まれるため、上記オーバーライドは
   他ページの <main> や .contact-request には一切影響しません。
------------------------------------------------------------ */

/* ① 主要な親コンテナ候補を一括解除 */
main,
main.main,
.main,
.main.contact-request,
.main.page-contact,
.main.page-contact.contact-request,
.page-contact,
.contact-request {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* ② :has() 対応ブラウザ用 : .ms-page を内包する祖先要素すべての
      overflow と height制限 を一括解除 (どんなクラス構成でも対応可能)
      Chrome 105+, Safari 15.4+, Firefox 121+ */
@supports selector(:has(*)) {
  :has(> .ms-page),
  :has(.ms-page) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ③ .ms-page 自身は overflow:visible に戻す
      (前バージョンの overflow-x:hidden は CSS仕様により overflow-y を
       autoに変えてしまうため、ここで明示的に解除) */
.ms-page {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  height: auto;
  max-height: none;
}


/* ============================================================
   ▼▼▼ ボタンホバー挙動修正 + HubSpot 埋め込みフォームのスタイリング ▼▼▼
============================================================ */

/* ------------------------------------------------------------
   ボタン共通 : テーマ側 a:hover { opacity: 0.7 } 等で半透明に
   なってしまうのを打ち消す。色変化は背景色・filter で表現する。
------------------------------------------------------------ */
.ms-page .ms-btn-primary,
.ms-page .ms-btn-primary:hover,
.ms-page .ms-btn-primary:focus,
.ms-page .ms-btn-primary:active,
.ms-page .ms-btn-primary-outline,
.ms-page .ms-btn-primary-outline:hover,
.ms-page .ms-btn-primary-outline:focus,
.ms-page .ms-btn-primary-outline:active,
.ms-page .ms-points__cta,
.ms-page .ms-points__cta:hover,
.ms-page .ms-points__cta:focus,
.ms-page .ms-points__cta:active {
  opacity: 1 !important;
}

/* 資料請求 (プライマリ・グラデーション) 系ボタン :
   ホバーで色が少し薄くなる + 少し上にずれる。
   - グラデーション色 : 元の #E54600→#F57E49 を1段明るく #F57E49→#FF9970 へ
   - 浮き上がり : translateY(-2px) は既存のままを !important で確定 */
.ms-page .ms-btn-primary:hover,
.ms-page .ms-points__cta:hover {
  background: linear-gradient(to top, #F57E49 0%, #FF9970 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(229, 70, 0, 0.35) !important;
}

/* 来店予約 (アウトラインボタン) :
   既存の「ホバーで塗りつぶし」挙動を廃止し、
   隣接する「資料請求」ボタンと同じ「薄く + 少し上にずれる」挙動に統一。
   - 背景 : 透明 → 淡いピーチ (#FFF4ED)
   - 文字色・枠線 : オレンジのまま維持
   - 浮き上がり : translateY(-2px) */
.ms-page .ms-btn-primary-outline:hover {
  background: #FFF4ED !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(229, 70, 0, 0.15);
}


/* ------------------------------------------------------------
   HubSpot 埋め込みフォーム (.ms-form--hubspot) のスタイリング

   HubSpot が生成する DOM 例 :
     <div class="hbspt-form">
       <form class="hs-form">
         <div class="hs-form-field">
           <label>...<span class="hs-form-required">*</span></label>
           <input class="hs-input">
         </div>
         ...
         <div class="hs-submit">
           <input type="submit" class="hs-button primary large">
         </div>
       </form>
     </div>

   元の .ms-form__* 系スタイルと同等の見た目になるよう、
   .hs-* クラスを .ms-page .ms-form--hubspot スコープ配下で上書き。
------------------------------------------------------------ */

/* ------------------------------------------------------------
   既存テーマ style_hk_form.css 干渉対策

   既存テーマ (style_hk_form.css:65 付近) に下記の "全ページに効く"
   .hs-form-field label グローバルルールがあり、新規LPでは不要なので
   明示的に !important で完全に打ち消す:

     .hs-form-field label, .hs-form-field legend {
       padding-right: 20px;
       width: 50%;                    ← これで姓/名の input が左にズレる
       letter-spacing: 0.1em;
       vertical-align: middle;
       white-space: nowrap;           ← 長文ラベルが折り返らなくなる
       padding-top: 25px;             ← ラベルが下にずれる
       display: flex;
       justify-content: space-between;
     }

   .hs-form-required (テーマ側でオレンジ「必須」バッジ化されている) も
   marriage-story.html と同じ小さな "*" 表示に戻す。

   スコープは .ms-page .ms-form--hubspot 配下のみ。
   既存 page-request.php 等の HubSpot フォームには影響しません。
------------------------------------------------------------ */

/* (1) ラベル (項目名) — theme のレイアウト指定を完全打ち消し */
.ms-page .ms-form--hubspot .hs-form-field > label,
.ms-page .ms-form--hubspot .hs-form-field > label.hs-main-font-element {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;                /* 6px → 0 (ラベル下マージン削除) */
  letter-spacing: normal !important;
  white-space: normal !important;
  vertical-align: baseline !important;
  justify-content: flex-start !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--color-text) !important;
  background: none !important;
}

/* (2) フィールドコンテナ — theme から width:50%, float 等が
       付与されている可能性に備え、block / 100% に揃える */
.ms-page .ms-form--hubspot .hs-form-field {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

/* (3) 入力欄ラッパー (.input) も block 縦並びに */
.ms-page .ms-form--hubspot .hs-form-field .input {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* (4) 「必須」オレンジバッジ → marriage-story.html と同じ小さな "※" に置換
   - 元の "必須" テキストは font-size:0 + color:transparent で完全に不可視化
   - ::before で代わりに "※" (赤) を描画
   - 万一 theme 側で ::after / 背景画像 でバッジを描画していてもキャンセル */
.ms-page .ms-form--hubspot .hs-form-required {
  display: inline !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: transparent !important;        /* "必須" 文字色を透明化 */
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  vertical-align: baseline !important;
  font-size: 0 !important;              /* "必須" テキストを不可視化 */
  line-height: 1 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  text-indent: 0 !important;
  overflow: visible !important;
}
.ms-page .ms-form--hubspot .hs-form-required::before {
  content: "※" !important;
  font-size: 12px !important;
  color: #D9333F !important;            /* 赤色 (※マーク) */
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
}
.ms-page .ms-form--hubspot .hs-form-required::after {
  content: none !important;
  display: none !important;
}

/* 万一 theme が label の ::before / ::after でバッジを描画しているケースの予防 */
.ms-page .ms-form--hubspot .hs-form-field > label::before,
.ms-page .ms-form--hubspot .hs-form-field > label::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* 入力欄 (text / email / tel / number / textarea) */
.ms-page .ms-form--hubspot .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  width: 100% !important;
  border: 1px solid #E6D8CB !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  background: #FAF7F5 !important;
  transition: border-color .2s ease !important;
  box-sizing: border-box !important;
  height: auto !important;
}
.ms-page .ms-form--hubspot .hs-input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
}
.ms-page .ms-form--hubspot .hs-input::placeholder {
  color: #BBBBBB;
}

/* セレクトボックス (都道府県等) */
.ms-page .ms-form--hubspot select.hs-input {
  font-size: 16px !important;       /* iOSでズームしない最小 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 22px center !important;
  background-size: 12px 8px !important;
  padding-right: 40px !important;
}

/* ------------------------------------------------------------
   アンケート (radio / checkbox / booleancheckbox) のデザイン

   ・marriage-story.html のフォーム入力欄と同じ視覚言語に揃える
       枠線 : 1px solid #E6D8CB
       背景 : #FAF7F5
       角丸 : var(--radius-sm)
   ・ブラウザ既定の <ul> のリスト記号・左パディングを完全リセット
     (これが現状「右にズレて崩れて見える」主原因)
   ・長文の選択肢でも綺麗に折り返るように display:flex (旧: inline-flex)
   ・ネイティブの radio/checkbox は accent-color でブランドオレンジ化
   ・選択中はカード自体もハイライト (:has サポートブラウザのみ progressive)

   すべて .ms-page .ms-form--hubspot 配下にスコープしているため、
   このLPページ以外には一切影響しません。
------------------------------------------------------------ */

/* (a) 選択肢リストのコンテナ <ul class="inputs-list"> 
       → ブラウザ既定の "●" と左 padding を消し、縦並びに整える */
.ms-page .ms-form--hubspot ul.inputs-list,
.ms-page .ms-form--hubspot .input ul.inputs-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* (b) 各選択肢の <li> → 余計なマージンを除去
       (旧 .hs-form-checkbox/.hs-form-radio の margin-bottom:6px は (a) の gap に置き換え) */
.ms-page .ms-form--hubspot li.hs-form-checkbox,
.ms-page .ms-form--hubspot li.hs-form-radio,
.ms-page .ms-form--hubspot li.hs-form-booleancheckbox {
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
}

/* (c) 選択肢のラベル(クリック可能なカード)
       marriage-story.html の入力欄と同じ枠線・背景でカード化 */
.ms-page .ms-form--hubspot .hs-form-checkbox-display,
.ms-page .ms-form--hubspot .hs-form-radio-display,
.ms-page .ms-form--hubspot .hs-form-booleancheckbox-display {
  display: flex !important;            /* 旧 inline-flex から変更 (長文ラベルでも改行が綺麗) */
  align-items: flex-start;             /* 複数行に折り返ってもチェック位置を上に固定 */
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: #FAF7F5;
  border: 1px solid #E6D8CB;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  cursor: pointer;
  margin: 0 !important;
  transition: border-color .2s ease, background .2s ease;
}

/* ホバー時 : 枠線をプライマリー色に */
.ms-page .ms-form--hubspot .hs-form-checkbox-display:hover,
.ms-page .ms-form--hubspot .hs-form-radio-display:hover,
.ms-page .ms-form--hubspot .hs-form-booleancheckbox-display:hover {
  border-color: var(--color-primary);
}

/* 選択中 : カード自体をうっすらハイライト
   :has() は 2023年後半以降の主要ブラウザでサポート済み。
   未対応ブラウザでも (e) の accent-color によりネイティブ表示で選択状態は分かる。 */
.ms-page .ms-form--hubspot .hs-form-checkbox-display:has(input:checked),
.ms-page .ms-form--hubspot .hs-form-radio-display:has(input:checked),
.ms-page .ms-form--hubspot .hs-form-booleancheckbox-display:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-lighter);
}

/* (d) 選択肢内の <span> (テキスト部分)
       上の .hs-form-field > label と同じ太字ルールが効かないよう、明示的に上書き */
.ms-page .ms-form--hubspot .hs-form-checkbox-display > span,
.ms-page .ms-form--hubspot .hs-form-radio-display > span,
.ms-page .ms-form--hubspot .hs-form-booleancheckbox-display > span {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

/* (e) ネイティブの radio / checkbox 自体
       - 大きさを統一 (18px)
       - accent-color でブランドのオレンジに */
.ms-page .ms-form--hubspot .hs-form-checkbox-display input[type="checkbox"],
.ms-page .ms-form--hubspot .hs-form-radio-display input[type="radio"],
.ms-page .ms-form--hubspot .hs-form-booleancheckbox-display input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0 !important;          /* 行の頭(1px下)に揃える */
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* (f) 質問の補足テキスト <legend class="hs-field-desc"> */
.ms-page .ms-form--hubspot .hs-field-desc {
  display: block;
  font-size: 12px;
  color: var(--color-text-light);
  margin: 0 0 8px;
  line-height: 1.6;
}

/* (g) SP : 左右パディングを少しだけ詰める */
@media (max-width: 768px) {
  .ms-page .ms-form--hubspot .hs-form-checkbox-display,
  .ms-page .ms-form--hubspot .hs-form-radio-display,
  .ms-page .ms-form--hubspot .hs-form-booleancheckbox-display {
    padding: 10px 12px;
    font-size: 13px;
  }
  .ms-page .ms-form--hubspot .hs-form-checkbox-display > span,
  .ms-page .ms-form--hubspot .hs-form-radio-display > span,
  .ms-page .ms-form--hubspot .hs-form-booleancheckbox-display > span {
    font-size: 13px;
  }
}

/* エラーメッセージ */
.ms-page .ms-form--hubspot .hs-error-msgs,
.ms-page .ms-form--hubspot .hs-error-msg {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  font-size: 12px;
  color: #C0392B;
}

/* 送信ボタン */
.ms-page .ms-form--hubspot .hs-button,
.ms-page .ms-form--hubspot input[type="submit"].hs-button {
  width: 100% !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 16px !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-btn) !important;
  transition: transform .2s ease, background .2s ease !important;
  opacity: 1 !important;
  margin-top: 8px;
}
.ms-page .ms-form--hubspot .hs-button:hover,
.ms-page .ms-form--hubspot input[type="submit"].hs-button:hover {
  background: #F57E49 !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------
   送信ボタンを中央配置
   HubSpot が生成する送信ボタンの DOM 例 :
     <div class="hs_submit hs-submit">
       <div class="actions">
         <input type="submit" class="hs-button primary large">
       </div>
     </div>
   既存テーマ (style_hk_form.css 等) で .hs-submit / .actions に
   text-align:right や float が指定されていると、
   width:100% であってもラッパー側で右寄せになる現象が起きるため、
   ラッパー (.hs_submit / .hs-submit / .actions) を block + 100% +
   text-align:center に揃え、ボタン自体も margin:auto で中央配置する。
   スコープは .ms-page .ms-form--hubspot 配下のみ。
------------------------------------------------------------ */
.ms-page .ms-form--hubspot .hs-submit,
.ms-page .ms-form--hubspot .hs_submit,
.ms-page .ms-form--hubspot .hs-submit .actions,
.ms-page .ms-form--hubspot .hs_submit .actions {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.ms-page .ms-form--hubspot .hs-button,
.ms-page .ms-form--hubspot input[type="submit"].hs-button {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* ------------------------------------------------------------
   送信ボタンが右に寄る現象の追加対策

   既存テーマ側 CSS (style_hk_form.css 等) に下記のような
   .actions input セレクタが残っており、これが `!important` 付き
   かつ lp-test.css より後ろで読み込まれることで `width:100% !important`
   に勝ち残ってしまうケースの保険:

     .actions input {
       width: 300px;
       min-width: 318px;
       margin: 0 auto;
       border-radius: 80px;
       padding: 1.5rem 2rem;
       ...
     }

   同じ「.actions input」セレクタに親 (.ms-page .ms-form--hubspot) を
   足すことで specificity を 1,1 → 3,1 に引き上げ、確実に上書きする。
   スコープは .ms-page .ms-form--hubspot 配下のみのため、
   他ページの HubSpot フォームには影響しません。
------------------------------------------------------------ */
.ms-page .ms-form--hubspot .actions input,
.ms-page .ms-form--hubspot .actions input[type="submit"],
.ms-page .ms-form--hubspot .hs-submit .actions input,
.ms-page .ms-form--hubspot .hs_submit .actions input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* 送信完了メッセージ (HubSpot 既定の "Thank you" 表示) */
.ms-page .ms-form--hubspot .submitted-message {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-align: center;
  padding: 24px 0;
  line-height: 1.7;
}

/* "fieldset" は HubSpot 側の2カラムレイアウトを引き継ぐが、
   不要なネガティブマージン等を打ち消して .ms-form の内側に
   きれいに収まるよう調整 */
.ms-page .ms-form--hubspot fieldset {
  max-width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ms-page .ms-form--hubspot fieldset .hs-form-field {
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}
.ms-page .ms-form--hubspot fieldset.form-columns-2 .hs-form-field {
  width: 100% !important;              /* 50% → 100% (ご年齢などと同じ幅に) */
  float: none !important;
  display: block !important;           /* inline-block → block */
  vertical-align: top;
  margin: 0 0 8px !important;          /* 16px の半分 → 8px (姓→名 などの間隔) */
}
.ms-page .ms-form--hubspot fieldset.form-columns-2 {
  display: block !important;           /* flex → block (横並びをやめる) */
  gap: 0 !important;
  margin: 0 0 8px !important;          /* fieldset 自体も 8px下に (名→セイ の間隔) */
  flex-wrap: nowrap;
}

/* SP : 2カラムは1カラムに折り返す */
@media (max-width: 768px) {
  .ms-page .ms-form--hubspot fieldset.form-columns-2 .hs-form-field {
    width: 100% !important;
  }
}


/* ============================================================
   リッチテキスト & 送信ボタン下のフッターノート

   HubSpot 管理画面で「リッチテキスト」フィールドとして追加された
   - "ご記入ありがとうございました" (リンクなし)
   - "個人情報保護方針" のテキスト (<a> リンクあり)
   をそれぞれ別デザインに振り分け、さらに送信ボタンの下に
   CSS の ::after で marriage-story.html と同じ注意書きを追加する。

   ※ HubSpot の DOM 構造が標準と違う場合に備えて、複数のセレクタを
      OR でつないで網羅的にカバーしている。

   全て .ms-page .ms-form--hubspot 配下にスコープしているため、
   このページ以外には影響しません。
============================================================ */

/* (A) "ご記入ありがとうございました"
       リンクを含まない .hs-richtext / .hs-richtext-element を対象 → 太字 + 中央寄せ
       HubSpot のリッチテキストフィールドが <div class="hs-richtext"> や
       <div class="hs-richtext hs-main-font-element"> として出力される両方をカバー */
.ms-page .ms-form--hubspot .hs-richtext:not(:has(a)),
.ms-page .ms-form--hubspot .hs-richtext-element:not(:has(a)),
.ms-page .ms-form--hubspot div.hs-richtext:not(:has(a)) {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: center !important;
  margin: 20px 0 12px !important;
  line-height: 1.6 !important;
}
/* リッチテキスト内の <p> も中央 + 太字 (theme が <p> にCSSをかけている場合に備え) */
.ms-page .ms-form--hubspot .hs-richtext:not(:has(a)) p,
.ms-page .ms-form--hubspot .hs-richtext:not(:has(a)) > * {
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* (B) フォーム内のすべてのリンク → オレンジ + オレンジ下線
       個人情報保護方針 のリンクがリッチテキスト内・同意確認内・直書きの
       どこにあっても拾えるよう、フォーム全体の <a> を対象にする */
.ms-page .ms-form--hubspot a,
.ms-page .ms-form--hubspot .hs-richtext a,
.ms-page .ms-form--hubspot .legal-consent-container a,
.ms-page .ms-form--hubspot form a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-primary) !important;
  text-underline-offset: 2px;
}
.ms-page .ms-form--hubspot a:hover,
.ms-page .ms-form--hubspot .hs-richtext a:hover,
.ms-page .ms-form--hubspot .legal-consent-container a:hover {
  color: var(--color-primary-dark) !important;
  text-decoration-color: var(--color-primary-dark) !important;
}

/* (C) 送信ボタン下のフッターノート (CSS で擬似的に挿入)
       marriage-story.html の .ms-form__footer と同等のテキスト */
.ms-page .ms-form--hubspot .hs-submit::after,
.ms-page .ms-form--hubspot .hs_submit::after {
  content: "※記載事項は、ご質問いただいた件のお見積もりや、関連項目案内のため、ご連絡を差し上げます。";
  display: block;
  text-align: center;
  font-size: 11px;
  color: #888888;
  margin-top: 14px;
  line-height: 1.7;
  padding: 0 4px;
}

/* ============================================================
   SP : アンケート枠が右にズレて見える現象の修正
   - HubSpot 生成の各種ラッパー (.hbspt-form, form, .hs-form) や
     <ul class="inputs-list"> に既定の padding-left / margin-left が
     残っているケースを全て 0 にして、左端から表示させる
   - .ms-form-wrap / .ms-form を 100% 幅 + 0 オフセットに固定
============================================================ */
@media (max-width: 768px) {
  /* フォーム全体のコンテナを100%幅 + 中央配置 */
  .ms-page .ms-form-wrap,
  .ms-page .ms-form,
  .ms-page .ms-form--hubspot,
  .ms-page .ms-form--hubspot > form,
  .ms-page .ms-form--hubspot .hbspt-form,
  .ms-page .ms-form--hubspot .hs-form,
  .ms-page .ms-form--hubspot .hs_cos_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* HubSpot 内側のラッパーが padding-left を持っていると右にズレる */
  .ms-page .ms-form--hubspot > form,
  .ms-page .ms-form--hubspot .hbspt-form,
  .ms-page .ms-form--hubspot .hs-form,
  .ms-page .ms-form--hubspot .hs-form-field,
  .ms-page .ms-form--hubspot .hs-form-field .input,
  .ms-page .ms-form--hubspot ul.inputs-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* アンケートの選択肢カード自体は中央寄せにせず左端から幅100%で */
  .ms-page .ms-form--hubspot .hs-form-checkbox-display,
  .ms-page .ms-form--hubspot .hs-form-radio-display,
  .ms-page .ms-form--hubspot .hs-form-booleancheckbox-display {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   2) POINT セクション : オレンジ背景装飾 (request_orange.png)
   - 「結婚物語。はこんな方に向いています」セクションの装飾画像
   - 装飾要素のため aria-hidden="true" + pointer-events:none
   - 既存の .ms-points* スコープのみに影響、他ページ・他セクションへの影響なし
   - PC : POINT 4 (2行目1列目) の少し左にズレた位置 (475 × 445px)
   - SP : POINT 2 と POINT 3 の間、中心より 20px 左 (475 × 445px)
============================================================ */

/* 画像が左方向へはみ出ても横スクロールバーが出ないように
   ※ .ms-points__cta は position:fixed のため overflow の影響を受けない */
.ms-points{
  overflow: hidden;
}

/* グリッド全体を相対基準に → 画像位置をカードの並びに追従させる */
.ms-points__grid{
  position: relative;
}

/* カードを背景画像より前面に表示 */
.ms-points__grid .ms-point-card{
  position: relative;
  z-index: 1;
}

/* オレンジ背景画像本体 */
.ms-points__bg-orange{
  position: absolute;
  width: 475px;
  height: 445px;
  pointer-events: none;
  user-select: none;
  z-index: 0;

  /* PC : POINT 4 (2行目1列目) の中心から 120px 左へ
     - left: 100% / 6 = 3列グリッドの 1列目中央
     - top : 75%      = 2行グリッドの 2行目中央 */
  left: calc(100% / 6);
  top: 75%;
  transform: translate(calc(-50% - 120px), -50%);
}

.ms-points__bg-orange img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* SP : POINT 2 と POINT 3 の間、中央より 20px 左
   6行 × 1列グリッドで POINT 2 下端 = POINT 3 上端 = 高さの 2/6 = 1/3 */
@media (max-width: 768px){
  .ms-points__bg-orange{
    left: 50%;
    top: calc(100% / 3);
    transform: translate(calc(-50% - 20px), -50%);
  }
}