:root {
     --color-01: #E0CDA8;
     --color-02: #333C77;
     --color-03: #E9F1F5;
     --color-04: #4E8BAD;
     --color-05: #FFFFFF;
     --color-06: #A79471;
     --color-07: #502808;

     --inner-sp: 425px;
     --inner-tb: 680px;
     --inner-pc: 1200px;

     --font-title-01: 7vw;
     --font-title-02: 6vw;
}
@media screen and (min-width: 390px) {
     :root {
         --font-title-01: 28px;
         --font-title-02: 22px;
     }
}
@media screen and (min-width: 768px) {
     :root {
         --font-title-01: 28px;
         --font-title-02: 22px;
     }
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1280px) {
}

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}
a,
button {
    cursor: revert;
}
ol,
ul,
menu {
    list-style: none;
}
img {
    max-inline-size: 100%;
    max-block-size: 100%;
    height: auto;
}
table {
    border-collapse: collapse;
}
input,
textarea {
    -webkit-user-select: auto;
}
textarea {
    white-space: revert;
}
meter {
    -webkit-appearance: revert;
    appearance: revert;
}
pre {
    all: revert;
}
::placeholder {
    color: unset;
}
::marker {
    content: "";
}
:where([hidden]) {
    display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}
:where([draggable="true"]) {
    -webkit-user-drag: element;
}
:where(dialog:modal) {
    all: revert;
}
/** **/
 h1,
 h2,
 h3,
 h4,
 h5 {
     font-feature-settings: "palt";
 }

 img {
     width: 100%;
     height: auto;
     pointer-events: none;
 }

 body {
     font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "BIZ UDPGothic", Meiryo, sans-serif;
     line-height: 1;
     color: #444;
     text-align: justify;
     font-size: 15px;
     letter-spacing: 0.08em;
 }

 p {
     line-height: 2;
 }
 * > p:not(:last-child) {
    margin-bottom: 4.103vw;
 }

 .u__serif {
    font-family: 游明朝, YuMincho, "Hiragino Mincho ProN", "MS P明朝", serif;
    font-weight: 300;
 }

 .u__GothicA1 {
    font-family: 'Advent Pro', sans-serif;
 }
 .u__GothicA2 {
    font-family: 'Clicker Script', cursive;
 }
 .u__GothicA3 {
    font-family: 'Corinthia', cursive;
 }
 .u__max660 {
    max-width: 660px;
    margin: auto;
 }
 .u__pc-only {
     display: none;
 }

 a {
     transition: ease all 0.5s;
 }

 a:hover {
     opacity: 0.8;
 }
 body.fixed {
    width: 100%;
    height: 100%;
    position: fixed;
}
.bg__dotted {
    background-image: url(../img/top-treatments-bg.webp);
}
.bg__dotted02 {
    background-color: #ffffff;
    background-image   : radial-gradient(#f8f8f8 14%, transparent 17%),
    radial-gradient(#f8f8f8 14%, transparent 17%);
    background-position: 0 0, 12px 12px;
    background-size    : 24px 24px;
}
.btn__reservation {
    position: relative;
    width: 75.897vw;
    height: 30.769vw;
    padding-top: 0.513vw;
    background: linear-gradient(90deg, rgba(15,67,114,1) 0%, rgba(40,45,84,1) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btn__reservation::before, .btn__reservation::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.btn__reservation::before {
    background: url(../img/reserve-icon.svg) no-repeat;
    width: 14.359vw;
    height: 12.821vw;
    background-size: 100%;
    left: 4.103vw;
}
.btn__reservation::after {
    background: url(../img/marubou-icon.svg) no-repeat;
    width: 10.769vw;
    height: 3.077vw;
    background-size: 100%;
    right: 6.154vw;
}
.btn__reservation-small {
    font-size: 4.359vw;
    margin-bottom: 0.513vw;
}
.btn__reservation-small > span {
    font-size: 1.6em;
    margin-right: 1.282vw;
}
.btn__reservation-large {
    font-size: 7.179vw;
    margin-bottom: 1.538vw;
}
.btn__reservation-large > span {
    font-size: 1.3em;
    vertical-align: -0.07em;
    letter-spacing: 0.1em;
}
.btn__reservation-eng {
    font-size: 5.897vw;
    letter-spacing: 0;
}
.btn__tel {
    width: 75.897vw;
    height: 30.769vw;
    background: #fff;
    color: var(--color-07);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    gap: 6.154vw;
    font-size: 4.103vw;
}
.btn__tel-num {
    font-size: 9.231vw;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.282vw;
    font-weight: 300;
}
.btn__tel-num::before {
    content: "";
    background: url(../img/tel-icon.svg) no-repeat;
    width: 6.154vw;
    height: 7.949vw;
    background-size: 100%;
    margin-top: 0.256vw;
}
.top__invisalign-btnarea .btn__reservation {
    width: 82.051vw;
    height: 36.923vw;
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    bottom: -16.41vw;
    background: linear-gradient(90deg, rgba(78,139,173,1) 0%, rgba(25,91,152,1) 100%);
}
.top__invisalign-btnarea .btn__reservation-small {
    font-size: 5.128vw;
    margin-top: 2.051vw;
    margin-bottom: 3.333vw;
}
.top__invisalign-btnarea .btn__reservation::before {
    display: none;
}
.top__invisalign-btnarea .btn__reservation-large {
    font-size: 8.205vw;
    margin-bottom: 2.564vw;
}
.top__invisalign-btnarea .btn__reservation-eng {
    font-size: 7.179vw;
}
.group__btn-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.103vw;
    width: 77.949vw;
    justify-content: center;
}
.group__btn-tel {
    width: 100%;
    height: 18.462vw;
    gap: 0.769vw;
    display: flex;
    align-items: center;
    color: var(--color-02);
    font-size: 6.154vw;
    background: #fff;
    justify-content: center;
    border: 1px solid var(--color-02);
}
.group__btn-tel::before {
    content: "";
    background: url(../img/tel-icon.svg) no-repeat;
    width: 4.103vw;
    height: 5.385vw;
    background-size: 100%;
}
.group__btn-web {
    width: 100%;
    height: 18.462vw;
    gap: 3.59vw;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 5.128vw;
    background: var(--color-02);
    justify-content: center;
    border: 1px solid var(--color-02);
}
.group__btn-web::before {
    content: "";
    background: url(../img/web-icon.svg) no-repeat;
    width: 5.128vw;
    height: 5.128vw;
    background-size: 100%;
}

@media screen and (min-width:390px) {
    * > p:not(:last-child) {
        margin-bottom: 16px;
    }

    .btn__reservation {
        width: 296px;
        height: 120px;
        padding-top: 2px;
    }
    .btn__reservation::before {
        width: 56px;
        height: 50px;
        left: 16px;
    }
    .btn__reservation::after {
        width: 42px;
        height: 12px;
        right: 24px;
    }
    .btn__reservation-small {
        font-size: 17px;
        margin-bottom: 2px;
    }
    .btn__reservation-small > span {
        margin-right: 5px;
    }
    .btn__reservation-large {
        font-size: 28px;
        margin-bottom: 6px;
    }
    .btn__reservation-eng {
        font-size: 23px;
    }
    .btn__tel {
        width: 296px;
        height: 120px;
        gap: 24px;
        font-size: 16px;
    }
    .btn__tel-num {
        font-size: 36px;
        gap: 5px;
    }
    .btn__tel-num::before {
        width: 24px;
        height: 31px;
        margin-top: 1px;
    }    
    .top__invisalign-btnarea .btn__reservation {
        width: 320px;
        height: 144px;
        bottom: -64px;
    }
    .top__invisalign-btnarea .btn__reservation-small {
        font-size: 20px;
        margin-top: 8px;
        margin-bottom: 13px;
    }
    .top__invisalign-btnarea .btn__reservation-large {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .top__invisalign-btnarea .btn__reservation-eng {
        font-size: 28px;
    }
    .group__btn-area {
        gap: 16px;
        width: 304px;
    }
    .group__btn-tel {
        width: 100%;
        height: 72px;
        gap: 3px;
        font-size: 24px;
    }
    .group__btn-tel::before {
        width: 16px;
        height: 21px;
    }
    .group__btn-web {
        height: 72px;
        gap: 14px;
        font-size: 20px;
    }
    .group__btn-web::before {
        width: 20px;
        height: 20px;
    }
}
@media screen and (min-width: 768px) {
    .top__mv-btnarea .btn__tel, .top__mv-btnarea .btn__reservation {
        width: 50%;
        height: 9.583vw;
        margin: 0;
    }
    .top__mv-btnarea .btn__reservation {
        background: rgba(255,255,255,0.75);
        color: var(--color-02);
    }
    .top__mv-btnarea .btn__reservation::before {
        background: url(../img/top-mv-web-icon.svg) no-repeat;
        background-size: 100%;
        width: 4.01vw;
        height: 3.542vw;
        left: 2.24vw;
    }
    .top__mv-btnarea .btn__reservation::after {
        background: url(../img/top-mv-marubou-icon.svg) no-repeat;
        background-size: 100%;
        width: 3.229vw;
        height: 0.573vw;
        right: 1.667vw;
    }
    .top__mv-btnarea .btn__reservation-small {
        font-size: 1.042vw;
    }
    .top__mv-btnarea .btn__reservation-large {
        font-size: 1.875vw;
    }
    .top__mv-btnarea .btn__reservation-eng {
        font-size: 1.458vw;
    }
    .top__mv-btnarea .btn__tel {
        background: rgba(7,33,95,0.84);
        color: #fff;
        font-weight: 300;
        font-size: 0.781vw;
        gap: 0.533vw;
    }
    .top__mv-btnarea .btn__tel-num {
        font-weight: 300;
        font-size: 2.083vw;
        gap: 0.417vw;
    }
    .top__mv-btnarea .btn__tel-num::before {
        content: "";
        background: url(../img/white-tel-icon.svg) no-repeat;
        width: 2.031vw;
        height: 2.24vw;
        background-size: 100%;
        margin-top: -0.052vw;
    }
    .top__mv-btnarea .top__clinic-time {
        margin: auto;
        align-items: flex-start;
    }
    .top__mv-btnarea .top__clinic-time-right {
        color: #fff;
        font-size: 0.838vw;
    }
    .top__mv-btnarea .top__clinic-time-left > em {
        font-size: 0.625vw;
    }
    .top__mv-btnarea .top__clinic-time {
        gap: 0.833vw;
    }
    .top__mv-btnarea .top__clinic-time-left {
        width: 4.583vw;
        height: auto;
        background: unset;
        padding-top: 2px;
        color: #fff;
        font-size: 0.80vw;
    }
    .top__mv-btnarea .top__clinic-hosoku {
        margin: 0.26vw auto 0;
        font-size: 0.833vw;
    }
    .top__mv-btnarea .top__clinic-work {
        margin-bottom: 0;
    }
    .top__mv-btnarea .top__clinic-hosoku > em {
        font-size: 0.833vw;
        width: 5vw;
        height: 1.25vw;
        line-height: 1;
        border: 1px solid #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.417vw;
    }
    .sub__hdr-btnarea .btn__tel {
        width: 48%;
        height: 5vw;
        margin: 0;
        gap: 0.625vw;
        box-shadow: 0px 0px 1.172vw -0.391vw #777;
    }
    .sub__hdr-btnarea .btn__tel-small {
        font-size: 0.938vw;
    }
    .sub__hdr-btnarea .btn__tel-num {
        font-size: 2.188vw;
        font-weight: 300;
    }
    .sub__hdr-btnarea .btn__tel-num::before {
        width: 1.328vw;
        height: 1.719vw;
    }
    .sub__hdr-btnarea .btn__reservation {
        width: 48%;
        height: 5vw;
        margin: 0;
        background: linear-gradient(
            90deg,
            #502808 0%,
            #402006 100%
        );
    }
    .sub__hdr-btnarea .btn__reservation-small {
        position: absolute;
        font-size: 0.938vw;
        border: 1px solid #fff;
        border-radius: 50%;
        left: 1.875vw;
        top: 50%;
        transform: translate(0, -50%);
        width: 3.75vw;
        height: 3.75vw;
        text-align: center;
        padding-top: 0.547vw;
        padding-left: 0.156vw;
    }
    .sub__hdr-btnarea .btn__reservation-small > span {
        font-size: 1.406vw;
        margin-right: 0;
        letter-spacing: 0;
    }
    .sub__hdr-btnarea .btn__reservation-large {
        font-size: 1.797vw;
        margin-bottom: 0;
    }
    .sub__hdr-btnarea .btn__reservation-large > span {
        font-size: 2.188vw;
    }
    .sub__hdr-btnarea .btn__reservation::before {
        display: none;
    }
    .sub__hdr-btnarea .btn__reservation::after {
        background: url(../img/subhdr-marubou-icon-pc.png) no-repeat;
        width: 3.125vw;
        height: 0.938vw;
        right: 1.563vw;
        background-position-x: right;
        background-size: 100%;
    }
    .sub__hdr-btnarea .btn__reservation-eng {
        font-size: 1.094vw;
    }
}
@media screen and (min-width: 1024px) {
    .u__sp-only {
        display: none;
    }
    .u__pc-only {
        display: block;
    }
    .u__max660 {
        max-width: unset;
    }
    .btn__reservation {
        width: 456px;
        height: 120px;
    }
    .btn__tel {
        width: 456px;
        height: 120px;
        margin-left: auto;
        font-size: 15px;
        gap: 16px;
    }
    .btn__tel-num {
        font-size: 40px;
        font-weight: 700;
        gap: 8px;
    }
    .btn__tel-num::before {
        width: 25px;
        height: 33px;
    }
    .btn__reservation-small {
        font-size: 17px;
        margin-bottom: 2px;
    }
    .btn__reservation-large {
        font-size: 32px;
        margin-bottom: 4px;
    }
    .btn__reservation-eng {
        font-size: 24px;
    }
    .btn__reservation::before {
        width: 60px;
        height: 53px;
        left: 64px;
    }
    .btn__reservation::after {
        background: url(../img/marubou-icon-pc.svg) no-repeat;
        width: 62px;
        height: 12px;
        right: 32px;
    }
    .btn__reservation::after {
        background: url(../img/invisa-marubou-icon-pc.svg) no-repeat;
        width: 102px;
        height: 12px;
        right: 60px;
    }
    .top__invisalign-btnarea .btn__reservation {
        width: 632px;
        height: 160px;
        padding-left: 16px;
    }
    .top__invisalign-btnarea .btn__reservation-large {
        font-size: 38px;
        margin-bottom: 12px;
    }
    .top__invisalign-btnarea .btn__reservation-small {
        position: absolute;
        left: 0;
        font-size: 23px;
        line-height: 1.3;
        width: 136px;
        height: 136px;
        left: 56px;
        letter-spacing: 0;
        top: 50%;
        padding-bottom: 8px;
        margin: 0;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        display: flex;
        transform: translate(0, -50%);
        border: 1px solid #fff;
    }
    .top__invisalign-btnarea .btn__reservation-eng {
        font-size: 26px;
    }
    .top__contact .btn__reservation, .top__contact .btn__tel {
        width: 48.3%;
        height: 160px;
        margin: 0;
    }
    .top__contact .btn__reservation {
        background: linear-gradient(90deg, rgba(15,67,114,0.84) 0%, rgba(40,45,84,0.84) 100%);
    }
    .top__contact .btn__tel {
        gap: 12px;
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 100%);
    }
    .top__contact .btn__tel-num {
        letter-spacing: 0.1em;
    }
    .top__contact .btn__reservation::before {
        width: 66px;
        height: 59px;
    }
    .top__contact .btn__reservation-small {
        font-size: 20px;
        margin-top: 6px;
        margin-bottom: 6px;
    }
    .top__contact .btn__reservation-small > span {
        font-size: 40px;
    }
    .top__contact .btn__reservation-large {
        font-size: 36px;
        margin-bottom: 10px;
    }
    .top__contact .btn__reservation::before {
        width: 66px;
        height: 59px;
    }
    .top__contact .btn__reservation::after {
        background: url(../img/marubou-icon-pc.svg) no-repeat;
        width: 62px;
        height: 12px;
        right: 32px;
    }
    .group__btn-area {
        flex-direction: row;
        width: 456px;
        gap: 24px;
    }
    .group__btn-web {
        height: 56px;
        font-size: 18px;
        gap: 16px;
    }
    .group__btn-tel {
        height: 56px;
        border: unset;
        background: unset;
        gap: 12px;
    }
    .group__btn-tel::before {
        width: 18px;
        height: 24px;
        margin-top: 1px;
    }
}

@media screen and (min-width: 1280px) {
    body {
        font-size: 16px;
    }
    .top__contact .btn__reservation::before {
        left: 106px;
    }
    .top__contact .btn__reservation::after {
        background: url(../img/invisa-marubou-icon-pc.svg) no-repeat;
        width: 102px;
        height: 12px;
        right: 60px;
    }
    .sub__hdr-btnarea .btn__tel {
        height: 64px;
        gap: 8px;
        box-shadow: 0px 0px 15px -5px #777;
    }
    .sub__hdr-btnarea .btn__tel-small {
        font-size: 12px;
    }
    .sub__hdr-btnarea .btn__tel-num {
        font-size: 28px;
    }
    .sub__hdr-btnarea .btn__tel-num::before {
        width: 17px;
        height: 22px;
    }
    .sub__hdr-btnarea .btn__reservation {
        height: 64px;
    }
    .sub__hdr-btnarea .btn__reservation-small {
        font-size: 12px;
        left: 24px;
        width: 48px;
        height: 48px;
        padding-top: 7px;
        padding-left: 2px;
    }
    .sub__hdr-btnarea .btn__reservation-small > span {
        font-size: 18px;
    }
    .sub__hdr-btnarea .btn__reservation-large {
        font-size: 23px;
    }
    .sub__hdr-btnarea .btn__reservation-large > span {
        font-size: 28px;
    }
    .sub__hdr-btnarea .btn__reservation::after {
        width: 40px;
        height: 12px;
        right: 20px;
    }
    .sub__hdr-btnarea .btn__reservation-eng {
        font-size: 14px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1359px) {
    .top__clinic .btn__reservation, .top__clinic .btn__tel {
        width: 356px;
    }
    .top__clinic .btn__reservation::before {
        left: 24px;
    }
    .top__clinic .btn__reservation::after {
        right: 24px;
    }
}