@charset "utf-8";

/* font */
.topInfo *, .plan *, .keyPoints *, .beforeAfter *, .points *, .staff *, .eventInfo *, .shortCuts *{
	font-family: 'Zen Old Mincho', serif;
}


/* decoration */
.topInfo .infoFrame *{
	color:#fff;
}
/*
h1, .eventDate *{
	text-shadow:0 0 10px #471717;
}
*/
.topInfo .tel *, h1 small, h1 span, .eventDate span {
	color:#fff;
	text-shadow:0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535,0 0 3px #573535;
}

/* top */
.mainImg{
	height:90vh;
	background:url("img/topimg.jpg") no-repeat scroll center top;
	background-size: cover;
	padding-top:70px;
	position: relative;
	top:0; left:0;
}

.page{
	background-color:transparent;
}

.topInfo{
	position: absolute;
	bottom:-25px;
	width:100%;
	display: flex;
	justify-content: center;
}

h1{
	font-size:50px;
}

h1 span.place{
	display: inline-block;
	text-shadow: none;
	font-size: 20px;
	background-color: #333;
	padding: 6px 15px 8px;
	margin-bottom: 15px;
}

h1 small{
	display: block;
	font-size:26px;
	margin-bottom:10px;
}

.reservation{
	margin-top:30px;
	text-align: center;
}

.topInfo .eventDate p{
	font-size:26px;
	font-weight: 700;
	margin-top:15px;
}

.topInfo .eventDate p span.reserv{
	display: inline-block;
	border:3px #fff double;
	font-size:22px;
	font-weight: 400;
	padding: 5px 15px 7px;
	margin-right:10px;
}

span.year, span.time, span.week{
	padding: 0 5px; font-size:20px;
	font-weight: 400;
}

.topInfo .tel{
	margin-bottom:20px;
	text-align: center;
}

.topInfo .tel p{
	font-size:18px;
	margin-bottom:15px;
}

.topInfo .tel a{
	font-size:33px;
	font-weight:700;
	text-decoration: none;
}

.reservation a.btn{
	display: inline-block;
	padding: 15px 80px;
	font-size:20px;
	color:#fff;
	font-weight: 700;
	text-decoration:none;
	background-color:#b8b8b8;
	border-radius: 30px;
	box-shadow: 0 3px 5px rgba(0,0,0,.3);
}

/* plan */
.plan h2 span.sticky, .keyPoints h2 span.sticky, .points h2 span.sticky{
	display:block;
	font-size:30px;
	margin-bottom:10px;
	letter-spacing: 0;
	font-family: 'Yesteryear', cursive !important;
}

.plan{
	padding:150px 0;
}

.plan h2{
	text-align: center;
	font-size: 36px;
	letter-spacing: 1px;
	margin-bottom: 25px;
}

.plan p{
	text-align: center;
	font-size: 16px;
	line-height: 1.6em;
}

.comparison{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom:50px;
}

.arrow{
	flex:0 0 10%;
}

.arrow span{
	display: block;
	width: 20px;
	height: 15px;
	border-left: 20px solid black;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	margin:0 auto;
}

.beforePlan, .afterPlan{
	flex: 0 0 45%;
	position:relative; top:0; left:0;
	padding-top:25px;
}

.beforePlan h3, .afterPlan h3{
	position: absolute; top:10px; left:15px;
	font-size:16px;
	letter-spacing: 1px;
	padding: 10px 15px;
	background-color:rgba(230,230,230,.5);
	box-shadow: 0 2px 3px rgba(0,0,0,.2);
}

.afterPlan h3{
	background-color:rgba(30,50,100,.7);
	color:#fff;
}


/* keypoint */
.keyPoints{
	background:url("img/counter.jpg") no-repeat scroll top center;
	background-size: cover;
	height: 600px;
	position: relative; top:0; left: 0;
}

.keyPoints .innerFrame{
	max-width: 750px;
	padding: 25px 35px 35px;
	background-color:rgba(255,255,255,.7);
	position: absolute; top:50px; left:50px;
}

.keyPoints h2{
	font-size:26px;
	border-bottom:1px #777 solid;
	padding-bottom:5px;
	margin-bottom:15px;
}

.keyPoints h2 span.sticky{
	font-size:24px;
	margin:0 0 5px 0;
}

.keyPoints h2+p{
	font-size: 16px;
	line-height: 1.6em;
}


/* before+after */
.beforeAfter{
	padding: 150px 0 100px;
}

.beforeAfter .photoList > li:not(:last-of-type){
	margin-bottom:50px;
}

.beforeAfter img{
	margin:0 auto;
}

.beforeAfter h3 span{
	display: block;
	font-family: 'Yesteryear', cursive;
	font-size:20px;
	padding-left:5px;
	font-weight: normal;
}

.beforeAfter h3{
	font-weight: 700;
	font-size: 20px;
	margin: 15px 0;
	line-height: 1.4em;
	border-bottom: 1px #15347f solid;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.beforeAfter h3+p{
	font-size: 15px;
	line-height: 1.6em;
	text-align: justify;
}

.photoList > li{
	display:grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(2,1fr)
}

.beforePhoto{grid-column:1/2; grid-row: 1/2; position: relative; top:0; left:0;}
.afterPhoto{grid-column:2/4; grid-row: 1/3;}
.commentary{grid-column:1/2; grid-row: 2/3; padding-right:10px;}

.afterPhoto, .beforePhoto{
	display:flex;
	justify-content: center;
}

.beforePhoto img{
	max-height: 400px;
}

.beforePhoto .innerFrame:before{
	content: "Before";
	position: absolute;
	display: inline-block;
	background:rgba(255,255,255,.7);
	box-shadow: 0 2px 3px rgba(0,0,0,.5);
	padding: 10px;
	font-size: 16px;
}

.afterPhoto .innerFrame:before{
	content: "After";
	position: absolute;
	display: inline-block;
	background:rgba(30,50,100,.7);
	box-shadow: 0 2px 3px rgba(0,0,0,.2);
	padding: 15px 25px;
	font-size: 24px;
	color:#fff;
}


/* point */
.points{
	background-color:#3e4453;
	color:#fff;
	padding: 125px 0 100px;
}

.points > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.points h2{
	text-align: center;
	flex: 0 0 100%;
}

.points h2 span{
	font-size:30px;
	display: inline-block;
}

.points h2:after{
	content: "";
	display: block;
	max-width:600px;
	border-top:1px #fff solid;
	margin:30px auto 40px;
}

.points li{
	margin-bottom:25px;
}

.points p{
	font-size:20px;
}

.points .goForm{
	margin-top:50px;
	text-align: center;
}

.points .goForm a{
	flex: 0 1 500px;
	text-decoration: none;
	border:1px #fff solid;
	border-radius: 5px;
	padding: 15px 0;
	margin:0 auto;
	color:#fff;
	font-size:22px;
	letter-spacing: 2px;
	background-color:rgba(255,255,255,.2);
	transition: .5s;
}

.points .goForm a:hover{
	background-color:rgba(255,255,255,.5)
}

.points .goForm a span{
	display: block;
	font-size:16px;
	letter-spacing: 1px;
	margin-bottom:10px;
}

.gallery.container-fluid, .gallery .row, .gallery li[class^="col"], .works .row, .works li[class^="col"]{
	padding: 0;
	margin:0;
}


/* staff */
.staff{
	padding:100px 0;
}

.staff .profile{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative; 
	top:0; left:0;
}

.profile .port{
	flex:0 0 30%; 
}

.profile .message{
	flex:0 0 70%;
	padding: 15px 25px;
}

.profile h2{
	font-size:22px;
	font-weight: 700;
	border-bottom:1px #333 solid;
	padding-bottom:10px;
}

.profile h3{
	font-size:18px;
}

.profile h3 span{
	font-size:14px;
}

.profile h2+p{
	font-size:16px;
	line-height: 1.6em;
	margin:20px auto;
}

.staff .works{
	margin-top:50px;
}

.works li[class^="col"] img{
	padding: 5px;
}

.staff .goForm{
	display: inline-block;
	padding:10px 20px;
	margin-top:25px;
	background-color:#efefef;
	border-radius: 3px;
	box-shadow: 2px 5px 7px rgba(0,0,0,.2);
	color:#000;
	font-size:16px;
	text-decoration: none;
}


.staff .consultation{
	position: absolute;
	top:-50px; left:-50px;
	width:150px;
	height: 150px;
	background-color:#cdb80b;
	border-radius: 150px;
	transform: rotate(-15deg);
}

.staff .consultation p span{
	display: block;
	font-size: 16px;
	margin-bottom:10px;
}

.staff .consultation p{
	font-size:24px;
	text-align: center;
	padding-top:50px
}

.staff .consultation a.stc{
	display: block;
	color:#000;
	text-decoration: none;
}


/* event */

.eventInfo{margin-bottom:80px;}
.eventInfo .outerFrame{
	background-color:#efefef;
	padding: 35px 35px 25px;
}

.eventInfo h2{
	font-size:14px;
	display: inline-block;
	background-color:#333;
	color:#fff;
	padding: 5px 10px;
	margin-bottom:10px;
}

.eventInfo h3{
	font-size:24px;
	margin-bottom:15px;
}

.eventInfo p{
	font-size:15px;
	margin-top:35px;
	line-height: 1.6em;
}

.eventInfo li{
	margin-bottom:10px;
	font-size:16px;
}
	
.eventInfo li h4{
	display: inline-block;
	font-weight: bold;
}


/* form */
.form-title h3{
	font-family: 'Zen Old Mincho', serif;
	font-weight:700;
	font-size: 22px;
	text-align: center;
	padding:100px 0 25px;
}


.shortCuts{display:none;}


@media screen and (max-width:1200px){
.photoList > li{
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows:auto;
}
	
.beforePhoto{grid-column:1/2; grid-row: 1/2;}
.commentary{grid-column:2/3; grid-row: 1/2;}	
.afterPhoto{grid-column:1/3; grid-row: 2/3;}
	
.staff .consultation{
	top:-30px; left:-45px;
	width:120px;
	height: 120px;
	background-color:#cdb80b;
	border-radius: 120px;
	transform: rotate(-15deg);
}	
	.staff .consultation p{
		padding-top:35px;
		font-size:20px;
	}
	
	.staff .consultation p span{
		font-size:14px;
	}
	
}

@media screen and (max-width:992px){
	
	.mainImg .infoFrame{padding:15px 0;background-color:rgba(0,0,0,.4);}
	
	h1 small, h1 span, .eventDate span{text-shadow:0 0 3px #000}
	
	h1{font-size:22px; text-align: center;}
	h1 span{ display: inline-block; margin: 7px 0}
	h1 span.place{ font-size: 12px;	font-weight: 700; padding: 5px 7px; display: inline; color:#000!important; background-color:rgba(255,255,255,.7); text-shadow: none;}
	h1 small{	font-size:14px;display: inline}
}


@media screen and (max-width:767px){
	
	.mainImg{	height:80vh; margin-bottom:70px;}

	.reservation{	margin-top:5px;}
	.reservation a.btn{ padding: 10px 50px; font-size:16px;	border-radius: 30px;}

	.topInfo .tel{margin-bottom:15px;}
	.topInfo .tel p{font-size:15px;	margin-bottom:10px;}
	.topInfo .tel a{font-size:26px;}

	.topInfo .eventDate p{ font-size:18px; margin-top:5px; text-align: center}
	.topInfo .eventDate p span.time{ font-size:14px; padding: 0 5px}
	.topInfo .eventDate p span.year{ display: none;}
	.topInfo .eventDate p span.reserv{font-size:12px;	padding: 3px 10px;margin:0 5px; text-align: center;}
	.topInfo .eventDate p span.week{font-size:14px;}
	
	.plan, .beforeAfter{position: static;}
	
	.plan{padding:100px 0 80px;}
	.plan h2{ font-size:26px;	margin-bottom:25px;}
	.plan p{ font-size: 15px;	text-align: left; padding:0 15px 10px;}

	
	.beforePlan h3, .afterPlan h3{ font-size: 14px; padding: 10px 15px; top:0;}
	.comparison{ flex-direction: row;}
	.beforePlan, .afterPlan, .arrow{ flex: 0 0 100%}

	.arrow span{transform: rotate(90deg);}
	
	.keyPoints .innerFrame{	padding: 25px;}
	.keyPoints h2{ font-size:22px; margin-bottom:10px;}
	.keyPoints h2+p{ font-size: 15px;}
	
	.photoList > li{ grid-gap:10px;}

	.beforeAfter{ padding: 100px 0;}
	.beforeAfter h3 span{font-size:20px;}
	.beforeAfter h3{ font-size:18px; margin:0 0 15px 0;}
	.beforeAfter h3+p{ font-size:15px;}
	
	.photoList > li{grid-template-columns:100%;grid-template-rows:auto;}
	
	.beforePhoto{grid-column:1/2; grid-row: 1/2;}
	.afterPhoto{grid-column:1/2; grid-row: 2/3;}
	.commentary{grid-column:1/2; grid-row: 3/4; padding: 5px 15px;}
	.beforePhoto .innerFrame:before, .afterPhoto .innerFrame:before{ font-size: 14px; padding: 10px;}


	.beforePhoto .innerFrame:after{
		content: "";
		display: block;
		width: 10px;
		height: 15px;
		border-top: 15px solid black;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		margin: 10px auto 0;
	}
	
	.points{padding: 75px 20px;}
	.points h2 span{ font-size:26px;}
	.points p{font-size:18px; line-height: 1.4em;}
	.points .goForm a span{font-size:14px; font-weight: 400}
	.points .goForm a{font-size:18px; font-weight: 700}
	
	.staff .message{ text-align: center;}
	.staff .message p{ text-align: left;}
	.staff .profile{ display: block;}
	.staff .consultation{	top:-35px; left:-10px;}

	.profile .message{ padding: 15px;}
	
	.profile h2{ font-size:22px; font-weight: 700; text-align:center;margin-top:25px;}
	.profile h3{ line-height: 1.2em; text-align: center;}
	.profile h3 > span:first-of-type{display: block;}
	.profile h2+p{ font-size:15px;margin:20px auto; }
	
	.eventInfo .outerFrame{	padding: 20px 15px}
	.eventInfo h2{ margin:15px auto 15px; font-size:14px;}
	.eventInfo h3{ font-size:18px;margin-bottom:15px; padding-bottom:10px; border-bottom:1px #999 solid;}

	.form-title h3{	padding:90px 0 25px;}
	
	.shortCuts{
		display:block;
		background-color:#7e8d9b;
		position: sticky; top:0;
		z-index:999;
	}
	
	.shortCuts ul{
		display: flex;
	}
	
	.shortCuts ul > li:not(:last-of-type){
		border-right:1px #fff solid;
	}
	
	.shortCuts li{
		flex: 0 0 25%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.shortCuts li a{
		display: block;
		padding: 15px 0;
		line-height: 1.1em;
		text-align: center;
		font-size:15px;
		font-weight: 700;
		text-decoration: none;
		color:#fff;
	}
	
	.shortCuts li a span{
		display: block;
		font-size:12px;
		font-weight: 400;
	}
	
}