@charset "UTF-8";

@media (min-width: 769px) {
    .is-sp {
        display: none;
    }
}

@media (max-width: 768px) {
    .is-pc {
        display: none;
    }

    .p-sp__small {
        display  : inline;
        font-size: 0.85em;
    }
}

/* 見出しボタン */
.p-pattern01__list {
    --column-count : 3 !important;
    justify-content: center !important;

    @media (max-width: 1024px) {
        --column-count: 1 !important;
        flex-direction: column;
    }
}

.p-pattern01__item.c-tile__item {
    display: inline-flex;

    @media (max-width: 768px) {
        width: 100%;
    }
}

/* テキスト関連 */
.p-page p:not(:last-child) {
    margin-bottom: 1.5em;
}

.p-text--sub {
    font-size: 0.9em;
}

.p-indent1 {
    display     : inline-block;
    padding-left: 1em;
    text-indent : -1em;
}

.p-tel_link {
    margin-top : 0.5em;
    font-family: var(--font-english);
    font-size  : var(--font-size-xxl);
    font-weight: bold;

    @media screen and (max-width: 768px) {
        font-size: var(--font-size-xl);
    }
}

/* margin-top */
.mt_10 {
    margin-top: 10px !important;
}

.mt_20 {
    margin-top: 20px !important;
}

.mt_30 {
    margin-top: 30px !important;
}

.mt_40 {
    margin-top: 40px !important;
}

.mt_50 {
    margin-top: 50px !important;
}

.mt_60 {
    margin-top: 60px !important;

    @media screen and (max-width: 768px) {
        margin-top: 30px !important;
    }
}

.mt_90 {
    margin-top: 90px !important;

    @media screen and (max-width: 768px) {
        margin-top: 45px !important;
    }
}

/* margin-bottom */
.mb_10 {
    margin-bottom: 10px !important;
}

.mb_20 {
    margin-bottom: 20px !important;
}

.mb_30 {
    margin-bottom: 30px !important;
}

.mb_40 {
    margin-bottom: 40px !important;
}

.mb_50 {
    margin-bottom: 50px !important;
}

.mb_60 {
    margin-bottom: 60px !important;

    @media screen and (max-width: 768px) {
        margin-bottom: 30px !important;
    }
}

.mb_90 {
    margin-bottom: 90px !important;

    @media screen and (max-width: 768px) {
        margin-bottom: 45px !important;
    }
}

.p-right {
    width      : fit-content;
    margin-left: auto;

    @media screen and (max-width: 768px) {
        margin-inline: auto;
    }
}

.p-left {
    width       : fit-content;
    margin-right: auto;

    @media screen and (max-width: 768px) {
        margin-inline: auto;
    }
}




/* ===================================
   参考ページCSS Page Patterns
   =================================== */

.p-section-list {
    margin-top: var(--section-gap);
}

.p-section-list__inner {
    container-type: inline-size;
}

.p-section-list__grid {
    display              : grid;
    grid-template-columns: 1fr;
    padding              : max(5cqw, 1.5em) max(6cqw, 1em);
    border               : 1px solid currentcolor;
    border-radius        : var(--radius-md);
}

.p-section-list__item+.p-section-list__item {
    padding-top: var(--section-gap-sm);
    margin-top : var(--section-gap-sm);
    border-top : 1px solid currentcolor;
}

.p-pattern01 {
    margin-top: var(--section-gap);
}

.p-pattern01__list {
    --column-count: 4;
    --column-gap  : 1.25em;
    --row-gap     : 1.25em;
}

@media (max-width: 1024px) {
    .p-pattern01__list {
        --column-count: 3;
    }
}

@media (max-width: 768px) {
    .p-pattern01__list {
        --column-count: 2;
    }
}

.p-pattern01__list a {
    min-width: unset;
}

.p-pattern02 {
    margin-top: var(--section-gap);
}

.p-pattern02__heading {
    margin-bottom: var(--header-gap);
}

.p-pattern02__list {
    --prefix-color: var(--color-primary);
    font-size     : var(--font-size-xl);
}

.p-pattern02__list+.p-pattern02__list {
    margin-top: 1em;
}

.p-pattern02__column {
    padding         : max(3cqw, 2em) max(4cqw, 1.5em);
    margin-top      : var(--section-gap-xs);
    background-color: var(--color-secondary);
    border-radius   : var(--radius-md);
}

.p-pattern03 {
    margin-top: var(--section-gap);
}

.p-pattern03__heading {
    margin-bottom: var(--header-gap-lg);
}

.p-pattern03__item+.p-pattern03__item {
    margin-top: var(--section-gap-sm);
}

.p-pattern03-02 {
    margin-top: var(--section-gap);
}

.p-pattern03-02__heading {
    margin-bottom: var(--header-gap-lg);
}

.p-pattern03-02__item+.p-pattern03-02__item {
    margin-top: var(--section-gap-sm);
}

.p-pattern03-02__item__header {
    background-color: var(--color-primary);
}

.p-pattern03-02__item__heading {
    color: var(--color-text-contrast);
}

.p-pattern04 {
    margin-top: var(--section-gap-lg);
}

.p-pattern04__inner {
    container: inner/inline-size;
}

.p-pattern04__grid {
    display   : flex;
    column-gap: 5cqw;
}

@container inner (width <=800px) {
    .p-pattern04__grid {
        flex-direction: column;
        row-gap       : 2.5em;
    }
}

@container inner (width > 800px) {
    .p-pattern04__header {
        display        : flex;
        justify-content: center;
        min-width      : 3em;
    }
}

@container inner (width > 800px) {
    .p-pattern04__heading {
        letter-spacing  : 0.2em;
        writing-mode    : vertical-rl;
        text-orientation: upright;
    }
}

.p-pattern04__body {
    flex: 1;
}

.p-pattern04__item+.p-pattern04__item {
    margin-top: var(--section-gap-sm);
}

.p-pattern04__item__heading {
    margin-bottom: var(--header-gap-xs);
}

.p-pattern05 {
    --gradation-height: var(--section-gap-lg);
    position          : relative;
    z-index           : 0;
    padding-block     : var(--section-gap);
    margin-top        : var(--section-gap);
}

.p-pattern05__bg {
    position          : absolute;
    top               : 0;
    left              : 0;
    z-index           : -1;
    display           : flex;
    justify-content   : center;
    width             : 100%;
    height            : 100%;
    overflow          : hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--gradation-height), #000 calc(100% - var(--gradation-height)), transparent);
    mask-image        : linear-gradient(to bottom, transparent, #000 var(--gradation-height), #000 calc(100% - var(--gradation-height)), transparent);
}

.p-pattern05__bg>img {
    display  : block;
    width    : 100%;
    min-width: 600px;
    height   : 100%;
    opacity  : 0.34;
}

.p-pattern05__heading {
    margin-bottom: var(--header-gap-lg);
}

.p-pattern05__item__heading {
    margin-bottom: var(--header-gap-xs);
}

.p-pattern06 {
    margin-top: var(--section-gap);
}

.p-pattern06__heading {
    margin-bottom: var(--header-gap);
}

.p-pattern07 {
    margin-top: var(--section-gap);
}

.p-pattern07__heading {
    margin-bottom: var(--header-gap);
}

.p-pattern07__item+.p-pattern07__item {
    margin-top: var(--section-gap-sm);
}

.p-pattern07__item__main {
    container: main/inline-size;
}

@container main (width > 480px) {
    .p-pattern07__item__body:is(.p-pattern07__item--alt *) {
        display: flex;
    }
}

.p-pattern07__item__heading {
    margin-bottom: var(--header-gap-xs);
}

@container main (width > 480px) {
    .p-pattern07__item__heading:is(.p-pattern07__item--alt *) {
        margin-right    : max(var(--header-gap-xs), 1em);
        margin-bottom   : unset;
        writing-mode    : vertical-rl;
        text-orientation: upright;
    }
}

.p-pattern07__item__content {
    flex: 1;
}

.p-pattern08 {
    margin-top: var(--section-gap);
}

.p-pattern08__heading {
    margin-bottom: var(--header-gap);
}

.p-pattern08__body {
    container: body/inline-size;
}

.p-pattern08__list {
    --column-count: 3;
    --column-gap  : max(4cqw, 2.2em);
    --row-gap     : var(--section-gap-sm);
}

@container body (width <=900px) {
    .p-pattern08__list {
        --column-count: 2;
    }
}

@container body (width <=530px) {
    .p-pattern08__list {
        --column-count: 1;
    }
}

.p-pattern08__item__heading {
    margin-bottom: 0.5em;
    text-align   : center;
}

.p-pattern08__item__image {
    max-width    : 380px;
    margin-inline: auto;
}

.p-pattern09 {
    margin-top: var(--section-gap);
}

.p-pattern09__inner {
    container: inner/inline-size;
}

.p-pattern09__heading {
    margin-bottom: var(--header-gap);
}

.p-pattern09__body {
    padding         : max(6cqw, 1.5em) max(7cqw, 1em);
    margin-inline   : calc(var(--container-padding) / -2);
    background-color: var(--color-secondary);
    border-radius   : var(--radius-md);
}

.p-pattern09__item+.p-pattern09__item {
    margin-top: var(--section-gap-sm);
}

.p-pattern09__item__heading {
    margin-bottom: var(--header-gap-xs);
}

.p-pattern10 {
    margin-top: var(--section-gap);
}

.p-pattern10__heading {
    margin-bottom: var(--header-gap-xs);
}

@container image-section (width > 750px) {
    .p-pattern10__main {
        padding      : 4cqw 5cqw;
        margin-top   : var(--section-gap-xs);
        margin-left  : calc((var(--column-gap) + 1em) * -1);
        border       : 1px solid currentcolor;
        border-radius: var(--radius-md);
    }
}

.p-pattern10__image {
    z-index: 2;
}

.p-pattern11 {
    margin-top: var(--section-gap);
}

.p-pattern11__main {
    padding         : max(4cqw, 1.5em) max(6cqw, 1em);
    background-color: rgba(var(--color-primary-rgb), 15%);
    border-radius   : var(--radius-md);
}

.p-pattern11__heading {
    margin-bottom: var(--header-gap-sm);
    color        : var(--color-primary);
    text-align   : center;
}

.p-pattern11__list {
    --prefix-color: var(--color-primary);
    width         : -moz-fit-content;
    width         : fit-content;
    margin-inline : auto;
    margin-top    : var(--section-gap-sm);
    font-size     : var(--font-size-xl);
}

.p-pattern12__heading {
    --prefix-size: 1em;
    display      : flex;
    gap          : 0.5em;
    align-items  : flex-start;
    margin-bottom: var(--header-gap-xs);
}

.p-pattern12__heading::before {
    color  : var(--color-primary);
    content: "■";
}

.p-pattern12__list {
    --prefix-color: var(--color-primary);
    --row-gap     : 0.75em;
    font-size     : var(--font-size-lg);
}

.p-pattern13__heading {
    display      : flex;
    gap          : 0.5em;
    align-items  : flex-start;
    margin-bottom: var(--header-gap-xs);
}

.p-pattern13__heading::before {
    color  : var(--color-primary);
    content: "■";
}


.p-text-head {
    margin-bottom: var(--header-gap-xs);
}

.p-text-bottom {
    margin-top: var(--header-gap-xs);
}

.p-pattern12__heading.child {
    justify-content: center;
    border-bottom  : 1px solid var(--color-primary);
    padding-bottom : 8px;
}

.p-pattern12__heading.child::before {
    content: "";
}

.c-paragraph.text-right {
    text-align: right;
}

/*アコーディオンの動き*/

.pattern__cont__text {
    margin-top: 20px;
}

.question {
    position      : relative;
    border-bottom : 1px solid var(--color-primary);
    padding-bottom: 5px;
    padding-right : 30px;
}

.answer {
    display      : none;
    padding      : 10px 0px;
    padding-left : 1em;
    margin-bottom: 2em;
    line-height  : 1.6;
}

.question::after {
    border-right: solid 2px var(--color-primary);
    border-top  : solid 2px var(--color-primary);
    content     : "";
    display     : block;
    height      : 8px;
    position    : absolute;
    right       : 25px;
    top         : 38%;
    transform   : rotate(135deg);
    transition  : transform .3s ease-in-out, top .3s ease-in-out;
    width       : 8px;
}

.question.open::after {
    top      : 45%;
    transform: rotate(-45deg);
}



/*===================================
   追加CSS
   ================================ */
/* ホワイトニングページ 固有スタイル */

/* 料金表 */
.c-table.plan th:first-child {
    width    : 60%;
    min-width: 60%;
}

.c-table.plan th {
    text-align: left;
}

@media (max-width: 768px) {
    .c-table.plan th:first-child {
        width    : 14em;
        min-width: 14em;
    }

    .c-table.plan>tbody>tr>td {
        min-width: initial;
        padding  : 1.25em 1.5em;
    }

    .c-table.plan th {
        font-size: var(--font-size-sm);
    }

    .c-button01.plan {
        --padding-x: 1.2em;
    }
}

/* セクションリスト 最大幅調整 */
.p-section-list__inner.l-container:has(>.p-section-list__grid) {
    padding-inline: 0;

    @media (min-width: 1200px) {
        max-width: 1180px;
    }

    @media (max-width: 1199px) {
        max-width: 100%;
    }
}

/* 番号付きリスト */
.p-list--num {
    padding-left: var(--padding);
}

.p-list--num li {
    list-style  : auto;
    padding-left: 0.5em;
}

.p-list--num li:before {
    content: none !important;
}

.p-list--num li::marker {
    color: var(--color-primary);
}

.c-table>thead>tr>th,
.c-table>tbody>tr>td {
    vertical-align: middle;
}