/* fair2専用: 参考デザインを基にした振袖展示会LP */

/*
  ===== 編集ガイド（fair2） =====
  色・フォント       : :root / .reference-style-page
  トップ写真・赤帯   : .reference-style-page .poster-hero 以降
  文字の見出し       : .reference-hero-heading / .benefit-heading-text
  特典見出し・10月丸 : .reference-style-page .benefit-heading / .month-sticker
  特典内の画像       : .benefit-ticket / .benefit-cosmetics / .benefit-face-mask / .benefit-furisode-pair
  赤文字の黄マーカー : .benefit-amount::after / .benefit-highlight::after
  スマホ表示         : ファイル末尾の @media (max-width: ...)

  fair2では、同じセレクタが前半と後半で重複する場合があります。
  見た目を調整するときは、後半の「fair2の参考デザイン上書き」内の設定を優先して編集してください。
*/

.gtm-noscript { display: none; visibility: hidden; }

:root {
  --pink: #f45c8d;
  --pink-deep: #e84678;
  --pink-pale: #f8b4c7;
  --pink-bg: #f5b2c6;
  --pink-soft: #ffe7ee;
  --ink: #272027;
  --white: #fffefe;
  --lavender: #e5dcff;
  --yellow: #fffbb1;
  --border: #ed7299;
  --content-gutter: 17px;
  --radius: 0;
  /* fair2はZen Kaku Gothic Newで統一。--serifは既存セレクタ互換用の同一ゴシック指定です。 */
  --sans: "Zen Kaku Gothic New", Meiryo, sans-serif;
  --serif: "Zen Kaku Gothic New", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--pink-bg);
  font-family: var(--sans);
  font-feature-settings: "palt" 1;
  line-height: 1.6;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin-top: 0; }

.skip-link {
  position: fixed;
  z-index: 30;
  top: 8px;
  left: 8px;
  padding: 9px 12px;
  color: var(--white);
  background: var(--ink);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.site-shell {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--pink-bg);
}
.desktop-side-decor { display: none; }

/* ===== トップ（写真・ロゴ・タイトル・同時開催ボックス） ===== */
.poster-hero {
  position: relative;
  min-height: 800px;
  overflow: hidden;
  isolation: isolate;
  background: #e7eff0;
}
.poster-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 8%;
  filter: saturate(.88) contrast(.96) brightness(1.06);
  transform: translate(110px, -300px) scale(2.45);
  transform-origin: 50% 10%;
}
.poster-frame {
  position: absolute;
  inset: 15px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .96);
  pointer-events: none;
}
.poster-brand {
  position: absolute;
  top: 23px;
  left: 20px;
  z-index: 2;
  display: block;
  width: clamp(108px, 25vw, 142px);
  line-height: 1;
  text-decoration: none;
}
.poster-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}
.poster-title-wrap {
  position: absolute;
  top: 330px;
  right: 13px;
  left: 13px;
  z-index: 2;
  text-align: center;
}
.poster-title-wrap h1 {
  margin: 0;
  color: var(--pink);
  font-family: var(--serif);
  font-size: clamp(2.55rem, 12vw, 4.25rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.04;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px var(--white);
  text-shadow: 3px 3px 0 rgba(175, 44, 86, .76);
}
.hero-title-image { width: min(100%, 430px); height: auto; margin: 0 auto; }
.poster-title-wrap h1 span { font-size: 1.06em; }
.hero-event-group {
  position: absolute;
  right: 22px;
  bottom: 24px;
  left: 22px;
  z-index: 2;
  display: grid;
  gap: 13px;
}
.simultaneous-strip {
  position: static;
  height: 30px;
  color: var(--white);
  background: var(--pink);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 30px;
  text-align: center;
}
.poster-options {
  position: static;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.poster-option {
  display: grid;
  min-height: 96px;
  place-content: center;
  padding: 10px 6px;
  color: var(--white);
  background: rgba(244, 92, 141, .88);
  border: 1px solid rgba(255, 255, 255, .85);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
.poster-option:hover, .poster-option:focus-visible { background: var(--pink-deep); }
.option-top {
  display: inline-block;
  margin: 0 auto 4px;
  padding: 2px 12px;
  color: var(--pink);
  background: var(--white);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .68rem;
}

.consultation-card {
  margin: 17px var(--content-gutter) 0;
  padding: 22px 16px 19px;
  color: var(--pink-deep);
  background: var(--white);
  border: 3px dotted var(--pink);
  border-radius: 18px;
  box-shadow: 0 0 0 6px var(--white);
  text-align: center;
}
.consultation-card h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.28rem, 6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
}
.consultation-card p { margin: 0; font-size: .82rem; font-weight: 700; line-height: 1.7; }

/* ===== 特典セクション（見出し・10月丸・各特典カード） ===== */
.benefits-area { padding: 50px var(--content-gutter) 46px; }
.benefit-heading {
  position: relative;
  display: flex;
  align-items: end;
  min-height: 69px;
  margin: 0 0 10px;
  padding-left: 76px;
}
.benefit-heading-contract { margin-top: 47px; }
.month-sticker {
  position: absolute;
  top: 18px;
  left: -10px;
  z-index: 3;
  display: grid;
  width: 83px;
  height: 83px;
  place-items: center;
  color: var(--white);
  background: var(--pink);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgba(191, 52, 99, .3);
  line-height: 1;
  text-align: center;
  transform: none;
}
.month-ring { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); overflow: visible; animation: month-ring-orbit 14s linear infinite; will-change: transform; }
.month-ring text { fill: var(--white); font-family: var(--sans); font-size: 8.5px; font-weight: 900; letter-spacing: 0; }
.month-sticker strong { position: relative; z-index: 1; margin: 0; font-family: var(--serif); font-size: 1.7rem; font-weight: 900; letter-spacing: .02em; }
@keyframes month-ring-orbit {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}
.benefit-heading h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.65rem, 8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.05;
}
.benefit-heading-image { width: min(100%, 330px); height: auto; }
.benefit-card {
  padding: 16px 14px 6px;
  background: var(--white);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(225, 72, 120, .25);
}
.benefit-heading-contract .month-sticker {
  background: #bd668d;
  box-shadow: 2px 2px 0 rgba(143, 61, 101, .28);
}
.benefit-card-contract {
  background: #fff9fb;
  border-color: #cf7a9c;
  box-shadow: 4px 4px 0 rgba(157, 73, 112, .2);
}
.benefit-card-contract .benefit-ribbon { background: #bd668d; }
.benefit-card-contract .benefit-amount { color: #bd668d; }
.benefit-card-contract .benefit-contract-highlight { color: #bd668d; }
.benefit-list { margin: 0; padding: 0; list-style: none; }
.benefit-item {
  position: relative;
  min-height: 101px;
  padding: 13px 2px 17px;
  border-bottom: 2px dotted #a7a0a4;
}
.benefit-item:last-child { border-bottom: 0; }
.benefit-ribbon {
  display: inline-block;
  min-width: 87px;
  padding: 4px 16px 4px 9px;
  color: var(--white);
  background: var(--pink);
  clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1;
}
.benefit-copy {
  display: block;
  margin: 9px 4px 0;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.55;
}
.benefit-amount {
  display: inline-block;
  margin: 1px 3px 0 0;
  color: var(--pink);
  font-family: var(--serif);
  font-size: clamp(1.65rem, 8vw, 2.35rem);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: .92;
  vertical-align: baseline;
}
/* ===== 編集用｜契約特典1の「最大」ブロック：背景色=background、サイズ=width・height =====
   右padding : 3pxから5pxへ+2px ／ 位置 : 他の価格文字に影響せず視覚上5px下へ移動
*/
.benefit-maximum-group {
  display: inline-flex;
  align-items: flex-end;
  white-space: nowrap;
}
.benefit-maximum {
  display: inline-grid;
  position: relative;
  top: 5px;
  box-sizing: content-box;
  width: 1.17em;
  height: 2.15em;
  margin: 0 .17em 0 0;
  padding: 3px 5px 3px 3px;
  align-items: center;
  justify-items: center;
  color: var(--white);
  background: #bd668d;
  font-family: var(--sans);
  font-size: .68em;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  vertical-align: -.32em;
}
.benefit-maximum-text {
  display: block;
  line-height: 1;
  text-align: center;
  text-orientation: upright;
  transform: translateY(-.02em);
  writing-mode: vertical-rl;
}
.benefit-asset-well {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
.benefit-asset-well img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
}
/* ===== 来場特典内の画像：サイズは width / height、位置は right / bottom で調整 ===== */
.benefit-ticket {
  top: 8px;
  right: 6px;
  width: 105px;
  aspect-ratio: 1.46;
  transform: rotate(-8deg);
}
.benefit-item--ticket {
  min-height: 178px;
  padding-top: 88px;
}
.benefit-item--ticket .benefit-copy {
  margin-top: 0;
  padding-right: 0;
}
.benefit-item--cosmetics {
  min-height: 178px;
  padding-bottom: 84px;
}
.benefit-cosmetics {
  right: 77px;
  bottom: 10px;
  width: 67px;
  height: 65px;
}
.benefit-face-mask {
  right: 10px;
  bottom: 10px;
  width: 56px;
  height: 60px;
}
.benefit-item--models {
  min-height: 0;
  padding-bottom: 0;
}
.benefit-item--models .benefit-copy { padding-right: 0; }
.benefit-furisode-models {
  position: relative;
  right: auto;
  bottom: auto;
  width: 430px;
  max-width: calc(100% + 26px);
  height: auto;
  aspect-ratio: 1847 / 839;
  margin: 12px -6px -6px auto;
  isolation: isolate;
}
.benefit-furisode-models::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background-image: radial-gradient(circle, rgba(244, 92, 141, .42) 0 2.2px, transparent 2.55px);
  background-position: 0 0;
  background-size: 9px 9px;
  transform: translate(-22px, 28px);
  -webkit-mask-image: url("../img/furisode-fair/gift-two-furisode-models.webp");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../img/furisode-fair/gift-two-furisode-models.webp");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.benefit-furisode-models img {
  position: relative;
  z-index: 1;
  transform: translateY(25px);
}
.benefit-note { margin: 17px 0 0; font-size: .90rem; font-weight: 700; line-height: 1.55; text-align:center;}

.simultaneous-event { padding: 0 var(--content-gutter) 39px; }
.ribbon-title {
  width: 196px;
  margin: 0 auto 21px;
  padding: 7px 0 23px;
  color: var(--white);
  background: var(--pink);
  clip-path: polygon(0 0, 100% 0, 67% 72%, 50% 100%, 33% 72%);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
}
.experience-card {
  padding: 21px 16px 19px;
  background: var(--white);
  border: 3px solid var(--border);
  text-align: center;
}
.reservation-pill {
  display: inline-block;
  margin: 0 0 5px;
  padding: 2px 24px;
  color: var(--white);
  background: var(--pink);
  border-radius: 999px;
  font-family: var(--serif);
  font-size: .90rem;
  font-weight: 800;
}
.experience-card h3 { margin: 0 0 14px; font-size: .92rem; }
.kitsuketaiken-img{
	width:90%;
	margin:auto;
}
.experience-card img {
	width:100%;
	display:block;
}

.student-area { padding: 0 var(--content-gutter) 42px; }
.student-card {
  padding: 21px 12px 20px;
  background: var(--white);
  border: 3px solid var(--border);
}
.student-limited {
  display: table;
  margin: 0 auto 7px;
  padding: 3px 17px;
  color: var(--white);
  background: var(--pink);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}
.student-card > h2 {
  margin: 0 0 12px;
  color: var(--pink);
  font-size: clamp(1.2rem, 6vw, 1.7rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.18;
  text-align: center;
}
.student-intro { margin: 0 2px 17px; font-size: .67rem; font-weight: 700; line-height: 1.6; }
.student-choice {
  margin-top: 12px;
  padding: 10px 12px 12px;
  border-radius: 4px;
}
.student-choice h3 {
  margin: 0 0 9px;
  padding: 4px 8px;
  background: var(--white);
  box-shadow: 3px 3px 0 rgba(232, 102, 142, .22);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.student-choice ul { margin: 0; padding-left: 1.15em; font-size: .7rem; font-weight: 700; line-height: 1.75; }
.choice-pink { background: #ffe0e9; }
.choice-pink h3 { color: var(--pink); border: 2px solid #ffd0df; }
.choice-lavender { background: var(--lavender); }
.choice-lavender h3 { color: #7463b4; border: 2px solid #d6c8ff; }
.choice-yellow { background: var(--yellow); }
.choice-yellow h3 { color: #9a7800; border: 2px solid #fff58b; }
.student-note { margin: 17px 0 0; font-size: .5rem; font-weight: 700; line-height: 1.45; }

.access-area {
  padding: 37px var(--content-gutter) 96px;
  background-color: #fac6d5;
}
.access-area > h2 { margin: 0 0 25px; font-family: var(--serif); font-size: 1.55rem; font-weight: 800; text-align: center; }
.access-area > h2 span { display: table; margin: 0 auto 6px; padding: 3px 31px; color: var(--white); background: var(--pink); border-radius: 999px; font-family: var(--serif); font-size: .85rem; line-height: 1.25; }
.access-card { margin: 0 0 37px; text-align: center; }
.access-card h3 { margin: 0; font-family: var(--serif); font-size: 1.35rem; letter-spacing: .04em; }
.access-brand { margin: 3px 0 9px; font-size: .62rem; font-weight: 700; }
.access-card img { width: 100%; height: auto; border: 1px solid rgba(255,255,255,.78); }
.access-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .86);
  background: #f6d0db;
}
.access-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.access-address {
  margin: 11px 3px 0;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(134, 55, 80, .45);
  font-size: 1.44rem;
  font-weight: 900;
  line-height: 1.55;
  text-align: left;
}
.access-description { margin: 12px 3px 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(134, 55, 80, .45); font-size: .68rem; font-weight: 700; line-height: 1.6; text-align: left; }
.map-link { display: inline-block; padding: 6px 17px; color: var(--white); background: var(--pink); font-size: .72rem; font-weight: 800; text-decoration: none; }
.map-link:hover, .map-link:focus-visible { background: var(--pink-deep); }

.fixed-reservation-cta {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  right: 0;
  left: 0;
  display: grid;
  width: 100%;
  min-height: 66px;
  box-sizing: border-box;
  place-items: center;
  padding: 10px 20px;
  color: var(--white);
  background: var(--pink-deep);
  border: 2px solid var(--white);
  box-shadow: 0 5px 0 rgba(157, 44, 82, .45), 0 8px 20px rgba(157, 44, 82, .23);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.1;
  text-decoration: none;
  transform: none;
}
.fixed-reservation-cta:hover, .fixed-reservation-cta:focus-visible { background: var(--pink); }

.poster-option:focus-visible, .map-link:focus-visible, .fixed-reservation-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (max-width: 459px) {
  .poster-hero { min-height: 900px; }
  .hero-event-group { bottom: 24px; gap: 12px; }
  .poster-options { grid-template-columns: 1fr; gap: 6px; }
  .poster-option { min-height: 84px; font-size: clamp(1rem, 5.2vw, 1.16rem); }
  .poster-option .doujikaisai-title { white-space: nowrap; }
  .poster-option .doujikaisai-title br { display: none; }
}

@media (min-width: 560px) {
  body { padding: 0; }
  .site-shell { box-shadow: 0 12px 32px rgba(128, 39, 70, .22); }
  .poster-hero { min-height: 700px; }
  .poster-title-wrap { top: 218px; }
  .poster-title-wrap h1 { font-size: 4.5rem; }
  .hero-event-group { bottom: 27px; gap: 18px; }
}

/* PCだけに現れる、メインスクロールと独立した固定サイドギャラリー */
@media (min-width: 1000px) {
  body.furisode-fair-page {
    position: relative;
  }
  /* 共通CSSの html/body 背景より優先し、中央LP外側だけを指定色へ戻します。 */
  html:has(body.furisode-fair-page),
  body.furisode-fair-page {
    background: #ffd9dc !important;
  }
  .desktop-side-decor {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
  .site-shell {
    position: relative;
    z-index: 1;
    box-shadow: 0 16px 38px rgba(190, 78, 122, .22);
  }
  .side-gallery {
    position: fixed;
    top: 72dvh;
    right: 0;
    left: 0;
    /* 吹き出しとホバー時に少し上へ動く画像をクリップしない。横方向のはみ出しは親要素で制御する。 */
    overflow: visible;
    pointer-events: auto;
    transform: translateY(-50%);
  }
  .side-gallery-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: side-gallery-loop 45s linear infinite;
  }
  .side-gallery-set {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 120px;
    width: max-content;
    padding: 0 18px;
  }
  .side-cutout {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    height: clamp(280px, 13.0vw, 350px);
    cursor: pointer;
  }
  .side-cutout > img {
    display: block;
    /*max-width: 13.2vw;*/
    height: 100%;
    width: auto;
    object-fit: contain;
    --cutout-white-outline: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.4px 1.4px 0 #fff) drop-shadow(-1.4px 1.4px 0 #fff) drop-shadow(1.4px -1.4px 0 #fff) drop-shadow(-1.4px -1.4px 0 #fff);
    filter: var(--cutout-white-outline) drop-shadow(0 8px 8px rgba(190, 78, 122, .16));
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), filter .22s ease;
  }
  .side-cutout::after {
    position: absolute;
    z-index: 2;
    bottom: calc(100% + 31px);
    left: 50%;
    content: attr(data-bubble);
  min-width: 108px;
  padding: 12px 17px 13px;
  border: 0;
  border-radius: 48% 53% 49% 52% / 51% 46% 55% 49%;
  background: #fff;
  box-shadow: none;
	  color: #3b2c36;
    font-size: clamp(.76rem, .8vw, .96rem);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(.92);
    transition: opacity .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
    white-space: nowrap;
  }
  .side-cutout::before {
    position: absolute;
    z-index: 2;
    /* ホバー画像の拡大・上方向移動を含め、丸いしっぽの最下端と写真の間隔を約12pxにする。 */
    bottom: calc(100% + 27px);
    left: calc(50% - 18px);
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 17px 12px 0 -4px #fff;
  content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 8px) scale(.92);
    transition: opacity .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
  }
  .side-cutout[data-bubble="振袖展示会"]::after,
  .side-cutout[data-bubble="ご契約特典♪"]::after {
    border-radius: 46% 54% 47% 53% / 54% 45% 55% 46%;
  }
  .side-cutout[data-bubble="ご来場特典♪"]::after {
    width: 102px;
    min-width: 0;
    min-height: 92px;
    display: grid;
    place-items: center;
    padding: 16px 12px 18px;
    border-radius: 52% 48% 54% 46% / 48% 46% 54% 52%;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }
  .side-cutout[data-bubble="ご来場特典♪"]::before { left: calc(50% - 15px); }
  .side-gallery:has(.side-cutout:hover) .side-gallery-track { animation-play-state: paused; }
  .side-cutout:hover > img { transform: translateY(-5px) scale(1.04); filter: var(--cutout-white-outline) drop-shadow(0 11px 10px rgba(190, 78, 122, .24)); }
  .side-cutout:hover::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
  .side-cutout:hover::before { opacity: 1; transform: translate(0, 0) scale(1); }
  @keyframes side-gallery-loop {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .month-ring { animation: none; }
  .side-gallery-track { animation: none; }
}

/* 高視認性タイポグラフィ: スマートフォンでも一目で読める太さとサイズに統一 */
body { font-weight: 700; }
.poster-brand span { font-size: 1.35rem; font-weight: 900; }
.poster-brand small { margin-top: 7px; font-size: .5rem; font-weight: 900; }
.poster-title-wrap h1 { font-size: clamp(3.45rem, 14vw, 5rem); font-weight: 900; letter-spacing: .02em; line-height: .9; -webkit-text-stroke-width: 4px; }
.simultaneous-strip { height: 36px; font-size: 1.26rem; font-weight: 900; line-height: 36px; }
.poster-option { min-height: 109px; font-size: 1.40rem; font-weight: 900; }
.option-top { padding: 3px 15px; font-size: 1.2rem; font-weight: 900; }

.consultation-card h2 { font-size: clamp(1.72rem, 7.4vw, 2.35rem); font-weight: 900; }
.consultation-card p { font-size: 1.02rem; font-weight: 800; }

.benefit-heading { min-height: 118px; padding-left: 134px; }
.month-sticker { width: 134px; height: 134px; }
.month-ring text { font-size: 11px; }
.month-sticker small { font-size: .62rem; font-weight: 800; }
.month-sticker strong { align-self: center; margin: 0; font-size: 2.84rem; font-weight: 900; }
.benefit-heading h2 { margin-bottom: 8px; font-size: clamp(2.05rem, 9.6vw, 2.8rem); font-weight: 900; }
/* ===== 編集用｜特典内容の白いボックス内余白 =====
   外周の余白: .benefit-card の padding
   各特典行の余白: .benefit-item の min-height / padding
   画像付きの特典は、画像と文字が重ならない最小限の下余白を個別に確保します。
*/
.benefit-card { padding: 12px 12px 5px; }
.benefit-item { min-height: 172px; padding: 18px 3px 20px; }
.benefit-ribbon { display: inline-flex; align-items: center; min-width: 165px; height: 43px; padding: 0 34px 0 16px; font-size: 28px; font-weight: 900; line-height: 1; white-space: nowrap; }
.benefit-item--ticket { min-height: 0; padding-top: 18px; }
.benefit-item--ticket .benefit-copy { margin-top: 14px; }
.benefit-item--cosmetics { min-height: 260px; padding-bottom: 80px; }
.benefit-item--models { padding-bottom: 12px; }
.benefit-copy { margin: 14px 5px 0; font-size: 2.15rem; font-weight: 700; line-height: 1.28; letter-spacing: 0; }
.benefit-amount { font-size: clamp(2.76rem, 12.6vw, 3.66rem); font-weight: 900; }
.benefit-highlight { display: inline-block; margin: 1px 3px 0 0; color: var(--pink); font-family: var(--serif); font-size: clamp(2.3rem, 10.5vw, 3.05rem); font-weight: 900; letter-spacing: .01em; line-height: .92; vertical-align: baseline; }
.benefit-item--cosmetics { min-height: 260px; padding-bottom: 80px; }
.ticket-sticker { padding: 5px 9px; font-size: .63rem; font-weight: 900; }
.benefit-note { font-size: .90rem; font-weight: 800; }

.ribbon-title { width: 235px; padding: 8px 0 27px; font-size: 2.12rem; font-weight: 900; }
.reservation-pill,
.student-limited {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 900;
}
.experience-card h3,
.student-card > h2 {
  color: var(--pink);
  font-family: var(--sans);
  font-size: clamp(1.48rem, 6.7vw, 2rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.18;
}

.experience-card h3 { color: var(--ink); }

.reservation-pill { margin-bottom: 13px; }
.student-limited { margin-bottom: 13px; padding: 4px 20px; }
.student-intro { font-size: .924rem; font-weight: 800; line-height: 1.7; }
.student-choice { padding: 13px 14px 15px; }
.student-choice h3 { margin-bottom: 11px; padding: 6px 9px; font-size: 1.28rem; font-weight: 900; }
.student-choice ul { font-size: 1.056rem; font-weight: 800; line-height: 1.78; }
.student-note { font-size: .64rem; font-weight: 800; }

.access-area > h2 { font-size: 2.02rem; font-weight: 900; }
.access-area > h2 span { padding: 4px 35px; font-size: 1.02rem; font-weight: 900; }
.access-card h3 { font-size: 1.75rem; font-weight: 900; }
.access-brand { font-size: .8rem; font-weight: 900; }
.access-address { font-size: 1.15rem; font-weight: 400; }
.access-description { font-size: .84rem; font-weight: 800; line-height: 1.72; }
.map-link { padding: 8px 20px; font-size: .9rem; font-weight: 900; }

/* ヒーロー内のタイトル・帯・案内ボックスを、幅に応じて独立して配置する。 */
.hero-title-image { width: min(88%, 390px); }
@media (max-width: 559px) {
  .poster-title-wrap { top: 417px; }
}
  @media (min-width: 560px) {
  .poster-hero { min-height: 840px; }
  .poster-title-wrap { top: 417px; }
  .poster-title-wrap h1 { font-size: 5rem; }
}

/*.doujikaisai-title {
	font-size:23px!important;
}*/


/* ===== fair2の参考デザイン上書き（上記の共通設定より優先される設定） ===== */

/*
  参考LPの「深い赤・淡いピンク・紺」と、中央写真を左右の縦帯で挟む構成を
  BLANCOのコンテンツに置き換えたfair2用スタイルです。
  通常版の fair1.html / furisode-fair1.css には影響しません。
*/
.reference-style-page {
  --pink: #ba0714;
  --pink-deep: #85000a;
  --pink-pale: #f7c6ca;
  --pink-bg: #f9d9db;
  --pink-soft: #fff0f0;
  --ink: #25212b;
  --white: #fffdfd;
  --border: #be1420;
  background: #f4d9dc;
  color: var(--ink);
}

.reference-style-page .site-shell {
  background-color: #f9dcde;
  background-image: none;
}

.reference-style-page .poster-hero {
  min-height: 870px;
  background: #bd0713;
}

.reference-style-page .poster-hero-photo {
  top: 0;
  right: auto;
  bottom: 0;
  left: 9%;
  z-index: -1;
  width: 82%;
  height: calc(100% + 19.1%);
  object-position: 35% 6%;
  filter: none;
  transform: translate(0, -16%);
  transform-origin: center;
}

.reference-style-page .poster-hero::after {
  position: absolute;
  top: 74px;
  right: 3.2%;
  z-index: 2;
  content: "BLANCO FURISODE FAIR";
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(1rem, 3.3vw, 1.45rem);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.15;
  text-align: center;
  writing-mode: vertical-rl;
}

.reference-style-page .poster-frame {
  inset: 0 12px;
  z-index: 1;
  box-sizing: border-box;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .96);
  border-left: 1px solid rgba(255, 255, 255, .96);
}

.reference-style-page .poster-brand {
  top: 14px;
  left: 50%;
  display: block;
  width: clamp(150px, 46vw, 190px);
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  transform: translateX(-50%);
}

.reference-style-page .poster-brand-logo {
  filter: none;
}

.reference-style-page .poster-title-wrap {
  top: auto;
  right: 0;
  bottom: 244px;
  left: 0;
  isolation: isolate;
  padding: 0;
  background: transparent;
  text-align: center;
}

.reference-style-page .poster-title-wrap h1 {
  display: block;
  margin: 0;
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.reference-style-page .poster-title-wrap h1.reference-hero-heading {
  display: grid;
  justify-items: center;
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(3rem, 13.5vw, 4.7rem);
  font-weight: 900;
  letter-spacing: .055em;
  row-gap: 15px;
  line-height: .96;
  paint-order: stroke fill;
  -webkit-text-stroke: 9px #bd0713;
  /* 振袖展示会開催: 赤い縁取りは残し、文字の影のみ削除。 */
  text-shadow: none;
}

.reference-style-page .reference-hero-heading span { display: block; }

.reference-style-page .hero-event-group {
  right: 0;
  bottom: 16px;
  left: 0;
  gap: 8px;
  padding: 0 11%;
  background: transparent;
}

.reference-style-page .simultaneous-strip {
  position: relative;
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 254, 254, .97);
  border: 2px solid #bd0713;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(112, 0, 8, .24);
  color: #a4000d;
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .20em;
  text-indent: .20em;
}

.reference-style-page .poster-options { gap: 8px; }

.reference-style-page .poster-option {
  min-height: 112px;
  background: rgba(176, 0, 14, .93);
  border: 1px solid rgba(255, 255, 255, .88);
  color: var(--white);
  font-family: var(--sans);
}

.reference-style-page .poster-option:hover,
.reference-style-page .poster-option:focus-visible { background: #79000a; }

.reference-style-page .option-top {
  background: var(--white);
  color: var(--pink-deep);
}

.reference-style-page .consultation-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #f9d9db;
  box-shadow: none;
}

.reference-style-page .consultation-card h2,
.reference-style-page .benefit-heading h2,
.reference-style-page .ribbon-title,
.reference-style-page .student-card > h2,
.reference-style-page .access-area > h2 { color: var(--pink-deep); }

.reference-style-page .access-area > h2 {
  font-family: var(--sans);
  font-weight: 900;
}

.reference-style-page .access-area > h2 span {
  margin-bottom: 0;
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.reference-style-page .benefits-area { padding: 0; }

.reference-style-page .benefit-panel {
  padding: 50px var(--content-gutter) 46px;
}

.reference-style-page .benefit-panel-visit { background-color: #d7999e; }

.reference-style-page .benefit-panel-contract {
  padding-top: 42px;
  background-color: #d7999e;
}

.reference-style-page .ribbon-title {
  width: min(248px, calc(100% - 34px));
  margin: 0 auto 27px;
  padding: 10px 0 31px;
  background: #bd0713;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 64% 70%, 50% 100%, 36% 70%, 0 70%);
  color: var(--white);
  filter: drop-shadow(0 4px 0 rgba(112, 0, 8, .28));
  font-family: var(--sans);
  font-size: 2.16rem;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
  text-align: center;
  text-indent: .15em;
  text-shadow: 0 1px 0 rgba(92, 0, 7, .32);
}

.reference-style-page .simultaneous-event,
.reference-style-page .student-area,
.reference-style-page .access-area {
  background-color: #f7d8da;
}

.reference-style-page .simultaneous-event { padding-top: 42px; }

.reference-style-page .benefit-heading {
  isolation: isolate;
  background: transparent;
  color: var(--white);
}

.reference-style-page .benefit-heading::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 57px;
  z-index: 0;
  background: var(--pink-deep);
  content: "";
}

.reference-style-page .benefit-heading-contract {
  margin-top: 0;
  align-items: center;
}

.reference-style-page .benefit-heading-contract::before { background: #a91c2d; }

.reference-style-page .benefit-heading h2 {
  position: relative;
  z-index: 1;
}

.reference-style-page .benefit-heading.benefit-heading-contract h2 { margin-bottom: 0; }

.reference-style-page .benefit-heading-visit {
  align-items: center;
}

.reference-style-page .benefit-heading.benefit-heading-visit h2 { margin-bottom: 0; }

.reference-style-page .benefit-heading-contract .month-sticker {
  top: 50%;
  transform: translateY(-50%);
}

.reference-style-page .benefit-heading-visit .month-sticker {
  top: 50%;
  transform: translateY(-50%);
}

.reference-style-page .benefit-panel-contract .month-sticker { background: #c53b00; }

.reference-style-page .benefit-heading h2 {
  margin-bottom: 8px;
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(2.05rem, 9.6vw, 2.8rem);
  font-weight: 900;
  letter-spacing: .06em;
}

.reference-style-page .benefit-heading-text {
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(90, 0, 8, .22);
}

.reference-style-page .month-sticker {
  background: #102f5a;
  border-color: var(--white);
  color: var(--white);
}

.reference-style-page .month-ring { fill: var(--white); }

.reference-style-page .benefit-card,
.reference-style-page .experience-card,
.reference-style-page .student-card,
.reference-style-page .access-card {
  background: var(--white);
  border-color: rgba(186, 7, 20, .34);
  box-shadow: none;
}

.reference-style-page .access-card { padding: 16px; }

/* ===== fair2 ACCESS：エリア別の店舗情報 ===== */
.reference-style-page .access-region + .access-region { margin-top: 38px; }

.reference-style-page .access-region-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: clamp(1.1rem, 4.4vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.25;
  text-align: center;
}

.reference-style-page .access-region-title::before,
.reference-style-page .access-region-title::after {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(169, 28, 45, .38);
  content: "";
}

.reference-style-page .access-region-cards {
  display: grid;
  gap: 18px;
}

.reference-style-page .access-region .access-card {
  margin: 0;
  padding: 17px 16px 16px;
  text-align: center;
}

.reference-style-page .access-card h4 {
  margin: 0;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: clamp(1rem, 4.1vw, 1.25rem);
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reference-style-page .access-store-type {
  margin: 4px 0 11px;
  color: rgba(62, 36, 43, .82);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
}

.reference-style-page .access-card h4 + .access-map { margin-top: 12px; }

.reference-style-page .access-details {
  margin: 12px 2px 0;
  padding: 11px 0 1px;
  border-top: 1px solid rgba(169, 28, 45, .28);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.62;
  text-align: left;
}

.reference-style-page .access-details p { margin: 0; }
.reference-style-page .access-details p + p { margin-top: 4px; }
.reference-style-page .access-details .access-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-color: rgba(169, 28, 45, .72);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.reference-style-page .access-details .access-phone a:hover,
.reference-style-page .access-details .access-phone a:focus-visible {
  color: var(--pink-deep);
  text-decoration-thickness: 2px;
}
.reference-style-page .access-details .access-phone a:focus-visible {
  outline: 3px solid rgba(169, 28, 45, .65);
  outline-offset: 3px;
}

.reference-style-page .benefit-ribbon,
.reference-style-page .fixed-reservation-cta,
.reference-style-page .map-link { background: var(--pink-deep); }

.reference-style-page .benefit-ribbon::after { border-left-color: var(--pink-deep); }
.reference-style-page .benefit-highlight,
.reference-style-page .benefit-amount,
.reference-style-page .experience-card h3,
.reference-style-page .student-card > h2 { color: var(--pink-deep); }

.reference-style-page .benefit-card-contract { border-color: rgba(169, 28, 45, .5); }
.reference-style-page .benefit-card-contract .benefit-ribbon { background: #a91c2d; }
.reference-style-page .benefit-card-contract .benefit-ribbon::after { border-left-color: #a91c2d; }
.reference-style-page .benefit-card-contract .benefit-amount,
.reference-style-page .benefit-card-contract .benefit-contract-highlight { color: #a91c2d; }

/* fair2の「最大」ブロックは、契約特典見出しと同じ深い赤で統一。 */
.reference-style-page .benefit-maximum { background: #a91c2d; }

.reference-style-page .benefit-card-contract .benefit-amount {
  font-size: clamp(2.25rem, 10vw, 3.2rem);
  white-space: nowrap;
}

/* ===== 編集用｜特典本文の赤文字：色=color ／ 改行防止=white-space ===== */
.reference-style-page .benefit-card .benefit-amount,
.reference-style-page .benefit-card .benefit-highlight {
  color: #d92f48;
  white-space: nowrap;
}

.reference-style-page .benefit-card .benefit-nowrap { white-space: nowrap; }

/* スマホでは語の途中で切らず、本文全体の行長を少しだけ短くして自然に折り返す。 */
@media (max-width: 559px) {
  .reference-style-page .benefit-copy {
    font-size: clamp(1.65rem, 7vw, 2.05rem);
    line-height: 1.36;
    line-break: strict;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: pretty;
  }

  .reference-style-page .benefit-highlight {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }
}

/*
  ===== 編集用｜来場特典2：コスメ・フェイスマスク画像 =====
  コスメ: .benefit-cosmetics ／ フェイスマスク: .benefit-face-mask
  サイズを変える場合は width・height、位置を変える場合は right・bottom を編集します。
*/
.reference-style-page .benefit-cosmetics {
  right: 85px;
  bottom: 8px;
  width: 80px;
  height: 78px;
}

.reference-style-page .benefit-face-mask {
  right: 8px;
  bottom: 8px;
  width: 68px;
  height: 73px;
}

/*
  ===== 編集用｜契約特典3：振袖切り抜き2枚 =====
  写真の大きさ: height ／ 写真同士の間隔: gap ／ 上下位置: margin の最初の値
*/
.reference-style-page .benefit-furisode-pair {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(54px, 14vw, 64px);
  height: clamp(245px, 70vw, 330px);
  margin: 37px auto 0;
}

.reference-style-page .benefit-furisode-pair img {
  display: block;
  width: auto;
  max-width: 46%;
  height: 100%;
  object-fit: contain;
  /* 薄い赤みのあるぼかし影。濃さはrgbaの最後の数値で調整できます。 */
  filter: drop-shadow(2px 5px 7px rgba(105, 31, 46, .16));
}

/* ===== 編集用｜赤文字の明るい黄色マーカー：色=background／文字下への出幅=bottom ===== */
.reference-style-page .benefit-card .benefit-amount,
.reference-style-page .benefit-card .benefit-highlight {
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding: 0 .025em;
  background-image: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-decoration: none;
}

.reference-style-page .benefit-card .benefit-amount::after,
.reference-style-page .benefit-card .benefit-highlight::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -3px;
  left: 0;
  height: max(6px, .18em);
  background: #fff05a;
  border-radius: 1px;
  content: "";
  pointer-events: none;
}

.reference-style-page .fixed-reservation-cta:hover,
.reference-style-page .fixed-reservation-cta:focus-visible,
.reference-style-page .map-link:hover,
.reference-style-page .map-link:focus-visible { background: var(--pink); }

/* ===== 編集用｜画面下の店舗別WEB予約ボタン：色=background ／ 文言=fair2.html ===== */
.fixed-reservation-ctas {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  padding: 4px;
  background: rgba(255, 254, 254, .96);
  box-shadow: 0 -5px 18px rgba(106, 34, 53, .13);
}

.reference-style-page .fixed-reservation-ctas .fixed-reservation-cta {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  min-height: 58px;
  padding: 7px 3px;
  color: var(--white);
  border: 1px solid var(--white);
  box-shadow: none;
  font-size: clamp(.72rem, 3.4vw, 1.08rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.reference-style-page .fixed-reservation-cta > span { display: inline; }

.reference-style-page .fixed-reservation-cta--kagoshima { background: #d52d44; }
.reference-style-page .fixed-reservation-cta--osaka { background: #c34d10; }

.reference-style-page .fixed-reservation-cta--kagoshima:hover,
.reference-style-page .fixed-reservation-cta--kagoshima:focus-visible { background: #b92036; }
.reference-style-page .fixed-reservation-cta--osaka:hover,
.reference-style-page .fixed-reservation-cta--osaka:focus-visible { background: #a53e09; }

@media (max-width: 359px) {
  .reference-style-page .fixed-reservation-ctas { gap: 3px; padding: 3px; }
  .reference-style-page .fixed-reservation-ctas .fixed-reservation-cta {
    min-height: 54px;
    font-size: .72rem;
    letter-spacing: -.09em;
  }
}

/* ===== スマホ用の上書き（459px以下） ===== */
@media (max-width: 459px) {
  .reference-style-page .poster-hero { min-height: 900px; }
  .reference-style-page .poster-hero-photo { left: 9%; width: 82%; }
  .reference-style-page .poster-title-wrap { right: 0; bottom: 388px; left: 0; }
  .reference-style-page .poster-brand { top: 14px; left: 50%; width: min(46vw, 180px); }
  .reference-style-page .poster-hero::after { top: 64px; right: 2.5%; font-size: .84rem; }
  .reference-style-page .hero-event-group { right: 0; left: 0; padding: 0 7%; }
  .reference-style-page .fixed-reservation-ctas { gap: 3px; padding: 3px; }
  .reference-style-page .fixed-reservation-ctas .fixed-reservation-cta {
    flex-direction: column;
    min-height: 64px;
    padding: 6px 3px;
    font-size: clamp(.82rem, 4.1vw, 1.02rem);
    letter-spacing: 0;
    line-height: 1.2;
    white-space: normal;
  }
  .reference-style-page .fixed-reservation-cta > span {
    display: block;
    white-space: nowrap;
  }
}

@media (min-width: 360px) and (max-width: 459px) {
  .reference-style-page .fixed-reservation-ctas .fixed-reservation-cta {
    font-size: clamp(.82rem, 4.1vw, 1.02rem);
    letter-spacing: 0;
  }
}

@media (max-width: 559px) {
  .reference-style-page .benefit-heading { min-width: 0; }
  .reference-style-page .benefit-heading h2 { flex: 1 1 0; min-width: 0; }
  .reference-style-page .benefit-heading h2.benefit-heading-text { font-size: clamp(1.72rem, 8.15vw, 2.25rem); }
}

@media (max-width: 450px) {
  .reference-style-page .benefit-heading { padding-left: 120px; }
  .reference-style-page .month-sticker { width: 120px; height: 120px; }
  .reference-style-page .month-sticker strong { font-size: 2.55rem; }
}

/* 320px級の小型スマホでも「最大 50,000円OFF」をカード内の一行に収める。 */
@media (max-width: 359px) {
  .reference-style-page .benefit-maximum { font-size: .60em; }
  .reference-style-page .benefit-maximum-group .benefit-amount { font-size: 1.82rem; }
  .reference-style-page .benefit-heading h2.benefit-heading-text {
    font-size: clamp(1.2rem, 6.3vw, 1.38rem);
    letter-spacing: 0;
  }
}

/* ===== 編集用｜特典見出し帯：高さ=min-height／文字サイズ=font-size ===== */
.reference-style-page .benefit-heading {
  min-height: 84px;
}

.reference-style-page .benefit-heading h2.benefit-heading-text {
  position: absolute;
  inset: 0 0 0 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: clamp(2.78rem, 11.57vw, 3.32rem);
  letter-spacing: .035em;
  line-height: .94;
  text-align: center;
}

@media (max-width: 359px) {
  .reference-style-page .benefit-heading h2.benefit-heading-text {
    inset: 0 0 0 100px;
    font-size: clamp(1.43rem, 7.54vw, 1.66rem);
    letter-spacing: 0;
  }
}

@media (min-width: 560px) {
  .reference-style-page .poster-hero { min-height: 870px; }
  .reference-style-page .poster-title-wrap { top: auto; right: 0; bottom: 244px; left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reference-style-page .poster-hero-photo { transform: none; }
}


/* ===== 編集用｜ご試着・ご相談案内の上に置くBLANCO紹介文 =====
   文章 : fair2.html の .consultation-brand-message 内の p
   横長ストライプ : .consultation-accent--stripe
   縦長ドット柄 : .consultation-accent--dot
*/
.reference-style-page .consultation-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 8vw, 44px) clamp(22px, 6vw, 34px) 28px;
}

.reference-style-page .consultation-brand-message {
  position: relative;
  z-index: 0;
  max-width: 440px;
  /* 左下テープと次の見出しが触れないための下側余白です。 */
  margin: 0 auto clamp(66px, 15vw, 74px);
  /* 右上テープを避けて本文を収める右側余白です。 */
  padding: 17px clamp(58px, 15vw, 76px) 18px clamp(20px, 6vw, 34px);
  color: var(--pink-deep);
  background: rgba(255, 253, 253, .86);
  border-top: 2px solid rgba(133, 0, 10, .32);
  border-bottom: 2px solid rgba(133, 0, 10, .32);
}

.reference-style-page .consultation-brand-message p {
  position: relative;
  z-index: 1;
  max-width: 26em;
  margin: 0 auto;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 4.45vw, 1.38rem);
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.62;
  text-align: center;
  text-wrap: balance;
}

.reference-style-page .consultation-accent {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.reference-style-page .consultation-accent--stripe {
  /* テープ1: 右上。文字領域の外側へ寄せます。 */
  top: -14px;
  right: -20px;
  width: clamp(48px, 13vw, 62px);
  transform: rotate(-8deg);
}

.reference-style-page .consultation-accent--dot {
  /* テープ2: 左下。次の見出しに重ならない位置で見せます。 */
  bottom: -51px;
  left: -62px;
  width: clamp(90px, 25vw, 110px);
  transform: rotate(-7deg);
}

.reference-style-page .consultation-card > h2,
.reference-style-page .consultation-card > p {
  position: relative;
  z-index: 1;
}

@media (max-width: 359px) {
  .reference-style-page .consultation-card {
    padding-right: 17px;
    padding-left: 17px;
  }

  .reference-style-page .consultation-brand-message {
    margin-bottom: 66px;
    padding: 16px 54px 17px 17px;
  }

  .reference-style-page .consultation-accent--stripe {
    top: -13px;
    right: -16px;
    width: 46px;
  }

  .reference-style-page .consultation-accent--dot {
    bottom: -47px;
    left: -55px;
    width: 86px;
  }
}


/* ===== 編集用｜レンタルの流れ・前撮りまでの流れ =====
   レンタルの流れ : .rental-flow-area / .step-flow-card
   前撮りまでの流れ : .prephoto-flow-area / .prephoto-flow-step
   各ステップの文言は fair2.html 内で直接編集できます。
*/
.reference-style-page .flow-area {
  padding: 48px var(--content-gutter);
  background-color: #f7d8da;
}

.reference-style-page .rental-flow-area {
  padding-top: 50px;
  background-color: #d7999e;
}

.reference-style-page .flow-section-heading {
  margin: 0 auto 24px;
  color: var(--pink-deep);
  font-family: var(--sans);
  text-align: center;
}

.reference-style-page .flow-section-heading p {
  display: table;
  margin: 0 auto 5px;
  padding: 3px 13px;
  color: var(--white);
  background: var(--pink-deep);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.15;
}

.reference-style-page .flow-section-heading h2 {
  margin: 0;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 900;
  letter-spacing: .075em;
  line-height: 1.15;
  text-indent: .075em;
}

.reference-style-page .flow-section-heading--rental h2 { color: var(--white); text-shadow: 0 2px 0 rgba(91, 0, 8, .22); }
.reference-style-page .flow-section-heading--rental p { color: var(--pink-deep); background: var(--white); }

.reference-style-page .step-flow-list,
.reference-style-page .prephoto-flow-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* レンタルの流れ：5ステップ */
.reference-style-page .step-flow-list--rental {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reference-style-page .step-flow-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 230px;
  flex-direction: column;
  padding: 14px 12px 16px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 4px 4px 0 rgba(117, 15, 29, .18);
}

.reference-style-page .step-flow-card--last { grid-column: 1 / -1; min-height: 190px; }

.reference-style-page .step-flow-number {
  display: inline-flex;
  width: max-content;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  padding: 3px 10px;
  color: var(--white);
  background: var(--pink-deep);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
}

.reference-style-page .step-flow-card h3 {
  margin: 0 0 10px;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: clamp(1rem, 4.15vw, 1.24rem);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.38;
  text-align: center;
}

.reference-style-page .step-flow-card p {
  margin: 0;
  color: #4d3e46;
  font-family: var(--sans);
  font-size: clamp(.78rem, 3.15vw, .9rem);
  font-weight: 500;
  line-height: 1.72;
  text-align: left;
}

.reference-style-page .step-flow-card--last p { max-width: 31em; margin: 0 auto; text-align: center; }

/* 前撮りまでの流れ：4ステップ */
.reference-style-page .prephoto-flow-area { padding-bottom: 58px; }

.reference-style-page .prephoto-flow-list {
  display: grid;
  gap: 15px;
}

.reference-style-page .prephoto-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: stretch;
  gap: 17px;
  min-width: 0;
}

.reference-style-page .prephoto-flow-label {
  position: relative;
  display: grid;
  min-height: 123px;
  place-items: center;
  padding: 12px 10px 24px;
  color: var(--pink-deep);
  isolation: isolate;
  background: transparent;
  border: 0;
  clip-path: none;
  font-family: var(--sans);
  font-size: clamp(1.02rem, 4.25vw, 1.3rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.35;
  text-align: center;
}

/* ラベルは語の途中で分断せず、「お振袖／決め」「ヘアメイク／着付け」の2行で表示する。 */
.reference-style-page .prephoto-flow-label-line {
  display: block;
  white-space: nowrap;
}

/* 前撮りフローの下向き先端にも赤い枠線を通し、先端下の点線は出さない。 */
.reference-style-page .prephoto-flow-label::before,
.reference-style-page .prephoto-flow-label::after {
  position: absolute;
  content: "";
  pointer-events: none;
  clip-path: polygon(50% 100%, 0 78%, 0 0, 100% 0, 100% 78%);
}

.reference-style-page .prephoto-flow-label::before {
  z-index: -2;
  inset: 0;
  background: rgba(133, 0, 10, .62);
}

.reference-style-page .prephoto-flow-label::after {
  z-index: -1;
  inset: 2px;
  background: #ffebf0;
}

.reference-style-page .prephoto-flow-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 11px 0 12px;
  border-top: 1px dashed rgba(133, 0, 10, .46);
  border-bottom: 1px dashed rgba(133, 0, 10, .46);
}

.reference-style-page .prephoto-flow-copy h3 {
  margin: 0 0 7px;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: clamp(.94rem, 3.75vw, 1.13rem);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.42;
}

.reference-style-page .prephoto-flow-copy p {
  margin: 0;
  color: #4d3e46;
  font-family: var(--sans);
  font-size: clamp(.72rem, 2.98vw, .84rem);
  font-weight: 500;
  line-height: 1.67;
}

@media (max-width: 359px) {
  .reference-style-page .flow-area { padding-right: 12px; padding-left: 12px; }
  .reference-style-page .step-flow-list--rental { grid-template-columns: 1fr; }
  .reference-style-page .step-flow-card,
  .reference-style-page .step-flow-card--last { grid-column: auto; min-height: 0; }
  .reference-style-page .step-flow-card p,
  .reference-style-page .step-flow-card--last p { text-align: center; }
  .reference-style-page .prephoto-flow-step { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .reference-style-page .prephoto-flow-label { min-height: 116px; padding-right: 6px; padding-left: 6px; font-size: .95rem; }
}


/* ===== 編集用｜特典見出しと月バッジの重なり防止 =====
   月バッジの直径 : --benefit-month-size（従来の0.8倍）
   バッジと見出し文字の間隔 : --benefit-month-gap
   すべての画面幅で、見出し文字の開始位置をバッジの外側に固定します。
*/
.reference-style-page .benefit-heading {
  --benefit-month-size: clamp(73.6px, 22.4vw, 107.2px);
  --benefit-month-gap: clamp(12px, 3.6vw, 18px);
  min-height: clamp(84px, 20vw, 96px);
  padding-left: calc(var(--benefit-month-size) + var(--benefit-month-gap));
}

.reference-style-page .benefit-heading .month-sticker {
  top: 50%;
  left: 0;
  width: var(--benefit-month-size);
  height: var(--benefit-month-size);
  transform: translateY(-50%);
}

.reference-style-page .benefit-heading h2.benefit-heading-text {
  inset: 0 10px 0 calc(var(--benefit-month-size) + var(--benefit-month-gap));
  min-width: 0;
  font-size: clamp(1.62rem, 11vw, 3.32rem);
  letter-spacing: .025em;
  white-space: nowrap;
}

.reference-style-page .benefit-heading::before {
  left: calc(var(--benefit-month-size) - 22px);
}

@media (max-width: 359px) {
  .reference-style-page .benefit-heading h2.benefit-heading-text {
    inset: 0 8px 0 calc(var(--benefit-month-size) + var(--benefit-month-gap));
    font-size: clamp(1.42rem, 8vw, 1.6rem);
  }
}


/* ===== 編集用｜特典見出しの中央配置と特典本文の文字サイズ =====
   見出し : 赤い帯の中央へ配置しつつ、10月バッジとは重ならない大きさにします。
   特典本文 : .benefit-copy / .benefit-amount / .benefit-highlight / .benefit-ribbon
*/
.reference-style-page .benefit-heading {
  --benefit-title-bar-start: calc(var(--benefit-month-size) - 18px);
}

.reference-style-page .benefit-heading::before {
  left: var(--benefit-title-bar-start);
}

.reference-style-page .benefit-heading h2.benefit-heading-text {
  inset: 0 0 0 var(--benefit-title-bar-start);
  box-sizing: border-box;
  padding: 0 10px;
  font-size: clamp(1.45rem, 9vw, 2.93rem);
  letter-spacing: .02em;
}

/* 特典内容は従来の約0.8倍。画像との余白・折返しを保ちながら読みやすく調整。 */
.reference-style-page .benefit-ribbon {
  min-width: 132px;
  height: 34px;
  padding: 0 27px 0 13px;
  font-size: 22px;
}

.reference-style-page .benefit-copy {
  font-size: 1.72rem;
  line-height: 1.34;
}

.reference-style-page .benefit-amount {
  font-size: clamp(2rem, 10.08vw, 2.93rem);
}

.reference-style-page .benefit-highlight {
  font-size: clamp(1.84rem, 8.4vw, 2.44rem);
}

.reference-style-page .benefit-card-contract .benefit-amount {
  font-size: clamp(1.8rem, 8vw, 2.56rem);
}

@media (max-width: 559px) {
  .reference-style-page .benefit-copy {
    font-size: clamp(1.32rem, 5.6vw, 1.64rem);
    line-height: 1.42;
  }

  .reference-style-page .benefit-highlight {
    font-size: clamp(1.36rem, 6.4vw, 1.8rem);
  }
}

@media (max-width: 359px) {
  .reference-style-page .benefit-heading h2.benefit-heading-text {
    inset: 0 0 0 var(--benefit-title-bar-start);
    padding: 0 7px;
    font-size: clamp(1.28rem, 8.45vw, 1.5rem);
  }

  .reference-style-page .benefit-ribbon {
    min-width: 118px;
    height: 31px;
    padding-right: 23px;
    padding-left: 11px;
    font-size: 19px;
  }
}


/* ===== 編集用｜レンタルの流れをすごろくコマ風にするデザイン =====
   コマの大きさ : .step-flow-card の min-height・padding
   番号コマ : .step-flow-number
   コマ間の進行ライン : .step-flow-card::after
*/
.reference-style-page .step-flow-list--rental {
  position: relative;
  gap: 40px 18px;
  padding: 22px 3px 8px;
}

.reference-style-page .step-flow-card {
  position: relative;
  isolation: isolate;
  min-height: 282px;
  justify-content: flex-start;
  overflow: visible;
  padding: 58px 15px 18px;
  background-color: #fffdfd;
  background-image: radial-gradient(circle, rgba(186, 7, 20, .19) 0 2px, transparent 2.45px);
  background-position: 5px 5px;
  background-size: 14px 14px;
  border: 2px solid rgba(255, 255, 255, .98);
  box-shadow: 0 0 0 3px rgba(133, 0, 10, .18), 4px 5px 0 rgba(117, 15, 29, .18);
}

.reference-style-page .step-flow-card:nth-child(even) {
  background-color: #fff5f7;
  transform: translateY(18px);
}

.reference-style-page .step-flow-card--last {
  width: calc(50% - 9px);
  min-height: 224px;
  margin: 0;
  justify-self: center;
  background-color: #fff7f8;
}

.reference-style-page .step-flow-number {
  position: absolute;
  top: -30px;
  left: 50%;
  display: grid;
  width: 60px;
  height: 60px;
  min-height: 0;
  margin: 0;
  padding: 0;
  place-items: center;
  color: var(--white);
  background: var(--pink-deep);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(133, 0, 10, .42), 0 4px 0 rgba(117, 15, 29, .2);
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  transform: translateX(-50%);
}

.reference-style-page .step-flow-card:nth-child(even) .step-flow-number { background: #c84655; }
.reference-style-page .step-flow-card--last .step-flow-number { background: #a91c2d; }

.reference-style-page .step-flow-card h3 {
  margin: 0 0 10px;
  color: var(--pink-deep);
  font-size: clamp(.97rem, 4vw, 1.16rem);
  line-height: 1.42;
}

.reference-style-page .step-flow-card p {
  color: #4d3e46;
  font-size: clamp(.72rem, 2.8vw, .84rem);
  font-weight: 700;
  line-height: 1.64;
  text-align: center;
}

.reference-style-page .step-flow-card--last p { max-width: none; }

/* 実際のステップ順を示す進行ライン。カード間をつなぐためだけに使用。 */
.reference-style-page .step-flow-card:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  width: 2px;
  height: 28px;
  background: repeating-linear-gradient(to bottom, rgba(133, 0, 10, .55) 0 5px, transparent 5px 9px);
  content: "";
  pointer-events: none;
}

.reference-style-page .step-flow-card:nth-child(1)::after,
.reference-style-page .step-flow-card:nth-child(3)::after {
  top: 50%;
  right: -18px;
  width: 18px;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(133, 0, 10, .55) 0 5px, transparent 5px 9px);
}

.reference-style-page .step-flow-card:nth-child(2)::after,
.reference-style-page .step-flow-card:nth-child(4)::after {
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 359px) {
  .reference-style-page .step-flow-list--rental {
    gap: 38px;
    padding-top: 24px;
  }

  .reference-style-page .step-flow-card,
  .reference-style-page .step-flow-card:nth-child(even),
  .reference-style-page .step-flow-card--last {
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .reference-style-page .step-flow-card { padding: 54px 16px 19px; }

  .reference-style-page .step-flow-card:not(:last-child)::after,
  .reference-style-page .step-flow-card:nth-child(1)::after,
  .reference-style-page .step-flow-card:nth-child(3)::after {
    top: auto;
    right: auto;
    bottom: -31px;
    left: 50%;
    width: 2px;
    height: 28px;
    background: repeating-linear-gradient(to bottom, rgba(133, 0, 10, .55) 0 5px, transparent 5px 9px);
    transform: translateX(-50%);
  }
}


/* ===== 比較用｜カード型レンタルフロー =====
   fair2-flow-original.html のみで有効です。通常の fair2.html はすごろく型のままです。
*/
.flow-original-preview .step-flow-list--rental {
  gap: 12px;
  padding: 0;
}

.flow-original-preview .step-flow-card,
.flow-original-preview .step-flow-card:nth-child(even) {
  min-height: 230px;
  padding: 14px 12px 16px;
  background: var(--white);
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 4px 4px 0 rgba(117, 15, 29, .18);
  transform: none;
}

.flow-original-preview .step-flow-card--last {
  width: auto;
  min-height: 190px;
  margin: 0;
  justify-self: auto;
}

.flow-original-preview .step-flow-number {
  position: static;
  display: inline-flex;
  width: max-content;
  height: auto;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  padding: 3px 10px;
  color: var(--white);
  background: var(--pink-deep);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  transform: none;
}

.flow-original-preview .step-flow-number::before { content: "STEP "; }
.flow-original-preview .step-flow-card:nth-child(even) .step-flow-number,
.flow-original-preview .step-flow-card--last .step-flow-number { background: var(--pink-deep); }

.flow-original-preview .step-flow-card h3 {
  margin: 0 0 10px;
  color: var(--pink-deep);
  font-size: clamp(1rem, 4.15vw, 1.24rem);
  line-height: 1.38;
}

.flow-original-preview .step-flow-card p {
  color: #4d3e46;
  font-size: clamp(.78rem, 3.15vw, .9rem);
  font-weight: 500;
  line-height: 1.72;
  text-align: left;
}

.flow-original-preview .step-flow-card--last p { max-width: 31em; margin: 0 auto; text-align: center; }
.flow-original-preview .step-flow-card::after { content: none; }

@media (max-width: 359px) {
  .flow-original-preview .step-flow-list--rental { gap: 12px; padding-top: 0; }
  .flow-original-preview .step-flow-card,
  .flow-original-preview .step-flow-card:nth-child(even),
  .flow-original-preview .step-flow-card--last {
    width: auto;
    min-height: 0;
    padding: 14px 12px 16px;
    transform: none;
  }
  .flow-original-preview .step-flow-card p,
  .flow-original-preview .step-flow-card--last p { text-align: center; }
}


/* ===== 編集用｜レンタルすごろくのSTEP表記・コマ配置 =====
   コマ内は白い無地、丸いコマにはSTEPと数字を表示します。
*/
.reference-style-page:not(.flow-original-preview) .step-flow-list--rental {
  gap: 46px 44px;
}

/* すごろくの順路を 1→2→3→4→5 にするため、2段目は右から左へ進みます。 */
.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(4) { grid-column: 1; grid-row: 2; }

/* コマ内のドット柄を削除し、段差をなくして接続線をまっすぐにします。 */
.reference-style-page:not(.flow-original-preview) .step-flow-card,
.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(even),
.reference-style-page:not(.flow-original-preview) .step-flow-card--last {
  background-color: #fffdfd;
  background-image: none;
}

.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(even) {
  transform: none;
}

/* 丸いコマの中にSTEPと数字を上下中央で配置 */
.reference-style-page:not(.flow-original-preview) .step-flow-number {
  display: flex;
  min-height: 60px;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  justify-content: center;
  padding: 4px 0 3px;
}

.reference-style-page:not(.flow-original-preview) .step-flow-number span {
  display: block;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
}

.reference-style-page:not(.flow-original-preview) .step-flow-number strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: .9;
}

@media (max-width: 359px) {
  .reference-style-page:not(.flow-original-preview) .step-flow-list--rental {
    gap: 54px;
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(3),
  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
}


/* ===== 編集用｜レンタルすごろくの接続線 =====
   矢印画像は使用せず、順路を少し太めの点線で示します。
   STEP 5 は STEP 4 の真下へ置き、最後の接続も斜めにせず垂直の直線にしています。
*/
.reference-style-page:not(.flow-original-preview) .step-flow-card:not(:last-child)::after {
  z-index: 2;
  box-sizing: border-box;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* STEP 1 - STEP 2 */
.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(1)::after {
  top: 50%;
  right: -44px;
  bottom: auto;
  left: auto;
  width: 44px;
  height: 0;
  border-top: 4px dotted #8f1524;
  transform: translateY(-2px);
}

/* STEP 2 - STEP 3 */
.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(2)::after {
  top: auto;
  right: auto;
  bottom: -46px;
  left: 50%;
  width: 0;
  height: 46px;
  border-left: 4px dotted #8f1524;
  transform: translateX(-2px);
}

/* STEP 3 - STEP 4 */
.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(3)::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: -44px;
  width: 44px;
  height: 0;
  border-top: 4px dotted #8f1524;
  transform: translateY(-2px);
}

/* STEP 4 - STEP 5：上下を揃え、垂直の点線でまっすぐ接続 */
.reference-style-page:not(.flow-original-preview) .step-flow-card--last {
  grid-column: 1;
  grid-row: 3;
  width: auto;
  justify-self: stretch;
}

.reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(4)::after {
  top: auto;
  right: auto;
  bottom: -46px;
  left: 50%;
  width: 0;
  height: 46px;
  border-left: 4px dotted #8f1524;
  transform: translateX(-2px);
}

@media (max-width: 359px) {
  /* 小型スマホは1列のため、すべて縦の直線で接続 */
  .reference-style-page:not(.flow-original-preview) .step-flow-card:not(:last-child)::after,
  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(1)::after,
  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(2)::after,
  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(3)::after,
  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(4)::after {
    top: auto;
    right: auto;
    bottom: -54px;
    left: 50%;
    width: 0;
    height: 54px;
    border-top: 0;
    border-left: 4px dotted #8f1524;
    transform: translateX(-2px);
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-card--last {
    grid-column: auto;
    grid-row: auto;
  }
}


/* ===== 編集用｜fair2写真ループ =====
   PC背景写真 : .side-photo-loop
   ACCESS前写真 : .access-photo-loop
   写真の並び順は fair2.html の各 __set 内で変更できます。
   同じ写真セットを2回並べ、transformのみで動かすことで途切れない軽量ループにしています。
*/
.side-photo-loop { display: none; }

.reference-style-page .access-photo-loop {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 14px 0;
  background: #f7d8da;
  border-top: 1px solid rgba(169, 28, 45, .18);
  border-bottom: 1px solid rgba(169, 28, 45, .18);
  content-visibility: auto;
  contain-intrinsic-size: 170px;
}

.reference-style-page .access-photo-loop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: fair2-access-photo-loop 78s linear infinite;
}

.reference-style-page .access-photo-loop__set {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 0 5px;
}

.reference-style-page .access-photo-loop__item {
  width: clamp(106px, 31vw, 145px);
  height: clamp(142px, 41vw, 192px);
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  background: #fffdfd;
  border: 3px solid rgba(255, 253, 253, .96);
  box-shadow: 0 4px 10px rgba(117, 15, 29, .16);
}

.reference-style-page .access-photo-loop__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@keyframes fair2-access-photo-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (min-width: 1000px) {
  /* PC背景専用: 中央のメインスクロールの背面を横断する写真ループ */
  .reference-style-page .side-photo-loop {
    position: fixed;
    top: 53dvh;
    right: 0;
    left: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .reference-style-page .side-photo-loop__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: fair2-side-photo-loop 96s linear infinite;
  }

  .reference-style-page .side-photo-loop__set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(13px, 1.5vw, 28px);
    padding: 0 clamp(8px, 1vw, 18px);
  }

  .reference-style-page .side-photo-loop__item {
    width: clamp(116px, 10.2vw, 174px);
    height: clamp(174px, 15.3vw, 260px);
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    background: #fffdfd;
    border: 4px solid rgba(255, 253, 253, .96);
    box-shadow: 0 8px 17px rgba(117, 15, 29, .18);
  }

  .reference-style-page .side-photo-loop__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .reference-style-page .access-photo-loop {
    padding: 18px 0;
  }

  .reference-style-page .access-photo-loop__set {
    gap: 14px;
    padding: 0 7px;
  }

  .reference-style-page .access-photo-loop__item {
    width: 148px;
    height: 198px;
    border-width: 4px;
  }

  @keyframes fair2-side-photo-loop {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-style-page .side-photo-loop__track,
  .reference-style-page .access-photo-loop__track {
    animation: none;
  }

  .reference-style-page .side-photo-loop__set[aria-hidden="true"],
  .reference-style-page .access-photo-loop__set[aria-hidden="true"] {
    display: none;
  }
}


/* ===== 編集用｜fair2二段写真スライド（ACCESS直前） =====
   上段  : 左へ流れる .access-photo-loop__row--top
   下段  : 右へ流れる .access-photo-loop__row--bottom
   ドラッグ操作 : js/fair2-photo-loop.js
   写真の白い枠線は border: 0 で無効化しています。
*/
.reference-style-page .access-photo-loop {
  padding: 10px 0;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  /* 2段の写真を約1.5倍にした表示高さを確保し、表示前のレイアウトずれを抑えます。 */
  contain-intrinsic-size: 350px;
}

.reference-style-page .access-photo-loop.is-dragging { cursor: grabbing; }

.reference-style-page .access-photo-loop__rows {
  display: grid;
  gap: 9px;
}

.reference-style-page .access-photo-loop__row {
  overflow: hidden;
  overscroll-behavior-inline: contain;
}

.reference-style-page .access-photo-loop__track {
  /* 写真幅1.5倍に合わせて時間も1.5倍にし、流れる見かけの速さを維持します。 */
  animation-duration: 99s;
}

.reference-style-page .access-photo-loop__row--bottom .access-photo-loop__track {
  animation-direction: reverse;
}

/* 写真周りの白ふちを削除 */
.reference-style-page .access-photo-loop__item,
.reference-style-page .side-photo-loop__item {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reference-style-page .access-photo-loop__item {
  /* ACCESS直前の二段スライド写真：従来の約1.5倍 */
  width: clamp(117px, 31.5vw, 153px);
  height: clamp(150px, 40.5vw, 198px);
}

/* ドラッグ中は該当する行だけ自動アニメーションを停止し、JSで位置を保持します。 */
.reference-style-page .access-photo-loop__track.is-dragging {
  animation: none;
  will-change: transform;
}

@media (min-width: 1000px) {
  .reference-style-page .access-photo-loop {
    padding: 12px 0;
    contain-intrinsic-size: 462px;
  }

  .reference-style-page .access-photo-loop__rows { gap: 12px; }

  .reference-style-page .access-photo-loop__item {
    width: 168px;
    height: 213px;
  }
}


/* ===== 編集用｜写真スライドの手動ドラッグ操作 =====
   写真行を左右どちらにも直接ドラッグできます。
   touch-action: none により、画像上での横スワイプをブラウザの標準操作に奪われないようにしています。
*/
.reference-style-page .access-photo-loop__row {
  cursor: grab;
  touch-action: none;
}

.reference-style-page .access-photo-loop.is-dragging .access-photo-loop__row { cursor: grabbing; }

.reference-style-page .access-photo-loop__item img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* ===== 編集用｜PC背景スライドの形状切り抜き =====
   PC表示だけに適用します。写真自体を和風形状の透過WebPにしているため、
   写真の外側は完全に透明です。フレーム線は重ねず、切り抜き形状だけを表示します。
*/
@media (min-width: 1000px) {
  .reference-style-page .side-photo-loop__item {
    width: clamp(120px, 11.5vw, 184px);
    height: auto;
    aspect-ratio: 341 / 470;
    position: relative;
    overflow: visible;
    isolation: isolate;
  }

  .reference-style-page .side-photo-loop__item img {
    display: block;
    object-fit: fill;
  }

  /* ===== 編集用｜PC背景写真スライドのランダム配置 =====
     背景スライドだけ、写真ごとにサイズ・上下位置・横方向の間隔を不均一にしています。
     nth-child ごとの width / margin-top / margin-left を変えると、写真単位で調整できます。
     13枚目までの指定は、ループ用に複製した後半セットにも同じ形で反映されます。
  */
  .reference-style-page .side-photo-loop {
    top: 54dvh;
    /* 写真を約1.4倍にした分、切れないよう背景レールの高さも広げる。 */
    height: clamp(520px, 40.6vw, 585px);
  }

  .reference-style-page .side-photo-loop__set {
    align-items: flex-start;
    gap: clamp(8px, 1vw, 19px);
    padding: 0 clamp(10px, 1.1vw, 22px);
  }

  .reference-style-page .side-photo-loop__item { margin: 0; }
  /* 幅は従来の約1.4倍。ランダムな上下位置・横間隔は維持する。 */
  .reference-style-page .side-photo-loop__item:nth-child(13n + 1)  { width: clamp(174px, 13.58vw, 218px); margin-top: 82px; }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 2)  { width: clamp(202px, 15.4vw, 248px); margin-top: 24px; margin-left: clamp(7px, .8vw, 15px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 3)  { width: clamp(165px, 12.74vw, 204px); margin-top: 119px; margin-left: clamp(3px, .4vw, 8px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 4)  { width: clamp(216px, 16.52vw, 258px); margin-top: 2px; margin-left: clamp(9px, 1.1vw, 21px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 5)  { width: clamp(185px, 14.42vw, 230px); margin-top: 65px; }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 6)  { width: clamp(224px, 17.08vw, 258px); margin-top: 30px; margin-left: clamp(4px, .5vw, 10px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 7)  { width: clamp(169px, 13.02vw, 210px); margin-top: 143px; margin-left: clamp(10px, 1.2vw, 23px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 8)  { width: clamp(210px, 16.1vw, 253px); margin-top: 9px; }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 9)  { width: clamp(190px, 14.7vw, 235px); margin-top: 93px; margin-left: clamp(6px, .7vw, 13px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 10) { width: clamp(162px, 12.6vw, 202px); margin-top: 39px; margin-left: clamp(11px, 1.3vw, 25px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 11) { width: clamp(218px, 16.8vw, 258px); margin-top: 54px; }
  .reference-style-page .side-photo-loop__item:nth-child(13n + 12) { width: clamp(179px, 13.72vw, 220px); margin-top: 121px; margin-left: clamp(8px, .9vw, 17px); }
  .reference-style-page .side-photo-loop__item:nth-child(13n)      { width: clamp(204px, 15.68vw, 246px); margin-top: 15px; margin-left: clamp(3px, .4vw, 8px); }
}

/* ===== 比較用｜PC背景スライドを通常の長方形写真にする場合 =====
   URL末尾に ?side-photo=rect を付けた時だけ適用します。
   現行の和風フレーム型は ?side-photo=frame またはパラメータなしで表示します。
   四角版も写真ごとに幅・上下位置・横余白を変え、整列しすぎない流れを保ちます。 */
@media (min-width: 1000px) {
  html.side-photo-variant--rect .reference-style-page .side-photo-loop {
    height: clamp(555px, 42vw, 625px);
  }

  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item {
    height: auto;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    isolation: auto;
  }

  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 1)  { width: clamp(166px, 12.9vw, 212px); margin-top: 111px; margin-left: clamp(4px, .5vw, 10px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 2)  { width: clamp(211px, 16.35vw, 254px); margin-top: 29px; margin-left: clamp(10px, 1.1vw, 21px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 3)  { width: clamp(177px, 13.75vw, 218px); margin-top: 152px; }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 4)  { width: clamp(225px, 17.45vw, 264px); margin-top: 5px; margin-left: clamp(5px, .6vw, 12px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 5)  { width: clamp(184px, 14.3vw, 224px); margin-top: 80px; margin-left: clamp(9px, 1vw, 19px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 6)  { width: clamp(215px, 16.7vw, 260px); margin-top: 48px; }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 7)  { width: clamp(171px, 13.3vw, 214px); margin-top: 168px; margin-left: clamp(6px, .7vw, 14px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 8)  { width: clamp(237px, 18.4vw, 270px); margin-top: 17px; margin-left: clamp(7px, .8vw, 15px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 9)  { width: clamp(192px, 14.9vw, 232px); margin-top: 106px; }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 10) { width: clamp(176px, 13.7vw, 216px); margin-top: 59px; margin-left: clamp(11px, 1.3vw, 25px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 11) { width: clamp(225px, 17.5vw, 266px); margin-top: 71px; margin-left: clamp(3px, .4vw, 8px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n + 12) { width: clamp(169px, 13.15vw, 208px); margin-top: 137px; margin-left: clamp(8px, .9vw, 17px); }
  html.side-photo-variant--rect .reference-style-page .side-photo-loop__item:nth-child(13n)      { width: clamp(206px, 16vw, 248px); margin-top: 25px; }
}


/* ===== 編集用｜振袖レンタル案内・公式LINE =====
   スタジオ撮影プレゼントの直後に表示する紹介ブロックです。
   見出し       : .rental-value-brand-message h2
   4つの紹介項目: .rental-value-item
   丸写真       : .rental-value-photo / img の object-position
   LINEボタン   : .rental-value-line a
*/
.reference-style-page .rental-value-area {
  position: relative;
  padding: clamp(40px, 9vw, 52px) var(--content-gutter) clamp(48px, 10vw, 62px);
  color: var(--pink-deep);
  background-color: #ffebee;
}

.reference-style-page .rental-value-inner {
  width: min(100%, 466px);
  margin: 0 auto;
}

.reference-style-page .rental-value-heading {
  margin: 0 auto clamp(24px, 6vw, 32px);
  text-align: center;
}

.reference-style-page .rental-value-brand-message {
  position: relative;
  max-width: 446px;
  /* 左下テープと補足文の間に十分な余白を取ります。 */
  margin: 0 auto clamp(66px, 15vw, 74px);
  /* 右上の縦長テープを避ける右側余白です。 */
  padding: 18px clamp(62px, 16vw, 80px) 19px clamp(20px, 6vw, 36px);
  background: rgba(255, 253, 253, .9);
  border-top: 2px solid rgba(133, 0, 10, .32);
  border-bottom: 2px solid rgba(133, 0, 10, .32);
}

.reference-style-page .rental-value-brand-message h2 {
  position: relative;
  z-index: 1;
  max-width: 25em;
  margin: 0 auto;
  color: #85000a;
  font-family: var(--sans);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.58;
  text-align: center;
  text-wrap: balance;
}

.reference-style-page .rental-value-accent {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.reference-style-page .rental-value-accent--stripe {
  /* テープ1: ユーザー提供の縦長ストライプを見出し枠の右上へ。 */
  top: -14px;
  right: -20px;
  width: clamp(48px, 13vw, 62px);
  transform: rotate(-8deg);
}

.reference-style-page .rental-value-accent--dot {
  /* テープ2: ユーザー提供のドット柄テープを見出し枠の左下へ。 */
  bottom: -51px;
  left: -62px;
  width: clamp(90px, 25vw, 110px);
  transform: rotate(-7deg);
}

.reference-style-page .rental-value-heading > p {
  max-width: 31em;
  margin: 0 auto;
  color: #68434c;
  font-family: var(--sans);
  font-size: clamp(.8rem, 3.3vw, .94rem);
  font-weight: 700;
  line-height: 1.75;
}

.reference-style-page .rental-value-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .rental-value-item {
  display: grid;
  grid-template-columns: clamp(122px, 34vw, 164px) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(15px, 4vw, 22px);
  min-width: 0;
  text-align: left;
}

.reference-style-page .rental-value-item:nth-child(even) {
  transform: none;
}

.reference-style-page .rental-value-photo {
  width: 100%;
  aspect-ratio: 1;
  margin: 3px 0 0;
  overflow: hidden;
  background: #fffdfd;
  border: 4px solid #fffdfd;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(189, 7, 19, .34), 0 6px 13px rgba(117, 15, 29, .15);
}

.reference-style-page .rental-value-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.reference-style-page .rental-value-item:nth-child(1) .rental-value-photo img { object-position: 50% 31%; }
.reference-style-page .rental-value-item:nth-child(2) .rental-value-photo img { object-position: 78% 49%; }
.reference-style-page .rental-value-item:nth-child(3) .rental-value-photo img { object-position: 57% 55%; }
.reference-style-page .rental-value-item:nth-child(4) .rental-value-photo img { object-position: center; }

.reference-style-page .rental-value-photo--line {
  display: grid;
  place-items: center;
  overflow: visible;
  background: #ffe4ec;
  border-color: #ffe4ec;
  box-shadow: none;
}

.reference-style-page .rental-value-photo--line span {
  position: relative;
  display: grid;
  width: 72%;
  aspect-ratio: 1 / .8;
  place-items: center;
  color: #fff;
  background: #06c755;
  border-radius: 15%;
  box-shadow: 0 4px 10px rgba(6, 199, 85, .18);
  font-family: Arial, sans-serif;
  font-size: clamp(.82rem, 3.8vw, 1.1rem);
  font-weight: 900;
  letter-spacing: -.06em;
}

.reference-style-page .rental-value-photo--line span::after {
  position: absolute;
  right: 11%;
  bottom: -11%;
  width: 22%;
  height: 22%;
  background: #06c755;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  content: "";
}

.reference-style-page .rental-value-point {
  display: flex;
  align-items: baseline;
  margin: -3px 0 3px;
  color: #dc6295;
  font-family: var(--sans);
  font-size: clamp(.82rem, 3.4vw, 1rem);
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
}

.reference-style-page .rental-value-point span {
  display: inline-block;
  margin-left: 2px;
  color: #e45a91;
  font-size: clamp(1.9rem, 8.4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .78;
}

.reference-style-page .rental-value-copy h3 {
  margin: 0 0 8px;
  color: #db5f96;
  font-family: var(--sans);
  font-size: clamp(.95rem, 4.05vw, 1.22rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.42;
}

.reference-style-page .rental-value-detail {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #3e3438;
  font-family: var(--sans);
  font-size: clamp(.69rem, 2.82vw, .81rem);
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.58;
}

.reference-style-page .rental-value-detail span {
  display: block;
}

.reference-style-page .rental-value-line {
  margin: clamp(40px, 10vw, 56px) auto 0;
  padding: 20px clamp(16px, 5vw, 26px) 22px;
  background: #bd0713;
  border: 2px solid rgba(255, 253, 253, .9);
  box-shadow: 0 5px 0 rgba(112, 0, 8, .18);
  text-align: center;
}

.reference-style-page .rental-value-line p {
  margin: 0 0 12px;
  color: #fffefe;
  font-family: var(--sans);
  font-size: clamp(.78rem, 3.3vw, .92rem);
  font-weight: 700;
  line-height: 1.55;
}

.reference-style-page .rental-value-line__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 520px);
  margin: 0 auto;
}

.reference-style-page .rental-value-line a {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 10px 18px;
  color: #85000a;
  background: #fffefe;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(92, 0, 7, .24);
  font-family: var(--sans);
  font-size: clamp(1rem, 4.1vw, 1.17rem);
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.reference-style-page .rental-value-line a:hover,
.reference-style-page .rental-value-line a:focus-visible {
  color: #fffefe;
  background: #85000a;
  outline: 3px solid rgba(255, 255, 255, .88);
  outline-offset: 3px;
}

.reference-style-page .rental-value-line a:active {
  box-shadow: 0 1px 0 rgba(92, 0, 7, .24);
  transform: translateY(2px);
}

@media (max-width: 359px) {
  .reference-style-page .rental-value-area { padding-right: 13px; padding-left: 13px; }
  .reference-style-page .rental-value-brand-message { margin-bottom: 66px; padding: 17px 54px 18px 16px; }
  .reference-style-page .rental-value-accent--stripe { top: -13px; right: -16px; width: 46px; }
  .reference-style-page .rental-value-accent--dot { bottom: -47px; left: -55px; width: 86px; }

  .reference-style-page .rental-value-list {
    gap: 20px;
  }

  .reference-style-page .rental-value-item {
    grid-template-columns: minmax(104px, 35vw) minmax(0, 1fr);
    column-gap: 13px;
  }

  .reference-style-page .rental-value-photo {
    margin: 0;
  }

  .reference-style-page .rental-value-point { margin-bottom: 2px; font-size: .75rem; }
  .reference-style-page .rental-value-point span { font-size: 1.8rem; }
  .reference-style-page .rental-value-copy h3 { margin-bottom: 5px; font-size: .86rem; line-height: 1.38; }
  .reference-style-page .rental-value-detail { gap: 1px; font-size: .63rem; line-height: 1.52; }
  .reference-style-page .rental-value-line { margin-top: 30px; padding-right: 12px; padding-left: 12px; }
  .reference-style-page .rental-value-line__buttons { gap: 7px; }
  .reference-style-page .rental-value-line a { min-height: 52px; padding-right: 5px; padding-left: 5px; font-size: 13px; letter-spacing: .02em; }
}


/* ===== 編集用｜次世代型 着物レンタルショップ BLANCO =====
   参考画像のサービス構成をfair2の幅に合わせて再構成しています。
   見出し・丸いサービス項目・6つの特長・嬉しい声はfair2.htmlの
   .rental-value-nextgen 内を直接編集できます。
*/
.reference-style-page .rental-value-nextgen {
  margin: 0;
  padding: clamp(4px, 1vw, 9px) 0 0;
  color: #272027;
}

.reference-style-page .rental-value-nextgen > h3 {
  margin: 0;
  color: #272027;
  font-family: var(--sans);
  font-size: clamp(1.22rem, 5.5vw, 1.72rem);
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.42;
  text-align: center;
}

.reference-style-page .rental-value-nextgen > h3 span {
  white-space: nowrap;
}

.reference-style-page .rental-value-nextgen > h3 strong {
  display: inline-block;
  font-weight: 900;
  letter-spacing: .08em;
}

.reference-style-page .nextgen-service-visual {
  display: grid;
  gap: 15px;
  margin: clamp(21px, 5vw, 30px) 0 clamp(21px, 5vw, 29px);
}

.reference-style-page .nextgen-burst {
  position: relative;
  display: grid;
  width: min(100%, 178px);
  min-height: 72px;
  align-content: center;
  justify-items: center;
  justify-self: center;
  padding: 11px 14px 12px;
  background: #fff;
  filter: drop-shadow(3px 4px 0 rgba(39, 32, 39, .38));
  font-family: var(--sans);
  line-height: 1.1;
  text-align: center;
  clip-path: polygon(50% 0, 61% 13%, 77% 7%, 82% 23%, 100% 27%, 91% 43%, 98% 56%, 82% 64%, 79% 82%, 62% 79%, 50% 100%, 39% 79%, 22% 84%, 18% 65%, 0 58%, 9% 43%, 2% 27%, 20% 23%, 24% 6%, 40% 13%);
}

.reference-style-page .nextgen-burst::before {
  position: absolute;
  z-index: -1;
  inset: 3px;
  background: #272027;
  content: "";
  clip-path: inherit;
}

.reference-style-page .nextgen-burst strong {
  display: inline-block;
  padding: 4px 12px 5px;
  background: #ffe241;
  font-size: 1.05rem;
  font-weight: 900;
}

.reference-style-page .nextgen-burst span {
  margin-top: 6px;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.reference-style-page .nextgen-service-bubbles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(4px, 1.6vw, 9px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .nextgen-service-bubbles li {
  display: grid;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: 4px;
  background: #ffe25a;
  border-radius: 50%;
  color: #30292a;
  font-family: var(--sans);
  font-size: clamp(.66rem, 3vw, .92rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.36;
  text-align: center;
}

.reference-style-page .rental-value-nextgen > h4 {
  margin: 0;
  color: #272027;
  font-family: var(--sans);
  font-size: clamp(1.08rem, 4.75vw, 1.48rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.48;
  text-align: center;
}

.reference-style-page .nextgen-feature-list {
  display: grid;
  gap: 8px;
  margin: clamp(19px, 5vw, 27px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: nextgen-feature;
}

.reference-style-page .nextgen-feature-list li {
  position: relative;
  min-height: 38px;
  padding: 8px 11px 8px 42px;
  background: rgba(255, 253, 253, .8);
  border-left: 4px solid #e7729e;
  color: #30292a;
  font-family: var(--sans);
  font-size: clamp(.78rem, 3.3vw, .96rem);
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.55;
  counter-increment: nextgen-feature;
}

.reference-style-page .nextgen-feature-list li::before {
  position: absolute;
  top: 50%;
  left: 10px;
  color: #e05a91;
  content: counter(nextgen-feature) ".";
  font-size: 1.04em;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

.reference-style-page .nextgen-voices {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: clamp(25px, 6vw, 36px) 0 0;
}

.reference-style-page .nextgen-voices > h4 {
  margin: 0;
  color: #272027;
  font-family: var(--sans);
  font-size: clamp(.95rem, 4vw, 1.15rem);
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.2;
  writing-mode: vertical-rl;
}

.reference-style-page .nextgen-voices ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(4px, 1.5vw, 9px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .nextgen-voices li {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: 4px;
  background: #f9b9c7;
  border-radius: 50%;
  color: #30292a;
  font-family: var(--sans);
  font-size: clamp(.45rem, 1.95vw, .6rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 430px) {
  .reference-style-page .nextgen-voices {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .reference-style-page .nextgen-voices > h4 {
    justify-self: center;
    writing-mode: horizontal-tb;
  }

  .reference-style-page .nextgen-voices ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .reference-style-page .nextgen-voices li {
    font-size: clamp(.64rem, 2.8vw, .72rem);
    line-height: 1.34;
  }
}

@media (max-width: 359px) {
  .reference-style-page .rental-value-nextgen > h3 { font-size: 1.13rem; letter-spacing: 0; }
  .reference-style-page .nextgen-service-visual { gap: 12px; margin-top: 18px; }
  .reference-style-page .nextgen-burst { width: 152px; min-height: 64px; padding: 9px 12px 10px; }
  .reference-style-page .nextgen-burst strong { font-size: .93rem; }
  .reference-style-page .nextgen-burst span { font-size: 1.04rem; }
  .reference-style-page .nextgen-service-bubbles { gap: 3px; }
  .reference-style-page .nextgen-service-bubbles li { font-size: .61rem; line-height: 1.3; }
  .reference-style-page .rental-value-nextgen > h4 { font-size: 1rem; }
  .reference-style-page .nextgen-feature-list { gap: 6px; margin-top: 17px; }
  .reference-style-page .nextgen-feature-list li { min-height: 35px; padding: 7px 8px 7px 35px; font-size: .72rem; }
  .reference-style-page .nextgen-feature-list li::before { left: 8px; }
  .reference-style-page .nextgen-voices li { font-size: .67rem; }
}


/* ===== 編集用｜fair2統一デザイン：リボン・白枠・淡ピンク =====
   参考画像の枠・リボンの雰囲気を、fair2の赤・ピンク・白の配色で統一します。
*/
.reference-style-page .consultation-brand-message,
.reference-style-page .rental-value-brand-message {
  overflow: visible;
  background: #fffefe;
  border: 4px solid #85000a;
  border-radius: 14px;
  box-shadow: 0 5px 0 rgba(133, 0, 10, .16);
}

/* よくばりが叶う枠: 短い見出しでも横長の枠として見える高さを確保します。 */
.reference-style-page .consultation-brand-message {
  display: grid;
  min-height: clamp(172px, 54vw, 232px);
  align-content: center;
  margin-bottom: clamp(45px, 11vw, 54px);
  padding: 24px clamp(76px, 17vw, 88px) 24px clamp(22px, 6vw, 34px);
}

/* BLANCO紹介枠: 5行の文章を中央に保ちつつ、下側の余白を詰めます。 */
.reference-style-page .rental-value-brand-message {
  margin-bottom: clamp(45px, 11vw, 54px);
  padding: 23px clamp(76px, 17vw, 88px) 25px clamp(22px, 6vw, 34px);
}

.reference-style-page .consultation-brand-message::before,
.reference-style-page .rental-value-brand-message::before {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 10px;
  height: 10px;
  border: 2px solid #85000a;
  border-radius: 50%;
  background: #fffefe;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 3px #85000a;
  content: "";
}

.reference-style-page .consultation-brand-message::after,
.reference-style-page .rental-value-brand-message::after {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 10px;
  height: 10px;
  border: 2px solid #85000a;
  border-radius: 50%;
  background: #fffefe;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 3px #85000a;
  content: "";
}

.reference-style-page .consultation-brand-message p,
.reference-style-page .rental-value-brand-message h2 {
  color: #85000a;
}

.reference-style-page .consultation-accent--stripe {
  /* テープ1: 右上の枠線を少しまたぐ位置に置きます。 */
  top: -20px;
  right: -2px;
  width: clamp(47px, 12vw, 58px);
  transform: rotate(-9deg);
}

.reference-style-page .rental-value-accent--stripe {
  /* テープ1: 右上の枠線を少しまたぐ位置に置きます。 */
  top: -20px;
  right: -2px;
  width: clamp(47px, 12vw, 58px);
  transform: rotate(-9deg);
}

.reference-style-page .consultation-accent--dot {
  /* テープ2: 左下の枠線をまたぎ、画面端からは離します。 */
  bottom: -14px;
  left: -20px;
  width: clamp(68px, 19vw, 84px);
  transform: rotate(-7deg);
}

.reference-style-page .rental-value-accent--dot {
  /* テープ2: 左下の枠線をまたぎ、画面端からは離します。 */
  bottom: -28px;
  left: -15px;
  width: clamp(68px, 19vw, 84px);
  transform: rotate(-7deg);
}

@media (min-width: 560px) {
  .reference-style-page .rental-value-accent--dot {
    /* PCでは長い最終行から数px離し、枠線のアクセントに留めます。 */
    left: -22px;
  }
}

.reference-style-page .rental-value-heading > p {
  max-width: 30em;
  color: #85000a;
}

.reference-style-page .rental-value-heading {
  /* 左下テープと次のリボン見出しの間に余白を取ります。 */
  margin-bottom: clamp(46px, 11vw, 56px);
}

.reference-style-page .rental-value-nextgen {
  position: relative;
  /* リボンが外枠より上へ出る分を含め、補足文から見出しまでを約50px空けます。 */
  margin-top: clamp(92px, calc(11.4vw + 56px), 103px);
  padding: clamp(28px, 7vw, 36px) clamp(12px, 4vw, 20px) clamp(21px, 5vw, 29px);
  background: rgba(255, 254, 254, .86);
  border: 4px solid #85000a;
  border-radius: 15px;
  box-shadow: 0 6px 0 rgba(133, 0, 10, .16);
}

.reference-style-page .rental-value-nextgen > h3 {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 520px);
  aspect-ratio: 104 / 35;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18em;
  margin: clamp(-60px, -13vw, -44px) auto 20px;
  padding: 0 clamp(42px, 11vw, 68px);
  color: #fffefe;
  background: transparent;
  box-shadow: none;
  font-size: clamp(.84rem, 3.75vw, 1.22rem);
  letter-spacing: .025em;
  line-height: 1.16;
  text-align: center;
  white-space: nowrap;
}

.reference-style-page .rental-value-nextgen > h3 img {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.reference-style-page .rental-value-nextgen > h3 span {
  position: relative;
  z-index: 1;
  color: inherit;
  font-weight: 900;
}

.reference-style-page .rental-value-nextgen > h3 .nextgen-title-label {
  display: block;
  white-space: nowrap;
}

.reference-style-page .nextgen-service-visual {
  display: block;
  margin: 0 0 22px;
}

.reference-style-page .nextgen-burst {
  width: min(100%, 188px);
  min-height: 68px;
  padding: 10px 14px;
  background: #fffefe;
  border: 3px solid #85000a;
  border-radius: 8px;
  box-shadow: 3px 3px 0 rgba(133, 0, 10, .18);
  filter: none;
  clip-path: none;
}

.reference-style-page .nextgen-burst::before {
  display: none;
}

.reference-style-page .nextgen-burst strong {
  padding: 4px 14px 5px;
  color: #fffefe;
  background: #85000a;
  font-size: 1rem;
  letter-spacing: .06em;
}

.reference-style-page .nextgen-burst span {
  color: #85000a;
  font-size: 1.12rem;
  letter-spacing: .1em;
}

.reference-style-page .nextgen-service-bubbles {
  gap: clamp(5px, 1.8vw, 10px);
}

.reference-style-page .nextgen-service-bubbles li {
  background: #f8d9df;
  border: 2px solid #85000a;
  color: #85000a;
  box-shadow: 0 3px 0 rgba(133, 0, 10, .16);
  font-size: clamp(.66rem, 2.85vw, .84rem);
  line-height: 1.3;
}

.reference-style-page .rental-value-nextgen > h4 {
  margin: 0 auto;
  padding: 10px 13px 11px;
  color: #85000a;
  background: #fffefe;
  border-top: 2px solid #85000a;
  border-bottom: 2px solid #85000a;
  font-size: clamp(1rem, 4.25vw, 1.25rem);
  line-height: 1.45;
}

.reference-style-page .nextgen-feature-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}

.reference-style-page .nextgen-feature-list li {
  display: flex;
  min-height: 74px;
  align-items: center;
  padding: 11px 10px 11px 36px;
  background: #fffefe;
  border: 2px solid #85000a;
  border-left-width: 7px;
  border-radius: 6px;
  color: #85000a;
  box-shadow: 2px 3px 0 rgba(133, 0, 10, .12);
  font-size: clamp(.66rem, 2.75vw, .82rem);
  font-weight: 900;
  line-height: 1.45;
}

.reference-style-page .nextgen-feature-list li:nth-child(even) {
  color: #fffefe;
  background: #bd0713;
  border-color: #85000a;
}

.reference-style-page .nextgen-feature-list li::before {
  left: 9px;
  color: #e87ea6;
  font-size: .94em;
}

.reference-style-page .nextgen-feature-list li:nth-child(even)::before {
  color: #fff4f7;
}

.reference-style-page .nextgen-voices {
  display: block;
  margin-top: 28px;
  padding: 20px 12px 15px;
  background: #f8d9df;
  border: 3px solid #85000a;
  border-radius: 10px;
}

.reference-style-page .nextgen-voices > h4 {
  display: block;
  width: min(100%, 220px);
  margin: -35px auto 17px;
  padding: 7px 17px 8px;
  color: #fffefe;
  background: #85000a;
  box-shadow: 0 3px 0 #e87ea6;
  font-size: 1rem;
  letter-spacing: .12em;
  line-height: 1.2;
  text-align: center;
  writing-mode: horizontal-tb;
  clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%, 7% 50%);
}

.reference-style-page .nextgen-voices ul {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.reference-style-page .nextgen-voices li {
  padding: 5px 3px;
  background: #fffefe;
  border: 2px solid #85000a;
  border-radius: 5px;
  color: #85000a;
  box-shadow: 0 2px 0 rgba(133, 0, 10, .14);
  font-size: clamp(.47rem, 1.9vw, .59rem);
  font-weight: 900;
  line-height: 1.28;
}

@media (max-width: 430px) {
  .reference-style-page .nextgen-feature-list {
    gap: 7px;
  }

  .reference-style-page .nextgen-feature-list li {
    min-height: 70px;
    padding: 9px 7px 9px 31px;
    font-size: clamp(.62rem, 2.7vw, .76rem);
  }

  .reference-style-page .nextgen-feature-list li::before {
    left: 7px;
  }

  .reference-style-page .nextgen-voices ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .reference-style-page .nextgen-voices li {
    padding: 7px 4px;
    font-size: clamp(.62rem, 2.65vw, .7rem);
    line-height: 1.32;
  }
}

@media (max-width: 359px) {
  .reference-style-page .consultation-brand-message,
  .reference-style-page .rental-value-brand-message {
    border-width: 3px;
    border-radius: 11px;
  }

  .reference-style-page .consultation-brand-message {
    min-height: 172px;
    margin-bottom: 45px;
    padding: 20px 61px 20px 19px;
  }

  .reference-style-page .rental-value-brand-message {
    margin-bottom: 45px;
    padding: 20px 61px 22px 19px;
  }

  .reference-style-page .consultation-accent--stripe,
  .reference-style-page .rental-value-accent--stripe {
    top: -18px;
    right: -1px;
    width: 43px;
  }

  .reference-style-page .consultation-accent--dot {
    bottom: -12px;
    left: -12px;
    width: 66px;
  }

  .reference-style-page .rental-value-accent--dot {
    bottom: -25px;
    left: -8px;
    width: 66px;
  }

  .reference-style-page .rental-value-nextgen {
    padding: 26px 10px 18px;
    border-width: 3px;
    border-radius: 12px;
  }

  .reference-style-page .rental-value-nextgen > h3 {
    margin-top: -45px;
    margin-bottom: 21px;
    padding: 0 22px;
    font-size: .98rem;
  }

  .reference-style-page .nextgen-burst {
    width: 166px;
  }

  .reference-style-page .nextgen-service-bubbles li {
    font-size: .59rem;
  }

  .reference-style-page .nextgen-feature-list li {
    min-height: 69px;
    font-size: .62rem;
  }

  .reference-style-page .nextgen-voices {
    padding: 18px 8px 12px;
  }

  .reference-style-page .nextgen-voices li {
    font-size: .62rem;
  }
}

/* ===== 編集用｜よくばりが叶う枠：元の横長バランス＋テープの向きのみ変更 =====
   枠は上下の細い罫線だけに戻し、右上はストライプを「／」方向、
   左下はドットを縦方向にして、どちらも枠線に少し重ねています。
*/
.reference-style-page .consultation-brand-message {
  display: block;
  min-height: 0;
  margin-bottom: clamp(66px, 15vw, 74px);
  padding: 17px clamp(58px, 15vw, 76px) 18px clamp(20px, 6vw, 34px);
  background: rgba(255, 253, 253, .86);
  border: 0;
  border-top: 2px solid rgba(133, 0, 10, .32);
  border-bottom: 2px solid rgba(133, 0, 10, .32);
  border-radius: 0;
  box-shadow: none;
}

.reference-style-page .consultation-brand-message::before,
.reference-style-page .consultation-brand-message::after {
  content: none;
}

.reference-style-page .consultation-accent--stripe {
  /* テープ1: 右上。縦長素材を「／」方向へ回転します。 */
  top: -30px;
  right: -31px;
  width: clamp(46px, 12vw, 56px);
  transform: rotate(75deg);
}

.reference-style-page .consultation-accent--dot {
  /* テープ2: 左下。横長素材を縦方向へ回転します。 */
  bottom: -13px;
  left: -66px;
  width: clamp(68px, 19vw, 82px);
  transform: rotate(56deg);
}

@media (max-width: 359px) {
  .reference-style-page .consultation-brand-message {
    min-height: 0;
    margin-bottom: 66px;
    padding: 16px 54px 17px 17px;
    border-width: 0;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-radius: 0;
  }

  .reference-style-page .consultation-accent--stripe {
    top: -27px;
    right: -28px;
    width: 44px;
  }

  .reference-style-page .consultation-accent--dot {
    bottom: -10px;
    left: -60px;
    width: 66px;
  }
}

/* ===== 編集用｜参照画像に合わせたメッセージ枠・テープの配置 =====
   白い横長枠は上下の細い罫線のみ。テープ1は右上に縦寄り、
   テープ2は左下に横寄りで重ねます。2つの案内枠で同じ見せ方に統一します。
*/
.reference-style-page .consultation-brand-message,
.reference-style-page .rental-value-brand-message {
  overflow: visible;
  background: rgba(255, 253, 253, .9);
  border: 0;
  border-top: 2px solid rgba(133, 0, 10, .32);
  border-bottom: 2px solid rgba(133, 0, 10, .32);
  border-radius: 0;
  box-shadow: none;
}

.reference-style-page .consultation-brand-message::before,
.reference-style-page .consultation-brand-message::after,
.reference-style-page .rental-value-brand-message::before,
.reference-style-page .rental-value-brand-message::after {
  content: none;
}

.reference-style-page .consultation-brand-message {
  display: block;
  min-height: 0;
  margin-bottom: clamp(66px, 15vw, 74px);
  padding: 17px clamp(58px, 15vw, 76px) 18px clamp(20px, 6vw, 34px);
}

.reference-style-page .rental-value-brand-message {
  margin: 0 auto clamp(66px, 15vw, 74px);
  padding: 18px clamp(62px, 16vw, 80px) 19px clamp(20px, 6vw, 36px);
}

.reference-style-page .rental-value-brand-message h2 {
  max-width: 25em;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1.58;
}

.reference-style-page .consultation-accent--stripe,
.reference-style-page .rental-value-accent--stripe {
  /* テープ1: 右上。縦長素材をほぼ縦の斜め方向で見せます。 */
  top: -14px;
  right: -20px;
  width: clamp(48px, 13vw, 62px);
  transform: rotate(-8deg);
}

.reference-style-page .consultation-accent--dot,
.reference-style-page .rental-value-accent--dot {
  /* テープ2: 左下。横長素材を横に近い斜め方向で見せます。 */
  bottom: -65px;
  left: -62px;
  width: clamp(90px, 25vw, 110px);
  transform: rotate(-7deg);
}

.reference-style-page .consultation-accent--dot {
  /* 短い枠では2行目に近づかないよう、左端へ10px寄せます。 */
  left: -72px;
}

.reference-style-page .rental-value-accent--dot {
  /* 長文枠でも文字領域へ入らないよう、左端へ寄せます。 */
  left: -74px;
}

@media (max-width: 359px) {
  .reference-style-page .consultation-brand-message {
    min-height: 0;
    margin-bottom: 66px;
    padding: 16px 54px 17px 17px;
  }

  .reference-style-page .rental-value-brand-message {
    margin-bottom: 66px;
    padding: 17px 54px 18px 16px;
  }

  .reference-style-page .consultation-accent--stripe,
  .reference-style-page .rental-value-accent--stripe {
    top: -13px;
    right: -16px;
    width: 46px;
  }

  .reference-style-page .consultation-accent--dot,
  .reference-style-page .rental-value-accent--dot {
    bottom: -47px;
    left: -55px;
    width: 86px;
  }
}

/* ===== 編集用｜参照画像に合わせた最終サイズ・間隔 =====
   文章量が異なる2つの白い案内枠と、次世代型サービス案内の
   リボン・丸・特長カードを、提供画像と同じ密度に近づけます。
*/
.reference-style-page .rental-value-brand-message {
  padding: 16px clamp(54px, 14vw, 68px) 16px clamp(18px, 5vw, 28px);
}

.reference-style-page .rental-value-brand-message h2 {
  max-width: none;
  font-size: clamp(.95rem, 4.2vw, 1.15rem);
  line-height: 1.43;
}

.reference-style-page .consultation-accent--dot,
.reference-style-page .rental-value-accent--dot {
  /* 提供画像と同じく、左下から右下へ向かう斜めのドットテープです。 */
  transform: rotate(24deg);
}

.reference-style-page .rental-value-nextgen > h3 {
  width: min(70%, 260px);
  margin-top: clamp(-60px, -13vw, -44px);
  margin-bottom: 12px;
  padding: 0 16px;
  font-size: clamp(.78rem, 3.3vw, 1.08rem);
}

.reference-style-page .nextgen-service-visual {
  margin-bottom: 12px;
}

.reference-style-page .nextgen-service-bubbles {
  width: min(100%, 300px);
  margin-right: auto;
  margin-left: auto;
}

.reference-style-page .nextgen-service-bubbles li {
  box-sizing: border-box;
  min-height: 0;
}

.reference-style-page .rental-value-nextgen > h4 {
  padding: 8px 10px 9px;
  font-size: clamp(.94rem, 3.85vw, 1.13rem);
  line-height: 1.42;
}

.reference-style-page .nextgen-feature-list {
  gap: 9px;
  margin-top: 13px;
}

.reference-style-page .nextgen-feature-list li {
  min-height: 60px;
  padding: 8px 7px 8px 31px;
  font-size: clamp(.60rem, 2.45vw, .74rem);
  line-height: 1.34;
}

.reference-style-page .nextgen-feature-list li::before {
  left: 7px;
}

@media (min-width: 560px) {
  .reference-style-page .rental-value-accent--dot {
    /* PCでは長文の最終行を避け、枠の左下アクセントとして見せます。 */
    left: -96px;
  }
}

@media (max-width: 359px) {
  .reference-style-page .consultation-accent--dot {
    left: -84px;
  }

  .reference-style-page .rental-value-accent--dot {
    left: -74px;
  }

  .reference-style-page .rental-value-brand-message {
    padding: 15px 50px 15px 16px;
  }

  .reference-style-page .rental-value-brand-message h2 {
    font-size: .93rem;
    line-height: 1.4;
  }

  .reference-style-page .rental-value-nextgen > h3 {
    width: min(72%, 230px);
    margin-bottom: 10px;
    padding: 0 12px;
    font-size: .76rem;
  }

  .reference-style-page .nextgen-service-visual {
    margin-bottom: 10px;
  }

  .reference-style-page .nextgen-feature-list li {
    min-height: 58px;
    padding: 7px 6px 7px 29px;
    font-size: .59rem;
  }
}

/* ===== 編集用｜枠内に収めるテープ・中央パネルに収める見出し =====
   テープは白枠の内側だけに見せ、見出しはリボン中央の四角内へ
   2行とも上下中央に配置します。丸い項目は文字が外へ出ないサイズに保ちます。
*/
.reference-style-page .consultation-brand-message,
.reference-style-page .rental-value-brand-message {
  overflow: hidden;
}

.reference-style-page .consultation-accent--stripe,
.reference-style-page .rental-value-accent--stripe {
  top: 7px;
  right: 8px;
  width: clamp(38px, 10vw, 48px);
}

.reference-style-page .consultation-accent--dot,
.reference-style-page .rental-value-accent--dot {
  bottom: 7px;
  left: 7px;
  width: clamp(52px, 15vw, 60px);
  transform: rotate(24deg);
}

.reference-style-page .consultation-brand-message {
  padding-left: clamp(62px, 17vw, 78px);
}

.reference-style-page .rental-value-brand-message {
  padding-left: clamp(70px, 19vw, 88px);
}

.reference-style-page .rental-value-nextgen > h3 {
  width: min(100%, 340px);
  margin-top: clamp(-76px, -17vw, -58px);
  margin-bottom: 15px;
  padding: 0 clamp(44px, 15vw, 68px);
  font-size: clamp(.76rem, 3.1vw, 1rem);
  line-height: 1.15;
}

.reference-style-page .nextgen-service-bubbles {
  width: min(100%, 340px);
  gap: clamp(2px, .8vw, 4px);
}

.reference-style-page .nextgen-service-bubbles li {
  padding: 3px;
  font-size: clamp(.60rem, 2.6vw, .78rem);
  line-height: 1.25;
}

@media (max-width: 359px) {
  .reference-style-page .consultation-brand-message {
    padding-left: 58px;
  }

  .reference-style-page .rental-value-brand-message {
    padding-left: 64px;
  }

  .reference-style-page .rental-value-nextgen > h3 {
    width: min(100%, 300px);
    margin-top: -58px;
    margin-bottom: 12px;
    padding: 0 42px;
    font-size: .74rem;
  }

  .reference-style-page .nextgen-service-bubbles {
    width: 100%;
    gap: 2px;
  }

  .reference-style-page .nextgen-service-bubbles li {
    padding: 2px;
    font-size: .58rem;
    line-height: 1.22;
  }
}

/* ===== 編集用｜画像基準の固定座標（390px基準） =====
   テープは白枠を少しまたぐ大きさにし、リボンの文字は中央パネルの
   縦横中心へ絶対配置します。丸内の文字は単語途中で折り返しません。
*/
.reference-style-page .consultation-brand-message,
.reference-style-page .rental-value-brand-message {
  overflow: visible;
}

.reference-style-page .consultation-accent--stripe,
.reference-style-page .rental-value-accent--stripe {
  top: -6px;
  right: -7px;
  width: clamp(58px, 18vw, 76px);
}

.reference-style-page .consultation-accent--dot,
.reference-style-page .rental-value-accent--dot {
  bottom: -10px;
  /* よくばり枠・BLANCO紹介枠とも、前の位置から25px左へ移動します。 */
  left: -35px;
  width: clamp(64px, 20vw, 82px);
  transform: rotate(24deg);
}

.reference-style-page .rental-value-nextgen > h3 {
  display: block;
  --nextgen-panel-center-y: 50%;
  --nextgen-panel-inset: clamp(51px, 17vw, 66px);
  padding: 0;
}

.reference-style-page .rental-value-nextgen > h3 .nextgen-title-copy {
  position: absolute;
  z-index: 1;
  top: var(--nextgen-panel-center-y);
  left: 50%;
  display: grid;
  width: calc(100% - (var(--nextgen-panel-inset) * 2));
  gap: 2px;
  transform: translate(-50%, -50%);
  color: #fffefe;
  font-size: clamp(.84rem, 3.6vw, 1.08rem);
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
}

.reference-style-page .rental-value-nextgen > h3 .nextgen-title-copy > span {
  display: block;
}

.reference-style-page .nextgen-service-bubbles li {
  padding: 2px;
  font-size: clamp(.58rem, 2.55vw, .76rem);
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 359px) {
  .reference-style-page .rental-value-nextgen > h3 {
    --nextgen-panel-center-y: 50%;
    --nextgen-panel-inset: 49px;
  }

  .reference-style-page .nextgen-service-bubbles {
    gap: 1px;
  }

  .reference-style-page .nextgen-service-bubbles li {
    padding: 1px;
    font-size: .5rem;
    line-height: 1.16;
  }
}

/* ===== 編集用｜指定倍率・座標 =====
   リボン画像: 1.3倍 / 見出し文字: 1.2倍かつ25px上 /
   サービス丸と文字: 1.2倍 / 左下テープ: 1.3倍 */
.reference-style-page .consultation-accent--stripe {
  /* 「よくばりが叶う」枠: 現行から0.9倍、右端基準で15px左へ移動。 */
  top: -36px;
  right: -7px;
  width: clamp(52.2px, 16.2vw, 68.4px);
}

.reference-style-page .rental-value-accent--stripe {
  /* 「BLANCOは着物屋さんではなく」枠: 既存位置・サイズを維持。 */
  top: -36px;
  right: -22px;
}

.reference-style-page .consultation-accent--dot,
.reference-style-page .rental-value-accent--dot {
  width: clamp(83px, 26vw, 107px);
}

.reference-style-page .rental-value-nextgen > h3 img {
  transform: scale(1.3);
  transform-origin: center center;
}

.reference-style-page .rental-value-nextgen > h3 .nextgen-title-copy {
  top: calc(50% - 25px);
  font-size: clamp(1.008rem, 4.32vw, 1.296rem);
}

.reference-style-page .nextgen-service-bubbles {
  width: 120%;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.reference-style-page .nextgen-service-bubbles li {
  font-size: clamp(.696rem, 3.06vw, .912rem);
}

/* ===== 編集用｜よくばりが叶う見出しの固定2行 =====
   fair2.html の <br> で「よくばりが叶う」の後を必ず改行します。
   右上テープの位置は変えず、句点まで2行目に収めます。
*/
.reference-style-page .consultation-brand-message {
  padding-right: clamp(18px, 7.5vw, 54px);
}

.reference-style-page .consultation-brand-message p {
  max-width: none;
  font-size: clamp(13px, 3.95vw, 1.34rem);
  white-space: nowrap;
}

.reference-style-page .consultation-accent--stripe {
  /* 最終表示位置: 前回位置からさらに20px左へ移動。 */
  right: -17px;
}

@media (max-width: 359px) {
  .reference-style-page .consultation-brand-message {
    padding-right: 18px;
    padding-left: 50px;
  }

  .reference-style-page .consultation-accent--stripe {
    /* 359px以下でも、前回位置からさらに20px左へ移動。 */
    right: -10px;
  }
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-service-bubbles li {
    font-size: .6rem;
  }
}


/* ===== 編集用｜よくある質問 =====
   質問・回答 : fair2.html の .fair2-faq-item 内を直接編集できます。
   FAQは前撮りまでの流れの直後に表示します。
*/
.reference-style-page .fair2-faq-area {
  padding: clamp(48px, 9vw, 68px) var(--content-gutter) clamp(54px, 10vw, 76px);
  color: var(--pink-deep);
  background-color: #ffebee;
}

.reference-style-page .fair2-faq-inner {
  width: min(100%, 640px);
  margin: 0 auto;
}

.reference-style-page .fair2-faq-heading {
  margin: 0 auto clamp(21px, 5vw, 30px);
  font-family: var(--sans);
  text-align: center;
}

.reference-style-page .fair2-faq-heading p {
  display: table;
  margin: 0 auto 5px;
  padding: 3px 14px 4px;
  color: #fffefe;
  background: var(--pink-deep);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.1;
}

.reference-style-page .fair2-faq-heading h2 {
  margin: 0;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 900;
  letter-spacing: .075em;
  line-height: 1.15;
  text-indent: .075em;
}

.reference-style-page .fair2-faq-list {
  display: grid;
  gap: 11px;
}

.reference-style-page .fair2-faq-item {
  overflow: hidden;
  background: #fffefe;
  border: 2px solid var(--pink-deep);
  box-shadow: 4px 4px 0 rgba(133, 0, 10, .14);
}

.reference-style-page .fair2-faq-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(9px, 2.5vw, 14px);
  min-height: 66px;
  padding: 12px clamp(12px, 3.5vw, 18px);
  color: var(--pink-deep);
  cursor: pointer;
  font-family: var(--sans);
  font-size: clamp(.9rem, 3.8vw, 1.08rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.52;
  list-style: none;
  outline: none;
}

.reference-style-page .fair2-faq-item summary::-webkit-details-marker { display: none; }

.reference-style-page .fair2-faq-mark {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  color: #fffefe;
  background: var(--pink-deep);
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.reference-style-page .fair2-faq-item summary::after {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: var(--pink-deep);
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "+";
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .18s ease, color .18s ease, background-color .18s ease;
}

.reference-style-page .fair2-faq-item[open] summary {
  background: #f8d9df;
}

.reference-style-page .fair2-faq-item[open] summary::after {
  color: #fffefe;
  background: var(--pink-deep);
  transform: rotate(45deg);
}

.reference-style-page .fair2-faq-item summary:hover,
.reference-style-page .fair2-faq-item summary:focus-visible {
  background: #f8d9df;
}

.reference-style-page .fair2-faq-item summary:focus-visible {
  outline: 3px solid #e87ea6;
  outline-offset: -3px;
}

.reference-style-page .fair2-faq-answer {
  padding: 10px clamp(16px, 4vw, 23px) clamp(16px, 4vw, 21px) clamp(56px, 11vw, 66px);
  color: #493b3e;
  background: #fffefe;
  font-family: var(--sans);
  font-size: clamp(.81rem, 3.25vw, .96rem);
  font-weight: 600;
  line-height: 1.76;
}

.reference-style-page .fair2-faq-item:not([open]) .fair2-faq-answer { display: none; }

.reference-style-page .fair2-faq-answer p { margin: 0; }

@media (max-width: 359px) {
  .reference-style-page .fair2-faq-area {
    padding-right: 13px;
    padding-left: 13px;
  }

  .reference-style-page .fair2-faq-list { gap: 8px; }

  .reference-style-page .fair2-faq-item summary {
    min-height: 59px;
    gap: 8px;
    padding: 10px 10px;
    font-size: .8rem;
    line-height: 1.45;
  }

  .reference-style-page .fair2-faq-mark {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    font-size: .88rem;
  }

  .reference-style-page .fair2-faq-item summary::after {
    width: 22px;
    height: 22px;
    font-size: 1.18rem;
  }

  .reference-style-page .fair2-faq-answer {
    padding: 10px 13px 14px 45px;
    font-size: .74rem;
    line-height: 1.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-style-page .fair2-faq-item summary::after { transition: none; }
}


/* ===== 編集用｜次世代型サービス：リボン固定・白いボックスを50px下へ =====
   リボン見出しは現位置を維持し、外枠・丸・特長・嬉しい声だけを50px下げます。
   特長1〜6は縦一列、本文14pxで統一します。
*/
.reference-style-page .rental-value-nextgen {
  margin-top: calc(clamp(92px, calc(11.4vw + 56px), 103px) + 50px);
}

.reference-style-page .rental-value-nextgen > h3 {
  transform: translateY(-50px);
}

.reference-style-page .nextgen-feature-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.reference-style-page .nextgen-feature-list li {
  min-height: 60px;
  padding: 10px 13px 10px 44px;
  font-size: 14px;
  line-height: 1.5;
}

.reference-style-page .nextgen-feature-list li::before {
  left: 11px;
  font-size: 14px;
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-feature-list li {
    min-height: 58px;
    padding: 9px 10px 9px 42px;
    font-size: 14px;
    line-height: 1.45;
  }

  .reference-style-page .nextgen-feature-list li::before {
    left: 10px;
    font-size: 14px;
  }
}


/* ===== 編集用｜次世代型サービス：枠位置・特長カラー・嬉しい声 =====
   リボン位置を保ちながら、白い外枠だけを直前の位置から20px上へ戻します。
*/
.reference-style-page .rental-value-nextgen {
  margin-top: calc(clamp(92px, calc(11.4vw + 56px), 103px) + 30px);
}

.reference-style-page .rental-value-nextgen > h3 {
  transform: translateY(-30px);
}

/* 特長1〜6はすべて、1・3・5と同じ白地×深赤文字で統一します。 */
.reference-style-page .nextgen-feature-list li,
.reference-style-page .nextgen-feature-list li:nth-child(even) {
  color: #85000a;
  background: #fffefe;
  border-color: #85000a;
}

.reference-style-page .nextgen-feature-list li::before,
.reference-style-page .nextgen-feature-list li:nth-child(even)::before {
  color: #e87ea6;
}

/* 嬉しい声：各項目を吹き出し型のカードとして表示します。 */
.reference-style-page .nextgen-voices ul {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.reference-style-page .nextgen-voices li {
  position: relative;
  min-height: 108px;
  aspect-ratio: auto;
  padding: 12px 8px 14px;
  overflow: visible;
  color: #85000a;
  background: #fffefe;
  border: 2px solid #85000a;
  border-radius: 10px;
  box-shadow: 2px 3px 0 rgba(133, 0, 10, .14);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.42;
}

.reference-style-page .nextgen-voices li::after {
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 15px;
  height: 15px;
  background: #fffefe;
  border-right: 2px solid #85000a;
  border-bottom: 2px solid #85000a;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

/* LP内で読ませる文字は、最小13pxを下回らないよう統一します。 */
.reference-style-page .month-ring text { font-size: 13px; }
.reference-style-page .student-note,
.reference-style-page .rental-value-heading > p,
.reference-style-page .rental-value-line p,
.reference-style-page .flow-section-heading p,
.reference-style-page .step-flow-number span,
.reference-style-page .step-flow-card p,
.reference-style-page .prephoto-flow-copy p,
.reference-style-page .fair2-faq-heading p,
.reference-style-page .fair2-faq-item summary,
.reference-style-page .fair2-faq-answer {
  font-size: 13px;
}

.reference-style-page .nextgen-service-bubbles li {
  font-size: 13px;
  line-height: 1.28;
}

.reference-style-page:not(.flow-original-preview) .step-flow-number span {
  font-size: 13px;
}

@media (max-width: 430px) {
  .reference-style-page .nextgen-service-bubbles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .reference-style-page .nextgen-voices ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 10px;
  }

  .reference-style-page .nextgen-voices li {
    min-height: 92px;
    padding: 10px 7px 12px;
    font-size: 13px;
  }
}

/* 編集用｜BLANCO紹介の補足文は指定により16pxで固定します。 */
.reference-style-page .rental-value-heading > p {
  font-size: 16px;
}

/* ===== 編集用｜嬉しい声：人物切り抜き＋5つの吹き出し =====
   提供いただいた切り抜き写真を中央下に置き、白い吹き出しで囲む構成です。
   文言はfair2.html内の .nextgen-voices ul の各liを直接編集できます。
*/
.reference-style-page .nextgen-voices {
  display: block;
  margin-top: clamp(34px, 8vw, 44px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.reference-style-page .nextgen-voices > h4 {
  position: relative;
  z-index: 3;
  width: min(100%, 218px);
  margin: 0 auto -12px;
  padding: 8px 19px 9px;
  color: #fffefe;
  background: #85000a;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.2;
  text-align: center;
  writing-mode: horizontal-tb;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}

.reference-style-page .nextgen-voices-stage {
  position: relative;
  min-height: clamp(315px, 72vw, 380px);
  overflow: visible;
  background: #f8d9df;
  border-radius: 22px;
}

.reference-style-page .nextgen-voices-stage > ul {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .nextgen-voices-stage li {
  position: absolute;
  display: grid;
  z-index: 1;
  width: 32%;
  min-height: 80px;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 7px 11px;
  overflow: visible;
  color: #85000a;
  background: #fffefe;
  border: 0;
  border-radius: 52% 48% 49% 51% / 48% 46% 54% 52%;
  box-shadow: none;
  font-family: var(--sans);
  font-size: clamp(13px, 2.85vw, 14px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.36;
  text-align: center;
}

.reference-style-page .nextgen-voices-stage li::after {
  position: absolute;
  /* 本体へ10px重ねるため、三角が分離しない吹き出し形状になります。 */
  bottom: -10px;
  left: 35%;
  z-index: 0;
  width: 22px;
  height: 20px;
  background: #fffefe;
  border: 0;
  content: "";
  clip-path: polygon(0 0, 100% 0, 38% 100%);
  pointer-events: none;
  transform: none;
}

/* 上段3つ・下段2つ。写真の顔まわりを空けるため座標を個別に固定します。 */
.reference-style-page .nextgen-voices-stage li:nth-child(1) {
  top: 9%;
  left: 2%;
  border-radius: 54% 46% 51% 49% / 46% 54% 46% 54%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(2) {
  bottom: 14%;
  left: 2%;
  border-radius: 49% 51% 46% 54% / 53% 48% 52% 47%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(3) {
  /* 中央の吹き出しは指定どおり現在位置から15px下へ移動します。 */
  top: 56px;
  left: 34%;
  border-radius: 48% 52% 55% 45% / 51% 45% 55% 49%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(4) {
  top: 9%;
  right: 2%;
  border-radius: 46% 54% 48% 52% / 53% 47% 53% 47%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(5) {
  right: 2%;
  bottom: 14%;
  border-radius: 53% 47% 52% 48% / 47% 52% 48% 53%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(1)::after,
.reference-style-page .nextgen-voices-stage li:nth-child(4)::after {
  left: 55%;
  transform: rotate(14deg);
}

.reference-style-page .nextgen-voices-stage li:nth-child(2)::after {
  left: 60%;
  transform: rotate(32deg);
}

.reference-style-page .nextgen-voices-stage li:nth-child(3)::after {
  bottom: -10px;
  left: 49%;
  transform: rotate(5deg);
}

.reference-style-page .nextgen-voices-stage li:nth-child(5)::after {
  left: 25%;
  transform: scaleX(-1) rotate(18deg);
}

.reference-style-page .nextgen-voices-model {
  position: absolute;
  bottom: -2px;
  left: 50%;
  z-index: 1;
  display: block;
  width: clamp(142px, 44%, 182px);
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-voices > h4 {
    width: min(100%, 202px);
    padding: 7px 16px 8px;
    font-size: 15px;
  }

  .reference-style-page .nextgen-voices-stage {
    min-height: 330px;
    border-radius: 18px;
  }

  .reference-style-page .nextgen-voices-stage li {
    width: 32%;
    min-height: 82px;
    padding: 8px 5px 10px;
    font-size: 13px;
    line-height: 1.32;
  }

  .reference-style-page .nextgen-voices-stage li:nth-child(2),
  .reference-style-page .nextgen-voices-stage li:nth-child(5) {
    bottom: 14%;
  }

  .reference-style-page .nextgen-voices-model {
    width: 148px;
  }
}

@media (max-width: 430px) {
  .reference-style-page .nextgen-voices-stage li:nth-child(3) {
    top: 49px;
  }
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-voices-stage li:nth-child(3) {
    top: 51px;
  }
}

/* ===== 編集用｜嬉しい声：参照画像の横長バランス =====
   淡ピンク面は横長、白い吹き出しは上段2つ・中央1つ・下段2つ。
   人物は淡ピンク面の下端から白い余白へ少しせり出す配置にしています。
*/
.reference-style-page .rental-value-nextgen {
  /* 人物の下端がステージ外へ出る分だけ、外枠の内側に白い余白を残します。 */
  padding-bottom: 38px;
}

.reference-style-page .nextgen-voices {
  margin-top: 35px;
}

.reference-style-page .nextgen-voices > h4 {
  width: min(100%, 204px);
  margin: 0 auto -10px;
  padding: 8px 18px 9px;
  font-size: clamp(15px, 4.2vw, 18px);
}

.reference-style-page .nextgen-voices-stage {
  min-height: 0;
  aspect-ratio: 1.26 / 1;
  border-radius: 28px;
}

.reference-style-page .nextgen-voices-stage li {
  width: 30%;
  min-height: 0;
  height: clamp(78px, 20vw, 96px);
  padding: 8px 6px 10px;
  border-radius: 50%;
  font-size: clamp(13px, 2.85vw, 14px);
  line-height: 1.38;
}

.reference-style-page .nextgen-voices-stage li::after {
  /* 本体と10px重ねて、切れ目のない白い吹き出しの尾にします。 */
  bottom: -11px;
  width: 27px;
  height: 22px;
  clip-path: polygon(0 0, 100% 0, 38% 100%);
}

/* 参照画像の上段2つ・中央1つ・下段2つの座標。 */
.reference-style-page .nextgen-voices-stage li:nth-child(1) {
  top: 8%;
  left: 3%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(2) {
  bottom: auto;
  top: 49%;
  left: 4%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(3) {
  top: 22%;
  left: 35.5%;
  width: 29%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(4) {
  top: 8%;
  right: 3%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(5) {
  right: 4%;
  bottom: auto;
  top: 52%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(1)::after {
  left: 69%;
  transform: rotate(17deg);
}

.reference-style-page .nextgen-voices-stage li:nth-child(2)::after {
  left: 72%;
  transform: rotate(24deg);
}

.reference-style-page .nextgen-voices-stage li:nth-child(3)::after {
  bottom: -11px;
  left: 43%;
  transform: none;
}

.reference-style-page .nextgen-voices-stage li:nth-child(4)::after {
  left: 24%;
  transform: scaleX(-1) rotate(17deg);
}

.reference-style-page .nextgen-voices-stage li:nth-child(5)::after {
  left: 12%;
  transform: scaleX(-1) rotate(17deg);
}

.reference-style-page .nextgen-voices-model {
  bottom: -34px;
  width: clamp(124px, 44%, 184px);
}

@media (max-width: 359px) {
  .reference-style-page .rental-value-nextgen {
    padding-bottom: 36px;
  }

  .reference-style-page .nextgen-voices > h4 {
    width: min(100%, 194px);
    font-size: 15px;
  }

  .reference-style-page .nextgen-voices-stage {
    min-height: 0;
    border-radius: 22px;
  }

  .reference-style-page .nextgen-voices-stage li {
    width: 30%;
    min-height: 0;
    height: 78px;
    padding: 7px 4px 9px;
    font-size: 13px;
    line-height: 1.34;
  }

  .reference-style-page .nextgen-voices-stage li:nth-child(3) {
    top: 22%;
    width: 29%;
  }

  .reference-style-page .nextgen-voices-model {
    bottom: -31px;
    width: 124px;
  }
}

/* 小幅画面では文字を13px未満にせず、吹き出しの高さで可読性を確保します。 */
@media (max-width: 430px) {
  .reference-style-page .nextgen-voices-stage {
    min-height: 320px;
    aspect-ratio: auto;
  }

  .reference-style-page .nextgen-voices-stage li {
    height: 116px;
  }
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-voices-stage {
    min-height: 318px;
  }

  .reference-style-page .nextgen-voices-stage li {
    height: 116px;
  }
}

/* ===== 編集用｜嬉しい声：横長の丸・尾なし =====
   吹き出しの三角は使わず、本文が自然に改行する横長の白い楕円にしています。
*/
.reference-style-page .nextgen-voices-stage li {
  width: 35%;
  height: clamp(92px, 18vw, 98px);
  min-height: 0;
  padding: 9px 8px;
  border-radius: 50%;
  color: #3f3a3b;
  font-size: clamp(13px, 2.85vw, 14px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.reference-style-page .nextgen-voices-stage li::after {
  display: none;
}

.reference-style-page .nextgen-voices-stage li:nth-child(1) {
  top: 8%;
  left: 2%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(2) {
  top: 51%;
  left: 2%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(3) {
  top: 27%;
  left: 32.5%;
  width: 35%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(4) {
  top: 8%;
  right: 2%;
}

.reference-style-page .nextgen-voices-stage li:nth-child(5) {
  top: 51%;
  right: 2%;
}

@media (max-width: 430px) {
  .reference-style-page .nextgen-voices-stage li {
    width: 35%;
    height: 104px;
    padding: 9px 7px;
    line-height: 1.42;
  }

  .reference-style-page .nextgen-voices-stage li:nth-child(3) {
    top: 27%;
    left: 32.5%;
    width: 35%;
  }
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-voices-stage {
    width: calc(100% + 24px);
    margin-left: -12px;
  }

  .reference-style-page .nextgen-voices-stage li {
    width: 36%;
    height: 104px;
    padding: 8px 6px;
    line-height: 1.4;
  }

  .reference-style-page .nextgen-voices-stage li:nth-child(3) {
    width: 36%;
    left: 32%;
  }
}

/* ===== 編集用｜嬉しい声：高さ・間隔・人物位置の微調整 =====
   淡ピンク面を30px高くし、下段の吹き出しに少し縦の余白を追加します。
   人物はボックス高の増分を相殺し、見た目の位置だけを従来より15px下げています。
*/
.reference-style-page .nextgen-voices-stage {
  padding-bottom: 0;
  aspect-ratio: 1.155 / 1;
}

.reference-style-page .nextgen-voices-stage li {
  font-size: 13.5px;
}

.reference-style-page .nextgen-voices-stage li:nth-child(3) {
  top: calc(27% + 3px);
}

.reference-style-page .nextgen-voices-stage li:nth-child(2),
.reference-style-page .nextgen-voices-stage li:nth-child(5) {
  top: calc(51% + 6px);
}

.reference-style-page .nextgen-voices-model {
  bottom: -19px;
}

@media (max-width: 430px) {
  .reference-style-page .nextgen-voices-stage {
    min-height: 350px;
    aspect-ratio: auto;
  }
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-voices-stage {
    min-height: 348px;
    aspect-ratio: auto;
  }

  .reference-style-page .nextgen-voices-model {
    bottom: -16px;
  }
}

/* ===== 編集用｜次世代型サービス：コンパクトな5円 =====
   円の内側余白を減らし、スマホでは上3・下2の中央揃えにして
   白いサービス枠の外へ出ないようにしています。
*/
.reference-style-page .nextgen-service-visual {
  margin-bottom: 16px;
}

.reference-style-page .nextgen-service-bubbles {
  width: min(100%, 450px);
  gap: 6px;
}

.reference-style-page .nextgen-service-bubbles li {
  padding: 2px;
  font-size: 15px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* 嬉しい声の女性を現在位置からさらに15px下げます。 */
.reference-style-page .nextgen-voices-model {
  bottom: -34px;
}

@media (max-width: 559px) {
  .reference-style-page .nextgen-service-bubbles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* パネル内側の余白を考慮し、白いサービス枠全体の約80%に見せます。 */
    width: 90%;
    max-width: none;
    column-gap: 5px;
    row-gap: 7px;
  }

  .reference-style-page .nextgen-service-bubbles li {
    grid-column: span 2;
    padding: 2px;
    font-size: 15px;
    line-height: 1.15;
  }

  .reference-style-page .nextgen-service-bubbles li:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 359px) {
  .reference-style-page .nextgen-voices-model {
    bottom: -31px;
  }
}

/* ===== 編集用｜BLANCO紹介補足文の改行・上下余白 =====
   「成人式の準備を」で改行。補足文の上側・下側の見た目の余白を
   それぞれ直前の状態から15pxずつ縮めています。
*/
.reference-style-page .rental-value-brand-message {
  margin-bottom: calc(clamp(66px, 15vw, 74px) - 15px);
}

.reference-style-page .rental-value-nextgen {
  margin-top: calc(clamp(92px, calc(11.4vw + 56px), 103px) + 15px);
}

@media (max-width: 359px) {
  .reference-style-page .rental-value-brand-message {
    margin-bottom: 51px;
  }
}

/* ===== 編集用｜レンタルの流れ STEP5 横の切り抜き写真 =====
   STEP5右側の空きスペースに画像を置きます。
   差し替え画像: img/furisode-fair/fair2-rental-step5-cutout.webp
*/
.reference-style-page:not(.flow-original-preview) .step-flow-card--last {
  overflow: visible;
}

.reference-style-page:not(.flow-original-preview) .step-flow-cutout {
  position: absolute;
  z-index: 3;
  bottom: -29px;
  left: calc(100% + clamp(8px, 3vw, 16px) + 45px);
  width: clamp(104px, 25vw, 138px);
  margin: 0;
  pointer-events: none;
}

.reference-style-page:not(.flow-original-preview) .step-flow-cutout img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 359px) {
  .reference-style-page:not(.flow-original-preview) .step-flow-card--last {
    min-height: 260px;
    margin-right: 15px;
    padding-right: 112px;
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-cutout {
    right: -40px;
    bottom: -15px;
    left: auto;
    width: clamp(90px, 31vw, 108px);
  }
}

/* ===== 編集用｜プラン・料金案内 =====
   内容はすべて fair2.html 内のテキストで編集できます。
   BLANCO PLAN／7大特典／3つのプランはこのLP用のカードとして表示します。
*/
.reference-style-page .fair2-plan-guide-area {
  padding: clamp(48px, 10vw, 64px) var(--content-gutter) clamp(54px, 11vw, 72px);
  color: var(--pink-deep);
  background-color: #f7d8da;
}

.reference-style-page .fair2-plan-guide-title {
  width: fit-content;
  margin: 0 auto clamp(20px, 5vw, 28px);
  padding-bottom: 5px;
  color: #85000a;
  border-bottom: 2px solid #bd0713;
  font-family: var(--sans);
  font-size: clamp(1.25rem, 5.8vw, 1.65rem);
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1.25;
  text-align: center;
}

.reference-style-page .fair2-plan-card,
.reference-style-page .fair2-plan-benefits {
  box-sizing: border-box;
  width: min(100%, 560px);
  margin-right: auto;
  margin-left: auto;
}

.reference-style-page .fair2-plan-card {
  padding: clamp(19px, 5vw, 26px);
  background: #fffefe;
  border: 2px solid rgba(133, 0, 10, .75);
  box-shadow: 5px 5px 0 rgba(117, 15, 29, .16);
}

.reference-style-page .fair2-plan-card__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(133, 0, 10, .28);
}

.reference-style-page .fair2-plan-card__header > div {
  min-width: 0;
}

.reference-style-page .fair2-plan-card__header p {
  margin: 0 0 2px;
  color: #bd0713;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.25;
}

.reference-style-page .fair2-plan-card__header h3 {
  margin: 0;
  color: #85000a;
  font-family: var(--sans);
  font-size: clamp(1.25rem, 5.3vw, 1.62rem);
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.25;
}

.reference-style-page .fair2-plan-card__header strong {
  flex: 0 0 auto;
  color: #e35b96;
  font-family: var(--sans);
  font-size: clamp(1.45rem, 7vw, 2rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.reference-style-page .fair2-plan-card__header strong small {
  display: block;
  margin-bottom: 3px;
  color: #8f1524;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.reference-style-page .fair2-plan-card__header strong span {
  font-size: .68em;
}

.reference-style-page .fair2-plan-card__lead {
  margin: 15px 0 0;
  color: #3f3a3b;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
}

.reference-style-page .fair2-plan-card__points,
.reference-style-page .fair2-plan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .fair2-plan-card__points li,
.reference-style-page .fair2-plan-tags li {
  box-sizing: border-box;
  padding: 7px 10px;
  color: #8f1524;
  background: #fff4f5;
  border: 1px solid #e67da6;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.reference-style-page .fair2-plan-card__note {
  margin: 15px 0 0;
  padding-top: 13px;
  color: #7d1727;
  border-top: 1px dashed rgba(133, 0, 10, .38);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.reference-style-page .fair2-plan-card--blanco {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(26px, 7vw, 38px);
}

.reference-style-page .fair2-plan-card--blanco > * {
  position: relative;
  z-index: 1;
}

.reference-style-page .fair2-plan-benefits {
  width: 100%;
  margin: clamp(20px, 5vw, 26px) 0 0;
  padding: clamp(19px, 5vw, 27px);
  background: #fff7dc;
  border: 0;
  box-shadow: none;
}

.reference-style-page .fair2-plan-benefits h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: -4px 0 17px;
  color: #3f3a3b;
  font-family: var(--sans);
  font-size: clamp(1.05rem, 5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .045em;
  line-height: 1.2;
  text-align: center;
}

.reference-style-page .fair2-plan-benefits h3 span {
  font-size: 1.72em;
  line-height: .8;
}

.reference-style-page .fair2-plan-benefits ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(11px, 2.5vw, 15px) clamp(8px, 2vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .fair2-plan-benefits li {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  align-content: start;
  gap: 7px;
  padding: 0;
  color: #3f3a3b;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  text-align: center;
}

.reference-style-page .fair2-plan-benefit-photo {
  display: block;
  aspect-ratio: 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fffdfd;
}

.reference-style-page .fair2-plan-benefit-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-style-page .fair2-plan-benefits li > .fair2-plan-benefit-label {
  display: block;
  width: 100%;
  color: #3f3a3b;
  font-size: clamp(13px, 2.8vw, 14px);
  font-weight: 900;
  line-height: 1.35;
}

.reference-style-page .fair2-plan-benefits li:nth-child(7) {
  grid-column: 2;
  width: 100%;
}

@media (max-width: 559px) {
  .reference-style-page .fair2-plan-benefits ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .reference-style-page .fair2-plan-benefits li:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 8px) / 2);
  }
}

/* 編集用｜BLANCO PLAN内の小物17点フルセット内容 */
.reference-style-page .fair2-plan-accessories {
  display: grid;
  grid-template-columns: minmax(104px, .82fr) minmax(0, 2fr);
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 12px 13px;
  border: 1px solid rgba(133, 0, 10, .76);
  font-family: var(--sans);
}

.reference-style-page .fair2-plan-accessories h3 {
  margin: 0;
  color: #3f3a3b;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.reference-style-page .fair2-plan-accessories ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .fair2-plan-accessories li {
  padding: 3px 10px;
  color: #b74473;
  border: 1px solid #df80a1;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .reference-style-page .fair2-plan-accessories {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 13px 10px;
  }
}

/* 編集用｜BLANCO PLAN内の料金・オプション注記 */
.reference-style-page .fair2-plan-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px 14px;
  margin: 16px 0 0;
  padding: 13px 0 0;
  color: #4a4647;
  border-top: 1px dashed rgba(133, 0, 10, .38);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

.reference-style-page .fair2-plan-notes li {
  position: relative;
  min-width: 0;
  padding-left: 1em;
}

.reference-style-page .fair2-plan-notes li::before {
  position: absolute;
  top: .1em;
  left: 0;
  content: '•';
  color: #85000a;
  font-size: 1.15em;
  line-height: 1;
}

@media (max-width: 430px) {
  .reference-style-page .fair2-plan-notes {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

.reference-style-page .fair2-plan-card-list {
  display: grid;
  gap: clamp(20px, 5vw, 27px);
  width: min(100%, 560px);
  margin: 0 auto;
}

.reference-style-page .fair2-plan-card-list .fair2-plan-card {
  width: 100%;
  margin: 0;
}

.reference-style-page .fair2-plan-card--rental .fair2-plan-card__header strong {
  color: #4f91c4;
}

.reference-style-page .fair2-plan-card--rental .fair2-plan-tags li {
  color: #28658f;
  background: #eef8ff;
  border-color: #80b9df;
}

.reference-style-page .fair2-plan-notes--rental {
  color: #3f5568;
  border-top-color: rgba(79, 145, 196, .58);
}

.reference-style-page .fair2-plan-notes--rental li::before {
  color: #4f91c4;
}

.reference-style-page .fair2-plan-card--photo .fair2-plan-card__header strong {
  color: #6f9d76;
}

.reference-style-page .fair2-plan-card--photo .fair2-plan-tags li {
  color: #4d7855;
  background: #f1f8ef;
  border-color: #9fc09c;
}

.reference-style-page .fair2-plan-notes--photo {
  color: #465948;
  border-top-color: rgba(111, 157, 118, .58);
}

.reference-style-page .fair2-plan-notes--photo li::before {
  color: #6f9d76;
}

.reference-style-page .fair2-plan-card--family {
  border-color: #cf6e9d;
}

.reference-style-page .fair2-plan-family-price {
  display: grid;
  gap: 9px;
  margin-top: 17px;
}

.reference-style-page .fair2-plan-family-price p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 11px;
  color: #8f1524;
  background: #fff2f6;
  border-left: 4px solid #cf6e9d;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.reference-style-page .fair2-plan-family-price strong {
  flex: 0 0 auto;
  color: #dd5795;
  font-size: clamp(1.3rem, 6vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}

/* 編集用｜お母様の振袖プランに含まれる内容タグ */
.reference-style-page .fair2-plan-family-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 17px 0 0;
  padding: 0;
  list-style: none;
}

.reference-style-page .fair2-plan-family-tags li {
  padding: 4px 11px;
  color: #c24f83;
  background: #fff;
  border: 1px solid #e18bb0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.reference-style-page .fair2-plan-family-note {
  position: relative;
  margin: 16px 0 0;
  padding: 12px 0 0 1em;
  color: #7d1727;
  border-top: 1px dashed rgba(133, 0, 10, .38);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
}

.reference-style-page .fair2-plan-family-note::before {
  position: absolute;
  top: calc(12px + .1em);
  left: 0;
  color: #cf6e9d;
  content: '•';
  font-size: 1.15em;
  line-height: 1;
}

@media (max-width: 359px) {
  .reference-style-page .fair2-plan-guide-area {
    padding-right: 13px;
    padding-left: 13px;
  }

  .reference-style-page .fair2-plan-card,
  .reference-style-page .fair2-plan-benefits {
    padding: 15px;
  }

  .reference-style-page .fair2-plan-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .reference-style-page .fair2-plan-card__header strong {
    align-self: flex-end;
  }

  .reference-style-page .fair2-plan-benefits ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .reference-style-page .fair2-plan-benefits li {
    min-height: 0;
  }

  .reference-style-page .fair2-plan-benefits li:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 8px) / 2);
  }

  .reference-style-page .fair2-plan-family-price p {
    align-items: flex-start;
    flex-direction: column;
  }

  .reference-style-page .fair2-plan-family-price strong {
    align-self: flex-end;
  }
}

/* ===== 編集用｜特典見出しの月バッジ円周文字と赤帯の重なり =====
   円周文字 : 現行13pxの約1.42倍（18.5px）
   円周文字の余白 : 円枠から内側11〜14pxを確保
   円周文字の並び : letter-spacing: 1.24px で文字形を伸ばさず円周パス全体へ均等に一周配置
   赤帯     : 月バッジの背面まで全面に伸ばし、見出し文字の開始位置は維持します。
*/
.reference-style-page .benefit-heading::before {
  left: 0;
}

.reference-style-page .month-ring text.month-ring-text {
  font-size: 18.5px;
  letter-spacing: 1.24px;
}

.reference-style-page .month-ring {
  --benefit-ring-inset: clamp(11px, 3.6vw, 14px);
  top: var(--benefit-ring-inset);
  right: auto;
  bottom: auto;
  left: var(--benefit-ring-inset);
  width: calc(100% - var(--benefit-ring-inset) - var(--benefit-ring-inset));
  height: calc(100% - var(--benefit-ring-inset) - var(--benefit-ring-inset));
}

/* ===== 編集用｜ご契約特典3の本文行間 =====
   特典3だけが2行以上になった際に詰まって見えないよう、本文の行間を少し広げます。
*/
.reference-style-page .benefit-card-contract .benefit-item--models .benefit-copy {
  line-height: 1.5;
}

/* ===== 編集用｜ご契約特典2の本文下余白 =====
   「髪飾りをプレゼント」の下側だけが広くならないよう、特典1の本文下余白と揃えます。
*/
.reference-style-page .benefit-card-contract .benefit-item--contract-hair-accessory {
  min-height: 130px;
}

@media (max-width: 559px) {
  .reference-style-page .benefit-card-contract .benefit-item--contract-hair-accessory {
    min-height: 132px;
  }
}

@media (max-width: 359px) {
  .reference-style-page .benefit-card-contract .benefit-item--contract-hair-accessory {
    min-height: 137px;
  }
}

/* ===== 編集用｜fair2 日本語の自然な改行 =====
   予約案内・自社サービス・嬉しい声では、単語の途中で分割せず、意味のまとまりで折り返します。
*/
.reference-style-page .benefit-note {
  overflow-wrap: normal;
  word-break: normal;
  line-break: strict;
  text-wrap: pretty;
}

.reference-style-page .benefit-note__reservation-action {
  display: inline-block;
  white-space: nowrap;
}

.reference-style-page .benefit-note__reservation-leading,
.reference-style-page .benefit-note__reservation-following {
  display: inline-block;
  white-space: nowrap;
}

.reference-style-page .nextgen-service-bubbles li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -.02em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.reference-style-page .nextgen-service-bubble-line {
  display: block;
  white-space: nowrap;
  word-break: keep-all;
}

.reference-style-page .nextgen-voice-copy {
  display: block;
  width: 100%;
  text-align: center;
}

.reference-style-page .nextgen-voice-phrase {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
}

.reference-style-page .nextgen-voices-stage li {
  overflow-wrap: normal;
  word-break: keep-all;
  line-break: strict;
  text-wrap: pretty;
}

@media (max-width: 430px) {
  .reference-style-page .nextgen-voices-stage li {
    font-size: 13px;
    line-height: 1.3;
  }
}

@media (max-width: 359px) {
  .reference-style-page .benefit-note__reservation-action {
    display: inline;
    white-space: normal;
  }

  .reference-style-page .nextgen-service-bubbles li {
    font-size: 13px;
    letter-spacing: -.08em;
  }

  .reference-style-page .nextgen-voices-stage li {
    padding: 8px 4px;
    line-height: 1.2;
  }

  .reference-style-page .nextgen-voices-stage li:nth-child(4) {
    height: 112px;
    letter-spacing: -.12em;
  }

  .reference-style-page .nextgen-voice-phrase--counseling {
    letter-spacing: -.12em;
  }
}

/* ===== 編集用｜fair2 ヒーローロゴと大阪堺予約CTA =====
   fair2ヒーローのBLANCOロゴ: 影・フィルターなしの白ロゴ素材をそのまま表示します。
   大阪堺CTA: 指定色のピンク #ff7590 を使用します。
*/
.reference-style-page .poster-brand-logo {
  filter: none;
}

.reference-style-page .fixed-reservation-cta--osaka {
  background: #ff7590;
}

.reference-style-page .fixed-reservation-cta--osaka:hover,
.reference-style-page .fixed-reservation-cta--osaka:focus-visible {
  background: #e65e7a;
}

/* ===== 編集用｜fair2 全体余白の圧縮 =====
   写真・本文の可読性・固定予約CTAのタップ領域を保ったまま、
   セクション間とカード周辺の過大な余白を優先して詰めます。
*/
.reference-style-page .consultation-card {
  padding: 28px clamp(18px, 5vw, 28px) 20px;
}

.reference-style-page .consultation-brand-message {
  margin-bottom: clamp(38px, 10vw, 48px);
}

.reference-style-page .consultation-card > h2 { margin-bottom: 8px; }

.reference-style-page .benefit-panel {
  padding: 30px var(--content-gutter) 28px;
}

.reference-style-page .benefit-panel-contract { padding-top: 28px; }

.reference-style-page .benefit-heading { margin-bottom: 6px; }

.reference-style-page .benefit-item { padding: 13px 3px 14px; }

@media (min-width: 360px) {
  .reference-style-page .benefit-item--cosmetics {
    min-height: 225px;
    padding-bottom: 72px;
  }

  .reference-style-page .benefit-card-contract .benefit-item--contract-hair-accessory {
    min-height: 118px;
  }
}

.reference-style-page .simultaneous-event {
  padding: 28px var(--content-gutter);
}

.reference-style-page .ribbon-title { margin-bottom: 18px; }

.reference-style-page .student-area { padding-bottom: 28px; }

.reference-style-page .student-card { padding: 16px 12px; }

.reference-style-page .student-limited { margin-bottom: 9px; }

.reference-style-page .student-card > h2 { margin-bottom: 9px; }

.reference-style-page .student-intro { margin-bottom: 12px; }

.reference-style-page .student-choice {
  margin-top: 8px;
  padding: 10px 14px 11px;
}

.reference-style-page .student-note { margin-top: 12px; }

.reference-style-page .rental-value-area {
  padding: 32px var(--content-gutter) 38px;
}

.reference-style-page .rental-value-brand-message { margin-bottom: 32px; }

.reference-style-page .rental-value-nextgen {
  margin-top: 72px;
  padding-bottom: 28px;
}

.reference-style-page .nextgen-service-visual {
  gap: 10px;
  margin: 14px 0 10px;
}

.reference-style-page .nextgen-feature-list {
  gap: 8px;
  margin-top: 14px;
}

.reference-style-page .nextgen-feature-list li {
  min-height: 54px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.reference-style-page .nextgen-voices { margin-top: 24px; }

.reference-style-page .rental-value-line {
  margin-top: 28px;
  padding-top: 16px;
  padding-bottom: 17px;
}

.reference-style-page .rental-value-line p { margin-bottom: 9px; }

.reference-style-page .fair2-plan-guide-area {
  padding: 36px var(--content-gutter) 40px;
}

.reference-style-page .fair2-plan-guide-title { margin-bottom: 16px; }

.reference-style-page .fair2-plan-card { padding: 18px; }

.reference-style-page .fair2-plan-card__header { padding-bottom: 8px; }

.reference-style-page .fair2-plan-card__lead { margin-top: 10px; }

.reference-style-page .fair2-plan-card__points,
.reference-style-page .fair2-plan-tags {
  gap: 6px;
  margin-top: 10px;
}

.reference-style-page .fair2-plan-card__points li,
.reference-style-page .fair2-plan-tags li { padding: 5px 9px; }

.reference-style-page .fair2-plan-card__note {
  margin-top: 10px;
  padding-top: 10px;
}

.reference-style-page .fair2-plan-card--blanco { margin-bottom: 26px; }

.reference-style-page .fair2-plan-benefits {
  margin-top: 16px;
  padding: 16px;
}

.reference-style-page .fair2-plan-benefits h3 { margin-bottom: 12px; }

.reference-style-page .fair2-plan-benefits ol { gap: 8px; }

.reference-style-page .fair2-plan-accessories {
  gap: 10px;
  margin-top: 14px;
  padding: 10px 11px;
}

.reference-style-page .fair2-plan-notes {
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
}

.reference-style-page .fair2-plan-card-list { gap: 14px; }

.reference-style-page .fair2-plan-family-price {
  gap: 7px;
  margin-top: 12px;
}

.reference-style-page .fair2-plan-family-price p { padding: 8px 10px; }

.reference-style-page .fair2-plan-family-tags {
  gap: 6px;
  margin-top: 12px;
}

.reference-style-page .fair2-plan-family-note {
  margin-top: 12px;
  padding-top: 10px;
}

.reference-style-page .fair2-plan-family-note::before { top: calc(10px + .1em); }

.reference-style-page .flow-area {
  padding: 32px var(--content-gutter) 34px;
}

.reference-style-page .rental-flow-area { padding-top: 32px; }

.reference-style-page .prephoto-flow-area { padding-bottom: 36px; }

.reference-style-page .flow-section-heading { margin-bottom: 16px; }

.reference-style-page .prephoto-flow-list { gap: 11px; }

.reference-style-page .prephoto-flow-label {
  min-height: 110px;
  padding: 10px 10px 20px;
}

.reference-style-page .prephoto-flow-copy { padding: 8px 0 9px; }

@media (min-width: 360px) {
  .reference-style-page:not(.flow-original-preview) .step-flow-list--rental {
    gap: 34px 32px;
    padding: 16px 3px 4px;
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-card {
    min-height: 260px;
    padding: 52px 15px 14px;
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-card--last { min-height: 210px; }

  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(1)::after {
    right: -32px;
    width: 32px;
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(2)::after {
    bottom: -34px;
    height: 34px;
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(3)::after {
    left: -32px;
    width: 32px;
  }

  .reference-style-page:not(.flow-original-preview) .step-flow-card:nth-child(4)::after {
    bottom: -34px;
    height: 34px;
  }
}

.reference-style-page .fair2-faq-area {
  padding: 38px var(--content-gutter) 42px;
}

.reference-style-page .fair2-faq-heading { margin-bottom: 16px; }

.reference-style-page .fair2-faq-list { gap: 8px; }

.reference-style-page .fair2-faq-item summary {
  min-height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.reference-style-page .access-photo-loop { padding: 6px 0; }

.reference-style-page .access-photo-loop__rows { gap: 6px; }

.reference-style-page .access-area { padding: 30px var(--content-gutter) 80px; }

.reference-style-page .access-area > h2 { margin-bottom: 16px; }

.reference-style-page .access-region + .access-region { margin-top: 24px; }

.reference-style-page .access-region-title { margin-bottom: 10px; }

.reference-style-page .access-region-cards { gap: 14px; }

.reference-style-page .access-region .access-card { padding: 14px 13px; }

@media (max-width: 359px) {
  .reference-style-page .consultation-card { padding: 24px 16px 18px; }

  .reference-style-page .consultation-brand-message { margin-bottom: 38px; }

  .reference-style-page .rental-value-nextgen { margin-top: 64px; }

  .reference-style-page .fair2-plan-card,
  .reference-style-page .fair2-plan-benefits { padding: 15px; }

  .reference-style-page .prephoto-flow-label {
    min-height: 108px;
    padding: 9px 6px 18px;
  }

  .reference-style-page .fair2-faq-item summary { min-height: 59px; }
}

/* ===== 編集用｜予約案内と次世代型リボンの干渉解消 =====
   来場予約案内の後の空白は詰め、説明文とリボンの見た目の重なりはなくします。
*/
.reference-style-page .benefit-panel-visit { padding-bottom: 10px; }

.reference-style-page .benefit-panel-contract { padding-top: 12px; }

.reference-style-page .rental-value-nextgen > h3 {
  /* リボン画像の拡大分を考慮し、直前の説明文から安全に離します。 */
  transform: translateY(-4px);
}

/* ===== 編集用｜次世代型リボンと外枠の位置関係を復元 =====
   余白圧縮前と同じく、リボンは外枠上端に約42px重なる位置に戻します。
   枠だけを下げるため、直前の説明文との安全な間隔は変わりません。
*/
.reference-style-page .rental-value-nextgen { margin-top: 98px; }

.reference-style-page .rental-value-nextgen > h3 { transform: translateY(-30px); }

@media (max-width: 359px) {
  .reference-style-page .rental-value-nextgen { margin-top: 90px; }
}

/* ===== 編集用｜よくばり案内の文字組み =====
   よくばり文は背景ボックスの中心、ご試着案内は最小13pxで一行に保ちます。
   ご契約特典の円周文字は、来場特典と同じ共通の設定を継承します。
*/

.reference-style-page .consultation-brand-message {
  padding-inline: clamp(18px, 7.5vw, 54px);
}

.reference-style-page .consultation-brand-message p { text-align: center; }

.reference-style-page .consultation-card > h2 {
  width: 100%;
  font-size: clamp(18.2px, 6.3vw, 25.2px);
  letter-spacing: -.035em;
  line-height: 1.25;
  white-space: nowrap;
  word-break: keep-all;
}

/* ===== 編集用｜スクロール後に表示するページ先頭へ戻るボタン =====
   共通フッターより前面、2店舗WEB予約CTAより背面に固定表示し、先頭位置では隠します。
*/
.reference-style-page .fair2-page-top {
  position: fixed;
  z-index: 10001;
  bottom: 82px;
  right: 12px;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0;
  color: #85000a;
  background: #fffefe;
  border: 2px solid #85000a;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(106, 34, 53, .18);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transform: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* v444: 上向き山形の線幅を3pxへ細くし、サイズ・位置は維持します。 */
.reference-style-page .fair2-page-top__chevron {
  display: block;
  position: relative;
  top: 3px;
  width: 19px;
  height: 19px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
  box-sizing: border-box;
  transform: rotate(45deg);
}

.reference-style-page .fair2-page-top[hidden] {
  /* JSが先頭位置で付与するhidden属性を、通常のdisplay指定より優先します。 */
  display: none;
}

.reference-style-page .fair2-page-top:hover,
.reference-style-page .fair2-page-top:focus-visible {
  color: #fffefe;
  background: #85000a;
}

.reference-style-page .fair2-page-top:focus-visible {
  outline: 3px solid rgba(255, 102, 156, .72);
  outline-offset: 3px;
}

.reference-style-page .fair2-page-top:active { transform: translateY(1px); }

@media (max-width: 359px) {
  .reference-style-page .fair2-page-top {
    bottom: 80px;
    right: 10px;
    width: 50px;
    height: 50px;
    min-height: 50px;
    font-size: 12px;
  }
}

/* ===== 編集用｜特典本文の中央揃え =====
   特典の本文だけをカード中央へ揃え、リボン見出し・写真配置は維持します。
   ご契約特典の円周文字は、来場特典と同じ共通の文字サイズ・文字間隔・円枠余白を継承します。
*/
.reference-style-page .benefit-card .benefit-copy {
  text-align: center;
}

/* 中央揃え後も特典1の本文をチケット画像に隠さないよう、画像だけを上へ寄せます。 */
.reference-style-page .benefit-item--ticket .benefit-ticket {
  top: -13px;
}

/* ===== 編集用｜特典内容の横並び番号リボン形式 =====
   参照画像に合わせ、左はオレンジのしおり型「特典01」ラベル、右は本文・金額の情報表示に統一します。
   fair2では装飾写真を使わず、特典内容を最優先で読み取れるようにします。
*/
.reference-style-page .benefit-card {
  padding: 4px clamp(10px, 3vw, 16px);
  border: 0;
  box-shadow: none;
}

.reference-style-page .benefit-list {
  display: grid;
  gap: 0;
}

.reference-style-page .benefit-item,
.reference-style-page .benefit-item--ticket,
.reference-style-page .benefit-item--cosmetics,
.reference-style-page .benefit-item--models,
.reference-style-page .benefit-card-contract .benefit-item--contract-hair-accessory {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  column-gap: clamp(12px, 3.4vw, 18px);
  align-items: stretch;
  min-height: 106px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(49, 38, 36, .22);
}

.reference-style-page .benefit-item:last-child { border-bottom: 0; }

.reference-style-page .benefit-ribbon--bookmark {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  width: 70px;
  min-width: 0;
  height: auto;
  min-height: 90px;
  padding: 11px 0 22px;
  background: #f39800;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  color: #fff;
  font-family: var(--sans);
  line-height: 1;
  text-align: center;
}

.reference-style-page .benefit-ribbon--bookmark::after { content: none; }

/* 来場・ご契約を問わず、参照画像と同じオレンジの番号しおりへ統一します。 */
.reference-style-page .benefit-card-contract .benefit-ribbon--bookmark { background: #f39800; }

.reference-style-page .benefit-ribbon-label {
  align-self: end;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 400;
}

.reference-style-page .benefit-ribbon-number {
  align-self: start;
  margin-top: 3px;
  font-size: clamp(33.75px, 9vw, 40.5px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.reference-style-page .benefit-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  margin: 0;
  color: #211a1a;
  font-family: var(--sans);
  font-size: clamp(15px, 4.25vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}

/* 以前の中央揃え指定より優先し、横並び特典では参照画像どおり左揃えを維持します。 */
.reference-style-page .benefit-item .benefit-copy { text-align: left !important; }

.reference-style-page .benefit-card .benefit-amount {
  display: inline-flex;
  align-items: baseline;
  gap: .08em;
  margin: 0;
  padding: 0;
  color: #211a1a;
  background: none;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  white-space: nowrap;
}

.reference-style-page .benefit-numeric-value {
  display: inline-block;
  font-size: 2.25em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.reference-style-page .benefit-number-suffix {
  font-size: 1em;
  font-weight: 400;
}

.reference-style-page .benefit-card .benefit-highlight,
.reference-style-page .benefit-card .benefit-contract-highlight {
  margin: 0;
  padding: 0;
  color: #211a1a;
  background: none;
  font-family: inherit;
  font-size: 1.5em;
  font-weight: 400;
  line-height: inherit;
  white-space: nowrap;
}

.reference-style-page .benefit-card .benefit-amount::after,
.reference-style-page .benefit-card .benefit-highlight::after { content: none; }

/* 特典内の数字を含む全テキストをZen Kaku Gothic Newへ統一します。 */
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .benefit-ribbon-number,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .benefit-numeric-value,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .benefit-copy,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .benefit-ribbon-label,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .benefit-number-suffix,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .benefit-maximum,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .benefit-highlight {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
}

.reference-style-page .benefit-maximum-group {
  align-items: baseline;
  gap: 4px;
}

.reference-style-page .benefit-maximum {
  position: static;
  display: inline-flex;
  width: auto;
  min-height: 0;
  height: auto;
  padding: 3px 4px;
  background: #211a1a;
  color: #fff;
  font-family: var(--sans);
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  vertical-align: baseline;
}

.reference-style-page .benefit-maximum-text {
  color: inherit;
  text-orientation: mixed;
  transform: none;
  writing-mode: horizontal-tb;
}

.reference-style-page .benefit-asset-well,
.reference-style-page .benefit-furisode-pair { display: none !important; }

/* ご契約特典3：本文の下段へ振袖切り抜き2枚を戻します。 */
.reference-style-page .benefit-item--models {
  grid-template-rows: auto auto;
  align-items: start;
  padding-bottom: 0;
}

.reference-style-page .benefit-item--models .benefit-furisode-pair {
  display: flex !important;
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: end;
  justify-content: center;
  gap: clamp(24px, 8vw, 46px);
  width: 100%;
  height: clamp(160px, 55vw, 260px);
  margin: 10px auto 0;
}

.reference-style-page .benefit-item--models .benefit-furisode-pair img {
  display: block;
  width: auto;
  max-width: 42%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 359px) {
  .reference-style-page .benefit-card { padding-right: 8px; padding-left: 8px; }

  .reference-style-page .benefit-item,
  .reference-style-page .benefit-item--ticket,
  .reference-style-page .benefit-item--cosmetics,
  .reference-style-page .benefit-item--models,
  .reference-style-page .benefit-card-contract .benefit-item--contract-hair-accessory {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 10px;
    min-height: 84px;
  }

  .reference-style-page .benefit-ribbon--bookmark {
    width: 56px;
    min-height: 78px;
    padding-top: 9px;
    padding-bottom: 18px;
  }

  .reference-style-page .benefit-ribbon-label { font-size: 14px; }
  .reference-style-page .benefit-ribbon-number { font-size: 31.5px; }
  .reference-style-page .benefit-copy { font-size: 15px; line-height: 1.48; }

  /* 最小幅では大きくした数字を優先し、必要なときだけ「最大」と金額を自然に改行します。 */
  .reference-style-page .benefit-card-contract .benefit-item:first-child .benefit-maximum-group {
    flex-wrap: wrap;
    row-gap: 2px;
    white-space: normal;
  }
  .reference-style-page .benefit-card-contract .benefit-item:first-child .benefit-numeric-value {
    letter-spacing: -.055em;
  }

  .reference-style-page .benefit-item--models .benefit-furisode-pair {
    gap: 16px;
    height: clamp(150px, 58vw, 190px);
    margin-top: 8px;
  }
}

/* ===== 編集用｜よくばり・BLANCO紹介枠のテープ微調整 =====
   右上テープはv414の元サイズを基準に0.95倍。左下テープはサイズを保ったまま5px上へ移動します。 */
.reference-style-page .consultation-accent--stripe {
  width: clamp(49.59px, 15.39vw, 64.98px);
}

.reference-style-page .rental-value-accent--stripe {
  width: clamp(55.1px, 17.1vw, 72.2px);
}

.reference-style-page .consultation-accent--dot,
.reference-style-page .rental-value-accent--dot {
  bottom: -5px;
}

/* ===== 編集用｜右上テープとご試着・ご相談見出しの最終座標 =====
   右上テープは両枠で現位置から下へ5px・左へ5px。
   ご試着・ご相談の見出しと説明文は間隔を保ったまま、さらに8px上へ移動します。 */
.reference-style-page .consultation-accent--stripe,
.reference-style-page .rental-value-accent--stripe {
  top: -31px;
}

.reference-style-page .consultation-accent--stripe { right: -12px; }
.reference-style-page .rental-value-accent--stripe { right: -17px; }

.reference-style-page .consultation-card > h2 {
  top: -16px;
  font-size: clamp(21.84px, 7.56vw, 30.24px);
  letter-spacing: -.055em;
}

.reference-style-page .consultation-card > p { top: -8px; }

@media (max-width: 359px) {
  /* 小画面の元位置（right: -10px）からも左へ5pxだけ移動します。 */
  .reference-style-page .consultation-accent--stripe { right: -5px; }
}

@media (max-width: 300px) {
  /* 280px級でも1.2倍の見出しを一行に保つため、文字間だけを追加で詰めます。 */
  .reference-style-page .consultation-card > h2 { letter-spacing: -.085em; }
  .reference-style-page .consultation-card { padding-right: 14px; padding-left: 14px; }
}

/* ========================================================================
   v425: 比較プレビューで確認済みのfair2最終デザインを正式外部CSSへ統合
   比較ルートの最終カスケード順を維持し、HTMLにCSSを埋め込みません。
   ======================================================================== */

/* Comparison source: fair2-normal-body-weight.css */
/* v425 official - fair2 non-heading text at normal weight. */
body.furisode-fair-page.reference-style-page {
  font-weight: 400 !important;
}

/* Paragraphs, body lists, questions, controls, links, labels, and prices. */
body.furisode-fair-page.reference-style-page :is(p, li, a, summary, button, label, small, figcaption, strong),
body.furisode-fair-page.reference-style-page :is(
  .benefit-copy,
  .benefit-ribbon,
  .benefit-ribbon *,
  .benefit-numeric-value,
  .benefit-number-suffix,
  .benefit-maximum-label,
  .benefit-maximum-value,
  .step-flow-number,
  .prephoto-flow-label,
  .nextgen-voice-copy,
  .fair2-plan-benefit-label,
  .month-ring text
) {
  font-weight: 400 !important;
}

/* These are visual titles rather than body copy, so retain heading emphasis. */
body.furisode-fair-page.reference-style-page :is(
  h1, h2, h3, h4, h5, h6,
  .poster-option strong,
  .simultaneous-strip,
  .ribbon-title,
  .reservation-pill,
  .student-limited,
  .flow-section-heading,
  .fair2-faq-heading
) {
  font-weight: 900 !important;
}

/* Decorative framed labels stay bold even in the normal-body comparison. */
body.furisode-fair-page.reference-style-page :is(
  .consultation-brand-message p,
  .benefit-ribbon,
  .benefit-ribbon *,
  .month-ring text,
  .nextgen-service-bubbles li,
  .nextgen-service-bubble-line,
  .prephoto-flow-label,
  .prephoto-flow-label *
) {
  font-weight: 700 !important;
}

/* Keep the two-line labels centered, with a compact and even 10px line gap. */
body.furisode-fair-page.reference-style-page .prephoto-flow-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body.furisode-fair-page.reference-style-page .prephoto-flow-label-line {
  line-height: 1.18;
}

/* Remove only the six rounded tags directly beneath the BLANCO PLAN lead. */
body.furisode-fair-page.reference-style-page .fair2-plan-card--blanco > .fair2-plan-card__points {
  display: none;
}

/* Rental and photo inclusions become readable round items, not pill tags. */
body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-tags {
  --plan-circle-size: min(120px, calc((100% - 8px) / 2));
  display: grid;
  grid-template-columns: repeat(2, var(--plan-circle-size));
  justify-content: center;
  gap: 8px;
}

body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-tags li {
  display: grid;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 8px;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.28;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Comparison source: fair2-plan-header-stack-center.css */
/* v425 official - put the price beneath the plan title, centered. */
body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--blanco,
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-card__header {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--blanco,
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-card__header > div,
body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--blanco,
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-card__header :is(p, h3, strong) {
  width: 100%;
  text-align: center;
}

body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--blanco,
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-card__header strong {
  align-self: center;
}

/* The family-furisode card has no single header price, so center its title only. */
body.furisode-fair-page.reference-style-page .fair2-plan-card--family .fair2-plan-card__header,
body.furisode-fair-page.reference-style-page .fair2-plan-card--family .fair2-plan-card__header > div,
body.furisode-fair-page.reference-style-page .fair2-plan-card--family .fair2-plan-card__header h3 {
  width: 100%;
  text-align: center;
}

/* Comparison source: fair2-plan-circles-small.css */
/* v425 official - horizontal tiles; keep the original blue and green colour systems. */
body.furisode-fair-page.reference-style-page .fair2-plan-card--rental .fair2-plan-tags {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.furisode-fair-page.reference-style-page .fair2-plan-card--photo .fair2-plan-tags {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-tags li {
  width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 4px 5px;
  border-radius: 8px;
  aspect-ratio: auto;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.25;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: keep-all;
}

/* Keep the original pink family-plan palette while matching the tile form. */
body.furisode-fair-page.reference-style-page .fair2-plan-family-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.furisode-fair-page.reference-style-page .fair2-plan-family-tags li {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 66px;
  min-height: 66px;
  padding: 4px;
  place-items: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: keep-all;
}

body.furisode-fair-page.reference-style-page .fair2-plan-family-price p span {
  overflow-wrap: normal;
  word-break: keep-all;
}

.fair2-family-price-break { display: none; }

@media (max-width: 499px) {
  body.furisode-fair-page.reference-style-page .fair2-plan-family-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .fair2-family-price-break { display: block; }

}

@media (min-width: 360px) and (max-width: 499px) {
  body.furisode-fair-page.reference-style-page .fair2-plan-family-tags li:nth-child(3) .fair2-family-break--wide {
    display: none;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-family-tags li:nth-child(4) .fair2-family-break--narrow {
    display: none;
  }
}

/* Never leave a single final character on a new line in compact labels. */
body.furisode-fair-page.reference-style-page :is(.option-top, .student-limited) {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

@media (max-width: 389px) {
  body.furisode-fair-page.reference-style-page :is(
    .fair2-plan-card--rental,
    .fair2-plan-card--photo
  ) .fair2-plan-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.furisode-fair-page.reference-style-page :is(
    .fair2-plan-card--rental,
    .fair2-plan-card--photo
  ) .fair2-plan-tags li {
    height: 72px !important;
    min-height: 72px !important;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-family-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-family-tags li {
    height: 66px;
    min-height: 66px;
  }
}

/* Comparison source: fair2-rental-flow-vertical.css */
/* v425 official - compact vertical rental-flow cards with a protected cutout lane. */
body.furisode-fair-page.reference-style-page .step-flow-list--rental {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0 10px;
}

body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card,
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(even),
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card--last {
  display: grid;
  grid-column: auto !important;
  grid-row: auto !important;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 12px 16px;
  align-items: center;
  justify-self: stretch;
  background-color: #fffdfd;
  background-image: none;
  border: 2px solid rgba(255, 255, 255, .98);
  box-shadow: 0 0 0 3px rgba(133, 0, 10, .18), 4px 5px 0 rgba(117, 15, 29, .18);
  transform: none;
}

body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-number {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 4px 0 3px;
  transform: none;
}

body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 3px;
  line-height: 1.35;
  text-align: left;
}

body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card p,
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card--last p {
  grid-column: 2;
  grid-row: 2;
  max-width: none;
  margin: 0;
  line-height: 1.55;
  text-align: left;
}

body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:not(:last-child)::after,
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(1)::after,
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(2)::after,
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(3)::after,
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(4)::after {
  top: auto;
  right: auto;
  bottom: -26px;
  left: 44px;
  width: 0;
  height: 24px;
  border-top: 0;
  border-left: 4px dotted #8f1524;
  transform: translateX(-2px);
}

/* The Step 5 figure rises into Step 4. Both cards reserve a right-side lane for it. */
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(4),
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card--last {
  padding-right: 104px;
}

body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(4) :is(h3, p),
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card--last :is(h3, p) {
  position: relative;
  z-index: 4;
}

body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-cutout {
  right: -14px;
  bottom: -14px;
  left: auto;
  z-index: 3;
  width: 94px;
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page .step-flow-list--rental {
    gap: 22px;
    padding-top: 14px;
  }

  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card,
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(even),
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card--last {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 10px;
    min-height: 0;
    padding: 10px;
  }

  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-number {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }

  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:not(:last-child)::after,
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(1)::after,
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(2)::after,
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(3)::after,
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(4)::after {
    bottom: -24px;
    left: 34px;
    height: 22px;
  }

  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card:nth-child(4),
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-card--last {
    padding-right: 74px;
  }

  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-cutout {
    right: -12px;
    bottom: 43px;
    width: 72px;
  }
}

/* Comparison source: fair2-brand-message-centered.css */
/* v425 official - centered, balanced copy in the BLANCO introduction frame. */
body.furisode-fair-page.reference-style-page .rental-value-brand-message {
  display: grid;
  min-height: 142px;
  padding: 20px 32px;
  place-items: center;
  isolation: isolate;
  text-align: center;
}

body.furisode-fair-page.reference-style-page .rental-value-brand-message .rental-value-accent {
  z-index: 1;
}

body.furisode-fair-page.reference-style-page .fair2-brand-message-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--pink-deep);
  font-family: var(--sans);
  font-size: 18.4px;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.64;
  text-align: center;
}

.fair2-brand-message-copy span {
  display: none;
  white-space: nowrap;
}

.fair2-brand-message-copy .fair2-brand-copy--wide { display: block; }

@media (min-width: 360px) and (max-width: 499px) {
  body.furisode-fair-page.reference-style-page .rental-value-brand-message {
    min-height: 136px;
    padding: 18px 24px;
  }

  body.furisode-fair-page.reference-style-page .fair2-brand-message-copy {
    font-size: 14px;
    line-height: 1.6;
  }

  .fair2-brand-message-copy .fair2-brand-copy--wide { display: none; }
  .fair2-brand-message-copy .fair2-brand-copy--mid { display: block; }
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page .rental-value-brand-message {
    min-height: 168px;
    padding: 16px 18px;
  }

  body.furisode-fair-page.reference-style-page .fair2-brand-message-copy {
    font-size: 13px;
    line-height: 1.54;
  }

  .fair2-brand-message-copy .fair2-brand-copy--wide { display: none; }
  .fair2-brand-message-copy .fair2-brand-copy--small { display: block; }
}

/* Comparison source: fair2-nextgen-bubbles-balanced.css */
/* v425 official - enlarge the copy within the five self-service circles. */
body.furisode-fair-page.reference-style-page .nextgen-service-bubbles {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(100%, 360px);
  max-width: 360px;
  margin-right: auto !important;
  margin-left: auto !important;
  transform: none !important;
  gap: 6px;
}

body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li {
  grid-column: span 2;
  padding: 2px;
  font-size: clamp(17.5px, 4.3vw, 22px);
  font-weight: 900 !important;
  letter-spacing: -.045em;
  line-height: 1.14;
  overflow-wrap: normal;
  word-break: keep-all;
}

body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li:nth-child(4) {
  grid-column: 2 / span 2;
}

body.furisode-fair-page.reference-style-page .nextgen-service-bubble-line {
  display: block;
  white-space: nowrap;
}

/* 521px以上は、5つを横一列で見せる。 */
@media (min-width: 521px) {
  body.furisode-fair-page.reference-style-page .nextgen-service-visual {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(100%, 450px);
    max-width: 450px;
    gap: 4px;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li,
  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li:nth-child(4) {
    grid-column: auto;
    padding: 1px;
    font-size: 17px;
    letter-spacing: -.1em;
    line-height: 1.1;
  }
}

/* 520px以下は、文字の読める円の直径を保つため上3・下2に切り替える。 */
@media (max-width: 520px) {
  body.furisode-fair-page.reference-style-page .nextgen-service-visual {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: min(100%, 360px);
    max-width: 360px;
    gap: 6px;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li,
  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li:nth-child(4) {
    grid-column: span 2;
    padding: 2px;
    font-size: 17px;
    letter-spacing: -.045em;
    line-height: 1.14;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles {
    gap: 4px;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li,
  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li:nth-child(4) {
    font-size: clamp(13px, 5.4vw, 17px);
    letter-spacing: -.11em;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li:nth-child(5) {
    grid-column: 4 / span 2;
    width: auto;
    justify-self: auto;
  }
}

@media (max-width: 299px) {
  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li,
  body.furisode-fair-page.reference-style-page .nextgen-service-bubbles li:nth-child(4) {
    font-size: 14.5px;
  }
}

/* Comparison source: fair2-nextgen-ribbon-fit.css */
/* v425 official - keep the next-generation ribbon inside its panel on narrow screens. */
@media (min-width: 560px) {
  body.furisode-fair-page.reference-style-page .rental-value-nextgen > h3 {
    --nextgen-panel-inset: 52px;
  }
}

@media (max-width: 559px) {
  body.furisode-fair-page.reference-style-page .rental-value-nextgen > h3 .nextgen-title-copy {
    top: calc(50% - 15px);
  }

  body.furisode-fair-page.reference-style-page .rental-value-nextgen > h3 {
    --nextgen-panel-inset: clamp(32px, 14vw, 58px);
    width: min(100%, 340px);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  body.furisode-fair-page.reference-style-page .rental-value-nextgen > h3 img {
    transform: scale(1.07);
    transform-origin: center center;
  }
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page .rental-value-nextgen > h3 {
    --nextgen-panel-inset: 34px;
  }

  body.furisode-fair-page.reference-style-page .rental-value-nextgen > h3 .nextgen-title-copy {
    font-size: clamp(13px, 4.5vw, 16px);
    line-height: 1.1;
  }
}

/* Comparison source: fair2-brand-spacing-compact.css */
/* v425 official - compact the spacing before the next-generation service panel. */
@media (max-width: 520px) {
  body.furisode-fair-page.reference-style-page .rental-value-brand-message {
    min-height: 0;
    margin-bottom: 16px;
    padding: 10px 12px;
  }

  body.furisode-fair-page.reference-style-page .fair2-brand-message-copy {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.45;
  }

  body.furisode-fair-page.reference-style-page .rental-value-nextgen {
    margin-top: 76px;
  }

  body.furisode-fair-page.reference-style-page .rental-value-nextgen > h3 {
    margin-bottom: 4px;
  }

  body.furisode-fair-page.reference-style-page .nextgen-service-visual {
    margin: -12px 0 10px;
  }
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page .rental-value-brand-message {
    padding: 10px;
  }

  body.furisode-fair-page.reference-style-page .fair2-brand-message-copy {
    font-size: 14px;
    line-height: 1.42;
  }

  body.furisode-fair-page.reference-style-page .rental-value-nextgen {
    margin-top: 69px;
  }
}

/* Comparison source: fair2-benefit-heading-gap.css */
/* v425 official - keep the month badge clear of the first glyph in every benefit heading. */
body.furisode-fair-page.reference-style-page .benefit-heading {
  /* The first visible title glyph sits 7〜12px outside the circular badge. */
  --benefit-month-gap: clamp(7px, 2.5vw, 12px);
  --benefit-title-bar-start: calc(var(--benefit-month-size) + var(--benefit-month-gap));
  height: clamp(92px, 21vw, 112px);
  min-height: clamp(92px, 21vw, 112px);
  padding-left: var(--benefit-title-bar-start);
}

body.furisode-fair-page.reference-style-page .benefit-heading h2.benefit-heading-text {
  inset: 0 0 0 var(--benefit-title-bar-start);
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  line-height: 1;
  padding: 0;
  /* Shrink continuously before the 500px range so the full title never exceeds the bar. */
  font-size: clamp(1.43rem, 8.2vw, 2.925rem);
  letter-spacing: 0;
  overflow: hidden;
  text-align: left;
}

body.furisode-fair-page.reference-style-page .benefit-heading h2.benefit-heading-text .fair2-benefit-title-full {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  letter-spacing: 0;
}

@media (max-width: 450px) {
  body.furisode-fair-page.reference-style-page .benefit-heading h2.benefit-heading-text {
    font-size: clamp(1.43rem, 8.2vw, 2.6rem);
    letter-spacing: 0;
  }
}

/* Comparison source: fair2-contract-benefit3-wrap.css */
/* v425 official - preserve the requested two-line contract benefit 03 copy at narrow widths. */
@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 8px;
  }

  body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models .benefit-ribbon {
    width: 44px;
  }

  body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models .benefit-copy {
    font-size: 14px;
  }

  body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models .benefit-contract-highlight {
    font-size: 18.5px;
    letter-spacing: 0;
    line-height: 1.25;
  }
}

/* Comparison source: fair2-contract-benefit3-image.css */
/* v425 official - supplied before/after photo for contract benefit 03. */
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models .benefit-furisode-pair {
  align-items: center;
  display: flex !important;
  height: auto;
  margin-top: 14px;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models .fair2-contract-benefit3-transition {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: min(100%, 500px);
}

/* Keep 20px below the supplied image inside the white contract-benefit card. */
body.furisode-fair-page.reference-style-page .benefit-card-contract {
  padding-bottom: 20px !important;
}

/* Restore the pink panel's original outer bottom padding. */
body.furisode-fair-page.reference-style-page .benefit-panel-contract {
  padding-bottom: 28px !important;
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models .benefit-furisode-pair {
    margin-top: 10px;
  }
}

/* Comparison source: fair2-benefit-maximum-layout.css */
/* v425 official - match the requested vertical "最大" label and price hierarchy. */
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-maximum-group {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: clamp(3px, 1.5vw, 8px);
  width: 100%;
  white-space: nowrap;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-maximum {
  position: static;
  display: grid;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 1.55em;
  height: 3.6em;
  margin: 0;
  padding: 2px 1px;
  align-items: center;
  justify-items: center;
  background: #211a1a;
  color: #fff;
  font-size: clamp(13px, 4.35vw, 17px);
  font-weight: 400;
  line-height: 1;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-maximum-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: none;
  line-height: 1;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-amount {
  display: inline-flex !important;
  align-items: baseline;
  flex: 0 1 auto;
  gap: clamp(2px, .8vw, 5px);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-numeric-value {
  display: inline-block;
  font-size: clamp(1.88rem, 11vw, 3.1rem);
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-number-suffix {
  font-size: clamp(15px, 4.1vw, 19px);
  font-weight: 400 !important;
  line-height: 1;
}

/* Comparison source: fair2-consultation-center-type.css */
/* v425 official - keep the fitting consultation copy on one visual centerline. */
body.furisode-fair-page.reference-style-page .consultation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.furisode-fair-page.reference-style-page .consultation-card > h2,
body.furisode-fair-page.reference-style-page .consultation-card > p {
  align-self: stretch;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

/* The final exclamation glyph makes the perceived center sit 2px right of the box center. */
body.furisode-fair-page.reference-style-page .consultation-card > h2 {
  left: -2px;
}

/* Let the framed message use the same available width on both sides. */
body.furisode-fair-page.reference-style-page .consultation-brand-message {
  align-self: center;
  box-sizing: border-box;
  width: min(100%, 440px) !important;
  min-width: 0;
  max-width: 440px;
  margin-inline: auto;
}

/* The "よくばりが叶う" message never scales beneath 17px. */
body.furisode-fair-page.reference-style-page .consultation-brand-message p {
  font-size: clamp(17px, 4.45vw, 21.44px);
  line-height: 1.62;
  text-align: center;
}

@media (max-width: 300px) {
  /* Keep the supplied three-line consultation copy natural at the narrowest width. */
  body.furisode-fair-page.reference-style-page .consultation-card > p {
    font-size: 15px;
    letter-spacing: -.03em;
  }

  /* The 17px decorative copy stays centered inside its own border. */
  body.furisode-fair-page.reference-style-page .consultation-brand-message {
    padding-inline: 12px;
  }
}

/* Comparison source: fair2-benefit-pink-emphasis.css */
/* v425 official - requested pink emphasis in the benefit copy. */
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-maximum {
  /* The fixed-height label is 6px lower: 3px less at both top and bottom. */
  height: calc(3.6em - 6px);
  padding-block: 0;
  background: #D92F48;
  color: #fff;
}
/* Limit pink emphasis to the exact prices and benefit names requested. */
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-ticket .benefit-amount,
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .benefit-highlight,
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-amount,
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item .benefit-contract-highlight,
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-ticket .benefit-amount *,
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .benefit-highlight *,
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--contract-discount .benefit-amount *,
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item .benefit-contract-highlight * {
  color: #D92F48 !important;
  font-weight: 900 !important;
}

/* Comparison source: fair2-benefit-panel-background.css */
/* v425 official - set both benefit-section backgrounds to the requested pink.
   Cards, ribbons, headings, and their existing contrast treatments remain intact. */
body.furisode-fair-page.reference-style-page :is(.benefit-panel-visit, .benefit-panel-contract) {
  background-color: #eea8ad;
}

/* Comparison source: fair2-visit-benefit2-gift-images.css */
/* v425 official - keep benefit 02 compact. The product images live in the
   unused right side of its first line and never overlap the two-line copy. */
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics {
  align-items: center;
  min-height: 0;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .benefit-copy {
  align-self: center;
  display: block;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line {
  display: block;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--first {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  min-width: 0;
  white-space: nowrap;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--first .benefit-highlight {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-particle {
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--second {
  align-items: baseline;
  display: flex;
  gap: 0;
  line-height: 1.08;
  white-space: nowrap;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--second .benefit-highlight {
  font-size: 21px;
  line-height: 1.18;
  white-space: nowrap;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-present-suffix {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-gift-images {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  height: 39px;
  justify-content: flex-end;
  margin: 0;
  pointer-events: none;
  position: static;
  width: auto;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-gift-images img {
  display: block;
  height: auto;
  margin: 0;
  object-fit: contain;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-cosmetics {
  transform: none;
  width: 37px;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-face-mask {
  transform: none;
  width: 33px;
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--first {
    gap: 3px;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line .benefit-highlight {
    font-size: 17px;
    line-height: 1.24;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-gift-images {
    gap: 3px;
    height: 31px;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-cosmetics {
    width: 28px;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-face-mask {
    width: 26px;
  }
}

@media (max-width: 379px) {
  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--second .benefit-highlight {
    font-size: 17.5px;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-present-suffix {
    font-size: 13px;
  }
}

@media (max-width: 319px) {
  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--second {
    display: block;
    white-space: normal;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-present-suffix {
    display: block;
    font-size: 13px;
    line-height: 1.2;
  }
}

/* Keep the connecting particle in normal body type, while both product names
   share one pink display scale. On narrow screens the delivery phrase moves
   to a third line so the product names and gift cutouts never collide. */
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--first {
  gap: 0;
  justify-content: flex-start;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--first .benefit-highlight,
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--second .benefit-highlight {
  font-size: clamp(22.5px, 6.375vw, 27px);
  line-height: 1.18;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-gift-images {
  margin-left: auto;
}

@media (max-width: 459px) {
  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--second {
    display: block;
    white-space: normal;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-present-suffix {
    display: block;
  }
}

@media (max-width: 319px) {
  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--first .benefit-highlight,
  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-copy-line--second .benefit-highlight {
    font-size: 17px;
    line-height: 1.24;
  }
}

/* Use the same normal body type as benefit 01 for the delivery phrase. Grow
   the product cutouts only into available whitespace, preserving clear copy. */
body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-present-suffix {
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-gift-images {
  gap: 6px;
  height: auto;
  width: clamp(57px, calc(100% - 148px), 100px);
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-cosmetics {
  width: calc((100% - 6px) * .53);
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-face-mask {
  width: calc((100% - 6px) * .47);
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-gift-images {
    gap: 3px;
    width: 57px;
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-cosmetics {
    width: calc((100% - 3px) * .53);
  }

  body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item--visit-cosmetics .fair2-benefit2-face-mask {
    width: calc((100% - 3px) * .47);
  }
}

/* Comparison source: fair2-visit-benefit1-decoration.css */
/* v425 official - supplied transparent flourish begins at the upper-right of
   visit benefit 01 and is allowed to continue gently into benefit 02. */
body.furisode-fair-page.reference-style-page #visitBenefits {
  isolation: isolate;
  overflow: visible;
  position: relative;
}

body.furisode-fair-page.reference-style-page #visitBenefits::after {
  aspect-ratio: 500 / 358;
  background: url('../img/furisode-fair/fair2-visit-benefit-decoration-5.webp') no-repeat right top / contain;
  content: '';
  height: auto;
  pointer-events: none;
  position: absolute;
  right: -9px;
  top: -8px;
  width: clamp(170px, 53vw, 260px);
  z-index: 1;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item {
  overflow: visible;
  position: relative;
}

body.furisode-fair-page.reference-style-page #visitBenefits .benefit-item > :is(.benefit-ribbon, .benefit-copy) {
  position: relative;
  z-index: 2;
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page #visitBenefits::after {
    right: -5px;
    top: -4px;
    width: clamp(154px, 58vw, 205px);
  }
}

/* Comparison source: fair2-contract-benefit-decoration.css */
/* v425 official - one supplied decoration spans contract benefits 01 and 02,
   and is allowed to extend slightly into benefit 03 behind the copy. */
body.furisode-fair-page.reference-style-page #contractBenefits {
  isolation: isolate;
  overflow: visible;
  position: relative;
}

/* Remove the former separate low-opacity decorations. */
body.furisode-fair-page.reference-style-page #contractBenefits :is(
  .benefit-item--contract-discount,
  .benefit-item--contract-hair-accessory
)::after {
  display: none;
}

body.furisode-fair-page.reference-style-page #contractBenefits::after {
  background: url('../img/furisode-fair/fair2-contract-benefit-decoration-3-transparent.webp') no-repeat right -8px top -4px / auto 100%;
  content: '';
  height: clamp(220px, 69vw, 286px);
  pointer-events: none;
  position: absolute;
  right: -8px;
  top: -5px;
  width: min(236px, 74%);
  z-index: 0;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item {
  isolation: auto;
  position: relative;
  z-index: 1;
}

body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item :is(.benefit-ribbon, .benefit-copy) {
  z-index: 1;
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page #contractBenefits::after {
    height: 220px;
    right: -6px;
    top: -4px;
    width: min(202px, 82%);
  }
}

/* Comparison source: fair2-visit-benefit01-compact.css */
/* v425 official - use the same compact density for every visit and contract
   benefit bookmark. Each white row follows its actual content height. */
body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-item {
  min-height: 0;
  padding-block: 3px;
}

/* Add breathing space only around each horizontal divider: +3px above and below.
   The first and final outer edges remain at the compact 3px baseline. */
body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-item:not(:last-child) {
  padding-bottom: 6px;
}

body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-item:not(:first-child) {
  padding-top: 6px;
}

body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-ribbon--bookmark {
  min-height: 0;
  padding: 5px 0 13px;
  grid-template-rows: .82fr 1.18fr;
}

/* Preserve the supplied image's existing bottom clearance in benefit 03. */
body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models {
  padding-bottom: 0;
}

@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-item {
    padding-block: 3px;
  }

  body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-item:not(:last-child) {
    padding-bottom: 6px;
  }

  body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-item:not(:first-child) {
    padding-top: 6px;
  }

  body.furisode-fair-page.reference-style-page :is(#visitBenefits, #contractBenefits) .benefit-ribbon--bookmark {
    padding: 4px 0 11px;
    grid-template-rows: .82fr 1.18fr;
  }

  body.furisode-fair-page.reference-style-page #contractBenefits .benefit-item--models {
    padding-bottom: 0;
  }
}


/* ========================================================================
   v430: 次世代型サービスの円をリボン下から約14pxへ再調整
   ======================================================================== */
/* リボン下端から最上段の円上端までをPC幅でも約14pxに保ちます。 */
body.furisode-fair-page.reference-style-page .nextgen-service-visual {
  margin-top: -31px;
}

/* 520px以下では上3・下2の円配置を保ったまま、同じ約14pxへ調整します。 */
@media (max-width: 520px) {
  body.furisode-fair-page.reference-style-page .nextgen-service-visual {
    margin-top: -20px;
  }
}

/* ========================================================================
   v431: ACCESSの各店舗情報を中央揃え
   ======================================================================== */
/* 店名・地図の下にある郵便番号、住所、電話、営業時間を同じ中央軸へ揃えます。 */
body.furisode-fair-page.reference-style-page .access-details {
  text-align: center;
}

/* ========================================================================
   v432: 次世代型サービスの円上余白を約17pxへ再調整
   ======================================================================== */
/* リボン下端から最上段の円上端までをPC幅でも約17pxに統一します。 */
body.furisode-fair-page.reference-style-page .nextgen-service-visual {
  margin-top: -28px;
}

/* 520px以下では上3・下2の円配置を保ったまま、同じ約17pxへ調整します。 */
@media (max-width: 520px) {
  body.furisode-fair-page.reference-style-page .nextgen-service-visual {
    margin-top: -17px;
  }
}

/* ========================================================================
   v433: 次世代型サービスの円上余白を約20pxへ再調整
   ======================================================================== */
/* リボン下端から最上段の円上端までをPC幅でも約20pxに統一します。 */
body.furisode-fair-page.reference-style-page .nextgen-service-visual {
  margin-top: -25px;
}

/* 520px以下では上3・下2の円配置を保ったまま、同じ約20pxへ調整します。 */
@media (max-width: 520px) {
  body.furisode-fair-page.reference-style-page .nextgen-service-visual {
    margin-top: -14px;
  }
}

/* ========================================================================
   v434: プラン注釈リストを不要に改行しない自然な折り返しへ
   ======================================================================== */
/* 注釈項目は横方向へ続け、カード幅に入り切らない項目だけを次行へ送ります。 */
body.furisode-fair-page.reference-style-page .fair2-plan-notes {
  display: block;
}

body.furisode-fair-page.reference-style-page .fair2-plan-notes li {
  display: inline-block;
  max-width: 100%;
  margin: 0 .7em .25em 0;
  vertical-align: top;
}

/* v435: ご試着・ご相談案内の説明文はHTML内の固定改行1つで2行構成にします。 */

/* ========================================================================
   v436: ご試着・ご相談案内の説明文は自然折り返し、上下余白を約半分へ
   ======================================================================== */
/* 見出しから説明文までの見た目の間隔を約16pxから約8pxへ圧縮します。 */
body.furisode-fair-page.reference-style-page .consultation-card > h2 {
  margin-bottom: 0;
}

/* 説明文下からカード下端までの見た目の間隔を約28pxから約14pxへ圧縮します。 */
body.furisode-fair-page.reference-style-page .consultation-card {
  padding-bottom: 6px;
}

/* v437: ご試着・ご相談案内の説明文の改行は従来の3行構成へ戻し、v436の余白圧縮は維持します。 */

/* ========================================================================
   v438: 各プランの注釈リストをカード中央へ揃える
   ======================================================================== */
body.furisode-fair-page.reference-style-page .fair2-plan-notes {
  text-align: center;
}

body.furisode-fair-page.reference-style-page .fair2-plan-notes li {
  margin-right: .35em;
  margin-left: .35em;
}

/* ========================================================================
   v439: お母様の振袖プランの専用注釈を中央揃え
   ======================================================================== */
/* 箇条書き記号も本文と同じインライン行に置き、ひとまとまりで中央へ揃えます。 */
body.furisode-fair-page.reference-style-page .fair2-plan-family-note {
  padding-left: 0;
  text-align: center;
}

body.furisode-fair-page.reference-style-page .fair2-plan-family-note::before {
  position: static;
  margin-right: .35em;
}

/* ========================================================================
   v452: プラン一覧の料金表示を視覚的に太くする
   ======================================================================== */
/* Zen Kaku Gothic Newの最太900ウェイトを維持したまま、ごく薄い同色の輪郭で
   BLANCO・RENTAL・PHOTO・お母様の振袖の4カード内にある料金だけを強調します。 */
body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--blanco,
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-card__header strong,
body.furisode-fair-page.reference-style-page .fair2-plan-card--family .fair2-plan-family-price strong {
  font-weight: 900 !important;
  -webkit-text-stroke: .28px currentColor;
  paint-order: stroke fill;
}

/* ========================================================================
   v460: RENTAL PLANの4タイル文字を手書き風にする
   ======================================================================== */
/* 手書き塗り型と同じ4タイルだけへ、可読性を保つYomogiを限定適用します。
   他プラン・本文・見出しには既存のZen Kaku Gothic Newを維持します。 */
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .fair2-plan-card--rental .fair2-plan-tags li {
  font-family: "Yomogi", "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, sans-serif !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
}

/* ========================================================================
   v466: プランタイルを淡い手書き塗り型と元の文字色へ統一
   ======================================================================== */
/* 枠SVG・枠型WebPは使わず、提供された塗り型WebPだけをマスクに使用します。
   各プランの淡い背景色と元の濃い文字色を保ち、外枠を表示しません。 */
@supports (-webkit-mask: url('../img/furisode-fair/fair2-plan-tile-handdrawn-fill.webp') center / 100% 100% no-repeat) {
  body.furisode-fair-page.reference-style-page .fair2-plan-card--rental .fair2-plan-tags {
    --plan-tile-shape: #eef8ff;
    --plan-tile-text: #28658f;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-card--photo .fair2-plan-tags {
    --plan-tile-shape: #f1f8ef;
    --plan-tile-text: #4d7855;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-family-tags {
    --plan-tile-shape: #fff2f6;
    --plan-tile-text: #c24f83;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-tile {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border-color: transparent !important;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-tile::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    pointer-events: none;
    background: var(--plan-tile-shape);
    content: '';
    opacity: 1;
    -webkit-mask: url('../img/furisode-fair/fair2-plan-tile-handdrawn-fill.webp') center / 100% 100% no-repeat;
    mask: url('../img/furisode-fair/fair2-plan-tile-handdrawn-fill.webp') center / 100% 100% no-repeat;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-tile > span {
    position: relative;
    z-index: 2;
    color: var(--plan-tile-text);
    font-weight: 400;
    -webkit-text-stroke: 0;
  }

  body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .fair2-plan-card--rental .fair2-plan-tile > span {
    font-family: "Yomogi", "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, sans-serif !important;
  }
}

/* v467: 塗り型タイルの淡色背景を一段だけ濃くして視認性を上げる */
@supports (-webkit-mask: url('../img/furisode-fair/fair2-plan-tile-handdrawn-fill.webp') center / 100% 100% no-repeat) {
  body.furisode-fair-page.reference-style-page .fair2-plan-card--rental .fair2-plan-tags {
    --plan-tile-shape: #d7eefc;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-card--photo .fair2-plan-tags {
    --plan-tile-shape: #deeedc;
  }

  body.furisode-fair-page.reference-style-page .fair2-plan-family-tags {
    --plan-tile-shape: #fde2ec;
  }
}

/* v468: 全プランタイルの文字を手書き風に統一し、ピンクタイルの行間を揃える */
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .fair2-plan-tile > span {
  font-family: "Yomogi", "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, sans-serif !important;
  line-height: 1.25;
}

/* v469: 全プランタイルの手書き文字を少し太くして読みやすくする */
body.furisode-fair-page.reference-style-page .fair2-plan-tile > span {
  font-weight: 700;
  -webkit-text-stroke: .1px currentColor;
  paint-order: stroke fill;
}

/* v470: 手書き文字を前回より少し細くしつつ、通常より太い中間へ調整 */
body.furisode-fair-page.reference-style-page .fair2-plan-tile > span {
  font-weight: 600;
  -webkit-text-stroke: .06px currentColor;
}

/* ========================================================================
   v471: 小物17点フルセット内容を手書きのチェックリスト風に変更
   ======================================================================== */
.reference-style-page .fair2-plan-accessories {
  display: block;
  margin-top: 16px;
  padding: 8px 8px 10px;
  border: 0;
  text-align: center;
}

.reference-style-page .fair2-plan-accessories h3 {
  position: relative;
  color: #9f4667;
  font-family: "Yomogi", "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, sans-serif;
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.reference-style-page .fair2-plan-accessories h3::after {
  display: block;
  width: min(210px, 88%);
  height: 6px;
  margin: 5px auto 9px;
  background: #eca3bd;
  clip-path: polygon(0 37%, 7% 20%, 15% 35%, 24% 13%, 33% 31%, 42% 17%, 52% 38%, 61% 14%, 70% 30%, 79% 18%, 89% 35%, 100% 20%, 99% 73%, 92% 88%, 83% 68%, 73% 91%, 63% 72%, 53% 87%, 43% 68%, 33% 91%, 23% 71%, 13% 86%, 4% 69%);
  content: '';
  transform: rotate(-.45deg);
}

.reference-style-page .fair2-plan-accessories ul {
  justify-content: center;
  gap: 7px 15px;
}

.reference-style-page .fair2-plan-accessories li {
  position: relative;
  padding: 0 0 0 1.15em;
  color: #a94368;
  border: 0;
  border-radius: 0;
  font-family: "Yomogi", "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.reference-style-page .fair2-plan-accessories li::before {
  position: absolute;
  top: -.1em;
  left: 0;
  color: currentColor;
  content: '✓';
  font-family: "Yomogi", "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1;
  transform: rotate(-9deg);
}

/* v472: 共通ゴシック指定より優先して小物チェックリストへ手書き書体を実効 */
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .fair2-plan-accessories h3,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .fair2-plan-accessories li,
body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .fair2-plan-accessories li::before {
  font-family: "Yomogi", "Zen Kaku Gothic New", "Noto Sans JP", Meiryo, sans-serif !important;
}

/* v473: 手描き下線を見えやすいピンクへ調整 */
.reference-style-page .fair2-plan-accessories h3::after {
  height: 7px;
  background: #e67fa8 !important;
  opacity: 1;
}

/* v474: 見出し直下の余白を確保して手描き下線を常に表示 */
.reference-style-page .fair2-plan-accessories h3 {
  margin-bottom: 17px !important;
}

.reference-style-page .fair2-plan-accessories h3::after {
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%) rotate(-.45deg);
}

/* ========================================================================
   v475: お母様振袖の料金表を見出し直下へ移動し、全プラン料金を1.2倍にする
   ======================================================================== */
body.furisode-fair-page.reference-style-page :is(
  .fair2-plan-card--blanco,
  .fair2-plan-card--rental,
  .fair2-plan-card--photo
) .fair2-plan-card__header strong {
  font-size: clamp(1.74rem, 8.4vw, 2.4rem);
}

body.furisode-fair-page.reference-style-page .fair2-plan-card--family .fair2-plan-family-price {
  margin: 10px 0 0;
}

body.furisode-fair-page.reference-style-page .fair2-plan-card--family .fair2-plan-family-price strong {
  font-size: clamp(1.56rem, 7.2vw, 2.04rem);
}

/* v476: 小物チェックリストのレ点を小さな四角枠付きにする試作 */
.reference-style-page .fair2-plan-accessories li {
  padding-left: 1.48em;
}

.reference-style-page .fair2-plan-accessories li::before {
  display: grid;
  box-sizing: border-box;
  width: 1.08em;
  height: 1.08em;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: .92em;
  line-height: 1;
  transform: rotate(-6deg);
}

/* ========================================================================
   v477: チェック枠を水平にし、品目を少し太くして全体を囲む試作
   ======================================================================== */
.reference-style-page .fair2-plan-accessories {
  padding: 12px 12px 13px;
  border: 1px solid #dfa0b8;
  border-radius: 0;
}

body.furisode-fair-page.reference-style-page:not(#blanco-gothic-exception):not(#blanco-gothic-exception-secondary) .fair2-plan-accessories li {
  font-weight: 700 !important;
  -webkit-text-stroke: .04px currentColor;
  paint-order: stroke fill;
}

.reference-style-page .fair2-plan-accessories li::before {
  transform: none;
}

/* v478: レンタルフローのSTEP数字と円フチの内側余白を確保 */
body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-number strong {
  font-size: 1.5rem;
  line-height: .9;
}

/* v479: 48pxのSTEP円では数字をさらに少し内側へ収める */
@media (max-width: 359px) {
  body.furisode-fair-page.reference-style-page .step-flow-list--rental .step-flow-number strong {
    font-size: 1.3rem;
  }
}


/* v486: fair2の月次特典はfair2.htmlのliで直接管理します。
   順番ではなく各liの専用クラスへスタイルを結び、追加・削除・並べ替え後も既存特典の装飾を保持します。 */


/* v499: 右上の2か所のテープを現在の大きさから0.9倍に縮小。
   top/right・回転角・左下テープ・本文の配置は変更しません。 */
.reference-style-page .consultation-accent--stripe {
  width: clamp(44.631px, 13.851vw, 58.482px);
}
.reference-style-page .rental-value-accent--stripe {
  width: clamp(49.59px, 15.39vw, 64.98px);
}

/* v500: 「よくばりが叶う」側だけ、v499から5％拡大して5px下へ。
   もう一方の右上テープ・左下テープ・right・回転角は維持します。 */
.reference-style-page .consultation-accent--stripe {
  width: clamp(46.86255px, 14.54355vw, 61.4061px);
  top: -26px;
}

/* v501: 「よくばりが叶う」側の右上テープだけv500からさらに10％拡大。
   top: -26px・横位置・回転角と、ほかのテープは維持します。 */
.reference-style-page .consultation-accent--stripe {
  width: clamp(51.548805px, 15.997905vw, 67.54671px);
}