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

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900|Libre+Baskerville:400,700|Noto+Serif+JP:400,500&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;}
.mincho {font-family: 'Noto Serif JP', 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;}
.txtPI {color: #FD3A7E;}
.txtLBL {color: #38B8EF;}
.txtGR {color: #2AA464;}
.bBR {border-color: #BF9D63;}
.bDBL {border-color: #2F3B49;}

.animated {opacity: 0;}
.animate1s {animation-delay: .1s;}
.animate2s {animation-delay: .2s;}
.animate3s {animation-delay: .3s;}
.animate4s {animation-delay: .4s;}
.animated.slideInDown,.animated.slideInUp,.animated.zoomIn,.animated.fadeIn,.animated.slideInLeft {opacity: 1!important;}

.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/01-01.png") no-repeat center top; background-size: 2000px auto;}
#header #head {position: relative; height: 100vh; max-height: 1123px;}
#header h1 {font-size: 12px; font-weight: normal; padding: 5px 0;}
#header .logo {max-width: 615px; width: 80%;}
#header .logo {margin-top: 45px;}
#header #catch {margin-top: 50px;}
#header #catch li {width: 330px; margin-bottom: 30px;}
#header #catch li:last-child {margin-bottom: 0px;}
#header #catch li:nth-child(2),#header #catch li:nth-child(4) {margin-left: 58px;}
#header #catch li:nth-child(3) {margin-left: 89px;}
#header #copy {background: url("image/01-08.svg") no-repeat center bottom; background-size: 2000px auto; position: absolute; bottom: 0; font-size: 18px; width: 100%;}
#header #copy h2 {font-size: 26px;}
#header #copy .mlr {position: relative;}
#header #copy .inner {width: 59%; padding: 30px 0 50px;}
#header #copy .scroll {width: 27px; margin-right: 25px; position: absolute; right: 0; bottom: 0;}
#headCo {position: fixed; right: 0; top: 0; z-index: 5;}
#headCo li {display: inline-block; font-size: 18px; background: #FD3A7E; color: #FFF;}
#headCo li a {display: block; color: #FFF; padding: 10px 25px;}
#headCo li:last-child {padding: 10px 20px;}
@media screen and (max-width: 1366px) {
	#header #head {max-height: auto;}
	#header .logo {margin-top: 25px;}
	#header #catch {margin-top: 30px;}
	#header #catch li {width: 220px; margin-bottom: 10px;}
}
@media screen and (max-width: 1024px) {
	#header #head {height: auto;}
	#header #copy {position: relative; margin-top: 60px;}
	#header #copy .scroll {display: none;}
}
@media screen and (max-width: 812px) {
	#headCo {display: none;}
}
@media screen and (max-width: 600px) {
	#header h1{background: #81D3FF;}
	#header #copy {background: url("image/01-08.svg") no-repeat left bottom;}
	#header #copy .inner {width: 100%;}
}

footer {padding: 20px 0; color: #FFF; background: #FD3A7E;}
footer a {color: #FFF!important;}
footer a:hover {color: #F6F5EA;}
footer .logo {margin-right: auto; margin-left: auto;}
footer h2 {font-size: 12px; text-align: center; font-weight: normal;}
footer #address {text-align: center;}
footer ul#navi,footer ul#linkBtn {text-align: center; letter-spacing: -.4em; margin: 0 0 40px;}
footer #navi li,footer #linkBtn li {margin: 0 15px; letter-spacing: normal; display: inline-block;}
footer #linkBtn li {margin: 0 20px; white-space: nowrap;}
footer .tel {margin: 0 auto 20px;}
footer .info {text-align: center;}
.footCopy {text-align: center;}
.footCopy small {font-size: 14px; color: #FFF;}
#ftNavi {display: none;}
@media screen and (max-width: 812px) {
	footer #navi li,footer #linkBtn li {margin: 0 10px 10px;}
	#ftNavi {display: block; background: #FD3A7E; letter-spacing: -.4em; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #FFF; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {letter-spacing: normal; display: inline-block; width: 50%;}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-right: 1px solid #FFF;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 24px; margin: 0 auto 5px; display: block;}
}

.container {width: 98.8%; max-width: 1208px; 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: 1.65%; margin-right: 1.65%;}
.col2,.col3,.col4,.col2L {float: left;}
.col2R {float: right;}
.col2,.col2R,.col2L {width: 46.7%;}
.col3 {width: 30.033%;}
.col4 {width: 21.7%;}
.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.dot 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);}
}

#point {width: 55.65%; max-width: 630px;}
#point h2 {font-size: 30px; margin-left: 40px; font-weight: normal;}
#point h2 span {margin-left: 1em;}
#point ul {letter-spacing: -.4em;}
#point li {width: 30.333%; margin: 0 0 15px; display: inline-block;}
#point li:nth-child(2) {margin: 0 3% 15px;}
@media screen and (max-width: 1125px) {
	#point h2 span {margin-left: 0;}
}
@media screen and (max-width: 812px) {
	#point {width: 83%;}
}
@media screen and (max-width: 600px) {
	#point h2 {margin-left: 0;}
}

#top01 {background: url("image/02-01.svg") no-repeat center top; padding: 60px 0;}
#top01 .inner,#top04 .inner {margin: 0 50px; font-size: 18px;}
#top01 h2 {width: 700px; max-width: 90%;}
#top04 h2 {font-size: 30px; font-weight: normal;}
#top01 ul {list-style: url("image/02-02.svg"); padding: 0 0 0 25px; margin-top: -20px;}
#top01 li {margin-bottom: 10px;}
#top01 li:last-child {margin-bottom: 0;}
@media screen and (max-width: 812px) {
	#top01 .inner,#top04 .inner {margin: 0;}
}

#top02 {background: url("image/03-01.jpg") no-repeat center; padding: 80px 0;}
#top02 .inner {max-width: 1057px; width: 90.5%; float: right;}

#top03 {background: url("image/04-01.jpg") no-repeat center; padding: 110px 0;}
#top03 .mlr {position: relative;}
#top03 .txt {width: 51.7%; position: absolute; z-index: 1; top: 0;}
#top03 .txt h3 {width: 100%;}
#top03 .txt p {font-size: 30px; margin-top: -120px;}
#top03 .map {width: 68.75%; margin: 75px 0 0 31.25%;}
@media screen and (max-width: 1024px) {
	#top03 .txt p {margin-top: -80px;}
}
@media screen and (max-width: 650px) {
	#top03 .txt p {margin-top: -40px;}
}
@media screen and (max-width: 600px) {
	#top03 .txt {width: 100%; position: relative;}
	#top03 .txt p {margin-top: -80px;}
	#top03 .map {width: 100%; margin: 20px 0 0 0;}
}

#top04 {background: url("image/05-01.svg") no-repeat center top; padding: 60px 0;}
#top04 dl {width: 70.2%;}
#top04 dt {float: left; clear: left; width: 30px; font-size: 20px; line-height: 1.5;}
#top04 dd {margin-left: 30px; font-size: 18px; line-height: 1.5;}
@media screen and (max-width: 1024px) {
	#top04 dl {width: 100%;}
}

#top05 {max-width: 1288px; width: 100%; margin-left: auto; margin-right: auto; position: relative; min-height: 800px;} 
#top05 .photo {width: 58.22%; position: absolute; top: 0; left: 0;}
#top05 .txt {width: 63.27%; margin-left: 36.73%; margin-top: 25px; font-size: 20px;}
#top05 .txt h3 {border-bottom: 1px solid #222; padding: 0 7.35% 10px 0; margin-bottom: 20px; font-size: 30px; font-weight: normal;}
#top05 .txt h4 {font-size: 30px; margin-bottom: 30px; margin-right: 7.35%; text-align: right; font-weight: normal;}
#top05 .txt p {width: 50.65%; margin-left: 42%; margin-right: 7.35%;}
@media screen and (max-width: 1112px) {
	#top05 .txt {margin-top: 0;}
	#top05 .txt h4 .pcbr {display: none;}
}
@media screen and (max-width: 600px) {
	#top05 .photo {width: 100%; position: relative;}
	#top05 .txt {width: 94%; margin-left: 3%; margin-right: 3%;}
	#top05 .txt p {width: 100%; margin-left: 0; margin-right: 0;}
}

#top06 .bar {background: #FD3A7E; margin-bottom: 40px;}
#top06 h3 {background: #FF9BCF; max-width: 330px; width: 90%; margin: 0 auto; font-size: 20px; line-height: 70px; text-align: center;}
#top06 .logo {max-width: 644px; width: 90%; margin: 0 auto 20px;}
#top06 .txt {font-size: 20px;}

#top07 {background: url("image/07-01.jpg") no-repeat center; background-size: cover; padding: 60px 0; font-size: 20px;}
#top07 .inner {max-width: 644px; width: calc(94% - 80px); margin: 0 auto 20px; border-top: 10px solid #FD3A7E; border-bottom: 10px solid #FD3A7E; padding: 20px 40px;}
#top07 .btm {max-width: 724px; width: 94%; margin: 0 auto;}
#top07 h3 {font-size: 22px;}
#top07 dt {float: left; clear: left; width: 130px; line-height: 1.5;}
#top07 dd {margin-left: 130px; font-size: 20px; line-height: 1.5;}

#top08 .ttl,#top10 .ttl {border-bottom: 3px solid #81D3FF; border-top: 3px solid #81D3FF; padding: 30px 10px; text-align: center;}
#top08 .ttl h3,#top10 .ttl h3 {font-size: 50px; line-height: 60px; color: #81D3FF;}
#top08 .ttl h3 span {background: #81D3FF; border-radius: 40px; margin-left: 5px; color: #FFF; padding: 0 22px;}
#top08 .inner {width: 62%; float: left;}
#top08 .photo {width: 35%; float: right;}
#top08 .step {width: 151px; float: left;}
#top08 .txt {width: calc(100% - 181px); float: left; margin-left: 30px;}
#top08 .txt h4 {font-size: 40px; color: #FFF; background: #FD3A7E; text-align: center; border-radius: 20px; margin-bottom: 20px; padding: 10px 10px;}
#top08 .txt .copy {font-size: 30px; margin-bottom: 20px;}
#top08 .desc1 {background: #81D3FF; color: #FFF; border-radius: 20px; padding: 10px 20px;}
#top08 .desc1 .linebtm {border-bottom: 2px solid #FFF; padding: 0 0 10px; margin-bottom: 20px;}
#top08 .step2 {background: url("image/09-02.png") no-repeat center; background-size: cover; padding: 40px 0;}
#top08 .step2 .txt1,#top08 .step2 .txt2 {width: 54.7%;}
#top08 .step2 .txt2 {float: left;}
#top08 .step2 .txt3 {width: 40%; float: right;}
#top09 {background: url("image/09-08.jpg") no-repeat center; background-size: cover; padding: 320px 20px;}
#top09 .copy {font-size: 62px; font-weight: 900; color: #FD3A7E; text-shadow: 2px 5px 3px #FFF;}
@media screen and (max-width: 767px) {
	#top08 .ttl h3 {font-size: 30px; line-height: 40px;}
	#top08 .ttl h3 span {padding: 0 13px;}
	#top08 .inner,#top08 .step2 .txt1,#top08 .step2 .txt2,#top08 .step2 .txt3 {width: 100%; float: none;}
	#top08 .step {width: 91px;}
	#top08 .photo,#top08 .txt {width: calc(100% - 121px); margin-left: 30px;}
	#top09 {padding: 120px 10px;}
	#top09 .copy {font-size: 36px;}
}
@media screen and (max-width: 500px) {
	#top08 .step {width: 70px;}
	#top08 .photo,#top08 .txt {width: calc(100% - 90px); margin-left: 20px;}
}

#topMap {margin-bottom: 20px;}
#topMapIcon,#topMapTxt {margin: 0 10px; display: inline-block; vertical-align: middle;}
#topMapIcon {width: 110px;}
#topMapTxt a {color: #003189!important; font-size: 28px;}

@media screen and (max-width: 812px) {
	#top08 .txt h4 {font-size: 24px;}
	#point h2,#top01 h2,#top04 h2,#top03 .txt p,#top05 .txt h3,#top05 .txt h4,#topMapTxt a,#header #copy h2,#top08 .txt .copy {font-size: 20px;}
	#top07 h3 {font-size: 18px;}
	#top04 dt,#top05 .txt,#top06 h3,#top06 .txt,#top07 .inner,#top07 dd,#header #copy,#top01 .inner,#top04 .inner,#top04 dd {font-size: 16px;}
}

#top10 .ttl h3 {font-size: 30px; line-height: 1.5;}
#top10 .mlr {display: flex; flex-wrap: wrap; justify-content: center;}
#top10 .mlr li {margin: 0 15px 20px;}
#top10 .btnDL {display: block; padding: 10px 40px; border-radius: 30px; border: 2px solid #FD3A7E; background: #FD3A7E; color: #FFF; font-weight: 700;}
#top10 .btnDL span {padding: 0 34px 0 0; background: url("image/icon_dl_wh.svg") no-repeat right center; background-size: 24px auto;}
#top10 .btnDL:hover {background: #FFF; color: #FD3A7E;}
#top10 .btnDL:hover span {background: url("image/icon_dl_pi.svg") no-repeat right center; background-size: 24px auto;}
@media screen and (max-width: 812px) {
	#top10 .ttl h3 {font-size: 20px;}
}
@media screen and (max-width: 500px) {
	#top10 .btnDL {padding: 8px 20px;}
}

#ancher {position: fixed; right: 0; margin: auto 0; z-index: 2; height: 100vh; width: 200px;}
#ancher ul {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 0;}
#ancher li {font-size: 16px; line-height: 30px; text-align: right;}
#ancher li a {display: block; padding: 5px 10px;}
#ancher li a span {display: none; margin-right: 10px;}
#ancher li a:hover span {display: inline-block;}
@media screen and (max-width: 812px) {
	#ancher li a:hover span {display: none;}
}