@charset "UTF-8";

/* パール・カラーストーンの選び方：共通レイアウト */
.selection-page { color: #111; }
.selection-intro { padding: 82px 0 118px; }
.selection-intro h1,
.selection-intro .subpage-intro__title { margin: 0 0 38px; font-family: "Zen Old Mincho", serif; font-size: var(--fs-title-lg); font-weight: 600; line-height: 1.8; text-align: center; }
.selection-page p { font-size: var(--fs-body); line-height: 1.75; }
.selection-page p:not(.subpage-intro__text) { margin: 0; }
.selection-block { padding: 64px 0 88px; }
.selection-heading { margin-bottom: 42px; text-align: center; }
.selection-heading__number { display: block; font-family: "Sterling Display", "Times New Roman", serif;  line-height: 1; }
.selection-heading h2,
.selection-heading__title { width: 88%; margin: 22px auto 0; padding-bottom: 18px; border-bottom: 1px solid #225C8D; font-family: "Zen Old Mincho", serif; font-size: var(--fs-title-lg); font-weight: 500; letter-spacing: .08em; }
.selection-subtitle { margin: 58px 0 20px; color: #225C8D; font-family: "Zen Old Mincho", serif; font-size: 19px; font-weight: 500; text-align: center; }
.selection-subtitle small { display: block; margin-top: 6px; font-family: "Sterling Display", serif; font-size: 12px; font-weight: 400; }
.selection-figure { margin: 24px 0 0; }
.selection-figure img { width: 100%; }
.selection-figure figcaption { margin-top: 16px; font-size: var(--fs-body); line-height: 1.7; }
.selection-button { width: 82%; min-height: 52px; margin: 38px auto 0; }
.selection-note-box { margin-top: 28px; padding: 18px 16px; border: 1px solid #225C8D; border-radius: 12px; }

/* パール */
.pearl-types .selection-figure { margin-top: 58px; }
.pearl-wear-heading { margin: 65px 0 26px; font-size: var(--fs-title-sm); text-align: center; }
.pearl-wear-grid { display: grid; gap: 40px; }
.pearl-wear-grid figure { margin: 0; text-align: center; }
.pearl-wear-grid img { width: 88%; margin: auto; border-radius: 12px; }
.pearl-wear-grid figcaption { margin-top: 14px; font-size: var(--fs-small); }
.pearl-quality { display: grid; gap: 78px; margin-top: 52px; }
.pearl-quality article h3,
.color-quality article h3 { margin: 0 0 24px; color: #225C8D; font-family: "Zen Old Mincho", serif; font-size: 19px; font-weight: 500; text-align: center; }
.pearl-quality article h3 b,
.color-quality article h3 b { display: block; margin-bottom: 7px; font-family: "Sterling Display", serif; font-size: 40px; font-weight: 400; }
.pearl-quality img { width: 100%; }
.pearl-scenes { display: grid; gap: 64px; margin-top: 48px; }
.pearl-scene h3 { margin: 0 0 22px; font-size: var(--fs-title-sm); text-align: center; }
.pearl-scene img { width: 88%; margin: auto; border-radius: 14px; }
.pearl-scene__labels { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; margin-top: 18px; font-size: var(--fs-small); line-height: 1.7; }
.pearl-scene__label { min-width: 62px; padding: 3px 8px; border: 1px solid #aaa; border-radius: 6px; text-align: center; }
.pearl-scene__label--dark { color: #fff; border-color: #000; background: #000; }

/* カラーストーン */
.color-swatches { display: flex; justify-content: center; gap: 8px; margin: 34px 0 36px; }
.colors-selection-page .color-swatches > button[data-color-target] { display: block; flex: 0 0 17px; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 0; appearance: none; cursor: pointer; }
.colors-selection-page .color-swatches > button[data-color-target]:focus-visible { outline: 2px solid #225C8D; outline-offset: 3px; }
.colors-selection-page .color-swatches > button:nth-child(1) { background-color: #c00; }
.colors-selection-page .color-swatches > button:nth-child(2) { background-color: #dda0e6; }
.colors-selection-page .color-swatches > button:nth-child(3) { background-color: #1265b5; }
.colors-selection-page .color-swatches > button:nth-child(4) { background-color: #40915d; }
.colors-selection-page .color-swatches > button:nth-child(5) { background-color: #7840b6; }
.colors-selection-page .color-swatches > button:nth-child(6) { background-color: #fff29b; }
.colors-selection-page .color-swatches > button:nth-child(7) { background-color: #dbe5eb; }
.colors-selection-page .color-swatches > button:nth-child(8) { background-color: #52717e; }
.colors-selection-page .color-swatches > button:nth-child(9) { background-color: #5b4b49; }
.color-slider { position: relative; left: 50%; width: 100vw; max-width: 100vw; margin-top: 46px; margin-left: -50vw; overflow: hidden; }
.color-slider__track { display: flex; gap: 16px; padding-inline: 8%; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.color-slider__track::-webkit-scrollbar { display: none; }
.color-slide { flex: 0 0 84%; text-align: center; scroll-snap-align: center; }
.color-slide h3 { margin: 0 0 4px; font-family: "Zen Old Mincho", serif; font-size: 19px; font-weight: 500; }
.color-slide small { font-family: "Sterling Display", serif; font-size: 11px; }
.color-slide img { width: 100%; margin-top: 26px; }
.color-slide ul { width: 58%; min-height: 72px; margin: 24px auto 0; padding-left: 18px; font-size: var(--fs-small); line-height: 1.8; text-align: left; }
.color-slide .selection-button { margin-top: 34px; }
.color-slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.color-slider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #ddd; }
.color-slider__dot.is-active { background: #225C8D; }
.gem-list { display: grid; margin-top: 46px; }
.gem-item { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 92px; }
.gem-item img { width: 68px; height: 68px; border-radius: 9px; object-fit: cover; }
.gem-item h3 { margin: 0 0 7px; font-size: var(--fs-title-sm); }
.gem-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.gem-tags span { padding: 3px 10px; color: #fff; border-radius: 999px; background: #3987b6; font-size: var(--fs-caption); }
.gem-tags span + span { background: #79acd0; }
.gem-more { color: #397ea9; font-size: var(--fs-body); white-space: nowrap; }
.color-quality { display: grid; gap: 76px; margin-top: 58px; }
.color-quality article img { width: 82%; margin: 0 auto 24px; border-radius: 14px; }
.color-quality article p { padding: 18px 16px; border: 1px solid #2879ad; border-radius: 12px; }
.color-process { margin-top: 54px; }
.color-process h3 { margin-bottom: 30px; font-size: var(--fs-title-sm); text-align: center; }
.color-process img { width: 82%; margin: auto; border-radius: 14px; }
.color-process > p { margin-top: 22px; }
.selection-list-box { margin-top: 22px; padding: 22px 18px; border: 1px solid #2879ad; border-radius: 12px; }
.selection-list-box h4 { margin: 0 0 14px; color: #225C8D; font-family: "Zen Old Mincho", serif; font-size: var(--fs-title-sm); text-align: center; }
.selection-list-box ul { margin: 0; padding-left: 20px; font-size: var(--fs-small); line-height: 1.7; }

/* 誕生石の選び方 */
.birth-selection-page .birthday-month-nav { margin-top: 38px; margin-bottom: 36px; }
.birth-gift-slider { position: relative; left: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; overflow: hidden; }
.birth-gift-slider__track { display: flex; gap: 16px; padding-inline: 7%; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.birth-gift-slider__track::-webkit-scrollbar { display: none; }
.birth-selection-page .birth-gift-slider__track {
  cursor: grab;
  touch-action: pan-x pan-y pinch-zoom;
  scroll-padding-inline: 7%;
}
.birth-selection-page .birth-gift-slider__track.is-dragging,
.birth-selection-page .birth-gift-slider__track.is-bar-scrolling {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}
.birth-selection-page .birth-gift-slide { scroll-snap-align: start; }
.birth-gift-scrollbar {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 86%;
  height: 24px;
  margin: 20px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.birth-gift-scrollbar::-webkit-slider-runnable-track { height: 3px; background: #F7F7F7; }
.birth-gift-scrollbar::-moz-range-track { height: 3px; background: #F7F7F7; }
.birth-gift-scrollbar::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--birth-scroll-thumb, 8.33%);
  height: 3px;
  border: 0;
  border-radius: 0;
  background: #225C8D;
}
.birth-gift-scrollbar::-moz-range-thumb {
  width: var(--birth-scroll-thumb, 8.33%);
  height: 3px;
  border: 0;
  border-radius: 0;
  background: #225C8D;
}
.birth-gift-scrollbar:focus-visible { outline: 1px solid #225C8D; outline-offset: 3px; }
.birth-gift-slide { flex: 0 0 86%; scroll-snap-align: center; }
.birth-gift-slide h3,
.birth-product-month > h3 { margin: 0 0 28px; color: #225C8D; font-family: "Sterling Display", serif; font-size: 30px; font-weight: 400; text-align: center; }
.birth-gift-slide img { width: 100%; }
.birth-gift-table { width: 100%; margin-top: 0; overflow: hidden; border-collapse: separate; border-spacing: 0; border-radius: 12px; font-size: 10px; line-height: 1.25; text-align: center; }
.birth-gift-table th,
.birth-gift-table td { height: 42px; padding: 5px 4px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; vertical-align: middle; }
.birth-gift-table thead th { color: #fff; background: #225C8D; font-weight: 500; }
.birth-gift-table tbody th { width: 33%; color: #fff; background: #6397bf; font-weight: 500; }
.birth-gift-table tbody td { width: 33%; color: #225C8D; background: #f8f4f5; }
.birth-gift-table tbody td:last-child { color: #222; }
.birth-gift-table tr:last-child th,
.birth-gift-table tr:last-child td { border-bottom: 0; }
.birth-gift-table th:last-child,
.birth-gift-table td:last-child { border-right: 0; }
.birth-product-month { padding-top: 54px; scroll-margin-top: 16px; }
.birth-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.birth-product-card { min-width: 0; text-align: center; }
.birth-product-card__label { display: grid; min-height: 34px; margin-bottom: 7px; padding: 4px; color: #225C8D; border: 1px solid #4385ae; border-radius: 999px; font-size: var(--fs-note); font-weight: 600; place-items: center; }
.birth-product-card__body { position: relative; overflow: hidden; aspect-ratio: 165 / 199; border-radius: 12px; background: transparent; }
.birth-product-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.birth-product-card a { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 34px 8px 10px; color: #225C8D; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.96) 60%); font-size: var(--fs-small); font-weight: 600; line-height: 1.5; text-decoration: underline; }

@media (min-width: 768px) {
  .selection-intro { padding-block: 110px 150px; }
  .selection-block { padding-block: 90px 120px; }
  .pearl-wear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pearl-quality, .color-quality { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pearl-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .color-slider { position: static; width: 100%; max-width: none; margin-left: 0; }
  .birth-gift-slider { position: static; width: 100%; max-width: none; margin-left: 0; }
  .birth-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 誕生石の選び方：PCは4枚スライド・2か月ずつの一覧 */
  .birth-selection-page .birth-gift-slider__track {
    gap: 24px;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .birth-selection-page .birth-gift-scrollbar { width: 100%; }
  .birth-selection-page .birth-gift-slide {
    flex: 0 0 calc((100% - 120px) / 4);
    min-width: 0;
  }
  .birth-selection-page .birth-product-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px 48px;
    padding-top: 54px;
  }
  .birth-selection-page .birth-product-month {
    min-width: 0;
    padding-top: 0;
  }
  .birth-selection-page .birth-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  /* パールの選び方：PC版（SPの縦積みは変更しない） */
  .pearl-selection-page .selection-block {
    padding-block: 100px 130px;
  }
  .pearl-selection-page .selection-heading {
    margin-bottom: 48px;
  }
  .pearl-selection-page .selection-heading__title {
    width: 42%;
    margin-top: 14px;
    padding-bottom: 14px;
    font-size: 20px;
  }
  .pearl-selection-page .selection-block p,
  .pearl-selection-page .selection-figure figcaption {
    font-size: 14px;
    line-height: 1.75;
  }

  .pearl-selection-page .pearl-types .selection-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 54px;
  }
  .pearl-selection-page .pearl-types .selection-heading,
  .pearl-selection-page .pearl-types .selection-inner > p,
  .pearl-selection-page .pearl-types .pearl-wear-heading,
  .pearl-selection-page .pearl-types .pearl-wear-grid {
    grid-column: 1 / -1;
  }
  .pearl-selection-page .pearl-types .selection-subtitle {
    grid-row: 3;
    margin: 92px 0 24px;
    font-size: 20px;
  }
  .pearl-selection-page .pearl-types .selection-subtitle:nth-of-type(1) { grid-column: 1; }
  .pearl-selection-page .pearl-types .selection-subtitle:nth-of-type(2) { grid-column: 2; }
  .pearl-selection-page .pearl-types .selection-subtitle:nth-of-type(3) { grid-column: 3; }
  .pearl-selection-page .pearl-types > .selection-inner > .selection-figure {
    grid-row: 4;
    margin: 0;
  }
  .pearl-selection-page .pearl-types > .selection-inner > .selection-figure:nth-of-type(1) { grid-column: 1; }
  .pearl-selection-page .pearl-types > .selection-inner > .selection-figure:nth-of-type(2) { grid-column: 2; }
  .pearl-selection-page .pearl-types > .selection-inner > .selection-figure:nth-of-type(3) { grid-column: 3; }
  .pearl-selection-page .pearl-types > .selection-inner > .selection-figure img {
    aspect-ratio: 1;
    object-fit: contain;
  }
  .pearl-selection-page .pearl-types .pearl-wear-heading {
    margin: 110px 0 48px;
    font-size: 24px;
  }
  .pearl-selection-page .pearl-types .pearl-wear-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 54px;
  }
  .pearl-selection-page .pearl-wear-grid img {
    width: 100%;
  }

  .pearl-selection-page .pearl-size .selection-inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: 70px;
    align-items: center;
  }
  .pearl-selection-page .pearl-size .selection-heading,
  .pearl-selection-page .pearl-size .selection-inner > p,
  .pearl-selection-page .pearl-size .pearl-wear-heading,
  .pearl-selection-page .pearl-size .pearl-wear-grid {
    grid-column: 1 / -1;
  }
  .pearl-selection-page .pearl-size .selection-inner > .selection-figure {
    grid-column: 1;
    margin: 70px 0 0;
  }
  .pearl-selection-page .pearl-size .selection-note-box {
    grid-column: 2;
    margin-top: 70px;
    padding: 30px 34px;
  }
  .pearl-selection-page .pearl-size .pearl-wear-heading {
    margin: 112px 0 54px;
    font-size: 24px;
  }
  .pearl-selection-page .pearl-size .pearl-wear-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 48px 28px;
  }
  .pearl-selection-page .pearl-size .pearl-wear-grid figure {
    grid-column: span 2;
  }
  .pearl-selection-page .pearl-size .pearl-wear-grid figure:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .pearl-selection-page .pearl-size .pearl-wear-grid figure:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .pearl-selection-page .pearl-quality-section .pearl-quality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 90px 54px;
    margin-top: 90px;
  }
  .pearl-selection-page .pearl-quality article h3 {
    margin-bottom: 26px;
    font-size: 18px;
  }
  .pearl-selection-page .pearl-quality article h3 b {
    font-size: 38px;
  }

  /* カラーストーンの選び方：PC版（SPの縦積みは変更しない） */
  .colors-selection-page .color-slider {
    overflow: hidden;
  }
  .colors-selection-page .color-slider__track {
    gap: 24px;
    padding-inline: 0;
    cursor: grab;
  }
  .colors-selection-page .color-slider__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
  }
  .colors-selection-page .color-slide {
    flex: 0 0 calc((100% - 96px) / 4.4);
    scroll-snap-align: start;
  }
  .colors-selection-page .color-slide h3 {
    min-height: 2.8em;
    font-size: 16px;
  }
  .colors-selection-page .color-slide img {
    margin-top: 20px;
  }
  .colors-selection-page .color-slide ul {
    width: 88%;
    min-height: 92px;
    margin-top: 20px;
    font-size: 12px;
  }
  .colors-selection-page .color-slide .selection-button {
    width: 100%;
    min-height: 44px;
    margin-top: 24px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .colors-selection-page .color-quality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 54px;
  }

  .colors-selection-page main > .selection-block:nth-of-type(5) {
    background: #F7F7F7;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .selection-inner {
    max-width: 1100px;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
    grid-template-rows: auto auto auto;
    gap: 26px 72px;
    align-items: start;
    margin-top: 105px;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process h3 {
    grid-column: 1 / -1;
    margin: 0 0 56px;
    font-size: 32px;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process img {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 100%;
    margin: 0;
    border-radius: 18px;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process > p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 16px;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process .selection-list-box {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    padding: 28px 38px;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process:nth-of-type(2) {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process:nth-of-type(2) img {
    grid-column: 2;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process:nth-of-type(2) > p,
  .colors-selection-page main > .selection-block:nth-of-type(5) .color-process:nth-of-type(2) .selection-list-box {
    grid-column: 1;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .selection-list-box h4 {
    font-size: 20px;
  }
  .colors-selection-page main > .selection-block:nth-of-type(5) .selection-list-box ul {
    font-size: 14px;
  }
}

/* 誕生石Select01：PCの画面幅に応じて表示枚数を変更 */
@media (min-width: 768px) and (max-width: 1300px) {
  .birth-selection-page .birth-gift-slide {
    flex-basis: calc((100% - 96px) / 3);
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .birth-selection-page .birth-gift-slide {
    flex-basis: calc((100% - 72px) / 2);
  }
}

/* 統合したPC表示 */
@media (min-width:768px){
  .selection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .selection-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
}