/* ============================================================
   HLEX theme — レイアウト / コンポーネント
   色・書体・字間・モーションは tokens.css の変数のみを使う。
   このファイルに生の色コードや書体名を書かないこと。
   ============================================================ */

/* ---- Self-hosted 欧文 ------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url("../fonts/Jost-Variable.woff2") format("woff2");
}

/* tokens.css を改変せずに派生値を作る。生の色コードを持たないため、
   ブランド色を変えた時にここも自動で追従する。 */
:root {
  --hlex-scrim: color-mix(in srgb, var(--hlex-sumi) 82%, transparent);
  --hlex-scrim-strong: color-mix(in srgb, var(--hlex-sumi) 88%, transparent);
  --hlex-scrim-soft: color-mix(in srgb, var(--hlex-sumi) 10%, transparent);
  --hlex-hover: color-mix(in srgb, var(--hlex-hinoki) 9%, transparent);

  /* エラー文字用。Cedar #8C4A2F は Sumi 背景で 2.88:1 しかなく、
     AA(4.5:1) を満たさないため文字には使えない。色相は Cedar のまま
     Ivory を混ぜて明度だけ上げる（新しい色相を作らない）。
     実測 5.34:1。エラーは最も読まれなければならない文字なので、
     「強調色だから」で妥協しない。 */
  --hlex-alert: color-mix(in srgb, var(--hlex-cedar) 62%, var(--hlex-ivory));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.hlex {
  margin: 0;
}

.hlex a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--hlex-dur) var(--hlex-ease);
}

.hlex a:hover {
  opacity: 0.65;
}

.hlex img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* height:auto で常に viewBox の比率を保つ（縦つぶれ防止） */
.hlex-logo,
.hlex-mono {
  height: auto;
}

.hlex-logo {
  width: auto;
  max-height: 26px;
}

.hlex-mono {
  width: 26px;
}

.hlex-logotype--hero.hlex-logo {
  max-height: none;
  width: clamp(220px, 44vw, 520px);
}

/* ロゴ横幅が最小規定(120px)を下回る幅では、縮小せずモノグラムに切り替える。
   細いヘアラインが消えて読めなくなるのを防ぐため。 */
.hlex-header__mark .hlex-mono {
  display: none;
}

@media (max-width: 380px) {
  .hlex-header__mark .hlex-logo {
    display: none;
  }

  .hlex-header__mark .hlex-mono {
    display: block;
  }
}

/* ---- Header ---------------------------------------------- */
.hlex-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 24px clamp(20px, 5vw, 64px);
  background: var(--hlex-sumi); /* color-mix 非対応ブラウザ向け */
  background: var(--hlex-scrim);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hlex-line);
}

.hlex-nav ul {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-ui);
  text-transform: uppercase;
}

/* ---- Section --------------------------------------------- */
.hlex-section {
  padding: var(--hlex-section-y) clamp(20px, 5vw, 64px);
  max-width: 1240px;
  margin-inline: auto;
}

.hlex-section__title {
  font-family: var(--hlex-font-display);
  font-weight: var(--hlex-w-display);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.16em;
  color: var(--hlex-hinoki);
  margin: 0 0 48px;
}

/* ---- Simulator ------------------------------------------- */
.hlex-sim {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.hlex-sim__visual {
  position: relative;
  overflow: hidden;
  /* 3:2 = 実写（2560x1708）とカメラ標準に一致。4:3 にすると左右が11%切れる。
     CG画像もこの比率で書き出す前提。 */
  aspect-ratio: 3 / 2;
  background: var(--hlex-sumi);
}

.hlex-sim__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1; /* JS がこの値を触ってクロスフェードさせる初期値 */
  transition: opacity var(--hlex-dur) var(--hlex-ease);
}

/* 写真は必ず暗部から始める。
 *
 * このグラデーションは写真の上に敷く。実効コントラストは写真の明るさに
 * 依存するので、静的なCSS検査では判定できない（検査は
 * 「文字が載る要素の背景」までしか見ない）。成立条件は次の2つ:
 *   1. 文字は下端に置く（align-items:flex-end）。to top なので下端が
 *      scrim-strong 側 = Sumi 88%。白い写真でも Hinoki で 10.44:1。
 *   2. 上部（scrim-soft = Sumi 10%）には文字を置かない。白い写真だと
 *      実効 #e7e7e7 で Hinoki は 1.10:1 になる。
 * 文字の配置を上に変えるなら、この前提が壊れる。
 */
.hlex-sim__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--hlex-scrim-strong) 4%,
    var(--hlex-scrim-soft) 62%
  );
}

.hlex-sim__group {
  border: 0;
  border-top: 1px solid var(--hlex-line);
  margin: 0;
  padding: 20px 0 0;
}

.hlex-sim__group + .hlex-sim__group {
  margin-top: 20px;
}

.hlex-sim__group legend {
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  text-transform: uppercase;
  color: var(--hlex-text-mute);
  padding: 0;
  margin-bottom: 14px;
}

.hlex-sim__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 角丸ゼロ・塗りなし・1px罫線（CTA基準形と同じ思想） */
.hlex-option {
  appearance: none;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  color: var(--hlex-text);
  border: 1px solid var(--hlex-line);
  padding: 10px 18px;
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp);
  font-size: 13px;
  letter-spacing: var(--hlex-track-body);
  transition: border-color var(--hlex-dur) var(--hlex-ease),
    color var(--hlex-dur) var(--hlex-ease);
}

.hlex-option:hover {
  border-color: var(--hlex-line-strong);
  color: var(--hlex-ivory);
}

.hlex-option[aria-pressed="true"] {
  border-color: var(--hlex-hinoki);
  color: var(--hlex-hinoki);
}

.hlex-sim__dimensions {
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
  color: var(--hlex-text-mute);
  font-size: 12.5px;
  margin: 28px 0 0;
}

.hlex-sim__notes {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 6px 16px;
  margin: 16px 0 0;
  font-size: 13px;
}

.hlex-sim__notes dt {
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  color: var(--hlex-text-mute);
  padding-top: 0.35em;
}

.hlex-sim__notes dd {
  margin: 0;
  color: var(--hlex-text);
}

.hlex-sim__price {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hlex-line-strong);
}

.hlex-sim__price-label {
  display: block;
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  text-transform: uppercase;
  color: var(--hlex-text-mute);
}

.hlex-sim__price strong {
  display: block;
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--hlex-hinoki);
  margin: 6px 0;
}

.hlex-sim__price small {
  color: var(--hlex-text-mute);
  font-size: 12px;
}

/* ---- CTA: 塗りではなく1px罫線。ホバーで字間が開く ---------- */
.hlex-cta {
  display: inline-block;
  margin-top: 32px;
  padding: 17px 46px;
  border: 1px solid var(--hlex-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--hlex-hinoki);
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-ui);
  text-transform: uppercase;
  transition: background var(--hlex-dur) var(--hlex-ease),
    letter-spacing var(--hlex-dur) var(--hlex-ease);
}

.hlex-cta:hover,
.hlex-cta:focus-visible {
  background: var(--hlex-thermo); /* color-mix 非対応ブラウザ向け */
  background: var(--hlex-hover);
  letter-spacing: 0.34em;
  opacity: 1;
}

/* ---- Footer ---------------------------------------------- */
.hlex-footer {
  padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 64px);
  border-top: 1px solid var(--hlex-line);
  font-size: 12.5px;
  color: var(--hlex-text-mute);
}

.hlex-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  font-family: var(--hlex-font-ui);
  letter-spacing: var(--hlex-track-ui);
  font-size: 11px;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .hlex-sim {
    grid-template-columns: 1fr;
  }
}

/* ---- Contact ---------------------------------------------- */
.hlex-contact__spec {
  border: 1px solid var(--hlex-line-strong);
  padding: clamp(20px, 4vw, 36px);
  margin-bottom: 48px;
}

.hlex-contact__spec h2 {
  margin: 0 0 20px;
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  text-transform: uppercase;
  color: var(--hlex-hinoki);
}

.hlex-contact__spec dl {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 10px 24px;
  margin: 0;
  font-size: 13px;
}

.hlex-contact__spec dt {
  font-family: var(--hlex-font-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  color: var(--hlex-text-mute);
  padding-top: 0.3em;
}

.hlex-contact__spec dd {
  margin: 0;
  color: var(--hlex-ivory);
}

.hlex-contact__back {
  margin: 24px 0 0;
  font-size: 12.5px;
}

.hlex-contact__back a {
  border-bottom: 1px solid var(--hlex-line-strong);
}

.hlex-field {
  display: block;
  margin: 0 0 28px;
  max-width: 32rem;
  border: 0;
  padding: 0;
}

.hlex-field label,
.hlex-field legend {
  display: block;
  font-family: var(--hlex-font-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  text-transform: uppercase;
  color: var(--hlex-text-mute);
  margin-bottom: 10px;
  padding: 0;
}

.hlex-field input[type="text"],
.hlex-field input[type="tel"],
.hlex-field input[type="email"],
.hlex-field select,
.hlex-field textarea {
  width: 100%;
  background: var(--hlex-surface);
  border: 1px solid var(--hlex-line);
  border-radius: 0;
  color: var(--hlex-ivory);
  font-family: var(--hlex-font-jp);
  font-size: 15px;
  padding: 14px 16px;
  transition: border-color var(--hlex-dur) var(--hlex-ease);
}

.hlex-field input:focus,
.hlex-field select:focus,
.hlex-field textarea:focus {
  border-color: var(--hlex-hinoki);
  outline: none;
}

.hlex-field small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--hlex-text-mute);
}

.hlex-field__error {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-style: normal;
  color: #c4714a; /* color-mix 非対応ブラウザ向け（5.34:1） */
  color: var(--hlex-alert);
}

.hlex-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 28px;
  font-family: var(--hlex-font-jp);
  font-size: 14px;
  letter-spacing: var(--hlex-track-body);
  text-transform: none;
  color: var(--hlex-ivory);
}

.hlex-contact__alert {
  border-left: 2px solid var(--hlex-cedar);
  padding-left: 16px;
  color: var(--hlex-ivory);
}

.hlex-contact__done {
  border: 1px solid var(--hlex-line-strong);
  padding: clamp(24px, 5vw, 48px);
}

.hlex-contact__tel {
  margin-top: 40px;
  font-family: var(--hlex-font-ui);
  letter-spacing: var(--hlex-track-body);
  color: var(--hlex-text-mute);
  font-size: 12px;
}

.hlex-contact__tel a {
  display: block;
  margin: 6px 0 4px;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: 0.08em;
  color: var(--hlex-hinoki);
}

button.hlex-cta {
  cursor: pointer;
}

/* ---- FAQ -------------------------------------------------- */
/* 変数は tokens.css に存在するものだけを使う。
   --hlex-gold / --hlex-body / --hlex-space-section は未定義で、
   フォールバック値が明るい配色だったため、トークンに置き換えた。 */
.hlex-faq {
  padding: var(--hlex-section-y) clamp(20px, 5vw, 64px);
}

.hlex-wrap {
  max-width: 1240px;
  margin-inline: auto;
}

.hlex-lead {
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp-bold);
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: var(--hlex-track-jp-head);
  line-height: var(--hlex-lh-head);
  color: var(--hlex-hinoki);
  margin: 16px 0 48px;
}

.hlex-faq__list {
  border-top: 1px solid var(--hlex-line);
}

.hlex-faq__item {
  border-bottom: 1px solid var(--hlex-line);
}

.hlex-faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 40px 28px 0;
  position: relative;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--hlex-ivory);
}

.hlex-faq__item > summary::-webkit-details-marker {
  display: none;
}

/* ＋ / − の記号。角丸なし・1pxの線というCTAと同じ思想 */
.hlex-faq__item > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 1px;
  background: var(--hlex-hinoki);
  transition: transform var(--hlex-dur) var(--hlex-ease);
}

.hlex-faq__item > summary::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5px;
  background: var(--hlex-hinoki);
  transition: opacity var(--hlex-dur) var(--hlex-ease);
}

.hlex-faq__item[open] > summary::before {
  opacity: 0;
}

.hlex-faq__item > p {
  margin: 0;
  padding: 0 40px 30px 0;
  font-size: 14px;
  line-height: 2.3;
  color: var(--hlex-text);
}

.hlex-faq__note {
  margin-top: 34px;
  font-size: 12px;
  color: var(--hlex-text-mute);
}

.hlex-faq__note a {
  color: var(--hlex-hinoki);
  border-bottom: 1px solid var(--hlex-line-strong);
}

/* ---- 下層ページ共通 --------------------------------------- */
.hlex-phero {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 42vh, 460px);
  display: flex;
  align-items: flex-end;
  padding: clamp(32px, 8vh, 88px) clamp(20px, 5vw, 64px);
}

.hlex-phero .hlex-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* 写真は必ず暗部から始める（文字が乗るので下側を強く落とす） */
.hlex-phero .hlex-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--hlex-scrim-strong) 6%,
    var(--hlex-scrim-soft) 72%
  );
}

.hlex-phero .hlex-wrap {
  position: relative;
}

.hlex-phero--plain {
  min-height: 0;
  border-bottom: 1px solid var(--hlex-line);
  padding-top: clamp(48px, 12vh, 120px);
}

.hlex-phero h1 {
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp-bold);
  font-size: clamp(24px, 5vw, 44px);
  letter-spacing: var(--hlex-track-jp-head);
  line-height: var(--hlex-lh-head);
  color: var(--hlex-hinoki);
  margin: 12px 0 0;
}

.hlex-crumb {
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-ui);
  text-transform: uppercase;
  color: var(--hlex-text-mute);
}

.hlex-crumb span {
  margin: 0 8px;
}

.hlex-meta {
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-ui);
  color: var(--hlex-text-mute);
  margin: 14px 0 0;
}

.hlex-meta span {
  margin: 0 8px;
}

/* ---- 本文（ブロックエディタの出力） ------------------------ */
.hlex-prose .hlex-wrap > * {
  max-width: var(--hlex-measure);
}

.hlex-prose p {
  color: var(--hlex-text);
  margin: 0 0 1.9em;
}

.hlex-prose h2 {
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp-bold);
  font-size: clamp(19px, 2.6vw, 27px);
  letter-spacing: var(--hlex-track-jp-head);
  line-height: var(--hlex-lh-head);
  color: var(--hlex-hinoki);
  margin: 3em 0 1.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--hlex-line);
}

.hlex-prose h3 {
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp-bold);
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: var(--hlex-track-jp-head);
  color: var(--hlex-ivory);
  margin: 2.4em 0 1em;
}

.hlex-prose strong {
  color: var(--hlex-ivory);
  font-weight: var(--hlex-w-jp);
}

.hlex-prose a {
  border-bottom: 1px solid var(--hlex-line-strong);
}

.hlex-prose ul,
.hlex-prose ol {
  color: var(--hlex-text);
  padding-left: 1.4em;
  margin: 0 0 1.9em;
}

.hlex-prose li {
  margin-bottom: 0.7em;
}

.hlex-prose blockquote {
  margin: 0 0 1.9em;
  padding-left: 20px;
  border-left: 1px solid var(--hlex-line-strong);
  color: var(--hlex-text-mute);
}

.hlex-prose figure {
  margin: 0 0 2.4em;
  max-width: none;
}

.hlex-prose figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hlex-text-mute);
}

/* 仕様表（会社概要・ショールームの表） */
.hlex-prose table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  margin: 0 0 2.4em;
  font-size: 14px;
}

.hlex-prose th,
.hlex-prose td {
  text-align: left;
  vertical-align: top;
  padding: 20px 16px;
  border-bottom: 1px solid var(--hlex-line);
}

.hlex-prose th {
  width: 11rem;
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  color: var(--hlex-text-mute);
  white-space: nowrap;
}

.hlex-prose td {
  color: var(--hlex-text);
  line-height: 2.1;
}

@media (max-width: 640px) {
  .hlex-prose th,
  .hlex-prose td {
    display: block;
    width: auto;
    white-space: normal;
  }

  .hlex-prose th {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* ---- 一覧カード ------------------------------------------- */
.hlex-catnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}

.hlex-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.hlex-card .hlex-figure {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: 0 0 18px;
}

.hlex-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--hlex-ease);
}

.hlex-card a:hover img {
  transform: scale(1.04);
}

.hlex-card a {
  display: block;
}

.hlex-card a:hover {
  opacity: 1;
}

.hlex-card h2 {
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp-bold);
  font-size: 16px;
  letter-spacing: var(--hlex-track-jp-head);
  line-height: var(--hlex-lh-head);
  color: var(--hlex-hinoki);
  margin: 8px 0 12px;
}

.hlex-card__excerpt {
  font-size: 13px;
  line-height: 2;
  color: var(--hlex-text-mute);
  margin: 0;
}

.hlex-archive__desc {
  margin-top: 20px;
  color: var(--hlex-text);
  max-width: var(--hlex-measure);
}

.wp-block-query-pagination,
.navigation.pagination {
  margin-top: clamp(48px, 8vh, 88px);
  display: flex;
  gap: 12px;
  font-family: var(--hlex-font-ui);
  font-size: 12px;
  letter-spacing: var(--hlex-track-ui);
}

.navigation.pagination .page-numbers {
  border: 1px solid var(--hlex-line);
  padding: 10px 16px;
}

.navigation.pagination .page-numbers.current {
  border-color: var(--hlex-hinoki);
  color: var(--hlex-hinoki);
}

/* ---- 数値ブロック（会社概要の 9 / 1mm など） --------------- */
.hlex-num {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 4vw, 48px);
  max-width: none;
}

.hlex-num > div {
  border-top: 1px solid var(--hlex-line-strong);
  padding-top: 20px;
}

.hlex-num em {
  display: block;
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-style: normal;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0.04em;
  color: var(--hlex-hinoki);
}

.hlex-num span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--hlex-text-mute);
}

.hlex-pagecta {
  border-top: 1px solid var(--hlex-line);
  text-align: center;
}

/* ---- 面別レイヤー合成 -------------------------------------- */
.hlex-sim__stack {
  position: absolute;
  inset: 0;
}

.hlex-sim__stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* レイヤーが1枚でも入っていれば、1枚絵は隠す */
.hlex-sim__stack:not(:empty) ~ [data-hlex-visual] {
  visibility: hidden;
}