@charset "UTF-8";
/* =========================================================
   WEB集客丸投げLP
   フルワイド / レスポンシブ（モバイルファースト）
   ========================================================= */

:root{
  --red:#dc0000;
  --red-dark:#b60000;
  --frame-red:#d93534;
  --green:#13ae67;
  --green-dark:#0e9459;
  --orange:#ff7e10;
  --orange-2:#ff9d10;
  --navy:#113f63;
  --navy-2:#1b5178;
  --cream:#fffdee;
  --yellow:#ffff00;
  --yellow-line:#f9eb4d;
  --tri-gray:#bccdd7;
  --text:#1a1a1a;
  --text-sub:#444;
  --gray-bg:#f6f6f6;

  /* 本文：元LPと同じフォントスタック（游ゴシック系） */
  --gothic:"Yu Gothic Medium","游ゴシック Medium","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
  /* 見出し：元LPの見出し画像（背伸びゴシック=M+系）に近い M PLUS 1p */
  --display:"M PLUS 1p","Yu Gothic","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
  --mincho:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  /* 数字・英字用（電話番号やQ&Aの記号など） */
  --latin:"Jost","Helvetica Neue",Arial,sans-serif;

  --inner:1120px;
  --fixbar-h:88px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--gothic);
  color:var(--text);
  background:#fff;
  line-height:1.75;
  font-size:16px;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  padding-bottom:calc(var(--fixbar-h) + 8px);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.inner{
  width:min(100% - 32px, var(--inner));
  margin-inline:auto;
}
.sec{ padding:clamp(44px,7vw,90px) 0; }
.red{ color:var(--red); }

/* 見出しは表示用フォント（M PLUS 1p）で統一 */
.ttl-onayami,.ttl-line,.ttl-slash,.ttl-faq,.ttl-company,
.dl-ttl,.know-ttl span,.works__tag span,.works__ttl,
.result-head h2,.solve__main,.form-head__band,.form-head__bubble,
.form-head__soshite,.lastcta__ttl,.hero__badges li,
.rcard__ttl{
  font-family:var(--display);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.sp-only{ display:inline; }
.pc-only{ display:none; }
@media (min-width:768px){
  .sp-only{ display:none; }
  .pc-only{ display:inline; }
}
/* タブレット（1023px）まで有効にしたい改行用 */
.sptab-only{ display:inline; }
@media (min-width:1024px){
  .sptab-only{ display:none; }
}

/* ---------------------------------------------------------
   アイコン類（CSSで描画）
   --------------------------------------------------------- */
/* 丸チェック（赤） */
.ck{
  flex:none;
  position:relative;
  width:1.55em; height:1.55em;
  border:2px solid var(--red);
  border-radius:50%;
  margin-top:.15em;
}
.ck::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:.72em; height:.38em;
  border-left:2.5px solid var(--red);
  border-bottom:2.5px solid var(--red);
  transform:translate(-50%,-68%) rotate(-45deg);
}
/* 大きなチェック（赤・線のみ）— 文字サイズに合わせて拡縮し、
   2本の線を明示的に配置してインクの重心をボックス中央に合わせる */
.ck-lg{
  flex:none;
  position:relative;
  width:1.15em; height:1.3em;
}
.ck-lg::before,
.ck-lg::after{
  content:"";
  position:absolute;
  background:var(--red);
  border-radius:.02em;
  transform-origin:left center;
}
/* 短い左下の線（始点：左下） */
.ck-lg::before{
  left:.02em; top:.66em;
  width:.44em; height:.16em;
  transform:rotate(45deg);
}
/* 長い右上の線（::before の終点から続けて描く） */
.ck-lg::after{
  left:.29em; top:.95em;
  width:.92em; height:.16em;
  transform:rotate(-55deg);
}
/* 電話アイコン（白丸＋受話器） */
.ico-tel{
  display:inline-block;
  width:1.1em; height:1.1em;
  margin-right:.35em;
  vertical-align:-.15em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='%23ffffff'/%3E%3Cpath fill='%23ff7e10' transform='translate(96 96) scale(0.625)' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* =========================================================
   ヒーロー
   ========================================================= */
/* 旧 .cta-area が持っていたFV下端の余白を .hero に移管（clamp値は旧 padding と同値） */
.hero{ position:relative; overflow:hidden; background:#fff; padding-bottom:clamp(38px,6vw,70px); }
.hero__topbar{
  position:relative;
  z-index:2;
  background:var(--red);
  color:#fff;
  text-align:center;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(16px,4.4vw,26px);
  line-height:1.4;
  letter-spacing:.02em;
  padding:clamp(9px,2.2vw,16px) 0;
}
.hero__body{
  position:relative;
  background:transparent;
  /* 下のスマホ帯とテキストを重ねてFVの高さを抑える */
  padding-bottom:clamp(30px,8vw,80px);
}
/* FV背景のスマホ帯（img/hero-phones*.jpg＝実機モックアップ4台の帯・1090x520）
   画像側に淡さを焼き込んでいるので、CSSでopacityは掛けない。
   濃さを変えたいときは img/hero-phones-top.jpg を作り直す（img/_source が原本）

   高さ 47.7vw = 画像の縦横比(1090/520)。SPでは4台がちょうど画面幅に収まる。
   520pxで打ち止めにして、それより広い画面は repeat-x で横に足す
   （スマホが巨大化するのを防ぐため） */
.hero__phones{
  height:min(47.7vw,520px);
  background-position:center top;
  background-size:auto 100%;
  background-repeat:repeat-x;
  pointer-events:none;
}
.hero__phones--top{ background-image:url("../img/hero-phones-top.jpg"); }
.hero__phones--bottom{ background-image:url("../img/hero-phones.jpg"); }
/* PCは右にフォームが載り、上下の帯が中央で重なって密になりすぎる。
   スマホを小さくし、上帯も淡い方の画像に落として背景に沈める */
@media (min-width:1024px){
  .hero__phones{ height:380px; }
  .hero__phones--top{ background-image:url("../img/hero-phones.jpg"); }
}
/* 文字に近い側は強めにフェードさせる */
.hero__phones--top{
  -webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 92%);
  mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 92%);
}
.hero__phones--bottom{
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,rgba(0,0,0,.45) 45%,#000 88%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,rgba(0,0,0,.45) 45%,#000 88%);
}
/* スマホ帯はテキストの背面に敷く（反転なし・元LPと同じ向き） */
/* 上：一部を画面外に出して見切れさせる */
.hero__phones--top{
  position:absolute;
  top:0;
  left:0; right:0;
  z-index:0;
}
/* 下：CTAボタンに重なる位置まで下げ、下端を見切れさせる */
.hero__phones--bottom{
  position:absolute;
  left:0; right:0;
  bottom:0;
  z-index:0;
}

/* FVの2カラム（左=コピー／右=フォーム）。1024px未満は縦並び */
.hero__grid{
  position:relative;
  z-index:2;
  /* メインコピーを大きく見せるため左右の余白を詰める */
  width:min(100% - 12px, 1120px);
}
.hero__content{
  text-align:center;
  padding:clamp(12px,3vw,30px) 0 0;
  position:relative;
  z-index:2;
}
.hero__lead{
  font-family:var(--mincho);
  font-weight:700;
  color:var(--red);
  font-size:clamp(23px,6.2vw,44px);
  line-height:1.36;
  letter-spacing:.02em;
  text-shadow:0 0 10px #fff, 0 0 18px #fff, 0 0 26px #fff;
}
.hero__badges{
  display:flex;
  flex-wrap:nowrap; /* 4本を必ず1行に収める */
  justify-content:center;
  gap:clamp(2px,.6vw,6px);
  margin:clamp(8px,1.6vw,14px) 0 clamp(10px,2vw,22px);
}
/* PCは右にフォームがあり左カラムが狭い。広げすぎると1本が間延びするので上限を置く */
@media (min-width:768px){
  .hero__badges{ max-width:640px; margin-inline:auto; }
}
/* 4色の矢羽根リボン。左端を凹ませ右端を尖らせて、流れているように見せる */
.hero__badges li{
  --chev:clamp(7px,1.6vw,13px); /* 矢羽根の食い込み量 */
  flex:1 1 0; /* 4本を等幅に */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.34em;
  color:#fff;
  font-weight:700;
  font-size:clamp(11px,3.05vw,21px);
  line-height:1.2;
  letter-spacing:.01em;
  white-space:nowrap;
  padding:.5em calc(var(--chev) + .3em);
  clip-path:polygon(0 0, calc(100% - var(--chev)) 0, 100% 50%, calc(100% - var(--chev)) 100%, 0 100%, var(--chev) 50%);
}
/* 丸に囲まれたチェック。画像を足さずに済むようSVGを直接埋めている */
.hero__badges li::before{
  content:"";
  flex:none;
  width:1.05em; height:1.05em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M7.4 12.6l3.1 3.1 6.1-6.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero__badges li:nth-child(1){ background:var(--red); }
.hero__badges li:nth-child(2){ background:#f28100; }
.hero__badges li:nth-child(3){ background:#00a63f; }
.hero__badges li:nth-child(4){ background:#0068b7; }
/* 極小幅（〜359px）では4本が入りきらないので文字と食い込みを詰める */
@media (max-width:359px){
  .hero__badges li{
    --chev:6px;
    font-size:10px;
    padding-inline:calc(var(--chev) + .15em);
  }
}
.hero__catch{
  margin:0; /* h1 のデフォルト余白を打ち消す（見た目は変更なし） */
  font-family:var(--mincho);
  font-weight:700;
  color:var(--red);
  line-height:1.1;
  text-shadow:0 0 10px #fff, 0 0 20px #fff;
}
.hero__catch-sm{
  display:block;
  font-size:clamp(31px,8.5vw,60px);
  letter-spacing:.03em;
}
.hero__catch-lg{
  display:block;
  font-size:clamp(88px,23.5vw,170px);
  line-height:1.1;
  letter-spacing:.06em;
  /* 圏点(・・・)用に上へ約0.45em分の余白が確保されるため、その一部を詰めて
     「丸投げ」を持ち上げる。詰めすぎると圏点が「全てを」に当たるので注意 */
  margin:-.15em 0 .02em;
}
.dotted{
  -webkit-text-emphasis:filled dot var(--red);
  text-emphasis:filled dot var(--red);
  -webkit-text-emphasis-position:over right;
  text-emphasis-position:over right;
}
.hero__catch-md{
  display:block;
  font-size:clamp(42px,11.4vw,82px);
  letter-spacing:.05em;
}

/* 「しませんか？」の下の価格コピー。
   斜線（＼ ／）は文字ではなく .lastcta__ttl と同じ手法でCSSの線として描く
   （フォント依存で太さや位置がブレないようにするため） */
.hero__price{
  margin:clamp(10px,1.8vw,20px) 0 0;
  font-family:var(--mincho);
  font-weight:700;
  color:var(--red);
  font-size:clamp(19px,5vw,34px);
  line-height:1.2;
  letter-spacing:.04em;
  text-shadow:0 0 10px #fff, 0 0 18px #fff, 0 0 26px #fff;
}
.hero__price span{
  position:relative;
  display:inline-block;
  padding:0 .8em;
}
.hero__price span::before,
.hero__price span::after{
  content:"";
  position:absolute;
  top:50%;
  width:3px;
  height:1.15em;
  background:var(--red);
  border-radius:999px;
}
.hero__price span::before{ left:.18em; transform:translateY(-50%) rotate(-22deg); }
.hero__price span::after{ right:.18em; transform:translateY(-50%) rotate(22deg); }
/* 金額だけ一段大きく */
.hero__price em{ font-style:normal; font-size:1.12em; letter-spacing:.01em; }

/* ---------------------------------------------------------
   FVのフォーム（白いカード）
   項目・送信先はページ下部（#contact）のフォームと同じ
   --------------------------------------------------------- */
.hero__form{
  position:relative;
  z-index:2;
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 26px rgba(0,0,0,.18);
  padding:clamp(14px,3vw,20px);
  margin:clamp(22px,4vw,34px) auto 0;
  max-width:520px;
  text-align:left;
}

/* カード幅に合わせて、下部フォームより一段コンパクトにする */
.hero__form .myForm{
  max-width:none;
  /* 1項目目（会社名）の上に余白を取る */
  margin:clamp(8px,1.6vw,16px) 0 0;
}
.hero__form .myForm .input_unit{ margin-bottom:10px; }
.hero__form .myForm .label_frame{ margin-bottom:.35em; }
.hero__form .myForm .form_input_label{ font-size:14px; }
.hero__form .myForm input[type="text"],
.hero__form .myForm input[type="email"],
.hero__form .myForm input[type="tel"],
.hero__form .myForm select{
  /* 16px未満にするとiOSで自動ズームが入るためサイズは維持し、余白だけ詰める */
  padding:9px 12px;
}
.hero__form .myForm select{ padding-right:34px; }
.hero__form .myForm .form_input_submit{
  max-width:none;
  /* 上は広めに、下は無料相談CTAとひとかたまりに見えるよう詰める */
  margin:clamp(28px,4vw,36px) 0 clamp(12px,1.6vw,16px);
}
.hero__form .myForm .form_input_submit::before{
  font-size:clamp(19px,4.6vw,21px);
  padding:.8em 2.6em .8em 1.1em;
}
.hero__form .myForm .form_input_submit::after{ font-size:clamp(19px,4.6vw,21px); }

@media (min-width:1024px){
  .hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(330px,27vw,390px));
    /* フォームカードは下端をそろえる（中央寄せだと視覚の重心より上に見える） */
    align-items:end;
    gap:clamp(18px,2.4vw,40px);
    /* 他セクションと左右の基準線を揃える */
    width:min(100% - 32px, var(--inner));
  }
  .hero__form{ margin:0; max-width:none; }
  /* コピー側は下端揃えから外して上に固定する。
     フォームカードに無料相談CTAが入ってコピーより背が高くなったため、
     end のままだと差分（実測68px）ぶん「丸投げ」が丸ごと下がってしまう */
  .hero__content{ align-self:start; }
}

/* タブレット以下：フォームの枠の上に余白を広めに取り、
   フォームがあるぶんFVの「資料ダウンロードはこちら」ボタンは出さない */
@media (max-width:1023px){
  .hero__form{ margin-top:clamp(34px,7vw,60px); }
  .hero .cta--dl{ display:none; }
}

/* CTAボタン（FVフォームカード内・下部「お急ぎの方はこちらから」で共用） */
.cta-group{ display:flex; flex-direction:column; gap:clamp(10px,1.8vw,18px); }

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  border-radius:12px;
  padding:clamp(12px,2.4vw,20px) clamp(12px,2.5vw,26px);
  color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.13);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta:hover{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.13); filter:brightness(1.04); }
.cta--dl{ background:var(--green); }
.cta--tel{ background:var(--orange); }
.cta__txt{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(18px,4.7vw,26px);
  line-height:1.28;
  text-align:center;
  white-space:nowrap;
}
.cta__txt small{
  display:block;
  font-size:clamp(12.5px,3.4vw,18px);
  font-weight:400;
  margin-top:.12em;
  white-space:nowrap;
}
.cta__icon{
  flex:none;
  position:relative;
  width:clamp(28px,7vw,44px);
  height:clamp(28px,7vw,44px);
  background:#fff;
  border-radius:50%;
}
.cta__icon::before{
  content:"";
  position:absolute; left:44%; top:50%;
  width:.28em; height:.28em;
  border-top:3px solid var(--green);
  border-right:3px solid var(--green);
  font-size:clamp(28px,7vw,44px);
  transform:translate(-50%,-50%) rotate(45deg);
}
/* 電話CTA：「相談無料」を左端に置き、上下左の余白を揃える
   「相談無料」は少し右へ（左余白を広めに）、電話番号は少し左へ寄せる */
.cta--tel{
  justify-content:flex-start;
  gap:clamp(10px,1.6vw,22px);
  padding:clamp(10px,2vw,16px);
  padding-left:clamp(14px,2vw,26px);
}
.cta--tel .cta__tag{
  flex:none;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
  color:var(--orange);
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(16px,4.2vw,24px);
  line-height:1.15;
  text-align:center;
  border-radius:8px;
  padding:.34em .5em;
}
.cta--tel .cta__txt{ flex:1 1 auto; text-align:left; padding-left:clamp(4px,1.5vw,14px); }
/* 900〜1023pxはボタン幅に対して電話番号が長く、余白を取ると収まらない */
@media (min-width:900px) and (max-width:1023px){
  .cta--tel .cta__txt{ padding-left:0; }
}
.cta__num{
  display:block;
  font-family:var(--latin);
  font-size:clamp(24px,6.4vw,38px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* FVフォームカード内の無料相談CTA（資料DLボタンの下）
   カードは最も狭いとき content 290px（1024px時）しかないため、
   下部CTAより一段小さい .cta--compact で 052-386-0521 が折れないようにする。
   ※ .cta--tel より後に書くこと（同一詳細度なので順序で勝つ） */
.hero__form-cta{ margin:0; }
.cta--compact{
  padding:clamp(9px,1.6vw,12px);
  padding-left:clamp(11px,1.6vw,16px);
  gap:clamp(8px,1.2vw,12px);
  box-shadow:0 3px 0 rgba(0,0,0,.13);
}
.cta--compact:hover{ box-shadow:0 1px 0 rgba(0,0,0,.13); }
.cta--compact .cta__tag{ font-size:clamp(13px,3.2vw,15px); }
.cta--compact .cta__txt{ font-size:clamp(13px,3.2vw,15px); padding-left:clamp(2px,.8vw,4px); }
.cta--compact .cta__num{ font-size:clamp(19px,4.4vw,23px); }
.cta--compact .cta__txt small{ font-size:clamp(10.5px,2.6vw,12px); }

/* SPは電話CTAの横幅に対して電話番号が短く、左寄せだと余白が右に偏る。
   「相談無料」の白い四角は左のまま、電話番号と受付時間だけ中央に寄せる
   （FVカード内・下部CTAの両方に効かせる） */
@media (max-width:767px){
  .cta--tel .cta__txt{ text-align:center; }
}

/* =========================================================
   お悩み
   ========================================================= */
.sec--dots{
  background-color:#fff;
  background-image:radial-gradient(#e4e4e4 2px, transparent 2px);
  background-size:18px 18px;
  padding-bottom:0;
}
.ttl-onayami{
  text-align:center;
  font-weight:900;
  line-height:1.35;
  margin:0 0 clamp(24px,4vw,48px);
  letter-spacing:.04em;
}
.ttl-onayami .l1{ display:block; font-size:clamp(26px,7.4vw,54px); letter-spacing:.12em; }
.ttl-onayami .l2{ display:block; font-size:clamp(21px,5.8vw,42px); letter-spacing:.06em; }

.worry{ display:flex; flex-direction:column; gap:clamp(12px,2vw,20px); }
.worry__item{
  display:flex;
  align-items:flex-start;
  gap:.6em;
  background:#fff;
  border:2px solid #3a3a3a;
  padding:clamp(12px,2.2vw,20px) clamp(12px,2.4vw,24px);
  font-weight:700;
  font-size:clamp(16px,4.2vw,20px);
  line-height:1.55;
  box-shadow:4px 4px 0 rgba(0,0,0,.07);
}
/* 元LPのように左右交互にずらす */
.worry__item:nth-child(odd){ margin-right:10%; }
.worry__item:nth-child(even){ margin-left:10%; }
.worry__illust{ margin-top:clamp(18px,2.6vw,32px); margin-bottom:0; }
.worry__illust img{ margin-inline:auto; max-width:min(100%,620px); }

@media (min-width:768px){
  /* 1個目・2個目と同じ関係で、右側を一定量だけ下にずらす */
  .worry{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 24px;
    padding-bottom:26px;
  }
  .worry__item{ margin-left:0 !important; margin-right:0 !important; }
  .worry__item:nth-child(even){ transform:translateY(26px); }
  .worry__illust img{ max-width:min(100%,520px); }
}
/* 2カラム化でカードが狭くなる帯域は、指定した改行位置どおりに収まるよう字を詰める */
@media (min-width:768px) and (max-width:1023px){
  .worry__item{
    font-size:clamp(16px,2.1vw,20px);
    padding:clamp(12px,1.8vw,20px) clamp(11px,1.6vw,18px);
  }
}
@media (min-width:1024px){
  .worry__illust img{ max-width:560px; }
}

/* =========================================================
   ダークセクション
   ========================================================= */
/* 背景：ダークテクスチャ画像＋視認性確保の乗算フィルター
   ※ img/dark-texture.jpg を差し替えれば、そのまま別の背景画像に変更できます */
.sec-dark{
  position:relative;
  color:#fff;
  background:#1d1d1d url("../img/dark-texture.jpg") center/cover no-repeat;
  padding:clamp(36px,6vw,80px) 0 clamp(30px,5vw,70px);
}
/* 背景画像の質感を活かすため、フィルターは最小限（うっすら締めるだけ） */
.sec-dark::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
}
.sec-dark__top,.sec-dark__reason{
  position:relative;
  z-index:1;
  /* 背景をそのまま見せるぶん、文字側に影を付けて視認性を確保 */
  text-shadow:0 2px 8px rgba(0,0,0,.75), 0 0 20px rgba(0,0,0,.5);
}
.sec-dark .dark-box{ text-shadow:none; }
.dark-tag{
  display:block;
  width:fit-content;
  margin-inline:auto;
  text-align:center;
  background:#000;
  color:#fff;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(16px,4.2vw,28px);
  letter-spacing:.06em;
  padding:.45em 1em;
  margin-bottom:clamp(16px,2.6vw,28px);
}
/* 下線は折り返した行にも続けて引く（inline要素の下ボーダー） */
.dark-stat{
  display:block;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(21px,5.6vw,40px);
  line-height:1.9;
  letter-spacing:.04em;
  text-align:center;
}
.dark-stat .line{
  display:inline;
  border-bottom:1px solid rgba(255,255,255,.55);
  padding-bottom:.06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.dark-stat .sup{ font-size:.5em; vertical-align:super; }
.dark-src{
  text-align:center;
  font-size:clamp(11.5px,2.6vw,15px);
  color:#cfd6dc;
  margin-top:.8em;
}
.sec-dark__reason{ margin-top:clamp(30px,5vw,64px); }
.sec-dark__reason h3{
  text-align:center;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(24px,6.2vw,42px);
  letter-spacing:.06em;
  margin:0 0 clamp(16px,2.6vw,30px);
}
/* 白背景の余白を詰めて、内容幅に合わせて中央寄せ */
.dark-box .ck{ margin-top:0; }
.dark-box{
  display:flex;
  align-items:center;
  gap:.5em;
  width:fit-content;
  max-width:100%;
  margin:0 auto clamp(10px,1.6vw,16px);
  background:#fff;
  color:var(--text);
  font-weight:700;
  font-size:clamp(16px,4.3vw,26px);
  padding:clamp(8px,1.2vw,14px) clamp(14px,1.8vw,24px);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.dark-concl{
  text-align:center;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(20px,5.3vw,38px);
  letter-spacing:.04em;
  margin-top:clamp(16px,2.6vw,30px);
}

/* 全て解決します（元LPと同じ淡い水色＋キラキラ） */
.solve{
  position:relative;
  background:linear-gradient(180deg,#f4fcff 0%, #e2f6ff 40%, #c6ecff 100%);
  padding:clamp(26px,4vw,54px) 0 0;
  overflow:hidden;
}
.solve::before,
.solve::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* 大きめの光の玉 */
.solve::before{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(circle, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 62%);
  background-repeat:no-repeat;
  background-size:78px 78px, 56px 56px, 40px 40px, 64px 64px, 34px 34px, 46px 46px;
  background-position:6% 22%, 22% 68%, 38% 14%, 62% 78%, 74% 30%, 90% 60%;
  animation:solve-twinkle 4.5s ease-in-out infinite alternate;
}
/* 細かなキラキラ */
.solve::after{
  background-image:
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 60%);
  background-repeat:no-repeat;
  background-size:12px 12px, 8px 8px, 10px 10px, 7px 7px, 14px 14px, 9px 9px, 11px 11px, 8px 8px;
  background-position:14% 40%, 30% 20%, 46% 62%, 55% 26%, 68% 52%, 80% 16%, 86% 78%, 96% 36%;
  opacity:.9;
  animation:solve-twinkle 3.2s ease-in-out infinite alternate-reverse;
}
@keyframes solve-twinkle{
  from{ opacity:.55; }
  to{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .solve::before,.solve::after{ animation:none; }
}
.solve__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0; /* 文字のすぐ横にイラストを並べる */
}
@media (min-width:768px){
  .solve__inner{ gap:clamp(6px,1.2vw,18px); }
}
.solve__txt{ flex:1 1 auto; min-width:0; padding-bottom:clamp(14px,2.4vw,32px); }
/* 元LPと同じ「線あり」の吹き出し */
.solve__bubble{
  position:relative;
  display:inline-block;
  background:#fff;
  border:2px solid #1f1f1f;
  color:#1f1f1f;
  font-weight:700;
  font-size:clamp(16px,4.2vw,28px);
  padding:.38em 1em;
  border-radius:4px;
  margin-bottom:clamp(16px,2.4vw,26px);
}
.solve__bubble::before,
.solve__bubble::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-style:solid;
  border-color:transparent;
  border-bottom:0;
}
/* 枠線のふきだし（外側の線＋内側の白）
   内側の白い三角を2px上まで伸ばして、しっぽの付け根の黒い線を隠す */
.solve__bubble::before{
  bottom:-13px;
  border-width:13px 11px 0;
  border-top-color:#1f1f1f;
}
.solve__bubble::after{
  bottom:-9px;
  border-width:11px 8px 0;
  border-top-color:#fff;
}
.solve__main{
  font-weight:900;
  font-size:clamp(26px,9vw,74px);
  white-space:nowrap;
  line-height:1.2;
  letter-spacing:.02em;
  color:#1a1a1a;
  -webkit-text-stroke:.06em #fff;
  paint-order:stroke fill;
  text-shadow:0 3px 6px rgba(0,0,0,.14);
}
.solve__main .red{ color:var(--red); }
/* イラストは文字の真横に並べる（マイナスマージンは使わない） */
.solve__illust{
  flex:none;
  width:clamp(94px,24vw,190px);
}
@media (max-width:374px){
  .solve__illust{ width:76px; } /* 極小幅では文字に幅を譲る */
}

@media (min-width:768px){
  .solve{ padding-top:clamp(40px,5vw,70px); }
  /* PCでも文字のすぐ横にイラストを並べる */
  .solve__inner{ gap:clamp(8px,1.4vw,22px); }
  .solve__txt{ text-align:center; flex:0 1 auto; }
}

/* =========================================================
   選ばれる5つの理由
   ========================================================= */
.sec--reason{ background:linear-gradient(180deg,#f6f1fb,#fdf4f8); }
.ttl-line{
  text-align:center;
  font-weight:900;
  font-size:clamp(30px,8vw,60px);
  letter-spacing:.08em;
  line-height:1.3;
  margin:0 0 clamp(24px,4vw,52px);
  color:var(--red);
}
.ttl-line .num{ font-size:1.3em; }

.reasons{ display:flex; flex-direction:column; gap:clamp(20px,3vw,36px); }
.rcard{
  position:relative; /* 「理由N」ラベルの基準（白いカードの左上に合わせる） */
  background:#fff;
  padding:clamp(12px,2.6vw,26px);
  box-shadow:0 4px 18px rgba(80,40,110,.08);
}
.rcard__img img{ width:100%; }
.rcard__no{
  position:absolute;
  top:0; left:0; /* 白いカードの左上に合わせる */
  background:var(--red);
  color:#fff;
  font-weight:700;
  font-size:clamp(15px,3.6vw,20px);
  letter-spacing:.05em;
  padding:.3em 1.1em;
  z-index:2;
}
.rcard__ttl{
  text-align:center;
  font-weight:600;
  /* SPで1文字だけ落ちないよう、カード幅に収まるサイズに調整 */
  font-size:clamp(19px,5.1vw,31px);
  line-height:1.45;
  letter-spacing:-.01em;
  margin:clamp(14px,2vw,20px) 0 clamp(8px,1.2vw,14px);
}
.rcard__txt{
  font-size:clamp(16px,3.6vw,17px);
  line-height:1.8;
  color:#222;
}

/* PCは2カラム（カード幅を広く取り、見出しが単語の途中で折れないようにする）
   768〜899pxは2カラムにするとカードが狭く見出しが1文字だけ落ちるため1カラムのまま */
@media (min-width:900px){
  .reasons{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 26px; }
  .rcard{ grid-column:span 2; }
  .rcard:nth-child(5){ grid-column:2 / span 2; }
  .rcard__no{ padding:.34em 1.2em; }
  /* 2カラム時はカード幅に比例させて、指定した改行位置どおりに収める */
  .rcard__ttl{ font-size:clamp(19px,2.5vw,31px); }
}
@media (min-width:1024px){
  .reasons{ gap:38px 32px; }
}

/* =========================================================
   実績
   ========================================================= */
/* セクション自体は白。赤背景はカード領域だけに敷いて、
   見出しの上に赤い線が出ないようにする */
.sec--result{ background:#fff; padding:0; }
.results-area{
  background:var(--frame-red);
  padding-bottom:clamp(44px,7vw,90px);
}
.result-head{
  position:relative;
  background:#fff;
  margin-top:-1px; /* セクション背景（赤）が上端に見えないように */
  padding:clamp(34px,5.5vw,72px) 0 clamp(46px,7vw,96px);
}
.result-head h2{
  text-align:center;
  font-weight:900;
  font-size:clamp(26px,6.9vw,52px);
  line-height:1.4;
  letter-spacing:.02em;
  margin:0;
}
/* 極小幅（〜359px）では26pxだと1行目「実際に丸投げで出た成果の」が入りきらない */
@media (max-width:359px){
  .result-head h2{ font-size:23px; }
}
/* 元LPと同じ「三角が重なった」区切り（明るい赤の上に濃い赤の三角） */
.result-head::before,
.result-head::after{
  content:"";
  position:absolute;
  left:-1px; right:-1px;
  bottom:-1px; /* セクション背景との境目に隙間（白線）が出ないよう1pxはみ出させる */
  height:calc(clamp(34px,6.4vw,86px) + 1px);
}
.result-head::before{
  background:var(--frame-red);
  clip-path:polygon(0 2%, 48% 56%, 100% 0, 100% 100%, 0 100%);
}
.result-head::after{
  background:#930000;
  /* 明るい赤と1%ぶん重ねて境界線が見えないようにする */
  clip-path:polygon(0 1%, 48.7% 57%, 0 100%);
}

/* 実績カードは横一列の自動スクロール（制作事例と同じ .js-conveyor を流用）。
   カード内の数字が読める大きさが必要なので、制作事例より1枚を大きく取る */
.results-conveyor{ padding-top:clamp(24px,4vw,52px); }
.results-conveyor .conveyor__list li{
  width:clamp(260px,78vw,420px);
}

/* =========================================================
   制作事例（コンベア）
   ========================================================= */
.sec--works{ background:#fff; }
.works__tag{ text-align:center; }
.works__tag span{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:900;
  font-size:clamp(24px,6.4vw,46px);
  letter-spacing:.14em;
  line-height:1.25;
  padding:.34em 2.1em .34em 2.3em;
  clip-path:polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
}
.works__ttl{
  text-align:center;
  font-weight:700;
  font-size:clamp(22px,5.8vw,40px);
  line-height:1.45;
  margin:clamp(18px,3vw,34px) 0 clamp(10px,1.6vw,18px);
}
.works__ttl-lg{
  display:block;
  font-weight:900;
  font-size:clamp(35px,9.4vw,68px);
  line-height:1.28;
  letter-spacing:.02em;
}
.works__ttl-lg .red{ font-size:1.12em; }
/* 数字は大きく見せる */
.works__ttl-num{ font-size:1.5em; letter-spacing:-.02em; }
.works__ttl-lg .ex{ color:#1a1a1a; }
.works__note{
  text-align:left; /* SPは左揃え、PCは中央 */
  font-size:clamp(12.5px,2.9vw,15px);
  color:#666;
  line-height:1.7;
  margin-bottom:clamp(22px,3.4vw,40px);
}
@media (min-width:768px){
  .works__note{ text-align:center; }
}

/* コンベア（無限ループ）
   ・並べる枚数が増減しても、画面幅が広くても途切れないよう
     JS側で必要な数だけ複製し、1セット分ごとに位置をリセットしています
   ・JSは js/script.js の「コンベア」ブロックを参照 */
.conveyor{ overflow:hidden; width:100%; }
.conveyor__track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.conveyor__list{
  display:flex;
  align-items:center;
  gap:var(--conveyor-gap,16px);
  padding-right:var(--conveyor-gap,16px);
}
.conveyor__list li{
  flex:none;
  width:clamp(168px,40vw,286px);
}
/* 透過PNGのため影は付けない（背景に色が乗って見えるのを防ぐ） */
.conveyor__list img{
  width:100%;
}
@media (min-width:768px){
  .conveyor__list{ --conveyor-gap:20px; }
}
@media (prefers-reduced-motion:reduce){
  .conveyor{ overflow-x:auto; }
  .conveyor__track{ transform:none !important; }
}

/* =========================================================
   他社との比較
   ========================================================= */
.sec--compare{ background:#fff; }
.ttl-slash{
  position:relative;
  display:table;
  margin:0 auto clamp(24px,4vw,48px);
  font-weight:900;
  font-size:clamp(25px,6.6vw,46px);
  letter-spacing:.16em;
  line-height:1.3;
  /* 斜線は回転で左右にはみ出すぶん（約.22em）を見込んで内側に置く */
  padding:0 1.12em;
}
.ttl-slash::before,
.ttl-slash::after{
  content:"";
  position:absolute;
  top:50%;
  width:4px; height:1.1em;
  background:#ec5a24;
  transform:translateY(-50%) rotate(24deg);
  border-radius:2px;
}
.ttl-slash::before{ left:.22em; transform:translateY(-50%) rotate(-24deg); }
.ttl-slash::after{ right:.22em; }

.compare{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ctable{
  width:100%;
  min-width:0;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed; /* 余白用の空セル（12px）を確実に効かせる */
  text-align:center;
  color:var(--navy);
  font-weight:700;
}
.ctable th,.ctable td{ padding:clamp(8px,1.4vw,16px) clamp(2px,1vw,12px); }
/* 見出しは「セル＝透明＋内側のspanに背景」にして、
   余白はセルのpadding（＝marginと同じ考え方）で作る。
   ボーダーを使わないので角丸が歪まない */
.ctable thead th{
  font-size:clamp(12px,3.2vw,22px);
  background:transparent;
  color:var(--navy);
  border:0;
  padding:0 2px 4px;
}
.ctable thead th > span{
  display:block;
  background:#c9d1d8;
  border-radius:5px 5px 0 0; /* SPは控えめ、PCは10px */
  padding:.5em .3em;
}
@media (min-width:768px){
  .ctable thead th > span{ border-radius:10px 10px 0 0; }
}
.ctable thead th.ctable__us > span{ background:#eb5a21; color:#fff; }
.ctable__corner{ width:22%; background:transparent !important; border:0 !important; padding:0 !important; }
/* 列幅（table-layout:fixed のため先頭行で決まる） */
.ctable thead th.ctable__us{ width:24%; }
.ctable thead th:not(.ctable__corner):not(.ctable__us){ width:26%; }
/* 弊社列と制作会社列の間の余白は「空のセル」で作る（ボーダー不使用） */
.ctable__gap{
  width:12px;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.ctable thead th.ctable__us{ font-size:clamp(15px,3.8vw,24px); }
/* 区切りは全列とも同じ位置・同じ太さ（他社列＝白線／弊社列＝オレンジ線） */
.ctable tbody th{
  width:22%;
  background:var(--navy);
  color:#fff;
  font-size:clamp(10.5px,2.9vw,18px);
  line-height:1.4;
  border-bottom:4px solid #fff;
  border-right:4px solid #fff;
}
.ctable tbody tr:last-child th{ border-bottom:0; }
.ctable tbody td{
  width:26%;
  font-size:clamp(11px,3vw,20px);
  line-height:1.4;
  /* 他社列：グレー背景＋白い区切り線 */
  background:#eaeef1;
  border-bottom:4px solid #fff;
  border-right:4px solid #fff;
  background-clip:padding-box;
  vertical-align:middle;
}
.ctable tbody td:last-child{ border-right:0; }
.ctable tbody tr:last-child td{ border-bottom:0; }
.ctable tbody td.us{
  background:var(--cream);
  border-bottom:4px solid #eb5a21;
  border-right:0;
  font-size:clamp(12px,3.3vw,22px);
  position:relative;
}
/* 空セル（余白列）の隣は左ボーダー不要 */
.ctable tbody .ctable__gap + td{ border-left:0; }
.ctable tbody tr:last-child td.us{
  border-bottom:0;
  border-radius:0 0 5px 5px;
}
@media (min-width:768px){
  .ctable tbody tr:last-child td.us{ border-radius:0 0 10px 10px; }
}
.ctable tbody td.none{ color:var(--navy); }
/* 弊社列：丸なし（納期・月額固定コスト） */
.ctable .plain{ display:inline-block; }

/* 弊社列：二重丸（◎） */
.ctable .dcircle{
  position:relative;
  display:inline-block;
  z-index:1;
  padding:.1em .2em;
  letter-spacing:-.02em; /* 「システム内で」等が1文字だけ落ちるのを防ぐ */
}
.ctable .dcircle::before,
.ctable .dcircle::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3.5px solid #f2e14a;
  z-index:-1;
}
.ctable .dcircle::before{ width:3.4em; height:3.4em; }
.ctable .dcircle::after{ width:2.35em; height:2.35em; }
.ctable .dcircle small{ display:block; font-size:max(13px,.62em); font-weight:700; line-height:1.3; }
/* SP：「システム内で」「システム内に」の6文字目だけが落ちないよう、
   セルと丸の内側の余白を詰めて文字幅を最大限使う（文字サイズは変えない） */
@media (max-width:767px){
  .ctable tbody td.us{ padding-left:2px; padding-right:2px; }
  .ctable .dcircle{ padding-left:0; padding-right:0; letter-spacing:-.02em; }
}
@media (max-width:374px){
  .ctable tbody td.us{ padding-left:1px; padding-right:1px; }
  .ctable .dcircle{ letter-spacing:-.09em; }
}

/* 他社列：線だけの三角（△） */
.ctable .tri{
  position:relative;
  display:inline-block;
  z-index:1;
}
.ctable .tri::before,
.ctable .tri::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:-1;
}
.ctable .tri::before{
  top:-.7em;
  border-left:1.45em solid transparent;
  border-right:1.45em solid transparent;
  border-bottom:2.35em solid var(--tri-gray);
}
.ctable .tri::after{
  top:-.34em;
  border-left:1.12em solid transparent;
  border-right:1.12em solid transparent;
  border-bottom:1.82em solid #eaeef1; /* セル背景と同色で「線だけの三角」に見せる */
}
.compare__note{
  font-size:clamp(12.5px,2.9vw,15px);
  color:#555;
  line-height:1.8;
  margin-top:clamp(16px,2.6vw,28px);
}

/* =========================================================
   よくある質問
   ========================================================= */
.sec--faq{ background:#fff; }
.ttl-faq{
  text-align:center;
  font-weight:900;
  font-size:clamp(25px,6.6vw,46px);
  letter-spacing:.16em;
  margin:0 0 clamp(22px,3.6vw,44px);
}
/* 元LPと同じ仕様：オレンジ縦グラデ／角丸10px／白文字「Q」／オレンジ文字「A」 */
.faq{ display:flex; flex-direction:column; gap:clamp(10px,1.6vw,14px); }
.faq__item{ border-radius:10px; }
.faq__q{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  background:linear-gradient(180deg,#ff6500,#ff9700);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:.65em 1.3em .65em 2.6em;
  font-size:clamp(16px,4.2vw,19px);
  font-weight:600;
  line-height:1.7;
}
.faq__mark{
  position:absolute;
  left:.62em;
  top:.46em;
  font-family:var(--latin);
  font-size:1.34em;
  font-weight:500;
  line-height:1.4;
}
.faq__qtxt{ display:block; padding-right:1.2em; }
.faq__arrow{
  position:absolute;
  right:1.1em;
  top:50%;
  width:10px; height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .25s ease;
}
.faq__item.is-open .faq__arrow{ transform:translateY(-30%) rotate(225deg); }
.faq__a{
  max-height:0;
  overflow:hidden;
  background:#fff;
  transition:max-height .3s ease;
}
.faq__a p{
  position:relative;
  padding:.8em 1.2em 1.5em 2.6em;
  font-size:clamp(16px,4.2vw,19px);
  font-weight:600;
  line-height:1.7;
  color:#222;
}
.faq__mark--a{
  position:absolute;
  left:.62em;
  top:.58em;
  color:#ff6500;
  font-family:var(--latin);
  font-size:1.34em;
  font-weight:500;
  line-height:1.4;
}
.faq__atxt{ display:block; }

/* =========================================================
   資料ダウンロード
   ========================================================= */
.sec--dl{ background:#fff; }
/* 元画像（20251127_item1.png）の比率に合わせた見出し
   たった:0.78em ／ 30:1.14em ／ 秒:0.86em ／ で:0.50em ／ 無料ダウンロード:1em */
.dl-ttl{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(4px,1.2vw,14px);
  text-align:center;
  font-weight:900;
  line-height:1.06;
  letter-spacing:.005em;
  margin:0 0 clamp(22px,3.6vw,44px);
  color:#2d2d2d;
  font-size:clamp(33px,8.8vw,58px);
}
.dl-ttl__body{ display:block; }
.dl-ttl__l1{
  display:block;
  font-size:.78em;
  white-space:nowrap;
  margin-bottom:.12em;
}
.dl-ttl__num{
  color:var(--red);
  font-size:2.3em;
  letter-spacing:-.02em;
}
.dl-ttl__unit{ color:var(--red); font-size:1.1em; }
.dl-ttl__de{ font-size:.64em; }
.dl-ttl__l2{
  display:block;
  font-size:1em;
  white-space:nowrap;
}
/* 左右の赤い斜線（＼＼ ／／）：下寄せ・2本ずつ */
.dl-ttl__slash{
  position:relative;
  flex:none;
  width:clamp(20px,5vw,50px);
  align-self:stretch;
}
.dl-ttl__slash::before,
.dl-ttl__slash::after{
  content:"";
  position:absolute;
  bottom:-6%;
  width:clamp(3px,.45vw,5px);
  background:var(--red);
  border-radius:999px; /* 先端を丸く */
}
/* ::before＝外側（短く・傾き大） ::after＝内側（長く・傾き小） */
.dl-ttl__slash::before{ height:50%; }
.dl-ttl__slash::after{ height:76%; }
/* 回転で外側にはみ出すぶんを見込んで内寄せにする（360pxでの数pxのはみ出し対策） */
.dl-ttl__slash--l::before{ left:14%; transform:rotate(-32deg); }
.dl-ttl__slash--l::after{ left:48%; transform:rotate(-17deg); }
.dl-ttl__slash--r::before{ right:14%; transform:rotate(32deg); }
.dl-ttl__slash--r::after{ right:48%; transform:rotate(17deg); }

/* ---------- 資料プレビュースライダー（元LP準拠） ---------- */
.slider{
  position:relative;
  width:100%;
  max-width:1160px;
  margin-inline:auto;
  /* 矢印と画像の間に余白を確保 */
  padding:0 clamp(30px,7.4vw,56px);
}
.slider__viewport{ overflow:hidden; }
.slider__track{
  display:flex;
  transition:transform .45s cubic-bezier(.4,.05,.2,1);
}
.slider__slide{
  flex:0 0 100%;
  padding:0 6px;
}
.slider__slide img{
  width:100%;
  border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.slider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:clamp(24px,6vw,40px);
  height:clamp(34px,8vw,56px);
  border:0;
  background:transparent;
  padding:0;
  z-index:2;
}
/* 元LPと同じ線（シェブロン）の矢印 */
.slider__arrow::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:clamp(9px,2.4vw,14px);
  height:clamp(9px,2.4vw,14px);
  border-top:2px solid #3b3b3b;
  border-right:2px solid #3b3b3b;
}
.slider__arrow--prev{ left:0; }
.slider__arrow--next{ right:0; }
.slider__arrow--prev::before{ transform:translate(-40%,-50%) rotate(-135deg); }
.slider__arrow--next::before{ transform:translate(-60%,-50%) rotate(45deg); }
.slider__arrow:hover::before{ border-color:var(--red); }

/* ページネーション（元LPと同じ短い線） */
.slider__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:clamp(14px,2.2vw,22px);
}
.slider__dot{
  width:clamp(16px,4.4vw,26px);
  height:3px;
  padding:0;
  border:0;
  background:#d3d3d3;
  transition:background-color .2s ease;
}
.slider__dot.is-active{ background:var(--red); }

/* SP・タブレットではスライドとの間隔を広めに取る（.dl-know の上余白と合算） */
.know-ttl{ text-align:center; margin:clamp(28px,5vw,48px) 0 clamp(16px,2.6vw,28px); }
.know-ttl span{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:900;
  font-size:clamp(21px,5.4vw,30px);
  letter-spacing:.06em;
  border-radius:999px;
  padding:.3em 1.3em;
}
/* リスト全体を中央に置きつつ、各行の文字は左揃えで先頭を揃える
   （左右に5%ずつ余白を確保） */
.know{
  width:fit-content;
  max-width:96%;
  margin-inline:auto;
}
.know li{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.45em;
  padding:clamp(12px,1.9vw,18px) 0;
  border-bottom:1px solid #ccc;
  font-weight:700;
  /* SPは改行位置を固定して1文字だけ落ちるのを防ぐ（余白ぶん文字を大きく） */
  font-size:clamp(20px,6.2vw,24px);
  line-height:1.5;
  white-space:nowrap;
}
.know li p{ text-align:left; }
.know li:last-child{ border-bottom:0; }

/* PC(1024px〜)：スライドと「資料で分かること」を横並び／タブレット以下は縦並び */
.dl-body{ display:block; }
/* スマホ・タブレットではスライドとの間隔を広めに取る */
/* 見出しのピルとリストの中心を揃える */
.dl-know{
  margin-top:clamp(44px,8vw,80px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
@media (min-width:1024px){
  /* スライドの大きさは保ったまま「資料で分かること」の幅を確保するため
     このセクションだけコンテナを広く取る */
  .sec--dl .inner{ width:min(100% - 32px, 1300px); }
  .dl-body{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(20px,2.6vw,38px);
  }
  .dl-know{ margin-top:0; }
  .know-ttl{ margin-top:0; }
  .know li{ font-size:clamp(15px,1.4vw,20px); }
}

/* =========================================================
   フォーム
   ========================================================= */
.sec--form{ background:#fff; padding-top:0; }
.form-head{ text-align:center; padding-top:clamp(30px,5vw,70px); }
.form-head__soshite{
  font-weight:700;
  font-size:clamp(17px,4.4vw,30px);
  letter-spacing:.1em;
  position:relative;
  display:block;
  width:fit-content;
  margin-inline:auto;
  padding:0 1.4em;
}
.form-head__soshite::before,
.form-head__soshite::after{
  content:"";
  position:absolute; top:50%;
  width:2px; height:1.1em;
  background:#1a1a1a;
  transform:translateY(-50%) rotate(24deg);
}
.form-head__soshite::before{ left:.4em; transform:translateY(-50%) rotate(-24deg); }
.form-head__soshite::after{ right:.4em; }
.form-head__bubble{
  position:relative;
  display:block;
  width:fit-content;
  border:2px solid #1a1a1a;
  background:#fff;
  font-weight:700;
  font-size:clamp(16px,4.2vw,28px);
  padding:.45em 1.1em;
  margin:clamp(8px,1.4vw,16px) auto 0;
  z-index:2;
}
.form-head__bubble::after{
  content:"";
  position:absolute; left:50%; bottom:-12px;
  border:12px solid transparent;
  border-top-color:#1a1a1a;
  border-bottom:0;
  transform:translateX(-50%);
}
.form-head__band{
  background:var(--red);
  color:#fff;
  font-weight:900;
  font-size:clamp(21px,5.6vw,40px);
  letter-spacing:.02em;
  line-height:1.4;
  /* 吹き出しのしっぽが重なるぶん、上の余白を広めに取る */
  padding:clamp(30px,5vw,52px) 16px clamp(16px,2.6vw,28px);
  margin-top:clamp(-14px,-2vw,-10px);
}

/* =========================================================
   フォーム（元LPのマークアップをそのまま使用し、装飾はCSSのみ）
   ========================================================= */
.myForm{
  max-width:720px;
  margin:clamp(26px,4vw,52px) auto 0;
}
.myForm .input_unit{ margin-bottom:clamp(14px,2.2vw,22px); }
.myForm .label_frame{ margin-bottom:.5em; }
.myForm .form_input_label{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-weight:700;
  font-size:clamp(16px,3.6vw,17px);
}
/* 必須ラベル（マークアップを変えずCSSで付与）。任意項目（役職）はバッジなし */
.myForm .input_unit.required .form_input_label::after{
  content:"必須";
  background:var(--red);
  color:#fff;
  font-size:.72em;
  font-weight:700;
  padding:.18em .7em;
  border-radius:3px;
}
.myForm input[type="text"],
.myForm input[type="email"],
.myForm input[type="tel"],
.myForm select{
  width:100%;
  padding:clamp(11px,1.8vw,15px) 14px;
  border:1px solid #c4c4c4;
  border-radius:6px;
  font-size:16px;
  font-family:inherit;
  background:#fff;
  color:var(--text);
}
.myForm .select_frame{ position:relative; }
.myForm .select_frame::after{
  content:"";
  position:absolute;
  right:16px; top:50%;
  width:8px; height:8px;
  border-right:2px solid #666;
  border-bottom:2px solid #666;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.myForm select{ appearance:none; -webkit-appearance:none; padding-right:38px; }
/* 未入力エラー（送信を試みたあとのみ表示） */
.myForm.is-submitted input:invalid{
  border-color:var(--red);
  background:#fff5f5;
}
.myForm.is-submitted input:invalid:focus{
  border-color:var(--red);
  outline-color:var(--red);
}
.myForm input[type="text"]:focus,
.myForm input[type="email"]:focus,
.myForm input[type="tel"]:focus,
.myForm select:focus{
  outline:2px solid var(--green);
  outline-offset:1px;
  border-color:var(--green);
}
/* 送信ボタン（value が空のためラベルはCSSで表示） */
.myForm .form_input_submit{
  position:relative;
  max-width:520px;
  margin:clamp(18px,2.6vw,28px) auto 0;
  background:var(--green);
  border-radius:999px;
  box-shadow:0 4px 0 rgba(0,0,0,.13);
  transition:transform .15s ease, box-shadow .15s ease;
}
.myForm .form_input_submit::before{
  content:"今すぐ資料をダウンロード";
  display:block;
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size:clamp(18px,4.6vw,28px);
  line-height:1.3;
  /* 右のアイコンとのバランスを取るため文字は少し左寄りに */
  padding:clamp(15px,2.4vw,22px) 3.2em clamp(15px,2.4vw,22px) 1.4em;
}
.myForm .form_input_submit::after{
  content:"";
  position:absolute;
  right:1em; top:50%;
  transform:translateY(-50%);
  width:1.35em; height:1.35em;
  font-size:clamp(18px,4.6vw,28px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23ffffff'/%3E%3Cpath d='M17 13l7 7-7 7' fill='none' stroke='%2313ae67' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.myForm .form_input_submit input[type="submit"]{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:2;
}
.myForm .form_input_submit:hover{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.13); }

/* =========================================================
   お急ぎの方はこちらから
   ========================================================= */
.sec--lastcta{ background:#fff; padding-top:clamp(34px,5vw,70px); }
.lastcta__ttl{
  text-align:center;
  font-weight:700;
  font-size:clamp(18px,4.8vw,32px);
  letter-spacing:.06em;
  margin-bottom:clamp(16px,2.6vw,30px);
}
/* 斜線は先端を丸くしたCSSの線で描画 */
.lastcta__ttl span{
  position:relative;
  display:inline-block;
  padding:0 1.5em;
}
.lastcta__ttl span::before,
.lastcta__ttl span::after{
  content:"";
  position:absolute;
  top:50%;
  width:3px;
  height:1.15em;
  background:#1a1a1a;
  border-radius:999px;
}
.lastcta__ttl span::before{ left:.35em; transform:translateY(-50%) rotate(-22deg); }
.lastcta__ttl span::after{ right:.35em; transform:translateY(-50%) rotate(22deg); }

/* =========================================================
   会社概要 / フッター
   ========================================================= */
.sec--company{ background:#f6f6f6; }
.ttl-company{
  text-align:center;
  font-weight:900;
  font-size:clamp(20px,5vw,32px);
  letter-spacing:.16em;
  margin:0 0 clamp(18px,3vw,34px);
}
.company{
  max-width:760px;
  margin-inline:auto;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  padding:clamp(16px,2.4vw,26px) clamp(16px,2.6vw,30px);
  font-size:clamp(16px,3.4vw,17px);
}
.company > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:clamp(10px,1.6vw,14px) 0;
  border-bottom:1px dashed #e0e0e0;
}
.company > div:last-child{ border-bottom:0; }
.company dt{ font-weight:700; color:#111; }
.company dd{ margin:0; color:#444; line-height:1.7; }
.company a{ color:var(--red); font-weight:700; }

@media (min-width:768px){
  .company > div{ flex-direction:row; gap:24px; }
  .company dt{ flex:none; width:160px; }
}

.footer{
  background:#fff;
  text-align:center;
  padding:clamp(26px,4vw,48px) 0 clamp(24px,3vw,40px);
}
.footer__privacy{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color:var(--red);
  background:#fff;
  border:2px solid var(--red);
  border-radius:999px;
  font-weight:700;
  font-size:clamp(14px,3.6vw,17px);
  line-height:1;
  padding:.85em 1.9em;
  margin-bottom:1.4em;
  transition:background-color .2s ease, color .2s ease;
}
.footer__privacy:hover,
.footer__privacy:focus-visible{
  background:var(--red);
  color:#fff;
}
.footer__privacy .arrow{
  display:inline-block;
  width:.42em; height:.42em;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:.1em;
}
.footer__copy{ font-size:12px; color:#888; }

/* =========================================================
   追従バー（SP・PC共通）
   ========================================================= */
.fixbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:100;
  /* 非表示時は影ごと画面外へ完全に隠す（PCの bottom 分＋影の余裕を加算） */
  transform:translateY(calc(100% + 40px));
  opacity:0;
  visibility:hidden;
  transition:transform .3s ease, opacity .3s ease, visibility .3s;
  pointer-events:none;
}
.fixbar.is-visible{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
/* 元LP準拠：赤い帯の上に緑／オレンジの角丸ボタンを2つ並べる */
.fixbar{ background:var(--red); box-shadow:0 -3px 14px rgba(0,0,0,.18); }
.fixbar__inner{
  display:flex;
  gap:8px;
  padding:14px 8px 12px;
  width:min(100%, 900px);
  margin-inline:auto;
}
.fixbar__btn{
  position:relative;
  flex:1 1 50%;
  min-width:0; /* 中身の最小幅で押し広げられて画面外に出るのを防ぐ */
  display:flex;
  align-items:center;
  /* アイコンは左端に固定して2つのボタンで位置をそろえる */
  justify-content:flex-start;
  border-radius:8px;
  color:#fff;
  font-weight:700;
  line-height:1.2;
  gap:.5em;
  /* アイコンの左に余白を取る */
  padding:.75em 1.1em;
  text-align:center;
  transition:filter .15s ease, transform .15s ease;
}
/* 文字はアイコンを除いた残りの領域の中央に置く（＝ボタン中央よりアイコンぶん右寄り） */
.fixbar__label,
.fixbar__telbody{ flex:1 1 auto; }
.fixbar__btn:hover{ filter:brightness(1.06); }
.fixbar__dl{ background:var(--green); font-size:clamp(16px,4.3vw,25px); }
.fixbar__tel{ background:var(--orange); font-size:clamp(16px,4.3vw,25px); }
.fixbar__label{ letter-spacing:.01em; white-space:nowrap; }
.fixbar__telbody{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.fixbar__num{
  font-family:var(--latin);
  font-size:1.1em;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.12;
  white-space:nowrap; /* ハイフンで折り返さない */
}
.fixbar__telbody small{
  /* 可読性の下限（11px）を確保する。狭い幅では下限のままだと1行に収まらないので
     折り返しを許可する（文字を小さくして無理に1行にしない） */
  font-weight:400;
  font-size:max(11px,.56em);
  letter-spacing:0;
  line-height:1.3;
  white-space:normal;
}
/* 折り返しは「受付時間：」と時刻の間だけ（時刻や(平日)は途中で切らない） */
.fixbar__telbody small span{ white-space:nowrap; }
/* 白丸アイコン（DL＝下向き矢印／TEL＝受話器）
   ボタン左端に絶対配置し、文字はボタン中央に見えるようにする */
/* アイコンは文字と同じ行に並べる（元LPのボタン画像と同じ構成）。
   これで「上下＝左」の余白がボタンの padding でそろう */
.fixbar__ico{
  flex:none;
  position:relative;
  width:1.45em; height:1.45em;
  background:#fff;
  border-radius:50%;
}
.fixbar__ico--dl::before{
  content:"";
  position:absolute; left:50%; top:44%;
  width:.34em; height:.34em;
  border-right:.1em solid var(--green);
  border-bottom:.1em solid var(--green);
  transform:translate(-50%,-50%) rotate(45deg);
}
.fixbar__ico--tel{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='%23ffffff'/%3E%3Cpath fill='%23ff7e10' transform='translate(104 104) scale(0.594)' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* スマホ幅（〜599px）はボタンが画面外に出ないよう一段縮める。
   あわせて余白とアイコンを詰め、下限11pxの「受付時間」が1行に収まる幅を稼ぐ */
@media (max-width:599px){
  .fixbar__inner{ padding:12px 6px 10px; gap:6px; }
  .fixbar__dl,.fixbar__tel{ font-size:clamp(14px,4.1vw,22px); }
  .fixbar__btn{ padding:.7em .8em; gap:.4em; }
  .fixbar__ico{ width:1.3em; height:1.3em; }
}

@media (min-width:768px){
  :root{ --fixbar-h:92px; }
  .fixbar__inner{ gap:16px; padding:14px 16px 12px; }
  .fixbar__btn{ border-radius:10px; padding:.7em 1.1em; gap:.1em; }
  .fixbar__btn:hover{ transform:translateY(-2px); }
  .fixbar__dl{ font-size:23px; }
  .fixbar__tel{ font-size:23px; }
}

/* =========================================================
   PCレイアウト調整
   ========================================================= */
/* CTAボタンの横並びは、電話番号が収まる幅（900px〜）から */
@media (min-width:900px){
  .cta-group{
    flex-direction:row;
    justify-content:center;
    max-width:980px;
    margin-inline:auto;
  }
  .cta{ flex:1 1 50%; }
  .cta--dl{ max-width:520px; }
  .cta--tel{ max-width:520px; }
}
@media (min-width:768px) and (max-width:899px){
  .cta-group{ max-width:560px; margin-inline:auto; }
}

@media (min-width:1024px){
  body{ font-size:17px; }
}

/* ---------------------------------------------------------
   PCのFV：CTAボタンをファーストビュー内に収めるため、
   見出し・余白を一段小さくしてヒーロー全体の高さを抑える
   （SP・タブレットの見え方は変えない）
   --------------------------------------------------------- */
@media (min-width:1024px){
  /* 文字サイズ・スマホ帯は元のまま。窮屈に見えないよう余白を広めに取る
     （CTAはFVフォームカード内に入れたのでFVから外れてよい方針） */
  .hero__content{ padding-top:3vw; }   /* 「あなたの目の前まで」の上 */
  .hero__body{ padding-bottom:3vw; }   /* 「しませんか？」の下 */
  /* 旧 .cta-area が持っていたFV下端の余白を .hero に移管 */
  .hero{ padding-bottom:min(6vw,103px); }
}

/* =========================================================
   動きを減らす設定（prefers-reduced-motion）
   ・スムーススクロール／スライダーのスライド／各種トランジションを停止
   ・スライダーの自動再生は js/script.js 側で停止
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .slider__track{ transition:none; }
  .slider__dot{ transition:none; }
  .faq__a{ transition:none; }
  .faq__arrow{ transition:none; }
  .cta,
  .fixbar,
  .fixbar__btn,
  .footer__privacy,
  .myForm .form_input_submit{ transition:none; }
}