@charset "UTF-8";

:root{
  --navy:#172d3d;
  --text:#26343d;
  --muted:#6c7980;
  --line:#dce2e5;
  --blue:#1685bd;
  --red:#d84a43;
  --redin:#faa;
  --yellow:#e8bd38;
  --pale:#f5f7f7;
  --white:#fff;
  --wrap:1200px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  background:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",YuGothic,
    "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:14px;
  line-height:1.9;
}

img{max-width:100%;height:auto;vertical-align:bottom}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
:focus-visible{outline:3px solid rgba(22,133,189,.35);outline-offset:4px}

.wrap{
  width:min(calc(100% - 4rem),var(--wrap));
  margin-inline:auto;
}

/* Header */
.header{
  position:absolute;
  z-index:10;
  inset:0 0 auto;
  color:var(--navy);
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(23,45,61,.08);
}

.headerInner{
  min-height:7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.logo{
  display:inline-flex;
  align-items:center;
  color:inherit;
}

.logoSymbol{
  position:relative;
  width:2.5rem;
  height:2.5rem;
  margin-right:.7rem;
  border:2px solid currentColor;
  border-radius:50%;
}

.logoSymbol::before,
.logoSymbol::after{
  content:"";
  position:absolute;
  background:currentColor;
}

.logoSymbol::before{
  width:1.15rem;
  height:2px;
  top:1.15rem;
  left:.55rem;
  transform:rotate(-35deg);
}

.logoSymbol::after{
  width:2px;
  height:1.15rem;
  top:.55rem;
  left:1.15rem;
  transform:rotate(-35deg);
}

.logoText{
  display:grid;
  line-height:1.15;
}

.logoText strong{
  font-size:1.1rem;
  letter-spacing:.12em;
}

.logoText small{
  margin-top:.25rem;
  font-size:.55rem;
  letter-spacing:.12em;
  opacity:.75;
}

.nav ul{
  display:flex;
  align-items:center;
  gap:2rem;
  margin:0;
  padding:0;
  list-style:none;
}

.nav a{
  position:relative;
  display:block;
  padding:.5rem 0;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.05em;
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:.1rem;
  height:1px;
  background:currentColor;
  transition:right .25s ease;
}

.nav a:hover{color:var(--blue)}
.nav a:hover::after{right:0}


.nav .navContact a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:9rem;
  padding:.8rem 1.2rem;
  border:1px solid var(--blue);
  color:var(--blue);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
}

.nav .navContact a::after{
  display:none;
}

.nav .navContact a:hover{
  color:var(--white);
  background:var(--blue);
}



/* Hero */
.hero{
  position:relative;
  min-height:48rem;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--white);
  background:var(--navy);
}

.heroVisual{
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
}

.heroVisual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 1.2s ease,transform 6s ease;
}

.heroVisual img.is-active{
  opacity:1;
  transform:scale(1);
}

.heroOverlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(23,45,61,.96) 0%,rgba(23,45,61,.7) 30%,rgba(23,45,61,.2) 70%,rgba(23,45,61,.1) 100%),
    linear-gradient(0deg,rgba(23,45,61,.38),transparent 55%);
}

.heroInner{
  position:relative;
  z-index:2;
  width:min(calc(100% - 4rem),var(--wrap));
  margin-inline:auto;
  padding:0 0 6rem;
}

.heroLabel{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.5rem;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.2em;
}

.heroLabel::before{
  content:"";
  width:2.5rem;
  height:1px;
  background:currentColor;
}

.hero h1{
  margin:0;
  font-size:clamp(3rem,6.2vw,6.2rem);
  line-height:1.08;
  letter-spacing:-.045em;
}

.heroLead{
  max-width:45rem;
  margin:1.8rem 0 0;
  color:rgba(255,255,255,.8);
  font-size:1rem;
}

.scroll{
  position:absolute;
  z-index:3;
  right:2rem;
  bottom:3rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  color:rgba(255,255,255,.75);
  font-size:.62rem;
  letter-spacing:.18em;
  writing-mode:vertical-rl;
}

.scroll::after{
  content:"";
  width:1px;
  height:4rem;
  background:currentColor;
}

/* Intro */
.intro{
  padding-block:9rem;
}

.introGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:start;
}

.eyebrow{
  margin:0 0 1rem;
  color:var(--blue);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.intro h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(2.6rem,3vw,4rem);
  line-height:1.25;
  letter-spacing:-.035em;
}

.introText{
  max-width:42rem;
}

.introText p{
  margin:0 0 1.3rem;
  color:var(--muted);
}

.signature,.signature2{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  margin-top:1rem;
  color:var(--navy);
  font-size:.78rem;
  font-weight:800;
}.signature2{
  color:#FFF;
}

.signature::before,.signature2::before{
  content:"";
  width:2.5rem;
  height:1px;
  background:var(--red);
}
.signature2::before{
  background:var(--yellow);
}
/* Anchor link offset: keep section headings clear of the fixed/sticky header */
[id] {
  scroll-margin-top: 7.5rem;
}

/* Section */
.section{
  padding-block:8rem;
}

.sectionLight{background:var(--white)}

.sectionHeader{
  display:block;
  text-align:center;
  align-items:end;
  margin-bottom:4rem;
}
.sectionHeader .eyebrow{
	text-align:left;
}
.sectionHeader h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(2rem,4vw,3.8rem);
  line-height:1.2;
  letter-spacing:-.035em;
}

.sectionDescription{
  max-width:27rem;
  margin:0;
  color:var(--muted);
}

/* Services */
.serviceList{
  border-top:1px solid var(--line);
}

.serviceItem{
  display:grid;
  grid-template-columns:7rem 1fr 1fr 2rem;
  gap:2rem;
  align-items:center;
  min-height:13rem;
  border-bottom:1px solid var(--line);
  transition:padding .25s ease,background .25s ease;
}

.serviceItem:hover{
  padding-inline:1.5rem;
  background:var(--white);
}

.serviceNo{
  color:#a2adb2;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.15em;
}

.serviceItem h3{
  margin:0;
  color:var(--navy);
  font-size:1.65rem;
  line-height:1.4;
}
.serviceItem:hover h3 {
    color: #1F499D;
}
.serviceItem p{
  margin:0;
  color:var(--muted);
}

.serviceArrow{
  color:var(--blue);
  font-size:1.5rem;
}

/* Photo sections */
.visualBlock{
  min-height:34rem;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  background:var(--navy);
  color:var(--white);
}

.photo{
  position:relative;
  min-height:24rem;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(22,133,189,.2),rgba(23,45,61,.1)),
    linear-gradient(135deg,#d7e2e5,#6e929f);
}

.photo::after{
  content:"  ";
  position:absolute;
  right:1.5rem;
  bottom:1.2rem;
  color:rgba(255,255,255,.7);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.25em;
}

.visualText{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:5rem;
}

.visualText .eyebrow{color:#7fd0ed}

.visualText h2{
  margin:0;
  font-size:clamp(1.6rem,2.8vw,3.3rem);
  line-height:1.3;
}

.visualText p{
  max-width:28rem;
  margin:1.5rem 0 0;
  color:rgba(255,255,255,.72);
}

/* News */
.news{
  padding-block:7rem;
}

.newsList{
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
  list-style:none;
}

.newsList li{border-bottom:1px solid var(--line)}

.newsList a{
  display:grid;
  grid-template-columns:8rem 7rem 1fr 2rem;
  gap:1.5rem;
  align-items:center;
  padding:1.5rem 0;
}

.newsDate{
  color:var(--muted);
  font-size:.75rem;
}

.newsTag{
  width:max-content;
  padding:.15rem .55rem;
  color:var(--blue);
  border:1px solid #b7d6e5;
  font-size:.62rem;
  font-weight:800;
}

.newsTitle{font-weight:700}
.newsArrow{color:var(--blue)}

/* About / Recruit */
.splitLinks{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.splitLink{
  position:relative;
  min-height:27rem;
  display:flex;
  align-items:flex-end;
  padding:3rem;
  overflow:hidden;
  color:var(--white);
  background:var(--navy);
}

.splitLink + .splitLink{background:#4b6675}

.splitLink::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 65%);
}

.splitContent{
  position:relative;
  z-index:1;
}

.splitContent h2{
  margin:.3rem 0 0;
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.1;
}

.splitContent span{
  display:inline-flex;
  margin-top:1.2rem;
  color:rgba(255,255,255,.8);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.15em;
}

.splitLink:hover .splitContent span{color:var(--white)}

/* CTA */
.cta{
  position:relative;
  padding-block:8rem;
  overflow:hidden;
  color:var(--white);
  background:var(--blue);
}

.cta::before{
  content:"CONTACT";
  position:absolute;
  right:-1rem;
  bottom:-2rem;
  color:rgba(255,255,255,.08);
  font-size:clamp(6rem,18vw,15rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.08em;
}

.ctaInner{
  position:relative;
  z-index:1;
}

.cta .eyebrow{color:rgba(255,255,255,.75)}

.cta h2{
  max-width:56rem;
  margin:0;
  font-size:clamp(1.9rem,5vw,4.8rem);
  line-height:1.15;
  letter-spacing:-.04em;
}

.cta p{
  margin:1.5rem 0 2rem;
  color:rgba(255,255,255,.78);
}

.ctaButton{
  display:inline-flex;
  align-items:center;
  gap:1.5rem;
  padding:1rem 1.4rem;
  color:var(--navy);
  background:var(--white);
  font-weight:900;
}
.ctaButton:hover{
  background:#288FC2;
  color:#FFF;
}


.ctaButton::after{content:"→";font-size:1.2rem}

/* Footer */
.footer{
  color:rgba(255,255,255,.7);
  background:var(--navy);
}

.footerTop{
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr;
  gap:4rem;
  padding-block:5rem;
}

.footer .logo{color:var(--white)}

.footer h2{
  margin:0 0 1rem;
  color:var(--white);
  font-size:.72rem;
  letter-spacing:.16em;
}

.footer ul{
  margin:0;
  padding:0;
  list-style:none;
}

.footer li{margin:.4rem 0}
.footer a{font-size:.78rem}

.footerBottom{
  padding-block:1.2rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.65rem;
}

/* Sub page */
.pageHero{
  padding:12rem 0 6rem;
  color:var(--white);
  background:
    linear-gradient(100deg,rgba(23,45,61,.98),rgba(23,45,61,.86)),
    linear-gradient(135deg,#8daab4,#355b6d);
}

.pageHero h1{
  max-width:55rem;
  margin:0;
  font-size:clamp(2.7rem,6vw,5.5rem);
  line-height:1.1;
  letter-spacing:-.045em;
}

.pageHero p{
  margin:1.2rem 0 0;
  color:rgba(255,255,255,.7);
}

.breadcrumb{
  margin:0 0 3rem!important;
  font-size:.68rem!important;
}

.breadcrumb a:hover{color:var(--white)}

.pageContent{
  padding-block:8rem;
}
.pageContent a{
	color:var(--blue);
	text-decoration: underline;
}
.contentIntro{
  display:grid;
  grid-template-columns: 1.5fr 1.5fr;
  gap: 4rem;
  margin-bottom:7rem;
}

.contentIntro h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.25;
}

.contentIntro p{
  margin:0 0 1.2rem;
  color:var(--muted);
}
.contentIntro p.eyebrow {
    margin: 0 0 1rem;
    color: var(--blue);
}

.contentSection{
  padding-block:1.5rem;
  border-top:1px solid var(--line);
}

.contentSection h2{
  margin:0 0 2rem;
  color:var(--navy);
  font-size:2rem;
  line-height:1.3;
}

.contentSection h3{
  margin:2rem 0 .7rem;
  color:var(--navy);
  font-size:1.15rem;
}

.contentSection p{
  max-width:48rem;
  margin:0 0 1rem;
  color:var(--muted);
}

.contentSection ul{
  max-width:48rem;
  margin:1rem 0;
  padding-left:1.4rem;
  color:var(--muted);
}

.contentSection li{margin:.3rem 0}

.simpleTable{
  width:100%;
  max-width:60rem;
  border-collapse:collapse;
}

.simpleTable th,
.simpleTable td{
  padding:1.1rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.simpleTable th{
  width:25%;
  color:var(--navy);
  background:var(--pale);
}

/* Responsive */
@media(max-width:900px){

  .headerInner{
    position:relative;
  }

  .menuButton{
    display:block;
    margin-left:auto;
  }

  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:block;
    max-height:0;
    overflow:hidden;
    background:rgba(255,255,255,.98);
    border-top:1px solid var(--line);
    box-shadow:0 1rem 2rem rgba(23,45,61,.08);
    opacity:0;
    visibility:hidden;
    transition:max-height .3s ease,opacity .2s ease,visibility .3s ease;
    z-index:100;
  }

  .nav.is-open{
    max-height:30rem;
    opacity:1;
    visibility:visible;
  }

  .nav ul{
    display:block;
    margin:0;
    padding:1rem 1.25rem 1.25rem;
  }

  .nav li{
    border-bottom:1px solid var(--line);
  }

  .nav li:last-child{
    border-bottom:0;
  }

  .nav a,
  .nav .navContact a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:0;
    padding:1rem .25rem;
    border:0;
    color:var(--navy);
    background:none;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.05em;
  }

  .nav a::after{
    display:none;
  }

  .nav .navContact a{
    color:var(--blue);
  }

  .nav .navContact a:hover{
    color:var(--blue);
    background:none;
  }

  .headerInner{min-height:5.5rem}
  .hero{min-height:43rem}
  .hero::before{inset:0 0 0 25%}
  .introGrid,
  .contentIntro{grid-template-columns:1fr;gap:2.5rem}
  .serviceItem{grid-template-columns:5rem 1fr 2rem}
  .serviceItem p{grid-column:2}
  .serviceArrow{position: absolute;   right: 1em;}
  .visualBlock{grid-template-columns:1fr}
  .visualText{padding:4rem 3rem}
  .splitLinks{grid-template-columns:1fr}
  .footerTop{grid-template-columns:1fr 1fr}
  
  br.pc{	display:none; }
}

@media(max-width:600px){
  .wrap{width:min(calc(100% - 2rem),var(--wrap))}
  .heroInner{width:min(calc(100% - 2rem),var(--wrap));padding-bottom:4rem}
  .hero{min-height:39rem}
  .heroOverlay{
    background:
      linear-gradient(90deg,rgba(23,45,61,.92),rgba(23,45,61,.3)),
      linear-gradient(0deg,rgba(23,45,61,.4),transparent 60%);
  }
  .hero h1{font-size:10vw;}
  .heroLead {font-size:3.5vw;}
  .intro h2 {font-size:9vw;}
  .scroll{display:none}
  .intro,.section,.pageContent,.news,.cta{padding-block:5rem}
  .sectionHeader{display:block;margin-bottom:2.5rem}
  .sectionDescription{margin-top:1rem}
  .serviceItem{grid-template-columns:3.5rem 1fr 1.5rem;gap:.7rem;min-height:12rem}
  .serviceItem h3{font-size:1.25rem}
  .serviceItem p{grid-column:2 / 4}
  .sectionHeader h2 {   font-size: 7vw;}
  .newsList a{grid-template-columns:6rem 1fr 1.5rem;gap:.8rem}
  .newsTag{display:none}
  .splitLink{min-height:21rem;padding:2rem}
  .footerTop{grid-template-columns:1fr;gap:2rem}
  .pageHero{padding:9rem 0 4rem}
  .contentIntro{margin-bottom:3rem}
  .simpleTable th,.simpleTable td{display:block;width:100%}
  .simpleTable th{padding-bottom:.4rem;border-bottom:0}
  .simpleTable td{padding-top:.3rem}
  .serviceItem {  grid-template-columns: 1rem 1fr 2rem;  }
}


/* ============================================================
   TOP / v7
   ============================================================ */
.photo{
  background:
    linear-gradient(145deg,rgba(22,133,189,.12),rgba(23,45,61,.12)),
    url("../../img/it.jpg") center/cover no-repeat;
	background-size: cover;
}
.splitLink{
  background-position:center;
  background-size:cover;
}
.splitLink.companyLink{
  background-image:linear-gradient(0deg,rgba(23,45,61,.72),rgba(23,45,61,.16)),
                   url("../../img/office.jpg");
}
.splitLink.recruitLink{
  background-image:linear-gradient(0deg,rgba(23,45,61,.72),rgba(23,45,61,.16)),
                   url("../../img/recruit.jpg");
  background-position: 50% 50%;
  background-size: cover;
}

/* Sub-page shared visual */
.pageHero{
  position:relative;
  overflow:hidden;
}
.pageHero::after{
  content:"";
  position:absolute;
  width:38rem;
  height:38rem;
  right:-16rem;
  top:-18rem;
  border:1px solid rgba(127,208,237,.2);
  border-radius:50%;
  box-shadow:0 0 0 4rem rgba(127,208,237,.035),0 0 0 8rem rgba(127,208,237,.025);
}
.pageHero .wrap{position:relative;z-index:1}

.detailLead{
  max-width:48rem;
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
}
.detailGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}
.detailItem{
  padding:2rem;
  background:var(--pale);
  border-top:2px solid var(--blue);
}
.detailItem h3{
  margin:0 0 .7rem;
  color:var(--navy);
  font-size:1.25rem;
}
.detailItem p{
  margin:0;
  color:var(--muted);
}
.detailNumber{
  display:block;
  margin-bottom:.8rem;
  color:var(--blue);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.15em;
}
.contactForm{
  max-width:62rem;
}
.formRow{
  display:grid;
  grid-template-columns:12rem 1fr;
  border-top:1px solid var(--line);
}
.formRow:last-child{border-bottom:1px solid var(--line)}
.formLabel{
  padding:1.2rem;
  color:var(--navy);
  background:var(--pale);
  font-weight:800;
}
.formValue{
  padding:1.2rem;
  color:var(--muted);
}
.formValue input:required,
.formValue textarea:required{
  border:1px solid var(--redin);
  background:#fff;
}

.formValue input,
.formValue textarea{
  width:100%;
  padding:.8rem;
  border:1px solid var(--line);
  background:#fff;
}


.formValue textarea{min-height:10rem;resize:vertical}
.formNote{
  margin-top:1.2rem;
  color:var(--muted);
  font-size:.8rem;
}

.formValue input._ch{	display:none }
.formValue label{
	display:inline-block;
	border:1px outset #999;
	background-color:#EEE;
	padding:0.2em 0.5em;
	font-size: 0.8em;
	cursor:pointer;
}

.formValue input._ch:checked+label{
	border:1px inset #99F;
	background-color:#CCF;
	color:#66F;
}


@media(max-width:700px){
  .detailGrid{grid-template-columns:1fr}
  .formRow{grid-template-columns:1fr}
  .formLabel{padding-bottom:.4rem}
  .formValue{padding-top:.4rem}
}


/* ============================================================
   v8 / Mobile hamburger menu
   ============================================================ */
.menuButton{
  display:none;
  position:relative;
  width:3rem;
  height:3rem;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:101;
}
.menuButton span,
.menuButton::before,
.menuButton::after{
  content:"";
  position:absolute;
  left:.65rem;
  width:1.7rem;
  height:2px;
  background:var(--navy);
  transition:transform .25s ease, opacity .2s ease;
}
.menuButton::before{top:.85rem}
.menuButton span{top:1.42rem}
.menuButton::after{top:1.99rem}


@media(max-width:900px){

  .headerInner{
    position:relative;
  }


  .menuButton{
    display:block;
    margin-left:auto;
  }

  

  

  

  

  

  

  

  

  .menuButton.is-open::before{
    top:1.42rem;
    transform:rotate(45deg);
  }

  .menuButton.is-open span{
    opacity:0;
  }

  .menuButton.is-open::after{
    top:1.42rem;
    transform:rotate(-45deg);
  }
}



/* ============================================================
   v9 / Fixed header + back-to-top
   ============================================================ */

/* Header remains visible while scrolling. */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  color:var(--navy);
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(23,45,61,.08);
  box-shadow:0 .25rem 1rem rgba(23,45,61,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Keep the mobile menu below the fixed/sticky header. */
@media(max-width:900px){
  
}

/* Back to top button */
.backToTop{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.25rem;
  height:3.25rem;
  padding:0;
  border:1px solid rgba(23,45,61,.18);
  border-radius:50%;
  background:rgba(255,255,255,.96);
  color:var(--navy);
  box-shadow:0 .5rem 1.5rem rgba(23,45,61,.14);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(.75rem);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
}
.backToTop.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.backToTop::before{
  content:"";
  width:.55rem;
  height:.55rem;
  border-top:2px solid currentColor;
  border-left:2px solid currentColor;
  transform:translateY(.15rem) rotate(45deg);
}
.backToTop:hover{
  background:var(--pale);
}
.backToTop:focus-visible{
  outline:3px solid rgba(11,126,211,.3);
  outline-offset:3px;
}


body.home .header {
	position:fixed;
}
/* TOPページ：hero通過前はヘッダーを透過 */
body.home .header.hero-overlap {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
	border-bottom:none;
	color:#FFF;
}

body.home .header.hero-overlap .logo a,
body.home .header.hero-overlap .nav a {
    color: #ffffff;
	border-color: #FFF;
}

body.home .header.hero-overlap .nav.is-open ul a {
    color: var(--navy);
}
body.home .header.hero-overlap .nav.is-open ul .navContact a {
    color: var(--blue);
}


body.home .header.hero-overlap .nav a:hover,
body.home .header.hero-overlap .nav a:focus-visible {
    color: #ffffff;
}

body.home .header.hero-overlap .menuButton {
    color: #ffffff;
    border-color: rgba(255,255,255,.8);
}

body.home .header.hero-overlap .menuButton span,
body.home .header.hero-overlap .menuButton::before,
body.home .header.hero-overlap .menuButton::after 
{
    background: #ffffff;
}

/* heroを通過したら通常のヘッダー */
body.home .header {
    transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

body.home .header .logo a,
body.home .header .nav a {
    transition: color .3s ease;
}

/* =========================================================
   Subpage visual refinement
   ========================================================= */

.subPageHero {
    position: relative;
    min-height: 25rem;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    background: #102A43;
}

.subPageHero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10rem;
    height: .25rem;
    background: #2F80ED;
}

.subPageHero__en {
    margin: 0 0 .75rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8EC5FF;
}

.subPageHero__copy h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: .04em;
}

.subPageHero__copy p {
    max-width: 36rem;
    margin: 1.5rem 0 0;
    line-height: 2;
    color: rgba(255,255,255,.82);
}

.subPageHero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 6vw;
    color: #fff;
}

.subPageHero__image {
    position: relative;
    min-height: 25rem;
}

.subPageHero__image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #102A43 0%, rgba(16,42,67,.25) 42%, rgba(16,42,67,0) 100%);
}

.subPageHero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   detailItem pattern 02
   Keep the original two-column card layout,
   but give the number its own narrow column.
   ============================================================ */

.detailGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}

.detailItem{
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr);
  column-gap:1.75rem;
  align-items:start;
  padding:2rem 2.25rem;
  background:var(--pale);
  border-top:2px solid var(--blue);
}

.detailNumber{
  display:block;
  margin:0;
  padding:.15rem 1.25rem 0 0;
  border-right:1px solid var(--line);
  color:var(--blue);
  font-size:.65rem;
  font-weight:900;
  line-height:1.5;
  letter-spacing:.12em;
}

.detailItem h3{
  margin:0 0 .65rem;
  color:var(--navy);
  font-size:1.25rem;
  line-height:1.45;
}

.detailItem p{
  grid-column:2;
  margin:0;
  color:var(--muted);
  line-height:1.9;
}

@media(max-width:700px){
  .detailGrid{
    grid-template-columns:1fr;
  }

  .detailItem{
    grid-template-columns:5.5rem minmax(0,1fr);
    column-gap:1.25rem;
    padding:1.75rem;
  }

  .detailNumber{
    padding-right:.9rem;
  }
}


.logo img{
  display:block;
  width:9rem;
  height:auto;
}

/* Logo color by header state */
.header:not(.hero-overlap) .logo img{
  filter:none;
}

body.home .header.hero-overlap .logo img{
  filter: invert(1);
  visibility: hidden;
}
body.home .header.hero-overlap a.logo{
    background-image: url(../../img/logoW.svg);
    background-size: cover;
}
.footer .logo img{
  filter:none;
}


/* ============================================================
   261001 renewal / service priority
   ============================================================ */
.servicePriority{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.servicePriority .serviceItem{
  min-height:15rem;
}
.servicePriority .serviceMain{
  min-height:20rem;
}
.servicePriority .serviceSub{
  min-height:12rem;
}
.servicePriority .serviceLow{
  opacity:.88;
}
.servicePriority .serviceMain .serviceNo{
  font-size:.8rem;
}
.featureDetail{
  display:grid;
  grid-template-columns:7rem minmax(0,1fr);
  gap:2rem;
  padding:3rem 0;
  border-top:2px solid var(--blue);
}
.featureNo{
  margin:0;
  color:var(--blue);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.12em;
}
.featureDetail h3{
  margin:0 0 1rem;
  font-size:clamp(1.4rem,2.2vw,2.2rem);
}
.featureDetail p{
  max-width:48rem;
}
.serviceDetailSecondary,
.serviceDetailLow{
  margin-top:5rem;
}
.serviceDetailLow{
  opacity:.9;
}
.worksStatement{
  max-width:58rem;
  margin:7rem 0 3rem auto;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.worksStatement h2{
  margin:0 0 1.5rem;
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.15;
}
.worksStatement p:last-child{
  max-width:42rem;
}
.historyList{
  margin:0;
  padding:0;
  list-style:none;
}
.historyList li{
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.formSubmit{
  display:flex;
  justify-content:flex-end;
  margin-top:2rem;
}
.formSubmit button{
  min-width:12rem;
  padding:1rem 2rem;
  border:0;
  background:var(--navy);
  color:#fff;
  font:inherit;
  cursor:pointer;
}
.contactPhone{
  margin-top:5rem;
}
.topPhoto01{
  background-image:url("../../img/it.jpg");
}
.topPhoto02{
  background-image:url("../../img/works.jpg");
}
@media(max-width:900px){
  .servicePriority{
    grid-template-columns:1fr;
  }
  .servicePriority .serviceItem,
  .servicePriority .serviceMain,
  .servicePriority .serviceSub{
    min-height:auto;
  }
  .featureDetail{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .worksStatement{
    margin-top:4rem;
  }
}

@media(max-width:600px){
  .backToTop{
    right:1rem;
    bottom:1rem;
    width:2.9rem;
    height:2.9rem;
  }

	.subPageHero {
	    display: block;
	}

  
	.subPageHero__copy {
	    display: block;
		text-shadow: 1px 1px 1px #000;
	}
	
	.subPageHero__image {
	    position: absolute;
		top:0;
		right:0;
	    height: 25rem;
	}

}


/* =========================================================
   6 services / visual hierarchy
   ========================================================= */
.servicePriority{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.servicePriority .serviceItem{
  min-height:14rem;
  padding:2rem;
}
.servicePriority .serviceItem:hover{
  padding-inline:2.5rem;
}
.servicePriority .servicePrimary{
  min-height:22rem;
  align-content:center;
}
.servicePriority .servicePrimary .serviceNo{
  color:var(--blue);
  font-size:.8rem;
}
.servicePriority .servicePrimary h3{
  font-size:clamp(1.7rem,2.5vw,2.5rem);
}
.servicePriority .serviceNetwork{
  grid-column:1 / -1;
  min-height:17rem;
  background:var(--pale);
  border-top:2px solid var(--blue);
}
.servicePriority .serviceSub{
  min-height:12rem;
}
.servicePriority .serviceLow{
  opacity:.78;
}
.serviceDetailPrimary .featureDetail{
  min-height:15rem;
}
.serviceDetailNetwork{
  margin-top:5rem;
}
.serviceDetailNetwork .featureDetail{
  border-top-color:var(--blue);
}
.worksGrid .worksPrimary{
  min-height:15rem;
  border-top-width:3px;
}
.worksGrid .worksNetwork{
  grid-column:1 / -1;
}
.worksGrid .detailItemLow{
  opacity:.78;
}

@media(max-width:900px){
  .servicePriority{
    grid-template-columns:1fr;
  }
  .servicePriority .serviceNetwork{
    grid-column:auto;
  }
  .servicePriority .servicePrimary,
  .servicePriority .serviceNetwork,
  .servicePriority .serviceSub{
    min-height:auto;
  }
  .worksGrid .worksNetwork{
    grid-column:auto;
  }
}

@media(max-width:600px){
  .servicePriority .serviceItem{
    padding:1.5rem;
  }
  .servicePriority .serviceItem:hover{
    padding-inline:1.5rem;
  }
}

/* Honeypot field for contact forms */
.hpField{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}

/* AJAX contact form feedback */
.formResponse{margin-top:1.25rem;padding:1rem 1.2rem;border:1px solid var(--line);background:#f4f7fb;color:var(--navy);line-height:1.8;white-space:pre-line}
.formResponse.isError{border-color:#c85a5a;background:#fff5f5;color:#8d2020}
.formResponse.isSuccess{border-color:#4d9872;background:#f1faf5;color:#205c3e}
.formSubmit button:disabled{opacity:.65;cursor:wait}
.formValue [aria-invalid="true"]{outline:2px solid #b83b3b;outline-offset:1px}

/* Contact form field validation */
.contactForm .fieldError{margin:.45rem 0 0;color:#a12626;font-size:.9rem;line-height:1.6}
.contactForm [aria-invalid="true"]{border-color:#c83f3f!important;outline-color:#c83f3f}