/* =====================================================================
   ETOILE AI版 追加スタイル
   style.css（元テーマ＋FFブルー）の後に読み込む。
   ===================================================================== */

/* ---------------- FV（画像からHTMLに置き換えた部分） ---------------- */
.et-fv{color:#fff;padding:10px 0 0;max-width:640px}
.et-fv__badge{
  display:inline-block;background:linear-gradient(180deg,#5fdcff,#22b3ee);
  color:#03203c;font-weight:900;font-size:clamp(14px,1.5vw,19px);
  padding:8px 22px;border-radius:4px;letter-spacing:.04em;
  box-shadow:0 0 24px rgba(95,220,255,.5);margin-bottom:16px;
}
.et-fv__catch{
  font-size:clamp(34px,5.2vw,68px);font-weight:900;line-height:1.18;
  letter-spacing:.01em;margin:0 0 14px;text-shadow:0 0 30px rgba(63,201,245,.45);
}
.et-fv__catch em{
  font-style:normal;display:inline-block;
  background:linear-gradient(180deg,#bdefff,#3fc9f5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.et-fv__tag{font-size:clamp(14px,1.6vw,19px);font-weight:700;color:#bfe4f7;margin-bottom:18px}
.et-fv__brand{border-left:4px solid #3fc9f5;padding-left:16px;margin-bottom:20px}
.et-fv__company{font-size:clamp(15px,1.6vw,19px);font-weight:900;letter-spacing:.06em;color:#fff}
.et-fv__service{font-size:clamp(19px,2.6vw,32px);font-weight:900;line-height:1.35;color:#fff}
.et-fv__lead{font-size:clamp(13px,1.4vw,16px);line-height:1.9;color:#cfe6f5;margin-bottom:26px}
.et-fv__proof{list-style:none;display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:0}
.et-fv__proof li{
  flex:1 1 150px;background:rgba(255,255,255,.10);border:1px solid rgba(63,201,245,.45);
  border-radius:8px;padding:14px 10px;text-align:center;backdrop-filter:blur(4px);
}
.et-fv__proof strong{display:block;font-size:clamp(20px,2.4vw,30px);font-weight:900;color:#5fdcff;line-height:1.2}
.et-fv__proof strong small{font-size:.5em;margin-left:2px}
.et-fv__proof span{font-size:12px;font-weight:700;color:#cfe6f5}
@media(max-width:768px){
  .et-fv{padding:24px 0 10px;max-width:100%}
  .et-fv__proof li{flex:1 1 100%}
}

/* ---------------- AI活用の設計フロー（concept図の置き換え） ---------------- */
.et-flow{margin:50px auto 0;max-width:1200px;width:100%}
.et-flow__title{
  display:block;width:fit-content;margin:0 auto 26px;
  background:linear-gradient(180deg,#3fc9f5,#1584c4);color:#fff;
  font-weight:900;font-size:clamp(15px,1.8vw,20px);padding:9px 34px;border-radius:50px;
  box-shadow:0 0 24px rgba(63,201,245,.4);
}
.et-flow__row{display:flex;gap:10px;align-items:stretch;justify-content:center;flex-wrap:wrap}
.et-flow__box{
  flex:1 1 180px;position:relative;background:#fff;border-radius:8px;
  padding:16px 14px 14px;font-size:14px;font-weight:700;line-height:1.5;color:#0b2a4a;
  box-shadow:0 4px 16px rgba(3,32,60,.10),0 0 0 1px rgba(63,201,245,.20);text-align:center;
}
.et-flow__box b{
  display:block;font-size:11px;letter-spacing:.14em;color:#1f9fd6;margin-bottom:6px;
}
.et-flow__box i{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:#5a7591;margin-top:7px;line-height:1.6}
.et-flow__box--accent{background:linear-gradient(180deg,#e8f7ff,#d3edfc);box-shadow:0 4px 18px rgba(3,32,60,.14),0 0 0 2px #3fc9f5}
.et-flow__row .et-flow__box+.et-flow__box::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  border-left:7px solid #7cc7e8;border-top:5px solid transparent;border-bottom:5px solid transparent;
}
@media(max-width:899px){
  .et-flow__row .et-flow__box+.et-flow__box::before{
    left:50%;top:-8px;transform:translateX(-50%);
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:7px solid #7cc7e8;border-bottom:none;
  }
  .et-flow__row{flex-direction:column;gap:16px}
}

/* 3レーン */
.et-flow__lanes{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.et-lane{flex:1 1 280px;display:flex;flex-direction:column}
.et-lane__label{
  color:#fff;font-weight:900;font-size:14px;text-align:center;
  padding:9px 12px;border-radius:50px;margin-bottom:14px;line-height:1.4;
}
.et-lane__label--a{background:linear-gradient(180deg,#1f9fd6,#0d6ea8)}
.et-lane__label--b{background:linear-gradient(180deg,#3fc9f5,#1584c4)}
.et-lane__label--c{background:linear-gradient(180deg,#0d5390,#062a5e)}
.et-lane__box{
  background:#fff;border-radius:8px;padding:15px 14px;font-size:14px;font-weight:700;
  line-height:1.55;color:#0b2a4a;text-align:center;
  box-shadow:0 4px 14px rgba(3,32,60,.09),0 0 0 1px rgba(63,201,245,.18);
}
.et-lane__box i{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:#5a7591;margin-top:6px;line-height:1.6}
.et-lane__arrow{width:0;height:0;margin:9px auto;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #7cc7e8}

/* 成果物リスト */
.et-deliver{margin-top:36px;background:rgba(255,255,255,.72);border:1px solid rgba(63,201,245,.35);border-radius:10px;padding:28px 22px}
.et-deliver__title{font-weight:900;font-size:15px;color:#062a5e;text-align:center;margin-bottom:16px}
.et-deliver__grid{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.et-deliver__grid span{
  background:#fff;border:1px solid rgba(31,159,214,.4);border-radius:50px;
  padding:7px 16px;font-size:13px;font-weight:700;color:#0d5390;
}

/* ---------------- ヘッダーロゴ ---------------- */
.header__logo img{max-height:38px;width:auto}

/* =====================================================================
   ページ下部の問い合わせフォーム（スマホでも最後まで読んだ位置で入力できる）
   ===================================================================== */
#contact{
  background:
    radial-gradient(900px 420px at 50% 0%,rgba(63,201,245,.16),transparent 70%),
    linear-gradient(180deg,#03142e 0%,#062a5e 100%);
  padding:76px 0 84px;
}
.et-bottomform{width:92%;max-width:720px;margin:0 auto;text-align:center}
.et-bottomform__title{
  color:#fff;font-weight:900;font-size:clamp(21px,3vw,32px);line-height:1.55;
  letter-spacing:.02em;margin-bottom:14px;
}
.et-bottomform__lead{color:#bfe4f7;font-size:clamp(13px,1.5vw,15px);line-height:1.9;margin-bottom:28px}
.et-bottomform__h{
  font-weight:900;font-size:clamp(16px,2vw,20px);color:#062a5e;
  text-align:center;margin-bottom:12px;line-height:1.5;
}
.et-bottomform__inner .form_content{width:100%;padding:32px 30px 34px}
@media(max-width:599px){
  #contact{padding:56px 0 62px}
  .et-bottomform__inner .form_content{padding:24px 18px 26px}
}

/* =====================================================================
   CTA：「ご相談は完全無料！」で統一。青一色のなかで唯一のオレンジにする
   ===================================================================== */
/* 元テーマ側が background-color を個別に当ててくるため、
   ショートハンドではなく color / image を分けて、詳細度も上げて指定する */
.btn__or,
.buttons .btn,
.hamburger__btn-posi .btn,
#bannerbox__sp .bg-white .btn,
button.mktoButton,
.form_content button.mktoButton,
.et-fab .et-fab__btn,
.et-mobile-cta__btn{
  background-color:#f97316!important;
  background-image:linear-gradient(180deg,#ff9a3c 0%,#f97316 52%,#ea5a00 100%)!important;
  color:#fff!important;font-weight:900!important;border:none!important;
  text-shadow:0 1px 2px rgba(120,50,0,.45)!important;
  box-shadow:0 4px 0 #b8480a, 0 0 30px rgba(249,115,22,.42)!important;
}
.btn__or:hover,
.buttons .btn:hover,
.hamburger__btn-posi .btn:hover,
#bannerbox__sp .bg-white .btn:hover,
button.mktoButton:hover,
.et-fab:hover .et-fab__btn,
.et-mobile-cta__btn:hover{
  background-color:#fb8420!important;
  background-image:linear-gradient(180deg,#ffad5c 0%,#fb8420 52%,#f56a10 100%)!important;
  box-shadow:0 4px 0 #b8480a, 0 0 46px rgba(249,115,22,.75)!important;
}

/* フォーム送信ボタン上のバッジ（元テーマは「無料！」の青バッジ） */
.form_content button:before{
  content:"＼ご相談は完全無料！／"!important;
  color:#ea5a00!important;border-color:#ea5a00!important;
  left:50%!important;transform:translateX(-50%);
  font-size:12px!important;font-weight:900;white-space:nowrap;
  box-shadow:0 2px 6px rgba(120,50,0,.18);
}

/* フック（無料の明示） */
.btn__free{
  display:inline-block;background:#fff;color:#ea5a00;
  font-size:12px;font-weight:900;letter-spacing:.03em;line-height:1.4;
  padding:3px 13px;border-radius:50px;margin:0 0 7px;
  text-shadow:none;box-shadow:0 2px 6px rgba(120,50,0,.22);
}
.btn__main{font-size:clamp(16px,2vw,20px);font-weight:900;letter-spacing:.02em;line-height:1.4}

.btn__or,
.hamburger__btn-posi .btn,
#bannerbox__sp .bg-white .btn{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;
}
.hamburger__btn-posi .btn p,
#bannerbox__sp .bg-white .btn p{width:auto;margin:0;font-size:16px;font-weight:900}
/* 元テーマが疑似要素で「無料」を出していたが、バッジと二重になるので止める */
#bannerbox__sp .bg-white .btn:before{content:none!important;display:none!important}

.et-fab__free{background:#fff;color:#ea5a00}

/* 元テーマ側に .buttons .btn__or * { color:#03203c!important } があるので詳細度で勝つ指定 */
.buttons .btn__or,.buttons .btn__or .btn__main{color:#fff!important}
.buttons .btn__or .btn__free{color:#ea5a00!important;text-shadow:none!important}

/* 「まずは話を聞いてみる」ボタンの遷移先をPC/スマホで出し分け。
   元テーマの .btn__or{display:flex!important} が.pc/.spの通常の
   display:noneを打ち消してしまうため、詳細度を上げて!importantで上書き */
@media(min-width:900px){
  .buttons__in a.btn__or.sp{display:none!important}
}
@media(max-width:899px){
  .buttons__in a.btn__or.pc{display:none!important}
}

/* ================= FV 斜め帯（元LPと同じ見せ方） ================= */
.et-fv__catch{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px}
.et-slant{
  display:inline-block;background:#fff;color:#062a5e;
  font-size:clamp(19px,2.5vw,32px);font-weight:900;line-height:1.3;
  padding:8px 24px;transform:rotate(-2.2deg);
  box-shadow:0 6px 22px rgba(3,20,46,.35);letter-spacing:.01em;
}
.et-slant em{font-style:normal;font-size:1.5em;color:#0d8fd4;letter-spacing:-.02em;vertical-align:-2px}
.et-slant--main{font-size:clamp(28px,4.4vw,54px);padding:10px 26px;color:#03203c}

/* ================= worry / answer =================
   元LPは「左に本文・右に人物イラスト」の2カラム。フォントもそれに寄せる */
@media(min-width:900px){
  .worry__inner{width:92%;max-width:1080px}
}
#worry .worry__inner{padding-top:0}
.worry__box{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;width:100%}
.worry__left__box{margin:0;flex:1 1 480px;width:auto;max-width:560px}
.worry__left__box p{margin-bottom:22px;line-height:2.05;font-size:clamp(14px,1.55vw,16px)}
.worry__right__box{flex:0 1 340px;min-width:0;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.worry__right__box img{height:auto;display:block}
.worry__right__box img:nth-child(1){width:45%}
.worry__right__box img:nth-child(2){width:50%}
@media(max-width:899px){
  .worry__box{gap:22px}
  .worry__right__box{flex:1 1 100%;max-width:340px;margin:0 auto}
}
/* 角の欠けた多角形+ギザギザの尻尾はSVGで描画（.et-q__bg）。
   共通カード影の!importantが背景色・角丸・影を上書きしてくるため無効化 */
.et-q{
  position:relative;display:block;width:100%;max-width:600px;margin:0 auto 26px;
  aspect-ratio:720/400;
}
.worry__box2 .et-q{
  background:none!important;border-radius:0!important;box-shadow:none!important;
}
.et-q__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
/* 尻尾(下34%)と角の欠けを避けた「安全ゾーン」の中でテキストを上下左右センタリング。
   flexは外側のwrapだけにかけ、.et-q__text自体は通常のテキストフローのまま
   （直接flexにすると<br>や<b>混在テキストが1文字ずつ折り返される不具合が出る） */
.et-q__textwrap{
  position:absolute;left:9.5%;right:9.5%;top:4%;bottom:34%;z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.et-q__text{
  display:block;color:#fff;font-weight:900;
  font-size:clamp(16px,2.2vw,26px);line-height:1.6;text-align:center;
}
.et-q__text b{color:#a9e8ff;font-weight:900}
.et-answer{text-align:center;padding:10px 0}
.et-answer__lead{font-size:clamp(14px,1.7vw,19px);font-weight:700;color:#062a5e;margin-bottom:14px}
.et-answer__main{
  display:inline-block;background:linear-gradient(180deg,#3fc9f5,#1268b0);color:#fff;
  font-size:clamp(22px,3.6vw,44px);font-weight:900;line-height:1.4;
  padding:20px 44px;border-radius:10px;box-shadow:0 8px 0 #0b4f7a,0 0 40px rgba(63,201,245,.5);
}
.et-answer__main em{font-style:normal;font-size:1.45em;vertical-align:-2px}
.et-answer__sub{margin-top:20px;font-size:clamp(15px,2vw,24px);font-weight:900;color:#062a5e}

/* ================= マッチング図 ================= */
.et-match{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:36px}
.et-match__col{flex:1 1 210px;min-width:190px}
.et-match__name{background:#fff;border-radius:50%;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-weight:900;color:#062a5e;font-size:clamp(14px,1.5vw,18px);text-align:center;padding:14px;box-shadow:0 6px 24px rgba(3,20,46,.25)}
.et-match__icon{width:30px;height:30px;flex:0 0 auto;fill:#0d5390}
.et-match__icon .et-match__icon-hole{fill:#eaf6ff}
.et-match__col--left ul{list-style:none;margin-top:14px;padding:0}
.et-match__col--left li{background:rgba(255,255,255,.92);border-radius:8px;padding:10px 14px;font-size:12.5px;font-weight:700;color:#0b2a4a;margin-bottom:8px;line-height:1.6}
.et-match__col--left li b{color:#0d8fd4}
.et-match__bridge{display:flex;flex-direction:column;gap:10px;align-items:center;flex:0 0 130px}
.et-match__arrow{font-size:11px;font-weight:700;color:#fff;text-align:center;line-height:1.5;position:relative;padding-bottom:12px;width:100%}
.et-match__arrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.7)}
.et-match__arrow::before{content:"";position:absolute;right:0;bottom:-4px;border-left:8px solid rgba(255,255,255,.85);border-top:5px solid transparent;border-bottom:5px solid transparent}
.et-match__arrow--back::before{left:0;right:auto;border-left:none;border-right:8px solid rgba(255,255,255,.85)}
.et-match__match{background:#fff;color:#062a5e;font-weight:900;font-size:14px;padding:8px 20px;border-radius:50px;box-shadow:0 0 24px rgba(63,201,245,.6)}
.et-match__col--center{background:rgba(255,255,255,.14);border:2px solid rgba(63,201,245,.7);border-radius:12px;padding:14px 12px}
.et-match__badge{background:#3fc9f5;color:#03203c;font-weight:900;font-size:12.5px;text-align:center;padding:7px 10px;border-radius:50px;margin-bottom:12px}
.et-match__circle{background:#fff;border-radius:10px;padding:14px 12px;text-align:center;margin-bottom:10px}
.et-match__circle b{display:block;font-size:15px;font-weight:900;color:#0d5390;margin-bottom:4px}
.et-match__circle i{font-style:normal;font-size:11.5px;color:#5a7591;line-height:1.6;display:block}
.et-match__circle--client{padding:24px 16px}
.et-match__circle--client b{font-size:18px;color:#062a5e}
@media(max-width:899px){
  .et-match{flex-direction:column}
  .et-match__bridge{flex-direction:row;flex:0 0 auto;gap:16px;width:100%}
  .et-match__arrow{padding-bottom:10px}
}

/* #matching の契約図は主役なので大きく、締めカードは脇役として小さく。
   丸バッジも白ベタではなく、締めカードと揃えたガラス風の演出に */
#matching .et-match{margin-top:56px;gap:32px}
#matching .et-match__col{flex:1 1 320px;min-width:280px;display:flex;justify-content:center}
#matching .et-match__name{
  width:min(270px,100%);aspect-ratio:1/1;margin:0;flex:0 0 auto;
  font-size:clamp(14px,1.6vw,17px);padding:18px;gap:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.03));
  color:#fff;border:1.5px solid rgba(95,220,255,.4);
  box-shadow:0 24px 60px rgba(2,14,34,.5),inset 0 1px 0 rgba(255,255,255,.22),0 0 44px rgba(63,201,245,.2);
}
/* アイコンは背景に溶け込まないよう、専用のグラデーションバッジに載せる */
#matching .et-match__icon-badge{
  width:104px;height:104px;border-radius:26px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#5fdcff,#0d5390);
  box-shadow:0 14px 30px rgba(3,20,46,.45),inset 0 1px 0 rgba(255,255,255,.4);
}
#matching .et-match__icon{width:62px;height:62px;fill:#fff}
#matching .et-match__icon .et-match__icon-hole{fill:rgba(6,42,94,.55)}
#matching .et-match__bridge{flex:0 0 170px}
#matching .et-match__arrow{font-size:12px}
@media(max-width:899px){
  #matching .et-match__col{justify-content:center}
  #matching .et-match__name{width:min(270px,86vw);padding:22px}
}

/* ================= カタヅクAIとは（元の位置に復元、id変更） =================
   #matchingは style.css 側に !important 付きで濃紺グラデーション背景が
   直接埋め込まれている（元テーマの #2aa3ed url(...) は後勝ちで上書き済み・
   実際には使われていない）。#katazuku は別idのためそのままでは無地になるので、
   #matching と同じ濃紺グラデーションを明示的に指定する。 */
#katazuku{
  background:
    radial-gradient(860px 520px at 50% 18%, rgba(63,201,245,.28), transparent 66%),
    linear-gradient(160deg,#062a5e,#0f5a9c)!important;
}

/* ================= 会社紹介・契約の安心材料（「月額10万円で〜」と「こんな方にこそ」の間に移動） ================= */
/* 携帯版のみ「カタヅクAIって？」ブロックを非表示 */
@media(max-width:899px){
  #matching{display:none!important}
}
.matching__inner h2{margin-bottom:40px!important}
.et-trust__closing{
  max-width:360px;margin:32px auto 0;padding:16px 18px 14px;text-align:center;
  background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  border:1px solid rgba(95,220,255,.32);border-radius:16px;
  box-shadow:0 12px 30px rgba(2,14,34,.32),inset 0 1px 0 rgba(255,255,255,.14);
}
/* 元テーマの .matching__inner p{width:fit-content;background:#fff;color:#085fa3;
   padding:6px 30px;border-radius:50px;...} というピル型デフォルトが type+class の
   詳細度(0,1,1)を持つため、こちらも p.et-trust__◯◯ の形で詳細度を揃えて確実に上書きする */
.et-trust__price{
  display:inline-block;background:linear-gradient(135deg,#5fdcff,#1584c4);color:#03203c;font-weight:900;
  font-size:10px;padding:5px 14px;border-radius:50px;margin-bottom:10px;
  box-shadow:0 6px 18px rgba(63,201,245,.4);
}
p.et-trust__tagline{
  width:auto;max-width:none;background:none;border-radius:0;padding:0;letter-spacing:normal;
  color:#fff;font-weight:900;font-size:clamp(13px,1.5vw,15px);line-height:1.6;
  margin:0 0 8px;text-wrap:balance;
}
.et-trust__tagline b{color:#5fdcff;font-weight:900;text-shadow:0 0 20px rgba(95,220,255,.5)}
p.et-trust__desc{
  width:auto;max-width:none;background:none;border-radius:0;padding:0;letter-spacing:normal;
  color:rgba(255,255,255,.75);font-size:10.5px;font-weight:500;line-height:1.8;
  margin:0;text-wrap:balance;
}
p.et-trust__note{
  width:auto;max-width:none;background:none;border-radius:0;padding-left:0;padding-right:0;padding-bottom:0;letter-spacing:normal;
  margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.55);font-size:9.5px;font-weight:600;font-style:italic;line-height:1.75;text-wrap:balance;
}
@media(max-width:599px){
  .matching__inner h2{margin-bottom:28px!important}
  .et-trust__closing{padding:16px 16px 14px}
}

/* ================= おすすめカード（元LPと同じ「問い → 人物イラスト → 色帯の答え」の縦構成） ================= */
.et-rec{
  background:#fff;border-radius:10px;padding:28px 22px 0;text-align:center;overflow:hidden;
  box-shadow:0 6px 24px rgba(3,32,60,.12);display:flex;flex-direction:column;
}
/* 質問文の行数がカードごとに違うと、その分だけ下のイラストの位置がズレる
   ため、3行ぶんのmin-heightを確保して人物イラストの下端を揃える */
.et-rec__q{
  font-size:clamp(16px,2vw,21px);font-weight:900;color:#0b2a4a;line-height:1.65;
  margin-bottom:6px;text-wrap:balance;min-height:calc(1.65em*3);
}
.et-rec__face{display:block;height:222px;width:auto;max-height:38vw;margin:6px auto 14px}
.et-rec__a{
  background:linear-gradient(180deg,#3fc9f5,#1584c4);color:#fff;font-weight:900;
  font-size:clamp(14px,1.7vw,18px);line-height:1.75;padding:24px 16px 22px;border-radius:0;
  margin:auto -22px 0;position:relative;text-wrap:balance;
}
/* 帯の上辺に凹んだ三角（元LPと同じ吹き出しの受け） */
.et-rec__a::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  border-top:16px solid #fff;border-left:18px solid transparent;border-right:18px solid transparent;
}
/* 01/02/03の吹き出しを削除し、3枚目のカード(困り顔おじさん)を追加したため
   2枚並び(48%)から3枚並びに変更。#recommendにスコープし他箇所への影響を防ぐ */
#recommend .recommend__box{justify-content:center;gap:0 3%;max-width:960px}
#recommend .recommend__in__box{width:31%}
@media(max-width:899px){
  #recommend .recommend__in__box{width:96%}
}

/* ================= 矛盾する2つ ================= */
.et-both{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.et-both__card{background:#062a5e;color:#fff;border-radius:10px;padding:22px 18px;flex:0 1 220px;text-align:center;
  box-shadow:0 6px 26px rgba(3,32,60,.2)}
.et-both__card b{display:block;font-size:12px;letter-spacing:.14em;color:#5fdcff;margin-bottom:8px}
.et-both__card strong{font-size:clamp(17px,2.2vw,23px);font-weight:900;line-height:1.5}
.et-both__plus{font-size:32px;font-weight:900;color:#1f9fd6}
/* カード2枚+プラス記号が1行に収まらない幅で、プラスだけがカード1に
   くっついて浮いてしまうのを防ぐ。実測の境界は555〜565px付近だが、
   devicePixelRatio次第でmedia queryの数px境界がずれる端末があるため、
   他セクションと同じ599pxに揃えて余裕を持たせる */
@media(max-width:599px){
  .et-both{gap:14px}
  .et-both__card{flex:1 1 100%;padding:20px 16px}
}

/* ================= リスク ================= */
.et-risk{background:#fff;border-radius:10px;padding:34px 20px;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 6px 22px rgba(3,32,60,.10)}
.et-risk__check{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%) rotate(-8deg);
  border-right:18px solid rgba(63,201,245,.22);border-bottom:18px solid rgba(63,201,245,.22);
  border-radius:6px;clip-path:polygon(0 55%,32% 100%,100% 0,100% 100%,0 100%);opacity:.9}
.et-risk p{position:relative;font-size:clamp(16px,1.9vw,21px);font-weight:900;color:#1e1e1e;line-height:1.6}

/* ================= 料金プラン ================= */
.et-plan{background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(3,32,60,.12);border:2px solid #1f9fd6;overflow:hidden}
.et-plan--head{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;padding:26px 20px}
.et-plan__pair{display:flex;align-items:center;gap:14px}
.et-plan__tag{background:#1f9fd6;color:#fff;font-weight:900;font-size:13px;letter-spacing:.2em;padding:8px 16px;border-radius:4px}
.et-plan__pair b{font-size:clamp(28px,4vw,44px);font-weight:900;color:#0b2a4a;line-height:1}
.et-plan__pair b small{font-size:.44em;margin-left:2px}
.et-plan__title{background:#1f9fd6;color:#fff;font-weight:900;font-size:clamp(14px,1.7vw,18px);padding:14px 10px;text-align:center;line-height:1.5}
.et-plan__title span{display:block;font-size:.7em;font-weight:700;opacity:.85;margin-top:2px}
.et-plan__body{display:flex;padding:22px 10px}
.et-plan__body>div{flex:1;text-align:center}
.et-plan__body span{display:block;font-size:13px;font-weight:700;color:#5a7591;margin-bottom:6px}
.et-plan__body b{font-size:clamp(19px,2.4vw,27px);font-weight:900;color:#1f9fd6;letter-spacing:-.01em}
.et-plan__body b small{font-size:.5em;color:#5a7591;margin-left:1px}
.et-plantitle{text-align:center;margin-top:34px}
.et-plantitle p{font-size:clamp(20px,3vw,34px);font-weight:900;color:#0b2a4a;line-height:1.5;
  display:inline-block;border-bottom:5px solid #1f9fd6;padding-bottom:4px}
.et-plantitle em{font-style:normal;font-size:1.5em;color:#1f9fd6;vertical-align:-3px}
.et-plan__lead{
  text-align:center;font-size:clamp(13px,1.5vw,15.5px);line-height:1.95;
  color:#3a5670;margin:6px auto 20px;max-width:760px;
}
.et-plan__lead b{color:#0d5390;font-weight:900}
.et-plantitle p span{font-size:.72em}
/* 2行が横に並ぶと下線が段違いになるので、必ず改行させる */
.et-plantitle p{display:table;margin-left:auto;margin-right:auto}
.et-plantitle__sub{margin-top:14px}

/* ================= サポート体制 ================= */
.et-support{display:flex;gap:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 26px rgba(3,32,60,.10);margin-top:36px}
.et-support__col{flex:1 1 33%;padding:0 0 26px;border-right:1px solid #dceffb}
.et-support__col:last-child{border-right:none}
/* 見出しは元LPと同じ「右が尖った矢印リボン」。段階が進むほど濃くする */
.et-support__head{
  background:#7cc7e8;color:#fff;font-weight:900;
  font-size:clamp(13.5px,1.5vw,17px);text-align:center;padding:14px 22px 14px 14px;
  margin-bottom:22px;position:relative;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.et-support__col:nth-child(2) .et-support__head{background:#2aa3ed}
.et-support__col:nth-child(3) .et-support__head{background:#0d5390}
.et-support__col:last-child .et-support__head{
  clip-path:none;padding-right:14px;
}
.et-support__list{list-style:none;padding:0 20px;margin:0}
.et-support__list li{position:relative;padding-left:20px;margin-bottom:14px;font-size:14px;font-weight:700;color:#0b2a4a;line-height:1.6}
.et-support__list li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:#1f9fd6}
.et-support__list li span{display:block;font-weight:500;font-size:12.5px;color:#5a7591;padding-left:6px;margin-top:3px}
.et-support__down{width:0;height:0;margin:4px auto 16px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #1f9fd6}
.et-support__small{font-size:11.5px;color:#5a7591;padding:0 20px;margin-top:18px;line-height:1.8}
@media(max-width:899px){.et-support{flex-direction:column}.et-support__col{border-right:none;border-bottom:1px solid #dceffb}}

/* ================= 事例 ================= */
.et-case{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 24px rgba(3,32,60,.12);display:flex;flex-direction:column}
.et-case__head{background:linear-gradient(160deg,#0d5390,#062a5e);color:#fff;padding:18px 18px 16px}
.et-case__head span{display:inline-block;background:#3fc9f5;color:#03203c;font-size:11.5px;font-weight:900;padding:3px 12px;border-radius:50px;margin-bottom:8px}
.et-case__head h4{font-size:clamp(16px,2vw,21px);font-weight:900;line-height:1.45}
.et-case__head em{font-style:normal;color:#5fdcff;font-size:1.25em}
.et-case__body{padding:16px 18px 6px;flex:1}
.et-case__body p{font-size:13.5px;color:#3a5670;line-height:1.85}
.et-case__graph{padding:4px 12px 10px}
.et-case__graph svg{width:100%;height:auto;display:block}
.et-case table{width:100%;border-collapse:collapse;font-size:13px}
.et-case th,.et-case td{padding:9px 14px;border-top:1px solid #e3f2fc;text-align:left}
.et-case th{background:#f2faff;color:#5a7591;font-weight:700;width:36%}
.et-case td{font-weight:700;color:#0b2a4a}
.et-case__note{margin-top:26px;font-size:12.5px;color:#5a7591;text-align:center;line-height:1.9}

/* ================= 支援先の声 ================= */
.et-voice{display:flex;gap:22px;flex-wrap:wrap;align-items:stretch;margin-top:40px}
.et-voice__card{
  flex:1 1 300px;background:#fff;border-radius:10px;padding:0 26px 28px;text-align:left;
  box-shadow:0 8px 30px rgba(3,32,60,.12),0 0 0 1px rgba(63,201,245,.16);
  display:flex;flex-direction:column;
}
.et-voice__head{text-align:center;margin-bottom:18px}
.et-voice__face{
  display:block;width:104px;height:104px;margin:-24px auto 10px;border-radius:50%;
  background:linear-gradient(180deg,#eaf6ff,#dceffb);
  box-shadow:0 6px 18px rgba(3,32,60,.14);
  object-fit:cover;object-position:50% 6%;
}
.et-voice__who{font-size:12.5px;font-weight:700;color:#5a7591;letter-spacing:.04em}
.et-voice__title{
  font-size:clamp(16px,1.9vw,19px);font-weight:900;color:#0b2a4a;line-height:1.6;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #e3f2fc;
  position:relative;
}
.et-voice__title::before{
  content:"“";position:absolute;left:-4px;top:-18px;
  font-family:"Noto Serif JP",serif;font-size:44px;line-height:1;
  color:rgba(31,159,214,.22);pointer-events:none;
}
.et-voice__title em{font-style:normal;color:#0d8fd4;font-size:1.3em;letter-spacing:-.01em}
.et-voice__text{font-size:13.5px;line-height:1.95;color:#3a5670}
@media(max-width:899px){
  .et-voice{gap:34px;margin-top:34px}
  .et-voice__card{flex:1 1 100%;padding:0 20px 24px}
  .et-voice__face{width:84px;height:84px;margin-top:-20px}
}

/* ================= AI人材の例 ================= */
.et-people{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.et-person{flex:1 1 380px;max-width:520px;background:#fff;border-radius:12px;padding:26px 24px;box-shadow:0 6px 26px rgba(3,32,60,.12);text-align:left}
.et-person__head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.et-person__avatar{flex:0 0 62px;height:62px;border-radius:50%;background:linear-gradient(140deg,#3fc9f5,#0d5390);
  color:#fff;font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.et-person__name{font-size:21px;font-weight:900;color:#0b2a4a;line-height:1.3}
.et-person__attr{font-size:12.5px;color:#5a7591;font-weight:700}
.et-person__text{font-size:14px;line-height:1.9;color:#3a5670;margin-bottom:16px}
.et-person dl{margin-bottom:14px}
.et-person dt{font-size:12px;font-weight:900;color:#1f9fd6;letter-spacing:.08em;margin-bottom:6px}
.et-person dd{font-size:13.5px;line-height:1.8;color:#0b2a4a}
.et-person dd ul{margin:0;padding-left:18px}
.et-person__tags{display:flex;flex-wrap:wrap;gap:6px}
.et-person__tags span{background:#eaf6ff;border:1px solid #a9d8ec;border-radius:50px;padding:4px 12px;font-size:12px;font-weight:700;color:#0d5390}
/* #request は元テーマで濃紺地だったが、白地に変更したため文字色を反転
   （style.css側に!important付きの背景指定が直接埋め込まれているため、
   こちらも!importantで上書き） */
#request{background:linear-gradient(180deg,#ffffff 0%,#f2faff 100%)!important}
.request__inner h2{color:#062a5e!important}
.request__inner h2::before{background:#062a5e!important}
.et-people__note{text-align:center;margin-top:26px;font-size:14px;font-weight:700;color:#5a7591}

/* ================= フッター =================
   淡い地に黒文字。1カラムに畳んで、リンクは横並びのシンプルな導線に。 */
#footer{background:#eaf4fb!important;color:#0b2a4a}
#footer .footer__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:22px;padding:44px 0 36px;border-bottom:1px solid rgba(11,42,74,.14);
}
#footer .footer__logo{margin:0}
#footer .footer__logo img{max-width:220px;width:70vw;height:auto}
.et-foot__nav{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 28px;padding:0;margin:0;
}
.et-foot__nav a{
  color:#0b2a4a;font-size:14px;font-weight:700;text-decoration:none;
  padding:6px 2px;display:inline-block;line-height:1.5;border-bottom:1px solid transparent;
}
.et-foot__nav a:hover{color:#0d8fd4;border-bottom-color:#0d8fd4}
.et-foot__tel{margin:0;color:#3a5670}
.et-foot__tel span{display:block;font-size:12px;font-weight:700;margin-bottom:2px}
.et-foot__tel a{
  display:block;font-size:clamp(22px,2.6vw,28px);font-weight:900;
  color:#0b2a4a;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
}
.et-foot__tel small{display:block;font-size:12px;margin-top:2px}
#footer .footer__cr{background:#dfeaf3;color:#5a7591;font-size:12px}

/* ハンバーガー内の連絡先（元LPの電話画像を置き換え） */
.hamburger__tel{background:#eaf4fb}
.et-menu__tel{display:block;text-align:center;text-decoration:none;padding:6px 0}
.et-menu__tel span{display:block;font-size:12px;font-weight:700;color:#3a5670;margin-bottom:2px}
.et-menu__tel b{display:block;font-size:26px;font-weight:900;color:#0b2a4a;letter-spacing:.02em}
.et-menu__tel small{display:block;font-size:12px;color:#5a7591;margin-top:2px}
.globalMenuSp{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* =====================================================================
   RICH LAYER — 「AIっぽさ」を抜いて、質感のある見え方に寄せる
   ===================================================================== */

/* ---- FV：ささやきコピー（課題提起） ---- */
.et-fv__whisper{
  font-family:"Noto Serif JP",serif;font-weight:500;
  font-size:clamp(13px,1.5vw,17px);color:#cfe6f5;letter-spacing:.06em;
  margin-bottom:16px;padding-left:56px;position:relative;line-height:1.9;
}
.et-fv__whisper::before{
  content:"";position:absolute;left:0;top:.85em;width:40px;height:1px;
  background:linear-gradient(90deg,#5fdcff,rgba(95,220,255,0));
}

/* ---- FV：斜め帯を上質に ---- */
.et-slant{
  background:linear-gradient(180deg,#ffffff,#eef7fd);
  font-family:"Noto Serif JP",serif;font-weight:700;letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(3,20,46,.45),0 0 0 1px rgba(255,255,255,.6) inset;
}
.et-slant em{
  font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:1.6em;
  background:linear-gradient(180deg,#1f9fd6,#0a4f86);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.et-slant--main{
  font-family:"Noto Sans JP",sans-serif;font-weight:900;letter-spacing:-.01em;
  transform:rotate(-2.2deg) translateX(14px);
}
.et-slant--main b{
  font-weight:900;
  background:linear-gradient(180deg,#0d5390,#062a5e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- FV：画像挿入枠 ---- */
.et-fv__visual{
  position:relative;aspect-ratio:16/7;width:100%;margin:20px 0 18px;border-radius:10px;
  background:
    linear-gradient(135deg,rgba(95,220,255,.10),rgba(6,42,94,.35)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px);
  border:1px dashed rgba(95,220,255,.55);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 60px rgba(63,201,245,.10);
}
.et-fv__visual span{
  font-size:13px;font-weight:700;letter-spacing:.5em;color:rgba(207,230,245,.75);
  text-indent:.5em;
}
.et-fv__visual::before,.et-fv__visual::after{
  content:"";position:absolute;width:22px;height:22px;border:2px solid #5fdcff;
}
.et-fv__visual::before{left:-1px;top:-1px;border-right:none;border-bottom:none;border-radius:12px 0 0 0}
.et-fv__visual::after{right:-1px;bottom:-1px;border-left:none;border-top:none;border-radius:0 0 12px 0}

/* ---- FV：写真を差した状態（A案：紺地に溶かさず、白いパネルとして置く） ----
   画像の地が淡いパステルなので、無理にフェードさせず角丸パネルとして見せ、
   外周のシアングローだけをLP側の“光”に合わせて共有させている。 */
.et-fv__visual--photo{
  aspect-ratio:auto;display:block;overflow:hidden;
  background:#fff;border:none;border-radius:14px;
  margin:22px 0 20px;
  box-shadow:
    0 20px 54px rgba(3,20,46,.50),
    0 0 0 1px rgba(255,255,255,.38),
    0 0 62px rgba(63,201,245,.22);
}
.et-fv__visual--photo::before,.et-fv__visual--photo::after{display:none}
.et-fv__visual--photo img{display:block;width:100%;height:auto}
/* スマホでは横長すぎてマスコットが小さくなるので、左右を少しだけ詰める */
@media(max-width:599px){
  .et-fv__visual--photo{aspect-ratio:2.2/1;margin:18px 0 16px}
  .et-fv__visual--photo img{height:100%;object-fit:cover;object-position:50% 50%}
}

/* ---- FV：ブランド行 ---- */
.et-fv__brand{border-left:none;padding-left:0;position:relative;padding-top:16px;margin-bottom:16px}
.et-fv__brand::before{
  content:"";position:absolute;left:0;top:0;width:70px;height:2px;
  background:linear-gradient(90deg,#5fdcff,rgba(95,220,255,0));
}
.et-fv__company{font-family:"Noto Serif JP",serif;font-weight:600;letter-spacing:.14em;color:#bfe4f7}
.et-fv__service{font-family:"Noto Sans JP",sans-serif;letter-spacing:.01em}
.et-fv__tag{font-family:"Noto Serif JP",serif;font-weight:500;letter-spacing:.04em;color:#a9d3ea}

/* ---- FV：実績バッジを上質に ---- */
.et-fv__proof li{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.28);border-radius:4px;
  box-shadow:0 6px 22px rgba(3,20,46,.28);
}
.et-fv__proof strong{font-family:"Noto Serif JP",serif;font-weight:700;color:#fff}
.et-fv__proof strong small{font-family:"Noto Sans JP",sans-serif;font-weight:700;color:#9fd8f2}
.et-fv__proof span{letter-spacing:.08em;color:#a9d3ea;font-weight:500}

/* ---- 動画ブロック ---- */
#movie{
  background:
    radial-gradient(900px 420px at 50% 0%,rgba(63,201,245,.16),transparent 70%),
    linear-gradient(180deg,#03142e,#062a5e);
  padding:76px 0 84px;
}
.et-movie__inner{width:90%;max-width:900px;margin:0 auto;text-align:center}
.et-movie__label{
  font-size:12px;font-weight:700;letter-spacing:.55em;color:#5fdcff;text-indent:.55em;margin-bottom:14px;
}
.et-movie__title{
  font-family:"Noto Serif JP",serif;font-weight:600;color:#fff;
  font-size:clamp(20px,2.8vw,34px);line-height:1.6;letter-spacing:.04em;margin-bottom:34px;
}
.et-movie__title::after{
  content:"";display:block;width:56px;height:1px;margin:20px auto 0;
  background:linear-gradient(90deg,rgba(95,220,255,0),#5fdcff,rgba(95,220,255,0));
}
.et-movie__frame{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,rgba(95,220,255,.08),rgba(3,20,46,.6));
  border:1px solid rgba(95,220,255,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 0 70px rgba(63,201,245,.10);
}
.et-movie__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.et-movie__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;color:rgba(207,230,245,.8);font-size:13px;font-weight:700;letter-spacing:.12em;
}
.et-movie__ph i{
  display:block;width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(95,220,255,.7);position:relative;
  box-shadow:0 0 34px rgba(63,201,245,.35);
}
.et-movie__ph i::after{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:18px solid #5fdcff;border-top:11px solid transparent;border-bottom:11px solid transparent;
}

/* ---- 設計フロー：スマホは元LP同様の横スクロール ---- */
.et-flow__scroll{width:100%}
@media(max-width:899px){
  .et-flow__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
  .et-flow__inner{min-width:940px}
  .et-flow__row{flex-direction:row;gap:10px}
  .et-flow__row .et-flow__box+.et-flow__box::before{
    left:-9px;top:50%;transform:translateY(-50%);
    border-left:7px solid #7cc7e8;border-right:none;
    border-top:5px solid transparent;border-bottom:5px solid transparent;
  }
  .et-flow__lanes{flex-wrap:nowrap}
}

/* 見出しは問いかけなので、元テーマの「Q」アイコンを活かす */

/* ---- 設計フロー：質感 ---- */
.et-flow__title{
  font-family:"Noto Serif JP",serif;font-weight:600;letter-spacing:.16em;
  background:linear-gradient(180deg,#0d5390,#062a5e);
  box-shadow:0 8px 26px rgba(3,32,60,.28);
}
.et-flow__box,.et-lane__box{
  border-radius:4px;
  box-shadow:0 8px 26px rgba(3,32,60,.10),0 0 0 1px rgba(13,83,144,.12);
}
.et-flow__box b{font-family:"Noto Serif JP",serif;letter-spacing:.2em;color:#0d5390}
.et-flow__box--accent{
  background:linear-gradient(180deg,#f4fbff,#e3f2fc);
  box-shadow:0 10px 30px rgba(3,32,60,.16),0 0 0 1px #1f9fd6;
}
.et-lane__label{
  border-radius:4px;font-family:"Noto Serif JP",serif;font-weight:600;letter-spacing:.08em;
}
.et-deliver{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border:1px solid rgba(13,83,144,.18);border-radius:4px;
}
.et-deliver__title{font-family:"Noto Serif JP",serif;font-weight:600;letter-spacing:.06em}
.et-deliver__grid span{border-radius:2px;border:1px solid rgba(13,83,144,.28)}

/* ---- 追従バナー：控えめに ---- */
#bannerbox{opacity:.94;transition:opacity .2s}
#bannerbox:hover{opacity:1}
#bannerbox img{border-radius:8px;box-shadow:0 16px 40px rgba(3,20,46,.45)}


/* ---- FV：元テーマは背景画像前提の絶対配置だったので、内容に合わせて伸びるように ---- */
#fv{height:auto!important;min-height:0!important;padding-top:0!important}
#fv .fv__inner{position:relative;padding:0}
#fv .fv__content{position:relative;top:auto;left:auto;transform:none;margin:0 auto;padding:46px 0 64px;align-items:flex-start}
#fv .fv__text{width:52%;margin-right:4%}
#fv .fv__form{width:44%}
@media(max-width:899px){
  #fv .fv__content{flex-direction:column;padding:28px 0 44px}
  #fv .fv__text,#fv .fv__form{width:100%;margin-right:0}
  #fv .fv__form{margin-top:28px}
}

/* =====================================================================
   FV：実績バッジに代えて「サービスの強み」を3点で置く
   ===================================================================== */
/* カード＋番号＋グラデ枠の3等分はテンプレ然として見えるので、
   罫線で仕切るだけの組みにする。囲まない・番号を振らない。 */
.et-fv__merit{
  list-style:none;margin:0;padding:20px 0 0;display:flex;
  border-top:1px solid rgba(255,255,255,.24);
}
.et-fv__merit li{flex:1;position:relative;text-align:left;padding:0 20px}
.et-fv__merit li:first-child{padding-left:0}
.et-fv__merit li:last-child{padding-right:0}
.et-fv__merit li + li::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;
  background:rgba(255,255,255,.18);
}
.et-fv__merit b{
  display:block;font-size:clamp(14.5px,1.4vw,16px);font-weight:900;color:#fff;
  line-height:1.55;letter-spacing:.01em;margin-bottom:9px;
}
.et-fv__merit b em{
  font-style:normal;font-size:1.5em;font-weight:900;letter-spacing:-.02em;
  color:#5fdcff;vertical-align:-1px;margin:0 1px;
}
.et-merit__txt{
  display:block;font-size:11.5px;font-weight:500;line-height:1.8;color:#9fc4dc;
}
@media(max-width:899px){
  .et-fv__merit{flex-direction:column;padding-top:16px}
  .et-fv__merit li{padding:14px 0}
  .et-fv__merit li:first-child{padding-top:0}
  .et-fv__merit li:last-child{padding-bottom:0}
  .et-fv__merit li + li{border-top:1px solid rgba(255,255,255,.14)}
  .et-fv__merit li + li::before{display:none}
  .et-fv__merit b{font-size:16px}
  .et-merit__txt{font-size:12px}
}

/* =====================================================================
   対応可能業種（matching2 の末尾）
   ===================================================================== */
.et-industry{
  margin:40px auto 0;max-width:900px;background:#fff;border-radius:10px;
  padding:34px 32px;box-shadow:0 8px 30px rgba(3,32,60,.12);
}
.et-industry__title{
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:"Noto Serif JP",serif;font-weight:600;letter-spacing:.16em;
  font-size:clamp(15px,1.8vw,20px);color:#062a5e;margin-bottom:8px;
}
.et-industry__title::before,.et-industry__title::after{
  content:"";height:1px;width:44px;flex:0 0 44px;
  background:linear-gradient(90deg,rgba(31,159,214,0),rgba(31,159,214,.55));
}
.et-industry__title::after{background:linear-gradient(90deg,rgba(31,159,214,.55),rgba(31,159,214,0))}
.et-industry__note{font-size:13px;color:#5a7591;text-align:center;margin-bottom:24px}
/* 横一列だと窮屈で平坦になるので、幅の揃うグリッドに置く */
.et-industry__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.et-industry__grid span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#f7fcff,#eaf6ff);
  border:1px solid rgba(31,159,214,.30);border-radius:6px;
  padding:15px 8px;font-size:15px;font-weight:700;color:#0d5390;line-height:1.4;
  box-shadow:0 2px 8px rgba(3,32,60,.05);
}
@media(max-width:899px){
  .et-industry{padding:28px 22px;margin-top:32px}
  .et-industry__grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .et-industry__grid span{padding:13px 6px;font-size:13.5px}
}
@media(max-width:599px){
  .et-industry{padding:24px 16px}
  .et-industry__title{gap:12px;letter-spacing:.1em}
  .et-industry__title::before,.et-industry__title::after{width:26px;flex-basis:26px}
  .et-industry__grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .et-industry__grid span{padding:12px 6px;font-size:13px}
}

/* =====================================================================
   選ばれる3つの理由
   ===================================================================== */
#reason{
  background:
    radial-gradient(900px 400px at 50% 0%,rgba(63,201,245,.10),transparent 70%),
    linear-gradient(180deg,#eaf4fb 0%,#dceffb 100%);
  padding:82px 0 88px;
}
.reason__inner{width:92%;max-width:1100px;margin:0 auto;text-align:center}
/* 見出しは元LPと同じ「青い帯＋下向きの尻尾」に寄せる */
.et-reason__title,.et-flow3__title{
  background:#2aa3ed;color:#fff;border-radius:10px;
  max-width:1040px;margin:0 auto 56px;padding:24px 20px;position:relative;
  font-family:"Noto Sans JP",sans-serif;font-weight:900;letter-spacing:.02em;
  font-size:clamp(20px,2.8vw,28px);line-height:1.5;
  box-shadow:0 8px 26px rgba(3,32,60,.18);
}
.et-reason__title::after,.et-flow3__title::after{
  content:"";width:0;height:0;margin:0;background:none;
  border-style:solid;border-width:28px 14px 0;
  border-color:#2aa3ed transparent transparent;
  position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);
}
.et-reason__list{display:flex;gap:20px;margin-top:38px;flex-wrap:wrap;align-items:stretch}
.et-reason__card{
  flex:1 1 300px;background:#fff;border-radius:10px;padding:30px 24px 26px;
  text-align:left;position:relative;
  box-shadow:0 8px 30px rgba(3,32,60,.12),0 0 0 1px rgba(63,201,245,.16);
}
/* 番号はカードの外に出した丸バッジに */
.et-reason__card{padding-top:38px}
.et-reason__no{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:19px;color:#fff;
  background:linear-gradient(180deg,#3fc9f5,#0d5390);
  box-shadow:0 6px 18px rgba(3,32,60,.25);letter-spacing:.02em;
}
.et-reason__card h3{
  font-size:clamp(17px,2vw,21px);font-weight:900;color:#0b2a4a;line-height:1.5;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #e3f2fc;
}
.et-reason__card p{font-size:13.5px;line-height:1.95;color:#3a5670}
@media(max-width:599px){
  #reason{padding:56px 0 60px}
  .et-reason__list{gap:14px;margin-top:28px}
  .et-reason__card{padding:40px 18px 22px}
  .et-reason__card h3 br{display:none}
}

/* =====================================================================
   料金：時間単価が最も安いプランの強調 ＋ トライアル枠
   ===================================================================== */
.et-plan--head .et-plan__pair b{font-size:clamp(22px,3.1vw,36px)}
/* 「主力プラン」の帯テキストは2段重ねで見た目が煩雑だったため廃止。
   枠線を太く・濃くするだけで主力プランだと分かるようにする */
.et-plan--best{border-color:#0d5390;border-width:4px;position:relative}
.et-plan--best .et-plan__title{background:linear-gradient(180deg,#1f9fd6,#0d5390)}
.et-plan__desc{
  font-size:13.5px;font-weight:700;color:#0b2a4a;line-height:1.7;
  text-align:center;padding:0 16px;margin:0 0 14px;
}
.et-plan__scope{list-style:none;margin:0;padding:0 20px 24px;text-align:left}
.et-plan__scope li{
  position:relative;padding-left:16px;margin-bottom:8px;
  font-size:12px;font-weight:500;color:#3a5670;line-height:1.6;
}
.et-plan__scope li::before{
  content:"";position:absolute;left:0;top:6px;width:6px;height:6px;
  border-radius:50%;background:#1f9fd6;
}
.et-plan__scope li:last-child{margin-bottom:0}

.et-trial{
  max-width:760px;margin:26px auto 0;text-align:center;color:#fff;
  background:linear-gradient(135deg,#03142e 0%,#062a5e 100%);
  border-radius:10px;padding:28px 24px 24px;
  box-shadow:0 12px 36px rgba(3,20,46,.35),0 0 0 1px rgba(95,220,255,.32);
}
.et-trial__badge{
  display:inline-block;background:linear-gradient(180deg,#5fdcff,#22b3ee);
  color:#03203c;font-weight:900;font-size:13px;letter-spacing:.08em;
  padding:6px 20px;border-radius:50px;margin-bottom:16px;
  box-shadow:0 0 24px rgba(95,220,255,.45);
}
.et-trial__badge em{font-style:normal;font-size:1.5em;vertical-align:-2px;margin:0 3px}
.et-trial__main{
  font-size:clamp(18px,2.5vw,27px);font-weight:900;line-height:1.5;margin-bottom:14px;
}
.et-trial__main b{font-weight:700;opacity:.5;text-decoration:line-through;font-size:.82em}
.et-trial__main s{text-decoration:none;color:#5fdcff;margin:0 10px;font-weight:400}
.et-trial__main strong{
  font-size:1.3em;font-weight:900;
  background:linear-gradient(180deg,#bdefff,#3fc9f5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.et-trial__note{font-size:12.5px;line-height:1.85;color:#bfe4f7}
@media(max-width:599px){
  .et-trial{padding:22px 16px 20px;margin-top:20px}
  .et-trial__main{font-size:19px}
}

/* 選ばれる理由カード内の注記 */
.et-reason__note{display:block;margin-top:12px;font-size:11.5px;line-height:1.7;color:#8ba3b8}

/* =====================================================================
   かかるのは稼働した時間ぶんだけ（plan 内）
   ===================================================================== */
.et-onlyfee{
  max-width:760px;margin:0 auto 8px;background:#fff;border:2px solid #1f9fd6;
  border-radius:10px;padding:24px 22px;box-shadow:0 6px 24px rgba(3,32,60,.10);
}
.et-onlyfee__head{
  font-weight:900;font-size:clamp(16px,2vw,21px);color:#062a5e;text-align:center;
  margin-bottom:16px;letter-spacing:.02em;
}
.et-onlyfee__list{
  list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.et-onlyfee__list li{
  flex:1 1 200px;background:#f2faff;border-radius:6px;padding:14px 10px;text-align:center;
  font-size:13.5px;font-weight:700;color:#3a5670;line-height:1.6;
}
.et-onlyfee__list li b{display:block;font-size:clamp(19px,2.4vw,26px);font-weight:900;color:#1f9fd6;margin-top:4px}
.et-onlyfee__note{font-size:12px;color:#5a7591;text-align:center;line-height:1.8}
@media(max-width:599px){
  .et-onlyfee{padding:20px 16px}
  .et-onlyfee__list li{flex:1 1 100%}
}

/* =====================================================================
   ご依頼までの流れ
   ===================================================================== */
#flow{background:linear-gradient(180deg,#ffffff 0%,#f2faff 100%);padding:80px 0 84px}
.flow__inner{width:92%;max-width:1100px;margin:0 auto;text-align:center}
.et-flow3__list{display:flex;gap:18px;margin-top:44px;flex-wrap:wrap;align-items:stretch}
.et-flow3__step{
  flex:1 1 280px;background:#fff;border-radius:10px;padding:34px 22px 22px;text-align:left;
  position:relative;box-shadow:0 8px 28px rgba(3,32,60,.10),0 0 0 1px rgba(63,201,245,.16);
}
.et-flow3__step + .et-flow3__step::before{
  content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  border-left:8px solid #7cc7e8;border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.et-flow3__no{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:12.5px;letter-spacing:.14em;
  color:#fff;background:linear-gradient(180deg,#1f9fd6,#0d5390);
  padding:8px 20px;border-radius:50px;white-space:nowrap;
  box-shadow:0 5px 16px rgba(3,32,60,.22);
}
.et-flow3__step h3{font-size:clamp(17px,2vw,20px);font-weight:900;color:#0b2a4a;margin-bottom:12px}
.et-flow3__step p{font-size:13.5px;line-height:1.95;color:#3a5670;margin-bottom:12px}
.et-flow3__step small{
  display:inline-block;background:#f2faff;border-radius:50px;padding:5px 14px;
  font-size:11.5px;font-weight:700;color:#0d5390;
}
@media(max-width:899px){
  .et-flow3__step + .et-flow3__step::before{
    left:50%;top:-13px;transform:translateX(-50%);
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:8px solid #7cc7e8;border-bottom:none;
  }
}
@media(max-width:599px){
  #flow{padding:56px 0 60px}
  .et-flow3__list{gap:22px;margin-top:28px}
  .et-flow3__step{padding:22px 18px 20px}
}

/* =====================================================================
   RESPONSIVE LAYER
   ブレイクポイント
     〜599px      … スマホ（元テーマの .sp2 が出る帯）
     600〜899px   … 大型スマホ／タブレット（ヘッダーはハンバーガー・fixed 62px）
     900〜1099px  … 小型PC（.pc が出る帯）
     1100px〜     … PC
   元テーマは PC 固定幅（width:fit-content / 540px / 750px 等）が
   中途半端に残るので、この層でまとめて画面追従に直している。
   ===================================================================== */

/* ---- 基盤 ---- */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.et-flow__hint{display:none}
/* 吹き出しは DOM 順が「文→番号」なので、反転指定だと左右が入れ替わらない */
@media(min-width:600px){.et-talk__row--r{flex-direction:row}}
img,svg,video,iframe{max-width:100%}
img,svg{height:auto}
h1,h2,h3,h4,h5,p,li,dt,dd,th,td,label,a,span,b,strong{overflow-wrap:break-word}
table{max-width:100%}

/* 固定ヘッダーに見出しが潜らないようにアンカー位置を補正 */
#fv,#movie,#consWhy,#worry,#matching,#katazuku,#recommend,#matching2,#reason,
#risk,#plan,#support,#flow,#case,#request,#faq,#form_right,#footer{scroll-margin-top:72px}
@media(min-width:900px){
  #fv,#movie,#consWhy,#worry,#matching,#katazuku,#recommend,#matching2,#reason,
  #risk,#plan,#support,#flow,#case,#request,#faq,#form_right,#footer{scroll-margin-top:16px}
}

/* =========================================================
   〜899px：ヘッダーが fixed（高さ62px）になる帯の共通調整
   ========================================================= */
@media(max-width:899px){

  /* 固定ヘッダーぶんの逃げ。FV の上端が隠れていた */
  #fv{padding-top:62px!important}

  /* FV：元テーマの width:fit-content で 353px に潰れていたのを解除 */
  #fv .fv__content{
    width:100%!important;max-width:100%!important;
    padding-left:5%;padding-right:5%;box-sizing:border-box;
  }
  #fv .fv__text,#fv .fv__form{width:100%;max-width:640px;margin-left:auto;margin-right:auto}
  .et-fv{max-width:100%;margin:0 auto}
  .et-fv__catch{align-items:center}
  .et-fv__whisper{padding-left:0;text-align:center}
  .et-fv__whisper::before{display:none}
  .et-fv__brand{text-align:center}
  .et-fv__brand::before{left:50%;transform:translateX(-50%)}
  .et-slant--main{transform:rotate(-2.2deg)}

  /* 元テーマの PC 固定幅を画面幅に追従させる */
  .worry__left__box,.worry__inner h2,.worry__inner h3{width:100%;max-width:100%}
  .risk__inner h2,.matching__inner h2{width:100%;max-width:100%}
  .plan__box,.recommend__box,.risk__box,.faq__block,.buttons__in{max-width:100%}

  /* セクション左右の余白を統一 */
  .worry__inner,.matching__inner,.recommend__inner,.matching2__inner,
  .risk__inner,.plan__inner,.support__inner,.case__inner,
  .request__inner,.faq__inner,.answer__inner{
    width:90%;max-width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;
  }
  .risk__box,.plan__box,.recommend__box{width:100%;box-sizing:border-box}

}

/* =========================================================
   マッチング図：縦積みでの見え方を作り直す
   ========================================================= */
@media(max-width:899px){
  .et-match{flex-direction:column;gap:0;margin-top:24px}
  .et-match__col{flex:0 0 auto;width:100%;max-width:420px;min-width:0;margin:0 auto}
  /* 正円だと縦に間延びするのでカードに */
  .et-match__name{aspect-ratio:auto;border-radius:10px;padding:20px 16px;max-width:100%}
  .et-match__bridge{
    flex:0 0 auto;flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:8px;width:100%;max-width:420px;margin:18px auto 8px;
    position:relative;padding-bottom:24px;
  }
  .et-match__bridge::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border-top:12px solid rgba(255,255,255,.75);
    border-left:10px solid transparent;border-right:10px solid transparent;
  }
  .et-match__arrow{
    width:auto;flex:0 1 auto;padding:8px 14px;font-size:11.5px;line-height:1.55;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);border-radius:6px;
  }
  .et-match__arrow::before,.et-match__arrow::after{display:none}
  .et-match__match{margin:0 auto}
}

/* =========================================================
   セクション別：〜899px
   ========================================================= */
@media(max-width:899px){
  /* movie */
  #movie{padding:56px 0 64px}

  /* なぜプロに任せるか */
  .consWhy__inner{padding:56px 0}
  .et-flow{margin-top:36px}

  /* 高すぎる…：本文は行頭を揃えたほうが読める。見出しは中央のまま */
  .worry__left__box,.worry__box2{text-align:center}
  .worry__left__box p,.worry__box2 p{text-align:left;line-height:1.95}
  .worry__inner h3{font-size:clamp(15px,4.2vw,22px);line-height:1.75}
  .et-q{text-align:center}

  /* 設計フロー：横スクロールできることを明示 */
  .et-flow__hint{
    display:block;text-align:center;font-size:11.5px;font-weight:700;
    color:#5a7591;letter-spacing:.04em;margin:-14px 0 14px;
  }

  /* リスク：SPだけ左寄せになっていた見出しを中央に戻す */
  .risk__inner h2{text-align:center;line-height:1.75;font-size:clamp(16px,4.3vw,22px)}
  .risk__inner p{white-space:nowrap;font-size:clamp(14px,4vw,18px);padding:8px 22px}

  /* 料金 */
  .et-plan--head{gap:18px;padding:22px 16px}
  .et-plan__body{padding:18px 6px}

  /* AI人材の例：dt/dd の横並びをやめる */
  .et-person{padding:22px 18px}
  .et-person dl{flex-direction:column;gap:8px;align-items:flex-start}
  .et-person dt{width:auto;min-width:0;padding:6px 12px}
  .et-person dd{width:100%}

  /* CTAブロック */
  .buttons{padding:36px 5%}
  .buttons__in{gap:16px}
  .buttons .btn__or,.buttons .btn{min-height:56px;width:100%;max-width:480px}

  /* フォーム：iOS で入力時に拡大されないよう 16px を確保 */
  .my-form input,.my-form select,.my-form textarea{
    min-height:48px;font-size:16px;box-sizing:border-box;max-width:100%;
  }
  .mktoButton{min-height:54px;width:100%}
  .form_content{padding:22px 18px;box-sizing:border-box}

  #footer .footer__inner{width:90%;padding:36px 0 30px;gap:18px}
  .et-foot__nav{gap:8px 20px}
  .et-foot__nav a{font-size:13.5px}
}

/* =========================================================
   〜599px：スマホ専用の詰め
   ========================================================= */
@media(max-width:599px){
  #fv .fv__content{padding-left:5%;padding-right:5%}
  .et-fv__visual{aspect-ratio:16/9;margin:16px 0 14px}
  .et-fv__proof li{padding:12px 8px}

  #movie{padding:44px 0 52px}
  .et-movie__title{margin-bottom:24px}

  /* PC 用の改行が入ると読みにくいので流す */
  .worry__left__box p br,.worry__box2 p br{display:none}

  .et-talk__row{gap:10px}
  .et-talk__row p{padding:14px 18px;border-radius:22px}
  .et-rec{padding:22px 16px}

  .et-risk{padding:26px 16px}
  .et-support__col{padding-bottom:20px}
  .et-support__list{padding:0 16px}

  .et-case__head,.et-case__body{padding-left:16px;padding-right:16px}
  .et-person__head{gap:12px}
  .et-person__avatar{flex:0 0 52px;height:52px;font-size:16px}
  .et-person__name{font-size:18px}

  .et-deliver{padding:24px 16px}
  .et-deliver__grid span{font-size:12px;padding:6px 12px}

  .footer__inner{width:88%}
  .footer__logo img{max-width:180px}
}

/* 375px 以下（iPhone SE 等） */
@media(max-width:389px){
  .et-slant{padding:7px 16px}
  .et-slant--main{padding:9px 18px}
  .risk__inner p{padding:8px 16px;font-size:14px}
  .et-plan__tag{letter-spacing:.1em;padding:7px 10px;font-size:12px}
  .footer__right{grid-template-columns:1fr}
  .et-deliver__grid{gap:7px}
}

/* =========================================================
   600〜899px：縦に伸びすぎるカード群を2列に畳む
   ========================================================= */
@media(min-width:600px) and (max-width:899px){
  .recommend__in__box{width:48%}
  .plan__in__box{width:48%}
  .plan__in__box.et-plan--head{width:100%}
  .et-talk{max-width:640px}
  .worry__left__box p,.worry__box2 p{max-width:560px;margin-left:auto;margin-right:auto}
}

/* =========================================================
   900px〜：PC 側の詰め
   ========================================================= */
@media(min-width:900px){
  #fv .fv__content{width:92%;max-width:1200px}

  /* 料金プランは3本立てなので3列に（元テーマは width:370px の2列前提） */
  .plan__box{max-width:900px}
  .plan__in__box{width:31.5%}
  .plan__in__box.et-plan--head{width:100%}
  .et-plan__title{font-size:clamp(14px,1.5vw,17px);padding:13px 6px}
  .et-plan__body{padding:20px 6px}
  .et-plan__body b{font-size:clamp(17px,1.9vw,22px)}
  .et-plan__body span{font-size:12px}

  /* リスクは3枚（元テーマの width:32.3% 3列レイアウトのまま使用） */
}
@media(min-width:900px) and (max-width:1099px){
  #fv .fv__text{width:50%;margin-right:4%}
  #fv .fv__form{width:46%}
  .et-fv__proof li{flex:1 1 120px}
  .et-match__bridge{flex:0 0 100px}
  .et-match__col{min-width:0}
}

/* =========================================================
   PC 追従バナー（画像 → HTML 化。サービス名の差し替えに追従させるため）
   ========================================================= */
#bannerbox{background:none}
.et-fab{
  display:block;width:250px;text-decoration:none;overflow:hidden;
  border-radius:10px 0 0 0;
  background:linear-gradient(180deg,#03142e 0%,#062a5e 100%);
  box-shadow:0 -8px 34px rgba(0,0,0,.45),0 0 0 1px rgba(95,220,255,.28) inset;
}
.et-fab__top{
  display:block;background:#0b2a4a;color:#cfe6f5;font-size:11.5px;font-weight:700;
  text-align:center;padding:8px 6px;letter-spacing:.02em;line-height:1.4;
}
.et-fab__body{display:block;padding:16px 14px 18px;text-align:center}
/* 生成画像の地が完全な透過ではないので、白い円に収めて意図的な見せ方にする */
.et-fab__mark{
  width:86px;height:86px;margin:-2px auto 6px;display:block;
  border-radius:50%;background:#fff;object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.32);
}
.et-fab__name{
  display:block;font-size:25px;font-weight:900;color:#fff;line-height:1.25;letter-spacing:.01em;
  text-shadow:0 0 22px rgba(63,201,245,.5);
}
.et-fab__co{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:#bfe4f7;margin-top:7px}
.et-fab__free{
  display:inline-block;margin:12px 0 10px;background:#fff;color:#062a5e;
  font-size:11.5px;font-weight:900;padding:4px 13px;border-radius:50px;
}
.et-fab__btn{
  display:block;background:linear-gradient(180deg,#5fdcff 0%,#22b3ee 55%,#0d8fd4 100%);
  color:#03203c;font-weight:900;font-size:14px;padding:12px 8px;border-radius:6px;
  box-shadow:0 3px 0 #0a5c8c;
}
.et-fab:hover .et-fab__btn{background:linear-gradient(180deg,#7ee7ff 0%,#33c2f7 55%,#1099df 100%)}
@media(min-width:900px) and (max-width:1099px){
  .et-fab{width:210px}
  .et-fab__name{font-size:21px}
}

/* スマホ用の追従CTA（PCの#bannerboxはスマホでは.pcにより非表示のため、
   スマホ側は別要素で常時追従させる。既存のapp.jsの#bannerbox__sp向け
   クリックで消える挙動とは無関係の新規要素として実装） */
#mobileCta{display:none}
@media(max-width:899px){
  #mobileCta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:9999;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:#fff;box-shadow:0 -6px 20px rgba(3,32,60,.16);
  }
  .et-mobile-cta__btn{
    display:flex;align-items:center;justify-content:center;
    width:100%;padding:15px 20px;border-radius:50px;
    font-size:15px;letter-spacing:.02em;
  }
}

/* =====================================================================
   「金額が高すぎる」後半：全部同じ扱いの段落が並んで平板だったので、
   メディア／課題／事実／想い の4つに役割を分けて強弱をつける
   ===================================================================== */

/* 吹き出しの尻尾はSVG(.et-q__bg)側で描画済み */

/* メディア掲載（ラベル・タグ一覧は削除し、注記文のみ。
   フォントは.et-worry__leadと統一）
   .worry__box2 p{text-align:left}（899px以下、本文を読みやすくする用）が
   .et-media__note にも及んでPC分割幅などで左寄りになるため、
   .et-media直下のpとして詳細度を上げて中央寄せを固定する */
.et-media{
  max-width:720px;margin:0 auto 44px;text-align:center;
}
.et-media .et-media__note{
  font-size:clamp(16px,2.1vw,22px)!important;font-weight:900;color:#0b2a4a;
  line-height:1.85!important;text-wrap:balance;text-align:center;
  word-break:keep-all;overflow-wrap:break-word;
}
/* 親.worry__box2がmax-width:580pxで幅を制限しているため、PC幅では
   3行に収まる余白が無く4行に折り返してしまう。900px相当まで幅を
   広げて中央寄せするブレイクアウト。899px以下は元の幅のまま */
@media(min-width:900px){
  .et-media{
    width:min(900px,90vw);max-width:900px;
    position:relative;left:50%;transform:translateX(-50%);
  }
}
.et-media__note b{color:#0d8fd4;font-weight:900}

/* 課題の提示：ここだけ大きく置く */
.et-worry__lead{
  font-size:clamp(16px,2.1vw,22px)!important;font-weight:900;color:#0b2a4a;
  line-height:1.85!important;margin-bottom:36px;
}
.et-worry__lead b{color:#0d8fd4;font-weight:900}
.worry__box2 p.et-worry__but{
  font-size:clamp(26px,4.2vw,38px)!important;font-weight:900;color:#062a5e;
  text-align:center!important;line-height:1.4!important;margin-bottom:18px;letter-spacing:.04em;
}

/* 事実：数字を主役にする */
.et-worry__fact{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  max-width:660px;margin:0 auto 38px;padding:24px 26px;
  background:linear-gradient(135deg,#03142e,#062a5e);border-radius:10px;
  box-shadow:0 10px 30px rgba(3,20,46,.28);
}
.et-worry__num{
  font-size:clamp(46px,6vw,68px);font-weight:900;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(180deg,#bdefff,#3fc9f5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.et-worry__num small{font-size:.32em;margin-left:3px;letter-spacing:.02em}
.et-worry__fact p{
  font-size:clamp(14px,1.7vw,17px)!important;font-weight:700;color:#fff;
  line-height:1.8!important;text-align:left;margin:0!important;
}

/* 最後の一文：明朝で余韻を残す */
.et-worry__wish{
  font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:clamp(16px,2.2vw,23px)!important;color:#062a5e;
  line-height:1.9!important;letter-spacing:.04em;margin:0!important;
  padding-top:8px;position:relative;
}
.et-worry__wish::before{
  content:"";display:block;width:44px;height:1px;margin:0 auto 22px;
  background:linear-gradient(90deg,rgba(31,159,214,0),#1f9fd6,rgba(31,159,214,0));
}

@media(max-width:599px){
  .worry__box2 .et-q{margin-bottom:36px}
  .et-media{margin-bottom:32px}
  .et-worry__fact{gap:10px;padding:20px 16px;text-align:center;flex-direction:column}
  .et-worry__fact p{text-align:center}
  .et-worry__lead{margin-bottom:28px}
}

/* =====================================================================
   POLISH LAYER — 中央揃えの多用と均一な余白が「AI生成っぽさ」の主因。
   読ませる箇所は左詰めにし、階層ごとに余白と密度を変える。
   ===================================================================== */

/* ---- サポート体制：箇条書きを左詰めに ---- */
.et-support__col{text-align:left}
.et-support__list li{text-align:left}
.et-support__list li span{text-align:left}
.et-support__small{text-align:left}
.et-support__list li::before{top:9px}

/* ---- 問い合わせフォーム：ラベルも入力欄も左詰めに ---- */
.form_content .my-label-name{
  display:flex!important;align-items:center;gap:5px;
  justify-content:flex-start!important;text-align:left!important;
  margin-bottom:6px;
}
.form_content .my-label-name label{text-align:left!important;font-weight:700}
.form_content .my-form p{text-align:left!important}
.form_content .form_sentence{text-align:left!important;line-height:1.85}
.form_content .form_text p{text-align:left!important}
.form_content input,
.form_content select,
.form_content textarea{text-align:left!important;width:100%}
.form_content .my-form-button{text-align:center}

/* ---- 余白のリズム：セクションの上下を揃えて、詰まりすぎを解消 ---- */
#movie,#reason,#flow,#contact{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(60px,7.5vw,100px)}

/* ---- カードの影を一段深く。薄い影の量産は安っぽく見える ---- */
.et-reason__card,.et-flow3__step,.et-voice__card,.et-rec,.et-person,.et-case,
.et-industry,.et-onlyfee,.et-plan{
  box-shadow:0 2px 4px rgba(3,32,60,.04),0 12px 32px rgba(3,32,60,.10);
}

/* ---- 見出しの字間を締める（日本語の太字は詰めた方が締まる） ---- */
.et-reason__title,.et-flow3__title,.et-bottomform__title{letter-spacing:.01em}
h2,h3{letter-spacing:.01em}

/* ---- 本文の可読性：行長を抑える ---- */
.et-reason__card p,.et-flow3__step p,.et-voice__text,.et-person__text{
  font-size:14px;line-height:1.95;
}

/* FVの強み：3列とも2行で揃うよう、数字の倍率を少し抑える */
.et-fv__merit b em{font-size:1.35em}
.et-fv__merit b{min-height:2.9em}
@media(max-width:899px){
  .et-fv__merit b{min-height:0}
  .et-fv__merit b br{display:none}
}

/* 送信ボタン：左詰め指定の影響で中央からずれていたので明示的に中央へ */
.form_content .my-form-button{display:flex;justify-content:center;margin-top:22px}
.form_content button.mktoButton{width:100%;max-width:420px;display:block}

/* 下部フォームは濃紺地に置くので、カードは白で締める */
#contact .form_content{background:#fff!important;border-color:rgba(63,201,245,.35)}

/* フォーム：ラベルと入力欄は左詰めのまま、説明文と同意文だけ中央に戻す */
.form_content .form_sentence{text-align:center!important}
.form_content .form_text p{text-align:center!important}

/* =====================================================================
   DESIGN TOKENS — 角丸11種・影50種がバラついていたのを、
   カード / 小要素 / ピル の3段階と、影3段階に揃える。
   ばらついた数値の集合が「安っぽさ」の正体なので、ここで束ねる。
   ===================================================================== */
:root{
  --r-lg:12px;      /* 面のあるカード */
  --r-md:6px;       /* タグ・バッジなど小さい面 */
  --r-pill:50px;
  --sh-1:0 1px 3px rgba(3,32,60,.04), 0 6px 16px rgba(3,32,60,.07);
  --sh-2:0 2px 5px rgba(3,32,60,.05), 0 14px 36px rgba(3,32,60,.12);
  --sh-3:0 4px 10px rgba(3,20,46,.18), 0 22px 50px rgba(3,20,46,.30);
}

/* 面のあるカードは角丸と影を共通化 */
.et-reason__card,.et-flow3__step,.et-voice__card,.et-rec,.et-person,.et-case,
.et-industry,.et-onlyfee,.et-plan,.et-risk,.et-support,
.form_content,.faq__box{
  border-radius:var(--r-lg)!important;
  box-shadow:var(--sh-2)!important;
}

/* 濃色で見せる強調ブロックは一段深い影 */
.et-trial,.et-worry__fact,.et-fab,.et-q{
  border-radius:var(--r-lg)!important;
  box-shadow:var(--sh-3)!important;
}

/* 小さい面は角丸を揃える */
.et-industry__grid span,.et-deliver__grid span,
.et-flow__box,.et-lane__box,.et-onlyfee__list li,.et-person__tags span{
  border-radius:var(--r-md)!important;
}

/* ピル形状（バッジ・タグ） */
.et-flow__title,.et-lane__label,.et-match__badge,.et-match__match,
.btn__free,.et-fab__free,.et-flow3__no,.et-voice__who,.et-trial__badge,
.et-flow3__step small{border-radius:var(--r-pill)}

/* 円形 */
.et-reason__no,.et-talk__ico,.et-person__avatar,.et-voice__face,.et-fab__mark{border-radius:50%!important}

/* =====================================================================
   TYPO — 注記類のサイズと色を揃える（今はセクションごとにバラバラ）
   ===================================================================== */
.et-case__note,.et-people__note,.plan__note,.et-onlyfee__note,
.et-reason__note,.et-industry__note,.et-support__small,.et-deliver__note{
  font-size:12.5px;line-height:1.9;color:#5a7591;
}
.et-deliver__note{text-align:center;margin-top:14px}

/* セクション見出し（元テーマ h2）の字間を締めて、太字の締まりを出す */
.consWhy__inner h2,.worry__inner h2,.matching__inner h2,.recommend__inner h2,
.matching2__inner h2,.risk__inner h2,.plan__inner h2,.support__inner h2,
.case__inner h2,.request__inner h2,.faq__inner h2{letter-spacing:.02em}

/* =====================================================================
   カタヅクAI — コアコピーと7ステップ
   ===================================================================== */

/* FV：コアコピーを主役に。タグラインより一段大きく置く */
.et-fv__tag--core{
  font-family:"Noto Sans JP",sans-serif!important;
  font-size:clamp(19px,2.6vw,30px)!important;font-weight:900!important;
  color:#fff!important;letter-spacing:.02em!important;line-height:1.5!important;
  margin-bottom:10px!important;text-shadow:0 0 26px rgba(63,201,245,.4);
}
.et-fv__sub{
  font-family:"Noto Serif JP",serif;font-weight:500;
  font-size:clamp(13px,1.5vw,16px);line-height:1.9;letter-spacing:.03em;
  color:#a9d3ea;margin-bottom:18px;
}

/* 工程図：いきなりAIを入れない、という前置き */
.et-flow__note{
  text-align:center;font-size:clamp(13px,1.5vw,15px);line-height:1.9;
  color:#3a5670;max-width:640px;margin:-14px auto 16px;
}
.et-flow__note b{color:#0d5390;font-weight:900}

/* 7ステップ：横スクロール幅を7枚ぶんに広げる */
@media(max-width:899px){
  .et-flow__inner{min-width:1260px}
}
.et-flow__row--7 .et-flow__box{flex:1 1 140px;min-width:140px}
@media(min-width:900px){
  .et-flow__row--7{gap:8px}
  .et-flow__row--7 .et-flow__box{padding:14px 10px 12px;font-size:13.5px}
  .et-flow__row--7 .et-flow__box i{font-size:11px;margin-top:6px}
}

/* 7ステップ：PCでは折り返さず7等分に収める（min-width が効いて7枚目が溢れていた） */
@media(min-width:900px){
  .et-flow__row--7{flex-wrap:nowrap;gap:7px}
  .et-flow__row--7 .et-flow__box{flex:1 1 0;min-width:0;padding:14px 8px 12px;font-size:13px}
  .et-flow__row--7 .et-flow__box i{font-size:10.5px;line-height:1.55}
  .et-flow__row--7 .et-flow__box+.et-flow__box::before{left:-7px;border-left-width:5px}
}