@charset "utf-8";
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #EFEFEF;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
}
.loading_logo {
		width: 150px;
		text-align: center;
		font-size: 18px;
		color: #EB6100;
		letter-spacing: 0;
		font-family: Arial, Helvetica, "sans-serif";
}
.loading_logo img {
		width: 100%;
		height: auto;
}
@keyframes bouceball {
		0% {
				transform: bouceball(1);
				opacity: 1;
		}
		45% {
				transform: bouceball(0.1);
				opacity: 0.7;
		}
		80% {
				transform: bouceball(1);
				opacity: 1;
		}
}
.ball-bounce > div:nth-child(1) {
		animation: bouceball 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-bounce > div:nth-child(2) {
		animation: bouceball 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-bounce > div:nth-child(3) {
		animation: bouceball 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-bounce > div {
		background: #EB6100;
		width: 15px;
		height: 15px;
		border-radius: 100%;
		margin: 2px;
		animation-fill-mode: both;
		display: inline-block;
}
@keyframes ball-bounce-sync {
		33% {
				transform: translateY(10px);
		}
		66% {
				transform: translateY(-10px);
		}
		100% {
				transform: translateY(0);
		}
}
.ball-bounce-sync > div:nth-child(1) {
		animation: ball-bounce-sync 0.6s -0.14s infinite ease-in-out;
}
.ball-bounce-sync > div:nth-child(2) {
		animation: ball-bounce-sync 0.6s -0.07s infinite ease-in-out;
}
.ball-bounce-sync > div:nth-child(3) {
		animation: ball-bounce-sync 0.6s 0s infinite ease-in-out;
}
.ball-bounce-sync > div {
		background: #EB6100;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		margin: 1px;
		animation-fill-mode: both;
		display: inline-block;
}
.loader_flex {
		display: flex;
		justify-content: center;
		margin-top: 15px;
}
.first_section {
		padding-bottom: 80px;
}
.kv {
		position: relative;
		background-repeat: no-repeat;
		background-position: right top;
		background-size: 100%;
		background-image: url("../images/kv_main-min_pc.jpg");
		height: 54.2vw;
}
.kv img {
		width: 100%;
		height: auto
}
.kv_left {
		width: 50vw;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 10
}
.kv.full .kv_left {
		height: 100vh;
}
.kv.basic .kv_left {
		aspect-ratio: 1 / 1;
}
.kv_catch {
		width: 32vw;
		display: none;
		position: relative;
		top: -8%;
}
.kv_left .kv_logo_wrap {
		width: 100%;
		position: absolute;
		bottom: 70px;
		left: 0;
}
.kv_logo_wrap {
		display: none;
}
.kv_logo {
		width: 20.8vw;
		margin: 0 auto;
}
.kv_notes {
		padding: 20px 30px;
		margin: 0 auto;
}
@media(max-width: 767px) {
		.first_section {
				height: auto;
				padding-bottom: 30px;
				margin-top: 70px;
		}
		.kv {
				height: 133.3vw;
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 100%;
				background-image: url("../images/kv_main_sp.jpg");
		}
		.kv_left {
				width: 100%;
				height: 100%;
				display: block;
		}
		.kv_left .kv_catch {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 50vw;
				/* background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 100%;
				background-image: url("../images/kv_catch_sp.png"); */
				z-index: 5
		}
		/*
		.kv_catch img {
				opacity: 0
		} */
		.kv .kv_mark_sp {
				position: absolute;
				width: 70px;
				right: 25px;
				bottom: 20px;
		}
		.kv_mark_sp img {
				width: 100%;
				height: auto;
		}
		.kv_logo_wrap {
				display: none !important
		}
		.first_logo {
				width: 45vw;
				margin: 0 auto 120px
		}
		.first_logo img {
				width: 100%;
				height: auto;
		}
}
.kv .kv_line {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		pointer-events: none;
		height: 54.2vw;
}
.kvPathPC {
		fill: none;
		stroke: #FFFFFF;
		stroke-width: 3;
		/* 線を隠しておく */
		stroke-dasharray: 7000;
		stroke-dashoffset: 7000;
		transition: stroke-dashoffset 9s cubic-bezier(0.16, 1, 0.3, 1);
}
.kvPathSP {
		fill: none;
		stroke: #FFFFFF;
		stroke-width: 2;
		stroke-dasharray: 3000;
		stroke-dashoffset: 3000;
		transition: stroke-dashoffset 2s ease;
}
/* ローディング終了後 */
.kv.isStart .kvPathPC, .kv.isStart .kvPathSP {
		stroke-dashoffset: 0;
}
@media(min-width: 768px) {
		.kvSvgSP {
				display: none
		}
}
@media(max-width: 767px) {
		.kvSvgPC {
				display: none
		}
}
/* ========== */
.introduction_section {
		position: relative;
		padding-top: 0;
		margin-top: 200px;
}
.introduction_section .intro_line {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		pointer-events: none
}
@media(max-width: 767px) {
		.introduction_section .intro_line.introLinePC {
				display: none !important
		}
}
.introduction_section .intro_line svg {
		display: block;
		width: 100%;
		height: auto;
		pointer-events: none
}
.pathPC {
		fill: none;
		stroke: #fff;
		stroke-width: 2;
}
.pathSP {
		fill: none;
		stroke: #fff;
		stroke-width: 1;
}
@media(min-width: 768px) {
		.intro_line.introLineSP {
				display: none
		}
}
@media(max-width: 767px) {
		.introduction_flex_gr {
				position: relative;
		}
		.introduction_flex_gr .intro_line.introLineSP {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				z-index: 0;
		}
}
/* ==================== */
.introduction_section img {
		width: 100%;
		height: auto
}
.introduction_flex {
		display: flex;
		align-items: center;
		width: 100%;
}
.introduction_caption {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
}
.introduction_flex.introduction-2, .introduction_flex.introduction-3, .introduction_flex.introduction-4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
}
.introduction-2 .introduction_caption {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 46.8vw;
		flex: initial;
}
.introduction-3 .introduction_caption {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 47.9vw;
		flex: initial;
}
.introduction-4 .introduction_caption {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 46.8vw;
		flex: initial;
}
.introduction_caption p {
		font-size: 18px;
		line-height: 3.0;
		font-weight: 500;
		letter-spacing: 3px;
}
.introduction_catch {
		width: 462px;
}
@media(max-width: 1300px) {
		.introduction_catch {
				width: 370px;
		}
		.introduction_caption p {
				font-size: 16px;
		}
}
@media(min-width: 1921px) {
		.introduction_catch {
				width: 600px;
		}
		.introduction_caption p {
				font-size: 22px;
		}
}
.introduction_caption p + p {
		margin-top: 3.5em;
}
.introduction-1_bg {
		width: 50.6vw;
}
.introduction-2_bg {
		width: 43.4vw;
}
.introduction-3_bg {
		width: 46.8vw;
}
.introduction-4_bg {
		width: 47.9vw;
}
.introduction-1 {
		margin-bottom: -4.513vw;
}
.introduction-2 {
		margin-bottom: -4.236vw;
}
.introduction-3 {
		margin-bottom: -4.027vw;
}
@media(max-width: 960px) {
		.introduction_catch {
				width: 70%;
		}
		.introduction-2 .introduction_caption {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: auto;
				flex: 1;
				box-sizing: border-box;
				padding-left: 7.2vw;
		}
		.introduction_caption p {
				font-size: 15px;
				line-height: 2.0;
		}
		.introduction_caption p + p {
				margin-top: 1.5em;
		}
}
@media(max-width: 767px) {
		.introduction_section {
				margin-top: 0;
		}
		.introduction_flex.introduction-1, .introduction_flex.introduction-3 {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-start;
		}
		.introduction-1, .introduction-2, .introduction-3, .introduction-4 {
				margin-bottom: 0;
		}
		.introduction-1_bg, .introduction-2_bg, .introduction-3_bg, .introduction-4_bg {
				width: 100%;
		}
		.introduction-1 .introduction_caption {
				display: none
		}
		.introduction-3 .introduction_caption, .introduction-4 .introduction_caption {
				width: auto;
				display: block
		}
		.introduction_catch {
				width: 100%;
		}
		.introduction_flex.introduction-2, .introduction_flex.introduction-4 {
				display: block;
		}
		.introduction-2 .introduction_caption, .introduction-3 .introduction_caption, .introduction-4 .introduction_caption {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				position: relative;
				z-index: 5
		}
		.introduction-2 .introduction_caption {
				height: 102.666vw;
		}
		.introduction-3 .introduction_caption {
				height: 55.733vw;
		}
		.introduction-3 .introduction_caption {
				height: 56.2666vw;
		}
		.introduction-4 .introduction_caption {
				height: 55.466vw;
		}
		.introduction_caption p {
				line-height: 2.5;
				letter-spacing: 3px;
		}
		.introduction_caption p + p {
				margin-top: 15vw;
		}
}
svg line, svg path {
		filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.09));
}
@media(max-width: 767px) {
		svg line, svg path {
				filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
		}
}
.kv_catch {
		width: 32vw;
		display: none;
		position: relative;
		top: -8%;
}
.kv_catch picture, .kv_catch img {
		display: block;
		width: 100%;
}
.kv_catch .kv_catch_sp {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
}
.kv_catch svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
}
.kv_catch * {
		filter: drop-shadow(0px 0px 0 rgba(0, 0, 0, 0)) !important;
}
.kv_catch_mask .catchPC {
		fill: none;
		stroke: #EFEFEF;
		stroke-width: 32;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 10000;
		stroke-dashoffset: 0;
}
.kv.isStart .kv_catch_mask .catchPC {
		animation: signPC 3.5s linear forwards;
}
.kv_catch_sp * {
		width: 100%;
		height: auto;
}
@keyframes signPC {
		0% {
				stroke-dashoffset: 0;
		}
		30%, 50% {
				stroke-dashoffset: -4200;
		}
		100% {
				stroke-dashoffset: -10000;
		}
}
.kv_catch_sp {
		width: 100%;
		height: 400px;
		z-index: 10;
}
.lineMask {
		height: 400px;
		background: #ccc;
}
.kv_catch_sp * {
		width: 100%;
		height: auto
}
.kv_catch_sp .lineMask, .second_hdr svg {
		pointer-events: none;
}
.kv_catch_sp svg {
		height: 26.7vw
}
.lineMask img {
		width: 100%;
		height: auto
}
.maskLine {
		fill: none;
		stroke: #fff;
		stroke-width: 32;
		stroke-linecap: round;
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
}
.isStart .maskLine {
		animation: drawLine 1.7s linear forwards;
		animation-delay: 0.4s;
}
@keyframes drawLine {
		to {
				stroke-dashoffset: 0;
		}
		0% {
				stroke-dashoffset: 1000;
		}
		30%, 55% {
				stroke-dashoffset: 350;
		}
		100% {
				stroke-dashoffset: 0;
		}
}