/* ==============================================
   共通: base.css
============================================== */
:root{
  --navy:       #0D2B3E;
  --cyan:       #00b5d9;
  --cyan-dark:  #0099BB;
  --cyan-light: #f0fafd;
  --red:        #F84462;
  --white:      #FFFFFF;
  --bg:         #f7f9fa;
  --gray:       #6b7a84;
  --gray-light: #e8ecee;
  --rule:       #e2e8eb;
  --text:       #1a2e3b;
  --text-sub:   #5a6a74;}

*, *::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.7; -webkit-font-smoothing:antialiased;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; height:auto; display:block;}
ul, ol{list-style:none;}

.commonLeftMargin{margin-left:0.7em;}

/* ===== CHECK PATTERN ===== */
.bgCheckBlue{
  background-image:linear-gradient(0deg, transparent calc(100% - 1px), #f3fbff calc(100% - 1px)),
                   linear-gradient(90deg, transparent calc(100% - 1px), #f3fbff calc(100% - 1px));
  background-size:16px 16px;
  background-repeat:repeat;
  background-position:center center;
}

/* ===== BREADCRUMB ===== */
.breadcrumb{padding:15px 0px; 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(--rule);}
.breadcrumbMargin{margin-left:18px;}

/* ===== PAGE HERO ===== */
.pageHero{padding:100px 0 48px; background:var(--navy); position:relative; overflow:hidden;}
.pageHero::after{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:48px 48px; pointer-events:none;}
.pageHeroInner{max-width:1160px; margin:0 auto; padding:0 40px; position:relative; z-index:1;}
.pageHeroBread{display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:16px;}
.pageHeroBread a{color:rgba(255,255,255,0.5); transition:color 0.18s;}
.pageHeroBread a:hover{color:var(--cyan);}
.pageHeroBread span{color:var(--gray);}
.pageHeroLabel{font-size:10px; font-weight:700; letter-spacing:3px; color:var(--cyan); text-transform:uppercase; margin-bottom:10px;}
.pageHeroTitle{font-size:clamp(24px, 3vw, 36px); font-weight:700; color:#fff; line-height:1.4; margin-bottom:10px;}
.pageHeroDesc{font-size:14px; color:rgba(255,255,255,0.55); line-height:1.9; max-width:600px;}

.jsFade{opacity:0; transform:translateY(16px); transition:opacity 0.5s ease, transform 0.5s ease;}
.jsFade.isVisible{opacity:1; transform:none;}
.jsFadeD1{transition-delay:0.08s;}
.jsFadeD2{transition-delay:0.16s;}
.jsFadeD3{transition-delay:0.24s;}
.jsFadeD4{transition-delay:0.32s;}

.section{padding:72px 0;}
.sectionBg{background:var(--bg);}
.sectionNavy{background:var(--navy);}
.inner{max-width:1160px; margin:0 auto; padding:0 40px;}

.secTitleRed{color:var(--red);}
.secTitleCyan{color:var(--cyan);}
.secTextStroke{-webkit-text-stroke:3px #FFF; paint-order:stroke;}

.secLabel{font-size:12px; font-weight:700; letter-spacing:3px; color:var(--cyan); text-transform:uppercase; margin-bottom:8px;}
.secTitle{font-size:clamp(20px, 2.5vw, 28px); font-weight:700; color:var(--navy); line-height:1.4; margin-bottom:8px;}
.secTitle.white{color:#fff;}
.secDesc{font-size:14px; color:var(--text-sub); line-height:1.9; margin-bottom:25px;}

.btn{display:inline-flex; align-items:center; gap:6px; padding:12px 28px; font-size:13px; font-weight:700; border-radius:3px; transition:all 0.18s; cursor:pointer; border:none; letter-spacing:0.3px;}
.btnCyan{background:var(--cyan); color:#fff;}
.btnCyan:hover{background:var(--cyan-dark);}
.btnNavy{background:var(--navy); color:#fff;}
.btnOutline{background:#fff; color:var(--cyan); border:1.5px solid var(--cyan);}
.btnOutline:hover{background:var(--cyan); color:#fff;}

@media (max-width:768px){
  .section{padding:48px 0;}
  .inner{padding:0 20px;}
}