@charset "utf-8";

/*=================================================================================================================================*/
/**  個別指定 for PC	*/
/*=================================================================================================================================*/

@media screen and (min-width: 768px) {
  /* fook */
  .only_pc_none {
    display: none !important;
  }
  .flexbox{
    margin: 0 auto;
    display: flex;
    text-align: center;
    flex-wrap: nowrap;
  }
  section{
    position: relative;
    width: 100%;
  }

  .w1200{
    width:95%;
    max-width: 1200px;
  }
  /*---------------------------------------------
 ** ヘッダー
---------------------------------------------*/
 header{
   position: fixed;
   display: block;
   width: 100%;
   min-height: 160px;
   background: #fff;
   box-shadow: 0 0 8px #ddd;
   margin: 0;
   padding: 0;
   z-index: 99;
   top:0;
   left:0;
 }

 header #sub_header{
   display: flex;
   text-align: center;
   flex-wrap: nowrap;
   justify-content: space-between;
   width:100%;
   border-bottom: 1px solid #ddd;
 }

 /* logo */
 header #sub_header #logo{
   overflow: hidden;
   width: 250px;
 }
 header #sub_header #logo img{
   width: 100px ;
   float: left;
   margin: 10px 15px 0 15px;
 }
 header #sub_header #logo p{
   color: #185BA8;
   border-radius: 20px;
   border: 2px solid #185BA8;
   padding: 5px 10px;
   font-size: 1.6rem;
   font-weight: bold;
   float: right;
   margin-top: 15px;
 }

  /* sub nav */
#suv_nav{ width:calc( 100% - 680px);}
#suv_nav > ul:first-child{
  width: 100%;
  display: flex;
  list-style: none;
  margin:15px 0 0 0 ;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
}
#suv_nav > ul:first-child > li{
  margin-right: 15px;
  border-left: 1px solid #ddd;
  padding: 5px 10px 5px 15px;
  background: url("../img/common/icon_nav.png") no-repeat right;
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: bold;
}



#suv_nav > ul:first-child > li a{
  text-decoration: none;
}
#suv_nav > ul:first-child > li img{
  width: 25px;
}
#suv_nav > ul:first-child > li:nth-child(4),
#suv_nav > ul:first-child > li:nth-child(5){ background: none; padding: 0 0 0 15px !important;}

  /* contact */
  header .contact{
  margin-bottom: 10px;
  margin-right: 20px;
}
header .contact ul{
  display: flex;
  list-style: none;
}
header .contact ul li{
  padding-top: 15px;
}
header .contact ul li a{
  color: #fff;
  text-decoration: none;
  font-family: "Noto Sans JP";
  text-align: center;
  padding: 15px 20px;
  letter-spacing: 0.1em;
}
header .contact ul li.tel a{
  background: #185BA8;
  border-radius: 0 0 0 10px;
  width: 50%;
}
header .contact ul li.mail a{
  background: #3CBBB7;
  border-radius: 0 0 10px 0;
  width: 50%;
}

@media screen and (max-width: 1280px) {
  #sub_header{
    height:110px;
    position:relative;
  }
  #suv_nav{
    width:100%;
    position:absolute;
    top:60px;
    right:10px;
  }
}




  /*---------------------------------------------
 **  ナビゲーション
---------------------------------------------*/
  .nav {
    z-index: 999;
    /* position: relative; */
    margin: 0 auto;
    padding: 15px 0 0 0;
    max-width: 1200px;
    /* width: calc((100% - 300px)); */
  }
  .menu {
    margin: 0 auto;
    display: flex;
    text-align: center;
    flex-wrap: nowrap;
    justify-content: flex-end;

  }
  .menu > li {
    padding: 0px 0px 17px;
    box-sizing: border-box; /*通常の記述*/
    -webkit-box-sizing: border-box; /*Google ChromeやSafariの機能を利用*/
    -moz-box-sizing: border-box; /*Firefoxの機能を利用*/
  }
  .menu > li:last-of-type {
    margin-right: 0;
  }
  .menu li > a {
    width: 100%;
    height: 100%;
    padding: 12px 16px;
    position: relative;
    font-size: 1.4rem;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    box-sizing: border-box; /*通常の記述*/
    -webkit-box-sizing: border-box; /*Google ChromeやSafariの機能を利用*/
    -moz-box-sizing: border-box; /*Firefoxの機能を利用*/
    color: #000000;
    margin-right: 50px;
    background: url("img/common/icon_nav.png") no-repeat right;
  }
  .menu li > a:hover {
    color: #007ac6;
  }


  /* ナビ下の小文字 */
  .menu li a:after {
    display: block;
    font-size: 1rem;
    color: #666;
    font-weight: normal;
    letter-spacing: 0.2em;
    font-family: "Noto Sans JP";
  }
  /* ドロップメニューは小文字を消す */
  .sub-menu li a:after {
    display: none !important;
  }
  .menu li:nth-of-type(1) a:after {
    content: "Commitment";
  }
  .menu li:nth-of-type(2) a:after {
    content: "GlassCoating";
  }
  .menu li:nth-of-type(3) a:after {
    content: "CarFilm";
  }
  .menu li:nth-of-type(4) a:after {
    content: "InteriorClean";
  }
  .menu li:nth-of-type(5) a:after {
    content: "AfterService";
  }
  .menu li:nth-of-type(6) a:after {
    content: "Gallery";
  }
  .menu li:nth-of-type(7) a:after {
    content: "Shop";
  }

  .menu > li:nth-of-type(1):hover > a:before ,
  .menu > li:nth-of-type(3):hover > a:before ,
  .menu > li:nth-of-type(4):hover > a:before ,
  .menu > li:nth-of-type(5):hover > a:before ,
  .menu > li:nth-of-type(6):hover > a:before,
  .menu > li:nth-of-type(7):hover > a:before {
    display: none;
  }

  /* ナビアイコン */
  .menu > li > a{
    background: url(../img/common/icon_nav.png) right 23px no-repeat;
  }

  .nav_recruit, .nav_contact, .nav_blog,
  .nav_line, .nav_insta{
    display: none;
  }


  /*---------------------------------------------
 **  ドロップダウンメニュー
---------------------------------------------*/
  .dropmenu{
    width:98%;
    max-width:1100px;
    margin:0 auto;
  }
  .dropmenu:before,
  .dropmenu:after {
    content: "";
    display: table;
  }
  .dropmenu:after {
    clear: both;
  }

  /* 下層メニュー */
  .sub-menu {
    list-style: none;
    position: absolute;
    z-index: 2;
    top: 90px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 930px;
    display: flex;
    justify-content: start;
  }
  /* サブメニューの背景だけ */
    .fade-in li:hover .sub-menu:after {
    width: 1920px;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #eee;
    content: "";
    z-index: -99;
    margin-left: calc(-50vw + 46%);
    margin-right: calc(-50vw + 46%);
    background: #266EC1; /* Old browsers */
    background: -moz-linear-gradient(left,  #44C5CF 0%, #44C5CF 20%, #266EC1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #44C5CF 0%,#44C5CF 20%,#266EC1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #44C5CF 0%,#44C5CF 20%,#266EC1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#acdcee',GradientType=1 ); /* IE6-9 */
  }
  .sub-menu li {
    margin: 0 0;
    display: block;
    border-right: 1px solid #ddd;
  }
  .sub-menu li:first-child{ border-left: 1px solid #ddd;}
  .sub-menu li a {
    color: #fff;
    font-size: 1.4rem;
    line-height:1.3;
    letter-spacing: 0.1em;
    padding: 25px 0;
  }
  .sub-menu li a:hover {
    color: #0079c5;
    background: #eaedf4;
  }


  .sub-menu li a:before {
    margin: 0 0.5rem 0 0;
    color: #0079c5;
    font-size:1.6rem;
    content: "●";
  }
 /* subnav 番号
  .sub-menu li:nth-of-type(1) a:before {
    content: "01.";
  }
  .sub-menu li:nth-of-type(2) a:before {
    content: "02.";
  }
  .sub-menu li:nth-of-type(3) a:before {
    content: "03.";
  }
  .sub-menu li:nth-of-type(4) a:before {
    content: "04.";
  }
  .sub-menu li:nth-of-type(5) a:before {
    content: "05.";
  }
  .sub-menu li:nth-of-type(6) a:before {
    content: "06.";
  }
  .sub-menu li:nth-of-type(7) a:before {
    content: "07.";
  }
 */

  /* ドロップメニュー 仕組み */
  .fade-in li .sub-menu {
    visibility: hidden;
    opacity: 0;
    /* transition: 0s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s; */
  }
  .fade-in li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    text-align: center;
  }
  .fade-in li .sub-menu li a {
    visibility: hidden;
    opacity: 0;
  }
  .fade-in li:hover .sub-menu li a {
    visibility: visible;
    opacity: 1;
  }

  #menu-item-22 .sub-menu{
    justify-content:center;
  }
  #menu-item-21 .sub-menu,
  #menu-item-40 .sub-menu{
    justify-content: flex-end;
  }


  /* フッターナビ */

  /*---------------------------------------------
 **  メイン
---------------------------------------------*/



  /*---------------------------------------------
 **  メイン
---------------------------------------------*/
  .main_img {
    height: 300px;
    margin-top: 160px;
  }
  #index .main_img {
    height: 900px;
    z-index: 0;
  }

  /*=================================================================================================================================*/
  /**  フッター	*/
  /*=================================================================================================================================*/
footer {
    max-width: 1200px;
    _zoom: 1;
    overflow: hidden;
    margin: 50px auto 0 auto;
  }

  .map {
    height: 500px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    _zoom: 1;
    overflow: hidden;
  }

  /**  ロゴ	*/
#f_logo{
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}

#f_logo img{
  width: 200px ;
  float: left;
  margin: 10px 15px 0 15px;
}


footer .footer_wrap{
  margin: 15px 0;
  justify-content: space-between;
}

  /**  店舗情報	*/
footer .footer_wrap .shop_info{
  width: 30%;
}


  /**  カレンダー	*/
  footer .footer_wrap .shop_contact{
    width: 65%;
  }

footer .footer_wrap .shop_cal{
  display: flex;
  justify-content: space-between;
}
footer .footer_wrap .shop_cal .calendar_wrap{
  width: calc(100% - 300px);
}


footer .footer_wrap .f_service,
footer .footer_wrap .contact{
  width: 100%;
  display: block;
  margin-top: 25px;
}

footer .footer_wrap .shop_cal .substitute{
   width: 250px;
   margin-top: 50px;
}
    footer .footer_wrap .shop_cal .substitute h3{
      letter-spacing: 0.1em;
      font-size: 3.0rem;
      font-weight: normal;
    }
    footer .footer_wrap .shop_cal .substitute p{
      padding: 10px 15px;
      letter-spacing: 0.2em;
      font-size: 1.4rem;
      text-align: left;
    }
    footer .footer_wrap .shop_cal .substitute img{
      width: 250px;
    }

  /* contact */
  footer .footer_wrap .contact ul li.tel a{
    font-size: 2.4rem;
    min-height: 42px;
  }
  footer .footer_wrap .contact ul li.mail a{
    font-size: 2.0rem;
    min-height: 42px;
    padding: 20px 20px 10px 20px;
  }



/*news*/


#news{
  width:98%;
  max-width:1200px;
  position: absolute;
  bottom: 0;
  right:0;
  left:0;
  width: 100%;
  margin: 0 auto -20px auto;
  z-index: 999;
  display: flex;
  text-align: center;
}

.news_camp{
  width:42%;
  background: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  margin-left:3%
}

.news_shop{
  width: 50%;
  margin-top: 20px;
  margin-left:3%;
  margin-right:2%;
}
.news_shop h3{
  border-radius: 10px 10px 0 0;
}



/* intro */
  #index_intro .intro_wrap{
    width: 900px;
    margin: 0 auto;
  }
  #index_intro h2{
    font-size: 40px;
  }
  #index_intro .flexbox div{
    width: 45%;
  }

/*coating*/
#index_coating{
  background-size: cover;
  padding-top: 300px;
}
#index_coating .coating_menu{
  width: 80%;
  min-width: 800px;
  justify-content: space-around;
  margin: 0 50px;
  padding-bottom: 50px;
}
#index_coating .coating_menu_txt{
  width: 20%;
  min-width: 250px;
}

/*option*/
#index_option{
  min-height: 300px;
}
#index_option .carfilm{
  margin-top: 110px;
}
#index_option .cleaning{
  margin-top: 110px;
}
#index_option .flexbox > div:nth-child(2){
  background-position: right;
}

/*maintenance*/
#index_mainte{
  min-height: 400px;
}
#index_mainte .index_mainte_txt{
  width: 20%;
  min-width: 240px;
  margin-top: 200px;
}
#index_mainte .index_mainte_menu{
  width: 75%;
  min-width: 800px;
  justify-content: space-around;
  margin-top: 80px;
  min-height: 400px;
}
#index_mainte .index_mainte_menu > div{
  width: 45%;
}


} /*■■ ここまで ■■*/





/* IE11対策 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .col-2 > .item  {}
  *::-ms-backdrop, .col-3 > .item  {}
  *::-ms-backdrop, .col-4 > .item  {}

  *::-ms-backdrop, .ttl-blog-2 {
  min-height: unset !important;
  background: unset !important;
  text-align: left;
  margin: 0;
  padding: 0.5rem 0 1.5rem;
  }

  *::-ms-backdrop, .flx-base-10{ flex-basis:10%;  max-width: 10%;}

  *::-ms-backdrop, .tel-ptn-01.tel{ background: #FFF;}

   *::-ms-backdrop, .flx-base-1 {
    max-width: 10%;
  }
    *::-ms-backdrop, .flx-base-10 {
      max-width: 10%;
    }
    *::-ms-backdrop, .flx-base-12 {
      max-width: 12%;
    }
  *::-ms-backdrop, .flx-base-2 {
    max-width: 20%;
  }
    *::-ms-backdrop, .flx-base-25 {
      max-width: 25%;
    }
  *::-ms-backdrop, .flx-base-3 {
    max-width: 30%;
  }
    *::-ms-backdrop, .flx-base-38 {
      max-width: 38%;
    }
  *::-ms-backdrop, .flx-base-4 {
    max-width: 40%;
  }
    *::-ms-backdrop, .flx-base-45 {
      max-width: 45%;
    }
    *::-ms-backdrop, .flx-base-47 {
      max-width: 47%;
    }
  *::-ms-backdrop, .flx-base-5 {
    max-width: 50%;
  }

    *::-ms-backdrop, .flx-base-53 {
      max-width: 53%;
    }
    *::-ms-backdrop, .flx-base-55 {
      max-width: 55%;
    }
  *::-ms-backdrop, .flx-base-6 {
    max-width: 60%;
  }
    *::-ms-backdrop, .flx-base-65 {
      max-width: 65%;
    }
    *::-ms-backdrop, .flx-base-68 {
      max-width: 68%;
    }
  *::-ms-backdrop, .flx-base-7 {
    max-width: 70%;
  }
    *::-ms-backdrop, .flx-base-73 {
      max-width: 73%;
    }
    *::-ms-backdrop, .flx-base-75 {
      max-width: 75%;
    }
  *::-ms-backdrop, .flx-base-8 {
    max-width: 80%;
  }
    *::-ms-backdrop, .flx-base-83 {
      max-width: 83%;
    }
    *::-ms-backdrop, .flx-base-85 {
      max-width: 85%;
    }
    *::-ms-backdrop, .flx-base-88 {
      max-width: 88%;
    }
  *::-ms-backdrop, .flx-base-9 {
    max-width: 90%;
  }
}


@media screen and (max-width: 1200px) {
  .coating_foot_in .brand div{
    width:48%;
  }
  .coating_foot_in .brand .brand_logo{
    bottom:10%;
  }
  .coating_foot_in .brand{
    width:60%;
  }
  .coating_foot_in .coating_foot_t{
    width:35%;
  }
}


/* 自動見積 */
section#price						{padding: 0em 0; text-align:center;}
section#price > div.box_cont 				{width:100%;text-align:left;}

form#slct_price			{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;-webkit-box-pack: justify;-moz-box-pack: justify;-webkit-flex-pack: justify;-moz-flex-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;-moz-justify-content: space-between;justify-content: space-between;flex-wrap:wrap;
margin:1em 0 1em 0;padding:35px 150px 20px;border:solid 2px #185BA8;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;}

form#slct_price:after 			{content: "";width: 0;height: 0;border-style: solid;border-width: 35px 55px 0px 55px;border-color:#185BA8 transparent transparent transparent;position: absolute;right: 0px;left: 0;bottom:-35px;margin: auto;}

form#slct_price>.box_half		{display:block;width:100%;/*width: 515px;*/margin-bottom:0;}

form#slct_price  dl			{display: table;width:100%;/*width: 515px;*/margin-bottom:1em;}
form#slct_price  dl > dt		{display: table-cell;width: 110px;padding-left: 0%;color: #FFF;}
form#slct_price  dl > dt span		{width: 100%;display: block;background-color:#185BA8; -moz-border-radius: 14px;-webkit-border-radius: 14px;border-radius: 14px;text-align: center;color: #FFF;}
form#slct_price  dl > dd		{display: table-cell;width:auto;padding-left:15px;}
form#slct_price  dl > dd p		{margin-top:1em;}

#slctQ		{display:block; width:100%; font-size:1.1em; position:relative; /*padding:0.1em 0 0.3em; margin:1em 1em 3em 0; float:left;*/}
#slctC		{display:block; width:100%; font-size:1.1em; position:relative; /*padding:0.1em 0 0.3em; margin:1em 1em 3em 0; float:left;*/}
#slctV		{display:block; width:100%; font-size:1.1em; position:relative; /*padding:0.1em 0 0.3em; margin:1em 1em 3em 0; float:left;*/}

.notice_ara		{width:90%;margin:80px auto 40px;}

.notice_araA 		{border: solid 3px #106170;position: relative;margin: 2em 0;padding: 0.5em 1em;border-radius: 8px;}
.notice_araA h5 	{color: #106170;position: absolute;display: inline-block;top: -13px;left: 10px;padding: 0 9px;line-height: 1;font-size: 19px;background: #FFF;font-weight: bold;}

.notice_araB 		{border: solid 3px #7f5615;position: relative;margin: 2em 0;padding: 0.5em 1em;border-radius: 8px;}
.notice_araB h5 	{color: #7f5615;position: absolute;display: inline-block;top: -13px;left: 10px;padding: 0 9px;line-height: 1;font-size: 19px;background: #FFF;font-weight: bold;}

.notice_araC 		{border: solid 3px #8c0e0e;position: relative;margin: 2em 0 0.5em;padding: 0.5em 1em;border-radius: 8px;}
.notice_araC h5 	{color: #8c0e0e;position: absolute;display: inline-block;top: -13px;left: 10px;padding: 0 9px;line-height: 1;font-size: 19px;background: #FFF;font-weight: bold;}


.notice_araA p,
.notice_araB p,
.notice_araC p		{margin: 0.5em 0 0.3em;padding:0;padding-left: 5.3em;text-indent:-5.3em;}

.notice_araA p b,
.notice_araB p b,
.notice_araC p b	{margin-right:0.2em;}


/* 結果表示 */
div.output_unit		{margin-bottom:2em;
display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;-webkit-box-pack: justify;-moz-box-pack: justify;-webkit-flex-pack: justify;-moz-flex-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;-moz-justify-content: space-between;justify-content: space-between;flex-wrap:wrap;}
div.output_unit>h6	{display:block;width:100%;text-align:center;margin:1em auto 0.5em;font-size:1.8em;}

div.output_unit dl	{display:block;width:33.33%;text-align:center;font-size:1.8em;}
div.output_unit dl dt	{display:block;padding:0.7em 0;}
div.output_unit dl dd	{display:block;padding:0.7em 0 0.7em 0.7em;font-size:1.4em;color:#111 !important;}
div.output_unit dl dd span{font-size:0.5em;}

@media (max-width: 767px) {
.output_unit > div{ flex-direction: column;}

}

dl.film_sd		{ border:2px solid #333;width:100%!important;}
dl.film_sd>dt		{background:#eee;color:#fff; border-bottom:1px solid #999; color:#122025;}
dl.film_sd>dd		{}
dl.film_sl		{}
dl.film_sl>dt		{background:#185BA8;color:#fff;}
dl.film_sl>dd		{border:solid 2px #185BA8;color:#185BA8;}
dl.film_as		{}
dl.film_as>dt		{background:#9B9B8C;color:#fff;}
dl.film_as>dd		{border:solid 2px #9B9B8C;color:#9B9B8C;}

#himohs .output_unit > div,
.price-col .output_unit > div{display: flex; width:100%;}

dl.film_hi		{ border:2px solid #333;width:100%!important;}
#himohs .output_unit > div dl:nth-child(1){border-right:0px!important;}
#realglass .output_unit > div{display: flex; width:100%;}
dl.film_hi		{ border:2px solid #333;width:100%!important;}
#realglass .output_unit > div dl:nth-child(1),
#realglass .output_unit > div dl:nth-child(2){border-right:0px!important;}
dl.film_hi>dt		{background:#eee;color:#fff; border-bottom:1px solid #999; color:#122025;}
dl.film_hi>dd		{}

.output_add		{display:block;font-size:1.2em;margin:3em;}


/* selectbox */
label		{position: relative;display:block;/*border: 1px solid #f69;border-radius: 5px;*/background:#F9F9F9;/*display: block;width: 200px;*/}

label:before	{content: "";position: absolute;top: 50%;right: 10px;display: block;width: 0;height: 0;margin: -2px 0 0 0;border: 5px solid transparent;border-top: 7px solid #185BA8;}

select		{cursor: pointer;-webkit-appearance: none;-moz-appearance:none;appearance: none;padding: 0.5em 1em;/*color: #f69;border: none;border-radius: 5px;*/background: transparent;/* position: relative;display: block;width: 200px;*/}

::-ms-expand {display: none;}

#jumptgt{
  padding-top:200px;
  margin-top:-200px;
  display: block;
}



/*---------------------------------------------
 **  カラム
---------------------------------------------*/
.col-img-3 img{
  width: 32.33%;

}


@media (max-width: 767px) {
  section{
  }
}