/* ==============================================
   概要: about.css
   共通: ../css/common/base.css, header.css, footer.css
============================================== */

/* ===== BREADCRUMB ===== */
.breadNav{background:#f7f9fa; border-bottom:1px solid var(--rule); padding:10px 0;}
.breadNavInner{max-width:1160px; margin:0 auto; padding:0 40px; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--gray);}
.breadNavInner a{color:var(--cyan); transition:color 0.18s;}
.breadNavInner a:hover{color:var(--cyan-dark);}
.breadNavSep{color:var(--rule);}

/* ===== SECTION COMMON ===== */
.pageSec{padding:64px 0;}
.pageSecBg{background:#eaf8ff;}
.pageSecGray{background:#f7f9fa;}
.pageSecInner{max-width:1160px; margin:0 auto; padding:0 40px;}

/* ===== CARD GRID ===== */
.cardGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.cardGrid4{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
.cardGridMaker{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.card, .cardEarlier{background:#fff; border:1px solid var(--rule); border-radius:4px; overflow:hidden; transition:box-shadow 0.2s, border-color 0.2s;}
.card:hover{border-color:var(--cyan); box-shadow:0 4px 20px rgba(0,181,217,0.1);}
.cardEarlier:hover{border-color:var(--gray-light); box-shadow:0 4px 20px rgba(41, 44, 44, 0.1);}
.cardImg{width:100%; height:160px; object-fit:contain; background:#f7f9fa; padding:20px; display:block;}
.cardBody{padding:18px 20px 20px;}
.cardLabel{font-size:10px; font-weight:700; letter-spacing:2px; color:var(--cyan); margin-bottom:6px;}
.cardTitle{font-size:15px; font-weight:700; color:var(--navy); margin-bottom:8px; line-height:1.4;}
.cardDesc{font-size:12px; color:var(--text-sub); line-height:1.8; margin-bottom:14px;}
.cardLink{font-size:12px; font-weight:700; color:var(--cyan); display:flex; align-items:center; gap:4px;}
.cardLink::after{content:'→';}

/* ===== PRODUCT DETAIL ===== */
/* .productHero{padding:56px 0; background:#fff; border-bottom:1px solid var(--rule);} */
.productHero{position:relative; z-index:0; margin-top:68px;}
.productHeroInner{max-width:1160px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1fr 400px; gap:60px; align-items:center;}
.productHeroLabel{font-size:10px; font-weight:700; letter-spacing:3px; color:var(--cyan); margin-bottom:10px;}
.productHeroTitle{font-size:clamp(24px, 3vw, 36px); font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:12px;}
.productHeroSub{font-size:15px; color:var(--bg); line-height:1.9; margin-bottom:24px;}
.productHeroTags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:28px;}
.productHeroTag{background:#eaf8ff; border:1px solid rgba(0,181,217,0.2); color:var(--cyan); font-size:11px; padding:3px 12px; border-radius:2px;}
.productHeroBtns{display:flex; gap:10px; flex-wrap:wrap;}
.productHeroImgWrap{background:#f7f9fa; border:1px solid var(--rule); border-radius:4px; padding:32px; display:flex; align-items:center; justify-content:center;}
.productHeroImg{max-width:100%; max-height:260px; object-fit:contain;}

/* ===== FEATURE LIST ===== */
.featureGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.featureCard{background:#fff; border:1px solid var(--rule); border-radius:4px; padding:24px 20px;}
.featureNum{font-size:10px; font-weight:700; letter-spacing:2px; color:var(--cyan); margin-bottom:10px;}
.featureTitle{font-size:14px; font-weight:700; color:var(--navy); margin-bottom:8px; line-height:1.5;}
.featureBody{font-size:12px; color:var(--text-sub); line-height:1.9;}

/* ===== SPEC TABLE ===== */
.specTable{width:100%; border-collapse:collapse; font-size:13px;}
.specTable th, .specTable td{padding:12px 16px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top;}
.specTable th{width:200px; font-weight:700; color:var(--navy); background:#f7f9fa; white-space:nowrap;}
.specTable td{color:var(--text-sub); line-height:1.8;}
.specTable tr:last-child th, .specTable tr:last-child td{border-bottom:none;}

/* ===== FAQ ===== */
.faqList{display:flex; flex-direction:column; gap:10px;}
.faqItem{background:#fff; border:1px solid var(--rule); border-radius:3px; overflow:hidden;}
.faqQ{display:flex; align-items:flex-start; gap:14px; padding:18px 20px; cursor:pointer; transition:background 0.18s;}
.faqQ:hover{background:#f7f9fa;}
.faqQMark{font-size:16px; font-weight:700; color:var(--cyan); flex-shrink:0; line-height:1.5;}
.faqQText{font-size:14px; font-weight:700; color:var(--navy); line-height:1.6; flex:1;}
.faqQArrow{font-size:12px; color:var(--gray); margin-left:auto; flex-shrink:0; transition:transform 0.2s; padding-top:4px;}
.faqItem.isOpen .faqQArrow{transform:rotate(180deg);}
.faqA{display:none; margin-top:10px; padding:0 20px 18px 48px;}
.faqItem.isOpen .faqA{display:block;}
.faqAMark{font-size:16px; font-weight:700; color:var(--text-sub); margin-right:8px;}
.faqAText{font-size:13px; color:var(--text-sub); line-height:1; display:inline;}

/* ===== SERVICE MENU ===== */
.serviceMenuGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.serviceMenuCard{display:block; background:#fff; border:1px solid var(--rule); border-radius:4px; padding:24px 20px; transition:border-color 0.18s, box-shadow 0.18s;}
.serviceMenuCard:hover{border-color:var(--cyan); box-shadow:0 4px 16px rgba(0,181,217,0.08);}
.serviceMenuIcon{width:40px; height:40px; background:#eaf8ff; border-radius:3px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.serviceMenuIcon svg{width:20px; height:20px;}
.serviceMenuTitle{font-size:14px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.serviceMenuDesc{font-size:12px; color:var(--text-sub); line-height:1.8;}

/* ===== INLINE CTA ===== */
.inlineCta{background:var(--navy); padding:48px; border-radius:4px; display:flex; align-items:center; justify-content:space-between; gap:32px;}
.inlineCtaLabel{font-size:10px; font-weight:700; letter-spacing:3px; color:var(--cyan); margin-bottom:8px;}
.inlineCtaTitle{font-size:20px; font-weight:700; color:#fff; line-height:1.5;}
.inlineCtaSub{font-size:13px; color:rgba(255,255,255,0.5); margin-top:6px;}
.inlineCtaBtns{display:flex; flex-direction:column; gap:10px; flex-shrink:0;}
.inlineCtaTel{font-size:22px; font-weight:700; color:#fff; letter-spacing:1px; white-space:nowrap;}
.inlineCtaTelSub{font-size:10px; color:rgba(255,255,255,0.4); margin-top:2px;}

/* ===== WHAT IS (about) ===== */
.whatIsGrid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.whatIsText{font-size:14px; line-height:2; color:var(--text-sub); margin-bottom:20px;}
.whatIsText:last-child{margin-bottom:0;}
.whatIsBox{background:#f7f9fa; border:1px solid var(--rule); border-radius:4px; padding:32px; display:flex; flex-direction:column; gap:16px;}
.whatIsItem{display:flex; align-items:flex-start; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--rule);}
.whatIsItem:last-child{padding-bottom:0; border-bottom:none;}
.whatIsItemIcon{width:36px; height:36px; background:#eaf8ff; border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.whatIsItemTitle{font-size:13px; font-weight:700; color:var(--navy); margin-bottom:3px;}
.whatIsItemDesc{font-size:12px; color:var(--text-sub);}

/* ===== COMPARE (about) ===== */
.compareGrid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.compareCard{background:#fff; border:1px solid var(--rule); border-radius:4px; padding:28px;}
.compareCard.isBp{border:2px solid var(--cyan); position:relative;}
.compareCardBadge{position:absolute; top:-1px; left:20px; background:var(--cyan); color:#fff; font-size:10px; font-weight:700; padding:3px 12px; border-radius:0 0 3px 3px;}
.compareCardLabel{font-size:11px; font-weight:700; letter-spacing:2px; color:var(--gray); margin-bottom:12px;}
.compareCardLabel.cyan{color:var(--cyan); margin-top:8px;}
.compareList{display:flex; flex-direction:column; gap:10px;}
.compareListItem{font-size:13px; color:var(--text-sub); display:flex; gap:8px;}
.compareListItem.isGood{color:var(--text);}
.compareIcon{color:#ddd;}
.compareIcon.good{color:var(--cyan);}

/* ===== FLOW (services) ===== */
.flowList{display:flex; flex-direction:column; gap:2px;}
.flowItem{display:flex; align-items:flex-start; gap:20px; background:#fff; border:1px solid var(--rule); border-radius:3px; padding:20px 24px;}
.flowStep{font-size:11px; font-weight:700; letter-spacing:2px; color:var(--cyan); flex-shrink:0; padding-top:2px; min-width:56px;}
.flowItemTitle{font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.flowItemDesc{font-size:13px; color:var(--text-sub); line-height:1.8;}

/* ===== LINEUP (iwatsu) ===== */
.lineupHeading{font-size:13px; font-weight:700; color:var(--navy); margin-bottom:16px; padding-left:10px; border-left:3px solid var(--cyan);}
.lineupHeadingEol{font-size:13px; font-weight:700; color:var(--navy); margin-bottom:16px; padding-left:10px; border-left:3px solid var(--gray-light);}
.cardGridMb{margin-bottom:48px;}
.cardImgPlaceholder{background:#f0fafd; display:flex; align-items:center; justify-content:center;}
.cardImgPlaceholder Img{object-fit:cover; border-radius:4px; display:block; border:3px solid rgba(255,255,255,0.1);}
.cardImgPlaceholderText{font-size:13px; font-weight:700; color:var(--cyan);}
.cardEol{opacity:0.75;}
.cardEolNote{font-size:12px; color:var(--gray);}
.cardLinkDisabled{font-size:12px; color:var(--gray); display:flex; align-items:center; gap:4px;}

/* ===== PRODUCT (frespec) ===== */
.productSubTitle{font-size:0.6em; color:var(--text-sub); font-weight:400;}
.productImgWrap{width:100%; height:240px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;}
.productImgNote{font-size:12px; color:var(--gray);}
.specTableWrap{border:1px solid var(--rule); border-radius:4px; overflow:hidden;}

/* ===== INLINE CTA BTN ===== */
.inlineCtaBtn{margin-top:8px;}

/* ===== IMAGE PLACEHOLDER ===== */
.imgBox{background:#f0f4f6; border:1px solid var(--rule); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;}
.imgBoxLabel{font-size:11px; font-weight:700; color:var(--gray); letter-spacing:1px; text-align:center; line-height:1.7; padding:0 16px;}
.imgBoxIcon{width:36px; height:36px; opacity:0.25;}
.imgBox.tall{height:320px;}
.imgBox.mid{height:220px;}
.short{height:160px;}
.imgBox.wide{width:100%;}
.imgBox.fill{width:100%; height:100%;}
.imgObject{object-fit:cover;}
/* .imgMargin{margin-bottom:2%;} */

/* ===== ABOUT ===== */
.aboutHeroGrid{display:grid; grid-template-columns:1fr 420px; gap:48px; align-items:center;}
.aboutHeroImg{width:100%; height:320px; object-fit:cover; border-radius:4px; display:block; border:3px solid rgba(255,255,255,0.1);}
.compareWithImg{display:grid; grid-template-columns:1fr 280px; gap:32px; align-items:start;}

/* ===== FRESPEC ===== */
.productHeroImgBox{max-width:1920px; width:100%; height:450px; color:#FFF;}
.productHeroImgBoxBack{width:1920px; height:450px; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-10; object-fit:cover; object-position:right;}
.productHeroText{position:absolute; top:4vh; right:0; bottom:0; left:10vw; z-index:0;}
.featureCardIcon{width:100%; height:100px; margin-bottom:14px; display:flex; align-items:center; justify-content:center;}
.productBannerImg{width:100%; overflow:hidden; display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center;}
/* .productBannerImg{padding-left:2.5%;} */

/* ===== NETWORK ===== */
.networkHeroGrid{display:grid; grid-template-columns:1fr 280; gap:48px; align-items:center;}
.flowWithImg{display:grid; grid-template-columns:1fr 280px; gap:32px; align-items:start;}
.flowImgStack{display:flex; flex-direction:column; gap:10px; padding-top:4px;}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .pageHeroInner{padding:0 20px; grid-template-columns:1fr;}
  .pageHeroImgWrap{display:none;}
  .pageSecInner{padding:0 20px;}
  .breadNavInner{padding:0 20px;}
  .cardGrid{grid-template-columns:repeat(2, 1fr);}
  .cardGrid4{grid-template-columns:repeat(2, 1fr);}
  .featureGrid{grid-template-columns:repeat(2, 1fr);}
  .serviceMenuGrid{grid-template-columns:repeat(2, 1fr);}
  .productHeroInner{grid-template-columns:1fr; gap:32px; padding:0 20px;}
  .inlineCta{flex-direction:column; align-items:flex-start; padding:32px 24px;}
}
@media (max-width:1024px){
  .aboutHeroGrid{grid-template-columns:1fr;}
  .compareWithImg{grid-template-columns:1fr;}
  .networkHeroGrid{grid-template-columns:1fr;}
  .flowWithImg{grid-template-columns:1fr;}
  .flowImgStack{display:none;}
}

@media (max-width:640px){
  .cardGrid{grid-template-columns:1fr;}
  .cardGrid4{grid-template-columns:1fr;}
  .featureGrid{grid-template-columns:1fr;}
  .serviceMenuGrid{grid-template-columns:1fr;}
  .specTable th{width:120px;}
}