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

/*-----------------------------------------------------------------------
	body
-----------------------------------------------------------------------*/
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
}

.l-grid01{ width: 100%; }
.l-col01{ width: 540px; float: left; }
.l-col02{ width: 480px; float: left; }
.l-line{ border-bottom: #e3e9ef solid 1px; }

.l-uibox{ width: 95%; margin: 0 auto; }
.ttl-box{ text-align: center; }

.text-box{ color: #123343; }

.l-table{ border-collapse: collapse; }

.l-pc{ display: none; }
.l-sp{ display: block; }

/*-----------------------------------------------------------------------
	header
-----------------------------------------------------------------------*/
#l-header{ width: 100%; min-width: 100%; }
#l-header > #header-title{
	width: 90%;
	margin:0 auto;
	padding: 10px 0 11px;
}
#l-header > #header-title > h1{ line-height: 0; }
#l-header > #header-title > h1 > img{ width: 100%; height: auto; }

/*-----------------------------------------------------------------------
	footer
-----------------------------------------------------------------------*/
#l-footer{ width: 100%; }
#l-footer > #footer-box{
	width: 94%;
	padding: 14px 0 16px;
	text-align: center;
}
#l-footer > #footer-box > li{ float: none; }
#l-footer > #footer-box > li#i_footer01{
	width: 30%;
	margin: 0 auto 15px;
	padding-right: 0;
	background: none;
}
#l-footer > #footer-box > li#i_footer02{ font-size: 70%; }

/*-----------------------------------------------------------------------
	form
-----------------------------------------------------------------------*/
.l-formbox{
	width: 100%;
	min-width: 100%;
	background: #262f42;
	padding: 35px 0 31px;
	text-align: center;
}
.l-formbox > .l-grid01{ width: 85%; margin: 0 auto; }
.l-formbox > .l-grid01 > .text-box02{
	margin-bottom: 15px;
	font-size: 75%;
}
.l-formbox > .l-grid01 > a{
	padding: 20px 0;
	display: block;
	background: url(../images/bg_form.png) no-repeat center;
	background-size: contain;
	color: #ffffff;
	font-size: 80%;
	text-decoration: none;
}
.l-formbox > .l-grid01 > a > .text-box{
	width: 220px;
	margin: 0 auto;
	color: #ffffff;
	letter-spacing: 0.1em;
	background: url(../images/i_360.png) no-repeat left center;
	background-size: 22px auto;
	text-align: right;
}
.l-formbox > .l-grid01 > img{  vertical-align: bottom; }

/*-----------------------------------------------------------------------
	mainimg
-----------------------------------------------------------------------*/
#l-mainimg{ min-width: 100%; }
#l-mainimg > .l-grid01{ margin: 0 auto; height: 220px; }
#l-mainimg > .l-grid01 > iframe{ width: 100%; height: 220px; }

/*-----------------------------------------------------------------------
	service
-----------------------------------------------------------------------*/
#l-service{ min-width: 100%; height: 100%; }
#l-service > .l-grid01{ margin: 0 auto; padding: 50px 0 0; }
#l-service > .l-grid01 > .ttl-box{ margin-bottom: 19px; }
#l-service > .l-grid01 > .ttl-box .l-sp{
	width: 110px;
	margin: 0 auto;
	padding: 3px 8px 3px;
	border: #02c2f2 solid 1px;
	color: #02c2f2;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-service > .l-grid01 > #l-service-box{ width: 94%; }
#l-service > .l-grid01 > #l-service-box > #ttl-sub-service{ margin-bottom: 22px; line-height: 1.5; }
#l-service > .l-grid01 > #l-service-box > #ttl-sub-service .l-sp{
	color: #123343;
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-service > .l-grid01 > #l-service-box > #ttl-sub-service .l-sp .text-box{ color: #02c2f2; }
#l-service > .l-grid01 > #l-service-box > #ttl-sub-service .l-sp .text-box02{
	display: inline-block;
	font-size: 45%;
	vertical-align: middle;
}
#l-service > .l-grid01 > #l-service-box > #ttl-sub-service .l-sp .text-box04{ padding: 0 2px; font-weight: normal; }

#l-service > .l-grid01 > #l-service-box > .text-box{
	margin-bottom: 35px;
	font-size: 70%;
	letter-spacing: 0.12em;
}
#l-service > .l-grid01 > #l-service-box > #l-service-list{ width: 100%; margin: 0 auto; }
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-pc{ display: none; }
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp{
	width: 100%;
	display: block;
	margin-bottom: 70px;
}
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp > tbody{
	display: inline-block;
}
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp tr{}
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp tr td{
	width: 40%;
	height: 35%;
	padding: 20px 10px 20px 8px;
	border-bottom: #bae5f4 solid 1px;
}
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp tr:last-child td{ border-bottom: none; }

#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp tr td .img-box{ width: 50%; height: 50%; margin: 0 auto 13px; }
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp tr td .img-box img{
	width: 100%;
	height: auto;
	vertical-align: top;
}
#l-service > .l-grid01 > #l-service-box > #l-service-list > .l-table.l-sp tr td p{ font-size: 70%; }

/*-----------------------------------------------------------------------
	flow
-----------------------------------------------------------------------*/
#l-flow{ min-width: 100%; }
#l-flow > .l-grid01{ padding: 50px 0 62px; }
#l-flow > .l-grid01 > .ttl-box{ margin-bottom: 18px; }
#l-flow > .l-grid01 > .ttl-box .l-sp{
	width: 110px;
	margin: 0 auto;
	padding: 3px 8px 3px;
	border: #02c2f2 solid 1px;
	color: #02c2f2;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-flow > .l-grid01 > #ttl-sub-flow{ width: 94%; margin: 0 auto 38px; line-height: 1.5; }
#l-flow > .l-grid01 > #ttl-sub-flow .l-sp{
	color: #123343;
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.1em;
}

#l-flow > .l-grid01 > #l-flow-box{ width: 94%; margin: 0 auto;  }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept {
	width: 100%;
	float: none;
	padding-top: 85px;
	margin-left: 0;
	position: relative;
}
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept:first-child{ width: 100%; margin-left: 0; padding-top: 0; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept:first-child > dt{ padding-left: 0; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dt{
	height: 100%;
	padding-top: 0;
	margin-bottom: 20px;
	font-size: 22px;
	letter-spacing: 0.1em;
}
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dt > .l-sp{
	width: 58px;
	height: 42px;
	display: block;
	margin: 0 auto 18px;
	padding: 16px 0 0;
	color: #ffffff;
	font-size: 22px;
	text-align: center;
	background: #02c2f2;
	border-radius: 300px;
	font-family:Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dt#l-step01,
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dt#l-step02,
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dt#l-step03{ background:  none; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd.text-box{ margin-bottom: 25px; font-size: 85%; }

#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd > .l-sp{ color: #123343; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd > .l-sp > .img-box{ width: 40%; margin: 0 auto; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd#l-step02dd > .l-sp > .img-box{ width: 60%; margin: 0 auto 20px; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd#l-step03dd > .l-sp > .img-box{ width: 70%; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd > .l-sp > .img-box > img{ width: 100%; height: auto; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd > .l-sp > .img-box#l-step01sp-img{ max-width: 100px; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd > .l-sp > .text-box02{ font-size: 120%; font-weight: bold; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd#l-step02dd> .l-sp > .text-box02{
	width: 70%;
	margin: 0 auto 7px;
	font-size: 80%;
	text-align: left;
}
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept > dd > .l-sp > .text-box03{ font-size: 80%; line-height: 1.4; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept:first-child > dd > .l-sp > .text-box02{ margin-bottom: 10px; }

#l-flow > .l-grid01 > #l-flow-box > dl.l-stept:after{
	width: 61px;
	height: 31px;
	margin-top: 40px;
	margin-left: -30px;
	top: 100%;
	bottom: 0;
	left: 50%;
	background: url(../images/i_arw_sp.png) no-repeat bottom center;
}
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept:first-child:after{ background: url(../images/i_arw_sp.png) no-repeat bottom center; }
#l-flow > .l-grid01 > #l-flow-box > dl.l-stept:last-child:after{ background: none; }

/*-----------------------------------------------------------------------
	price
-----------------------------------------------------------------------*/
#l-price{ min-width: 100%; }
#l-price > .l-grid01{ margin: 0 auto; padding: 50px 0 75px; }
#l-price > .l-grid01 > .ttl-box{ margin-bottom: 19px; }
#l-price > .l-grid01 > .ttl-box .l-sp{
	width: 110px;
	margin: 0 auto;
	padding: 3px 8px 3px;
	border: #02c2f2 solid 1px;
	color: #02c2f2;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-price > .l-grid01 > #ttl-sub-price{ width: 94%; margin: 0 auto 46px; line-height: 1.5; }
#l-price > .l-grid01 > #ttl-sub-price .l-sp{
	color: #123343;
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-price > .l-grid01 > #l-price-box{ width: 94%; }
#l-price > .l-grid01 > #l-price-box > .l-table{ width: 100%; }
#l-price > .l-grid01 > #l-price-box > .l-table th{ font-size: 90%; }
#l-price > .l-grid01 > #l-price-box > .l-table th:first-child{ border-right: #41d1f5 solid 1px; }
#l-price > .l-grid01 > #l-price-box > .l-table td{
	padding: 15px 10px 15px 18px;
	font-size: 90%;
}
#l-price > .l-grid01 > #l-price-box > .l-table td.tb-grid01{
	width: 43%;
	padding: 16px 8px 13px;
}
#l-price > .l-grid01 > #l-price-box > .l-dougavr {
	margin-top: 50px;
}
#l-price > .l-grid01 > #l-price-box > .l-dougavr img {
	max-width: 85%;
}

/*-----------------------------------------------------------------------
	more
-----------------------------------------------------------------------*/
#l-more{ min-width: 100%; }
#l-more > .l-grid01{ padding: 50px 0 68px; }
#l-more > .l-grid01 > .ttl-box{ margin-bottom: 35px; }
#l-more > .l-grid01 > .ttl-box .l-sp{
	width: 200px;
	margin: 0 auto;
	padding: 3px 8px 3px;
	border: #02c2f2 solid 1px;
	color: #02c2f2;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-more > .l-grid01 > #ttl-sub-more{ width: 94%; margin: 0 auto 37px; line-height: 1.5; }
#l-more > .l-grid01 > #ttl-sub-more .l-sp{
	color: #123343;
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-more > .l-grid01 > #l-more-box{ width: 94%; margin: 0 auto; }
#l-more > .l-grid01 > #l-more-box > .l-col01{
	width: 100%;
	margin: 0 0 30px;
	float: none;
}
#l-more > .l-grid01 > #l-more-box > .l-col01 > .img-box{ width: 70%; margin: 0 auto 10px; }
#l-more > .l-grid01 > #l-more-box > .l-col01 > .img-box > img{ width: 100%; height: auto; }
#l-more > .l-grid01 > #l-more-box > .l-col01 > .text-box {
	margin: 0 auto 25px;
	font-size: 90%;
	text-align: center;
	line-height: 1.4;
}
#l-more > .l-grid01 > #l-more-box > .l-col01 > #ttl-sub-more02{
	width: 90%;
	margin: 0 auto 10px;
	font-size: 120%;
}
#l-more > .l-grid01 > #l-more-box > .l-col01 > #l-more-list{ width: 90%; margin: 0 auto; font-size: 90%; }
#l-more > .l-grid01 > #l-more-box > .l-col01 > #l-more-list li{
	margin: 0 auto 10px;
	padding: 0 0 0 20px;
	background: url(../images/i_check_sp.png) no-repeat left 0.3em;
	background-size: 15px 12px;
	letter-spacing: 0.15em;
	line-height: 1.5;
}
#l-more > .l-grid01 > #l-more-box > .l-col02{ width: 100%; float: none; }
#l-more > .l-grid01 > #l-more-box > .l-col02 > .l-table{ width: 100%; margin: 0 0 7px; }
#l-more > .l-grid01 > #l-more-box > .l-col02 > .l-table th{ font-size: 90%; }
#l-more > .l-grid01 > #l-more-box > .l-col02 > .l-table td{
	padding: 15px 15px 9px 0;
	font-size: 80%;
}
#l-more > .l-grid01 > #l-more-box > .l-col02 > .l-table td.tb-grid01{ width: 43%; font-size: 100%; }
#l-more > .l-grid01 > #l-more-box > .l-col02 > .l-table td .text-box{ font-size: 140%; }
#l-more > .l-grid01 > #l-more-box > .l-col02 > p.text-box{ font-size: 75%; }



/*-----------------------------------------------------------------------
	manual
-----------------------------------------------------------------------*/
#l-manual{ min-width: 100%; }
#l-manual > .l-grid01{ padding: 50px 0 62px; }
#l-manual > .l-grid01 > .ttl-box{ margin-bottom: 18px; }
#l-manual > .l-grid01 > .ttl-box .l-sp{
	width: 110px;
	margin: 0 auto;
	padding: 3px 8px 3px;
	border: #02c2f2 solid 1px;
	color: #02c2f2;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#l-manual > .l-grid01 > #ttl-sub-flow{ width: 94%; margin: 0 auto 38px; line-height: 1.5; }
#l-manual > .l-grid01 > #ttl-sub-flow .l-sp{
	color: #123343;
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.1em;
}

#l-manual > .l-grid01 > #l-manual-box{ width: 94%; margin: 0 auto;  }
#l-manual > .l-grid01 > #l-manual-box > .l-stept {
	width: 100%;
	float: none;
	padding-top: 35px;
	margin-left: 0;
	position: relative;
}
#l-manual > .l-grid01 > #l-manual-box > .l-stept:first-child{ width: 100%; margin-left: 0; padding-top: 0; }
#l-manual > .l-grid01 > #l-manual-box > .l-stept > a[target="_blank"]{
	font-size: 90%;
}
#l-manual > .l-grid01 > #l-manual-box > .l-stept > a[target="_blank"]:after{
	top: .1em;
}

#l-manual > .l-grid01 > #l-manual-box > .l-stept:first-child:after{ background: url(../images/i_arw_sp.png) no-repeat bottom center; }
#l-manual > .l-grid01 > #l-manual-box > .l-stept:last-child:after{ background: none; }


/*-----------------------------------------------------------------------
	sample
-----------------------------------------------------------------------*/
#l-sample{ min-width: 100%; margin-bottom: 50px; }
#l-sample > .l-grid01{ padding: 46px 0 0; }
#l-sample > .l-grid01 > .ttl-box{
	width: 94%;
	margin: 0 auto 6px;
	color: #123343;
	font-size: 90%;
}
#l-sample > .l-grid01 > .text-box{
	width: 94%;
	margin: 0 auto 46px;
	font-size: 80%;
}
#l-sample > .img-box{
	width: 90%;
	height: 100%;
	margin: 0 auto 30px;
}
#l-sample > .img-box > iframe{
	width: 100%;
	height: 100%;
	position: relative;
	left: 0;
}
#l-sample > #sample-img01 > iframe{ width: 100%; margin-left: 0; }

#l-sample > #sample-img-grid{
	width: 90%;
	height: 100%;
	margin: 0 auto;
}
#l-sample > #sample-img-grid > .img-box02{
	width: 100%;
	margin-left: 0;
	position: relative;
	top: 0;
	left: 0;
	z-index: 5;
}
#l-sample > #sample-img-grid > .img-box02 > #l-col01{
	width: 100%;
	margin: 0 auto 30px;
	float: none;
	position: relative;
}
#l-sample > #sample-img-grid > .img-box02 > #l-col02{
	width: 100%;
	height: 100%;
	float: none;
	position: relative;
}


/*-----------------------------------------------------------------------
	lightbox
-----------------------------------------------------------------------*/
.lightbox{
	padding: 10px;
}
#cboxClose{
	width: 25px;
	height: 25px;
	background-size:100% ;
}
.lightbox .lightbox-image{
	margin-top: 10px;
}
.lightbox .lightbox-title{
	font-size: 90%;
}
.lightbox .lightbox-text{
	font-size: 75%;
	padding: 10px;
	margin-top: 10px;
}
.lightbox .lightbox-text:after{
	width: 7px;
	height: 7px;
	top: -7px;
	background-size: 7px;
}
#colorbox{
	min-height:300px !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#colorbox,#cboxWrapper,#cboxContent,#cboxLoadedContent{
    max-width: 400px;

}