@charset "utf-8";

/* ------------------------------------------------------------
   Sound NAVI アフィリエイト紹介ページ
   すべて .sn-wrapper 配下にスコープ（既存CSSとの干渉を避ける）
------------------------------------------------------------ */

.sn-wrapper {
    --sn-ink: #2a2438;
    --sn-ink-soft: #5a5266;
    --sn-coral: #ff6b6b;
    --sn-coral-deep: #e84545;
    --sn-yellow: #ffd23f;
    --sn-yellow-deep: #f4b942;
    --sn-mint: #6fd3b8;
    --sn-mint-deep: #3fb89a;
    --sn-bg: #fff7e6;
    --sn-bg-cream: #fffbef;
    width: 100%;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.7;
    color: var(--sn-ink);
    background: var(--sn-bg);
    /* word-break: auto-phrase; */
}

.sn-wrapper *,
.sn-wrapper *::before,
.sn-wrapper *::after {
    box-sizing: border-box;
}

.sn-wrapper ul,
.sn-wrapper ol {
    list-style: none;
}

.sn-wrapper img {
    height: auto;
    max-width: 100%;
    object-fit: contain;
    vertical-align: bottom;
}

/* 見出しフォント */
.sn-wrapper h3,
.sn-wrapper h4 {
    font-family: "Kaisei Opti", serif;
    font-weight: 700;
}

/* ------------------------------------------------------------
   共通パーツ
------------------------------------------------------------ */
.sn-wrapper section {
    padding: 80px 24px;
    border-top: 2px solid var(--sn-ink);
}

.sn-inner {
    max-width: 960px;
    margin: 0 auto;
}

.sn-head {
    text-align: center;
    margin-bottom: 48px;
}

.sn-tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: .2em 1.2em;
    border-radius: 999px;
    background: var(--sn-ink);
    color: var(--sn-yellow);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.6;
}

.sn-head h3 {
    margin-bottom: 14px;
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.4;
}

.sn-head h3 span {
    display:inline-block;
    font-weight: bold;
}

.sn-hl {
    padding: 0 .1em;
    background: linear-gradient(transparent 62%, var(--sn-mint) 62%);
    font-weight: bold;
    display: inline-block;
}

.sn-hl.sn-hl-y {
    background: linear-gradient(transparent 62%, var(--sn-yellow) 62%);
}

.sn-lead {
    color: var(--sn-ink-soft);
    /* font-size: .95em; */
    word-break: auto-phrase;
}

/* アプリDLボタン（既存マークアップ用） */

.sn-wrapper .EventTop_boxLinkApp__Ro_o_ > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.sn-wrapper .EventTop_boxLinkApp__Ro_o_ a {
    display: block;
    transition: opacity .2s;
    box-shadow: 0 0 16px white;
    overflow: hidden;
    border-radius: 9%;
}

.sn-wrapper .EventTop_boxLinkApp__Ro_o_ a:hover {
    opacity: .75;
}

.sn-wrapper .EventTop_boxLinkApp__Ro_o_ img {
    height: 63px;
    width: auto;
}

/* ------------------------------------------------------------
   TOP
------------------------------------------------------------ */
.sn-top {
    padding: 0px 0px 64px;
    text-align: center;
    background:
        radial-gradient(circle at 10% 90%, rgba(255, 183, 197, .35), transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(111, 211, 184, .25), transparent 45%),
        var(--sn-bg);
}

.sn-top h2 {
    max-width: 1120px;
    margin: 0 auto 36px;
}

.sn-top h2 img {
    width: 100%;
}

.sn-top-lead {
    margin-bottom: 28px;
    color: var(--sn-ink-soft);
    /*font-size: 1.05em;*/
    word-break: auto-phrase;
    padding: 0 12px;
}

/* ------------------------------------------------------------
   ABOUT
------------------------------------------------------------ */
.sn-wrapper .sn-about {
    background: var(--sn-bg-cream);
}

.sn-merit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    @media (max-width: 1100px){
    gap: 28px;
    }
}

.sn-merit li {
    position: relative;
    padding: 36px 24px 28px;
    border: 3px solid var(--sn-ink);
    border-radius: 24px;
    background: #fff;
    box-shadow: 6px 6px 0 var(--sn-ink);
    text-align: center;
    @media (max-width: 1100px){
        padding: 36px 20px 28px;
    }
}

.sn-merit li:nth-child(1) {
    background: linear-gradient(180deg, #ffeeee 0%, #fff 60%);
    @media (min-width: 769px) {
        h4 {
            padding-top: 9px;
        }
    }
}

.sn-merit li:nth-child(2) {
    background: linear-gradient(180deg, #e8f8f2 0%, #fff 60%);
}

.sn-merit li:nth-child(3) {
    background: linear-gradient(180deg, #fff5d6 0%, #fff 60%);
}

.sn-merit-no {
    position: absolute;
    top: -16px;
    left: 22px;
    padding: .15em 1em;
    border-radius: 999px;
    background: var(--sn-ink);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.6;
}

.sn-merit img {
    display: block;
    width: 120px;
    margin: 0 auto 12px;
}

.sn-merit h4 {
    margin-bottom: 12px;
    font-size: 1.4em;
    line-height: 1.4;
    word-break: auto-phrase;
    
    
    @media (min-width: 769px) {
        min-height: 62px;
    }
}

.sn-merit h4 b {
    color: var(--sn-coral-deep);
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    padding: 0 4px;
}

.sn-merit p {
    color: var(--sn-ink-soft);
    /* font-size: .9em; */
    text-align: left;
}

/* ------------------------------------------------------------
   SIMULATION
------------------------------------------------------------ */
.sn-sim-box {
    border: 3px solid var(--sn-ink);
    border-radius: 24px;
    background: #fff;
    box-shadow: 8px 8px 0 var(--sn-ink);
    overflow: hidden;
}

.sn-sim-table {
    width: 100%;
    border-collapse: collapse;
    /*font-size: .95em;*/
}

.sn-sim-table thead th {
    padding: 16px 20px;
    background: var(--sn-ink);
    color: #fff;
    font-size: .9em;
    text-align: center;
}

.sn-sim-table thead th:nth-child(2) {
    text-align: center;
}

.sn-sim-table tbody th,
.sn-sim-table tbody td {
    padding: 10px 20px;
    border-top: 2px solid var(--sn-ink);
    text-align: left;
    vertical-align: middle;
    line-height: 1.4;
    /* box-sizing: border-box; */
}

.sn-sim-table tbody th {
    /* text-align:center; */
}

.sn-sim-table tbody th div.table-heading {
    /* width: 34%; */
    font-weight: 700;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 4px 0px;
    max-width: 200px;
    margin: auto;
}

.sn-sim-table tbody th div.table-heading > div:first-child {
    width: 110px;
    /* border:1px solid red; */
    text-align: center;
}

.sn-sim-table tbody th img {
    width: 85px;
    /* border: 1px solid; */
}

.sn-sim-table tbody th.row {
}

.sn-sim-table tbody th,
.sn-sim-table tbody td:nth-child(2) {
    border-right: 2px dashed rgba(42, 36, 56, .2);
}

.sn-sim-table th span {
    display: block;
    color: var(--sn-ink-soft);
    font-size: .8em;
    font-weight: 400;
}

.sn-sim-table .sn-sim-pt {
    /* width: 22%; */
    color: var(--sn-coral-deep);
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    /* display: flex; */
}

.sn-sim-table .sn-sim-pt span {
    display:flex;
    justify-content:center;
    align-items: baseline;
    gap: 0 5px;
}

.sn-sim-table .sn-sim-pt small {
    /* display: block; */
    color: var(--sn-ink-soft);
    font-size: .45em;
    /* padding-left: 0.5em; */
}

.sn-sim-note {
    margin-top: 24px;
    color: var(--sn-ink-soft);
    /*font-size: .8em;*/
    /* text-align: center; */
    display: flex;
    justify-content: center;
}

/* ------------------------------------------------------------
   HOW TO START
------------------------------------------------------------ */
.sn-wrapper .sn-howto {
    background: linear-gradient(180deg, var(--sn-bg-cream) 0%, #f4f0dd 100%);
}

.sn-howto-list {
    display: flex;
    gap: 44px;
}

.sn-howto-list li {
    position: relative;
    flex: 1;
    padding: 28px 22px;
    border: 3px solid var(--sn-ink);
    border-radius: 24px;
    background: #fff;
    box-shadow: 6px 6px 0 var(--sn-ink);
    text-align: center;
}

.sn-howto-list li:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -44px;
    width: 44px;
    transform: translateY(-50%);
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.sn-howto-no {
    margin-bottom: 12px;
    color: var(--sn-coral-deep);
    font-size: 3em;
    font-weight: 700;
    line-height: 1;
}

.sn-howto-no span {
    display: block;
    margin-bottom: .4em;
    color: var(--sn-ink-soft);
    font-size: .25em;
    letter-spacing: .15em;
}

.sn-howto-list li:nth-child(2) .sn-howto-no {
    color: var(--sn-mint-deep);
}

.sn-howto-list li:nth-child(3) .sn-howto-no {
    color: var(--sn-yellow-deep);
}

.sn-howto-list img {
    display: block;
    height: 100px;
    margin: 0 auto 16px;
}

.sn-howto-list h4 {
    margin-bottom: 10px;
    font-size: 1.3em;
}

.sn-howto-txt {
    color: var(--sn-ink-soft);
    font-size: .9em;
    text-align: left;
}

/* ------------------------------------------------------------
   FAQ
------------------------------------------------------------ */
.sn-faq-list {
    display: grid;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
}

.sn-faq-list details {
    border: 3px solid var(--sn-ink);
    border-radius: 18px;
    background: #fff;
    box-shadow: 5px 5px 0 var(--sn-ink);
}

.sn-faq-list details[open] {
    box-shadow: 5px 5px 0 var(--sn-coral);
}

.sn-faq-list summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.sn-faq-list summary::-webkit-details-marker {
    display: none;
}

.sn-faq-list summary::before {
    content: "Q";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--sn-ink);
    border-radius: 50%;
    background: var(--sn-coral);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.sn-faq-list summary::after {
    content: "+";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 2px solid var(--sn-ink);
    border-radius: 50%;
    background: var(--sn-yellow);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: transform .3s, background .3s;
}

.sn-faq-list details[open] summary::after {
    background: var(--sn-mint);
    transform: rotate(45deg);
}

.sn-faq-a {
    padding: 0 24px 22px 72px;
    color: var(--sn-ink-soft);
    font-size: .95em;
}

/* ------------------------------------------------------------
   CTA
------------------------------------------------------------ */
.sn-wrapper .sn-cta {
    padding: 90px 24px;
    background:
        radial-gradient(circle at 10% 20%, rgba(255, 107, 107, .4), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(111, 211, 184, .4), transparent 40%),
        var(--sn-ink);
    color: #fff;
    text-align: center;
}

.sn-cta h3 {
    margin-bottom: 20px;
    font-size: clamp(24px, 3.6vw, 38px);
    line-height: 1.45;
}

.sn-cta .sn-hl-y {
    padding: 0 .25em;
    background: var(--sn-yellow);
    color: var(--sn-ink);
    font-weight: bold;
    display: inline-block;
}

.sn-cta-lead {
    margin-bottom: 36px;
    color: rgba(255, 255, 255, .85);
}

.sn-link {
margin-top: 2em;
}

.sn-link a {color: white;font-size: 34px;font-weight: bold;
    @media (max-width: 600px){
    font-size: 23px;
    }
}

/* ------------------------------------------------------------
   レスポンシブ
------------------------------------------------------------ */
@media (max-width: 768px) {
    .sn-wrapper {
        font-size: 14px;
    }

    .sn-pc {
        display: none;
    }

    .sn-wrapper section {
        padding: 50px 20px;
    }

    .sn-head {
        margin-bottom: 36px;
    }

    .sn-top {
        padding: 0px 0px 48px;
    }

    .sn-top h2 {
        margin-bottom: 28px;
    }

    .sn-merit {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 420px;
        margin: 0 auto;
    }

    .sn-sim-table thead th,
    .sn-sim-table tbody th,
    .sn-sim-table tbody td {
        padding: 12px 10px;
    }

    .sn-sim-table tbody th {
        width: 32%;
    }

    .sn-sim-table .sn-sim-pt {
        width: 22%;
        font-size: 1.8em;
    }

    .sn-howto-list {
        flex-direction: column;
        gap: 56px;
        max-width: 420px;
        margin: 0 auto;
    }

    .sn-howto-list li:not(:last-child)::after {
        content: "↓";
        top: auto;
        right: 0;
        bottom: -50px;
        left: 0;
        width: auto;
        transform: none;
    }

    .sn-faq-list summary {
        gap: 12px;
        padding: 14px;
    }

    .sn-faq-a {
        padding: 0 16px 18px;
    }

    .sn-wrapper .sn-cta {
        padding: 64px 20px;
    }

    .sn-wrapper .EventTop_boxLinkApp__Ro_o_ img {
        height: 44px;
    }
    .sn-sim-table tbody th div.table-heading {
    flex-direction: column;
    }
    .sn-sim-table .sn-sim-pt span {
         flex-direction:column;
         align-items: center;
         font-weight: bold;
    }
    .sn-sim-table .sn-sim-pt small {
        font-size: 0.6em;
    }
    .sn-sim-table tbody th div.table-heading > div:first-child {
        width: 80px;
    }
    .sn-sim-table tbody th img {
        width: 50px;
    }
}