*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#123f46;background:#fffaf2;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
a{color:inherit}
.container{width:min(calc(100% - 64px),1180px);margin:auto}

.site-header{position:absolute;top:0;left:0;width:100%;z-index:20}
.site-header__inner{width:min(calc(100% - 64px),1380px);min-height:104px;margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand__logo{width:62px;height:62px;object-fit:contain;display:block}
.brand__text{display:flex;flex-direction:column}
.brand__text strong{font-family:Georgia,"Times New Roman",serif;font-size:21px}
.brand__text small{margin-top:4px;color:#e76f51;font-size:9px;font-weight:800;letter-spacing:.18em}
.header-actions{display:flex;gap:10px}
.header-actions a{padding:12px 18px;border:1px solid rgba(18,63,70,.18);border-radius:999px;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.12em;background:rgba(255,255,255,.55)}

/* =========================================================
   HERO - NEW DESIGN
========================================================= */

.hero {
    position: relative;
    min-height: 760px;
    padding: 170px 0 95px;
    overflow: hidden;
    background: #f7efe3;
}

/* 背景写真 */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 250, 242, .98) 0%,
            rgba(255, 250, 242, .92) 34%,
            rgba(255, 250, 242, .55) 52%,
            rgba(255, 250, 242, .10) 72%,
            rgba(255, 250, 242, 0) 100%
        ),
        url("../images/gacha-hero-bg.png") center right / cover no-repeat;

    z-index: 0;
}

/* 全体配置 */
.hero__inner {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 64px), 1180px);
    margin: auto;

    display: grid;
    grid-template-columns: minmax(0, 620px) 1fr;
    gap: 60px;
    align-items: center;
}

/* 左側 */
.hero__copy {
    min-width: 0;
}

.eyebrow,
.section-label {
    margin: 0 0 17px;
    color: #e76f51;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2em;
}

.hero h1 {
    margin: 0;
    max-width: 700px;

    font-family:
        Georgia,
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(48px, 5.2vw, 74px);
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: -.045em;

    color: #123f46;
}

.hero h1 span {
    display: block;
    white-space: nowrap;
}

.hero__lead {
    max-width: 620px;
    margin: 28px 0 0;

    color: #586f72;
    font-size: 15px;
    line-height: 2;

    text-shadow: 0 1px 8px rgba(255,255,255,.85);
}

.hero__buttons {
    display: flex;
    gap: 12px;
    margin-top: 36px;
}

.button {
    min-width: 220px;
    min-height: 60px;
    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 8px;

    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}

.button--primary {
    background: #123f46;
    color: #fff;
}

.button--light {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(227,214,196,.95);
    backdrop-filter: blur(8px);
}

.hero__note {
    margin-top: 16px;
    color: #71888b;
    font-size: 10px;
}


/* 右側はPCでは背景写真を見せる */
.hero__visual {
    min-height: 480px;
}

/* picture自体はPCでは非表示 */
.hero__photo {
    display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero__inner {
        grid-template-columns: minmax(0, 560px) 1fr;
        gap: 40px;
    }

    .hero h1 {
        font-size: clamp(44px, 5vw, 62px);
    }
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 900px) {

    .hero {
        min-height: 0;
        padding: 145px 0 80px;

        background:
            linear-gradient(
                180deg,
                #fff8ea 0%,
                #f4eee5 58%,
                #e6f5f2 100%
            );
    }

    .hero::before {
        display: none;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero h1 span {
        white-space: normal;
    }

    .hero__visual {
        min-height: 0;
        display: flex;
        justify-content: center;
    }

    .hero__photo {
        display: block;
        width: min(100%, 360px);
    }

    .hero__photo img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(
            0 28px 35px rgba(18,63,70,.18)
        );
    }
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    .hero {
        padding: 125px 0 70px;
    }

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

    .hero__buttons {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero__photo {
        width: min(100%, 290px);
    }
}

.intro{padding:105px 0;background:#fff}
.intro__inner{max-width:840px;text-align:center}
.intro h2,.section-heading h2{margin:0;font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(32px,4vw,50px);font-weight:600;line-height:1.5}
.intro p:last-child{margin:28px auto 0;max-width:700px;color:#6f8385;font-size:14px;line-height:2.15}

.howto{padding:120px 0;background:#fbf6ed}
.section-heading{text-align:center;margin-bottom:65px}
.section-heading>p:last-child{color:#748789;font-size:13px}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.step-card{position:relative;min-height:350px;padding:38px;background:#fff;border:1px solid #eadcc9;border-radius:22px}
.step-card__number{position:absolute;top:35px;right:35px;color:#c4b49e;font-size:9px;font-weight:900;letter-spacing:.17em}
.step-card__icon{display:grid;place-items:center;width:70px;height:70px;margin-bottom:28px;border-radius:50%;background:#e7f5f3;color:#123f46;font-size:10px;font-weight:900}
.step-card h3{margin:0 0 16px;font-size:24px}
.step-card p{margin:0;color:#718486;font-size:13px;line-height:2}
.step-card a{display:inline-flex;gap:25px;margin-top:25px;color:#e76f51;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.08em}

.final-cta{padding:125px 0;text-align:center;background:linear-gradient(135deg,#e76f51,#d85d45);color:#fff}
.final-cta .section-label{color:#ffe0a8}
.final-cta h2{margin:0;font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(40px,5vw,62px);font-weight:600;line-height:1.5}
.final-cta>div>p:not(.section-label){color:rgba(255,255,255,.8);font-size:13px}
.final-cta__buttons{display:flex;justify-content:center;gap:12px;margin-top:38px}
.button--white{background:#fff;color:#123f46}
.button--outline-white{border:1px solid rgba(255,255,255,.55);color:#fff}

.site-footer{padding-top:60px;background:#082b30;color:#fff}
.site-footer__inner{padding-bottom:45px;display:flex;justify-content:space-between;align-items:center}
.site-footer strong{font-family:Georgia,serif;font-size:18px}
.site-footer p{color:rgba(255,255,255,.5);font-size:10px}
.site-footer__links{display:flex;gap:24px}
.site-footer__links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.08em}
.copyright{padding:20px;text-align:center;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.35);font-size:9px}

@media(max-width:1100px){
.hero__inner{grid-template-columns:minmax(0,1fr) 340px;gap:45px}
.hero h1{font-size:clamp(44px,5vw,62px)}
}
@media(max-width:900px){
.hero{padding-top:145px}
.hero__inner{grid-template-columns:1fr;gap:55px}
.hero h1 span{white-space:normal}
.hero__visual{max-width:420px;margin:auto}
.steps{grid-template-columns:1fr}
}
@media(max-width:640px){
.container,.hero__inner,.site-header__inner{width:calc(100% - 32px)}
.site-header__inner{min-height:82px}
.brand__logo{width:50px;height:50px}
.brand__text strong{font-size:16px}
.header-actions a{padding:10px 12px;font-size:8px}
.header-actions a:first-child{display:none}
.hero{padding:125px 0 75px;min-height:0}
.hero h1{font-size:40px}
.hero__buttons,.final-cta__buttons{flex-direction:column}
.button{width:100%}
.machine{width:290px}
.machine__window{height:150px}
.capsule{width:58px;height:58px}
.intro,.howto,.final-cta{padding:80px 0}
.step-card{padding:30px;min-height:0}
.site-footer__inner{align-items:flex-start;flex-direction:column;gap:30px}
.site-footer__links{flex-direction:column;gap:13px}
}
/* ===== HOW TO PLAY タイトル調整 ===== */

.howto .section-heading h2 {
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.45;
    letter-spacing: -0.03em;
}

/* スマホ表示 */
@media (max-width: 640px) {

    .howto .section-heading {
        margin-bottom: 42px;
    }

    .howto .section-heading h2 {
        font-size: 30px;
        line-height: 1.5;
    }

    .howto .section-heading > p:last-child {
        font-size: 12px;
        line-height: 1.8;
        margin-top: 14px;
    }

    .steps {
        gap: 14px;
    }

    .step-card {
        padding: 28px 24px;
        border-radius: 18px;
    }

    .step-card h3 {
        font-size: 21px;
    }

    .step-card p {
        font-size: 12px;
        line-height: 1.9;
    }
}