@charset "utf-8";

body{ padding-top:70px; }
img{margin:0 auto;}

.introduction{ padding-bottom:70px;} 
.mainImg{ background:url(img/top.jpg) no-repeat scroll top center; height: 800px;}
.textFrame{	position: relative;top:250px;}
h1{
	font-size:42px;
	text-align: center;
	font-family: 'M PLUS 1p', sans-serif;
	margin-bottom:50px;
}
h1 small{
	display:block;
	max-width:500px;
	margin:15px auto 0;
	padding-top:15px;
	border-top:1px #000 solid;
	font-size:14px;
	letter-spacing: 1px;
	color:#000;
}
.introduction p{ line-height:2em; max-width:700px; margin: 0 auto 15px; background-color:rgba(255,255,255,.7); padding: 5px 15px;}
.introduction img{ margin:50px auto;}
.reservation{ margin-top:20px; }
.reservation a{
	display: block;
	max-width:500px;
	margin:0 auto;
	padding: 15px 0;
	border-radius: 2px;
	font-size:18px;
	font-family: 'M PLUS 1p', sans-serif;
	color:#fff;
	background-color:#000;
	text-align: center;
	text-decoration: none;
	transition: .5s;
}
.reservation a:hover{ background-color:#777}
.reservation a small{ display:block;font-size:11px; margin-top:7px;}

.eventData{ max-width:900px; margin:0 auto;}
.eventDetail{ border-left:5px #000 solid;}
.eventDetail li{ margin:0 0 10px 10px;}

.eventData h2{ font-size:26px; text-align: right; padding-right: 15px;}
.eventData h3{ display:inline-block; font-weight: bold;}
.eventData a{
	display:block;
	background-color:#000;
	color:#fff;
	border-radius: 2px;
	padding: 15px 0;
	text-align: center;
	font-weight: bold;
	font-size:16px;
	text-decoration:none;
	transition: .5s;
}
.eventData a small{
	display: block;
	font-weight: normal;
	font-size:12px;
	margin-bottom:10px;
}
.eventData a:hover{background-color:#777}

.ourSupport{background:url(img/support.jpg) no-repeat scroll top center; position:relative;height: 400px;}
.ourSupport .textFrame{
	padding: 25px;
	background-color:rgba(235,250,255,.7);
	max-width:800px;
	position:absolute; top:140px; right:120px;
}

.ourSupport h2 span{ font-size:24px; font-family: 'M PLUS 1p', sans-serif; display: inline-block;}
.ourSupport p{ font-size:14px; line-height: 1.8em; margin-top:20px;}
.ourSupport a{
	display:block;
	max-width: 300px;
	margin-top:15px;
	padding: 10px 0;
	border: 2px #000 solid;
	text-decoration: none;
	color:#000;
	font-size:13px;
	font-weight: bold;
	text-align: center;
	transition: .5s;
}
.ourSupport a:hover{ background-color:#000; color:#fff}


.interviews{ padding: 100px 0}
.interviews img{ margin:0 auto;}
.interviews h2{ font-size:60px; text-align: center;font-family: 'Dancing Script', cursive; margin-bottom:30px;}
.interviews h2+p{text-align: center;font-size:14px; margin-bottom:25px; line-height: 2em;}
.interviews .row{ max-width:1000px; margin:0 auto;}

.interviews .innerFrame{ border:1px #777 solid; padding: 20px;}
.interviews a{display:block; color:#777; text-decoration: none; transition: .5s;}
.interviews a:hover{background-color:#eee;}
.interviews h3{margin:25px auto 20px; text-align: center;}
.interviews h3 span{display: inline-block; font-size:16px; font-weight:bold;line-height: 1.4em;}
.interviews h3+p{font-size:13px; line-height: 1.6em;text-align: justify; margin-bottom:20px;}
.interviews p+span{
	display:block;
	background-color:#000;
	color:#fff;
	font-weight: bold;
	font-size:13px;
	border-radius: 2px;
	text-align: center;
	padding: 7px 0
}

.interviewList{margin:50px auto 0;}
.interviewList a{
	display:block;
	text-align: center;
	background-color:#000;
	color:#fff;
	font-size:16px;
	font-weight: bold;
	padding: 15px 0;
	margin:0 auto;
	max-width:500px;
	transition: .5s;
}
.interviewList a small{display: block; margin-top:10px;font-size:12px;}
.interviewList a:hover{ background-color:#777;}


.ourWorks{ background-color:#f0f8fd; padding: 100px 0}
.ourWorks h2{text-align: center;}
.ourWorks h2 span{ 
	font-size:30px;
	margin: 0 auto;
	font-family: 'M PLUS 1p', sans-serif;
	display: inline-block
}
.ourWorks h2 small{display: block; font-size:16px; color:#000; margin:10px auto 30px;}

.ourWorks .row, .ourWorks .col-md-3{ padding:0; margin:0; }
.ourWorks .row{max-width:1800px;margin:0 auto;}
.ourWorks .innerFrame{ padding: 15px 25px;}
.ourWorks a{ text-decoration:none; color:#000; display: block; transition:.5s;}
.ourWorks a:hover{ background-color:#c5dfe5;}
.ourWorks h3{ margin:7px auto; text-align: center; font-weight: bold; font-size:16px;}
.ourWorks h3+p{ font-size:13px; line-height: 1.6em; margin-bottom:15px;}
.ourWorks a span{
	display:block;
	width:80%;
	text-align: center;
	margin:0 auto 15px;
	font-size:12px;
	padding: 7px 0;
	background-color:#000;
	color:#fff;
}

.worksLink{ margin-top:50px;}
.worksLink a{
	display:block;
	text-align: center;
	background-color:#000;
	color:#fff;
	font-size:16px;
	font-weight: bold;
	padding: 15px 0;
	margin:0 auto;
	max-width:500px;}
.worksLink a small{display: block; margin-top:10px;font-size:12px;}

.cau{
	max-width:700px;
	margin:0 auto;
	border: 1px #000 solid;
	margin-top:50px;
	padding: 15px;
}
.cau h4{ text-align:center; font-weight: bold; font-size:18px; margin-bottom:10px;}
.cau p{margin: 0; font-size:13px; line-height: 1.8em;}
.cau p strong{ color:#f00;}

@media screen and (min-width:768px) and (max-width:991px){
	.eventData a{margin-top:25px;}
}

@media screen and (max-width:991px){
	.ourWorks .container-fluid{padding:0}
	.eventData h2{ text-align: center;font-size:22px; font-weight: bold;}
	.eventDetail{ margin:25px auto;}

	.ourSupport .textFrame{
		max-width: 650px;
		position:absolute; top:120px; right:50px;
	}
}

@media screen and (max-width:767px){
	.mainImg{ background-position: left -550px top; height: auto; margin-bottom:150px;}
	.textFrame{	position: relative;top:150px; padding: 0 15px;}
	
	.introduction .container{ margin-top:50px;}	
	.introduction p{ padding: 15px}	
	.introduction img{ margin:50px auto 25px;}

	.ourSupport{height: auto;}
	.ourSupport .textFrame{	position:relative; top:0; right:0;}
	.ourSupport .outerFrame{padding:300px 0 0 50px;}
	.ourSupport h2 span{ font-size:20px;}
	
	.interviews a{ max-width:400px; margin:0 auto 20px;}
	.interviews h2+p{text-align: left; padding: 0 20px;}
	
	.worksLink a{margin:0 15px;}
	.cau{padding:20px 0 0;}
	.cau h4{ font-size:16px; }
	.cau p{ margin:0}


}
