/* =========================================================
   エロのソムリエ — Gallery / Editorial
   ベース：エクリュ・石色　文字：墨黒・青みグレー
   アクセント：ブロンズ（好み）・スモーキーモーヴ（気分）
   文字に使う色はすべて WCAG AA (4.5:1) 以上
   ========================================================= */
:root {
  color-scheme: light;
  /* 基準色：Espresso / Cocoa / Mocha / Taupe / Beige / Cream */
  --espresso: #2b1b14;
  --cocoa: #4a3529;
  --mocha: #7a5b4b;
  --taupe: #a8988a;
  --beige: #d8c9b8;
  --cream: #f7efe6;
  /* 明るい面 */
  --ecru: #f7efe6;
  --paper: #fcf8f2;
  --stone: #ede3d7;
  --stone-2: #d8c9b8;
  /* 文字 */
  --ink: #2b1b14;
  --ink-2: #4a3529;
  --cocoa-900: #2b1b14;
  --slate: #4a3529;
  --mute: #6e5143; /* クリーム上 6.3:1 */
  /* アクセント（ブラウン系で統一） */
  --bronze: #7a5b4b; /* クリーム上 5.4:1 */
  --gold: #b59378;
  --bronze-tint: #ecdfd0;
  --mauve: #7a5b4b;
  --mauve-soft: #c4ae9c;
  --mauve-tint: #efe3d6;
  /* 暗い面の文字 */
  --on-dark: #f7efe6;
  --on-dark-mute: #d8c9b8;
  --on-dark-faint: #bfae9e;
  --line: rgba(43, 27, 20, 0.14);
  --line-2: rgba(43, 27, 20, 0.28);
  --line-dark: rgba(247, 239, 230, 0.16);
  --accent: var(--mocha);
  --shadow: 0 1px 0 rgba(43, 27, 20, 0.05), 0 18px 36px -24px rgba(43, 27, 20, 0.5);
  --display: 'Shippori Mincho', 'Noto Serif CJK JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --latin: 'Cormorant Garamond', 'Cormorant', 'Times New Roman', 'Noto Serif CJK JP', serif;
  --sans: 'Zen Kaku Gothic New', 'Noto Sans CJK JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pad: clamp(20px, 5.4vw, 56px);
  --top: 60px;
  --max: 1280px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* ブランドとしてライト配色に固定 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: light;
    --ecru: #f7efe6;
    --ink: #2b1b14;
  }
}
:root[data-theme='dark'] {
  color-scheme: light;
  --ecru: #f7efe6;
  --ink: #2b1b14;
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
  background: var(--ecru);
  -webkit-text-size-adjust: 100%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--ecru);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  word-break: auto-phrase;
  font-feature-settings: 'palt' 1;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll {
  overflow: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--espresso);
}
h1,
h2,
h3 {
  word-break: auto-phrase;
  text-wrap: balance;
  font-weight: 500;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: default;
}
:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}
[tabindex='-1']:focus {
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
::selection {
  background: var(--bronze-tint);
}

/* ---------------- shell ---------------- */
.app {
  min-height: 100vh;
  min-height: 100dvh;
}
.screen {
  animation: fade 600ms var(--ease) both;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--top);
  padding: 0 max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  background: rgba(43, 27, 20, 0.97);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
.topbar .wordmark {
  color: var(--on-dark);
}
.topbar .pill {
  color: var(--on-dark-faint);
  border-color: rgba(247, 239, 230, 0.3);
}
.topbar .pill--adult {
  color: var(--on-dark);
  border-color: rgba(247, 239, 230, 0.55);
}
.topbar .fav-top {
  color: var(--on-dark-mute);
}
.topbar .fav-top:hover,
.topbar .fav-top__n {
  color: var(--on-dark);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: 6px;
}
.wordmark {
  font-family: var(--latin);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.3em;
  color: var(--ink);
  white-space: nowrap;
}
.pill {
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 7px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--mute);
  white-space: nowrap;
  letter-spacing: 0.06em;
}
.pill--adult {
  color: var(--bronze);
  border-color: rgba(122, 92, 56, 0.45);
}
.fav-top {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 10px 0 10px 12px;
  font-size: 12.5px;
  color: var(--mute);
  transition: color 300ms;
}
.fav-top:hover {
  color: var(--ink);
}
.fav-top__n {
  font-family: var(--latin);
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  min-width: 1ch;
}
.topnav {
  display: none;
}
.brand {
  text-decoration: none;
}
@media (min-width: 900px) {
  .topnav {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0 auto;
  }
  .topnav a,
  .topnav button {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--on-dark-mute);
    text-decoration: none;
    transition: color 300ms;
  }
  .topnav a::after,
  .topnav button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    height: 1px;
    background: var(--on-dark);
    transform: scaleX(0);
    transition: transform 400ms var(--ease);
  }
  .topnav a:hover,
  .topnav button:hover,
  .topnav .is-on {
    color: var(--on-dark);
  }
  .topnav a:hover::after,
  .topnav button:hover::after,
  .topnav .is-on::after {
    transform: scaleX(1);
  }
  .fav-top {
    margin-left: 0;
  }
}
.topbar .pill--adult {
  order: 10;
}
@media (max-width: 400px) {
  .topbar .pill:not(.pill--adult) {
    display: none;
  }
  .wordmark {
    font-size: 15px;
    letter-spacing: 0.24em;
  }
}

/* ---------------- buttons ---------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transition: background 300ms, color 300ms, border-color 300ms, opacity 300ms;
}
.btn:disabled {
  opacity: 0.35;
}
.btn--block {
  width: 100%;
}
.btn--pill {
  border-radius: 999px;
}
.btn--lg {
  min-height: 56px;
  padding: 0 34px;
  font-size: 15px;
}
a.btn {
  text-decoration: none;
}
.btn--mocha {
  background: var(--mocha);
  color: var(--cream);
}
.btn--mocha:hover {
  background: #8a6956;
}
.btn__tag--dark {
  border-color: rgba(247, 239, 230, 0.4);
  margin-left: 8px;
}
.btn--sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: 13px;
}
.btn--ink,
.btn--cocoa {
  background: var(--cocoa);
  color: var(--on-dark);
}
.btn--ink:hover:not(:disabled),
.btn--cocoa:hover:not(:disabled) {
  background: var(--ink-2);
}
.btn--cream {
  background: var(--on-dark);
  color: var(--cocoa);
}
.btn--cream:hover {
  background: #fff8ee;
}
.btn--ghost-dark {
  border: 1px solid rgba(241, 233, 221, 0.38);
  color: var(--on-dark);
}
.btn--ghost-dark:hover {
  border-color: var(--on-dark);
  background: rgba(241, 233, 221, 0.06);
}
.btn--route {
  justify-content: space-between;
  min-height: 64px;
  padding: 0 52px 0 22px;
  text-align: left;
}
.btn--route::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 400ms var(--ease);
}
.btn--route::before {
  content: '';
  position: absolute;
  right: 22px;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn--route:hover::after {
  width: 26px;
}
.btn__main {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.12em;
}
.btn__sub {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  opacity: 0.78;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.link-arrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width 400ms var(--ease);
}
.link-arrow:hover::after {
  width: 40px;
}
.btn--line {
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.btn--line:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--paper);
}
.btn--quiet {
  min-height: 48px;
  padding: 0 4px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.btn--quiet:hover {
  color: var(--ink);
}
.btn--demo {
  border: 1px dashed var(--line-2);
  color: var(--mute);
}
.btn__tag {
  font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ecru);
  color: var(--ink);
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: 0;
}
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--mute);
  transition: color 300ms;
}
.text-btn:hover:not(:disabled) {
  color: var(--ink);
}
.text-btn:disabled {
  opacity: 0.35;
}
.text-btn--link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--line-2);
}
.text-btn--center {
  justify-self: center;
  align-self: center;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--mute);
}
.icon-btn:hover {
  color: var(--ink);
}
.fine {
  font-size: 12px;
  line-height: 1.75;
  color: var(--mute);
}
.muted {
  font-size: 14px;
  color: var(--mute);
}
.empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);
}

/* ---------------- age gate（ココアの静かな入口） ---------------- */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 48px var(--pad);
  background: var(--cocoa-900);
  color: var(--on-dark);
}
.gate__inner {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  align-items: center;
}
.gate__brand {
  font-family: var(--latin);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
}
.gate__rule {
  width: 1px;
  height: 44px;
  background: var(--gold);
  opacity: 0.7;
}
.gate__title {
  font-family: var(--display);
  font-size: clamp(23px, 6.2vw, 30px);
  line-height: 1.75;
  letter-spacing: 0.1em;
}
.gate__text {
  font-size: 13px;
  line-height: 1.95;
  color: var(--on-dark-mute);
}
.gate__actions {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.gate__note {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  font-size: 11px;
  line-height: 1.85;
  color: var(--on-dark-mute);
  text-align: left;
}

/* ---------------- photo（ブランド用の人物写真） ---------------- */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--espresso);
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-sm, 50% 50%);
}
@media (min-width: 900px) {
  .photo img {
    object-position: var(--focal, 50% 50%);
  }
}
.photo__temp {
  position: absolute;
  right: 12px;
  top: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(43, 27, 20, 0.7);
  color: var(--on-dark-mute);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.photo--slot .photo__note {
  position: absolute;
  left: 16px;
  top: 16px;
  max-width: 70%;
  font-size: 11px;
  color: var(--on-dark-mute);
}

/* ---------------- home ---------------- */
/* 1. ヒーロー：エスプレッソの暗い面に、大きな人物写真と明るい文字 */
.hero {
  position: relative;
  background: var(--espresso);
  color: var(--on-dark);
  isolation: isolate;
}
/* スマホ：写真を上に大きく見せ、文字は下の暗い面に置く */
.hero__photo {
  position: relative;
  height: clamp(260px, 44svh, 380px);
}
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 27, 20, 0) 55%, #2b1b14 100%);
}
.hero__inner {
  position: relative;
  width: min(100%, var(--max));
  margin: -28px auto 0;
  padding: 0 var(--pad) 40px;
}
.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--on-dark-mute);
}
.hero__title {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(28px, 7.8vw, 54px);
  line-height: 1.55;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 24px rgba(43, 27, 20, 0.5);
}
.hero__lead {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--on-dark-mute);
}
.hero__actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: rgba(247, 239, 230, 0.4);
  text-underline-offset: 6px;
}
@media (min-width: 768px) {
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (min-width: 900px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: min(calc(100vh - var(--top)), 720px);
  }
  .hero__photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: auto;
  }
  .hero__photo::after {
    background: linear-gradient(90deg, rgba(43, 27, 20, 0.94) 0%, rgba(43, 27, 20, 0.72) 30%, rgba(43, 27, 20, 0.1) 62%, rgba(43, 27, 20, 0) 100%);
  }
  .hero__inner {
    margin: 0 auto;
    padding: 72px var(--pad);
  }
  .hero__lead {
    font-size: 15px;
  }
  .hero__actions {
    margin-top: 36px;
  }
}

/* 2-3. 診断の入口（クリーム地） */
.entry {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 56px var(--pad) 0;
}
.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.entry__title {
  font-family: var(--display);
  font-size: clamp(23px, 6vw, 32px);
  letter-spacing: 0.12em;
}
.entry__lead {
  margin-top: 4px;
  font-size: 13px;
  color: var(--mute);
}
.entry__q {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.08em;
}
.mood-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.mood-tile {
  display: grid;
  align-content: end;
  gap: 4px;
  width: 100%;
  min-height: 116px;
  padding: 16px;
  text-align: left;
  border-radius: 6px;
  background: var(--cocoa);
  color: var(--on-dark);
  transition: transform 400ms var(--ease), background 400ms;
}
.mood-tiles li:nth-child(2) .mood-tile {
  background: var(--espresso);
}
.mood-tiles li:nth-child(3) .mood-tile {
  background: var(--mocha);
}
.mood-tiles li:nth-child(4) .mood-tile {
  background: #5c4334;
}
.mood-tile:hover {
  transform: translateY(-3px);
}
.mood-tile:active {
  transform: scale(0.98);
}
.mood-tile__label {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.1em;
}
.mood-tile__sub {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--on-dark-mute);
}
.theme-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}
.theme-tile {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 92px;
  padding: 14px 16px;
  text-align: left;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color 300ms, transform 400ms var(--ease);
}
.theme-tile:hover {
  border-color: var(--mocha);
  transform: translateY(-2px);
}
.theme-tile__label {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.08em;
}
.theme-tile__ex {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--mute);
}
@media (min-width: 768px) {
  .mood-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .mood-tile {
    min-height: 150px;
    padding: 20px;
  }
  .theme-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (min-width: 900px) {
  .entry {
    padding-top: 96px;
  }
  .mood-tile__label {
    font-size: 19px;
  }
  .theme-tiles {
    grid-template-columns: repeat(6, 1fr);
  }
  .theme-tile {
    min-height: 120px;
    align-content: space-between;
  }
}

/* 4. 作品一覧への導線（ココアの帯） */
.works-band {
  display: grid;
  gap: 18px;
  width: min(calc(100% - 2 * var(--pad)), calc(var(--max) - 2 * var(--pad)));
  margin: 64px auto 0;
  padding: 32px 26px;
  border-radius: 8px;
  background: var(--cocoa);
  color: var(--on-dark);
}
.works-band__title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.12em;
}
.works-band__text {
  margin-top: 4px;
  font-size: 13px;
  color: var(--on-dark-mute);
}
.works-band .btn {
  justify-self: start;
}
@media (min-width: 768px) {
  .works-band {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 40px 48px;
  }
}

/* 5. 信頼性 */
.about {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 64px var(--pad) 72px;
}
.about__title {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.12em;
}
.about__list {
  display: grid;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.about__list > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.about__list dt {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.about__list dd {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--mute);
}
@media (min-width: 900px) {
  .about {
    display: grid;
    grid-template-columns: 3fr 9fr;
    gap: 48px;
    padding-top: 112px;
  }
  .about__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 4px;
    border-top: 0;
  }
  .about__list > div {
    border-bottom: 0;
    border-top: 1px solid var(--ink);
  }
}

/* 6. フッター */
.site-foot {
  display: grid;
  gap: 6px;
  padding: 40px max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))) 48px;
  background: var(--espresso);
  color: var(--on-dark-faint);
  font-size: 12px;
  line-height: 1.85;
}
.site-foot__brand {
  font-family: var(--latin);
  font-size: 16px;
  letter-spacing: 0.32em;
  color: var(--on-dark);
}
.site-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 6px 0 10px;
}
.site-foot__nav a,
.site-foot__nav button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--on-dark);
  text-decoration: none;
}

/* パンくず */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-size: 12px;
  color: var(--mute);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
}
.crumbs [aria-current] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14em;
}

/* ---------------- browse（おすすめを見る） ---------------- */
.browse {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(36px, 7vw, 88px) var(--pad) 0;
}
.page-head__title {
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 56px);
  letter-spacing: 0.1em;
}
.page-head__lead {
  margin-top: 8px;
  font-size: 13px;
  color: var(--mute);
}
.segmented {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented button {
  position: relative;
  flex: none;
  min-height: 46px;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--mute);
}
.segmented button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform 400ms var(--ease);
}
.segmented button.is-on {
  color: var(--ink);
}
.segmented button.is-on::after {
  transform: scaleX(1);
}
.works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 16px;
  margin-top: 30px;
}
.work {
  display: grid;
  gap: 12px;
  align-content: start;
  animation: rise 600ms var(--ease) both;
}
.work__visual {
  display: block;
}
.work__title {
  margin-top: 2px;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.06em;
}
.work__meta {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--mute);
}
.work__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.work__actions .btn {
  flex: 1;
  padding: 0 10px;
}
.status {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
}
@media (min-width: 760px) {
  .works {
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 32px;
  }
}
@media (min-width: 1100px) {
  .works {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cta-band {
  display: grid;
  gap: 18px;
  margin: 80px calc(-1 * var(--pad)) 0;
  padding: 48px var(--pad);
  background: var(--cocoa);
  color: var(--on-dark);
}
.cta-band__title {
  font-family: var(--display);
  font-size: clamp(19px, 5vw, 26px);
  letter-spacing: 0.08em;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 900px) {
  .cta-band {
    margin: 120px 0 0;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 56px 64px;
  }
}

/* ---------------- step（診断の共通画面） ---------------- */
.step {
  --accent: var(--bronze);
  --accent-tint: var(--bronze-tint);
  width: min(100%, 1180px);
  margin: 0 auto;
  min-height: calc(100dvh - var(--top));
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad);
}
.step--mood {
  --accent: var(--mauve);
  --accent-tint: var(--mauve-tint);
}
.step__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 54px;
}
.step__nav .text-btn:last-child {
  justify-self: end;
}
.step__count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--latin);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--mute);
  font-variant-numeric: lining-nums tabular-nums;
}
.step__count b {
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
}
.step__count i {
  width: 22px;
  height: 1px;
  background: var(--line-2);
}
.step__progress {
  height: 1px;
  background: var(--line);
}
.step__progress span {
  display: block;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  transition: transform 700ms var(--ease);
}
.step__stage {
  flex: 1;
  padding: clamp(28px, 5.5vh, 56px) 0 32px;
}
.qview--fwd {
  animation: qFwd 560ms var(--ease) both;
}
.qview--back {
  animation: qBack 560ms var(--ease) both;
}
@keyframes qFwd {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}
@keyframes qBack {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}
.qhead__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.qhead__label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.qhead__title {
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(25px, 6.9vw, 46px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  white-space: pre-line;
}
.qhead__lead {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.answers {
  margin-top: 28px;
}
.answers--single {
  border-top: 1px solid var(--line);
}
.answer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 70px;
  padding: 12px 6px 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  animation: rise 560ms var(--ease) both;
  transition: opacity 400ms, padding 400ms var(--ease);
}
.answer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  opacity: 0;
  transition: opacity 400ms;
}
.answer::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 500ms var(--ease);
}
.answer:hover::before {
  opacity: 0.6;
}
.answer.is-on::before {
  opacity: 1;
}
.answer.is-on::after {
  transform: scaleY(1);
}
.answer.is-on {
  padding-left: 24px;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.answer__text {
  flex: 1;
  display: grid;
}
.answer__label {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
}
.answer__sub {
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.answer__mark {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: border-color 400ms;
}
.answer__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 400ms var(--ease);
}
.answer.is-on .answer__mark {
  border-color: var(--accent);
}
.answer.is-on .answer__mark::after {
  transform: scale(1);
}
.answer.is-quiet {
  opacity: 0.38;
}
.answers--multi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.token {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  animation: rise 520ms var(--ease) both;
  transition: background 300ms, border-color 300ms, color 300ms;
}
.token:hover {
  border-color: var(--ink);
  background: var(--paper);
}
.token__mark {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-2);
  color: transparent;
  transition: background 300ms, border-color 300ms, color 300ms;
}
.token.is-on {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.token.is-on .token__mark {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.token--none {
  border-style: dashed;
}
.token--none.is-on {
  background: var(--paper);
  border-style: solid;
  border-color: var(--ink);
}
.token--none.is-on .token__mark {
  background: var(--ink);
  border-color: var(--ink);
}
.detail-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--mute);
}
.step__bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 calc(-1 * var(--pad));
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 239, 230, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.step__hint {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--mute);
}
.btn--next {
  min-width: 168px;
}
.junction {
  display: grid;
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.junction button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 4px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  transition: background 300ms, padding 400ms var(--ease);
}
.junction button:hover {
  background: var(--paper);
  padding-left: 14px;
}
.junction__main .junction__title {
  color: var(--ink);
}
.junction__title {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.08em;
}
.junction__main .junction__title::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.junction__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--mute);
}
.computing {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 80px 0;
  text-align: center;
}
.computing__line {
  width: 150px;
  margin-bottom: 18px;
  overflow: visible;
}
.computing__line path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1s ease forwards;
}
.computing__title {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  max-width: 17em;
}
.computing__sub {
  font-size: 12px;
  color: var(--mute);
}
@media (min-width: 1000px) {
  .step__stage {
    display: flex;
    align-items: center;
    padding: 56px 0 64px;
  }
  .step__stage > * {
    width: 100%;
  }
  .qview {
    display: grid;
    grid-template-columns: 5fr 6fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 96px;
    align-items: start;
  }
  .qview > .answers,
  .qview > .junction,
  .qview > .detail-toggle {
    grid-column: 2;
  }
  .qhead {
    grid-row: 1 / span 3;
    position: sticky;
    top: calc(var(--top) + 48px);
  }
  .qhead__lead {
    margin-top: 18px;
    font-size: 14px;
  }
  .answers,
  .junction {
    margin-top: 0;
  }
  .answer {
    min-height: 82px;
    padding: 16px 12px 16px 22px;
  }
  .answer.is-on {
    padding-left: 30px;
  }
  .answer__label {
    font-size: 20px;
  }
  .token {
    min-height: 52px;
    font-size: 15px;
  }
  .step__bar {
    margin: 0;
    padding: 18px 0 22px;
    background: transparent;
    backdrop-filter: none;
  }
}

/* ---------------- results ---------------- */
.results {
  --accent: var(--bronze);
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(36px, 7vw, 96px) var(--pad) 56px;
}
.results--mood {
  --accent: var(--mauve);
}
.rhead__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.rhead__kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.rhead__title {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(30px, 8.4vw, 60px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: pre-line;
}
.rhead__lead {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--slate);
  max-width: 30em;
}
.basis {
  display: grid;
  gap: 4px;
  justify-items: start;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 640px;
}
.basis__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.basis__list {
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.basis__list span {
  white-space: nowrap;
}
.basis__list i {
  font-style: normal;
  margin: 0 0.4em;
  color: var(--line-2);
}
.basis__list .is-heavy {
  color: var(--accent);
}
.basis__list .is-heavy svg {
  margin-right: 3px;
  vertical-align: -0.05em;
}
.basis__list .is-avoid {
  color: var(--mute);
}
.basis__more {
  min-height: 44px;
  min-width: 44px;
  margin-left: 0.8em;
  font-size: 12px;
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rhead__note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mute);
}
.suggest {
  margin-top: 22px;
  padding: 4px 0 4px 18px;
  border-left: 1px solid var(--accent);
  max-width: 560px;
}
.suggest__text {
  font-size: 13px;
  line-height: 1.85;
  color: var(--slate);
}
.suggest__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.feature {
  display: grid;
  gap: 26px;
  margin-top: 44px;
  animation: rise 800ms 100ms var(--ease) both;
}
.feature__visual {
  display: block;
  width: 100%;
}
.feature__no {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.feature__no .no {
  font-family: var(--latin);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.status--new {
  color: var(--bronze);
}
.status--upcoming {
  color: var(--mauve);
}
.feature__title {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(28px, 7.4vw, 46px);
  line-height: 1.45;
  letter-spacing: 0.08em;
}
.feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.feature__reason {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 1px solid var(--gold);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.06em;
}
.feature .match {
  margin-top: 26px;
}
.feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.feature__actions .btn--ink {
  flex: 1 1 180px;
}

.match {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 14px;
  max-width: 340px;
}
.match__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.match__num {
  font-family: var(--latin);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.match__num small {
  font-size: 15px;
  margin-left: 2px;
  color: var(--mute);
}
.match__rule {
  position: relative;
  align-self: center;
  height: 1px;
  background: var(--line);
}
.match__rule i {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  animation: grow 1200ms 400ms var(--ease) both;
}
.match__rule i::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes grow {
  from {
    transform: scaleX(0);
  }
}
.match--sm .match__num {
  font-size: 24px;
}
.match--sm {
  gap: 10px;
}
.match--none {
  display: block;
  font-size: 12px;
  color: var(--mute);
}

.picks {
  margin-top: 56px;
  border-top: 1px solid var(--ink);
}
.picks > li {
  animation: rise 700ms var(--ease) both;
}
.pick {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.pick__visual {
  display: block;
  align-self: start;
}
.pick__body {
  min-width: 0;
}
.pick__no {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.pick__no .no {
  font-family: var(--latin);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.pick__title {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.pick__tags {
  margin-top: 2px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.pick__reason {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pick__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 14px;
}
.pick__foot .match {
  flex: 1 1 140px;
  max-width: 220px;
}
.pick__actions {
  display: flex;
  gap: 8px;
}
.pick--ref .pick__title,
.pick--ref .pick__reason {
  color: var(--slate);
}
.pick--ref .poster {
  opacity: 0.85;
}
.reference {
  margin-top: 56px;
}
.reference__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.1em;
}
.reference__title span {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.reference .picks {
  margin-top: 14px;
  border-top-color: var(--line-2);
}
.fav-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--mute);
  transition: color 300ms, border-color 300ms, background 300ms;
}
.fav-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.fav-btn.is-on {
  color: var(--mauve);
  border-color: rgba(118, 89, 106, 0.5);
  background: var(--mauve-tint);
}
.fav-btn.is-on svg {
  animation: pop 420ms var(--ease);
}
@keyframes pop {
  40% {
    transform: scale(1.2);
  }
}
.fav-btn--label {
  display: inline-flex;
  gap: 8px;
  width: auto;
  height: 52px;
  padding: 0 20px;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.method {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 680px;
}
.method__note {
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--mute);
}
.how {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--mute);
}
.how summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 6px;
}
.how__body {
  display: grid;
  gap: 8px;
  padding: 6px 0 4px 16px;
  border-left: 1px solid var(--line-2);
  line-height: 1.85;
}
.results__actions {
  display: grid;
  gap: 10px;
  max-width: 400px;
  margin: 48px auto 0;
}
@media (min-width: 760px) {
  .picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
  .pick {
    grid-template-columns: 132px 1fr;
    gap: 28px;
    padding: 34px 0;
  }
}
@media (min-width: 1000px) {
  .rhead {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 80px;
    align-items: end;
  }
  .rhead__kicker,
  .rhead__title,
  .rhead__lead {
    grid-column: 1;
  }
  .basis,
  .rhead__note,
  .suggest {
    grid-column: 2;
  }
  .basis {
    grid-row: 1 / span 3;
    align-self: end;
    margin-top: 0;
  }
  .rhead__note {
    grid-row: 4;
  }
  .suggest {
    grid-row: 5;
  }
  .feature {
    grid-template-columns: 6fr 5fr;
    gap: 88px;
    align-items: center;
    margin-top: 88px;
  }
  .feature__reason {
    font-size: 18px;
  }
  .picks {
    margin-top: 96px;
  }
  .reference {
    margin-top: 80px;
  }
}

/* ---------------- cover（作品の表紙：文字だけで見せる） ---------------- */
.cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  container-type: inline-size;
  background: var(--cv-bg, var(--stone));
  color: var(--cv-fg, var(--ink));
  box-shadow: var(--shadow);
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
}
.cover::after {
  content: '';
  position: absolute;
  inset: 7cqw;
  border: 1px solid var(--cv-rule, var(--line));
  pointer-events: none;
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
button:hover > .cover,
button:hover .cover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(43, 27, 20, 0.04), 0 26px 44px -26px rgba(43, 27, 20, 0.55);
}
.cover__title {
  position: absolute;
  top: 15cqw;
  right: 15cqw;
  max-height: calc(100% - 34cqw);
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(12px, 10.5cqw, 36px);
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.cover__maker {
  position: absolute;
  left: 13cqw;
  bottom: 11cqw;
  max-width: 60%;
  font-family: var(--latin);
  font-style: italic;
  font-size: clamp(9px, 6.4cqw, 15px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--cv-sub, var(--mute));
}
.cover__vr {
  position: absolute;
  left: 13cqw;
  top: 12cqw;
  font-family: var(--latin);
  font-size: clamp(9px, 6cqw, 14px);
  letter-spacing: 0.24em;
  color: var(--cv-sub, var(--mute));
}
.cover--feature {
  aspect-ratio: 4 / 3;
}
.cover--feature .cover__title {
  font-size: clamp(18px, 6.4cqw, 40px);
  top: 10cqw;
  right: 11cqw;
}
.cover--feature .cover__maker,
.cover--feature .cover__vr {
  font-size: clamp(11px, 3.4cqw, 16px);
  left: 8cqw;
}
.cover--feature .cover__maker {
  bottom: 7cqw;
}
.cover--feature .cover__vr {
  top: 8cqw;
}
.cover--feature::after {
  inset: 4cqw;
}
.cover--detail {
  aspect-ratio: 16 / 9;
  box-shadow: none;
}
.cover--detail .cover__title {
  font-size: clamp(18px, 5.4cqw, 34px);
  top: 8cqw;
  right: 9cqw;
}
.cover--detail::after {
  inset: 3.4cqw;
}
.cover--detail .cover__maker,
.cover--detail .cover__vr {
  font-size: clamp(11px, 2.8cqw, 15px);
  left: 7cqw;
}
.cover--detail .cover__maker {
  bottom: 6cqw;
}
.cover--detail .cover__vr {
  top: 7cqw;
}
.cover--mini {
  width: 44px;
  flex: none;
  box-shadow: none;
}
@media (min-width: 1000px) {
  .feature__visual .cover--feature {
    aspect-ratio: 4 / 5;
  }
  .feature__visual .cover--feature .cover__title {
    font-size: clamp(24px, 8cqw, 44px);
    top: 12cqw;
    right: 13cqw;
  }
}

/* ---------------- hits（合致した条件） ---------------- */
.hits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.hits__label {
  margin-right: 4px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.hit {
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--slate);
  background: var(--paper);
}

/* ---------------- sheet ---------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 27, 20, 0.34);
  animation: fade 300ms ease both;
}
.sheet__panel {
  position: relative;
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ecru);
  border-radius: 14px 14px 0 0;
  padding: 10px var(--pad) calc(28px + env(safe-area-inset-bottom, 0px));
  animation: sheetUp 520ms var(--ease) both;
}
@keyframes sheetUp {
  from {
    transform: translateY(32px);
    opacity: 0;
  }
}
.sheet__grip {
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--line-2);
  margin: 0 auto 10px;
}
.sheet__close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
}
@media (min-width: 760px) {
  .sheet {
    align-items: center;
    padding: 40px;
  }
  .sheet__panel {
    width: min(100%, 680px);
    max-height: 88vh;
    border-radius: 3px;
    padding: 30px 44px 40px;
  }
  .sheet__grip {
    display: none;
  }
}

/* ---------------- detail ---------------- */
.detail {
  display: grid;
  gap: 26px;
  padding-top: 34px;
}
.detail__body {
  display: grid;
  gap: 12px;
}
.detail__title {
  font-family: var(--display);
  font-size: clamp(26px, 6.6vw, 34px);
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.detail__reason {
  padding-left: 14px;
  border-left: 1px solid var(--gold);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.05em;
}
.detail__synopsis {
  font-size: 14.5px;
  line-height: 2;
}
.spec {
  display: grid;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
.spec > div {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.spec dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.spec--compact > div {
  padding: 7px 0;
  font-size: 12.5px;
}
.detail__section {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.detail__section h3 {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.1em;
}
.breakdown {
  border-top: 1px solid var(--line);
}
.breakdown li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.breakdown__src {
  font-size: 11.5px;
  color: var(--mute);
}
.breakdown__pts {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--latin);
  font-size: 18px;
  color: var(--bronze);
}
.breakdown__total {
  font-size: 12px;
  color: var(--mute);
}
.detail__section--status {
  padding: 14px 16px;
  border: 1px dashed var(--line-2);
}
.detail__section--status h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}
.detail__actions {
  display: grid;
  gap: 10px;
}
.detail__actions .fav-btn--label {
  width: 100%;
}
@media (min-width: 520px) {
  .detail__actions {
    grid-template-columns: 1fr 1fr;
  }
  .detail__actions .fine {
    grid-column: 1 / -1;
  }
}

/* ---------------- favorites ---------------- */
.favs {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}
.favs__title {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.1em;
}
.favs__list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.fav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.fav-row__open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  text-align: left;
  min-width: 0;
}
.fav-row__text {
  display: grid;
  min-width: 0;
}
.fav-row__title {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.06em;
}
.fav-row__meta {
  font-size: 11.5px;
  color: var(--mute);
}

/* ---------------- toast ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 13px 20px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--ecru);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms, transform 400ms var(--ease);
}
.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
.pick--ref .cover {
  opacity: 0.85;
}

/* ---------------- work page（作品ページ：将来の /works/[id]/） ---------------- */
.work-page {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 12px var(--pad) 72px;
}
.work-page__hero {
  display: grid;
  gap: 28px;
  margin-top: 12px;
}
.work-page__imgnote {
  margin-top: 8px;
  font-size: 11px;
  color: var(--mute);
}
.work-page__title {
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(26px, 7vw, 44px);
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.work-page__lead {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 2;
}
.work-page__source {
  margin-top: 4px;
  font-size: 11px;
  color: var(--mute);
}
.work-page__match {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 6px;
  background: var(--stone);
}
.work-page__match-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.work-page__reason {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.85;
}
.work-page__percent {
  margin-top: 10px;
  font-size: 12px;
  color: var(--mute);
}
.work-page__percent b {
  font-family: var(--latin);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}
.work-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.work-page__actions .fav-btn--label {
  border-radius: 999px;
}
.work-section {
  margin-top: 48px;
}
.work-section__title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.1em;
}
.work-section__note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--mute);
}
.feature-grid {
  display: grid;
  gap: 0;
  margin-top: 8px;
}
.feature-grid > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.feature-grid h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.feature-grid p {
  font-size: 14px;
}
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.related__item {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.related__item .cover {
  margin-bottom: 8px;
}
.related__title {
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.5;
}
.related__meta {
  font-size: 11px;
  color: var(--mute);
}
.work-cta {
  display: grid;
  gap: 16px;
  margin-top: 56px;
  padding: 32px 26px;
  border-radius: 8px;
  background: var(--espresso);
  color: var(--on-dark);
}
.work-cta__title {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.1em;
}
.work-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.work-page__status {
  margin-top: 28px;
}
@media (min-width: 900px) {
  .work-page__hero {
    grid-template-columns: 5fr 6fr;
    gap: 72px;
    align-items: start;
    margin-top: 24px;
  }
  .work-page__visual .cover--feature {
    aspect-ratio: 4 / 5;
  }
  .work-section {
    margin-top: 72px;
  }
  .feature-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }
  .related {
    gap: 32px;
    max-width: 760px;
  }
  .work-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 40px 48px;
  }
}

/* 作品一覧の調整 */
.browse {
  padding-top: 12px;
}
.browse .page-head {
  margin-top: 18px;
}
.work__title a {
  color: inherit;
  text-decoration: none;
}
.work__title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.work__visual {
  text-decoration: none;
}
.detail__page {
  grid-column: 1 / -1;
}
.fav-btn--label {
  border-radius: 999px;
}
/* タップ領域の確保（44px以上） */
.crumbs a,
.site-foot__nav a,
.site-foot__nav button,
.topnav a,
.topnav button {
  min-width: 44px;
  justify-content: center;
}
.segmented button {
  min-width: 44px;
  padding: 0 4px;
}
.work__title a {
  display: block;
  padding: 10px 0;
  margin: -10px 0;
}

/* エロのソムリエ v2: editorial photo beside three-question diagnosis */
.diagnosis-layout__photo{display:block;height:128px;margin-top:22px;border-radius:4px;}
.diagnosis-layout__main{min-width:0;}
.mood-detail-finish{margin-top:24px}
@media(min-width:1000px){
 .qview.diagnosis-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,0.72fr);gap:clamp(26px,5vw,68px);align-items:start;}
 .diagnosis-layout__photo{display:block;height:min(66vh,560px);position:sticky;top:calc(var(--top) + 44px);grid-column:2;grid-row:1;}
 .qview.diagnosis-layout>.diagnosis-layout__main{grid-column:1;grid-row:1;}
}
/* Daily discovery: real products remain unpublished until approved. */
.daily-picks__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin:25px 0 0;padding:0;list-style:none}
.daily-picks__item{display:grid;gap:8px;text-decoration:none;color:var(--ink);min-width:0}
.daily-picks__name{font-family:var(--display);font-size:16px;line-height:1.6}
.daily-picks__meta{font-size:11px;color:var(--mute)}
@media(min-width:760px){.daily-picks__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}

/* v3.2: typography and small-screen overflow safeguards */
.qhead__title,
.rhead__title,
.junction__title,
.feature__title,
.pick__title,
.detail__title {
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.6;
}
.answer__text,
.pick__body,
.feature__body,
.junction button > span,
.step__stage > * {
  min-width: 0;
}
.answer__label,
.token,
.junction__title,
.junction__sub {
  overflow-wrap: anywhere;
  word-break: normal;
}
.token { max-width: 100%; min-height: 46px; padding-top: 9px; padding-bottom: 9px; line-height: 1.55; }
@media (max-width: 520px) {
  .qhead__title { font-size: clamp(24px, 6.7vw, 34px); line-height: 1.6; letter-spacing: 0.025em; }
  .rhead__title { font-size: clamp(28px, 8vw, 42px); line-height: 1.6; letter-spacing: 0.035em; }
  .answer__label { font-size: 17px; line-height: 1.65; letter-spacing: 0.02em; }
  .basis__list span { white-space: normal; overflow-wrap: anywhere; }
  .step__bar { flex-wrap: wrap; }
  .step__hint { flex: 1 1 130px; }
  .btn--next { min-width: 0; flex: 0 0 auto; }
}

/* v3.3 QA panel; visible only with ?qa=1. No tracking/network activated by this CSS. */
.mood-qa{position:fixed;right:12px;bottom:12px;z-index:2147480000;font-family:system-ui,-apple-system,sans-serif;color:#2b1b14;text-align:left;font-size:13px;line-height:1.5}
.mood-qa *{box-sizing:border-box}
.mood-qa__toggle{display:block;margin-left:auto;border:1px solid #b09a83;background:#2b1b14;color:#fff;padding:10px 15px;border-radius:25px;cursor:pointer;font-size:13px;font-weight:600;box-shadow:0 2px 14px #0005}
.mood-qa__panel{width:min(390px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;margin-top:7px;padding:15px;background:#fffdf9;color:#32251d;border:1px solid #b9aa97;border-radius:12px;box-shadow:0 5px 28px #0004}
.mood-qa__panel[hidden]{display:none!important}
.mood-qa__panel strong{font-size:15px}
.mood-qa__panel p{font-size:12px;color:#66594f;margin:7px 0 12px}
.mood-qa__table{width:100%;border-collapse:collapse;font-size:12px}
.mood-qa__table th,.mood-qa__table td{padding:6px 4px;border-bottom:1px solid #eaded0;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.mood-qa__table td:last-child,.mood-qa__table th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mood-qa__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mood-qa__actions button{border:1px solid #9c8572;border-radius:8px;padding:7px 10px;background:#f3e9dd;color:#302219;cursor:pointer;font-size:12px}
@media(max-width:480px){.mood-qa{right:8px;bottom:8px}.mood-qa__panel{max-height:60vh}.mood-qa__toggle{padding:9px 12px}}


/* Ver.3.7: Japanese wordmark; preserve existing colors and layout */
.wordmark { font-family: var(--display); font-size: 17px; letter-spacing: .15em; }
.gate__brand { font-family: var(--display); font-size: 16px; letter-spacing: .27em; padding-left: .27em; }
.site-foot__brand { font-family: var(--display); font-size: 17px; letter-spacing: .18em; }
@media(max-width: 390px) {
  .topbar .wordmark { font-size: 15px; letter-spacing: .09em; }
}


/* v3.7.1 Brand visibility: more legible Japanese Mincho, same palette and layout */
.gate__brand {
  font-family: var(--display);
  font-size: clamp(21px, 3.1vw, 26px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .17em;
  padding-left: .17em;
  color: var(--on-dark);
  text-shadow: 0 1px 12px rgba(13, 8, 5, .14);
}
.topbar .wordmark {
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .12em;
  color: var(--on-dark);
}
.site-foot__brand {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .12em;
}
@media (max-width: 899px) {
  .topbar .wordmark {font-size: clamp(17px, 3vw, 20px); letter-spacing: .09em;}
}
@media (max-width: 390px) {
  .gate__brand {font-size: 21px; letter-spacing: .12em; padding-left: .12em;}
  .topbar .wordmark {font-size: 17px; letter-spacing: .07em;}
}

/* v3.8.1: make legal and information links visible in the footer. */
.site-foot__nav a[href^="/about/"],
.site-foot__nav a[href^="/editorial-policy/"],
.site-foot__nav a[href^="/advertising/"],
.site-foot__nav a[href^="/privacy/"],
.site-foot__nav a:focus-visible {outline:2px solid #D1B5A2;outline-offset:3px;}


/* Ver.4.2: one-step FANZA recommendation journey; design tokens remain unchanged. */
.cv-result-lead{margin-top:22px;padding:12px 16px;border-left:2px solid var(--gold);color:var(--slate);font-size:13px;line-height:1.85;background:rgba(255,255,255,.35);}
.cv-direct-title{font:inherit;text-align:left;color:inherit;letter-spacing:inherit;line-height:inherit;border:0;background:transparent;padding:0;cursor:pointer;overflow-wrap:anywhere;}
.cv-direct-title:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.cv-direct-title:focus-visible,.cv-direct-visual:focus-visible,.cv-outbound:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
.cv-direct-visual,.cv-clickable{cursor:pointer;}
.feature__synopsis{margin-top:16px;line-height:1.9;font-size:14px;color:var(--slate);max-width:60ch;overflow-wrap:anywhere;}
.cv-linknote{font-size:11px;line-height:1.7;margin-top:10px;color:var(--mute);}
.pick__meta{margin-top:7px;font-size:11px;color:var(--mute);line-height:1.7;}
.pick__synopsis{margin-top:10px;font-size:12.5px;line-height:1.75;color:var(--slate);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.pick__actions .cv-outbound{min-height:44px;white-space:normal;text-align:center;padding:8px 15px;line-height:1.3;}
.work__synopsis{font-size:12px;line-height:1.8;color:var(--slate);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.work__title .cv-direct-title{display:block;width:100%;padding:4px 0;}
.work__visual.cv-direct-visual,.daily-picks__item.cv-direct-visual{width:100%;text-align:left;color:inherit;background:transparent;border:0;padding:0;}
.daily-picks__item.cv-direct-visual{display:grid;gap:8px;}
.feature__actions .cv-outbound{min-height:54px;font-size:14px;flex-basis:210px;}
@media(max-width:580px){.pick{grid-template-columns:86px 1fr;gap:14px;} .pick__foot{display:grid;gap:12px;} .pick__actions{width:100%;} .pick__actions .cv-outbound{flex:1;} .feature__actions .cv-outbound{flex-basis:100%;}}

/* Stage: make fictional-content status unambiguous across listing and results. */
.status--demo{color:#765848;background:#f2e6d9;border-color:#dfc7b4;}


/* Ver.4.8: 100% CSS-drawn, no model/person/photo/licensing dependency. */
.hero__abstract {
  overflow: hidden;
  background:
    radial-gradient(ellipse 43% 68% at 83% 40%, rgba(201,148,88,.33), transparent 79%),
    radial-gradient(ellipse 28% 63% at 65% 102%, rgba(228,160,108,.19), transparent 77%),
    radial-gradient(ellipse 52% 70% at 45% 20%, rgba(109,71,47,.16), transparent 78%),
    linear-gradient(115deg, #241710 0%, #352219 43%, #67412c 76%, #2c1a14 100%);
}
.hero__abstract::before {
  content: '';
  position: absolute;
  width: clamp(250px, 51vw, 760px);
  height: clamp(400px, 65vw, 950px);
  right: 6%;
  top: -40%;
  transform: rotate(28deg);
  border: 1px solid rgba(237,193,130,.40);
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(248,200,128,.045), rgba(23,13,9,.06));
  box-shadow:
    0 0 0 28px rgba(212,156,95,.025),
    0 0 0 62px rgba(225,164,102,.028),
    inset 18px 22px 70px rgba(238,178,107,.055);
  opacity: .92;
}
.hero__abstract::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,27,20,0) 40%, #2b1b14 100%);
}
@media (min-width: 900px) {
  .hero__abstract::before {
    width: min(48vw,720px);
    height: min(67vw,900px);
    right: 7%;
    top: -31%;
  }
  .hero__abstract::after {
    background: linear-gradient(90deg,rgba(43,27,20,.96) 0%, rgba(43,27,20,.73) 32%, rgba(43,27,20,.12) 70%, rgba(43,27,20,.02) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__abstract::before { transform: rotate(28deg); }
}

/* Keep the decorative artwork in questionnaire side panels photo-free too. */
.diagnosis-layout__photo.hero__abstract {
  border: 1px solid rgba(168, 121, 82, .22);
  box-shadow: inset 0 0 0 10px rgba(245, 230, 209, .025);
}
.diagnosis-layout__photo.hero__abstract::before {
  width: 66%;
  height: 155%;
  top: -35%;
  right: 7%;
}
.diagnosis-layout__photo.hero__abstract::after {
  background: linear-gradient(140deg, rgba(43,27,20,.28), rgba(43,27,20,.05));
}

/* Ver.5.0: sample gallery (only verified official stills; no cropping or overlays). */
.sample-gallery{margin-top:38px;}
.sample-gallery__eyebrow{font:12px Georgia,serif;letter-spacing:.23em;color:#91715d;margin:0 0 12px;}
.sample-gallery__stage{border:1px solid #e4d4c7;border-radius:10px;background:#f8f3ed;margin:24px 0 15px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:11px;}
.sample-gallery__stage img{display:block;width:auto;max-width:100%;max-height:540px;object-fit:contain;}
.sample-gallery__stage figcaption{font-size:12px;letter-spacing:.08em;color:#88705e;}
.sample-gallery__controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.sample-gallery__thumb{width:80px;height:100px;display:grid;place-items:center;padding:5px;background:#fffaf4;border:1px solid #d8c8ba;border-radius:7px;cursor:pointer;}
.sample-gallery__thumb.is-active,.sample-gallery__thumb:focus-visible{outline:2px solid #755542;outline-offset:2px;}
.sample-gallery__thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
@media(max-width:650px){.sample-gallery__stage{padding:10px}.sample-gallery__thumb{width:61px;height:83px}}