@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 16px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;}
/*初期設定*/
a{
	color: #fff;
	text-decoration: none;
}
a: visited{
	color: #fff;
}
a: hover{
	color: #fff;
	text-decoration: none;
}
a: link{
	color: #fff;
}
h1{
	margin: 0;
}
h2{
	text-align: center;
    margin: 0;
	font-size: 1.8em;
	font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
ul, li{
	margin: 0;
	padding: 0;
	list-style: none;
}
img{
	width: 100%;
}
/* ハンバーガー */
header {
  background: #fff;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 60px;
  height: 60px;
  vertical-align: middle;
	right: 0;
    position: fixed;
	background: #8EBCB6;
	border-radius: 0 0 0 100%;
	z-index: 1;
}
#nav-open img{
	width: 30px;
	margin: 10px 0 0 20px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(190,214,211,0.8);
  opacity: 0;
  transition: 0.6s ease;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  width: 80%;
  max-width: 1000px;/*最大幅（お好みで調整を）*/
  height: 500px;
  background: #fff;
  border-radius: 15px;
  transition: 0.6s ease;
  -webkit-transform: translateX(-105%);
  transform: translate(-100%, -50%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .8;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
  border-radius: 15px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

.header-logo-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{text-align:center;margin:auto;height: 42px;}
.logo-area img{
	width: 100%;
}
.nav_menu{
	text-align: center;
	margin-top: 15%;
}
.nav_menu li{
	padding: 5% 0;
}
.nav_menu a{
	color: #333;
	font-size: 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}
/* ハンバーガー */

#top{
	color: #333;
}
.mainImg {
  width: 100%;
  background: url("../img/sp_top_main.jpg") center center / cover no-repeat;
  height: 0;
  padding-top: calc(450 / 650 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  margin: 0;
  z-index: -1;
}

.aboutImg{
	background: url("../img/sp_about_main.jpg") center center / cover no-repeat;
	padding-top: calc(542 / 650 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
}

.feeImg{
	background: url("../img/sp_fee_main.jpg") center center / cover no-repeat;
	padding-top: calc(542 / 650 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
}

.flowImg{
	background: url("../img/sp_flow_main.jpg") center center / cover no-repeat;
	padding-top: calc(542 / 650 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
}

.more{
	text-align: center;
	color: #fff;
	background: #FFB762;
	box-shadow: 0px 4px 10px -5px rgba(0,0,0,0.6);
	font-size: 1.5em;
	font-weight: 700;
	border-radius: 20px;
	width: 80%;
	margin: 35px auto;
}
.more p{
	padding: 15px 10px;
}

.section{
	padding: 50px 10px;
	margin: 0;
}

.section img{
	width: 100%;
}

.section ul{
	display: flex;
}
.txt{
    line-height: 1.8;
	letter-spacing: 1px;
	font-weight: 200;
}
#sec_01{
	position: relative;
	background: rgba(232,232,232,0.7);
}
#sec_01 .txt{
	width: 70%;
    letter-spacing: 1px;
}

#sec_01 .txt p{
	padding: 20px 0 10px;
}

#sec_01 .txt_img{
	width: 30%;
	margin-top: 30px;
}

#sec_02{
	position: relative;
	background: rgba(190,214,211,0.5);
}
#sec_03{
	position: relative;
	background: rgba(255,170,178,0.3);	
}
#sec_02 ul, #sec_03 ul{
	display: block;
}
#sec_02 li, #sec_03 li{
	width: 80%;
	margin: 30px auto 0;
}
#sec_02 .txt_img img, #sec_03 .txt_img img{
	box-shadow: 0px 4px 10px -4px rgba(0,0,0,0.6);
}

.section_info{
	margin: 70px 20px 0;
	padding: 40px 20px;
	background: #fff;
	border-radius: 25px; 
	box-shadow: 0px 4px 10px -4px rgba(0,0,0,0.6);
}
#info, #flow{
	border: #BED6D3 7px solid;
}
#fee{
	border: #F0B0B6 7px solid;
}
#flow{
	margin-bottom: 70px;
}
.section_info h2{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-size: 24px;
	letter-spacing: 5px;
}
.section_info p{
	text-align: center;
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: 2px;
	margin: 20px 0
}
.section_info h3{
	margin: 0;
}
.section_info img{
	width: 100%;
}
.more01{
	width: 40%;
	position: absolute;
	bottom: 20px;
	right: 10px;
}
.footer{
	margin-top: 100px;
	padding: 50px 50px 100px;
	background: #ebebeb;
}
.footer p{
	font-size: 14px;
	color: #333;
	margin: 10px 0;
}
.footer a{
	color: #333;
}
.footer img{
	width: 100%;
	margin: 20px 0
}
.footer .logo{
	text-align: center;
}
.footer .logo img{
	width: 100px;
	margin: 0;
}
.footer.more{
	color: #333;
	background: #ebebeb;
}
.copyright{
	margin-top: 50px;
}
.reserve{
	position: fixed;
	bottom: 0;
	width: 100%;
	background: rgba(255,183,98,0.85);
	font-size: 1.5em;
	text-align: center;
	padding: 10px 0 0;
}

.reserve p{
	margin: 0;
}

.reserve img{
	padding: 0;
	margin: 0;
	width: 100%;
	margin: 0 auto;
}

.fee_title{
	background: #BED6D3;
	color: #fff;
	font-size: 16px;
	text-align: center;
	padding: 10px;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-weight: 700;
}
.fee_table{
	margin: 0 10px 100px;
}
.fee_child >:nth-child(2){
	border-left: 1px solid #C4C4C4;
}
.fee_child{
	display: flex;
}
.fee_child p{
	width: 50%;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-weight: 700;
	color: #3E3E3E;
	letter-spacing: 1px;
	background: #F4F4F4;
	margin: 0;
	padding: 20px 0;
}
.fee_child p span{
	font-size: 12px;
	text-align: left;
	display: block;
    margin-top: 10px;
    padding: 0 10px;
}
.fee_child_long{
	width: 100% !important;
}
.fee_plan{
	border: 1px solid #e5e5e5;
	margin: 50px 10px 100px;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.4);
}

.fee_plan h1{
	font-size: 24px;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	color: #333;
	font-weight: 700;
	text-align: center;
	margin-top: 30px;
}

.fee_plan p{
	text-align: center;
	margin: 20px 0;
}

.fee_plan div{
	margin: 20px 10px;
	padding: 10px 3px 5px;
	border-bottom: 1px #e5e5e5 solid;
}

.fee_plan >:nth-child(6){
	margin-bottom: 50px;
}
.plan_num a{
	color: #333;
	font-size: 20px;
}

.plan_num a::before{
	content: "▼";
	color: #333;
	font-size: 16px;
	padding-right: 10px;
}
.fee_annotation{
	border-bottom: none !important;
	font-size: 16px;
}

.fee_annotation a{
	color: #AF7076;
}

.fee_tel{
	text-align: center;
	padding: 25px 10px 35px;
}

.fee_tel p{
	margin: 30px 0;
	font-size: 16px;
}

.fee_tel .tel_img{
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.4);
	border-radius: 16px;
}

#plan01, #plan02, #plan03, #plan04{
	font-size: 24px;
}

.flow{
	width: 80%;
	margin: auto;
}
.flow h2{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	margin: 20px 0;
	font-size: 1.5em;
}
.flow p{
	margin-bottom: 80px;
}

.title_border {
display: flex;
align-items: center;
}
.title_border:before,
.title_border:after {
border-top: 2px solid #BED6D3;
content: "";
flex-grow: 1;
}
.title_border:before {
margin-right: 1rem;
}
.title_border:after {
margin-left: 1rem;
}
.title_border span{
	background: #BED6D3;
    padding: 10px;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    display: block;
    text-align: center;
    color: #fff;
    line-height: 2;
}



.copyright{
	text-align: center;
	color: #333;
}

#safety_info{
	margin: 70px 20px;
}

#body_info{
	margin: 70px 20px;
}

#company_info{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 20px;
}
.company_tr{
	margin-bottom: 10px;
}

.safety_text{
	text-align: center;
	line-height: 35px;
	color: #666663;
	font-family: Montserrat, Arial;
	font-size: 10pt;
	width: 300px;
	margin: auto;
}
.safety_text img{
	width: 256px;
	margin: 30px 10px 30px 10px;
}
.sub_title{
	font-size: 14pt;
}

/* BODY */

.body  {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	color: #666663;
	line-height: 35px;

}

.body__inner  {
	max-width: 800px;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
}

.body__fv  {

}

.body__text  {
	font-size: 16px;
	text-align: center;
}

.body__fv__img  {
	width: 80%;
	margin: auto;
}

.body__fv__img img {
	width: 100%;
}


.body__place__img{

}



.body__point  {
	margin-top: 80px;
}


.body__point__wrap + .body__point__wrap  {
	margin-top: 40px;
}

.body__title  {

}

.body__point__text  {
	font-size: 16px;
	text-align: center;
}

.body__point__img  {
	width: 60%;
	margin: auto;
}

.body__point__img img  {
	width: 100%;

}

.body__cta {
	margin-top: 60px;
}

.body__cta__text {
	margin-top: 30px;
	font-size: 14px;
	text-align: center;
}

.body__link {
	display: block;
	width: 60%;
	margin: auto;
	transition: 0.3s;
}

.body__link:hover {
	opacity: 0.6;
}


.body__link img {
	width: 100%;
}

@media screen and (max-width:767px),print {
	.body__point__img  {
		width: 80%;
		margin: auto;
	}
	
	.body__point__img img  {
		width: 100%;
	
	}
}

@media screen and (min-width: 768px) {
  .pc {
    display: inline;
  }
  .sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: inline;
  }
}









.body_text{
	text-align: center;
	line-height: 35px;
	color: #666663;
	font-family: Montserrat, Arial;
	font-size: 10pt;
	width: 300px;
	margin: auto;
}


@media screen and (min-width: 769px) {
	body{
		font-size: 24px;
	}
	.logo-area{
		height: 75px;
	}
	#nav-open{
		width: 100px;
		height: 100px;
	}
	#nav-open img{
		width: 50px;
	    margin: 15px 0 0 35px;
	}
	#nav-content {
		height: 640px;
	}
	#nav-input:checked ~ #nav-content {
		height: 640px;
	}
	.nav_menu{
		margin-top: 50px;
	}
	.nav_menu li{
		padding: 20px 0;
	}
	.mainImg {
	  background: url("../img/pc_top_main.jpg") center center / cover no-repeat;
	  padding-top: calc(1080 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}
	.aboutImg {
	  background: url("../img/pc_about_main.jpg") center center / cover no-repeat;
	}
	.feeImg {
	  background: url("../img/pc_fee_main.jpg") center center / cover no-repeat;
	  padding-top: calc(1080 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}
	.flowImg {
	  background: url("../img/pc_flow_main.jpg") center center / cover no-repeat;
	}
	.fee{
		padding: 50px 20% 50px !important;
	}
	.fee img{
		width: 60%;
	}
	.fee_plan{
		margin: 50px 20% 100px;
	}
	.fee_table{
		padding: 0 20%;
		margin: 0 0 200px;
	}
	#plan01, #plan02, #plan03, #plan04{
		margin: 0 20%;
	}
	#sec_01{
		padding-bottom: 100px;
	}
	#sec_01 .txt p{
		font-size: 32px;
	}
	.more01{
		width: 20%;
		right: 200px;
	}
	.while_img{
		display: none;
	}
	.section_info{
		margin: 70px 20% 0;
		padding: 50px 10%;
		border-radius: 50px;
	}
	.section_info h2{
		font-size: 40px;
	}
	.section_info p{
		font-size: 20px;
	}
	.more{
		width: 60%;
	}
	.flow{
		width: 60%;
	}
	.flow h2{
		font-size: 24px;
	}
	.flow p{
		font-size: 16px;
	}
	.title_border span{
		line-height: 1.4;
	}

	.footer{
		padding: 50px 20%;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
	.footer img{
		width: 50%;
	}
	.footer p{
		font-size: 20px;
	}
	.footer .logo img{
		width: 200px;
	}
	.reserve{
		display: none;
	}
	
	.safety_text{
		text-align: center;
		line-height: 35px;
		color: #666663;
		font-family: Montserrat, Arial;
		font-size: 10pt;
		display: block;
		width: auto;
	}
	#safety_info{
		margin: 70px 20%;
	}

	#body_info{
		margin: 70px 20%;
	}

	#company_info{
		margin-left: auto;
		margin-right: auto;
		width: 450px;
		font-size: 20px;
	}
	#company_info th{
		width: 160px;
		vertical-align:top;
	}
	.company_tr{
		text-align: left;
		margin-bottom: 10px;
	}
	.company_th{
		display: inline-block;
		vertical-align: top;
		width: 140px;
	}
	.company_td{
		display: inline-block;
		text-align: left;
	}
}