:root {
  --black: #050505;
  --white: #ffffff;
  --soft: #f4f4f2;
  --ink: #111111;
  --muted: #686868;
  --line: #d7d7d4;
  --line-dark: rgba(255, 255, 255, 0.24);
  --gold: #d5bf8a;
  --content-max: 1312px;
  --gutter: 64px;
  --header-h: 66px;
  --section-y: clamp(72px, 8vw, 112px);
  --h1: clamp(36px, 4vw, 56px);
  --h2: clamp(32px, 3.4vw, 44px);
  --motion-duration: 1120ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body:has(dialog[open]) {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button {
  border: 0;
}

h1,
h2,
h3,
p,
figure,
dl,
dd,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-weight: 400;
}

h1 {
  font-size: var(--h1);
  line-height: 1.25;
}

h2 {
  font-size: var(--h2);
  line-height: 1.35;
}

.layout-shell {
  width: min(calc(100% - (var(--gutter) * 2)), var(--content-max));
  margin-inline: auto;
}

.section-white {
  color: var(--ink);
  background: var(--white);
}

.section-black {
  color: var(--white);
  background: var(--black);
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  color: var(--white);
  background: var(--black);
  border-bottom: 1px solid var(--line-dark);
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  width: 54px;
  height: 30px;
  object-fit: contain;
  filter: invert(1);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 34px);
  font-size: 11px;
}

.site-nav a {
  padding-block: 9px;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-color: currentColor;
}

.site-nav-artisans {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.site-nav-artisan-menu {
  width: 224px;
  position: absolute;
  z-index: 60;
  top: calc(100% - 1px);
  right: 50%;
  padding: 14px;
  color: var(--white);
  background: rgba(5, 5, 5, 0.98);
  border: 1px solid var(--line-dark);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(50%, 8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.site-nav-artisan-menu > p {
  margin: 0 0 8px;
  padding: 0 10px 9px;
  color: rgba(255, 255, 255, 0.48);
  border-bottom: 1px solid var(--line-dark);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.site-nav-artisan-menu > div {
  display: grid;
}

.site-nav .site-nav-artisan-menu a {
  padding: 8px 10px;
  border: 0;
  color: rgba(255, 255, 255, 0.76);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-size: 13px;
  line-height: 1.45;
}

.site-nav .site-nav-artisan-menu a:hover,
.site-nav .site-nav-artisan-menu a:focus-visible,
.site-nav .site-nav-artisan-menu a[aria-current="page"] {
  color: var(--white);
  background: rgba(255, 255, 255, 0.09);
}

.site-nav-artisans:hover .site-nav-artisan-menu,
.site-nav-artisans:focus-within .site-nav-artisan-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(50%, 0);
}

.menu-toggle {
  display: none;
  min-width: 72px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 0 12px 12px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.menu-toggle-lines,
.menu-toggle-lines::before,
.menu-toggle-lines::after {
  width: 22px;
  height: 1px;
  display: block;
  background: currentColor;
}

.menu-toggle-lines {
  position: relative;
}

.menu-toggle-lines::before,
.menu-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle-lines::before {
  top: -6px;
}

.menu-toggle-lines::after {
  top: 6px;
}

.mobile-menu {
  width: min(88vw, 420px);
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--white);
  background: var(--black);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu[open] {
  display: flex;
  flex-direction: column;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu::backdrop {
  background: rgba(0, 0, 0, 0.58);
}

.mobile-menu-head {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line-dark);
}

.mobile-menu-brand {
  display: flex;
  align-items: center;
}

.mobile-menu-brand img {
  width: 54px;
  height: 30px;
  object-fit: contain;
  filter: invert(1);
}

.mobile-menu-close {
  padding: 12px 0 12px 12px;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.mobile-menu-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--gutter) 15vh;
}

.mobile-menu-nav a {
  padding-block: 22px;
  border-bottom: 1px solid var(--line-dark);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.menu-open {
  overflow: hidden;
}

.hero {
  color: var(--white);
  background: var(--black);
  padding: 0;
}

.hero-surface {
  width: 100%;
  height: clamp(640px, 74svh, 760px);
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.hero-background {
  width: 106%;
  height: 100%;
  position: absolute;
  inset: 0 auto 0 -3%;
  object-fit: cover;
  object-position: 50% center;
  transform-origin: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-block: 78px;
  color: var(--white);
}

.hero h1 {
  max-width: 720px;
  font-size: 68px;
  line-height: 1.15;
  text-wrap: balance;
}

.hero-artisan {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
}

.hero-action {
  max-width: 610px;
  margin-top: 42px;
}

.hero-lead {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}

.hero-button {
  color: var(--white);
  background: rgba(5, 5, 5, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.hero-button:hover {
  background: var(--black);
}

douraku-site-header,
douraku-site-footer {
  display: contents;
}

.about-body {
  background: var(--white);
}

.about-concept {
  padding-block: clamp(110px, 14vw, 190px) clamp(96px, 12vw, 160px);
  color: var(--white);
  background-color: var(--black);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.82)),
    url("./assets/douraku-philosophy-header-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-concept-inner {
  text-align: center;
}

.about-concept h1 {
  max-width: 1200px;
  margin-inline: auto;
  font-size: var(--h1);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.about-concept .artisan-directory-label {
  color: rgba(255, 255, 255, 0.68);
}

.about-concept-message {
  max-width: 760px;
  display: grid;
  gap: 24px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 2.25;
}

.about-artisans {
  padding-block: var(--section-y);
  background: var(--white);
}

.artisan-directory-heading h2 {
  font-size: var(--h2);
  line-height: 1.35;
}

.artisan-directory-label {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.artisan-directory-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 28px;
}

.artisan-directory-heading .artisan-directory-label {
  margin: 0;
  order: 2;
}

.artisan-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.artisan-directory-card {
  min-width: 0;
  display: grid;
  color: var(--ink);
  background: var(--white);
}

.artisan-directory-media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--soft);
}

.artisan-directory-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover !important;
  object-position: var(--artisan-directory-object-position, 50% 50%);
}

.artisan-directory-copy {
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 16px;
  border-top: 1px solid var(--line);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.artisan-directory-copy strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.artisan-directory-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artisan-directory-card:hover .artisan-directory-copy,
.artisan-directory-card:focus-visible .artisan-directory-copy {
  color: var(--white);
  background: var(--black);
  border-top-color: var(--black);
}

.artisan-directory-card:hover .artisan-directory-copy small,
.artisan-directory-card:focus-visible .artisan-directory-copy small {
  color: rgba(255, 255, 255, 0.66);
}

@media (prefers-reduced-motion: reduce) {
  .artisan-directory-copy {
    transition: none;
  }
}

.artisan-directory-card[aria-current="page"] .artisan-directory-copy {
  color: var(--white);
  background: var(--black);
}

.artisan-directory-card[aria-current="page"] small {
  color: rgba(255, 255, 255, 0.66);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 999px;
  color: var(--white);
  background: var(--black);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:hover {
  background: #292929;
}

.button-secondary {
  background: #333333;
}

.button[aria-disabled="true"],
.button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.creator,
.craft {
  padding-block: var(--section-y);
}

.creator {
  background-color: #080808;
  background-image:
    linear-gradient(rgba(3, 3, 3, 0.58), rgba(3, 3, 3, 0.58)),
    url("./assets/douraku-washi-dark-v1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto, cover;
}

.craft,
.collection,
.purchase-policy {
  background-color: #fafafa;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
    url("./assets/douraku-washi-light-v1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto, cover;
}

.collection-notice,
.collection,
.purchase-policy {
  padding-block: clamp(56px, 5vw, 76px);
}

.creator-grid,
.craft-grid,
.purchase-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
}

.media-frame {
  overflow: hidden;
}

.creator-portrait,
.craft-media {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  justify-self: center;
  padding: 0;
  background: transparent;
}

/* 動画の節では写真側を完全に消す。display:block が hidden 属性に勝ち、壊れた画像の印と枠が出るため */
.craft-media img[hidden],
.craft-media video[hidden] {
  display: none !important;
}

.creator-portrait img,
.craft-media img,
.craft-media video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain !important;
  object-position: center;
}

/* 全体表示は保ったまま、元の画素数より大きくは引き伸ばさない。
   解像度の低い素材が枠いっぱいに拡大されて粗く見えるのを防ぐ */
.product-card-media img,
.dialog-media img,
.dialog-thumbnail img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: scale-down !important;
  object-position: center;
}

.section-rule {
  width: 72px;
  height: 1px;
  display: block;
  background: currentColor;
  margin-bottom: 32px;
}

.hero-rule {
  width: 88px;
}

.purchase-rule {
  grid-column: 1 / -1;
  margin-bottom: -12px;
}

.creator-copy h2,
.craft-copy h2 {
  margin-bottom: 12px;
}

/* 名前のすぐ下に置く肩書。本文より一段落とした明るさで、名前の主張を弱めない */
.creator-role {
  margin: 0 0 32px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* 白い節に置く2人目の肩書きも、段落のグレーではなく金色にする */
.craft-copy > .creator-role {
  color: var(--gold);
}

.prose {
  display: grid;
  gap: 18px;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.72);
}

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

.craft-copy > p,
.craft-copy > .craft-body {
  max-width: 650px;
  color: var(--muted);
}

.craft-copy > .craft-body {
  display: grid;
  gap: 18px;
}

/* 小見出しの下だけ、次の段落との間隔を半分にする（格子の間隔は 18px 固定のため負の余白で詰める） */
.craft-copy > .craft-body > .copy-subheading {
  margin-bottom: -9px;
}

.section-intro {
  margin-bottom: clamp(38px, 5vw, 62px);
}

/* Reuse the creator layout; the middle section only mirrors its columns. */
.craft-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.craft-secondary .craft-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

/* 協業職人の枠が3つ目に入った職人では、4つ目の節を文章左・写真右へ戻して左右の交互を保つ（2026-09-19） */
.craft-secondary.craft-flip .craft-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.collection-notice {
  padding-block: clamp(34px, 4vw, 52px);
  color: var(--white);
  background-color: #080808;
  background-image:
    linear-gradient(rgba(3, 3, 3, 0.7), rgba(3, 3, 3, 0.7)),
    url("./assets/douraku-washi-dark-v1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto, cover;
}

.ordering-notes {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: start;
  padding-block: clamp(22px, 3vw, 34px);
  border-block: 1px solid rgba(255, 255, 255, 0.28);
}

.ordering-notes-label {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.ordering-notes h2 {
  font-size: clamp(24px, 2.2vw, 34px);
}

.ordering-notes-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.8;
  list-style: none;
}

.ordering-notes-list li {
  position: relative;
  padding-left: 16px;
}

.ordering-notes-list li::before {
  position: absolute;
  left: 0;
  content: "—";
  color: var(--white);
}

.collection-status {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.fixture-note {
  color: var(--ink);
  font-weight: 600;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.3vw, 30px);
}

.product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--white);
  transition: box-shadow 180ms ease;
}

.product-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.product-card-media {
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
}

.product-card-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 18px 17px;
}

.product-card h3 {
  min-height: 0;
  font-size: 18px;
  line-height: 1.4;
}

.product-card-summary {
  min-height: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.product-card-meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.product-price {
  display: grid;
  font-family: Georgia, serif;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.product-price small {
  color: var(--muted);
  font-family: sans-serif;
  font-size: 9px;
}

.detail-button,
.text-button {
  padding: 0;
  color: var(--ink);
  background: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.detail-button:hover,
.text-button:hover {
  text-decoration: underline;
}

.empty-state {
  padding: 72px 20px;
  border-block: 1px solid var(--line);
  text-align: center;
}

.empty-state p {
  margin-bottom: 14px;
}

.pagination {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}

.pagination button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.3;
}

.purchase-policy {
  border-top: 1px solid var(--line);
}

.purchase-grid {
  align-items: start;
}

.policy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.policy-list article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  align-content: start;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  background: var(--white);
}

.policy-icon {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--soft);
}

.policy-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.policy-list h3 {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

.policy-list [data-card-body] {
  color: var(--muted);
  font-size: 13px;
}

.policy-action {
  margin-top: 26px;
}

.site-footer {
  color: rgba(255, 255, 255, 0.72);
  background: var(--black);
  border-top: 1px solid var(--line-dark);
}

.journey-footer-inner {
  padding: 52px 0 24px;
}

.journey-footer-brand img {
  display: block;
  width: clamp(76px, 7vw, 108px);
  height: auto;
  filter: invert(1);
}

.journey-footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.journey-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 28px;
}

.journey-footer-nav a {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.journey-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.journey-footer-home {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.fatal-error {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.product-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-height: min(880px, calc(100dvh - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.product-dialog::backdrop {
  background: rgba(0, 0, 0, 0.76);
}

.dialog-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--black);
  /* 文字の×は字面が下に寄るので、線2本で円の中心に描く */
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
.dialog-close::before,
.dialog-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.dialog-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.dialog-layout {
  /* PCでは枠の高さを固定し、画像側は動かさず説明側だけを送る */
  height: min(880px, calc(100dvh - 48px));
  min-height: min(760px, calc(100dvh - 48px));
  max-height: min(880px, calc(100dvh - 48px));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.82fr);
}

.dialog-gallery {
  min-width: 0;
  min-height: 0;
  /* 説明側を送っても画像は動かさない */
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: clamp(14px, 1.7vw, 22px);
  padding: clamp(24px, 3vw, 42px);
  background: #f1f1ef;
}

.dialog-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

/* 枠を基準に絶対配置する。aspect-ratio のグリッドではパーセント高さが解決されず、
   縦長の素材が枠からはみ出して切れるため */
.dialog-media img,
.dialog-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
  object-position: center;
}

.dialog-media img[hidden],
.dialog-media video[hidden] {
  display: none;
}

/* 動画のサムネイルは静止画に再生の目印を重ねる */
.thumbnail-play {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 9px;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 2px;
  color: var(--white);
  background: rgba(16, 16, 16, 0.62);
  pointer-events: none;
}

.dialog-thumbnail {
  position: relative;
}

.dialog-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0;
}

.dialog-carousel-controls[hidden],
.dialog-thumbnails[hidden] {
  display: none;
}

.dialog-carousel-controls button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 2px;
  background: #e8e8e8;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.dialog-carousel-controls span {
  min-width: 58px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dialog-thumbnails {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.dialog-thumbnail {
  flex: 0 0 78px;
  width: 78px;
  aspect-ratio: 4 / 3;
  height: 58.5px;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  /* 地色も枠線も置かない。全体表示で余る部分はギャラリー面の地をそのまま見せる */
  background: transparent;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
}

.dialog-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dialog-copy {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(54px, 6vw, 78px) clamp(28px, 5vw, 64px) 42px;
}

.dialog-code {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 10px;
}

.dialog-copy h2 {
  margin-bottom: 20px;
  font-size: clamp(27px, 3vw, 38px);
}

.dialog-summary {
  margin-bottom: 14px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-size: 17px;
}

.dialog-description,
.dialog-purchase-note {
  color: var(--muted);
  font-size: 14px;
}

.dialog-price {
  margin-block: 24px;
  font-family: Georgia, serif;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
}

.dialog-price small {
  margin-left: 8px;
  color: var(--muted);
  font-family: sans-serif;
  font-size: 10px;
}

.dialog-specs {
  margin-bottom: 22px;
  border-top: 1px solid var(--line);
}

.dialog-specs div {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 14px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.dialog-specs dt {
  color: var(--muted);
}

/* 資料の段落をそのまま残すため、本文の改行を生かす */
.dialog-description {
  white-space: pre-line;
}

/* 工芸師セレクト。1つの作品を部位ごとに別の職人が作るため、工程と担当を並べて出す */
.dialog-craftsmen {
  margin-bottom: 22px;
}

.dialog-craftsmen h3 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.dialog-craftsmen ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.dialog-craftsmen .craftsman {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 14px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.craftsman-step {
  color: var(--muted);
}

.craftsman-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.craftsman-title {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .dialog-craftsmen .craftsman {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 1024px) {
  :root {
    --gutter: 40px;
  }

  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .creator-grid,
  .craft-grid,
  .craft-secondary .craft-grid,
  .purchase-grid {
    grid-template-columns: 1fr;
  }

  .ordering-notes {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .artisan-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-copy {
    padding-block: 68px;
  }

  .hero h1 {
    font-size: 54px;
  }

  .hero-action {
    max-width: 680px;
  }

  .creator-portrait,
  .craft-media {
    width: min(76vw, 500px);
  }

  .craft-copy {
    order: 2;
  }

  .craft-media {
    order: 1;
  }

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

  .dialog-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .dialog-gallery {
    overflow: visible;
    grid-template-rows: auto auto auto;
    align-content: start;
  }

  .dialog-media {
    min-height: 0;
  }

  .dialog-gallery {
    padding: clamp(20px, 5vw, 34px);
  }

  .dialog-copy {
    overflow: visible;
  }
}

@media (max-width: 600px) {
  :root {
    --header-h: 62px;
    --section-y: 70px;
    --gutter: 20px;
  }

  .brand img {
    width: 48px;
  }

  .hero-surface {
    height: clamp(520px, 72svh, 640px);
  }

  .hero-background {
    object-position: 54% center;
  }

  .hero-copy {
    justify-content: flex-end;
    padding-block: 48px;
  }

  .hero h1 {
    max-width: 330px;
    font-size: 42px;
    line-height: 1.18;
  }

  .hero-action {
    max-width: 330px;
    margin-top: 30px;
  }

  .hero-lead {
    max-width: 320px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.7;
  }

  .hero-rule {
    width: 64px;
    margin-bottom: 24px;
  }

  .creator-portrait,
  .craft-media {
    width: 100%;
  }

  .creator,
  .craft {
    padding-block: 51px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .mobile-menu {
    width: min(92vw, 420px);
  }

  .mobile-menu-brand img {
    width: 48px;
  }

  .product-card h3,
  .product-card-summary {
    min-height: 0;
  }

  .policy-list article {
    grid-template-columns: auto 1fr;
  }

  .policy-list {
    grid-template-columns: 1fr;
  }

  .about-concept {
    padding-block: 88px 76px;
  }

  .about-concept h1 {
    font-size: var(--h1);
    line-height: 1.25;
  }

  .about-concept-message {
    gap: 20px;
    margin-top: 48px;
    line-height: 2.05;
  }

  .artisan-directory-copy {
    min-height: 72px;
    padding: 13px 12px;
  }

  .journey-footer-main {
    align-items: flex-start;
    gap: 28px;
  }

  .journey-footer-nav {
    gap: 10px 18px;
  }

  .journey-footer-brand img {
    width: 96px;
  }

  .product-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .dialog-layout {
    max-height: calc(100dvh - 20px);
  }

  .dialog-media {
    min-height: 0;
    padding: 0;
  }

  .dialog-gallery {
    gap: 12px;
    padding: 18px;
  }

  .dialog-thumbnail {
    flex-basis: 66px;
    width: 66px;
    height: 49.5px;
  }

  .dialog-copy {
    padding: 40px 22px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero-background,
  .hero-copy,
  [data-motion-stage] {
    animation: none !important;
    clip-path: none !important;
    object-position: 50% center;
    transform: none !important;
  }
}

.notfound {
  display: grid;
  align-content: center;
  min-height: min(72dvh, 720px);
}

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}

/* The not-found band is dark, so the shared buttons are inverted to stay legible. */
.notfound-actions .button {
  color: var(--black);
  background: var(--white);
}

.notfound-actions .button:hover {
  background: #e2e2df;
}

.notfound-actions .button-secondary {
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.42);
}

.notfound-actions .button-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.68);
}

/* === Page transition ===
   Two panels sit above the document, so the page itself is never split.
   They part on arrival and close again on the way out. */
.fusuma {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  overflow: hidden;
  pointer-events: none;
}

.fusuma-panel {
  position: relative;
  width: 50.2%;
  height: 100%;
  background-color: #17140f;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3) 42%, rgba(255, 255, 255, 0.03));
  will-change: transform;
}

/* Resting position is off screen; the opening runs from closed to here, so the
   page stays reachable even if scripting never starts. */
.fusuma-panel.is-left {
  transform: translate3d(-100%, 0, 0);
  animation: fusuma-open-left 1000ms cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

.fusuma-panel.is-right {
  transform: translate3d(100%, 0, 0);
  animation: fusuma-open-right 1000ms cubic-bezier(0.36, 0.02, 0.2, 1) both;
}

@keyframes fusuma-open-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

@keyframes fusuma-open-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

/* The closing travel is driven from script so it always starts from wherever
   the panel currently sits, including part way through the opening. */
.fusuma.is-closing .fusuma-panel {
  animation: none;
  transition: transform 640ms cubic-bezier(0.45, 0, 0.25, 1);
}

/* Washi fibre held down to a deep charcoal rather than a lit surface. */
.fusuma-panel::before {
  content: "";
  position: absolute;
  inset: 11px;
  background-color: #0d0d0f;
  background-image: url("./assets/douraku-washi-dark-v1.jpg");
  background-position: center;
  background-size: cover;
  opacity: 0.55;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(196, 170, 110, 0.07);
}

/* The meeting edge: a hairline with a narrow shade so the panels read as two
   separate leaves rather than one surface. */
.fusuma-panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
}

.fusuma-panel.is-left::after {
  right: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28));
}

.fusuma-panel.is-right::after {
  left: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28));
}

/* Round finger pull.
   Layers, from the surface down: a fine cast grain, an uneven sheen that is
   brighter on one side than the other, and the base brass. The rim is flush
   with the paper and the middle is a shallow bowl, so nothing sits on top. */
.fusuma-pull {
  --pull-rim: 11px;
  position: absolute;
  top: 50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  transform: translateY(-50%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)' opacity='0.38'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)' opacity='0.32'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 24%, rgba(255, 246, 214, 0.3), rgba(255, 246, 214, 0) 44%),
    conic-gradient(
      from 212deg,
      #5d5033 0deg,
      #82714a 54deg,
      #9c875c 104deg,
      #ab966a 140deg,
      #85723f 196deg,
      #635530 252deg,
      #453a20 306deg,
      #5d5033 360deg
    );
  background-blend-mode: overlay, soft-light, soft-light, normal;
  background-size: 26px 26px, 72px 72px, auto, auto;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(232, 213, 164, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}

/* The bowl: shallow, with the shadow gathered under the upper rim. */
.fusuma-pull::before {
  content: "";
  position: absolute;
  inset: var(--pull-rim);
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)' opacity='0.34'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 90% at 50% 118%, #2b2313 0%, #171105 42%, #0b0803 78%);
  background-blend-mode: overlay, normal;
  background-size: 22px 22px, auto;
  box-shadow:
    inset 0 9px 10px rgba(0, 0, 0, 0.9),
    inset 0 3px 3px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(206, 178, 112, 0.5),
    inset 0 -3px 4px rgba(150, 126, 74, 0.16);
}

/* The rolled lip where the bezel turns down into the bowl. */
.fusuma-pull::before {
  border: 1px solid rgba(0, 0, 0, 0.5);
}

/* Patina and reflection broken up around the ring so the metal never reads as
   one even surface. Masked to the rim so the bowl keeps its own shading. */
.fusuma-pull::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 150deg,
    rgba(255, 247, 219, 0) 0deg,
    rgba(255, 247, 219, 0.3) 22deg,
    rgba(255, 247, 219, 0.05) 62deg,
    rgba(0, 0, 0, 0.34) 128deg,
    rgba(96, 104, 72, 0.28) 176deg,
    rgba(255, 247, 219, 0.14) 232deg,
    rgba(0, 0, 0, 0.38) 296deg,
    rgba(255, 247, 219, 0) 360deg
  );
  mix-blend-mode: soft-light;
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - var(--pull-rim)), #000 calc(50% - var(--pull-rim)));
  mask: radial-gradient(circle, transparent 0 calc(50% - var(--pull-rim)), #000 calc(50% - var(--pull-rim)));
}

.fusuma-panel.is-left .fusuma-pull { right: 44px; }

.fusuma-panel.is-right .fusuma-pull { left: 44px; }

@media (max-width: 600px) {
  .fusuma-pull {
    --pull-rim: 7px;
    width: 48px;
    height: 48px;
  }

  .fusuma-panel.is-left .fusuma-pull { right: 24px; }
  .fusuma-panel.is-right .fusuma-pull { left: 24px; }
}

/* The arriving page settles upward behind the opening panels. */
main {
  animation: page-settle 1180ms 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-settle {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fusuma { display: none; }

  main { animation: none; }
}


/* 見積と相談のポップアップ */
.enquiry-dialog {
  border: none;
  padding: 0;
  max-width: 34rem;
  width: min(92vw, 34rem);
  background: #fff;
  color: inherit;
}
.enquiry-dialog::backdrop {
  background: rgba(20, 18, 16, 0.62);
}
.enquiry-layout {
  padding: 2.5rem 2rem 2rem;
  display: grid;
  gap: 0.75rem;
}
.enquiry-heading {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}
.enquiry-product {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.72;
}
.enquiry-lead {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  opacity: 0.72;
}
.enquiry-form {
  display: grid;
  gap: 0.875rem;
}
.enquiry-field {
  display: grid;
  gap: 0.25rem;
}
.enquiry-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.66;
}
.enquiry-required {
  margin-left: 0.25rem;
}
.enquiry-field input,
.enquiry-field textarea {
  font: inherit;
  color: inherit;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 2px;
  background: #fff;
}
.enquiry-field textarea {
  resize: vertical;
}
.enquiry-field input:focus-visible,
.enquiry-field textarea:focus-visible {
  outline: 2px solid rgba(20, 18, 16, 0.55);
  outline-offset: 1px;
}
/* 自動投稿よけ。読み上げと表示の両方から外す */
.enquiry-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.enquiry-status {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.enquiry-status[data-tone="error"] {
  color: #9b2c2c;
}
.enquiry-status[data-tone="done"] {
  color: #2f6b3f;
}
@media (max-width: 540px) {
  .enquiry-layout {
    padding: 2.25rem 1.25rem 1.5rem;
  }
}

/* 全商品一覧（artisan=all）のカードに出す職人名 */
.product-card-artisan {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}

/* 工程・職人の格子（紹介の節の下に置く。列数はデータ側の columns）。写真は同じ4:3の枠に cover で入れる（2026-09-13 CEO指示。contain 固定の例外） */
.craft-steps-intro { max-width: 720px; }
.craft-steps-lead { margin: 0; color: var(--muted); }
.craft-steps-grid {
  display: grid;
  grid-template-columns: repeat(var(--steps-cols, 3), minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
  margin: 0; padding: 0; list-style: none;
}
.craft-step { display: grid; gap: 18px; align-content: start; }
.craft-step-media { position: relative; aspect-ratio: 4 / 3; background: #f1f1f1; }
.craft-step-media img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block;
  object-fit: cover !important; object-position: center;
}
.craft-step-copy { display: grid; gap: 6px; }
.craft-step-index { font-size: 11px; letter-spacing: 0.18em; color: var(--gold); }
.craft-step-eyebrow { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.craft-step-copy h3 { margin: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif; font-size: 19px; font-weight: 400; line-height: 1.4; }
.craft-step-copy p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
@media (max-width: 960px) { .craft-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .craft-steps-grid { grid-template-columns: minmax(0, 1fr); } }

/* 代表が2人いる職人の、1人目・2人目の番号 */
.section-index {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
}

/* 工程・職人の格子で写真を2枚並べる時は、同じ枠を半分ずつ横に置く */
.craft-step-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* 人物など、切れてはいけない写真の節。枠と背景はそのままで全体を見せる */
.craft-steps-contain .craft-step-media img {
  object-fit: contain !important;
}

/* 2枚組の左は作っている人の写真。上を起点にして顔が切れないようにする（2026-09-13 CEO指示） */
.craft-step-media-pair .craft-step-media:first-child img {
  object-position: center top;
}

/* 決済前の配送先の国・送料・合計（2026-09-14） */
.checkout-holder,
.checkout-panel {
  flex-basis: 100%;
}
.checkout-panel {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.checkout-country {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 12px;
}
.checkout-country label,
.checkout-rows dt {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ブラウザ標準の矢印を消し、右に余白を取った細い矢印を描く */
.checkout-country select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  width: 100%;
  padding: 0 48px 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.02em;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.checkout-country select:focus-visible {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 0;
}
.checkout-rows {
  display: grid;
  gap: 6px;
  margin: 0;
}
.checkout-rows div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
}
.checkout-rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.checkout-total dd {
  font-family: Georgia, serif;
  font-size: 20px;
}
.checkout-note,
.checkout-loading {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.checkout-panel .button {
  justify-self: start;
}
.checkout-error {
  margin: 0;
  color: #9b2c2c;
  font-size: 13px;
}
.checkout-holder > .checkout-note + .button {
  margin-top: 12px;
}
.checkout-notice {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 50;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  color: var(--white);
  background: var(--black);
  font-size: 14px;
  line-height: 1.6;
}
.checkout-notice p {
  margin: 0;
  flex: 1;
}
.checkout-notice-close {
  color: var(--white);
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}