@charset "UTF-8";
/* CSS Document */
:root {
  --container-max-width: 78vw;
  --container-max-width-sp: 86vw;
  --margin-left:auto;
  --padding-right80:80rem;
  --margin-right80:80rem;
}
html {
  font-size:0.0520833333vw;
  width: 100%;
  float: left;
  box-sizing: border-box;
  margin: 0;
}
@media(max-width:640px){
  html{
    font-size:0.1333333333vw;
  }
}
body {
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24rem;
  line-height: 1.7;
  letter-spacing: 3rem;
  text-align: left;
  overflow-x: hidden;
  left: 0;
  height: 100%;
}
img{
  width: 100%;
  object-fit: cover;
  overflow: hidden;
}
h1 {
  font-size: 40rem;
  margin-bottom: 20rem;
  letter-spacing: 10rem;
  text-align: center;
  line-height: 63rem;
}
h2 {
  font-size: 70rem;
  font-weight: 600;
  color: #333;
  letter-spacing: 6rem;
  margin-bottom: 10rem;
}
h3 {
  font-size:36rem;
  color: #3988a2;
}
.mB40 {
  margin-bottom: 40rem;
  display: block;
}
.mT40{
  margin-top: 40rem;
}
.mB100 {
  margin-bottom: 100rem !important;
}
@media (max-width: 640px) {
  .mB100{
    margin-bottom: 40rem!important;
  }
}
.mB120 {
  margin-bottom: 120rem !important;
}
.sp{
  display: none!important;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600!important;
}
.tA-R {
  text-align: right;
}
@media (max-width: 640px) {
  .pc{
    display: none!important;
  }
  .sp{
     display: block!important;
  }
}
.none {
  display: none;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.header{
  margin: 100rem 0;
}
@media (max-width: 640px) {
  .header{
    margin: 60rem 0;
  }
  .headerImg {
    margin-top: 400rem!important;
  }
}
/* globalメニュー　スライドで表示加・削除クラス */
.show{
  opacity: 1;
  transition: opacity 0.5s;
}
.globalMenuLists {
  display: flex;
  align-items: center;
}
.globalMenu img {
  height: 50rem;
  width: auto;
}
.globalMenu a {
  color: #333;
}
.globalMenuList {
  font-size: 36rem;
  margin-left: auto;
}
.globalMenuList ul{
  display: flex;
  gap: 80rem;
}
/*ドロワー*/
#nav-drawer {
  position: fixed;
  z-index: 9999;
  right: 0;
}
#nav-open {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 250rem;
  padding-top: 10rem;
  padding-bottom: 40px;
  text-align: right;
  margin-right: 80rem;
}
/*クローズボタン*/
#nav-close {
  position: fixed;
  top: 100rem;
  right: 100rem;
  background-color: #fff;
  z-index: 10000;
}
#nav-close::before, #nav-close::after { /* 共通設定 */
  content: "";
  position: absolute;
  width: 2px; /* 棒の幅（太さ） */
  height: 40px; /* 棒の高さ */
  background: #fff;
}

#nav-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}

#nav-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
/*クローズボタン*/
#nav-content {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #6496ac;
  text-align: right;
  padding:  80rem;
  transform: translateX(-105%);
  transition: 0.5s ease-in-out;

}
#nav-content ul li {
  margin: 0 auto;
  vertical-align: top;
  padding-bottom: 40rem;
  text-align: left;
  font-size: 40rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 5rem;
}
#nav-content ul li a {
  text-decoration: none;
  color: #fff;
  margin: 0 auto;
  text-align: left;
}
/*ロゴ背景*/
.drawerBgLogo{
  z-index: -1;
  position: fixed;
  top: 49%;
  width: 93%;
  opacity: 0.4;
}
.drawer-menu__container {
  float: left;
}
.drawer-menu__container-about {
  padding-left: 20rem;
  font-size: 16px !important;
  font-weight: 400 !important;
}
.drawer-menu__logo {
  text-align: start;
  margin-bottom: 80rem;
}
.drawer-menu__logo img {
  filter: invert(1);
  width: 400rem;
}
#nav-input:checked ~ #nav-close {
  display: block;
}
#nav-input:checked ~ #nav-content {
  transform: translateX(0%);
}
#nav-open span, #nav-open span:before {
  /*display: block;
  position: absolute;
  height: 2px;
  width: 80rem;
  background-color: #000;*/
  content: " ";
  display: block;
  height: 2px;
  background-color: #333;
  /* content: " "; */
  /* top: 100rem; */
  position: absolute;
  width: 50px;
  /* height: 40px; */
  /*right: 100rem;*/
}
#nav-open span:before {
bottom: -13px;
}
#nav-open span:after {
bottom: -30px;
}
.footer{
  padding-right:var(--padding-right80);
  margin-bottom:100rem;
}
@media(max-width: 640px){
  .footer{
    padding-right:inherit;
  }
}
small {
  font-size: 18rem;
  font-weight: 500;
  display: block;
  text-align: right;
}
@media(max-width:640px){
  small {
    font-size: 12rem;
    text-align: center;
  }
}
/*ベタ塗りボタン*/
.btnBg {
  background-color: #3988a2;
  width: 350rem;
  height: 80rem;
  font-size: 20rem;
  margin-top: 30rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
	border-radius:0;
}
.btnLine {
  border: 1px solid #000;
  width: 350rem;
  height: 80rem;
  font-size: 20rem;
  margin-top: 30rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
	border-radius:0;
}

@media(max-width: 640px){
  .btnBgRight{
    margin-right: 45rem;
  }
}
.fontWhite{
  color: #fff;
}
a{
  text-decoration: none;
}
ul li {
  list-style: none;
}
/*下層ページセクションタイトル*/
.sectionTitle {
  font-size: 50rem;
  margin-bottom: 30rem;
}
.sectionTitleJa {
  padding-left: 30rem;
  font-size: 30rem;
  vertical-align: middle;
}


.spBr {
  display: none;
}
@media(max-width: 640px){
  .spBr {
    display: block;
  }
}
.pcNone {
  display: none;
}
@media (max-width: 640px) {
  .pcNone {
    display: inline-block;
  }
}
/*横幅100rem空ける*/
.mS100rem{
  margin-right: 100rem;
  margin-left: 100rem;
}
/*SP横幅60rem空ける*/
@media (max-width: 640px) {
  .mS100rem{
    margin-right: 60rem;
    margin-left: 60rem;
  }
}
/*各コンテンツflex*/
.sectionFlex, .section-service, .section-recruit, .section-profile, .section-contact{
  display: flex;
  gap: 80rem;
}
@media (max-width: 640px) {
  .sectionFlex, .section-service, .section-recruit, .section-profile, .section-contact{
    display: inherit;
  }
}
.flexRight {
  flex: 3;
}
.flexLeft{
flex: 1;
}
@media (max-width: 640px) {
  .flexLeft {
    margin-bottom: 30rem;
  }
}
.square {
  background-color: #3988a2;
  width: 24rem;
  height: 24rem;
  margin-right: 10rem;
  display: inline-block;
  vertical-align: text-bottom;
}
/*ヘッダースクロール*/

/* 地域マップのボタンに対するスタイル */
.mapCategoryButtons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.mapFilterBtn {
  padding: 10px 24px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #333;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: 0.2s;
}

.mapFilterBtn:hover {
  background-color: #eee;
}
.mapFilterBtn.active {
  background-color: #333;
  color: #fff;
}