/**
 *
 * page-about.scss
 *
 */
/* ------------------------------------------------------------
 about-intro
------------------------------------------------------------ */
.about-intro {
	position: relative;
}

/* ----------------------------------------
 about-intro__hero
---------------------------------------- */
.about-intro__hero {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-intro__hero {
		padding: 34rem 0 55.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__hero {
		padding: 18.9rem 0 44.4rem ;
	}
}

/* ---------- about-intro__hero__catch ---------- */
.about-intro__hero__catch {
	font-family: var(--font-mincho);
	font-weight: 500;
	letter-spacing: 0.12em;
}

@media screen and (min-width: 1024px) {
	.about-intro__hero__catch {
		font-size: var(--font-size44);
		margin-left: 18.66667%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__hero__catch {
		font-size: var(--font-size26);
		margin-left: 24.5%;
	}
}

.about-intro__hero__catch span {
	display: block;
}

@media screen and (min-width: 1024px) {
	.about-intro__hero__catch span + span {
		margin-top: 3.8rem ;
		margin-left: 6.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__hero__catch span + span {
		margin-top: 2.4rem ;
	}
}

/* ---------- about-intro__hero__txt ---------- */
.about-intro__hero__txt {
	font-family: var(--font-mincho);
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@media screen and (min-width: 1024px) {
	.about-intro__hero__txt {
		font-size: var(--font-size22);
		margin-top: 3.4rem ;
		margin-left: 58.53333%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__hero__txt {
		font-size: var(--font-size16);
		margin-top: 6.3rem ;
		margin-left: 23.25%;
	}
}

.about-intro__hero__txt > span {
	display: block;
}

@media screen and (min-width: 1024px) {
	.about-intro__hero__txt > span + span {
		margin-top: 2.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__hero__txt > span + span {
		margin-top: 2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-intro__hero__txt > span:nth-of-type(2) {
		margin-left: 2.7rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-intro__hero__txt > span:nth-of-type(3) {
		margin-left: 5.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__hero__txt .-sp {
		display: block;
		margin-top: 2.1rem ;
	}
}

/* ---------- about-intro__hero__illust ---------- */
@media screen and (min-width: 1024px) {
	.about-intro__hero__illust-1 {
		--width: 728;
		--left: 152;
		--bottom: 0;
	}
	.about-intro__hero__illust-2 {
		--width: 61;
		--top: 65;
		--left: 376;
	}
	.about-intro__hero__illust-3 {
		--width: 65;
		--top: 71;
		--right: 331;
	}
	.about-intro__hero__illust-4 {
		--width: 26;
		--top: 117;
		--right: 134;
	}
	.about-intro__hero__illust-5 {
		--width: 26;
		--top: 478;
		--left: 85;
	}
	.about-intro__hero__illust-6 {
		--width: 17;
		--top: 589;
		--left: 200;
	}
	.about-intro__hero__illust-7 {
		--width: 40;
		--top: 567;
		--left: 748;
	}
	.about-intro__hero__illust-8 {
		--width: 81;
		--left: -28;
		--bottom: 437;
	}
	.about-intro__hero__illust-9 {
		--width: 59;
		--right: 327;
		--bottom: 115;
	}
	.about-intro__hero__illust-10 {
		--width: 26;
		--right: 77;
		--bottom: 64;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__hero__illust-1 {
		--width: 427;
		--left: -4;
		--bottom: 82;
	}
	.about-intro__hero__illust-2 {
		--width: 35;
		--top: -8;
		--left: 136;
	}
	.about-intro__hero__illust-3 {
		--width: 38;
		--top: 92;
		--right: 48;
	}
	.about-intro__hero__illust-4 {
		--width: 15;
		--top: 165;
		--right: 5;
	}
	.about-intro__hero__illust-5 {
		--width: 15;
		--left: -9;
		--bottom: 476;
	}
	.about-intro__hero__illust-6 {
		--width: 10;
		--left: 27;
		--bottom: 388;
	}
	.about-intro__hero__illust-7 {
		--width: 23;
		--right: -14;
		--bottom: 370;
	}
	.about-intro__hero__illust-8 {
		--width: 47;
		--left: 32;
		--bottom: 21;
	}
	.about-intro__hero__illust-9 {
		--width: 34;
		--right: 42;
		--bottom: 0;
	}
	.about-intro__hero__illust-10 {
		--width: 27;
		--right: 14;
		--bottom: -114;
	}
}

/* ----------------------------------------
 about-intro__block-1
---------------------------------------- */
.about-intro__block-1 {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-intro__block-1 {
		margin-top: 21rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-1 {
		margin-top: 6rem ;
		padding-bottom: 26.4rem ;
	}
}

.about-intro__block-1__txt {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.about-intro__block-1__txt {
		margin-left: 13.33333%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-1__txt {
		width: 65%;
		margin-left: 8.75%;
	}
}

/* ---------- about-intro__block-1__illust ---------- */
.about-intro__block-1__illust-1 > * {
	--base-width: 457;
	--base-height: 448;
}

@media screen and (min-width: 1024px) {
	.about-intro__block-1__illust-1 {
		--width: 457;
		--right: 120;
		--bottom: 0;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-1__illust-1 {
		--width: 226;
		--right: 45;
		--bottom: 0;
	}
}

.about-intro__block-1__illust-2 {
	--width: 159;
	--top: 10;
	--left: -112;
	--bottom: auto;
}

.about-intro__block-1__illust-3 {
	--width: 136;
	--top: -10;
	--left: auto;
	--right: -111;
	--bottom: auto;
}

.about-intro__block-1__illust-4 {
	--width: 175;
	--top: auto;
	--left: -29;
	--bottom: -34;
}

/* ----------------------------------------
 about-intro__block-2
---------------------------------------- */
.about-intro__block-2 {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-intro__block-2 {
		margin-top: 20.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-2 {
		margin-top: 7.4rem ;
		padding-bottom: 26.6rem ;
	}
}

.about-intro__block-2__txt {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.about-intro__block-2__txt {
		margin-left: 30.66667%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-2__txt {
		width: 65%;
		margin-left: 17.25%;
	}
}

/* ---------- about-intro__block-2__illust ---------- */
@media screen and (min-width: 1024px) {
	.about-intro__block-2__illust-1 {
		--width: 286;
		--right: 152;
		--bottom: -7;
	}
	.about-intro__block-2__illust-2 {
		--width: 140;
		--left: -81;
		--bottom: 328;
	}
	.about-intro__block-2__illust-3 {
		--width: 72;
		--left: 104;
		--bottom: 215;
	}
	.about-intro__block-2__illust-4 {
		--width: 89;
		--left: 214;
		--bottom: 51;
	}
	.about-intro__block-2__illust-5 {
		--width: 32;
		--left: 329;
		--bottom: 200;
	}
	.about-intro__block-2__illust-6 {
		--width: 23;
		--right: 108;
		--bottom: 251;
	}
	.about-intro__block-2__illust-7 {
		--width: 69;
		--right: -23;
		--bottom: 32;
	}
	.about-intro__block-2__illust-8,
	.about-intro__block-2__illust-9 {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-2__illust-2,
	.about-intro__block-2__illust-4,
	.about-intro__block-2__illust-7 {
		display: none !important;
	}
	.about-intro__block-2__illust-1 {
		--width: 178;
		--left: 111;
		--bottom: 0;
	}
	.about-intro__block-2__illust-3 {
		--width: 48;
		--right: 40;
		--bottom: 53;
	}
	.about-intro__block-2__illust-5 {
		--width: 22;
		--right: 106;
		--bottom: 176;
	}
	.about-intro__block-2__illust-6 {
		--width: 14;
		--left: 124;
		--bottom: 189;
	}
	.about-intro__block-2__illust-8 {
		--width: 51;
		--left: 40;
		--bottom: 36;
	}
	.about-intro__block-2__illust-9 {
		--width: 20;
		--left: 89;
		--bottom: 166;
	}
}

/* ----------------------------------------
 about-intro__block-3
---------------------------------------- */
.about-intro__block-3 {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-intro__block-3 {
		margin-top: 23.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-3 {
		margin-top: 5.4rem ;
		padding-bottom: 30.5rem ;
	}
}

.about-intro__block-3__txt {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.about-intro__block-3__txt {
		margin-left: 48.26667%;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-3__txt {
		width: 65%;
		margin-left: 25.75%;
	}
}

/* ---------- about-intro__block-3__illust ---------- */
@media screen and (min-width: 1024px) {
	.about-intro__block-3__illust-1 {
		--width: 786;
		--left: -20;
		--bottom: -50;
	}
}

@media screen and (max-width: 1023px) {
	.about-intro__block-3__illust-1 {
		--width: 340;
		--left: -23;
		--bottom: 0;
	}
}

/* ------------------------------------------------------------
 about-feature
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.about-feature {
		margin-top: 38.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature {
		margin-top: 10rem ;
	}
}

.about-feature__inner {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-feature__inner {
		--base-width: 1310;
		padding: 0 0.5rem ;
	}
}

/* ----------------------------------------
 about-feature__header
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.about-feature__header {
		padding: 0 4.58015%;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__header {
		padding: 0 8.88889%;
	}
}

/* ----------------------------------------
 about-feature__illust
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.about-feature__illust {
		--width: 556;
		--top: -131;
		--left: 395;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__illust {
		max-width: 34.5rem ;
		width: 100%;
		margin-inline: auto;
		margin-top: 3.4rem ;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.about-feature__illust {
		max-width: 48.3rem ;
	}
}

@media screen and (max-width: 560px) {
	.about-feature__illust {
		max-width: 34.5rem ;
	}
}

.about-feature__illust__2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.about-feature__illust__2 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	-webkit-animation: water var(--animation-water);
	animation: water var(--animation-water);
}

.about-feature__illust__2 img:nth-of-type(1) {
	-webkit-animation-delay: 100ms;
	animation-delay: 100ms;
}

.about-feature__illust__2 img:nth-of-type(2) {
	-webkit-animation-delay: 200ms;
	animation-delay: 200ms;
}

.about-feature__illust__2 img:nth-of-type(3) {
	-webkit-animation-delay: 300ms;
	animation-delay: 300ms;
}

.about-feature__illust__2 img:nth-of-type(4) {
	-webkit-animation-delay: 400ms;
	animation-delay: 400ms;
}

.about-feature__illust__2 img:nth-of-type(5) {
	-webkit-animation-delay: 500ms;
	animation-delay: 500ms;
}

.about-feature__illust__2 img:nth-of-type(6) {
	-webkit-animation-delay: 600ms;
	animation-delay: 600ms;
}

.about-feature__illust__3,
.about-feature__illust__4,
.about-feature__illust__5,
.about-feature__illust__6 {
	--base-width: 556;
	--base-height: 588;
}

.about-feature__illust__3 {
	--width: 185;
	--top: 33;
	--left: 14;
}

.about-feature__illust__4 {
	--width: 139;
	--top: 195;
	--left: 0;
}

.about-feature__illust__5 {
	--width: 159;
	--top: 1;
	--right: 100;
	--left: auto;
}

.about-feature__illust__6 {
	--width: 126;
	--top: 219;
	--right: 64;
}

/* ----------------------------------------
 about-feature__list
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.about-feature__list {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-top: 20.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__list {
		width: var(--contents-3xs);
		margin-inline: auto;
		margin-top: 5.8rem ;
	}
}

.about-feature__item {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-feature__item {
		width: 28.24427%;
	}
	.about-feature__item:nth-of-type(2) {
		margin-top: 26.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__item:nth-of-type(1) .about-feature__item__dashed {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__item + .about-feature__item {
		margin-top: 4.7rem ;
		padding-top: 2.6rem ;
	}
}

/* ----- about-feature__item__num ----- */
.about-feature__item__num {
	position: relative;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

@media screen and (min-width: 1024px) {
	.about-feature__item__num {
		margin-left: 0.7rem ;
	}
}

.about-feature__item__num__txt {
	position: absolute;
	z-index: 1;
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 500;
}

.about-feature__item__num__txt::before, .about-feature__item__num__txt::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.about-feature__item__num__txt::before {
	margin-top: var(--font-sans-serif-top);
}

.about-feature__item__num__txt::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.about-feature__item__num__txt {
		top: -0.3rem ;
		left: 0.1rem ;
		font-size: var(--font-size21);
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__item__num__txt {
		top: -0.8rem ;
		left: 0.3rem ;
		font-size: var(--font-size18);
	}
}

.about-feature__item__num__needle {
	display: block;
}

@media screen and (min-width: 1024px) {
	.about-feature__item__num__needle {
		width: 4.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__item__num__needle {
		width: 3.5rem ;
	}
}

/* ----- about-feature__item__title ----- */
.about-feature__item__title {
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.about-feature__item__title {
		margin-top: 0.8rem ;
	}
}

/* ----- about-feature__item__txt ----- */
.about-feature__item__txt {
	color: var(--color-txt7);
}

@media screen and (min-width: 1024px) {
	.about-feature__item__txt {
		margin-top: 3.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__item__txt {
		margin-top: 3.1rem ;
	}
}

/* ----- about-feature__item__dashed ----- */
@media screen and (min-width: 1024px) {
	.about-feature__item__dashed {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.about-feature__item__dashed {
		position: absolute;
		top: 0;
		right: 0;
		width: 71.85185%;
	}
}
/*# sourceMappingURL=sourcemaps/page-about.css.map */