@charset "utf-8";
body{padding-top:70px;}
img{ margin:0 auto;}
p{line-height: normal;}

.topimg{
	background: url("img/topimg.jpg") no-repeat center center;
	background-size: cover;
	height: 600px;
	position: relative;
	margin: 50px auto 250px auto;
	width: 80%;
}
.topimg-ill{
	position: absolute;
	top: -5%;
	right: 5%;
	transform: rotate(5deg);
}
.headline{
	position: absolute;
	left: 50%;
	top: 80%;
	transform: translateX(-50%);
	text-align: center;
	background-color: rgba(237,221,210,0.7);
	padding: 20px 30px;
}
.headline h1,.head-title,.head-data,.head-place{
	font-family: tbcgothic-std, sans-serif;
	font-weight: 800;
	font-style: normal;
}
.headline h1{
	font-size: 44px;
	margin:10px 0; 
}
.head-title{
	font-size: 26px;
}
.head-data{
	font-size: 34px;
}
.head-data span{
	font-size: 18px;
}
.head-place{
	font-size: 20px;
	margin-top: 10px;
}
.head-ill{position: relative;}
.head-ill img{
	position: absolute;
	top: 50%;
	right: 110%;
	transform: translateY(-50%);
}

.introduction{
	background: url("img/intro.jpg") no-repeat center center;
	background-size: cover;
	height: 550px;
	position: relative;
}
.intro-ill{
	position: absolute;
	bottom: 0;
	right: 5%;
}
.intro-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: rgba(255,255,255,0.7);
	display: inline-block;
	width: 50%;
	padding: 40px;
	border-radius: 15px;
	text-align: center;
}
.intro-text p{
	line-height: 1.8em;
}
.intro-text h2,.point1-frame1 h2,.point1-frame2 h2,.subtitle h2,.doma-frame h2,.point2 h2,.event-info h1{
	font-size:22px;
	margin-bottom: 15px;
	font-family: tbcgothic-std, sans-serif;
	font-weight: 800;
	font-style: normal;
}

.intro2{padding: 100px 0;text-align: center;}
.intro2 p{font-size: 16px; line-height: 1.7em;}

.subtitle{
	text-align: center;
	font-size: 26px;
	padding: 100px 15px 30px 15px;
}

.point1{
	position: relative;
	padding: 80px 0;
}
.point1-ill{
	position: absolute;
	bottom: 0;
	right: 10%;
}
.point1-frame1,.point1-frame2{
	display: flex;
	align-items: center;
	margin-bottom: 120px;
}
.point1-frame1{
	justify-content: flex-start;
}
.point1-frame2{
	justify-content: flex-end;
}
.point1-img{
	flex-basis: 55%;
}
.point1-text{
	flex-basis: 25%;
	padding: 20px;
}
.point1-text p{
	line-height: 1.8em;
}

.doma-frame{
	display: flex;
	justify-content: center;
	margin-bottom: 120px;
}
.doma-frame div{
	flex: 0 0 26%;
	padding: 20px;
}
.doma-frame h2,.point2 h2{
	font-size:18px;
	margin: 15px 0;
}

.point2{
	padding: 100px 0;
	background-color: #EDDDC8;
}
.point2-frame{
	display: flex;
	justify-content: center;
}
.point2-frame div{
	flex: 0 0 28%;
	padding: 20px; 
}

.point3{
	margin-bottom: 40px;
}
.point3-frame{
	display: flex;
}
.point3-frame div{
	width: 100%;
}
.point3-text{
	text-align: center;
	padding: 30px 15px 120px 15px;
}


.point4{
	background-color: #b4b5ae;
	padding: 80px 0;
}
.point4-frame{
	display: flex;
	width: 80%;
	margin: 0 auto;
}
.point4-frame div:nth-child(1),.point4-frame div:nth-child(3){
	flex-basis: 28%;
}
.point4-frame div:nth-child(2){
	flex-basis: 40%;
	text-align: center;
	align-self: center;
	padding: 0 50px;
	color: #fff;
}

.event-info{
	padding: 100px 0;
	text-align: center;
}
.event-info h1{
	font-size: 26px;
	margin-bottom: 60px;
}
.info-frame{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.info-frame div:nth-child(2){
	padding: 20px;
	text-align: left;
}
.info-frame li{
	line-height: normal;
	font-size: 16px;
}
.info-frame li:first-child,.info-frame li:nth-child(2){
	font-size: 19px;
	font-family: tbcgothic-std, sans-serif;
	font-weight: 800;
	font-style: normal;
}
.info-frame li:nth-child(2){
	margin-bottom: 10px;
}
.info-frame li small{
	font-size: 15px;
}
.booking-btn p{
	display: inline-block;
	background-color: #333;
	color: #fff;
	padding: 15px 30px;
	margin-top: 15px;
	font-size: 18px;
	font-family: tbcgothic-std, sans-serif;
	font-weight: 800;
	font-style: normal;
}
.booking-btn:hover{
	opacity: 0.5;
	transition: 0.5s;
}

.sns-area{
	background: url("img/sns_bg.jpg") no-repeat center center;
	background-size: cover;
}
.sns-frame{
	display: flex;
	justify-content: center;
}
.sns-frame h2{
	font-size: 20px;
	margin: 20px 0;
	font-weight: bold;
}
.sns-frame h2 small{
	color: #333;
}
.sns-blog,.sns-ig{
	flex-basis: 30%;
	text-align: center;
	background-color: rgba(255,255,255,0.7);
	padding: 80px 15px;
	color: #333;
	margin: 30px;
}
.sns-frame a:hover{
	text-decoration: none;
	opacity: 0.8;
	transition: 0.5s;
	color: #333;
}
.sns-ig{position: relative;}
.add-me{
	position: absolute;
	top: 15%;
	right: 20%;
	transform: rotate(15deg);
}

.ended{
	display: inline-block;
	padding: 10px  20px;
	border: 1px solid #333;
	margin-top: 10px;
}

.policy{ text-align:center; margin-top:40px;}
.policy a{ text-decoration:underline; color: #333;}
.policy .innerFrame{ padding: 30px; max-width:900px; margin:25px auto; background-color: #fff;}
.policy p{ line-height:1.8em; text-align: left; font-size:14px; color: #333;}
.policy ul{ margin:30px;}
.policy li{ list-style-type:disc; margin-bottom:10px; text-align: left;list-style-position: outside;line-height: 1.6em;font-size:13px;}

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

@media screen and (min-width:992px) and (max-width:1199px){
	.topimg{width: 100%;}
.headline{width: 60%;}
.intro-text{width: 70%;padding: 30px;}
.point1-ill{width: 20%;}
.doma-frame div{flex: 0 0 30%;}
.sns-blog,.sns-ig{flex-basis: 42%;}
}

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

@media screen and (min-width:768px) and (max-width:992px) {
.topimg{width: 100%;}
.headline{width:55%;}
.headline h1{font-size: 36px;margin:5px 0;}
.head-title{font-size: 21px;}
.introduction{height:350px;}
.intro-text{width: 70%;padding: 30px;}
.intro-ill{width: 15%;right: 10%;}
.point1-text{flex-basis: 40%;padding: 20px;}
.doma-frame div{flex: 0 0 32%;}
.sns-blog,.sns-ig{flex-basis: 42%;}
}

@media screen and (max-width:767px){
.topimg{width: 100%; height: 400px;margin: 25px 0 200px 0;}
.topimg-ill{top: -8%; right: 0;left: 50%; transform: rotate(0deg);transform: translateX(-50%);width: 90%;}
.headline{top: 70%;width:95%;}
.headline h1{font-size: 30px;margin:5px 0;}
.head-title{font-size: 18px;}
.head-data{font-size: 22px;}
.head-data span{font-size: 15px;}
.head-place{font-size: 16px;margin-top: 0px;}
.head-ill img{right: auto;left: -16%; top: 110%; width: 30%;}

.introduction{height: 500px;}
.intro-text{width: 90%;right: auto;left: 50%; transform: translate(-50%,-50%);padding: 30px 20px;}
.intro-ill{width: 25%;}
.point1{padding: 0;}
.point1-frame1,.point1-frame2,.sns-frame,.doma-frame,.point2-frame{flex-wrap: wrap;}
.point1-frame1,.point1-frame2{justify-content: center;margin-bottom: 80px;}
.point1-img{flex-basis: 100%;order: 1;}
.point1-text{flex-basis: 90%;order: 2;}
.doma-frame div,.point2-frame div{flex-basis: 90%;padding: 20px;}
	
.event-info{padding: 50px 0;}
.event-info h1{margin-bottom: 15px;}
.info-frame div:nth-child(1){flex-basis: 90%;}	
.sns-blog,.sns-ig{flex-basis: 100%;padding: 50px 15px;}
.add-me{top: 18px;right: auto;left: 50%; transform: none;transform: translateX(-50%);
}

}