@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++

	workflow.html

++++++++++++++++++++++++++++++++++++++++ */

#contents_nav .workflow {
	display: none;
}

#mv,
#mv .img::after {
	background: #cbe5df;
}

#mv {
	padding-bottom: calc(117 / 1200 * 100%);
}
#mv .en {
	right: calc(33 / 1200 * 100%);
	bottom: calc(25 / 646 * 100%);
	width: calc(572 / 1200 * 100%);
}

#mv .jp {
	right: 0;
	top: calc(222 / 646 * 100%);
	width: calc(307 / 1200 * 100%);
	height: calc(306 / 646 * 100%);
}
#mv .jp img {
	width: calc(182 / 307 * 100%);
	padding: calc(17 / 307 * 100%) 0 0 calc(99 / 307 * 100%);
}

#mv .border {
	right: 0;
	bottom: 100%;
	width: calc(200 / 307 * 100%);
}

#mv .img {
	width: calc(893 / 1200 * 100%);
}

section {
	position: relative;
	z-index: 1;
}
section::before {
	content: '';
	position: absolute;
	top: 0;
	z-index: 1;
	height: 100%;
	background: 0 0 / 100% no-repeat;
}
section h2,
section figure,
section p {
	position: relative;
	z-index: 1;
}
section p+p {
	margin-top: 2.25em;
}

section .lines div,
section .lines div::before {
	position: absolute;
	z-index: 1;
}
section>.lines div {
	top: 0;
}
section .lines div::before {
	content: '';
	left: 0;
	top: 0;
	background: #000;
}
section>.lines div:nth-child(1)::before,
section>.lines div:nth-child(2)::before,
section>.lines div:nth-child(5)::before,
section figure .lines div:nth-child(1)::before {
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: 100% 0;
}
section>.lines div:nth-child(3)::before,
section>.lines div:nth-child(4)::before,
section>.lines div:nth-child(6)::before,
section figure .lines div:nth-child(2)::before {
	width: 2px;
	height: 100%;
	transform: scaleY(0);
	transform-origin: 0 100%;
}

.start-animate .lines div::before {
	animation: widen .7s linear forwards;
}

.start-animate>.lines div:nth-child(3)::before,
.start-animate>.lines div:nth-child(4)::before,
.start-animate>.lines div:nth-child(6)::before,
.start-animate figure .lines div:nth-child(2)::before {
	animation-name: heighten;
}



/* ++++++++++++++++++++++++++++++++++++++++

	PC

++++++++++++++++++++++++++++++++++++++++ */

@media (min-width: 769px) {
	section h2,
	section p {
		position: relative;
		z-index: 2;
	}
	section h2 {
		padding-top: calc(36 / 1200 * 100%);
	}
	section figure {
		position: absolute;
		top: 0;
		z-index: 1;
	}

	section>.lines div:nth-child(1) {
		margin-top: calc(35 / 1200 * 100%);
	}
	section>.lines div:nth-child(2) {
		margin-top: calc(85 / 1200 * 100%);
	}
	section>.lines div:nth-child(4) {
		padding-top: calc(122/ 1200 * 100%);
	}

	section figure .lines div:nth-child(1) {
		margin-top: calc(10 / 1200 * 100vw);
		width: calc(240/ 1200 * 100vw);
	}

	.img_l figure .lines div:nth-child(1) {
		left: calc(-40/ 1200 * 100vw);
	}
	.img_l figure .lines div:nth-child(1)::before {
		transform-origin: 0 0;
	}

	.img_r figure .lines div:nth-child(1) {
		right: calc(-40/ 1200 * 100vw);
	}
	.img_r figure .lines div:nth-child(1)::before {
		right: 0;
	}

	section figure .lines div:nth-child(2) {
		height: calc(214/ 1200 * 100vw);
		bottom: calc(-45 / 1200 * 100vw);
	}

	.img_l figure .lines div:nth-child(2) {
		left: calc(-12/ 1200 * 100vw);
	}

	.img_r figure .lines div:nth-child(2) {
		right: calc(-12/ 1200 * 100vw);
	}

	section figure .lines div:nth-child(2)::before {
		transform-origin: 0 0;
	}


	/* ----------------------------------------
		step01
	---------------------------------------- */

	#step01>.lines div:nth-child(1),
	#step01>.lines div:nth-child(2) {
		left: calc(760 / 1200 * 100%);
	}
	#step01>.lines div:nth-child(1) {
		width: calc(226 / 1200 * 100%);
	}
	#step01>.lines div:nth-child(2) {
		width: calc(258 / 1200 * 100%);
	}
	#step01>.lines div:nth-child(3) {
		right: calc(247 / 1200 * 100%);
		padding-top: calc(340 / 1200 * 100%);
	}
	#step01>.lines div:nth-child(4) {
		right: calc(412 / 1200 * 100%);
	}

	#step01 h2 {
		width: calc(198 / 1200 * 100%);
		margin-left: calc(790 / 1200 * 100%);
	}
	#step01 figure,
	#step05 figure {
		width: calc(330 / 1200 * 100%);
	}
	#step01 figure {
		left: calc(235 / 1200 * 100%);
		margin-top: calc(85 / 1200 * 100%);
	}
	#step01 p {
		position: absolute;
		left: calc(630 / 1200 * 100%);
		top: 0;
		width: calc(280 / 1200 * 100%);
		margin-top: calc(140 / 1200 * 100%);
	}


	/* ----------------------------------------
		step02
	---------------------------------------- */

	#step02 {
		margin-top: calc(115 / 1200 * 100%);
	}
	#step02::before {
		left: calc(80 / 1200 * 100%);
		width: calc(739 / 1200 * 100%);
		background-image: url(../img/workflow/step02_bg_pc.svg);
	}

	#step02>.lines div:nth-child(1),
	#step03>.lines div:nth-child(1),
	#step04>.lines div:nth-child(1) {
		width: calc(241 / 1200 * 100%);
	}
	#step02>.lines div:nth-child(1),
	#step02>.lines div:nth-child(2) {
		right: calc(790 / 1200 * 100%);
	}
	#step02>.lines div:nth-child(2),
	#step03>.lines div:nth-child(2),
	#step04>.lines div:nth-child(2) {
		width: calc(309 / 1200 * 100%);
	}
	#step02>.lines div:nth-child(3) {
		left: calc(198 / 1200 * 100%);
		padding-top: calc(214 / 1200 * 100%);
	}
	#step02>.lines div:nth-child(4) {
		left: calc(378 / 1200 * 100%);
	}

	#step02 h2 {
		width: calc(239 / 1200 * 100%);
		margin-left: calc(140 / 1200 * 100%);
	}
	#step02 figure,
	#step03 figure,
	#step04 figure {
		width: calc(462 / 1200 * 100%);
	}
	#step02 figure {
		right: calc(150 / 1200 * 100%);
		margin-top: calc(160 / 1200 * 100%);
	}
	#step02 p {
		margin-left: calc(235 / 1200 * 100%);
		width: calc(340 / 1200 * 100%);
	}
	#step02 figure+p {
		margin-top: calc(-60 / 1200 * 100%);
	}
	#step02 p:last-child {
		width: calc(730 / 1200 * 100%);
	}


	/* ----------------------------------------
		step03
	---------------------------------------- */

	#step03 {
		margin-top: calc(80 / 1200 * 100%);
		padding-bottom: calc(160 / 1200 * 100%);
	}
	#step03::before {
		left: calc(335 / 1200 * 100%);
		width: calc(779 / 1200 * 100%);
		margin-top: calc(-10 / 1200 * 100%);
		background-image: url(../img/workflow/step03_bg_pc.svg);
	}

	#step03>.lines div:nth-child(1),
	#step03>.lines div:nth-child(2) {
		left: calc(785 / 1200 * 100%);
	}
	#step03>.lines div:nth-child(3) {
		right: calc(202 / 1200 * 100%);
		padding-top: calc(346 / 1200 * 100%);
	}
	#step03>.lines div:nth-child(4) {
		right: calc(382 / 1200 * 100%);
	}

	#step03 h2 {
		width: calc(237 / 1200 * 100%);
		margin-left: calc(820 / 1200 * 100%);
	}
	#step03 figure {
		left: calc(140 / 1200 * 100%);
		margin-top: calc(120 / 1200 * 100%);
	}
	#step03 p {
		margin: calc(-195 / 1200 * 100%) 0 0 calc(630 / 1200 * 100%);
		width: calc(320 / 1200 * 100%);
	}


	/* ----------------------------------------
		step04
	---------------------------------------- */

	#step04 {
		margin-top: calc(150 / 1200 * 100%);
		padding-bottom: calc(180 / 1200 * 100%);
	}
	#step04::before {
		left: calc(80 / 1200 * 100%);
		width: calc(737 / 1200 * 100%);
		margin-top: calc(-40 / 1200 * 100%);
		background-image: url(../img/workflow/step04_bg_pc.svg);
	}

	#step04>.lines div:nth-child(1),
	#step04>.lines div:nth-child(2) {
		right: calc(790 / 1200 * 100%);
	}
	#step04>.lines div:nth-child(3) {
		left: calc(194 / 1200 * 100%);
		padding-top: calc(355 / 1200 * 100%);
	}
	#step04>.lines div:nth-child(4) {
		left: calc(376 / 1200 * 100%);
	}

	#step04 h2 {
		width: calc(241 / 1200 * 100%);
		margin-left: calc(135 / 1200 * 100%);
	}
	#step04 figure {
		right: calc(150 / 1200 * 100%);
		margin-top: calc(105 / 1200 * 100%);
	}
	#step04 p {
		margin: calc(-195 / 1200 * 100%) 0 0 calc(235 / 1200 * 100%);
		width: calc(305 / 1200 * 100%);
	}


	/* ----------------------------------------
		step05
	---------------------------------------- */

	#step05 {
		padding-bottom: calc(45 / 1200 * 100%);
	}

	#step05>.lines div:nth-child(1),
	#step05>.lines div:nth-child(2) {
		left: calc(760 / 1200 * 100%);
	}
	#step05>.lines div:nth-child(1) {
		width: calc(226 / 1200 * 100%);
	}
	#step05>.lines div:nth-child(2) {
		width: calc(248 / 1200 * 100%);
	}
	#step05>.lines div:nth-child(3) {
		right: calc(247 / 1200 * 100%);
		padding-top: calc(342 / 1200 * 100%);
	}
	#step05>.lines div:nth-child(4) {
		right: calc(427 / 1200 * 100%);
	}

	#step05 h2 {
		width: calc(218 / 1200 * 100%);
		margin-left: calc(775 / 1200 * 100%);
	}
	#step05 figure {
		left: calc(235 / 1200 * 100%);
		margin-top: calc(150 / 1200 * 100%);
	}
	#step05 p {
		margin: calc(-195 / 1200 * 100%) 0 0 calc(615 / 1200 * 100%);
		width: calc(290 / 1200 * 100%);
	}
}



/* ++++++++++++++++++++++++++++++++++++++++

	SP

++++++++++++++++++++++++++++++++++++++++ */

@media only screen and (max-width: 768px) {

@media only screen and (max-width: 768px) {
	section h2 {
		padding-top: calc(40 / 767 * 100vw);
	}
	section h2 img {
		width: auto;
		height: calc(126 / 767 * 100vw);
		margin-left: calc(107 / 767 * 100vw);
	}
	section figure,
	section p {
		margin: 0 calc(55 / 767 * 100vw);
	}
	section figure {
		margin-top: calc(80 / 767 * 100vw);
	}
	section p {
		font-size: calc(26 / 767 * 100vw);
		line-height: 2.15;
	}
	section p+p {
		margin-top: 2.15em;
	}
	section figure+p {
		margin-top: calc(30 / 767 * 100vw);
	}

	section>.lines div:nth-child(1),
	section>.lines div:nth-child(2) {
		left: calc(69 / 767 * 100vw);
	}
	section>.lines div:nth-child(1) {
		width: calc(267 / 767 * 100vw);
		margin-top: calc(40 / 767 * 100vw);
	}
	section>.lines div:nth-child(2),
	section>.lines div:nth-child(5) {
		right: calc(69 / 767 * 100%);
	}
	section>.lines div:nth-child(2) {
		right: calc(69 / 767 * 100%);
		margin-top: calc(100 / 767 * 100vw);
	}
	section>.lines div:nth-child(3) {
		left: calc(100 / 767 * 100vw);
		padding-top: calc(144 / 767 * 100vw);
	}
	section>.lines div:nth-child(4) {
		left: calc(315 / 767 * 100vw);
		padding-top: calc(191 / 767 * 100vw);
	}
	section>.lines div:nth-child(5) {
		width: calc(418 / 767 * 100vw);
		margin-top: calc(165 / 767 * 100vw);
	}
	section>.lines div:nth-child(6) {
		right: calc(92 / 767 * 100vw);
		margin-top: calc(82 / 767 * 100vw);
		padding-top: calc(109 / 767 * 100vw);
	}

	#step01>.lines div:nth-child(4),
	#step05>.lines div:nth-child(4) {
		padding-top: calc(180 / 767 * 100vw);
	}
	#step01>.lines div:nth-child(5),
	#step05>.lines div:nth-child(5) {
		margin-top: calc(144 / 767 * 100vw);
	}
	#step01>.lines div:nth-child(6),
	#step05>.lines div:nth-child(6) {
		padding-top: calc(98 / 767 * 100vw);
	}

	#step01 h2 img {
		height: calc(104 / 767 * 100vw);
	}
	#step01 figure img,
	#step05 figure img {
		width: calc(500 / 767 * 100vw);
		margin: auto;
	}
	#step01 figure {
		margin-top: calc(110 / 767 * 100vw);
	}

	#step02 {
		margin-top: calc(160/ 767 * 100vw);
	}
	#step02::before {
		width: calc(660 / 767 * 100vw);
		margin-top: calc(-60 / 767 * 100vw);
		background-image: url(../img/workflow/step02_bg_sp.svg);
	}

	#step03 {
		margin-top: calc(180/ 767 * 100vw);
	}
	#step03::before {
		right: 0;
		width: calc(573 / 767 * 100vw);
		margin-top: calc(-75 / 767 * 100vw);
		background-image: url(../img/workflow/step03_bg_sp.svg);
	}

	#step04 {
		margin-top: calc(160/ 767 * 100vw);
	}
	#step04::before {
		width: calc(584 / 767 * 100vw);
		margin-top: calc(-80 / 767 * 100vw);
		background-image: url(../img/workflow/step04_bg_sp.svg);
	}

	#step05 {
		margin-top: calc(90/ 767 * 100vw);
	}
	#step05 h2 img {
		height: calc(103 / 767 * 100vw);
	}
	#step05 figure {
		margin-top: calc(130 / 767 * 100vw);
	}
}