@charset "UTF-8";

/* =========================================================
   00. COMMON / 共通
   ※「各セクション本体 → 直下にそのセクションのレスポンシブ」
      の順番で並べています。
========================================================= */
:root{
    --snsai-blue:#5ad1ff;
    --snsai-blue-deep:#2dbde9;
    --snsai-blue-soft:#eaf9ff;
    --snsai-orange:#ff8d2b;
    --snsai-orange-soft:#fff2e4;
    --snsai-yellow:#ffe78e;
    --snsai-green:#57cda3;
    --snsai-ink:#333333;
    --snsai-muted:#6f7780;
    --snsai-line:#e7eef2;
    --snsai-white:#ffffff;
    --snsai-shadow:0 24px 60px rgba(55,89,104,.12);
}

html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:"Zen Maru Gothic", sans-serif;
    color:var(--snsai-ink);
    background:#fff;
}
.snsai-page,
.snsai-page *{box-sizing:border-box;}
.snsai-page img{display:block;max-width:100%;}
.snsai-page a{color:inherit;}
.snsai-container{width:min(1200px,calc(100% - 40px));margin:50px auto;}
.snsai-pc-only{display:block;}

.snsai-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.snsai-reveal.is-show{opacity:1;transform:translateY(0);}
.snsai-reveal-delay{transition-delay:.12s;}

.snsai-section-head{max-width:860px;margin:0 auto 70px;text-align:center;}
.snsai-section-head.narrow{max-width:900px;}
.snsai-section-label{
    display:inline-block;
    position:relative;
    padding-bottom:11px;
    color:#2faed7;
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
}
.snsai-section-label::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:34px;
    height:3px;
    border-radius:999px;
    transform:translateX(-50%);
    background:var(--snsai-orange);
}
.snsai-section-head h2,
.snsai-personal h2,
.snsai-token h2,
.snsai-set-benefit h2,
.snsai-cta-final h2,
.snsai-cta-mid h2{
    margin:22px 0 0;
    font-size:clamp(34px,4vw,52px);
    line-height:1.32;
    font-weight:900;
    letter-spacing:-.04em;
}
.snsai-section-head h2 span,
.snsai-personal h2 span,
.snsai-token h2 span,
.snsai-set-benefit h2 span,
.snsai-cta-final h2 span,
.snsai-cta-mid h2 span{color:var(--snsai-orange);}
.snsai-section-head > p{
    margin:22px auto 0;
    color:var(--snsai-muted);
    font-size:15px;
    line-height:2;
    font-weight:700;
}

.snsai-btn{
    min-height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:0 24px;
    border-radius:16px;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.snsai-btn:hover{transform:translateY(-3px);}
.snsai-btn-primary{
    background:var(--snsai-blue);
    color:#0e556e !important;
    box-shadow:0 14px 28px rgba(90,209,255,.28);
}
.snsai-btn-primary:hover{box-shadow:0 18px 34px rgba(90,209,255,.38);}
.snsai-btn-primary span{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    font-size:13px;
}
.snsai-btn-secondary{background:#fff;border:2px solid #e5edf1;color:#434d53 !important;}
.snsai-btn-secondary:hover{border-color:var(--snsai-blue);}
.snsai-btn-wide{min-width:320px;}
.snsai-text-link{
    color:#65727a !important;
    font-size:13px;
    font-weight:900;
    text-decoration:underline;
    text-underline-offset:5px;
}

/* ---------- COMMON responsive ---------- */
@media (max-width:768px){
    .snsai-container{width:min(100% - 28px,1200px);}
    .snsai-pc-only{display:none;}
    .snsai-section-head{margin-bottom:46px;}
    .snsai-section-head h2,
    .snsai-personal h2,
    .snsai-token h2,
    .snsai-set-benefit h2,
    .snsai-cta-final h2,
    .snsai-cta-mid h2{font-size:27px;line-height:1.45;}
    .snsai-section-head > p{font-size:13px;line-height:1.9;}
    .snsai-btn{width:100%;}
    .snsai-btn-wide{min-width:0;}
}

/* =========================================================
   01. HERO / ファーストビュー
   Version 1 のデザインを復活
========================================================= */
.snsai-hero{background:var(--snsai-blue);padding:20px;}
.snsai-hero-shell{
    min-height:790px;
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:
        radial-gradient(circle at 76% 42%,rgba(90,209,255,.16) 0 13%,transparent 31%),
        radial-gradient(circle at 90% 4%,rgba(255,141,43,.09),transparent 25%),
        #fff;
}
.snsai-grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.28;
    background-image:
        linear-gradient(rgba(90,209,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(90,209,255,.08) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to left,#000 0%,transparent 62%);
}
.snsai-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;}
.snsai-orb-01{width:440px;height:440px;right:-210px;top:-180px;background:#eefaff;}
.snsai-orb-02{width:220px;height:220px;left:-120px;bottom:-100px;background:#fff4e7;}
.snsai-hero-inner{
    min-height:790px;
    display:grid;
    grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);
    align-items:center;
    gap:50px;
    position:relative;
    z-index:2;
    padding:118px 0 120px;
}
.snsai-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 15px;
    border-radius:999px;
    background:var(--snsai-blue-soft);
    color:#239fc9;
    font-size:12px;
    letter-spacing:.16em;
    font-weight:900;
}
.snsai-eyebrow-dot{width:9px;height:9px;border-radius:50%;background:var(--snsai-orange);box-shadow:0 0 0 6px rgba(255,141,43,.13);}
.snsai-brandline{margin:28px 0 8px;font-size:20px;letter-spacing:.04em;font-weight:800;}
.snsai-brandline strong{color:var(--snsai-blue-deep);font-size:1.15em;}
.snsai-hero-copy h1{
    margin:0;
    font-size:clamp(50px,5.2vw,62px);
    line-height:1.12;
    letter-spacing:-.045em;
    font-weight:900;
}
.snsai-hero-copy h1 span{position:relative;display:inline-block;color:var(--snsai-orange);z-index:1;}
.snsai-hero-copy h1 span::after{
    content:"";
    position:absolute;
    left:-7px;
    right:-7px;
    bottom:7px;
    height:18px;
    z-index:-1;
    border-radius:999px;
    background:var(--snsai-yellow);
    opacity:.82;
}
.snsai-hero-lead{margin:34px 0 0;color:#59636b;font-size:17px;line-height:2;font-weight:700;}
.snsai-hero-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;}
.snsai-hero-summary span{
    padding:8px 13px;
    border-radius:10px;
    border:2px solid #e8f0f4;
    background:#fff;
    font-size:13px;
    font-weight:900;
    box-shadow:0 6px 18px rgba(44,74,87,.05);
}
.snsai-hero-summary i{font-style:normal;color:var(--snsai-blue-deep);font-size:19px;}
.snsai-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:38px;}
.snsai-supported{display:flex;align-items:center;gap:12px;margin:27px 0 0;color:#7c858b;font-size:12px;font-weight:800;}
.snsai-supported span{padding:5px 9px;border-radius:7px;background:#f1f6f8;color:#59656b;}
.snsai-hero-visual{position:relative;min-height:570px;}
.snsai-robot-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.snsai-robot-stage::before{
    content:"";
    position:absolute;
    width:470px;
    height:470px;
    border-radius:50%;
    background:radial-gradient(circle,#f4fdff 0 52%,#ddf6ff 53% 64%,transparent 65%);
    box-shadow:0 0 0 18px rgba(90,209,255,.06),0 35px 70px rgba(90,209,255,.14);
}
.snsai-robot{
    width:min(590px,112%);
    position:relative;
    z-index:4;
    transform:translateX(10px);
    filter:drop-shadow(0 30px 25px rgba(40,67,78,.13));
    animation:snsaiFloat 4.6s ease-in-out infinite;
}
@keyframes snsaiFloat{0%,100%{transform:translate(10px,0);}50%{transform:translate(10px,-11px);}}
.snsai-ring{position:absolute;border-radius:50%;border:2px dashed rgba(45,189,233,.25);z-index:1;animation:snsaiSpin 34s linear infinite;}
.snsai-ring-01{width:520px;height:520px;}
.snsai-ring-02{width:610px;height:610px;border-style:solid;border-color:rgba(255,141,43,.09);animation-direction:reverse;}
@keyframes snsaiSpin{to{transform:rotate(360deg);}}
.snsai-spark{position:absolute;z-index:5;color:var(--snsai-blue-deep);font-size:28px;animation:snsaiSpark 2.6s ease-in-out infinite;}
.snsai-spark-01{top:9%;left:12%;}
.snsai-spark-02{top:16%;right:7%;animation-delay:.7s;color:var(--snsai-orange);}
.snsai-spark-03{bottom:14%;right:4%;animation-delay:1.3s;}
@keyframes snsaiSpark{0%,100%{transform:scale(.8) rotate(0);opacity:.55;}50%{transform:scale(1.18) rotate(12deg);opacity:1;}}
.snsai-ai-status{
    position:absolute;
    right:8%;
    top:5%;
    z-index:7;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 10px 28px rgba(43,85,103,.12);
    color:#596269;
    font-size:10px;
    letter-spacing:.14em;
    font-weight:900;
}
.snsai-ai-status span{width:8px;height:8px;border-radius:50%;background:#53d29f;box-shadow:0 0 0 5px rgba(83,210,159,.13);}
.snsai-floating-card{
    position:absolute;
    z-index:8;
    min-width:170px;
    padding:13px 16px;
    border:2px solid #edf3f6;
    border-radius:16px;
    background:rgba(255,255,255,.94);
    box-shadow:0 16px 36px rgba(42,75,89,.11);
    backdrop-filter:blur(8px);
}
.snsai-floating-card small{display:block;margin-bottom:4px;color:#9aa3a8;font-size:9px;letter-spacing:.14em;}
.snsai-floating-card strong{display:block;font-size:13px;}
.snsai-floating-card-left{left:-3%;bottom:15%;transform:rotate(-3deg);}
.snsai-floating-card-right{right:-4%;bottom:8%;transform:rotate(3deg);}
.snsai-scroll{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#9ba3a8 !important;
}
.snsai-scroll span{font-size:9px;letter-spacing:.24em;}
.snsai-scroll i{width:1px;height:38px;position:relative;overflow:hidden;background:#d7e2e7;}
.snsai-scroll i::after{
    content:"";
    position:absolute;
    left:0;
    top:-20px;
    width:1px;
    height:18px;
    background:var(--snsai-blue-deep);
    animation:snsaiScroll 1.8s ease-in-out infinite;
}
@keyframes snsaiScroll{to{transform:translateY(58px);}}

/* ---------- HERO responsive ---------- */
@media (max-width:1100px){
    .snsai-hero-inner{grid-template-columns:1fr 450px;gap:20px;}
    .snsai-hero-copy h1{font-size:54px;}
    .snsai-floating-card-left{left:-1%;}
    .snsai-floating-card-right{right:-1%;}
}
@media (max-width:900px){
    .snsai-hero-shell,.snsai-hero-inner{min-height:auto;}
    .snsai-hero-inner{grid-template-columns:1fr;padding:115px 0 90px;}
    .snsai-hero-copy{max-width:690px;}
    .snsai-hero-visual{min-height:560px;margin-top:5px;}
    .snsai-robot{width:min(600px,88vw);}
    .snsai-scroll{display:none;}
}
@media (max-width:768px){
    .snsai-hero{padding:14px;}
    .snsai-hero-shell{border-radius:24px;}
    .snsai-hero-inner{width:calc(100% - 34px);padding:102px 0 62px;gap:24px;}
    .snsai-eyebrow{padding:8px 12px;font-size:10px;}
    .snsai-brandline{margin-top:22px;font-size:17px;}
    .snsai-hero-copy h1{font-size:clamp(39px,11vw,56px);line-height:1.17;}
    .snsai-hero-copy h1 span::after{height:13px;bottom:5px;}
    .snsai-hero-lead{margin-top:24px;font-size:14px;line-height:1.9;}
    .snsai-hero-summary{gap:7px;margin-top:22px;}
    .snsai-hero-summary span{font-size:10px;padding:7px 9px;}
    .snsai-hero-summary i{font-size:14px;}
    .snsai-hero-actions{flex-direction:column;align-items:stretch;margin-top:28px;}
    .snsai-supported{flex-wrap:wrap;font-size:10px;}
    .snsai-hero-visual{min-height:390px;margin-top:10px;}
    .snsai-robot-stage::before{width:330px;height:330px;}
    .snsai-ring-01{width:360px;height:360px;}
    .snsai-ring-02{width:410px;height:410px;}
    .snsai-robot{width:390px;max-width:112%;}
    .snsai-ai-status{top:0;right:0;font-size:8px;}
    .snsai-floating-card{min-width:130px;padding:10px 12px;}
    .snsai-floating-card strong{font-size:10px;}
    .snsai-floating-card-left{left:-4%;bottom:10%;}
    .snsai-floating-card-right{right:-4%;bottom:2%;}
}
@media (max-width:500px){
    .snsai-hero-inner{padding-top:92px;}
    .snsai-hero-copy h1{font-size:35px;}
    .snsai-hero-summary i{display:none;}
    .snsai-hero-summary span{flex:1 1 calc(50% - 7px);text-align:center;}
    .snsai-hero-visual{min-height:340px;}
    .snsai-robot-stage::before{width:285px;height:285px;}
    .snsai-ring-01{width:305px;height:305px;}
    .snsai-ring-02{width:350px;height:350px;}
    .snsai-floating-card{display:none;}
}
/* =========================================================
   02. INTRO / SNS運用をひとつに
========================================================= */

.snsai-intro{
    padding:140px 0;
    background:#fff;
}


/* ---------- HEAD ---------- */

.snsai-intro-head{
    max-width:880px;
    margin:0 auto 64px;
}

.snsai-intro-catch{
    margin:20px 0 10px;
    color:var(--snsai-orange);
    font-size:16px;
    font-weight:900;
    letter-spacing:.04em;
}

.snsai-intro-head h2{
    margin-top:0;
}

.snsai-intro-head h2 span{
    position:relative;
    display:inline-block;
    color:var(--snsai-orange);
}

.snsai-intro-lead{
    margin:28px auto 0;
    max-width:760px;
    color:var(--snsai-muted);
    font-size:15px;
    line-height:2.05;
    font-weight:700;
}

.snsai-intro-lead strong{
    color:#25343c;
    font-weight:900;
}


/* ---------- CARDS ---------- */

.snsai-card-grid{
    display:grid;
    gap:22px;
}

.snsai-card-grid.three{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.snsai-soft-card{
    position:relative;
    overflow:hidden;
    padding:32px 28px 28px;
    border:2px solid #edf3f6;
    border-radius:28px;
    background:#fff;
    box-shadow:0 16px 34px rgba(42,82,103,.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.snsai-soft-card:hover{
    transform:translateY(-6px);
    border-color:#ffe0c2;
    box-shadow:0 24px 50px rgba(42,82,103,.11);
}

.snsai-soft-card::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    right:-70px;
    top:-70px;
    background:#f2fbff;
}

.snsai-no{
    position:relative;
    z-index:1;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--snsai-orange-soft);
    color:var(--snsai-orange);
    font-size:12px;
    font-weight:900;
}

.snsai-card-label{
    margin:22px 0 0 !important;
    color:#9daab0 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.16em;
}

.snsai-soft-card h3{
    margin:11px 0 0;
    color:#26383f;
    font-size:23px;
    line-height:1.55;
    font-weight:900;
    letter-spacing:-.02em;
}

.snsai-soft-card h3 span{
    color:var(--snsai-orange);
}

.snsai-soft-card > p:not(.snsai-card-label){
    margin:17px 0 0;
    color:var(--snsai-muted);
    font-size:13px;
    line-height:1.95;
    font-weight:700;
}

.snsai-card-point{
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid #edf1f3;
    color:#40535c;
    font-size:12px;
    line-height:1.6;
    font-weight:900;
}

.snsai-card-point::before{
    content:"✓";
    display:inline-grid;
    place-items:center;
    width:22px;
    height:22px;
    margin-right:8px;
    border-radius:50%;
    background:var(--snsai-orange-soft);
    color:var(--snsai-orange);
    font-size:11px;
}


/* ---------- FLOW ---------- */

.snsai-intro-bottom{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:13px;
    margin-top:52px;
    padding:24px 28px;
    border-radius:24px;
    background:#f8fbfc;
}

.snsai-intro-bottom span{
    color:#819098;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}

.snsai-intro-bottom i{
    width:26px;
    height:1px;
    background:#d9e2e6;
}

.snsai-intro-bottom strong{
    margin-left:16px;
    color:#26383f;
    font-size:14px;
    font-weight:900;
}


/* ---------- INTRO responsive ---------- */

@media (max-width:900px){

    .snsai-card-grid.three{
        grid-template-columns:1fr;
    }

    .snsai-soft-card{
        max-width:620px;
        width:100%;
        margin:0 auto;
    }

}


@media (max-width:768px){

    .snsai-intro{
        padding:50px 0;
    }

    .snsai-intro-head{
        margin-bottom:44px;
    }

    .snsai-intro-catch{
        margin-top:16px;
        font-size:13px;
    }

    .snsai-intro-lead{
        margin-top:22px;
        font-size:13px;
        line-height:1.9;
    }

    .snsai-intro-lead br{
        display:none;
    }

    .snsai-soft-card{
        padding:28px 24px 24px;
        border-radius:23px;
    }

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

    .snsai-intro-bottom{
        margin-top:38px;
        padding:20px 18px;
        gap:9px;
    }

    .snsai-intro-bottom i{
        width:14px;
    }

    .snsai-intro-bottom strong{
        width:100%;
        margin:7px 0 0;
        text-align:center;
        font-size:13px;
    }

}
/* =========================================================
   03. PERSONAL AI / あなた専用のSNS運用
========================================================= */
/* =========================================================
   PERSONAL SNS AI
========================================================= */

.snsai-personal{
    position:relative;
    overflow:hidden;
    padding:140px 0 160px;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(212,244,255,.72) 0,
            rgba(212,244,255,.72) 240px,
            transparent 241px
        ),
        #f7fcff;
}


/* background accent */

.snsai-personal::before{
    content:"";
    position:absolute;

    right:-180px;
    bottom:-220px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,184,111,.12),
            transparent 70%
        );

    pointer-events:none;
}


/* =========================================================
   INNER
========================================================= */

.snsai-personal-inner{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
}


/* =========================================================
   COPY
========================================================= */

.snsai-personal-copy{
    width:100%;
    max-width:1000px;

    text-align:center;
}


.snsai-personal-copy .snsai-section-label{
    display:inline-block;
}


.snsai-personal-copy .snsai-section-label::after{
    left:50%;
    transform:translateX(-50%);
}


/* =========================================================
   TITLE
========================================================= */

.snsai-personal-title{
    margin:28px 0 0;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:8px;

    line-height:1.28;
    letter-spacing:-.035em;
}


.snsai-personal-title .line1,
.snsai-personal-title .line2{
    display:block;

    color:#2d343a;

    font-size:54px;
    font-weight:900;
}


.snsai-personal-title .line2 span{
    color:var(--snsai-orange);
}


/* =========================================================
   LEAD
========================================================= */

.snsai-personal-lead{
    max-width:760px;

    margin:30px auto 0;

    color:var(--snsai-muted);

    font-size:15px;
    font-weight:700;

    line-height:2.05;
}


/* =========================================================
   POINTS
========================================================= */

.snsai-personal-points{
    width:100%;
    max-width:940px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;

    margin:54px auto 0;
}


.snsai-personal-point{
    position:relative;

    display:flex;
    align-items:flex-start;

    gap:16px;

    min-height:120px;

    padding:24px 22px;

    text-align:left;

    background:#fff;

    border:
        1px solid #e1edf2;

    border-radius:22px;

    box-shadow:
        0 14px 35px
        rgba(45,79,93,.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.snsai-personal-point:hover{
    transform:translateY(-4px);

    border-color:#d3eaf3;

    box-shadow:
        0 20px 42px
        rgba(45,79,93,.08);
}


.snsai-point-number{
    width:46px;
    height:46px;

    flex:0 0 46px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:
        var(--snsai-blue-soft);

    color:#2faed7;

    font-size:12px;
    font-weight:900;
}


.snsai-personal-point:nth-child(3)
.snsai-point-number{
    background:
        var(--snsai-orange-soft);

    color:
        var(--snsai-orange);
}


.snsai-point-content{
    padding-top:2px;
}


.snsai-point-content strong{
    display:block;

    margin-bottom:7px;

    color:#344047;

    font-size:16px;
    font-weight:900;

    line-height:1.5;
}


.snsai-point-content p{
    margin:0;

    color:#899399;

    font-size:12px;

    line-height:1.75;
}


/* =========================================================
   VISUAL
========================================================= */

.snsai-personal-visual{
    position:relative;

    width:100%;
    max-width:1000px;

    min-height:620px;

    margin-top:76px;

    overflow:hidden;

    border:
        2px solid #e4f0f4;

    border-radius:40px;

    background:
        linear-gradient(
            145deg,
            #edfaff 0%,
            #ffffff 52%,
            #fff7ee 100%
        );

    box-shadow:
        0 32px 80px
        rgba(53,87,100,.09);
}


/* inside border */

.snsai-personal-visual::after{
    content:"";

    position:absolute;

    inset:28px;

    z-index:1;

    border:
        1px dashed
        rgba(45,189,233,.18);

    border-radius:30px;

    pointer-events:none;
}


/* =========================================================
   GRID
========================================================= */

.snsai-visual-grid{
    position:absolute;

    inset:0;

    z-index:0;

    opacity:.22;

    background-image:

        linear-gradient(
            rgba(72,180,215,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(72,180,215,.08) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );
}


/* =========================================================
   LIGHT
========================================================= */

.snsai-visual-light{
    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    pointer-events:none;
}


.snsai-visual-light-blue{
    width:320px;
    height:320px;

    left:100px;
    top:120px;

    background:
        rgba(55,193,234,.12);
}


.snsai-visual-light-orange{
    width:300px;
    height:300px;

    right:80px;
    bottom:70px;

    background:
        rgba(255,150,49,.09);
}


/* =========================================================
   INPUT CARD
========================================================= */

.snsai-input-card{
    position:absolute;

    left:62px;

    z-index:5;

    width:260px;

    display:flex;
    align-items:center;

    gap:15px;

    padding:19px;

    border-radius:21px;

    background:
        rgba(255,255,255,.96);

    border:
        2px solid #e7eff3;

    box-shadow:
        0 16px 34px
        rgba(45,79,93,.07);
}


.snsai-input-web{
    top:118px;
}


.snsai-input-social{
    bottom:118px;
}


/* =========================================================
   ICON
========================================================= */

.snsai-input-icon{
    width:54px;
    height:54px;

    flex:0 0 54px;

    display:grid;
    place-items:center;

    border-radius:16px;

    background:
        var(--snsai-blue-soft);

    color:#24a8d2;

    font-size:20px;
    font-weight:900;
}


.snsai-input-social
.snsai-input-icon{
    background:
        var(--snsai-orange-soft);

    color:
        var(--snsai-orange);
}


/* =========================================================
   INPUT TEXT
========================================================= */

.snsai-input-text small,
.snsai-input-text strong,
.snsai-input-text span{
    display:block;
}


.snsai-input-text small{
    margin-bottom:4px;

    color:#a0a8ad;

    font-size:9px;
    font-weight:800;

    letter-spacing:.14em;
}


.snsai-input-text strong{
    color:#354047;

    font-size:16px;
    font-weight:900;

    line-height:1.4;
}


.snsai-input-text span{
    margin-top:5px;

    color:#939da2;

    font-size:11px;

    line-height:1.5;
}


/* =========================================================
   DATA STREAM
========================================================= */

.snsai-stream{
    position:absolute;

    left:305px;

    z-index:3;

    width:255px;
    height:40px;

    transform-origin:left center;
}


.snsai-stream-web{
    top:168px;

    transform:
        rotate(11deg);
}


.snsai-stream-social{
    bottom:168px;

    transform:
        rotate(-11deg);
}


/* line */

.snsai-stream-line{
    position:absolute;

    left:0;
    top:50%;

    width:100%;
    height:2px;

    transform:
        translateY(-50%);

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(52,192,232,.12),
            rgba(52,192,232,.65),
            rgba(52,192,232,.08)
        );
}


.snsai-stream-line::after{
    content:"";

    position:absolute;

    left:-50%;
    top:0;

    width:45%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #fff,
            transparent
        );

    animation:
        snsaiStreamLight
        2.3s linear infinite;
}


/* =========================================================
   DATA DOT
========================================================= */

.snsai-data-dot{
    position:absolute;

    left:0;
    top:50%;

    width:9px;
    height:9px;

    margin-top:-4.5px;

    border-radius:50%;

    background:
        var(--snsai-blue);

    box-shadow:
        0 0 14px
        rgba(50,190,231,.55);

    opacity:0;

    animation:
        snsaiDataMove
        2.6s linear infinite;
}


.snsai-stream-social
.snsai-data-dot{
    background:
        var(--snsai-orange);

    box-shadow:
        0 0 14px
        rgba(255,145,31,.40);
}


.snsai-data-dot.dot-02{
    animation-delay:.86s;
}


.snsai-data-dot.dot-03{
    animation-delay:1.72s;
}


/* =========================================================
   AI CORE
========================================================= */

.snsai-ai-core{
    position:absolute;

    right:64px;
    top:50%;

    z-index:4;

    width:420px;
    height:420px;

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

    transform:
        translateY(-50%);
}


/* =========================================================
   AI GLOW
========================================================= */

.snsai-ai-glow{
    position:absolute;

    inset:0;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(90,211,247,.22) 0%,
            rgba(90,211,247,.11) 34%,
            rgba(90,211,247,.03) 58%,
            transparent 72%
        );

    animation:
        snsaiPulse
        3.3s ease-in-out infinite;
}


/* =========================================================
   RINGS
========================================================= */

.snsai-ai-ring{
    position:absolute;

    border-radius:50%;

    border:
        1px solid
        rgba(59,191,230,.20);
}


.snsai-ai-ring-01{
    inset:24px;

    border-style:dashed;

    animation:
        snsaiRotate
        18s linear infinite;
}


.snsai-ai-ring-02{
    inset:61px;

    border-color:
        rgba(255,157,62,.16);

    animation:
        snsaiRotateReverse
        13s linear infinite;
}


/* =========================================================
   PARTICLE
========================================================= */

.snsai-ai-particle{
    position:absolute;

    width:8px;
    height:8px;

    z-index:2;

    border-radius:50%;

    background:#5fd4f5;

    box-shadow:
        0 0 14px
        rgba(95,212,245,.60);

    animation:
        snsaiParticleFloat
        3s ease-in-out infinite;
}


.particle-01{
    left:58px;
    top:95px;
}


.particle-02{
    right:68px;
    top:120px;

    animation-delay:.5s;
}


.particle-03{
    left:62px;
    bottom:95px;

    animation-delay:1s;
}


.particle-04{
    right:72px;
    bottom:94px;

    background:
        var(--snsai-orange);

    box-shadow:
        0 0 14px
        rgba(255,151,51,.42);

    animation-delay:1.4s;
}


.particle-05{
    top:50px;
    left:50%;

    background:
        var(--snsai-orange);

    animation-delay:.9s;
}


/* =========================================================
   MACHINE
========================================================= */

.snsai-machine-image{
    position:relative;

    z-index:4;

    width:285px;

    filter:
        drop-shadow(
            0 24px 38px
            rgba(40,83,101,.18)
        );
}


.snsai-machine-image img{
    display:block;

    width:100%;
    height:auto;
}


/* =========================================================
   AI TAG
========================================================= */

.snsai-ai-tag{
    position:absolute;

    z-index:6;

    padding:
        10px 16px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.95);

    border:
        1px solid #e2eef3;

    box-shadow:
        0 12px 28px
        rgba(41,73,85,.08);

    color:#3f525c;

    font-size:12px;
    font-weight:900;

    backdrop-filter:
        blur(8px);
}


.tag-understand{
    left:24px;
    top:90px;

    animation:
        snsaiFloatTag
        3.4s ease-in-out infinite;
}


.tag-create{
    right:10px;
    top:155px;

    color:
        var(--snsai-orange);

    animation:
        snsaiFloatTag
        3.7s ease-in-out infinite .5s;
}


.tag-improve{
    left:63px;
    bottom:68px;

    animation:
        snsaiFloatTag
        3.5s ease-in-out infinite .9s;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes snsaiStreamLight{

    0%{
        left:-50%;
    }

    100%{
        left:120%;
    }

}


@keyframes snsaiDataMove{

    0%{
        left:0;

        opacity:0;

        transform:
            scale(.55);
    }

    12%{
        opacity:1;
    }

    78%{
        opacity:1;
    }

    100%{
        left:100%;

        opacity:0;

        transform:
            scale(1.15);
    }

}


@keyframes snsaiPulse{

    0%,
    100%{
        transform:
            scale(1);

        opacity:.86;
    }

    50%{
        transform:
            scale(1.065);

        opacity:1;
    }

}


@keyframes snsaiRotate{

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }

}


@keyframes snsaiRotateReverse{

    from{
        transform:
            rotate(360deg);
    }

    to{
        transform:
            rotate(0deg);
    }

}


@keyframes snsaiFloatTag{

    0%,
    100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-8px);
    }

}


@keyframes snsaiParticleFloat{

    0%,
    100%{
        transform:
            translateY(0)
            scale(1);

        opacity:.55;
    }

    50%{
        transform:
            translateY(-12px)
            scale(1.25);

        opacity:1;
    }

}


/* =========================================================
   RESPONSIVE 1100
========================================================= */

@media (max-width:1100px){

    .snsai-personal-title .line1,
    .snsai-personal-title .line2{
        font-size:47px;
    }


    .snsai-input-card{
        left:46px;

        width:240px;
    }


    .snsai-stream{
        left:280px;

        width:210px;
    }


    .snsai-ai-core{
        right:36px;

        width:390px;
        height:390px;
    }


    .snsai-machine-image{
        width:265px;
    }

}


/* =========================================================
   RESPONSIVE 900
========================================================= */

@media (max-width:900px){

    .snsai-personal{
        padding:
            110px 0 120px;
    }


    .snsai-personal-title
    .line1,
    .snsai-personal-title
    .line2{
        font-size:41px;
    }


    .snsai-personal-points{
        grid-template-columns:1fr;

        max-width:680px;

        gap:12px;
    }


    .snsai-personal-point{
        min-height:auto;

        align-items:center;

        padding:
            18px 20px;
    }


    .snsai-personal-visual{
        max-width:720px;

        min-height:820px;

        margin-top:60px;
    }


    .snsai-input-card{
        left:50%;

        width:290px;

        transform:
            translateX(-50%);
    }


    .snsai-input-web{
        top:56px;
    }


    .snsai-input-social{
        top:164px;
        bottom:auto;
    }


    .snsai-stream{
        left:50%;

        width:2px;
        height:100px;

        transform:
            translateX(-50%);
    }


    .snsai-stream-web{
        top:110px;
    }


    .snsai-stream-social{
        top:250px;
        bottom:auto;
    }


    .snsai-stream-line{
        top:0;

        width:2px;
        height:100%;

        transform:none;

        background:
            linear-gradient(
                180deg,
                rgba(52,192,232,.10),
                rgba(52,192,232,.75),
                rgba(52,192,232,.05)
            );
    }


    .snsai-stream-line::after{
        display:none;
    }


    .snsai-data-dot{
        left:50%;
        top:0;

        margin:
            0 0 0 -4.5px;

        animation:
            snsaiDataMoveVertical
            2.6s linear infinite;
    }


    .snsai-ai-core{
        right:auto;
        left:50%;

        top:575px;

        width:390px;
        height:390px;

        transform:
            translate(-50%,-50%);
    }

}


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

@media (max-width:768px){

    .snsai-personal{
        padding:
            50px 0 30px;
    }


    .snsai-personal-copy{
        text-align:left;
    }


    .snsai-personal-copy
    .snsai-section-label::after{
        left:0;

        transform:none;
    }


    .snsai-personal-title{
        align-items:flex-start;

        margin-top:22px;
    }


    .snsai-personal-title
    .line1,
    .snsai-personal-title
    .line2{
        font-size:34px;

        line-height:1.38;
    }


    .snsai-personal-lead{
        margin:
            24px 0 0;

        font-size:13px;

        line-height:1.95;
    }


    .snsai-personal-points{
        margin-top:34px;
    }


    .snsai-personal-visual{
        min-height:760px;

        margin-top:48px;

        border-radius:30px;
    }


    .snsai-personal-visual::after{
        inset:16px;

        border-radius:23px;
    }


    .snsai-ai-core{
        top:545px;

        width:330px;
        height:330px;
    }


    .snsai-machine-image{
        width:225px;
    }


    .tag-understand{
        left:10px;
        top:64px;
    }


    .tag-create{
        right:0;
        top:125px;
    }


    .tag-improve{
        left:28px;
        bottom:46px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:500px){

    .snsai-personal-title
    .line1,
    .snsai-personal-title
    .line2{
        font-size:28px;
    }


    .snsai-personal-point{
        gap:13px;

        padding:
            15px 14px;

        border-radius:17px;
    }


    .snsai-point-number{
        width:42px;
        height:42px;

        flex-basis:42px;
    }


    .snsai-point-content strong{
        font-size:14px;
    }


    .snsai-point-content p{
        font-size:11px;
    }


    .snsai-personal-visual{
        min-height:600px;

        border-radius:26px;
    }


    .snsai-input-card{
        width:
            calc(100% - 58px);

        padding:
            15px;

        border-radius:17px;
    }


    .snsai-input-web{
        top:38px;
    }


    .snsai-input-social{
        top:137px;
    }


    .snsai-input-icon{
        width:46px;
        height:46px;

        flex-basis:46px;

        border-radius:14px;
    }


    .snsai-input-text strong{
        font-size:14px;
    }


    .snsai-input-text span{
        font-size:10px;
    }


    .snsai-stream-web{
        top:94px;
    }


    .snsai-stream-social{
        top:219px;
    }


    .snsai-ai-core{
        top:405px;

        width:290px;
        height:290px;
    }


    .snsai-machine-image{
        width:195px;
    }


    .snsai-ai-tag{
        padding:
            8px 12px;

        font-size:10px;
    }


    .tag-understand{
        left:3px;
        top:53px;
    }


    .tag-create{
        right:-2px;
        top:104px;
    }


    .tag-improve{
        left:22px;
        bottom:35px;
    }


    .snsai-ai-ring-01{
        inset:18px;
    }


    .snsai-ai-ring-02{
        inset:49px;
    }
.snsai-visual-light-blue{
    width:220px;
    height:220px;

    left:100px;
    top:120px;

    background:
        rgba(55,193,234,.12);
}
}


/* =========================================================
   MOBILE DATA ANIMATION
========================================================= */

@keyframes snsaiDataMoveVertical{

    0%{
        top:0;

        opacity:0;

        transform:
            scale(.55);
    }

    12%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        top:100%;

        opacity:0;

        transform:
            scale(1.15);
    }

}

/* =========================================================
   04. FEATURES / 5つの機能
========================================================= */
.snsai-features{
    padding:100px 0 50px;
    background:#fff;
}

.snsai-feature-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
}

.snsai-feature-card{
    position:relative;
    min-height:360px;
    padding:34px;
    border:2px solid #edf2f4;
    border-radius:30px;
    background:#fff;
    overflow:hidden;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.snsai-feature-card:hover{
    transform:translateY(-7px);
    border-color:#d8edf5;
    box-shadow:var(--snsai-shadow);
}

.snsai-feature-card::after{
    content:"";
    position:absolute;
    right:-55px;
    top:-55px;
    width:165px;
    height:165px;
    border-radius:50%;
    opacity:.75;
}

.snsai-feature-blue::after{ background:#e4f8ff; }
.snsai-feature-orange::after{ background:#fff0e1; }
.snsai-feature-purple::after{ background:#efedff; }
.snsai-feature-green::after{ background:#e8fbf5; }
.snsai-feature-yellow::after{ background:#fff8d9; }

.snsai-feature-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    z-index:2;
}

.snsai-feature-no{
    color:#a7b0b5;
    font-size:13px;
    letter-spacing:.18em;
    font-weight:900;
}

.snsai-feature-icon{
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:#f5fbfd;
}

.snsai-feature-icon svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:#2baed8;
    stroke-width:2.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.snsai-feature-orange .snsai-feature-icon svg{ stroke:#ff8d2b; }
.snsai-feature-purple .snsai-feature-icon svg{ stroke:#8e7dff; }
.snsai-feature-green .snsai-feature-icon svg{ stroke:#43bb90; }
.snsai-feature-yellow .snsai-feature-icon svg{ stroke:#dca917; }

.snsai-feature-card > small,
.snsai-feature-wide-copy small{
    display:block;
    margin-top:28px;
    color:#9ca5aa;
    font-size:9px;
    letter-spacing:.15em;
    font-weight:900;
}

.snsai-feature-card h3{
    margin:8px 0 16px;
    font-size:29px;
}

.snsai-feature-card > p,
.snsai-feature-wide-copy p{
    max-width:510px;
    margin:0;
    color:var(--snsai-muted);
    font-size:13px;
    line-height:1.95;
    font-weight:700;
}

.snsai-feature-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:24px;
}

.snsai-feature-tags span{
    padding:7px 10px;
    border-radius:8px;
    background:#f3f7f9;
    color:#647077;
    font-size:10px;
    font-weight:900;
}

.snsai-feature-wide{
    grid-column:1 / -1;
    min-height:auto;
    display:grid;
    grid-template-columns:100px 1fr;
    gap:0 6px;
    align-items:start;
}

.snsai-feature-wide .snsai-feature-top{
    display:block;
    grid-row:1 / span 2;
}

.snsai-feature-wide .snsai-feature-no{
    display:block;
    margin-bottom:20px;
}

.snsai-feature-wide-copy{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:30px;
    align-items:end;
}

.snsai-feature-wide-copy small{
    margin-top:0;
}

.snsai-feature-wide-copy h3{
    margin:8px 0 0;
}

.snsai-feature-wide .snsai-feature-tags{
    grid-column:2;
}

/* ---------- FEATURES responsive ---------- */
@media (max-width:900px){
    .snsai-feature-grid{
        grid-template-columns:1fr;
    }

    .snsai-feature-card,
    .snsai-feature-wide{
        grid-column:auto;
        min-height:auto;
        display:block;
        padding:28px 25px;
        border-radius:24px;
    }

    .snsai-feature-card h3{
        font-size:25px;
    }

    .snsai-feature-wide .snsai-feature-top{
        display:flex;
    }

    .snsai-feature-wide .snsai-feature-no{
        margin-bottom:0;
    }

    .snsai-feature-wide-copy{
        display:block;
    }

    .snsai-feature-wide-copy small{
        margin-top:28px;
    }

    .snsai-feature-wide .snsai-feature-tags{
        grid-column:auto;
    }
}
@media (max-width:768px){
    .snsai-features{
        padding:60px 0 0px;
    }
    .snsai-feature-card > small,
.snsai-feature-wide-copy small{
    display:block;
    margin-top:8px;
    color:#9ca5aa;
    font-size:9px;
    letter-spacing:.15em;
    font-weight:900;
}
}

/* =========================================================
   05. MID CTA / 中間の軽いCTA
========================================================= */
.snsai-cta-mid{padding:0 0 110px;background:#fff;}
.snsai-cta-mid-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:38px 42px;
    border-radius:30px;
    background:#fff8ef;
    border:2px solid #ffe1c1;
}
.snsai-cta-mid-box h2{font-size:30px;line-height:1.45;}
.snsai-cta-mid-box p{margin:14px 0 0;color:var(--snsai-muted);font-size:14px;line-height:1.9;font-weight:700;}
.snsai-cta-label{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#fff;color:var(--snsai-orange);font-size:10px;font-weight:900;letter-spacing:.16em;}

/* ---------- MID CTA responsive ---------- */
@media (max-width:900px){.snsai-cta-mid-box{flex-direction:column;align-items:flex-start;}}
@media (max-width:768px){
    .snsai-cta-mid{padding-bottom:90px;}
    .snsai-cta-mid-box{padding:28px 24px;border-radius:24px;}
    .snsai-cta-mid-box h2{font-size:27px;}
}

/* =========================================================
   06. WEBMO TOKEN / トークン説明
========================================================= */
/* =========================================================
   WEBMO TOKEN
========================================================= */

/* =========================================================
   WEBMO SNS AI
   TOKEN SECTION
========================================================= */

.snsai-token {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.snsai-token .snsai-container {
    position: relative;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.snsai-token-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.snsai-token-head h2 {
    margin: 10px 0 12px;

    color: #192332;

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.22;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.snsai-token-head h2 span {
    color: #f28632;
}

.snsai-token-head > p {
    margin: 0;

    color: #626d7a;

    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
}


/* =========================================================
   TOKEN USAGE AREA
========================================================= */

.snsai-token-consumption {
    max-width: 980px;
    margin: 0 auto;
}


/* =========================================================
   TOKEN USAGE HEADER
========================================================= */

.snsai-token-block-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 20px;
    padding-bottom: 15px;

    border-bottom: 1px solid #dfe4e9;
}

.snsai-token-mini-label {
    display: block;

    margin-bottom: 6px;

    color: #ef822c;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.snsai-token-block-head h3 {
    margin: 0;

    color: #182231;

    font-size: 26px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.snsai-token-block-head > p {
    margin: 0 0 3px;

    color: #858e99;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}


/* =========================================================
   TABLE SECTION
========================================================= */

.snsai-token-table-section {
    margin-top: 20px;
}

.snsai-token-table-section + .snsai-token-table-section {
    margin-top: 32px;
}


/* =========================================================
   TABLE TITLE
========================================================= */

.snsai-token-table-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;
}

.snsai-token-table-title-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

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

    border: 1px solid #ffd9ba;
    border-radius: 9px;

    background: #fff4e9;

    color: #ed812d;

    font-size: 11px;
    line-height: 1;
    font-weight: 900;
}

.snsai-token-table-title-icon.is-image {
    font-size: 16px;
}

.snsai-token-table-title > strong {
    color: #202936;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
}


/* =========================================================
   TABLE COMMON
========================================================= */

.snsai-token-table-wrap {
    overflow: hidden;

    border: 1px solid #dde3e9;
    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 7px 20px rgba(32, 47, 64, 0.035);
}

.snsai-token-table {
    width: 100%;

    border-collapse: collapse;
    table-layout: fixed;
}

.snsai-token-table th,
.snsai-token-table td {
    text-align: left;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.snsai-token-table thead {
    background: #f7f9fb;
}

.snsai-token-table thead th {
    height: 42px;
    padding: 0 20px;

    border-bottom: 1px solid #dde3e9;

    color: #7c8794;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}


/* =========================================================
   TABLE BODY
========================================================= */

.snsai-token-table tbody td {
    height: 61px;
    padding: 10px 20px;

    border-bottom: 1px solid #e7ebef;

    vertical-align: middle;
}

.snsai-token-table tbody tr:last-child td {
    border-bottom: 0;
}

.snsai-token-table tbody tr {
    transition: background-color 0.18s ease;
}

.snsai-token-table tbody tr:hover {
    background: #fcfdfe;
}


/* =========================================================
   BASIC TABLE WIDTH
========================================================= */

.snsai-token-basic-table th:nth-child(1),
.snsai-token-basic-table td:nth-child(1) {
    width: 56%;
}

.snsai-token-basic-table th:nth-child(2),
.snsai-token-basic-table td:nth-child(2) {
    width: 18%;
}

.snsai-token-basic-table th:nth-child(3),
.snsai-token-basic-table td:nth-child(3) {
    width: 26%;
    text-align: right;
}


/* =========================================================
   BASIC FUNCTION
========================================================= */

.snsai-token-function {
    display: flex;
    align-items: center;
    gap: 12px;
}

.snsai-token-function > strong {
    color: #202936;

    font-size: 16px;
    line-height: 1.35;
    font-weight: 750;
}


/* =========================================================
   FUNCTION ICON
========================================================= */

.snsai-token-function-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

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

    border-radius: 9px;

    font-size: 11px;
    line-height: 1;
    font-weight: 900;
}

.snsai-token-function-icon.is-text {
    background: #fff1e5;
    color: #ed812c;
}

.snsai-token-function-icon.is-post {
    background: #eaf3ff;
    color: #4b82cf;

    font-size: 15px;
}

.snsai-token-function-icon.is-x {
    background: #f0f2f4;
    color: #20252b;

    font-size: 11px;
}


/* =========================================================
   UNIT
========================================================= */

.snsai-token-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 58px;
    height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    background: #f3f5f7;

    color: #697480;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}


/* =========================================================
   BASIC TOKEN PRICE
========================================================= */

.snsai-token-price {
    color: #162230;

    font-size: 27px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.snsai-token-price span {
    margin-left: 2px;

    color: #8693a0;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   IMAGE HEADER
========================================================= */

.snsai-token-image-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}


/* =========================================================
   IMAGE SAVING LABEL
========================================================= */

.snsai-image-saving-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 11px 6px 7px;

    border: 1px solid #ffd8b7;
    border-radius: 999px;

    background: #fff5eb;

    color: #e67822;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;
}

.snsai-image-saving-label span {
    width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f38a32;

    color: #fff;

    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}


/* =========================================================
   IMAGE TABLE
========================================================= */

.snsai-image-price-table th,
.snsai-image-price-table td {
    width: 33.333%;
}

.snsai-image-price-table th:nth-child(2),
.snsai-image-price-table td:nth-child(2),
.snsai-image-price-table th:nth-child(3),
.snsai-image-price-table td:nth-child(3) {
    text-align: center;
}

.snsai-image-price-table th + th,
.snsai-image-price-table td + td {
    border-left: 1px solid #e3e8ed;
}


/* =========================================================
   THREE IMAGE COLUMN
========================================================= */

.snsai-image-price-table .is-value-column {
    background: #fff7ef;
}

.snsai-image-price-table thead .is-value-column {
    background: #fff1e3;
    color: #df7622;
}


/* =========================================================
   THREE IMAGE COLUMN HEADER
========================================================= */

.snsai-three-column-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.snsai-three-column-head em {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 7px;

    border-radius: 999px;

    background: #f18730;

    color: #fff;

    font-size: 8px;
    line-height: 1;
    font-style: normal;
    font-weight: 800;
}


/* =========================================================
   IMAGE QUALITY NAME
========================================================= */

.snsai-image-quality-name {
    display: block;

    color: #202936;

    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}


/* =========================================================
   IMAGE TOKEN PRICE
========================================================= */

.snsai-image-token-price {
    color: #172230;

    font-size: 27px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.snsai-image-token-price span {
    margin-left: 2px;

    color: #87939f;

    font-size: 12px;
    font-weight: 700;
}

.snsai-image-token-price.is-saving {
    color: #f07d22;
}

.snsai-image-token-price.is-saving span {
    color: #d8915a;
}


/* =========================================================
   TOKEN NOTE
========================================================= */

.snsai-token-small-note {
    margin: 9px 3px 0;

    text-align: right;

    color: #929ba5;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   USAGE EXAMPLE
========================================================= */

.snsai-token-example {
    position: relative;

    max-width: 980px;

    margin: 46px auto 0;
    padding: 30px 34px 28px;

    overflow: hidden;

    border: 1px solid #cfe5f5;
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #f5fbff 0%,
            #eaf7ff 100%
        );

    box-shadow:
        0 10px 28px rgba(60, 142, 197, 0.07);
}


/* =========================================================
   BLUE DECORATION
========================================================= */

.snsai-token-example::before {
    content: "";

    position: absolute;

    top: -110px;
    right: -90px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(104, 191, 239, 0.18) 0%,
            rgba(104, 191, 239, 0) 70%
        );

    pointer-events: none;
}


/* =========================================================
   EXAMPLE HEADER
========================================================= */

.snsai-example-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;

    margin-bottom: 22px;
}

.snsai-example-label {
    display: block;

    margin-bottom: 6px;

    color: #3a91ca;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.snsai-example-heading h3 {
    margin: 0 0 8px;

    color: #203145;

    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.snsai-example-heading h3 span {
    color: #2789c8;
}

.snsai-example-heading p {
    margin: 0;

    color: #637d90;

    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}


/* =========================================================
   PLAN TOTAL
========================================================= */

.snsai-example-total {
    flex: 0 0 auto;
    text-align: right;
}

.snsai-example-total small {
    display: block;

    margin-bottom: 5px;

    color: #5e788c;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
}

.snsai-example-total strong {
    display: block;

    color: #207fbc;

    font-size: 38px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.045em;
}

.snsai-example-total strong span {
    margin-left: 4px;

    color: #6d94ae;

    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   EXAMPLE CONTENT
========================================================= */

.snsai-example-content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   EXAMPLE FLOW
========================================================= */

.snsai-example-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.snsai-example-step {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 14px 14px;

    border: 1px solid #d4e7f4;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.88);
}

.snsai-example-step-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

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

    border-radius: 9px;

    background: #e7f5fd;

    color: #2d8cc8;

    font-size: 12px;
    line-height: 1;
    font-weight: 900;
}

.snsai-example-step small {
    display: block;

    margin-bottom: 3px;

    color: #698296;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
}

.snsai-example-step strong {
    display: block;

    color: #263746;

    font-size: 19px;
    line-height: 1.1;
    font-weight: 850;
}


/* =========================================================
   FLOW SYMBOL
========================================================= */

.snsai-example-symbol {
    flex: 0 0 20px;

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

    color: #789eb8;

    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}


/* =========================================================
   PER POST TOTAL
========================================================= */

.snsai-example-per-post {
    min-width: 125px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 13px 17px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #247fb7 0%,
            #3298d2 100%
        );

    box-shadow:
        0 7px 18px rgba(37, 131, 187, 0.15);
}

.snsai-example-per-post small {
    display: block;

    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
}

.snsai-example-per-post strong {
    color: #fff;

    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.snsai-example-per-post strong span {
    margin-left: 2px;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   EXAMPLE RESULT
========================================================= */

.snsai-example-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-top: 14px;
    padding: 18px 22px;

    border: 1px solid #cde3f2;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   RESULT COPY
========================================================= */

.snsai-example-result-copy {
    max-width: 430px;
}

.snsai-example-result-copy > span {
    display: inline-block;

    margin-bottom: 5px;

    color: #2d88c2;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
}

.snsai-example-result-copy p {
    margin: 0;

    color: #587488;

    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}


/* =========================================================
   RESULT NUMBER
========================================================= */

.snsai-example-result-number {
    min-width: 230px;
    text-align: right;
}

.snsai-example-result-number small {
    display: inline;

    margin-right: 7px;

    color: #58788f;

    font-size: 13px;
    font-weight: 700;
}

.snsai-example-result-number strong {
    color: #2188c9;

    font-size: 46px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.055em;
}

.snsai-example-result-number strong span {
    margin-left: 5px;

    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0;
}

.snsai-example-result-number em {
    display: block;

    margin-top: 3px;

    color: #68879b;

    font-size: 11px;
    line-height: 1.3;
    font-style: normal;
    font-weight: 700;
}


/* =========================================================
   TOKEN IMAGE ACCENT
========================================================= */

.snsai-token-accent-image {
    position: absolute;

    right: -27px;
    bottom: -35px;

    z-index: 1;

    width: 145px;
    height: auto;

    opacity: 0.13;

    transform: rotate(-10deg);

    pointer-events: none;
}


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

@media (max-width: 900px) {

    .snsai-token-head {
        margin-bottom: 34px;
    }


    .snsai-token-example {
        margin-top: 40px;
        padding: 27px 24px 24px;
    }


    .snsai-example-flow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }


    .snsai-example-symbol {
        display: none;
    }


    .snsai-example-per-post {
        min-width: 0;
    }

}


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

@media (max-width: 640px) {


    /* =====================================================
       HEADER
    ===================================================== */

    .snsai-token-head {
        margin-bottom: 28px;
        text-align: left;
    }

    .snsai-token-head h2 {
        margin: 8px 0 10px;

        font-size: 26px;
        line-height: 1.25;
    }

    .snsai-token-head > p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* =====================================================
       TOKEN USAGE HEADER
    ===================================================== */

    .snsai-token-block-head {
        display: block;

        margin-bottom: 18px;
        padding-bottom: 13px;
    }

    .snsai-token-mini-label {
        font-size: 10px;
    }

    .snsai-token-block-head h3 {
        font-size: 22px;
    }

    .snsai-token-block-head > p {
        margin-top: 6px;

        font-size: 11px;
    }


    /* =====================================================
       TABLE SECTION
    ===================================================== */

    .snsai-token-table-section {
        margin-top: 18px;
    }

    .snsai-token-table-section + .snsai-token-table-section {
        margin-top: 30px;
    }


    /* =====================================================
       TABLE TITLE
    ===================================================== */

    .snsai-token-table-title {
        gap: 8px;
        margin-bottom: 9px;
    }

    .snsai-token-table-title-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;

        border-radius: 8px;
    }

    .snsai-token-table-title > strong {
        font-size: 16px;
    }


    /* =====================================================
       TABLE COMMON
    ===================================================== */

    .snsai-token-table-wrap {
        border-radius: 13px;
    }

    .snsai-token-table thead th {
        height: 38px;
        padding: 0 10px;

        font-size: 10px;
    }

    .snsai-token-table tbody td {
        height: 57px;
        padding: 9px 10px;
    }


    /* =====================================================
       BASIC TABLE
    ===================================================== */

    .snsai-token-basic-table th:nth-child(1),
    .snsai-token-basic-table td:nth-child(1) {
        width: 52%;
    }

    .snsai-token-basic-table th:nth-child(2),
    .snsai-token-basic-table td:nth-child(2) {
        width: 19%;
    }

    .snsai-token-basic-table th:nth-child(3),
    .snsai-token-basic-table td:nth-child(3) {
        width: 29%;
    }


    /* =====================================================
       FUNCTION
    ===================================================== */

    .snsai-token-function {
        gap: 7px;
    }

    .snsai-token-function-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;

        font-size: 9px;
    }

    .snsai-token-function > strong {
        font-size: 12px;
        line-height: 1.3;
    }


    /* =====================================================
       UNIT
    ===================================================== */

    .snsai-token-unit {
        min-width: 0;
        height: auto;

        padding: 0;

        background: transparent;

        font-size: 10px;
    }


    /* =====================================================
       TOKEN PRICE
    ===================================================== */

    .snsai-token-price {
        font-size: 21px;
    }

    .snsai-token-price span {
        font-size: 9px;
    }


    /* =====================================================
       IMAGE HEADER
    ===================================================== */

    .snsai-token-image-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;

        margin-bottom: 10px;
    }

    .snsai-token-image-heading .snsai-token-table-title {
        margin-bottom: 0;
    }


    /* =====================================================
       SAVING LABEL
    ===================================================== */

    .snsai-image-saving-label {
        padding: 5px 9px 5px 6px;

        font-size: 9px;
    }

    .snsai-image-saving-label span {
        width: 18px;
        height: 18px;

        font-size: 9px;
    }


    /* =====================================================
       IMAGE TABLE
    ===================================================== */

    .snsai-image-price-table th:first-child,
    .snsai-image-price-table td:first-child {
        width: 30%;
    }

    .snsai-image-price-table th:nth-child(2),
    .snsai-image-price-table td:nth-child(2),
    .snsai-image-price-table th:nth-child(3),
    .snsai-image-price-table td:nth-child(3) {
        width: 35%;
    }


    .snsai-image-price-table tbody td {
        height: 58px;
    }


    /* =====================================================
       IMAGE COLUMN HEADER
    ===================================================== */

    .snsai-three-column-head {
        flex-direction: column;
        gap: 2px;
    }

    .snsai-three-column-head em {
        padding: 3px 5px;

        font-size: 6px;
    }


    /* =====================================================
       IMAGE QUALITY
    ===================================================== */

    .snsai-image-quality-name {
        font-size: 14px;
    }


    /* =====================================================
       IMAGE PRICE
    ===================================================== */

    .snsai-image-token-price {
        font-size: 21px;
    }

    .snsai-image-token-price span {
        font-size: 9px;
    }


    /* =====================================================
       NOTE
    ===================================================== */

    .snsai-token-small-note {
        margin-top: 7px;

        text-align: left;

        font-size: 9px;
    }


    /* =====================================================
       USAGE EXAMPLE
    ===================================================== */

    .snsai-token-example {
        margin-top: 34px;
        padding: 22px 15px 18px;

        border-radius: 17px;
    }


    /* =====================================================
       EXAMPLE HEADER
    ===================================================== */

    .snsai-example-top {
        display: block;

        margin-bottom: 17px;
    }

    .snsai-example-label {
        font-size: 9px;
    }

    .snsai-example-heading h3 {
        font-size: 24px;
    }

    .snsai-example-heading p {
        font-size: 12px;
    }


    /* =====================================================
       PLAN TOTAL
    ===================================================== */

    .snsai-example-total {
        margin-top: 14px;
        text-align: left;
    }

    .snsai-example-total small {
        font-size: 11px;
    }

    .snsai-example-total strong {
        font-size: 32px;
    }


    /* =====================================================
       FLOW
    ===================================================== */

    .snsai-example-flow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .snsai-example-symbol {
        display: none;
    }

    .snsai-example-step {
        padding: 11px 12px;
    }

    .snsai-example-step-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .snsai-example-step small {
        font-size: 10px;
    }

    .snsai-example-step strong {
        font-size: 18px;
    }


    /* =====================================================
       PER POST
    ===================================================== */

    .snsai-example-per-post {
        min-width: 0;

        padding: 12px 14px;
    }

    .snsai-example-per-post small {
        font-size: 10px;
    }

    .snsai-example-per-post strong {
        font-size: 23px;
    }


    /* =====================================================
       RESULT
    ===================================================== */

    .snsai-example-result {
        display: block;

        margin-top: 10px;
        padding: 15px 14px;

        border-radius: 12px;
    }

    .snsai-example-result-copy > span {
        font-size: 11px;
    }

    .snsai-example-result-copy p {
        font-size: 12px;
    }


    /* =====================================================
       RESULT NUMBER
    ===================================================== */

    .snsai-example-result-number {
        min-width: 0;

        margin-top: 13px;

        text-align: left;
    }

    .snsai-example-result-number small {
        font-size: 12px;
    }

    .snsai-example-result-number strong {
        font-size: 39px;
    }

    .snsai-example-result-number strong span {
        font-size: 15px;
    }

    .snsai-example-result-number em {
        margin-left: 31px;

        font-size: 10px;
    }


    /* =====================================================
       TOKEN IMAGE
    ===================================================== */

    .snsai-token-accent-image {
        width: 100px;

        right: -25px;
        bottom: -20px;

        opacity: 0.09;
    }

}
/* =========================================================
   07. SHOWCASE / AI画像生成サンプル
========================================================= */
/* =========================================================
   SHOWCASE
========================================================= */

.snsai-showcase{
    position:relative;
    overflow:hidden;

    padding:92px 0 86px;

    background:
        linear-gradient(
            180deg,
            #f5fbfe 0%,
            #ffffff 48%,
            #f8fcfe 100%
        );
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.snsai-showcase-bg{
    position:absolute;
    inset:0;

    pointer-events:none;
}

.snsai-showcase-orb{
    position:absolute;

    display:block;

    border-radius:50%;
}

.snsai-showcase-orb.orb-01{
    top:-170px;
    left:-140px;

    width:430px;
    height:430px;

    background:
        rgba(86,196,239,.08);
}

.snsai-showcase-orb.orb-02{
    right:-130px;
    bottom:-190px;

    width:420px;
    height:420px;

    background:
        rgba(255,154,61,.07);
}

.snsai-showcase-line{
    position:absolute;

    display:block;

    border-radius:50%;
}

.snsai-showcase-line.line-01{
    top:125px;
    right:5%;

    width:250px;
    height:100px;

    border-top:
        2px solid rgba(89,200,243,.15);

    transform:rotate(-8deg);
}

.snsai-showcase-line.line-02{
    left:4%;
    bottom:90px;

    width:180px;
    height:80px;

    border-top:
        2px solid rgba(255,143,43,.12);

    transform:rotate(9deg);
}


/* =========================================================
   HEADER
========================================================= */

.snsai-showcase-head{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(240px,.6fr);

    gap:70px;

    align-items:end;

    margin-bottom:28px;
}


.snsai-showcase-head-copy{
    max-width:720px;
}


.snsai-showcase-head-copy h2{
    margin:
        15px 0 17px;

    color:#273239;

    font-size:43px;
    line-height:1.34;
    font-weight:900;

    letter-spacing:-.025em;
}


.snsai-showcase-head-copy h2 span{
    color:#ff8828;
}


.snsai-showcase-head-copy > p{
    max-width:660px;

    margin:0;

    color:#6f7c83;

    font-size:14px;
    line-height:1.9;
    font-weight:700;
}


/* =========================================================
   HEADER SIDE
========================================================= */

.snsai-showcase-head-side{
    padding:
        20px 22px;

    border-left:
        3px solid #59c8f3;
}


.snsai-showcase-mini-label{
    display:flex;
    align-items:center;

    gap:7px;

    color:#48add5;

    font-size:10px;
    line-height:1;
    font-weight:900;

    letter-spacing:.11em;
}


.snsai-showcase-mini-label span{
    color:#ff912f;

    font-size:15px;
}


.snsai-showcase-head-side p{
    margin:
        10px 0 0;

    color:#4f5d64;

    font-size:13px;
    line-height:1.75;
    font-weight:800;
}


/* =========================================================
   TAGS
========================================================= */

.snsai-showcase-tags{
    position:relative;
    z-index:2;

    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:35px;
}


.snsai-showcase-tags span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:30px;

    padding:
        0 13px;

    border:
        1px solid #e1edf2;

    border-radius:999px;

    background:
        rgba(255,255,255,.88);

    color:#6b7b83;

    font-size:10px;
    font-weight:800;

    box-shadow:
        0 5px 14px rgba(55,89,107,.035);
}


/* =========================================================
   GALLERY
========================================================= */

.snsai-showcase-gallery{
    position:relative;

    z-index:2;

    width:100%;

    padding:
        13px 0 22px;
}


/* =========================================================
   SLIDER
========================================================= */

.snsai-showcase-slider{
    overflow:hidden;

    padding:
        18px 0 24px;
}


.snsai-showcase-track{
    display:flex;
    align-items:center;

    width:max-content;

    gap:22px;

    animation:
        snsaiShowcaseScroll
        48s
        linear
        infinite;
}


.snsai-showcase-track:hover{
    animation-play-state:paused;
}


/* =========================================================
   ITEM
========================================================= */

.snsai-showcase-item{
    position:relative;

    width:238px;

    flex-shrink:0;

    transition:
        transform .3s ease;
}


/* 少しバラけさせる */

.snsai-showcase-item:nth-child(4n + 1){
    transform:
        translateY(8px)
        rotate(-1.4deg);
}

.snsai-showcase-item:nth-child(4n + 2){
    transform:
        translateY(-8px)
        rotate(.8deg);
}

.snsai-showcase-item:nth-child(4n + 3){
    transform:
        translateY(5px)
        rotate(1.3deg);
}

.snsai-showcase-item:nth-child(4n){
    transform:
        translateY(-4px)
        rotate(-.6deg);
}


.snsai-showcase-item:hover{
    z-index:5;

    transform:
        translateY(-10px)
        rotate(0deg)
        scale(1.035);
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.snsai-showcase-image-frame{
    position:relative;

    padding:8px;

    border:
        1px solid #e2eaee;

    border-radius:27px;

    background:#fff;

    box-shadow:
        0 15px 32px rgba(41,73,90,.09);
}


.snsai-showcase-image-frame::before{
    content:"";

    position:absolute;

    inset:-5px;

    z-index:-1;

    border-radius:31px;

    background:
        linear-gradient(
            135deg,
            rgba(87,198,239,.14),
            rgba(255,155,67,.10)
        );

    opacity:0;

    transition:
        opacity .25s ease;
}


.snsai-showcase-item:hover
.snsai-showcase-image-frame::before{
    opacity:1;
}


.snsai-showcase-image-frame img{
    display:block;

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:20px;
}


/* =========================================================
   EDGE FADE
========================================================= */

.snsai-showcase-fade{
    position:absolute;

    top:0;
    bottom:0;

    z-index:4;

    width:110px;

    pointer-events:none;
}


.snsai-showcase-fade-left{
    left:0;

    background:
        linear-gradient(
            90deg,
            #f8fcfe 0%,
            rgba(248,252,254,.75) 35%,
            rgba(248,252,254,0) 100%
        );
}


.snsai-showcase-fade-right{
    right:0;

    background:
        linear-gradient(
            270deg,
            #f8fcfe 0%,
            rgba(248,252,254,.75) 35%,
            rgba(248,252,254,0) 100%
        );
}


/* =========================================================
   BOTTOM INFO
========================================================= */

.snsai-showcase-bottom{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:15px;

    max-width:760px;

    margin:
        28px auto 0;

    padding:
        16px 20px;

    border:
        1px solid #e4edf1;

    border-radius:20px;

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 10px 26px rgba(42,79,98,.045);
}


.snsai-showcase-bottom-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    flex:
        0 0 38px;

    border-radius:12px;

    background:#edf9fd;

    color:#4eb8df;

    font-size:17px;
    font-weight:900;
}


.snsai-showcase-bottom strong{
    display:block;

    margin-bottom:3px;

    color:#344149;

    font-size:12px;
    line-height:1.5;
    font-weight:900;
}


.snsai-showcase-bottom p{
    margin:0;

    color:#7b888e;

    font-size:10px;
    line-height:1.7;
    font-weight:700;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes snsaiShowcaseScroll{

    0%{
        transform:
            translateX(0);
    }

    100%{
        transform:
            translateX(
                calc(-50% - 11px)
            );
    }

}


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

@media (max-width:1000px){

    .snsai-showcase-head{
        grid-template-columns:1fr;

        gap:24px;
    }


    .snsai-showcase-head-side{
        max-width:420px;
    }

}


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

@media (max-width:768px){

    .snsai-showcase{
        padding:
            64px 0 62px;
    }


    /* HEADER */

    .snsai-showcase-head{
        margin-bottom:20px;
    }


    .snsai-showcase-head-copy h2{
        margin:
            12px 0 14px;

        font-size:31px;
        line-height:1.38;
    }


    .snsai-showcase-head-copy > p{
        font-size:12px;
        line-height:1.8;
    }


    /* SIDE */

    .snsai-showcase-head-side{
        padding:
            14px 16px;

        border-left-width:2px;
    }


    .snsai-showcase-head-side p{
        font-size:11px;
    }


    /* TAGS */

    .snsai-showcase-tags{
        gap:6px;

        margin-bottom:20px;
    }


    .snsai-showcase-tags span{
        min-height:27px;

        padding:
            0 10px;

        font-size:9px;
    }


    /* SLIDER */

    .snsai-showcase-slider{
        padding:
            13px 0 18px;
    }


    .snsai-showcase-track{
        gap:14px;

        animation-duration:40s;
    }


    /* ITEM */

    .snsai-showcase-item{
        width:176px;
    }


    .snsai-showcase-image-frame{
        padding:6px;

        border-radius:21px;
    }


    .snsai-showcase-image-frame img{
        border-radius:15px;
    }


    /* FADE */

    .snsai-showcase-fade{
        width:42px;
    }


    /* BOTTOM */

    .snsai-showcase-bottom{
        align-items:flex-start;

        margin-top:18px;

        padding:
            14px 15px;

        border-radius:16px;
    }


    .snsai-showcase-bottom-icon{
        width:32px;
        height:32px;

        flex-basis:32px;

        border-radius:10px;

        font-size:14px;
    }


    .snsai-showcase-bottom strong{
        font-size:11px;
    }


    .snsai-showcase-bottom p{
        font-size:9px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px){

    .snsai-showcase-head-copy h2{
        font-size:28px;
    }


    .snsai-showcase-item{
        width:160px;
    }


    .snsai-showcase-fade{
        width:28px;
    }

}
/* =========================================================
   08. PLANS / 料金プラン
========================================================= */
/* =========================================================
   PLAN SECTION
========================================================= */

.snsai-plans{
    position:relative;
    overflow:visible;
    padding:68px 0 76px;
    background:#fff;
}


/* =========================================================
   PLAN SHELL
========================================================= */

.snsai-plan-shell{
    position:relative;
    overflow:hidden;

    padding:54px 36px 40px;

    border:18px solid #59c8f3;
    border-radius:34px;

    background:
        linear-gradient(
            180deg,
            #fffdfb 0%,
            #ffffff 100%
        );

    box-shadow:
        0 18px 42px rgba(62,179,228,.10);
}



/* =========================================================
   HEADER
========================================================= */

.snsai-plan-head{
    position:relative;
    z-index:2;

    margin-bottom:36px;
}

.snsai-plan-head p{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   GRID
========================================================= */

.snsai-plan-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:22px;

    align-items:stretch;
}


/* =========================================================
   CARD
========================================================= */

.snsai-plan-card{
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-width:0;

    padding:27px 25px 24px;

    border:2px solid #edf1f2;
    border-radius:30px;

    background:#fff;

    box-shadow:
        0 14px 32px rgba(42,66,80,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.snsai-plan-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(42,66,80,.085);
}


/* =========================================================
   LIGHT
========================================================= */

.snsai-plan-small{
    background:
        linear-gradient(
            180deg,
            #f7fbe9 0%,
            #fcfef6 31%,
            #fff 57%
        );

    border-color:#dbe8b4;
}

/* =========================================================
   STANDARD
========================================================= */

.snsai-plan-recommended{
    border-color:#ffb86e;

    background:
        linear-gradient(
            180deg,
            #fff7ed 0%,
            #fffdf9 29%,
            #fff 55%
        );

    box-shadow:
        0 16px 38px rgba(230,132,37,.11);
}


/* =========================================================
   PRO
========================================================= */

.snsai-plan-large{
    background:
        linear-gradient(
            180deg,
            #f4faff 0%,
            #fbfdff 31%,
            #fff 57%
        );

    border-color:#e1edf2;
}


/* =========================================================
   CARD DECORATION
========================================================= */

.snsai-plan-deco-dot{
    position:absolute;

    display:block;

    border-radius:50%;

    pointer-events:none;
}


/* LIGHT / STANDARD */

.snsai-plan-deco-dot.dot-01{
    top:19px;
    right:22px;

    width:8px;
    height:8px;

    background:#b8dc58;
}


.snsai-plan-deco-dot.dot-02{
    top:33px;
    right:38px;

    width:5px;
    height:5px;

    background:#d9eca6;
}


/* PRO */

.snsai-plan-large .snsai-plan-deco-dot.dot-01{
    background:#88c5df;
}


.snsai-plan-large .snsai-plan-deco-dot.dot-02{
    background:#c4e3ef;
}


/* 左のアクセント */

.snsai-plan-deco-line{
    position:absolute;

    top:24px;
    left:-10px;

    width:54px;
    height:18px;

    border-top:3px solid;

    border-radius:50%;

    transform:rotate(-12deg);

    pointer-events:none;
}

/* =========================================================
   RECOMMEND BADGE
========================================================= */

.snsai-recommend-badge{
    position:absolute;

    top:0;
    right:24px;

    z-index:5;

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

    min-width:80px;
    min-height:34px;

    padding:0 14px;

    border-radius:
        0 0 14px 14px;

    background:#ff8b2c;

    color:#fff;

    font-size:11px;
    line-height:1;
    font-weight:900;

    letter-spacing:.03em;
}


/* =========================================================
   PLAN TOP
========================================================= */

.snsai-plan-top{
    position:relative;
    z-index:2;

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

    gap:8px;

    min-height:118px;

    margin-bottom:18px;
}


.snsai-plan-title-area{
    min-width:0;
    flex:1;
}


/* =========================================================
   PLAN NAME
========================================================= */

.snsai-plan-name{
    display:block;

    margin:0;

    color:#273239;

    font-size:26px;
    line-height:1.2;
    font-weight:900;

    letter-spacing:.01em;
}


.snsai-plan-copy{
    max-width:180px;

    margin:9px 0 0;

    color:#718087;

    font-size:12px;
    line-height:1.65;
    font-weight:700;
}


/* =========================================================
   CHARACTER
========================================================= */

.snsai-plan-character{
    position:relative;

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

    width:112px;
    height:100px;

    flex:0 0 112px;
}


.snsai-plan-character img{
    position:relative;

    z-index:2;

    display:block;

    width:100%;

    max-width:105px;
    max-height:98px;

    object-fit:contain;
}


/* キャラ下の影 */

.snsai-plan-character::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:5px;

    width:72px;
    height:16px;

    transform:
        translateX(-50%);

    border-radius:50%;

    background:
        rgba(70,80,85,.06);

    filter:blur(2px);
}


/* =========================================================
   PRICE BOX
========================================================= */

.snsai-plan-price-box{
    position:relative;
    z-index:2;

    padding:20px 20px 17px;

    border:1px solid #f4dfc8;

    border-radius:21px;

    background:#fff8ef;
}


/* LIGHT */

.snsai-plan-small .snsai-plan-price-box{
    background:#fff8ef;
}


/* STANDARD */

.snsai-plan-recommended .snsai-plan-price-box{
    border-color:#ffd2a4;

    background:#fff3e5;
}


/* PRO */

.snsai-plan-large .snsai-plan-price-box{
    border-color:#dcebf1;

    background:#f5fafd;
}


/* =========================================================
   PRICE LABEL
========================================================= */

.snsai-plan-price-label{
    display:flex;
    align-items:center;

    gap:7px;
}


.snsai-plan-price-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:23px;

    padding:0 8px;

    border-radius:7px;

    background:#ff8b2c;

    color:#fff;

    font-size:9px;
    font-weight:900;
}


.snsai-plan-price-label strong{
    color:#76583f;

    font-size:12px;
    line-height:1.2;
    font-weight:900;
}


/* PRO */

.snsai-plan-large .snsai-plan-price-mark{
    background:#64abc9;
}


.snsai-plan-large .snsai-plan-price-label strong{
    color:#56717e;
}


/* =========================================================
   MAIN PRICE
========================================================= */

/* メイン料金を右寄せ */
.snsai-plan-main-price{
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    margin-top:12px;
    text-align:right;
}

.snsai-plan-main-price > strong{
    color:#202b31;

    font-size:43px;
    line-height:.95;
    font-weight:900;

    letter-spacing:-.045em;
}


.snsai-plan-main-price > span{
    display:flex;
    align-items:flex-end;

    gap:4px;

    margin:
        0 0 4px 7px;

    color:#273238;

    font-size:15px;
    line-height:1;
    font-weight:900;
}


.snsai-plan-main-price > span small{
    color:#8c969b;

    font-size:10px;
    font-weight:800;
}


/* =========================================================
   NORMAL PRICE
========================================================= */

/* 通常料金も右寄せ */
.snsai-plan-normal-price{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin-top:15px;
    padding-top:11px;
    border-top:1px solid rgba(159,130,100,.17);
    text-align:right;
}

.snsai-plan-normal-price span{
    color:#8b9499;

    font-size:10px;
    font-weight:800;
}


.snsai-plan-normal-price strong{
    color:#646e73;

    font-size:14px;
    font-weight:900;
}


.snsai-plan-normal-price small{
    color:#9ca5aa;

    font-size:9px;
    font-weight:700;
}


/* =========================================================
   TOKEN BOX
========================================================= */

.snsai-plan-token-box{
    position:relative;
    z-index:2;

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

    gap:16px;

    margin-top:13px;

    padding:17px 18px;

    border:
        1px solid #e7edef;

    border-radius:18px;

    background:#fafcfd;
}


/* LIGHT */

.snsai-plan-small .snsai-plan-token-box{
    background:#fffdfa;
}


/* STANDARD */

.snsai-plan-recommended .snsai-plan-token-box{
    border-color:#eee7df;

    background:#fff;
}


/* PRO */

.snsai-plan-large .snsai-plan-token-box{
    border-color:#dfebf0;

    background:#fbfdff;
}


/* =========================================================
   TOKEN COPY
========================================================= */

.snsai-plan-token-copy{
    display:flex;

    flex-direction:column;

    gap:2px;
}


.snsai-plan-token-copy span{
    color:#9aa5aa;

    font-size:9px;
    line-height:1.2;
    font-weight:800;
}


.snsai-plan-token-copy strong{
    color:#58666d;

    font-size:12px;
    line-height:1.35;
    font-weight:900;
}


/* =========================================================
   TOKEN NUMBER
========================================================= */

.snsai-plan-token-number{
    display:flex;
    align-items:baseline;

    gap:4px;

    white-space:nowrap;
}


.snsai-plan-token-number strong{
    color:#253138;

    font-size:30px;
    line-height:1;
    font-weight:900;

    letter-spacing:-.035em;
}


.snsai-plan-token-number span{
    color:#f18b33;

    font-size:12px;
    font-weight:900;
}


/* PRO */

.snsai-plan-large .snsai-plan-token-number span{
    color:#5fa7c6;
}


/* =========================================================
   COMMON INFO
========================================================= */

.snsai-plan-common{
    position:relative;
    z-index:2;

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

    gap:14px;

    max-width:760px;

    margin:
        26px auto 0;

    padding:16px 20px;

    border:
        1px solid #e6edef;

    border-radius:20px;

    background:#fafcfd;
}


.snsai-plan-common-mark{
    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;

    flex:
        0 0 32px;

    border-radius:50%;

    background:#eef8d6;

    color:#83a72c;

    font-size:14px;
    font-weight:900;
}


.snsai-plan-common-copy{
    min-width:0;
}


.snsai-plan-common-copy strong{
    display:block;

    margin-bottom:2px;

    color:#3f4d54;

    font-size:12px;
    line-height:1.5;
    font-weight:900;
}


.snsai-plan-common-copy p{
    margin:0;

    color:#7d898f;

    font-size:10px;
    line-height:1.7;
    font-weight:700;
}

/* =========================================================
   PLAN COLOR OVERRIDES
   LIGHT = GREEN
   STANDARD = ORANGE
   PRO = BLUE
========================================================= */


/* =========================================================
   LIGHT / 黄緑
========================================================= */

.snsai-plan-small{
    border-color:#dbe8b4;

    background:
        linear-gradient(
            180deg,
            #f7fbe9 0%,
            #fcfef6 31%,
            #fff 57%
        );
}


/* 左上アクセント */

.snsai-plan-small .snsai-plan-deco-line{
    border-top-color:#a9cf43;
}


/* ドット */

.snsai-plan-small .snsai-plan-deco-dot.dot-01{
    background:#a9cf43;
}

.snsai-plan-small .snsai-plan-deco-dot.dot-02{
    background:#d8eb9d;
}


/* 料金ボックス */

.snsai-plan-small .snsai-plan-price-box{
    border-color:#dce8b9;
    background:#f7faec;
}


/* Webmoラベル */

.snsai-plan-small .snsai-plan-price-mark{
    background:#a9cf43;
}


/* セット料金ラベル文字 */

.snsai-plan-small .snsai-plan-price-label strong{
    color:#6e7f31;
}


/* 通常料金との区切り線 */

.snsai-plan-small .snsai-plan-normal-price{
    border-top-color:rgba(129,153,55,.18);
}


/* トークンボックス */

.snsai-plan-small .snsai-plan-token-box{
    border-color:#dfe9bf;
    background:#fbfdf5;
}


/* T */

.snsai-plan-small .snsai-plan-token-number span{
    color:#96b934;
}



/* =========================================================
   STANDARD / オレンジ
========================================================= */

.snsai-plan-recommended{
    border-color:#ffb86e;

    background:
        linear-gradient(
            180deg,
            #fff7ed 0%,
            #fffdf9 29%,
            #fff 55%
        );
}


/* 左上アクセント */

.snsai-plan-recommended .snsai-plan-deco-line{
    border-top-color:#ff9a3c;
}


/* ドット */

.snsai-plan-recommended .snsai-plan-deco-dot.dot-01{
    background:#ff9a3c;
}

.snsai-plan-recommended .snsai-plan-deco-dot.dot-02{
    background:#ffd3a7;
}


/* 料金ボックス */

.snsai-plan-recommended .snsai-plan-price-box{
    border-color:#ffd2a4;
    background:#fff3e5;
}


/* Webmoラベル */

.snsai-plan-recommended .snsai-plan-price-mark{
    background:#ff8b2c;
}


/* セット料金ラベル文字 */

.snsai-plan-recommended .snsai-plan-price-label strong{
    color:#76583f;
}


/* 通常料金との区切り線 */

.snsai-plan-recommended .snsai-plan-normal-price{
    border-top-color:rgba(201,140,80,.18);
}


/* トークンボックス */

.snsai-plan-recommended .snsai-plan-token-box{
    border-color:#eee0d2;
    background:#fffdfb;
}


/* T */

.snsai-plan-recommended .snsai-plan-token-number span{
    color:#f18b33;
}



/* =========================================================
   PRO / 水色
========================================================= */

.snsai-plan-large{
    border-color:#dceaf0;

    background:
        linear-gradient(
            180deg,
            #f4faff 0%,
            #fbfdff 31%,
            #fff 57%
        );
}


/* 左上アクセント */

.snsai-plan-large .snsai-plan-deco-line{
    border-top-color:#72bad8;
}


/* ドット */

.snsai-plan-large .snsai-plan-deco-dot.dot-01{
    background:#72bad8;
}

.snsai-plan-large .snsai-plan-deco-dot.dot-02{
    background:#bfe0ed;
}


/* 料金ボックス */

.snsai-plan-large .snsai-plan-price-box{
    border-color:#dcebf1;
    background:#f5fafd;
}


/* Webmoラベル */

.snsai-plan-large .snsai-plan-price-mark{
    background:#64abc9;
}


/* セット料金ラベル文字 */

.snsai-plan-large .snsai-plan-price-label strong{
    color:#56717e;
}


/* 通常料金との区切り線 */

.snsai-plan-large .snsai-plan-normal-price{
    border-top-color:rgba(94,159,187,.18);
}


/* トークンボックス */

.snsai-plan-large .snsai-plan-token-box{
    border-color:#dfebf0;
    background:#fbfdff;
}


/* T */

.snsai-plan-large .snsai-plan-token-number span{
    color:#5fa7c6;
}
/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .snsai-plan-grid{
        grid-template-columns:1fr;

        max-width:700px;

        margin-left:auto;
        margin-right:auto;

        gap:18px;
    }


    .snsai-plan-card{
        padding:
            27px 28px;
    }


    .snsai-plan-top{
        min-height:110px;
    }


    .snsai-plan-character{
        width:120px;

        flex-basis:120px;
    }


    .snsai-plan-character img{
        max-width:112px;
    }

}


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

@media (max-width:768px){

    .snsai-plans{
        padding:
            50px 0 58px;
    }


    .snsai-plan-shell{
        padding:
            42px 18px 28px;

        border-width:12px;

        border-radius:24px;
    }


    /* WAVE */

    .snsai-plan-wave{
        height:14px;
    }


    .snsai-plan-wave-top{
        top:10px;

        background-size:
            180px 14px;
    }


    .snsai-plan-wave-bottom{
        bottom:10px;

        background-size:
            180px 14px;
    }


    /* HEADER */

    .snsai-plan-head{
        margin-bottom:28px;
    }


    /* GRID */

    .snsai-plan-grid{
        gap:15px;
    }


    /* CARD */

    .snsai-plan-card{
        padding:
            20px 18px 19px;

        border-radius:24px;
    }


    /* RECOMMEND */

    .snsai-recommend-badge{
        right:17px;

        min-width:70px;
        min-height:30px;

        padding:
            0 11px;

        border-radius:
            0 0 11px 11px;

        font-size:9px;
    }


    /* TOP */

    .snsai-plan-top{
        min-height:96px;

        margin-bottom:13px;
    }


    /* TITLE */

    .snsai-plan-name{
        font-size:23px;
    }


    .snsai-plan-copy{
        max-width:160px;

        margin-top:6px;

        font-size:10px;
        line-height:1.55;
    }


    /* CHARACTER */

    .snsai-plan-character{
        width:82px;
        height:76px;

        flex-basis:82px;
    }


    .snsai-plan-character img{
        max-width:80px;
        max-height:74px;
    }


    .snsai-plan-character::after{
        width:55px;
        height:11px;
    }


    /* PRICE */

    .snsai-plan-price-box{
        padding:
            17px 16px 15px;

        border-radius:18px;
    }


    .snsai-plan-price-mark{
        min-height:21px;

        padding:
            0 7px;

        font-size:8px;
    }


    .snsai-plan-price-label strong{
        font-size:10px;
    }


    .snsai-plan-main-price{
        margin-top:10px;
    }


    .snsai-plan-main-price > strong{
        font-size:36px;
    }


    .snsai-plan-main-price > span{
        margin-bottom:3px;

        font-size:13px;
    }


    .snsai-plan-normal-price{
        margin-top:12px;

        padding-top:10px;
    }


    /* TOKEN */

    .snsai-plan-token-box{
        margin-top:10px;

        padding:
            14px 14px;

        border-radius:15px;
    }


    .snsai-plan-token-copy span{
        font-size:8px;
    }


    .snsai-plan-token-copy strong{
        font-size:10px;
    }


    .snsai-plan-token-number strong{
        font-size:25px;
    }


    .snsai-plan-token-number span{
        font-size:10px;
    }


    /* COMMON */

    .snsai-plan-common{
        align-items:flex-start;

        margin-top:18px;

        padding:
            14px 15px;

        border-radius:16px;
    }


    .snsai-plan-common-mark{
        width:27px;
        height:27px;

        flex-basis:27px;

        font-size:11px;
    }


    .snsai-plan-common-copy strong{
        font-size:10px;
    }


    .snsai-plan-common-copy p{
        font-size:9px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px){

    .snsai-plan-shell{
        padding:
            40px 12px 26px;

        border-width:9px;

        border-radius:20px;
    }


    .snsai-plan-card{
        padding:
            18px 15px;

        border-radius:21px;
    }


    .snsai-plan-top{
        min-height:88px;
    }


    .snsai-plan-name{
        font-size:21px;
    }


    .snsai-plan-copy{
        max-width:145px;

        font-size:9px;
    }


    .snsai-plan-character{
        width:72px;

        flex-basis:72px;
    }


    .snsai-plan-character img{
        max-width:70px;
    }


    .snsai-plan-main-price > strong{
        font-size:34px;
    }


    .snsai-plan-token-number strong{
        font-size:23px;
    }

}
/* =========================================================
   FINAL COMBO
   Webmo × Webmo SNS AI + CTA
========================================================= */

.snsai-final-combo{
    position:relative;
    overflow:hidden;

    padding:105px 0 115px;

    background: #ff9823;

}


/* =========================================================
   MAIN BOX
========================================================= */

.snsai-final-combo-box{
    position:relative;
    overflow:hidden;

    padding:60px 58px 48px;

    border:2px solid #e4f0f5;
    border-radius:38px;

    background:#fff;

    box-shadow:
        0 22px 55px rgba(45,87,108,.08);
}


/* 淡い背景装飾 */

.snsai-final-combo-box::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-245px;
    left:-180px;

    border-radius:50%;

    background:
        rgba(89,200,243,.08);

    pointer-events:none;
}


.snsai-final-combo-box::after{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-165px;
    top:45px;

    border-radius:50%;

    background:
        rgba(255,148,51,.07);

    pointer-events:none;
}


/* =========================================================
   LOGOS
========================================================= */

.snsai-final-brands{
    position:relative;
    z-index:2;

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

    gap:26px;

    margin-bottom:40px;
}


.snsai-final-brand{
    display:flex;
    align-items:center;
    justify-content:center;

    width:240px;
    height:105px;

    padding:20px 28px;

    border:1px solid #e4edf1;
    border-radius:24px;

    background:#fff;

    box-shadow:
        0 12px 28px rgba(41,76,94,.06);
}


.snsai-final-brand img{
    display:block;

    width:100%;
    max-width:180px;
    max-height:64px;

    object-fit:contain;
}


.snsai-final-brand-ai{
    background:#f8fcff;
}


.snsai-final-plus{
    display:flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    flex:0 0 44px;

    border-radius:50%;

    background:#fff3e8;

    color:#ff8b2c;

    font-size:24px;
    line-height:1;
    font-weight:900;
}


/* =========================================================
   COPY
========================================================= */

.snsai-final-copy{
    position:relative;
    z-index:2;

    max-width:800px;

    margin:0 auto;

    text-align:center;
}


.snsai-final-copy h2{
    margin:17px 0 18px;

    color:#273239;

    font-size:45px;
    line-height:1.35;
    font-weight:900;

    letter-spacing:-.025em;
}


.snsai-final-copy h2 span{
    color:#ff8828;
}


.snsai-final-copy > p{
    max-width:720px;

    margin:0 auto;

    color:#6f7d84;

    font-size:14px;
    line-height:2;
    font-weight:700;
}


/* =========================================================
   BENEFITS
========================================================= */

.snsai-final-benefits{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:14px;

    max-width:980px;

    margin:38px auto 0;
}


.snsai-final-benefit{
    display:flex;
    align-items:flex-start;

    gap:13px;

    padding:20px 18px;

    border:1px solid #e7eef1;
    border-radius:20px;

    background:#fbfdfe;
}


.snsai-final-benefit:nth-child(1){
    background:#f8fbea;
    border-color:#e0e9bc;
}


.snsai-final-benefit:nth-child(2){
    background:#fff8ef;
    border-color:#f5dfc6;
}


.snsai-final-benefit:nth-child(3){
    background:#f4fafe;
    border-color:#dcebf1;
}


.snsai-final-benefit-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;

    flex:0 0 32px;

    border-radius:10px;

    background:#fff;

    color:#8a969c;

    font-size:9px;
    font-weight:900;

    box-shadow:
        0 5px 12px rgba(46,74,87,.05);
}


.snsai-final-benefit strong{
    display:block;

    color:#354249;

    font-size:13px;
    line-height:1.55;
    font-weight:900;
}


.snsai-final-benefit p{
    margin:7px 0 0;

    color:#7b888e;

    font-size:10px;
    line-height:1.7;
    font-weight:700;
}


/* =========================================================
   FINAL CTA
========================================================= */

.snsai-final-cta{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto;

    gap:40px;

    align-items:center;

    max-width:1040px;

    margin:44px auto 0;

    padding:36px 38px;

    border-radius:28px;

    background:#59c8f3;

    box-shadow:
        0 20px 38px rgba(66,185,231,.19);
}


/* =========================================================
   CTA DECORATION
========================================================= */

.snsai-final-cta-decoration{
    position:absolute;

    top:18px;
    right:25px;

    display:flex;

    gap:6px;

    pointer-events:none;
}


.snsai-final-cta-decoration span{
    display:block;

    border-radius:50%;

    background:rgba(255,255,255,.55);
}


.snsai-final-cta-decoration span:nth-child(1){
    width:7px;
    height:7px;
}


.snsai-final-cta-decoration span:nth-child(2){
    width:5px;
    height:5px;
}


.snsai-final-cta-decoration span:nth-child(3){
    width:3px;
    height:3px;
}


/* =========================================================
   CTA COPY
========================================================= */

.snsai-final-small{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:0 12px;

    border-radius:999px;

    background:rgba(255,255,255,.88);

    color:#278eae;

    font-size:10px;
    font-weight:900;
}


.snsai-final-cta-copy h3{
    margin:12px 0 0;

    color:#183640;

    font-size:30px;
    line-height:1.4;
    font-weight:900;

    letter-spacing:-.02em;
}


.snsai-final-cta-copy h3 span{
    color:#16333d;
}


.snsai-final-cta-copy p{
    max-width:610px;

    margin:13px 0 0;

    color:#28505f;

    font-size:12px;
    line-height:1.8;
    font-weight:800;
}


/* =========================================================
   CTA ACTIONS
========================================================= */

.snsai-final-actions{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:12px;

    min-width:275px;
}


.snsai-final-actions .snsai-btn-primary{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    width:100%;
    min-height:60px;

    background:#fff;
    color:#26353c;

    box-shadow:
        0 12px 24px rgba(26,93,119,.11);
}


.snsai-final-actions .snsai-btn-primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 16px 30px rgba(26,93,119,.15);
}


.snsai-final-actions .snsai-btn-primary span{
    color:#ff8929;

    font-size:17px;
}


.snsai-final-text-link{
    color:#26657d;

    font-size:10px;
    font-weight:800;

    text-decoration:none;

    border-bottom:
        1px solid rgba(38,101,125,.28);
}


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

@media (max-width:1000px){

    .snsai-final-benefits{
        grid-template-columns:1fr;
        max-width:680px;
    }


    .snsai-final-cta{
        grid-template-columns:1fr;
    }


    .snsai-final-actions{
        width:100%;
        min-width:0;
        align-items:flex-start;
    }


    .snsai-final-actions .snsai-btn-primary{
        max-width:360px;
    }

}


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

@media (max-width:768px){

    .snsai-final-combo{
        padding:68px 0 72px;
    }


    .snsai-final-combo-box{
        padding:38px 18px 22px;

        border-radius:27px;
    }


    /* LOGO */

    .snsai-final-brands{
        gap:10px;

        margin-bottom:30px;
    }


    .snsai-final-brand{
        width:calc(50% - 26px);
        height:82px;

        padding:14px 15px;

        border-radius:18px;
    }


    .snsai-final-brand img{
        max-width:130px;
        max-height:50px;
    }


    .snsai-final-plus{
        width:32px;
        height:32px;

        flex-basis:32px;

        font-size:18px;
    }


    /* COPY */

    .snsai-final-copy h2{
        margin:13px 0 14px;

        font-size:30px;
        line-height:1.4;
    }


    .snsai-final-copy > p{
        font-size:11px;
        line-height:1.85;
    }


    /* BENEFIT */

    .snsai-final-benefits{
        gap:9px;

        margin-top:26px;
    }


    .snsai-final-benefit{
        padding:15px 14px;

        border-radius:16px;
    }


    .snsai-final-benefit strong{
        font-size:11px;
    }


    .snsai-final-benefit p{
        font-size:9px;
    }


    /* CTA */

    .snsai-final-cta{
        gap:24px;

        margin-top:28px;

        padding:26px 20px;

        border-radius:22px;
    }


    .snsai-final-cta-copy h3{
        margin-top:10px;

        font-size:23px;
    }


    .snsai-final-cta-copy p{
        font-size:10px;
    }


    .snsai-final-actions .snsai-btn-primary{
        max-width:none;
        min-height:54px;

        font-size:11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px){

    .snsai-final-combo-box{
        padding:
            34px 14px 18px;
    }


    .snsai-final-brand{
        height:70px;

        padding:
            12px 10px;
    }


    .snsai-final-brand img{
        max-width:110px;
        max-height:43px;
    }


    .snsai-final-copy h2{
        font-size:20px;
    }


    .snsai-final-cta{
        padding:
            23px 17px;
    }


    .snsai-final-cta-copy h3{
        font-size:21px;
    }

}