@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');

/*************************
reset
*************************/

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_white: #fff;
	--lp-color_black: #090909;
}

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

#LP {
	background-color: var(--lp-color_black);
	font-size: 3vw;
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--lp-color_white);
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	line-height: 1.5;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;

	a {
		text-decoration: none;
		transition: .4s filter;
	}
	a:hover { filter: brightness(.7); }
	
	img {
		user-select: none;
		vertical-align: bottom;
		width: 100%;
		height: auto;
	}
	
	time,
	span {
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		letter-spacing: inherit;
	}
	
	.textBlock {
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		letter-spacing: inherit;
		display: block;
	}
	
	.device_sp { display: block; }
	.device_pc { display: none; }
	
	/* ------------------------------
	共通パーツ
	------------------------------ */
	
	.section__inner {
		margin: 0 auto;
		width: 91.5%;
	}
	
	/* ------------------------------
	キービジュアル
	------------------------------ */
	
	.kv__block,
	.kv__h1 img {
		margin: 0 auto;
		width: 100%;
	}
	
	/* ------------------------------
	メインコンテンツ
	------------------------------ */
	
	.contents { background: linear-gradient(to bottom, #3c3c3c 0%, #090909 100%); }
	
	.contents__wrapper { padding: 6% 0; }
	
	.banner__inner,
	.banner__header,
	.banner__header__h3 { margin: 0 auto; }
	
	.banner__inner { width: 91.5%; }
	
	.banner__header {
		padding-bottom: 6%;
		width: 100%;
	}
	
	.banner__header__h3 {
		padding-bottom: 6%;
		width: 83%;
	}

	.banner__header__baloon {
		font-size: 2em;
		font-weight: 900;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row wrap;
		gap: .25em;
		position: relative;
		letter-spacing: .05em;
		margin-bottom: .5em;

		&::before,
		&::after {
			background-image: url("../images/common/wh_main_icon_bubble.svg");
			background-repeat: no-repeat;
            background-size: cover;
			content: "";
			display: block;
			width: 1em;
			height: 1em;
		}
		&::after { transform: scale(-1, 1); }
	}

	.banner__cautionaryNote {
		color: var(--lp-color_white);
		font-size: 3vw;
		text-align: center;
	}
}


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

@media screen and (min-width: 980px) {
	#LP {
		font-size: 16px;
		min-width: 1000px;

		.device_sp { display: none; }
		.device_pc { display: block; }
	
		/* ------------------------------
		キービジュアル
		------------------------------ */
	
		.kv {
			background-image: url('../images/pc/wh_kv_background_decoration.png');
			background-repeat: no-repeat;
			background-size: 1786px auto;
			background-position: center;
		}
	
		.kv__h1 img { width: fit-content; }
	
		/* ------------------------------
		メインコンテンツ
		------------------------------ */
	
		.contents__wrapper {
			background-image: url('../images/pc/wh_contents_background.png');
			background-repeat: no-repeat;
			background-size: 1833px auto;
			background-position: center;
			padding: 30px 0 60px 0;
		}
	
		.section__inner {
			width: 100%;
			max-width: 980px;
		}
	
		.banner__inner {
			width: 100%;
			max-width: 980px;
		}
	
		.banner__header { max-width: fit-content; }
	
		.banner__header__h3 {
			padding-bottom: 40px;
			width: 100%;
			max-width: fit-content;
		}
	
		.banner__cautionaryNote { font-size: 14px; }
	}
}