/* TIMEGRAPH 公式ホームページ プロトタイプ：展示室・商品詳細 */

.page-room, .page-product { background: #0f0e0c; color: var(--c-ivory); }
.page-room .site-header, .page-product .site-header { color: var(--c-ivory); }
.room-tag {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--f-latin); font-size: 13px; letter-spacing: .34em;
}
.room-tag::before, .room-tag::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .8; }

/* ===== 展示室 ===== */
.room {
  position: relative;
  min-height: max(100svh, 680px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(50% 60% at 60% 40%, rgba(120, 90, 60, .28), transparent 70%),
    linear-gradient(180deg, #1c1915 0%, #14120f 58%, #0e0d0b 100%);
}
.room__walls {
  position: absolute; inset: 0 0 34% 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35) 0 9%, transparent 9% 33%, rgba(255, 255, 255, .025) 33% 35%, transparent 35% 72%, rgba(255, 255, 255, .03) 72% 74%, transparent 74%),
    repeating-linear-gradient(118deg, rgba(255, 200, 130, 0) 0, rgba(255, 200, 130, .1) 40px, rgba(255, 200, 130, 0) 90px, rgba(255, 200, 130, 0) 190px);
  -webkit-mask-image: linear-gradient(180deg, #000, #000 70%, transparent);
          mask-image: linear-gradient(180deg, #000, #000 70%, transparent);
}
.room__walls::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(45% 70% at 4% 6%, rgba(255, 214, 160, .3), transparent 70%);
}
.room__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(118deg, rgba(255, 210, 150, 0) 0, rgba(255, 210, 150, .07) 50px, rgba(255, 210, 150, 0) 110px, rgba(255, 210, 150, 0) 220px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 120px),
    linear-gradient(180deg, #2a241d 0%, #16130f 60%, #0f0d0b 100%);
  background-size: auto, 120px 100%, auto;
  border-top: 1px solid rgba(255, 220, 170, .14);
}
.room__entry {
  position: absolute; left: 0; top: 24%; width: clamp(40px, 6.5vw, 110px); height: 54%; z-index: 1;
  background: linear-gradient(90deg, #2b1a0f, #4a2e18 60%, #2d1c10);
  box-shadow: 4px 0 0 #6b4a26, 14px 0 40px rgba(255, 180, 90, .35);
  border-radius: 0 2px 2px 0;
}
.room__entry--light { background: linear-gradient(90deg, #a8957a, #dccdb3 60%, #b4a284); box-shadow: 4px 0 0 #cfbd9c, 14px 0 40px rgba(255, 220, 160, .4); }
.room__entry::after { content: ""; position: absolute; right: 18%; top: 52%; width: 8px; height: 26px; border-radius: 3px; background: #b88b45; }

/* 部屋の写真（デザイン素材）。部屋ごとに色と質感を変える */
.page-room .room { background: #15120f center bottom / cover no-repeat; }
/* 背景は、扉の中に見えていた部屋と同じ画像（扉から歩いて入った先が、そのまま展示室になる） */
.page-room[data-room="web"] .room { background-image: url("../assets/img/door-view-web.webp"); }
.page-room[data-room="wp"] .room { background-image: url("../assets/img/door-view-wordpress.webp"); }
.page-room[data-room="int"] .room { background-image: url("../assets/img/door-view-interior.webp"); }
.page-room .room__walls, .page-room .room__floor, .page-room .room__entry { display: none; }
/* 文字とパネルを読みやすくする半透明の層（背景はぼかさない） */
.page-room .room::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, .62) 0%, rgba(12, 10, 8, .32) 34%, rgba(12, 10, 8, .08) 58%, rgba(12, 10, 8, 0) 75%),
    linear-gradient(180deg, rgba(12, 10, 8, .35) 0%, rgba(12, 10, 8, 0) 18%, rgba(12, 10, 8, 0) 80%, rgba(12, 10, 8, .25) 100%);
}
/* INTERIORの部屋は天井近くが明るいので、上端の層だけ少し濃くする（右上の部屋名を読みやすく） */
.page-room[data-room="int"] .room::before {
  background:
    linear-gradient(90deg, rgba(12, 10, 8, .62) 0%, rgba(12, 10, 8, .32) 34%, rgba(12, 10, 8, .08) 58%, rgba(12, 10, 8, 0) 75%),
    linear-gradient(180deg, rgba(12, 10, 8, .52) 0%, rgba(12, 10, 8, 0) 20%, rgba(12, 10, 8, 0) 80%, rgba(12, 10, 8, .25) 100%);
}
/* WEBの部屋（白石と自然光）は明るいので、文字の側だけ層を濃くする。
   歩いて着く直前の層（home.css の .walk--web .walk__tint）も同じ値にして、到着の切れ目を出さない */
.page-room[data-room="web"] .room::before {
  background:
    linear-gradient(90deg, rgba(12, 10, 8, .78) 0%, rgba(12, 10, 8, .56) 34%, rgba(12, 10, 8, .18) 58%, rgba(12, 10, 8, 0) 75%),
    linear-gradient(180deg, rgba(12, 10, 8, .5) 0%, rgba(12, 10, 8, 0) 22%, rgba(12, 10, 8, 0) 80%, rgba(12, 10, 8, .25) 100%);
}

.room__intro {
  position: relative; z-index: 30;
  width: min(46%, 680px);
  padding: calc(var(--header-h) + 8vh) 0 0 calc(var(--gutter) + clamp(40px, 6vw, 110px));
}
.room__title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(34px, 4.5vw, 70px); line-height: 1.36; letter-spacing: .04em; white-space: nowrap; }
.room__lead { margin-top: 14px; font-family: var(--f-serif); font-size: clamp(14px, 1.4vw, 21px); letter-spacing: .14em; line-height: 1.8; }
.room__back {
  display: inline-flex; align-items: center; gap: 16px; min-height: 48px; margin-top: 36px;
  font-family: var(--f-serif); font-size: 15px; letter-spacing: .24em; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.room__back::before { content: "←"; font-family: var(--f-sans); }
.room__back:hover { border-bottom-color: currentColor; }
/* WORDPRESS: the way to every finished demo, beside the way back. */
.room__demos { margin-left: 32px; }
.room__demos::before { content: none; }
.room__demos::after { content: "→"; font-family: var(--f-sans); }
.room__hint { display: none; margin-top: 10px; font-size: 12px; letter-spacing: .1em; opacity: .7; }
.room__title, .room__lead, .room__back { text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }

/* 周回パネル */
.orbit { position: absolute; inset: 0; z-index: 10; }
.orbit__list { position: absolute; inset: 0; }
.panel {
  position: absolute; left: 0; top: 0;
  --shade: 0;
  width: var(--pw, 420px);
  transform-origin: 50% 100%;
  will-change: transform, filter;
}
/* 奥の面ほど暗く（filterではなく重ねた面の不透明度で描き直しを抑える） */
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #0c0a08; opacity: var(--shade); will-change: opacity;
}
.panel__face {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px;
  aspect-ratio: 1 / 1.02;
  padding: 9% 8% 7%;
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(180deg, #f6f1e7, #ebe3d4);
  color: var(--c-ink);
  text-decoration: none;
  box-shadow: 0 30px 50px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 200, 130, .12);
  transition: box-shadow .35s;
}
.panel__en { font-family: var(--f-latin); font-size: clamp(8px, .7vw, 11px); letter-spacing: .26em; color: #6b6255; }
.panel__title { font-family: var(--f-serif); font-size: clamp(16px, 2vw, 32px); line-height: 1.25; letter-spacing: .04em; }
.panel__img { width: 100%; height: 100%; min-height: 0; object-fit: cover; box-shadow: 0 6px 14px rgba(40, 30, 20, .25); }
.panel__lead { font-family: var(--f-serif); font-size: clamp(10px, .95vw, 14px); line-height: 1.6; letter-spacing: .06em; color: #4b463f; }
/* 短い説明と「詳しく見る」：止めて正面を向いた面だけ、画像の下側に重ねて出す（面の外形と並びは変えない） */
/* 文字の素の大きさ：1024px以上は10.5px以上。狭い画面は9pxで画像の範囲に収め、止めた面の拡大で画面上12.6px以上にする（room.js の holdTarget） */
.panel__info { display: grid; gap: 4px; font-size: clamp(10.5px, .85vw, 13px); line-height: 1.65; letter-spacing: .04em; color: #3d3831; }
@media (max-width: 1000px) { .panel__info { font-size: 9px; line-height: 1.6; } }
.panel__count { font-size: .9em; letter-spacing: .1em; color: #6b6255; }
.panel__more { font-size: .9em; letter-spacing: .12em; color: #6b6255; }
.panel__more::after { content: " →"; font-family: var(--f-sans); }
.js .panel__en { grid-row: 1; grid-column: 1; }
.js .panel__title { grid-row: 2; grid-column: 1; }
.js .panel__img { grid-row: 3; grid-column: 1; }
.js .panel__lead { grid-row: 4; grid-column: 1; }
/* 画像の行を包含ブロックにして下端に重ねる（絶対配置なので、見えない間も面の並びや画像の高さを変えない） */
.js .panel__face { position: relative; }
.js .panel__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  grid-row: 3 / 4; grid-column: 1 / 2; z-index: 1;   /* 絶対配置では終わりの線も書かないと、面の下端までが範囲になる */
  padding: 6% 6% 5%;
  background: linear-gradient(180deg, rgba(246, 241, 231, .95), rgba(246, 241, 231, .99));
  opacity: 0; transform: translateY(6px);
  transition: opacity .12s ease-out, transform .12s ease-out;
  pointer-events: none;
}
/* 正面化がおよそ半分まで進んでから、約220msで表示する */
.js .panel.is-lifted .panel__info { opacity: 1; transform: none; transition: opacity .22s ease-out .14s, transform .22s ease-out .14s; }
@media (max-width: 1000px) { .js .panel__info { padding: 5% 5% 4%; } }
/* SPのカルーセルでは出さない（中央の面を窮屈にしない） */
.panel.is-carousel .panel__info { display: none; }
.panel__plinth {
  height: calc(var(--pw, 420px) * .11); margin: 0 -5%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .28 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 60px 60px,
    linear-gradient(90deg, #d9c7a6 0 22%, #4a4036 22% 30%, #d2bf9c 30% 70%, #4a4036 70% 78%, #d9c7a6 78%);
  box-shadow: inset 0 4px 0 rgba(255, 244, 222, .5), inset 0 -10px 16px rgba(30, 20, 10, .45), 0 14px 22px rgba(0, 0, 0, .6), 0 -2px 22px rgba(255, 200, 120, .4);
}
.room__floor::before, .room__floor::after {
  content: ""; position: absolute; border-radius: 2px;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(255, 236, 200, .45), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.1' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 70px 70px,
    linear-gradient(180deg, #cdb894, #8a765a);
  box-shadow: inset 0 6px 0 rgba(255, 244, 222, .35), inset -14px 0 20px rgba(20, 14, 8, .45), 0 20px 30px rgba(0, 0, 0, .5);
}
.room__floor::before { left: 9%; bottom: 34%; width: 13%; height: 30%; }
.room__floor::after { right: -1%; bottom: 26%; width: 9%; height: 40%; }
.panel.is-lifted .panel__face { box-shadow: 0 44px 76px rgba(0, 0, 0, .58), 0 0 100px rgba(255, 200, 130, .38); }
.panel__face:focus-visible { outline-offset: 6px; }
.panel__detail { display: none; }
.orbit.is-dimmed .panel { opacity: .32 !important; filter: brightness(.45) !important; transition: opacity .5s, filter .5s; }
.panel.is-hidden { visibility: hidden; }

.orbit__ctrl { display: none; }

/* JSなし：普通の並び */
.no-js .orbit { position: relative; inset: auto; padding: 48px var(--gutter) 80px; }
.no-js .orbit__list { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.no-js .panel { position: static; width: auto; }

/* ===== 縦の詳細面 ===== */
.detail { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.detail[hidden] { display: none; }
.detail__sheet {
  position: absolute;
  left: var(--dx, 30%); top: var(--dy, 6%); width: var(--dw, 36%); height: var(--dh, 88%);
  background:
    radial-gradient(80% 40% at 30% 0%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(180deg, #f7f2e9, #ece4d5);
  color: var(--c-ink);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 120px rgba(255, 200, 130, .2);
  transform-origin: 0 0;
  pointer-events: auto;
  overflow: hidden;
}
.detail__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 30px clamp(22px, 2.6vw, 44px) 36px; }
.detail__body { transition: opacity .25s; }
.detail.is-moving .detail__body { opacity: 0; }
.detail__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.detail__close {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; margin-left: -4px;
  border: 0; background: none; cursor: pointer; font-family: var(--f-serif); font-size: 14px; letter-spacing: .16em;
}
.detail__close::before { content: "←"; font-family: var(--f-sans); }
.detail__close kbd { font-family: var(--f-latin); font-size: 10px; letter-spacing: .2em; padding-left: 12px; border-left: 1px solid rgba(36, 33, 29, .3); }
.detail__en { font-family: var(--f-latin); font-size: 11px; letter-spacing: .28em; color: #6b6255; text-align: right; }
.detail__title { margin-top: 18px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.32; letter-spacing: .04em; }
.detail__lead { margin-top: 10px; font-family: var(--f-serif); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.8; letter-spacing: .08em; }
.detail__count { margin-top: 6px; font-size: 13px; letter-spacing: .1em; color: #4b463f; }
.detail__img { width: 100%; margin-top: 18px; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: 0 10px 22px rgba(40, 30, 20, .25); }
.detail__features { margin-top: 18px; }
.detail__features li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(36, 33, 29, .14); }
.detail__features svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.detail__features h3 { font-family: var(--f-serif); font-weight: 500; font-size: 16px; letter-spacing: .1em; }
.detail__features p { font-size: 12.5px; line-height: 1.8; color: #4b463f; }
.detail__more {
  display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 56px; margin-top: 18px;
  font-family: var(--f-serif); font-size: 17px; letter-spacing: .3em; text-decoration: none;
}
.detail__more .arrow { width: 90px; }
.detail__more[hidden], .detail__count[hidden] { display: none; }
/* カテゴリーへ案内するカードの主導線 */
.detail__shop.is-primary { position: sticky; bottom: 0; z-index: 1; gap: 14px; padding: 0 12px; background: var(--c-charcoal); color: var(--c-ivory); font-size: clamp(15px, 1.2vw, 17px); letter-spacing: .16em; }
.detail__shop.is-primary .arrow { width: 36px; }

/* ===== 商品詳細 ===== */
.product-hall { position: relative; min-height: 100svh; padding: 26px clamp(16px, 6vw, 110px) 0; }
.product-hall::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 60% at 0% 10%, rgba(255, 210, 150, .25), transparent 70%),
    linear-gradient(90deg, #1b1713 0 8%, #2a231c 8% 9%, #15120f 9% 91%, #2a231c 91% 92%, #1b1713 92%);
}
.product-back {
  position: fixed; left: clamp(12px, 2.4vw, 40px); top: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px;
  border-radius: 4px; background: rgba(15, 14, 12, .72); color: var(--c-ivory);
  font-family: var(--f-serif); font-size: 14px; letter-spacing: .16em; text-decoration: none;
}
.product-back::before { content: "←"; font-family: var(--f-sans); }
.product-back kbd { font-family: var(--f-latin); font-size: 10px; letter-spacing: .2em; padding-left: 12px; border-left: 1px solid rgba(250, 247, 240, .4); }
.sheet {
  max-width: 1120px; margin: 50px auto 0;
  background:
    radial-gradient(70% 30% at 20% 0%, rgba(255, 255, 255, .6), transparent 70%),
    linear-gradient(180deg, #f6f1e7, #efe8db);
  color: var(--c-ink);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
  animation: sheet-in .8s var(--ease-out) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 30px clamp(20px, 6.5vw, 76px) 0; }
.sheet__logo { font-family: var(--f-latin); font-size: 14px; letter-spacing: .5em; }
.sheet__head .room-tag { font-size: 12px; }
.sheet__head .room-tag::after { display: none; }
.sheet__hero { display: grid; grid-template-columns: 44% 1fr; gap: 32px; align-items: center; padding: 34px clamp(20px, 6.5vw, 76px) 40px; }
.sheet__title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.3; letter-spacing: .04em; }
.sheet__lead { margin-top: 22px; font-family: var(--f-serif); font-size: clamp(15px, 1.45vw, 20px); line-height: 1.8; letter-spacing: .08em; }
.sheet__text { margin-top: 20px; font-size: 13px; line-height: 2; color: #4b463f; }
.sheet__hero img { width: 100%; box-shadow: 0 20px 40px rgba(40, 30, 20, .25); }
.sheet__features { display: grid; grid-template-columns: repeat(3, 1fr); padding: 36px clamp(20px, 6.5vw, 76px); border-top: 1px solid rgba(36, 33, 29, .1); }
.sheet__features li { padding: 0 clamp(14px, 2vw, 30px); text-align: center; }
.sheet__features li + li { border-left: 1px solid rgba(36, 33, 29, .16); }
.sheet__features svg { width: 74px; height: 56px; margin: 0 auto; stroke: var(--c-ink); fill: none; stroke-width: 1.6; }
.sheet__features svg .accent { stroke: var(--c-yellow); }
.sheet__features h2 { margin-top: 16px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(16px, 1.55vw, 21px); letter-spacing: .14em; }
.sheet__features p { margin-top: 8px; font-size: 12.5px; line-height: 1.9; color: #4b463f; }
.sheet__close { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 30px clamp(20px, 6.5vw, 76px) 56px; }
.sheet__close img { width: 100%; box-shadow: 0 20px 40px rgba(40, 30, 20, .25); }
.sheet__close h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.6; letter-spacing: .1em; }
.sheet__close p { margin-top: 14px; font-size: 13px; line-height: 2; color: #4b463f; }
.sheet__close .btn-solid { margin-top: 22px; width: min(100%, 300px); }
.sheet__note { padding: 0 clamp(20px, 6.5vw, 76px) 40px; font-size: 11px; color: #7a7266; }
.page-product .site-footer { margin-top: 64px; }

/* ===== SP ===== */
@media (max-width: 767px) {
  .room { min-height: 0; padding-bottom: 32px; }
  /* 展示室の背景は、扉から歩いて着いた最後の画面（画面いっぱい）と同じ切り取りにする */
  .page-room .room { min-height: 100svh; }
  /* SPは文字が画面の幅いっぱいに上に並ぶので、WEBの部屋は上から層を濃くする（.walk--web .walk__tint と同じ値） */
  .page-room[data-room="web"] .room::before {
    background: linear-gradient(180deg, rgba(12, 10, 8, .74) 0%, rgba(12, 10, 8, .62) 30%, rgba(12, 10, 8, .22) 46%, rgba(12, 10, 8, 0) 56%, rgba(12, 10, 8, 0) 82%, rgba(12, 10, 8, .3) 100%);
  }
  .room__entry { display: none; }
  .room__floor::before, .room__floor::after { display: none; }
  .room__intro { width: auto; padding: calc(var(--header-h) + 18px) 24px 0; }
  .room__title { font-size: clamp(28px, 8.4vw, 34px); }
  .room__lead { font-size: 13px; letter-spacing: .06em; }
  .room__back { margin-top: 12px; }
  .room__demos { margin-left: 20px; }
  .room__hint { display: block; }
  .site-header .room-tag { font-size: 10px; letter-spacing: .24em; gap: 10px; }
  .site-header .room-tag::before, .site-header .room-tag::after { width: 18px; }

  .js .orbit { position: relative; inset: auto; height: calc(min(72vw, 300px) * 1.36 + 40px); margin-top: 20px; }
  .orbit__ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; }
  .no-js .orbit__ctrl { display: none; }
  .orbit__count { min-width: 60px; text-align: center; font-family: var(--f-latin); font-size: 12px; letter-spacing: .2em; }
  .orbit__ctrl .icon-btn { border: 1px solid rgba(250, 247, 240, .35); border-radius: 50%; }

  .detail__close { font-size: 13px; }
  .detail__scroll { padding: 18px 20px 28px; }

  .product-hall { padding: 74px 0 0; }
  .product-back { top: 10px; left: 10px; }
  .sheet { margin-top: 0; }
  .sheet__head { padding: 22px 20px 0; }
  .sheet__hero, .sheet__close { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px 30px; }
  .sheet__features { grid-template-columns: 1fr; padding: 10px 20px; }
  .sheet__features li { display: grid; grid-template-columns: 70px 1fr; gap: 6px 16px; padding: 18px 0; text-align: left; }
  .sheet__features li + li { border-left: 0; border-top: 1px solid rgba(36, 33, 29, .14); }
  .sheet__features svg { grid-row: 1 / 3; width: 64px; }
  .sheet__features h2 { margin-top: 0; }
  .sheet__features p { margin-top: 0; }
  .sheet__close .btn-solid { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  /* 周回の面は位置・向き・大きさを毎フレーム直接決めるので、全体に付く0.2秒の移り変わりを外す
     （止めた面が回転しながら正面へ向くように見えず、測った面の高さも途中の値にならない） */
  .panel { transition-property: none !important; }
}

/* カード詳細：代表のデモ（デモ案内のページへ） */
.sheet__demo { margin-top: 14px; }
.sheet__demo-name { letter-spacing: .06em; }