@charset "utf-8";
/* 定義・共通パーツは ../global.cssに記載 */


/* 見出し */
.allparts-container .el-heading{
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  font-size: 200%;
  font-weight: bold;
  @container allparts-container-wrapper (max-width: 600px) {
  font-size: 175%;
  }
}
.allparts-container h4 {
  font-weight: bold;
  font-size: 1.2em;
}
.allparts-container picture {
  display: block;
  text-align: center;
  overflow: hidden;
}

/* FV -------------------- */
.allparts-container .sec-fv{
  padding-block: 0;
}

.sec-fv .fv-image{
  background-color: #f0f1ea;
  & img {
    width: 90%;
    height: auto;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  }
  @container allparts-container-wrapper (max-width:640px) {
    background-color: #fcfbfc;
    & img {
      width: 70%;
    }
  }
}

.sec-fv .catch-box{
  margin-block: 2.5rem 0;
  & h2{ 
    font-family: "Shippori Mincho", serif;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 1rem;
    font-size: 300%;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.05em;
    word-break: auto-phrase;
    text-align: center;
    .sub-catch {
      font-size: 80%;
    }
  }
  @container allparts-container-wrapper (max-width: 800px) {
    & h2{ 
      font-size: 230%;
    }
  }
  @container allparts-container-wrapper (max-width: 414px) {
    & h2{ 
      font-size: 200%;
    }
  }
}
.allparts-container .razor-box {
  margin-top: 3rem;
  padding-block: 1rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1rem;
  background: var(--color-black);
  border-radius: 1rem;
  overflow: hidden;
  color: white;
   figure {
    width: 40%;
    img {
      width: 100%;
      height: auto;
      border-radius: 1rem;
    }
   }
  @container allparts-container-wrapper (max-width:768px) {
    flex-direction: column-reverse;
    figure {
      width: 80%;
      max-width: 400px;
    }
  }
  .text-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    padding-inline: var(--pdin-common);
    & p + .ui-btncta {
      margin-top: 1.5rem;
      min-width: 45%;
      background: #d93035;
    }
  }
}
.sub-heading{
  /*width: fit-content;*/
  margin-inline: auto;
  margin-bottom: 1rem;
  font-size: 200%;
  font-weight: bold;
@container allparts-container-wrapper (max-width: 960px) {
  font-size: 150%;
}
  /*& span {
    display: inline-block;
    font-weight: normal;
    font-size: 65%;
    word-break: auto-phrase;
  }*/
}


/* Product -------------------- */
.sec-product .inner > div {
  padding-block: 1.5rem;
}

/* アニメ・ハムバッカー共通 -------------------- */
.allparts-container .anime-wrap,
.allparts-container .humbucker-wrap {
  .anime-list,
  .humbucker-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1em;
    @container allparts-container-wrapper (max-width:960px){
      grid-template-columns: repeat(2,1fr);
    }
    @container allparts-container-wrapper (max-width:414px){
      grid-template-columns: repeat(1,1fr);
    }
  }
}

/* アニメシリーズ -------------------- */
.allparts-container .anime-wrap {
  .anime-list {
    li {
      color: #FFF;
      border-radius: 10px;
      overflow: hidden;
      background: var(--color-black);
      display: flex;
      flex-direction: column;      
      > div {
        padding: 2em 1em 1em;
        margin-top: -5em;
        position: relative;
        z-index: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1em;
      }
      img {
        aspect-ratio: 5 / 4;
        object-fit: cover; 
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
      }
    }
    .ui-btncta {
      background: #d93035;
    }
  }
}

/* ハムバッカーラインナップ -------------------- */
.allparts-container .humbucker-wrap {
  .humbucker-list {
    li {
      figure {
      border-radius: 10px;
      overflow: hidden;}
    }
  }
}

/* タイプから選ぶ -------------------- */
.allparts-container .type-wrap {
  .type-list {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1em;
    @container allparts-container-wrapper (max-width:960px) {
      grid-template-columns: repeat(auto-fit, minmax(120px,1fr)) ;
    }
    @container allparts-container-wrapper (max-width:450px) {
      grid-template-columns: repeat(3, 1fr) ;
    }
    @container allparts-container-wrapper (max-width:350px) {
      grid-template-columns: repeat(2, 1fr) ;
    }
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .2em;
    }
  }
}



/* ビルダーたちの声 -------------------- */
.allparts-container .review-wrap {
  > div {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3rem;
    @container allparts-container-wrapper (max-width:960px) {
      grid-template-columns: repeat(1,1fr);
    }
    h4 {
      padding-bottom: .2em;
      padding-left: .5em;
      margin-bottom: .3em;
      /*border-bottom: solid 1px var(--color-black);*/
      border-left: solid 12px var(--color-black);
      span {
        display: block;
        font-size: .9em;
        font-weight: normal;
      }
    }
  }
}