@charset "UTF-8";

/*************************
font_import
*************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*************************
reset style　＆　CMS unique style
*************************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}*[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body.noscroll{overflow:hidden}.iframe{width:100%;height:100%}.overlay{position:fixed;top:0;left:0;height:100vh;width:100%}.overlay.hidden{top:-100vh}#header.fixed{top:0;height:48px;position:sticky;box-shadow:0 2px 10px #2121211a}#header,#footer{overflow:hidden}@media screen and (min-width: 768px){#header.fixed{height:64px}}

*, *::before, *::after { box-sizing: border-box; }

#header {
	position: relative;
	z-index: 100;
}

#drawer.overlay,
#search-modal.overlay { z-index: 101; }

#drawer.overlay.hidden,
#search-modal.overlay.hidden {
	opacity: 0;
	z-index: 0;
}

/* 以下へページ固有のスタイル記述していく */

/*************************
custom properties
*************************/

#LP {
	--lp-color_black: #000;
	--lp-color_gray: #4d4d4d;
	--lp-color_brown: #4d1414;
	--lp-color_white: #fff;

	--lp-color_yellow: #fbe030;
	--lp-color_amber: #f0c65b;
	--lp-color_ocher: #d8bf7e;
	--lp-color_mustard: #9f7a1c;

	--lp-color_andmall-blue: #0078b9;
	--lp-color_outlet-orange: #f5a000;
}

/*************************
main
SP_layout（980px未満）
*************************/

/* ページ全体の共通スタイル */

#LP {
	background-color: var(--lp-color_black);
	color: var(--lp-color_white);
	font-family: 'Noto Sans JP', sans-serif;
}

#LP img {
	user-select: none;
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

#LP time,
#LP span {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

#LP .device_sp { display: block; }
#LP .device_pc { display: none; }

#LP .txt_block,
#LP .txt_block.device_sp { display: block; }

#LP a { transition: filter .4s; }
#LP a:hover { filter: brightness(.7); }

#LP .common__button { margin: 0 auto; }

#LP .common__button a {
	background-color: var(--lp-color_black);
	border-radius: 100px;
	color: var(--lp-color_white);
	font-size: 3.2vw;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.4;
    text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column wrap;
	user-select: none;
	position: relative;
	padding: 0 1.8em;
	width: 100%;
	min-height: 4em;
}
#LP .common__button a::before {
	border-top: 3px solid var(--lp-color_white);
    border-right: 3px solid var(--lp-color_white);
	content: '';
	vertical-align: middle;
	transform: rotate(45deg);
	position: absolute;
    top: calc(50% - (2.4vw / 2));
    right: .75em;
    width: 2.4vw;
    height: 2.4vw;
}
#LP .common__button.andmall a { background-color: var(--lp-color_andmall-blue); }
#LP .common__button.outlet a { background-color: var(--lp-color_outlet-orange); }

#LP .common__list .point {
	border-bottom: 2px solid var(--lp-color_yellow);
	color: var(--lp-color_yellow);
	letter-spacing: -.05em;
}

#LP .common__list > li {
	font-size: 3vw;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
	text-align: left;
	padding-left: 1em;
}
#LP .common__list > li::before {
	display: inline-block;
	text-align: center;
	margin-left: -1em;
	width: 1em;
}
#LP .common__list.midpoint > li::before { content: '・'; }
#LP .common__list > li:not(:last-of-type) { margin-bottom: .5em; }

/* キービジュアル */

#LP .kvArea__inner {
	background-image: url("../images/sp/wh_kv_catchcopy-bg.png");
	background-position: center;
	background-size: cover;
	margin: 0 auto;
	width: 100%;
}

#LP .kvArea__h1 {
	margin: 0 auto;
	padding-top: 8%;
	max-width: fit-content;
	width: 91.5%;
}

#LP .kvArea__text {
	font-size: 3vw;
	font-weight: 500;
	text-align: center;
	line-height: 2;
	padding: 18% 0 10% 0;
}

/* メインコンテンツ共通 */
#LP .mainArea {
	background-image: url("../images/common/wh_main_galaxy-background.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: bottom 6% center;
	width: 100%;
}

#LP .mainArea__section { width: 100%; }

#LP .mainArea__section:not(:last-of-type),
#LP .mainArea__group { margin-bottom: 7%; }


#LP .mainArea__inner {
	margin: 0 auto;
	width: 91.5%;
}

#LP .mainArea__group {
	background: linear-gradient(
		0deg,
		transparent,
		var(--lp-color_black) 40%,
		var(--lp-color_black) 100%
	);
	width: 100%;
}

#LP .method__block:not(:last-of-type) { margin-bottom: 8%; }

#LP .HowToPlay__h2 {
	font-size: 6vw;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	letter-spacing: .12em;
	user-select: none;
	display: flex;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 5%;
	width: 100%;
}

#LP .HowToPlay__h2::before,
#LP .HowToPlay__h2::after {
	background-color: var(--lp-color_white);
	content: '';
	flex-grow: 1;
	height: 1px;
}
#LP .HowToPlay__h2::before { margin-right: .75em; }
#LP .HowToPlay__h2::after { margin-left: .75em; }

#LP .HowToPlay__karte {
	margin: 0 auto;
	padding-bottom: 1.5em;
	width: 40.2%;
}

#LP .HowToPlay__list .point {
	border-bottom-width: 1px;
	padding: 0 .25em;
}

#LP .HowToPlay__list > li {
	font-size: 3.2vw;
	font-weight: 400;
}

#LP .hint__h3 {
	font-size: 5.5vw;
	font-weight: 900;
	text-align: center;
	margin-bottom: 6%;
}

#LP .hint__box {
	background-image: url("../images/sp/wh_main_hint-bg.jpg");
	background-size: cover;
	color: var(--lp-color_brown);
	margin: 0 auto;
	padding: 6% 2%;
	max-width: 800px;
}

#LP .hint__list > li:not(:last-of-type) { margin-bottom: 1.5em; }

#LP .hint__list > li {
	display: flex;
	gap: 1em;
}

#LP .hint__h4 {
	display: inline-flex;
	align-items: flex-start;
	white-space: nowrap;
	user-select: none;
	width: 30%;
}

#LP .hint__h4 > .txt_block {
	background: linear-gradient(
		180deg,
		var(--lp-color_amber),
		var(--lp-color_mustard)
	);
	font-size: 3.6vw;
	font-weight: 700;
	text-shadow: 0 0 6px var(--lp-color_white);
	text-align: center;
	display: inline-block;
	padding: .5em;
	width: 100%;
}

#LP .hint__text {
    font-size: 3.2vw;
    line-height: 1.8;
    letter-spacing: -.025em;
	font-weight: 500;
	width: calc(100% - (30% - 5em));
}

#LP .hint__text .icon {
	display: inline-flex;
	align-items: center;
	margin: 0 .15em;
	width: .9em;
	height: .9em;
}

#LP .hint__text a {
	line-height: 1.8;
	text-decoration: none;
	padding: 0 .25em;
}

#LP .hint__text .andmall {
	border-bottom: 2px solid var(--lp-color_andmall-blue);
	color: var(--lp-color_andmall-blue);
}

#LP .hint__text .outlet {
	border-bottom: 2px solid var(--lp-color_outlet-orange);
	color: var(--lp-color_outlet-orange);
}

#LP .hint__annotation {
	font-size: 3.2vw;
	text-align: center;
	line-height: 1.5;
	position: relative;
	margin-top: 1.5em;
}
#LP .hint__annotation::before { content: "※"; }

#LP .button__block > .method__button:not(:last-of-type) { margin-bottom: 1.5em; }

/* 謎解きクーポンの注意事項 */

#LP .notes { width: 100%; }

#LP .notes__h2 {
	font-size: 5.5vw;
	font-weight: 900;
	letter-spacing: -.05em;
	text-align: center;
	margin-bottom: 6%;
}

#LP .notes__block {
	background-color: rgba(77, 77, 77, .7);
	border-radius: 6px;
	margin: 0 auto;
	padding: 3em 1.5em;
	width: 100%;
}

#LP .notes__list a {
	border-bottom: 1px solid var(--lp-color_white);
	color: inherit;
    text-decoration: none;
	padding: 0 .5%;
}

#LP .notes__list time {
	font-weight: 600;
	letter-spacing: .05em;
	padding: 0 .5em;
}

#LP .notes__list .point {
	border-bottom-color: var(--lp-color_white);
	color: inherit;
}

/* クーポンコードの使い方 */

#LP .mainArea__section.usage { padding-bottom: 12%; } 

#LP .usage__h2 {
    background-color: var(--lp-color_ocher);
    border-radius: 7px 7px 0 0;
    color: var(--lp-color_brown);
    font-size: 6vw;
    font-weight: 900;
    letter-spacing: .05em;
    text-align: center;
    padding: 3% 0;
}

#LP .usage__list {
	background-color: rgba(77, 77, 77, .7);
	border-radius: 0 0 7px 7px;
    padding: 5% 0 8% 0;
	width: 100%;
}

#LP .usage__list > li {
	margin: 0 auto;
	width: 100%;
}

#LP .usage__list > li:not(:last-of-type) {
	background-image: url('../images/common/wh_main_icon-arrow_bottom.svg');
	background-position: bottom 2.5em center;
	background-repeat: no-repeat;
	background-size: 18.2% auto;
	padding-bottom: 20%;
}

#LP .usage__h3 {
	font-size: 2.8vw;
	font-weight: bold;
	line-height: 1.5;
	text-align: left;
	position: relative;
}

#LP .usage__list > li i.number {
	background-color: var(--lp-color_ocher);
    border-radius: 50%;
    color: var(--lp-color_brown);
    font-size: 4vw;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    display: block;
    position: relative;
    width: 1.5em;
    height: 1.5em;
}
#LP .usage__list > li i.number::before {
	font-family: 'Poppins', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
#LP .usage__list > li:nth-of-type(1) i.number::before { content: '1'; }
#LP .usage__list > li:nth-of-type(2) i.number::before { content: '2'; }
#LP .usage__list > li:nth-of-type(3) i.number::before { content: '3'; }
#LP .usage__list > li:nth-of-type(4) i.number::before { content: '4'; }
#LP .usage__list > li:nth-of-type(5) i.number::before { content: '5'; }

#LP .usage__h3 .emphasis {
	color: var(--lp-color_yellow);
	font-size: 3.8vw;
	font-weight: bold;
	letter-spacing: -.05em;
}

#LP .usage__h3 .check {
	display: inline-flex;
	align-items: center;
}

#LP .usage__h3__inner {
	font-size: 3.8vw;
	font-weight: bold;
	letter-spacing: -.05em;
	display: flex;
    flex-flow: row wrap;
	justify-content: center;
    gap: .75em;
}

#LP .usage__h3__inner,
#LP .usage__h3 .emphasis,
#LP .usage__h3 .device_sp.newline,
#LP .usage__h3 .device_sp.inline,
#LP .usage__h3 .device_pc.inline { font-weight: bold; }

#LP .usage__h3 .device_sp.inline { display: inline; }
#LP .usage__h3 .device_pc.inline { display: none; }

#LP .usage__image {
	margin: 0 auto;
	padding-top: 2.5%;
	width: 90%;
}

/*************************
main
PC_layout（980px以上）
*************************/

@media screen and (min-width: 980px) {

	/* ページ全体の共通スタイル */

	#LP .device_sp { display: none; }
	#LP .device_pc { display: block; }

	#LP .device_sp.newline,
	#LP .txt_block.device_sp { display: inline; }

	#LP .common__button a { font-size: 18px; }

	#LP .common__button a::before {
		top: calc(50% - (16px / 2));
		right: 1em;
		width: 16px;
		height: 16px;
	}

	#LP .common__list > li {
		font-size: 14px;
		font-weight: 400;
	}

	/* キービジュアル */
	#LP .kvArea__inner {
		background-image: url("../images/pc/wh_kv_catchcopy-bg.png");
		background-size: 1280px auto;
		background-repeat: no-repeat;
		max-width: 1280px;
	}

	#LP .kvArea__h1 {
		padding-top: 48px;
		width: fit-content;
	}

	#LP .kvArea__text {
		font-size: 24px;
		padding: 72px 0;
	}

	/* メインコンテンツ共通 */

	#LP .mainArea { background-position: bottom 20px center; }

	#LP .mainArea__section:not(:last-of-type),
	#LP .mainArea__group { margin-bottom: 65px; }

	#LP .mainArea__inner {
		width: 100%;
		max-width: 980px;
	}

	#LP .method__block:not(:last-of-type) { margin-bottom: 60px; }

	#LP .HowToPlay__h2 {
		font-size: 34px;
		margin-bottom: 0;
		width: calc(100% - 4em);
	}

	#LP .HowToPlay__box {
		display: flex;
		align-items: end;
		gap: 27px;
	}

	#LP .HowToPlay__karte {
		margin: 0;
		width: 100%;
		max-width: 194px;
	}

	#LP .HowToPlay__list {
		width: 100%;
		max-width: calc((100% - 194px) - 27px);
	}

	#LP .HowToPlay__list > li { font-size: 20px; }
	#LP .HowToPlay__list > li:not(:last-of-type) { margin-bottom: .15em; }

	#LP .hint__box {
		background-image: url("../images/pc/wh_main_hint-bg.jpg");
		padding: 48px 24px;
	}

	#LP .hint__h3 {
		font-size: 42px;
		margin-bottom: 30px;
	}

	#LP .hint__h4 {
		margin-top: .5em;
		width: 100%;
		max-width: 152px;
	}
	#LP .hint__h4 > .txt_block {
		font-size: 29px;
		padding: .5em .75em;
	}

	#LP .hint__text {
		font-size: 22px;
		width: 100%;
		max-width: calc(100% - 152px - 1em);
	}

	#LP .hint__annotation { font-size: 14px; }

	#LP .button__block {
		display: flex;
		justify-content: space-between;
	}

	#LP .button__block > .method__button:not(:last-of-type) { margin-bottom: 0; }

	#LP .method__button {
		margin: 0;
		width: 100%;
        max-width: 450px;
    }

	/* 謎解きクーポンの注意事項 */

	#LP .notes__h2 {
		font-size: 28px;
		margin-bottom: 28px;
	}

	#LP .notes__block { max-width: 800px; }

	/* クーポンコードの使い方 */

	#LP .mainArea__section.usage { padding-bottom: 70px; }

	#LP .usage__h2 {
        font-size: 42px;
        padding: 15px 0;
    }

    #LP .usage__list { padding: 40px 0 60px 0; }

    #LP .usage__list > li { max-width: fit-content; }

	#LP .usage__list > li:not(:last-of-type) {
		background-position: bottom 48px center;
		background-size: 104px auto;
		padding-bottom: 118px;
	}

	#LP .usage__h3 { font-size: 20px; }

	#LP .usage__h3__inner,
	#LP .usage__h3 .emphasis,
	#LP .usage__h3 .device_sp.newline { font-size: 16px; }

	#LP .usage__list > li i.number { font-size: 20px; }

	#LP .usage__h3__inner {
		align-items: center;
		gap: .5em;
	}

	#LP .usage__h3 .device_sp.inline { display: none; }
	#LP .usage__h3 .device_pc.inline { display: inline; }

	#LP .usage__image {
		padding-top: 15px;
		width: 100%;
	}
}