/* ==============================================
   SWEET FRILL
   2026.09.06 RENEWAL
============================================== */

:root {

    --sf-pink:#ef8fb6;
    --sf-deep-pink:#d95891;

    --sf-light-pink:#fff2f7;
    --sf-white:#fffdfd;

    --sf-gold:#c6a15b;
    --sf-light-gold:#efe0ba;

    --sf-brown:#59424c;

    --sf-border:#efd5df;

    --sf-shadow:
      0 18px 50px rgba(106,68,84,.12);

}


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

body.renewal {

    background:
      radial-gradient(
        circle at top,
        #fff 0,
        #fff7fa 35%,
        #fffafb 100%
      );

}

.section-en {

    margin:0 0 8px;

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-size:.78rem;
    letter-spacing:.22em;

    color:var(--sf-gold);

    font-weight:700;

}

.section-title-center {

    text-align:center;

}

.section-title-center h2 {

    margin:0 0 16px;

    color:var(--sf-deep-pink);

    font-size:
      clamp(1.55rem,3vw,2.3rem);

}

.center {

    text-align:center;

}

.pc-only {
    display:inline;
}

.sp-only {
    display:none;
}


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

.site-header {

    position:fixed;

    top:14px;
    left:50%;

    transform:translateX(-50%);

    width:
      min(calc(100% - 32px),1400px);

    box-sizing:border-box;

    padding:10px 20px;

    border-radius:999px;

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

    backdrop-filter:
      blur(16px);

    border:
      1px solid rgba(198,161,91,.25);

    box-shadow:
      0 8px 30px rgba(82,50,65,.08);

    display:flex;

    align-items:center;

    justify-content:
      space-between;

    z-index:1000;

}

.site-logo {

    display:flex;

    align-items:center;

}

.site-logo img {

    display:block;

    width:auto;
    height:54px;

    object-fit:contain;

}


.site-header nav {

    display:flex;

    align-items:center;

}


.site-header nav ul {

    display:flex;

    list-style:none;

    gap:2px;

    margin:0;
    padding:0;

    align-items:center;

}


.site-header nav ul li a {

    display:block;

    padding:8px 10px;

    border-radius:999px;

    font-size:.85rem;

    color:var(--sf-brown);

}


.site-header nav ul li a:hover {

    background:
      var(--sf-light-pink);

    color:
      var(--sf-deep-pink);

    text-decoration:none;

}


.nav-quiz {

    color:
      var(--sf-deep-pink) !important;

    border:
      1px solid var(--sf-border);

    background:
      #fff8fb;

}


.hamburger {

    display:none;

    background:none;
    border:0;

    flex-direction:column;

    gap:5px;

    padding:8px;

}

.hamburger span {

    width:24px;
    height:2px;

    background:
      var(--sf-brown);

    border-radius:999px;

}


/* ========================
   HERO
======================== */

.new-hero {

    position:relative;

    overflow:hidden;

    padding:
      160px 24px 95px;

    text-align:center;

    background:

      radial-gradient(
        circle at 20% 25%,
        rgba(166,205,255,.20),
        transparent 24%
      ),

      radial-gradient(
        circle at 80% 32%,
        rgba(239,143,182,.20),
        transparent 26%
      ),

      linear-gradient(
        180deg,
        #fff 0%,
        #fff7fa 60%,
        #fffdfd 100%
      );

}


.new-hero-inner {

    position:relative;

    max-width:1100px;

    margin:auto;

    z-index:2;

}


.new-hero-kicker {

    color:
      var(--sf-gold);

    font-size:.8rem;

    letter-spacing:.24em;

    text-transform:uppercase;

    margin-bottom:16px;

}


.new-hero-logo img {

    width:
      min(400px,75vw);

    height:auto;

}


.new-hero h1 {

    margin:
      28px 0 12px;

    color:
      var(--sf-deep-pink);

    font-size:
      clamp(2rem,5vw,4rem);

    line-height:1.35;

}


.new-hero-copy {

    margin:0 0 36px;

    color:
      var(--sf-brown);

    font-size:
      clamp(1rem,2vw,1.3rem);

    line-height:2;

}


.new-hero-visual {

    position:relative;

    max-width:900px;

    margin:
      36px auto 32px;

    border-radius:36px;

    padding:10px;

    background:

      linear-gradient(
        135deg,
        #fff,
        #f5e7c9,
        #fff
      );

    box-shadow:
      var(--sf-shadow);

}


.new-hero-visual img {

    width:100%;

    display:block;

    border-radius:28px;

}


.new-hero-actions {

    display:flex;

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;

}


/* ========================
   BUTTON
======================== */

.jewel-button {

    display:inline-flex;

    min-width:220px;

    align-items:center;

    justify-content:center;

    padding:
      13px 26px;

    border-radius:999px;

    font-weight:700;

    text-decoration:none;

    transition:
      transform .2s,
      box-shadow .2s;

}


.jewel-button.primary {

    color:#fff;

    background:

      linear-gradient(
        135deg,
        #df6097,
        #f5a2c3
      );

    box-shadow:
      0 10px 24px
      rgba(217,88,145,.25);

}


.jewel-button.secondary {

    background:#fff;

    color:
      var(--sf-deep-pink);

    border:
      1px solid
      var(--sf-border);

}


.jewel-button:hover {

    transform:
      translateY(-2px);

    text-decoration:none;

}


/* ========================
   JEWEL CONCEPT
======================== */

.jewel-concept {

    max-width:1200px;

    margin:
      0 auto;

    padding:
      90px 24px;

}


.jewel-list {

    margin-top:40px;

    display:grid;

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

    gap:16px;

}


.jewel-chip {

    min-height:110px;

    padding:20px;

    border-radius:22px;

    background:#fff;

    border:
      1px solid
      var(--sf-border);

    box-shadow:
      0 6px 20px
      rgba(90,58,69,.07);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:
      var(--sf-brown);

    transition:
      .25s ease;

}


.jewel-chip:hover {

    transform:
      translateY(-4px);

    box-shadow:
      var(--sf-shadow);

    text-decoration:none;

}


.jewel-symbol {

    font-size:1.5rem;

    margin-bottom:5px;

}


.jewel-chip > span:nth-child(2) {

    font-family:Georgia,serif;

    font-size:.72rem;

    letter-spacing:.12em;

}


.jewel-chip strong {

    margin-top:5px;

}


/* GEM COLORS */

.sapphire .jewel-symbol,
.jewel-member-card.sapphire .member-gem {
    color:#438ee8;
}

.lemon .jewel-symbol,
.jewel-member-card.lemon .member-gem {
    color:#e8c943;
}

.diamond .jewel-symbol,
.jewel-member-card.diamond .member-gem {
    color:#c8ccd8;
}

.aquamarine .jewel-symbol,
.jewel-member-card.aquamarine .member-gem {
    color:#75cce5;
}

.mint .jewel-symbol,
.jewel-member-card.mint .member-gem {
    color:#8ed7b0;
}

.ruby .jewel-symbol,
.jewel-member-card.ruby .member-gem {
    color:#e44e5e;
}

.kunzite .jewel-symbol,
.jewel-member-card.kunzite .member-gem {
    color:#dd429c;
}

.tourmaline .jewel-symbol,
.jewel-member-card.tourmaline .member-gem {
    color:#ff9c78;
}

.amethyst .jewel-symbol,
.jewel-member-card.amethyst .member-gem {
    color:#9568ce;
}


/* ========================
   QUIZ
======================== */

.oshi-quiz-v2 {

    max-width:850px;

    margin:
      30px auto 100px;

    padding:
      55px 30px;

    text-align:center;

    border-radius:32px;

    background:

      linear-gradient(
        135deg,
        #fff,
        #fff2f8,
        #fff
      );

    border:
      1px solid
      var(--sf-light-gold);

    box-shadow:
      var(--sf-shadow);

}


.quiz-crown {

    color:
      var(--sf-gold);

    font-size:2rem;

}


.quiz-version {

    font-size:
      clamp(1.8rem,4vw,2.8rem);

    color:
      var(--sf-deep-pink);

    font-weight:700;

}


.quiz-version span {

    display:inline-block;

    margin-left:5px;

    padding:
      2px 10px;

    font-family:
      Georgia,serif;

    border-radius:999px;

    color:
      var(--sf-gold);

    border:
      1px solid
      var(--sf-light-gold);

    background:#fff;

    font-size:.5em;

}


.oshi-quiz-v2 h2 {

    margin:18px 0;

    color:
      var(--sf-brown);

}


.quiz-feature-list {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin:
      25px 0;

}


.quiz-feature-list span {

    padding:
      6px 14px;

    border-radius:999px;

    background:#fff;

    border:
      1px solid
      var(--sf-border);

    font-size:.85rem;

}


/* ========================
   MEMBERS
======================== */

.members-main {

    max-width:1200px;

    margin:
      135px auto 60px;

    padding:
      40px 24px;

}


.members-heading {

    text-align:center;

    margin-bottom:50px;

}


.members-heading h1 {

    margin:0 0 15px;

    font-size:
      clamp(2rem,5vw,3.5rem);

    color:
      var(--sf-deep-pink);

}


.jewel-member-grid {

    display:grid;

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

    gap:24px;

}


.jewel-member-card {

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:28px;

    border:
      1px solid
      var(--sf-border);

    box-shadow:
      0 8px 30px
      rgba(90,58,69,.08);

}


.member-image-area {

    position:relative;

    aspect-ratio:
      4 / 5;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    overflow:hidden;

    background:

      linear-gradient(
        180deg,
        #fff,
        #fff7fa
      );

}


.member-image-area img {

    width:100%;
    height:100%;

    object-fit:contain;

}


.member-gem {

    position:absolute;

    z-index:2;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

    display:flex;

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

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

    border-radius:50%;

    box-shadow:
      0 5px 16px
      rgba(0,0,0,.10);

    font-size:1.5rem;

}


.member-info {

    padding:
      22px 22px 25px;

    text-align:center;

}


.member-gem-en {

    margin:0;

    color:
      var(--sf-gold);

    font-size:.72rem;

    font-family:
      Georgia,serif;

    letter-spacing:.14em;

}


.member-gem-ja {

    margin:
      3px 0 15px;

    font-size:.9rem;

    font-weight:700;

}


.member-info h2 {

    margin:0;

    color:
      var(--sf-deep-pink);

    font-size:1.45rem;

}


.member-kana {

    margin:
      3px 0 18px;

    font-size:.8rem;

    color:#997c88;

}


.member-profile {

    margin:0;

    border-top:
      1px solid
      #f2e5ea;

    border-bottom:
      1px solid
      #f2e5ea;

}


.member-profile div {

    display:grid;

    grid-template-columns:
      100px 1fr;

    text-align:left;

    padding:
      8px 0;

}


.member-profile dt {

    color:
      var(--sf-gold);

    font-family:
      Georgia,serif;

    font-size:.7rem;

    letter-spacing:.08em;

}


.member-profile dd {

    margin:0;

    font-size:.9rem;

}


.member-social {

    margin-top:18px;

    display:flex;

    justify-content:center;

    gap:8px;

    flex-wrap:wrap;

}


.member-social a {

    padding:
      5px 11px;

    border-radius:999px;

    border:
      1px solid
      var(--sf-border);

    background:
      #fff8fb;

    font-size:.75rem;

}


/* ========================
   ABOUT
======================== */

.about-hero {

    margin-top:0;

    padding:
      180px 24px 90px;

    text-align:center;

    background:

      linear-gradient(
        180deg,
        #fff,
        #fff1f7
      );

}


.about-hero h1 {

    margin:5px 0 15px;

    color:
      var(--sf-deep-pink);

    font-size:
      clamp(2rem,5vw,3.5rem);

}


.about-hero-copy {

    font-size:
      clamp(1rem,2vw,1.3rem);

    line-height:2;

}


.about-main {

    max-width:850px;

    margin:
      60px auto;

    padding:
      0 24px;

}


.about-main section {

    margin:
      0 0 70px;

    padding:
      40px;

    border-radius:28px;

    background:#fff;

    border:
      1px solid
      var(--sf-border);

    box-shadow:
      0 8px 30px
      rgba(90,58,69,.06);

}


.about-main h2 {

    color:
      var(--sf-deep-pink);

}


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

@media(max-width:900px) {

    .site-header {

        top:10px;

        width:
          calc(100% - 20px);

        border-radius:24px;

        padding:
          8px 14px;

    }


    .site-logo img {

        height:46px;

    }


    .hamburger {

        display:flex;

    }


    .site-header nav ul {

        display:none;

        position:absolute;

        top:
          calc(100% + 10px);

        right:0;

        width:
          min(330px,90vw);

        box-sizing:border-box;

        padding:10px;

        flex-direction:column;

        align-items:stretch;

        border-radius:22px;

        background:
          rgba(255,253,253,.97);

        border:
          1px solid
          var(--sf-border);

        box-shadow:
          var(--sf-shadow);

    }


    .site-header nav ul.active {

        display:flex;

    }


    .site-header nav ul li a {

        padding:
          12px 15px;

    }


    .sns-desktop {

        display:none;

    }


    .jewel-list {

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

    }


    .jewel-member-grid {

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

    }

}


@media(max-width:640px) {

    .pc-only {

        display:none;

    }

    .sp-only {

        display:inline;

    }


    .new-hero {

        padding:
          125px 15px 65px;

    }


    .new-hero h1 {

        font-size:2rem;

    }


    .new-hero-copy {

        font-size:.95rem;

    }


    .new-hero-visual {

        border-radius:22px;

        padding:6px;

    }


    .new-hero-visual img {

        border-radius:17px;

    }


    .new-hero-actions {

        flex-direction:column;

    }


    .jewel-button {

        width:100%;

        box-sizing:border-box;

    }


    .jewel-concept {

        padding:
          65px 16px;

    }


    .jewel-list {

        grid-template-columns:1fr;

    }


    .oshi-quiz-v2 {

        margin:
          20px 15px 70px;

        padding:
          40px 18px;

    }


    .members-main {

        margin-top:105px;

        padding:
          30px 16px;

    }


    .jewel-member-grid {

        grid-template-columns:1fr;

    }


    .about-main {

        padding:
          0 15px;

    }


    .about-main section {

        padding:
          26px 20px;

    }

}