@charset "utf-8";

.content-container-wrapper {
  container-type: inline-size;
  container-name: content-container-wrapper;
}

.content-container * { box-sizing: border-box; }

:root .content-container {
  --color-black: #0e0e0e;
  --color-gray: #353639;
  --color-white: #fff;
  --color-lightgray: #fcfcfc; 
  --color-main: #3c3269;
  --color-blue: #295a82;
  --color-main: #143e6f;
  --color-main-light: #848096;
  --color-primary: #f9f6f4;
  --bg-blue: #f0f7fc;
  --border-blue: #e1ecf4;
  --color-secoundary: #dad2cd;

  --color-green: #1c9138;
  --color-sky: #0174c7;
  --color-violet: #6e3cab;

  --transitionall: all 0.3s ease;
}


/*-- common --*/ 
.content-container {
  max-width: 1420px;
  margin-inline: auto;
  padding-bottom: 3rem;
  background-color: var(--color-lightgray);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  @media (max-width: 768px) { padding-bottom: 1rem;}
  section {
    margin-block: 1em;
    /*padding: 0 1.5em 1.5em;*/
    max-width: 1300px;
    margin-inline: auto;
    background: var(--bg-blue) url(../img/number_bg.png) no-repeat -20px top / 85px;
    border: 1px solid var(--border-blue);
    border-radius: 10px;
    overflow: hidden;
    @media (max-width: 1200px) { margin-inline: 1em;}    
    @media (max-width: 768px) {
      background: var(--bg-blue) url(../img/number_bg.png) no-repeat -19px top / 65px;
    }
    .inner-wrap {
      margin: 0 1.5em 1.5em;
      @media (max-width: 768px) { margin-inline: 1em;}
    }
  }
  section:last-child {
    padding-bottom: 0;
  }
  figure { 
    text-align: center;
    overflow: hidden;
  }
  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  a {
    color: inherit;
    text-decoration: none;
    &:hover {
      opacity: 0.7;
    }
  }
  span {
    color: inherit;
    font-weight: inherit;
  }
}
@media (max-width: 768px) {
  .content-container{ font-size: 14px;}
}
@media (max-width: 350px) {
  .content-container{ font-size: 13px;}
}

/*-- 共通パーツ --*/
.content-container {
  counter-reset: heading;
  .heading {
    font-weight: bold;
    font-size: 1.5em;
    padding-block: .2em;
    display: flex;
    align-items: center;
    gap: .6em;
    color: var(--color-main);
    @media (max-width:1100px) {
      flex-direction: column;
      gap: .3em;
      align-items: flex-start;
      position: relative;
      padding-left: 2.7em;
      padding-top: .3em;
      margin-bottom: .5em;
      span {
        display: block;
        /*position: absolute;
        top: 2.5em;
        left: 4em;
        right: 0;
        width: auto;*/
      }
    }
    @media (max-width:768px) {
      font-size: 1.4em;
      padding-right: 1em;
    }
    &::before { /*見出しの先頭に数字*/
      counter-increment: heading;
      content: counter(heading);
	    display: flex;
      justify-content: center;
      align-items: center;
	    font-size: 1.2em;
      color: var(--color-white);
      /*background: var(--color-main);*/
      width: 1.9em;
      /*padding-block: .3em .2em;
      height: 1.5em;*/
      border-bottom-right-radius: 10px;
      @media (max-width:1100px) {
        position: absolute;
        left: 0;
        top: 0;
        height: 1.7em;
      }
      @media (max-width:768px) {
        font-size: 1em;
      }
    }
    > span {
      font-size: .65em;
      font-weight: normal;
    }
  }
  .card {
    background: var(--color-white);
    border: solid 1px var(--border-blue);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .5em;
    align-items: center;
    padding: .5em;
    &:hover {
      background: var(--color-lightgray);
      border-color: var(--color-blue);
    }
    div {
      width:95%;
    }
    .ttl {
      font-weight: bold;
      color: var(--color-main);
    }
    .desc {
      font-size: .8em;
      color: #64748b;
      flex: 1;
    }
  }
  .cta-btn {
    display: inline-block;
    font-size: .9em;
    padding: .3em 1em;
    padding-right: 2em;
    border-radius: 5px;
    background: var(--color-main);
    color: var(--color-white);
    position: relative;
    margin-left: auto;
    &::after {
      /*content: " >";*/
      content: "";
      position: absolute;
      right: 1em;
      top: 50%;
      width: .5em;
      height: .5em;
      border-right: 2px solid var(--color-white);
      border-top: 2px solid var(--color-white);
      transform: translateY(-50%) rotate(45deg);
      margin-left: 1em;
    }
    &:hover {
      opacity: 0.7;
    }
  }
  .heading-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 1.5em;
    @media (max-width:768px) {
      flex-wrap: wrap ;
      margin-bottom: 1em;
    }
  }
  .fx-expansion { /* img：祖先要素ホバーで拡大 */
    img {
      transition: var(--transitionall);
    }
    &:hover img {
      transform: scale(1.03);
    }
  }
}



/*========= ヘッダー =========*/
.content-container header {
  background: #020812 url(../img/head.jpg?b) no-repeat center right / contain;
  color: var(--color-white);
  padding: 1.5em;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-between;
  h2 {
    font-size: clamp(24px, 3.8vw, 48px);
    line-height: 1.2;
    font-weight: 700;
    > span {
      display: block;
    }
  }
  @media (max-width:1200px) {
    background: #020812 url(../img/head.jpg?b) no-repeat center right / cover;
  }
  @media (max-width:768px) {
    background:
      linear-gradient(rgba(2, 8, 18, 0.5), rgba(0, 0, 0, 0.5)),
      url(../img/head.jpg?b) no-repeat center right 12% / cover;
    background-color: #020812;
  }
  .catch-copy {   
    margin: .5em 0 0;
    color: #f5c400;
    font-size: clamp(13px, 1.5vw, 19px);
    line-height: 1.35;
    font-weight: 400;
  }
  .catch-point {
    display: flex;
    gap: 1.5em;
    @media (max-width:768px) {
      margin-top: 2em;
      flex-wrap: wrap;
    }
    li {
      display: flex;
      gap: .5em;
      align-items: center;
      @media (max-width:768px) {
        align-items: flex-start;
      }
      p {
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
        span {
          display: block;
          font-size: .8em;
          margin-top: .3em;
        }
      }
      img {
        background: var(--color-main);
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        padding: .5em;
        width: 50px;
      }
    }
  }
}

/*========= ヘッダー下 =========*/
.content-container .bassamp-overview {
  padding: 1.5em;
  background:
  linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 60%, transparent 80%),
  url(../img/bassamp.png) no-repeat right -20px center / auto 100%;
  background-color: var(--bg-blue);
  > div {
    width: 62%;
  }
  .ttl {
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: .3em;
    color: var(--color-main);
  }
  .caption {
    line-height: 1.6;
    color: var(--color-black);
  }
  @media (max-width:768px) {    
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 60%, transparent 80%),
    url(../img/bassamp.png) no-repeat right -50px center / auto 100%;
    background-color: var(--bg-blue);
  }
  @media (max-width:580px) {    
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 100%),
    url(../img/bassamp.png) no-repeat center center / auto 100%;
    background-color: var(--bg-blue);
    > div { width:100%;}
  }
}

/*========= 出力で選ぶ =========*/
.select-output {
  .inner-wrap > div {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1em;
  }
  .card {
    padding: 0 0 .5em;
    gap: 0;
    .ttl {
      font-size: 1.1em;
      color: var(--color-white);
      background: var(--color-main);
      width: 100%;
      text-align: center;
      padding-block: .3em;
    }
    .desc {
      padding-inline: 1em;
    }
  }
  .wat {
    margin-block: .3em;
    span {
      font-weight: bold;
      font-size: 1.2em;
      padding-left: .2em;
    }
  }
  .card.output_l {
    color: var(--color-green);
    .ttl { background: var(--color-green);}
  }
  .card.output_m {
    color: var(--color-sky);
    .ttl { background: var(--color-sky);}
  }
  .card.output_h {
    color: var(--color-violet);
    .ttl { background: var(--color-violet);}
  }
}
/*========= 価格で選ぶ =========*/
.select-pricerange {
  .inner-wrap > div {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1em;
  }
  .card {
    img {
      aspect-ratio: 2 / 1;
      object-fit: contain;
    }
    .desc {
      text-align: center;
      span { display: inline-block;}
    }
  }
}
/*========= ブランドで選ぶ =========*/
.select-bland {
  letter-spacing: 0;
  .bland-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    li {
      width: calc((100% - 2em) / 5);
      @media (max-width:768px) {
        width: calc((100% - 4.5em) / 10);
      }
    }
  }
  .card {
    padding: 1em;
    height: 100%;
    .desc {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

/*========= 動画　=========*/
.movie {
  @media (max-width:768px) {
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    .movie-list {
      width: 900px;
    }
  }
  .movie-list {
    display: flex;
    gap: 1em;
    > li {
      width: 80%;
      max-width: 320px;
      figure {
        border-radius: 5px;
      }
    }
  }
  figure {
    border: solid 1px var(--color-secoundary);
  }
  .ttl {
    width: 100%;
    font-size: .8em;
    padding: .5em .3em;
    border-radius: 5px;
  }
  .icon-movie {
    display: block;
    width: 100%;
    position: relative;

    &::after { position: absolute; display: block;	content: ""; width: 100%; height: 0; padding-top: 56.25%;top: 0;	left: 0;	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 68 48" width="100%" fill="%23ffffff"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="%23f00"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>') no-repeat center center;	background-size: 20%; }
  }
}
/* glightbox */
:root {
  --plyr-color-main: #ff0000;
}

.goverlay {
	background: rgba(0, 0, 0, .7);
}

/*========= よくある質問　=========*/
.faq .inner-wrap {
  display: flex;
  gap: 1em;
  @media (max-width:768px) {
    flex-direction: column;
    gap: .5em;
  }
  .faq-list {
    width: calc((100% - 1em) / 2);
    display: flex;
    flex-direction: column;
    gap: .5em;
    @media (max-width:768px) {
      width: 100%;
    }
    > li {
      border-radius: 10px;
      border: solid 1px var(--border-blue);
      background: var(--color-white);
      overflow: hidden;
    }
    summary {
      list-style: none;
      cursor: pointer;
      padding: .5em 1em;
      padding-right: 2em;
      color: var(--color-main);
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      position: relative;
      line-height: 1.6em;
      &::after {
      content: "";
      position: absolute;
      right: 1em;
      top: 50%;
      width: .5em;
      height: .5em;
      border-right: 2px solid var(--color-blue);
      border-bottom: 2px solid var(--color-blue);
      transform: translateY(-70%) rotate(45deg);
      transition: transform 0.3s ease;
      }
    }
    details[open] summary::after {
      transform: translateY(-30%) rotate(-135deg);
    }
    summary > span, .answer {
        display: inline-flex;
      &::before {
        content: "Q";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: bold;
        width: 1.6em;
        height: 1.6em;
        margin-right: .5em;
        background: var(--color-main);
        color: var(--color-white);
        flex-shrink: 0;
      }
    } 
    .answer {
      display: flex;
      padding: .5em 1em;
      line-height: 1.6;
      &::before {
        content:"A";
        background: var(--color-sky);
      }
      > div , p {
        font-size: .9em;
      }
      a {
        display: inline-block;
        color: var(--color-sky);
        text-decoration: underline;
        @media (max-width:480px) { display: inline;}
      }
    }
  }
}

/*========= 関連記事　=========*/
.article .inner-wrap {
  @media (max-width:768px) {
    &:last-child{ margin-top: 1em; } 
  }
  .article-list {
    display: flex;
    gap: 1em;
    @media (max-width:768px) { gap: .5em;}
    li {
      .card { height: 100%;}
    }
  }
}

/*-- 768px以下で横スクロール --*/
@media (max-width: 768px) {
  .select-output,
  .select-pricerange,
  .select-bland,
  .movie,
  .article {
    .inner-wrap {
      overflow-x: auto;
      display: flex;
      flex-direction: column;
      > * , > div {
        width: 900px;
        padding-bottom: 1.5em;
        gap: .5em;
      }
    }
    .bland-list {
      width: 1700px;
    }
  }  
}