@@charset "UTF-8";

html{
  font-size: 100%;
}

body{
  background-color: #dddddd;
}

#example{
  position: relative;
}


.align-center{
  text-align: center;
}
.display-flex{
  display: flex;
}
.text-align-center{
  text-align: center;
}
.row-reverse{
  display: flex;
  flex-direction: row-reverse;
}
.display-none{
  display: none;
}

ul{
  list-style: none;
  display: flex;
  font-family: UD デジタル 教科書体 N;
  font-size: 20px;
  text-align: center;
}
ul a{
  text-decoration: none;
  color: #005070;
}

.homea{
  max-width: 100%;
  display: block;
  vertical-align: bottom;
}
.vision{
  margin: 60px 80px 0px 0px;
}
.service{
  margin: 60px 80px 0px 0px;
}
.news{
  margin: 60px 0px 0px 80px;
}
.faq{
  margin: 60px 0px 0px 80px;
}
.instagram2{
  margin: 10px 0px 10px 0px;
}
.bottom{
  left: 0;
  top: 0;
  z-index: 10;
}
.follow{
  margin-left: 5px;
  width: 70%;
}




/* ナビゲーションメニュー */

/* 右側 */
.nav-right {
  position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80px; /* 幅を指定 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 5px; /* 隙間を調整 */
}


/* 左側 */
.nav-left {
  position: fixed;
    left: 0;
    right: 0;
    height: 100vh;
    width: 80px;/* 幅を指定 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.nav-left {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 80px;    /* 幅を調整 */
    /* background-color: white; */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* 他要素より前面にしたい場合 */
}

.left-banner {
  height: 50%;;
}


/* 上 */
.nav-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(247,245,245,0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  /* padding: 10px 50px; */
  padding-bottom:0px;
}

.topflex {
  display: flex;
  width: 100%;
  max-width: 1200px;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0 20px;
}

.nav-top-l,
.nav-top-c,
.nav-top-r {
  display: flex;
  align-items: center;
  gap: 20px;
}
.text-btn a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.nav-top-rf{
  display: none;
}



.text1{
  margin-top: 115px;
}
.text2{
  margin-top: 20px;
}
.text3{
  margin: 20px 0px 20px 0px;
}

h2{
  max-width: auto;
  margin-right: 50px;
  border-right: 50px;
}
p{
  font-size: 1rem;
  font-weight: 700;
  line-height: 200%;
  font-family: UD デジタル 教科書体 N;
}
img{
  max-width: 100%;
}
.container{
  display: flex;
  justify-content: flex-end;
  /* margin: 120px 230px 100px 70px; */
  margin: auto;
  max-width:970px;
}

.logoare{
  width:60%;
  padding:20px;
}

.texts{
  width: 40%;
    padding:20px;
  flex-wrap: wrap;
  color: #28373c;
}





.banner{
  margin-bottom: 40px;
  margin-top: 90px;
  width:100vw;
}

.banner2{
  margin-bottom: 40px;
  margin-top: 120px;
  width:100vw;
}

* {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: hidden;
}

.wrapper2 {
  width: 100%;
  margin: 70px 0px 50px 0px;

  overflow-x: hidden;
}


.up{
  text-decoration: none;
  display: inline-block;
  /* display: inline-block;
  padding: .75rem 1.5rem; */
  /* padding-bottom: 50px; */
  transition: .4s;
}

.up:hover{
  /* rotate: -5deg; */
  scale: 1.01;
}



@media (width <= 768px) {
  .wrapper {
    padding: 0 0px;
  }
}

h1 {
  /* margin-bottom: 1em; */
  font-size: 1em;
  /* margin-bottom: 50px; */
}
h2 {
  text-align: center;
  font-weight: normal;
}

button {
  border: 0;
  padding: 0;
  background-color: transparent;
  appearance: none;
  border: none;
  }

.article{
  width: 500px;
}

.article-text{
  /* max-width:970px; */
  /* font-size: 15px;; */
}

.swiper-slide{
  /* display: flex; */
}


.swiper-container {
  position: relative;
  overflow: hidden;
}
.swiper-container.visible {
  overflow: visible;
}
.sample-swiper-cards {
  /* padding: 0 50px; */
}

.carousel-wrapper {
  position: relative;
  /* padding: 1000px; */
}
.carousel {
  height: 500px;  /* スライドの縦幅設定 itemの数値のと揃える */
  margin-bottom: 3em;
}
.item {
  display: flex;
  align-items: center;
  height: 500px;  /* 中身の高さ  carouselの数値のと揃える*/
  color: #dddddd;
  font-size: 1rem;
  font-weight: bold;
}


.carousel2 {
  height: 800px;
  /* margin:30px auto; */
  padding: 30px auto;

}
.item2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 800px;
  text-align: center;
  color: #dddddd;
  font-size: 32px;
  font-weight: bold;
}

.item__blue2 {
  /* background: rgb(68 174 255); */
  /* background: #dddddd; */
  border-radius: 24px;
}
.item__red2 {
  /* background: rgb(248 82 1); */
  /* background: #dddddd; */
  border-radius: 24px;
}
.item__yellow2 {
  /* background: rgb(255 213 27); */
  /* color: #585858; */
  /* background: #dddddd; */
  border-radius: 24px;
}
.item__purple2 {
  /* background: rgb(227, 72, 255); */
  /* background: #dddddd; */
  border-radius: 24px;
}


.pare{
  width:40%;
  padding:20px;
}

.textsss{
  width: 60%;
  padding:50px;
  /* flex-wrap: wrap; */
  color: #28373c;
  font-family: UD デジタル 教科書体 N;
}





.item__blue {
  /* background: rgb(68 174 255); */
  background: #ffffff;
  border-radius: 24px;
}
.item__red {
  /* background: rgb(248 82 1); */
  background: #ffffff;
  border-radius: 24px;
}
.item__yellow {
  /* background: rgb(255 213 27); */
  /* color: #585858; */
  background: #ffffff;
  border-radius: 24px;
}
.item__purple {
  /* background: rgb(227, 72, 255); */
  background: #ffffff;
  border-radius: 24px;
}


/* footer */
.footer-btn{
  display: flex;
  margin: auto;
  width:60%;
  padding:50px;
  /* flex-wrap: wrap; */
  justify-content: center;
}

.footerbg{
  /* background-color:rgb(6, 60, 91); */
  background-color: #005070;
  padding:10px 100px;
}

.sns-wrapeer{
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.sns-wrapeer-innner{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap:30px;
}

.footer-text{
  font-size:12pt;
  margin-top: 20px;
  color: #dddddd;
}
.footer-text p{
  font-size: 12px;
}

.container2{
  /* position: relative; */
  width: 100%;
  /* background-color: #005070;
  color: #005070;
  display: inline-block; */
 }

.checkin{
  color: #e5cf6e;
}

.text-btn{
  display: inline-block;
  text-decoration: none;
  font-family: UD デジタル 教科書体 N;
  transition: .4s;
}

.text-btn:hover{
  /* rotate: -5deg; */
  scale: 1.1;
  /* color: #dddddd; */
}

.btn{
  display: inline-block;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: UD デジタル 教科書体 N;
  background-color: #e5cf6e;
  color: #27363b;
  border-radius: 32px;
  padding: .75rem 1.5rem;
  font-weight: bold;
  transition: .4s;
  border: solid 3px black;
}

.btn:hover{
  /* rotate: -5deg; */
  scale: 1.1;
  background-color: black;
  color: #dddddd;
}

.btn2{
  text-decoration: none;
  display: inline-block;
  /* display: inline-block;
  padding: .75rem 1.5rem; */
  /* padding-bottom: 50px; */
  transition: .4s;
}

.btn2:hover{
  /* rotate: -5deg; */
  scale: 0.95;
}



.btn3{
  display: inline-block;
  text-decoration: none;
  transition: .4s;
}

.btn3:hover{
  rotate: -5deg;
  scale: 1.2;
}

.btn4{
  transition: .4s;
}
.btn4:hover{
  rotate: -5deg;
  scale: 1.2;
}


.btn5{
  display: inline-block;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: UD デジタル 教科書体 N;
  background-color: #e5cf6e;
  color: #27363b;
  border-radius: 32px;
  padding: .75rem 1.5rem;
  font-weight: bold;
  transition: .4s;
  border: solid 3px black;
}

.btn5:hover{
  /* rotate: -5deg; */
  scale: 1.1;
  background-color: black;
  color: #dddddd;
}


.swiper-button-prev,
.swiper-button-next {
  height: 100px;
  width: 100px;
  text-decoration: none;
  display: inline-block;
  transition: .4s;
}

.swiper-button-next:hover{
  scale: 1.2;
}
.swiper-button-prev:hover{
  scale: 1.5;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "" !important;
  height: 100px;
  margin: auto;
  width: 100px;
}
/* 前矢印 */
.swiper-button-prev::after {
  background-image: url(img/asset26.png.png);
  display: inline-block;
  transition: .4s;
}

/* 次矢印 */
.swiper-button-next::after {
  background-image: url(img/asset25.png.png);
}




/* VISION */
.visionimg{
  margin-top: 100px;
}
.vision-container{
  display: block;
  margin: auto;
  max-width:80%;
}
.vision-logoare{
  width:100%;
}
.vision-text{
  width: 100%;
  font-family: UD デジタル 教科書体 N;
  font-size: 1rem;
  font-weight: 700;
  line-height: 200%;
  margin-top: 20px;
}
.navigation-color{
  background-color: #dddddd;
  margin: 0;
  width: 100%;
  /* overflow-x: hidden; */
  padding: 0;
}
.margin-top50{
  margin-top: 50px;
}
.margin-top100{
  margin-top: 100px;
}


/* service */
.access{
  margin-top: 100px;
}
.access-container{
  display: block;
  margin: auto;
  max-width:80%;
}
.access-logoare{
  width:100%;
}
.access-text{
  width: 100%;
  font-family: UD デジタル 教科書体 N;
  font-size: 1rem;
  font-weight: 700;
  line-height: 200%;
  margin-top: 20px;
}


/* FAQ */
.faqimg{
  margin-top: 100px;
  margin-bottom: 20px;
}
.email{
  max-width: 926px;
  background-color: #e5cf6e;
  border-radius: 48px;
  padding: 1.5rem 2.5rem 2.5rem;
  margin: 0 auto 2rem;
}
.email p{
  margin: 1rem 0 2rem;
}
.location{
  display: flex;
  gap: 2rem;
}
.location-info{
  width: 40%;
  margin-left: 60px;
}
.location-info.info th{
  padding-left: 2rem;
}
.location-map{
  width: 60%;
  margin-right: 60px;
}


.info{
  width: 100%;
  max-width: 544px;
  margin: auto;
  padding: 0 1.5rem;
  border-spacing: 0;
}
.info th,
.info td{
  border-bottom: 1px solid; #c9c2bc;
  font-family: UD デジタル 教科書体 N;
}
.info th{
  text-align: left;
  font-weight: bold;
  padding: 1rem;
}
.info td{
  padding: 1rem 0;
  /* font-weight: bold; */
}
.location{
  margin-bottom: 3.5rem;
  justify-content: center;
}
.location-info{
  margin-bottom: 2rem;
}
.location-info.info{
  padding: 0;
}
iframe{
  width: 100%;
}



/* RES */
.res{
  align-items: center;
  justify-content: center;
  display: flex;
}
.res form{
  display: flex;
  flex-direction: column;
  max-width: 80%;
  font-family: UD デジタル 教科書体 N;
  font-weight: bold;
  /* margin-left: 60px; */
}
.res-mail{
  margin-bottom: 100px auto;
}
.res-sel{
  /* margin-bottom: 20px auto; */
  /* margin: 20px auto; */
}
.res-message{
  margin-top: 20px;
}
.res-name{

}

.btn6{
  display: inline-block;
  text-decoration: none;
  font-size: 1rem;
  font-family: UD デジタル 教科書体 N;
  background-color: #e5cf6e;
  color: #27363b;
  border-radius: 32px;
  padding: .75rem 1.5rem;
  font-weight: bold;
  transition: .4s;
  border: solid 3px black;
  margin: 20px 0px 50px 0px;
}

.btn6:hover{
  /* rotate: -5deg; */
  scale: 1.1;
  background-color: black;
  color: #dddddd;
}



 /* スマホの幅 */
 @media (max-width: 768px) {

.sp_none{
  display: none; /*スマホになったら、消す*/
}
.nav-top-c{
  /* width: 100vw; /*左右のメニューが消えたので、*/ */
  /* justify-content: center; /*強制的にロゴを中心にもってくる*/ */
}
.nav-top-rf{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.columnrf{
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 10px;
  position: fixed;
  /* top: 0; */
  right: 0;
}
.follow-rf{
  width: 70%;
}

.nav-left{
  display: none;
}
.nav-right{
  display: none;
}

.carousel2{
  height: 400px;
}
.item2{
  height: 400px;
}

 .container{
   display: block; /*PCのときはflexで横並びだったけど、スマホだと見にくいので、blockに変更*/
   margin: auto; /*左右中央揃えにして*/
   max-width:80%; /*左右のナビゲーションにかからないように横幅を設定*/
 }
 .logoare{
   width:100%; /*.containerがflexじゃなくなったので、横幅を100%に伸ばす*/
 }
 .texts{
   width: 100%; /*.containerがflexじゃなくなったので、横幅を100%に伸ばす*/
 }
 .text1{
   margin-top: 50px; /*縦並びだと、上がアキすぎるので、詰める*/
 }

 .btn{
   width: 100%; /*ボタンの横幅を伸ばして、*/
   text-align: center; /*文字を中央に揃える*/
 }

 .wrapper2 {
   margin: 0px 0px 0px 0px;
 }

 .pare{
   width:40%;
   padding:0px;
 }

 .textsss{
   width: 60%;
   padding:10px;
 }

 .above-text{
   font-size: 20px;
   font-weight: 1000;
 }
 .under-text{
   display: none;
 }

 .wrapper {
   max-width: 1300px;  /* スライド全体の横幅設定 */
 }
 .carousel {
   height: 400px;
 }
 .item {
   height: 400px;
 }


 .swiper-button-prev::after,
 .swiper-button-next::after {
   display: none;
 }


 .banner2{
   margin-bottom: 20px;
   margin-top: 40px;
 }


 .footer-btn{
   width:70%;
   padding:20px 0px;
 }

/* スマホ用のfooter */
.footerbg{
 padding:10px 10px;
}
.sns-wrapeer{
 display: block;
 width:100%;
}
.sns-wrapeer-innner{
 width: 40%;
 margin: 10px auto;
}
.footer-text p{
 font-size: 10px;
}


/* FAQ */
.email p{
 margin: 0;
}
.location{
 display: block;
}
.location-info{
 width: 100%;
 margin-left: 0px;
}
.location-info.info th{
 padding: 0;
 text-align: left;
 font-weight: bold;
 padding: 1rem;
}
.location-map{
 width: 100%;
 margin-right: 0px;
}
}


/* タブレットの幅の時に上書きで適用されるやつ */
@media (max-width: 1024px) {

.container{
 margin: auto;
 max-width:80%;
}
.con{
 margin: auto; /*左右中央揃えにして*/
 max-width:90%; /*左右のナビゲーションにかからないように横幅を設定*/
}

.swiper-button-prev::after,
.swiper-button-next::after {
 display: none;
}

.logoare{
 width:100%;
}

.texts{
 width: 100%;
}

ul{
 font-size: 15px;　/*メニューの文字を小さくする*/
}
}