@charset "utf-8";



/* --------------------------------------------
						
製造プロセス

---------------------------------------------- */ 
/*
.flowNav {
	display: none;
	text-align: center;	
}
.flowNav li {
	display: inline-block;
	width:9.5%; max-width: 105PX;
	margin: 0 1.2%;
}
.flowNav li img {
	width: 100%;
}
*/

.flowCont {
	text-align: center;
	background: #6179b4;
	background: -moz-linear-gradient(left, #ffffff 0%, #6179b4 20%, #1e4c91 50%, #6179b4 80%, #ffffff 100%);
	background: -webkit-linear-gradient(left, #ffffff 0%,#6179b4 20%,#1e4c91 50%,#6179b4 80%,#ffffff 100%);
	background: linear-gradient(to right, #ffffff 0%,#6179b4 20%,#1e4c91 50%,#6179b4 80%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );

}
.tab_item {
	display: inline-block;
	width:10.3%; max-width: 105px;
	margin: 0 1.1%;
	transition: all 0.2s ease; 
	cursor: pointer;
}
.tab_item img {
	width: 100%;
}
input[name="flow_tab"] { 
	display: none;
}

@media screen and (max-width:768px){
.tab_item {
 display: none;
}
}


	
.flowCont__inner {
	display: none; 
	position: relative; top: 0; left: 0;
	width: 100%; height: 52.6vw; max-height: 730px;
	margin: auto;
	overflow: hidden;
	background: url(../img/flow/back.jpg) no-repeat;
	background-size: 100% 100%;
}

#flow1:checked ~ #flowCont__inner-1,
#flow2:checked ~ #flowCont__inner-2,
#flow3:checked ~ #flowCont__inner-3,
#flow4:checked ~ #flowCont__inner-4,
#flow5:checked ~ #flowCont__inner-5,
#flow6:checked ~ #flowCont__inner-6,
#flow7:checked ~ #flowCont__inner-7,
#flow8:checked ~ #flowCont__inner-8 {
	display: block;
	animation-name: flowCont__inner;
}




.flowCont__inner__txt {
	position: absolute; top:16%; left: 15%;
	width: 85%; height: 6.5em;
	z-index: 3;
}
.flowCont__inner__txt > h2 {
	max-width: 100%;
	margin-left: -100px;
	text-align: left;
}
.flowCont__inner__txt > p {
	position: relative;
	margin: -34px 0 0 0;
	font-size: 18px; font-size: 1.8rem;
}

.flowCont__inner__anime {
	position: absolute; top: 0; left: 0;
	text-align: center;
	width: 100%; height: 100%;
	margin: auto;
	z-index: 1;
}
.flowCont__inner__anime video {
	width: 100%; max-width: 1356px;
}

.flowCont__inner__photo a {
	position: absolute; right:10%;
	display: block;
	width: 140px; height: 140px;
	text-align: right;
	z-index: 2;
}
.flowCont__inner__photo span {
	display: block;
	width: 100%; height: 100%;
	overflow: hidden;
	border-radius: 50%;
}
.flowCont__inner__photo a::after {
	content: "";
	display: block;
	position: relative;
	margin: -25% 0 0 70%;
	width: 2em; height: 2em;
	background: url(../img/flow/flowPhotoIcon.png);
	background-size: cover;
	transition: 0.1s;
}
.flowCont__inner__photo img {
	height: 100%;
	transition: 0.1s;
}
.flowCont__inner__photo a:nth-child(1) {
	bottom: 180px;
}
.flowCont__inner__photo a:nth-child(2) {
	bottom: 20px;
}
.flowCont__inner__photo a:hover::after {
	margin: -30% 0 0 70%;
}
.flowCont__inner__photo a:hover img {
	opacity: 0.7;
}


.flowCont__inner__flowBtn {
	position: absolute; top: 5%;
	width: 100%;
	text-align: center;
	z-index: 5;
}
.flowCont__inner__flowBtn a, 
.flowCont__inner__flowBtn label {
	display: inline-block;
	margin: 0 0.6% ;
	font-size: 14px; font-size: 1.4rem;
	text-align: center;
	color: #fff;
	background: #0051B0;
	border: 2px solid  #0051B0;
	border-radius: 1.5em;
	cursor: pointer;
	transition: 0.3s;
}
.flowCont__inner__flowBtn a:hover,
.flowCont__inner__flowBtn label:hover {
	color: #0051B0;
	background: #fff;
}
.flowCont__inner__flowBtn .flowBtn_prev {
	padding: 0.2em 2em 0.2em 0.5em;
}
.flowCont__inner__flowBtn .flowBtn_prev::before {
	content: "＜　　　";
	font-size: 0.8em;
	vertical-align: text-top;
	font-weight: 800;
}
.flowCont__inner__flowBtn .flowBtn_next {
	padding: 0.2em 0.5em 0.2em 2em;
}
.flowCont__inner__flowBtn .flowBtn_next::after {
	content: "　　　＞";
	font-size: 0.8em;
	vertical-align: text-top;
	font-weight: 800;
}

#flowCont__inner-1 .flowCont__inner__flowBtn .flowBtn_prev,
#flowCont__inner-8 .flowCont__inner__flowBtn .flowBtn_next {
	opacity: 0;
}


@media screen and (max-width:1024px){
.flowCont__inner {
	width: 100%; height: 73.2vw; max-height:none;
}
.flowCont__inner__anime video {
	width: 140%;
	margin-left: -20%;
}
.flowCont__inner__photo a {
	right:2%;
}
}



@media screen and (max-width:768px){
.flowCont__inner {
	display: block;
	position: relative; top: 0; left: 0;
	height: auto; max-height: none;
	background: #fff;
}
	
.flowCont__inner__txt {
	position: relative; top: 2em;
}
.flowCont__inner__txt > h2 {
	margin-left: -50px;
}
.flowCont__inner__txt > p {
	margin: -25px 0 0 25px;
	padding-right: 1em;
	font-size: 15px; font-size: 1.5rem;
}
.flowCont__inner__txt > p br {
	display: none;
}
	
.flowCont__inner__anime {
	position: relative; top: -3em; left: auto;
	height: auto;
}
.flowCont__inner__anime video {
	width: 160%;
	margin-left: -30%;
}

.flowCont__inner__photo {
	text-align: center;
	margin: -2em 0 4em;
}
.flowCont__inner__photo a {
	position: relative; right:auto;
	display: inline-block;
	margin: 0 1%;
	width: 150px; height: 150px;
}
.flowCont__inner__photo a:nth-child(1) {
	bottom: auto;
}
.flowCont__inner__photo a:nth-child(2) {
	bottom: auto;
}
	
.flowCont__inner__flowBtn {
	display: none;
}
}