@charset "utf-8";


@media all and (max-width: 1020px) {}
@media all and (max-width: 767px) {}

/**************************************************

premium common

**************************************************/

:root {
    --blue: #002F7D;
}

.font-gothic {
    font-family: 'Noto Sans JP', sans-serif;
}

.font-serif {
    font-family: 'Noto Serif JP', 'Noto Sans JP', sans-serif;
}


/* 1rem = 24px */






/**************************************************

pre-parts

**************************************************/


/* pre-parts-midtitle
*************************************/
.pre-parts-midtitle {
    margin: 0 0 15px;
    padding: 0;
    color: var(--blue);
    font-size: 19px;
    font-weight: 600;
    text-align: center;
}

@media all and (max-width: 767px) {
    .pre-parts-midtitle {
        margin-bottom: 4.67vw;
        font-size: 1.63rem;
    }
}


/* pre-parts-bgtitle
*************************************/
.pre-parts-bgtitle {
    margin: 0 0 35px;
    padding: 5px 0 7px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    background-color: var(--blue);
}

@media all and (max-width: 767px) {
    .pre-parts-bgtitle {
        margin-bottom: 9.34vw;
        padding: 1.34vw 0 1.87vw;
        font-size: 1.37rem;
    }
}




/* pre-parts-button01
*************************************/
.pre-parts-button01 {
    display: flex;
    justify-content: center;
}

.pre-parts-button01__anchor {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 275px;
    min-height: 50px;
    color: var(--blue);
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    border: var(--blue) solid 1px;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.pre-parts-button01__text {
    position: relative;
    display: block;
    padding-right: 24px;
}

.pre-parts-button01__text::before {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-top: var(--blue) solid 1px;
    border-right: var(--blue) solid 1px;
    transform: rotate(45deg);
}

@media all and (max-width: 767px) {
    .pre-parts-button01__anchor {
        max-width: 74vw;
        min-height: 13.34vw;
        font-size: 1.37rem;
    }

    .pre-parts-button01__text {
        padding-right: 5.67vw;
    }

    .pre-parts-button01__text::before {
        width: 2.14vw;
        height: 2.14vw;
        margin-top: -1vw;
    }
}



/* pre-parts-leadarea
*************************************/
.pre-parts-leadarea__title {
    margin-bottom: 30px;
    color: var(--blue);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.739;
    letter-spacing: 0.025em;
    text-align: center;
}

.pre-parts-leadarea__text {
    color: var(--blue);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 2.5;
    letter-spacing: 0.075em;
}

.pre-parts-leadarea__button {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.pre-parts-leadarea__button__anchor {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 350px;
    min-height: 50px;
    padding-bottom: 0.3em;
    color: var(--blue);
    font-size: 20px;
    font-weight: 600;
    border: var(--blue) solid 1px;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.pre-parts-leadarea__button__text {
    position: relative;
    display: block;
    padding-right: 16px;
}

.pre-parts-leadarea__button__text::before {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    margin-top: -2px;
    border-top: var(--blue) solid 1px;
    border-right: var(--blue) solid 1px;
    transform: rotate(45deg);
}

@media all and (max-width: 767px) {

    .pre-parts-leadarea__title {
        margin-bottom: 4.67vw;
        font-size: 1.96rem;
    }

    .pre-parts-leadarea__text {
        font-size: 1.37rem;
    }

    .pre-parts-leadarea__button {
        margin-top: 5.67vw;
    }

    .pre-parts-leadarea__button__anchor {
        max-width: 73.33vw;
        min-height: 13.33vw;
        font-size: 1.71rem;
    }

    .pre-parts-leadarea__button__text {
        padding-right: 4vw;
    }

    .pre-parts-leadarea__button__text::before {
        width: 2.67vw;
        height: 2.67vw;
        margin-top: -0.53vw;
    }

}



/* pre-parts-productlist01
*************************************/
.pre-parts-productlist01wrap {
    background-image: url(../images/bg_products01_pc.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    padding-top: 100px;
}
@media all and (max-width: 767px) {
    .pre-parts-productlist01wrap {
        background-image: url(../images/bg_products01.jpg);
    }
}

.pre-parts-productlist01wrap img {
    max-width: 100%;
    height: auto;
}

.pre-parts-productlist01__bg {
    display: none;
}

.pre-parts-productlist01 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px 0;
    max-width: 704px;
    margin: 0 auto;
    z-index: 2;
}

.pre-parts-productlist01__anchor {
    display: block;
    color: #000;
    text-align: center;
    text-decoration: none;
}

.pre-parts-productlist01__item__photo {
    display: block;
    margin: 0 auto 25px;
    line-height: 0;
}

.pre-parts-productlist01__item__title {
    margin: 0;
    color: var(--blue);
    font-size: 16px;
    font-weight: 500;
}

.pre-parts-productlist01__item__text {
    margin-top: 15px;
    font-size: 14px;
}

.is-stainclear .pre-parts-productlist01__item__photo {width: 71%;}
.is-deepcleansing .pre-parts-productlist01__item__photo {width: 48%;}
.is-mouthwash .pre-parts-productlist01__item__photo {width: 70%;}
.is-brush .pre-parts-productlist01__item__photo {width: 53.2%;}
.is-mirror .pre-parts-productlist01__item__photo {width: 14%;}

@media all and (max-width: 767px) {
    .pre-parts-productlist01wrap {
        padding-top: 13.34vw;
    }

    .pre-parts-productlist01__bg {
        position: absolute;
        top: 0;
        left: -10px;
        display: block;
        width: calc(100% + 20px);
        margin: 0;
        z-index: 1;
    }

    .pre-parts-productlist01 {
        grid-template-columns: 1fr;
        gap: 21.34vw 0;
    }

    .pre-parts-productlist01__item__photo {
        margin-bottom: 8vw;
    }

    .pre-parts-productlist01__item__title {
        font-size: 1.37rem;
    }

    .pre-parts-productlist01__item__text {
        margin-top: 4vw;
        font-size: 1.2rem;
    }

    .is-stainclear .pre-parts-productlist01__item__photo {width: 66.67vw;}
    .is-deepcleansing .pre-parts-productlist01__item__photo {width: 47.47vw;}
    .is-mouthwash .pre-parts-productlist01__item__photo {width: 65.34vw;}
    .is-brush .pre-parts-productlist01__item__photo {width: 56.67vw;}
    .is-mirror .pre-parts-productlist01__item__photo {width: 12.4vw;}
}




/* pre-parts-productmain
*************************************/
.pre-parts-productmain {
    overflow: hidden;
    position: relative;
    margin-bottom: 45px;
    padding-top: 50px;
}

.pre-parts-productmain > * {
    position: relative;
    z-index: 2;
}

.pre-parts-productmain img {
    max-width: 100%;
    height: auto;
}

.pre-parts-productmain figure {
    line-height: 0;
}

.pre-parts-productmain__bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 720px;
    margin: 0;
    transform: translateX(-50%);
    z-index: 1;
}

.pre-parts-productmain__image {
    position: relative;
    margin: 0 auto 20px;
    z-index: 2;
}

.pre-parts-productmain__title {
    position: relative;
    margin: 0 0 15px;
    padding: 0 0 15px;
    color: var(--blue);
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    line-height: 1.895;
}
.pre-parts-productmain__title {
    position: relative;
    margin: 0 0 15px;
    padding: 0 0 15px;
    color: var(--blue);
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    line-height: 1.895;
}

.pre-parts-productmain__title::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    content: '';
    width: 320px;
    height: 1px;
    background-color: var(--blue);
    transform: translateX(-50%);
}

.pre-parts-productmain__info {
    margin: 0;
    padding: 0;
    color: var(--blue);
    text-align: center;
}

.pre-parts-productmain__info__title {
    font-size: 14px;
    line-height: 1.571;
}

.pre-parts-productmain__info__detail {
    margin: 1em 0 0;
    font-size: 12px;
    line-height: 1.5;
}
.pre-parts-productmain__note {
    font-family: 'Noto Sans JP', sans-serif;
    display: block;
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

@media all and (max-width: 767px) {
    .pre-parts-productmain {
        margin-bottom: 6.67vw;
        padding-top: 13.34vw;
    }

    .pre-parts-productmain__bg {
        width: 150%;
    }

    .pre-parts-productmain__image {
        margin-bottom: 6.5vw;
    }

    .pre-parts-productmain__title {
        margin-bottom: 4vw;
        padding-bottom: 4vw;
        font-size: 1.63rem;
    }

    .pre-parts-productmain__title::before {
        width: 85.34vw;
    }

    .pre-parts-productmain__info__title {
        font-size: 1.15rem;
    }

    .pre-parts-productmain__info__detail {
        font-size: 0.9rem;
        letter-spacing: 0;
    }
    .pre-parts-productmain__note {
        margin-top: 4vw;
        font-size: 1.03rem;
    }
}


/* pre-parts-features
*************************************/
.pre-parts-features {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    padding: 50px 0;
}

.pre-parts-features img {
    max-width: 100%;
    height: auto;
}

.pre-parts-features > * {
    position: relative;
    z-index: 2;
}

.pre-parts-features__title {
    margin: 0 0 15px;
    padding: 0;
    color: var(--blue);
    font-size: 19px;
    font-weight: 600;
    text-align: center;
}

.pre-parts-features__wide {
    max-width: 730px;
    margin: 0 auto;
    padding: 0;
}

.pre-parts-features__points {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pre-parts-features__points__item {
    box-sizing: border-box;
    position: relative;
    min-height: 160px;
    padding: 43px 6px 0;
    color: var(--blue);
    text-align: center;
}

.pre-parts-features__points__item > * {
    position: relative;
    z-index: 2;
}

.pre-parts-features__points__item::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    content: '';
    width: 138px;
    height: 160px;
    background: url(../images/deco_hexagon.svg) no-repeat center top / 100% auto;
    transform: translateX(-50%);
}

.pre-parts-features__points__label {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 900;
    background-color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

.pre-parts-features__points__title {
    font-size: 16px;
    line-height: 1.375;
}

.pre-parts-features__points__cap {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.375;
}

@media all and (max-width: 767px) {
    .pre-parts-features {
        padding: 6.67vw 0 13.34vw;
    }

    .pre-parts-features__title {
        margin-bottom: 4.67vw;
        font-size: 1.63rem;
    }

    .pre-parts-features__points {
        display: block;
    }

    .pre-parts-features__points__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 42.67vw;
        padding: 0;
    }

    .pre-parts-features__points__item + .pre-parts-features__points__item {
        margin-top: -7.34vw;
    }

    .pre-parts-features__points__item::before {
        width: 36.8vw;
        height: 42.67vw;
    }

    .pre-parts-features__points__label {
        width: 100%;
        margin-bottom: 0.6vw;
        font-size: 1.46rem;
    }

    .pre-parts-features__points__title {
        font-size: 1.37rem;
    }

    .pre-parts-features__points__cap {
        margin-bottom: 0.4vw;
        font-size: 1.03rem;
    }

}



/* pre-parts-flavor
*************************************/
.pre-parts-flavor {
    padding: 60px 0;
}

.pre-parts-flavor img {
    max-width: 100%;
    height: auto;
}

.pre-parts-flavor__list {
    display: flex;
    justify-content: center;
}

.pre-parts-flavor__list__item {
    position: relative;
    box-sizing: border-box;
    width: 352px;
    padding: 0 0 35px;
    text-align: center;
}

.pre-parts-flavor__list__item > * {
    position: relative;
    z-index: 2;
}

.pre-parts-flavor__list__item::before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: calc(100% - 45px);
    z-index: 1;
}

.is-blue.pre-parts-flavor__list__item::before {background-color: #F0F3FA;}
.is-purple.pre-parts-flavor__list__item::before {background-color: #F7F5FA;}
.is-yellow.pre-parts-flavor__list__item::before {background-color: #FDFFE8;}

.pre-parts-flavor__list__photo {
    max-width: 255px;
    margin: 0 auto;
    line-height: 0;
}

.pre-parts-flavor__list__title {
    margin: 15px 0 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
}

.pre-parts-flavor__list__text {
    margin-top: 5px;
    font-size: 14px;
    letter-spacing: 0.04em;
    font-feature-settings: "palt";
}

@media all and (max-width: 767px) {
    .pre-parts-flavor {
        padding: 13.34vw 0;
    }

    .pre-parts-flavor__list {
        display: block;
    }

    .pre-parts-flavor__list__item {
        width: auto;
        padding-bottom: 9.34vw;
    }

    .pre-parts-flavor__list__item + .pre-parts-flavor__list__item {
        margin-top: 10vw;
    }

    .pre-parts-flavor__list__item::before {
        height: calc(100% - 10vw);
    }

    .pre-parts-flavor__list__photo {
        max-width: 68.67vw;
    }

    .pre-parts-flavor__list__title {
        margin-top: 5.34vw;
        font-size: 1.37rem;
    }

    .pre-parts-flavor__list__text {
        margin-top: 2vw;
        font-size: 1.2rem;
    }
}


/* pre-parts-banner
*************************************/
.pre-parts-banner {
    border-top: none;
}


/* pre-parts-cvbtnList
*************************************/
.pre-parts-cvbtnList {
    display: flex;
    justify-content: center;
    margin: 60px 0 0;
    font-family: 'Noto Serif JP', 'Noto Sans JP', sans-serif;
}

.pre-parts-cvbtnList li {
    display: block;
    width: 275px;
    margin: 0 20px;
}

.pre-parts-cvbtnList li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0;
    color: var(--blue);
    font-size: 16px;
    border-radius: 0 !important;
    background: transparent;
    border: var(--blue) solid 1px;
}

.pre-parts-cvbtnList li a span {
    position: relative;
    display: block;
    padding-right: 24px;
}

.pre-parts-cvbtnList li a span::before {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-top: var(--blue) solid 1px;
    border-right: var(--blue) solid 1px;
    transform: rotate(45deg);
    transition: transform 0.2s, margin-top 0.2s;
}

.pre-parts-cvbtnList .purchaseBtn a {
    color: #fff;
    background-color: var(--blue);
    border: none;
}

.pre-parts-cvbtnList .purchaseBtn a span::before {
    margin-top: -5px;
    border-color: #fff;
    transform: rotate(135deg);
}

#main .pre-parts-cvbtnList .purchaseBtn.-open > a span::before {
    margin-top: -1px;
    border-color: var(--blue);
    transform: rotate(-45deg);
}

#main .pre-parts-cvbtnList .purchaseBtn.-open > a:after {
    opacity: 0;
}

@media all and (min-width: 768px) {
    #main .pre-parts-cvbtnList .shopNavi {
        width: 215%;
    }
}

@media all and (max-width: 767px) {
    .pre-parts-cvbtnList {
        display: block;
        margin: 10.67vw 0;
        padding: 0;
    }

    .pre-parts-cvbtnList li {
        width: auto;
        max-width: 73.34vw;
        margin: 0 auto;
    }

    .pre-parts-cvbtnList li + li {
        margin-top: 5.34vw;
    }

    .pre-parts-cvbtnList li a {
        min-height: 13.34vw;
        font-size: 1.37rem;
    }

    .pre-parts-cvbtnList li a span {
        padding-right: 7.34vw;
    }

    .pre-parts-cvbtnList li a span::before {
        width: 2.14vw;
        height: 2.14vw;
        margin-top: -1.07vw;
    }

    .pre-parts-cvbtnList .purchaseBtn a span::before {
        margin-top: -1.57vw;
    }

    #main .pre-parts-cvbtnList .purchaseBtn.-open > a span::before {
        margin-top: -0.27vw;
    }

}



/**************************************************

pre-top-leadarea

**************************************************/
.pre-top-leadarea {
    margin-bottom: 70px;
}

@media all and (max-width: 767px) {
    .pre-top-leadarea {
        margin-bottom:14.66vw;
    }
}

/**************************************************

pre-top-cm

**************************************************/
.pre-top-cm {
    margin-bottom: 120px;
}
@media all and (max-width: 767px) {
    .pre-top-cm {
        margin-bottom:18.66vw;
    }
}
.pre-top-cm__title {
    color: var(--blue);
    font-size:18px;    
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: .75em;
}
@media all and (max-width: 767px) {
    .pre-top-cm__title {font-size: 4.26vw;}
}
.cm-slider{
    position: relative;
    width: 500px;
}
.cm-slider .slick-arrow{
    position: absolute;
    top:50%;
    margin-top: 12px;
    width:30px;
    height:30px;
    background-color:transparent;
}
.cm-slider .slick-prev{left:-30px;}
.cm-slider .slick-next{right:-30px;}
.cm-slider .slick-prev::before{
    transform: rotate(-135deg);
    margin-left: -4px;
}
.cm-slider .slick-next::before{
    transform: rotate(45deg);
    margin-left: -8px;
}
.cm-slider .slick-arrow::before{
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-top: 1px solid var(--blue);
    border-right: 1px solid var(--blue);
}
.cm-slider .slick-dots{
    font-size: 0;
    bottom:-20px;    
}
.cm-slider .slick-dots li{
    width: 8px;
    height: 8px;
    margin: 0 5px;
    border:none;
    background-color: #cbcbcb;
}
.cm-slider .slick-slide a{
    display: block;
    aspect-ratio: 552/332;
}
.cm-slider .slick-slide img{width: 100%;}
@media all and (max-width: 767px) {        
    .cm-slider{width: 73.6vw;}
    .cm-slider .slick-arrow{
        margin-top: 2vw;
        width:8vw;
        height:8vw;
    }
    .cm-slider .slick-prev{left:-8vw;}
    .cm-slider .slick-next{right:-8vw;}
    .cm-slider .slick-prev::before{
        margin-left: -1.06vw;
    }
    .cm-slider .slick-next::before{
        margin-left:-2.13vw;
    }
    .cm-slider .slick-arrow::before{
        width: 3.2vw;
        height: 3.2vw;
        margin-top: -1.6vw;
    }
    .cm-slider .slick-dots{
        bottom:-5.33vw;        
    }
    .cm-slider .slick-dots li{
        width: 2.13vw;
        height: 2.13vw;
        margin: 0 1.33vw;
    }
}



/**************************************************

mouthwash-cleansing

**************************************************/
.mouthwash-cleansing {
    margin: 60px 0;
}

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

.mouthwash-cleansing__list,
.mouthwash-cleansing__list__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mouthwash-cleansing__list__item {
    display: flex;
    justify-content: center;
    min-height: 110px;
    background-color: #DFF1F1;
}

.mouthwash-cleansing__list__item:nth-child(even) {
    flex-direction: row-reverse;
}

.mouthwash-cleansing__list__item + .mouthwash-cleansing__list__item {
    margin-top: 20px;
}

.mouthwash-cleansing__list__iamge {
    align-self: flex-end;
    margin: 0 12px;
    line-height: 0;
}

.is-01.mouthwash-cleansing__list__iamge {max-width: 90px;}
.is-02.mouthwash-cleansing__list__iamge {max-width: 98px;}
.is-03.mouthwash-cleansing__list__iamge {max-width: 93px;}
.is-04.mouthwash-cleansing__list__iamge {max-width: 82px;}
.is-05.mouthwash-cleansing__list__iamge {max-width: 104px;}
.is-06.mouthwash-cleansing__list__iamge {max-width: 118px;}

.mouthwash-cleansing__list__text {
    align-self: center;
    margin: 0 12px;
    padding: 0;
    font-size: 16px;
    line-height: 1.875;
}

@media all and (max-width: 767px) {
    .mouthwash-cleansing {
        margin: 12vw 0;
    }

    .mouthwash-cleansing__list__item {
        min-height: 29.34vw;
    }

    .mouthwash-cleansing__list__item + .mouthwash-cleansing__list__item {
        margin-top: 5.34vw;
    }

    .mouthwash-cleansing__list__iamge {
        margin: 0 2.67vw;
    }

    .is-01.mouthwash-cleansing__list__iamge {max-width: 24.27vw;}
    .is-02.mouthwash-cleansing__list__iamge {max-width: 26vw;}
    .is-03.mouthwash-cleansing__list__iamge {max-width: 24.54vw;}
    .is-04.mouthwash-cleansing__list__iamge {max-width: 21.6vw;}
    .is-05.mouthwash-cleansing__list__iamge {max-width: 27.6vw;}
    .is-06.mouthwash-cleansing__list__iamge {max-width: 31.3vw;}

    .mouthwash-cleansing__list__text {
        margin: 0 2.67vw;
        font-size:1.25rem;
    }
}