@charset "UTF-8";
/*================normalize.cssに追加するリセット=================*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html{
	font-size: 62.5%;
}
body{
  /* display: none; */
  width:100%;
  height: 100%;
  font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:1.6rem;
  line-height:1.8;
  color:#333;
}
input,textarea{
  font-size: 16px;
  font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.wrapper{
  overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6{
  margin:0;
  padding:0;
  font-weight:400;
  color:#333;
  line-height:1;
}
a{
  text-decoration:none;
  color:#333;
  outline: none;
}
img{
  vertical-align:bottom;
  /*==================フルードイメージ==================*/
  max-width: 100%;
}
ul,
ol{
  list-style-type:none;
}
.en{
  font-family: 'Josefin Sans', sans-serif;
}
h3{
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}
h3::after{
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background-color: #666;
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
}
h4{
  font-size: 1.8rem;
  margin-bottom: 60px;
  position: relative;
}
h4::after{
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background-color: #666;
  position: absolute;
  left: 0;
  bottom: -30px;
}
.inner{
  width: 1000px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.bold{
  font-weight: bold;
}
.mbr{
  display: none;
}
/* .br900{
  display: none;
}
@media screen and (max-width:900px){
  .br900{
    display: inline;
  }
} */
/*================normalize.cssに追加するリセットここまで=================*/

/*================header=================*/
.header__logo{
  width: 233px;
}
.header .nav{
  position: fixed;
  left: 0;
  top: 200px;
  z-index: 1000;
}
.header .nav a{
  display: block;
  width: 50px;
  height: auto;
  background-color: rgba(0,150,123,0.8);
  padding: 10px;
  border-radius: 0 5px 5px 0;
  text-align: center;
}
.header .nav span{
  writing-mode: vertical-rl;
  margin-top: 5px;
  color: #fff;
}
.header__name{
  font-size: 1.4rem;
  letter-spacing: 1em;
}
.scholarship{
  font-size: 1rem;
  line-height: 1;
  background-color: #EA5514;
  padding-top: 3px;
  color: #fff;
}
@media screen and (max-width:900px){
  .header__name{
    letter-spacing: 0.2em;
  }
  .header .nav{
    left: 10px;
    top: unset;
    bottom: 100px;
  }
  .header .nav a{
    padding: 3px;
    border-radius: 10px;
    height: 50px;
    box-shadow: 3px 3px 3px rga(0,0,0,0.2);
  }
  .header .nav img{
    padding-top: 3px;
  }
  .header .nav span{
    display: none;
  }
}
.header{
  border-bottom: 3px solid #EA5514;
}
.header>.inner{
  height: 100px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.header__left{
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.header__right{
  font-weight: 100;
}
.header__tel-no{
  font-size: 3.6rem;
  line-height: 1;
  text-indent: 2rem;
  background-image: url(../images/header_tel_icon.svg);
  background-repeat: no-repeat;
  background-position: left center;
}
.header__address{
  font-size: 1.2rem;;
}

/*================key-visual=================*/
.key-visual{
  border-bottom: 3px solid #999;
  background-image: url(../images/key_visual.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 360px;
  /* padding-top: 26.35%; */
  position: relative;
}
.key-visual .inner{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1000px;
  height: 100%;
  padding-top: 35px;
}
.key-visual__title{
  letter-spacing: 0.6em;
  margin-bottom: 40px;
}
.key-visual__text{
  width: 60%;
}
@media screen and (max-width:900px){
  .key-visual__title{
    letter-spacing: 0;
    margin-bottom: 20px;
}

  .key-visual__text{
    width: 100%;
  }
}

.key-visual__tour{
  position: absolute;
  right: 20px;
  bottom: -3px;
  font-size: 3.0rem;
  font-weight: 400;
  color: #EA5514;
  width: 430px;
  height: 100px;
  background-image: url(../images/key-visual__tour.svg);
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
/* facility */
.facility{
  padding-top: 50px;
  padding-bottom: 200px;

}
.facility__photos-bg{
  background-color: #E8E1DE;
  padding: 50px 0;
}
.facility__photos{
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}
.facility__photos li{
  width: 20%;
}
.facility__main-photos{
  background : -ms-linear-gradient(-90deg, rgba(232, 225, 222, 1) 10%, rgba(255, 255, 255, 1) 10%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E1DE', endColorstr='#FFFFFF' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(232, 225, 222, 1) 10%, rgba(255, 255, 255, 1) 10%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E1DE',endColorstr='#FFFFFF' , GradientType=0);
}
.facility__disc{
  display: flex;
  flex-direction: row-reverse;
}
.facility__disc>ul{
  width: 50%;
  transform: translate(20px,20px);
}
.facility__disc>ul li:first-child{
  text-align: right;
}
.facility__disc>ul li:last-child{
  padding-top: 50px;
}
.facility__disc>ul li:first-child img{
  width: 80%;
}
.facility__disc li ul{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.facility__disc li img{
  display: block;
  opacity: 0;
  transform: translateY(100px);
  transition: 1s ease-in-out;
}
.facility__disc li.in.app img{
  opacity: 1;
  transform: translateY(0);
}

.facility__text{
  width: 50%;
  background-color: rgba(0,0,0,0.1);
}
.facility__text .in{
  padding: 150px 50px;
  opacity: 0;
  transform: translateY(100px);
  transition: 1s ease-in-out;
}
.facility__text .in.app{
  opacity: 1;
  transform: translateY(0);
}
.minus{
  transform: translateY(-50%) scale(1.3,1.3);
}

/* rereation */
.recreation{
  border-top: 1px solid #EA5514;
  padding-top: 50px;
  background-color: rgba(0,0,0,0.05);
  transform: translateY(100px);
  opacity: 0;
  transition: 1s ease-in-out;
}
.recreation.app{
  transform: translateY(0);
  opacity: 1;
}
.recreation ul{
  display: flex;
}
.recreation li{
  width: calc( 100% / 3 );
  padding: 13vw 0 100px;
  position: relative;
  /* left: 100px;
  top: 400px;
  opacity: 0;
  transform: scale(0.8,0.8);
  transition:top,opacity 0.9s ease-in-out, left 0.5s 0.2s; */
}
.recreation li.app{
  left: 0;
  top: 0;
  opacity: 1;
  transform: scale(1,1);
}
.recreation li:nth-child(1){
  background-color: #EDBEAA;
  transition-duration: 0.5s;

}
.recreation li:nth-child(2){
  background-color: #EBD4CA;
  transition-duration: 0.9s;
}
.recreation li:nth-child(3){
  background-color: #E8E1DE;
  transition-duration: 1.3s;
}
.recreation_photo{
  margin-top: 70px;
}
.recreation .num{
  font-weight: bold;
  font-size: 13vw;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  position: absolute;
  right: 10px;
  top: 10px;
}
.recreation p,
.recreation h4,
.recreation_photo{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.recreation h4{
  font-weight: bold;
}
.recreation_proviso{
  font-size: 1rem;
}

/* price */
.price{
  padding-top: 50px;
}
.price h3{
  margin: 80px 0;
}
.price .inner{
  margin: 50px auto 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 0 70px 0;
}
.price table{
  /* border-collapse: collapse; */
  border-spacing: 10px;
  width: 48%;
  padding: 10px;
  background : -ms-linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(232, 187, 167, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#E8BBA7' ,GradientType=0)";
  background : linear-gradient(90deg, rgba(238, 238, 238, 1) 0%, rgba(232, 187, 167, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE',endColorstr='#E8BBA7' , GradientType=1);
  opacity: 0;
  transform: translateY(100px);
  transition: 1s ease-in-out;
}
.price table.in.app{
  opacity: 1;
  transform: translateY(0);
}
.price th,.price td{
  /* border: 3px solid #fff transparent; */
  /* background-color: #EBD4CA; */
  padding: 20px;
  text-align: center;
  border-radius: 9px;
  background-color: #fff;
}
.price td{
  width: 50%;
}
.price .bubble{
  position: absolute;
  right: -3em;
  top: -3.5em;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  background-color: #EA5514;
  padding: 0.5em 2em;
  border-radius: 50%;
  transform: rotate(-10deg);
}
.price .cution{
  font-size: 1.2rem;
}

/* access */
.access h3{
  margin: 80px 0;
}
.access_list{
  text-align: center;
  margin-bottom: 50px;
}
.access_list div{
  margin-bottom: 30px;
}
.access_list dt{
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
}
.access_list dt::before,.access_list dt::after{
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background-color: #EA5514;
  position: absolute;
  top: 50%;
}
.access_list dt::before{
  left: -35px;
}
.access_list dt::after{
  right: -35px;
}
.access__tel_no{
  font-size: 4.0rem;
  font-weight: bold;
  color: #EA5514;
  line-height: 1.5;
  letter-spacing: 0.2em;
}
.access__tel_no a{
  color: #EA5514;
  text-decoration: none;
}
/* bnr */
.okada{
  padding: 80px 0;
}
.okada a{
  border: 1px solid #00957B;
  display: block;
  height: 100px;
  padding: 5px;
  opacity: 0;
  transform: translateY(100px);
  transition: 1s ease-in-out;
}
.okada a.in.app{
  opacity: 1;
  transform: translateY(0);
}
.okada a .a_inner{
  border: 1px solid #ccc;
  height: 88px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
  background-color: #fff;
  transition: 0.3s ease-in-out;
}
.okada a .a_inner span{
  display: block;
  width: calc(100% / 3);
  text-align: center;
}
@media screen and ( min-width: 769px ){
  .okada a:hover{
    color: #fff;
  }
  .okada a:hover .a_inner{
    background-color: #00957B;
    box-shadow: inset 0 0 20px 20px rgba(0,0,0,0.05);
  }
}
.okada img{
  max-height: 70px;
}
.okada a .en{
  padding-top: 0.5em;
  letter-spacing: 0.5em;
}
/* page_top */
.page_top{
  height: 50px;
}
.page_top a{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: #EA5514;
  border-top: 1px solid #ccc;
}
.page_top__btn{
  position: relative;
  display: inline-block;
}
.page_top__btn::before{
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: transparent;
  transform: rotate(45deg) translateX(-67%);
  left: 50%;
  top: 2px;
  border: solid #EA5514;
  border-width: 3px 0 0 3px;
}
@media screen and ( min-width:769px ){
  .page_top a:hover{
    color: #fff;
    background : -ms-linear-gradient(90deg, rgba(238, 238, 238, 1) 0%, rgba(237, 144, 90, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#ED905A' ,GradientType=0)";
    background : linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(237, 144, 90, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED905A',endColorstr='#EEEEEE' , GradientType=0);
  }
  .page_top a:hover .page_top__btn::before{
    border-color: #fff;
  }
}
.page_top a,.page_top__btn::before{
  transition: 0.5s ease-in-out;
}

/* foooter */
.footer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border-top: 3px solid #EA5514;
}
@media screen and ( max-width: 768px ){
  .price .inner{
    flex-direction: column;
  }
  .price table{
    width: 100%;
    margin-bottom: 20px;
  }
  .price .bubble{
    right: 0;
    font-size: calc( 14 / 375 * 100vw );
  }
}

@media screen and ( max-width:520px ){
  .mbr{
  display: inline;
}
  .header>.inner{
    flex-direction: column;
    padding-bottom: 0;
    height: auto;
  }
  .header__logo{
    width: 120px;
  }
  .header__left{
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding: 5px 0;
  }
  .header__name{
    font-size: calc( 14 / 375 * 100vw );
  }
  .scholarship{
    font-size: calc( 10 / 375 * 100vw );
    text-align: center;
  }
  .header__right{
    padding: 5px 0;
    border-top: #EA5514 1px solid;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    font-size: calc( 12 / 375 * 100vw );
    display: flex;
  }
  .header__tel-no{
    font-size: calc( 24 / 375 * 100vw );
    background-size: 1.6rem 1.6rem;
    background-position: left 5px;
    line-height: 1;
  }
  .header__address{
    display: none;
  }
  .recreation ul{
    flex-direction: column;
  }
  .recreation li{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  /* key-visual */
  .key-visual{
    height: 80vh;
  }
  .key-visual h2{
    line-height: 1.8;
  }
  .key-visual__text{
    font-weight: 100;
    font-size: calc( 16 / 375 * 100vw );
    letter-spacing: -0.05em;
  }
  .key-visual__tour{
    font-size: 8vw;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: auto;
    background-size: contain;
    padding-top: 10vw;
  }
  .facility{
    padding-bottom: 100px;
  }
  .facility__photos{
    flex-direction: column;
  }
  .facility__photos li{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .facility__disc{
    flex-direction: column-reverse;
  }
  .facility__text,.facility__disc ul{
    width: 100%;
  }
  .facility__text .in{
    padding: 40px 10px;
  }
  .recreation h3{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
  }
  .access__tel_no{
    letter-spacing: 0em;
  }
  .okada a{
    height: auto;
  }
  .okada a .a_inner{
    height: auto;
    flex-direction: column;
  }
  .okada a .a_inner span{
    width: 100%;
  }
  .okada a .a_inner .en{
    font-size: calc( 16 / 375 * 100vw );
  }
}