@charset "UTF-8";

/* Typography follows c_miwake.css; transparent-product styles stay page-scoped. */
@font-face {
    font-family: "MiuraGotic Propo";
    src: url("/font/miuragoticpropo-wf.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.page-math-clear #main { --math-clear-ink: #82757b; color: var(--math-clear-ink); }
.page-math-clear .math-clear-product {
    width: 600px;
    max-width: 100%;
    margin: 0 auto 60px;
    color: var(--math-clear-ink);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0;
    container-type: inline-size;
}
.page-math-clear .math-clear-product * { box-sizing: border-box; }
.page-math-clear .math-clear-product p,
.page-math-clear .math-clear-product ul,
.page-math-clear .math-clear-product h2,
.page-math-clear .math-clear-product h3 { margin: 0; padding: 0; }
.page-math-clear .math-clear-product ul { list-style: none; }
.page-math-clear .math-clear-product img { display: block; width: 100%; max-width: 100%; height: auto; }
.page-math-clear .math-clear-product a:focus-visible { outline: 3px solid #2575ae; outline-offset: 4px; }
.page-math-clear #main .math-clear-h1 {
    width: 600px;
    max-width: 100%;
    margin: 0 auto 20px;
    padding: 28px 12px;
    border: 2px dotted #d7cdd1;
    color: var(--math-clear-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}
.page-math-clear .math-clear-slider { margin: 35px 0 44px; padding-bottom: 35px; border-bottom: 60px solid #e6e6e6; }
.page-math-clear #mainSlide { width: 100%; margin: 0; padding: 0; }
.page-math-clear #mainSlide:not(.slick-initialized) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.page-math-clear #mainSlide:not(.slick-initialized) > li { flex: 0 0 100%; scroll-snap-align: start; }
.page-math-clear #mainSlide .slick-slide { height: auto; }
.page-math-clear #mainSlide .slick-dots { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 20px 5% 0; padding: 0; }
.page-math-clear #mainSlide .slick-dots li { display: block; width: auto; height: auto; margin: 0; padding: 0; }
.page-math-clear #mainSlide .slick-dots button { display: block; width: 27px; height: 26px; margin: 0; padding: 0; border: 0; background: transparent; font-size: 0; cursor: pointer; }
.page-math-clear #mainSlide .slick-dots button::before { content: ""; position: static; display: block; width: 14px; height: 14px; margin: auto; border-radius: 50%; background: #e4e4e4; opacity: 1; }
.page-math-clear #mainSlide .slick-active button::before { background: #a3a3a3; }
.page-math-clear .math-clear-product .noukiBnr { width: 100%; margin: 0 auto 32px; padding: 0; }
.page-math-clear .math-clear-product .math-clear-order { width: 100%; margin: 0 auto 60px; }
.page-math-clear .math-clear-product .math-clear-order a { display: block; }
.page-math-clear .math-clear-product .math-clear-logo { margin: 30px 0 0; }
.page-math-clear .math-clear-product .math-clear-price { margin: 0 0 28px; }
.page-math-clear .math-clear-product .math-clear-features { margin: 12px 0 18px; }
.page-math-clear .math-clear-product .math-clear-copy,
.page-math-clear .math-clear-product .math-clear-caption,
.page-math-clear .math-clear-product .math-clear-note,
.page-math-clear .math-clear-product .math-clear-balloon { font-feature-settings: normal; font-kerning: none; letter-spacing: .02em; }
.page-math-clear .math-clear-product .math-clear-copy { margin: 2.5cqi 4cqi 0; font-size: 3cqi; line-height: 1.722222; text-align: left; }
.page-math-clear .math-clear-product .math-clear-caption { margin: 0 4% 4cqi; font-size: 3cqi; line-height: 1.722222; text-align: center; }
.page-math-clear .math-clear-product .math-clear-intro-caption { margin-bottom: 6.666667cqi; }
.page-math-clear .math-clear-product .math-clear-section { width: auto; margin: 0 0 16.666667cqi; padding: 0; }
.page-math-clear .math-clear-product .math-clear-overview { margin-top: 16cqi; margin-bottom: 23cqi; }
.page-math-clear .math-clear-product .math-clear-overview .math-clear-picture + .math-clear-picture { margin-top: 8cqi; }
.page-math-clear .math-clear-product .math-clear-note {
    position: relative;
    width: 93%;
    margin: 0 auto 9cqi !important;
    padding: 4cqi 2cqi;
    border: 0;
    border-radius: 6px;
    background: #f2f0f1;
    color: var(--math-clear-ink);
    font-size: 3.333333cqi;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}
.page-math-clear .math-clear-note::after { content: ""; position: absolute; top: calc(100% - 1px); left: calc(50% - 3.5cqi); border-top: 4.5cqi solid #f2f0f1; border-right: 3.5cqi solid transparent; border-left: 3.5cqi solid transparent; }
.page-math-clear .math-clear-product .math-clear-note--intro { width: 100%; margin-bottom: 0 !important; border-radius: 0; }
.page-math-clear .math-clear-note--intro::after { display: none; }
.page-math-clear .math-clear-product .math-clear-balloon {
    position: relative;
    display: block;
    width: 83.333333%;
    margin: 0 auto 4.333333cqi !important;
    padding: 1.466667cqi 1.333333cqi;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--math-clear-ink);
    font-size: 4.666667cqi;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .03em;
    text-align: center;
}
.page-math-clear .math-clear-balloon::after { content: ""; position: absolute; top: calc(100% - 1px); left: 48%; border-top: 2.666667cqi solid var(--math-clear-ink); border-right: 3cqi solid transparent; }
.page-math-clear .math-clear-product .math-clear-balloon--small { margin-top: 7cqi !important; }
.page-math-clear .math-clear-section-head { position: relative; aspect-ratio: 600 / 246; margin: 0 0 9.333333cqi; background: url("/sp/seal/img/math-clear/math-clear_h2bg.png") center / 100% 100% no-repeat; color: #fff; text-align: center; }
.page-math-clear .math-clear-section-head h2 { position: absolute; inset: 4.5cqi 8% auto; border: 0; background: none; color: inherit; font-weight: 700; line-height: 1.3; }
.page-math-clear .math-clear-eyebrow { display: block; font-size: 3.2cqi; }
.page-math-clear .math-clear-heading { display: block; margin-top: 1cqi; font-family: "MiuraGotic Propo", sans-serif; font-size: 9.3cqi; font-weight: 400; line-height: 1.1; letter-spacing: .055em; transform: scaleY(1.18); }
.page-math-clear .math-clear-section-head > p { position: absolute; inset: 23cqi 13% auto; padding-top: 2.5cqi; border-top: .4cqi dashed #fff; font-size: 3.2cqi; line-height: 1.45; }
.page-math-clear .math-clear-product .math-clear-size { margin-top: 26cqi; }
.page-math-clear .math-clear-product .math-clear-size .math-clear-caption { margin-bottom: 8cqi; }
.page-math-clear .math-clear-product .math-clear-use .math-clear-picture + .math-clear-picture { margin-top: 7cqi; }
.page-math-clear .math-clear-product .math-clear-use .math-clear-picture:nth-of-type(3) { margin-top: 10cqi; }
.page-math-clear .math-clear-back { margin: 2em 4%; text-align: center; }
.page-math-clear #main :is(section, h2, h3, #about, #designList, #mainHead) { scroll-margin-top: 90px; }
.page-math-clear #main .mod_nav .navtitle { width: 54%; font-size: min(16px, 2.65vw); white-space: nowrap; }
.page-math-clear #main .mod_nav .nav_arrow { width: 14%; }
.page-math-clear #main .mod_nav .orderBtn { width: 23%; margin-left: 5%; }

@media (max-width: 600px) {
    .page-math-clear .math-clear-product { margin-bottom: 10vw; font-size: 3.2vw; }
    .page-math-clear #main .math-clear-h1 { margin-bottom: 3.33vw; padding: 4.66vw 2vw; font-size: 2.67vw; }
    .page-math-clear .math-clear-slider { margin-top: 5.83vw; margin-bottom: 7.33vw; padding-bottom: 5.83vw; border-bottom-width: 10vw; }
    .page-math-clear #mainSlide .slick-dots { margin-top: 3.33vw; }
    .page-math-clear #mainSlide .slick-dots button { width: 4.5vw; height: 26px; }
    .page-math-clear #mainSlide .slick-dots button::before { width: 2.33vw; height: 2.33vw; }
    .page-math-clear .math-clear-product .noukiBnr { margin-bottom: 5.33vw; }
    .page-math-clear .math-clear-product .math-clear-order { margin-bottom: 10vw; }
    .page-math-clear .math-clear-product .math-clear-logo { margin-top: 5vw; }
    .page-math-clear .math-clear-product .math-clear-price { margin-bottom: 4.66vw; }
    .page-math-clear .math-clear-product .math-clear-features { margin: 2vw 0 3vw; }
}

/* SP H1: use the Miwake frame and spacing, with a readable minimum type size. */
.page-math-clear:not(.page-math-clear--pc) #main .math-clear-h1 {
    width: 93.75%;
    max-width: 600px;
    margin: 0 auto 48px;
    padding: 20px 8px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
}
@media (max-width: 600px) {
    .page-math-clear:not(.page-math-clear--pc) #main .math-clear-h1 {
        margin-bottom: 8vw;
        padding: 3.3vw 1.3vw;
        font-size: 12px;
    }
}

/* SP: match the Miwake slider spacing and bottom product navigation. */
.page-math-clear:not(.page-math-clear--pc) { padding-bottom: 63px; }
.page-math-clear:not(.page-math-clear--pc) #mainHead { margin-top: 0; padding-top: 0; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav {
    position: fixed;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    height: 4.5em;
    min-height: 63px;
    margin: 0;
    padding: .5em .8em;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    color: #fff;
    background: rgba(102,102,102,.95);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    transition: transform .2s;
}
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav p,
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav ul { margin: 0; padding: 0; list-style: none; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .navtitle {
    position: static;
    flex: 0 0 40%;
    width: 40%;
    min-width: 0;
    overflow: hidden;
    font-size: min(1rem, 3.75vw);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav.is-away { transform: translateY(110%); }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .nav_arrow {
    display: flex;
    flex: 0 0 20%;
    align-items: center;
    justify-content: center;
    position: static;
    width: 20%;
    height: 100%;
    padding: 0;
    border: 0;
    transform: none;
    color: #fff;
    background: none;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .nav_arrow > * { display: none; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .nav_arrow::before { content: ""; display: block; width: 32px; height: 5px; border-radius: 1.5px; background: currentColor; box-shadow: 0 -11px 0 currentColor, 0 11px 0 currentColor; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .mod_nav_inner {
    display: none;
    position: absolute;
    inset: auto 0 100%;
    max-height: 75vh;
    overflow-y: auto;
    margin: 0;
    padding: 18px 24px;
    background: rgba(102,102,102,.98);
}
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav.is-open .mod_nav_inner { display: block; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .mod_nav_inner ul { display: block; width: auto; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .mod_nav_inner ul a { display: block; padding: 12px; border-bottom: 1px dashed #ccc; color: #fff; font-size: 16px; text-decoration: none; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .mod_nav_inner ul a::before { display: none; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .closebtn { display: block; margin-top: 12px; padding: 8px 16px; font-size: 16px; line-height: 1.5; text-align: center; cursor: pointer; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .closebtn i { display: none; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .orderBtn {
    position: static;
    flex: 0 0 30%;
    top: auto;
    right: auto;
    width: 30%;
    height: auto;
    margin-left: 10%;
    transform: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
}
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .orderBtn a { display: block; padding: 0; }
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .nav_arrow:focus-visible,
.page-math-clear:not(.page-math-clear--pc) #main .mod_nav .closebtn:focus-visible { outline: 3px solid #2575ae; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .page-math-clear:not(.page-math-clear--pc) #main .mod_nav { transition: none; }
}