@font-face {
  font-family: "DotGothic16";
  src: url("/static/fonts/DotGothic16-Regular.ttf") format("truetype");
  font-display: swap;
}

body > header { display: none; }
body > footer { border-top: 1px solid #3c3045; background: #30253a !important; color: #eee; }
body > footer a { color: #eee !important; }

.ad-lp {
  --lp-ink: #2e2530;
  --lp-muted: #665d61;
  --lp-purple: #43334d;
  --lp-purple-light: #64506c;
  --lp-gold: #edc54b;
  --lp-paper: #f3f3f1;
  --lp-line: #aaa9ad;
  color: var(--lp-ink);
  background: #e8e8e6;
  font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.ad-lp *, .ad-lp *::before, .ad-lp *::after { box-sizing: border-box; }
.ad-lp button, .ad-lp input, .ad-lp select, .ad-lp textarea { font: inherit; }
body > footer { font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }

.ad-lp__hero {
  position: relative;
  min-height: clamp(0px,calc(100vw - 360px),640px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(244, 248, 247, .72) 0%, rgba(244, 248, 247, .5) 38%, rgba(244, 248, 247, .06) 72%),
    linear-gradient(0deg, rgba(57, 47, 54, .25), transparent 32%),
    url('/static/image/background_town.jpg') center / cover no-repeat;
  background-position: clamp(50%,calc(70.64% - 2.4vw),62%) center;
  border-bottom: 7px solid #54404e;
}

.ad-lp__hero::before {
  position: absolute;
  inset: -30px auto -30px -40px;
  width: min(84vw, 1120px);
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 28% 25%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 44%, transparent 84%),
    radial-gradient(ellipse at 20% 72%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.28) 48%, transparent 88%);
  filter: blur(18px);
}

.ad-lp__hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 62px;
  content: "";
  pointer-events: none;
  background: linear-gradient(0deg, rgba(35, 31, 34, .4), transparent);
}

.ad-lp__hero-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 20px, 1120px);
  min-height: clamp(0px,calc(100vw - 360px),640px);
  margin: 0 auto;
  padding: clamp(10px,2vw,24px) 0 100px;
}

.ad-lp__status {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px 22px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 clamp(6px,1vw,10px) auto;
  padding: clamp(5px,1vw,11px) clamp(6px,2vw,20px);
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 4px 16px rgba(57, 67, 75, .12);
  color: #51455b;
  font-size: clamp(.65rem,1.1vw,.88rem);
  backdrop-filter: blur(5px);
}
.ad-lp__status span { white-space: nowrap; }
.ad-lp__status span:first-child strong { color: #4f843f; }

.ad-lp__hero-grid {
  display: grid;
  grid-template-columns: minmax(0,clamp(44%,calc(39.4% + 1.28vw),53.72%)) minmax(0,1fr);
  gap: clamp(8px,4vw,52px);
  align-items: center;
}

.ad-lp__hero-copy { min-width: 0; padding: 0; }
.ad-lp__game-title { margin: 0 0 8px; font-size: clamp(1.2rem,4.8vw,4.05rem); line-height: 1.2; letter-spacing: clamp(.04em,.5vw,.12em); white-space: nowrap; }
.ad-lp__intro-characters { display: flex; flex-wrap: nowrap; gap: clamp(4px, .7vw, 8px); align-items: end; margin: 0 0 12px; }
.ad-lp__intro-characters img { display: block; width: min(56px,calc((100% - 20px) / 6)); height: auto; object-fit: contain; }
.ad-lp__eyebrow { margin: 0 0 clamp(8px,1.1vw,14px); font-size: clamp(.6rem,1.6vw,.88rem); line-height: 1.5; letter-spacing: clamp(0em,.25vw,.04em); }
.ad-lp__hero h1 { margin: 0; font-size: clamp(1.35rem,5.3vw,4.25rem); font-weight: 700; line-height: 1.2; letter-spacing: clamp(.01em,.35vw,.06em); white-space: nowrap; text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.ad-lp__lead { margin: clamp(12px,1.6vw,20px) 0 clamp(12px,1.5vw,18px); font-size: clamp(.67rem,1.5vw,1rem); font-weight: 600; line-height: 1.75; }
.ad-lp__lead br { display: none; }

.ad-lp__facts { display: flex; flex-wrap: wrap; gap: clamp(4px,1vw,10px); margin: 0 0 clamp(0px,1.7vw,22px); padding: 0; list-style: none; }
.ad-lp__facts li { padding: clamp(4px,.65vw,8px) clamp(5px,1vw,13px); border: 1px solid #aaa8ad; border-radius: 4px; background: rgba(246,246,244,.9); box-shadow: 0 2px 5px rgba(57,57,60,.12); font-size: clamp(.62rem,1vw,.8rem); font-weight: 700; white-space: nowrap; }
.ad-lp__facts li::before { margin-right: 6px; color: #716b78; content: "◇"; }

.ad-lp__final-form { display: flex; margin: 0; }
.ad-lp__primary-action.btn-al { display: inline-flex; min-height: 60px; align-items: center; justify-content: center; gap: 24px; padding: 13px 25px; color: #2f270f; background: linear-gradient(#f5d76b, #eabc31); border: 2px solid #8d6a13; border-radius: 5px; box-shadow: 0 4px 0 #8f6c18, inset 0 1px 0 #fff3b4, 0 7px 18px rgba(71,52,12,.2); font-size: clamp(1rem, 2vw, 1.18rem); font-weight: 800; text-decoration: none; }
.ad-lp__primary-action.btn-al:hover { color: #2f270f; background: linear-gradient(#f8df7b, #efc641); transform: translateY(1px); }
.ad-lp__primary-action.btn-al:focus, .ad-lp__primary-action.btn-al:focus-visible { color: #2f270f; background: linear-gradient(#f5d76b, #eabc31); outline: 3px solid #1263c6; outline-offset: 3px; }
.ad-lp__primary-action span { font-size: 1.8em; line-height: .5; }

.ad-lp__route-column { min-width: 0; align-self: center; }
.ad-lp__signpost { overflow: hidden; border: 2px solid #6f6872; border-radius: 5px; background: rgba(244,244,242,.96); box-shadow: 0 8px 24px rgba(44,37,43,.22), inset 0 0 0 3px rgba(255,255,255,.7); }
.ad-lp__window-title { padding: clamp(9px,1.1vw,14px) clamp(5px,1.4vw,18px); color: #fff; background: var(--lp-purple); border-bottom: 3px double #938a98; font-size: clamp(.72rem,1.8vw,1rem); letter-spacing: .06em; text-align: center; }
.ad-lp__route-list { --lp-route-icon-size: clamp(34px, 9vw, 64px); display: grid; padding: clamp(5px,.6vw,8px) clamp(7px,1.6vw,20px) 0; }
.ad-lp__route-list a { display: grid; grid-template-columns: var(--lp-route-icon-size) minmax(0,1fr); gap: clamp(5px,1.5vw,12px); align-items: center; min-height: clamp(76px,12vw,98px); padding: clamp(5px,.7vw,8px) 0; color: var(--lp-ink); border-bottom: 1px solid #c2c2c0; text-decoration: none; }
.ad-lp__route-list a:hover { background: #e8e8e6; }
.ad-lp__route-list img { width: var(--lp-route-icon-size); height: var(--lp-route-icon-size); object-fit: contain; filter: drop-shadow(0 4px 2px rgba(53,44,45,.18)); }
.ad-lp__route-list b { display: block; margin-bottom: clamp(2px,.55vw,7px); font-size: clamp(.68rem,1.5vw,1rem); }
.ad-lp__route-list small { display: block; color: #5e5759; font-size: clamp(.65rem,1.2vw,.77rem); line-height: 1.45; }
.ad-lp__signpost-note { margin: 0; padding: clamp(7px,1vw,13px); color: #6b6263; font-size: clamp(.65rem,1.1vw,.75rem); text-align: center; }

.ad-lp__hero-characters { position: absolute; z-index: 2; bottom: 3px; left: 50%; display: flex; width: 100%; min-height: 86px; align-items: end; justify-content: center; transform: translateX(-50%); }
.ad-lp__hero-characters img { width: clamp(48px,6vw,78px); height: auto; filter: drop-shadow(0 5px 2px rgba(27,25,28,.3)); }

.ad-lp__main { width: min(100% - 20px, 1080px); margin: 0 auto; padding: 0 0 34px; }
.ad-lp__manifesto { position: relative; z-index: 3; margin: -26px 0 30px; padding: 22px 28px 20px; color: #fff; background: linear-gradient(135deg, #46334f, #5d4565); border: 1px solid #7c667d; border-radius: 7px; box-shadow: 0 5px 12px rgba(49,37,53,.28); text-align: center; }
.ad-lp__manifesto h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 500; letter-spacing: .08em; }
.ad-lp__manifesto p { margin: 0; color: #eee9ef; font-size: .86rem; line-height: 1.7; }

.ad-lp__activity-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 42px; }
.ad-lp__activity { min-width: 0; overflow: hidden; border: 1px solid #b8b8b5; border-radius: 6px; background: var(--lp-paper); box-shadow: 0 3px 10px rgba(55,55,58,.11); scroll-margin-top: 12px; }
.ad-lp__activity header { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 7px 10px; background: #e4e4e2; border: 1px solid #c9c9c6; border-radius: 20px 4px 4px 20px; color: #413347; font-size: 1.05rem; }
.ad-lp__activity header span { display: grid; width: 34px; height: 34px; place-items: center; margin: -8px 0 -8px -11px; color: #fff; background: var(--lp-purple-light); border-radius: 50%; font-size: .82rem; }
.ad-lp__activity:nth-child(2) header span { background: #98516e; }
.ad-lp__activity-body { padding: 13px 14px 15px; }
.ad-lp__activity h3 { margin: 0 0 7px; font-size: 1rem; }
.ad-lp__activity p { margin: 0; font-size: .84rem; line-height: 1.65; }
.ad-lp__activity-note { min-height: 42px; margin-top: 8px !important; color: #537c4f; font-size: .72rem !important; }
.ad-lp__activity-scene { position: relative; height: 145px; margin-top: 12px; overflow: hidden; border: 1px solid #999a9b; border-radius: 5px; background-color: rgba(240,240,238,.42); background-position: center; background-size: cover; background-blend-mode: screen; }
.ad-lp__activity-scene--talk { background-image: linear-gradient(rgba(21,15,20,.1),rgba(21,15,20,.18)),url('/static/image/background_shop.jpg'); }
.ad-lp__activity-scene--grow { background-image: url('/static/image/background_town.jpg'); }
.ad-lp__activity-scene--create { background-image: url('/static/image/background_castle.jpg'); }
.ad-lp__activity-scene img { position: absolute; bottom: 5px; left: 22%; filter: drop-shadow(0 3px 1px rgba(0,0,0,.25)); }
.ad-lp__activity-scene img + img { left: 55%; }

.ad-lp__start { margin-bottom: 24px; }
.ad-lp__start h2 { display: flex; align-items: center; gap: 22px; margin: 0 0 22px; font-size: 1.35rem; font-weight: 500; text-align: center; }
.ad-lp__start h2::before, .ad-lp__start h2::after { height: 1px; flex: 1; content: ""; background: linear-gradient(90deg,transparent,#9fa0a2); }
.ad-lp__start h2::after { background: linear-gradient(90deg,#9fa0a2,transparent); }
.ad-lp__steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px; margin: 0; padding: 0; list-style: none; }
.ad-lp__steps li { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; min-height: 112px; align-items: center; padding: 16px; border: 1px solid #aaa9ad; border-radius: 6px; background: rgba(244,244,242,.86); }
.ad-lp__steps li:not(:last-child)::after { position: absolute; top: 50%; left: calc(100% + 10px); width: 18px; border-top: 3px dotted #a7a7a5; content: ""; }
.ad-lp__step-number { position: absolute; top: 9px; left: 9px; display: grid; width: 28px; height: 28px; place-items: center; color: #fff; background: var(--lp-purple); border-radius: 50%; font-weight: 700; }
.ad-lp__steps img { width: 55px; height: 55px; margin-top: 16px; object-fit: contain; }
.ad-lp__steps li:first-child::before { width: 55px; height: 42px; margin-top: 16px; content: "✉"; font-size: 2.8rem; line-height: 1; text-align: center; }
.ad-lp__explore-demo { position: relative; display: block; margin-top: 16px; }
.ad-lp__explore-button { display: grid; min-width: 58px; min-height: 36px; place-items: center; margin: 0; padding: 6px 10px; color: #292929; background: linear-gradient(#f2f2f2,#c8c8c8); border: 1px solid #858585; border-radius: 3px; box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(55,55,55,.22); font-size: .8rem; white-space: nowrap; cursor: pointer; transition: transform .08s ease, background .08s ease, box-shadow .08s ease; }
.ad-lp__explore-button:hover { background: linear-gradient(#fff,#d4d4d4); }
.ad-lp__explore-button:active { background: linear-gradient(#bdbdbd,#e2e2e2); box-shadow: inset 0 2px 3px rgba(45,45,45,.28); transform: translateY(2px); }
.ad-lp__explore-pop { position: absolute; z-index: 2; bottom: calc(100% + 6px); left: 50%; min-width: 52px; padding: 4px 7px; color: #342b37; background: #fff; border: 1px solid #797079; border-radius: 10px; box-shadow: 0 2px 5px rgba(39,34,40,.18); font-size: .72rem; line-height: 1.2; text-align: center; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%,5px) scale(.85); }
.ad-lp__explore-pop::after { position: absolute; top: 100%; left: 50%; width: 7px; height: 7px; content: ""; background: #fff; border-right: 1px solid #797079; border-bottom: 1px solid #797079; transform: translate(-50%,-4px) rotate(45deg); }
.ad-lp__explore-pop.is-visible { animation: ad-lp-pop .65s cubic-bezier(.2,.9,.25,1) both; }
@keyframes ad-lp-pop {
  0% { opacity: 0; transform: translate(-50%,8px) scale(.55) rotate(-5deg); }
  22% { opacity: 1; transform: translate(-50%,-2px) scale(1.15) rotate(2deg); }
  38% { opacity: 1; transform: translate(-50%,1px) scale(.96) rotate(0); }
  54%,72% { opacity: 1; transform: translate(-50%,0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%,-9px) scale(.92) rotate(0); }
}
.ad-lp__steps strong,.ad-lp__steps small { display: block; }
.ad-lp__steps small { margin-top: 8px; color: var(--lp-muted); font-size: .74rem; line-height: 1.55; }

.ad-lp__keeper-note { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 16px; align-items: center; margin: 18px 0 24px; padding: 14px 20px; border: 3px double #999a98; background: #e3e4e1; box-shadow: inset 0 0 24px rgba(80,80,80,.08); }
.ad-lp__keeper-note img { width: 64px; height: 64px; }
.ad-lp__keeper-note h2 { margin: 0 0 5px; color: #61524d; font-size: .95rem; }
.ad-lp__keeper-note p { margin: 0; font-size: .79rem; line-height: 1.65; }
.ad-lp__signature { align-self: end; white-space: nowrap; color: #655c58; }

.ad-lp__final { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: end; min-height: 190px; padding: 24px 38px 14px; color: #fff; background: linear-gradient(135deg, #46334f, #5d4565); border: 1px solid #332640; box-shadow: 0 4px 10px rgba(36,27,42,.28); text-align: center; }
.ad-lp__final-chara { display: flex; justify-content: center; }
.ad-lp__final-chara img + img { margin-left: -11px; }
.ad-lp__final h2 { margin: 0 0 17px; font-size: clamp(1.25rem,3vw,1.8rem); font-weight: 400; letter-spacing: .05em; }
.ad-lp__final-form { justify-content: center; }
.ad-lp__final p { margin: 11px 0 0; font-size: .74rem; }
.ad-lp__final a:not(.btn-al) { color: #fff; text-decoration: underline; }

.ad-lp a:focus-visible, .ad-lp button:focus-visible { outline: 3px solid #1263c6; outline-offset: 3px; }

@media (max-width: 860px) {
  .ad-lp__hero::before { width: 100%; }
  .ad-lp__route-column { width: 100%; margin: 0; }
  .ad-lp__activity-list { grid-template-columns: minmax(0,1fr); }
  .ad-lp__activity-scene { height: 190px; }
  .ad-lp__steps { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .ad-lp__steps li:not(:last-child)::after { display: none; }
  .ad-lp__keeper-note { grid-template-columns: 72px minmax(0,1fr); }
  .ad-lp__signature { grid-column: 2; }
}

@media (max-width: 700px) {
  .ad-lp__status span:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
  .ad-lp__primary-action.btn-al,.ad-lp__final-form { width: 100%; }
  .ad-lp__manifesto { padding-inline: 14px; }
  .ad-lp__manifesto br { display: none; }
  .ad-lp__activity-scene { height: 155px; }
  .ad-lp__start h2 { gap: 10px; }
  .ad-lp__keeper-note { grid-template-columns: 54px minmax(0,1fr); padding: 12px; }
  .ad-lp__keeper-note img { width: 52px; height: 52px; }
  .ad-lp__keeper-note br { display: none; }
  .ad-lp__signature { grid-column: 1 / -1; text-align: right; }
  .ad-lp__final { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 22px 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-lp * { scroll-behavior: auto !important; transition: none !important; }
  .ad-lp__explore-pop.is-visible { opacity: 1; transform: translate(-50%,0); animation: none; }
}
