:root{--ink:#344652;--cream:#fffaf0;--blue:#cbe8f3;--pink:#f8dce4;--green:#deecd8;--yellow:#f8e7ad;--peach:#fae4cf;--line:#718792;--orange:#ef9a68}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page,var(--cream));color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif}
.site-head{min-height:78px;padding:13px clamp(18px,5vw,70px);display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px dashed var(--line);background:#fffaf0e8;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.site-head img{display:block;width:clamp(140px,18vw,205px)}
.head-links{display:flex;align-items:center;gap:10px}
.head-links a,.pill-link{color:inherit;text-decoration:none;border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:10px 16px;font-size:13px;white-space:nowrap}
.head-links a:first-child{border-color:transparent;background:transparent}
.guide-hero{padding:clamp(58px,10vw,130px) clamp(20px,6vw,90px) clamp(42px,7vw,80px);text-align:center;overflow:hidden}
.eyebrow{font-family:Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em}
.guide-hero h1{margin:24px 0 20px;font-family:"Klee One",cursive;font-weight:500;font-size:clamp(42px,7.2vw,94px);line-height:1.32;letter-spacing:-.04em}
.guide-hero>p:last-child{font-size:clamp(16px,2vw,20px);line-height:2}
.guide-grid{width:min(1180px,calc(100% - 32px));margin:0 auto clamp(70px,10vw,130px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.guide-card{position:relative;min-height:360px;padding:clamp(28px,4vw,48px);overflow:hidden;color:inherit;text-decoration:none;border:1px dashed var(--line);border-radius:44px 65px 50px 38px;background:var(--card);transition:transform .25s ease,box-shadow .25s ease}
.guide-card:hover{transform:translateY(-5px) rotate(-.25deg);box-shadow:8px 10px 0 #6d909844}
.guide-card:nth-child(even){border-radius:62px 38px 58px 46px}
.guide-card b{font:700 12px Arial;letter-spacing:.18em}
.guide-card h2{max-width:72%;margin:50px 0 16px;font-family:"Klee One",cursive;font-size:clamp(28px,3.2vw,44px);font-weight:500;line-height:1.45}
.guide-card p{max-width:70%;margin:0;font-size:15px;line-height:1.9}
.guide-card img{position:absolute;width:clamp(125px,17vw,205px);aspect-ratio:1;right:-12px;bottom:-8px;object-fit:cover;border-radius:50%;mix-blend-mode:multiply;transform:rotate(var(--turn,0deg))}
.guide-card span{position:absolute;right:28px;top:25px;font-family:"Gaegu",cursive;font-size:25px}
.guide-card:nth-child(1){--card:var(--blue);--turn:-8deg}
.guide-card:nth-child(2){--card:var(--pink);--turn:8deg}
.guide-card:nth-child(3){--card:var(--green);--turn:-6deg}
.guide-card:nth-child(4){--card:var(--yellow);--turn:7deg}
.guide-card:nth-child(5){--card:var(--peach);--turn:-8deg}
.guide-card:nth-child(6){--card:#e8def4;--turn:6deg}
.guide-card:nth-child(7){--card:#dcecf1;--turn:-5deg;grid-column:1/-1}
.guide-card:nth-child(7) h2,.guide-card:nth-child(7) p{max-width:75%}
.detail-main{width:min(1040px,calc(100% - 34px));margin:clamp(34px,6vw,78px) auto}
.play-sheet{padding:clamp(30px,6vw,76px);background:var(--cream);border:1px dashed var(--line);border-radius:58px 38px 66px 48px;box-shadow:10px 12px 0 #6d909833}
.play-top{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,6vw,70px);align-items:center}
.play-top h1{margin:25px 0 20px;font-family:"Klee One",cursive;font-size:clamp(35px,6vw,68px);font-weight:500;line-height:1.45;letter-spacing:-.045em}
.lead{font-size:clamp(16px,2vw,20px);line-height:2}
.play-art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;mix-blend-mode:multiply;transform:rotate(var(--turn,-5deg))}
.play-body{margin-top:clamp(42px,7vw,80px);display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.play-body article,.note{padding:clamp(24px,4vw,38px);background:#fff;border:1px dashed var(--line);border-radius:30px}
.play-body h2,.note h2{margin:0 0 18px;font-family:"Klee One",cursive;font-size:22px;font-weight:500}
.play-body p,.play-body li,.note p{font-size:15px;line-height:2}
.play-body ul{margin:0;padding-left:1.3em}
.flow{margin:22px 0 0;padding:24px;text-align:center;background:var(--accent,var(--blue));border-radius:38% 62% 43% 57%;font-size:15px;line-height:2}
.message{margin:20px 0 0;padding:28px;text-align:center;background:var(--accent,var(--yellow));border-radius:54% 46% 55% 45%;font-family:"Klee One",cursive;font-size:clamp(18px,2.4vw,25px);line-height:1.8}
.detail-nav{width:min(1040px,calc(100% - 34px));margin:0 auto 60px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.detail-nav a{color:inherit;text-decoration:none;padding:12px 18px;background:var(--cream);border:1px solid var(--line);border-radius:999px;font-size:13px}
.site-foot{padding:45px 20px;text-align:center;border-top:1px dashed var(--line);font-family:"Gaegu",cursive;font-size:24px;background:var(--cream)}
@media(max-width:720px){.site-head{min-height:64px}
.head-links a{font-size:11px;padding:8px 10px}
.head-links a:first-child{display:none}
.guide-grid{grid-template-columns:1fr}
.guide-card:nth-child(7){grid-column:auto}
.guide-card{min-height:330px}
.guide-card h2{max-width:78%;margin-top:38px}
.guide-card p{max-width:72%}
.play-top,.play-body{grid-template-columns:1fr}
.play-art{width:min(220px,70%);justify-self:center}
.play-sheet{border-radius:38px;padding:30px 22px}
.detail-nav{justify-content:flex-start}
.guide-card:nth-child(7) h2,.guide-card:nth-child(7) p{max-width:72%}
}
@media(max-width:420px){.site-head img{width:125px}
.guide-card{padding:25px;min-height:345px}
.guide-card h2{max-width:100%;padding-right:70px;font-size:27px}
.guide-card p{max-width:100%;padding-right:65px;font-size:14px}
.guide-card img{width:120px;right:-18px;bottom:-4px}
.guide-card span{right:20px}
.play-top h1{font-size:34px}
}

/* Japanese typography follows the soft, rounded face used on the home page. */
.guide-hero h1,
.guide-card h2,
.play-top h1,
.play-body h2,
.note h2,
.message {
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  font-weight:500;
  letter-spacing:0;
}

@media(max-width:720px){
  .guide-hero h1{
    font-size:30px;
    white-space:nowrap;
  }
  .guide-card h2,
  .guide-card:nth-child(7) h2{
    max-width:100%;
    padding-right:0;
    font-size:24px;
    line-height:1.55;
  }
}

@media(max-width:420px){
  .guide-hero h1{font-size:26px}
  .guide-card h2,
  .guide-card:nth-child(7) h2{font-size:22px}
}