@charset "utf-8";
/* CSS Document */
/*------------------------------------------------------
		base
-------------------------------------------------------*/ 
* { margin: 0; padding: 0; }
body {
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	font-weight:normal;
	font-size: 1em;
	color: #000;
	background-color:#fff;
	margin: 0;
	position:relative;
}
html,body{ width: 100%;	}
body { width: 100%; min-width: 1000px;}
@media screen and (max-width: 750px) {
body { width: 100%; min-width: auto;}
}/*END*/
img { vertical-align: bottom; max-width: 100%; }
a:link{ outline:none;}
.pc{ display: inline-block;}
.sp{ display: none;}
@media screen and (max-width: 750px) {
.pc{ display: none;}
.sp{ display: inline-block;}
}/*END*/

/*-------------------------------------------------
	fade　 
--------------------------------------------------*/
body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:#fff; pointer-events: none; z-index: 9999; opacity: 0; -webkit-transition: opacity 1.5s ease; transition: opacity 1.5s ease;}
body.fade::after { opacity: 1; }

/* move
------------------------------------------*/
#main .main_img img,
#main .scroll img{ visibility: hidden; width: 100%;}/*move img*/

/*-------------------------------------------------
	main
--------------------------------------------------*/
#main { position: relative;  background: #f8f5f0; overflow: hidden;}
#main img{ width: 100%; vertical-align: top;}
#main h1{ width: 15%; position: absolute; left: 10%; top: 7%; z-index: 2; transition: 0.3s;}
#main .main_deotech_img{ width: 14.1%; position: absolute; left: 10%; top: 30.8%; z-index: 2; transition: 0.3s;}
#main .main_txt_box{ position: absolute; left: 25.7%; top: 39.4%; z-index: 2; transition: 0.3s; }
@media screen and (max-width: 1200px) {
#main h1{ left: 6%;  }
#main .main_deotech_img{ left: 6%; ;}
#main .main_txt_box{ left: 23%; top: 34%; }
}/*END*/
@media screen and (max-width: 750px) {
#main h1{ width: 32.6%; position: absolute; left: 6.4%; top: 4.3%; }
#main .main_sp_box{  padding: 7% 0 5%; position: relative;}
#main .main_sp_box::after { content:" "; display:block; clear:both;}/*clearfix*/
#main .main_deotech_img{ float: left; width: 24.4%; position: absolute; left: 6.3%; top: 12%; z-index: 2; }
#main .main_txt_box{ float: right; position: relative; left:0px; right: 0%; top: 0%;  width: 64%; }
}/*END*/
#main .main_txt_box h2 { font-size: 2vw; line-height: 1.5; letter-spacing: 0.23vw; font-weight: 500; color: #2a365d;}
#main .main_txt_box .kin { margin-top: 1.4vw; font-size: 1.2vw; line-height: 2.35; letter-spacing: 0.08vw; font-weight: 500; padding: 0 1.5vw; color: #46588e; background: #fff; display: inline-block; border-radius: 30px; }
#main .main_txt_box p { margin-top: 1.3vw; font-size: 1.07vw; line-height: 1.8; font-weight: 500; padding: 0; color: #000;}
#main .main_txt_box p.txt_s { margin-top: 1.1vw; font-size: 0.8vw; line-height: 1.8; font-weight: 400; padding: 0; color: #000; }

@media screen and (max-width: 1200px) {
#main .main_txt_box h2 { font-size: 2.2vw; }
#main .main_txt_box .kin { margin-top: 1.4vw; font-size: 1.3vw; }
#main .main_txt_box p { margin-top: 1.3vw; font-size: 1.17vw;}
#main .main_txt_box p.txt_s { margin-top: 1.1vw; font-size: 0.8vw; }
}/*END*/
@media screen and (max-width: 1000px) {
#main .main_txt_box h2 { font-size: 22px; }
#main .main_txt_box .kin { font-size: 13px; }
#main .main_txt_box p { font-size: 11.7px;}
#main .main_txt_box p.txt_s {  font-size: 8px; }
}/*END*/
@media screen and (max-width: 750px) {
#main .main_txt_box h2 { font-size: 4.6vw; letter-spacing: 0.5vw;}
#main .main_txt_box .kin { margin-top: 1.8vw; font-size: 3vw; letter-spacing: 0.3vw; padding: 0 3vw; }
#main .main_txt_box p { margin-top: 1.9vw; font-size: 2.9vw; letter-spacing: 0.3vw; line-height: 1.5;}
#main .main_txt_box p.txt_s { margin-top: 2.8vw; font-size: 2.3vw; line-height: 1.5; letter-spacing: 0.1vw; }
}/*END*/

/*scroll*/
#main .scroll { position: absolute; left: 50%; bottom:7%; width:90px; height: 90px; margin-left: -45px; transition: 0.5s; vertical-align: bottom; text-align: center;}
#main .scroll img{  width:22px; height: 90px; }
#main .scroll:hover{ position: absolute; left: 50%; bottom:6.6%; opacity: 0.7;}
@media screen and (max-width: 1200px) {
#main .scroll { position: absolute; left: 50%; bottom:7%; width:70px; height: 70px; margin-left: -35px; }
#main .scroll img{ width:17px; height: 70px;margin-left: 7%; }
}/*END*/
@media screen and (max-width: 750px) {
#main .scroll{ display: none; }
}/*END*/
#main .main_img{ width: 100%; z-index: 1; }

/*
===== font-weight =====
regular 400
medium 500
bold 700
=======================
*/

/*-------------------------------------------------
	concept
--------------------------------------------------*/
#concept { padding: 74px 0 0 0;}
@media screen and (max-width: 750px) {
#concept { padding: 13vw 0 0 0;}
}/*END*/

/*h2*/
.co h2{ text-align: center; display:block;}
.co h2 img { width: 360px; margin: 0 auto; }
.co h2 p::before { background:#444; width: 2px; height: 20px; margin: 24px auto 22px; content:" "; display:block; }
.co h2 p{ font-size: 18px; line-height: 1; letter-spacing: 4px; font-weight: 500; color: #444; display:block;}
@media screen and (max-width: 750px) {
.co h2 img { width: 60%; margin: 0 auto; }
.co h2 p::before { background:#444; width: 1px; height: 3.7vw; margin: 3.7vw auto 3.3vw; content:" "; display:block; }
.co h2 p{ font-size: 3vw; line-height: 1; letter-spacing: 0.6vw; font-weight: 500; color: #444; display:block;}
}/*END*/

/*.txt*/
#concept .txt{ margin-top: 31px; font-size: 16px; line-height: 2; font-weight: 400; }
@media screen and (max-width: 750px) {
#concept .txt{ margin-top: 5vw; font-size: 16px; line-height: 1.7; font-weight: 400; }
}/*END*/@media screen and (max-width: 450px) {
#concept .txt{ margin-top: 5vw; font-size: 14px; line-height: 1.7; font-weight: 400; }
}/*END*/

/*inner*/
#concept .inner{ width: 90%; max-width: 1200px; margin: 0 auto; padding: 71px 0; border-bottom: solid 1px #dbdbdb;}
#concept .inner::after { content:" "; display:block; clear:both;}/*clearfix*/
#concept .inner_L{ float: left; width: 39.4%;}
#concept .inner_R{ float: right; width: 53.2%;}
@media screen and (max-width: 750px) {
#concept .inner{ padding: 8.5vw 0 14vw;}
#concept .inner_L{ float: none; width: 99%; margin: 0 auto;}
#concept .inner_R{ float: none; width: 90%; margin: 0 auto;}
}/*END*/

/*h3*/
#concept h3{ font-size: 26px; line-height: 1.6; letter-spacing: 4px; font-weight: 500; color: #2a365d; display:block;}
@media screen and (max-width: 750px) {
#concept h3{ margin-top: 5.5vw; font-size: 4.65vw; line-height: 1.6; letter-spacing: 0.4vw; font-weight: 500; color: #2a365d; display:block;}
}/*END*/

/*read*/
#concept .inner_R .read ul{ margin-top: 24px; }
#concept .inner_R .read ul li { font-size: 16px; line-height: 1.8; font-weight: 500; margin-bottom: 10px;}
#concept .inner_R .read ul li span{ border-bottom:solid 1px #666; padding-bottom: 2px; display: inline-block;}
@media screen and (max-width: 750px) {
#concept .inner_R .read ul{ margin-top: 3vw; }
#concept .inner_R .read ul li { font-size: 3.5vw; line-height: 1.7;letter-spacing: 0.1vw; font-weight: 500; margin-bottom: 10px;}
#concept .inner_R .read ul li span{ border-bottom:solid 1px #666; padding-bottom: 0px; display: inline-block;}
}/*END*/

/*point*/
#concept .inner_R .point{ margin-top: 40px; max-width: 568px; border: solid 1px #d4d4d4; box-sizing: border-box; border-radius: 4px;}
#concept .inner_R .point ul{ width: 90%; margin: 0 auto; padding: 10px 0  24px 0;}
#concept .inner_R .point ul li{ display: flex; align-items: center; margin-top: 14px; }
#concept .inner_R .point ul li h4{ color: #2baf72; width: 76px!important; height: 76px!important; border: solid 4px #e0e0e0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 50px;}
#concept .inner_R .point ul li h4{ font-size:18px; line-height: 1;}
#concept .inner_R .point ul li:nth-child(3) h4{ font-size:14px; line-height: 1.4;}
#concept .inner_R .point ul li p{ width: auto; font-size: 14px; line-height: 1.4; flex: 1; -webkit-flex: 1; margin-left: 10px;  }
@media screen and (max-width: 750px) {
#concept .inner_R .point{ margin-top: 9vw; max-width: 568px; border: solid 1px #d4d4d4; box-sizing: border-box; border-radius: 4px;}
#concept .inner_R .point ul{ width: 90%; margin: 0 auto; padding: 6px 0  20px 0;}
#concept .inner_R .point ul li{ display: flex; align-items: center; margin-top: 10px; }
#concept .inner_R .point ul li h4{ color: #2baf72; width: 76px!important; height: 76px!important; border: solid 3px #e0e0e0; }
#concept .inner_R .point ul li h4{ font-size:18px; line-height: 1;}
#concept .inner_R .point ul li:nth-child(3) h4{ font-size:14px; line-height: 1.4;}
#concept .inner_R .point ul li p{ width: auto; font-size: 14px; line-height: 1.4; flex: 1; -webkit-flex: 1; margin-left: 10px;  }
}/*END*/
@media screen and (max-width: 450px) {
#concept .inner_R .point{ margin-top: 9vw; max-width: 568px; border: solid 1px #d4d4d4; box-sizing: border-box; border-radius: 4px;}
#concept .inner_R .point ul{ width: 90%; margin: 0 auto; padding: 1vw 0  3vw 0;}
#concept .inner_R .point ul li{ display: flex; align-items: center; margin-top: 2vw; }
#concept .inner_R .point ul li h4{ color: #2baf72; width: 55px!important; height: 55px!important; border: solid 2px #e0e0e0; }
#concept .inner_R .point ul li h4{ font-size:14px; line-height: 1;}
#concept .inner_R .point ul li:nth-child(3) h4{ font-size:12px; line-height: 1.4;}
#concept .inner_R .point ul li p{ width: auto; font-size: 12px; line-height: 1.4; flex: 1; -webkit-flex: 1; margin-left: 10px;  }
}/*END*/

/*-------------------------------------------------
	products
--------------------------------------------------*/
#products { padding: 68px 0 0 0;}
@media screen and (max-width: 750px) {
#products { padding: 13vw 0 0 0;}
}/*END*/
/*inner*/
#products .inner{ width: 90%; max-width: 1200px; margin: 0 auto; padding: 71px 0 0; border-bottom: solid 1px #dbdbdb;}
#products .inner ul li{ margin-bottom: 60px;}
#products .inner ul li:nth-child(3){ margin-bottom: 30px;}
#products .inner ul li::after { content:" "; display:block; clear:both;}/*clearfix*/
#products .inner_L{ float: left; width: 36%;}
#products .inner ul li:nth-child(2) .inner_L img{margin-left: 7%;}
#products .inner_R{ float: right; width: 56.5%;}
@media screen and (max-width: 750px) {
#products .inner{ padding: 8.5vw 0 5vw;}
#products .inner ul li{ margin-bottom: 14vw;}
#products .inner ul li:nth-child(3){ margin-bottom: 0vw;}
#products .inner ul li:nth-child(2) .inner_L img{margin-left: 0%;}
#products .inner_L{ float: none; width: 60%; margin: 0 auto;}
#products .inner_R{ float: none; width: 90%; margin: 0 auto;}
}/*END*/
/*h3*/
#products h3{ font-size: 26px; line-height: 1.6; letter-spacing: 1.6px; font-weight: 500; color: #2a365d; display:block;}
#products h3 p{ display:inline-block; margin-right: 18px}
#products h3 span{ margin-top: 0px; position: relative; top: -2px; font-size: 16px; line-height: 38px; letter-spacing: 1px; font-weight: 500; padding: 0px 18.5px; background: #eaeaea; color: #2a365d; display:inline-block; border-radius: 30px; }
@media screen and (max-width: 750px) {
#products h3{ margin-top: 5.5vw; font-size: 5.3vw; line-height: 1.6; letter-spacing: 0.4vw; font-weight: 500; color: #2a365d; display:block;}
#products h3 span{ margin-top: 3vw; position: relative; top: -2px; font-size: 3.1vw; line-height: 2; letter-spacing: 0.2vw; font-weight: 500; padding: 0.4vw 3vw; }
#products h3.h3_s{ margin-top: 5.5vw; font-size: 4.9vw; line-height: 1.6; letter-spacing: 0.05vw; font-weight: 500; color: #2a365d; display:block;}
}/*END*/
@media screen and (max-width: 490px) {
#products h3.h3_s{ margin-top: 5.5vw; font-size: 4.8vw; line-height: 1.6; letter-spacing: 0.05vw; font-weight: 500; color: #2a365d; display:block;}
}/*END*/


/*.txt*/
#products .txt{ margin-top: 25px; font-size: 16px; line-height: 2; font-weight: 400; }
@media screen and (max-width: 750px) {
#products .txt{ margin-top: 2.9vw; font-size: 16px; line-height: 1.7;}
}/*END*/
@media screen and (max-width: 450px) {
#products .txt{ margin-top: 2.9vw; font-size: 14px; }
}/*END*/
/*.txt_s*/
#products .txt_s{ margin-top: 22px; font-size: 14px; line-height: 1.4; letter-spacing: 0.2px; font-weight: 400; }
@media screen and (max-width: 450px) {
#products .txt_s{ margin-top: 5vw; font-size: 12px;  }
}/*END*/
/*btn*/
#products .products_btn{ margin: 40px 0 ;}
#products .products_btn a{ position: relative; background: #2a365d; font-size: 16px; color: #fff; padding: 0 73px 0 30px ; line-height: 64px; display: inline-block; text-decoration: none; border-radius: 3px; transition: 0.3s;}
#products .products_btn a::after { background: url("../img/arrow.png"); width: 25px; height: 10px; position: absolute; right: 30px; top: 50%; margin-top:-5px; background-size: contain; content:" "; display:block; transition: 0.3s;}
#products .products_btn a:hover{background: #3f4f84; }
#products .products_btn a:hover::after { position: absolute; right: 27px; }
#products .products_btn a:nth-child(1){ margin-bottom: 13px;}

@media screen and (max-width: 750px) {
#products .products_btn{ margin: 40px 0 ; text-align: center;}
}/*END*/
@media screen and (max-width: 450px) {
#products .products_btn{ margin: 8vw 0 ; text-align: center;}
#products .products_btn a{ position: relative; background: #2a365d; font-size: 3.3vw; color: #fff; padding: 0 65px 0 25px ; line-height: 50px; }
#products .products_btn a:nth-child(1){ margin-bottom: 12px;}
}/*END*/
@media screen and (max-width: 370px) {
#products .products_btn{ margin: 8vw 0 ; text-align: center;}
#products .products_btn a{ position: relative; background: #2a365d; font-size: 3.5vw; color: #fff; padding: 0 50px 0 25px ; line-height: 50px; }
#products .products_btn a::after { background: url("../img/arrow.png"); width: 20px; height: 10px; position: absolute; right: 20px; top: 50%; margin-top:-3px; background-size: contain; content:" "; display:block; transition: 0.3s;}
#products .products_btn a:nth-child(1){ margin-bottom: 10px;}
}/*END*/

/*-------------------------------------------------
	other
--------------------------------------------------*/
#other { padding: 74px 0 140px 0;}
#other .inner{ width: 80%; max-width: 1038px; margin: 0 auto; padding: 53px 0 25px;  background: #f6f5ef; text-align: center;  border-radius: 15px;}
#other .inner .img{ width: 90%; margin: 0 auto;}
#other .inner h2{ margin-top: 39px; font-size: 26px; line-height: 1.6; letter-spacing: 2px; color: #2a365d; font-weight: 500;}
#other .inner h2 br{display: none;}
#other .inner ul{ margin-top: 26px;}
#other .inner ul li{ margin-bottom: 14px; font-size: 19px; line-height: 1.6; font-weight: bold;}
@media screen and (max-width: 750px) {
#other { padding: 13vw 0 29vw 0;}
#other .inner{  padding: 4vw 0 7.2vw; border-radius: 10px; }
#other .inner h2 br{display: inherit;}
}/*END*/
@media screen and (max-width: 570px) {
#other .inner h2{ margin-top: 6vw; font-size: 4.6vw; line-height: 1.6; letter-spacing: 0.3vw; color: #2a365d; font-weight: 500;}
#other .inner ul{ margin-top: 4vw;}
#other .inner ul li{ margin-bottom: 1vw; font-size: 16px; line-height: 1.6;}
}/*END*/
@media screen and (max-width: 450px) {
#other .inner ul li{ margin-bottom: 1vw; font-size: 3.5vw; line-height: 1.6;}
}/*END*/


/*-------------------------------------------------
	footer
--------------------------------------------------*/ 
footer{ background: #f2f2f2; }
/*page_top*/
footer .inner .page_top a{ position: absolute; top: -59px; right: 0%; display: block; width: 44px; background:#f2f2f2; border: solid #f2f2f2 1px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; transition: 0.3s;}
footer .inner .page_top a:hover{ opacity: 0.7; background:#fff; border: solid #ccc 1px; }
@media screen and (max-width: 750px) {
footer .inner .page_top a{ position: absolute; top: -16vw; right: 50%; margin-right: -6%;display: block;  width: 12%; }
}/*END*/
footer a{ color: #2174a8; text-decoration: none; transition: 0.9s;}
footer a:hover{ color: #5ab6f1;}
footer .inner{position: relative; width:95%; max-width: 1200px; margin: 0 auto; }
footer .inner::after { content:" "; display:block; clear:both;}/*clearfix*/
footer .foot_link{ float: left; font-size: 13px; line-height: 1; letter-spacing: 1px; color: #000; padding: 35px 0;}
footer .copyright{ float: right; font-size: 12px; line-height: 1; letter-spacing: 1px; color: #000; padding: 35px 0; font-family: Arial, Helvetica, "sans-serif";}
@media screen and (max-width: 750px) {
footer .inner{ text-align: center; padding: 43px 0;}
footer .foot_link{ float: none; font-size: 13px; line-height: 1; letter-spacing: 1px; color: #000; padding: 0px 0;}
footer .copyright{ float: none; font-size: 12px; line-height: 1; letter-spacing: 1px; color: #000; padding: 20px 0 0;;}
}/*END*/
@media screen and (max-width: 400px) {
footer .foot_link{  font-size: 11px; }
footer .copyright{  font-size: 10px; padding: 17px 0 0;  }
}/*END*/