@charset "UTF-8";



/*

 * HOME

*=============================================*/

body.home section {

   font-size: 16px;

   line-height: 36px;

   letter-spacing: 0.05em;

}



@media screen and (max-width: 767px) {

   body.home section {

      font-size: 14px;

      line-height: 28px;

   }

}



#mv {

   display: flex;

   align-items: center;

   justify-content: center;

   width: 100%;

   height: calc(100vh - 125px);

   position: relative;

   padding: 80px 20px;

   box-sizing: border-box;

}



#mv:after {

   content: '';

   width: 347px;

   height: 252px;

   background: url("../img/common/arrow-double-blue.png") no-repeat center top/cover;

   position: absolute;

   bottom: 0;

   left: 0;

}



#mv .catch {

   text-align: center;

   position: relative;

   z-index: 1;

}



#mv .catch h2 {

   font-weight: 700;

   font-size: 40px;

   line-height: 60px;

   letter-spacing: 0.3em;

   padding-bottom: 20px;

}



#mv .catch h2 span {

   display: inline-block;

   background-color: #0098cd;

   color: #fff;

   margin-bottom: 25px;

   padding: 0 5px 0 10px;

}



#mv .catch .logo {

   width: 380px;

   margin: 0 auto;

   padding-bottom: 20px;

}



#mv .catch .sub {

   display: inline-block;

   border: 1px solid #fff;

   font-weight: 700;

   font-size: 19px;

   letter-spacing: 0.05em;

   line-height: 25px;

   padding: 4px 10px;

}

#mv .catch .last {
	font-size:18px;
	margin-top:10px;
}



.mv__slider {

   width: 100%;

   height: 100%;

   position: absolute;

   top: 0;

   left: 0;

}



.mv__slider .slick-list,

.mv__slider .slick-track,

.mv__slider .slick-slide,

.mv__slider .slick-slide>div {

   width: 100%;

   height: 100%;

}



.mv__slider .slick-slide>div {

   opacity: 0.82;

}



.mv__slider .slide1>div {

   background: url("../img/index/mv-bg-img01.jpg") no-repeat center top/cover;

}



.mv__slider .slide2>div {

   background: url("../img/index/mv-bg-img02.jpg") no-repeat center top/cover;

}



.mv__slider .slide3>div {

   background: url("../img/index/mv-bg-img03.jpg") no-repeat center top/cover;

}



@media screen and (max-width: 767px) {

   #mv {

      padding: 0 0 155px;

   }



   #mv:after {

      display: none;

   }



   #mv .catch h2 {

      font-size: 20px;

      line-height: 48px;

   }



   #mv .catch h2 span {

      margin-bottom: 10px;

   }



   #mv .catch .logo {

      width: 220px;

   }



   #mv .catch .sub {

      font-size: 16px;

      padding: 4px 20px;

   }
	
	#mv .catch {

	   margin-top:100px;

	}
	
	#mv .catch .last {
		font-size:15px;
		margin-top:10px;
	}


}



/* -- --*/

#benefits {

   padding: 100px 0 40px;

   position: relative;

}

#benefits .block {
   max-width: 1125px;
   background-color: #000;
   margin: 0 auto;
   padding: 0 40px 40px;
   box-sizing: border-box;
}

#benefits h2 {
   background-color: #0098cd;
   color: #fff;
   font-weight: 900;
   font-size: 28px;
   margin: 0 -40px;
   padding: 18px 10px;
}

#benefits h3 {
   color: #fff;
   font-weight: 900;
   font-size: 22px;
   line-height: 28px;
   letter-spacing: 0.1em;
   padding-top: 35px;
}


#benefits .box {

   display: grid;

   grid-template-columns: repeat(3, 1fr);

   justify-content: center;

   gap: 30px;

   padding-top: 25px;

}



#benefits .box dl {

   display: flex;

   flex-direction: column;

   justify-content: center;

   height: 222px;

   background-color: #2b2b2b;

   position: relative;

}



#benefits .box dl+dl:after {

   content: '';

   width: 46px;

   height: 46px;

   background: url("../img/index/icon-plus.png") no-repeat center top/cover;

   position: absolute;

   top: 50%;

   left: -38px;

   transform: translateY(-50%);

}



#benefits .box dl dt {

   background: url("../img/index/deco-1.png") no-repeat center top;

   font-weight: 700;

   font-size: 17px;

   line-height: 28px;

   letter-spacing: 0.1em;

   padding-top: 36px;

}



#benefits .box dl dd {

   padding-top: 20px;

}



#benefits .button {

   padding-top: 36px;

}



@media screen and (max-width: 1023px) {

   #benefits .box {

      grid-template-columns: 330px;
      justify-content: center;

   }



   #benefits .box dl+dl:after {

      top: -38px;

      left: 50%;

      transform: translateX(-50%);

   }

}



@media screen and (max-width: 767px) {

   #benefits {

      padding: 50px 0 20px;

   }

   #benefits .block {
      padding: 0 20px 36px;
   }

   #benefits h2 {

      display: grid;
      grid-template-columns: 30px 1fr 30px;

      justify-content: center;

      align-items: center;
      font-size: 20px;
      margin: 0 -20px;
	   line-height:130%;
      padding: 10px 10px;
   }
	
   #benefits h2 span {

   }

   #benefits h3 {
      padding-top: 20px;
	   font-size:18px;
   }

   #benefits .box {

      grid-template-columns: 1fr;

      padding-top: 20px;

   }
   #benefits .box dl+dl:after {

      top: -38px;

      left: 50%;

      transform: translateX(-50%);

   }
	#benefits .box dl {
		height: 172px;
	}
	#benefits .box dl dd {
		padding-top: 10px;
	}
	#benefits .button {
	   padding-top: 20px;

	}
}



/* -- --*/

#news {

   background: url("../img/index/arrow-right.png") repeat-x center bottom/auto 24px;

   padding: 60px 0 64px;

   font-size: 13px;

   line-height: 21px;

}



#news .box {

   display: flex;

   flex-wrap: wrap;

   justify-content: center;

   gap: 30px 78px;

   padding-top: 48px;

}



#news .box .item {

   width: 248px;

}



#news .box figure a {

   display: block;

   padding-top: 66.1%;

   position: relative;

}



#news .box figure span {

   display: block;

   width: 100%;

   height: 100%;

   position: absolute;

   top: 0;

   left: 0;

   background-color: #fff;

}



#news .box time {

   display: block;

   font-size: 12px;

   padding-top: 15px;

}



#news .box h3 {

   display: flex;

   font-weight: 700;

   font-size: 16px;

   line-height: 24px;

   padding-top: 5px;

}



#news .box h3 a {

   overflow: hidden;

   display: block;

   max-height: 48px;

   -webkit-line-clamp: 2;

   display: box;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   text-overflow: ellipsis;

   white-space: normal;

}



#news .box .txt {

   padding-top: 5px;

}



#news .box .txt span {

   overflow: hidden;

   display: block;

   max-height: 42px;

   -webkit-line-clamp: 2;

   display: box;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   text-overflow: ellipsis;

   white-space: normal;

}



#news .button {

   padding-top: 50px;

}



@media screen and (max-width: 1023px) {

   #news .box {

      gap: 30px;

   }



   #news .box .item {

      width: calc(33.33% - 20px);

   }

}



@media screen and (max-width: 767px) {

   #news {

      background-size: auto 15px;

      padding: 20px 0 65px;

   }



   #news .box {

      padding-top: 20px;

   }



   #news .box .item {

      width: 100%;

   }



   #news .button {

      padding-top: 30px;

   }

}



/* -- --*/

#points {

   padding: 35px 0 150px;

}



#points .photo-fw {

   padding-bottom: 140px;

}



#points .wrap {

   padding-top: 25px;

}



#points .box {

   display: flex;

   gap: 36px;

   padding-top: 75px;

}



#points .box .col {

   width: 745px;

   position: relative;

   padding-left: 135px;

   box-sizing: border-box;

}



#points .box .no {

   position: absolute;

   top: 0;

   left: 0;

}



#points .box .txt {

   font-weight: 500;

   font-size: 18px;

   letter-spacing: 0.025em;

   padding-top: 30px;

}



#points .box figure {

   width: 459px;

}



#points .box.img_l {

   flex-direction: row-reverse;

}



@media screen and (max-width: 1023px) {

   #points .box {

      flex-direction: column;

   }



   #points .box.img_l {

      flex-direction: column;

   }



   #points .box figure,

   #points .box .col {

      width: 100%;

   }



   #points .box figure {

      text-align: center;

   }



   #points .box .col {

      padding-left: 0;

   }



   #points .box .no {

      position: static;

      text-align: center;

   }



   #points .box h3 {

      text-align: center;

      padding-top: 20px;

   }

}



@media screen and (max-width: 767px) {

   #points {

      padding: 50px 0;

   }



   #points .photo-fw {

      padding-bottom: 50px;

   }



   #points .wrap {

      padding-top: 0;

   }



   #points .box {

      padding-top: 50px;

   }



   #points .box .no {

      width: 80px;

      margin: 0 auto;

   }



   #points .box .txt {

      font-size: 15px;

      padding-top: 20px;

   }

}



/* -- --*/

#pricing__plans {

   background: url(../img/index/arrow-right.png) repeat-x center top/auto 24px;

   padding: 100px 0 170px;

}



#pricing__plans .block-1 {

   max-width: 880px;

   margin: 0 auto;

   padding-top: 100px;

}



#pricing__plans .block-1 .box+.box {

   padding-top: 60px;

}



#pricing__plans .block-1 h3 {

   display: flex;

   justify-content: center;

   align-items: center;

   height: 52px;

   background-color: #000;

   color: #fff;

   padding: 10px;

}



#pricing__plans .block-1 .price {

   display: flex;

   justify-content: center;

   align-items: center;

   height: 84px;

   background-color: #5c5c5c;

   color: #fff;

   font-weight: 500;

   margin-top: 12px;

   padding: 10px;

}



#pricing__plans .block-1 .price small {

   font-size: 18px;

}



#pricing__plans .block-1 .table {

   font-weight: 500;

   line-height: 32px;

   letter-spacing: 0.1em;

   padding-top: 10px;

   overflow-x: auto;

}



#pricing__plans .block-1 .table table {

   width: 100%;

   table-layout: fixed;

}



#pricing__plans .block-1 .table th,

#pricing__plans .block-1 .table td {

   vertical-align: middle;

   height: 82px;

   border-bottom: 8px solid #212121;

}



#pricing__plans .block-1 .table th {

   background-color: #383838;

   font-weight: 700;

}



#pricing__plans .block-1 .table th+th {

   border-left: 8px solid #212121;

}



#pricing__plans .block-1 .table td {

   background-color: #5c5c5c;

   border-left: 8px solid #212121;

}



#pricing__plans .block-1 .table td small {

   font-size: 14px;

}



#pricing__plans .block-1 .note {

   font-size: 15px;

   line-height: 28px;

   letter-spacing: 0.025em;

   text-align: left;

   padding-top: 10px;

}



#pricing__plans .block-2 {

   max-width: 880px;

   margin: 0 auto;

   padding-top: 80px;

}



#pricing__plans .block-2 h3 {

   display: flex;

   justify-content: center;

   align-items: center;

   height: 43px;

   background-color: #0098cd;

   padding: 10px;

}



#pricing__plans .block-2 .inner {

   background-color: #d6e2e3;

   padding: 40px 60px 60px;

}



#pricing__plans .block-2 .txt {

   color: #000;

   font-weight: 700;


   line-height: 28px;

   letter-spacing: 0.1em;

   padding-bottom: 20px;
	font-size:19px;

}



#pricing__plans .block-2 .box {

   background-color: #2b2b2b;

   margin-top: 24px;

   padding: 25px 20px 40px;

   position: relative;

}



#pricing__plans .block-2 .box+.box:after {

   content: '';

   width: 46px;

   height: 46px;

   background: url("../img/index/icon-plus.png") no-repeat center top/cover;

   position: absolute;

   top: -36px;

   left: 50%;

   transform: translateX(-50%);

}



#pricing__plans .block-2 .box .no {

   background: url("../img/index/deco-1.png") no-repeat center top;

   font-weight: 700;

   font-size: 17px;

   line-height: 28px;

   letter-spacing: 0.1em;

   padding-top: 36px;

}



#pricing__plans .block-2 .box h4 {

   padding-top: 20px;

}



#pricing__plans .block-2 .box dl {

   display: flex;

   flex-direction: column;

   justify-content: center;

   max-width: 550px;

   min-height: 36px;

   background-color: #0098cd;

   margin: 20px auto 0;

   padding: 28px 0;

}



#pricing__plans .block-2 .box dl dt .arrow {

   padding: 0 10px;

}



#pricing__plans .block-2 .box dl dd {

   font-weight: 500;

   font-size: 14px;

}



#pricing__plans .block-2 .box .txt-1 {

   font-size: 15px;

   line-height: 28px;

   letter-spacing: 0.025em;

   padding-top: 10px;

}



#pricing__plans .block-2 .box .txt-2 {

   font-weight: 700;

   line-height: 28px;

   letter-spacing: 0.1em;

   padding: 40px 0;

   position: relative;

}



#pricing__plans .block-2 .box .txt-2:before {

   content: '';

   width: 100%;

   height: 176px;

   background: url("../img/index/price-photo.png") no-repeat center bottom;

   position: absolute;

   bottom: 0;

   left: 0;

}



#pricing__plans .block-2 .total {

   font-weight: 700;

   font-size: 17px;

   line-height: 28px;

   letter-spacing: 0.1em;

   color: #333;

   padding-top: 45px;

}



#pricing__plans .block-2 .total dt {

   display: flex;

   align-items: center;

   gap: 10px;

}



#pricing__plans .block-2 .total dt:before,

#pricing__plans .block-2 .total dt:after {

   content: '';

   border-top: 1px solid #333;

   flex: 1 0 0;

}



#pricing__plans .block-2 .total dd {

   padding-top: 10px;

}



@media screen and (max-width: 767px) {

   #pricing__plans {

      background-size: auto 15px;

      padding: 50px 0;

   }



   #pricing__plans .block-1 {

      padding-top: 50px;

   }



   #pricing__plans .block-1 .box+.box {

      padding-top: 40px;

   }



   #pricing__plans .block-1 h3 {

      min-height: 54px;
	   height:32px;
	   padding:9px 10px 12px 10px;

   }



   #pricing__plans .block-1 .price {

      min-height: 60px;

   }



   #pricing__plans .block-1 .price small {

      font-size: 16px;

   }



   #pricing__plans .block-1 .table table {

      width: 500px;

   }



   #pricing__plans .block-2 {

      padding-top: 50px;

   }



   #pricing__plans .block-2 .txt {

      padding-bottom: 0;

   }



   #pricing__plans .block-2 .inner {

      padding: 20px 20px 30px;

   }



   #pricing__plans .block-2 .box h4 {

      font-size: 17px;

   }



   #pricing__plans .block-2 .box dl {

      padding: 20px 0;

   }



   #pricing__plans .block-2 .box dl dt .arrow {

      padding: 0 5px;

   }



   #pricing__plans .block-2 .box .txt-1 {

      font-size: 14px;

   }



   #pricing__plans .block-2 .box .txt-2 {

      font-size: 14px;

   }



   #pricing__plans .block-2 .total {

      font-size: 14px;

   }



   #pricing__plans .block-2 .total dd {

      padding-top: 0;

   }



   #pricing__plans .scroll-hint-icon {

      width: 130px;

   }
	
	#pricing__plans .block-1 .price {

	   height:60px;

	}	
	
	#pricing__plans .block-1 .table th,

	#pricing__plans .block-1 .table td {

	   height: 42px;

	   border-bottom: 4px solid #212121;

	}



	#pricing__plans .block-1 .table th+th {

	   border-left: 4px solid #212121;

	}



	#pricing__plans .block-1 .table td {

	   border-left: 4px solid #212121;
		font-size:14px;

	}
	
	#pricing__plans .block-1 .note {

   font-size: 12px;

}
	
#pricing__plans .block-2 .txt {
	font-size:15px;

}


}



/* -- --*/

#course {

   padding-bottom: 160px;

}



#course .photo-fw {

   padding-bottom: 100px;

}



#course .desc {

   padding-top: 50px;

}



#course .box {

   display: grid;

   grid-template-columns: repeat(2, 1fr);

   gap: 35px;

   padding-top: 70px;

}



#course .box .col {

   background-color: #353535;

}



#course .box h3 {

   background-color: #0098cd;

   padding: 18px 10px;

   text-align: center;

}



#course .box .inner {

   padding: 40px 40px;

}



#course .box h4 {

   font-weight: 700;

   font-size: 18px;

   line-height: 32px;

   letter-spacing: 0.025em;

   padding-top: 30px;

}



#course .box ul {

   background-color: #2b2b2b;

   line-height: 32px;

   letter-spacing: 0.025em;

   margin-top: 15px;

   padding: 25px;

}



#course .box ul li {

   background: url("../img/index/icon-checked.png") no-repeat top 8px left/18px;

   padding-left: 25px;
	line-height:166%;
	margin-bottom:10px;

}

#course .box ul li:last-child {
	margin-bottom:0px;

}



#course .note {

   font-weight: 500;

   font-size: 14px;

   letter-spacing: 0.1em;

   line-height: 32px;

   padding-top: 40px;

}



@media screen and (max-width: 1023px) {

   #course .box {

      grid-template-columns: 1fr;

   }

}



@media screen and (max-width: 767px) {

   #course {

      padding-bottom: 50px;

   }



   #course .photo-fw {

      padding-bottom: 50px;

   }



   #course .desc {

      padding-top: 30px;

   }



   #course .box {

      padding-top: 30px;

   }



   #course .box .inner {

      padding: 20px;

   }



   #course .box h3 {

      padding: 12px 5px;

   }



   #course .box h4 {

      font-size: 15px;
	   line-height:160%;

      padding-top: 15px;

   }



   #course .box ul {

      padding: 15px;

   }



   #course .note {

      font-size: 13px;

      padding-top: 20px;

   }

}



/* -- --*/

#flow {

   background: url("../img/index/arrow-right.png") repeat-x center top/auto 24px;

   padding: 104px 0 160px;

}



#flow .desc {

   padding-top: 40px;

}



#flow .box {

   counter-reset: paragraph;

   padding-top: 70px;

}



#flow .box .item {

   display: grid;

   grid-template-columns: 1fr 232px;

   align-items: center;

   gap: 20px;

   background-color: #353535;

   margin-bottom: 60px;

   padding: 40px 40px;

   position: relative;

}



#flow .box .item:after {

   content: '▼';

   color: #0098cd;

   font-weight: 700;

   font-size: 20px;

   line-height: 1;

   position: absolute;

   top: calc(100% + 17px);

   left: 50%;

   transform: translateX(-50%);

}



#flow .box .item:last-child {

   margin-bottom: 0;

}



#flow .box .item:last-child:after {

   display: none;

}



#flow .box h3 {

   display: grid;

   grid-template-columns: 60px 1fr;

   line-height: 43px;

}



#flow .box h3:before {

   counter-increment: paragraph;

   content: "0"counter(paragraph);

   display: flex;

   justify-content: center;

   align-items: center;

   width: 43px;

   height: 43px;

   background-color: #0098CD;

   color: #fff;

   letter-spacing: 0;

   border-radius: 50%;

   padding-bottom: 2px;

   box-sizing: border-box;

}



#flow .box .txt {

   padding-top: 20px;

}



#flow .box .txt a {

   border-bottom: 1px solid;

}



#flow .box .txt a:hover {

   border-color: transparent;

}



#flow .box .txt-grey {

   color: #a6a6a6;

   padding-top: 20px;

}



#flow .box .txt-1 {

   background-color: #222;

   margin-top: 20px;

   padding: 30px 30px;

}



#flow .box .txt-1 .button {

   padding-top: 20px;

}



#flow .box .txt-1 .button a {

   width: 232px;

   font-size: 16px;

   line-height: 32px;

   letter-spacing: 0.05em;

}



@media screen and (max-width: 1023px) {

   #flow .box .item {

      grid-template-columns: 1fr;

      gap: 30px;

   }



   #flow .box figure {

      max-width: 132px;

      margin:-14px auto 0 auto;

   }

}



@media screen and (max-width: 767px) {

   #flow {

      background-size: auto 15px;

      padding: 65px 0 50px;

   }



   #flow .box {

      padding-top: 40px;

   }



   #flow .box .item {

      padding: 20px 20px;

   }



   #flow .box h3 {

      grid-template-columns: 55px 1fr;

      align-items: center;

      line-height: 27px;

   }

}



/* -- --*/

#faq {

   background: url("../img/index/arrow-right.png") repeat-x center top/auto 24px;

   padding: 150px 0;

}



#faq .box-qa {

   max-width: 900px;

   margin: 0 auto;

   padding-top: 60px;

}



#faq .box-qa dl {

   padding-bottom: 10px;

}



#faq .box-qa dl:last-child {

   padding-bottom: 0;

}



#faq .box-qa dl dt {

   display: grid;

   grid-template-columns: 31px 1fr 24px;

   gap: 20px;

   font-weight: 700;

   font-size: 17px;

   letter-spacing: 0.025em;

   line-height: 31px;

   background-color: #353535;

   position: relative;

   padding: 15px 20px 15px 15px;

   cursor: pointer;

}



#faq .box-qa dl dt:before {

   content: '?';

   display: flex;

   justify-content: center;

   align-items: center;

   width: 31px;

   height: 31px;

   background-color: #0098cd;

   color: #fff;

   border-radius: 50%;

}



#faq .box-qa dl dt i {

   display: block;

   width: 24px;

   height: 24px;

   position: relative;

   align-self: center;

}



#faq .box-qa dl dt i:before,

#faq .box-qa dl dt i:after {

   content: '';

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

   transition: all 0.3s;

}



#faq .box-qa dl dt i:before {

   width: 100%;

   height: 0;

   border-top: 1px solid #0098cd;

}



#faq .box-qa dl dt i:after {

   width: 0;

   height: 100%;

   border-left: 1px solid #0098cd;

}



#faq .box-qa dl dd {

   display: none;

   padding: 30px 54px 20px 0;

}



#faq .box-qa dl.active dt i:after {

   transform: translate(-50%, -50%) rotate(90deg);

}



#faq .cta {

   padding-top: 80px;

}



#faq .cta .button {

   padding-top: 30px;

}



#faq .cta .button a {

   width: 232px;

   font-size: 16px;

   line-height: 32px;

   letter-spacing: 0.05em;

}



@media screen and (max-width: 767px) {

   #faq {

      background-size: auto 15px;

      padding: 65px 0 50px;

   }



   #faq .box-qa {

      padding-top: 30px;

   }



   #faq .box-qa dl dt {

      grid-template-columns: 31px 1fr 15px;

      gap: 10px;

      font-size: 15px;

      padding: 10px;
	   line-height:150%;

   }



   #faq .box-qa dl dt i {

      width: 15px;

      height: 15px;

   }



   #faq .box-qa dl dd {

      padding: 10px 0 20px;

   }



   #faq .cta {

      padding-top: 40px;

   }



   #faq .cta .button {

      padding-top: 15px;

   }

}



/* -- --*/

#access {

   background: url("../img/index/arrow-right.png") repeat-x center top/auto 24px;

   padding: 150px 0;

}



#access .box {

   display: grid;

   grid-template-columns: 600px 1fr;

   gap: 75px;

   padding-top: 60px;

}



#access .txt-info dl {

   display: grid;

   grid-template-columns: 165px 1fr;

}



#access .txt-info dl dt,

#access .txt-info dl dd {

   padding-bottom: 20px;

}



#access .txt-info dl+dl {

   padding-top: 20px;

}



#access .txt-info dl dt {

   font-weight: 700;

   border-bottom: 1px solid #909090;

}



#access .txt-info dl dd {

   border-bottom: 1px solid #515151;

}



#access .gmap {

   width: 100%;

   height: 364px;

}



#access .gmap iframe {

   display: block;

   width: 100%;

   height: 100%;

}



@media screen and (max-width: 1200px) {

   #access .box {

      grid-template-columns: 560px 1fr;

      gap: 30px;

   }

}



@media screen and (max-width: 1023px) {

   #access .box {

      grid-template-columns: 1fr;

      gap: 40px;

   }

}



@media screen and (max-width: 767px) {

   #access {

      background-size: auto 15px;

      padding: 65px 0 50px;

   }



   #access .box {

      padding-top: 30px;

   }



   #access .txt-info dl {

      grid-template-columns: 90px 1fr;

   }

}



/* -- -- */

#reservation {

   background: url("../img/index/reservation-bg-img.jpg") no-repeat center/cover;

   margin-bottom: 135px;

   padding: 50px 0;

}



#reservation h2 {

   font-weight: 900;

   font-size: 18px;

   letter-spacing: 0.1em;

   line-height: 60px;

   text-align: center;

}



#reservation h2 span {

   display: block;

   font-weight: 600;

   font-size: 42px;

   letter-spacing: 0.2em;

   text-transform: uppercase;

}



#reservation ul {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 30px;

}



#reservation ul .button a {

   width: 310px;

   background-color: #fff;

   color: #0098cd;

   font-weight: 600;

   font-size: 26px;

   line-height: 40px;

   text-transform: uppercase;

   padding: 15px 0;

   border-radius: 50px;

}



#reservation ul .button a:hover {

   background-color: #32b4e2;

   color: #fff;

}



#reservation ul .circle {

   display: flex;

   align-items: center;

   justify-content: center;

   width: 165px;

   height: 165px;

   background-color: #32b4e2;

   color: #fff;

   border-radius: 50%;

   text-align: center;

   font-weight: 900;

   font-size: 21px;

   letter-spacing: 0.1em;

   line-height: 30px;

}



@media screen and (max-width: 767px) {

   #reservation {

      margin-bottom: 50px;

      padding: 40px 0;

   }



   #reservation h2 {

      line-height: 36px;

   }



   #reservation h2 span {

      font-size: 32px;

   }
	
	#reservation ul .button a {

	   width: 280px;

	   background-color: #fff;

	   color: #0098cd;

	   font-weight: 600;

	   font-size: 22px;

	   line-height: 30px;

	   text-transform: uppercase;

	   padding: 15px 0 17ox 9;

	   border-radius: 50px;

	}

   #reservation ul {

      flex-direction: column;

      align-items: center;

      gap: 20px;

      padding-top: 0px;

   }
	
	#reservation ul img {

     display:none;

   }
	#reservation ul .circle {
		width: 125px;
		height: 125px;
		font-size: 15px;
		line-height:150%;
	}

}



/* -- -- */

#contact {

   font-size: 13px;

   line-height: 21px;

   padding-bottom: 80px;

}



#contact .desc {

   padding-top: 30px;

}



#contact hr {

   border: 0;

   border-top: 1px solid #707070;

   margin-top: 25px;

}



.mailform {

   max-width: 615px;

   margin: 0 auto;

   padding-top: 55px;

}



.mailform .form-row {

   display: flex;

   flex-wrap: wrap;

   gap: 25px;

   font-size: 14px;

   line-height: 24px;

}



.mailform .form-row+.form-row {

   padding-top: 25px;

}



.mailform .form-row .caption {

   width: 120px;

   text-align: right;

   font-weight: 700;

   padding: 9px 0;

}



.mailform .form-row .input {

   width: calc(100% - 145px);

}



.mailform input:not([type="checkbox"], [type="radio"]),

.mailform textarea {

   display: block;

   width: 100%;

   background-color: #C6C6C6;

   border: 1px solid #707070;

   line-height: 30px;

   border-radius: 0px !important;

   outline: none;

   -webkit-appearance: none;

   -moz-appearance: none;

   box-sizing: border-box;

   padding: 6px 20px;

}



.mailform textarea {

   height: 140px;

   resize: vertical;

}



.mailform .form-btn {

   display: flex;

   align-items: center;

   justify-content: center;

   flex-wrap: wrap;

   gap: 20px;

   padding-top: 40px;

}



.mailform .form-btn button {

   display: block;

   width: 140px;

   background-color: #0098CD;

   color: #fff;

   border-radius: 30px;

   font-weight: 700;

   font-size: 14px;

   letter-spacing: 0.02em;

   line-height: 29px;

   text-align: center;

   padding-top: 1px;

   border: 0;

   transition: all 0.3s;

   cursor: pointer;

}



.mailform .form-btn button:hover,

.mailform .form-btn button.back {

   background-color: #000;

}



.mw_wp_form_preview .mailform .form-row .caption {

   padding: 0;

}



@media screen and (max-width: 767px) {

   #contact {

      padding-bottom: 40px;

   }



   #contact .desc {

      padding: 20px;

   }



   #contact hr {

      margin-top: 0;

   }



   .mailform {

      width: 100%;

      padding: 20px 20px 0;

      box-sizing: border-box;

   }



   .mailform .form-row {

      gap: 10px;

   }



   .mailform .form-row .caption,

   .mailform .form-row .input {

      width: 100%;

   }



   .mailform .form-row .caption {

      text-align: left;

      padding: 0;

   }

}



#txt-thanks {

   padding: 100px 0;

}



#txt-thanks h2 {

   text-align: center;

}



#txt-thanks .txt {

   text-align: center;

   padding-top: 40px;

}



#txt-thanks .txt p+p {

   padding-top: 20px;

}



#txt-thanks .button {

   text-align: center;

   padding-top: 50px;

}



#txt-thanks .button a {

   margin: 0 auto;

}



@media screen and (max-width: 767px) {

   #txt-thanks {

      padding: 50px 0;

   }



   #txt-thanks .txt {

      text-align: justify;

      padding-top: 20px;

   }



   #txt-thanks .button {

      padding-top: 30px;

   }

}



/*

 * Post Type

*=============================================*/

.wp-pagenavi {

   display: flex;

   align-items: center;

   justify-content: center;

   flex-wrap: wrap;

   gap: 10px;

   padding-top: 80px;

}



.wp-pagenavi .pages {

   display: none;

}



.wp-pagenavi span,

.wp-pagenavi a {

   display: block;

   width: 30px;

   height: 30px;

   background-color: #fff;

   color: #000;

   text-align: center;

   font-family: 'DINEngschriftStd', sans-serif;

   font-weight: normal;

   font-style: normal;

   font-size: 14px;

   line-height: 32px;

   letter-spacing: 0;

   box-sizing: border-box;

   border-radius: 50%;

}



.wp-pagenavi a:hover {

   opacity: 1;

   background-color: #0098CD;

   color: #fff;

}



.wp-pagenavi .current {

   pointer-events: none;

   background-color: #0098CD;

   color: #fff;

}



@media screen and (max-width: 767px) {

   .wp-pagenavi {

      gap: 5px;

      padding-top: 40px;

   }

}



/* -- -- */

.cpt-template {

   position: relative;

   padding: 100px 0;

}



@media screen and (max-width: 767px) {

   .cpt-template {

      padding: 50px 0;

   }

}



/* -- -- */

.article__list {

   display: flex;

   flex-wrap: wrap;

   gap: 30px 78px;

}



.article__list .item {

   width: 248px;

}



.article__list figure a {

   display: block;

   padding-top: 66.1%;

   position: relative;

}



.article__list figure span {

   display: block;

   width: 100%;

   height: 100%;

   position: absolute;

   top: 0;

   left: 0;

   background-color: #fff;

}



.article__list time {

   display: block;

   font-size: 12px;

   padding-top: 15px;

}



.article__list h3 {

   display: flex;

   font-weight: 700;

   font-size: 16px;

   line-height: 24px;

   padding-top: 5px;

}



.article__list h3 a {

   overflow: hidden;

   display: block;

   max-height: 48px;

   -webkit-line-clamp: 2;

   display: box;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   text-overflow: ellipsis;

   white-space: normal;

}



.article__list .txt {

   padding-top: 5px;

}



.article__list .txt span {

   overflow: hidden;

   display: block;

   max-height: 42px;

   -webkit-line-clamp: 2;

   display: box;

   display: -webkit-box;

   -webkit-box-orient: vertical;

   text-overflow: ellipsis;

   white-space: normal;

}



@media screen and (max-width: 1023px) {

   .article__list {

      gap: 30px;

   }



   .article__list .item {

      width: calc(33.33% - 20px);

   }

}



@media screen and (max-width: 767px) {

   .article__list {

      gap: 20px 10px;

      padding-top: 20px;

   }



   .article__list .item {

      width: calc(50% - 5px);

   }



   .article__list time {

      padding-top: 5px;

   }



   .article__list h3 {

      font-size: 14px;

      line-height: 20px;

   }

}



/*

 * Post Detail

 *=============================================*/

#cpt-detail {

   position: relative;

}



#cpt-detail .featured_img {

   text-align: center;

   padding-bottom: 12px;

}



#cpt-detail time {

   display: block;

   font-weight: 500;

   font-size: 13px;

   line-height: 20px;

   border-bottom: 2px dotted;

   padding: 10px 0;

}



#cpt-detail .cate {

   display: flex;

   flex-wrap: wrap;

   gap: 10px;

   font-size: 12px;

   line-height: 17px;

}



#cpt-detail .cate a {

   display: inline-block;

   background-color: #533B0C;

   color: #fff;

   border-radius: 30px;

   padding: 3px 15px 2px;

}



#cpt-detail .the_content {

   padding-top: 30px;

}



#cpt-detail .the_content>*:not(h2, h3, h4) {

   margin: 0 50px;

}



#cpt-detail .the_content h2:first-child,

#cpt-detail .the_content h3:first-child,

#cpt-detail .the_content h4:first-child {

   margin-top: 0;

}



#cpt-detail .the_content h2 {

   background-color: #0098CD;

   font-weight: 700;

   font-size: 20px;

   line-height: 36px;

   padding: 12px 20px 12px 15px;

   margin-top: 40px;

   margin-bottom: 20px;

   border-left: 5px solid #fff;

}



#cpt-detail .the_content h3 {

   font-weight: 700;

   font-size: 18px;

   line-height: 30px;

   border-bottom: 1px solid #0098CD;

   border-left: 5px solid #0098CD;

   padding: 0 15px 5px;

   margin: 20px 20px;

   box-sizing: border-box;

}



#cpt-detail .the_content h4 {

   font-weight: 700;

   font-size: 16px;

   letter-spacing: 0.1em;

   line-height: 26px;

   margin: 20px 30px;

   padding: 0 15px;

   border-left: 5px solid #0098CD;

}



#cpt-detail .the_content ul {

   list-style: disc;

   padding-left: 20px;

}



#cpt-detail .the_content ol {

   list-style: decimal;

   padding-left: 20px;

}



#cpt-detail .the_content p img {

   display: inline-block;

   vertical-align: top;

   margin-right: 10px;

}



#cpt-detail .the_content p img.aligncenter {

   display: block;

   margin: 0 auto;

}



#cpt-detail .the_content p img.alignright {

   display: block;

   margin-left: auto;

}



#cpt-detail .the_content p img:last-child {

   margin-right: 0;

}



#cpt-detail .btn-back {

   position: absolute;

   top: 0;

   right: 0;

}



#cpt-detail .btn-back a {

   display: inline-block;

   font-weight: 500;

   font-size: 12px;

   letter-spacing: 0.12em;

   line-height: 20px;

   border-bottom: 1px solid;

}



#cpt-detail .btn-back a:hover {

   border-bottom-color: #002B3D;

}



#cpt-detail .post-btn {

   display: flex;

   flex-wrap: wrap;

   align-items: center;

   justify-content: center;

   gap: 10px;

   color: #fff;

   font-weight: 400;

   font-size: 15px;

   line-height: 28px;

   padding-top: 80px;

}



#cpt-detail .post-btn a {

   display: block;

   background-color: #333;

   border: 1px solid #333;

   padding: 0 10px;

}



#cpt-detail .post-btn a:hover {

   background-color: #fff;

   color: #333;

}



@media screen and (max-width: 1023px) {

   #cpt-detail .the_content p img {

      display: block;

      margin: 0 auto 15px;

   }



   #cpt-detail .the_content p img:last-child {

      margin: 0 auto;

   }

}



@media screen and (max-width: 767px) {

   #cpt-detail {

      padding: 40px 0;

   }



   #cpt-detail .cate {

      font-size: 10px;

      line-height: 13px;

   }



   #cpt-detail .cate a {

      padding: 3px 10px;

   }



   #cpt-detail .the_content>*:not(h2, h3, h4) {

      margin: 0 20px;

   }



   #cpt-detail .the_content h2 {

      font-size: 18px;

      line-height: 32px;

      padding: 10px 15px;

   }



   #cpt-detail .the_content h3 {

      font-size: 16px;

      margin: 20px 5px;

   }



   #cpt-detail .the_content h4 {

      font-size: 15px;

      margin: 20px 10px;

   }



   #cpt-detail .the_content p img {

      display: block;

      margin: 0 auto 15px;

   }



   #cpt-detail .the_content p img.alignright {

      margin: 0 auto 15px;

   }



   #cpt-detail .the_content p img:last-child {

      margin: 0 auto !important;

   }



   #cpt-detail .post-btn {

      padding-top: 40px;

   }

}



/* -- -- */

.aboutp {

   margin: 20px 150px 100px 150px;

   line-height: 180%;

   font-size: 15px;

}



.tafter {

   padding-bottom: 140px !important;

   margin-bottom: 100px;

}



.intro {

   position: absolute;

   top: 30px;

   right: 277px;

}



@media screen and (max-width: 1023px) {

   .aboutp {

      margin: 20px auto 100px auto;

   }

}



@media screen and (max-width: 768px) {

   .aboutp {

      margin: 20px auto 20px auto;

   }



   .tafter {

      padding-bottom: 80px !important;

      margin-bottom: 20px;

   }



   .intro {

      position: absolute;

      top: 14px;

      right: 35%;

      font-size: 12px;

   }

}



@media screen and (max-width: 730px) {

   .intro {

      right: 34%;

   }

}



@media screen and (max-width: 700px) {

   .intro {

      right: 33%;

   }

}



@media screen and (max-width: 670px) {

   .intro {

      right: 32%;

   }

}



@media screen and (max-width: 640px) {

   .intro {

      right: 31%;

   }

}



@media screen and (max-width: 610px) {

   .intro {

      right: 30%;

   }

}



@media screen and (max-width: 580px) {

   .intro {

      right: 29%;

   }

}



@media screen and (max-width: 550px) {

   .intro {

      right: 28%;

   }

}



@media screen and (max-width: 520px) {

   .intro {

      right: 27%;

   }

}



@media screen and (max-width: 490px) {

   .intro {

      right: 26%;

   }

}



@media screen and (max-width: 460px) {

   .intro {

      right: 25%;

   }

}



@media screen and (max-width: 430px) {

   .intro {

      right: 22%;

   }

}



@media screen and (max-width: 400px) {

   .intro {

      right: 20%;

   }

}



@media screen and (max-width: 370px) {

   .intro {

      right: 19%;

   }

}



@media screen and (max-width: 340px) {

   .intro {

      right: 18%;

   }

}

.trainer{
	display:flex;
	gap:50px;
	margin:80px 0 160px 0;
}

.tr1{
	width:35%;
}

.tr2{
	width:65%;
}
.tr2 h3{
	font-size:30px;
	font-weight:bold;
	margin:14px 0 20px 0;
}
.tr2 h3 span{
	font-size:18px;
	font-weight:normal;
	display:inline-block;
	margin-left:12px;
}
.tr2 p{
	margin-top:20px;
}


@media screen and (max-width: 768px) {
	.trainer{
		display:block;
		margin:40px 0 80px 0;
	}

	.tr1{
		width:100%;
	}

	.tr2{
		width:100%;
	}
	.tr2 h3{
		font-size:24px;
		font-weight:bold;
		margin:14px 0 20px 0;
	}
	.tr2 h3 span{
		font-size:14px;
		font-weight:normal;
		display:inline-block;
		margin-left:12px;
	}
	.tr2 p{
		margin-top:20px;
	}
	
}