:root{
  --navy:#0C1C6F;
  --navy-2:#121F62;
  --heading-navy:#07124D;
  --gold:#7F6B4A;
  --gold-l:#B6A47B;
  --paper:#F5F3EE;
  --line:#D5D0C4;
  --gray:#656E7A;
  --navy-rgb:12,28,111;
  --theme-navy-bg:#0B185B;
  --theme-navy-bg-2:#07124D;
  --theme-navy-bg-rgb:11,24,91;
  --theme-muted-on-dark:#C8D0DD;
  --theme-muted-on-dark-rgb:200,208,221;
  --theme-muted-on-panel:#B8C1CF;
  --gold-rgb:127,107,74;
  --gold-l-rgb:182,164,123;
  --paper-rgb:245,243,238;
  --line-rgb:213,208,196;
  --recruit-bg:var(--navy);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible{outline-color:rgba(var(--gold-rgb),.42)}

@media(max-width:960px){
  body.nav-open header{box-shadow:0 18px 45px rgba(var(--navy-rgb),.10)}
  .nav-toggle{border-color:rgba(var(--gold-rgb),.34);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.08)}
  .nav-toggle[aria-expanded="true"]{border-color:rgba(var(--gold-rgb),.5);box-shadow:0 0 0 5px rgba(var(--gold-rgb),.12)}
  .hd nav{box-shadow:0 28px 70px rgba(var(--navy-rgb),.15)}
}

.cta:hover,
.btn-navy:hover{background:var(--theme-navy-bg);border-color:var(--theme-navy-bg)}
.btn-line:hover{border-color:var(--gold);color:var(--theme-navy-bg)}
.ft-btn.gold:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--theme-navy-bg)}
.btn-line .arrow-icon,
.btn-gold .arrow-icon,
.company-link .arrow-icon,
.sv-more .arrow-icon{background:rgba(var(--gold-rgb),.10)}
.btn-line:hover .arrow-icon,
.btn-line:focus-visible .arrow-icon{background:rgba(var(--gold-rgb),.12)}

.hero::before{background-image:linear-gradient(rgba(var(--gold-rgb),.07) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--gold-rgb),.07) 1px,transparent 1px)}
.hero h1 em .u{border-bottom-color:var(--gold)}

.service,
footer{background:var(--theme-navy-bg)}
.service::before{background-image:linear-gradient(rgba(var(--gold-l-rgb),.04) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--gold-l-rgb),.04) 1px,transparent 1px)}
.service .sec-head p.sub,
.sv-card p{color:var(--theme-muted-on-panel)}
.sv-card{background:var(--theme-navy-bg-2);border-color:rgba(var(--gold-l-rgb),.16)}
.sv-more{border-bottom-color:rgba(var(--gold-l-rgb),.48)}

.st-badge{background:var(--gold);box-shadow:0 18px 30px rgba(var(--gold-rgb),.15)}

.mission{background-image:linear-gradient(rgba(var(--theme-navy-bg-rgb),.9),rgba(var(--theme-navy-bg-rgb),.94)), url('../image/mission.jpg')}
.mission::after{color:rgba(var(--gold-l-rgb),.032)}
.mission p,
.recruit p{color:var(--theme-muted-on-dark)}
.mvv{border-color:rgba(var(--gold-l-rgb),.4)}
.mvv > div{border-color:rgba(var(--gold-l-rgb),.22)}

footer{color:var(--theme-muted-on-dark)}
.ft-col a{color:var(--theme-muted-on-dark)}
.ft-col a:hover,
.ft-btn.line:hover{color:var(--gold-l)}
.ft-btn.line{border-color:rgba(var(--white-rgb),.32)}
.ft-company,
.copy{border-color:rgba(var(--gold-l-rgb),.17)}
.ft-company .add,
.copy{color:rgba(var(--theme-muted-on-dark-rgb),.7)}

@media(max-width:560px){
  .mission::after{color:rgba(var(--gold-l-rgb),.03)}
  .ft-col{border-color:rgba(var(--gold-l-rgb),.15)}
  .fix-cta{box-shadow:0 10px 26px rgba(var(--navy-rgb),.16)}
}