/* Kandai Look のサイト。
   冒頭は、アプリの「仕上げる」画面をそのまま広げた物。写真を上（左）に固定し、
   ルックの帯を送っていくと、組写真の色が変わる。
   色はアプリから。白、画面の後ろの薄いグレー、選んだ帯の赤茶。文字は小さく、写真を大きく。 */

:root {
  --page: #ffffff;
  --desk: #eeeef1;
  --ink: #000000;
  --soft: #6e6e73;
  --line: #d8d8dd;
  --rust: #b44422;
  --jp: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --latin: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(18px, 4vw, 48px);
  --wide: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--jp);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.9;
  font-feature-settings: "palt";
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--rust); }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.4; word-break: auto-phrase; text-wrap: balance; }
p, dd, li, td { word-break: auto-phrase; text-wrap: pretty; }
button { font: inherit; color: inherit; }

.wrap { max-width: var(--wide); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- 頭 ---------- */

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--latin); font-size: 1rem; font-weight: 600; text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 22.5%; box-shadow: 0 0 0 1px var(--line); }
.top nav { display: flex; gap: clamp(14px, 2.2vw, 28px); font-size: 0.8125rem; }
.top nav a { text-decoration: none; color: var(--soft); }
.top nav a:hover { color: var(--ink); }

/* ---------- 冒頭: 仕上げる ---------- */

.finish { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-top: clamp(8px, 1.6vw, 20px); }
.stage { position: sticky; top: 16px; }
.collage {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  width: 100%;
  max-width: calc((100vh - 132px) * 1.25);
  aspect-ratio: 5 / 4;
}
.collage figure { min-width: 0; min-height: 0; background: var(--desk); }
.collage figure:first-child { grid-row: 1 / 3; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; max-width: calc((100vh - 132px) * 1.25); }
.now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; font-size: 0.8125rem; color: var(--soft); }
.now b { font-family: var(--latin); font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.now i { font-style: normal; color: var(--rust); }
.hold {
  flex: none;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.hold:hover { border-color: var(--soft); }
.hold.is-down { background: var(--ink); color: var(--page); border-color: var(--ink); }

.intro { padding-top: clamp(8px, 3vw, 44px); padding-bottom: clamp(28px, 4vw, 52px); }
.intro h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.35; }
.intro .lead { margin-top: 14px; }
.intro .state { margin-top: 10px; font-size: 0.8125rem; color: var(--soft); }
.intro .how { margin-top: clamp(20px, 3vw, 36px); padding-top: 12px; border-top: 1px solid var(--ink); font-size: 0.8125rem; color: var(--soft); }

.rows { margin: 0; padding: 0 0 clamp(40px, 12vh, 140px); list-style: none; }
.rows li + li { margin-top: clamp(16px, 2vw, 24px); }
.rows button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.rows .name { display: flex; align-items: baseline; gap: 8px; font-family: var(--latin); font-size: 0.9375rem; font-weight: 600; line-height: 1.6; color: var(--soft); }
.rows .name small { font-family: var(--jp); font-size: 0.75rem; font-weight: 500; }
.rows .name i { font-family: var(--latin); font-style: normal; font-size: 0.6875rem; font-weight: 600; color: var(--rust); }
.rows .strip { position: relative; display: block; margin-top: 2px; outline: 2px solid transparent; outline-offset: 2px; }
.rows .strip img { width: 100%; aspect-ratio: 604 / 150; }
.rows button:hover .name, .rows button[aria-pressed="true"] .name { color: var(--ink); }
.rows button[aria-pressed="true"] .strip { outline-color: var(--rust); }
.rows button[aria-pressed="true"] .strip::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rust) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: 0 0 0 1.5px #fff;
}

@media (max-width: 880px) {
  .finish { display: block; }
  .stage { top: 0; z-index: 2; margin: 0 calc(var(--pad) * -1); padding: 10px var(--pad) 12px; background: var(--page); border-bottom: 1px solid var(--line); }
  .collage { max-width: none; aspect-ratio: 5 / 3.3; }
  .stage-foot { max-width: none; margin-top: 10px; }
  .now b { font-size: 1.375rem; }
  .intro { padding-top: 6px; padding-bottom: 20px; }
  .rows { padding-top: 22px; padding-bottom: 30vh; }
}

/* ---------- 節 ---------- */

.sec { padding-top: clamp(72px, 11vw, 160px); }
.sec h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.say { max-width: 30em; margin-top: 12px; }
.say + .say { margin-top: 0.8em; }
.note { margin-top: 10px; font-size: 0.8125rem; color: var(--soft); }
.note b { font-family: var(--latin); font-weight: 600; color: var(--ink); }

/* 文は左の細い段、図は右の広い段 */
.plate { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.plate.flip { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
@media (max-width: 880px) { .plate, .plate.flip { grid-template-columns: 1fr; } }

.set { display: flex; gap: 5px; }
.set figure { flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); background: var(--desk); }
.set img { width: 100%; height: 100%; object-fit: cover; }

/* アプリの画面: 枠を付けず、画面そのものを置く */
.screen img { width: 100%; border-radius: clamp(22px, 2.6vw, 34px); box-shadow: 0 0 0 1px var(--line); }
.screen figcaption { margin-top: 14px; }
.screen h3 { font-size: 0.9375rem; }
.screen figcaption p { font-size: 0.8125rem; line-height: 1.8; color: var(--soft); }

.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); }
.screens .screen:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }
.screens .screen:nth-child(3) { margin-top: clamp(48px, 8vw, 112px); }
@media (max-width: 880px) {
  .screens { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 28px calc(var(--pad) * -1) 0; padding: 2px var(--pad) 8px; scrollbar-width: none; }
  .screens::-webkit-scrollbar { display: none; }
  .screens .screen { flex: 0 0 62%; scroll-snap-align: center; margin-top: 0 !important; }
}

/* 出した形: 机に置いたプリント */
.desk { margin-top: clamp(24px, 3.4vw, 44px); padding: clamp(20px, 4.4vw, 64px); background: var(--desk); }
.prints { display: grid; grid-template-columns: 1.3fr 0.82fr 0.82fr 0.82fr; align-items: center; gap: clamp(10px, 2.2vw, 30px); }
.prints img { width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 10px 24px -8px rgba(0, 0, 0, 0.22); }
.caps { display: grid; grid-template-columns: 1.3fr 0.82fr 0.82fr 0.82fr; gap: clamp(10px, 2.2vw, 30px); margin-top: 10px; padding: 0 clamp(20px, 4.4vw, 64px); font-size: 0.8125rem; color: var(--soft); }
@media (max-width: 760px) {
  .prints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prints figure:first-child { grid-column: 1 / -1; }
  .caps { display: none; }
}

.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin-top: clamp(28px, 4vw, 52px); }
.ways.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.ways dt { font-weight: 700; }
.ways dd { font-size: 0.8125rem; line-height: 1.8; color: var(--soft); }
@media (max-width: 880px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ways, .ways.two { grid-template-columns: 1fr; } }

/* 値段 */
.compare { width: 100%; margin-top: 4px; border-collapse: collapse; }
.compare th, .compare td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 500; }
.compare thead th { padding-top: 0; border-bottom-color: var(--ink); font-size: 0.8125rem; color: var(--soft); }
.compare tbody th { width: 5.5em; font-weight: 700; white-space: nowrap; }
.compare td { width: 46%; font-size: 0.875rem; }
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(16px, 3vw, 40px); margin-top: clamp(24px, 3vw, 36px); }
.prices dt { font-size: 0.8125rem; color: var(--soft); }
.prices .yen { font-family: var(--latin); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.prices dd + dd { font-size: 0.8125rem; line-height: 1.7; color: var(--soft); }
@media (max-width: 480px) { .prices { grid-template-columns: 1fr; } }

/* サポート */
.qa > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.qa > div:first-child { padding-top: 0; }
.qa dt { font-weight: 700; }
.qa dd { font-size: 0.875rem; color: var(--soft); }
.contact { margin-top: 18px; font-size: 0.875rem; }

/* 奥付 */
.colophon { margin-top: clamp(88px, 13vw, 180px); padding-top: 18px; padding-bottom: 44px; }
.colophon dl { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 4px 20px; max-width: 46em; padding-top: 18px; border-top: 1px solid var(--ink); font-size: 0.8125rem; }
.colophon dt { color: var(--soft); }
.colophon .title { font-family: var(--latin); font-size: 1rem; font-weight: 600; }

/* ---------- 文書のページ（プライバシーポリシー） ---------- */

.doc { max-width: 720px; padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(64px, 9vw, 120px); }
.doc h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.doc .lead { margin-top: 10px; color: var(--soft); }
.doc h2 { margin-top: 2.2em; font-size: 1rem; }
.doc p { margin-top: 0.6em; }
.doc hr { margin: clamp(48px, 7vw, 88px) 0 0; border: 0; border-top: 1px solid var(--line); }
.doc hr + h1 { margin-top: clamp(48px, 7vw, 88px); }
.foot { padding-top: 18px; padding-bottom: 40px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--soft); }

@media (max-width: 880px) { .top nav a.opt { display: none; } }