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

/*全体的なこと*/
.noto100 {font-weight:100;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto700 {font-weight:700;}
.noto900 {font-weight:900;}
.ceightem{font-size:0.8em;}
.mar_left_10{margin-left:10px;}
.mar_nextto_10{margin:0 10px;}
.mar_nextto_30{margin:0 30px;}
.mar_right_20{margin-right:20px;}
.mar_btm_20{margin-bottom:20px;}
a:hover{color:#e57070;}
.no_back{background:none;}
dl dt{font-weight:400;}
.disnone{display:none}
.red_font{color:#e57070;}
@media screen and (max-width: 720px){
	input, textarea{font-size:16px;}
	.br:before{content: "\A" ;white-space: pre ;}
	.sp_nomar{margin:0;}
	.sp_disnone{display:none; transition: display 1s linear 0;}
}

/*ボディ*/
html { min-height: 100%; position: relative;}
body{font-family: 'Noto Sans Japanese', sans-serif; font-size: 12px; font-weight: 300; color:#6a6a6a; background:url(../images/back.jpg) center top no-repeat fixed; margin-bottom:260px; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto;}
@media screen and (max-width: 720px){
	body{margin-bottom:380px; background:#1064E0; /*font-size:16px;*/}
}

/*グローバルナビ*/
#top .top{background:url(../images/op10.png);}
#mypage .mypage{background:url(../images/op10.png);}
#reserve .reserve{background:url(../images/op10.png);}
#info .info{background:url(../images/op10.png);}
#access .access{background:url(../images/op10.png);}
#quest .quest{background:url(../images/op10.png);}
#inquiry .inquiry{background:url(../images/op10.png);}

/*ヘッダー*/
header{width:1220px; margin:20px auto 0; color:#fff;}
header a{color:#fff;}
header .log_info{display:flex; margin:0 0 30px;}
header .log_info dl{margin-left:auto;}
header .log_info dl dd{line-height:1.4em; margin:1em 0 0; text-align:center; background:url(../images/op10.png);}
header nav ul{margin:0; padding:0;}
header nav ul li{text-align:center;}
/*header nav ul li a{display:block; transition:margin-top 1s linear 0;}*/
header nav ul li a:hover{margin-top:-10px; color:#fff;     text-shadow: #000000 0 3px 6px;}
@media screen and (min-width: 721px){
	header nav ul{height:50px; display:flex; justify-content:space-around;}
	header nav ul li{flex:1; line-height:50px;}
	header nav ul li:not(:first-child){background:url(../images/border.png) no-repeat; }
	header nav ul li a{display:block; transition:margin-top 1s linear 0;}
}
@media screen and (max-width: 720px){
	header{width:100%;}
	header a{padding:5px;}
	header .log_info{width:90%; margin:0 auto 30px;}
	header .log_info h1{width:35%; max-width:176px;}
	header .log_info h1 img{width:100%;}
	.sp_dis{height:40px; margin:0 0 20px; background:#22a4fc;}
	.sp_dis:before {content: "メニュー を開く"; display:block; color:#fff; line-height:40px; text-align:center; transition: display 1s linear 0;}
	header nav ul{margin:0 auto 20px; overflow:hidden;}
	header nav ul li{width:50%; margin-bottom:1px; float:left; line-height:40px; background:#0183ec;}
	header nav ul li:nth-child(odd){margin:0 1px 1px -1px;}
	header nav ul li.close{background:#22a4fc;}
}

/*ラッパー*/
.wrapper{background:url(../../common/images/op90.png);}
@media screen and (min-width: 721px){
	.wrapper{width:970px; margin:0 auto; padding:120px 125px 80px;}
	.inner{width:930px; margin:0 auto;}
}
@media screen and (max-width: 720px){
	.wrapper{width:84.6%; margin:0 auto 30px; padding:20px 2.7%;}
}

/*フッター*/
footer{width:100%; padding:20px 0 0; background:url(../images/op90.png); text-align:center; height:240px; position:absolute; bottom:-30px;}
footer nav{margin:0 auto 40px;}
footer h2 {margin: 0 0 1em; padding: 0; color: #ffffff; font-size: 14px; line-height: 2em; background: #e57070; box-shadow: #777777 0 2px 2px 0px;}
footer nav ul:not(:first-child){margin:0 0 0 3em;}
footer nav a{color:#6a6a6a; line-height:2em;}
footer nav ul li:first-child a{font-weight:bold;}
footer .sitemap{display:flex; justify-content:center; flex-wrap:wrap;}
#page-top { position: fixed; bottom: 20px; right: 20px; font-size:30px; line-height:55px;}
#page-top a {background: #6ca6eb; text-decoration: none; color: #fff; width: 60px; height: 60px; text-align: center; display: block; border-radius: 30px; box-shadow: #777777 0 2px 2px 0px; transition: 0.2s ease-out;}
#page-top a:hover { text-decoration: none; background: #fff; color:#6ca6eb;}
@media screen and (max-width: 720px){
	footer{height:360px;}
	footer nav ul:not(:first-child){margin:0 0 2em 3em;}
	footer nav ul:last-child{margin-bottom:2em;}
}

/*PCオンリー*/
@media screen and (min-width: 721px){	
	footer nav{
		width:1220px;
	}
}

/*３項目リンク*/
.thr_col{display:flex; justify-content:space-between; flex-wrap:wrap;}
.in_col {margin:0 0 50px;}
.legend {margin:0 0 20px; padding:0 0 0 10px; display: block; background: #71dae2;line-height:2em; color: #fff; font-size: 20px; box-shadow: #777777 0 2px 2px 0px;}
.thr_col .in_col.form {display: block;}
.thr_col .in_col:nth-child(2) .legend {background: #6ca6eb;}
.thr_col .in_col:nth-child(3) .legend {background: #e57070;}
.legend span{margin:0 0 0 0.5em;}
.input {width:225px; position: relative; margin:0 auto 15px; }
.input span { position: absolute; display: block; color: #d4d4d4; left: 14px; top: 0; font-size: 20px; }
.input input {width: 180px; margin: 0 auto;padding: 10px 5px 10px 40px; display: block; border: 1px solid #EDEDED; border-radius: 4px; transition: 0.2s ease-out; color: #a1a1a1; }
.input input:focus { outline: 0; border-color: #FF7052; }
.submit {width: 45px; height: 45px; display: block; margin: 0 auto; background: #fff; border-radius: 100%; border: 1px solid #71dae2; color: #71dae2; font-size: 24px; cursor: pointer; box-shadow: #777777 0 2px 2px 0px; transition: 0.2s ease-out;}
a.submit {line-height: 43px; text-align:center;}
.thr_col .in_col:nth-child(2) .submit {border: 1px solid #6ca6eb; color: #6ca6eb; }
.thr_col .in_col:nth-child(3) .submit {border: 1px solid #e57070; color: #e57070; }
.submit:hover {background: #71dae2; color: #fff; outline: 0; }
.thr_col .in_col:nth-child(2) .submit:hover {background: #6ca6eb; color: #fff; }
.thr_col .in_col:nth-child(3) .submit:hover {background: #e57070; color: #fff; }
.submit:active, .button:active {box-shadow:none; }
@media screen and (min-width: 721px){
	.in_col {width: 250px;/*margin:0 0 400px;*/}
	.legend {width: 240px;}
}
@media screen and (max-width: 720px){
	.thr_col{flex-direction: column;}
	.legend {width: 95%; padding: 0 0 0 5%;}
}
.acs_msg{width: 100%; margin:0 0 20px; font-size: 1.4em; color: #e57070;}
.acs_msg .fa{font-size:24px;}

/*フォーム*/
h2{width:100%; margin:0 0 1em; padding:0; color:#ffffff; font-size:20px; line-height:40px; background:#6ca6eb; box-shadow: #777777 0 2px 2px 0px;}
h2 i{margin:0 10px 0;}
form div{margin:0 0 10px;}
.form div{display:flex;}
.form label{font-weight:400;}
.form input{margin:0 0 10px; height:30px; border:none;}
.form textarea{border:none;}
.form_exp{margin:0 0 1em;}
.radio_outer p{margin:0 20px 0 0;}
.radio_exp{margin:0 0 20px 170px;}
.button{width:300px; height:40px; padding:0; line-height:40px; font-size:20px; font-weight:400; text-align:center; border:#71dae2 1px solid; border-radius:4px; background: #ffffff; color: #6a6a6a; box-shadow: #777777 0 2px 2px 0px;}
.red_btn{border:#e57070 1px solid; cursor: pointer; transition: 0.2s ease-out;}
.red_btn:hover{background: #e57070; color: #fff; outline: 0;}
.gray_btn{background-color:#eeeeee; border:#aaaaaa 1px solid; cursor: pointer; transition: 0.2s ease-out;}
.gray_btn:hover{background: #aaaaaa; color: #fff; outline: 0;}
.yellow_btn{background-color:#FFFAE2; border:#FFB700 1px solid; color: #e57070; cursor: pointer; transition: 0.2s ease-out;}
.yellow_btn:hover{background: #FFB700; color: #fff; outline: 0;}
.center_but{display: block; margin:50px auto 0; }
.two_btn{display: flex; justify-content: space-between;}
.two_btn .submit{margin-left:0; margin-right:0;}
.form div input.radio, .form div input.radio:not(:first-child) {height: 1.8em; margin: 0 10px 0 0;}
@media screen and (min-width: 721px){
	.button{margin-top:50px;}
	.form{width:930px; margin:0 auto;}
	.form label:first-child{width:170px; display:block;}
	.form label.mar_left_10{width:160px;}
	/*.form div label:not(:first-child), .form div input:not(:first-of-type){margin:0 0 0 20px;}*/
	.form input.ryosyusyo{width:600px;}
	.form textarea{width:700px; height:130px;}
	.radio_outer{display:bloxk; margin:0;}
	.address{width:680px;}
	.mail{width:200px;}
}
@media screen and (max-width: 720px){
	.form div{flex-wrap:wrap; margin:0 0 20px;}
	.form div label.mar_left_10, .form div .mar_nextto_30{margin-left:0;}
	.form div.sp_nomar{margin:0;}
	.form input.ryosyusyo{width:60%;}
	.button{width:90%;}
	.form .two_btn{flex-direction: row;}
	.form label{margin-right:1em;}
	.form .splabeL_100{width: 100%; margin: 0px;}
	.two_btn .submit, .two_btn .button{width:100px; font-size:16px; line-height:20px;}
	.two_btn a.submit{line-height:40px;}
	div.radio_outer{margin:0;}
	.radio_exp{margin:0 0 20px 10px;}
	.sp_lines label{width:35%; margin-right:3%;}
	.sp_lines input{width:60%;}
	textarea{width:100%; height:6em;}
}

/*予約のパンくず*/
.pankuzu{margin:0 0 20px; display:flex; justify-content:space-between;}
.pankuzu li{position: relative; display:inline-block; background: #eeeeee; text-align:center; color: #fff; line-height: 40px;}
.pankuzu li.now{background: #ffffff; color: #6a6a6a;}
.pankuzu li:not(:last-child):after{content: ""; position: absolute; top: 0; right: -20px; border-left: 20px solid #eeeeee; border-top: 20px solid transparent; border-bottom: 20px solid transparent; transform-origin: right top;}
.pankuzu li.now:after{ border-left: 20px solid #ffffff; border-top: 20px solid transparent; border-bottom: 20px solid transparent;}
.pankuzu .last_pkz{border:none;}
@media screen and (min-width: 721px){
	.pankuzu li{width:170px; }
}
@media screen and (max-width: 720px){
	.pankuzu{margin:0 0 10px; flex-wrap:wrap;}
	.pankuzu li{width:44%; margin:0 5% 10px 0;}
}

/*テーブル共通事項*/
table{text-align:center;}
table th, table td{padding:0.6em; background:#ffffff;}

/*黄色タイトルのテーブル*/
.table{margin:0 auto 50px; text-align:center;}
.table th{background:#e8ba70; color:#ffffff;}
.table th.no_back{background:none;}
.cancel{border:2px solid #FF0004;}
@media screen and (max-width: 720px){
	.table{margin:0 auto 20px; text-align:center;}
}

/*確認テーブル*/
.confirm_tbl dl{display:flex; margin:0 0 30px;}
/*form div.confirm_tbl{margin:40px 0 30px;}*/
@media screen and (min-width: 721px){
	.confirm_tbl dl dt:not(:first-child){margin:0 40px 0 80px;}
	.confirm_tbl dl dt:first-child{width:170px;}
}
@media screen and (max-width: 720px){
	/*.confirm_tbl dl{overflow:hidden;}
	.confirm_tbl dl dt, .confirm_tbl dl dd{float:left; width:50%; height:3em;}*/
	form div.confirm_tbl{margin:20px 0;}
	.confirm_tbl dl{margin:0 0 15px; flex-wrap:wrap;}
	.confirm_tbl dl dt, .confirm_tbl dl dd{width:50%;}
}

/*完了画面*/
.comp p:first-child{margin:60px 0 60px 50px;}
.comp ul li{display:flex; margin:10px;}
.comp .submit{width: 20px;height: 20px; line-height: 20px; margin: 0 10px 0 0; font-size: 18px; color:#6ca6eb; border-color:#6ca6eb;}
.comp .submit:hover{background:#6ca6eb; color: #fff; outline: 0; }
@media screen and (min-width: 721px){
	.comp{width:870px; margin:0 auto;}
}
@media screen and (max-width: 720px){
	.comp p:first-child{margin:0 10px 60px;}
}

/*料金テーブル*/
.pay_table{display:flex; margin:0 0 70px; font-size:18px;}
.pay_table dt{background:#e8ba70; color:#fff;}
.pay_table dd{background:#fff; }
.pay_table dt.fee{background:#e57070;}
.pay_table dt, .pay_table dd{padding:0.6em;}
@media screen and (max-width: 720px){
	.pay_table{ margin:0 0 30px;justify-content:center;}
}