@charset "utf-8";
/* ============================================================
   top.css — front-page.php（TOPページ）専用
   common.css の型だけを使う。ここで新しい見出し・カードを作らない。
   ============================================================ */

/* ============ ヒーロー ============ */
/* ヒーローだけコンテンツ幅を広くとる。
   文字ブロックも画像もこの幅で止めるので、左右の余白は常に同じになる。
   他セクションの --wrap:1160px は変えない（ヒーロー専用の値）。 */
.hero{position:relative;overflow:hidden;background:#04101F;--wrap-hero:1560px;}
/* 画像はヒーローの高さに合わせて右寄せ。
   画面いっぱいに引き伸ばすと、幅が広いほど上下が切れる。
   高さを基準にすれば縦は切れず、キャラ全員が必ず収まる。 */
.hero__img{
  position:absolute;top:0;bottom:0;left:auto;
  /* 画像の右端を、文字ブロックと同じ箱（--wrap-hero）の右端で止める。
     right:0 だと画像だけが画面の右端に張り付き、
     1560pxを超えた分の余白がすべて左に溜まっていた。
     ★ここに right:0 や負の値を書かないこと。左右が非対称に戻る。 */
  right:max(0px, calc((100% - var(--wrap-hero)) / 2));
  height:100%;width:auto;max-width:none;
  object-fit:cover;
  /* 画像の右端を切り、キャラクターを内側へ寄せる。
     center のままだと主人公（右端の男性）が画面の外へ逃げ、
     人物の集まりが右に偏って見えた。 */
  object-position:82% center;
  /* 画像の右端を160pxかけて透明にし、背景色へ溶かす。
     マスクを外すと要素の境界がそのまま直線として出る。
     px指定なので画面幅が変わってもフェードの長さは一定。 */
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 160px);
  mask-image:linear-gradient(to left,transparent 0,#000 160px);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,16,31,0) 70%,rgba(4,16,31,.55) 90%,#04101F 100%),
    /* 文字の後ろを暗く保ちつつ、画像側へなめらかに抜く。
       以前は 22% まで #04101F で平らだったため、そこから薄くなる
       境目が縦線として見えていた。平らな区間を作らないこと。 */
    linear-gradient(90deg,
      #04101F 0%,
      rgba(4,16,31,.98) 18%,
      rgba(4,16,31,.86) 32%,
      rgba(4,16,31,.58) 46%,
      rgba(4,16,31,.26) 62%,
      rgba(4,16,31,.06) 76%,
      rgba(4,16,31,0) 88%);
}
.hero__inner{
  position:relative;z-index:1;
  max-width:var(--wrap-hero);margin:0 auto;padding:72px var(--gut);
  min-height:clamp(440px,42vw,600px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero__body{max-width:min(560px,100%);}
.hero h1{
  font-family:var(--f-head);font-weight:900;
  font-size:clamp(26px,4vw,40px);line-height:1.35;color:#fff;
  margin:0 0 var(--s4);text-wrap:balance;text-shadow:0 2px 24px rgba(4,16,31,.9);
}
.hero__lead{
  color:var(--ink-mid);max-width:44ch;margin:0 0 var(--s5);
  text-shadow:0 1px 12px rgba(4,16,31,.9);
}
/* ボタンは常に横並び。縦に積むと2タップ分の高さを取り、
   スマホのファーストビューから比較表が押し出される。 */
.hero__btns{display:flex;gap:var(--s3);flex-wrap:nowrap;}
.hero .btn--ghost{background:rgba(4,16,31,.5);}
/* 縦長の画面では画像を上に置き、その下に文字を重ねる */
@media (max-width:1024px){
  /* 縦積みでは画像を全幅に戻す。この幅では左右の余白が出ないため。
     右端のマスクも不要（切れ目が出ない）ので解除する。 */
  .hero__img{
    position:absolute;top:0;left:0;right:0;bottom:auto;
    width:100%;height:auto;object-fit:cover;object-position:center top;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .hero::after{background:linear-gradient(180deg,rgba(4,16,31,.20) 0%,rgba(4,16,31,.45) 30%,rgba(4,16,31,.92) 52%,#04101F 72%);}
  .hero__inner{min-height:0;padding-top:calc(52vw + 16px);padding-bottom:var(--s6);}
}
@media (max-width:820px){
  .hero h1{font-size:26px;}
}
/* スマホでも横2列を維持する。
   ボタンの中で文字を折り返させ、幅は半分ずつに揃える。
   矢印は幅を食うのでこの幅では隠す。 */
@media (max-width:560px){
  .hero__btns{gap:10px;}
  .hero__btns .btn{
    flex:1 1 0;min-width:0;
    justify-content:center;text-align:center;
    padding-left:12px;padding-right:12px;
    font-size:13px;line-height:1.45;
    white-space:normal;
  }
  .hero__btns .btn::after{content:none;}
}

/* ============ グリッド（機能カード・記事カード） ============ */
.top-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
@media (max-width:820px){.top-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.top-grid3{grid-template-columns:1fr;}}

/* ============ 業種セクション ============ */
.scene{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:var(--s5);}
.scene img{width:100%;}
.scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,16,31,.95) 0%,rgba(4,16,31,.80) 34%,rgba(4,16,31,.15) 68%,rgba(4,16,31,0) 92%);
}
.scene__txt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,4vw,44px);}
.scene__txt p{font-family:var(--f-head);font-weight:700;font-size:clamp(15px,2.2vw,22px);line-height:1.6;margin:0;max-width:22ch;text-shadow:0 2px 18px rgba(4,16,31,.9);}
.scene__txt span{font-size:clamp(11px,1.4vw,14px);color:var(--ink-mid);margin-top:10px;max-width:34ch;text-shadow:0 1px 12px rgba(4,16,31,.9);}
@media (max-width:640px){
  .scene::after{background:linear-gradient(180deg,rgba(4,16,31,.30) 0%,rgba(4,16,31,.88) 55%,#04101F 92%);}
  .scene__txt{justify-content:flex-end;padding-bottom:20px;}
}
.ind-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5);}
@media (max-width:900px){.ind-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:520px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ============ 地域 ============ */
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5);}
.areas a{
  font-size:13px;color:var(--ink-mid);background:var(--card);
  border:1px solid var(--line);border-radius:3px;padding:7px 12px;
}
.areas a:hover{color:var(--accent);border-color:var(--accent-deep);}

/* ============ 最終CTA ============ */
.final{position:relative;overflow:hidden;background:#061A31;border-top:1px solid var(--line);}
.final__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;}
.final::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#04101F 4%,rgba(4,16,31,.92) 38%,rgba(4,16,31,.45) 66%,rgba(4,16,31,.15) 90%);
}
.final__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:80px var(--gut);}
.final h2{
  font-family:var(--f-head);font-weight:900;font-size:clamp(22px,3.4vw,32px);line-height:1.4;
  color:#fff;margin:0 0 var(--s3);text-shadow:0 2px 20px rgba(4,16,31,.9);
}
.final p{color:var(--ink-mid);max-width:42ch;margin:0 0 var(--s5);text-shadow:0 1px 12px rgba(4,16,31,.9);}
.final__btns{display:flex;gap:var(--s3);flex-wrap:wrap;}
.final .btn--ghost{background:rgba(4,16,31,.5);}
@media (max-width:820px){
  .final::after{background:linear-gradient(180deg,rgba(4,16,31,.35) 0%,rgba(4,16,31,.90) 46%,#04101F 78%);}
  .final__inner{padding-top:200px;padding-bottom:56px;}
}

/* ============ 03 探し方は3つ（案2c：見出しの帯） ============
   3枚とも同じ色・同じ大きさ。どれか1枚だけ強調しないこと。 */
.way{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
@media (max-width:860px){.way{grid-template-columns:1fr;gap:14px;}}
.way__card{display:flex;flex-direction:column;border:1px solid var(--accent-deep);background:#0A1B2E;color:var(--ink);}
.way__card:hover{background:#0F2640;color:var(--ink);}
.way__band{display:flex;align-items:center;gap:16px;padding:18px 24px;background:linear-gradient(120deg,#16405F,#0F2E4A);}
.way__no{font-family:var(--f-mono);font-weight:400;font-size:40px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;}
.way__en{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#B6E5FB;padding-left:16px;border-left:1px solid rgba(127,209,245,.3);align-self:stretch;display:flex;align-items:center;}
.way__body{display:flex;flex-direction:column;gap:12px;padding:24px 24px 26px;flex:1 1 auto;}
.way__ttl{font-family:var(--f-head);font-weight:700;font-size:21px;line-height:1.45;}
.way__desc{font-size:13.5px;line-height:1.85;color:var(--ink-mid);flex:1 1 auto;text-wrap:pretty;}
.way__who{font-size:12.5px;color:#C3D3E4;}
.way__go{margin-top:6px;display:flex;align-items:center;justify-content:space-between;background:var(--accent);color:#04101F;font-family:var(--f-head);font-weight:700;font-size:15px;padding:14px 20px;}
.way__go i{font-style:normal;font-family:var(--f-mono);}
.way__card:hover .way__go{background:#A2E0FA;}
@media (max-width:640px){
  .way__band{padding:14px 18px;}
  .way__no{font-size:32px;}
  .way__body{padding:18px 18px 20px;}
  .way__ttl{font-size:18px;}
}

/* fd_picture() が img を <picture> で包むため、レイアウト上は包みを無いものとして扱う */
.hero picture,.scene picture,.final picture{display:contents;}

/* ============ もう一歩くわしく（#knowledge） ============
   旧トップからリンクしていた解説ページの一覧。文字リンクだけで、カードにはしない
   （カードは4種まで：規定v1.1）。スマホは1列。 */
.kn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s6);}
@media (max-width:760px){.kn{grid-template-columns:1fr;gap:var(--s5);}}
.kn__head{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--gold);padding:0 0 10px;margin:0;border-bottom:1px solid var(--line);}
.kn__list{list-style:none;margin:0;padding:0;}
.kn__list a{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:13px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);font-size:15px;line-height:1.6;}
.kn__list a:hover{color:var(--accent);}
.kn__list i{font-style:normal;font-family:var(--f-mono);color:var(--accent);flex:none;}