@charset "utf-8";

/*- FLOW -*/
.flowB1{
	height:428px;
	background:url(../img/flow/img02.jpg) no-repeat;
	background-size:contain;
	position:relative;
}
.flowB1 h3{
	font-size:38px;
	line-height:1.4;
	color:#fff;
	padding:15px 0 0 10px;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  font-weight: 700;
}
.flowB1 h3 span{
	display:inline-block;
	padding-left:20px;
}
.flowB2{
	height:363px;
	padding:65px 0 0 43px;
	background:#e1cdbb;
	color:#3b2108;
	position:relative;
	box-shadow:0 -15px 10px -10px rgba(0,0,0,0.1) inset;
}
.flowB2 p{
	display:block;
	font-size:18px;
	line-height:1.8;
	font-weight:700;
	margin-bottom:35px;
}
.flowB3{
	height:428px;
	background:url(../img/flow/img03.jpg) no-repeat;
	background-size:contain;
	position:relative;
}
.flowB3 h3{
	font-size:38px;
	line-height:1.4;
	color:#fff;
	padding:25px 0 0 10px;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  font-weight: 700;
}
.flowB3 h3 span{
	display:inline-block;
	padding-left:20px;
}
.flowB3 .canB,
.flowB5 .canB,
.flowB7 .canB {
	display:block;
	background:rgba(255,255,255,0.6);
	overflow:hidden;
	padding:15px 25px 13px;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
.flowB3 .canB h5, 
.flowB5 .canB h5,
.flowB7 .canB h5 {
	background:#fff;
	display:inline-block;
	float:left;
	text-align:center;
	font-size:14px;
	line-height:1.2;
	font-weight:400;
	padding:8px 10px 4px;
	margin-right:15px;
}
.flowB3 .canB h5 span,
.flowB5 .canB h5 span,
.flowB7 .canB h5 span {
	font-weight:700;
}
.flowB3 .canB p,
.flowB5 .canB p,
.flowB7 .canB p {
	color:#3D1704;
	float:left;
	font-weight:700;
	font-size:14px;
	line-height:1.5;
}
.flowB7 .canB p b{
  font-size: 16px;
}
.flowB4{
	height:353px;
	padding:75px 0 0 43px;
	background:#fff;
	color:#3b2108;
	position:relative;
	box-shadow:0 -15px 10px -10px rgba(0,0,0,0.1) inset;
}
.flowB4 p.c1{
	display:block;
	font-size:18px;
	line-height:1.8;
	font-weight:700;
	margin-bottom:35px;
}
.flowB4 p.c2{
	display:block;
	font-size:15px;
	line-height:2;
}
.flowB5{
	height:428px;
	background:url(../img/flow/img04.jpg) no-repeat;
	background-size:contain;
	position:relative;
}
.flowB5 h3{
	font-size:38px;
	line-height:1.4;
	color:#fff;
	padding:15px 0 0 10px;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  font-weight: 700;
}
.flowB5 h3 span{
	display:inline-block;
	padding-left:20px;
}
.flowB6{
	height:318px;
	padding:110px 0 0 43px;
	background:#e1cdbb;
	color:#3b2108;
	position:relative;
	box-shadow:0 -15px 10px -10px rgba(0,0,0,0.1) inset;
}
.flowB6 p.c1{
	display:block;
	font-size:18px;
	line-height:1.8;
	font-weight:700;
	margin-bottom:35px;
}
.flowB6 p.c2{
	display:block;
	font-size:15px;
	line-height:2;
}
.flowB7{
	height:428px;
	background:url(../img/flow/img05.jpg) no-repeat;
	background-size:contain;
	position:relative;
}
.flowB7 h3{
	font-size:38px;
	line-height:1.4;
	color:#fff;
	padding:15px 0 0 10px;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  font-weight: 700;
}
.flowB7 h3 span{
	display:inline-block;
	padding-left:20px;
}
.flowB8{
	height:365px;
	padding:63px 0 0 43px;
	background:#e1cdbb;
	color:#3b2108;
	position:relative;
	box-shadow:0 -15px 10px -10px rgba(0,0,0,0.1) inset;
}
.flowB8 p.c1{
	display:block;
	font-size:18px;
	line-height:1.8;
	font-weight:700;
	margin-bottom:35px;
}
.flowB8 p.c2{
	display:block;
	font-size:15px;
	line-height:2;
}
.flowB9{
	height:428px;
	background:url(../img/flow/img06.jpg) no-repeat;
	background-size:contain;
	position:relative;
}
.flowB9 h3{
	font-size:38px;
	line-height:1.4;
	color:#fff;
	padding:15px 0 0 10px;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  font-weight: 700;
}
.flowB9 h3 span{
	display:inline-block;
	padding-left:20px;
}
.flowB10{
	height:365px;
	padding:63px 0 0 43px;
	background:#fff;
	color:#3b2108;
	position:relative;
	box-shadow:0 -15px 10px -10px rgba(0,0,0,0.1) inset;
}
.flowB10 p.c1{
	display:block;
	font-size:18px;
	line-height:1.8;
	font-weight:700;
	margin-bottom:35px;
}
.flowB10 p.c2{
	display:block;
	font-size:15px;
	line-height:2;
}
.flowB1 strong, 
.flowB3 strong,
.flowB5 strong,
.flowB7 strong,
.flowB9 strong {
	position:absolute;
	color:#fff;
	font-size:120px;
	line-height:1;
	right:40px;
	font-weight:700;
  text-shadow: 0 0 12px rgba(0,0,0,0.7);
}
.flowB1:after,
.flowB3:after,
.flowB5:after,
.flowB7:after,
.flowB9:after {
	border: 10px solid transparent;
	content: ' ';
	height:0;
	width:0;
	position: absolute;
	border-right-color: #e1cdbb;
	top:8%;
	right:30px;
	-moz-transform:scale(4,1);
	-webkit-transform:scale(4,1);
	transform:scale(4,1);
}
.flowB3:after,
.flowB9:after{
	border-right-color: #fff;
}
.br320,
.br480{
	display:none;
}

.flowBs3{
	color:#3b2108;
	background:#fff;
  overflow: hidden;
	box-shadow:0 -15px 10px -10px rgba(0,0,0,0.1) inset;
  padding-bottom: 20px;
	position:relative;
}
.flowBs3 h3{
	font-size:38px;
	line-height:1.2;
	padding:60px 0 30px;
	text-align:center;
}
.flowBs3 .subB{
	overflow:hidden;
	width:86%;
	margin:0 auto 30px;
	box-shadow:0 -15px 10px -10px rgba(0,0,0,0.1);
  padding-top:30px;
  text-align: center;
}
.flowBs3 .subB:first-of-type{
	box-shadow:none;
	padding-bottom:0;
}
.flowBs3 .subB h5{
	font-size:26px;
	line-height:1.2;
	margin-bottom:7px;
}
.flowBs3 .subB p{
	font-size:15px;
	line-height:1.8;
}
.flowBs3 .subB .timeB{
  font-size: 32px;
  font-weight: 700;
  line-height:1.2;
  margin-bottom:60px;
}
.clr2{
  background: #e1cdbb;
}

/*-- 上：デフォルト：960px以上(PC用)の記述 --*/

@media screen and (max-width: 959px){
/*-- 959px以下(タブレット用)の記述 (max-width/max-device-width) --*/
.flowB1:after,
.flowB3:after,
.flowB5:after,
.flowB7:after,
.flowB9:after {
	border: 10px solid transparent;
	content: ' ';
	height:0;
	width:0;
	position: absolute;
	border-bottom-color: #e1cdbb;
	top:100%;
	left:90%;
	margin-top:-50px;
	-moz-transform:scale(1,4);
	-webkit-transform:scale(1,4);
	transform:scale(1,4);
}
.flowB3:after,
.flowB7:after{
	border-bottom-color: #fff;
}

.flowBs3 h3{
	font-size:33px;
}
.flowBs3 .subB{
	width:88%;
}
.flowBs3 .subB h5{
	float:none;
	font-size:22px;
	text-align:center;
}
.flowBs3 .subB p{
	float:none;
	font-size:15px;
	line-height:1.8;
}

.br480{
	display:block !important;
}

}

@media screen and (max-width: 479px){
/*-- 479px以下(スマートフォン用)の記述 --*/
.flowB1 strong, 
.flowB3 strong,
.flowB5 strong,
.flowB7 strong,
.flowB9 strong {
	font-size:90px;
	right:15px;
}
.flowB1,
.flowB3,
.flowB5,
.flowB7,
.flowB9 {
	height:285px;
}
.flowB1 h3,
.flowB7 h3,
.flowB9 h3,
.flowB3 h3,
.flowB5 h3 {
	font-size:28px;
}
.flowB1 h3 span{
	padding-left:15px;
}
.flowB2{
	height:250px;
	padding:35px 0 0 15px;
}
.flowB2 p{
	font-size:13px;
	line-height:1.8;
	margin-bottom:20px;
}
.flowB3 .canB,
.flowB5 .canB,
.flowB7 .canB{
	padding:10px 5% 6px;
	width:90%;
}
.flowB3 .canB h5,
.flowB5 .canB h5,
.flowB7 .canB h5{
	font-size:12px;
	padding:4px 10px 3px;
	margin-bottom:3px;
}
.flowB3 .canB h5 br,
.flowB5 .canB h5 br,
.flowB5 .canB p br,
.flowB7 .canB p br{
	display:none;
	
}
.flowB7 .canB p b{
  display: block;
}
.flowB3 .canB p,
.flowB5 .canB p,
.flowB7 .canB p{
	float:left;
	font-weight:700;
	font-size:12px;
	line-height:1.5;
}
.flowB7 .canB p{
  width:95%;
}
.flowB4{
	height:250px;
	padding:35px 0 0 15px;
}
.flowB4 p.c1{
	font-size:14px;
	margin-bottom:20px;
}
.flowB4 p.c2{
	font-size:11px;
}
.flowB6{
	height:225px;
	padding:60px 0 0 15px;
}
.flowB6 p.c1{
	font-size:14px;
	margin-bottom:20px;
}
.flowB6 p.c2{
	font-size:11px;
}
.flowB8{
	height:255px;
	padding:30px 0 0 15px;
}
.flowB8 p.c1{
	font-size:14px;
	margin-bottom:15px;
}
.flowB8 p.c2{
	font-size:11px;
}
.flowB10{
	height:260px;
	padding:25px 0 0 15px;
}
.flowB10 p.c1{
	font-size:14px;
	margin-bottom:20px;
}
.flowB10 p.c2{
	font-size:11px;
}
.br320{
	display:block !important;
}


.flowBs3 h3{
	font-size:28px;
}
.flowBs3 .subB{
	width:90%;
}
.flowBs3 .subB h5{
	float:none;
	font-size:20px;
}
.flowBs3 .subB p{
	float:none;
	font-size:12px;
	line-height:1.8;
}

}