/* ==============================================
   トップ: top.css
   共通: ../css/common/base.css, header.css, footer.css
============================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ===== HERO ===== */
#hero{position:relative; min-height:520px; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--rule);}
.heroBg{position:absolute; inset:0; background-image:url('./../images/bph5.jpg'); background-size:cover; background-position:center 12.5%; filter:brightness(0.6); z-index:0;}
.heroInner{position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:120px 40px 80px; width:100%; display:grid; grid-template-columns:1fr 340px; gap:60px; align-items:center;}
.heroLabel{font-size:12px; font-weight:700; letter-spacing:3px; color:var(--cyan); text-transform:uppercase; margin-bottom:14px; -webkit-text-stroke:2.5 class="bgCheckBlue"px #FFF; paint-order:stroke;}
.heroCatch{font-size:clamp(24px, 2vw, 36px); font-weight:700; color:#FFF; line-height:1.5; margin-bottom:8px; letter-spacing:1px;}
.heroCatchMain{display:block; font-size:clamp(38px, 4.8vw, 58px); font-weight:700; color:#fff; line-height:1.2; margin-bottom:20px; letter-spacing:-0.5px;}
.heroCatchMain em{color:var(--cyan); font-style:normal;}
.heroSub{font-size:14px; color:#FFF; line-height:1.9; margin-bottom:28px;}
.heroTelWrap{margin-bottom:22px;}
.heroTelLabel{font-size:10px; color:#FFF; letter-spacing:1px; margin-bottom:2px;}
.heroTelNum{font-size:28px; font-weight:700; color:#fff; letter-spacing:2px; line-height:1;}
.heroTelSub{font-size:12px; color:#FFF; margin-top:3px;}
.heroBtns{display:flex; gap:10px; flex-wrap:wrap;}
.heroBtnMain{display:inline-flex; align-items:center; gap:5px; background:var(--cyan); color:#fff; padding:12px 22px; font-size:13px; font-weight:700; border-radius:3px; transition:background 0.18s;}
.heroBtnMain:hover{background:var(--cyan-dark);}
.heroBtnSub{display:inline-flex; align-items:center; background:rgba(255,255,255,0.12); color:#fff; padding:12px 20px; font-size:13px; font-weight:700; border:1.5px solid rgba(255,255,255,0.3); border-radius:3px; backdrop-filter:blur(4px); transition:background 0.18s;}
.heroBtnSub:hover{background:rgba(255,255,255,0.22);}

/* 右：実績グリッド */
.heroRight{display:flex; flex-direction:column; gap:1px;}
.heroStats{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:rgba(255,255,255,0.12); border-radius:4px; overflow:hidden; backdrop-filter:blur(8px);}
.heroStat{background:rgba(13,43,62,0.55); padding:20px 14px; text-align:center;}
.heroStatNum{font-size:28px; font-weight:700; color:var(--cyan); line-height:1;}
.heroStatNum sup, .heroStatNum sub{font-size:14px;}
.heroStatLabel{font-size:12px; color:rgba(255,255,255,0.55); margin-top:6px; line-height:1.4;}

/* ===== TRUST BAR ===== */
#trust{background:#f2f5f7; border-bottom:1px solid var(--rule); padding:11px 0;}
.trustInner{max-width:1160px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;}
.trustItem{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-sub); white-space:nowrap;}
.trustDot{width:6px; height:6px; background:var(--cyan); border-radius:50%; flex-shrink:0;}
.trustDiv{width:1px; height:12px; background:var(--rule);}

/* ===== TROUBLE ===== */
#trouble{background:#eaf8ff;}
.troubleGrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.troubleCard{background:#fff; border:1px solid var(--rule); border-top:3px solid var(--cyan); border-radius:0 0 3px 3px; padding:20px 16px;}
.troubleNum{font-size:12px; font-weight:700; letter-spacing:2px; color:var(--cyan); margin-bottom:7px;}
.troubleTitle{font-size:14px; font-weight:700; color:var(--navy); margin-bottom:7px; line-height:1.4;}
.troubleBody{font-size:12px; color:var(--text-sub); line-height:1.8;}
.troubleBottom{margin-top:14px; padding:16px 20px; background:#fff; border:1px solid var(--rule); border-radius:3px; display:flex; align-items:center; gap:16px;}
.troubleBottomText{font-size:13px; color:var(--text-sub); flex:1; line-height:1.7;}
.troubleBottomText strong{color:var(--navy);}

/* ===== SOLUTION ===== */
/* #solution{background:#fff;} */
.solutionGrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; background:#fff;}
.solutionCard{display:block; border:1px solid var(--rule); border-radius:3px; padding:20px 16px 16px; transition:border-color 0.18s, box-shadow 0.18s;}
.solutionCard:hover{border-color:var(--cyan); box-shadow:0 4px 14px rgba(0,181,217,0.08);}
.solutionCardTitleBody{display:flex; margin-bottom:10px;}
.solutionCardIcon{width:36px; height:36px; background:var(--cyan-light); border-radius:3px; display:flex; align-items:center; justify-content:center;}
.solutionCardIcon svg{width:24px; height:24px;}
.solutionCardTitle{margin-left:5px; font-size:14px; font-weight:700; color:var(--navy); display:flex; justify-content:center; align-items:center;}
.solutionCardBody{font-size:12px; color:var(--text-sub); line-height:1.8; margin-bottom:12px;}
.solutionCardLink{font-size:10px; font-weight:700; color:var(--cyan);}

/* ===== REASON ===== */
#reason{background:#eaf8ff;}
.reasonGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.reasonGrid img{max-width:100%; height:160px; width:100%; object-fit:cover; transition:transform 0.45s ease; filter:brightness(0.88);}
.reasonGrid img:hover{transform:scale(1.02); filter:brightness(0.95);}
.reasonCard{background:#fff; border:1px solid var(--rule); border-radius:3px; padding:24px 20px;}
.reasonCardNum{font-size:10px; font-weight:700; letter-spacing:2px; color:var(--cyan); margin-bottom:9px;}
.reasonCardTitle{font-size:14px; font-weight:700; color:var(--navy); margin-bottom:9px; line-height:1.5;}
.reasonCardBody{font-size:12px; color:var(--text-sub); line-height:1.9;}

/* ===== FLOW ===== */
#flow{background:#e0ebff; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:36px 0 26px;}
.flowSteps{display:flex; align-items:flex-start; gap:0; margin-top:24px;}
.flowStep{flex:1; padding:0 12px; position:relative; text-align:center; margin:0 auto; margin-bottom:2rem;}
.flowStep:not(:last-child)::after{content:''; position:absolute; right:-4px; top:22px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid rgba(0,181,217,0.5);}
.flowStepNum{font-size:12px; font-weight:700; letter-spacing:3px; color:var(--cyan); margin-bottom:8px;}
.flowStepCircle{width:64px; height:64px; border:1.5px solid var(--rule); background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 8px;}
.flowStepCircle svg{width:28px; height:28px;}
.flowStepTitle{font-size:16px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.flowStepBody{font-size:14px; color:var(--text-sub); line-height:1.7;}

/* ===== CTA ===== */
#cta{border-top:1px solid var(--rule); padding:50px 0; text-align:center;}
.ctaInner{max-width:520px; margin:0 auto; padding:0 20px;}
.ctaLabel{font-size:11px; font-weight:700; letter-spacing:3px; color:var(--cyan); margin-bottom:10px;}
.ctaTitle{font-size:clamp(19px, 2.4vw, 25px); font-weight:700; color:var(--navy); margin-bottom:10px; line-height:1.5;}
.ctaSub{font-size:14px; color:var(--text-sub); line-height:1.9; margin-bottom:28px;}
.ctaBox{background:#eaf8ff; border:1px solid var(--rule); border-radius:4px; padding:26px;}
.ctaBoxTelLabel{font-size:12px; color:var(--gray); letter-spacing:1px; margin-bottom:2px;}
.ctaBoxTelNum{font-size:32px; font-weight:700; color:var(--navy); letter-spacing:2px; line-height:1; margin-bottom:2px;}
.ctaBoxTelSub{font-size:12px; color:var(--gray); margin-bottom:18px;}
.ctaBoxBtn{display:flex; align-items:center; justify-content:center; gap:5px; background:var(--cyan); color:#fff; padding:13px 24px; font-size:16px; font-weight:700; border-radius:3px; width:100%; transition:background 0.18s;}
.ctaBoxBtn:hover{background:var(--cyan-dark);}
.ctaBoxNote{font-size:12px; color:var(--gray); margin-top:9px;}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .heroInner{grid-template-columns:1fr; gap:32px; padding:100px 20px 56px;}
  .heroStats{grid-template-columns:repeat(4,1fr);}
  .troubleGrid{grid-template-columns:repeat(2,1fr);}
  .solutionGrid{grid-template-columns:repeat(2,1fr);}
  .reasonGrid{grid-template-columns:repeat(2,auto);}
  #photoStrip{height:170px;}
}
@media(max-width:768px){
  .heroInner{padding:88px 20px 44px;}
  .heroStats{grid-template-columns:repeat(2,1fr);}
  .trustInner{gap:14px; padding:0 20px;}
  .trustDiv{display:none;}
  .flowSteps{flex-direction:column; gap:14px;}
  .flowStep::after{display:none;}
  #photoStrip{grid-template-columns:1fr; height:auto;}
  .photoStripItem{height:150px;}
}
@media(max-width:480px){
  .troubleGrid{grid-template-columns:1fr;}
  .solutionGrid{grid-template-columns:1fr;}
  .reasonGrid{grid-template-columns:1fr;}
}