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

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|M+PLUS+Rounded+1c:400,700&display=swap&subset=japanese');

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 812px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {font-family: 'Libre Baskerville', serif;}
.round {font-family: 'M PLUS Rounded 1c', sans-serif;}

.bgWH {background-color: #FFF;}
.bgDBL {background-color: #2F3B49;}
.bgBR {background-color: #BF9D63;}
.bgBE {background-color: #F5F6E9;}
.bgGR {background-color: #2AA464;}
.bgGRY {background-color: #EEEEEE;}
.txtWH {color: #FFF;}
.txtBR {color: #BF9D63;}
.txtDBL {color: #2F3B49;}
.txtGR {color: #2AA464;}
.bBR {border-color: #BF9D63;}
.bDBL {border-color: #2F3B49;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2; width: 100%; transition: .3s; transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #FFF;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratioBox1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratioBox2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratioBox3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratioBox4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioBoxInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

#header {background: url("image/bg.jpg") no-repeat center; background-size: cover; padding: 65px 0;}
#header .inner {background: rgba(255,255,255,.6); padding: 30px 15px;}
.logo {max-width: 472px; width: 70%; margin: 0 auto 30px;}
#header h1 {font-size: 30px; font-weight: 700; text-align: center; text-shadow: 3px 3px 3px rgba(0,0,0,.8);}
h2 {text-align: center; padding: 10px; background: #8EC555; font-size: 34px;}
@media screen and (max-width: 767px) {
	#header {padding: 15px 0;}
	#header .inner {padding: 10px;}
	.logo {margin: 0 auto 10px;}
	#header h1 {font-size: 20px;}
	h2 {font-size: 20px;}
}

footer {height: 40px; background: #8EC555;}

.container {width: 98.8%; max-width: 1236px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.containers {width: 94%; max-width: 884px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.mlr,.col2,.col2L,.col2R,.col3,.col4 {margin-left: 2.4%; margin-right: 2.4%;}
.col2,.col3,.col4,.col2L {float: left;}
.col2R {float: right;}
.col2,.col2R,.col2L {width: 45.2%;}
.col3 {width: 28.533%;}
.col4 {width: 20.2%;}
.btn {width: 100%;}
.btn a {color: #FFF;}
.fl {float: left;}
.fr {float: right;}
.img30L,.txt65L,.img25L,.txt70L {float: left;}
.txt65R,.img30R,.img25R,.txt70R {float: right;}
.img25L,.img25R {width: 23%;}
.img30L,.img30R {width: 30%;}
.txt65R,.txt65L {width: 65%;}
.txt70L,.txt70R {width: 70%;}
@media screen and (max-width: 812px) {
	.img30L,.img30R {width: 45%;}
	.txt65R,.txt65L {width: 50%;}
}
@media screen and (max-width: 500px) {
	.col4 {width: 45.2%; float: left;}
	.col2,.col2R,.col2L,.col3 {width: 95.2%; float: none;}
	.mb40sp {margin-bottom: 40px;}
	.img30L,.img30R,.txt65R,.txt65L,.txt70L,.img25L,.img25R {float: none;}
	.img30L,.img30R,.img25L,.img25R {width: 70%;}
	.txt65R,.txt65L,.txt70L {width: 100%;}
	.img30L,.img30R,.img25L,.img25R {margin-left: auto; margin-right: auto;}
}

.ttlEN,h3.subttl {padding: 0 0 45px; margin-bottom: 30px; background: url("image/cmn/bg_ttl.svg") no-repeat center bottom; background-size: 120px 20px;}
.ttlEN {font-size: 60px;}
.ttlEN span {font-size: 50%;}
h3.subEN {font-size: 30px; margin-bottom: 50px;}
h2.ttl {font-size: 18px; text-align: center;}
h3.subttl {font-size: 30px; text-align: center;}
h3.ttlLine {font-size: 30px; position: relative; display: inline-block; padding: 0 90px;}
h3.ttlLine:before, h3.ttlLine:after {content: ''; position: absolute; top: 50%; display: inline-block; width: 60px; height: 1px; background-color: #2F3B49;}
h3.ttlLine:before {left:0;}
h3.ttlLine:after {right: 0;}
@media screen and (max-width: 1024px) {
	.headEN {font-size: 30px;}
	.ttlEN {font-size: 40px;}
	h3.subEN,h3.ttlLine,h3.subttl {font-size: 24px;}
	h3.subttl {font-size: 18px;}
}
@media screen and (max-width: 500px) {
	.headEN {font-size: 24px;}
	.ttlEN {font-size: 30px;}
	h3.subEN,h3.ttlLine,h3.subttl {font-size: 20px;}
	h3.ttlLine {padding: 0 40px;}
	h3.ttlLine:before, h3.ttlLine:after {width: 30px;}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}
ul.dot li,ul.num li {line-height: 1.7;}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #F6F5EA;}
table tr:nth-child(even) {background-color: #EEEEEE;}
table th,table td {padding: 10px 20px; font-weight: normal; line-height: 1.7; text-align: left; vertical-align: top}
table.sdata th {width: 60px;}
table.menu {max-width: 480px;}
table.menu th {width: 112px; padding: 10px 0; text-align: center;}
table.menu th.bgBR {background-color: #410007; color: #FFF;}
table.menu td {background-color: #EEEEEE;}
table.price1 th,table.price1 td,table.price2 th,table.price2 td {text-align: center;}
table.price1 {width: 456px;}
table.price2 {width: 224px;}
table .w112 {width: 112px; padding: 10px 0;}
table .w152 {width: 152px; padding: 10px 0;}
@media screen and (max-width: 500px) {
	table th {border-bottom: 1px solid #FFF;}
  table th, table td {display: block; width: clac(100% - 40px);}
}

.ls4 {letter-spacing: -.4em;}
.inlb {display: inline-block; letter-spacing: normal;}
.lsn {letter-spacing: normal;}
.vmid {vertical-align: middle;}
.mr10 {margin-right: 10px;}
.mr30 {margin-right: 30px;}
.ml10 {margin-left: 10px;}
.notice {border: 1px solid #222222;}
.notice h3 {background: #222; padding: 5px 10px; display: inline-block;}
.notice .inner {padding: 20px 30px;}
@media screen and (max-width: 767px) {
	.notice .inner {padding: 10px 15px;}
}

.btn {letter-spacing: -.4em; text-align: center;}
.btn330 {max-width: 330px; width: 94.2%; margin-left: 2.4%; margin-right: 2.4%; display: inline-block; letter-spacing: normal;}

.filenum {border-bottom: 5px solid #222;}

.agreeCheck {border: 1px solid #222; padding: 20px 30px; border-radius: 10px;}
.agreeCheck li {margin-bottom: 10px; line-height: 1.5;}