@charset "utf-8";

/*----------------------------------------
	全体
----------------------------------------*/

html{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size:62.5%;
	color: #000;
	-webkit-text-size-adjust:100%;
	line-height:1.5;
	font-weight: 600;
}
.noto{
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
body{ font-size:1.4rem; font-size: 1.4em; }
img{ vertical-align: bottom; }
img {
    image-rendering: -webkit-optimize-contrast;
}
.yumin {
	font-family: '游明朝体', "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
}

a{
	color:#000;
	transition: all 0.4s;
    text-underline-offset: 8px;
}
a:hover{
	color:#5286c7;
	transition: all 0.4s;
}
a img{
	transition: all 0.4s;
}
a img:hover{
	opacity: 0.7;
}
.blue{background: #083B6D}
.skyblue{background: #7ECEF4}
.gray{background: #e6e7e7}
.dark_gray{background-color: #434343}
.beige{background: #E5DDCB}
.max_respon{max-width: 100%;}
.bg_black{background-color: #000;}
.bg_gray{background: #f2f2f2}
.bg_light_green{
	background: #f0f8dc;
}
/*----------------------------------------
	text
----------------------------------------*/

p{ line-height: 2; }

.text_300{ font-weight: 300; }
.text_400{ font-weight: 400; }
.text_500{ font-weight: 500; }
.text_600{ font-weight: 600; }
.text_700{ font-weight: 700; }
.text_800{ font-weight: 800; }
.text_bold{ font-weight: bold; }
.text_normal{ font-weight: normal; }

.lh_12{ line-height: 1.2; }
.lh_13{ line-height: 1.3; }
.lh_14{ line-height: 1.4; }
.lh_15{ line-height: 1.5; }
.lh_16{ line-height: 1.6; }
.lh_17{ line-height: 1.7; }
.lh_18{ line-height: 1.8; }
.lh_20{ line-height: 2.0; }
.lh_22{ line-height: 2.2; }
.lh_24{ line-height: 2.4; }
.lh_25{ line-height: 2.5; }

.ls_-1{ letter-spacing: -1px; }
.ls_05{ letter-spacing: 0.5px; }
.ls_075{ letter-spacing: 0.75px; }
.ls_1{ letter-spacing: 1px; }
.ls_2{ letter-spacing: 2px; }

.text_16{ font-size: 1.6rem; }
.text_17{ font-size: 1.7rem; }
.text_18{ font-size: 1.8rem; }
.text_19{ font-size: 1.9rem; }
.text_20{ font-size: 2.0rem; }
.text_21{ font-size: 2.1rem; }
.text_22{ font-size: 2.2rem; }
.text_23{ font-size: 2.3rem; }
.text_24{ font-size: 2.4rem; }
.text_26{ font-size: 2.6rem; }
.text_28{ font-size: 2.8rem; }
.text_30{ font-size: 3.0rem; }
.text_32{ font-size: 3.2rem; }
.text_35{ font-size: 3.5rem; }
.text_36{ font-size: 3.6rem; }
@media screen and (max-width: 1049px){


	.text_21{ font-size: max(2.01vw, 1.8rem); }
	.text_22{ font-size: max(2.09vw, 2rem); }
	.text_23{ font-size: max(2.15vw, 2rem); }
	.text_24{ font-size: max(2.28vw, 2rem); }
	.text_26{ font-size: max(2.47vw, 2.2rem); }
	.text_28{ font-size: max(2.66vw, 2.2rem); }
	.text_30{ font-size: max(2.85vw, 2.2rem); }
	.text_32{ font-size: max(3.07vw, 2.2rem); }
	.text_35{ font-size: max(3.36vw, 2.3rem); }
	.text_35{ font-size: max(3.38vw, 2.3rem); }

}/*END*/

@media screen and (max-width: 599px){
	.text_16{ font-size: 1.4rem; }
	.text_18{ font-size: 1.4rem; }
	p{ line-height: 1.8; }

}/*END*/
.clear{ clear: both; }
li{ list-style:none; }
.center{ text-align:center; }
.text_left{ text-align:left; }
.text_right{ text-align:right; }
.op:hover{
	filter: alpha(opacity=70);
	-moz-opacity:070;
	opacity:0.70;
	transition: all 0.4s;
}
.op{
	transition: all 0.4s;
}
.text_b01{
	color: #1b1b1b;
}
/*----------------------------------------
	共通
----------------------------------------*/
.inner_frame1350{
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-sizing: border-box;
}
.inner_frame {
    max-width: 1155px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    box-sizing: border-box;
}
.form_frame {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    box-sizing: border-box;
}
.p_frame{
	max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-sizing: border-box;
}
li{ list-style:none; }
.center{ text-align:center; }
.column{
	display: flex;
    flex-direction: column;
    align-items: center;
}
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; }
.op:hover img{
	filter: alpha(opacity=60);
	-moz-opacity:060;
	opacity:0.60;
}
#container{ overflow: hidden; }
.main_ttl img{
	max-width: 430px;
	width: 80%;
}
.sub_ttl img {
    max-width: 300px;
    width: 70%;
}
.ttl_center{
	margin-left: auto;
	margin-right: auto;
}
.sp_block{
	display: none;
}
@media print, screen and (min-width: 600px){
	.sp_br{
		display: none;
	}
	.pc_none{
		display: none !important;
	}

}/*END*/

@media screen and (max-width: 768px){
	.inner_frame1350{
		padding-right: 3%;
		padding-left: 3%;
	}
	.inner_frame{
		padding-right: 3%;
		padding-left: 3%;
	}
	.form_frame{
		padding-right: 3%;
		padding-left: 3%;
	}
}/*END*/

@media screen and (max-width: 599px){
	.inner_frame1350{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}
	.inner_frame{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}
	.form_frame{
		padding-right: 4.5%;
		padding-left: 4.5%;
	}
	.sp_left{
		text-align: left;
	}
	.pc_br{
		display: none;
	}
	.sp_none{
		display: none !important;
	}
	.sp_block{
		display: block;
	}
	.sp_pt_none{
		padding-top: 0px!important;
	}
	.sp_mb_block{
		margin-bottom: 50px!important;
	}
}/*END*/


/*----------------------------------------
	header
----------------------------------------*/

.sd-trigger{
	position: fixed;
	top: 0;
	right: 0;
	width: 16%;
	cursor: pointer;
	background: #fff;
	z-index: 7;
}
#sd{
	box-sizing: border-box;
	background: #fff;
}
#sd li a{
	display: block;
	text-decoration: none;
	padding: 20px 2% 20px 4%;
	color:#000;
	border-bottom: 1px solid #ccc;
}
#sd li a:hover{
	color: #14557a;
}

@media print, screen and (min-width: 750px){
	.sd-trigger{
  left: calc(50% + 150px);
	right: auto;
	max-width: 100px;
}

	.sp_mv{
		display: none;
	}
	.pc_mv{
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

}/*END*/

@media screen and (max-width: 769px){
		.sd-trigger{
  max-width: 25%;
}

	.pc_mv{
		display: none;
	}
	.sp_mv{
		width: 100%;
	}

}/*END*/


/*----------------------------------------
	layout
----------------------------------------*/

#container{
	overflow: hidden;
}
.overflow{
	overflow: hidden;
}

.tel{
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	color:#595757;
}

@media print, screen and (min-width: 770px){

	.sp_only{
		display: none !important;
	}
	.btn_hover{
		position: relative;
		display: block;
	}
	.btn_hover:hover{
		animation:btn_hover 0.5s ease-in;
	}
	@keyframes btn_hover{
		0% {
			top: 0;
		}
		40% {
			top: -5px;
		}
		100% {
			top: 0;
		}
	}

}/*END*/

@media print, screen and (min-width: 600px){

	.sp_br{
		display: none;
	}

}/*END*/

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

	.pc_only{
		display: none !important;
	}

}/*END*/

/*----------------------------------------
	パンクズ
----------------------------------------*/
.pan_nav {
    display: flex;
    flex-wrap: wrap;
}
.pan_nav li{
    font-size: 1.2rem;
    color: #000;
    line-height: 2.5;
}
.pan_nav a{
	color: #000;
	text-decoration: none;
}
.pan_nav a:hover{
	color: #000;
}
.pan_nav a:after{
    content: "";
    width: 7px;
    height: 7px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
    display: inline-block;
	margin-left: 15px;
    margin-right: 15px;
}
.pan_nav li:last-child a:after {
	content: none;
}

/*----------------------------------------
	map
----------------------------------------*/
.map iframe{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}
/*----------------------------------------
	contact
----------------------------------------*/

.contact{
	width: 100%;
	line-height: 1.8;
	box-sizing: border-box;
	color: #000;
}
.contact label,.contact label span{
	color: #000;
}

.contact th,
.contact td{
	text-align: left;
	box-sizing: border-box;
	font-weight: 400;
}
.contact th{
    padding: 1.5% 3%;
    background: #000;
    color: #fff;
}
.contact td {
    padding: 3% 3% 5%;
}
.contact td p{
    line-height: 1.2;
}
.kind label{
	box-sizing: border-box;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left:45px !important;
}
.kind label:before{
	left: 2px !important;
}
.kind.check input[type="checkbox"]:checked + label:after {
	left: 8px !important;
}

.r_kind label{
	box-sizing: border-box;
	padding-left:45px !important;
	margin-bottom: 20px !important;
}

.schedule_form input{
	float: left;
	width: 40%;
}
.schedule_form select{
	float: left;
	width: 28%;
	margin-left: 2%;
}
.schedule_form input,
.schedule_form select{
	border: 1px solid #dcdcdc !important;
	background: #fff !important;
}

.hissu:after,
.nini:after{
	display: inline-block;
	padding: 8px 8px;
	line-height: 1;
	margin-left: 10px;
	border-radius: 5px;
	vertical-align: 0px;
	font-size: 1.6rem;
	font-weight: bold;
}
.hissu:after{
	content: "必須";
	display: inline-block;
	background: #5286c7;
	border: 1px solid #5286c7;
	color: #fff;
}
.nini:after{
	content: "任意";
	display: inline-block;
	background: #cecec8;
	color: #000;
	border: 1px solid #cecec8;
}
.form_submit a{
	display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/*error*/
td .error{
	color: #e60012;
	padding-top: 10px;
}
.privacy .error{
	display: inline-block;
	margin-top: 10px;
	color: #e60012;
	padding: 5px 14px;
	background:#ffa2ad;
}
td.error{
	background:#ffa2ad;
	padding: 8px;
		display: block;
		margin-bottom: 15px;
}

@media print, screen and (min-width: 770px){

	.contact th{
		font-size: 2rem;
	}
	.contact td{
		font-size: 1.8rem;
	}

}/*END*/

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

	.contact th{
		font-size: 1.5rem;
		padding-bottom: 4px;
	}
	.contact td{
		font-size: 1.4rem;
	}
	.privacy .error,
	td .error{
		font-size: 1.4rem;
	}
	.privacy .hissu:after,
	th.hissu:after,
	th.nini:after{
		padding: 3px 6px;
		font-size: 1.2rem;
		vertical-align: 1px;
		margin-left: 6px;
	}
	.kind label{
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.privacy{
		font-size: 1.4rem !important;
	}

}/*END*/
/*form 追加*/
.form_none{
	display: none;
}
.form_block{
	display: block;
}
/*----------------------------------------
	フォーム
----------------------------------------*/

select,
textarea,
input[type="tel"],
input[type="email"],
input[type="text"]{
	padding: 15px;
    background: #fff;
    border: 1px solid #fff;
	border-radius: 5px;
	box-sizing: border-box;
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	-webkit-appearance: none;
	font-size: 1.7rem;
		color: #000;
}
select:focus{ outline:none; }
textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus{
	outline:none;
	border: 1px solid #ccc;
}


.form1{ width: 250px; }
.form2{ width: 350px; }
.form_all{ width: 100%; }
:focus{ outline: none; }
select{
	width: 350px;
}

.form_box_flex{
	display: flex;
	justify-content: space-between;
}
.box_heaf{
	width: auto;
	float: left;
	display: flex;
}
.m_r10{
	margin-right: 4%;
}

.telbox{
	width:28%;
}
.telbox_sen {
    width: 10%;
    text-align: center;
    padding-top: 13px;

}

.select_ttl{
	width: 100%;
	padding: 20px 10px 10px 0;
	font-size: 2.2rem;
}

.media_pb{
	padding-bottom: 15px !important;
}


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

	select,
	textarea,
	input[type="tel"],
	input[type="email"],
	input[type="text"]{
		padding: 10px 10px;
		font-size: 1.6rem;
	}
	select:focus{ outline:none; }
	textarea:focus,
	input[type="tel"]:focus,
	input[type="email"]:focus,
	input[type="text"]:focus{
		border: 1px solid #867b5b;
	}
	.form1{ width: 150px; }
	.form2{ width: 100%; }
	select{
		width: 100%;
	}
}/*END*/


/*----------------------------------------
	radio checkbox
----------------------------------------*/

.radio input[type="radio"],
.check input[type="checkbox"]{
	position: absolute;
	height: 1px;
	width: 1px;
	clip: rect(0, 0, 0, 0);
}
.radio label,
.check label{
	display: inline-block;
	position: relative;
	cursor: pointer;
    padding-left: 50px;
    line-height: 2;
    margin-right: 5%;
}
.radio label:before,
.check label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
    width: 38px;
    height: 38px;
	margin-top: -16px;
	background: #fff;
	border:1px solid #dcdcdc;
	border-radius: 50%;
}

.radio label:before{
	margin-top: -19px;
}


.check label:before{ border-radius: 0; }
.radio label:before{ border-radius: 50%; }

.radio label,
.check label{
	margin-left: 0\9;
	padding: 11px\9;
}
.radio label:not(:target),
.check label:not(:target){
	margin-left: 10px\9;
	padding: 11px 0 11px 25px\9;
}
.radio label:before,
.check label:before{
	display: none\9;
}
.radio label:not(:target):before,
.check label:not(:target):before{
	display: inline-block\9;
}
.radio input[type="radio"]:checked + label:after{
	position: absolute;
	content: "";
	top: 50%;
	left: 6px;
    width: 29px;
    height: 29px;
	margin-top: -13px;
	border-radius: 50%;
	background: #00b7ee;
}
.check input[type="checkbox"]:checked + label:after {
	content: "";
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	display: block;
    left: 9px;
    width: 22px;
    height: 14px;
	margin-top: -8px;
	border-left: 4px solid #eb6877;
	border-bottom: 4px solid #eb6877;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.check input[type="checkbox"]:checked + label:before{
	background: #fff;
}/*--
.radio input[type="radio"]:focus + label:before,
.check input[type="checkbox"]:focus + label:before{
	border-color: #aec47f;
	box-shadow: 0 0 5px #aec47f;
}
--*/
.radio_style label{
	padding-bottom: 5px;
}



.medhia_check label{
	padding-left: 40px;
	margin-right: 30px;
}

.radio label{
	margin-bottom: 15px;
}

@media screen and (max-width: 768px){
	.radio label:before, .check label:before {
		width: 32px;
		height: 32px;
	}
	.radio input[type="radio"]:checked + label:after {
		left: 6px;
		width: 22px;
		height: 22px;
	}
	.check input[type="checkbox"]:checked + label:after {
		left: 7px;
		width: 20px;
		height: 12px;
	}
}



/*----------------------------------------
	footer
----------------------------------------*/
footer {
	background: #000;
	color: #fff;
}
footer a{
	color: #fff;
    text-decoration: none;
}

.footer_box{
    display: flex;
    justify-content: space-between;
	row-gap: 30px;
}
.footer_box > div{
	width: 40%;
    background: #262626;
    border-radius: 20px;
    padding: 5% 3%;
    box-sizing: border-box;
}
.footer_box > nav{
	width: 50%;
}
.footer_deco {
    bottom: 9%;
    right: 0%;
    width: 59.6%;
}
footer .nav_box li:not(:last-child) {
    margin-bottom: clamp(0.5rem, 0.025rem + 4vw, 1.8rem);
}
footer .nav_box li {
    font-size: clamp(1.4rem, 2.575vw, 2.0rem);
}
footer .nav_box li:last-child {
    padding-top: clamp(2.313rem, -0.438rem + 2vw, 1.25rem);
}
footer .nav_box span{
	font-size: clamp(1rem, 1.2vw, 1.3rem);
}
.footer_box > div p{
	font-size: clamp(1.6rem,2.125vw,1.8rem);
}
.footer_tel img {
    max-width: 277px;
    width: 85%;
}
.footer_logo{
	max-width: 266px;
    width: 70%;
}
@media screen and (max-width: 768px){
	.footer_box > nav {
		width: 55%;
	}
}
@media screen and (max-width: 599px){
	.footer_box{
		flex-direction: column;
	}
	.footer_box > div{
		padding: 10% 3%;
	}
	.footer_box > div,.footer_box > nav{
		width: 100%;
	}
	.footer_deco {
		bottom: 0%;
		width: 45%;
	}
}
/*----------------------------------------
	header
----------------------------------------*/

.btn_menu_works{
	position: fixed;
	width: 46px;
	height: 41px;
	right: 10px;
	top: 10px;
	cursor: pointer;
	transition: all 0.5s;
	z-index: 51;
	background: #000;
	display: none;
}
.btn_menu_works span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: all 0.4s;
}
.btn_menu_works span{
	width: 70%;
	left: 15%;
}
.btn_menu_works span:nth-child(1){
	top: 9px;
}
.btn_menu_works span:nth-child(2){
	top: 20px;
}
.btn_menu_works span:nth-child(3){
	top: 31px;
}
.open .btn_menu_works{
	background: transparent;
}
.open .btn_menu_works span:nth-child(1){
	transform: rotate(45deg);
	top: 20px;
}
.open .btn_menu_works span:nth-child(2){
	opacity: 0;
}
.open .btn_menu_works span:nth-child(3){
	transform: rotate(-45deg);
	top: 20px;
}
.drawer{
	position: fixed;
	background: rgba(0, 0, 0, 0.8);
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	color: #d0c077;
	display: flex;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);
	transition: 0.5s ease-in-out;
	z-index: 50;
	font-family: 'Noto Sans JP', sans-serif;
}
.drawer ul{
	text-align: center;
	padding-top: 100px;
}
.drawer ul li{
	position: relative;
	transform: translateX(-150px);
	transition: transform 0.5s ease;
	border-bottom: 1px solid #fff;
}
.drawer ul li:nth-child(2){ transition-delay: 0.15s; }
.drawer ul li:nth-child(3){ transition-delay: 0.25s; }
.drawer ul li:nth-child(4){ transition-delay: 0.35s; }
.drawer ul li:nth-child(5){ transition-delay: 0.45s; }
.drawer ul li:nth-child(6){ transition-delay: 0.55s; }
.drawer ul li:nth-child(7){ transition-delay: 0.65s; }
.drawer ul li:nth-child(8){ transition-delay: 0.4s; }
.drawer ul li:nth-child(9){ transition-delay: 0.45s; }
.drawer ul li:nth-child(10){ transition-delay: 0.5s; }
.drawer ul li:nth-child(11){ transition-delay: 0.55s; }
.drawer ul li:nth-child(12){ transition-delay: 0.6s; }
.drawer ul li a{
	display: inline-block;
	font-size: 2rem;
	color: #fff;
	text-decoration: none;
	padding: 25px;
}
.drawer ul li a:hover{
	animation: drawer 1.4s;
	color: #e1f2fa;
}
@keyframes drawer{
	0%{
		filter: none;
	}
	30%{
		filter: blur(0.8px);
	}
	100%{
		filter: none;
	}
}
.open .drawer{
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}
.open .drawer ul li{
	transform: translateX(0);
}
@media screen and (max-width: 599px){
	.drawer ul li a{
		font-size: 1.5rem;
	}
}


/*----------------------------------------
    datepicker
----------------------------------------*/

#ui-datepicker-div{
    max-width: 100%;
    width: 350px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active{
    padding: 15px;
}
.ui-datepicker .ui-datepicker-header{
    padding: 8px 0;
}


/*----------------------------------------
	page_top
----------------------------------------*/
.page_top {
    max-width: 136px;
    width: 20%;
    position: fixed;
    right: 2%;
    bottom: 60px;
    z-index: 2;
}
.page_top a{
	display: block;
}


/*----------------------------------------
	content
----------------------------------------*/

.rela{
	position: relative;
}
.z_1{
	z-index: 1;
}
.z_2{
	z-index: 2;
}
.nowrap{
	text-wrap: nowrap;
}
/* レイアウト */
.flex{
	display: flex;
	column-gap: 3%;
	row-gap: 30px;
}
.flex > div{
	width: 50%;
}

@media screen and (max-width:599px){
	.flex{
		flex-direction: column;
	}
	.flex > div{
		width:100%;
	}
}
/* ナビ */
.nav_box li {
    font-size: clamp(1.1rem, 1.575vw, 2.0rem);
    margin-bottom: 1.5rem;
}
.nav_box li:not(:last-child) {
    margin-bottom: clamp(0.1rem, -0.975rem + 2vw, 1.8rem);
}
.nav_box li:last-child {
    padding-top: clamp(0.313rem, -0.438rem + 2vw, 1.25rem);
}
.nav_box span{
	display: block;
    color: #5dc2af;
    font-size: clamp(0.8rem, 1.2vw, 1.3rem);
	line-height: 1.5;
	margin-bottom: 0.3rem;
}
.nav_box a{
	text-decoration: none;
}
.icon_instagram{
	max-width: 39px;
	width: 30%;
}
/* デコ */
.deco{
	position: absolute;
}
/*--- MV------------------------------------------------------------------------- */
.mv_h .nav_box {
    position: absolute;
    top: 34%;
    left: 4%;
}
@media screen and (max-width:768px){
	.mv_h .nav_box {
		top: 32%;
		left: 3%;
	}
}
@media screen and (max-width:599px){
	.mv_h .nav_box {
		display: none;
	}
}
/*--- CONCEPT------------------------------------------------------------------------- */
.concept_deco01{
	top: 16%;
    left: 7%;
    width: 11.1%;
}
.concept_deco02{
	top: 63%;
    left: -2%;
    width: 17.1%;
}
.concept_deco03{
    top: 25%;
    right: -5%;
    width: 15.9%;
}
.concept_deco04{
    top: 64%;
    right: 6%;
    width: 7.9%;
}
@media screen and (max-width:1270px){
	.concept_deco02,.concept_deco04 {
		top: 100%;
	}
}
/*--- PROGRAM------------------------------------------------------------------------- */
#program {
	background:
	url("./images/top/program_top_wave.jpg") top center / 100% auto no-repeat,
    /* ベース背景 */
        linear-gradient(
		to bottom,
		transparent 0%,
		transparent 1%,
		#f1f1f1 1%,
		#f1f1f1 100%
    );
}

.program_grid{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 3%;
}
.program_grid h3{
	font-size: clamp(2.4rem,3vw,3.6rem);
    text-align: center;
    letter-spacing: 1px;
}
.program_grid p{
	font-size: clamp(1.4rem, 1.875vw, 1.6rem);
    line-height: 1.8;
    letter-spacing: 0.5px;
    width: 85%;
    margin-inline: auto;
}
.program_deco01{
    top: 2%;
    left: 1%;
    width: 19.55%;
}
.program_deco02 {
    top: -16%;
    right: 6%;
    width: 17.9%;
}
.program_deco03 {
	bottom: -30%;
    left: 15%;
    width: 12.9%;
}
.program_bk_deco01 {
    top: 67%;
    left: -17%;
    width: 16.9%;
}
.program_bk_deco02 {
    top: 17%;
    right: -18%;
    width: 20%;
}
@media screen and (max-width:1270px){
	.program_bk_deco01 {
		left: -10%;
	}
	.program_bk_deco02 {
		right: -11%;
	}
	
}
@media screen and (max-width:599px){
	.program_deco01 {
		left: -4%;
	}
	.program_grid{
		grid-template-columns: repeat(1, 1fr);
	}
	/* .program_grid h3{
        margin-top: 15px;
	    margin-bottom: 8px;
	} */
}
/*--- PRICE------------------------------------------------------------------------- */
#price {
	background:
	/* 上部のwave */
	url("./images/top/price_top_wave.jpg") top center / 100% auto no-repeat,
    /* 下部のwave */
    url("./images/top/price_bottom_wave.jpg") bottom center / 100% auto no-repeat,
    /* ベース背景 */
        linear-gradient(
		to bottom,
		transparent 0%,
		transparent 1%,
		#5286c7 1%,
		#5286c7 99%,
		transparent 99%,
		transparent 100%
    );
}

.price_grid{
	display: grid;
    column-gap: 3%;
}
.price_grid.no1{
    display: none;
}
.price_grid.no2{
    grid-template-columns: repeat(3, 1fr);
	row-gap: 30px;
}
.price_grid.no2 li:nth-child(1){
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.price_grid.no3{
    grid-template-columns: repeat(4, 1fr);
	row-gap: 15px;

}
.price_deco01{
	top: 3%;
    right: 4%;
    width: 17.3%;
}
.price_deco02 {
    top: 80%;
    left: -8.5%;
    width: 24.6%;
}
.price_bk_deco01 {
    top: 11%;
    left: -5%;
    width: 16.6%;
}
.price_bk_deco02{
    top: 14%;
    right: -19%;
    width: 20.8%;
}
.price_bk_deco03{
	top: 47%;
    left: -19%;
    width: 17.65%;
}
.price_bk_deco04 {
    bottom: 14%;
    right: -20%;
    width: 33.31%;
}
@media screen and (max-width:1270px){
	.price_deco02 {
		top: 3%;
		left: 1.5%;
	}
	.price_bk_deco01{
		display: none;
	}
	.price_bk_deco02 {
		right: -8%;
	}

}
@media screen and (max-width:599px){
	.price_grid{
		grid-template-columns: repeat(2, 1fr)!important;
	}
	.price_grid.no1{
		display: grid;
		margin-bottom: 15px;
	}
	.price_bk_deco04{
		display: none;
	}
}

/*--- EVENT------------------------------------------------------------------------- */
.slider01 .slick-slide,
.slider02 .slick-slide {
	padding: 0 1rem; 
	box-sizing: border-box;
}
.event_deco01{
	top: 0%;
    left: -5%;
    width: 35.1%;
}
.event_deco02{
	top: 0%;
    right: -6%;
    width: 35.1%;
}
@media screen and (max-width:768px){
	.slider01 .slick-slide,
	.slider02 .slick-slide {
		padding: 0 0.5rem;
	}
}

/*--- FAQ------------------------------------------------------------------------- */
.faq_flex {
    display: flex;
    justify-content: space-between;
    row-gap: 30px;
}
.faq_flex > div:nth-child(1){
	width: 25%;
}
.faq_flex > div:nth-child(2){
	width: 65%;
}
.faq_flex h2 {
    max-width: 251px;
    width: 100%;
}
/* 質問 */
.faq_box{
	border-top: dotted 4px #000;
}
.faq_box > div{
	border-bottom: dotted 4px #000;
    padding: 6% 4%;
}
.faq_box p{
	display: flex;
	font-weight: bold;
}
.faq_q{
	font-size: clamp(1.6rem,3vw,2.4rem);
	line-height: 1.2;
	letter-spacing: 0.5px;
	cursor: pointer;
	position: relative;
	padding-right: 3.5rem; 
}
.faq_q span{
	line-height: 0.8;
}
.faq_q::before,
.faq_q::after{
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 24px;        
	height: 4px;         
	background: #000;
	transition: transform 0.3s, opacity 0.3s;
}
.faq_q::before{
	transform: translateY(-50%);
}
.faq_q::after{
	transform: translateY(-50%) rotate(90deg);
}
.faq_q.is-open::after{
	transform: translateY(-50%) rotate(0deg);
}
.faq_a{
	font-size: clamp(1.4rem,1.875vw,1.6rem);
	line-height: 1.8;
	letter-spacing: 0.5px;
	display: none;
}
.faq_a span{
	line-height: 1.2;
}
.faq_box span{
	display: block;
    font-size: clamp(2rem, 4vw, 3.6rem);
    margin-right: 5%;
}
@media screen and (max-width:599px){
	.faq_flex {
		flex-direction: column;
		align-items: center;
	}
	.faq_flex > div:nth-child(1){
		width: 100%;
	}
	.faq_flex > div:nth-child(2){
		width: 100%;
	}
	.faq_flex h2 {
		max-width: 86px;
        width: 15%;
        margin: 50px auto;
    }
	.faq_deco{
		bottom: 0%;
		right: 15%;
		width: 18%;
	}
	.faq_q {
		padding-right: 2.5rem;
	}
	.faq_q::before, .faq_q::after {
		width: 15px;
		height: 3px;
	}
}

/*--- OUTLINE------------------------------------------------------------------------- */
#outline {
	position: relative;
	background: url("./images/common/footer_top_wave.png") bottom center / 100% auto no-repeat;
}

#outline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;   
	background: #000;
}

#outline table{
	width: 100%;
    box-sizing: border-box;
}
#outline table tr{
	border-bottom: 1px solid #999999;
	font-weight: bold;
}
#outline table th{
    font-size: clamp(1.6rem, 2.125vw, 1.8rem);
    color: #997ab6;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 5% 3% 5% 0%;
    vertical-align: baseline;
	line-height: 1.3;
}
#outline table td{
	font-size: clamp(1.4rem,1.875vw,1.6rem);
	color: #000;
	letter-spacing: 0.5px;
    padding: 5% 0%;
	line-height: 1.5;
	text-decoration: none;
}

/*----------------------------------------
	contact.php
----------------------------------------*/

.bg_contact{
	background:
    /* 下部1%だけ黒 */
    linear-gradient(
		to bottom,
		#faefe2,          
		#faefe2 9999px,   
		#000 100%,      
		#000 100%
    );
}

.contact_logo img{
	max-width: 266px;
	width: 60%;
}