@charset "utf-8";
.contents{
	margin:0;
	padding:0;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
	line-height: 1.4;
}
.contents ul,.contents li,.contents figure{
	list-style: none;
	margin: 0;
	padding: 0;
}
.contents img {
	max-width: 100%;
	height: auto;
}
@media screen and (min-width: 768px) {
	br.pc-none{
		display: none;
	}
}


/* main */
.main{
	position: relative;
	margin-top: -3px;
}
.main .bgimg-slider {
	width: 90%;
	height: 700px;
	background-position: center bottom;
	background-size: cover;
	float: right;
}
.main h1{
	position: absolute;
	top: 250px;
	left: 50px;
	background: #000;
	font-size: 5em;
	color: #fff;
	padding: 0.2em 0.5em;
	font-weight: bold;
}
.footstepBox{
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -451px;
	z-index: 1;
	margin-top: 0px;
	margin-bottom: 40px;
	width: 902px;
	text-align: left;
}
.footstepBox,
.footstepBox a{
	color: #fff !important;
}
@media screen and (max-width: 767px) {
	.main .bgimg-slider {
		width: auto;
		height: 400px;
		float: none;
	}
	.main h1{
		top: 30%;
		left: 0;
		font-size: 2em;
		padding: 0.2em 0;
		text-align: center;
		width: 70%;
	}
	.footstepBox{
		width: auto;
		left: 0;
		margin: 0px 15px 15px 15px;
	}
}

.container{
	padding: 6em 0;
	text-align: center;
}


/* trouble */
.trouble{
	background: #ECECE1;
	width: 100%;
	overflow: hidden;
}
.trouble h2{
	color: #288004;
	font-size: 3.0em;
	margin-bottom: 2.0em;
}
.trouble ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
@media screen and (min-width:840px) { 
	.trouble ul{
		width: 840px;
		margin: 0 auto;
	}
}
.trouble ul li{
	margin: 0 15px 50px
}
.trouble .arrow{
	margin-bottom: 2.0em;
}
.trouble .solution{
	font-size: 3.5em;
	color: #fff;
	font-weight: bold;
}
.trouble .solution span{
	background: #67AC56;
	display: inline-block;
	padding: 0 0.2em;
	margin-bottom: 0.5em;
	line-height: 1.2em;
}
@media screen and (max-width: 767px) {
	.trouble h2{
		font-size: 1.5em;
		margin-bottom: 2.0em;
	}
	.trouble ul li{
		width: 45%;
		margin: 0 2.5% 20px
	}
	.trouble .solution{
		font-size: 1.8em;
	}
}
.arrow.fadeIn_bottom {
	opacity: 0;
	transform: translate(0, -20px);
	transition: 0.5s;
}
.solution.fadeIn_bottom {
	opacity: 0;
	transform: translate(0, -20px);
	transition: 0.7s;
	transition-delay: 0.7s;
}
.number.fadeIn_up {
	opacity: 0;
	transform: translate(0, 30px);
	transition: 0.5s;
	transition-delay: 0.7s;
}
.fadeIn_bottom.is-show,
.fadeIn_up.is-show {
	transform: translate(0, 0);
	opacity: 1;
}


.merit h2,
.howtouse h2,
.case h2,
.flow_wrapper h2 {
	font-size: 3.0em;
	color: #745A14;
	margin-bottom: 2.0em;
}
@media screen and (max-width: 767px) {
	.merit h2,
	.howtouse h2,
	.case h2,
	.flow_wrapper h2 {
		font-size: 2.0em;
	}
}


/* merit */
.merit{
	max-width: 1500px;
	margin: 0 auto;
}
.merit .container{
	padding-bottom: 0;
}
.merit .merit-box{
	display: flex;
	align-items: center;
}
.merit .merit-box.reverse{
	flex-direction: row-reverse;
}
.merit .merit-box-img{
	width: 50%;
}
@media screen and (min-width:1200px) { 
	.merit .merit-box-img{
		height: 450px;
	}
}
.merit .merit-box-img.img01{
	background: url(../img/merit01.jpg) center center;
	background-size: cover;
}
.merit .merit-box-img.img02{
	background: url(../img/merit02.jpg) center center;
	background-size: cover;
}
.merit .merit-box-img.img03{
	background: url(../img/merit03.jpg) center center;
	background-size: cover;
}
.merit .merit-box-img.img04{
	background: url(../img/merit04.jpg) center center;
	background-size: cover;
}
.merit .merit-box-txt{
	width: 50%;
	padding: 5.0em 0
}
.merit .merit-box-txt .number{
	margin-bottom: 1.5em;
}
.merit .merit-box-txt h3{
	font-size: 2.5em;
	margin-bottom: 1.0em;
}
.merit .merit-box-txt p{
	width: 80%;
	margin: 0 auto;
	text-align: left;
	line-height: 1.8;
	font-size: 1.3em;
}
@media screen and (max-width: 1024px) {
	.merit .merit-box {
		display: block;
	}
	.merit .merit-box-img {
		height: 400px;
		width: 100%;
		margin: 0 auto;
	}
	.merit .merit-box-txt {
		width: auto;
		margin: 0 20px;
		padding: 3.0em 0 4.0em;
	}
	.merit .merit-box-txt h3{
		font-size: 1.7em;
	}
	.merit .merit-box-txt p{
		width: 100%;
		font-size: 1.0em;
	}
}
@media screen and (max-width: 767px) {
	.merit .merit-box-img {
		height: 200px;
	}
}

/* howtouse */
.howtouse ul,
.case ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
}
@media screen and (min-width:1230px) { 
	.howtouse ul,
	.case ul{
		width: 1230px;
		margin: 0 auto;
	}
}
.howtouse li,
.case li{
	margin: 0 20px 50px;
	width: 370px;
}
.howtouse li a:hover,
.case li a:hover{
	opacity: 0.7;
}
.howtouse li figcaption{
	font-weight: bold;
	margin-top: 0.6em;
	font-size: 1.3em;
}
.howtouse h3{
	font-size: 2.0em;
	margin: 2.0em 0 1.0em;
}
.howtouse .package img{
	border: 1px solid #C8C8C8;
	margin: -1px;
}
.howtouse .package .link{
	margin-top: 0.4em;
	line-height: 1.6;
}
.howtouse .package .link a{
	color: #000;
	font-size: 1.3em;
	text-decoration: underline;
}
.howtouse .package .link a:hover{
	text-decoration: none;
}
.howtouse h4{
	font-size: 1.6em;
	margin-bottom: 0.5em;
}
.howtouse .btn a:hover img{
	opacity: 0.7;
}
@media screen and (max-width: 767px) {
	.howtouse h3{
		font-size: 1.3em;
	}
	.howtouse h4{
		font-size: 0.8em;
	}
	.howtouse .btn{
		margin: 0 10px;
	}
}

/* case */
.case .link a{
	display: inline-block;
	background: #000000;
	font-size: 1.0em;
	color: #fff;
	padding: 0.5em 1.8em;
	text-decoration: none;
	font-size: 1.5em;
}
.case .link a:hover{
	opacity: 0.7;
}

/* contact */
.contact{
	background: #292929;
}
.contact .container{
	width:740px;
	margin:0 auto;
	padding:4em 0;
}
.contact,
.contact *,
.contact :before,
.contact :after{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.contact h3{
	font-size:23px;
	color:#fff;
	margin-bottom:5px;
}
.contact .time{
	color: #fff;
	font-size:14px;
	margin-bottom:25px;
}
.contact .col_box{
	overflow:hidden;
}
.contact .col{
	float:left;
	width:50%;
	padding-left:15px;
	padding-right:15px;
	color: #fff;
}
.contact .contact_tel strong{
	display:block;
	font-family:"Roboto",sans-serif;
	font-size:40px;
	line-height:1em;
	text-align: left;
}
.contact .contact_tel .col > a{
	display:block;
	color:#FFF;
	width:300px;
	height:52px;
	font-size:20px;
	background:#005C94;
	padding-top:13px;
	border-radius:6px;
	font-weight:bold;
}
.contact .contact_tel .col > a:hover{
	text-decoration:none;
	opacity:0.8;
	filter:alpha(opacity=80);
}
.contact .contact_line{
	margin-top:20px;
}
.contact .contact_line h4{
	font-size:18px;
	font-weight:bold;
	margin-bottom:6px;
	text-align: left;
}
.contact .contact_line p{
	font-size:14px;
	line-height:1.6em;
	text-align: left;
}
.contact .contact_line a{
	display:block;
	color:#FFF;
	width:300px;
	height:54px;
	font-size:20px;
	background:#6BC315;
	padding-top:16px;
	border-radius:6px;
	font-weight:bold;
	margin-top: 5px;
}
.contact .contact_line a:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
}
.contact .contact_line a img{
	height:23px;
	width:auto;
}
@media screen and (max-width:768px) {
	.contact .container{
		width:auto;
		padding:2em 0;
	}
	.contact h3{
		font-size:16px;
	}
	.contact .time{
		font-size:12px;
		margin-bottom:10px;
	}
	.contact .col_box{
		margin-left:15px;
		margin-right:15px;
	}
	.contact .col{
		float:none;
		width:auto;
		padding:0;
	}
	.contact .contact_tel strong{
		margin-bottom:10px;
		text-align: center;
	}
	.contact .contact_tel strong,
	.contact .contact_tel strong a{
		font-size:30px;
		text-decoration:none;
	}
	.contact .contact_tel .col > a{
		width:100%;
		height:40px;
		font-size:16px;
		padding-top:9px;
	}
	.contact .contact_line h4{
		font-size:14px;
		text-align: center;
	}
	.contact .contact_line p{
		font-size:12px;
		margin-bottom:10px;
		text-align: center;
	}
	.contact .contact_line a{
		width:100%;
		height:41px;
		font-size:16px;
		padding-top:11px;
	}
	.contact .contact_line a img{
		height:20px;
	}
}

/* flow */
.flow_wrapper {
	background-color: #ECECE1;
}
.flow {
	max-width: 1230px;
  margin: 25px auto 60px;
}
.flow p {
	font-size: 16px;
  text-align: center;
	line-height: 1.5;
}
.flow p.attention {
	margin: 5px 0 0;
	font-size: 10px;
	text-align: right;
}
.flow .stepbar {
	display: flex;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.flow .stepbar__item {
	box-sizing: border-box;
	position: relative;
	width: calc(100% / 6);
	height: 200px;
	margin: 0px;
	padding: 1px;
	background: #299100;
}
.flow .stepbar__item:nth-child(1) {
	z-index: 7;
	background-color: #e3e9f1;
}
.flow .stepbar__item:nth-child(2) {
	background-color: #003459;
	color: #fff;
	z-index: 6
}
.flow .stepbar__item:nth-child(3) {
	background-color: #e3e9f1;
	z-index: 5
}
.flow .stepbar__item:nth-child(4) {
	background-color: #cad5e4;
	z-index: 4
}
.flow .stepbar__item:nth-child(5) {
	background-color: #e3e9f1;
	z-index: 3
}
.flow .stepbar__item:nth-child(6) {
	background-color: #cad5e4;
	z-index: 2
}
.flow .stepbar__item:nth-child(7) {
	background-color: #003459;
	z-index: 1;
	color: #fff;
}
.flow .stepbar__item:first-child {
	margin-left: 0;
}
.flow .stepbar__item:last-child {
	margin-right: 0;
}
.flow .stepbar__item-inner {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.flow .stepbar__item-inner dl {
	padding: 28px 0 0 10px;
	margin: 0;
	text-align: center;
}
.flow .stepbar__item-inner dt {
	margin-bottom: 10px;
	font-size: 24px;
	font-family: 'Oswald', sans-serif;
	font-style: italic;
	font-weight: normal;
}
.flow .stepbar__item-inner dd {
  margin: 0;
  line-height: 1.2;
}
.flow .stepbar__item-inner dd span {
	font-size: 24px;
	display: block;
	margin-bottom: 5px;
}
.flow .stepbar__item:nth-child(1) dd span,
.flow .stepbar__item:nth-child(2) dd span,
.flow .stepbar__item:nth-child(3) dd span,
.flow .stepbar__item:nth-child(5) dd span,
.flow .stepbar__item:nth-child(6) dd span,
.flow .stepbar__item:nth-child(7) dd span {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.flow .stepbar__item .stepbar__item-inner::after {
	position: absolute;
	content: "";
	top: 0;
	left: calc(100% - 1px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 100px 0 100px 20px;
}
.flow .stepbar__item:nth-child(1) .stepbar__item-inner::after,
.flow .stepbar__item:nth-child(3) .stepbar__item-inner::after,
.flow .stepbar__item:nth-child(5) .stepbar__item-inner::after {
	border-color: transparent transparent transparent #e3e9f1;
}
.flow .stepbar__item:nth-child(2) .stepbar__item-inner::after {
	border-color: transparent transparent transparent #003459;
}
.flow .stepbar__item:nth-child(4) .stepbar__item-inner::after,
.flow .stepbar__item:nth-child(6) .stepbar__item-inner::after {
	border-color: transparent transparent transparent #cad5e4;
}
.flow .stepbar__item:last-child .stepbar__item-inner::after {
	content: none;
}
@media screen and (max-width: 1200px) {
	.flow_wrapper .container {
		padding: 6em 20px;
	}
	.flow .stepbar__item-inner dd span {
		font-size: 20px;
	}
}
@media screen and (max-width: 750px) {
	.flow {
		margin: 0 0 60px;
	}
	.flow .stepbar {
		display: block;
	}
	.flow 	.stepbar__item {
		width: auto;
		height: 60px;
		margin: 0px;
	}
	.flow .stepbar__item .stepbar__item-inner::after {
		position: absolute;
		content: "";
		left: calc(50% - 10px);
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 0 10px;
	}
	.flow .stepbar__item:last-child .stepbar__item-inner::after {
		content: none;
	}
	.flow .stepbar__item:nth-child(2) .stepbar__item-inner::after,
	.flow .stepbar__item:nth-child(4) .stepbar__item-inner::after,
	.flow .stepbar__item:nth-child(6) .stepbar__item-inner::after {
		border-color: #e3e9f1 transparent transparent transparent;
	}
	.flow .stepbar__item:nth-child(3) .stepbar__item-inner::after {
		border-color: #003459 transparent transparent transparent;
	}
	.flow .stepbar__item:nth-child(5) .stepbar__item-inner::after,
	.flow .stepbar__item:nth-child(7) .stepbar__item-inner::after {
		content: "";
		border-color: #cad5e4 transparent transparent transparent;
	}
	.flow .stepbar__item-inner{
		display: block;
	}
	.flow .stepbar__item-inner dl {
		text-align: left;
		display: flex;
		padding: 1.5em 1.0em 1.2em;
	}
	.flow .stepbar__item-inner dt {
		margin-bottom: 0;
		font-size: 18px;
		font-style: normal;
	}
	.flow .stepbar__item-inner dd {
		width: 90%;
    margin: 0;
		text-align: center;
	}
	.flow .stepbar__item-inner dd span {
		font-size: 18px;
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 0;
	}
	.flow .stepbar__item:nth-child(1) dd span,
	.flow .stepbar__item:nth-child(2) dd span,
	.flow .stepbar__item:nth-child(3) dd span,
	.flow .stepbar__item:nth-child(4) dd span,
	.flow .stepbar__item:nth-child(5) dd span,
	.flow .stepbar__item:nth-child(6) dd span,
	.flow .stepbar__item:nth-child(7) dd span {
		padding-top: 0;
		padding-bottom: 0;
	}
	.flow .stepbar__item-inner dd span br {
		display: none;
	}
}