@charset "UTF-8";

/* =========================================
   ベース設定・リセット
   ========================================= */
*,
*::before,
*::after{ box-sizing:border-box;}

html{ scroll-behavior:smooth;}

body{ margin:0; padding:0; background:#fffdea; color:#333333; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; font-weight:500; line-height:1.6; -webkit-text-size-adjust:100%;}

img{ display:block; max-width:100%; height:auto; border:0;}

ul{ margin:0; padding:0; list-style:none;}

h1,
h2,
p{ margin:0;}

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

/* =========================================
   CTAボタン共通：hoverで押し込む（凹む）挙動
   ========================================= */
.p-fv__navBtn,
.p-fv__cta,
.p-docs__link,
.p-fixedBar__btn{ display:block; transform:translateY(0); transition:transform .12s ease, filter .12s ease; will-change:transform;}

.p-fv__navBtn:hover,
.p-fv__cta:hover,
.p-docs__link:hover,
.p-fixedBar__btn:hover{ transform:translateY(3px); filter:brightness(.97);}

.p-fv__navBtn:active,
.p-fv__cta:active,
.p-docs__link:active,
.p-fixedBar__btn:active{ transform:translateY(5px); filter:brightness(.93);}

/* =========================================
   共通レイアウト（PCカンプ幅1280pxを上限に中央寄せ）
   1280pxを超える画面では、左右の余白はbodyの単色（#fffdea）がそのまま出る
   ========================================= */
.l-main{ overflow:hidden;}

.p-sec__inner,
.p-fv__inner,
.p-docs__inner,
.p-contact__inner{ max-width:1280px; margin-inline:auto;}

.p-sec__img{ width:100%;}

/* =========================================
   01 ファーストビュー
   ========================================= */
.p-fv__inner{ position:relative;}

.p-fv__bg{ width:100%;}

/* ヘッダーロゴ */
.p-fv__logo{ position:absolute; top:0.875%; left:1.875%; width:16.328%; margin:0; line-height:1;}

.p-fv__logo img{ width:100%;}

/* ヘッダー内CTAボタン */
.p-fv__navBtn{ position:absolute; top:1%; width:26.641%;}

.p-fv__navBtn img{ width:100%;}

.p-fv__navBtn--contact{ left:46.094%;}

.p-fv__navBtn--download{ left:72.422%;}

/* ファーストビュー下部CTAボタン */
.p-fv__cta{ position:absolute; top:86.5%;}

.p-fv__cta img{ width:100%;}

.p-fv__cta--contact{ left:14.844%; width:33.359%;}

.p-fv__cta--download{ left:53.672%; width:33.281%;}

/* =========================================
   05 お役立ち資料
   ========================================= */
.p-docs__inner{ background-image:url("img/05_pc_bg.webp"); background-repeat:no-repeat; background-position:center top; background-size:100% 100%; background-color:#951c13; padding:clamp(34px, 6.64vw, 85px) 0;}

.p-docs__title{ position:relative; color:#ffffff; font-size:clamp(22px, 3.75vw, 48px); font-weight:900; line-height:1; letter-spacing:.04em; text-align:center; text-shadow:0 2px 6px rgba(0,0,0,.25);}

.p-docs__title::after{ content:""; display:block; width:25.94%; height:2px; margin:clamp(7px, 1.17vw, 15px) auto 0; background:#ffffff;}

.p-docs__list{ display:flex; justify-content:center; gap:3.75%; margin-top:clamp(26px, 4.61vw, 59px);}

.p-docs__item{ width:22.5%;}

.p-docs__link{ display:block;}

.p-docs__img{ width:100%;}

/* =========================================
   07 無料オンライン説明会・資料請求フォーム
   ========================================= */
.p-contact__inner{ background-image:url("img/07_pc_bg.webp"); background-repeat:no-repeat; background-position:center top; background-size:100% 100%; background-color:#a32016; padding:clamp(26px, 4.61vw, 59px) 0 clamp(32px, 5.47vw, 70px);}

.p-contact__panel{ width:46.875%; margin-inline:auto; padding:2.188% 4.453% 2.344%; border-radius:clamp(12px, 1.875vw, 24px); background:rgba(255,255,255,.8);}

.p-contact__title{ margin:0 -1.85% clamp(14px, 2.03vw, 26px); color:#6c130d; font-size:clamp(17px, 2.578vw, 33px); font-weight:900; line-height:1.15; text-align:center; letter-spacing:.02em; white-space:nowrap;}

/* スパム対策用の隠し項目（画面にもスクリーンリーダーにも出さない） */
.p-form__honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.p-form__group{ margin-bottom:clamp(9px, 1.33vw, 17px);}

.p-form__label{ display:block; margin-bottom:clamp(4px, .7vw, 9px); color:#453c39; font-size:clamp(11px, 1.094vw, 14px); font-weight:500; line-height:1;}

.p-form__row{ display:flex; gap:2.88%;}

.p-form__col{ flex:1 1 0; min-width:0;}

/* ラジオ・チェックボックス */
.p-form__choice{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:clamp(3px, .39vw, 5px); height:clamp(34px, 3.125vw, 40px); padding:0 clamp(6px, .86vw, 11px); border:2px solid #b3b3b3; border-radius:6px; background:#ffffff; cursor:pointer; transition:border-color .2s ease, background-color .2s ease;}

.p-form__check{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;}

.p-form__box{ flex:0 0 auto; position:relative; width:clamp(14px, 1.563vw, 20px); height:clamp(14px, 1.563vw, 20px); border:2px solid #b3b3b3; border-radius:4px; background:#ffffff; transition:border-color .2s ease, background-color .2s ease;}

.p-form__box::after{ content:""; position:absolute; top:8%; left:32%; width:30%; height:62%; border:solid #ffffff; border-width:0 3px 3px 0; transform:rotate(45deg) scale(0); transition:transform .2s ease;}

.p-form__choiceText{ flex:1 1 auto; min-width:0; color:#333333; font-size:clamp(13px, 1.72vw, 22px); font-weight:700; line-height:1.2; text-align:center; letter-spacing:.02em; white-space:nowrap;}

.p-form__choiceText--tight{ font-size:clamp(11px, 1.484vw, 19px); letter-spacing:0; text-align:left;}

.p-form__choiceText--tighter{ font-size:clamp(9px, 1.094vw, 14px); letter-spacing:0; text-align:left;}

.p-form__check:checked + .p-form__box{ border-color:#d3a954; background:#d3a954;}

.p-form__check:checked + .p-form__box::after{ transform:rotate(45deg) scale(1);}

.p-form__choice:has(.p-form__check:checked){ border-color:#d3a954; background:#fbf6ee;}

.p-form__check:focus-visible + .p-form__box{ outline:2px solid #6c130d; outline-offset:2px;}

/* テキスト入力 */
.p-form__input{ display:block; width:100%; height:clamp(32px, 2.734vw, 35px); padding:0 10px; border:2px solid #b3b3b3; border-radius:6px; background:#ffffff; color:#333333; font-family:inherit; font-size:16px; line-height:1.2;}

.p-form__input:focus{ border-color:#d3a954; outline:none;}

/* 送信ボタン */
.p-form__submit{ display:block; width:100%; height:clamp(44px, 4.063vw, 52px); margin-top:clamp(12px, 1.56vw, 20px); border:0; border-radius:999px; background:linear-gradient(90deg, #a80b33 0%, #c9174f 50%, #a80b33 100%); box-shadow:0 5px 0 #7d0725, 0 8px 14px rgba(90,10,10,.3); color:#ffffff; font-family:inherit; font-size:clamp(13px, 1.72vw, 22px); font-weight:900; letter-spacing:.02em; cursor:pointer; transform:translateY(0); transition:transform .12s ease, box-shadow .12s ease;}

.p-form__submit:hover{ transform:translateY(3px); box-shadow:0 2px 0 #7d0725, 0 4px 8px rgba(90,10,10,.3);}

.p-form__submit:active{ transform:translateY(5px); box-shadow:0 0 0 #7d0725, 0 2px 5px rgba(90,10,10,.3);}

/* 注記 */
.p-form__note{ display:flex; justify-content:flex-start; gap:6%; margin-top:clamp(12px, 1.56vw, 20px); padding-left:2.5%; color:#4a2b26; font-size:clamp(10px, 1.016vw, 13px); font-weight:700; line-height:1.4;}

.p-form__noteItem::before{ content:"●"; margin-right:.2em;}

/* =========================================
   追従CTAバー（PC・SP共通／ファーストビューを通過してから表示）
   PCの見た目はver1の白帯バナー（キャッチ＋2ボタン）に合わせている
   body下余白156px＝PC時のバー実測高さ（枠線1＋上余白12＋キャッチ34＋間隔8＋ボタン86＋下余白14）
   ========================================= */
body{ padding-bottom:156px;}

.p-fixedBar{ display:flex; align-items:flex-end; justify-content:center; position:fixed; right:0; bottom:0; left:0; z-index:100; transform:translateY(110%); opacity:0; visibility:hidden; transition:transform .35s ease, opacity .35s ease, visibility .35s ease;}

.p-fixedBar.is-visible{ transform:translateY(0); opacity:1; visibility:visible;}

/* PC：白帯の中にキャッチと2ボタンを縦積み。カンプ幅1280pxを上限に中央寄せ */
.p-fixedBar__pc{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(4px, .6vw, 8px); width:100%; max-width:1280px; padding:clamp(8px, 1vw, 12px) 24px clamp(10px, 1.2vw, 14px); background:#ffffff; border-top:1px solid #d8d8d8; box-shadow:0 -4px 12px rgba(0,0,0,.08);}

.p-fixedBar__catch{ width:auto; max-width:100%; height:clamp(20px, 2.4vw, 34px);}

.p-fixedBar__btns{ display:flex; align-items:center; justify-content:center; gap:clamp(16px, 2.5vw, 32px); width:100%;}

.p-fixedBar__btn{ width:clamp(240px, 31vw, 400px);}

.p-fixedBar__btn img{ width:100%;}

/* SP用の1枚バナーはPCでは出さない */
.p-fixedBar__btn--sp{ display:none;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px){

  /* 01 ファーストビュー：SP版は画像にロゴが入っているため重ねる要素を非表示 */
  .p-fv__logo,
  .p-fv__navBtn,
  .p-fv__cta{ display:none;}

  /* 05 お役立ち資料 */
  .p-docs__inner{ background-image:url("img/05_sp_bg.webp"); padding:13.87vw 0 11.73vw;}

  .p-docs__title{ font-size:9.6vw; letter-spacing:0;}

  .p-docs__title::after{ width:89.33%; margin-top:4.8vw;}

  .p-docs__list{ flex-direction:column; align-items:center; gap:11.47vw; margin-top:13.87vw;}

  .p-docs__item{ width:77.07%;}

  /* 07 フォーム */
  .p-contact__inner{ background-image:url("img/07_sp_bg.webp"); padding:8vw 0 10.67vw;}

  .p-contact__panel{ width:89.33%; padding:5.33vw 4vw 5.33vw; border-radius:16px;}

  .p-contact__title{ margin:0 0 5.07vw; font-size:6.93vw; line-height:1.4; white-space:normal;}

  .p-form__group{ margin-bottom:3.2vw;}

  .p-form__label{ margin-bottom:1.6vw; font-size:3.47vw;}

  .p-form__row{ gap:3.28%;}

  .p-form__choice{ height:36px; gap:3px; padding:0 5px;}

  .p-form__box{ width:16px; height:16px;}

  .p-form__box::after{ border-width:0 2px 2px 0;}

  .p-form__choiceText{ font-size:4.27vw;}

  .p-form__choiceText--tight{ font-size:3.07vw;}

  .p-form__choiceText--tighter{ font-size:2.35vw;}

  .p-form__input{ height:36px; font-size:16px;}

  .p-form__submit{ height:46px; margin-top:4.27vw; font-size:3.73vw;}

  .p-form__note{ flex-direction:column; align-items:flex-start; gap:1.6vw; margin-top:4.27vw; padding-left:4%; font-size:3.2vw;}

  /* 追従CTAバー：SPは1枚バナー画像（1143×268）に差し替え、読み込み直後から常時表示（JSのis-visibleに依存しない）
     バー高さ＝画面幅×268/1143＝23.45vw。body下余白も同値にして最下部が隠れないようにする */
  body{ padding-bottom:23.45vw;}

  .p-fixedBar{ transform:translateY(0); opacity:1; visibility:visible;}

  .p-fixedBar__pc{ display:none;}

  .p-fixedBar__btn--sp{ display:block; width:100%;}

}