@charset "utf-8";
@import "reset.css";
@import "genericons.css";/*web-font-icon-use*/
/** @import "../../manage/common/font-awesome.min.css"; web-font-icon-use2 **/
@import "common.css";

/* CSS Document */
/*==================== 基本設定 ====================*/
html{}
body{max-width:480px;margin:0 auto;font-family:"HiraKakuProN-W3",Arial,sans-serif;font-size:14px;line-height:1.5;color:#333;-webkit-text-size-adjust:none;overflow-x:hidden;letter-spacing:1px;}
table{font-size:1em;}
img,object{max-width:100%;}

/********** container ***********/
.l_container{}

/********** ヘッダー **********/
.l_header{z-index:20;position: fixed;transition: all 1s ease;width: 100%;max-width:480px;} /** .l_shop_headerは style_shop.cssを参照 **/
.l_header h1{width: 30%;padding-right: 15px;display: inline-block;}
.l_header h1 img{    vertical-align: text-top;}

.header_space{padding:10px;opacity:0;}
.header_space p{position: relative;width:30%;}
.header_space p:before {content:"";display: block;padding-top: 31.53%; }
.header_space p > span {display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.l_header .l_header_contents{background-color:#ff9c00;padding:10px;}
.l_header .ico{float:right;}
.l_header .ico img{ float:right;margin:5px 10px; }
.l_header a:link{text-decoration:none;}
/*.l_header .navi_btn{width:50%;height:38px;font-size:0;margin-right:10px;border: 1px solid #ccc;text-align:center;margin-top:7px;}*/
.l_header .navi_btn a{display:block;background-image: url(../images/sp_navi_icon.png);height:100%;background-size:contain;background-repeat:no-repeat; /*width:29%;text-indent: 348%;*/}
.l_header .navi_btn a.on{background-image: url(../images/sp_navi_icon_on.png);}

.l_header .navi_btn{width: 40px;height: 40px;display: inline-block;vertical-align: middle;    padding-left: 12px;}
#top.l_header .navi_btn a{display:block;background-image: url(../images/sp_navi_icon.png);height:100%;background-size:contain;background-repeat:no-repeat; width:100%;}
#top.l_header .navi_btn a.on{background-image: url(../images/sp_navi_icon_on.png);}


.l_header_contents .right_menu{float: right;width: 60%;text-align:right;}


/*.l_header_contents span.line_link a{display:block;    padding-right: 10px;}*/
.l_header_contents span.line_link{width: 65%;display: inline-block;vertical-align: middle;}


.l_main_navi .gnav{display:none;z-index: 20;top: 0px;transform: translateY(-150%);opacity: 0;transition: top .3s ease .3s,transform .3s ease .3s,opacity .3s ease;position: relative; background: #fff;
-webkit-transition: top 3s ease,opacity 3s ease;transition: top 3s ease,opacity 3s ease;}
.l_main_navi .gnav.on{display:block;opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);
height:85%;-webkit-height:calc(100vh - 60px);height:calc(100vh - 60px);overflow-y:auto;}
.l_main_navi li span{display:block;/*padding:0 10px;*/}
.menu_results_search #form5{/*position:relative; margin-bottom:20px;*/padding:20px;/*background-color:#e8f2f4;*/}
.menu_results_search .sbox5{outline:0;	height:38px;padding:0 10px; position:relative; left:0;top:0; width: 70%;border-radius:2px;background:#fff;}
.menu_results_search .sbtn5{width:70px;height:34px;position:relative; border-radius:5px;background:#0097c6;color:#fff;font-weight:bold;font-size:16px;border:none;}

.l_header .btn a.lg:before{content:"\f304";}
.l_header .btn a.mp:before{content:"\f425";}
.l_header .btn a.ct:before{content:"\f447";}

.l_help_navi{float:right;}
.l_help_navi li{ float:left; margin-left:10px; }
	
/******************** メインナビ ********************/
/*
.l_main_navi ul{}
.l_main_navi > li{padding:5px 0 0 0;}
.l_main_navi li a,.l_main_navi .hasChild > span{font-weight: bold;padding:15px 24px 15px 10px;color:#000000;display:block;position:relative;border-bottom:1px solid #a1a1a1;
background:#fff;}

***before a:beforeを用いることでaタグの更に下の階層も装飾できる***
.l_main_navi li a:before{font-family:genericons;content:"\f432";font-size:18px;position:absolute;top:50%;right:5px;line-height:1;width:18px;height:18px;margin-top:-9px;color: #ff9c00;}
.l_main_navi li a:before{-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);}

***hasChild***
.l_main_navi .hasChild ul{display:none;border-top:none;border-bottom:1px solid #A1A1A1;}
.l_main_navi .hasChild li{}
.l_main_navi .hasChild a{color:#aaa;}
.l_main_navi .hasChild a:before{}
.l_main_navi .hasChild li:last-of-type a{}
*/
/***20220601 メニュー変更***/
.l_main_navi ul.navi_list{display:flex;flex-wrap:wrap;padding: 20px 10px 0;align-items: center;}
.l_main_navi ul.navi_list li{width: 45%;padding: 0 10px;margin-bottom: 10px;}
/*.l_main_navi ul.navi_list li:last-of-type{width: 100%;}*/
.l_main_navi ul.navi_list li a{display: block;border-radius: 12px;text-align: center;height: 123px;}
.l_main_navi ul.navi_list li a span.title{font-size:16px;font-weight:bold;padding:0 0 16px;line-height: 1;}
.l_main_navi ul.navi_list li a.about,.l_main_navi ul.navi_list li a.faq,.l_main_navi ul.navi_list li a.partner,.l_main_navi ul.navi_list li a.school{background-color: #fff8ee;border: 1px solid #ffeed6;color: #ff9c00;}
.l_main_navi ul.navi_list li a.service,.l_main_navi ul.navi_list li a.category,.l_main_navi ul.navi_list li a.recruit{color: #0097c6;background-color: #eefafe;border: 1px solid #dff6fd;}

.l_main_navi ul li a.about .img img{height: 50px;padding: 18px 0;}
.l_main_navi ul li a.service .img img{height:68px;padding: 14px 0 10px;}
.l_main_navi ul li a.category .img img{height:60px;padding: 20px 0 13px;}
.l_main_navi ul li a.faq .img img{height:60px;padding: 20px 0 15px;}
.l_main_navi ul li a.partner .img img{height:49px;padding: 24px 0 20px;}
.l_main_navi ul li a.recruit .img img{height:53px;padding: 21px 0 18px;}
.l_main_navi ul li a.school .img img{height:60px;padding: 20px 0 11px;}

.l_main_navi .menu_link_banner{border-top:1px dotted #b6b6b6;padding-top:30px;}
.l_main_navi .menu_link_banner ul{padding:0 20px;}
.l_main_navi .menu_link_banner ul li{margin-bottom:15px;}

.l_main_navi .menu_underlink{padding: 10px 20px 80px;}
.l_main_navi .menu_underlink ul li{margin-bottom:5px;background: #eeee;padding: 15px 30px;}
.l_main_navi .menu_underlink ul li a{display:block;position:relative;}
.l_main_navi .menu_underlink ul li a:before{content:"";position:absolute;top:50%;
    margin-top: -3px;left: -15px;height: 5px;width: 5px;border-top: 1px solid #707070;
    border-right: 1px solid #707070;transform: rotate(45deg);}


@media screen and (max-width: 419px) {.l_main_navi ul.navi_list li {width: 44%;}} 
@media screen and (max-width:375px) {.l_main_navi ul.navi_list li {width: 43%;}} 

/* カレント用 */
.l_main_navi .mnv_off{}
.l_main_navi .mnv_on{}


.l_main_navi .menu_contact {padding: 20px 30px 20px;}

.l_main_navi .search_txt{padding: 0px 10px 20px 10px;}

.l_main_navi .area_contact .come_btn a{background-color:#0097c6;}

/******* 下部スクロールで表示 **********/
/* menu */
#side_fix{z-index:20;position: fixed;/*top: -200px;*/transition: all 1s ease;width: 100%;max-width:480px;}
#side_fix.on{top: 0;transition: all 1s ease;}
/*#side_fix.on .l_header{background-color:#fff;}*/
#side_fix.on .l_main_navi ul{    overflow-y: scroll;height: 100vh;max-height: calc(100vh - 60px);}

/********** コンテンツ **********/
.l_contents,.l_contents_shop{ /*padding: 0 10px 20px 10px; */}

  /* ぱんくず */
.pankuzu{padding-bottom:10px;text-align:right;font-size:11px;}
.pankuzu a:link { color:#698FDA;text-decoration:none;vertical-align:bottom;	}
.pankuzu a:visited { color:#698FDA;text-decoration:none;vertical-align:bottom; }
.pankuzu a:hover { color:#E0322C;text-decoration:underline;vertical-align:bottom; }

.pankuzu p{display:inline;border-top:1px solid #EAEAEA;border-bottom:1px solid #EAEAEA;background:url(../images/pan.jpg) left no-repeat;padding:6px 10px 3px 15px;vertical-align:bottom;}
.pankuzu .panF{display:inline;border-top:1px solid #EAEAEA;border-bottom:1px solid #EAEAEA;border-left:1px solid #EAEAEA;background:none;padding:6px 10px 3px 15px;vertical-align:bottom;}
.pankuzu img{display:inline;vertical-align:top;margin-bottom:-2px;_margin-bottom:-4px;}

*:first-child+html .pankuzu img{margin-bottom:-4px;}
head~/* */body .pankuzu img { margin-bottom:-4px; }
html:not(:target) .pankuzu img { margin-bottom:-2px; }

/********** 全ページ共通の下部 **********/
.gotop {position: fixed;bottom: 25px;right: 10px;transition: all .3s ease;}
.gotop a{width:55px;height:55px;display: block;}
/********** フッター **********/
.l_footer{}
.footer_contents{}
.footer_contents .footer_blue{padding:0 30px;background-color:#e8f2f4;}

.footer_contents .adress{padding-top: 20px;font-size: 14px;font-family: "Hiragino Kaku Gothic Pro";color: rgb(51, 51, 51);line-height: 1.2;text-align: center;}
.link_text{padding:20px 0 40px 0;}
.link_text span{
  font-size: 14px;
  font-family: "Hiragino Kaku Gothic Pro";
  color: rgb(51, 51, 51);
  line-height: 1.2;}
.link_text span.company_link::after{content:"|";}

.footer_contents .site_bana{text-align:center;display:block;}
.footer_contents .site_bana img{width: 176px;}
.l_footer .footer_contents a:link {	color:#333;text-decoration:none; }
.l_footer .footer_contents a:visited { color:#333;text-decoration:none; }
.l_footer .footer_contents a:hover { color:#E0322C;text-decoration:underline; }

.footer_contents .copyright{padding:5px 0;margin:0 auto;font-size:10px;}
.footer_contents .copyright address{ font-size:90%;text-align:center;}


.footer_contents .footer_menu ul{background-color:#ff9c00;padding: 0px 20px;height: 72px;}

/*.footer_contents .footer_menu ul.four_culumn{padding-right:-3px;padding-left:-3px;}*/
.footer_contents .footer_menu ul.four_culumn li{width:24%;float:left;text-align:center;display:block;vertical-align:top;margin-bottom:0;border-left:2px solid #fff;}
.footer_contents .footer_menu ul.four_culumn li:first-child{border-left:none;}
.footer_contents .footer_menu ul.four_culumn li:first-child a{padding: 7px 7px 7px 0;} 
.footer_contents .footer_menu ul.four_culumn li img.img_about{/*height:66px;*/width:68px;padding-bottom:0;}
.footer_contents .footer_menu ul.four_culumn li img.img_survice{/*height:67px;*/width:56px;padding-bottom:0;}
.footer_contents .footer_menu ul.four_culumn li img.img_construction{/*height:58px;*/width:51px;padding-bottom:0;}
.footer_contents .footer_menu ul.four_culumn li img.img_q{/*height:58px;*/width:32px;padding-bottom:0;}

.footer_contents .footer_menu ul.four_culumn li a{display:block;padding: 7px;text-decoration:none;}
.footer_contents .footer_menu ul.four_culumn li:nth-of-type(4n+4)::after{content:""; display: block; clear: both; height: 0; visibility:hidden;}


.l_parts_estimate {margin: 40px 0;}
.l_parts_estimate .come_area_pd {padding: 10px;}

.estimate_head_text{padding:20px 0;}
.estimate_head_text p{font-size: 16px;font-weight:bold;padding-bottom:5px;font-family: "Hiragino Kaku Gothic Pro";color: rgb(51, 51, 51);line-height: 1.2;text-align: center;}
.estimate_head_text h2 {font-size: 24px;font-family: "Hiragino Kaku Gothic Pro";color: rgb(255, 156, 0);line-height: 1.308;text-align: center;font-weight: bold;}
.estimate_flow{background-color: rgb(255, 156, 0);padding:15px 15px 25px;border-radius: 10px;}

.estimate_flow ul li{width: 100%;position:relative;padding-bottom:40px;}
.estimate_flow ul li:after{background: url(../images/sp_arrow.png) no-repeat left;content: "";left:50%;margin-left:-29px;background-size: 30px;display: block;background-position:50% center;position: absolute;width:58px;height: 50px;}
.estimate_flow ul li.tail{padding-bottom:0px;}
.estimate_flow ul li.tail:after{display:none;}
.estimate_flow ul li p{/*padding:10px 0;*/font-size: 12px;font-family: "Hiragino Kaku Gothic Pro";line-height: 1.5;text-align: left;}
.estimate_flow ul .img{max-width: 147.5px;}
.estimate_flow ul li .text{padding: 7px 0;}
.estimate_flow .under_text{margin-top:20px;font-size: 22px;font-family: "Hiragino Kaku Gothic Pro";color: rgb(255, 255, 255);line-height: 1.308;text-align: center;}
.estimate_flow .under_text span{display:inline-block;padding: 0 20px;position:relative;margin:10px 0 5px;}
.estimate_flow .under_text span:after,
.estimate_flow .under_text span:before{display:block;position:absolute;width:20px;height:23px;content:"";top:3px;background:none 50% 50% no-repeat;
-webkit-background-size:20px auto;background-size:20px auto;}
.estimate_flow .under_text span:after{left:0;background-image:url(../../images/estimate_word_left.png);}
.estimate_flow .under_text span:before{right:0;background-image:url(../../images/estimate_word_right.png);}
.estimate_flow .btn_line{text-align:center;}
.estimate_flow .btn_line img{width:80%;max-width:240px;}

.estimate_flow ul li.step_1{background:url("../images/ttl_esti_step_1.png") no-repeat top center;background-size: 68px 26px;padding-top: 35px;}
.estimate_flow ul li.step_2{background:url("../images/ttl_esti_step_2.png") no-repeat top center;background-size: 73px 26px;padding-top: 35px;}
.estimate_flow ul li.step_3{background:url("../images/ttl_esti_step_3.png") no-repeat top center;background-size: 73px 26px;padding-top: 35px;}

.estimate_flow ul li .inner{background: #fff;-webkit-border-radius: 10px;border-radius: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 15px;height: 100%;}
.estimate_flow ul li .inner .img_ttl{display: flex;width: 100%;}
.estimate_flow ul li .img_ttl span{display: block;width: 100%;text-align: center;}

.estimate_flow ul li .title{font-size: 15px;font-weight: bold;line-height: 1.5;}

.estimate_flow ul li .img_ttl span.img{display: flex;justify-content: center;align-items: center;}

.estimate_flow ul li.step_1 .inner .title{background:url("../images/flow_img_1.png") no-repeat center 15px;background-size: 43px 40px;padding-top: 65px;}
.estimate_flow ul li.step_2 .inner .title{background:url("../images/flow_img_2.png") no-repeat center 7px;background-size: 41px 58px;padding-top: 67px;}
.estimate_flow ul li.step_3 .inner .title{background:url("../images/flow_img_3.png") no-repeat center 24px;background-size: 40px 29px;padding-top: 67px;}

.estimate_flow ul.flow_list li .inner .btn_line{display: block;text-align: center;}
.estimate_flow ul .btn_line a{min-width:100px;max-width:160px;display: block;width: 50%;margin: 0 auto;}

.l_parts_estimate .area_contact{border:4px solid #0097c6;background:#fff;border-radius:10px;}
.l_parts_estimate .area_contact .inner{padding:10px;}

.l_parts_contact .area_contact{background:#fff7e9;padding:20px 34px;margin-left:-20px;margin-right:-20px;}

.area_contact h3{text-align:center;font-weight:bold;}

.area_contact .tel{text-align:center;margin-top:10px;}
.area_contact .tel .time{display:block;}
.area_contact .tel > a{font-weight:bold;}
.area_contact .tel .number{background:url("../../images/esti_tel.png") no-repeat left top;width:235px;height:37px;text-indent:100%;white-space:nowrap;overflow:hidden;background-size:contain;display:block;margin:5px auto 0;}
.area_contact .tel .time{text-align:center;display:block;}

.l_parts_estimate .area_contact{margin-top:20px;}
.l_parts_contact .area_contact{margin-top:0;}

.area_contact .come_btn a{font-size:18px;line-height:22px;padding:20px 0;margin-top: 10px;font-weight:bold;}

.l_parts_estimate .area_contact .come_btn a{background-color:#0097c6;}
.l_parts_contact .area_contact .come_btn a{background-color:#ff9c00;}



#line_flow{padding-top: 60px;margin-top: -60px;}


@media screen and (max-width:400px) {
  /*
  .estimate_flow ul{width:240px;margin-right:auto;margin-left:auto;}
  .estimate_flow ul.flow_list li .inner .img_ttl{display: block;}
  .estimate_flow ul.flow_list .img{max-width: initial;width: 70%;margin: 0 auto;}
  */
  .estimate_flow ul li .inner{padding: 10px;}
  .estimate_flow ul.flow_list .title{font-size: 12px;}
  .estimate_flow ul .img{max-width: 90px;}
  .estimate_flow ul li.step_1 .inner .title{background-size: 34.4px 32px;padding-top: 44px;background-position: center 8px;}
  .estimate_flow ul li.step_2 .inner .title{background-size: 32.8px 46.4px;padding-top: 44px;background-position: center top;}
  .estimate_flow ul li.step_3 .inner .title{background-size: 32px 23.2px;padding-top: 44px;background-position: center 15px;}
}



/********** ログインフォーム **********/
.login { margin-bottom:10px; }
.login p{ padding-left:10px;}
.login .form { padding:3px 0 0 10px; }
.login .form dt{ font-weight:bold; }
.login .form dd{ padding-bottom:5px; }

/********** ボタン関係 **********/
button,input[type=button],input[type=reset],input[type=submit] {}  

/********** テキスト入力関係 **********/
textarea,select,input{width:100%;}
input[type="checkbox"],input[type="radio"]{width:auto;}

textarea,select,input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="password"] ,input[type="search"]{
font-family:"HiraKakuProN-W3",Arial,sans-serif;
font-size:14px;padding:7px 10px;
border:1px solid #ccc;
box-sizing:border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing:border-box;-webkit-box-sizing: border-box;-o-box-sizing:border-box;-ms-box-sizing: border-box;box-sizing:border-box;}

label{display:block;}
select,input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="password"] ,input[type="search"]{
}

textarea:focus,textarea:hover { height: 10em; }

/********** SNSボタン **********/
#sns li{ float:right; width:30%; text-align:center; }

/********** メインビジュアル **********/
/** jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ ** Copyright 2012 WooThemes* Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html ** Contributing author: Tyler Smith (@mbmufffin)*/
 
/* Browser Resets */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus  {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles*********************************/ 
.slider_img{ position:relative;}
.slider{ background:#FFFFFF; position: relative;}
.flexslider {margin: 0; padding:0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{ /**   max-width: 320px;**/ display: block; width:100%;background-size: contain;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height:1%;}

/* No JavaScript Fallback *//* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme*********************************/
.flexslider { position: relative; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}

.flex-control-nav{height:20px;text-align:center;margin-top: -20px;}
.flex-control-nav li{padding-right:5px;line-height:20px;display:inline-block;}
.flex-control-nav a{width:20px;height:20px;overflow: hidden;text-indent: 100%;white-space: nowrap;display:block;position:relative;}
.flex-control-nav a:before,.flex-control-nav a.flex-active:before{position:absolute;margin-top:0;top:0;left:0;line-height:1;content:"";
width: 10px;height: 10px;-webkit-border-radius: 50%;border-radius: 50%;
}
.flex-control-nav a:before{background:#ccc;}
.flex-control-nav a.flex-active:before{background:#ff9c00;}

.flex-direction-nav {height: 0;}
.flex-direction-nav a {  text-decoration: none;display: block;width: 22px;height: 38px;margin: -38px 0 0;
  position: absolute;top: 50%;z-index: 10;overflow: hidden;cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;
}


.flex-direction-nav a:before {content:'';display: inline-block;width: 22px;height: 38px;}
.flex-direction-nav a.flex-prev:before {margin-left: -1px;background: url(../../images/arw_top_prev.png) no-repeat;-webkit-background-size: contain;background-size: 22px 38px;background-position: left center;}
.flex-direction-nav a.flex-next:before {margin-right: -1px;background: url(../../images/arw_top_next.png) no-repeat;-webkit-background-size: contain;background-size: 22px 38px;background-position: right center;}
.flex-direction-nav .flex-prev { left: 10px;}
.flex-direction-nav .flex-next { right: 10px;text-align: right;}
.flex-direction-nav .flex-prev:hover{left: 0;opacity: 0.8;}
.flex-direction-nav .flex-next:hover{right: 0;opacity: 0.8;}