/* ===============================================
  * 共通の構造 *
=============================================== */

/*
 * ボタン
 */
 .coordinate-detail__button--category-child {
  --color-font: var(--color-primary);
  --color-bg: #fff;
  --color-border: var(--color-primary);

  padding: .375rem;
  background-color: var(--color-bg);
  border: solid 1px var(--color-border);
  border-radius: 3px;

  color: var(--color-font);
  font-size: .75rem;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
}
@media (min-width: 768px) {
  .coordinate-detail__button--category-child {
    font-size: .875rem;
  }
}

.coordinate-detail__button--category-child::before {
  content: "#";
}


/*
 * テキスト
 */

.coordinate-detail__text--set-item-area {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: .08em;
  line-height: 1;
}

.coordinate-detail__text--set-item-title {
  display: flex;
  align-items: center;
  gap: .5625rem;

  font-size: 1rem;
  font-weight: bold;
  letter-spacing: .08em;
  line-height: 1.5;
}
.coordinate-detail__text--set-item-title[data-required=active]::after {
  content: "必須";

  color: var(--color-error);
  font-size: .6875em;
}

.coordinate-detail__text--option-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .625rem;

  font-size: .875rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: .08em;
}
@media (min-width: 768px) {
  .coordinate-detail__text--option-title {
    align-items: inherit;
    justify-content: initial;
    flex-direction: column;
    row-gap: .3125rem;
  }
}
.coordinate-detail__text--option-title[data-required=active]::after {
  content: "必須";

  color: var(--color-error);
  font-size: .6875rem;
}

.coordinate-detail__text--error {
  margin-top: .625rem;

  color: var(--color-error);
  font-weight: bold;
  letter-spacing: .08em;
  line-height: 1.5;
}


/*
 * フォーム要素
 */

.coordinate-detail__form--radio {
  --color-font: #888;
  --color-border: #888;
  --color-background: #fff;

  cursor: pointer;
}

.coordinate-detail__form--radio > input {
  visibility: hidden;
}

.coordinate-detail__form--radio > span {
  display: inline-grid;
  place-content: center;

  width: 7.5rem;
  padding: .5rem;
  background-color: var(--color-background);
  border: solid 1px var(--color-border);
  border-radius: 50px;

  color: var(--color-font);
  font-size: .8125rem;
  letter-spacing: .08em;
  line-height: 1;
}
@media (min-width: 768px) {
  .coordinate-detail__form--radio > span {
    width: 5.625rem;
  }
}

.coordinate-detail__form--radio > span::before {
  content: "選択する";
}

.coordinate-detail__form--radio > input:checked + span {
  --color-font: #fff;
  --color-border: var(--color-primary);
  --color-background: var(--color-primary);
}

.coordinate-detail__form--radio > input:checked + span::before {
  content: "選択中";
}


/*
 * その他
 */

.product-detail-area--cart .cart-area--variation,
.product-detail-area--cart .cart-area--add {
  display: initial;
}

#BreadcrumbArea .c-breadcrumb__list {
  white-space: nowrap;
  word-break: keep-all;
}

#BreadcrumbArea .c-breadcrumb__list > *:not(:first-of-type):before {
  flex-shrink: 0;
}




/* ===============================================
  * セット内容の概要 *
=============================================== */

.coordinate-detail__summary-information-container .product-detail__price-wrapper {
  display: grid;
  grid-template-areas: ". price-proper" "discounted-rate price-discounted";
  grid-template-columns: 1fr auto;
  column-gap: .625rem;
}

.coordinate-detail__summary-information-container .product-detail__price-wrapper--proper {
  grid-area: price-proper;
}

.coordinate-detail__summary-information-container .product-detail__price-wrapper--discount-rate {
  grid-area: discounted-rate;

  justify-self: flex-end;

  width: fit-content;
}

.coordinate-detail__summary-information-container .product-detail__price-wrapper--discounted {
  grid-area: price-discounted;
}

.coordinate-detail__summary-information-container .product-detail__price-wrapper--proper,
.coordinate-detail__summary-information-container .product-detail__price-wrapper--discounted {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: .625rem;
}
@media (min-width: 768px) {
  .coordinate-detail__summary-information-container .product-detail__price-wrapper--proper > span,
  .coordinate-detail__summary-information-container .product-detail__price-wrapper--discounted > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    width: 100%;
  }
}

.coordinate-detail__summary-information-container .product-detail__price-wrapper--proper::before,
.coordinate-detail__summary-information-container .product-detail__price-wrapper--discounted::before {
  flex-shrink: 0;
}

.product-detail__price-wrapper .product-detail__price-wrapper--proper::before {
  content: "通常　：";
  /* MEMO: 「セット」と文字数を合わせるために全角スペースを挿入しているので、半角スペースにしないでください。 */
}

.product-detail__price-wrapper .product-detail__price-wrapper--discounted::before {
  content: "セット：";
}

.coordinate-detail__description-wrapper {
  margin-bottom: 1.25rem;
  padding: 1.25rem 0;
  border-top: solid 1px var(--color-border-primary);
  border-bottom: solid 1px var(--color-border-primary);
}




/* ===============================================
  * セット内容のスタイル *
=============================================== */

.coordinate-detail__text--set-item-area {
  display: block;
  margin-bottom: 1.25rem;
}

.coordinate-detail__item-outer {
  display: grid;
  gap: 1.25rem;
}

.coordinate-detail__set-item-wrapper {
  --padding-vertical: 1.25rem;
  --padding-horizontal: 1rem;

  display: grid;
  /* gap: .9375rem; */

  background-color: #F8F2FA;
}
@media (min-width: 768px) {
  .coordinate-detail__set-item-wrapper {
    --padding-horizontal: 1.625rem;
  }
}

.coordinate-detail__set-item-inner {
  display: grid;
  gap: 1.25rem;

  padding: var(--padding-vertical) var(--padding-horizontal);
}

.coordinate-detail__set-item-title-wrapper {
  --decoration-width: .25rem;
  --decoration-height: 1rem;
  --spacer-decoration-to-text: .625rem;

  padding: var(--padding-vertical) var(--padding-horizontal);
}

.js-accordionTrigger[data-state-trigger=active] {
  cursor: pointer;
}

.coordinate-detail__set-item-title-inner {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-left: calc(var(--decoration-width) + var(--spacer-decoration-to-text));
}

.coordinate-detail__set-item-title-inner::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;

  width: var(--decoration-width);
  height: var(--decoration-height);
  margin: auto;
  background-color: var(--color-primary);
}

.js-accordionTrigger[data-state-trigger=active] .coordinate-detail__set-item-title-inner::after {
  content: "";

  flex-shrink: 0;

  width: 1.5rem;
  aspect-ratio: 1;

  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cg%20id%3D%22_%22%20data-name%3D%22%EF%BC%8B%22%20transform%3D%22translate(-1332%20-359.945)%22%3E%20%3Crect%20id%3D%22bg%22%20width%3D%2224%22%20height%3D%2224%22%20transform%3D%22translate(1332%20359.945)%22%20fill%3D%22rgba(255%2C255%2C255%2C0)%22%2F%3E%20%3Cpath%20id%3D%22_2%22%20data-name%3D%22%26gt%3B%22%20d%3D%22M0%2C0%2C5%2C5%2C0%2C10%22%20transform%3D%22translate(1348.903%20370.445)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%237347a8%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.8%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}

[data-state-accordion="active"] .js-accordionTrigger[data-state-trigger=active] .coordinate-detail__set-item-title-inner::after {
  rotate: .5turn;
}

.coordinate-detail__set-item-detail-wrapper {
  --contents-gap: .625rem;

}

.coordinate-detail__set-item-detail-inner {
  display: grid;
  grid-template-areas: "set-item-image set-item-information" "set-item-image set-item-button";
  grid-template-columns: 31.74% 1fr;
  column-gap: 4.76%;

  margin-bottom: .625rem;
}
@media (min-width: 768px) {
  .coordinate-detail__set-item-detail-inner {
    grid-template-areas: "set-item-image set-item-information set-item-button";
    grid-template-columns: 14.54% 1fr auto;
    align-items: center;
    column-gap: 5.45%;
  }
}

.coordinate-detail__set-item-detail-image-wrapper {
  grid-area: set-item-image;

  position: relative;
}

.coordinate-detail__set-item-detail-image-wrapper--selected {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  width: 100%;
  height: 100%;
  border: solid 2px var(--color-primary);

  opacity: .9;

  pointer-events: none;
}

.coordinate-detail__set-item-detail-image-wrapper--selected::before {
  content: "選択中";

  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;

  width: 100%;
  padding: .25rem;
  background-color: var(--color-primary);

  color: #fff;
  font-size: .625rem;
  font-weight: bold;
  letter-spacing: .2em;
  line-height: 1;
  text-align: center;
}

.coordinate-detail__set-item-detail-information-container {
  grid-area: set-item-information;

  display: flex;
  flex-direction: column;

  gap: var(--contents-gap);
}

.coordinate-detail__set-item-detail-information-container .product-detail__price-wrapper {
  margin: 0;
}
@media (min-width: 768px) {
  .coordinate-detail__set-item-detail-information-container .product-detail__price-wrapper {
    justify-content: flex-start;
  }
}

.coordinate-detail__set-item-select-button {
  grid-area: set-item-button;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.coordinate-detail__set-item-detail-information-container .product-detail__price-wrapper {
  display: flex;
  align-items: center;
  gap: .5625rem;
}

.coordinate-detail__set-item-detail-information-container .product-detail__price-wrapper .product-detail__text--tax {
  margin: 0;
}

.coordinate-detail__set-item-detail-information-container .product-detail__price-wrapper .product-detail__text--price-regular {
  font-size: .9375rem;
}

.coordinate-detail__item-option-wrapper {
  background-color: #fff;
}

.coordinate-detail__item-option-wrapper > * {
  padding: .9375rem;
}

.coordinate-detail__item-option-wrapper > *:not(:last-child),
.coordinate-detail__item-option-wrapper > *:first-child {
  border-bottom: solid 2px #F8F2FA;
}

.coordinate-detail__option-detail-wrapper {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .coordinate-detail__option-detail-wrapper {
    grid-template-columns: 1fr 68%;
    column-gap: 1.9%;
  }
}

.coordinate-detail__option-form-container {
  display: grid;
  gap: .625rem;
}

.coordinate-detail__category-tree {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
@media (min-width: 768px) {
  .coordinate-detail__category-tree {
    gap: .625rem;
  }
}