@charset "UTF-8";

.fantasia-shop-main,
.fantasia-shop-main * {
  box-sizing: border-box;
}

.fantasia-shop-main {
  --fantasia-shop-ink: #30282a;
  --fantasia-shop-purple: #592379;
  --fantasia-shop-gold: #dca762;
  --fantasia-shop-line: #cfc9ca;
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--fantasia-shop-ink);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fantasia-shop-main .fantasia-stationery-content-inner{
  margin-top:40px !important;
}
.fantasia-shop-container {
  width: min(1400px, calc(100% - 64px));
  margin-inline: auto;
}

.fantasia-shop-introduction {
  padding-block: clamp(88px, 10.5vw, 200px) 0;
}

.fantasia-shop-introduction__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(44px, 5vw, 76px);
  align-items: start;
}

.fantasia-shop-brand {
  width: min(100%, 590px);
  margin: 18px auto 0;
}

.fantasia-shop-brand__logo,
.fantasia-shop-brand__rule,
.fantasia-shop-locations__hero,
.fantasia-shop-location-card__icon,
.fantasia-shop-location-card__photo,
.fantasia-shop-notice__icon,
.fantasia-shop-gallery-sales__art {
  display: block;
  max-width: 100%;
  height: auto;
}

.fantasia-shop-brand__logo {
  width: 100%;
}

.fantasia-shop-brand__rule {
  width: 100%;
  margin-top: 26px;
}

.fantasia-shop-catch {
  margin: 38px 0 23px;
  color: var(--fantasia-shop-purple);
  font-size: clamp(25px, 2.05vw, 31px);
  font-weight: 700;
  letter-spacing: .13em;
  text-align: center;
}

.fantasia-shop-description {
  font-size: clamp(14px, 1.12vw, 16px);
  font-weight: 600;
  line-height: 1.88;
}

.fantasia-shop-description p {
  margin: 0;
}

.fantasia-shop-locations__hero {
  width: 100%;
}

.fantasia-shop-locations__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.fantasia-shop-location-card {
  display: flex;
  min-width: 0;
  min-height: 392px;
  flex-direction: column;
  padding: 25px 18px 17px;
  overflow: hidden;
  border: 1px solid var(--fantasia-shop-line);
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(250, 238, 245, .5), #fff 24%);
}

.fantasia-shop-location-card__heading {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 17px;
  align-items: start;
}

.fantasia-shop-location-card__icon {
  width: 67px;
}

.fantasia-shop-location-card__copy {
  padding-top: 1px;
  text-align: left;
}

.fantasia-shop-location-card__title {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

.fantasia-shop-location-card__text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
}

.fantasia-shop-location-card__link {
  margin: 11px auto 17px;
  color: var(--fantasia-shop-ink);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}

.fantasia-shop-location-card__link:hover,
.fantasia-shop-location-card__link:focus-visible {
  color: var(--fantasia-shop-purple);
  text-decoration: underline;
}

.fantasia-shop-location-card__link:focus-visible {
  border-radius: 3px;
  outline: 3px solid rgba(89, 35, 121, .25);
  outline-offset: 3px;
}

.fantasia-shop-location-card__photo {
  width: 100%;
  margin-top: auto;
  border-radius: 7px;
}

.fantasia-shop-location-card--online .fantasia-shop-location-card__photo {
  margin-bottom: 1px;
}

/* 2026-10：写真を webp 対応のため <picture> で包んだ。下端に寄せる指定を包みにも当てる */
.fantasia-shop-location-card > picture {
  display: block;
  margin-top: auto;
}

.fantasia-shop-locations picture {
  display: block;
}

.fantasia-shop-gallery-sales {
  padding-block: clamp(40px, 5.5vw, 55px) clamp(46px, 5vw, 45px);
}

.fantasia-shop-gallery-sales__grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(52px, 6.5vw, 96px);
  align-items: start;
}

.fantasia-shop-section-title {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 13px;
  font-size: clamp(24px, 2.15vw, 31px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
}

.fantasia-shop-section-title__diamond {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  transform: rotate(45deg);
  background: #3a3032;
}

.fantasia-shop-gallery-sales__description {
  max-width: 620px;
  margin: 0;
  font-size: clamp(15px, 1.18vw, 17px);
  font-weight: 600;
  line-height: 1.85;
}

.fantasia-shop-notice {
  display: flex;
  width: min(100%, 590px);
  min-height: 96px;
  gap: 24px;
  align-items: center;
  margin-top: 78px;
  padding: 19px 30px;
  border: 1px solid #f2e4d3;
  border-radius: 10px;
  background: linear-gradient(115deg, #fff8ee, #fffdf9);
}

.fantasia-shop-notice__icon {
  width: 56px;
  flex: 0 0 56px;
}

.fantasia-shop-notice__text {
  margin: 0;
  font-size: clamp(14px, 1.17vw, 17px);
  font-weight: 600;
  line-height: 1.75;
}

.fantasia-shop-gallery-sales__conditions {
  display: grid;
  grid-template-columns: minmax(0, 510px) minmax(145px, 205px);
  gap: 32px;
  align-items: end;
  padding-top: 1px;
}

.fantasia-shop-conditions-table-wrap {
  min-width: 0;
}

.fantasia-shop-conditions-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #beb9bb;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.fantasia-shop-conditions-table__caption {
  padding: 0 0 7px 14px;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}

.fantasia-shop-conditions-table__header,
.fantasia-shop-conditions-table__label,
.fantasia-shop-conditions-table__value {
  height: 42px;
  padding: 6px 10px;
  border-right: 1px solid #c9c5c6;
  border-bottom: 1px solid #c9c5c6;
  vertical-align: middle;
}

.fantasia-shop-conditions-table__header {
  background: linear-gradient(#fbf2f8, #f6edf4);
  font-weight: 700;
}

.fantasia-shop-conditions-table__header:first-child,
.fantasia-shop-conditions-table__label {
  width: 36.5%;
}

.fantasia-shop-conditions-table__header:last-child,
.fantasia-shop-conditions-table__value {
  border-right: 0;
}

.fantasia-shop-conditions-table__body .fantasia-shop-conditions-table__row:last-child .fantasia-shop-conditions-table__label,
.fantasia-shop-conditions-table__body .fantasia-shop-conditions-table__row:last-child .fantasia-shop-conditions-table__value {
  border-bottom: 0;
}

.fantasia-shop-conditions-table__label {
  font-weight: 600;
}

.fantasia-shop-conditions-table__value {
  white-space: nowrap;
}

.fantasia-shop-gallery-sales__art {
  width: 205px;
  justify-self: end;
}

.fantasia-shop-js-ready .fantasia-shop-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}

.fantasia-shop-js-ready .fantasia-shop-reveal.fantasia-shop-is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1180px) {
  .fantasia-shop-introduction__grid {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: 38px;
  }

  .fantasia-shop-location-card {
    min-height: 350px;
    padding-inline: 14px;
  }

  .fantasia-shop-location-card__heading {
    grid-template-columns: 57px minmax(0, 1fr);
    gap: 12px;
  }

  .fantasia-shop-location-card__icon {
    width: 55px;
  }

  .fantasia-shop-location-card__title {
    font-size: 16px;
  }

  .fantasia-shop-location-card__text {
    font-size: 13px;
  }

  .fantasia-shop-gallery-sales__grid {
    gap: 44px;
  }

  .fantasia-shop-gallery-sales__conditions {
    grid-template-columns: minmax(0, 1fr) 145px;
    gap: 20px;
  }

  .fantasia-shop-gallery-sales__art {
    width: 145px;
  }
}

@media (max-width: 900px) {
  .fantasia-shop-container {
    width: min(720px, calc(100% - 48px));
  }

  .fantasia-shop-introduction {
    padding-top: 72px;
  }

  .fantasia-shop-introduction__grid,
  .fantasia-shop-gallery-sales__grid {
    grid-template-columns: 1fr;
  }

  .fantasia-shop-introduction__grid {
    gap: 62px;
  }

  .fantasia-shop-brand {
    max-width: 590px;
  }

  .fantasia-shop-description {
    font-size: 15px;
  }

  .fantasia-shop-location-card {
    min-height: 410px;
    padding: 26px 20px 18px;
  }

  .fantasia-shop-location-card__heading {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
  }

  .fantasia-shop-location-card__icon {
    width: 68px;
  }

  .fantasia-shop-location-card__title {
    font-size: 19px;
  }

  .fantasia-shop-location-card__text {
    font-size: 15px;
  }

  .fantasia-shop-gallery-sales {
    padding-top: 105px;
  }

  .fantasia-shop-gallery-sales__grid {
    gap: 66px;
  }

  .fantasia-shop-notice {
    margin-top: 48px;
  }

  .fantasia-shop-gallery-sales__conditions {
    grid-template-columns: minmax(0, 1fr) 190px;
  }

  .fantasia-shop-gallery-sales__art {
    width: 190px;
  }
}

@media (max-width: 620px) {
  .fantasia-shop-main {
    line-height: 1.75;
  }

  .fantasia-shop-container {
    width: calc(100% - 32px);
  }

  .fantasia-shop-introduction {
    padding-top: 48px;
  }

  .fantasia-shop-brand {
    width: 95%;
    margin-top: 0;
  }

  .fantasia-shop-brand__rule {
    margin-top: 18px;
  }

  .fantasia-shop-catch {
    margin: 30px 0 20px;
    font-size: 22px;
    letter-spacing: .08em;
  }

  .fantasia-shop-description {
    font-size: 14px;
    line-height: 1.9;
  }

  .fantasia-shop-introduction__grid {
    gap: 48px;
  }

  .fantasia-shop-locations__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }

  .fantasia-shop-location-card {
    min-height: 0;
    padding: 24px 18px 16px;
  }

  .fantasia-shop-location-card__heading {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .fantasia-shop-location-card__icon {
    width: 62px;
  }

  .fantasia-shop-location-card__photo {
    margin-top: 22px;
  }

  .fantasia-shop-location-card__link {
    margin-block: 14px 2px;
    font-size: 16px;
  }

  .fantasia-shop-gallery-sales {
    padding-block: 88px 76px;
  }

  .fantasia-shop-section-title {
    gap: 10px;
    align-items: flex-start;
    font-size: 21px;
  }

  .fantasia-shop-section-title__diamond {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
    margin-top: 8px;
  }

  .fantasia-shop-gallery-sales__description {
    font-size: 14px;
  }

  .fantasia-shop-notice {
    gap: 15px;
    margin-top: 38px;
    padding: 17px 18px;
  }

  .fantasia-shop-notice__icon {
    width: 46px;
    flex-basis: 46px;
  }

  .fantasia-shop-notice__text {
    font-size: 13px;
    line-height: 1.65;
  }

  .fantasia-shop-notice__break {
    display: none;
  }

  .fantasia-shop-gallery-sales__conditions {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }

  .fantasia-shop-conditions-table {
    table-layout: fixed;
    font-size: 13px;
  }

  .fantasia-shop-conditions-table__caption {
    font-size: 15px;
  }

  .fantasia-shop-conditions-table__header,
  .fantasia-shop-conditions-table__label,
  .fantasia-shop-conditions-table__value {
    height: 42px;
    padding-inline: 5px;
  }

  .fantasia-shop-conditions-table__value {
    white-space: normal;
  }

  .fantasia-shop-gallery-sales__art {
    width: min(55%, 210px);
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fantasia-shop-main .fantasia-shop-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*------------------------------------------------------------------
2026-10 完全版カンプ（KF_official_SHOP_260928）
棚レンタル / 商品が売れた場合・特典・制度まとめ / DISPLAY. SELL. CONNECT.
このページの既存部分（太洋堂側で作成）は 1440px 基準の固定値で組まれているため、
追加部分も同じ基準（カンプ@2x ÷ 2）で揃える
--------------------------------------------------------------------*/

/* 区切り罫線（カンプ 1351 幅・#6b656e 50%） */
.fantasia-shop-rule {
  height: 1px;
  background: rgb(107 101 110 / 50%);
}

/* 罫線 → 見出し 44〜73 / 最後の要素 → 罫線 約 80（カンプ@2x ÷ 2） */
.fantasia-shop-block {
  padding-block: clamp(32px, 3.6vw, 52px) clamp(44px, 5.2vw, 76px);
}

.fantasia-shop-gallery-sales {
  padding-bottom: clamp(48px, 5.4vw, 78px);
}

.fantasia-shop-section-title__sub {
  margin-left: 1.6em;
  font-size: 0.75em;
  font-weight: 500;
}

.fantasia-shop-text,
.fantasia-shop-note {
  margin: 0;
  font-size: clamp(15px, 1.125vw, 16.2px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.74;
}

.fantasia-shop-note {
  margin-top: 1.1em;
  font-size: clamp(12px, 0.903vw, 13px);
  line-height: 2.17;
}

/* 表（共通）：角丸 10・ヘッダーは薄紫グラデ（既存の販売条件表と同じ作法） */
.fantasia-shop-table table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #beb9bb;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: #fff;
  font-size: clamp(14px, 1.222vw, 17.6px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-align: center;
}

.fantasia-shop-table caption {
  padding: 0 0 6px 6px;
  font-size: clamp(14px, 1.222vw, 17.6px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: left;
}

.fantasia-shop-table th,
.fantasia-shop-table td {
  height: clamp(36px, 2.833vw, 40.8px);
  padding: 4px 10px;
  border-right: 1px solid #c9c5c6;
  border-bottom: 1px solid #c9c5c6;
  font-weight: 500;
  vertical-align: middle;
}

.fantasia-shop-table tr > :last-child {
  border-right: 0;
}

.fantasia-shop-table tbody tr:last-child > * {
  border-bottom: 0;
}

.fantasia-shop-table thead th {
  background: linear-gradient(#fbf2f8, #f6edf4);
}

/* 棚レンタル：左に本文と料金表（537）、右に棚の写真（410）と段番号 */
.fantasia-shop-section-title + .fantasia-shop-rental__grid {
  margin-top: 4px;
}

.fantasia-shop-rental__grid {
  display: grid;
  grid-template-columns: minmax(0, 676px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

.fantasia-shop-table--rent {
  width: min(100%, 537px);
  margin-top: clamp(24px, 2.8vw, 40px);
}

.fantasia-shop-table--rent th:nth-child(1) { width: 34.8%; }
.fantasia-shop-table--rent th:nth-child(2) { width: 29%; }

.fantasia-shop-shelf {
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  align-items: stretch;
  margin: 0;
  padding-left: 4px;
}

.fantasia-shop-shelf__nums {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 2.4% 0 4.6%;
  list-style: none;
  font-size: clamp(14px, 1.222vw, 17.6px);
  font-weight: 500;
  line-height: 1;
}

.fantasia-shop-shelf picture {
  display: block;
  width: min(100%, 410px);
}

.fantasia-shop-shelf__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* 薄いクリーム地の囲み（既存 .fantasia-shop-notice と同じ表現） */
.fantasia-shop-box {
  border: 1px solid #f2e4d3;
  border-radius: 10px;
  background: linear-gradient(115deg, #fff8ee, #fffdf9);
}

.fantasia-shop-box--period {
  width: min(100%, 938px);
  margin-top: clamp(20px, 2.4vw, 34px);
  padding: clamp(18px, 1.7vw, 24px) clamp(20px, 2.4vw, 34px);
}

/* 商品が売れた場合：左に本文、右に例の囲み（623） */
.fantasia-shop-sold__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 675px);
  gap: clamp(28px, 3.6vw, 52px);
  align-items: start;
}

.fantasia-shop-sold__grid--benefit {
  align-items: end;
  margin-top: clamp(36px, 4.4vw, 60px);
}

.fantasia-shop-box--example {
  position: relative;
  margin-top: clamp(0px, 3vw, 44px);
  padding: clamp(18px, 1.7vw, 24px) clamp(120px, 9vw, 130px) clamp(18px, 1.7vw, 24px) clamp(20px, 2.2vw, 31px);
}

.fantasia-shop-box__illust {
  position: absolute;
  right: 3.5%;
  bottom: 2px;
  width: clamp(80px, 7vw, 101px);
  height: auto;
}

.fantasia-shop-benefit__body {
  display: flex;
  gap: clamp(12px, 1.4vw, 21px);
  align-items: flex-start;
  margin-top: 8px;
  padding-left: clamp(8px, 1.1vw, 16px);
}

.fantasia-shop-benefit__icons {
  display: flex;
  flex: 0 0 clamp(54px, 4.9vw, 71px);
  flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
  padding-top: 2px;
}

.fantasia-shop-benefit__icons img {
  display: block;
  width: 100%;
  height: auto;
}

.fantasia-shop-accent {
  color: #b30000;
  font-weight: 700;
}

.fantasia-shop-table--summary th[scope="row"] {
  padding-left: 0.6em;
  font-size: 0.91em;
  text-align: left;
}

.fantasia-shop-table--summary thead th:first-child {
  text-align: left;
  padding-left: 0.6em;
}

/* DISPLAY. SELL. CONNECT.：見出しの左右に金の飾り罫、下に 2 つのフロア案内 */
.fantasia-shop-connect__title {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: clamp(24px, 2.444vw, 35.2px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
}

.fantasia-shop-connect__title::before,
.fantasia-shop-connect__title::after {
  flex: 0 1 265px;
  height: 24px;
  background: url("../img/shop/connect_rule_l.png") right center / contain no-repeat;
  background-image: image-set(url("../img/shop/connect_rule_l.webp") type("image/webp"), url("../img/shop/connect_rule_l.png") type("image/png"));
  content: "";
}

.fantasia-shop-connect__title::after {
  height: 15px;
  background-image: url("../img/shop/connect_rule_r.png");
  background-image: image-set(url("../img/shop/connect_rule_r.webp") type("image/webp"), url("../img/shop/connect_rule_r.png") type("image/png"));
  background-position: left center;
}

.fantasia-shop-connect__lead {
  margin: clamp(10px, 1.1vw, 16px) 0 0;
  font-size: clamp(17px, 1.944vw, 28px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}

.fantasia-shop-connect__lead span + span {
  margin-left: 1.5em;
}

.fantasia-shop-floors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 19px);
  align-items: center;
  margin-top: clamp(20px, 2.2vw, 30px);
}

.fantasia-shop-floors__arrow {
  font-size: clamp(18px, 1.944vw, 28px);
  letter-spacing: 0.05em;
}

/* 背景（クリーム地 → 写真のグラデーション）は 1 枚画像。文字は HTML で重ねる */
.fantasia-shop-floor {
  position: relative;
  display: block;
  aspect-ratio: 1246 / 398;
  color: inherit;
  text-decoration: none;
}

.fantasia-shop-floor__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fantasia-shop-floor picture {
  position: absolute;
  inset: 0;
}

.fantasia-shop-floor__body {
  position: relative;
  display: block;
  width: 50%;
  padding: 3.4% 0 0 4.5%;
}

.fantasia-shop-floor__title {
  display: flex;
  gap: 0.27em;
  align-items: center;
  color: #5c298b;
  font-size: clamp(18px, 2.083vw, 30px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.fantasia-shop-floor__num {
  display: inline-flex;
  width: 1.73em;
  height: 1.73em;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5c298b;
  color: #fff;
  font-weight: 500;
}

.fantasia-shop-floor__text {
  display: block;
  margin-top: 0.5em;
  font-size: clamp(12px, 1.125vw, 16.2px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.74;
}

.fantasia-shop-floor--link {
  transition: filter 180ms ease;
}

.fantasia-shop-floor--link:hover,
.fantasia-shop-floor--link:focus-visible {
  filter: brightness(1.05) drop-shadow(0 3px 3px rgb(84 55 29 / 22%));
  outline: none;
}

.fantasia-shop-connect__text {
  margin: clamp(24px, 2.8vw, 40px) 0 0;
  font-size: clamp(14px, 1.125vw, 16.2px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.74;
  text-align: center;
}

@media (max-width: 1180px) {
  .fantasia-shop-rental__grid,
  .fantasia-shop-sold__grid {
    grid-template-columns: 1fr;
  }

  .fantasia-shop-shelf {
    justify-content: center;
  }

  .fantasia-shop-box--example {
    margin-top: 0;
  }

  .fantasia-shop-floors {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .fantasia-shop-floor {
    width: min(100%, 640px);
  }

  .fantasia-shop-floors__arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 620px) {
  .fantasia-shop-section-title__sub {
    display: block;
    margin: 4px 0 0;
  }

  .fantasia-shop-section-title:has(.fantasia-shop-section-title__sub) {
    flex-wrap: wrap;
  }

  .fantasia-shop-table table {
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .fantasia-shop-table th,
  .fantasia-shop-table td {
    padding: 4px 6px;
  }

  .fantasia-shop-table--summary th[scope="row"] {
    white-space: normal;
  }

  .fantasia-shop-box--example {
    padding-right: 20px;
    padding-bottom: 110px;
  }

  .fantasia-shop-connect__title::before,
  .fantasia-shop-connect__title::after {
    display: none;
  }

  .fantasia-shop-connect__lead span {
    display: block;
  }

  .fantasia-shop-connect__lead span + span {
    margin-left: 0;
  }

  /* 写真の上に文字が乗ると読めないため、狭い画面では文字の地を残して写真を下にずらす */
  .fantasia-shop-floor {
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 10px;
    background: #fff8f0;
  }

  .fantasia-shop-floor picture {
    inset: auto 0 0 auto;
    width: 100%;
    height: 100%;
    opacity: 0.35;
  }

  .fantasia-shop-floor__bg {
    object-fit: cover;
    object-position: right center;
  }

  .fantasia-shop-floor__body {
    width: auto;
    padding: 16px 18px 18px;
  }

  .fantasia-shop-connect__text {
    text-align: left;
  }
}

/* 2026-10 完全版カンプ：店舗カード
   ・カード幅はカンプどおり左右で違う（581 : 669 @2x）
   ・枠は細い灰色の線（下辺だけ濃い）＋白地（ピンクのグラデーションは無し）
   ・角丸 16@2x = 8px
   ・写真は透明な余白を切り落とした画像に替え、カード幅に対する比で置く（街並み 85.4% / 端末 86.1%） */
@media (min-width: 621px) {
  .fantasia-shop-locations__cards {
    grid-template-columns: minmax(0, 581fr) minmax(0, 669fr);
  }
}

/* 枠と背景は CSS の線ではなく、カンプのカード（手描き風の枠・紙のような淡いむら・左上の紙片）を
   画像にして 9 分割で伸ばす。文字・アイコン・写真はカンプから消して周囲の色で埋めてある。
   切り出し 40px（@2x）を 20px で描くので、角と枠の太さはカンプと同じ倍率 */
.fantasia-shop-location-card {
  padding: 6px 0 0;
  border: 20px solid transparent;
  border-image: url("../img/shop/card_bg.png") 40 fill / 20px stretch;
  border-image-source: image-set(url("../img/shop/card_bg.webp") type("image/webp"), url("../img/shop/card_bg.png") type("image/png"));
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* 枠（20px）がこれまでの 1px 線＋余白の代わりになるので、写真は内側いっぱいに近い幅で置く */

/* % はカードの内側（左右 padding 18px を除いた幅）に対する値。カード幅に対してはカンプの 85.4% / 86.1% */
.fantasia-shop-location-card > picture {
  width: 98.5%;
  margin-inline: auto;
}

.fantasia-shop-location-card--online > picture {
  width: 97%;
}

.fantasia-shop-location-card > picture .fantasia-shop-location-card__photo {
  width: 100%;
  height: auto;
}

/* 2026-10 完全版カンプ：販売条件表（カンプ 913×574@2x → 456.5×287 / 字 35.2@2x=17.6px・字送り 0.1em / 行 41px）
   イーゼルの絵は 205px・表との間 44px */
/* 左右 2 列で表（456.5）＋イーゼル（205）＋間（44）が右の列に収まるのは 1422px 以上（左列 566＋間 87＋余白 64） */
@media (min-width: 1422px) {
  /* 表の左端はカンプ x=685（1440 時）。左の説明文の列 566・間 87 */
  .fantasia-shop-gallery-sales__grid {
    grid-template-columns: minmax(0, 566px) minmax(0, 1fr);
    gap: 87px;
  }

  .fantasia-shop-gallery-sales__conditions {
    grid-template-columns: minmax(0, 456.5px) 205px;
    gap: 44px;
    justify-content: start;
  }
}

.fantasia-shop-conditions-table {
  border-color: #bfb3c2;
  background: #fff;
  font-size: clamp(14px, 1.222vw, 17.6px);
  letter-spacing: 0.1em;
}

.fantasia-shop-conditions-table__caption {
  font-size: clamp(14px, 1.222vw, 17.6px);
  letter-spacing: 0.1em;
}

.fantasia-shop-conditions-table__header,
.fantasia-shop-conditions-table__label,
.fantasia-shop-conditions-table__value {
  height: 41px;
  border-color: #b3b0b6;
}

/* 本文の行は白地（カンプ実測 #fff）。見出し行の下の線だけ淡い */
.fantasia-shop-conditions-table__body .fantasia-shop-conditions-table__label,
.fantasia-shop-conditions-table__body .fantasia-shop-conditions-table__value {
  background: #fff;
}

.fantasia-shop-conditions-table__header {
  border-bottom-color: #d0c8cf;
}

.fantasia-shop-conditions-table__header {
  height: 40px;
  background: #f2ebf4;
  font-weight: 600;
}

.fantasia-shop-conditions-table__header:first-child,
.fantasia-shop-conditions-table__label {
  width: 37.5%;
}

/* 2026-10 完全版カンプ：取扱アイテム（京彩堂だけに当てる。文具屋ページの同じ部品は変えない）
   写真は PSD の書き出し（縁がふわっと溶ける加工込み）に替え、枠線・影は付けない。
   名前 24.65px / 英字は Snell Roundhand 21px #a27654（Mac 以外では筆記体の代替書体）
   カンプ：写真 200px・間 30px・写真 → 名前 14px・名前 → 英字 9.5px */
.fantasia-shop-main .fantasia-stationery-product-grid {
  gap: 30px;
}

.fantasia-shop-main .fantasia-stationery-product-card picture {
  display: block;
}

.fantasia-shop-main .fantasia-stationery-product-image {
  height: auto;
  object-fit: contain;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.fantasia-shop-main .fantasia-stationery-product-name {
  margin-top: 14px;
  font-size: clamp(17px, 1.712vw, 24.65px);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.fantasia-shop-main .fantasia-stationery-product-en {
  margin-top: 6px;
  color: #a27654;
  font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
  font-size: clamp(15px, 1.465vw, 21.1px);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .fantasia-shop-main .fantasia-stationery-product-grid {
    gap: 28px 18px;
  }
}

@media (max-width: 620px) {
  .fantasia-shop-main .fantasia-stationery-product-grid {
    gap: 24px 12px;
  }
}

/* 表の角丸：セルの背景は table の overflow で切れないため、四隅のセルにも同じ角丸を当てる */
.fantasia-shop-conditions-table__header:first-child { border-top-left-radius: 9px; }
.fantasia-shop-conditions-table__header:last-child { border-top-right-radius: 9px; }
.fantasia-shop-conditions-table__body .fantasia-shop-conditions-table__row:last-child .fantasia-shop-conditions-table__label { border-bottom-left-radius: 9px; }
.fantasia-shop-conditions-table__body .fantasia-shop-conditions-table__row:last-child .fantasia-shop-conditions-table__value { border-bottom-right-radius: 9px; }

.fantasia-shop-table thead tr > :first-child { border-top-left-radius: 9px; }
.fantasia-shop-table thead tr > :last-child { border-top-right-radius: 9px; }
.fantasia-shop-table tbody tr:last-child > :first-child { border-bottom-left-radius: 9px; }
.fantasia-shop-table tbody tr:last-child > :last-child { border-bottom-right-radius: 9px; }

/* 2026-10 完全版カンプ：薄いクリーム地の囲み（販売時間の注記 / 利用期間 / 計算例）
   塗りと線ではなく、カンプの紙（淡い折り目とむら・やわらかい縁）を画像にして 9 分割で伸ばす。
   PSD block3 の box（1246×248@2x）。切り出し 30px（@2x）を 15px で描く。
   枠（15px）が内側の余白の一部になるので、各ボックスの padding はそのぶん減らす */
.fantasia-shop-notice,
.fantasia-shop-box {
  border: 15px solid transparent;
  border-image: url("../img/shop/box_paper.png") 30 fill / 15px stretch;
  border-image-source: image-set(url("../img/shop/box_paper.webp") type("image/webp"), url("../img/shop/box_paper.png") type("image/png"));
  border-radius: 0;
  background: none;
}

.fantasia-shop-notice {
  padding: 5px 16px;
}

.fantasia-shop-box--period {
  padding: clamp(4px, 0.7vw, 10px) clamp(6px, 1.4vw, 20px);
}

.fantasia-shop-box--example {
  padding: clamp(4px, 0.7vw, 10px) clamp(106px, 8vw, 116px) clamp(4px, 0.7vw, 10px) clamp(6px, 1.2vw, 17px);
}

@media (max-width: 620px) {
  .fantasia-shop-notice {
    padding: 3px 4px;
  }

  .fantasia-shop-box--example {
    padding-right: 6px;
    padding-bottom: 96px;
  }
}

/* 2026-10 完全版カンプ：◆ 見出し（全セクション共通）と 1F 出展者の本文
   見出し 56.3@2x = 28.15px・Demi・字送り 0.1em / ◆ は 19.5px 幅（一辺 14px の正方形を 45°）・文字まで 15.5px
   本文 32.4@2x = 16.2px・行送り 28.15px・字送り 0.03em */
.fantasia-shop-section-title {
  gap: 15.5px;
  font-size: clamp(20px, 1.955vw, 28.15px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.fantasia-shop-section-title__diamond {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-inline: 2.5px;
}

.fantasia-shop-gallery-sales__description {
  font-size: clamp(15px, 1.125vw, 16.2px);
  letter-spacing: 0.03em;
  line-height: 1.738;
}

/* 見出しの字面上端 → 囲みの上端 203px / 囲みの高さ 89px */
.fantasia-shop-notice {
  min-height: 89px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-block: 0;
}

/* 左の列はカンプ x=44.5 から（コンテナ左端 32 より 12.5px 内側）。本文の幅 553・囲み 543（x=48） */
@media (min-width: 1422px) {
  .fantasia-shop-gallery-sales__overview {
    padding-left: 12.5px;
  }

  .fantasia-shop-gallery-sales__description {
    max-width: 553px;
  }

  .fantasia-shop-notice {
    width: 543px;
    margin-left: 3.5px;
  }
}

/* 2026-10 完全版カンプ：キャッチ「アートを、日常のなかへ。」の前後
   飾り罫 → 字面 49.5px / 字面 → 本文 26.5px（カンプ実測）。従来は約 10px・22px 広かった */
@media (min-width: 621px) {
  .fantasia-shop-catch {
    margin: 28px 0 9.5px;
    line-height: 1.5;
  }
}

/* 利用期間の囲み：カンプは 1 行に収まる「※但し、延長のご相談は…予めご了承ください。」が、
   Mac のヒラギノ表示だと字幅が広く「さい。」だけ次の行に落ちる。
   囲みの幅（938px）は変えず、この囲みだけ字送りを 0.03em → 0 にして収める */
.fantasia-shop-box--period .fantasia-shop-text {
  letter-spacing: 0;
}

/* 2026-10：ヘッダーと中身の間隔
   ・PC：カンプはヘッダー下端 → 写真の上端 49px（1440 時）。従来は 29px で狭かった
     ヘッダー下端 ≒ 8.47vw（top 0.8vw + 高さ 7.67vw）に 3.4vw を足す → 1440 で 171px / 2046 で 243px
   ・980px 以下：ヘッダーの高さの式が変わり、従来の 72px / 48px だとロゴの「Art Stationery Shop」が
     ヘッダーの下に隠れていた（公開中のページでも同じ）。ヘッダー下端（6px + clamp(70px, 11vw, 86px)）から 24px あける */
.fantasia-shop-introduction {
  padding-top: clamp(100px, 11.87vw, 243px);
}

@media (max-width: 980px) {
  .fantasia-shop-introduction {
    padding-top: calc(6px + clamp(70px, 11vw, 86px) + 24px);
  }
}

/* 取扱アイテムの英字 → 次の「◆ 1F ギャラリー出展者の商品販売」：カンプ 78px（字面どうし）。
   共通部品の下余白 70px＋セクションの上余白 55px で約 137px あいていたため、京彩堂だけ詰める */
@media (min-width: 621px) {
  .fantasia-shop-main .fantasia-stationery-product-grid {
    margin-bottom: 11px;
  }
}

/* 1F・2F の案内：Mac のヒラギノ表示だと説明文の折り返しがカンプより 1〜2 行増え、
   文字がカードの下端に付いていた（2F は枠からはみ出し気味）。
   ・文字の幅をカンプのテキストボックス（カード幅の約 52%）まで広げる
   ・下にも上と同じだけの余白を確保し、文字が増えたらカードが伸びる（2 枚とも同じ高さにそろえる）
   ・伸びたときに背景の写真がゆがまないよう、右寄せで切り抜き表示にする */
@media (min-width: 1181px) {
  .fantasia-shop-floors {
    align-items: stretch;
  }

  .fantasia-shop-floors__arrow {
    align-self: center;
  }

  /* 高さを揃える（stretch）と縦横比から幅が逆算されて列からはみ出すため、幅は列いっぱいに固定 */
  .fantasia-shop-floor {
    width: 100%;
  }

  .fantasia-shop-floor__body {
    width: 54%;
    padding-bottom: 3.4%;
  }

  .fantasia-shop-floor__bg {
    object-fit: cover;
    object-position: right center;
  }
}

/* 縦に並ぶ幅（621〜1180px）も、文字が増えたときに下の余白を確保して写真をゆがませない */
@media (min-width: 621px) and (max-width: 1180px) {
  .fantasia-shop-floor__body {
    width: 54%;
    padding-bottom: 3.4%;
  }

  .fantasia-shop-floor__bg {
    object-fit: cover;
    object-position: right center;
  }
}

/* 案内カードの角丸（カンプ 20@2x = 10px）。背景画像の角丸は画像に焼き込みだが、
   カードが伸びて写真を切り抜き表示（cover）にすると角が切れて四角くなるため、包みの側で丸める */
@media (min-width: 621px) {
  .fantasia-shop-floor picture {
    overflow: hidden;
    border-radius: 10px;
  }
}

/* 1 列になる幅（900px 以下）：店内の写真を「京彩堂」のロゴの直後に置く
   （従来は説明文の下・店舗カードの上にあり、ページの最初に写真が出てこなかった）。
   左右の 2 つの箱を display: contents で外し、ロゴ → 写真 → キャッチ → 説明文 → 店舗カードの順に並べる */
@media (max-width: 900px) {
  .fantasia-shop-introduction__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .fantasia-shop-introduction__copy,
  .fantasia-shop-locations {
    display: contents;
  }

  .fantasia-shop-brand { order: 1; }
  .fantasia-shop-locations > picture { order: 2; margin-top: 20px; }
  .fantasia-shop-catch { order: 3; }
  .fantasia-shop-description { order: 4; }
  .fantasia-shop-locations__cards { order: 5; margin-top: 40px; }
}

/* 取扱アイテム：共通部品の幅は min(1330px, 100%) で、1330px を下回る画面では写真が画面の端に付いていた。
   京彩堂の他のブロック（.fantasia-shop-container）と同じ左右の余白をとる */
.fantasia-shop-main .fantasia-stationery-content-inner {
  width: min(1330px, calc(100% - 64px));
}

@media (max-width: 900px) {
  .fantasia-shop-main .fantasia-stationery-content-inner {
    width: min(720px, calc(100% - 48px));
  }
}

@media (max-width: 620px) {
  .fantasia-shop-main .fantasia-stationery-content-inner {
    width: calc(100% - 32px);
  }
}

/* 取扱アイテム → 「1F ギャラリー出展者の商品販売」の間（狭い画面）
   既存の上余白 105px（≤900）/ 88px（≤620）に、取扱アイテムの下余白が重なって 140px 前後あいていた。
   PC（字面どうし 80px）に近い 60px 前後に詰める */
@media (max-width: 900px) {
  .fantasia-shop-gallery-sales {
    padding-top: 48px;
  }
}

@media (max-width: 620px) {
  .fantasia-shop-gallery-sales {
    padding-top: 4px;
  }
}

/* 1F 出展者（縦に並ぶ幅）：囲み → 販売条件表の間が 66px あいていたので詰める。
   イーゼルの絵は表の下で大きすぎたため小さく */
@media (max-width: 900px) {
  .fantasia-shop-gallery-sales__grid {
    gap: 32px;
  }

  .fantasia-shop-notice {
    margin-top: 32px;
  }
}

@media (max-width: 620px) {
  .fantasia-shop-gallery-sales__grid {
    gap: 24px;
  }

  .fantasia-shop-notice {
    margin-top: 24px;
  }

  .fantasia-shop-gallery-sales__conditions {
    gap: 16px;
  }

  .fantasia-shop-gallery-sales__art {
    width: min(38%, 140px);
  }
}

/* 計算例の囲み（SP）：電卓の絵のために下を 96px あけていたが広すぎる → 60px。
   絵は右下に重ねる（最後の行「となります。」は短く、右側は空いている） */
@media (max-width: 620px) {
  .fantasia-shop-box--example {
    padding-bottom: 60px;
  }

  .fantasia-shop-box__illust {
    width: 72px;
  }
}

/* 特典（SP）：アイコンと文章を横に並べると文章の幅が狭く窮屈。
   アイコンを文章の上に横並びで置き、文章は全幅に */
@media (max-width: 620px) {
  .fantasia-shop-benefit__body {
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    padding-left: 0;
  }

  .fantasia-shop-benefit__icons {
    flex: none;
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }

  .fantasia-shop-benefit__icons picture {
    width: 54px;
  }

  .fantasia-shop-benefit__body .fantasia-shop-text {
    line-height: 1.9;
  }
}

/* 1 列になる幅（1180px 以下）：棚の写真だけ中央寄せで、料金表・本文・囲みは左寄せだったため、
   ブロック内の揃えを左寄せに統一する */
@media (max-width: 1180px) {
  .fantasia-shop-shelf {
    justify-content: flex-start;
  }
}

/* 店舗カード（1 列〜2 列の狭い幅）：既存の min-height（≤1180 で 350px・≤900 で 410px）が
   中身より高く、写真を下端に寄せている（margin-top: auto）ため文字と写真の間が大きく空いていた。
   min-height を外し、文字 → 写真は 20px に。2 枚並ぶ幅では高いほうのカードに高さがそろう */
@media (max-width: 1180px) {
  .fantasia-shop-location-card {
    min-height: 0;
  }

  .fantasia-shop-location-card__heading,
  .fantasia-shop-location-card__link {
    margin-bottom: 20px;
  }
}

/* 左右 2 列のまま幅が狭くなる 901〜1180px：右の列（約 430〜560px）に店舗カードを 2 枚並べると
   1 枚 200px 前後になり、住所や URL が 1〜2 文字ずつで折り返して読みにくい。
   この幅だけ店舗カードを縦に 1 枚ずつ並べ、カードの中は「アイコン＋文字」と写真を左右に置く */
@media (min-width: 901px) and (max-width: 1180px) {
  .fantasia-shop-locations__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .fantasia-shop-location-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44%;
    grid-template-rows: auto 1fr;
    column-gap: 18px;
    align-items: start;
  }

  .fantasia-shop-location-card__heading {
    grid-column: 1;
    margin-bottom: 0;
  }

  .fantasia-shop-location-card__link {
    grid-column: 1;
    margin: 10px 0 0;
    font-size: clamp(13px, 1.45vw, 15px);
    text-align: left;
    white-space: nowrap;
  }

  .fantasia-shop-location-card > picture,
  .fantasia-shop-location-card--online > picture {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 100%;
    margin: 0;
  }
}

/* 1F 出展者（901〜1421px）：左右 2 列のままだと右の列に表とイーゼルが入りきらず、
   表の項目列が 1 文字幅まで縮んで縦書きのように折れていた。
   この幅では左（見出し・本文・囲み）と右（表＋イーゼル）を上下に積み、
   表は 560px までの幅でイーゼルと横に並べる */
@media (min-width: 901px) and (max-width: 1421px) {
  .fantasia-shop-gallery-sales__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fantasia-shop-gallery-sales__description,
  .fantasia-shop-notice {
    max-width: 720px;
  }

  .fantasia-shop-gallery-sales__conditions {
    grid-template-columns: minmax(0, 560px) 170px;
    gap: 40px;
    justify-content: start;
  }

  .fantasia-shop-gallery-sales__art {
    width: 170px;
  }

  .fantasia-shop-conditions-table__header,
  .fantasia-shop-conditions-table__label,
  .fantasia-shop-conditions-table__value {
    white-space: nowrap;
  }
}

/* 表の中の語句を途中で割らない（「棚レンタ／ル料」「1週間無／料」など）。
   改行は「段ごとの／料金」「1週間／無料」「売価の／12.5％」の区切りでだけ起きる */
.fantasia-shop-nowrap {
  white-space: nowrap;
}