/* ==============================================
   共通: base.css
============================================== */

/* ==============================================
   名電通株式会社 コーポレートサイト
   カラーシステム:
     Primary   #00b5d9 シアン（NE・CP・BP共通）
     Dark      #0D2B3E ネイビー（3サイト共通）
     Base      #FFFFFF 白（3サイト共通）
     Accent    #F84462 レッド（NE・CPのみ）
   ============================================== */

/* ===== CSS VARIABLES ===== */
:root {
  --white:      #FFFFFF;
  --bg:         #F4F7FA;
  --bg2:        #EDF1F5;
  --navy:       #0D2B3E;
  --navy2:      #162F45;
  --navy3:      #1E3D55;
  --cyan:       #00b5d9;
  --cyan-dark:  #0099BB;
  --cyan-light: #E0F7FC;
  --red:        #F84462;
  --red-dark:   #D62F4D;
  --red-light:  #FEE8EC;
  --rule:       #D0DDE8;
  --text:       #1A2E3A;
  --gray:       #6A8090;
  --gray-light: #EDF1F5;
}

/* ===== RESET / BASE ===== */
*, *::before, *::after {margin:0; padding:0; box-sizing:border-box;}
html{font-size:16px; scroll-behavior:smooth;}
body{font-family:'Noto Sans JP', sans-serif; color:var(--text); background:var(--white); line-height:1.8; -webkit-font-smoothing: antialiased;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; height:auto; display:block;}
ul, ol{list-style:none;}

/* ===== SCROLL ANIMATION ===== */
.jsFade{opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease;}
.jsFade.isVisible{opacity:1; transform:translateY(0);}
.jsFadeD1{transition-delay:0.1s;}
.jsFadeD2{transition-delay:0.2s;}
.jsFadeD3{transition-delay:0.3s;}

/* ===== SECTION COMMON ===== */
.section{padding:80px 0;}
.sectionBg{background:var(--bg);}
.sectionDark{background:var(--text);}
.sectionNavy{background:var(--navy);}
.sectionInner{max-width:1280px; margin:0 auto; padding:0 64px;}
.sectionTextCyan{color:var(--cyan);}
.sectionTextRed{color:var(--red);}
.sectionEyebrow{font-family:'Bebas Neue', sans-serif; font-size:16px; letter-spacing:4px; color:var(--cyan); margin-bottom:10px;}
.sectionTitle{font-family:'Noto Serif JP', serif; font-size:clamp(22px, 3vw, 32px); font-weight:700; color:var(--navy); margin-bottom:12px; line-height:1.4;}
.sectionTitle.white{color:var(--white);}
.sectionDesc{font-size:13px; color:var(--gray); line-height:1.9; margin-bottom:48px;}

/* ===== BREADCRUMB ===== */
.breadcrumb{padding:10px 0; font-size:11px; color:var(--gray);}
.breadcrumbList{display:flex; align-items:center; flex-wrap:wrap; gap:4px; list-style:none; padding:0; margin:0;}
.breadcrumbItem{display:flex; align-items:center; gap:4px;}
.breadcrumbItem + .breadcrumbItem::before{content:'›'; color:var(--rule); font-size:13px;}
.breadcrumbItem a{color:var(--cyan); transition:color 0.18s;}
.breadcrumbItem a:hover{color:var(--cyan-dark);}
.breadcrumbItem span{color:var(--gray);}

/* ===== SP DRAWER ===== */
.spDrawer{position:fixed; top:0; right:0; width:280px; height:100vh; background:var(--navy); z-index:1100; transform:translateX(100%); transition:transform 0.3s ease; overflow-y:auto;}
.spDrawer.isOpen{transform:translateX(0);}
.spDrawerNav{padding:80px 24px 40px; display:flex; flex-direction:column; gap:0;}
.spDrawerLink{display:block; padding:14px 0; font-size:14px; color:rgba(255,255,255,0.8); border-bottom:1px solid rgba(255,255,255,0.08); transition:color 0.18s;}
.spDrawerLink:hover{color:var(--cyan);}
.spDrawerContact{margin-top:28px; display:flex; flex-direction:column; gap:10px;}
.spDrawerTel{display:block; padding:12px 16px; background:rgba(255,255,255,0.06); border-radius:3px; font-size:14px; color:#fff; text-align:center;}
.spDrawerBtn{display:block; padding:12px 16px; background:var(--cyan); border-radius:3px; font-size:13px; font-weight:700; color:#fff; text-align:center; transition:background 0.18s;}
.spDrawerBtn:hover{background:var(--cyan-dark);}
.spOverlay{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1050; opacity:0; pointer-events:none; transition:opacity 0.3s;}
.spOverlay.isOpen{opacity:1; pointer-events:auto;}

/* ===== PAGE HERO ===== */
.pageHero{background:var(--navy); margin-top:71px; padding:56px 0 48px; position: relative; overflow: hidden;}
.pageHero::before{content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(0,181,217,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,181,217,0.04) 1px, transparent 1px); background-size:60px 60px;}
.pageHeroInner{max-width:1280px; margin:0 auto; padding:0 64px; position:relative; z-index:1;}
.pageHeroEyebrow{font-family:'Bebas Neue', sans-serif; font-size:11px; letter-spacing:5px; color:var(--cyan); margin-bottom:10px;}
.pageHeroTitle{font-family:'Noto Serif JP', serif; font-size:36px; font-weight:900; color:var(--white); letter-spacing:3px;}
.pageHeroSub{font-size:14px; color:rgba(255,255,255,0.45); margin-top:16px; line-height:2; max-width:560px;}
.pageHeroDesc{font-size:14px; color:rgba(255,255,255,0.4); margin-top:12px; line-height:1.9;}
.pageHeroBreadcrumb{display:flex; align-items:center; gap:8px; margin-top:20px;}
.pageHeroBreadcrumb a, .pageHeroBreadcrumb span{font-size:11px; color:rgba(255,255,255,0.35);}
.pageHeroBreadcrumb a:hover{color:var(--cyan);}
.pageHeroBreadcrumb .sep{color:rgba(255,255,255,0.2);}
.pageHeroBreadcrumb .current{color:rgba(255,255,255,0.6);}

/* SECTION */
.section{padding:88px 0;}
.sectionBg{background:var(--bg);}
.sectionNavy{background:var(--navy);}
.sectionInner{max-width:1280px; margin:0 auto; padding:0 64px;}
.sectionEyebrow{font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:5px; color:var(--cyan); margin-bottom:10px;}
.sectionEyebrow.red{color:var(--red);}
.sectionTitle{font-family:'Noto Serif JP',serif; font-size:28px; font-weight:700; color:var(--navy); margin-bottom:10px;}
.sectionTitle.white{color:var(--white);}
.sectionDesc{font-size:14px; color:var(--gray); margin-bottom:48px; line-height:1.9;}
.sectionDesc.white{color:var(--white);}

/* RESPONSIVE */
@media screen and (max-width:1024px){
 .pageHeroInner{padding:0 24px;}
 .headerNav{display:none;}
 .headerInner{padding:0 24px;}
 .sectionInner{padding:0 24px;}
}

@media screen and (max-width:640px){
 .section{padding:56px 0;}
 .pageHeroTitle{font-size:30px;}
}