@charset "utf-8";
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
.flex {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap:wrap;
}

.flex_wrap_left {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	-webkit-justify-content: flex-start;
	justify-content:flex-start
}

.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}

.sp{
display: none;
}

img{
max-width: 100%;
}

header{
max-width: 1200px;
margin: 0 auto;
padding: 10px 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
-webkit-justify-content: space-between;
justify-content: space-between;
flex-wrap:wrap;
}

header .logo{
max-width: 50%;
}

header p{
font-size: 16px;
line-height: 1.5;
width: 50%;
padding: 10px 0;
text-align: right
}

.mv{
background: #fffae3;
text-align: center;
padding:30px 0 5px;
}

.mv .period{
margin: 20px 0 0;
font-size:36px;
font-weight:bold;
}

.mv .comingsoon{
margin: 30px 0 20px;
}

.mv .menu{
max-width: 980px;
margin: 50px auto;
}

.mv .menu li{
width:33%;
margin-bottom: 20px;
}

.contents{
margin: 80px auto;
max-width: 1200px;
}

.contents h2{
text-align: left;
margin-bottom: 40px;
}

.contents h2 p{
font-size:20px;
line-height: 1.5;
margin-left: 20px;
}

.contents .lead{
font-size:20px;
line-height: 1.5;
margin-bottom: 20px;
}

.contents .flow{
background: #fffae3;
border-radius: 10px;
box-shadow: 5px 5px 10px #EEEEEE;
padding: 20px;
margin-bottom: 80px;
}

.contents .flow li{
width: 33%;
text-align: center;
border-left: #f08200 solid 4px;
padding: 10px;
}

.contents .flow li:first-child{
border-left: none;
}

.contents .guidemap{
background: #fffae3;
border-radius: 10px;
box-shadow: 5px 5px 10px #EEEEEE;
padding: 20px;
margin-bottom: 40px;
text-align: center
}

.contents .station_map{
text-align: center;
margin-bottom: 120px;
}

.contents .rule{
margin: 20px 0;
}

.contents .rule li{
width: 240px;
max-width: 16%;
margin-bottom: 30px;
}

.contents .rule li p{
font-size:14px;
line-height: 1.3;
text-align: center
}

.contents .caution {
background: #fffae3;
border-radius: 10px;
box-shadow: 5px 5px 10px #EEEEEE;
padding: 10px 20px;
margin-bottom: 40px;
}


.contents .caution dt{
font-size:24px;
font-weight:bold;
line-height: 1.3;
letter-spacing: 4px;
padding: 0 0 10px;
}

.contents .caution dd ul li{
font-size: 14px;
line-height: 1.3;
text-indent: -1em;
margin-left: 1em;
margin-bottom: 5px;
}

.contents .caution dd ul li:before{
content: "●";
}

.agree{
text-align: center;
margin: 80px 0 100px;
}

.reserve_btn{
width: 480px;
max-width: 100%;
margin: 30px auto 0;
}

.agree p{
margin:20px 0;
font-size: 16px;
text-align: center;
line-height: 1.5;
}

/* 送信ボタン */
.reserve_btn input {
  /*タグのリセットCSS */
  border: none;
  outline: none;
  appearance: none;
  padding: 20px;
  text-align: center;
  background: #CCCCCC;
  color: #FFFFFF;
  text-decoration: none;
  font-weight:bold;
  font-size:24px;
  letter-spacing: 2px;
  width: 100%;
}

.reserve_btn input.is-active{
background: #000000;
cursor: pointer;
}
.copyright{
background-color: #0065b2;
padding: 10px 0;
text-align: center;
color: #FFFFFF;
font-size: 12px;
margin: 0;
}

.comingsoon{
margin: 80px 0 100px;
text-align: center;
font-size:32px;
font-weight:bold;
color: crimson;
}

/********************************
レスポンシブ
********************************/

@media screen and (max-width: 1250px) {
header{
max-width: 94%;
}


.contents{
margin: 50px auto;
max-width: 94%;
}

.contents h2 p{
font-size:16px;
}

.contents .rule{
max-width: 780px;
margin: 0 auto;
}

.contents .rule li{
max-width: 32%;
}

.contents .rule li p{
font-size:16px;
}

}

@media screen and (max-width: 980px) {
header{
max-width: 98%;
}

header .logo{
max-width:50%;
}

header p{
font-size: 14px;
width: 50%;
text-align: right
}

.mv{
padding:0 0 5px;
}

.mv .menu{
max-width: 94%;
margin: 30px auto;
}

.contents .lead{
font-size:16px;
}

.reserve_btn{
margin: 20px auto;
}

}

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

.contents h2{
margin-bottom: 20px;
}


.contents h2 p{
width: 100%;
margin: 20px 0 0;
}

.comingsoon{
margin: 50px 0 70px;
font-size:24px;
}

}


@media screen and (max-width: 580px) {
.sp{
display: block
}

.pc{
display:none;
}

header .logo{
max-width: 98%;
}

header p{
display: none;
}

.mv{
padding: 10px 3%;
}

.mv .period{
font-size:22px;
}

.mv .menu li{
width:48%;
margin-bottom: 10px;
}

.contents h2 {
text-align: center
}

.contents h2 p{
text-align: left
}

.contents h2 img{
height: 30px;
margin: 0 auto;
}

.contents .flow li{
width: 100%;
border-left:none;
}

.contents .flow li:first-child{
border-left: none;
}

.contents .guidemap {
    background: #fffae3;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #EEEEEE;
    padding: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.contents .station_map {
    margin-bottom: 80px;
}

.contents .rule li{
width: 48%;
max-width: 240px;
margin-bottom: 20px;
}

.contents .rule li p{
font-size:14px;
}

.contents .caution {
background: #fffae3;
border-radius: 10px;
box-shadow: 5px 5px 10px #EEEEEE;
padding: 10px 20px;
margin-bottom: 40px;
}


.contents .caution dt{
font-size:20px;
}

.agree{
margin: 40px 0 50px;
}

.reserve_btn{
max-width: 320px;
margin-bottom: 0;
}

.comingsoon{
line-height: 1.5;
font-size: 20px;
}
}