:root {
  --bg: #0b0d18;        /* 深藍。ストア画像の下地 */
  --bg2: #12152a;
  --ink: #ece6d8;
  --dim: #a59f92;
  --brass: #c9a25e;     /* 真鍮の罫。ゲームの紙とタブバーに揃える */
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  font-weight: 500; line-height: 1.9; letter-spacing: .04em;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { word-break: auto-phrase; text-wrap: pretty; } /* 文節で改行(Chrome系) */
.ph span { display: inline-block; } /* Safari は auto-phrase が効かないので、長い段落は文節を手で包む */

.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end; text-align: center;
  padding: 48px 6vw;
  background: linear-gradient(180deg, transparent 82%, var(--bg)), /* 下の映像へ地の色でつなぐ */
              linear-gradient(90deg, transparent 35%, rgba(11,13,24,.85) 75%),
              url(img/kv_wide.jpg) center / cover;
}
.hero-in { width: min(460px, 100%); }
.hero .logo { width: 100%; margin: 0 auto 28px; }
.hero h1 { font-size: 0; }
.lead { font-size: clamp(17px, 2.2vw, 21px); margin-bottom: 8px; }
.note { color: var(--dim); font-size: 13px; }
.follow {
  display: inline-block; margin: 28px 0 10px; padding: 12px 32px;
  border: 1px solid var(--brass); border-radius: 2px; color: var(--brass);
  text-decoration: none; font-size: 16px; letter-spacing: .1em;
  transition: background .2s, color .2s;
}
.follow:hover, .follow:focus-visible { background: var(--brass); color: var(--bg); }
.hero .follow, .cta .follow { background: var(--brass); color: var(--bg); font-weight: 800; }
.hero .follow:hover, .hero .follow:focus-visible, .cta .follow:hover, .cta .follow:focus-visible { background: #dcb877; }

/* 眺める映像: 宝石だけを幅いっぱいに。縁は地へぼかす(映像の黒 #08090e と地 #0b0d18 の継ぎ目を消す) */
section.gems { padding: 0 0 72px; text-align: center; }
.gems video {
  display: block; width: min(100%, 160svh); aspect-ratio: 16 / 9; margin: 0 auto;
  object-fit: cover; background: var(--bg); cursor: pointer;
  mix-blend-mode: lighten; /* 映像の黒を地の色へ持ち上げ、薄い四角を見せない。石は明るいので変わらない */
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.gems p { font-size: clamp(17px, 2.2vw, 21px); padding: 0 16px; margin-top: 20px; }

section { padding: 96px 16px; }
section:nth-of-type(even) { background: var(--bg2); }
h2 {
  font-weight: 800; font-size: clamp(22px, 3.2vw, 30px);
  text-align: center; margin-bottom: 12px;
}
h2::after {
  content: ""; display: block; width: 48px; height: 1px;
  background: var(--brass); margin: 18px auto 0;
}
h2.left { text-align: left; }
h2.left::after { margin-left: 0; }
.sub { text-align: center; color: var(--dim); margin-bottom: 48px; }

.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 260px));
  justify-content: center; gap: 40px;
}
.step img {
  border: 1px solid rgba(201,162,94,.45); border-radius: 18px;
  margin-bottom: 20px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 48%;
}
.step:first-child img { object-position: 50% 42%; } /* 上の数字の表示を外し、キララの吹き出しと結晶を入れる */
.step:last-child img { object-position: 50% 30%; }
.step h3 { font-weight: 800; font-size: 19px; margin-bottom: 6px; }
.step p { color: var(--dim); font-size: 14px; }

.wide { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 420px);
        justify-content: center; align-items: center; gap: 56px; }
.wide img { border-radius: 18px; }
.wide p + p { margin-top: 1em; }

.bubble {
  position: relative; display: inline-block; padding: 14px 22px;
  border: 1px solid var(--brass); border-radius: 6px; background: var(--bg);
  margin-bottom: 20px; line-height: 1.7;
}
.bubble::before { /* 狐の方へ向くしっぽ */
  content: ""; position: absolute; left: -7px; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  background: var(--bg); border: solid var(--brass); border-width: 0 0 1px 1px; transform: rotate(45deg);
}
.bubble small { display: block; color: var(--brass); font-size: 12px; }
.notice {
  position: relative; width: min(440px, 100%); margin: 0 auto 88px; padding: 40px 30px 30px;
  color: #3b2c1c; text-align: center; transform: rotate(-1.2deg);
  background: url(img/notice_paper.jpg) center / cover, #dccb9f; /* 証書の紙(tools/deed/paper.jpg)の内側を、上下のしみごとつないだ物 */
  box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 0 36px rgba(110,78,40,.38); /* 縁の焼け */
}
.notice::before, .notice::after { /* 留めた釘 */
  content: ""; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9a8f80, #3a342c);
}
.notice::before { left: 14px; } .notice::after { right: 14px; }
.notice p { font-size: 15px; margin: 0; padding: 0; line-height: 1.9; }
.notice p + p { margin-top: 14px; }
.notice .n-head { font-weight: 800; font-size: 26px; letter-spacing: .2em; border-bottom: 1px solid rgba(59,44,28,.4); padding-bottom: 10px; }
.notice .n-sign { font-size: 13px; text-align: right; letter-spacing: .15em; }
.name { color: var(--brass); font-size: 14px; letter-spacing: .3em; margin-bottom: 4px; }
.voices { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; max-width: 1020px; margin: 56px auto 0; }
.voices .bubble { margin: 0; font-size: 15px; }
.voice { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 320px; max-width: 100%; }
.voice img { width: 96px; height: 104px; object-fit: contain; object-position: bottom; } /* 足元を吹き出しの上辺にそろえる */
.voice .bubble { width: 100%; flex: 1; white-space: nowrap; } /* 行は <br> で切る */
.voices .bubble::before { left: 32px; top: -7px; margin-top: 0; border-width: 1px 0 0 1px; } /* 上の狐へ向ける */
.greet { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 28px; }
.greet img { width: 96px; }
.greet .bubble { margin: 0; text-align: left; }
.greet .bubble { white-space: nowrap; } /* 行は <br> で切る。狭い幅で文節の途中から割れないように */

.meet { text-align: center; }
.intro { text-align: center; }
.intro .voices { margin-top: 36px; }
.meet .sleep { width: 220px; margin: 0 auto 28px; }
.talk { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.talk .greet { margin: 0; width: min(420px, 100%); justify-content: flex-start; }
.talk .greet img { width: 80px; flex: none; }
.aside { color: var(--dim); font-size: 14px; }
.memory .bubble { margin-top: 20px; white-space: nowrap; } /* 行は <br> で切る(Safari は文節で折らない) */
.memory .after { margin-top: 20px; color: var(--dim); }
.names { font-size: 13px; color: var(--dim); line-height: 1.8; }
.memory img { width: min(280px, 100%); margin: 0 auto; }
@media (max-width: 760px) { .memory img { width: 200px; } }
.price .sub { margin-bottom: 32px; }
.price li { font-size: 15px; color: var(--dim); }
.price { max-width: 520px; margin: 0 auto; text-align: center; }
.price ul { list-style: none; padding: 0; }
.price li { padding: 14px 0; border-bottom: 1px solid rgba(201,162,94,.25); }
.price li:last-child { border-bottom: 0; }

.cta { text-align: center; }

footer { padding: 40px 16px; text-align: center; color: var(--dim); font-size: 12px; }

@media (max-width: 760px) {
  /* 絵(2:3)は幅いっぱいに置き、狐の足元(絵の高さの68%=102vw)が文字の上端(下から約350px)より上に来るだけ上へずらす。
     天井の暗い所(絵の上25%=37.5vw)までしか削らない。Safari のバーが出ている低い画面でもロゴが顔に乗らない */
  .hero {
    align-items: center; justify-content: flex-end; padding-bottom: 40px;
    background: linear-gradient(0deg, var(--bg) 18%, rgba(11,13,24,.9) 38%, transparent 56%),
                url(img/kv_tall.jpg) center calc(0px - clamp(0px, 102vw + 350px - 100svh, 37.5vw)) / 100% auto no-repeat,
                var(--bg);
  }
  .hero .logo { width: 72%; margin-bottom: 18px; }
  .hero .follow { margin-top: 20px; }
  .gems video { width: 100%; aspect-ratio: 4 / 5; }
  .steps { grid-template-columns: minmax(0, 280px); gap: 56px; }
  .wide { grid-template-columns: minmax(0, 340px); gap: 32px; }
  .wide:has(.bubble) { gap: 16px; }
  .greet { gap: 10px; }
  .greet img { width: 64px; }
  .greet .bubble { font-size: 14px; padding: 12px 16px; }
  .wide .bubble::before { left: 48px; top: -7px; margin-top: 0; border-width: 1px 0 0 1px; }
  section { padding: 72px 16px; }
}

.lang { position: absolute; top: 16px; right: 20px; font-size: 13px; color: var(--dim); text-decoration: none; letter-spacing: .1em; }
.lang:hover, .lang:focus-visible { color: var(--brass); }
:lang(en) .hero h1, :lang(en) .lead, :lang(en) p { letter-spacing: .01em; } /* 欧文に和文の字間は広すぎる */