@charset "UTF-8";
/* CSS Document */

.smp{display: none;}

h1{
	font-size: 4.0rem;
	font-weight: 400;
	text-align: center;
	color: #826B55;
	margin-top: 104px;
}	

h2{
	font-size: 2.6rem;
	font-weight: 400;
	color: #826B55;
	position: relative;
	display: inline-block;
	padding-right: 32px;
	background-color: #fff;
	z-index: 1;
}

h3{
	font-size: 2.6rem;
	font-weight: 400;
	color: #826B55;
	position: relative;
	padding-right: 32px;
	display: block;
	text-align: center;
	margin-bottom: 32px;
}

h4{
	font-size: 2.2rem;
	font-weight: 400;
	color: #826B55;
	position: relative;
	margin-bottom: 20px;
}


p{
	font-size: 1.8rem;
	font-weight: 400;
}

/**************************************************
 mainvisual
**************************************************/
.mainvisual{margin-top: 64px;position: relative;}

@keyframes fade-in {
  0% {
    opacity: 0;
	visibility: hidden;
  }
  100% {
    opacity: 1;
	visibility: visible;
	display: block;
  }
}

.main_img{
	opacity: 0;
	/*visibility: hidden;
	transition: 1.3s cubic-bezier(0.660, 0.000, 0.070, 1.000);*/
	animation :1.3s fade-in 1s forwards;
}

/*.mainvisual > img.show{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}*/

@keyframes up {
  0% {
    opacity: 0;
	visibility: hidden;
	transform: translateY(25px);
	  
  }
  100% {
    opacity: 1;
	visibility: visible;
	display: block;
	transform: translateX(0);
  }
}

.main_img{
	width: 80%;
	background:url("../img/guidance/main.jpg")no-repeat center center;
	background-size: cover;
	height: 38vw;
	min-height: 480px;
}

.fea .main_img{background:url("../img/feature/main.jpg")no-repeat center center;background-size: cover;}

.main_img img{display: none;}


.main_tit{
	position: absolute;
	right: 0;
	bottom: 80px;
	opacity: 0;
/*	visibility: hidden;
	transform: translateY(25px);
	transition: 1.3s cubic-bezier(0.660, 0.000, 0.070, 1.000);
	transition-delay: 0.4s;*/
	animation :1.3s up cubic-bezier(0.660, 0.000, 0.070, 1.000) 1.4s forwards;
}

/*.main_tit.show{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}*/

.main_tit h2{
	background-color: initial;
	position: relative;
	top: -16px;
	right: 56px;
}

.fea .main_tit h2{top: 46px;right: 45px;}

.vo .main_tit h2{top: -14px;right: 45px;}

.main_tit h2 img{width: 85%;max-width: 85%;}

.vo .main_tit h2 img{width: 85%;max-width: 85%;}

.gu .main_tit h2 img{width: 85%;max-width: 85%;}

.main_tit p span{
	padding: 56px 64px 56px 32px;
	background-color: #3A2C24;
	color: #fff;
	font-size: 2.3rem;
}

/**************************************************
 contentHanger
**************************************************/
.sec{background-color: #F2F0EC;}

.contentInner{
	max-width: 1000px;
	margin: 0 auto;
	padding: 70px 0;
}

.cont_title{position: relative;margin-bottom: 50px;}

.cont_title:after{
	content: '';
	width: 100%;
	height: 1px;
	background-color: #3A2C24;
	color: #3A2C24;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}
	

/**************************************************
 about
**************************************************/
.about{padding: 100px 0 70px;}
.about p{letter-spacing: 1.8px;}


/**************************************************
 effect
**************************************************/
.ef_list{margin-top: 64px;}

.ef_list p{
	font-size: 1.6rem;
	padding: 16px 20px;
	background-color: #fff;
}

.effect .ef_list:last-of-type p{margin-bottom: 32px;}


/**************************************************
 case
**************************************************/
.movie_hanger li,
.sp_hanger li{
	width: 32%;
	margin: 20px 0;
	list-style: none;
}
.movie_hanger ul::after,
.sp_hanger ul::after{
	content: "";
	display: block;
	width: 32%;
}

.movie_hanger{ margin: 30px 0;}
.movie_hanger li p{
	padding: 0;
	font-size: 1.4rem;
	text-align: center;
}

.sp_hanger{ margin: 30px 0;}

.sp_hanger li a{
	display: block;
	height: 200px;
	padding: 30px;
	background-color: #F2F0EC;
	text-align: center;
}
.sp_hanger li img{
	display: block;
	width: 30%;
	margin: 0 auto 10px;
}

ul.pdf_list{ padding: 0;}

ul.pdf_list li{ margin-bottom: 8px;}

ul.pdf_list li a{
	font-size: 1.6rem;
	color: #826B55;
	padding: 24px;
	display: block;
	background-color: #F2F0EC;
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

ul.pdf_list li:nth-child(even) a{background-color: #F6F2E8;}

ul.pdf_list li a span{
	color: #000;
	background-color: #fff;
	border-radius: 15px;
	font-size: 1.4rem;
	padding: 3px 12px;
	margin-left: 8px;
}

ul.pdf_list li a:before{
	content: '';
	background: url("../img/icon_pdf.svg")no-repeat center center;
	background-size: 100%;
	width: 24px;
	height: 32px;
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}

ul.pdf_list li a:hover{opacity: 0.5;}


/**************************************************
 flow
**************************************************/
.flow h3{padding: 0;}

.flow p.center{text-align: center;}

.flow_list{
	max-width: 850px;
	margin:96px auto 0;
	position: relative;
}

.flow_list:after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
	bottom: -64px;
    border: 12px solid transparent;
    border-top: 12px solid #3A2C24;   /* 好みで色を変えてください */  
}

.contentInner .flow_list:nth-of-type(2){margin-top: 64px;}

.flow .flow_list:last-of-type:after{content: none;}

.flow_cont{
	align-items: center;
	margin-top: 16px;
	background-color: #F2F0EC;
/*	border: 4px solid #F2F0EC;*/
	padding: 16px 24px;
}

.flow_txt{width: 50%;}

.flow_cont h5{
	font-size: 2rem;
	font-weight: 600;
	color: #826B55;
	padding: 8px 0 16px;
}

.flow_cont ul{
	width: 40%;
	padding: 0;
}

.flow_cont ul li{width: 100%;margin: 0 0 0 auto;}

.flow_cont ul.col2 li{width: 47%;}

.flow_cont ul li.he2{width: 50%;}

.flow_cont ul li img{display: block;}


/**************************************************
 price
**************************************************/
.price h3{margin-top: 56px;margin-bottom: 40px;}

.price h3:last-of-type{margin-top: 64px;}

.price ul{font-size: 1.8rem;}

.price p small{font-size: 1.6rem;}

.pri_img{
	margin: 24px auto 24px;
	text-align: center;
}
.pri_img img{ max-width: 100%;}


/**************************************************
 profile
**************************************************/
.profile h3:nth-of-type(n+2){margin-top: 80px;}

.profile h4{margin-top: 32px;}

.pro_txt{width: 60%;}

.profileInner p span a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 160px;
	background-color: #3A2C24;
	color: #fff;
	border:1px solid #3A2C24;
}

.profileInner p span a svg{
	margin-right: 8px;
	width: 10%;
}

.profileInner p span a:hover{background-color: #fff;color: #3A2C24;}

.profileInner p span a.re{background-color: #fff;color: #3A2C24;}

.profileInner p span a.re:hover{background-color: #3A2C24;color: #fff;}

.profileInner p span a.re svg #Icon_awesome-instagram,
.profileInner p span a.re svg #Icon_awesome-instagram2,
.profileInner p span a.re svg #Icon_awesome-instagram3,
.profileInner p span a.re svg #Icon_awesome-instagram4{transition: .2s;fill:#3A2C24;}

.profileInner p span a.re:hover svg #Icon_awesome-instagram,
.profileInner p span a.re:hover svg #Icon_awesome-instagram2,
.profileInner p span a.re:hover svg #Icon_awesome-instagram3,
.profileInner p span a.re:hover svg #Icon_awesome-instagram4{fill:#fff;}


/**************************************************
 hours
**************************************************/
.hours iframe{width: 100%;margin-bottom: 40px;}
.hours{padding: 40px 0;}
.hours .cont_title,.access .cont_title{margin-bottom: 32px;}


/**************************************************
 access
**************************************************/
.access iframe{width: 100%;margin-bottom: 40px;}
.access{padding: 40px 0 70px;}


/**************************************************
 voice
**************************************************/
.vo_img{width: 35%;text-align: right;/*margin: 0 0 48px auto;*/float:right;margin: 0 0 0 32px;}

.vo_st2{max-width:70%;}

.voice h2 span{
	display: block;
	margin-top: 12px;
	font-size: 2.1rem;
}

.voice h4{margin-top: 32px;}

.contentHanger .voice:nth-child(2) {padding: 0px 0 70px;}

/**************************************************
 reserve
**************************************************/
/*.reserve ul{
	max-width: 850px;
	margin: 0 auto;
	
}

.reserve ul li{
	width: calc(100% / 3 - 24px);
	margin: 15px 0;
	text-align: center;
}*/


.reserve ul {
	max-width: 850px;
	margin: 0 auto;
	display: flex;        /* Flexboxを有効にする */
	flex-wrap: wrap;      /* 3つ以上の要素がある場合に折り返す */
	justify-content: center; /* 子要素を中央に寄せる */
    /* ulにデフォルトで存在する可能性のあるpaddingをリセットする場合 */
    /* padding: 0; */
}

.reserve ul li {
	width: calc(100% / 3 - 24px); /* この幅は元のまま維持 */
	margin: 15px 12px;            /* ★ここを修正: 上下15px、左右12px */
	text-align: center;
}


.reserve ul li a{
	font-size: 1.8rem;
    background-color: #3A2C24;
	color: #fff;
	display: block;
	padding: 16px 0;
	border:  1px solid #3A2C24;
}

.reserve ul li a:hover{
	background-color: #fff;
	color: #3A2C24;
}




/**************************************************
 responsive
**************************************************/

@media screen and (max-width: 767px){
	
	.smp{display: block;}
	
	h1{font-size: 2.5rem;margin-top: 56px;}
	
	h2{
		font-size: 2rem;
		font-weight: 400;
		color: #826B55;
		position: relative;
		display: inline-block;
		padding-right: 32px;
		background-color: #fff;
	}
	
	h3{font-size: 2rem;margin-bottom: 24px;}
	
	h4{
		font-size: 1.8rem;
		line-height: 1.5;
		margin-bottom: 16px;
	}
	
	p{font-size: 1.5rem;}
	
	/** mainvisual ********************/
	
	.mainvisual{margin-top: 32px;}

	.main_tit{
		position: absolute;
		right: 0;
		bottom: -73px;
		overflow: hidden;
	}

	.main_tit h2{
		top: 16px;
		right: -42px;
		padding: 0;	
	}
	
	.main_img{
		width: 100%;
		height: 187px;
		min-height: auto;
	}
	
	.fea .main_tit h2{right: -42px;}

	.vo .main_tit h2{top: 19px;right: -42px;}
	
	.main_tit h2 img{width: 50%;max-width: 50%;}
	
	.vo .main_tit h2 img{width: 42%;max-width: 50%;}

	.gu .main_tit h2 img{width: 50%;max-width: 50%;}

	.main_tit p span{
		padding: 24px 8px 15px 15px;
		font-size: 1.7rem;
		display:block;
		width: 90%;
		margin: 0 0 0 auto;
		line-height: 1.5;
	}
	
	/** contentHanger ********************/
	.contentInner{
		max-width: 1000px;
		margin: 0 auto;
		padding: 48px 15px;
	}

	.cont_title{position: relative;margin-bottom: 32px;}

	.cont_title:after{
		content: '';
		width: 100%;
		height: 1px;
		background-color: #3A2C24;
		color: #3A2C24;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		z-index: -1;
	}
	
	/** 共通 ********************/	
	.about .cont_title,
	.flow .cont_title,
	.voice .cont_title,
	.profile .cont_title{margin-top: 72px;}
	
	/** effect ********************/
	.ef_list{margin-top: 40px;}
	
	.ef_list p{
		font-size: 1.4rem;
		padding: 12px;
		margin-top: 8px;
		line-height: 1.7;
	}

	.effect .ef_list:last-of-type p{margin-bottom: 32px;}
	
	/** case ********************/
	.movie_hanger,
	.sp_hanger{ margin: 30px 0;}
	.movie_hanger li,
	.sp_hanger li{ width: 48%; margin: 15px 0;}
	.sp_hanger li a{ height: auto; padding: 20px; line-height: 1.4;}

	ul.pdf_list li{margin-bottom: 8px;}

	ul.pdf_list li a{
		font-size: 1.4rem;
		padding: 12px 56px 12px 12px;
	}

	ul.pdf_list li a span{
		font-size: 1.2rem;
		padding: 3px 12px;
		display: inline-block
	}

	ul.pdf_list li a:before{
		background-size: 70%;
		right: 12px;
	}
	
	/** flow ********************/
	
	.flow p span{display: inline-block;line-height: 1.7;font-size: 1.4rem;}
	
	.flow_list{
		max-width: 850px;
		margin:72px auto 0;
		position: relative;
	}
	
	.contentInner .flow_list:nth-of-type(2){margin-top: 32px;}

	.flow_list:after{
		content: "";
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		bottom: -56px;
		border: 10px solid transparent;
		border-top: 10px solid #3A2C24;   /* 好みで色を変えてください */  
	}
	
	.flow .flow_list:last-of-type:after{content: none;}

	.flow_cont{
		flex-direction: column-reverse;
		margin-top: 16px;
		padding: 16px 24px;
	}
	
	.flow_txt{width: 100%;}
	
	.flow_cont h5{
		font-size: 1.8rem;
		line-height: 1.5;
		padding: 16px 0 5px;
	}
	

	.flow_cont p{width: 100%;}

	.flow_cont ul{
		width: 100%;
		padding: 0;
		margin-bottom: 8px;
	}

	.flow_cont ul li{width: 85%;margin: 0 auto;}
	
	.flow_cont ul.col2 li:last-child{width: 85%; margin-top: 16px;}

	.flow_cont ul.col2 li{width: 47%;}

	.flow_cont ul li.he2{width: 50%;}

	.flow_cont ul li img{display: block;}
	
	/** price ********************/	
	
	.price h3{margin-top: 32px;margin-bottom: 24px;}
	
	.price h3:last-of-type{margin-top: 32px;}
	
	.price ul{font-size: 1.6rem;}
	
	.pri_img{width: 100%;margin: 8px auto 24px;}

	
	
	/** profile ********************/
	
	.profile{padding: 48px 15px 32px;}
	
	.profile h3:nth-of-type(2){margin-top: 32px;}
	
	.profile h4{margin-top: 16px;margin-bottom: 8px;}
	
	.profileInner {flex-direction: column-reverse;}
	
	.profileInner p span a{width: 135px;height: 32px;}
	
	.pro_txt{width: 100%;}
	
	.pro_img{margin-bottom: 24px;}
	
	
	/** hours ********************/	
	.hours{padding: 24px 15px;}
	
	.hours .cont_title,.access .cont_title{margin-bottom: 24px;}
	
	/** access ********************/
	
	.access{padding: 16px 15px 48px;}
	
	.access iframe{height: 250px;margin-bottom: 32px;}
	
	.access h4{margin-bottom: 8px;}
	
	/** voice ********************/	
	
	.vo_img{width: 100%;text-align: center;margin: 0 auto 16px;float: none;}
	
	.contentHanger .voice:nth-child(2),
	.contentHanger .voice:nth-child(3), 
	.contentHanger .voice:nth-child(4){padding: 0px 15px 48px;}
	
	.contentHanger .voice:nth-child(2) .cont_title,
	.contentHanger .voice:nth-child(3) .cont_title,
	.contentHanger .voice:nth-child(4) .cont_title
	{margin-top: 8px;}
	
	.voice h2 span{font-size: 1.7rem;margin-top: 8px;}
	
	/** voice ********************/	
	
	.reserve ul li{width: 80%; margin: 10px auto;}

	.reserve ul li a{font-size: 1.7rem;padding: 8px 0;}

	
}