@charset "utf-8";

html {
  scroll-behavior: smooth;
}

.content-container {
  --color-main: #643d85;
  --color-sub: #f3f0f5;
  color: #444;
  --shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  --radius: 8px;
  --border: 1px solid #DED9E1;
  --border-hover: 1px solid #a78bb8;
  line-height: 1.4;
  container-name: content-container;
  container-type: inline-size;
  font-size: 15px;
}

body {
  --plyr-color-main: #643d85;
}

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

.content-container a {
  color: #444;
}

.content-container img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.content-container .nowrap {
  white-space: nowrap;
}

/* section共通 */
.content-container .sec {
  margin: 40px 16px;
  position: relative;
}

.content-container .ttl-sec {
  font-size: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: keep-all;
}

.content-container .ttl-sec::before {
  width: 40px;
  height: 40px;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-2px);
}

.content-container .list {
  margin-top: 12px;
}

@container content-container (width < 400px) {
  .content-container .sec {
    margin: 24px 8px;
  }

  .content-container .ttl-sec {
    font-size: 20px;
    gap: 4px;
  }

  .content-container .ttl-sec::before {
    width: 30px;
    height: 30px;
  }
}

/* グレードから探す */
.content-container .ttl-sec-grade::before {
  background-image: url(../img/heading_instrumental.png);
}

.content-container .list-grade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.content-container .list-grade a {
  display: grid;
  height: 100%;
  grid-template-columns: 30% 1fr;
  border-radius: var(--radius);
  align-items: center;
  overflow: hidden;
  padding-left: 8px;
  border: var(--border);
  transition: border-color 0.3s;
}

.content-container .list-grade a:hover {
  border: var(--border-hover);
  text-decoration: none;
}

.content-container .list-grade img {
  padding: 5%;
}

.content-container .list-grade p {
  text-align: center;
  font-weight: bold;
  font-size: 1.5cqw;
  font-size: clamp(10px, 1.3cqw, 15px);
  word-break: keep-all;
  padding: 8px;
  padding-left: 0;
}

@container content-container (width < 680px) {
  .content-container .list-grade {
    grid-template-columns: 1fr 1fr;
  }
}

/* 価格帯から探す */
.content-container .ttl-sec-price::before {
  background-image: url(../img/heading_price.png);
}

.content-container .list-price {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.content-container .list-price a {
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: var(--border);
  min-height: 50px;
  transition: border-color 0.3s;
}

.content-container .list-price a:hover {
  text-decoration: none;
  border: var(--border-hover);
}

.content-container .list-price p {
  font-weight: bold;
  font-size: 1.5cqw;
  font-size: clamp(10px, 1.5cqw, 15px);
  word-break: keep-all;
  padding: 8px;
  letter-spacing: 0.05em;
}

.content-container .list-price p .num {
  font-weight: bold;
  font-size: 1.5em;
}

@container content-container (width < 680px) {
  .content-container .list-price {
    grid-template-columns: 1fr 1fr;
  }
}

/* ブランドから探す */
.content-container .ttl-sec-brand::before {
  background-image: url(../img/heading_brand.png);
}

.content-container .list-brand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.content-container .list-brand li {
  width: calc((100% - 16px) / 3);
}

.content-container .list-brand li + li + li + li {
  width: calc((100% - 24px) / 4);
}

.content-container .list-brand a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  transition: border-color 0.3s;
  text-align: center;
}

.content-container .list-brand a:hover {
  border: var(--border-hover);
}

.content-container .list-brand img {
  min-height: 50px;
  object-fit: scale-down;
  margin-block: -2%;
}

@container content-container (width < 680px) {
  .content-container .list-brand {
    grid-template-columns: 1fr 1fr;
  }
}

/* 人気ランキング */
.content-container .ttl-sec-ranking::before {
  background-image: url(../img/heading_ranking.png);
}

.content-container .list-ranking {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 0 8px;
}

.content-container .list-ranking li {
  display: contents;
}

.content-container .list-ranking a {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: 8px;
  text-align: center;
  border: 1px solid #AFA5B4;
}

.content-container .list-ranking a:hover {
  text-decoration: none;
}

.content-container .list-ranking .rank {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 30px;
  background: var(--color-main);
  border-radius: 6px;
  z-index: 1;
}

.content-container .list-ranking li:nth-child(1) .rank {
  background: #f5b000;
}

.content-container .list-ranking li:nth-child(2) .rank {
  background: #bfc8d2;
}

.content-container .list-ranking li:nth-child(3) .rank {
  background: #d78353;
}

.content-container .list-ranking figure {
  margin-bottom: 4px;
  padding: 8px;
}

.content-container .list-ranking img {
  aspect-ratio: 1 / 1;
  object-fit: scale-down;
  transition: transform 0.3s;
}

.content-container .list-ranking a:hover img {
  transform: scale(1.1);
}

.content-container .list-ranking .maker,
.content-container .list-ranking .name {
  font-weight: bold;
}

.content-container .list-ranking .desc {
  font-size: 12px;
  margin-top: 4px;
}

@container content-container (width < 800px) {
  .content-container .list-ranking {
    overflow-x: auto;
    padding: 2px 16px;
    margin-inline: -16px;
    grid-template-columns: repeat(5, 140px);
  }
}

/* 人気の情報コンテンツ */
.content-container .ttl-sec-content::before {
  background-image: url(../img/heading_content.png);
}

.content-container .list-content {
  display: flex;
  gap: 8px;
}

.content-container .list-content li {
  width: calc((100% - 32px) / 5);
}

.content-container .list-content a {
  display: block;
}

.content-container .list-content a img {
  border-radius: var(--radius);
  border: var(--border); /* edit */
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.content-container .list-content p {
  margin-top: 8px;
  font-size: 13px;
}

@container content-container (width < 800px) {
  .content-container .list-content {
    overflow-x: auto;
    padding: 2px 8px;
    margin-inline: -8px;
  }

  .content-container .list-content li {
    width: 140px;
    flex-shrink: 0;
  }
}

/* 動画でチェック */
.content-container .ttl-sec-video::before {
  background-image: url(../img/heading_video.png);
}

.content-container .list-video {
  display: flex;
  gap: 8px;
}

.content-container .list-video li {
  width: calc((100% - 32px) / 5);
}

.content-container .list-video a {
  position: relative;
  display: block;
}

.content-container .list-video a::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: url(../img/ico_play.svg) no-repeat center center rgba(0, 0, 0, 0.1);
  background-size: 28%;
  transition: background-color 0.3s;
}

.content-container .list-video a:hover::after {
  background-color: rgba(0, 0, 0, 0.0);
}

.content-container .list-video img {
  /* box-shadow: var(--shadow); */
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  margin-bottom: 8px;
  border: var(--border); /* edit */
}

.content-container .list-video p {
  font-size: 14px;
}

@container content-container (width < 800px) {
  .content-container .list-video {
    overflow-x: auto;
    padding: 2px 8px;
    margin-inline: -8px;
  }

  .content-container .list-video li {
    width: 140px;
    flex-shrink: 0;
  }

  .content-container .list-video p {
    font-size: 13px;
  }
}

/* よくある質問 */
.content-container .ttl-sec-faq::before {
  background-image: url(../img/heading_faq.png);
}

.content-container .list-faq li + li {
  margin-top: 8px;
}

.content-container .list-faq details {
  border-radius: var(--radius);
  border: var(--border);
  transition: border-color 0.3s;
}

.content-container .list-faq summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 16px;
  cursor: pointer;
}

.content-container .list-faq details:has(summary:hover) {
  border: var(--border-hover);
}

.content-container .list-faq summary::before {
  content: "Q";
  color: #fff;
  font-weight: bold;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-main);
  border-radius: 50%;
  flex-shrink: 0;
}

.content-container .list-faq summary::after {
  content: "＋";
  font-weight: bold;
  font-size: 18px;
  margin-left: auto;
}

.content-container .list-faq details[open] summary::after {
  content: "－";
}

.content-container .body-details {
  padding: 8px 16px;
  display: flex;
  gap: 8px;
}

.content-container .body-details::before {
  content: "A";
  color: var(--color-main);
  font-weight: bold;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-sub);
  border-radius: 50%;
  flex-shrink: 0;
}

/* footer */
.content-container footer {
  background: var(--color-sub);
  padding: 16px;
  text-align: center;
}

.content-container .ttl-footer {
  color: var(--color-main);
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 4px;
}

.content-container .list-point {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.content-container .list-point li {
  display: contents;
}

.content-container .list-point li a {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  grid-template-columns: 28% 1fr;
  text-align: left;
  font-size: 13px;
  align-items: center;
  text-decoration: none;
}

.content-container .list-point li img {
  grid-row: 1 / 3;
  width: 100%;
  padding: 10%;
  height: auto;
  transition: transform 0.3s;
}

.content-container .list-point li a:hover img {
  transform: scale(1.1);
}

.content-container .ttl-point {
  color: var(--color-main);
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 16px;
  align-self: self-end;
}

.content-container .ttl-point + p {
  align-self: self-start
}

@container content-container (width < 640px) {
  .content-container .list-point li {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .content-container .list-point li img {
    width: 50px;
    padding: 0;
    display: block;
    margin-inline: auto;
  }

  .content-container .ttl-point {
    align-self: self-start;
  }
}

@container content-container (width < 400px) {
  .content-container .list-point {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .content-container .list-point li {
    grid-template-columns: auto 1fr;
    gap: 0 16px;
  }
}