@charset "utf-8";

/* ================ Reset ================= */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var,b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;box-sizing: border-box;font-weight: normal;font-style: normal;}
body {
	height: 100%;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-optical-sizing: auto;
	font-size: 17px;
	color: #000;
	letter-spacing: 0;
}

html{
	overflow-x: hidden;
	overflow-y: scroll;
}
body{
	padding-right: 0!important;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block;
}
nav ul, ul, nav ol, ol {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	-webkit-tap-highlight-color:transparent;
	-webkit-tap-highlight-color:rgba( 100, 100, 100, 0.5 );
	text-decoration: none;
	color: #000;
}
a, a:before, a:after{
	-webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}
a:hover {
	transform: scale(1.04);
}

button {
	-webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}
img{
	vertical-align: bottom;
	border: 0;
	max-width: 100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
input, select {
	vertical-align:middle;
}
.cf:before,
.cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}

/* =================== */
.wrapper .pc_l,
.wrapper .pc_r{
	display: none;
}

.view_area{
	overflow-x: hidden;
	position: relative;
	font-size: 4.8vw;
}

.star{
	position: absolute;
	z-index: 11;
}
.star div{
	width: 60px;
	opacity: 0;
}
.star span{
	display: block;
	position: absolute;
	top: 60px;
	right: 50px;
	width: 1px;
	height: 100px;
	background: #fff;
  box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 0.45);
  transform-origin: bottom;
  transform: scaleY(0);
}
.contents{
	position: relative;
	z-index: 11;
}


.bg_wrap{
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 11;
}

.bg_wrap.message_bg{
	background: url("../img/bg_message.png") top center no-repeat;
}
.bg_wrap.area_bg{
	background: url("../img/bg_area.png") top center no-repeat;
}
.bg_wrap.queen_bg{
	background: url("../img/bg_queen.png") top center no-repeat;
}
.bg_wrap.mile_bg{
	background: url("../img/bg_mile.png") top center no-repeat;
}
.bg_wrap.about_bg{
	background: url("../img/bg_about.png") top center no-repeat;
}


.kv{
	position: relative;
}
.kv .s01{
	top: 10%;
	left: 15%;
}
.kv .s01 span{
	height: 120px;
	top: 50px;
	right: 100px;
}
.kv .s02{
	top: 13%;
	right: 12%;
}
.kv .s02 div{
	width: 30px;
}
.kv .s02 span{
	height: 80px;
	right: 62px;
	top: 25px;
}
.kv .s03{
	top: 8%;
	right: 12%;
}
.kv .s03 div{
	width: 50px;
}
.kv .s03 span{
	height: 40px;
	top: 48px;
}


.kv .uma{
	position: absolute;
	top: 0;
}
.kv h2{
	position: absolute;
	top: 4%;
}
.kv .txt{
	position: absolute;
	top: 0;
	right: 0;
	width: calc((76/828)*100%);
}
.kv .day{
	display: flex;
	margin: calc((-38/828)*100%) 0 calc((-10/828)*100%) 0;
}

.intro{
	padding: calc((180/828)*100%) 0 0;
	background: url("../img/bg_intro.png") top center no-repeat;
	position: relative;
}
.intro .s01{
	top: 0%;
	left: 15%;
}
.intro .s01 div{
	width: 40px;
}
.intro .s01 span{
	height: 80px;
	top: 35px;
	right: 70px;
}
.intro .s02{
	top: 22%;
	right: 0%;
}
.intro .s02 div{
	width: 40px;
}
.intro .s02 span{
	height: 60px;
	top: 35px;
	right: 60px;
}
.intro .s03{
	top: 25%;
	right: 10%;
}
.intro .s03 div{
	width: 30px;
}
.intro .s03 span{
	height: 40px;
	top: 30px;
	right: 45px;
}
.intro .s04{
	top: 68%;
	left: 13%;
}
.intro .s04 div{
	width: 30px;
}
.intro .s04 span{
	height: 30px;
	top: 30px;
	right: 40px;
}
.intro .s05{
	top: 75%;
	right: 3%;
}
.intro .s05 div{
	width: 30px;
}
.intro .s05 span{
	height: 40px;
	top: 30px;
	right: 45px;
}
.intro h3{
	width: calc((684/828)*100%);
	margin: 0 auto calc((180/828)*100%);
}
.intro p{
	width: calc((672/828)*100%);
	margin: 0 auto calc((30/828)*100%);
}

/* message */
.joint{
	width: 100%;
	height: 100vh;
	background: url("../img/bg_joint.png") top center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	z-index: 10;
	pointer-events: none;
}
.pin-spacer{
	pointer-events: none;
}

.message{
	position: relative;
	/*
	background: url("../img/bg_message.png") top center no-repeat;
	background-size: 100% 100%;*/
	padding: calc((220/828)*100%) 0 calc((440/828)*100%);
}
.message .message_bg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/bg_message.png") top center no-repeat;
	z-index: -1;
}
.message .area_bg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/bg_area.png") top center no-repeat;
	z-index: -2;
	transform: scale(1, -1);
}
.message .s01{
	top: 0%;
	left: 20%;
}
.message .s01 div{
	width: 40px;
}
.message .s01 span{
	height: 120px;
	top: 30px;
	right: 90px;
}
.message .s02{
	top: 4%;
	left: 25%;
}
.message .s02 div{
	width: 30px;
}
.message .s02 span{
	height: 60px;
	top: 25px;
	right: 55px;
}
.message .s03{
	bottom: 18%;
	right: 30%;
}
.message .s03 div{
	width: 30px;
}
.message .s03 span{
	height: 60px;
	top: 30px;
	right: 54px;
}
.message .s04{
	bottom: 20%;
	right: 24%;
}
.message .s04 div{
	width: 20px;
}
.message .s04 span{
	height: 30px;
	top: 25px;
	right: 30px;
}

.message h3{
	width: calc((773/828)*100%);
	margin: 0 auto calc((40/828)*100%);
	position: relative;
}

.message h3 .bg{
	display: block;
	position: absolute;
	top: 0;
	opacity: 0;
}
.message h3 .bg.light{
	animation: ttl_light 3s linear forwards;
	mix-blend-mode: hard-light;
}

.message p{
	text-align: center;
	color: #fff;
	line-height: 1.8;
	margin: 0 auto calc((80/828)*100%);
}

.message .movie{
	aspect-ratio:16/9;
}
.message .movie iframe{
	width: 100%;
	height: 100%
}

@keyframes ttl_light{
	0%{opacity: 0}
	25%{opacity: 1}
	45%{opacity: 1}
	100%{opacity: 0}
}

.area{
	margin: -4px 0;
	position: relative;
	padding: 0 0 calc((440/828)*100%) 0;
/*	background: url("../img/bg_area.png") top center no-repeat;*/
}

.area .area_bg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/bg_area.png") top center no-repeat;
	z-index: -1;
}
.area .queen_bg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/bg_queen.png") top center no-repeat;
	z-index: -2;
	transform: scale(1, -1);

}

.area .s01{
	top: -8%;
	left: 14%;
}
.area .s01 div{
	width: 40px;
}
.area .s01 span{
	height: 60px;
	top: 35px;
	right: 55px;
}
.area .s02{
	top: 8%;
	right: 8%;
}
.area .s02 div{
	width: 20px;
}
.area .s02 span{
	height: 30px;
	top: 25px;
	right: 30px;
}
.area h3{
	width: calc((674/828)*100%);
	margin: 0 auto calc((40/828)*100%);
	position: relative;
}
.area h3 .bg{
	display: block;
	position: absolute;
	top: 0;
	opacity: 0;
}
.area h3 .bg.light{
	animation: ttl_light 3s linear forwards;
	mix-blend-mode: hard-light;
}


.area .txt{
	color: #00fffe;
	margin: 0 0 calc((50/828)*100%) calc((76/828)*100%);
	line-height: 1.8;
	font-weight: 800;
}
.area .txt span{
	color: #fff;
	display: block;
	margin-left: 1em;
	text-indent: -1em;
	font-size: 4vw;
}

.area h4{
	color: #ffff00;
	margin: 0 0 0 calc((76/828)*100%);
	line-height: 1.8;
	font-weight: 800;
	font-size: 4vw;
}
.area .txt_notice{
	margin: 0 0 calc((50/828)*100%) calc((76/828)*100%);
	color: #fff;
	line-height: 1.8;
	font-size: 4vw;
}
.area .txt_notice span{
	display: block;
	margin-left: 1em;
	text-indent: -1em;
	margin-bottom: calc((50/828)*100%) ;
	font-size: 4vw;
}
.area .img01{
	width: calc((676/828)*100%);
	margin: 0 0 5% 5%;
}
.area .img02{
	width: calc((613/828)*100%);
	margin: 0 0 5% 20%;
}
.area .notice{
	margin: 0 0 0 calc((76/828)*100%);
	font-size: 14px;
	color: #fff;
}



.queen{
	position: relative;
	padding: 0 0 calc((440/828)*100%) 0;
	/*
	background: url("../img/bg_queen.png") top center no-repeat;
	*/
}
.queen .queen_bg{
	position: absolute;
	top: -2px;
	width: 100%;
	height: 100%;
	background: url("../img/bg_queen.png") top center no-repeat;
	z-index: -1;
}
.queen .mile_bg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/bg_mile.png") top center no-repeat;
	z-index: -2;
	transform: scale(1, -1);
}
.queen .s01{
	top: 40%;
	right: 14%;
}
.queen .s01 div{
	width: 20px;
}
.queen .s01 span{
	height: 40px;
	top: 25px;
	right: 36px;
}
.queen .s02{
	top: 58%;
	left: 20%;
}
.queen .s02 div{
	width: 20px;
}
.queen .s02 span{
	height: 40px;
	top: 25px;
	right: 36px;
}
.queen .s03{
	top: 58%;
	left: 13%;
}
.queen .s03 div{
	width: 30px;
}
.queen .s03 span{
	height: 60px;
	top: 25px;
	right: 50px;
}
.queen .s04{
	top: 70%;
	right: 5%;
}
.queen .s04 div{
	width: 30px;
}
.queen .s04 span{
	height: 60px;
	top: 25px;
	right: 50px;
}

.queen h3{
	width: calc((552/828)*100%);
	margin: 0 auto calc((40/828)*100%);
	position: relative;
}
.queen h3 .bg{
	display: block;
	position: absolute;
	top: 0;
	opacity: 0;
}
.queen h3 .bg.light{
	animation: ttl_light 3s linear forwards;
	mix-blend-mode: hard-light;
}

.queen .sttl{
	width: calc((613/828)*100%);
	margin: -3% auto 3%;
}
.queen .txt{
	color: #fff;
	margin: 0 calc((76/828)*100%) 10%;
	line-height: 1.8;
	font-size: 4vw;
}
.queen .img{
	position: relative;
}
.queen .img .image{
	position: absolute;
	display: block;
	top: 0;
	opacity: 0;
}



.mile{
	position: relative;
	padding: 0 0 calc((440/828)*100%) 0;
	/*
	background: url("../img/bg_mile.png") top center no-repeat;
*/
}
.mile .mile_bg{
	position: absolute;
	top: -2px;
	width: 100%;
	height: 100%;
	background: url("../img/bg_mile.png") top center no-repeat;
	z-index: -1;
}
.mile .about_bg{
	position: absolute;
	top: 2px;
	width: 100%;
	height: 100%;
	background: url("../img/bg_about.png") top center no-repeat;
	z-index: -2;
	transform: scale(1, -1);
}


.mile .s01{
	top: 42%;
	left: 30%;
}
.mile .s01 div{
	width: 20px;
}
.mile .s01 span{
	height: 40px;
	top: 25px;
	right: 36px;
}
.mile .s02{
	top: 58%;
	right: 5%;
}
.mile .s02 div{
	width: 30px;
}
.mile .s02 span{
	height: 60px;
	top: 25px;
	right: 50px;
}
.mile .s03{
	top: 60%;
	right: 14%;
}
.mile .s03 div{
	width: 30px;
}
.mile .s03 span{
	height: 40px;
	top: 28px;
	right: 40px;
}
.mile .s04{
	top: 75%;
	left: 14%;
}
.mile .s04 div{
	width: 30px;
}
.mile .s04 span{
	height: 40px;
	top: 28px;
	right: 40px;
}


.mile h3{
	width: calc((818/828)*100%);
	margin: 0 auto calc((40/828)*100%);
	position: relative;
}
.mile h3 .bg{
	display: block;
	position: absolute;
	top: 0;
	opacity: 0;
}
.mile h3 .bg.light{
	animation: ttl_light 3s linear forwards;
	mix-blend-mode: hard-light;
}

.mile .sttl{
	width: calc((613/828)*100%);
	margin: -3% auto 3%;
}
.mile .txt{
	color: #fff;
	margin: 0 calc((76/828)*100%) 10%;
	line-height: 1.8;
	font-size: 4vw;
}
.mile .img{
	position: relative;
}
.mile .img .image{
	position: absolute;
	display: block;
	top: 0;
	opacity: 0;
}



.about {
	position: relative;
	background: url("../img/bg_about.png") top center no-repeat;
	padding: 0 0 calc((440/828)*100%) 0;
}

.about .inner {
	position: relative;
	margin: 0 8%;
	padding: calc((100/828)*100%) 0;
}
.about .inner:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	background:rgba(255, 255, 255, 0.4);
	mix-blend-mode: overlay;
	position: absolute;
	top: 0;
}
.about .inner h3{
	width: calc((364/828)*120%);
	margin: 0 auto calc((100/828)*100%);
}
.about .inner p{
	margin: 0 8%;
}

.foot{
	position: relative;
	background: url("../img/bg_foot.png") top center no-repeat;
	padding: calc((220/828)*100%) 0;
}
.foot .joint{
	height: 100%
}
.foot h3{
	width: calc((768/828)*100%);
	margin: 0 auto 3%;
}
.foot p{
	margin: 0 5% 8%;
	line-height: 1.8;
	font-weight: 600;
}
.foot a{
	display: block;
	margin: 0 5% 5%;
}


.footer{
	background: #fff;
	padding: 1% 0 0 0;
}

.footer hr{
	display: none;
}
.footer img {
	display: block;
	width: 100%;
	height: auto;
	will-change: transform;
}
.footer-share {
	width: 91.0628019324%;
	margin: 16.9082125604% auto
}
.footer-share--head {
	width: 46.9806763285%;
	margin: 0 auto 5.0724637681%
}
.footer-share-links {
	display: flex;
	justify-content: center
}
.footer-share--link {
	width: 15.0966183575%;
	margin: 0 4.4685990338%
}
@media (any-hover: hover) {
	.footer-share--link a img {
		transition: -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99), -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99)
	}
	.footer-share--link a:hover img {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
}

.footer-content {
	display: flex;
	flex-wrap: wrap;
	width: 91.0628019324%;
	margin: 0 auto
}
.footer-info {
	width: 91.0628019324%
}
.footer-info--head {
	width: 22.5845410628%;
	margin: 0 0 3.6231884058% 0
}
.footer-info-data {
	display: flex;
	font-size: 3.4vw;
	line-height: 1.25;
	margin: 0 0 1em 0
}
.footer-info-data span:nth-child(1) {
	width: 4.5em
}
.footer-sns {
	width: 91.0628019324%;
	margin: 0 auto
}
.footer-sns--head {
	width: 22.3429951691%;
	margin: 18.115942029% auto 4.347826087%
}
.footer-sns-links {
	display: flex;
	justify-content: center
}
.footer-sns--link {
	width: 14.7342995169%;
	margin: 0 2.4154589372%
}
@media (any-hover: hover) {
	.footer-sns--link a img {
		transition: -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99), -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99)
	}
	.footer-sns--link a:hover img {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
}
.footer-btns {
	display: flex;
	justify-content: space-between;
	width: 91.0628019324%;
	margin: 12.077294686% auto 15.9420289855%
}
.footer--btn {
	width: 42.8743961353%
}
.footer--bnr {
	width: 91.3043478261%;
	margin: 0 auto 10.8695652174%
}
.footer--txt {
	width: 100%;
	font-size: 3vw;
	line-height: 1.39;
	text-align: center;
	margin: 0 0 5.5555555556% 0
}
.footer--txt a{
	text-decoration: underline;
}
.footer--copyright {
	width: 100%;
	line-height: 1;
	text-align: center;
	font-size: 3vw;
	margin: 0 0 3.8647342995%
}
.footer--logo {
	background: #000;
	padding: 2.1739130435% 0 1.690821256%
}
.footer--logo>img {
	width: 23.4299516908%;
	margin: 0 auto
}
.pc_img{
	display: none;
}


/* ======================================== */
@media print, screen and (min-width: 829px){
/* =======1199px～829PC======== */
.pc{display: inline-block;}
.sp{display: none;}

.wrapper{
	position: relative;
/*  display: grid;
  grid-template-columns: 1fr 510px 33%;
  align-items: flex-start;
  z-index: 1;
*/
	background:url("../img/bg_pc.png") top center no-repeat fixed;
	background-size: cover;
}

.view_area{
	position: relative;
	width: 510px;
	z-index: 2;
	margin: 0;
	font-size: 20px;
}

.pc_wrap{
	position: relative;
	width: 510px;
	z-index: 2;
	margin: 0 0 0 20%;
}
.pc_wrap:before{
	content: "";
	display: block;
	height: 100%;
	width: 240px;
	background: url("../img/bg_view-l.png") top center repeat-y;
	background-size: 240px auto;
	position: absolute;
	top: 0;
	left: -240px
}

.pc_wrap:after{
	content: "";
	display: block;
	height: 100%;
	width: 240px;
	background: url("../img/bg_view-r.png") top center repeat-y;
	background-size: 240px auto;
	position: absolute;
	top: 0;
	right: -240px
}

.wrapper .pc_l{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 400px;
	height: 100%;
	position: fixed;
	margin: 0 0 0 520px;
	top: 0;
	left:30%;
	z-index: 2;
}
.wrapper .pc_l .logo{
	width: 127px;
	margin: 0 auto 13px;
}
.wrapper .pc_l h1{
	text-align: center;
	width: 100%;
	margin: 0 0 35px;
}
.wrapper .pc_l nav{
	width: 100%;
	text-align: center;	
}
.wrapper .pc_l nav li{
	margin: -5px 0 0;
}
.wrapper .pc_l nav li a:hover{
	opacity: 0.6;
}

.area .txt span{
	font-size: 18px;
}
.area h4{
	font-size: 18px;
}
.area .txt_notice span{
	font-size: 18px;
}
.queen .txt{
	font-size: 18px;
}
.mile .txt{
	font-size: 18px;
}



.footer-info-data{
	font-size: 15px;
}
.footer--txt{
	font-size: 15px;
}
.footer--copyright{
	font-size: 14px;
}

}


@media print, screen and (min-width: 1199px){
/* =======1200px～PC======== */
.pc{display: inline-block;}
.sp{display: none;}



/* ======PC=======*/}