/*project  ======================================
TOP
=================================================*/
header {
  position: relative;
  z-index: 999;
}
.mainvisual {
  background: url("../images/mainVisual_bg.webp") no-repeat;
  background-size: cover;
  background-position: center top;
  margin-top: -7%;
}
.mainVisual_thum {
  width: 110%;
  margin-left: -10%;
}
@media screen and (min-width: 769px) {
  .mainvisual {
    background: url("../images/pc/mainVisual_bg.webp") no-repeat;
    background-size: cover;
    background-position: center top;
    margin-top: -60px;
  }
  .mainVisual_thum {
    width: 110%;
    margin-left: -10%;
  }
}
.toku_ico1 {
  position: absolute;
  top: -9%;
  left: -7%;
  width: 30%;
}
.toku_ico1_2 {
  position: absolute;
  top: 37%;
  left: -5%;
  width: 15%;
}
.toku_ico2 {
  position: absolute;
  top: -10%;
  left: -7%;
  width: 30%;
}
.toku_ico3 {
  position: absolute;
  top: -45%;
  left: -7%;
  width: 30%;
}
/*==========================================
 YOKOHAMA
===========================================*/
.header_logo3 {
  width: 100%;
  top: 2px;
  left: 0;
}
@media screen and (min-width: 769px) {
  .header_logo3 {
    top: 15px;
  }
}
.mainvisual_tire {
  background: url("../images/yokohama/mainVisual_bg.webp") no-repeat;
  background-size: 100% auto;
  background-position: center top;
}
.mainVisual_plus {
  width: 40px;
  left: calc(50% - 20px);
  bottom: -30px;
}
.mainVisual_thum2 {
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  .mainVisual_plus {
    width: 67px;
    left: calc(50% - 33.5px);
    bottom: -40px;
  }
  .mainVisual_thum2 {
    margin-top: 50px;
  }
}
.fixed {
  position: sticky;
  bottom: 0;
  left: 0;
}
/*==========================================
 DUNLOP
===========================================*/
.mainVisual_caution {
  width: 40%;
  margin-left: 60%;
  padding: 10px 0 10px;
}
.mainVisual_caution2 {
  width: 40%;
  right: 0;
  bottom: -15%;
}
.dunlop .mainVisual_plus {
  width: 40px;
  left: calc(50% - 20px);
  bottom: -12%;
}
.dunlop .mainVisual_thum2 {
  margin-top: 17% !important;
}
@media screen and (min-width: 769px) {
  .mainVisual_caution {
    padding: 10px 0 20px;
  }
  .mainVisual_caution2 {
    width: 40%;
    right: 0;
    bottom: -90px;
  }
  .dunlop .mainVisual_plus {
    width: 67px;
    left: calc(50% - 33.5px);
    bottom: -80px;
  }
  .dunlop .mainVisual_thum2 {
    margin-top: 100px !important;
  }
}
/*==========================================
 BRIDGESTONE
===========================================*/
.bridgestone .header_logo3 {
  width: 100%;
  top: 5px;
  left: 0;
}
@media screen and (min-width: 769px) {
  .bridgestone .header_logo3 {
    top: 20px !important;
  }
}
.bridgestone .mainVisual_plus {
  width: 40px;
  left: calc(50% - 20px);
  bottom: -15%;
}
.bridgestone .mainVisual_thum2 {
  margin-top: 20% !important;
}
@media screen and (min-width: 769px) {
  .bridgestone .mainVisual_plus {
    width: 67px;
    left: calc(50% - 33.5px);
    bottom: -80px;
  }
  .bridgestone .mainVisual_thum2 {
    margin-top: 100px !important;
  }
}

/*==========================================
 LINE
===========================================*/

.tab{
  flex-grow: 1;
  padding:5px;
  list-style:none;
  border:solid 1px #CCC;
  text-align:center;
  cursor:pointer;
}
.panel-group{
  height:100px;
  border:solid 1px #CCC;
  border-top:none;
  background:#eee;
}
.panel{
  display:none;
}
.tab.is-active{
  background:#39ad36;
  color:#FFF;
  transition: all 0.2s ease-out;
}
.panel.is-show{
  display:block;
}
.is-show select{
  display:block;
}
.border{
  border:5px #f00 solid;
}
.border2{
  border:5px #fff solid;
}
select{
  border:1px #ccc solid;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}
form{
  position: relative;
}
form::after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 0 7px;
    border-color: #ccc transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

/*==========================================
 MAP
===========================================*/
.map{
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.map_wrap{
  border:3px #c7000b solid;
}
.map_box1{
  width: calc(100% / 3 * 2);
  border-left: 3px #c7000b solid;
  border-bottom: 3px #c7000b solid;
  display: flex;
  align-items:flex-start;
  padding: 10px 0;
}
.map_box1:first-child{
  padding: 0;
}
.map_box2{
  width: calc(100% / 3);
  border-left: 3px #c7000b solid;
  border-bottom: 3px #c7000b solid;
  border-right: 3px #c7000b solid;
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.map_box{
  width: calc(100% / 3);
  border-left: 3px #c7000b solid;
  border-bottom: 3px #c7000b solid;
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.map_box:nth-child(3n),
.map_box1:nth-child(3n){
  border-right: 3px #c7000b solid;
}
.none{
  display: none;
}