@charset "utf-8";
/* ------------------------------------------------------------ common */

@font-face {
font-family: 'Noto-Sans-JP-Light';
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto-Sans-JP-DemiLight';
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
font-family: 'Noto-Sans-JP-Regular';
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto-Sans-JP-Medium';
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
}

@font-face {
font-family: 'Noto-Sans-JP-Bold';
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}

@font-face {
font-family: 'DIN-1451';
/* src: url(../font/din1451alt.ttf) format('truetype'); */
}

.main-column,
.tab-panel-wrapper { overflow: visible!important; }

.neue { font-size: 18px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; font-style: normal;}
#ev { position: relative; min-width: 1245px; }/*もと：1300px*/

#ev .inner { width: 1200px;}
#background { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; background: url(/image.jsp?id=16224) no-repeat center center / cover;}


/* ------------------------------------------------------------ zenrincss隰�侭笆�雎ｸ蛹ｻ�� */

.main-column, .main-column>div {
    padding: 0 !important;
}
@media (min-width: 1025px)
.main-column, .main-column>div {
    padding: 0 !important;
}

@media (max-width: 1024px) and (min-width: 569px)
.main-column, .main-column>div {
    padding: 0 !important;
}

/* ------------------------------------------------------------ fv */

#fv { position: absolute; top: 0; color: #fff; width: 100%; height: calc( 100vh - 252px ); padding-top: 30vh;}
#fv h2 { font-size: 55px; /* font-weight: 700; */ line-height: 130%;}
#fv h2 span { display: block; margin-top: 14px;}
#fv .scroll { position: absolute; font-size: 13px; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#fv .scroll:after { content: ""; display: block; width: 1px; height: 77px; background: #fff; margin: 10px auto 0;}

.for-contact-bnr { position: fixed!important; right: 0; top: 50%!important; z-index: 10;}

/* ------------------------------------------------------------ vision */

#vision { background: url(/image.jsp?id=16202) no-repeat center center / cover; color: #fff; padding: 159px 0 92px;}
#vision .vision { margin-bottom: 138px;}
#vision .vision h3 { font-size: 29px; line-height: 165%; margin-bottom: 42px; text-align: center;}
#vision .vision h3 span { display: block; margin: 0 auto 58px;}
#vision .vision p { width: 800px; font-size: 22px; line-height: 240%; margin: 0 auto;}

#vision .status { }
#vision .status h4 { font-size: 49px; margin-bottom: 48px; text-align: center;}
#vision .status h4 .neue { display: block; margin: 0 auto 24px;}
#vision .status h4 .unit { font-size: 30px;}
#vision .status h4 small { font-size: 20px; line-height: 100%;}
#vision .status h4 small.sal_2{padding: 10px 0 0;display: block;}
#vision .status h4 small em { color: #fff;}

#vision .status .data { display: flex; justify-content: center; align-items: flex-end; text-align: center; margin-bottom: 95px;}
#vision .status .data em { color: #fff;}

#vision .status .data .count { width: 100%;}
#vision .status .data .count .survey { font-size: 27px; margin-bottom: 36px;}
#vision .status .data .count .num { text-align: right; font-size: 55px; line-height: 100%; margin-bottom: 23px;}
#vision .status .data .count .num span { font-size: 99px; font-family: 'DIN-1451', serif; line-height: 100%; padding-right: 13px;}
#vision .status .data .count .num small { display: block; font-size: 14px; line-height: 100%; font-family: 'Noto-Sans-JP-DemiLight'; margin-top: 19px;}
#vision .status .data .count .circle { width: 100%; padding: 19px 0 23px; border: 1px solid #fff; border-radius: 50px; font-size: 26px;}
#vision .status .data .count .circle span { font-size: 31px; letter-spacing: -0.03em; padding-right: 3px;}

#vision .status .data .left { width: 395px; margin-right: 95px;}
#vision .status .data .left img { display: inline-block; margin-bottom: 30px;}

#vision .status .data .right { width: 422px; margin-left: 64px;}
#vision .status .data .right .count:first-child { margin-bottom: 67px;}
#vision .status .data .right .count .survey { font-size: 25px; margin-bottom: 34px;}

#vision .status .installations { padding: 54px 0 50px; color: #000; background: #fff;}
#vision .status .installations h5 { font-size: 32px; color: #009D95; text-align: center; margin-bottom: 40px;}
#vision .status .installations h5 .unit { font-size: 24px;}
#vision .status .installations .flex { display: flex; justify-content: space-between;}

#vision .status .installations .flex .left { position: relative; width: 516px;; padding-left: 46px;}
#vision .status .installations .flex .left img { margin: 40px 0 0 10%;}
#vision .status .installations .flex .left .graph { position: absolute; top: 25.5px; width: 100%; height: 587px;}
#vision .status .installations .flex .left .graph .area { position: absolute; padding-left: 10px; border-left: 3px solid;}
#vision .status .installations .flex .left .graph .area table { width: 100px; }
#vision .status .installations .flex .left .graph .area tr { }
#vision .status .installations .flex .left .graph .area th,
#vision .status .installations .flex .left .graph .area td { font-size: 14px; padding: 6px 0;}
#vision .status .installations .flex .left .graph .area th { width: 60px; text-align: left;}
#vision .status .installations .flex .left .graph .area td { width: 30px;}

#vision .status .installations .flex .left .graph .touhoku { bottom: 193px; left: 420px; border-color: #F28201;}
#vision .status .installations .flex .left .graph .kantou { bottom: -13px; left: 420px; border-color: #FFD100;}
#vision .status .installations .flex .left .graph .chubu { bottom: -13px; left: 300px; border-color: #8AB92A;}
#vision .status .installations .flex .left .graph .kansai { bottom: -13px; left: 160px; border-color: #22992A;}
#vision .status .installations .flex .left .graph .shikoku { bottom: -13px; left: 40px; border-color: #E782B1;}
#vision .status .installations .flex .left .graph .chugoku { top: 0; left: 160px; border-color: #00A7EA;}
#vision .status .installations .flex .left .graph .kyushu { top: 0; left: 40px; border-color: #3D76BB;}


#vision .status .installations .flex .right { width: 50%; padding-right: 54px;}
#vision .status .installations .flex .right p { font-size: 19px; text-align: right; margin-bottom: 20px;}
#vision .status .installations .flex .right em { color: #000;}
#vision .status .installations .flex .right .tt_1 em { color: #646464;}
#vision .status .installations .flex .right table { width: 484px; text-align: left; margin-left: auto; margin-bottom: 30px;}
#vision .status .installations .flex .right tr { border-bottom: 1px solid #D9D9D9;}
#vision .status .installations .flex .right th,
#vision .status .installations .flex .right td { padding: 25px 0 32px;}

#vision .status .installations .flex .right tr:first-child th,
#vision .status .installations .flex .right tr:first-child td { padding-top: 0;}
#vision .status .installations .flex .right th { width: 85px; font-size: 29px; padding-right: 19px;}
#vision .status .installations .flex .right th span { font-size: 48px; font-family: 'DIN-1451', serif; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right .rank { position: relative;}
#vision .status .installations .flex .right .rank:before { position: absolute; content: ""; display: block; width: 33px; height: 26px; top: 15px; left: -40px;}

#vision .status .installations .flex .right table tr:nth-of-type(1) span.rank:before { background: url(/image.jsp?id=16218) no-repeat center center / 100%;}
#vision .status .installations .flex .right table tr:nth-of-type(2) span.rank:before { background: url(/image.jsp?id=16219) no-repeat center center / 100%;}
#vision .status .installations .flex .right table tr:nth-of-type(3) span.rank:before { background: url(/image.jsp?id=16220) no-repeat center center / 100%;}

#vision .status .installations .flex .right .city { width: 150px; font-size: 29px;}
#vision .status .installations .flex .right .count { font-size: 27px; }
#vision .status .installations .flex .right .count span { font-size: 48px; color: #009D95; font-family: 'DIN-1451', serif; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right .plus { font-size: 33px; color: #EA6E04; text-align: right;}
#vision .status .installations .flex .right .plus.blue { color: #0067C0;}
#vision .status .installations .flex .right .plus span { font-size: 39px; font-family: 'DIN-1451', serif; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right small { display: block; font-size: 18px; text-align: right; color: #646464;}
#vision .status .installations .flex .right small.tt_1{padding: 0 0 10px;}
#vision .status .installations .text{padding: 50px 54px 0; font-size: 18px; text-align: right;}
/* ------------------------------------------------------------ provide */

.white { background: #fff;}

#provide { padding: 122px 0 171px;}
#provide h3 { font-size: 49px; margin-bottom: 83px; text-align: center;}
#provide h3 span { display: block; color: #009D95; margin: 0 auto 29px;}
#provide .flex { display: flex; justify-content: center; align-items: flex-start; max-width: 1600px; margin: 0 auto;}
#provide .flex:nth-child(2),
#provide .flex:nth-child(4) { flex-flow: row-reverse;}
#provide .flex .probideImg { width: 50%; }
#provide .flex:nth-child(1) .probideImg { padding: 438px 0 417px; background: url(/image.jsp?id=16208) no-repeat left center / auto 100%;}
#provide .flex:nth-child(2) .probideImg { padding: 300px 0 280px; background: url(/image.jsp?id=16448) no-repeat right center / auto 100%;}
#provide .flex:nth-child(3) .probideImg { padding: 364px 0 263px; background: url(/image.jsp?id=16211) no-repeat right center / auto 100%;}
#provide .flex:nth-child(4) .probideImg { padding: 347px 0 302px; background: url(/image.jsp?id=16214) no-repeat left center / auto 100%;}
#provide .flex .probideImg img { display: block; margin: 0 auto;}
#provide .flex:nth-child(1) .probideImg img { }
#provide .flex:nth-child(2) .probideImg img { }
#provide .flex:nth-child(3) .probideImg img { }

#provide .flex .box { width: 50%; padding: 64px 0 0 91px;}
#provide .flex .box .inside { width: 530px;}
#provide .flex:nth-child(2) .box,
#provide .flex:nth-child(4) .box { padding: 70px 90px 0 0; text-align: right;}
#provide .flex:nth-child(2) .box .inside,
#provide .flex:nth-child(4) .box .inside { display: inline-block; text-align: left;}
#provide .flex:nth-child(2) .box .inside ul,
#provide .flex:nth-child(4) .box .inside ul{ margin-bottom: 0px;}
#provide .flex:nth-child(2) .box .inside ul li .mini,
#provide .flex:nth-child(4) .box .inside ul li .mini{font-size: 18px; color: #000; text-align: left; text-indent: -32px; padding-left: 32px;}
#provide .flex .box .num { font-size: 27px; color: #009D95; margin-bottom: 32px;}
#provide .flex .box .num span { font-size: 24px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; margin-right: 20px; vertical-align: 2px;}
#provide .flex .box h4 { font-size: 45px; line-height: 145%; margin-bottom: 50px;}
#provide .flex .box ul { margin-bottom: 40px;}
#provide .flex .box li { padding: 28px 0; border-bottom: 1px solid #D6D6D6;}
#provide .flex .box li:first-child { padding-top: 0;}
#provide .flex .box li:last-child { border-bottom: 0px;}
#provide .flex .box li p { font-size: 26px; line-height: 145%; text-indent: -54px; padding-left: 54px;}
#provide .flex .box li p span { display: inline-block; width: 54px; font-size: 31px; font-family: 'DIN-1451', serif; color: #009D95; padding-left: 54px;}
#provide .flex .box li.accordion_list { padding: 0;}
#provide .flex .box li.accordion_list .accordion-header { position: relative; padding: 28px 0; }

#provide .flex .box li.accordion_list .accordion-body { transition: 0.5s;}
#provide .flex .box li.accordion_list .accordion-body .grey { width: 100%; padding: 30px 25px; background: #F4F4F4;}
#provide .flex .box li.accordion_list .accordion-body .grey p { font-size: 18px; line-height: 200%; text-indent: 0; padding-left: 0;}

#provide .flex .box .txt { font-size: 26px; line-height: 160%; margin-bottom: 56px;}
#provide .flex .box .list { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 65px;}
#provide .flex .box .list p { font-size: 26px; color: #009D95; padding: 20px 25px; border: 1px solid #707070; border-radius: 10px;}
#provide .flex .box .list p:nth-of-type(1),
#provide .flex .box .list p:nth-of-type(2) { padding: 20px 37px; margin-bottom: 10px;}
#provide .flex .box .btns { position: relative; display: block; width: 424px; padding: 19px 0 20px; font-size: 23px; line-height: 140%; color: #fff; background: #009D95;   border-radius: 50px; text-align: center; margin: 0 0 30px; }
#provide .flex .box .map{background: #ce1717; margin: 0 0 10px;}
#provide .flex .box .mini{text-align: center; font-size: 14px; font-family: 'Noto-Sans-JP-Medium';width: 424px; padding: 0 0 23px;}
#provide .flex .box .btns:after { position: absolute; content: ""; border-top: solid 2px #fff; border-right: solid 2px #fff; width: 20px; height: 20px; top: 50%; right: 30px; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg);}
#provide .flex .box .center { width: 424px; text-align: center;}
#provide .flex .box #fortie-up { position: relative; display: inline-block; font-size: 23px; color: #009D95; border-bottom: 2px solid #009D95; padding-bottom: 8px; text-align: left;}
#provide .flex .box #fortie-up:after { content: ""; display: inline-block; width: 11px; height: 11px; border-bottom: solid 2px #009D95; border-right: solid 2px #009D95; transform: rotate(45deg); margin: 0 11px 4px;}

#provide .company_box{max-width: 1500px; padding: 120px 50px 0;margin: 0 auto;}
#provide .company_box .box{border-top: 2px solid #d5d5d5; border-bottom: 2px solid #d5d5d5; position: relative;}
#provide .company_box h5{left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); font-size: 24px;background: #000; color: #fff; position: absolute; padding: 13px 54px; }
#provide .company_box .box .list_box{ display: flex; justify-content: center; align-items: center; padding: 75px 0 70px;}
#provide .company_box .box .list_box img{width: 16%;}
#provide .company_box .box .list_box img:not(:last-child){margin: 0 4% 0 0;}
#provide .company_box .comment { font-size: 14px; color: #333; line-height: 220%; padding: 30px 0 0;}

/* ------------------------------------------------------------ cese */

#cese { padding-bottom: 205px;}
#cese h3 { font-size: 49px; margin-bottom: 71px; text-align: center;}
#cese h3 span { display: block; color: #009D95; margin: 0 auto 29px;}
#cese .case { display: flex; justify-content: flex-start; align-items: flex-start;}
#cese .case a { display: block; width: 373px; color: #000; margin-right: 40px;}
#cese .case a:last-child { margin-right: 0;}
#cese .case a img { margin-bottom: 25px;}
#cese .case a .client { font-size: 19px; margin-bottom: 16px;}
#cese .case a ul { display: flex; margin-bottom: 12px;}
#cese .case a li { font-size: 12px; padding: 6px; border: 1px solid #707070; border-radius: 3px; margin-right: 4px;}
#cese .case a li.black { color: #fff; background: #000; border-color: #000;}
#cese .case a .txt { font-size: 18px; line-height: 155%; font-family: 'Noto-Sans-JP-DemiLight'; color: #838283; margin-bottom: 15px; background: #fff; height: calc(1.55em * 5); overflow: hidden;}
#cese .case a .watch { font-size: 16px;}


/* ------------------------------------------------------------ contact */

#contact { padding: 69px 0 103px; background: url(/image.jsp?id=16200) no-repeat center center / cover;}
#contact .flex { display: flex; align-items: center;}
#contact .flex .txt { width: 50%; color: #fff;}
#contact .flex .txt h3 { font-size: 49px; margin-bottom: 28px;}
#contact .flex .txt h3 span { display: block; margin-bottom: 27px;}
#contact .flex .txt p { font-size: 18px; line-height: 155%; font-family: 'Noto-Sans-JP-DemiLight';}
#contact .flex a { display: block; width: 457px; font-size: 24px; line-height: 93px; color: #000; background: #fff url(/image.jsp?id=16206) no-repeat 77px center / 23px; text-align: center; padding-left: 25px; border-radius: 50px; margin-left: 153px; margin-top: 120px;}



/* ------------------------------------------------------------ liquid ------------------------------------------------------------ */
@media only screen and (max-width: 1245px) {


#ev { min-width: auto;}
#ev .inner { width: 90%;}


/* ------------------------------------------------------------ vision */

#vision .vision h3 br.PC { display: none;}


#vision .status .data { display: block; margin-bottom: 63px;}

#vision .status .data .count { width: 100%; margin-bottom: 42px;}
#vision .status .data .count .survey { margin-bottom: 20px;}
#vision .status .data .count .num { text-align: center;}
#vision .status .data .count .circle { width: 100%; border-radius: 50px; max-width: 500px; margin: 0 auto;}
#vision .status .data .count .circle span { font-size: 25px; padding-right: 3px;}

#vision .status .data .left { width: 100%; margin-right: 0;}
#vision .status .data .left img { display: inline-block; margin-bottom: 30px;}

#vision .status .data .right { width: 100%; margin-left: 0;}
#vision .status .data .right .count:first-child { margin-bottom: 42px;}
#vision .status .data .right .count:last-child { margin-bottom: 0;}
#vision .status .data .right .count .survey { font-size: 20px; margin-bottom: 20px;}


#vision .status .installations { padding: 54px 25px 86px;}

#vision .status .installations .flex { display: block;}

#vision .status .installations .flex .left { position: relative; width: 90%; padding-left: 0; margin: 0 auto;}
#vision .status .installations .flex .left img { width: 100%; height: auto; margin: 0 0 18px;}
#vision .status .installations .flex .left .graph { position: relative; top: auto; display: flex; align-items: center; flex-flow: wrap column; width: 90%; height: 690px; margin: 0 auto 40px;}
#vision .status .installations .flex .left .graph .area { position: relative; padding-left: 11px; border-left: 3px solid; margin-bottom: 20px;}
#vision .status .installations .flex .left .graph .area th { text-align: left;}

#vision .status .installations .flex .left .graph .touhoku { bottom: auto; left: auto; border-color: #F28201;}
#vision .status .installations .flex .left .graph .kantou { bottom: auto; left: auto; border-color: #FFD100; margin-bottom: 28px;}
#vision .status .installations .flex .left .graph .chubu { bottom: auto; left: auto; border-color: #8AB92A;margin-bottom: 0;}
#vision .status .installations .flex .left .graph .kansai { bottom: auto; left: auto; border-color: #22992A;}
#vision .status .installations .flex .left .graph .shikoku { bottom: auto; left: auto; border-color: #E782B1;}
#vision .status .installations .flex .left .graph .chugoku { top: auto; left: auto; border-color: #00A7EA;}
#vision .status .installations .flex .left .graph .kyushu { top: auto; left: auto; border-color: #3D76BB; margin-bottom: 0;}


#vision .status .installations .flex .right { width: 70%; padding-right: 0; padding-left: 5%; margin: 0 auto;}
#vision .status .installations .flex .right p { font-size: 10px; margin-bottom: 12px;}
#vision .status .installations .flex .right table { width: 100%; margin: 0 auto 17px;}
#vision .status .installations .flex .right tr { }
#vision .status .installations .flex .right th,
#vision .status .installations .flex .right td { padding: 15px 0 14px;}
#vision .status .installations .flex .right th { width: 16%; font-size: 16px; padding-right: 12px;}
#vision .status .installations .flex .right th span { font-size: 26px; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right .rank { position: relative;}
#vision .status .installations .flex .right .rank:before { position: absolute; content: ""; display: block; width: 18px; height: 14px; top: 9px; left: -25px;}
#vision .status .installations .flex .right .city { width: 27%; font-size: 16px;}
#vision .status .installations .flex .right .count { font-size: 15px; }
#vision .status .installations .flex .right .count span { font-size: 26px; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right .plus { font-size: 18px;}
#vision .status .installations .flex .right .plus span { font-size: 21px; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right small { font-size: 9px;}

#vision .status .installations .tt_box{width: 70%; margin: 0 auto; text-align: left;}
#vision .status .installations .text { padding: 50px 0 0; line-height: 160%; max-width: 576px; text-align: left;margin: 0 0 0 auto;}
/* ------------------------------------------------------------ provide */

#provide { padding: 60px 0 30px;}
#provide .flex { display: block; max-width: none; margin-bottom: 55px;}
#provide .flex:nth-child(2) { }
#provide .flex .probideImg { width: 100%;}
#provide .flex:nth-child(1) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16207) no-repeat center center / cover;}
#provide .flex:nth-child(2) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16449) no-repeat center center / cover;}
#provide .flex:nth-child(3) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16213) no-repeat center center / cover;}
#provide .flex:nth-child(4) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16213) no-repeat center center / cover;}

#provide .flex .probideImg img { display: block; width: 100%; height: auto; margin: 0 auto;}

#provide .flex .box { width: 100%; padding: 38px 0 0;}
#provide .flex .box .inside { width: 90%; margin: 0 auto;}
#provide .flex:nth-child(2) .box,
#provide .flex:nth-child(4) .box { padding: 38px 0 0; text-align: start;}
#provide .flex:nth-child(2) .box .inside,
#provide .flex:nth-child(4) .box .inside { display: block; text-align: start;}
#provide .flex .box h4 { font-size: 32px; line-height: 150%; margin-bottom: 49px;}
#provide .flex .box ul { margin-bottom: 35px;}
#provide .flex .box li { padding: 20px 0;}
#provide .flex .box li.accordion_list { padding: 0;}
#provide .flex .box li.accordion_list .accordion-header { position: relative; padding: 20px 0; }

#provide .flex .box li.accordion_list .accordion-body { }
#provide .flex .box li.accordion_list .accordion-body .grey { width: 100%; padding: 25px 0 25px 15px; }

#provide .flex .box .btns { width: 70%; padding: 15px 0 16px; font-size: 20px; border-radius: 50px; margin: 0 auto 20px;}
#provide .flex .box .center { width: 70%; margin: 0 auto;}
#provide .flex .box .mini { text-align: center; font-size: 14px; width: auto; padding: 0 0 23px; }
#provide .flex .box .map {margin: 0 auto 10px;}

#provide .company_box { max-width: 800px; padding-top: 80px}
#provide .company_box h5 { width: 100%;  max-width: 300px; text-align: center; }
#provide .company_box .box .list_box{ flex-wrap: wrap; padding: 75px 0 40px;}
#provide .company_box .box .list_box img:not(:last-child){margin: 0 0 0 0;}
#provide .company_box .box .list_box img:nth-child(1){margin: 0 10% 5% 0;}
#provide .company_box .box .list_box img:nth-child(2){margin: 0 0 5%;}
#provide .company_box .box .list_box img:nth-child(3){margin: 0 10% 5% 0;}
#provide .company_box .box .list_box img:nth-child(4) {margin: 0 0 5%;}
#provide .company_box .box .list_box img{width: 40%;}
/* ------------------------------------------------------------ cese */

#cese { padding-bottom: 52px;}
#cese .case { display: block;}
#cese .case a { display: block; width: 100%; margin: 0 auto 50px;}
#cese .case a:last-child { margin: 0 auto;}
#cese .case a img { width: 100%; height: auto; margin-bottom: 15px;}


/* ------------------------------------------------------------ contact */

#contact { padding: 50px 0 62px; background: url(/image.jsp?id=16199) no-repeat center center / cover;}
#contact .flex { display: block;}
#contact .flex .txt { width: 100%; margin-bottom: 45px;}
#contact .flex .txt h3 { font-size: 32px; margin-bottom: 42px; text-align: center;}
#contact .flex .txt h3 span { display: block; margin: 0 auto 10px;}
#contact .flex .txt p {  line-height: 175%;}
#contact .flex a { width: 100%; font-size: 21px; line-height: 80px; background: #fff url(/image.jsp?id=16206) no-repeat 50px center / 23px; padding-left: 40px; margin: 0 auto;}



}





/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 640px) {


.neue { font-size: 15px;}
#ev { min-width: auto; }

#ev .inner { width: 90%;}
#background { background-image: url(/image.jsp?id=16225);}

/* ------------------------------------------------------------ fv */

#fv { color: #fff; width: 100%; height: 80vh; padding-top: 15vh;}
#fv h2 { font-size: 34px; font-weight: 700; line-height: 130%;}
#fv h2 span { font-size: 11px; margin-top: 17px;}
#fv .scroll { font-size: 10px;}
#fv .scroll:after { width: 1px; height: 46px; margin: 10px auto 0;}

.for-contact-bnr { width: 30px; height: 132px; display: none;}
.for-contact-bnr a img { width: 100%; height: auto;}

/* ------------------------------------------------------------ vision */

#vision { background: url(/image.jsp?id=16201) no-repeat center center / cover; color: #fff; padding: 77px 0 32px;}
#vision .vision { margin-bottom: 130px;}
#vision .vision h3 { font-size: 17px; line-height: 165%; margin-bottom: 22px; text-align: center;}
#vision .vision h3 span { display: block; margin: 0 auto 31px;}
#vision .vision p { width: 100%; font-size: 16px; line-height: 220%; margin: 0 auto;}

#vision .status { }
#vision .status h4 { font-size: 20px; margin-bottom: 43px; line-height: 155%;}
#vision .status h4 .neue { margin-bottom: 30px;}
#vision .status h4 .unit { font-size: 15px;}
#vision .status h4 small { font-size: 14px}

#vision .status .data { display: block; margin-bottom: 63px;}

#vision .status .data .count { width: 100%; margin-bottom: 42px;}
#vision .status .data .count .survey { font-size: 22px; margin-bottom: 20px;}
#vision .status .data .count .num { font-size: 45px; margin-bottom: 22px; text-align: center;}
#vision .status .data .count .num span { font-size: 80px; padding-right: 7px;}
#vision .status .data .count .num small { font-size: 12px; line-height: 100%; margin-top: 8px;}
#vision .status .data .count .circle { width: 100%; padding: 15px 0 19px; border-radius: 50px; font-size: 21px;}
#vision .status .data .count .circle span { font-size: 25px; padding-right: 3px;}

#vision .status .data .left { width: 100%; margin-right: 0;}
#vision .status .data .left img { display: inline-block; margin-bottom: 30px;}

#vision .status .data .right { width: 100%; margin-left: 0;}
#vision .status .data .right .count:first-child { margin-bottom: 42px;}
#vision .status .data .right .count:last-child { margin-bottom: 0;}
#vision .status .data .right .count .survey { font-size: 20px; margin-bottom: 20px;}


#vision .status .installations { padding: 28px 18px 34px;}
#vision .status .installations h5 { font-size: 22px; margin-bottom: 24px;}
#vision .status .installations h5 .unit { font-size: 15px;}

#vision .status .installations .flex { display: block;}

#vision .status .installations .flex .left { position: relative; width: 100%; padding-left: 0;}
#vision .status .installations .flex .left img { width: 100%; height: auto; margin-bottom: 18px;}
#vision .status .installations .flex .left .graph { position: relative; top: auto; display: flex; align-items: center; flex-flow: wrap column; width: 90%; height: 640px; margin: 0 auto 40px;}
#vision .status .installations .flex .left .graph .area { position: relative; padding-left: 11px; border-left: 3px solid; margin-bottom: 20px;}
#vision .status .installations .flex .left .graph .area table { width: 100px; }
#vision .status .installations .flex .left .graph .area tr { }
#vision .status .installations .flex .left .graph .area th,
#vision .status .installations .flex .left .graph .area td { font-size: 12px; padding: 6px 0;}
#vision .status .installations .flex .left .graph .area th { width: 65px; text-align: left;}
#vision .status .installations .flex .left .graph .area td { width: 25px;}

#vision .status .installations .flex .left .graph .touhoku { bottom: auto; left: auto; border-color: #F28201;}
#vision .status .installations .flex .left .graph .kantou { bottom: auto; left: auto; border-color: #FFD100; margin-bottom: 28px;}
#vision .status .installations .flex .left .graph .chubu { bottom: auto; left: auto; border-color: #8AB92A;margin-bottom: 0;}
#vision .status .installations .flex .left .graph .kansai { bottom: auto; left: auto; border-color: #22992A;}
#vision .status .installations .flex .left .graph .shikoku { bottom: auto; left: auto; border-color: #E782B1;}
#vision .status .installations .flex .left .graph .chugoku { top: auto; left: auto; border-color: #00A7EA;}
#vision .status .installations .flex .left .graph .kyushu { top: auto; left: auto; border-color: #3D76BB; margin-bottom: 0;}


#vision .status .installations .flex .right { width: 100%; padding-right: 0; padding-left: 5%;}
#vision .status .installations .flex .right p { font-size: 10px; margin-bottom: 12px;}
#vision .status .installations .flex .right table { width: 275px; margin: 0 auto 17px;}
#vision .status .installations .flex .right tr { }
#vision .status .installations .flex .right th,
#vision .status .installations .flex .right td { padding: 15px 0 14px;}
#vision .status .installations .flex .right th { width: 16%; font-size: 16px; padding-right: 12px;}
#vision .status .installations .flex .right th span { font-size: 26px; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right .rank { position: relative;}
#vision .status .installations .flex .right .rank:before { position: absolute; content: ""; display: block; width: 18px; height: 14px; top: 9px; left: -25px;}
#vision .status .installations .flex .right .city { width: 27%; font-size: 16px;}
#vision .status .installations .flex .right .count { font-size: 15px; }
#vision .status .installations .flex .right .count span { font-size: 26px; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right .plus { font-size: 18px;}
#vision .status .installations .flex .right .plus span { font-size: 21px; padding-right: 3px; vertical-align: -2px;}
#vision .status .installations .flex .right small { font-size: 9px;}

#vision .status .installations .tt_box {width: 100%;}
#vision .status .installations .text { padding: 25px 0px 0; font-size: 14px; line-height: 160%; text-align: center;}

/* ------------------------------------------------------------ provide */

#provide { padding: 60px 0 30px;}
#provide h3 { font-size: 20px; margin-bottom: 52px;}
#provide h3 span { margin-bottom: 10px;}
#provide .flex { display: block; max-width: none; margin-bottom: 55px;}
#provide .flex:nth-child(2) { }

#provide .flex:nth-child(2) .box .inside ul li .mini{font-size: 14px; }
#provide .flex .probideImg { width: 100%;}
#provide .flex:nth-child(1) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16207) no-repeat center center / cover;}
#provide .flex:nth-child(2) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16449) no-repeat center center / cover;}
#provide .flex:nth-child(3) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16210) no-repeat center center / cover;}
#provide .flex:nth-child(4) .probideImg { padding: 14vw 0; background: url(/image.jsp?id=16213) no-repeat center center / cover;}
#provide .flex .probideImg img { display: block; width: 100%; height: auto; margin: 0 auto;}

#provide .flex .box { width: 100%; padding: 38px 0 0;}
#provide .flex .box .inside { width: 90%; margin: 0 auto;}
#provide .flex:nth-child(2) .box,
#provide .flex:nth-child(4) .box { padding: 38px 0 0; text-align: start;}
#provide .flex:nth-child(2) .box .inside,
#provide .flex:nth-child(4) .box .inside { display: block; text-align: start;}
#provide .flex .box .num { font-size: 17px; margin-bottom: 26px;}
#provide .flex .box .num span { font-size: 15px; margin-right: 11px; vertical-align: 1px;}
#provide .flex .box h4 { font-size: 26px; line-height: 150%; margin-bottom: 49px;}
#provide .flex .box ul { margin-bottom: 35px;}
#provide .flex .box li { padding: 20px 0;}
#provide .flex .box li p { font-size: 17px; line-height: 145%; text-indent: -32px; padding-left: 32px;}
#provide .flex .box li p span { display: inline-block; width: 32px; font-size: 20px; padding-left: 32px;}
#provide .flex .box li.accordion_list { padding: 0;}
#provide .flex .box li.accordion_list .accordion-header { position: relative; padding: 20px 0; }

#provide .flex .box li.accordion_list .accordion-body { }
#provide .flex .box li.accordion_list .accordion-body .grey { width: 100%; padding: 25px 0 25px 15px; }
#provide .flex .box li.accordion_list .accordion-body .grey p { font-size: 12px; text-indent: 0; padding-left: 0;}

#provide .flex .box .txt { font-size: 17px; line-height: 160%; margin-bottom: 36px;}
#provide .flex .box .list { display: flex; margin-bottom: 33px;}
#provide .flex .box .list p { font-size: 17px; color: #009D95; padding: 15px 0; border-radius: 10px; text-align: center;}
#provide .flex .box .list p:nth-of-type(1),
#provide .flex .box .list p:nth-of-type(2) { padding: 15px 0; margin-bottom: 6px;}
#provide .flex .box .list p:nth-of-type(1) { width: 54%;}
#provide .flex .box .list p:nth-of-type(2) { width: 44%;}
#provide .flex .box .list p:nth-of-type(3) { width: 24%;}
#provide .flex .box .list p:nth-of-type(4) { width: 52%;}
#provide .flex .box .list p:nth-of-type(5) { width: 20%;}
#provide .flex .box .btns { width: 282px; padding: 15px 0 16px; font-size: 15px; border-radius: 50px; margin: 0 auto 20px;}
#provide .flex .box .btns:after {border-top: solid 2px #fff; border-right: solid 2px #fff; width: 18px; height: 18px; right: 30px;}
#provide .flex .box .center { width: 282px; }
#provide .flex .box #fortie-up { font-size: 15px; padding-bottom: 8px;}
#provide .flex .box #fortie-up:after { width: 8px; height: 8px; margin: 0 8px 2px;}


#provide .company_box{ padding: 42px 25px 0;margin: 0 auto 51px;}
#provide .company_box h5{ font-size: 18px; width: 100%; text-align: center; max-width: 200px; padding: 10px 0px; }
#provide .company_box .box .list_box{ padding: 40px 0 30px;}
#provide .company_box .box .list_box img{width: 40%; height: auto;}
#provide .company_box .box .list_box img:not(:last-child){margin: 0 0 0 0;}
#provide .company_box .box .list_box img:nth-child(1){margin: 0 10% 5% 0;}
#provide .company_box .box .list_box img:nth-child(2){margin: 0 0 5%;}
#provide .company_box .box .list_box img:nth-child(3){margin: 0 10% 5% 0;}
#provide .company_box .box .list_box img:nth-child(4) {margin: 0 0 5%;}
#provide .company_box .box .list_box img{width: 40%;}
#provide .company_box .comment { font-size: 12px; line-height: 180%; padding: 20px 0 0;}

/* ------------------------------------------------------------ cese */

#cese { padding-bottom: 52px;}
#cese h3 { font-size: 20px; margin-bottom: 33px; text-align: center;}
#cese h3 span { margin-bottom: 10px;}
#cese .case { display: block;}
#cese .case a { display: block; width: 100%; margin-bottom: 50px;}
#cese .case a:last-child { margin-bottom: 0;}
#cese .case a img { width: 100%; height: auto; margin-bottom: 15px;}
#cese .case a .client { font-size: 19px; margin-bottom: 13px;}
#cese .case a ul { display: flex; margin-bottom: 15px;}
#cese .case a li { font-size: 12px; padding: 6px 10px; border-radius: 3px; margin-right: 3px;}
#cese .case a .txt { font-size: 14px; margin-bottom: 15px;}
#cese .case a .watch { font-size: 14px;}


/* ------------------------------------------------------------ contact */

#contact { padding: 50px 0 62px; background: url(/image.jsp?id=16199) no-repeat center center / cover;}
#contact .flex { display: block;}
#contact .flex .txt { width: 100%; margin-bottom: 45px;}
#contact .flex .txt h3 { font-size: 20px; margin-bottom: 42px; text-align: center;}
#contact .flex .txt h3 span { display: block; margin: 0 auto 10px;}
#contact .flex .txt p { font-size: 16px; line-height: 175%;}
#contact .flex a { width: 100%; font-size: 21px; line-height: 80px; background: #fff url(/image.jsp?id=16206) no-repeat 50px center / 23px; padding-left: 40px; margin: 0 auto;}


}