.services-hero{background:#252e54;color:white;padding:60px 0}.services-hero h1{font-size:clamp(34px,4vw,53px)}.services-hero .eyebrow{color:#d0b77c}.services-hero .label{color:#a2d5d1}.services-hero .lead{color:#d0dbea;font-size:15px}.hero-link{color:white;font-size:13px;font-weight:700}.service-path{display:flex;gap:22px;align-items:center;margin-top:40px}.service-path a{background:#ffffff0b;border:1px solid #ffffff38;padding:17px 25px;flex:1;font-size:14px}.service-path span{color:#cbb37b;font:20px Georgia,serif;margin-right:15px}.service-path b{color:#9ad1ce}.conditions{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}.conditions article{border-top:2px solid #b38f48;padding:20px;background:#f6f8fa}.conditions h3{font-size:17px}.conditions p{font-size:13px;margin:0}.term{margin-top:30px;border-left:3px solid #07878b;background:#edf5f4;padding:22px 26px}.term b{font-size:15px}.term p{font-size:13px;margin:10px 0 0}.bandwidth-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:35px}.bandwidth-grid>article{background:white;border:1px solid #dce4e9;border-top:3px solid #07878b}.bandwidth-grid>article:nth-child(2){border-top-color:#b38f48}.bandwidth-head{padding:27px 28px 0}.bandwidth-head .label{font-size:12px}.bandwidth-head h3{font-size:24px}.bandwidth-grid img{width:100%;display:block}.bandwidth-body{padding:25px 28px}.bandwidth-body p,.bandwidth-body li{font-size:13px}.bandwidth-body ul{padding-left:19px;color:#637087}.bandwidth-body li{padding:5px 0}.bandwidth-body .band-note{font-size:11px;margin:22px 0 0;padding-top:15px;border-top:1px solid #e2e7ed}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;min-width:680px;text-align:left;font-size:13px;margin-top:35px}caption{text-align:left;font-weight:700;margin-bottom:15px}th,td{padding:17px 20px;border:1px solid #dce4e9}thead th{background:#252e54;color:white}tbody th{background:#eaf0f3}td{background:white;color:#637087}.feature-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:24px;margin-top:35px}.feature-grid article{padding:30px;border:1px solid #dce4e9;display:flex;flex-direction:column}.feature-grid .manager-card{grid-row:span 2;background:#f0f5f6;border-top:3px solid #07878b}.feature-grid .label{font-size:12px}.feature-grid h3{font-size:24px}.feature-grid p,.feature-grid li{font-size:14px}.feature-grid ul{padding-left:18px;color:#637087}.feature-grid li{padding:6px 0}.feature-grid a{font-weight:700;font-size:13px;color:#07878b;margin-top:auto;padding-top:20px}.manager-logo{width:100%;max-width:240px;margin:15px 0 35px}.combination-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}.combination-grid article{padding:27px;background:white;border-top:2px solid #07878b}.combination-grid h3{font-size:20px}.combination-grid p{font-size:14px}.combination-grid article>div{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:25px}.combination-grid span{font-size:10px;color:#07878b;background:#edf5f4;padding:5px 8px}.prototype-banner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.prototype-banner img{width:100%;height:300px;object-fit:cover}.prototype-banner h2{font-size:31px}.prototype-banner p{font-size:14px}.service-cta{background:#edf5f4}@media(max-width:900px){.conditions{grid-template-columns:1fr 1fr}.feature-grid{grid-template-columns:1fr 1fr}.feature-grid .manager-card{grid-row:auto;grid-column:span 2}.manager-logo{margin-bottom:20px}.combination-grid{gap:15px}.service-path{gap:12px}.service-path a{padding:15px}}@media(max-width:640px){.services-hero{padding:40px 0}.services-hero .actions{align-items:flex-start;flex-direction:column}.service-path{flex-direction:column;gap:8px}.service-path a{width:100%}.service-path b{transform:rotate(90deg)}.conditions{gap:12px}.conditions article{padding:18px}.bandwidth-grid,.feature-grid,.combination-grid,.prototype-banner{grid-template-columns:1fr}.feature-grid .manager-card{grid-column:auto}.bandwidth-head{padding:23px 23px 0}.bandwidth-head h3{font-size:22px}.bandwidth-body{padding:23px}.feature-grid article{padding:25px}.prototype-banner{gap:25px}.prototype-banner img{height:230px}.service-cta .actions{align-items:flex-start;flex-direction:column}}
.bandwidth-grid>article>img{width:100%;height:auto;object-fit:contain;padding:18px 16px 0;background:#fff}@media(max-width:640px){.bandwidth-grid>article>img{padding:12px 8px 0}}

/* ── FVに画像を敷く（2026-10-24） ── */
.services-hero{position:relative;isolation:isolate;overflow:hidden}
.services-hero .wrap{position:relative;z-index:1}
.services-hero-photo{position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:center center;z-index:-2}
/* 暗くする処理は画像側に焼き込み済み。ここは文字を読みやすくする保険だけ */
.services-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(0deg,rgba(18,26,48,.80) 0%,rgba(18,26,48,.46) 13%,rgba(18,26,48,.1) 26%,rgba(18,26,48,0) 40%),
  linear-gradient(90deg,rgba(18,26,48,.62) 0%,rgba(18,26,48,.52) 26%,rgba(18,26,48,.26) 42%,rgba(18,26,48,.06) 56%,rgba(18,26,48,0) 70%)}
.services-hero h1,.services-hero .lead{max-width:620px}
.services-hero .service-path a{background:rgba(14,22,44,.55);border-color:#ffffff45}
@media(max-width:860px){
  .services-hero-photo{object-position:66% center}
  .services-hero::after{background:
    linear-gradient(180deg,rgba(32,40,74,.72) 0%,rgba(32,40,74,.64) 45%,rgba(32,40,74,.58) 100%)}
  .services-hero h1,.services-hero .lead{max-width:none}
}

/* 「す。」だけが次の行に落ちるのを防ぐ */
.services-hero .lead,.services-hero .hero-note{text-wrap:pretty}

/* ── ボックス全体を押せるようにする（2026-10-24）──
   いままでは中の小さなリンクしか押せなかった。トップページで
   10/19に同じ直しをしており、やり方をそろえている。
   箱ごと <a> で囲むとHTMLとして正しくなくなるため、
   中のリンクに透明な面（inset:0 の ::after）をかぶせる形。
   キーボードのTabでも、これまでどおりリンクに移動できる。 */
.feature-grid article,.combination-grid article{cursor:pointer;position:relative}
.feature-grid article>a::after,
.combination-grid article>a::after{content:"";position:absolute;inset:0;z-index:1}
/* 押せると分かるように、箱の上にいるあいだは枠を濃くして下線を出す */
.feature-grid article,.combination-grid article{transition:border-color .2s}
.feature-grid article:hover,.combination-grid article:hover{border-color:#07878b}
.feature-grid article:hover a,
.combination-grid article:hover a{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .feature-grid article,.combination-grid article{transition:none}
}