:root{
  --ink:#152238;        /* charcoal-navy text */
  --blue:#1f6fd4;       /* accent (replaces original yellow) */
  --navy:#0a2a8c;
  --teal:#27d8c4;
  --light:#eef3fb;      /* light section bg (replaces #EDEDED) */
  --gray:#5b6b80;
  --white:#fff;
  --line-green:#06c755;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);background:var(--white);
  line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.no_scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.sp-only{display:none}
.pc-only{display:inline}

/* English titles use Jost (Futura-like) */
.title,.cta_text,.line,.mail,.btn,.footer_nav,.lead .txt_bg{font-family:"Jost",sans-serif}

/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;background:rgba(255,255,255,.97);
  box-shadow:0 2px 16px rgba(10,42,140,.07);
}
.header .logo a img{height:56px;width:auto}
.header__right{display:flex;align-items:center;gap:18px}

/* LINE pill CTA */
.cta_btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--line-green);color:#fff;font-weight:700;
  padding:13px 26px;border-radius:999px;font-size:15px;letter-spacing:.04em;
  box-shadow:0 8px 22px rgba(6,199,85,.35);transition:.25s;border:0;cursor:pointer;
}
.cta_btn .arrow{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.3);position:relative;flex-shrink:0}
.cta_btn .arrow::after{content:"";position:absolute;left:5px;top:6px;width:6px;height:6px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.cta_btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,199,85,.45)}
.cta_btn--mail{background:var(--blue);box-shadow:0 8px 22px rgba(31,111,212,.35)}
.cta_btn--mail:hover{box-shadow:0 12px 28px rgba(31,111,212,.45)}

/* hamburger */
.nav_btn{width:52px;height:52px;background:var(--navy);border:0;border-radius:12px;cursor:pointer;position:relative;z-index:210}
.nav_btn div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:16px}
.nav_btn span{position:absolute;left:0;width:100%;height:2.5px;background:#fff;border-radius:2px;transition:.3s}
.nav_btn span:nth-child(1){top:0}.nav_btn span:nth-child(2){top:7px}.nav_btn span:nth-child(3){top:14px}
.nav_btn.open span:nth-child(1){top:7px;transform:rotate(45deg)}
.nav_btn.open span:nth-child(2){opacity:0}
.nav_btn.open span:nth-child(3){top:7px;transform:rotate(-45deg)}

/* full-screen nav overlay */
.nav{
  position:fixed;inset:0;background:linear-gradient(135deg,var(--navy),var(--blue) 70%,var(--teal) 130%);
  z-index:205;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
  overflow-y:auto;padding:110px 24px 48px;
}
.nav.open{opacity:1;visibility:visible}
.nav .inner{text-align:center;color:#fff;width:90%;max-width:560px;margin:auto}
.nav ul{list-style:none;margin-bottom:40px}
.nav ul li{border-bottom:1px solid rgba(255,255,255,.25)}
.nav ul li a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:"Jost",sans-serif;font-weight:700;font-size:26px;letter-spacing:.1em;
  color:#fff;padding:20px 6px;transition:.2s;
}
.nav ul li a:hover{color:var(--teal);padding-left:18px}
.nav ul li a .arrow{width:24px;height:12px;position:relative}
.nav ul li a .arrow::after{content:"";position:absolute;right:0;top:0;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.nav .lead p{font-size:22px;font-weight:700;line-height:1.8}
.nav .lead .txt_bg{background:var(--teal);color:var(--navy);padding:2px 10px;font-style:normal}

/* ===== Main Visual ===== */
.mv{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden}
.mv__bg{width:100%;height:100%;object-fit:cover}
.mv::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(6,32,95,.88) 0%,rgba(10,42,140,.62) 42%,rgba(10,42,140,.2) 75%,rgba(39,216,196,.12) 100%);
}
.mv_catch{
  position:absolute;top:50%;left:8%;transform:translateY(-50%);z-index:2;
  color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.45);
}
.mv_catch__sub{font-size:16px;font-weight:700;letter-spacing:.18em;color:var(--teal);margin-bottom:18px}
.mv_catch__ttl{font-size:clamp(44px,7vw,92px);font-weight:900;line-height:1.25;letter-spacing:.03em}
.mv_catch__ttl span{
  background:linear-gradient(90deg,#fff,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mv_catch__lead{margin-top:22px;font-size:clamp(16px,2vw,22px);font-weight:500}

/* ===== CTA bar under MV ===== */
.mv_cta{
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;
  padding:34px 24px;text-align:center;
}
.mv_cta .txt{font-size:18px;font-weight:700;line-height:1.6}
.mv_cta .txt_mail{font-size:14px;font-weight:400;opacity:.85}
.mv_cta .txt_mail a{color:var(--teal);text-decoration:underline}
.mv_cta .cta_btn{font-size:17px;padding:16px 34px}

/* ===== Shared title ===== */
.title{
  font-weight:800;font-size:clamp(54px,10vw,150px);line-height:1;
  color:var(--ink);letter-spacing:.06em;position:relative;
}
.title .color{color:var(--blue)}
.title .ja{
  display:block;font-family:"Noto Sans JP",sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.3em;color:var(--blue);margin-top:14px;
}
.title.center{text-align:center}

/* ===== Greeting ===== */
#greeting{padding:110px 0 120px}
#greeting .contents{position:relative;max-width:1120px;margin:0 auto;padding:0 32px}
#greeting .catch{margin:36px 0 40px}
#greeting .catch .text_bg{
  display:inline-block;font-size:clamp(22px,3.4vw,40px);font-weight:900;line-height:1.9;
  background:var(--blue);color:#fff;padding:4px 16px;margin-bottom:6px;
}
#greeting .catch .lt{padding:0}
#greeting .massage{max-width:560px}
#greeting .massage .txt{font-size:16px;color:var(--gray);margin-bottom:34px;line-height:2.2}
#greeting .image{
  position:absolute;right:0;bottom:40px;width:44%;max-width:520px;z-index:0;
}
#greeting .image img{border-radius:16px;box-shadow:0 24px 60px rgba(10,42,140,.22)}

/* VIEW MORE button */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-weight:700;letter-spacing:.12em;font-size:15px;color:var(--navy);
  border:2px solid var(--navy);padding:14px 34px;border-radius:999px;transition:.25s;
}
.btn .arrow{width:20px;height:20px;border-radius:50%;background:var(--navy);position:relative;transition:.25s}
.btn .arrow::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.btn:hover{background:var(--navy);color:#fff}
.btn:hover .arrow{background:#fff}
.btn:hover .arrow::after{border-color:var(--navy)}

/* ===== Project ===== */
#project{background:var(--light);padding:110px 0 120px}
#project .catch{text-align:center;margin:40px 0 56px}
#project .catch p{font-size:clamp(22px,3.2vw,34px);font-weight:900;line-height:1.7}
#project .contents{max-width:880px;margin:0 auto;padding:0 32px}
#project .feature{background:#fff;border-radius:24px;padding:56px 48px;box-shadow:0 20px 60px rgba(10,42,140,.10);text-align:center}
#project .feature h3{font-size:clamp(18px,2.4vw,26px);color:var(--navy);margin-bottom:40px;font-weight:900}
#project .feature .txt{margin-bottom:36px}
#project .feature h4{margin-bottom:10px}
#project .feature h4 p{font-size:clamp(20px,2.8vw,30px);font-weight:900;line-height:1.6}
#project .feature .text_bg{background:var(--blue);color:#fff;padding:2px 14px;font-size:1.15em;display:inline-block}
#project .feature .text_bg.bg2{background:var(--teal);color:var(--navy)}
#project .feature .txt>p{font-size:15px;color:var(--gray)}
#project .feature .btn{margin-top:14px}

/* ===== Big CTA ===== */
.cta{
  background:linear-gradient(135deg,var(--navy),var(--blue) 75%,var(--teal) 140%);
  color:#fff;text-align:center;padding:90px 24px;
}
.cta .txt{font-size:clamp(20px,3vw,30px);font-weight:900;line-height:1.7;margin-bottom:40px}
.cta .wrap{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.cta .wrap .cta_btn{font-size:18px;padding:20px 44px}

/* ===== Footer ===== */
.footer{background:#07153a;color:#cdd8ee;padding:64px 24px 32px}
.footer .inner{max-width:1000px;margin:0 auto}
.footer .logo{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:44px}
.footer .logo img{height:78px;background:#fff;border-radius:12px;padding:6px}
.footer .logo p{font-weight:700;letter-spacing:.1em}
.footer .flex{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.15);padding-top:40px}
.footer .info p{margin-bottom:18px;font-size:14px;line-height:1.9}
.footer .info .tel_link{color:#cdd8ee}
.footer_nav ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
.footer_nav ul li a{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:14px;transition:.2s}
.footer_nav ul li a:hover{color:var(--teal)}
.footer_nav .arrow{width:14px;height:8px;position:relative}
.footer_nav .arrow::after{content:"";position:absolute;right:0;top:0;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.footer .copy{text-align:center;font-size:12px;opacity:.6;margin-top:44px}

/* ===== Top button ===== */
.top_btn{
  position:fixed;right:22px;bottom:22px;z-index:120;width:52px;height:52px;
  background:var(--navy);border:0;border-radius:50%;cursor:pointer;
  opacity:0;visibility:hidden;transition:.3s;box-shadow:0 8px 24px rgba(10,42,140,.4);
}
.top_btn.show{opacity:1;visibility:visible}
.top_btn span{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) rotate(-45deg);width:12px;height:12px;border-top:2.5px solid #fff;border-right:2.5px solid #fff}

/* ===== Responsive ===== */
@media(max-width:768px){
  .sp-only{display:inline}
  .pc-only{display:none}
  .header{padding:10px 16px}
  .header .logo a img{height:44px}
  .header__right .cta_btn{display:none}
  .mv_catch{left:6%;right:6%}
  .mv_cta{flex-direction:column;gap:20px;padding:28px 20px}
  #greeting{padding:80px 0 90px}
  #greeting .massage{max-width:100%;position:relative;z-index:2}
  #greeting .massage .txt{padding-bottom:30px}
  #greeting .image{position:relative;right:auto;bottom:auto;width:80%;max-width:340px;margin:30px auto 0;z-index:0}
  #project{padding:80px 0 90px}
  #project .feature{padding:40px 22px}
  .nav ul li a{font-size:22px}
  .footer .flex{flex-direction:column;gap:30px}
  .footer_nav ul{grid-template-columns:1fr}
}

/* ======================================================
   Lower pages (MESSAGE / PROJECT / Q&A / COMPANY / CONTACT)
   ====================================================== */

/* page top banner */
.page-header{position:relative;padding-top:90px;background:var(--light)}
.page-header .banner{position:relative;height:300px;overflow:hidden}
.page-header .banner img{width:60%;height:100%;object-fit:cover;margin-left:auto}
.page-header .ttl_wrap{position:absolute;left:0;bottom:46px;padding-left:max(32px,calc((100vw - 1120px)/2))}
.page-header .ttl{
  display:inline-block;font-family:"Jost",sans-serif;font-weight:800;font-size:clamp(40px,6vw,72px);
  letter-spacing:.08em;line-height:1;color:#fff;background:var(--blue);padding:8px 26px;
}
.page-header .ja{display:block;margin-top:16px;font-weight:700;letter-spacing:.3em;font-size:15px;color:var(--ink);padding-left:6px}

/* shared section title (PROFILE / ACCESS / FLOW / RECRUITMENT) */
.sec-ttl{
  font-family:"Jost",sans-serif;font-weight:800;font-size:clamp(34px,5vw,56px);
  letter-spacing:.06em;color:var(--ink);line-height:1.2;
}
.sec-ttl .color{color:var(--blue)}
.sec-ttl .ja{
  font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.2em;color:var(--blue);margin-left:18px;white-space:nowrap;
}
.sec-ttl.center{text-align:center}

.page-section{padding:90px 0}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 32px}

/* data tables (PROFILE / RECRUITMENT) */
.data-table{width:100%;border-collapse:collapse;margin-top:40px}
.data-table tr{border-bottom:1px solid #d8e3f2}
.data-table th{
  text-align:left;vertical-align:top;width:200px;padding:26px 10px;
  font-weight:700;color:var(--ink);letter-spacing:.18em;font-size:15px;white-space:nowrap;
}
.data-table td{padding:26px 10px;color:var(--gray);font-size:15px;line-height:1.9}

/* ACCESS */
.access{margin-top:30px}
.access__label{display:inline-block;background:var(--blue);color:#fff;font-weight:700;padding:8px 30px 8px 18px;border-left:5px solid var(--navy);margin-bottom:18px}
.access__map{width:100%;aspect-ratio:16/7;border:0;border-radius:10px;box-shadow:0 12px 40px rgba(10,42,140,.12)}
.access__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px}
.access__foot .addr{font-size:15px;line-height:1.8;color:var(--ink)}
.access__foot .tel{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:700;color:var(--ink)}
.access__foot .tel .badge{background:var(--teal);color:var(--navy);font-size:13px;padding:4px 12px;border-radius:4px}
.gmap-btn{display:inline-flex;align-items:center;gap:14px;background:var(--navy);color:#fff;font-family:"Jost",sans-serif;font-weight:700;letter-spacing:.1em;padding:16px 30px;border-radius:6px;transition:.25s}
.gmap-btn:hover{background:var(--blue)}
.gmap-btn .arrow{width:20px;height:2px;background:#fff;position:relative}
.gmap-btn .arrow::after{content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}

/* MESSAGE page */
.msg-catch{font-size:clamp(26px,4vw,46px);font-weight:900;line-height:1.6;margin:10px 0 50px}
.msg-body{display:flex;gap:48px;align-items:flex-start}
.msg-body .txt{flex:1;font-size:16px;color:var(--ink);line-height:2.2}
.msg-body .txt p{margin-bottom:26px}
.msg-img{width:36%;flex-shrink:0}
.msg-img img{width:100%;border-radius:16px;box-shadow:0 24px 60px rgba(10,42,140,.18);position:sticky;top:110px}
.msg-sign{text-align:right;margin-top:40px;line-height:1.8}
.msg-sign .role{font-size:14px;color:var(--gray)}
.msg-sign .name{font-size:22px;font-weight:700}

/* PROJECT page intro */
.proj-intro-wrap{display:flex;gap:48px;align-items:center}
.proj-intro-body{flex:1}
.proj-intro-img{width:42%;flex-shrink:0}
.proj-intro-img img{width:100%;border-radius:16px;box-shadow:0 20px 50px rgba(10,42,140,.16)}
.proj-intro{font-size:clamp(22px,3.4vw,38px);font-weight:900;line-height:1.6;margin-bottom:28px}
.proj-intro-txt{color:var(--gray);font-size:15px;line-height:2.1}

/* FLOW */
.flow-sec{background:var(--light);padding:90px 0}
.flow-lead{text-align:center;color:var(--gray);max-width:720px;margin:24px auto 56px;font-size:15px}
.flow-list{max-width:820px;margin:0 auto;padding:0 24px}
.flow-step{background:#fff;border-radius:14px;padding:30px;box-shadow:0 10px 34px rgba(10,42,140,.08);display:flex;gap:28px;align-items:flex-start}
.flow-step .thumb{width:200px;flex-shrink:0;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--blue))}
.flow-step .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.flow-step .no{font-family:"Jost",sans-serif;font-weight:800;color:var(--blue);letter-spacing:.1em;font-size:15px;margin-bottom:8px}
.flow-step .ttl{font-size:19px;font-weight:900;margin-bottom:12px;line-height:1.6}
.flow-step .ttl .mk{background:var(--blue);color:#fff;padding:2px 8px}
.flow-step p{color:var(--gray);font-size:14px}
.flow-conn{text-align:center;margin:18px 0}
.flow-conn span{display:inline-block;background:var(--teal);color:var(--navy);font-weight:700;padding:6px 28px;border-radius:6px;font-size:14px;position:relative}
.flow-conn span::after{content:"";display:block;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--teal);position:absolute;left:50%;transform:translateX(-50%);bottom:-9px}
.train-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--teal);padding:22px;border-radius:14px;margin:18px 0}
.train-grid .item{background:#fff;border-radius:10px;overflow:hidden}
.train-grid .item img{width:100%;height:140px;object-fit:cover;display:block}
.train-grid .item .tin{padding:20px}
.train-grid .item h4{font-size:18px;color:var(--navy);margin-bottom:8px}
.train-grid .item p{color:var(--gray);font-size:13px;line-height:1.8}

/* CONTACT page */
.line-box{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-top:30px;background:var(--light);border-radius:14px;padding:32px}
.line-box .info{flex:1;min-width:260px}
.line-box .info h3{font-size:20px;margin-bottom:12px}
.line-box .info p{font-size:14px;color:var(--gray);line-height:1.9}
.line-box .qr{width:140px;height:140px;background:#fff;border:1px solid #d8e3f2;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--gray);text-align:center;padding:10px}
.line-box .line-cta{display:flex;flex-direction:column;justify-content:center}
.stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin:40px 0;font-family:"Jost",sans-serif;font-weight:700;letter-spacing:.1em;color:#aab6c8}
.stepper .on{color:var(--blue);border-bottom:3px solid var(--blue);padding-bottom:4px}
.stepper .sep{width:30px;height:2px;background:#cdd8e8}
.form-row{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid #eef0f4;align-items:flex-start}
.form-row .label{width:170px;flex-shrink:0;font-weight:700;display:flex;align-items:center;gap:10px;padding-top:10px}
.form-row .req{background:var(--blue);color:#fff;font-size:11px;padding:3px 9px;border-radius:3px}
.form-row .field{flex:1}
.form-row input[type=text],.form-row input[type=email],.form-row textarea{
  width:100%;border:0;background:var(--light);border-radius:6px;padding:14px 16px;font-family:inherit;font-size:15px;color:var(--ink);
}
.form-row textarea{min-height:180px;resize:vertical}
.form-row .radios{display:flex;gap:24px;flex-wrap:wrap;padding-top:10px}
.form-row .radios label{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-submit{text-align:center;margin-top:40px}
.form-submit button{background:var(--navy);color:#fff;font-family:"Jost",sans-serif;font-weight:700;letter-spacing:.12em;border:0;border-radius:6px;padding:20px 60px;cursor:pointer;transition:.25s;font-size:16px}
.form-submit button:hover{background:var(--blue)}

/* Q&A page */
.qa-list{max-width:840px;margin:40px auto 0;display:flex;flex-direction:column;gap:14px}
.qa-item{background:#fff;border:1px solid #e1e9f5;border-radius:12px;overflow:hidden}
.qa-q{display:flex;gap:16px;align-items:center;padding:22px 56px 22px 22px;cursor:pointer;font-weight:700;position:relative;font-size:16px}
.qa-q .mark{font-family:"Jost",sans-serif;font-weight:800;color:var(--blue);font-size:22px;flex-shrink:0}
.qa-q::after{content:"+";position:absolute;right:22px;color:var(--blue);font-size:26px;transition:.3s}
.qa-item.open .qa-q::after{transform:rotate(45deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .35s ease;background:var(--light)}
.qa-a .inner{display:flex;gap:16px;padding:22px;color:var(--gray);font-size:15px;line-height:1.9}
.qa-a .mark{font-family:"Jost",sans-serif;font-weight:800;color:var(--teal);font-size:22px;flex-shrink:0}

@media(max-width:768px){
  .page-header .banner img{width:100%}
  .page-header .ttl_wrap{padding-left:20px;bottom:30px}
  .data-table th{width:auto;display:block;padding-bottom:6px}
  .data-table td{display:block;padding-top:0;padding-bottom:22px}
  .msg-body{flex-direction:column;gap:30px}
  .msg-img{width:100%;order:-1}
  .msg-img img{position:static}
  .proj-intro-wrap{flex-direction:column;gap:30px}
  .proj-intro-img{width:100%;order:-1}
  .flow-step{flex-direction:column}
  .flow-step .thumb{width:100%}
  .train-grid{grid-template-columns:1fr}
  .form-row{flex-direction:column;gap:8px}
  .form-row .label{width:auto}
  .access__foot{flex-direction:column;align-items:flex-start}
}