/*layout*/
@charset "utf-8";
html{ scroll-behavior: smooth; scroll-padding-top: 80px; }
.contents-width-l { width: 100%; padding: 0 min(5%, 50px);  margin: 0 auto; }
.contents-width-l.has-max { max-width: 1920px; }
.contents-width-m { width: 90%; max-width: 1280px;  margin: 0 auto; }
.contents-width { width: 90%; max-width: 980px;  margin: 0 auto; }
.contents-width-s { width: 90%; max-width: 830px;  margin: 0 auto; }


.conts-section { padding: 40px 0; }
.conts-section-t { padding-top: 30px; }
.conts-bottom-margin {margin-bottom: 15vw; }
@media screen and (min-width: 768px) {
  .conts-section { padding: 80px 0; }
  .conts-section-t { padding-top: 80px; }
  .conts-bottom-margin {margin-bottom: 100px; }
}

.hamburger { width:2.5rem; height: 2.5rem; background: none; border: none; position: relative; text-indent: 200%; padding: 0; overflow: hidden; white-space: nowrap; position: absolute; top: 10px; right: 10px; margin: auto; display: none; z-index: 999; }
.hamburger::before,
.hamburger::after { content: ''; width: 1.5rem; height: 2px; display: block; position: absolute; inset: 0; margin: auto; background: #1654A7;transition: transform .3s; }
.hamburger::before { transform: translateY(-6px); box-shadow: 0 6px 0  #1654A7; }
.hamburger::after { transform: translateY(6px); }

.hamburger.open::before { transform: rotate(45deg); box-shadow: none; }
.hamburger.open::after { transform: rotate(-45deg); }


@media screen and (max-width: 1000px) {
  .hamburger { display: block; }
}


.header { position: fixed; top: 0; right: 0; left: 0; z-index: 99; margin: auto; padding: 1em 2em; display: flex; align-items: center; transition: background .3s; }
.scrolled .header { background: rgba(255, 255,255, .7);}
.header .logo { font-size: .7rem; font-weight: 500; }
.header .logo span { display: block; font-size: 1.125rem; color: #2B3162; font-weight: 600; }
.global-navi { display: flex; margin-left: auto; }
.global-navi > li { margin-right: 2em; }

@media screen and (max-width: 1200px) {
  .header .logo { font-size: .625rem; }
  .header .logo span { font-size: 1rem; }
  .header .btn-round { width: 150px; font-size: .8rem; }
  .global-navi { font-size: .9rem; }
  .global-navi > li { margin-right: 1.5em; }
}
@media screen and (max-width: 1000px) {
  .global-navi { transform: translateX(100%); width: 20em; height: 100vh; right: 0; top: 0; position: fixed; margin: auto; 
  transition: transform .3s; display: block; padding: 5em 3em; background: #2B3162; color: #FFF; }
  
  .global-navi > li { margin-right: 0; margin-bottom: 1em;  }
  
  .header .btn-round { margin-left: auto; margin-right: 3em; width: auto; padding: .5em 2em .5em 1em; }
  .header .btn-round::after { right: 1em;} 
  
  .open .global-navi { transform: translateX(0);  }
}

@media screen and (max-width: 768px) {
  .header { padding: .5em 1em; }
}
.footer { margin-top: 120px;  background: #FFF; }
.footer-top { width: 90%; margin: 0 auto; padding: 50px 0; display: flex; align-items: flex-end; justify-content: space-between; }

.foot-logo { font-size: 2rem; line-height: 1.4; }
.foot-logo span{ display: block; font-size: .6em; margin-top: .5em;  }
.foot-menu { font-size: .8375rem; display: flex; align-items: center;}
.foot-menu > li:not(:last-child) { margin-right: 1.5em; }
.footer-bottom { color: #FFF; background: #2B3162; padding: .8em 0; }

.footer-bottom .inner { width: 90%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.foot-submenu { display: flex; font-size: .8375rem; }
.foot-submenu > li:not(:last-child) { margin-right: 1.5em; }
.copyright { font-size: .625rem; }

@media screen and (max-width: 1200px) {
  .foot-logo { font-size: 1.5rem; }
  .foot-logo span { font-size: .5em; }
}
@media screen and (max-width: 900px) {
  .footer-top { flex-direction: column; align-items: flex-start; margin-top: 80px;  }
  .foot-menu { margin-top: 3em; }
  
  
  .footer-bottom { padding-top: 2em; }
  .footer-bottom .inner { flex-direction: column; align-items: flex-start; }
  
  
  .foot-submenu { flex-wrap: wrap; }
  .foot-submenu > li { margin-bottom: .5em; }
  .copyright { margin-top: 2em; width: 100%; text-align: right; display: block ;}
  
}