/* =========================================================
 * STEP9-H-1: Velvet Archive ホームページ
 * ========================================================= */

.va-home-main {
  padding-bottom: 54px;
}

/* =========================================================
 * STEP10-E: トップページ・ブランドヒーロー
 * =========================================================
 * 目的:
 * - 最初に数値を見せるのではなく、ブランドコピーと商品イメージを主役にする。
 * - 既存の商品画像を最大3枚まで再利用し、商品データ自体は変更しない。
 * - 登録件数などの情報はヒーロー直下の小さなデータストリップへ移す。
 * ========================================================= */
.va-home-hero {
  margin-top: 22px;
}

.va-home-hero-wrap {
  overflow: hidden;
  border: 1px solid #e8ddd5;
  border-radius: 18px;
  background: #fffdfb;
  box-shadow: 0 7px 24px rgba(64, 50, 43, 0.05);
}

.va-home-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  min-height: 470px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(191, 133, 139, 0.08), transparent 26%),
    linear-gradient(135deg, #fffdfb 0%, #f8efec 100%);
  box-shadow: none;
}

.va-home-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  padding: 58px 28px 58px 48px;
}

.va-home-kicker,
.va-home-section-kicker {
  margin: 0 0 8px;
  color: #bf858b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.va-home-hero h1 {
  max-width: 9.4em;
  margin: 0;
  color: #2f2926;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.75rem, 5.2vw, 4.9rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.va-home-lead {
  max-width: 34em;
  margin: 24px 0 0;
  color: #746962;
  font-size: 0.98rem;
  line-height: 1.95;
}

.va-home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.va-home-primary,
.va-home-secondary {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.va-home-primary {
  border: 1px solid #bf858b;
  background: #bf858b;
  color: #fff;
}

.va-home-primary:hover {
  border-color: #aa747a;
  background: #aa747a;
  color: #fff;
}

.va-home-secondary {
  border: 1px solid #dccfc6;
  background: #fff;
  color: #675c55;
}

.va-home-secondary:hover {
  border-color: #cda3a7;
  background: #fff8f6;
  color: #8e6167;
}

.va-home-principle {
  margin: 16px 0 0;
  color: #998d85;
  font-size: 0.73rem;
}

/* ---------------------------------------------------------
 * ヒーロー右側の商品イメージ
 * --------------------------------------------------------- */
.va-home-hero-visual {
  position: relative;
  min-width: 0;
  min-height: 470px;
  overflow: hidden;
  background:
    linear-gradient(130deg, rgba(233, 214, 209, 0.7), rgba(249, 241, 238, 0.95));
}

.va-home-hero-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 253, 251, 0.34) 0%, rgba(255, 253, 251, 0.03) 28%, transparent 55%),
    linear-gradient(180deg, transparent 56%, rgba(62, 42, 38, 0.18) 100%);
}

.va-home-hero-collage {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 470px;
  grid-template-columns: minmax(0, 1.5fr) minmax(140px, 0.72fr);
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  background: #eadfda;
}

.va-home-hero-image {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #eee4df;
}

.va-home-hero-image-1 {
  grid-row: 1 / -1;
}

.va-home-hero-collage.is-count-1 {
  display: block;
}

.va-home-hero-collage.is-count-1 .va-home-hero-image-1 {
  width: 100%;
  height: 100%;
}

.va-home-hero-collage.is-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.va-home-hero-collage.is-count-2 .va-home-hero-image-1 {
  grid-row: auto;
}

.va-home-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  transform: scale(1.01);
  transition: transform 300ms ease, filter 300ms ease;
}

.va-home-hero-image:hover img,
.va-home-hero-image:focus-visible img {
  transform: scale(1.035);
  filter: saturate(1.03) contrast(1.01);
}

.va-home-hero-visual.is-empty,
.va-home-hero-placeholder {
  min-height: 470px;
  background:
    radial-gradient(circle at 66% 32%, rgba(255, 255, 255, 0.96), transparent 18%),
    radial-gradient(circle at 48% 58%, rgba(217, 183, 179, 0.48), transparent 28%),
    linear-gradient(140deg, #ead7d3 0%, #f8eeeb 54%, #e4cbc7 100%);
}

/* =========================================================
 * STEP10-F-2: ヒーロー右下コピーをコンパクトな誌面風デザインへ
 *
 * STEP10-F-1 の可読性を維持しつつ、選択した3枚目の商品画像を
 * できるだけ隠さないよう、縦方向の余白を圧縮。ブランド名を
 * 細い罫線で挟み、コピー末尾に矢印を添えて、雑誌・ルックブック
 * のキャプションのような階層と視線誘導をつくる。
 * 画像そのもの・画像選択設定・リンク先には変更を加えない。
 * ========================================================= */
.va-home-hero-visual-copy {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: min(285px, calc(100% - 28px));
  padding: 6px 14px 7px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(50, 31, 28, 0.78), rgba(42, 27, 25, 0.64));
  box-shadow: 0 8px 22px rgba(40, 25, 22, 0.18);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 7px rgba(24, 14, 12, 0.56);
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.va-home-hero-visual-copy span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ブランド名の左右に短い罫線を置き、横方向のまとまりを作る。 */
.va-home-hero-visual-copy span::before,
.va-home-hero-visual-copy span::after {
  content: "";
  flex: 1 1 24px;
  max-width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
}

.va-home-hero-visual-copy strong {
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.085em;
  white-space: nowrap;
}

/* コピーの末尾だけに小さな矢印を添え、ボタン化せず視線誘導に使う。 */
.va-home-hero-visual-copy strong::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.55em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88em;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------------------------------------------------------
 * ヒーロー下のデータストリップ
 * --------------------------------------------------------- */
.va-home-data-strip {
  display: grid;
  grid-template-columns: 0.72fr 0.72fr 1.56fr;
  border-top: 1px solid #e5d8d3;
  background: rgba(249, 241, 238, 0.92);
}

.va-home-data-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  padding: 17px 24px;
  border-right: 1px solid #e5d8d3;
}

.va-home-data-item:last-child {
  border-right: 0;
}

.va-home-data-item span {
  color: #8f7e77;
  font-size: 0.7rem;
  white-space: nowrap;
}

.va-home-data-item strong {
  color: #3a2d2a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1;
  white-space: nowrap;
}

.va-home-data-item-wide strong {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
}

.va-home-data-item small {
  color: #9d8f88;
  font-size: 0.65rem;
  line-height: 1.5;
}
.va-home-admin-note {
  display: flex;
  gap: 10px 14px;
  align-items: baseline;
  margin: 18px 0 0;
  padding: 11px 14px;
  border: 1px solid #e8d8d2;
  border-radius: 10px;
  background: #fff8f5;
  color: #746861;
  font-size: 0.77rem;
  line-height: 1.6;
}

.va-home-admin-note strong {
  color: #a76e75;
  white-space: nowrap;
}

.va-home-find,
.va-home-about,
.va-home-products {
  padding-top: 70px;
}

.va-home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.va-home-section-head h2,
.va-home-about h2,
.va-home-compare-cta h2 {
  margin: 0;
  color: #2f2926;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.25;
}

.va-home-section-head > p {
  max-width: 32em;
  margin: 0;
  color: #8a7f77;
  font-size: 0.8rem;
  line-height: 1.7;
  text-align: right;
}

.va-home-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.va-home-path-card {
  display: block;
  padding: 24px;
  border: 1px solid #e7ddd4;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.va-home-path-card:hover {
  transform: translateY(-2px);
  border-color: #d8b7b5;
  box-shadow: 0 10px 28px rgba(62, 48, 40, 0.07);
}

.va-home-path-number {
  display: block;
  margin-bottom: 26px;
  color: #c38d92;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
}

.va-home-path-card strong {
  display: block;
  color: #332d29;
  font-size: 1rem;
}

.va-home-path-card p {
  min-height: 4.5em;
  margin: 10px 0 18px;
  color: #81756e;
  font-size: 0.78rem;
  line-height: 1.75;
}

.va-home-path-card b {
  color: #a56f75;
  font-size: 0.74rem;
}

.va-home-about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 42px;
  align-items: start;
}

.va-home-about-copy > p:last-child {
  margin: 18px 0 0;
  color: #7d716a;
  font-size: 0.84rem;
  line-height: 1.9;
}

.va-home-about-points {
  display: grid;
  gap: 10px;
}

.va-home-about-points > div {
  display: grid;
  grid-template-columns: 36px 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-top: 1px solid #e8ddd5;
}

.va-home-about-points > div:last-child {
  border-bottom: 1px solid #e8ddd5;
}

.va-home-about-points span {
  color: #c38d92;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
}

.va-home-about-points strong {
  color: #3a332f;
  font-size: 0.82rem;
}

.va-home-about-points p {
  margin: 0;
  color: #81756e;
  font-size: 0.76rem;
  line-height: 1.65;
}

.va-home-text-link {
  color: #9d686f;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.va-home-text-link:hover {
  text-decoration: underline;
}

.va-home-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.va-home-empty {
  padding: 44px 24px;
  border: 1px solid #e7ddd4;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.va-home-empty h3 {
  margin: 0 0 8px;
}

.va-home-empty p {
  margin: 0;
  color: #857971;
}

.va-home-compare-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 70px;
  padding: 28px 32px;
  border: 1px solid #dfd2ca;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, #fbf3ef 100%);
}

.va-home-compare-cta p:not(.va-home-section-kicker) {
  margin: 8px 0 0;
  color: #80746d;
  font-size: 0.78rem;
}

.va-home-compare-cta > a {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid #bf858b;
  border-radius: 8px;
  background: #bf858b;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.va-home-compare-cta > a:hover {
  border-color: #aa747a;
  background: #aa747a;
}

@media (max-width: 1000px) {
  .va-home-hero-inner {
    grid-template-columns: 1fr;
  }

  .va-home-hero-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .va-home-stat-note {
    grid-column: auto;
  }

  .va-home-path-grid,
  .va-home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .va-home-about {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 700px) {
  .va-home-hero-inner {
    padding: 34px 22px;
  }

  .va-home-hero-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .va-home-stat-note {
    grid-column: 1 / -1;
  }

  .va-home-admin-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .va-home-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .va-home-section-head > p {
    text-align: left;
  }

  .va-home-path-grid,
  .va-home-product-grid {
    grid-template-columns: 1fr;
  }

  .va-home-about-points > div {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .va-home-about-points p {
    grid-column: 2;
  }

  .va-home-compare-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 20px;
  }
}


/* =========================================================
 * STEP9-H-2: ホームUI / レスポンシブ仕上げ
 * ========================================================= */

/* 日本語の見出しや本文で、短い語だけが不自然に割れにくくする。 */
.va-home-hero h1,
.va-home-section-head h2,
.va-home-about h2,
.va-home-compare-cta h2 {
  text-wrap: balance;
}

.va-home-lead,
.va-home-path-card p,
.va-home-about-copy > p:last-child,
.va-home-about-points p {
  text-wrap: pretty;
}

.va-no-break {
  white-space: nowrap;
}

/* 初期の商品数が1〜2件でも「欠けた3列」に見えにくいように幅を整える。 */
.va-home-product-grid.is-count-1 {
  grid-template-columns: minmax(0, 400px);
}

.va-home-product-grid.is-count-2 {
  grid-template-columns: repeat(2, minmax(0, 400px));
}

.va-home-product-grid.is-count-1,
.va-home-product-grid.is-count-2 {
  justify-content: start;
}

/* ホームのカードは一覧ページと同じコンポーネントだが、過度に縦長にならないよう調整。 */
.va-home-product-grid .va-product-card-media {
  height: 280px;
}

/* 主要CTAがキーボード操作でも分かるようにする。 */
.va-home-primary:focus-visible,
.va-home-secondary:focus-visible,
.va-home-path-card:focus-visible,
.va-home-text-link:focus-visible,
.va-home-compare-cta > a:focus-visible {
  outline: 2px solid rgba(191, 133, 139, 0.34);
  outline-offset: 3px;
}

/* タブレット */
@media (max-width: 1000px) {
  .va-home-product-grid.is-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .va-home-product-grid .va-product-card-media {
    height: 260px;
  }
}

/* スマホ */
@media (max-width: 700px) {
  .va-home-main {
    padding-bottom: 34px;
  }

  .va-home-hero {
    margin-top: 14px;
  }

  .va-home-hero-inner {
    gap: 24px;
    padding: 30px 20px;
    border-radius: 14px;
  }

  .va-home-hero h1 {
    max-width: none;
    font-size: clamp(2.15rem, 10vw, 3.15rem);
    line-height: 1.16;
  }

  .va-home-lead {
    margin-top: 18px;
    font-size: 0.9rem;
    line-height: 1.85;
  }

  .va-home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  .va-home-primary,
  .va-home-secondary {
    width: 100%;
  }

  .va-home-hero-panel {
    gap: 8px;
  }

  .va-home-stat,
  .va-home-stat-note {
    min-height: 108px;
    padding: 14px;
  }

  .va-home-stat strong {
    font-size: 1.8rem;
  }

  .va-home-find,
  .va-home-about,
  .va-home-products {
    padding-top: 52px;
  }

  .va-home-path-card {
    padding: 20px;
  }

  .va-home-path-number {
    margin-bottom: 18px;
  }

  .va-home-about-points > div {
    padding-inline: 8px;
  }

  .va-home-product-grid.is-count-1,
  .va-home-product-grid.is-count-2 {
    grid-template-columns: 1fr;
  }

  .va-home-product-grid .va-product-card-media {
    height: 260px;
  }

  .va-home-compare-cta {
    margin-top: 52px;
  }

  .va-home-compare-cta > a {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .va-home-hero-inner {
    padding: 26px 16px;
  }

  .va-home-hero-panel {
    grid-template-columns: 1fr 1fr;
  }

  .va-home-stat-note {
    grid-column: 1 / -1;
  }

  .va-home-product-grid .va-product-card-media {
    height: 280px;
  }
}


/* =========================================================
 * STEP9-H-2b: 日本語の不自然な1文字改行を抑制
 * ========================================================= */

/* 長い見出しは、文字単位ではなく意味のまとまり単位で折り返す。 */
.va-heading-chunk {
  display: inline-block;
}

/* 短い語・UI文言は語の途中で割らない。 */
.va-no-break {
  white-space: nowrap;
}

/* 日本語の禁則処理を強める。 */
.va-home-main,
.va-home-hero,
.va-home-find,
.va-home-about,
.va-home-products,
.va-home-compare-cta {
  line-break: strict;
  word-break: normal;
}

/* 対応ブラウザでは日本語の自然な文節で折り返す。 */
@supports (word-break: auto-phrase) {
  .va-home-lead,
  .va-home-path-card p,
  .va-home-about-copy > p:last-child,
  .va-home-about-points p,
  .va-home-section-head > p {
    word-break: auto-phrase;
  }
}

/* タブレット幅では見出しの一塊が窮屈になりすぎないよう少し縮める。 */
@media (max-width: 834px) {
  .va-home-hero h1 {
    font-size: clamp(2.2rem, 7vw, 3.6rem);
  }

  .va-home-section-head h2,
  .va-home-about h2,
  .va-home-compare-cta h2 {
    font-size: clamp(1.65rem, 5vw, 2.25rem);
  }

  .va-home-path-card strong,
  .va-home-path-card b,
  .va-home-primary,
  .va-home-secondary,
  .va-home-text-link,
  .va-home-compare-cta > a {
    word-break: keep-all;
  }
}

/* 狭いスマホでも、見出しは phrase chunk ごとに安全に折り返す。 */
@media (max-width: 480px) {
  .va-home-hero h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .va-home-section-head h2,
  .va-home-about h2,
  .va-home-compare-cta h2 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }
}


/* =========================================================
 * STEP10-E: ヒーロー専用レスポンシブ調整
 * ========================================================= */
@media (max-width: 1000px) {
  .va-home-hero-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    min-height: 430px;
  }

  .va-home-hero-copy {
    padding: 44px 18px 44px 34px;
  }

  .va-home-hero-visual,
  .va-home-hero-collage,
  .va-home-hero-visual.is-empty,
  .va-home-hero-placeholder {
    min-height: 430px;
  }

  .va-home-data-item {
    padding-inline: 18px;
  }
}

@media (max-width: 834px) {
  .va-home-hero-inner {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .va-home-hero-copy {
    padding: 42px 34px 36px;
  }

  .va-home-hero h1 {
    max-width: 10em;
  }

  .va-home-hero-visual,
  .va-home-hero-collage,
  .va-home-hero-visual.is-empty,
  .va-home-hero-placeholder {
    min-height: 360px;
  }

  .va-home-hero-visual-copy {
    right: 16px;
    bottom: 14px;
    width: min(270px, calc(100% - 32px));
  }

  .va-home-data-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .va-home-data-item:nth-child(2) {
    border-right: 0;
  }

  .va-home-data-item-wide {
    grid-column: 1 / -1;
    border-top: 1px solid #e5d8d3;
  }
}

@media (max-width: 600px) {
  .va-home-hero-wrap {
    border-radius: 14px;
  }

  .va-home-hero-copy {
    padding: 34px 22px 30px;
  }

  .va-home-hero h1 {
    max-width: none;
    font-size: clamp(2.2rem, 10.5vw, 3.2rem);
  }

  .va-home-lead {
    margin-top: 18px;
    font-size: 0.9rem;
    line-height: 1.85;
  }

  .va-home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  .va-home-primary,
  .va-home-secondary {
    width: 100%;
  }

  .va-home-hero-visual,
  .va-home-hero-collage,
  .va-home-hero-visual.is-empty,
  .va-home-hero-placeholder {
    min-height: 300px;
  }

  .va-home-hero-collage {
    grid-template-columns: 1.45fr 0.8fr;
  }

  .va-home-hero-visual-copy {
    right: 12px;
    bottom: 10px;
    width: min(248px, calc(100% - 24px));
    padding: 5px 10px 6px;
  }

  .va-home-hero-visual-copy span {
    gap: 7px;
    font-size: 0.54rem;
    letter-spacing: 0.2em;
  }

  .va-home-hero-visual-copy span::before,
  .va-home-hero-visual-copy span::after {
    max-width: 26px;
  }

  .va-home-hero-visual-copy strong {
    font-size: 0.8rem;
    letter-spacing: 0.055em;
  }

  .va-home-data-strip {
    grid-template-columns: 1fr 1fr;
  }

  .va-home-data-item {
    padding: 14px 16px;
  }

  .va-home-data-item-wide {
    grid-template-columns: auto auto;
  }

  .va-home-data-item-wide small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .va-home-hero-visual-copy {
    right: 8px;
    bottom: 8px;
    width: min(228px, calc(100% - 16px));
    padding: 5px 8px 6px;
  }

  .va-home-hero-visual-copy span {
    font-size: 0.5rem;
    letter-spacing: 0.18em;
  }

  .va-home-hero-visual-copy strong {
    font-size: 0.74rem;
    letter-spacing: 0.045em;
  }

  .va-home-hero-copy {
    padding-inline: 18px;
  }

  .va-home-hero-visual,
  .va-home-hero-collage,
  .va-home-hero-visual.is-empty,
  .va-home-hero-placeholder {
    min-height: 270px;
  }

  .va-home-data-strip {
    grid-template-columns: 1fr;
  }

  .va-home-data-item,
  .va-home-data-item:nth-child(2),
  .va-home-data-item-wide {
    grid-column: auto;
    border-right: 0;
    border-top: 1px solid #e5d8d3;
  }

  .va-home-data-item:first-child {
    border-top: 0;
  }
}

/* STEP10-F-9: 訪問者向け登録商品カスタマイズUIを廃止。 */