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

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/06/22
* Last update : 2017/09/21
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/

.wrap{ padding: 30px 16px 0;}

.wrap h3{ margin: 0 0 25px; font: 300 19px/1.3 "heisei-kaku-gothic-std",sans-serif; color: #333; text-align: center;}
.wrap h3 span{ display: inline-block; margin: 0 0 5px; position: relative; font-size: 14px; color: #777;}
.wrap h3 span::before,
.wrap h3 span::after{ content: ""; background: #ddd; width: 15px; height: 1px; position: absolute; top: 8px;}
.wrap h3 span::before{ left: -25px;}
.wrap h3 span::after{ right: -25px;}
.wrap h3 br:nth-of-type(2){ display: none;}

@media print, screen and (max-width:350px){
  .wrap h3 br:nth-of-type(2){ display: block;}
}


/* menu
**********************************************************************/
.menu section{ margin: 20px 0 0; border: solid 2px #eee; padding: 20px 15px;}
.menu section:first-of-type{ margin-top: 0;}
.menu section ul{ margin: -10px 0 0;}
.menu section ul li a{ display: block; background: #dd0716; width: 100%; height: 50px; margin: 10px 0 0; position: relative; font-weight: bold; font-size: 14px; line-height: 50px; color: #fff; text-align: center; transition: .2s linear;}
.menu section ul li a:hover{ background: #fff; box-shadow: 0 0 0 2px #dd0716 inset; color: #dd0716;}
.menu section ul li a::before{ content: ""; background: url(../../common/img/icon_arrow01.svg) no-repeat 0 0 / cover; width: 6px; height: 8px; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);}
.menu section ul li a:hover::before{ background-image: url(../../common/img/icon_arrow02.svg);}

@media print, screen and (max-width:350px){
  .menu section ul li a{ font-size: 13px;}
}


/* step
**********************************************************************/
.step{ background: #fafafa; width: 100%; border: 1px solid #ddd; overflow: hidden;}
.step li{ width: 33.3333%; height: 36px; padding: 0 0 0 10px; position: relative; float: left; font-weight: bold; font-size: 12px; line-height: 34px; text-align: center;}
.step li:first-child{ padding: 0;}
.step li::after{ content: ""; background: url(../img/step.png) no-repeat; background-size: cover; width: 12px; height: 38px; position: absolute; top: 17px; right: -10px; z-index: 2; transform: translateY(-50%);}
.step li:last-child::after{ background: none; }
.step li.on{ background: #dd0716; color: #fff; }
.step li.on::after{ background: url(../img/step_on.png) no-repeat; background-size: cover; }
.step li.on:last-child::after{ background: none; }

.step li span{ display: none;}

@media print, screen and (min-width:450px){
  .step li span{ display: inline;}
}


/* form
**********************************************************************/
form{ margin: 20px 0 0;}
form > p{ font-size: 14px;}

form > dl{ background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; margin: 25px 0 0; }
form > dl > dt{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px #f6f6f6; padding: 10px 15px; position: relative; font-weight: bold;}
form > dl > dt span{ background: #be0716; padding: 5px 8px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 10px; line-height: 1; color: #fff;}
form > dl > dd{ padding: 15px;}
form > dl > dd a{ color: #dd0716; text-decoration: underline;}
.preview form > dl > dd{ padding: 15px 15px 25px;}
form > dl > dd div{ margin: 0 0 10px; position: relative;}

form > dl > dd.zipcode div span:not(.placeholder){ margin: 0 0 0 .5rem;}
@media print, screen and (max-width:340px){
  form > dl > dd.zipcode div span:not(.placeholder){ margin: 0 0 0 .3rem; font-size: 12px;}
}

form > dl > dd .coverage{ display: flex;}
form > dl > dd .coverage .coverage-month{ width: 70px; margin: 0 10px 0 0;}
form > dl > dd .coverage .coverage-day{ width: 70px; margin: 0 10px 0 0;}
form > dl > dd .coverage .coverage-time{ width: 110px;}

form > dl > dd .select-shop{ margin: 20px 0 0; position: relative;}
form > dl > dd .select-shop .select select[disabled]{ opacity: .3;}

form > dl > dd .for-name{ overflow: hidden;}
form > dl > dd .for-name dt{ width: 40px; padding: 0 10px 0 0; float: left; line-height: 40px; text-align: right;}
form > dl > dd .for-name dd{ width: calc(50% - 40px - 8px); position: relative; float: left;}
form > dl > dd .for-name dd:first-of-type{ margin: 0 16px 0 0;}

form > dl > dd .for-car dt{ font-weight: bold; font-size: 14px;}
form > dl > dd .for-car dd{ margin: 5px 0 0;}
form > dl > dd .for-car dd ul{ overflow: hidden;}
form > dl > dd .for-car dd ul li{ display: table; margin: 0 0 10px 10px; float: left;}
form > dl > dd .for-car dd ul li:first-child{ margin-left: 0;}
form > dl > dd .for-car dd ul li div{ display: table-cell;}
form > dl > dd .for-car dd ul li > span{ display: table-cell; padding: 0 0 0 5px;}
form > dl > dd .for-car dd:last-of-type ul li > span:first-child{ padding: 0 5px  0 0;}

/* input */
form input[type=text],
form input[type=email],
form input[type=tel],
form textarea{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 40px; border: solid 2px #ddd; border-radius: 0; font: 14px/1.5 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";}
form input[type=text],
form input[type=email],
form input[type=tel]{ padding: 0 10px;}
form textarea{ display: block; height: 150px; padding: 10px;}
form input[name=zipcode]{ width: 150px; margin: 0 10px 0 0;}
form input[name=tel]{ width: 150px; margin: 0 10px 0 0;}
form input[name=car_age_y],
form input[name=car_age_m],
form input[name=car_shaken_m],
form input[name=car_shaken_y]{ width: 58px;}
form .hiddeninput{ width: 0px !important; height: 0px !important; padding: 0!important; font-size: 0; line-height: 0; opacity: 0;}


/* radio */
form .radio{ overflow: hidden;}
form .radio li{ float: left;}
form .radio input{ display: none;}
form .radio label{ display: inline-block; height: 22px; margin: 0 30px 0 0; padding: 0 0 0 30px; position: relative; line-height: 22px; cursor: pointer;}
form .radio label::before{ content: ""; width: 22px; height: 22px; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 3px solid #ccc; border-radius: 50%; box-sizing: border-box;}
form .radio input[type="radio"]:checked + label::after{ content: ""; background: #be0716; width: 8px; height: 8px; position: absolute; top: 50%; left: 7px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%;}

/* select box */
form .select{ height: 40px; position: relative; z-index: 1; border: solid 2px #ddd; overflow: hidden;}
form .select::after{ content: ""; width: 0; height: 0; margin: 2px 0 0; border: 5px solid transparent; border-top-width: 7px; border-top-color: #be0716; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); z-index: -1;}
form select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; width: 130%; height: 36px; padding: 0 0 0 15px; border: none; border-radius: 0; font-size: 13px; line-height: 1.3; cursor: pointer;}

form .shop .select:first-child{ width: 120px;}
form .shop .select:last-child{ max-width: 300px;}
form .service .select,
form .pref .select,
form .time .select,
form .for-car .car_class.select{ width: 180px;}
form .for-car .car_age_era.select{ width: 80px;}
form .genre .select{ width: 250px;}

/* placeholder */
form .placeholder{ position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: #ccc;}

/* error text */
form .err{ display: block; line-height: 1.5; color: #be0716;}

/* checkbox */
form .privacy{ max-width: 500px; margin: 30px auto 0; padding: 15px; border: solid 2px #ddd;}
form .privacy p{ background: url(../../common/img/border_dot.png) repeat-x 0 bottom / 2px 1px; margin: 0 0 10px; padding: 0 0 10px; font-weight: bold; line-height: 1.8; text-align: center;}
form .privacy p a{ padding: 0 0 4px; position: relative; color: #333; transition: color .15s linear; overflow: hidden;}
form .privacy p a:hover{ color: #dd0716;}
form .privacy p a::before,
form .privacy p a::after{ content: ""; height: 1px; position: absolute; bottom: 0; left: 0;}
form .privacy p a::before{ background: #bbb; width: 100%;}
form .privacy p a::after{ background: #dd0716; width: 0; transition: width 0s ease-out;}
form .privacy p a:hover::after{ width: 100%; height: 2px; left: 0; transition: width .4s ease-out;}
form .privacy p br{ display: none;}
@media print, screen and (max-width:420px){
  form .privacy p br{ display: block;}
}

form .agree{ display: inline-block; margin: 8px 0 0 0;}
form .agree input{ display: none; }
form .agree label{ display: block; padding: 0 0 0 30px; position: relative; line-height: 2;}
form .agree input + label::before{ content: ""; display: block; width: 14px; height: 14px; position: absolute; top: 3px; left: 0; border: #e5e5e5 3px solid;}
form .agree input:checked + label::after{ content: ""; display: block; width: 7px; height: 13px; position: absolute; top: 1px; left: 5px; border-right: 3px solid #dd0716; border-bottom: 3px solid #dd0716; transform: rotate(45deg); cursor: pointer;}

form .g-recaptcha{ margin: 40px 0 0 0;}
form .g-recaptcha > div{ margin: 0 auto;}

/* submit */
form .btns{ margin: 40px 0 0; overflow: hidden;}
form .btns li input,
form .btns li a{ display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #dd0716; width: 100%; height: 50px; padding: 0; border: none; font-weight: bold; font-size: 14px; line-height: 50px; color: #fff; text-align: center; cursor: pointer; transition: .2s linear;}
form .btns li input:not([disabled]):hover,
form .btns li a:hover{ background: #fff; box-shadow: 0 0 0 2px #dd0716 inset; color: #dd0716;}
form .btns li input[disabled]{ background: #ccc;}

.template form .btns li{ width: 100%; max-width: 200px; margin: 0 auto;}

.preview form .btns li{ width: 48%; float: left;}
.preview form .btns li:last-child{ float: right;}

.ex{ padding: 30px 0 0 0; }

/* thanks */
.thanks .thanks-msg{ padding: 15px 0 0;}
.thanks .thanks-msg > p{ padding: 0 0 30px 0; }
.thanks .thanks-msg > p > br{ display: none;}
.thanks .thanks-msg > ul{ width: 100%; margin: 0px auto; padding: 10px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;}
.thanks .thanks-msg > ul > li > a{ color: #333; text-decoration: underline; transition: color .2s linear;}
.thanks .thanks-msg > ul > li > a:hover{ color: #2e919e; text-decoration: none;}
.thanks .thanks-msg > a{ display: block; background: #dd0716; width: 200px; height: 50px; margin: 40px auto 0; font-weight: bold; font-size: 14px; line-height: 50px; color: #fff; text-align: center; transition: .2s linear;}
.thanks .thanks-msg > a:hover{ background: #fff; box-shadow: 0 0 0 2px #dd0716 inset; color: #dd0716;}



/*************************************************************************************************************************
* 画面幅：681px 以上
*************************************************************************************************************************/
@media print, screen and (min-width:681px){
  
  .wrap{ width: 980px; margin: 0 auto; padding: 50px 0 0;}
  
  .wrap h3{ margin-bottom: 45px; font-size: 27px;}
  .wrap h3 span{ margin-bottom: 7px; font-size: 18px;}
  .wrap h3 span::before,
  .wrap h3 span::after{ width: 20px; height: 1px; top: 10px;}
  .wrap h3 span::before{ left: -35px;}
  .wrap h3 span::after{ right: -35px;}
  
  
  /* menu
  **********************************************************************/
  .menu{ overflow: hidden;}
  .menu section{ width: 470px; margin: 0 auto!important; padding: 30px 40px 40px;}
  .menu section ul{ margin-top: -20px;}
  .menu section ul li a{ height: 60px; margin-top: 20px; font-size: 15px; line-height: 60px;}
  .menu section ul li a::before{ width: 9px; height: 14px; right: 20px;}
  
  
  /* step
  **********************************************************************/
  .step li{ height: 64px; padding: 0 0 0 20px; font-size: 16px; line-height: 62px;}
  .step li::after{ width: 20px; height: 68px; top: 32px; right: -19px; }
  
  
  /* form
  **********************************************************************/
  form{ margin-top: 50px;}
  form > p{ text-align: center;}
  
  form > dl{ margin-top: 40px; position: relative; overflow: hidden; z-index: 2;}
  form > dl::before{ content: ""; background: #f6f6f6; width: 280px; height: calc(100% - 1px); position: absolute; top: 0; left: 0;}
  
  form > dl > dt{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px; width: 300px; padding: 30px 40px; float: left; clear: both;}
  .template form > dl > dt{ padding-top: 35px;}
  
  form > dl > dt span{ margin: 0 0 0 15px; position: static; transform: none;}
  form > dl > dd{ background: url(../../common/img/border_dot.png) repeat-x 0 0 / 2px 1px; width: calc(100% - 300px); padding: 25px 40px 15px 40px; float: left;}
  .preview form > dl > dd{ padding: 30px 40px;}
  
  form > dl > dd.shop > div{ display: table;}
  form > dl > dd.shop > div .radio{ display: table-cell; width: 130px; vertical-align: middle;}
  form > dl > dd.shop > div .select-shop{ display: table-cell; vertical-align: middle;}
  form > dl > dd.shop > div .select-shop .select{ margin-bottom: 0; float: left;}
  form > dl > dd.shop > div .select-shop .select:last-child{ width: 240px; margin-left: 10px;}
  
  form > dl > dd .for-name dt{ text-align: right;}
  form > dl > dd .for-name dd{ width: 150px; position: relative; float: left;}
  form > dl > dd .for-name dd:first-of-type{ margin: 0 30px 0 0;}
  
  form > dl > dd .for-car{ overflow: hidden;}
  form > dl > dd .for-car dt{ width: 80px; float: left; font-size: 15px; line-height: 40px; clear: both;}
  form > dl > dd .for-car dd{ width: 520px; margin-top: 0; float: left;}
  
  .preview form > dl > dd .for-car{ margin: -8px 0 0;}
  .preview form > dl > dd .for-car dt,
  .preview form > dl > dd .for-car dd{ margin: 8px 0 0; line-height: 1.5;}
  
  /* input */
  form input[type=text],
  form input[type=email],
  form input[type=tel],
  form textarea{ font-size: 14px;}
  form textarea{ height: 250px; padding: 16px;}
  form input[type=text],
  form input[type=email],
  form input[type=tel]{ padding: 0 16px;}
  form .hiddeninput{ width: 0px !important; height: 0px !important; padding: 0!important; font-size: 0; line-height: 0; opacity: 0;}
  
  /* radio */
  form .radio label{ margin-right: 20px}
  
  /* placeholder */
  form .placeholder{ left: 18px;}
  
  /* checkbox */
  form .privacy{ margin-top: 50px; padding: 25px 40px;}
  form .privacy p{ margin-bottom: 15px; padding-bottom: 15px;}

  form .g-recaptcha{ margin: 70px 0 0 0;}
  
  /* submit */
  form .btns{ margin: 60px auto 0; overflow: hidden;}
  form .btns li input,
  form .btns li a{ height: 70px; font-size: 18px; line-height: 70px;}
  
  .template form .btns li{ max-width: 300px;}
  .preview form .btns{ width: 600px;}
  .preview form .btns li{ width: 270px;}
  
  /* thanks */
  .thanks .thanks-msg{ padding-top: 60px;}
  .thanks .thanks-msg > p{ text-align: center;}
  .thanks .thanks-msg > p > br{ display: block;}
  .thanks .thanks-msg > a{ width: 260px; height: 60px; margin-top: 50px; font-size: 16px; line-height: 60px;}
  .thanks .thanks-msg > ul{ width: 500px; margin: 20px auto; padding: 20px 0;}
  
}