@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  color: #333; /* RGB */
 font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6em;
  line-height: 2.2rem;
  text-align: center;
  background-color: #fff;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
section h2 {
  font-size: 2.4rem;
}

a:hover {
  opacity: 0.5;
}
.none {
  display: none;
}
*, :before, *:after {
  box-sizing: border-box;
}
img {
  vertical-align: top;
}





/*ヘッダー*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: #ffffff;
  box-sizing: border-box;
  font-family: Arial, Helvetica, "sans-serif";
}

.hamburger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
  background-color: #ffffff;
}

.logo-area img {
  height: 50px;
  display: block;
  padding-right: 10px;
}

.site-title {
  margin: 0;
}
.site-title a {
  color: #000061;
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

/* PCナビゲーション */
.pc-nav {
  display: flex;
  margin-left: auto;
}
.pc-nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-nav li a {
  color: #000061;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

/* ハンバーガー初期は非表示 */
.btn-gNav,
.gNav {
  display: none;
}
.btn-gNav.open span:nth-child(1) {
  top: 6px;
  transform: rotate(-45deg);
}
.btn-gNav.open span:nth-child(2),
.btn-gNav.open span:nth-child(3) {
  top: 6px;
  transform: rotate(45deg);
}


/* ===== スマホ用レイアウト ===== */
@media screen and (max-width: 999px) {
  .hamburger {
    height: 60px;
  }

  .pc-nav {
    display: none;
  }

  .btn-gNav {
    display: block;
    position: fixed;
    top: 20px;
    right: 28px;
    width: 35px;
    height: 24px;
    z-index: 12;
    cursor: pointer;
  }

  .btn-gNav span {
    position: absolute;
    width: 100%;
    height: 1.5px;
    background: #000061;
    border-radius: 10px;
    transition: all 400ms;
  }

  .btn-gNav span:nth-child(1) { top: 0; }
  .btn-gNav span:nth-child(2) { top: 10px; }
  .btn-gNav span:nth-child(3) { top: 20px; }



  .gNav {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 52, 82, 0.82);
    font-size: 1.8rem;
    z-index: 1;
    padding-top: 40%;
    transition: 0.3s;
  }

  .gNav.open {
    right: 0;
  }

  .gNav .gNav-menu {
    display: block;
    text-align: center;
    padding: 0;
    list-style: none;
  }

  .gNav .gNav-menu li {
    padding-bottom: 30px;
  }
  
  .gNav .gNav-menu li a{
    text-decoration: none;
    color: #ffffff;
  }

  .menu-list {
    display: block;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 22px;
  }

  .gNav-menu li:first-child {
    padding: 0 20px 8px;
    border-bottom: solid 1.5px #FFFFFF;
    margin-bottom: 65px;
    display: inline-block;
  }

  /* スマホ時のみ会社名を中央固定 */
  .site-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-title a {
    font-size: 1.6rem;
  }
  .logo-area img {
  height: 40px;
}
  
  /* Swiperページネーション非表示 */
.swiper-pagination {
  display: none !important;
}
}


@media screen and (max-width: 480px) {
.logo-area img {
  height: 35px;
}
  .site-title a {
    font-size: 1.5rem;
  }
  .site-title .name-part1,
  .site-title .name-part2 {
    display: block;
    text-align: center;
  }
}



/*fotter*/
footer {
  background-color: #21578D;
  margin: 0 auto;
  padding: 200px 0 70px;;
  
}

footer ul {
  display: flex;
  list-style: none;
  font-size: 1.8rem;
  text-align: center;
  justify-content: center; 
  
}

footer ul li {
  
  padding: 80px 30px;
  border-top: solid #FFFFFF;
  border-bottom: solid #FFFFFF;
  
}

footer ul li a {
  color: #FFFFFF;
  font-size: 2.0rem;
  font-family: Arial, Helvetica, "sans-serif";
  font-weight: 700;
  letter-spacing: 0.2rem;
  text-decoration: none;
}

.campany-name {
  color: #FFFFFF;
  font-size: 1.8rem;
  font-family: Arial, Helvetica, "sans-serif";
  font-weight: 700;
  letter-spacing: 0.2rem;
  padding-top: 170px;
}

@media screen and (max-width: 767px) {
  footer ul {
    display: block;
    padding:40px 0; 
    border-top: solid #FFFFFF;
  border-bottom: solid #FFFFFF;
    width: 50%;
    margin: 0 auto;
  }
  footer ul li {
    border-top: none;
  border-bottom: none;
    padding: 25px 0;
}
  footer ul li a {
  color: #FFFFFF;
  font-size: 1.6rem;
}
  .campany-name {
  color: #FFFFFF;
  font-size: 1.6rem;
    padding-top: 140px;
}
  footer {
  padding: 170px 0 70px;
}


}