/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

html {
	font-size: 10px;
}

body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* word-break: keep-all; */
	line-break: strict;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-feature-settings: "palt";
}

header {
	background: #000;
	border-bottom: 1px solid #fff;
	padding: 6px 10px 6px 10px;
	height: 30px;
	overflow: hidden !important;
}

a:hover {
	opacity: 0.8;
}

a {
	transition: opacity 0.3s ease-out;
}

.sp {
	display: none;
}

.pc {
	display: block;
}

@media (max-width: 750px) {
	.sp {
		display: block;
	}

	.pc {
		display: none;
	}
}

.en {
	font-family: "Inter", "Noto Sans", sans-serif;
}
/* -----------------------------------------

	SNSフッタ
	
-----------------------------------------*/
#sns-footer {
	background: #e0ff8e;
	padding: 10% 8.668%;
}

.blk_sns {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px 5%;
	margin-top: 8%;
}

.blk_sns li {
	width: 30%;
}

.blk_sns li figure figcaption {
	font-size: clamp(1rem, 0rem + 2.667vi, 2rem);
	line-height: 1.2;
	color: #d76974;
	text-align: center;
	margin-top: 5%;
}

#sns-footer .notice {
	border-top: solid 3px #d76974;
	font-size: clamp(1.3rem, 0rem + 3.467vi, 2.6rem);
	color: #d76974;
	margin-top: 15%;
	padding-top: 4%;
}

@media (max-width: 750px) {
	#sns-footer .notice {
		border-top: solid 2px #d76974;
	}
}

/* -----------------------------------------
contents
-----------------------------------------*/
#container {
	margin: auto;
	width: 100%;
	max-width: 750px;
	overflow: hidden;
}

#contents {
	margin: auto;
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	line-height: 1.6;
	font-size: 30px;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	display: block;
	font-feature-settings: "palt";
	color: #000;
}

@media (max-width: 750px) {
	#contents {
		font-size: 3.45vw;
	}
}

#contents img {
	width: 100%;
}

/*--------------------------------------------------------------
Component
--------------------------------------------------------------*/
.evt {
	visibility: hidden;
}

.evt.done {
	visibility: visible;
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeUp {
	from {
		opacity: 0;
		transition-duration: 0.5s;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transition-duration: 0.5s;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}

.fadeUp {
	-webkit-animation-name: fadeUp;
	animation-name: fadeUp;
}

.scroll_fixed {
	position: relative;
}

.scroll_fixed.scrolling > .fixed_bg {
	position: fixed;
}

/*--------------------------------------------------------------

--------------------------------------------------------------*/
.lp_main {
	/* background: #a9d2ca; */
	text-align: center;
	width: 100%;
	max-width: 750px;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: url(../img/250624/mask.webp) no-repeat center top/100%;
	padding-top: 167.07%;
}

.lp_main-inner {
	position: relative;
}

.lp_main-inner .floor {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.lp_main .fixed_bg {
	position: fixed;
	z-index: -3;
	overflow: hidden;
}

.lp_main .fixed_bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transform: scale(1.2);
	transition: transform 0.8s;
}

.lp_main .fixed_bg.show img {
	transform: none;
}

.fixed_bg {
	position: absolute;
	left: 50%;
	translate: -50% 0;
	z-index: -3;
	width: 100%;
	max-width: 750px;
	height: 100vh;
	top: 0;
	object-fit: cover;
	object-position: center top;
}

.c_full {
	min-height: calc(10vh - 50px);
}

.lp_lead {
	text-align: center;
	color: #fff;
	padding: 40% 0 60%;
}

.lp_lead .box {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

.lp_lead .ttl img {
	width: 56.93% !important;
}

.lp_lead p {
	margin-top: 1.6em;
	font-size: clamp(1.7rem, 0rem + 4.533vi, 3.4rem);
	line-height: 1.61;
	font-weight: bold;
	letter-spacing: 0.05em;
	font-family: "Noto Sans", sans-serif;
	font-weight: 500;
}

.lp_lead p span {
	display: block;
}

.lp_contemporary {
	position: relative;
	z-index: 0;
	background: #a9d2ca;
	text-align: center;
	overflow: hidden;
	padding: 15% 0 40%;
}

.lp_contemporary .ttl {
	position: relative;
	z-index: 1;
}

.lp_contemporary .ttl img {
	width: 100%;
}

.lp_contemporary .catch {
	max-width: 76.6rem;
	margin-left: -3.6rem;
	margin-top: -4rem;
}

.lp_contemporary p {
	font-size: 3.6rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	margin-top: -11rem;
}

.lp_contemporary .box {
	height: 100%;
}

.lp_contemporary .box.show * {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.lp_movie {
	height: 200vh;
	position: relative;
}

.lp_movie .movie_wrap {
	height: 100vh;
}

.lp_movie:not(.scrolling) .movie_wrap img {
	opacity: 0;
}

.movie_wrap img {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 100%;
	opacity: 0;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.movie_wrap img.show {
	opacity: 1;
}

.lp_item01 {
	position: relative;
	background: #a9d2ca;
	padding: 1px 6.668% 17%;
	color: #153b57;
	z-index: 1;
	/* overflow: hidden; */
}

.lp_item01 .ttl {
	margin: 8% 0 5%;
	display: block;
	text-align: left;
	width: 100%;
}

.lp_item01 .ttl img {
	width: 100%;
}

/* .lp_item01 .ei{
  margin-left: -1rem;
} */

.lp_item01 figure {
	margin: 0 -1.5rem -3rem;
}

.lp_item01 p {
	font-size: clamp(1.5rem, 0rem + 4vi, 3rem);
	font-weight: bold;
	line-height: 1.66;
	margin-bottom: 1em;
	font-family: "Noto Sans", sans-serif;
	font-weight: 500;
}

.lp_item01 .spe {
	margin-bottom: 2rem;
}

.lp_item01 li {
	font-size: clamp(1.2rem, 0rem + 3.2vi, 2.4rem);
	line-height: 1.75;
	font-family: "Inter", "Noto Sans", sans-serif;
	font-weight: 400;
	font-feature-settings: "palt";
}

.lp_item01 li em,
.lp_item01 li i {
	font-weight: 300;
}

.lp_item01 .fb {
	font-weight: 500;
	font-family: "Noto Sans", sans-serif;
    margin-bottom: 1rem;
}

.bg_figure01 {
	/* background-color: #a9d2ca; */
	text-align: center;
	padding: 0 4%;
	position: relative;
	z-index: 1;
}

.blk_recommend {
	position: relative;
	z-index: 1;
	background-color: #a9d2ca;
	margin: 0 auto;
	padding: 0 16%;
}

.blk_recommend .title {
	margin-bottom: 10%;
}

.blk_recommend .bg_figure01 {
	position: relative;
	z-index: 10;
	padding: 0;
}

.blk_recommend .lp_item01 {
	padding: 5% 0 20%;
}

.lp_unidentified {
	position: relative;
	z-index: 0;
	/* background: #78a7cf; */
	text-align: center;
	/* overflow: hidden; */
	padding: 15% 0 40%;
}

.lp_unidentified .ttl img {
	width: 100%;
}

.lp_unidentified .catch {
	max-width: 76.6rem;
	margin-left: -3.6rem;
	margin-top: -4rem;
}

.lp_unidentified p {
	font-size: 3.6rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	margin-top: -11rem;
}

.lp_unidentified .box {
	height: 100%;
}

.lp_unidentified .box.show * {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.lp_item02 {
	/* background: #78a7cf; */
	padding: 1px 6.668% 17%;
	color: #153b57;
}

.lp_item02 .ttl {
	margin: 8% 0 5%;
	display: block;
	text-align: left;
	width: 100%;
}

.lp_item02 .ttl img {
	width: 100%;
}

/* .lp_item02 .ei{
  margin-left: -1rem;
} */

.lp_item02 figure {
	margin: 0 -1.5rem -3rem;
}

.lp_item02 p {
	font-size: clamp(1.5rem, 0rem + 4vi, 3rem);
	font-weight: bold;
	line-height: 1.66;
	margin-bottom: 1em;
	font-family: "Noto Sans", sans-serif;
	font-weight: 500;
}

.lp_item02 .spe {
	margin-bottom: 2rem;
}

.lp_item02 li {
	font-size: clamp(1.2rem, 0rem + 3.2vi, 2.4rem);
	line-height: 1.75;
	font-family: "Inter", "Noto Sans", sans-serif;
	font-weight: 400;
	font-feature-settings: "palt";
}

.lp_item02 li em,
.lp_item02 li i {
	font-weight: 300;
}

.lp_item02 .fb {
	font-weight: 500;
	font-family: "Noto Sans", sans-serif;
    margin-bottom: 1rem;
}

.bg_figure02 {
	/* background-color: #78a7cf; */
	text-align: center;
	padding: 0 4%;
}

.lp_item03 {
	background: #fff;
	color: #d76974;
	margin: 0 16.667%;
}

.lp_item03:not(:last-child) {
	margin-bottom: 10%;
}

section {
	transition: background-color 0.5s ease, color 0.5s ease;
}

section.color1 {
	position: relative;
	background-color: #a9d2ca;
	z-index: 1;
}

section.color2 {
	position: relative;
	background-color: #78a7cf;
	z-index: 1;
}

section.color3 {
	position: relative;
	background-color: #fff;
	z-index: 1;
}

.bg_3-inner {
	background-image: url(../img/250624/bg04.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0px 80%;
	padding-bottom: 30%;
}
@media (max-width: 750px) {
	.bg_3-inner {
		background-position: 0px 70%;
	}
}

.bg_3 .h-sec03 {
	margin: 0 16.667% 7%;
}

.lp_item03-inner {
	padding: 5%;
}

.sec03_ttl {
	font-size: clamp(2rem, 0rem + 5.333vi, 4rem);
	line-height: 1.2;
    font-weight: 500;
    padding-bottom: 1rem;
}

.sec03_caption {
	font-size: clamp(1.4rem, 0rem + 3.733vi, 2.8rem);
}

.sec03_caption span {
	font-size: clamp(1.1rem, 0rem + 2.933vi, 2.2rem);
}

.border {
	border-bottom: dotted 1px #d76974;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

.deco01 {
	position: absolute;
	bottom: -9%;
	right: -14%;
	width: 73.67%;
	opacity: 0.8;
}

.deco02 {
	position: absolute;
	bottom: -22%;
	left: -11%;
	width: 49.07%;
	z-index: -1;
	opacity: 0.8;
}

.deco03 {
	position: absolute;
	top: -40%;
	right: -50%;
	width: 100%;
	z-index: -1;
	opacity: 0.8;
}

.deco04 {
	position: absolute;
	top: -15%;
	right: -35%;
	width: 85%;
	z-index: -1;
	opacity: 0.8;
}

.deco05 {
	position: absolute;
	bottom: 15%;
	left: -50%;
	width: 85.07%;
	z-index: -1;
	opacity: 1;
}

.deco06 {
	position: absolute;
	bottom: -7%;
	right: -35%;
	width: 84.67%;
	opacity: 0.8;
}