@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&family=Grape+Nuts&family=Poppins:wght@600&display=swap');

*{
  box-sizing: border-box;
}
html{
  font-size: 16px;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
  margin: 0;
  padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var{
  font-style:normal;
}
ul{
  list-style:none;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}
img,abbr,acronym,fieldset{
  border:0;
}

body{
  overflow-x: hidden;
  color:#26282f;
  font-family: 'Inter','Sawarabi Gothic',Noto Sans JP, '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  line-height: 1.8;
  letter-spacing: 0.02em;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  position: relative;
  font-size: 1.1rem;
  font-weight: 400;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
.invisible {
  transition: opacity 0.3s ease;
  opacity: 0.0;
}
.visible {
  transition: opacity 0.3s ease;
  opacity: 1.0;
}
p {
  line-height: 2;
  letter-spacing: .05em;
  font-size: .95em;
}
ul {
  list-style: none;
}
a{
  text-decoration: none;
  color:#3c434c;
}
img{
  max-width: 100%;
}

.la{
  font-family: 'Grape Nuts', cursive;
}
.pop{
  font-family: 'Poppins', sans-serif;
}
.row-r{
  flex-direction: row-reverse;
}

@media screen and (max-width: 768px) {
p{
  font-size: 14px;
  letter-spacing: 0;
  }
}

/*==============================
  Page Scrool
  ==============================*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 100%;
  z-index: 9999;
}
#page-top a {
  background: #3366bb;
  text-decoration: none;
  width: 70px;
  height: 70px;
  line-height: 65px;
  text-align: center;
  display: block;
  opacity: 0.9;
  padding: 0;
  border-radius: 500px;
}
#page-top a img{
  width: 30px;
  height: 30px;
  margin-top: 18px;
}
#page-top a:hover {
  text-decoration: none;
  background: #0a7cc4;
}


/*====================================
 Header
 =====================================*/
header {
  position: fixed;
  width: 100%;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background-color: #fff;
  transition: .3s;
  height: 70px;
  z-index: 99999;
}
.header-small{
  height: 70px;
  font-size: 13px;
}
.header-btn{
  background: #3366bb;
  height: 100%;
  padding: 0 .4vw;
  display: flex;
}
.header-btn .pc span{
  background: #fff;
  color: #3366bb;
  font-size: max(.75vw, 8px);
  font-weight: 500;
  padding: 0 10px 2px 10px;
  border-radius: 500px;
  font-weight: 600;
}

.header-btn .pc p{
  line-height: 1.2;
  font-size: max(1vw, 11px);
  font-weight: 600;
  padding-top: 5px;
  letter-spacing: 0;
}

@media screen and (min-width: 991px) {
.sp{
  display: none;
}
.nav-item_sub_sp{
  display: none;
}
.nav-wrap{
  width: 62%;
  margin-left: auto;
}
.header-btn{
  width: 16%;
}
.header-logo{
  width: 20%;
  text-align: left;
  margin-bottom: -18px;
}
.header-logo img{
  padding-left: 1vw;
  }
}
@media screen and (max-width: 991px) {
.pc{
  display: none;
}
header{
  height: 58px;
}
.header-small{
  height: 54px;
  font-size: 13px;
}
.header-logo{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  margin-left: 0;
}
.header-logo img{
  width: 240px;
  margin: 16px 0 0;
}
.header-btn{
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
}
}

/*====================================
 Global Navigation
 =====================================*/
.global-nav {
  margin: 0;
  position: relative;
}
.global-nav .nav-list {
  display: flex;
  justify-content: center;
  
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
.global-nav .nav-list .nav-item {
  flex: 1;
}
*/
.global-nav .nav-list .nav-item a {
  color: #26282f;
  display: block;
  padding: 0 1vw;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: max(.98vw, 12px);
  letter-spacing: .08em;
  height: 70px;
  line-height: 70px;
}
.global-nav .nav-list .nav-item:last-child a {
  border-right: none;
}

/* サブナビゲーション */
@media screen and (min-width: 991px) {
.global-nav .nav-list {
  position: relative;
}
.nav-item_sub {
  background: #e9ecf3;
  left: 0;
  margin: 0 calc(57% - 57vw);
  opacity: 0;
  position: absolute;
  top: 70px;
  transition: all 0.2s ease;
  visibility: hidden;
  width: 100vw;
}
.nav-item_sub .inner {
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 30px;
}
.nav-item:hover .nav-item_sub {
  opacity: 1;
  visibility: visible;
}
.global-nav .nav-list .nav-item a {
  position: relative;
}
.global-nav .nav-list .nav-item a:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 1px;
  background: #3366bb;
  transform: scale(0, 1);
  transition: 0.4s;
}
.global-nav .nav-list .nav-item a:hover:before {
  transform: scale(1);
}
.nav-item_sub__ttl{
  width: 20%;
  padding: 3em 0;
  color: #313131;
  text-align: left;
}
.nav-item_sub__ttl p{
  font-size: 2em;
  font-weight: 600;
}
.nav-item_sub__ttl span{
  color: #3366bb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.nav-item_sub__ttl div{
  font-size: 13px;
  padding: 2em 2vw 0 0;
  font-weight: 500;
}
.nav-item_sub__list{
  width: 80%;
  padding: 3em 0;
}
.nav-item_sub__list ul{
  display: flex;
}
.nav-item_sub__list li{
  width: 25%;
}
.nav-item_sub__list li img{
  border-radius: 4px;
  margin-bottom: -10px;
  transition: .3s;
}
.nav-item_sub__list li a:hover img{
  opacity: 0.8;
}
.nav-item_sub__list li span{
  line-height: 1;
  padding: 0;
  margin: 0;
}
.nav-item_sub__list li a{
  height: auto!important;
  line-height: auto!important;
  padding: 0 1vw!important;
  
}
.nav-item_sub__list li a:before{
  position: relative!important;
}
.nav-item_sub .inner ul li span{
  display: block;
  font-size: .9em;
}
.global-nav .nav-list .nav-item_sub a {
  text-align: left;
}

}

/* スマホハンバーガーメニューボタン */
.global-nav-icon {
  display: none;
}
@media screen and (max-width: 991px) {
.global-nav-header {
  height: 50px;
}
#g-nav {
  position: fixed;
  z-index: 999;
  top: -120%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(245,248,255);
  transition: all 0.6s;
}
#g-nav.panelactive #g-nav-list {
  position: fixed;
  z-index: 333;
  width: 100%;
  vertical-align: top;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#g-nav.panelactive {
  top: 54px;
  background: #fff;
}
#g-nav #g-nav-list{
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  padding-top: 0;
}
.global-nav .nav-list .nav-item{
  width: 100%;
}
.global-nav .nav-list .nav-item a {
  border-bottom: 1px solid #a9b7c8;
  box-shadow: 0 1px 0 rgba(255,255,255,1);
  border-right: none;
  color: #313131;
  padding: 1rem;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
  height: auto;
  line-height: 1.4;
  display: block;
  position: relative;
}
.global-nav .nav-list .nav-item a::before{
  content: "-";
  position: absolute;
  left: 4px;
  color: #3366bb;
}
.nav-item_sub_sp li a{
  border-bottom: 1px solid #fff!important;
}
.nav-item_sub_sp li a::before{
  content: " "!important;
}
.global-nav .nav-list .nav-item:last-child a {
  border-bottom: none;
}
.global-nav-icon {
  color: #999;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  left: 5px;
  top: 0;
  z-index: 2;
  }
}

@media screen and (max-width: 991px) {
.nav-item_sub {
  display: none;
}
.nav-item_sub_sp{
  display: none;
}
.nav-item_sub_sp li a{
  padding-top: 10px!important;
  padding-bottom: 10px!important;
  padding-left: 2.5em!important;
  background: #e9ecf3;
}
.no-link{
  pointer-events: none;
}

/* スマホ開閉ボタン */ 
.openbtn4{
  position: relative;
  background:#fff;
  cursor: pointer;
  width: 50px;
  height:50px;
  border-radius: 5px;
}
.openbtn4 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 2px;
  border-radius: 5px;
  background: #3366bb;
  width: 45%;
}
.openbtn4 span:nth-of-type(1) {
  top:13px; 
}
.openbtn4 span:nth-of-type(2) {
  top:19px;
}
.openbtn4 span:nth-of-type(3) {
  top:25px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";
  position: absolute;
  top:5px;
  left:-2px;
  color: #313131;
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
}
.openbtn4.active span:nth-of-type(1) {
  top: 14px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
  top: 26px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";
  transform: translateY(0) rotate(-45deg);
  top:5px;
  left:4px;
  }
}


/*====================================
 Header Modal Button
 =====================================*/
.modalArea {
  display: none;
  position: fixed;
  z-index: 99999999999999999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(234,240,244,0.98);
}
.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 1000px;
  padding: 2.5vw;
  background: #fff;
  border-radius: 10px;
}
.modalContents{
  text-align: center;
}
.closeModal {
  position: absolute;
  top: 0;
  right: 10px;
  cursor: pointer;
  font-size: 1.5em;
  font-weight: 600;
  color: #3366bb;
}
button {
  cursor: pointer;
  background: none;
  padding: 0 10px;
  color: #fff;
}
#openModal {
  position: relative;
  border: 0;
  font-family: 'Sawarabi Gothic', sans-serif;
  width: 100%;
}
.modal-group-item{
  background: #fafafa;
  padding: 0 0 10px;
  border-radius: 4px;
}
.modal-group-item h3{
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0;
}
.modal-group-item h3 span{
  background: #3366bb;
  border-radius: 4px 4px 0 0;
  display: block;
  color: #fff;
  margin-bottom: .2em;
}
.modal-group-item .modal-tel{
  font-size: 2em;
  font-weight: 600;
  color: #3366bb;
  line-height: 1.2;
}
.modal-group-item .modal-tel a{
  color: #3366bb;
  letter-spacing: 0;
}
.modal-group-item .modal-tel span{
  font-size: 16px;
}
.modal-ttl-sub{
  color: #3366bb;
  font-size: .85em;
  font-weight: 600;
  margin-bottom: -5px;
}

@media screen and (max-width: 991px) {
button{
  padding: 0 2px;
}
.header-btn .sp span{
  position: relative;
  font-size: 9px;
  display: block;
  line-height: 1.2;
}
.header-btn .sp span:before{
  content: "";
  display: block;
  width: 53px;
  height: 16px;
  background: url(../img/common/sp-head-taxi-icon.png) no-repeat center center;
  background-size: contain;
}
}

@media screen and (min-width: 768px) {
.modal-group{
  display: flex;
  flex-wrap: wrap;
  margin: 8px -15px 0px;
}
.modal-group-item{
  width: calc(50% - 30px);
  margin: 5px 15px 10px;
  }
}
@media screen and (max-width: 768px) {
.modalWrapper{
  width: 80%;
}
.modalContents h2{
  font-size: max(1.2vw, 1em);
  padding: 1px 0 6px;
}
.modal-group-item .modal-tel {
  font-size: max(2.6vw, 1.2em);
}
.modal-group-item h3{
  font-size: 12px;
}
.modal-ttl-sub{
  font-size: 12px;
}
.modal-group-item h3 span{
  display: inline-block;
  border-radius: 2px;
  margin: 0 5px 0 0;
  font-size: 10px;
  padding: 0 2px;
  border: 1px solid #35b;
  background: none;
  color: #36b;
}


}

/*==================================
 Animation
===================================*/
/* fadeUp */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.9s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.f-up{
  opacity: 0;
}

/* 下からフェードイン */
.fade-in{
  animation-name:fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/*====================================
 Main Slider
 =====================================*/
#slider-wrap{
  height: 700px;
  position: relative;
}
#slider-wrap .main-visual-ttl{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#slider-wrap .main-visual-ttl img{
  max-width: 100%;
  width: 700px;
}
.slider {
  position:relative!important;
  z-index: 1;
  height: 700px;
}
.slider-item01{
  background-image: url(../img/slider/slide01.jpg);
}
.slider-item02{
  background-image: url(../img/slider/slide02.jpg);
}
.slider-item03{
  background-image: url(../img/slider/slide03.jpg);
}
.slider-item04{
  background-image: url(../img/slider/slide04.jpg);
}
.slider-item05{
  background-image: url(../img/slider/slide05.jpg);
}
.slider-item {
  width: 100%;
  height:700px!important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.slick-prev, 
.slick-next {
  position: absolute;
  z-index: 3;
  top: 42%;
  cursor: pointer;
  outline: none;
  border-top: 3px solid rgba(255,255,255,0.1);
  border-right: 3px solid rgba(255,255,255,0.1);
  height: 16px;
  width: 16px;
}
.slick-prev{
  left:2.5%;
  transform: rotate(-135deg);
}
.slick-next{
  right:2.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
  position: relative;
  z-index: 3;
  text-align:center;
  margin:-50px 0 0 0;
}
.slick-dots li {
  display:inline-block;
  margin:0 10px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;
  height:8px;
  display:block;
  border: 0;
  border-radius:50%;
  background:#fff;
  padding: 0;
}
.slick-dots .slick-active button{
  background:#3366bb;
}

@media screen and (max-width: 768px) {
#slider-wrap{
  height: 550px;
}
.slider {
  position:relative!important;
  height: 550px;
}
.slider-item {
  height:550px!important;
  }
}