@charset "utf-8";
/* -----------------------------------------------------------------------

flow.css

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

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

	catchcopy

-----------------------------------------------------------------*/
#flow  {

}
#flow .catchcopy {
	line-height:1.3;
	text-align:center;
	font-weight:bold;
	
}
#flow .subCatchcopy {
	margin-top:5px;
	line-height:1.3;
	text-align:center;
	font-weight:bold;
	overflow:visible;
	position:relative;
}
#flow .subCatchcopy::after {
	display:block;
	content:"";
	width:200%;
	background-image:url(../img/share/y_line.png);
	background-repeat:repeat-x;
	background-position:bottom 0 left 50%;
	position:absolute;
	top:0.75em;
	left:-50%;
	z-index:-1;
}

@media print, screen and (max-width:767px) {
	#flow .catchcopy {
		font-size:4.2rem;
		
	}
	#flow .subCatchcopy {
		font-size:3.2rem;
	}
	#flow .subCatchcopy::after {
		height:28px;
		background:auto 28px;
	}
}
@media print, screen and (max-width:480px) {
	#flow .catchcopy {
		font-size:3.2rem;
		
	}
	#flow .subCatchcopy {
		font-size:2.4rem;
	}
	#flow .subCatchcopy::after {
		height:28px;
		background:auto 28px;
	}
}
@media print, screen and (min-width:768px) {
	#flow .catchcopy {
		font-size:4.8rem;
		
	}
	#flow .subCatchcopy {
		font-size:3.2rem;
	}
	#flow .subCatchcopy::after {
		height:36px;
	}
}
@media print, screen and (min-width:1000px) {
	#flow .catchcopy {
		font-size:5.2rem;
		
	}
	#flow .subCatchcopy {
		font-size:3.8rem;
	}
	#flow .subCatchcopy::after {
		height:36px;
	}
}



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

	workimage

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

#flow #workimage {
	width:100%;
	margin:0 auto;
	position:relative;
}
#flow #workimage::after {
	display:block;
	content:"";
	width:200%;
	background-image:url(../img/share/y_line.png);
	background-repeat:repeat-x;
	background-position:bottom 0 left 50%;
	position:absolute;
	bottom:0;
	left:-50%;
	z-index:-1;
}
#flow #workimage .leadTxt {
	margin-bottom:20px;
}

#flow #workimage .illust {
	z-index:3;
}
#flow #workimage .circle {
	z-index:2;
}
#flow #workimage .leadTxt {
	z-index:4;
}
#flow #workimage .spImage {
	display:none;
	margin:0 auto;
	width:100%;
}

@media print, screen and (max-width:679px) {
	#flow #workimage {
		width: 100%;
		padding:30px 5px;
	}
	#flow #workimage::after {
		height:28px;
		background:auto 28px;
		bottom:15px;
	}
	
	#flow #workimage .leadTxt {
		width:100%;
	}
	#flow #workimage .illust {
		display:none;
	}
	#flow #workimage .circle {
		display:none;
	}
	#flow #workimage .spImage {
		display:block;
		width: calc(100% + 30px);
		margin-left:-15px;
	}
}
@media print, screen and (max-width:480px) {
	#flow #workimage {
		width: 100%;
	}
	#flow #workimage::after {
		height:28px;
		background:auto 28px;
	}
}
@media print, screen and (min-width:680px) {
	#flow #workimage {
		width: calc(100% + 25px);
		padding:61% 0 0;
	}
	#flow #workimage::after {
		height:36px;
	}

	#flow #workimage .leadTxt {
		width:29%;
		font-size:0.94em;
		position:absolute;
		top:10%;
		left:0%;
	}
	#flow #workimage .illust {
		position:absolute;
	}
	#flow #workimage .circle {
		position:absolute;
	}
	#flow #workimage .illust01 {
		width:8.5%;
		left:0%;
		bottom:-12.5%;
		animation: fluffy1 3s ease infinite;
	}
	#flow #workimage .illust02 {
		width:9.5%;
		left:8%;
		bottom:-20%;
		animation: fluffy1 3s ease infinite;
	}
	#flow #workimage .illust03 {
		width:8.7%;
		left:20%;
		bottom:-12.5%;
		animation: fluffy1 3s ease infinite;
	}
	#flow #workimage .illust04 {
		width:12%;
		left:31%;
		top:19.5%;
		animation: fluffy1 3s ease infinite;
	}
	#flow #workimage .illust05 {
		width:15.5%;
		right:7.5%;
		top:-2%;
		animation: fluffy1 3s ease infinite;
	}
	
	@keyframes fluffy1 {
		0% { transform:translateY(0) }
		5% { transform:translateY(0) }
		10% { transform:translateY(0) }
		20% { transform:translateY(-10px) }
		25% { transform:translateY(0) }
		30% { transform:translateY(0) }
		50% { transform:translateY(0) }
		100% { transform:translateY(0) }
	}
	
	
	#flow #workimage .circle01 {
		width:19.5%;
		left:43%;
		top:16.5%;
		animation: fluffy2 8s ease infinite;
	}
	#flow #workimage .circle02 {
		width:20.5%;
		left:30%;
		top:47.5%;
		animation: fluffy3 8s ease infinite;
	}
	#flow #workimage .circle03 {
		width:20%;
		right:15%;
		top:26%;
		animation: fluffy3 8s ease infinite;
	}
	#flow #workimage .circle04 {
		width:20%;
		right:27%;
		top:55.5%;
		animation: fluffy2 8s ease infinite;
	}
	#flow #workimage .circle05 {
		width:20%;
		right:3%;
		top:57.3%;
		animation: fluffy2 8s ease infinite;
	}
	
	@keyframes fluffy2 {
		0% { transform:translateY(10px) }
		25% { transform:translateY(0) }
		50% { transform:translateY(10px) }
		75% { transform:translateY(0) }
		100% { transform:translateY(10px) }
	}
	@keyframes fluffy3 {
		0% { transform:translateY(0) }
		25% { transform:translateY(10px) }
		50% { transform:translateY(0) }
		75% { transform:translateY(10px) }
		100% { transform:translateY(0) }
	}
}
@media print, screen and (min-width:768px) {

	#flow #workimage .illust01 {
		bottom:0%;
	}
	#flow #workimage .illust02 {
		bottom:-12%;
	}
	#flow #workimage .illust03 {
		bottom:-3.5%;
	}

}
@media print, screen and (min-width:890px) {
	#flow #workimage .illust01 {
		bottom:12.75%;
	}
	#flow #workimage .illust02 {
		bottom:-4%;
	}
	#flow #workimage .illust03 {
		bottom:5.5%;
	}
	#flow #workimage .leadTxt {
		font-size:1em;
	}
}
@media print, screen and (min-width:1000px) {
	#flow #workimage {
		width: 100%;
		padding:61% 0 0;
	}
	#flow #workimage .leadTxt {
		width:22%;
		left:7.5%;
	}
}



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

	step

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

#step {
	width:100%;
	margin:80px auto;
	padding:40px 0px 60px;
	background:#f1f4f6;
	border-radius:15px;
	position:relative;
	overflow:visible;
}
#step::after {
	display:block;
	content:"";
	width:200%;
	height:270px;
	background:#003c6b;
	position:absolute;
	top:220px;
	left:-50%;
	z-index:1;
}
#step .scBox{
	overflow:hidden;
	position:relative;
	z-index:3;
}
#step .stepList {
	width:960px;
	margin:35px 20px 15px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	color:#000;
}
#step .stepList > li{
	width:15%;
	margin-left:2%;
	padding:25px 0;
	background:#faf339;
	position:relative;
}
#step .stepList > li::after {
	display:block;
	content:"";
	width:18px;
	height:18px;
	margin:auto 0;
	background:#faf339;
	transform:rotate(45deg);
	position:absolute;
	top:0;
	right:-8px;
	bottom:0;
	z-index:-1;
}
#step .stepList > li:last-child::after {
	display:none;
}
#step .stepList > li:first-child{
	margin-left:0;
}
#step .stepList > li .number{
	font-size:2.4rem;
	line-height:1;
	margin-bottom:12px;
	padding-bottom:6px;
	font-weight:bold;
	text-align:center;
	border-bottom:2px;
	position:relative;
}
#step .stepList > li .number::after {
	display:block;
	content:"";
	width:20px;
	height:2px;
	margin:0 auto;
	background:#000;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
}
#step .stepList > li .subHeadline{
	font-size:2.6rem;
	line-height:1.2;
	margin-bottom:1em;
	font-weight:bold;
	text-align:center;
}
#step .stepList > li .subHeadlingList{
	font-size:1.6rem;
	line-height:1.2;
	margin-bottom:1em;
	font-weight:bold;
	text-align:center;
}
#step .stepList > li .subHeading{
	padding:0 0 8px;
	font-size:1.6rem;
	line-height:1.2;
	margin-bottom:1em;
	font-weight:bold;
	text-align:center;
	position:relative;
}
#step .stepList > li .subHeading::after {
	display:block;
	content:"";
	width:80%;
	height:2px;
	margin:0 auto;
	background-image : linear-gradient(to right, #666 2px, transparent 2px);
	background-size: 4px 2px;
	background-repeat: repeat-x;
	background-position: left top;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
}
#step .stepList > li .text{
	margin-bottom:1em;
	padding:0 10px;
	font-size:1.4rem;
	line-height:1.5;
}

#step .catchTxt {
	padding-top:70px;
	background:url(../img/flow/img_arrow.png) no-repeat top 20px left 50%;
	background-size:101px auto;
	font-size:2.4rem;
	text-align:center;
	font-weight:bold;
	color:#003c6b;
}
#step .coutionTxt {
	font-size:1.4rem;
	position:absolute;
	bottom:18px;
	right:18px;
}

@media print, screen and (min-width:768px) {

	#step .catchTxt {
		font-size:3.0rem;
	}

}



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

	about

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

#about .subCatchcopy {
	line-height:1.5;
	font-weight:bold;
	text-align:center;
}
#about .headline {
	line-height:1.5;
	font-weight:bold;
	text-align:center;
}
#about .textBox {
	width:100%;
	max-width:430px;
	margin:30px auto;
}
#about .textBox p {
	margin-top:1em;
}

#about .detailImage {
	display:block;
	width:100%;
	margin:0 auto;
	text-align:center;
}
#about .caseBox {
	width:100%;
	max-width:570px;
	margin:50px auto 0;
	padding:50px 70px;
	text-align:left;
	background:#f1f4f6;
}
#about .caseBox .heading {
	line-height:1.5;
	margin-bottom:0.5em;
	font-weight:bold;
}
#about .caseBox .text {
	margin-bottom:1em;
}
#about .caseBox .box {
	margin-bottom:8px;
	padding:16px 12px;
	border:4px solid #c0c1c2;
}


@media print, screen and (max-width:767px) {

	#about .subCatchcopy {
		font-size:2.4rem;
	}
	#about .headline {
		font-size:3.2rem;
	}
	#about .textBox {
		margin:20px auto;
	}
	#about .caseBox {
		margin:40px auto 0;
		padding:30px 40px;
	}
	#about .caseBox .heading {
		font-size:2.0rem;
	}
}

@media print, screen and (max-width:560px) {

	#about .subCatchcopy {
		font-size:2.0rem;
	}
	#about .headline {
		font-size:2.2rem;
	}
	#about .detailImage img {
		width:80%;
		max-width:350px;
	}
	#about .caseBox {
		margin:30px auto 0;
		padding:30px 30px;
	}
}

@media print, screen and (min-width:768px) {

	#about .subCatchcopy {
		font-size:3.0rem;
	}
	#about .headline {
		font-size:3.6rem;
	}
	#about .textBox {
		margin:30px auto;
	}
	#about .caseBox {
		margin:50px auto 0;
		padding:50px 70px;
	}
	#about .caseBox .heading {
		font-size:2.2rem;
	}

}