@charset "utf-8";

/* protector
----------------------------------------------------*/
.hdg_cont.cont03 span::before{
  content: "";
  background: url(/common/img/products/D30_protector/spectre/hdg_spectre.png) no-repeat;
  background-size: 100%;
  width: 80px;
  height: 59px;
  position: absolute;
  left: -90px;
  top: -10px;
}
.hdg_cont.cont04 span::before {
  content: "";
  background: url(/common/img/products/D30_protector/racing_protector/hdg_img.jpg) no-repeat;
  background-size: 100%;
  width: 70px;
  height: 70px;
  position: absolute;
  left: -90px;
  top: -10px;
}

/*.anchor-nav */
.anchor-nav{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-content: center;
  gap: 15px;
  margin: 0 auto;
}
.anchor-nav li a{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  border: solid 1px #636363;
  text-decoration: none;
  line-height: 1;
  padding: 1.2em 1em;
  font-weight: 700;
  transition: all 0.3s;
  height: 100%;
  text-decoration: none;
  position: relative;
}
.anchor-nav li a::before{
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  color: #111;
}
.anchor-nav li a:hover{
  background-color: #333;
  color: #fff;
}
.anchor-nav li a:hover::before{
  color: #fff;
}

/* ghost-txt-list */
.ghost-txt-list li{
  margin-bottom: 20px;
  text-indent: -1em;
  padding-left: 1em;
}


/* specTable */
.spec-comparison{
  width: 100%;
  table-layout: fixed;
  margin-top: 30px;

}
.spec-comparison tr{
  border-bottom: 1px solid #ccc;
}
.spec-comparison th {
  background-color: #e3e3e3;
  vertical-align: middle;
  word-break:break-all
}
.spec-comparison td {
  background-color: #fff;
  word-break:break-all
}
.spec-comparison img{
  width: 70%;
}
.spec-comparison th,.spec-comparison td{
  padding: 10px;
  text-align: center;
}
.spec-comparison td:first-of-type{
  background-color: #FDF9F9;
}
.spec-comparison td:nth-of-type(3){
  background-color: #FDF9F9;
}
@media screen and (max-width:768px){
  .spec-comparison td {
    text-align: left;
  }
  .spec-comparison th {
    width: 10%;
  }
  .spec-comparison img{
    /* width: 100%; */
  }
  .spec-comparison th,.spec-comparison td{
    vertical-align: middle;
    font-size: 82%;
    padding: 4px 3px;
  }
  .spec-comparison tr:first-of-type td{
    padding: 0px;
  }
}



/* Spectore 
----------------------------------------------------*/
.spectre__mv{
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}
.spectre_copy{
  margin-bottom: 60px;
}
@media screen and (max-width:768px){
  .spectre_copy{
    text-align: center;
  }
}


.spectre__feature{
  background-color: #FFF6E5;
  position: relative;
  width: 100%;
  container-type: inline-size;
  padding: 0 3cqw 3cqw;
  margin-block: 0 60px;
}
.spectre__feature h5{
  text-align: center;
  transform: translateY(-2cqh);
}
.spectre__feature h5 span{
  display: inline-block;
  font-size: 144%;
  font-weight: 700;
  background: #fff;
  border: solid 1px #333;
  padding: 0.5em 1em;
  line-height: 1;
}
.spectre__feature-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 3cqw 5cqw;
}
.spectre__feature-list li{
  display: flex;
  justify-content: space-between;
  gap: 3%;
}
.spectre__feature-list li .spectre__feature-img{
  width: 27%;
} 
.spectre__feature-list li .spectre__feature-cont{
  width: 70%;
}
.spectre__feature-list li .spectre__feature-cont h6{
  display: block;
  font-weight: 700;
  margin-bottom: 0.2em;
  font-size: 108%;
  line-height: 1.5;
}
@media screen and (max-width:768px){
  .spectre__feature h5 span{
    font-size: 124%;
  }
  .spectre__feature-list{
    grid-template-columns: 1fr;
    gap: 8cqw;
  }
  .spectre__feature-list li .spectre__feature-img{
    width: 20%;
  }
  .spectre__feature-list li .spectre__feature-cont{
    width: 75%;
  }
  .spectre__feature-list li .spectre__feature-cont h6{
    font-size: 92%;
  }
  .spectre__feature-list li .spectre__feature-cont p{
    font-size: 88%;
  }
}


/* basic table */
.tbl{
  width: 100%;
  margin-block: 0 10px;
}
.tbl th,.tbl td{
  border-collapse: collapse;
  padding: 6px 5px;
  border: solid 1px #ccc;
}
.tbl th{
  text-align: center;
  background-color: #efefef;
}
@media screen and (max-width:768px){
  .tbl{
    font-size: 82%;
  }
  .tbl th,.tbl td{
    padding: 4px 3px;
  }
}

.note{
  font-size: 88%;
}
@media screen and (max-width:768px){
  .note{
    font-size: 72%;
  }
}

.product-img-tbl{
  max-width: 180px;
  margin: 5% 10%;
}

.imglist{
  display: flex;
  justify-content: center;
  gap: 20px;
}
.imglist li{
  max-width: 120px;
}
@media screen and (max-width:768px){
  .imglist{
    justify-content: flex-start;
    gap: 10px;
  }
}