@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: #000;
}

/*************************
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: 100%;
	}
	
	/* ------------------------------
	キービジュアル
	------------------------------ */
	
	.kv__block {
		margin: 0 auto;
		width: 100%;
	}

	.kv__h1 {
		> img {
			margin: 0 auto;
			width: 100%;
		}
	}

	.kv__band {
		background: linear-gradient(
			to right,
			#eac61d,
			#ebb819,
			#ecad16,
			#edaa16,
			#eda615,
			#ee9b14,
			#f08f13
		);

		padding: 0 1.5em;

		> img {
			display: block;
			margin: 0 auto;
			width: 91.5%;
			max-width: fit-content;
		}
	}
	
	/* ------------------------------
	メインコンテンツ
	------------------------------ */

	.contents__wrapper { padding: 6% 0; }
	
	.banner__inner,
	.banner__header,
	.banner__header__block { margin: 0 auto; }

	.banner__header {
		padding-bottom: 6%;
		width: 100%;
	}
	
	.banner__header__block:not(:last-of-type) { padding-bottom: 8%; }

	.banner__header__baloon { font-size: 1.75em; }

	.banner__header__box {
		background: linear-gradient(
			to bottom,
			var(--lp-color_white),
			#eadcb2
		);
		color: var(--lp-color_black);
		font-size: .95em;
		font-weight: 800;
		margin: 0 auto;
		margin-top: .5em;
		padding: 1.5em;
		width: 92%;
		max-width: 980px;

		.banner__header__text {
			.textBorder { border-bottom: 2px solid #8d0001; }

			.textLarge { font-size: 1.75em; }

			.textEmphasis {
				color: #8d0001;
				padding-right: .25em;
			}

			.textLarge,
			.textEmphasis {
				font-weight: 900;
				display: inline-block;
			}

			&:not(:last-of-type) { margin-bottom: 1em; }
		}
	}

	.banner__cautionaryNote { font-size: .9em; }
}


/**************************************************
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__h1 > img { max-width: fit-content; }

		.kv__band > img { width: 100%; }

		/* ------------------------------
		メインコンテンツ
		------------------------------ */
	
		.contents__wrapper {
			background-image: url('../images/pc/wh_main_contents_background.png');
			background-size: 1240px auto;
			background-position: center;
			background-repeat: no-repeat;
			padding: 30px 0 90px 0;
		}

		.banner__inner {
			width: 100%;
			max-width: 980px;
		}

		@media screen and (min-width: 1240px) {
			.contents__wrapper {
				background-size: cover;
			}

			.banner__inner {
				max-width: 1024px;
			}
		}

		@media screen and (min-width: 1440px) {
			.banner__inner {
				max-width: 1240px;
			}
		}

		.banner__header {
			padding-bottom: 20px;
			max-width: fit-content;
		}
	
		.banner__header__block:not(:last-of-type) { padding-bottom: 80px; }

		.banner__header__baloon { font-size: 2.5em; }

		.banner__header__box {
			font-size: 1.5em;
			margin-top: 1em;
			width: 100%;
		}
	}
}