html{scroll-behavior: smooth;}
.warpper { color: #000;}
.font-medium { font-weight: 500;}
.font-bold { font-weight: 700;}
.font-black { font-weight: 900;}

.font-12 { font-size: 12px;}
.font-16 { font-size: 16px;}
.font-18 { font-size: 18px;}
.font-20 { font-size: 20px;}
.font-22 { font-size: 22px;}
.font-26 { font-size: 26px;}

.color-white { color: #fff;}
.color-red { color: #f30100;}

.d-block { display: block;}
.d-inline-block { display: inline-block;}

.text-center { text-align: center;}
.text-left { text-align: left;}

.pt-0 { padding-top: 0rem !important;}
.pt-2 { padding-top: 0.5rem;}
.pt-3 { padding-top: 1rem;}
.pt-4 { padding-top: 1.5rem;}
.pt-5 { padding-top: 3rem;}
.pb-0 { padding-bottom: 0rem !important;}
.pb-2 { padding-bottom: 0.5rem !important;}
.pb-4 { padding-bottom: 1.5rem !important;}
.pr-1 { padding-right: 0.25rem;}
.pr-2 { padding-right: 0.5rem;}
.p-1 { padding: 0.25rem;}
.p-2 { padding: 0.5rem;}
.p-3 { padding: 1rem;}
.p-4 { padding: 1.5rem;}
.p-5 { padding: 3rem;}

.mt-4 { margin-top: 1.5rem;}
.mt-5 { margin-top: 3rem;}

.img-fluid { max-width: 100%;}

.bg-white { background: #fff;}
.bg-black { background: #000;}
.bg-gray { background: #ececec;}
.bg-blue { background: #2451c1;}
.bg-blue2 { background: #007bda;}
.bg-lightblue { background: #3aa6f9!important;}
.bg-yellow { background: #fff20b!important;}
.bg-dot-blue { background: url(../images/bg-dot-blue.jpg);}

.border { border: 1px solid #dddddd;}
.border-bottom { border-bottom: 1px solid #dddddd;}

.w-200 { width: 200px;}

/* HEAD MAINTERNANCE */
.head-title-maintenance{background-image: linear-gradient(to left,#4369c9,#3fb0f8); position: relative; width: 100%; height: 100%;}
.head-title-maintenance::before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/square.png); }
.head-title-maintenance .img-title{ max-width: 300px; margin: auto;}
.head-title-maintenance .img-title img{ margin: 28px auto;}

/* TAB ANCHOR */
.tab-anchor { margin: 35px auto 0; }
.tab-anchor ul{ display: table; width: 100%;}
.tab-anchor ul li{ display: table-cell; width: 25%; padding: 12px;}
.tab-anchor ul li a{
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	transition:all 1s;}
.tab-anchor ul li:first-child{ padding-left: 0;}
.tab-anchor ul li:last-child{ padding-right: 0;}
.tab-anchor .bg-tab{ padding: 20px 0 20px; text-align: center; font-size: 20px; position: relative;
    background: rgba(229,229,229,1);
    background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(205,205,205,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(229,229,229,1)), color-stop(100%, rgba(205,205,205,1)));
    background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(205,205,205,1) 100%);
    background: -o-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(205,205,205,1) 100%);
    background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(205,205,205,1) 100%);
    background: linear-gradient(to bottom, rgba(229,229,229,1) 0%, rgba(205,205,205,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#cdcdcd', GradientType=0 );}
.tab-anchor .bg-tab img{ margin-right: 12px;}
.tab-anchor .bg-tab .line-hover{ position: absolute; bottom: 0; left: 0; background: #2451c1; display: block; height: 6px; width: 100%; opacity: 0;}
.tab-anchor .bg-tab .line-hover::before{ content: '▲'; color: #2451c1; bottom: -5px; position: absolute; left: 0; right: 0;}
.tab-anchor .bg-tab:hover .line-hover{ opacity: 1; transition: all 0.5s;}

/* backgroung blue */
.warpper-bgblue{ background: #3aa6f9; width: 100%; display: block;}
.warpper-bgblue .warpper-bgdark-blue{ position: relative; height:114px; margin: 18px auto; padding: 24px 0; background: #007bda; max-width: 1000px; }
.warpper-bgblue .warpper-bgdark-blue::before{ content: url(../images/triangle-left.png); position: absolute; left: -98px; top: 0;}
.warpper-bgblue .warpper-bgdark-blue::after{ content: url(../images/triangle-right.png); position: absolute; right: -98px; top: 0;}

.warpper-bgblue .link-contact{ background: #fff; text-align: center; display: block; padding: 12px; width: 70%; border-radius: 6px; border-bottom: 4px solid #ccc; margin: auto; font-size: 22px; color: #006cda;}
.warpper-bgblue .link-contact:hover{ transition: all 0.3s; opacity: 0.9;}
.warpper-bgblue .link-contact.long-text{ width: 96%;}

/* title-bg-gray */
.title-bg-gray { background: #ececec; color: #000; padding: 1.5rem 1rem; font-size: 22px; border-bottom: 4px solid #2250c4; position: relative;}
.triangle-blue {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 21px 0 21px;
  border-color: #2250c4 transparent transparent transparent;}

/* PEACE */
.peace .title-peace { display: inline-block; background: #2451c1; border-bottom: 5px solid #3ca9f5; position: relative; padding: 0.25rem 4rem 0.25rem 0.5rem; margin-top: 3rem;}
.peace .title-peace::after { content: ''; position: absolute; right: 0; bottom: 0; display: inline-block; width: 0; height: 0;
  border-style: solid;
  border-width: 0 43px 43px 0;
  border-color: transparent #fff transparent transparent;}
.peace ul { display: flex; flex-wrap: wrap; justify-content: center; width: 100%;}
.peace ul li { display: block; text-align: center; padding: 2rem;}
.peace ul li .circle-blue { padding: 1.5rem 0; border-radius: 50%; width: 195px; height: 195px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    background: -webkit-gradient(linear, left top, right top, color-stop(50, #2250c4), color-stop(50, #3b66ce));
    background: -moz-linear-gradient(Left, #2250c4 50%, #3b66ce 50%);
    background: -ms-linear-gradient(Left, #2250c4 50%, #3b66ce 50%);
    background: -o-linear-gradient(Left, #2250c4 50%, #3b66ce 50%);
    background: linear-gradient(to right, #2250c4 50%, #3b66ce 50%);}

/* INSPECT */
.inspect { border: 3px solid #e3e3e3; border-top: 7px solid #2250c4; width: 100%; margin: 1rem auto 3rem;}
.title-inspect { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 1.5rem;  cursor: pointer;}
.title-inspect .icon-up { transition: all 0.5s; transform: rotate(180deg);}
.title-inspect:hover .icon-up { transform: rotate(0deg);}
.content-inspect { padding: 3rem; display: none;}

/* BENEFITS */
.title-square-car{ color: #000; font-size: 20px;}
.title-square-car .text-blue{color:#007bda; display: block; font-size: 18px;}
.title-square-car img{ width: 23px !important; margin: 0!important;}
.benefits{ display: flex; flex-wrap: wrap; width: 100%;}
.benefits .images-car{ width: 35%; padding: 12px;}
.benefits .images-car img{ margin: 22px auto;}
.benefits .detail-car{ width: 65%; padding: 12px 0;}    
    
article.incar {
  -moz-column-gap: 0.5em;
  -webkit-column-gap: 0.5em;
  column-gap: 0.5em; 
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;}
       
article.incar section { display: inline-block; margin:  0.25rem; padding:  4px; width:  100%;  background:  #fff; }
article.incar section .thumb-img{ border: 1px solid #666; background: #fff; padding: 4px; margin: 8px auto;}
article.incar section .thumb-img img{ width: 100%;}
article.incar section .number{ background: #007bda; text-align: center; color: #fff; padding: 2px; font-size: 12px; margin: 8px auto;}
article.incar section .list-detail ul{ display: block;}
article.incar section .list-detail ul li{ display: block; margin: 4px auto; font-size: 12px;}
article.incar section .list-detail ul li::before{ content: '●'; color: #44c4ff; font-size: 10px; margin-right: 8px;}



/* VEHICLE */
.vehicle ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
.vehicle ul li { display: block; width: 15%; margin: 1rem auto;}
.vehicle .number { display: flex; align-items: center; justify-content: center; background: #fff157; width: 38px; height: 38px; border-radius: 50%;}


/* Q&A */
.warpper-qanda{ background: #ecf2f4; padding: 2rem 0 4rem; margin: 2rem auto;}
.warpper-qanda .title-qa{ width: 100%; text-align: center;}
.warpper-qanda .title-qa div{ text-align: center; display: inline-block; margin: auto}
.warpper-qanda .title-qa div h2{font-size: 40px; font-weight: bold;}
.warpper-qanda .title-qa div small{ display: block; font-size: 14px; color: #494848;}
.warpper-qanda .title-qa div img{ width: 100%;}

.tab-accordion { position: relative; margin-bottom: 1px; width: 100%; color: #3e3e3e; overflow: hidden; list-style: none; border-bottom: 1px solid #ccc; }
.tab-accordion  input { position: absolute; opacity: 0; z-index: -1; }
.tab-accordion label::before{ content: "Q"; color: #007bda; font-size: 24px;  font-weight: bold; position: absolute; top: 0.5rem; left: 0; }
.tab-accordion label { position: relative; display: block; padding: 1rem 2rem; font-weight: bold; line-height: 1.8; cursor: pointer; }
.tab-accordion label:hover{ color: #007bda;}
.tab-accordion .tab-content { height: 0; overflow: hidden; }
.tab-accordion .tab-content p { margin: 1em; }
.tab-accordion .tab-content .ans{color: #3aa6f9; font-size: 20px;  font-weight: bold; margin-right: 12px;}
  /* :checked */
.tab-accordion input:checked ~ .tab-content { height: 100%; }
  /* Icon */
.tab-accordion label::after { position: absolute; right: 12px; top: 5px; display: block;line-height: 3; text-align: center; }
.tab-accordion input[type=checkbox] + label::after { content: url(../images/arrow-down-small.png); transform: rotate(0deg); }
.tab-accordion input[type=checkbox]:checked + label::after { transform: rotate(180deg); }
  
/* EFFECT */
.title-effect { background: #ececec; color: #000; padding: 1.5rem 1rem; font-size: 22px; border-bottom: 4px solid #2250c4; position: relative;}
.effect ul {display: flex; flex-wrap: wrap; justify-content: center;}
.effect ul li {width: 37%;margin: 1rem;}
.effect ul li img { width: 100%;}

/* PRICE LIST */
.price-list { display: block; padding: 2rem 0;}
.table-price { width: 100%;}
.table-price table { width: 100%; border: 2px solid #000; border-collapse: collapse;}
.table-price th,
.table-price td { border: 1px solid #000; padding: 1rem 0; text-align: center; background: #fff;}

/* BEFORE AFTER */
.before-after { display: block;}
.before-after ul { display: block;}
.before-after ul li { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; align-items: center; margin: 2rem auto;}
.before-after ul li .before { width: 40%; display: block; background: #fff; position: relative; padding: 0.25rem;}
.before-after ul li .before::before { content: url(../images/before.png); position: absolute; top: 0; left: 0; z-index: 1;}
.before-after ul li .arrow { width: 20%; display: block;}
.before-after ul li .after { width: 40%; display: block; background: #fff; position: relative; padding: 0.25rem;}
.before-after ul li .after::before { content: url(../images/after.png); position: absolute; top: 0; left: 0; z-index: 1;}

/* INSTALL */
.install li { margin: 1rem 2%; max-width: 40%;}


/* 各店舗ボタン */
.button_box {
  width:100%;
  height:170px;
  font-weight: bold;
  border: solid 4px #f45f88;
  padding:0 90px;
}

.button-text{
  padding: 1.5rem 0;
  font-size: 22px;
  font-weight:bold;
  text-align: center;
}

.button{
  background:#2250c4;
  color:#fff;
  text-align:center;
  font-size:22px;
  font-weight:bold;
  width:128px;
  height:40px;
  margin:1.5px;
}

.fl{
  float: left;
}


/* RECOMMEND MENU */
.recommend-menu { width: 80%; margin: 2rem auto; padding: 1.5rem; border-top: 9px solid #88eaff; border-bottom: 9px solid #88eaff; border-left: 9px solid #3da8e0; border-right: 9px solid #3da8e0; background: #fff;} 
.recommend ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
.recommend ul li { width: 30.33%; display: block; margin: 1rem auto;}
.recommend ul li img { width: 100%;}
.recommend ul li span{ background:#caf6ff; padding:2px 4px; font-weight:normal; color:#000; font-size:0.7rem;}
.recommend ul li small {font-size: 0.5rem;}
@media(max-width:1230px){
  .warpper-bgblue .warpper-bgdark-blue::before,
  .warpper-bgblue .warpper-bgdark-blue::after{ display: none;}
  .warpper-bgblue .warpper-bgdark-blue { height: auto;}
}

@media(max-width:1000px){
    /* 各店舗ボタン */
    .button_box {
      width:100%;
      height:150px;
      padding:0 10px;
    }
  
    .button-text{
      padding: 1rem 0;
      font-size: 18px;
      width:100%;
    }
  
    .button{
      font-size:16px;
      width:32.25%;
      height:30px;
      margin:1.5px;
    }
}

@media(max-width:991px) {
  /* PEACH */
  .peace ul li { padding: 1rem;}
}

@media(max-width:980px){
  .benefits .images-car{ width: 100%; display: block;}
  .benefits .detail-car{ width: 100%; display: block;}

  /* TAB ANCHOR */
  .tab-anchor ul li { padding: 4px;}
}
@media(max-width:795px) {
  .effect ul li .font-18 {font-size: 0.9rem;}
}
@media(max-width:680px) {
  .title-bg-gray.font-bold {
    font-size: 4vw;
    padding: 1.5rem 0.5rem;
}
  /* PRICE LIST */
    .table-price { width: 100%; overflow-x: auto;}
    .table-price table { width: 768px;}

    /* RECOMMEND MENU */
    .recommend ul { padding: 1rem;}
    .recommend ul li { width: 48%; margin: 1rem 0;}

    /* BEFORE AFTER */
    .before-after ul li .p-5 { padding: 1.5rem;}

    /* INSPECTION FLOW */
    .inspection-flow .p-5 { padding: 1.5rem;}

    /* BENEFITS */
    article.incar {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    

    .warpper-bgblue .link-contact { width: 90%; font-size: 16px;}
}

@media(max-width:560px){
    .tab-anchor ul{ display: block; width: 100%;}
    .tab-anchor ul li{ display: block; width:100%; padding: 0.5rem !important;}

    /* BEFOER AFTER */
    .before-after ul li .before { width: 100%;}
    .before-after ul li .arrow { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center;}
    .before-after ul li .arrow img { transform: rotate(90deg);}
    .before-after ul li .after { width: 100%;}

    .recommend ul li img {width: 60%;margin: 10px auto;/* text-align: center; */}

    
}
@media(max-width:575px){
  .peace ul{ margin: 10px 0 0;}
  .peace ul li {/* zoom: 0.58 ; */padding: 0.1rem;}
  .peace ul li .font-16 {font-size: 14px;}


  .peace ul{
    display: block;    
  }
  .peace ul li .circle-blue {
    border-radius: 0;
    width: 100%;
    height: auto;
    display: block;
    padding: 1rem 0.5rem;
    }
  .peace ul li .circle-blue .circle-blue-in {
    display:flex;
    align-items: center;
    justify-content: center;
    }
    .peace ul li .circle-blue>div img{
      width: 95px;
      margin: 0 15px 0 0;
    }
    .peace ul li .circle-blue .circle-blue-in div{
      width: calc(100% - 95px);
      margin:0;
      padding:0;
      text-align:left;
    }
     .peace ul li .circle-blue .circle-blue-in div br{
       display:none;
     }

     

}

@media(max-width:480px){
  .font-26 {font-size: 16px;}

  /* INSPECT */
  .content-inspect { padding: 1rem;}

  /* VEHICLE */
  .vehicle ul li { width: 32%;}

  /* INSTALL */
  .install li {max-width: 49%;margin: 1rem 0;font-size: 0.8rem;}
  .install li .font-20 {font-size: 0.8rem;}
  
  /* RECOMMEND MENU */
  .recommend-menu { width: 90%; padding: 0.5rem;}
  .recommend ul { padding: 0;}
  .recommend ul li { width: 100%; margin: 0.5rem auto;}

  /* INSPECTION FLOW */
  .inspection-flow .p-5 { padding: 0rem;}

  /* EFFECT */
  .effect ul li {width: 48%;}
  .effect ul li .font-18 {font-size: 0.8rem;}


  .warpper-bgblue .link-contact { font-size: 14px;}

}