@charset "UTF-8";
/* =========================================================
   Route7 トップページ E案 ファーストビュー

   あしらいと文字色は、横田様が最初に作られたテストサイト
   （assets/testsite/styles.css）に合わせています。
     ・紺のグラデーション ＋ 細いグリッド
     ・背景のパズルは濃度を落として敷く
     ・キャッチ2行目は淡いターコイズ、主ボタンはターコイズ
     ・通信の線は「破線を流す」方式。上り＝#46D1C9／下り＝#DFC27F

   右の通信図だけ、2026-10-15のご要望に沿って描き直しています。
   ========================================================= */

.fv--E{
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 77% 46%, rgba(126,142,183,.25) 0, transparent 36%),
    linear-gradient(135deg, #252E54 0%, #1C2447 62%, #151D3C 100%);
}
/* 背景のパズル。濃度を落として敷き、右へ向かって消す */
.fv--E .fv__bg{
  position: absolute; inset: 0; z-index: 0;
  background-image: url("./fv/fv-E.jpg");
  /* そのままだと「RouteSeven」のピースが左に寄りすぎるため、
     少し拡大して右へずらしている */
  background-size: 126% auto; background-position: 0% center;
  background-repeat: no-repeat;
}
/* 背景の上に紺をかぶせる。元の .hero-puzzle に入っていた処理 */
.fv--E::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* D案と同じ形（100deg・26%まで一定・58%で抜ける）。
     ただしD案の背景は濃紺、こちらは明るいパズルのため、
     同じ0.30では文字が読めない（実測1.6〜1.9:1）。濃度だけ上げている。 */
  /* 左右を濃く、中心を薄く。文字と図は両端に寄っているため、
     真ん中だけパズルが見えるようにしている */
  /* 2026-10-21 横田様より「パズルがはっきり出すぎている」とのご希望で濃くした。
     2026-10-24 もう一段濃くした（まだはっきり出すぎているとのご指摘）。
     旧々 .90 / .84 / .62 / .50 / .50 / .80 / .92
     旧   .94 / .90 / .74 / .64 / .64 / .88 / .95
     数字を下げると薄く、上げると濃くなる。いちばん効くのは中央の2つ */
  background: linear-gradient(95deg,
    rgba(7,21,45,0.97) 0%,
    rgba(7,21,45,0.95) 28%,
    rgba(7,21,45,0.87) 40%,
    rgba(7,21,45,0.81) 52%,
    rgba(7,21,45,0.81) 64%,
    rgba(7,21,45,0.93) 84%,
    rgba(7,21,45,0.97) 100%);
}

/* 細いグリッド。元のサイトと同じあしらい */
.fv--E .fv__scrim{
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(36,213,230,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,213,230,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%, #000);
  mask-image: linear-gradient(to right, transparent, #000 45%, #000);
}

.fv--E .fv__inner{
  position: relative; z-index: 2;
  /* D案と同じ組み方。最大幅で囲わず、両端5vwまで広げる */
  width: 100%; box-sizing: border-box;
  padding: 118px 5vw 150px;
  display: grid; align-content: center; gap: 0 2vw;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  grid-template-areas: "copy fig" "cta fig";
}

.fv--E .fv__catch{ margin: 0 0 30px; line-height: 1.42; letter-spacing: .01em; }
/* 2026-10-23　FV内のロゴを外したぶん、キャッチとリードを大きくした（阪本さんご指示）。
   いちばん長い行は「通信をジャストフィット。」の12文字。
   折り返さない上限は 列幅 ÷ 12.1 なので、左の列を 47%→52% に広げて 60px まで上げている。 */
.fv--E .fv__catch span{ display: block; font-size: clamp(29px, 3.7vw, 60px); font-weight: 600; }
.fv--E .fv__catch-l1{ color: #fff; }
.fv--E .fv__catch-l2{ color: #9CE5E1; }
.fv--E .fv__lead{
  margin: 0 0 54px; font-size: clamp(15px, 1.24vw, 19.5px);
  line-height: 2.05; color: #D7DBE6; font-weight: 400;
}

/* 補助表記をロゴの幅の中で中央に置くため、段落をロゴ幅に合わせる */
.fv--E .fv__logo{ margin: 0 0 44px; width: clamp(230px, 24vw, 360px); }
.fv--E .fv__logo-sub{
  display: block; font-size: clamp(12px, .88vw, 14.5px);
  letter-spacing: .34em; margin: 0 0 10px; color: rgba(255,255,255,.78);
  text-align: center;
  /* 字間の分だけ最後に余白がつくので、同じ量を先頭に足して中心をそろえる */
  text-indent: .34em;
}
.fv--E .fv__logo img{ display: block; width: 100%; height: auto; }

.fv--E .fv__actions{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; max-width: 620px;
}
.fv--E .fv__btn{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 20px; border-radius: 4px;
  font-size: clamp(13px, 1.02vw, 15px); font-weight: 800;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: .2s;
}
.fv--E .fv__btn--primary{
  background: #00A6A6; color: #fff; border-color: #00A6A6;
  box-shadow: 0 14px 36px rgba(0,166,166,.22);
}
.fv--E .fv__btn--primary:hover{ background: #00B8B8; border-color: #00B8B8; }
/* 主・副とも塗り。色だけ変える（D案と同じ考え方） */
.fv--E .fv__btn--secondary{
  background: #C9A55C; color: #252E54; border-color: #C9A55C;
  box-shadow: 0 14px 36px rgba(201,165,92,.22);
}
.fv--E .fv__btn--secondary:hover{ background: #D8B771; border-color: #D8B771; }
.fv--E .fv__note{ margin: 28px 0 0; font-size: clamp(12.5px, .92vw, 14.5px); color: #C3D2DE; }

/* ── 右の通信図 ───────────────────────────── */
.fv--E .fv__copy{ grid-area: copy; max-width: min(790px, 52vw); align-self: end; }
.fv--E .fv__cta{ grid-area: cta; align-self: start; }
/* t11　返信の目安を、2つの枠の下に※付きで左寄せに置く。
   もとは「原則2営業日以内」が新規のお客様の枠の中にあり、
   既存のお客様には関係ないように見えていた（10/19 横田様ご指摘）。 */
.contact .reply-note{ margin:16px 0 0; font-size:12.5px; color:#A9BFD0;
                       text-align:left }

/* t3 t9 t10　3つのボタンを同じ形に揃える（阪本さんよりCodePenの見本「高級すぎるボタン」）。

   ふだんは**下に1本線だけ**。カーソルを合わせると、
     ① 下の線が 80% → 100% に伸びる（すぐ）
     ② 左右の線が下から上へ伸びる（0.2秒おくれて）
     ③ 上の線が左右から中へ伸びる（0.4秒おくれて）
   枠線が一周描かれるように見える。離すと逆の順でほどける。

   色は見本の金色から、**ふだん青緑#00A6A6 → カーソルで紺#252E54** に置き換えている。

   線はすべてCSSが描く。HTMLにある空の <span> 2つが、
   1つめ＝左右の線、2つめ＝上の線になる（見本はjQueryで足していたぶん）。
   幅は中の文字に合わせて伸び縮みするので、文言を変えても調整は要らない。 */
/* ── ボタン（2026-10-23　案7「二重枠が重なる」に作り直し）────────────
   10/22のMTGで横田様より
     「ボタンは最初から目立つように。Route7のコンセプトを見る、と分かるデザインに」
     「アンダーラインの長さと位置のバランスを調整」
   とのご指摘。10/20の形は**カーソルを合わせるまで枠が出なかった**ため、
   見ただけではボタンと分からなかった。

   新しい形
     ・ふだんから紺の枠と、右下へ7pxずらした金の枠の二重
     ・カーソルを合わせると金の枠がすっと重なり、地色がわずかに温かくなる
     ・矢印は右へ5px

   ずれた枠のぶん、右と下に7pxの場所が要る（margin で確保している）。
   スマホには @media (hover:hover) で動きを渡さず、:active で押した感触を出す。
   ------------------------------------------------------------------ */
.r7-btn{
  position:relative; display:inline-flex; align-items:center; gap:1.1em;
  padding:1.05em 2.05em;
  margin:0 7px 7px 0;                 /* ずれた枠の居場所 */
  font-size:13.5px; font-weight:700; letter-spacing:.13em; white-space:nowrap;
  color:#252E54; background:#fff; border:1px solid #252E54;
  justify-self:start; text-decoration:none;
  transition:background .3s cubic-bezier(.2,.3,.25,.9);
}
.r7-btn::after{
  content:""; position:absolute; inset:0; border:1px solid #C9A55C;
  transform:translate(7px,7px); pointer-events:none;
  transition:transform .34s cubic-bezier(.2,.3,.25,.9);
}
.r7-btn i{
  font-style:normal; display:inline-block; color:#00A6A6;
  transition:transform .3s cubic-bezier(.2,.3,.25,.9);
}
/* マウスのある機械だけ。スマホはこの指定そのものを読まない */
@media (hover:hover) and (pointer:fine){
  .r7-btn:hover{ background:#fdfbf6 }
  .r7-btn:hover::after{ transform:translate(0,0) }
  .r7-btn:hover i{ transform:translateX(5px) }
}
.r7-btn:focus-visible{ outline:2px solid #00A6A6; outline-offset:3px }
.r7-btn:focus-visible::after{ transform:translate(0,0) }
.r7-btn:active{ background:#f6f1e7 }

/* 紺や青の帯の中に置くときは class="r7-btn r7-btn--rev" を足す */
.r7-btn--rev{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55) }
.r7-btn--rev i{ color:#DFC27F }
.r7-btn--rev::after{ border-color:#DFC27F }
@media (hover:hover) and (pointer:fine){
  .r7-btn--rev:hover{ background:rgba(255,255,255,.08) }
}
.r7-btn--rev:active{ background:rgba(255,255,255,.14) }

/* 動きを減らす設定の方には、枠を最初から重ねて出す */
@media (prefers-reduced-motion:reduce){
  .r7-btn, .r7-btn::after, .r7-btn i{ transition:none }
  .r7-btn::after{ transform:translate(3px,3px) }
}
@media(max-width:620px){
  .r7-btn{ white-space:normal; text-align:center; justify-content:center;
            letter-spacing:.1em; padding:1.05em 1.4em }
  .r7-btn::after{ border-width:1.5px }   /* 小さい画面では金の枠を少し太く */
}

/* styles.css（横田様の原本）に、ボタンにする前のテキストリンク用の指定が
   残っている。それがボタンにも当たってしまうので、ここだけ打ち消す。 */
/* 2026-10-23　ボタンを少し下げた（阪本さんご指示）。
   「Route7はMyRouteManagerによる…TCOの考え方を見る →」の下に
   すき間がほしい、とのこと。原本は margin-top:22px。 */
.sim-concept-bottom{ margin-top:48px }
.sim-concept-bottom a.r7-btn{
  border-bottom:1px solid #252E54; gap:1.1em; min-height:0; color:#252E54;
}
.sim-concept-bottom a.r7-btn:hover,
.sim-concept-bottom a.r7-btn:focus-visible{ color:#252E54 }

/* 事例の一覧ボタンは「全8件」の左。せまい画面では折り返す */
.story-nav{ flex-wrap:wrap; gap:14px }
@media(max-width:620px){
  .story-nav .r7-btn{ order:3; width:100%; justify-content:center }
}

/* 2026-10-30　スマホの見出しを小さく・導入事例の見出しまわりを縦に並べる（阪本さんご指示）。
   34px のままだと見出しが3〜5行に折れる。導入事例は見出しと「← →・一覧ボタン」が
   横並びのままで、見出しが細い幅に押し込まれていた。 */
@media(max-width:620px){
  .section-head h2,.stories h2,.feature-intro h2{ font-size:25px; letter-spacing:-1px }
  .shared-contact h2,.contact h2{ font-size:28px }
  .stories-head{ flex-direction:column; align-items:stretch; gap:24px }
  .story-nav{ justify-content:flex-end }
  .story-nav .r7-btn{ order:0 }
}

/* ── 2026-10-19 のMTGで決まった修正（E案のみ）──────────────
   t5　「Route7が選ばれる理由」の 01〜05 を外した。
       span を消すと左に35pxの空列が残るので、1列にする。 */
.feature-list article{ grid-template-columns:1fr }

/* t7　ステップ番号を「Step 1〜5」に。Arial のままだと和文と並んだとき崩れるため、
       書体を本文のゴシックに替え、字間を詰める。 */
.flow li span{ font:700 12px/1.6 inherit; font-family:inherit;
                letter-spacing:.04em; color:var(--blue) }

/* t8　丸印と、その下の文字を中央に寄せる。
       スマホ（900px以下）は縦並びで左に線が入る作りなので、PC幅だけに当てる。 */
@media(min-width:901px){
  .flow li{ text-align:center }
  .flow li:before{ left:50%; transform:translateX(-50%) }
}

/* 比較表の左上。空のセルだけ灰色の地が残って角が目立っていたため、
   地色と左の白い仕切りを外す（2026-10-20 阪本さんのご提案を試したもの）。
   styles.css は横田様の原本で毎回上書きされるので、E案のCSSに書いている。 */
.sim-compare-table thead td{ background:transparent; border-left:0; }

/* t4　ホバーで浮き上がるボックスは、箱のどこを押しても開くようにする。
       いまは中の小さなリンクしか押せず、箱が浮いても反応しなかった（10/19 横田様ご指摘）。
       対象は浮き上がる3種類ぜんぶ。課題6枚・サービス5枚・活用シーン5枚の計16枚。

       やり方は、中のリンクに「透明な面」をかぶせる書き方（inset:0 の ::after）。
       箱ごと <a> で囲む手もあるが、中にリンクがあると入れ子になって
       HTMLとして正しくなくなるため、この形にしている。
       キーボードのTabでも、これまでどおりリンクに移動できる。 */
.problem-grid article, .service-grid article, .case-grid article{ cursor:pointer }
.service-grid article, .case-grid article{ position:relative }
.problem-grid article > a::after,
.service-grid article > a::after,
.case-grid article h3 > a::after{ content:""; position:absolute; inset:0; z-index:1 }

/* 課題の「解決策を見る」だけ、下端に絶対位置で置かれていた。
   そのままだと透明な面がリンクの大きさで止まってしまうので、
   下端に寄せる書き方を変えている（見た目の位置は変わらない）。 */
.problem-grid article{ display:flex; flex-direction:column }
.problem-grid article a{ position:static; margin-top:auto }

/* 箱の上のどこにいても、押せると分かるように下線を出す */
.problem-grid article:hover a,
.service-grid article:hover a,
.case-grid article:hover h3 a{ text-decoration:underline; text-underline-offset:3px }

/* 図はまとめて縮める。文字だけ元の大きさに残すと、
   「センサー・カメラ」などが円からはみ出すため、全体を同じ倍率で小さくしている。 */
/* 2026-10-23　図が小さいとのご指摘で、85% → 100% に広げた。
   左の列を 52% にしてキャッチを大きくしたぶん、図の列が狭くなっていた。
   列そのものは触らず、列の中での上限だけを外している。 */
.fv--E .fv__figure{ grid-area: fig; margin: 0 auto; width: 100%;
                     max-width: 100%; align-self: center; }
.fv--E .fv__net{ width: 100%; height: auto; display: block; overflow: visible; }

.fv--E .e-orbit{ fill: none; stroke: rgba(214,221,237,.18); stroke-width: 1; }
.fv--E .e-ring{ font-size: 10.5px; letter-spacing: .16em; fill: #96A4C4; font-weight: 600;
                 text-anchor: middle; }
.fv--E .e-pn{ stroke: rgba(116,236,244,.55); stroke-width: 1.4; }
.fv--E .e-pn-label{ font-size: 10.5px; letter-spacing: .16em; fill: #46D1C9; font-weight: 600;
                     text-anchor: middle; }
.fv--E .e-plate{ fill: #0E1630; }   /* 2026-10-20 透過をやめた */

/* ノード。元の .node と同じ（紺の円＋ターコイズの細枠） */
/* 円の周りの線は付けない（塗りだけ） */
.fv--E .e-node-bg{ fill: #082744; stroke: none; }   /* 2026-10-20 透過をやめた */
.fv--E .e-ico{ opacity: .95; }
.fv--E .e-name{ font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px;
                 fill: #fff; text-anchor: middle; }
.fv--E .e-sub{ font-size: 10px; fill: #86A7BD; text-anchor: middle; }
/* クラウドは閉域網の外。弱めて置く */
/* 2026-10-21 CLOUD だけ暗くしていたのをやめ、3つの円をそろえた。
   外側（インターネット側）であることは、閉域網の円の外に置いてあることと
   「INTERNET」のラベルで伝わるため、色まで変える必要がなかった。
   旧: .e-node--out .e-node-bg{fill:#0B142C} / .e-node--out .e-ico{opacity:.82}
   クラス e-node--out は「閉域網の外」の印として残してある。
   また差をつけたくなったら、ここに指定を書き足せばよい */

/* 中心 */
.fv--E .e-core-bg{ fill: #082744; }
.fv--E .e-core-ring{ fill: none; stroke: #61D6CF; stroke-width: 1;
                      filter: drop-shadow(0 0 24px rgba(0,166,166,.45)); }
.fv--E .e-core-name{ font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
                      fill: #fff; text-anchor: middle; }
.fv--E .e-core-sub{ font-size: 10.5px; fill: #86A7BD; text-anchor: middle; }

/* 指標。元の .metric と同じ、左に金の線 */
.fv--E .e-metric rect{ fill: #041224; }
.fv--E .e-metric-bar{ fill: #C9A55C; }
.fv--E .e-metric-l{ font-size: 10px; letter-spacing: 1px; fill: #8FA9BD; }
.fv--E .e-metric-v{ font-size: 13px; font-weight: 700; fill: #fff; }

/* 通信の線。横田様の元のサイトと同じ「破線を流す」方式 */
.fv--E .e-wire{ fill: none; stroke: rgba(76,220,235,.30); stroke-width: 1.6; }
.fv--E .e-up{
  fill: none; stroke: #46D1C9; stroke-width: 2.4; stroke-dasharray: 4 26;
  filter: drop-shadow(0 0 7px rgba(70,209,201,.72));
  animation: e-flow 2.8s linear infinite;
}
.fv--E .e-down{
  fill: none; stroke: #DFC27F; stroke-width: 2.2; stroke-dasharray: 3 34;
  animation: e-back 7s linear infinite; opacity: 0;
}
@keyframes e-flow{ to { stroke-dashoffset: -60; } }
@keyframes e-back{
  0%, 56% { stroke-dashoffset: -80; opacity: 0; }
  64%     { opacity: .72; }
  92%     { stroke-dashoffset: 35; opacity: .72; }
  100%    { stroke-dashoffset: 50; opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .fv--E .e-up, .fv--E .e-down{ animation: none; }
  .fv--E .e-down{ opacity: .5; }
}

/* ── VALUE帯（元のサイトと同じ、下に重ねる1行の帯） ───────── */
.fv--E .fv__value{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 2.2vw;
  padding: 0 4vw; height: 96px;
  background: rgba(24,32,63,.82);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: #A5BACD;
}
.fv--E .fv__value-label{ flex: none; font-size: 10.5px; letter-spacing: .2em; }
.fv--E .fv__value ul{
  display: flex; flex-wrap: nowrap; gap: 1.3vw;
  margin: 0; padding: 0; list-style: none;
  font-size: clamp(11px, .8vw, 12.5px); line-height: 1.6;
}
.fv--E .fv__value li{ white-space: nowrap; }
.fv--E .fv__value b{ display: inline-block; margin-right: 7px; color: #F0D797; font-weight: 700; }

/* ── 確認用の案切り替えバー（本番では削除します） ───────── */
.fv-switch{
  position: fixed; right: 14px; bottom: 104px; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  background: rgba(10,18,40,.9); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 7px 10px; font-size: 12px; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.fv-switch span{ opacity: .7; margin-right: 2px; }
.fv-switch a{
  color: #fff; text-decoration: none; padding: 4px 11px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
}
.fv-switch a.is-current{ background: #00A6A6; color: #fff; border-color: #00A6A6; font-weight: 700; }

/* ── タブレット・スマホ ───────────────────────────── */
@media (max-width: 980px){
  .fv--E .fv__inner{
    width: 100%; box-sizing: border-box;
    padding: 0 0 36px; gap: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "cta" "fig";   /* PCの2列指定を打ち消す */
  }
  .fv--E .fv__copy{ max-width: none; }

  /* スマホは「画像＋文字を重ねたかたまり」→ ボタン → 図 の順に積む */
  .fv--E .fv__copy{
    position: relative; z-index: 2;
    padding: 72px 5.5vw 26px;
  }
  .fv--E .fv__logo{ margin-bottom: 20px; }
  .fv--E .fv__cta{
    position: relative; z-index: 2;
    padding: 0 5.5vw;
  }
  .fv--E .fv__figure{
    position: relative; z-index: 2;
    max-width: 520px; margin: 30px auto 0; padding: 0 5.5vw;
  }

  /* スマホは縦長の専用画像に差し替え、文字が乗っている上部だけに出す。
     coverだと画面の高さに合わせて約2.5倍に伸びるため、
     「RouteSeven」のピースがボタンの真下に隠れ、左も切れていた。
     倍率を固定して、ピースがロゴとボタンのあいだに出るよう引き上げている。
     （ロゴ下端とボタン上端のすき間は、360〜560pxのどの幅でも46〜47px） */
  .fv--E .fv__bg{
    background-image: url("./fv/fv-E-mb.jpg");
    background-size: 760px auto;
    background-position: -160px -72px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%,
                        rgba(0,0,0,.6) 52%, transparent 66%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%,
                rgba(0,0,0,.6) 52%, transparent 66%);
  }
  /* PC用の紺のかぶせは切る（下のscrimで上から下へかけ直すため） */
  .fv--E::after{ background: none; }
  .fv--E .fv__scrim{
    -webkit-mask-image: none; mask-image: none;
    /* 2026-10-21 PCと同じご希望でスマホも濃くした。旧々 .66 / .72 / .84 / .97
       2026-10-24 もう一段濃くした。旧 .78 / .83 / .90 / .98
       スマホは上からかけるので、いちばん効くのは最初の2つ */
    background: linear-gradient(180deg,
      rgba(7,21,45,.90) 0%, rgba(7,21,45,.92) 26%,
      rgba(7,21,45,.95) 46%, rgba(14,22,48,.99) 64%, rgba(14,22,48,1) 100%);
  }

  .fv--E .fv__value{ position: static; height: auto; padding: 16px 5.5vw 20px;
                      flex-wrap: wrap; gap: 10px; }
  .fv--E .fv__value ul{ flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
  .fv--E .fv__value li{ white-space: normal; }
  .fv-switch{ bottom: 14px; right: 10px; font-size: 11px; padding: 6px 8px; }
  .fv-switch a{ padding: 3px 8px; }
}
@media (max-width: 560px){
  .fv--E .fv__br-pc{ display: none; }
  .fv--E .fv__catch span{ font-size: clamp(21px, 6.4vw, 30px); }
  .fv--E .fv__catch{ line-height: 1.5; margin-bottom: 16px; letter-spacing: -.5px; }
  .fv--E .fv__lead{ font-size: 14px; line-height: 1.95; margin-bottom: 24px; }
  .fv--E .fv__logo img{ width: 168px; }
  .fv--E .fv__logo-sub{ font-size: 11.5px; letter-spacing: .2em; }
  .fv--E .fv__actions{ grid-template-columns: 1fr; max-width: none; }
  .fv--E .fv__btn{ min-height: 52px; font-size: 14.5px; }
  .fv--E .fv__note{ font-size: 12px; line-height: 1.8; }
  .fv--E .fv__value ul{ font-size: 12px; }
}

/* ── お問い合わせの3つのボタン（10/20 阪本さんご指摘）──────────
   直す前は「IoTサービスについて相談する」だけに色の変わる指定があり、
   「実機・テストSIMでの検証相談」は**何も起きなかった**。
   「ご利用中のお客様専用」はごく薄く明るくなるだけで、気づきにくかった。

   3つとも同じ決まりにする。
     ・枠と文字が金色（#C9A55C）に寄る
     ・地がすこし明るくなる
     ・矢印が右へ4px動く  ← ほかのボタンと共通の合図 */
.contact-actions a{
  transition:background .22s cubic-bezier(.2,.3,.25,.9), border-color .22s cubic-bezier(.2,.3,.25,.9), color .22s cubic-bezier(.2,.3,.25,.9);
}
.contact-actions a span{ display:inline-block; transition:transform .22s cubic-bezier(.2,.3,.25,.9) }
.contact-actions a:hover span, .contact-actions a:focus-visible span{ transform:translateX(4px) }

.contact-new>a:nth-of-type(1):hover, .contact-new>a:nth-of-type(1):focus-visible{
  background:#0AA3A9; border-color:#C9A55C; color:#fff;
}
.contact-new>a:nth-of-type(2):hover, .contact-new>a:nth-of-type(2):focus-visible{
  background:rgba(255,255,255,.08); border-color:#C9A55C; color:#F2DDB0;
}
.contact-actions .contact-existing>a.contact-general:hover,
.contact-actions .contact-existing>a.contact-general:focus-visible{
  background:rgba(255,255,255,.13); border-color:#C9A55C; color:#F2DDB0;
}

/* FVの2つのボタンにも、同じ矢印の動きをつける */
.fv--E .fv__btn span{ display:inline-block; transition:transform .22s cubic-bezier(.2,.3,.25,.9) }
.fv--E .fv__btn:hover span, .fv--E .fv__btn:focus-visible span{ transform:translateX(4px) }

@media(prefers-reduced-motion:reduce){
  .r7-btn i, .contact-actions a span, .fv--E .fv__btn span{ transition:none }
  .r7-btn:hover i, .contact-actions a:hover span,
  .fv--E .fv__btn:hover span{ transform:none }
}

/* ── 2026-10-27　事例カードの写真を切らずに出す ───────────────────────
   写真は 870x420（比2.07）。枠は高さ固定（210px・比1.71）だったため、
   background-size:cover で左右が38pxずつ切られ、左上のロゴが欠けていた。
   高さを決めずに写真と同じ比にして、全体が入るようにしている。 */
.stories .story-grid .story-visual{
  height:auto; aspect-ratio:870/420; background-size:cover; background-position:center;
}