@charset "utf-8";


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

	基本

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

html,
body {
	width: 100%;
	min-width: 1024px;
	font-size: 62.5%;
	background: var(--c-white);
}

.wrap {
	position: relative;
	min-width: 1024px;
	overflow: hidden;
}

@media only screen and (max-width:640px) {
	html,
	body {
		width: 640px;
		min-width: 640px;
		font-size: 106.67%;
	}

	.wrap {
		width: 640px;
		min-width: 640px;
		overflow: hidden;
	}
}

a {
	color: var(--c-text);
	text-decoration: none;
	transition: 0.4s;
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}

a img {
	transition: 0.4s;
}

@media (hover:hover) {
	a:hover img {
		opacity: 0.6 !important;
		transition: 0.4s;
	}
}

body,
input,
select,
textarea {
	font-family: 'Noto Sans JP', 'Segoe UI', Tahoma, Geneva, sans-serif;
	font-size: var(--fz-m);
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-feature-settings: "palt";
	color: var(--c-text);
	font-weight: var(--fw-regular);
}

/* セレクト時の色指定 */
::selection {
	background: var(--c-yellow);
	color: var(--c-text);
}

::-moz-selection {
	background: var(--c-yellow);
	/*Firefox*/
	color: var(--c-text);
}

.showPc {}

.showSp {
	display: none;
}

@media only screen and (max-width:640px) {
	.showPc {
		display: none !important;
	}

	.showSp {
		display: block;
	}
}


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

	fonts

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

:root {
    --ff-alphanum: "Roboto", sans-serif;

	--fz-xs: 1.2rem;
    --fz-s: 1.4rem;
    --fz-m: 1.6rem;
    --fz-l: 1.8rem;
    --fz-xl: 2.0rem;
    --fz-xxl: 2.4rem;
	--fz-3xl: 3.0rem;

	/* ヘッダーロゴ */
	--fz-headerLogo: 2.0rem;

	/* ファーストビュー リード分 */
	--fz-lead: 2.4rem;

	/* 共通パーツ */
	--fz-profileCatch: 2.4rem;
	--fz-profileName: 3.6rem;
	--fz-isaiWords__title: 1.4rem;
	--fz-isaiWords: 1.8rem;
	--fz-peopleTitle: 2.4rem;
	--fz-copyRight: 1.5rem;

    --fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semiBold: 600;
    --fw-bold: 700;
}

.-alphanum {
	font-family: var(--ff-alphanum);
	font-weight: var(--fw-medium);
}

@media only screen and (max-width:640px) {
	:root {
		--fz-xs: 1rem;
		--fz-s: 1.2rem;
		--fz-m: 1.5rem;
		--fz-l: 1.6rem;
		--fz-xl: 1.8rem;
		--fz-xxl: 2.0rem;
		--fz-3xl: 2.6rem;

		/* ヘッダーロゴ */
		--fz-headerLogo: 1.6rem;

		/* ファーストビュー リード分 */
		--fz-lead: 1.2rem;

		/* 共通パーツ */
		--fz-profileCatch: 1.8rem;
		--fz-profileName: 3.0rem;
		--fz-isaiWords: 1.6rem;
		--fz-peopleTitle: 1.8rem;
		--fz-copyRight: 1.0rem;
	}
}


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

	color

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

:root {
	--c-text: #262626;
	--c-white: #f2f2f2;
	--c-gray: #595959;
	--c-purple: #5e498c;
	--c-yellow: #d9cc1f;
	--c-pink: #f32e63;
}


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

	animation

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

.fadeIn,
.fromBottom {
	opacity: 0;
}

.anime.is-animated.fadeIn,
.anime.is-animated .fadeIn {
	animation-name: anime_fadeIn;
	animation-delay: 0.0s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.anime.is-animated.fromBottom,
.anime.is-animated .fromBottom {
	animation-name: anime_fadeInFromBottom;
	animation-delay: 0.0s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.anime.is-animated.blur,
.anime.is-animated .blur {
    animation: anime_blurIn 0.9s ease-out forwards;
    filter: blur(10px);
}

@keyframes anime_fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes anime_fadeInFromBottom {
	0% {
		opacity: 0;
		transform: translateY(4rem) translateX(0) scale(1);
	}

	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) scale(1);
	}
}

@keyframes anime_blurIn {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}


/* 遅延で順に表示、スマホでは解除 */
.pcDelay-02 {
	animation-delay: 0.2s;
}

.pcDelay-04 {
	animation-delay: 0.4s;
}

.pcDelay-06 {
	animation-delay: 0.6s;
}

.pcDelay-08 {
	animation-delay: 0.8s;
}

.pcDelay-10 {
	animation-delay: 1.0s;
}

@media only screen and (max-width:640px) {
	.pcDelay-02,
	.pcDelay-04,
	.pcDelay-06,
	.pcDelay-08,
	.pcDelay-1 {
		animation-delay: 0s;
	}
}


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

	共通

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

/* --- ボタン -------------------------------------- */

.linkBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 2.5rem 8rem 2.5rem 6rem;
	margin: 0 auto;
    line-height: 1.0;
    text-align: center;
    color: var(--c-white);
    font-size: var(--fz-m);
    font-weight: var(--fw-bold);
    background-color: var(--c-text);
    border: solid 1px #d9cc1f;
    transition: 0.4s;
}

/* 右矢印 */
.c-arrow-right {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-block: auto;
    right: 4.2rem;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
	background-color: var(--c-white);
    mask: url("../_image/common/arrow-right.svg") no-repeat center;
	mask-size: contain;
    transition: 0.4s;
}

@media (hover:hover) {
    .linkBtn:hover {
        color: var(--c-text);
        background-color: var(--c-yellow);
    }

    .linkBtn:hover .c-arrow-right {
        background-color: var(--c-text);
        transition: 0.4s;
    }
}

@media only screen and (max-width:640px) {
	.linkBtn {
		width: 90%;
		font-size: 1.4rem;
	}
}


/* --- 背景の装飾 -------------------------------------- */

.bg__img {
	position: relative;
}

#index .bg__img.img01,
#index .bg__img.img02 {
	z-index: 11;
}

#index .bg__img.img04 {
	z-index: 0;
}

.bg__img::before {
	content: "";
	position: absolute;
	height: auto;
	pointer-events: none;
}

.bg__img.img01::before {
	top: 1rem;
	left: 0;
	width: 645px;
	min-width: 375px;
	aspect-ratio: 645 / 316;
	background: url("../_image/common/bg01.svg") no-repeat top left / contain;
}

.bg__img.img02::before {
	top: -20rem;
	right: 0;
	width: 690px;
	min-width: 480px;
	aspect-ratio: 690 / 383;
	background: url("../_image/common/bg02.svg") no-repeat top left / contain;
}

#index .bg__img.img02::before {
	top: -40rem;
}

.bg__img.img03::before {
	top: -8rem;
	left: 0;
	width: 463px;
	min-width: 390px;
	aspect-ratio: 463 / 411;
	background: url("../_image/common/bg03.svg") no-repeat top left / contain;
	z-index: 1;
}

.bg__img.img04::before {
	bottom: -22rem;
	right: -8rem;
	width: 611px;
	min-width: 500px;
	aspect-ratio: 611 / 632;
	background: url("../_image/common/bg04.svg") no-repeat top left / contain;
}

#index .bg__img.img04::before {
	top: -30rem;
	bottom: auto;
	right: 0;
	width: 510px;
	min-width: 350px;
	aspect-ratio: 510 / 632;
	background: url("../_image/common/bg04-index.svg") no-repeat top left / contain;
}

.bg__img.img05::before {
	top: -20rem;
	left: 0;
	width: 476px;
	min-width: 370px;
	aspect-ratio: 476 / 711;
	background: url("../_image/common/bg05.svg") no-repeat top left / contain;
}

.bg__img.img06::before {
	bottom: 0;
	right: 0;
	width: 571px;
	min-width: 450px;
	aspect-ratio: 571 / 338;
	background: url("../_image/common/bg06.svg") no-repeat top left / contain;
}

@media (max-width: 1500px) and (min-width: 1025px) {
	.bg__img.img01::before {
		width: calc(35vw);
	}

	.bg__img.img02::before {
		right: -7%;
		width: calc(40vw);
	}

	.bg__img.img03::before {
		left: -2rem;
		width: calc(25vw);
	}

	.bg__img.img04::before {
		bottom: -15rem;
		width: calc(40vw);
	}

	#index .bg__img.img04::before {
		top: -30rem;
		bottom: auto;
		right: -3%;
		width: calc(28vw);
	}

	.bg__img.img05::before {
		width: calc(30vw);
	}

	.bg__img.img06::before {
		right: -2rem;
		width: calc(40vw);
	}
}

@media (max-width: 1300px) {
	#index .bg__img.img04::before {
		top: -25rem;
		right: -5%;
	}
}

@media (max-width: 1024px) {
	.bg__img.img01::before {
		width: 375px;
	}

	#index .bg__img.img01::before {
		top: -10rem;
	}

	.bg__img.img02::before {
		right: -7%;
		width: 480px;
	}

	#index .bg__img.img02::before {
		top: auto;
		bottom: 3rem;
	}

	.bg__img.img03::before {
		left: -2rem;
		width: 390px;
	}

	.bg__img.img04::before {
		width: 500px;
	}

	#index .bg__img.img04::before {
		top: -17rem;
		width: 270px;
		min-width: 0;
	}

	.bg__img.img05::before {
		width: 370px;
	}

	.bg__img.img06::before {
		right: -5rem;
		width: 450px;
	}
}

@media only screen and (max-width:640px) {
	.bg__img.img01 {
		z-index: 1;
	}

	.bg__img.img01::before {
		top: 0;
		left: -3rem;
		width: 545px;
	}

	.bg__img.img02::before {
		top: auto;
		bottom: -3rem;
		width: 420px;
		min-width: 0;
	}

	.bg__img.img03::before {
		top: -3rem;
		left: auto;
		right: 0;
		width: 357px;
		min-width: 0;
		aspect-ratio: 357 / 260;
		background: url("../_image/common/bg03-sp.svg") no-repeat top left / contain;
	}

	.bg__img.img04::before {
		bottom: -6rem;
		right: -2rem;
		width: 360px;
		min-width: 0;
	}

	.bg__img.img05::before {
		top: -10rem;
		width: 320px;
		min-width: 0;
	}

	.bg__img.img06::before {
		bottom: 16rem;
		right: 0;
		width: 400px;
		min-width: 0;
	}
}