@charset "UTF-8";
/* ========== RESET ========== */
.txtEx {
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
}
.PC {display: inherit;}
.SP {display: none;}

.lparea {
	position: relative;
	max-width: 2000px;
	margin: 0 auto;
	font-family: var(--font-default);
	line-break: strict;
}
.lparea *,
.lparea *::before,
.lparea *::after {
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1vw;
}
.lparea h1,
.lparea h2,
.lparea h3,
.lparea h4,
.lparea p,
.lparea ul,
.lparea ol,
.lparea li,
.lparea figure,
.lparea figcaption,
.lparea blockquote,
.lparea dl,
.lparea dd {
	margin: 0;
	padding: 0;
	border: none;
}
.lparea ul[class],
.lparea ol[class] {
	list-style: none;
}
.lparea img {
	display: block;
	vertical-align: bottom;
}
.lparea input,
.lparea button,
.lparea textarea,
.lparea select {
	font: inherit;
}
.lparea button,
.lparea input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	border: none;
	background: none;
	outline: none;
}
.lparea input {
	border-radius: 0;
	background: transparent;
}
.lparea a:where([class]) {
	transition: opacity 0.12s;
}
	.lparea a:where([class]):hover {
		opacity: 0.8;
	}
.lparea *[class] > mark {
	color: inherit;
	background: none;
}
/* ========== /RESET ========== */

:root {
	--font-default: 'Noto Sans JP', sans-serif;
	--font-en: 'Montserrat', sans-serif;
	--c-blue: #0041b4;
	--c-blue-light: #c5dcf0;
	--c-red: #eb3333;
	--c-navy: #0a1628;
	--c-txt: #333;
	--c-white: #fff;
}

:where(html) {
	scroll-behavior: smooth;
	scroll-padding-top: calc(64px + 9vw);
}

@media screen and (min-width: 1000px) {
		:where(html) {
		scroll-padding-top: calc(64px + 90px);
	}
	.lparea *,
	.lparea *::before,
	.lparea *::after {
		font-size: 10px;
	}
}

/* ======== Scroll Animation ======== */
.js-fadein {
	opacity: 0;
	transform: translateY(3em);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
	.js-fadein.is-inview {
		opacity: 1;
		transform: translateY(0);
	}

/* ======== FV ======== */
.lp_fv {
	position: relative;
	display: flex;
		justify-content: center;
	margin-top: 64px;
	overflow: hidden;
}
.lp_fv__bg {
	width: 200em;
	max-width: none;
}
	.lp_fv__bg img {
		width: 200em;
	}
.lp_fv__btn {
	position: absolute;
		bottom: 17.2em;
		left: 50%;
		transform: translateX(-50%);
	width: 38em;
}
	.lp_fv__btn img {
		width: 100%;
	}

/* ======== Sticky Nav ======== */
.lp_sti {
	position: sticky;
		top: 64px;
		z-index: 999;
	background: rgb(0 0 0);
	box-shadow: 0 0.5em 0.5em rgb(0 0 0 / 0.2);
}
.lp_sti__list {
	display: flex;
		justify-content: center;
		align-items: center;
}
	.lp_sti__item {
	}
		.lp_sti__link {
			display: flex;
				align-items: center;
			height: 9em;
			padding: 0 4em;
		}
					.lp_sti__link:hover {
						opacity: 0.6;
					}
		.lp_sti__link img {
			height: 1.2em;
			width: auto;
		}
	.lp_sti__slash {
		display: flex;
			align-items: center;
	}
		.lp_sti__slash img {
			width: 2em;
			height: auto;
		}

/* ======== Section Title (common) ======== */
.lp_sec-tit {
	display: flex;
		flex-direction: column;
		align-items: center;
	padding: 8em 0 5.5em 0;
}
	.lp_sec-tit__img {
		width: auto;
		height: 8.3em;
		margin-bottom: -1.8em;
	}
	.lp_sec-tit__sub {
		font-size: 1.6em;
		font-weight: 500;
		letter-spacing: 0.1em;
		color: var(--c-txt);
	}
	.lp_sec-tit--light .lp_sec-tit__sub {
		color: var(--c-white);
	}
	.lp_sec-tit--sdl .lp_sec-tit__img {
		/*width: 34em;*/
	}

/* ======== CONCEPT ======== */
.lp_cct {
	padding-bottom: 10em;
	background: url("../images/hoip_cctbg.jpg") no-repeat center top;
	background-size: 200em 100%;
}
.lp_cct__body {
	width: 78em;
	padding: 0 0 5em;
	margin: 0 auto;
}
	.lp_cct__body p {
		color: var(--c-txt);
		font-size: 1.6em;
		text-align: center;
		line-height: 2;
		letter-spacing: 0.1em;
	}
	.lp_cct__body p + p {
		margin-top: 1.5em;
	}

/* -- CONCEPT Appeal Area -- */
.lp_cct__appeal {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border: 2px solid var(--c-blue);
	border-radius: 2em;
	overflow: hidden;
}
	.lp_cct__appeal-head {
		display: flex;
			justify-content: center;
			align-items: center;
		height: 6em;
		background: var(--c-blue) no-repeat center right 8.4em;
		background-image: url("../images/hoip_ccttxt.png");
		background-size: auto 100%;
	}
		.lp_cct__appeal-head p {
			color: var(--c-white);
			font-size: 2.8em;
			font-weight: 700;
			letter-spacing: 0.1em;
		}
	.lp_cct__appeal-list {
		display: flex;
			justify-content: center;
			align-items: center;
		width: 100%;
	}
	.lp_cct__appeal-list .lp_cct__appeal-item {
		position: relative;
		display: flex;
			justify-content: center;
			align-items: center;
		width: 33.33%;
		height: 17em;
		padding: 0 3.3%;
		background: url("../images/hoip_cctchk.png") no-repeat left top;
		background-size: 10em auto;
	}
				.lp_cct__appeal-list .lp_cct__appeal-item:not(:first-child):before {
					content: "";
					position: absolute;
						z-index: 10;
						top: 2em;
						bottom: 2em;
						left: 0;
					display: block;
					border-right: 1px solid var(--c-blue);
				}
		.lp_cct__appeal-item p {
			color: var(--c-txt);
			font-size: 1.8em;
			line-height: 1.7777;
			letter-spacing: 0.1em;
		}
			.lp_cct__appeal-item p mark {
				color: var(--c-red);
				font-size: 100%;
				font-weight: 700;
				background: none;
			}

/* ======== MERIT ======== */
.lp_mrt {
	padding: 0 0 12.5em;
	background: url("../images/hoip_mrtbg.jpg") no-repeat center top;
	background-size: 200em 100%;
	overflow: hidden;
}
	.lp_mrt .lp_sec-tit__img {
		margin-bottom: -2.6em;
	}
.lp_mrt .lp_mrt__list {
	display: flex;
		justify-content: center;
		gap: 0 2em;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
	.lp_mrt__list .lp_mrt__item {
			position: relative;
				z-index: 10;
			width: 32%;
	}
					.lp_mrt__list .lp_mrt__item:before {
						content: "";
						position: absolute;
							z-index: -1;
							bottom: -4.5em;
							left: 50%;
							translate: -50% 0;
						width: 33.8em;
						height: 10.1em;
						background: url("../images/hoip_mrtsdw.png") no-repeat;
						background-size: 100%;
					}
		.lp_mrt__list .lp_mrt__itemwrap {
				z-index: 10;
			display: flex;
				flex-direction: column;
				align-items: center;
			width: 100%;
			height: 100%;
			padding-bottom: 3.5em;
			background: var(--c-white);
		}
		.lp_mrt__labelwrap {
			display: flex;
				justify-content: center;
				align-items: center;
			width: 100%;
			height: 3em;
			margin-bottom: 2.6em;
			background: url("../images/hoip_mrthbg.png") no-repeat;
			background-size: 100% 100%;
		}
			.lp_mrt__label {
				width: auto;
				height: 1.4em;
			}
		.lp_mrt__name {
			display: flex;
				justify-content: center;
				align-items: center;
			height: calc(2.7em * 1.222 * 2);
		}
			.lp_mrt__name span {
				display: block;
				color: var(--c-blue);
				text-align: center;
				font-size: 2.7em;
				font-weight: 700;
				line-height: 1.222;
				letter-spacing: 0.08em;
			}
		.lp_mrt__icon {
			width: 22.6em;
			margin: 3em 0;
		}
		.lp_mrt__txt {
			width: 25em;
			margin: 0 auto;
		}
			.lp_mrt__txt span {
				color: var(--c-txt);
				font-size: 1.6em;
				text-align: justify;
				line-height: 2;
				letter-spacing: 0.1em;
			}
				.lp_mrt__txt span mark {
					display: block;
					margin-top: 0.6em;
					color: currentColor;
					font-size: 87.5%;
					line-height: 1.7;
					background: none;
				}

/* ======== THEME ======== */
.lp_thm {
	padding: 0 0 7em;
	background: url("../images/hoip_thmbg.jpg") no-repeat center top;
	background-size: 200em 100%;
	overflow: hidden;
}

	.lp_thm .lp_sec-tit {
		padding-top: 10em;
		padding-bottom: 10em;
	}

/* -- Theme Block -- */
.lp_thm__block {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	/*padding: 0 0 5em;*/
}
			.lp_thm__block--02 {
				margin-top: 14em;
			}
.lp_thm__head {
	position: relative;
		z-index: 100;
	display: flex;
		justify-content: center;
		align-items: center;
	padding-bottom: 3.5em;
}
	.lp_thm__num {
		width: auto;
		height: 12.7em;
		margin-right: 6em;
		margin-left: 15em;
	}
	.lp_thm__num--02 {
		width: 24.5em;
	}
		.lp_thm__num img {
			width: auto;
			height: 100%;
		}
	.lp_thm__name {
		color: var(--c-blue);
		font-size: 5em;
		font-weight: 700;
		text-align: center;
		line-height: 1.2;
		letter-spacing: 0.08em;
	}
		.lp_thm__name mark {
			color: currentColor;
			font-size: 80%;
			background: none;
		}

/* -- Company Info -- */
.lp_thm__company {
	position: relative;
		z-index: 10;
	width: 66em;
	margin: 0 auto 2em 39em;
	filter: drop-shadow(1em 0 1em rgb(0 0 0 / 0.1));
}
			.lp_thm__company:after {
				content: "";
				position: absolute;
					z-index: -1;
					top: 2em;
					left: 2em;
				display: block;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, #0041b4, #00a9e0);
			}
	.lp_thm__company .lp_twrap {
		width: 100%;
		padding: 3.7em 7.5em;
		background: #fff;
	}
				.lp_thm__block--02 .lp_thm__company .lp_twrap {
					padding-right: 6.8em;
					padding-left: 6.8em;
				}
		.lp_thm__logo {
			width: auto;
			height: 6em;
			margin: 0 auto 2.4em auto;
		}
		.lp_thm__logo--02 {
			width: 40em;
		}
		.lp_thm__hero {
			position: absolute;
				z-index: -1;
				top: -7em;
				right: 100%;
				translate: 4em 0;
			width: 93em;
			margin-bottom: 2.5em;
			overflow: hidden;
		}
			.lp_thm__hero picture {
				display: block;
				width: 100%;
			}
			.lp_thm__hero img {
				width: 100%;
			}
		.lp_thm__desc {
			width: 51em;
		}
					.lp_thm__block--02 .lp_thm__desc {
						width: 53em;
					}
			.lp_thm__desc span {
			color: var(--c-txt);
			font-size: 1.6em;
			text-align: justify;
			line-height: 2;
			letter-spacing: 0.1em;
		}

/* -- Theme Block 02 (mirror) -- */
.lp_thm__block--02 .lp_thm__head {
		flex-direction: row-reverse;
		align-items: flex-start;
	padding-bottom: 4em;
}
	.lp_thm__block--02 .lp_thm__num {
		margin-right: 10em;
		margin-left: 6em;
	}
.lp_thm__block--02 .lp_thm__company {
	margin: 0 auto 2em 0;
	margin-right: 39em;
}
	.lp_thm__block--02 .lp_thm__company:after {
		left: auto;
		right: 2em;
		background: linear-gradient(-90deg, #0041b4, #00a9e0);
	}
	.lp_thm__block--02 .lp_thm__hero {
		right: auto;
		left: 100%;
		translate: -7em 0;
	}

/* -- Down Arrow -- */
.lp_thm__arr {
	display: flex;
		justify-content: center;
	padding: 2em 0;
}
	.lp_thm__arr img {
		width: 2.8em;
	}

/* -- Kyosou Image -- */
.lp_thm__kyo {
	width: 100%;
	margin: 0 auto;
}
.lp_thm__kyo-head {
	position: relative;
		z-index: 10;
	display: flex;
		justify-content: center;
		align-items: center;
	width: 30em;
	height: 6em;
	margin: 0 auto -3em auto;
	background: var(--c-blue);
	transform: skewX(-10deg);
}
	.lp_thm__kyo-head span {
		color: var(--c-white);
		font-size: 3em;
		font-weight: 700;
		letter-spacing: 0.08em;
		transform: skewX(10deg);
	}
.lp_thm__kyo-list {
	display: flex;
		justify-content: center;
		gap: 0 4em;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 2.5em;
	padding: 5.4em 4em 5em 4em;
	background: #ccd9f0 no-repeat left top;
	background-image: url("../images/hoip_thmkyobg.png");
	background-size: 37.7em;
}
.lp_thm__kyo-item {
	width: 43em;
}
	.lp_thm__kyo-photo {
		position: relative;
		margin-bottom: 2.5em;
	}
		.lp_thm__kyo-photo img {
			width: 100%;
		}
		.lp_thm__kyo-item .lp_thm__kyo-label {
			display: flex;
				align-items: center;
				justify-content: center;
			width: 100%;
			padding: 0.3em 0;
			color: var(--c-white);
			text-align: center;
			font-size: 2.6em;
			font-weight: 700;
			line-height: 2;
			letter-spacing: 0.1em;
			background: var(--c-blue);
		}
	.lp_thm__kyo-txt {
		color: var(--c-txt);
		font-size: 1.6em;
		text-align: justify;
		line-height: 2;
		letter-spacing: 0.1em;
	}

/* -- ASSETS -- */
.lp_thm__assets {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 5em auto;
}
.lp_thm__ast-titarea {
	display: flex;
		flex-direction: column;
		align-items: center;
	margin-bottom: -2em;
}
	.lp_thm__ast-tit {
		width: 29.25em;
		margin-bottom: 0.3em;
	}
	.lp_thm__ast-sub {
		font-size: 3em;
		font-weight: 700;
		letter-spacing: 0.08em;
		color: var(--c-blue);
	}
.lp_thm__assets .lp_thm__ast-list {
	position: relative;
	display: flex;
		flex-wrap: wrap;
		gap: 0 1.5em;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 4.5em 3em;
	border-radius: 0.5em;
}
			.lp_thm__ast-list .kakko {
				position: absolute;
					z-index: 1;
				width: 8.3em;
			}
						.lp_thm__ast-list .kakko:nth-child(1) {
								top: 0;
								left: 0;
						}
						.lp_thm__ast-list .kakko:nth-child(2) {
								transform: scale(-1,1);
								top: 0;
								right: 0;
						}
						.lp_thm__ast-list .kakko:nth-child(3) {
								transform: scale(1,-1);
								bottom: 0;
								left: 0;
						}
						.lp_thm__ast-list .kakko:nth-child(4) {
								transform: scale(-1,-1);
								bottom: 0;
								right: 0;
						}
				.lp_thm__ast-list .kakko img {
					width: 100%;
				}
.lp_thm__ast-list .lp_thm__ast-item {
	position: relative;
		z-index: 10;
	display: flex;
		align-items: flex-start;
	width: 45em;
	padding: 1.5em 0 1.5em 1em;
	border-bottom: 2px dotted #999;
}
			.lp_thm__ast-list .lp_thm__ast-item--bdn {
				border-bottom: 0;
			}
	.lp_thm__ast-ico {
		width: 3em;
		margin-right: 2em;
		flex-shrink: 0;
	}
	.lp_thm__ast-item p {
		color: var(--c-txt);
		font-size: 2em;
		letter-spacing: 0.08em;
		line-height: 1.65;
	}

/* -- Keywords -- */
.lp_thm__keywords {
	display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 3em auto;
}
.lp_thm__kw-head {
	font-size: 3em;
	font-weight: 700;
	color: var(--c-blue);
	margin-right: 1em;
}
.lp_thm__keywords .lp_thm__kw-list {
	display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 1em;
	flex: 1;
}
	.lp_thm__kw-list .lp_thm__kw-tag {
		padding: 0.4em 1.1em 0.5em 1.1em;
		color: var(--c-white);
		font-size: 2em;
		font-weight: 500;
		letter-spacing: 0.08em;
		background: #00a9e0;
	}

/* ======== SCHEDULE ======== */
.lp_sdl {
	padding: 0 0 9.5em;
	background: url("../images/hoip_sdlbg.jpg") no-repeat center top;
	background-size: 200em 100%;
}
	.lp_sdl .lp_sec-tit {
		padding-top: 11em;
	}

.lp_sdl__timeline {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 6em 5em;
	padding-top: 3em;
	background: #fff;
	box-shadow: 0 0 1em rgb(0 0 0 / 0.05);
}
				.lp_sdl__timeline::before {
					content: "";
					position: absolute;
						z-index: 100;
						top: 9em;
						left: 35em;
						bottom: 0;
					width: 2.5em;
					height: 56.1em;
					background: url("../images/hoip_sdlline.png") no-repeat;
					background-size: 100% 100%;
				}
	.lp_sdl__item {
		position: relative;
		display: flex;
			align-items: center;
		margin: 3.6em 0;
		padding: 0.9em 0 0.9em 8em;
	}
				.lp_sdl__item-sp {
					margin-top: 4em;
				}
	.lp_sdl__timeline .lp_sdl__date {
		width: 29em;
	}
		.lp_sdl__date span {
			color: #000;
			font-size: 2em;
			font-weight: 500;
			text-align: right;
			letter-spacing: 0.08em;
			white-space: nowrap;
		}
.lp_sdl__content {
}
	.lp_sdl__event {
	}
		.lp_sdl__event.t01 {}
			.lp_sdl__event.t01 span {
				font-size: 3em;
				font-weight: 700;
				letter-spacing: 0.08em;
			}
		.lp_sdl__event.t02 {}
			.lp_sdl__event.t02 span {
				font-size: 2em;
				font-weight: 500;
				letter-spacing: 0.08em;
			}
	.lp_sdl__sub {
		margin-top: 0.5em;
	}
		.lp_sdl__sub span {
			color: var(--c-txt);
			font-size: 1.15em;
			line-height: 1.8;
		}

/* -- Highlighted Item -- */
.lp_sdl__item--hl {
	/*margin-left: -5em;*/
	background: #00a9e0;
	border-radius: 1em;
}
	.lp_sdl__item--hl::before {
		background: var(--c-blue);
		border-color: var(--c-white);
		left: 4.45em;
	}
	.lp_sdl__item--hl .lp_sdl__date {
		position: static;
		display: inline-block;
	}
		.lp_sdl__item--hl .lp_sdl__date span {
			color: var(--c-white);
		}
	.lp_sdl__item--hl .lp_sdl__event {
		color: var(--c-white);
	}
	.lp_sdl__item--hl .lp_sdl__content {
		display: flex;
			align-items: center;
	}

/* -- Last Item -- */

/* ======== ENTRY ======== */
.lp_etr {
	padding: 0 0 14.5em;
	background: url("../images/hoip_etrbg.jpg") no-repeat center;
	background-size: 200em 100%;
	overflow: hidden;
}
	.lp_etr .lp_sec-tit {
		padding-top: 10em;
	}

.lp_etr__body {
	position: relative;
		z-index: 10;
	display: flex;
		flex-direction: column;
		align-items: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
			.lp_etr__body:before {
				content: "";
				position: absolute;
					z-index: -1;
					top: 84%;
					left: 0;
				width: 100em;
				height: 14.2em;
				background: url("../images/hoip_etrsdw.png");
				background-size: 100% 100%;
			}
	.lp_etr__bodywrap {
		position: relative;
		width: 100%;
		padding: 6em 0;
		background: #fff;
	}
				.lp_etr__bodywrap:before {
					content: "";
					position: absolute;
						z-index: 10;
						top: 0;
						left: 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 9.4em 9.4em 0 0;
					border-color: var(--c-blue) transparent transparent transparent;
				}
.lp_etr__deadline {
	display: flex;
		justify-content: center;
		align-items: center;
	margin-bottom: 2.5em;
}
	.lp_etr__deadline-label {
		display: inline-flex;
			align-items: center;
			justify-content: center;
		width: 14em;
		padding: 1em 0;
		margin-right: 4em;
		background: var(--c-blue);
		transform: skewX(-10deg);
	}
		.lp_etr__deadline-label span {
			color: var(--c-white);
			font-size: 2em;
			font-weight: 500;
			letter-spacing: 0.08em;
			transform: skewX(10deg);
		}
	.lp_etr__deadline-date {
	}
		.lp_etr__deadline-date span {
			color: #000;
			font-size: 3em;
			font-weight: 700;
			letter-spacing: 0.08em;
		}
.lp_etr__btn {
	display: block;
	width: 38em;
	margin: 0 auto 3em;
}
	.lp_etr__btn img {
		width: 100%;
	}
.lp_etr__note {
	color: var(--c-txt);
	font-size: 1.6em;
	line-height: 1.8;
	letter-spacing: 0.12em;
	text-align: center;
}

/* ======== Float Button ======== */
.lp_floatbtn {
	position: fixed;
		right: 2em;
		bottom: 2em;
		z-index: 1000;
	width: 22em;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s, visibility 0.3s;
}
	.lp_floatbtn.is-hidden {
		opacity: 0;
		visibility: hidden;
	}
	.lp_floatbtn img {
		width: 100%;
	}
	.lp_floatbtn:hover {
		opacity: 0.9;
	}