@charset "UTF-8";

/* ========================================
   みんなのオンクリ AGA/ED LP
   Faithful reproduction of East Clinic AGA LP
   Colors: Navy #1e2678, Gold #f4a904
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

html {
    scroll-behavior: smooth;
    font-family: "Noto Sans JP", sans-serif;
}

/* reset */
html,
body,
p {
    margin: 0;
    padding: 0;
}

body {
    background: #1e2678;
}

p img {
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.img-wrapper {
    font-size: 0;
}

.mb-5 { margin-bottom: 5%; }
.mb-8 { margin-bottom: 8%; }
.mb-6 { margin-bottom: 6%; }
.mb-13 { margin-bottom: 13%; }
.mb-25 { margin-bottom: 25%; }
.mb-30 { margin-bottom: 30%; }

.pointer { cursor: pointer; }

/* ========================================
   Main Wrapper (mobile-first, 480px max)
   ======================================== */
.main-wrapper {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #ffffff;
}

/* Side panels (desktop only) */
.side { display: none; }

.left-side-wrapper {
    position: absolute;
    top: 50%;
    right: 240px;
    transform: translateY(-50%);
    height: 85%;
    aspect-ratio: 102 / 150;
    width: auto;
    display: flex;
    align-items: center;
}

.left-side-wrapper-inner {
    width: 65%;
    margin: 0 auto;
}

.right-side-item-01 {
    position: absolute;
    top: 50%;
    left: 240px;
    transform: translateY(-50%);
    height: 85%;
    aspect-ratio: 102 / 150;
    width: 160%;
}

@media (min-width: 1900px) {
    .right-side-item-01 { width: 150%; }
}


/* ========================================
   MV (Main Visual)
   ======================================== */
.mv {
    margin-top: calc(100% / 300 * 29 * -1);
    position: relative;
}

.mv-banner {
    margin-top: calc(100% / 1499 * 18 * -1);
}

@media (max-width: 480px) {
    .mv-banner {
        margin-top: calc(100% / 1499 * 20 * -1);
    }
}

/* mv next (anchor navigation) */
.mv-next {
    margin-top: 15%;
    margin-bottom: 18%;
}

.anchors {
    list-style: none;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20%;
    padding-bottom: 20%;
    background-position: center center;
    background-size: cover;
    padding-left: 5%;
    padding-right: 5%;
}

.anchors li+li {
    margin-top: 7%;
}


/* what section */
.what-section {}

/* how-to-choose-section */
.how-to-choose-section {
    margin-top: 4%;
}


/* ========================================
   Flow Tab (診察の流れ)
   ======================================== */
.flow-tab {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-left: 0;
    list-style: none;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    gap: 2.5%;
    margin-bottom: -4.5%;
    margin-top: 3%;
}

.flow-tab li {
    cursor: pointer;
}

.tab-wrapper {
    display: none;
    position: relative;
}

.tab-wrapper.active {
    display: block;
}

.cv-in-tab {
    position: absolute;
    width: 85%;
    left: 7.5%;
    top: 29.5%;
}


/* ========================================
   CV Fixed Banner (sticky CTA)
   ======================================== */
.cv-fixed-banner {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    gap: 3%;
    background: rgba(255, 255, 255, 0.7);
    position: sticky;
    bottom: 0;
    padding: 2% 5%;
    z-index: 3;
}


/* ========================================
   Footer
   ======================================== */
.footer {
    background: #1e2678;
    padding: 0.1rem;
    border-bottom: 8px solid #f4a904;
}

.footer-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    list-style: none;
    padding-left: 0;
    row-gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.footer-list li {
    font-weight: bold;
    text-align: center;
    font-size: 0.75rem;
}

.footer-list li a {
    color: #fff;
}

.footer-copy {
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}


/* ========================================
   CV (Call to Action) sections
   ======================================== */
.cv {
    padding: 8rem 0;
}

.cv-title {
    margin-bottom: 2.5rem;
}

.cv-btn {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

.cv-btn+.cv-btn {
    margin-top: 2.5rem;
}

.cv-btn a {
    display: block;
    transition: transform 0.2s ease;
}

.cv-btn a:hover {
    transform: translateY(-2px);
}

/* ========================================
   Desktop Layout (>481px)
   ======================================== */
@media (min-width: 481px) {
    .main-wrapper {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
        position: relative;
        z-index: 2;
    }

    .side {
        display: block;
        position: fixed;
        top: 0;
        width: 50vw;
        height: 100vh;
        padding: 1rem;
        box-sizing: border-box;
    }

    .left-side {
        left: 0;
        background-color: #1e2678;
        color: #fff;
    }

    .right-side {
        right: 0;
        background-color: #f4a904;
        color: #fff;
    }

    .left-side-menu-list {
        padding-left: 0;
        margin-bottom: 2.5rem;
    }

    .left-side-menu-list li {
        font-weight: bold;
        font-size: 1.15rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
        list-style: none;
    }

    .left-side-menu-list li::before {
        content: "";
        width: 0.9rem;
        height: 0.9rem;
        background: #f4a904;
        border-radius: 9999px;
        display: block;
    }

    .left-side-menu-list li a {
        text-decoration: none;
        color: #ffffff;
    }

    .cv-fixed-banner.sticky {
        display: none;
    }
}

/* PC side panels display rules */
@media (min-width: 481px) and (max-width: 1150px) {
    .left-side-wrapper,
    .right-side-item-01 {
        display: none;
    }
}

@media (min-width: 1150px) {
    .left-side-wrapper-inner { margin-right: 3%; }
    .right-side-item-01 { height: 60%; }
}

@media (min-width: 1400px) {
    .left-side-wrapper-inner { margin-right: auto; }
    .right-side-item-01 { height: 85%; }
}


/* ========================================
   Accordion
   ======================================== */
:root {
    --accordion-duration: 400ms;
    --accordion-easing: ease;
}

.accordion img {
    max-width: 100%;
    height: auto;
}

.accordion01 { margin-bottom: 10px; }

.accordion-header {
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    padding: 0;
    z-index: 2;
}

.accordion-icon {
    position: absolute;
    top: 0;
    bottom: min(5px, calc(5vw / 4.8));
    right: min(26px, calc(26vw / 4.8));
    margin: auto;
    width: min(18px, calc(18vw / 4.8));
    height: min(18px, calc(18vw / 4.8));
}

.accordion03 .accordion-icon {
    right: min(12px, calc(12vw / 4.8));
}

.accordion-icon::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: min(5px, calc(5vw / 4.8));
    background: #fff;
}

.accordion02 .accordion-icon::before,
.accordion03 .accordion-icon::before {
    background: #1e2678;
}

.accordion-icon::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(5px, calc(5vw / 4.8));
    height: 100%;
    background: #fff;
}

.accordion02 .accordion-icon::after,
.accordion03 .accordion-icon::after {
    background: #1e2678;
}

.accordion-header[aria-expanded="true"] .accordion-icon::after {
    display: none;
}

.accordion-panel {
    overflow: hidden;
    transition: height var(--accordion-duration) var(--accordion-easing);
    will-change: height;
}

.accordion03 .accordion-panel {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-panel { transition: none; }
}

.accordion-panel-hidden {
    overflow: hidden;
    height: 100%;
}


/* ========================================
   FAQ Section
   ======================================== */
.faq {
    padding: min(51px, calc(51vw / 4.8)) 0px min(51px, calc(51vw / 4.8)) min(22px, calc(20vw / 4.8));
    border-top: min(18px, calc(18vw / 4.8)) solid #1e2678;
    border-bottom: min(18px, calc(18vw / 4.8)) solid #1e2678;
    background: #e7e7e7;
}

.faq-title {
    margin-bottom: min(30px, calc(60vw / 7.5));
}

.faq-f {
    position: relative;
}

.faq-f:before {
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 40"><text x="1" y="32" font-size="32" font-weight="bold" fill="%231e2678" font-family="Noto Sans JP,sans-serif">Q</text></svg>') center center / contain no-repeat;
    width: min(14px, calc(14vw / 4.8));
    height: min(28px, calc(28vw / 4.8));
    display: block;
    position: absolute;
    left: max(-26px, calc(-26vw / 4.8));
    top: 0;
    bottom: 0;
    margin: auto;
}

.faq-a {
    position: relative;
}

.faq-a:before {
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 40"><text x="2" y="32" font-size="32" font-weight="bold" fill="%23f4a904" font-family="Noto Sans JP,sans-serif">A</text></svg>') center center / contain no-repeat;
    width: min(14px, calc(14vw / 4.8));
    height: min(28px, calc(28vw / 4.8));
    display: block;
    position: absolute;
    left: max(-26px, calc(-26vw / 4.8));
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    transition: opacity .14s ease;
}

.faq-f[aria-expanded="true"]+.faq-a:before {
    opacity: 1;
}

.faq-a__text {
    font-size: min(16px, calc(16vw / 4.8));
    text-align: left;
    font-weight: 500;
    width: 100%;
    line-height: 1.6;
}

.faq-item .accordion-panel {
    width: 92%;
    margin: 0 auto;
    position: relative;
    top: -10px;
    z-index: 1;
}

.accordion03 .accordion-item:not(:first-of-type) {
    margin-top: min(10px, calc(10vw / 4.8));
}


/* ========================================
   LINE CTA Button Styles
   ======================================== */
.line-cta-section {
    background: #06C755;
    padding: 3rem 1.5rem;
    text-align: center;
}

.line-cta-section__title {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.line-cta-section__sub {
    color: rgba(255,255,255,0.85);
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}

.line-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #06C755;
    font-size: 1.1rem;
    font-weight: 900;
    padding: 16px 32px;
    border-radius: 60px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 92%;
    max-width: 400px;
}

.line-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

.line-cta-btn svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Sticky LINE CTA (replaces original fixed banner on SP) */
.cv-fixed-banner .line-cta-inline {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #06C755;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.cv-fixed-banner .line-cta-inline:hover {
    transform: translateY(-1px);
}

.cv-fixed-banner .line-cta-inline svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Phone CTA in sticky banner */
.cv-fixed-banner .phone-cta-inline {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f4a904;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.cv-fixed-banner .phone-cta-inline:hover {
    transform: translateY(-1px);
}


/* ========================================
   Utility Classes - Margin
   ======================================== */
.u-marA0 { margin: 0 !important; }
.u-marT0 { margin-top: 0 !important; }
.u-marT5 { margin-top: 5px !important; }
.u-marT10 { margin-top: 10px !important; }
.u-marT15 { margin-top: 15px !important; }
.u-marT20 { margin-top: 20px !important; }
.u-marT25 { margin-top: 25px !important; }
.u-marT30 { margin-top: 30px !important; }
.u-marT40 { margin-top: 40px !important; }
.u-marT50 { margin-top: 50px !important; }
.u-marT60 { margin-top: 60px !important; }
.u-marT70 { margin-top: 70px !important; }
.u-marT80 { margin-top: 80px !important; }
.u-marT90 { margin-top: 90px !important; }
.u-marT120 { margin-top: 120px !important; }
.u-marT240 { margin-top: 240px !important; }
.u-marB0 { margin-bottom: 0 !important; }
.u-marB5 { margin-bottom: 5px !important; }
.u-marB10 { margin-bottom: 10px !important; }
.u-marB15 { margin-bottom: 15px !important; }
.u-marB20 { margin-bottom: 20px !important; }
.u-marB25 { margin-bottom: 25px !important; }
.u-marB30 { margin-bottom: 30px !important; }
.u-marB40 { margin-bottom: 40px !important; }
.u-marB50 { margin-bottom: 50px !important; }
.u-marB60 { margin-bottom: 60px !important; }
.u-marB70 { margin-bottom: 70px !important; }
.u-marB80 { margin-bottom: 80px !important; }

/* ========================================
   Utility Classes - Width
   ======================================== */
.u-wid40Per { max-width: 40% !important; width: 100%; }
.u-wid60Per { max-width: 60% !important; width: 100%; }
.u-wid85Per { max-width: 85% !important; width: 100%; }
.u-wid90Per { max-width: 90% !important; width: 100%; }
.u-wid95Per { max-width: 95% !important; width: 100%; }
.u-wid100Per { max-width: 100% !important; width: 100%; }

.u-wid100 { max-width: 100px !important; width: 100%; }
.u-wid150 { max-width: 150px !important; width: 100%; }
.u-wid200 { max-width: 200px !important; width: 100%; }
.u-wid250 { max-width: 250px !important; width: 100%; }
.u-wid300 { max-width: 300px !important; width: 100%; }
.u-wid350 { max-width: 350px !important; width: 100%; }
.u-wid400 { max-width: 400px !important; width: 100%; }

@media print, screen and (min-width: 768px) {
    .u-wid250_pc { max-width: 250px !important; width: 100%; }
    .u-wid300_pc { max-width: 300px !important; width: 100%; }
}

@media screen and (max-width: 767px) {
    .u-wid250_sp { max-width: 250px !important; width: 100%; }
}


/* ========================================
   Utility Classes - Alignment
   ======================================== */
.u-aliC { text-align: center; }
.u-aliL { text-align: left; }
.u-aliR { text-align: right; }
.u-contC { margin: 0 auto; }
.u-contL { margin-left: 0; margin-right: auto; }
.u-contR { margin-left: auto; margin-right: 0; }

/* ========================================
   Utility Classes - Display
   ======================================== */
.u-sp { display: none !important; }

@media screen and (max-width: 768px) {
    .u-pc { display: none !important; }
    .u-sp { display: block !important; }
}

.u-hover { transition: 0.3s; }
.u-hover:hover { opacity: 0.7; }


/* ========================================
   Layout Helpers
   ======================================== */
.l-inner {
    max-width: 93%;
    margin: 0 auto;
}

.s-logo {
    max-width: 400px;
    width: 100%;
    height: auto;
    padding: 8px 12px;
}

@media screen and (max-width: 600px) {
    .s-logo {
        max-width: 320px;
        padding: 8px;
    }
}

.s-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.s-fv-price {
    position: relative;
    top: -30px;
}

@media screen and (max-width: 600px) {
    .s-fv-price {
        top: -24px;
    }
}

.anchors .l-inner a img {
    height: auto;
    width: 100%;
    object-fit: contain;
}


/* ========================================
   Medical Disclaimer Table
   ======================================== */
.cr__sec_11 {
    --custom-rem: 10px;
    font-size: 16px;
}

.cr__ttl_h4 {
    width: calc(var(--custom-rem) * 90);
    margin: calc(var(--custom-rem) * 5) auto 0;
    font-size: calc(var(--custom-rem) * 1.8);
    font-weight: bold;
    line-height: 1.5;
    color: #121852;
}

@media(max-width: 767px) {
    .cr__ttl_h4 {
        width: calc(var(--custom-rem)*90);
        margin: calc(var(--custom-rem)*5) auto 0;
        font-size: calc(var(--custom-rem)*2.4);
    }
}

.cr_table_wrap {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.cr__sec_11_table {
    width: calc(var(--custom-rem)*90);
    margin: calc(var(--custom-rem)*1.5) auto calc(var(--custom-rem)*4);
    table-layout: auto;
    font-size: calc(var(--custom-rem)*1.2);
    font-weight: normal;
    line-height: 1.5;
}

@media(max-width: 767px) {
    .cr__sec_11_table {
        width: calc(var(--custom-rem)*100);
        margin: calc(var(--custom-rem)*1.5) auto calc(var(--custom-rem)*4);
        font-size: calc(var(--custom-rem)*1.4);
    }
}

.cr__sec_11_table>tbody>tr>th {
    width: 26%;
    height: calc(var(--custom-rem)*8);
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    background-color: #e7e7e7;
    border-left: 1px solid #b6b6b6;
    border-top: 1px solid #b6b6b6;
    border-bottom: 1px solid #b6b6b6;
}

@media(max-width: 767px) {
    .cr__sec_11_table>tbody>tr>th {
        width: 20%;
        height: calc(var(--custom-rem)*4);
    }
}

.cr__sec_11_table>tbody>tr>th:nth-child(1) {
    border-right: 1px solid #b6b6b6;
}

.cr__sec_11_table>tbody>tr>td {
    width: 74%;
    height: calc(var(--custom-rem)*6);
    text-align: left;
    padding: calc(var(--custom-rem)*1) calc(var(--custom-rem)*2);
    vertical-align: middle;
    border: 1px solid #b6b6b6;
}

@media(max-width: 767px) {
    .cr__sec_11_table>tbody>tr>td {
        width: 70%;
        height: calc(var(--custom-rem)*4);
        padding: calc(var(--custom-rem)*1.5) calc(var(--custom-rem)*3);
    }
}

.cr__sec_11_table>tbody>tr>td a {
    text-decoration: underline;
}

@media(min-width: 768px) {
    .cr__sec_11_table>tbody>tr>td a:hover {
        text-decoration: none;
    }
}


/* ========================================
   Scroll Fade-in Animation
   ======================================== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        transition: none;
        opacity: 1;
        transform: none;
    }
}