@charset "utf-8";

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
}

body {
    background-color: #fff;
    overflow-wrap: break-word;
}

article,
header {
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* text */
.min_b {
    font-family: "Noto Serif Japanese", serif;
    font-weight: 600;
}

.mont {
    font-family: "Montserrat";
    font-weight: 400;
}

.mont_b {
    font-family: "Montserrat";
    font-weight: 500;
}

.t_blue {
    color: var(--blue);
}

.t_pink {
    color: var(--pink);
}

/* background */
.bg_blue {
    background: var(--pale-blue);
    color: var(--font-color-blue);
}

.bg_brown {
    background: var(--pale-brown);
    color: var(--font-color-brown);
}

.bg_pink {
    background: var(--pink-30);
    color: var(--font-color-brown);
}

.bg_white {
    background: #fff;
    color: var(--font-color-brown);
}

/* title */
.main_title {
    text-align: center;
    font-size: var(--21px);
    color: var(--font-color-brown);
    letter-spacing: 0.4em;
}

.main_title>.mont {
    display: block;
    text-align: center;
    font-size: 136%;
    color: var(--pink);
    letter-spacing: 0.15em;
}

.title_30 {
    font-weight: 700;
    font-size: var(--30px);
    letter-spacing: 0.16em;
}

.title_28 {
    font-size: var(--28px);
    letter-spacing: 0.05em;
}

.title_24 {
    font-size: var(--24px);
}

/* link */
.bg_blue a {
    color: var(--font-color-blue);
}

a.underline {
    text-decoration: underline;
    font-weight: 700;
}

/* parts */
hr {
    /* reset */
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

ul.list_dot>li {
    position: relative;
    padding-left: 1rem;
}

ul.list_dot>li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "・";
    display: inline-block;
}

/* #fv */
#fv {
    background: #fff;
}

#fv .visual {
    position: relative;
    background: url(../images/fv_main_sp.jpg) no-repeat center top;
    background-size: cover;
}

#fv .visual .logo {
    position: absolute;
    width: 80px;
    right: 10px;
    top: 10px;
}

#fv .visual .photo-care {
    position: absolute;
    width: 12px;
    top: 34%;
    right: 15px;
}

#fv .visual .bright-clean {
    position: absolute;
    width: 12px;
    bottom: 5vw;
    right: 15px;
}

#fv .visual>.fv_topWrap {
    height: 92vh;
    /* max-height: 800px; */
}

#fv .visual>.fv_topWrap>h1 {
    position: absolute;
    right: 72vw;
    top: 46%;
    transform: translateY(-50%);
}

#fv .visual>.fv_topWrap>h1 img {
    display: inline-block;
    width: 20%;
    max-width: 110px;
}

@media screen and (min-width: 768px) {
    #fv .visual {
        background: url(../images/fv_main_pc.jpg) center center no-repeat;
        background-size: cover;
        /* height: 85vh;
        max-height: 800px; */
    }

    #fv .visual .logo {
        top: 20px;
        right: 20px;
        width: 148px;
    }

    #fv .visual .photo-care,
    #fv .visual .bright-clean {
        width: 18px;
    }

    #fv .visual .photo-care {
        top: initial;
        right: initial;
        left: 10px;
        bottom: 13vw;
    }
    #fv .visual .bright-clean {
        bottom: 12vw;
    }

    #fv .visual>.fv_topWrap>h1 {  
        position: absolute;
        right: 40%;
        top: 3%;
        transform: none;
        width: 100%;
      }
      #fv .visual>.fv_topWrap>h1 img {
        max-width: 7%;
    }
}

/* fv min-width:768px */

/* fv-under */
#fv-under {
    position: relative;
    background: linear-gradient(0deg,
            #fcfbfa 63%,
            #f4f0ee 65%,
            #f6f3f1 90%,
            #f7f5f3 100%);
}

#fv-under .col6 {
    padding: 0;
    transform: translateY(-20px);
}

#fv-under h2 {
    line-height: 1.6;
    text-align: center;
}

#fv-under h2 strong {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 150%;
}

#fv-under .icon {
    margin-top: 0.5rem;
    width: 100%;
    text-align: center;
}

#fv-under .icon>img {
    display: inline-block;
    margin-right: 3px;
    width: 35px;
}

@media screen and (min-width: 768px) {
    #fv-under .col6 {
        padding: 0 30px 30px;
        margin-bottom: -40px;
        transform: translateY(-40px);
    }

    #fv-under h2,
    #fv-under h2 strong,
    #fv-under .icon {
        text-align: left;
    }

    #fv-under .icon {
        margin-top: 1rem;
    }

    #fv-under .icon>img {
        width: 55px;
    }
}

/* fv-under min-width:768px */

/* trouble */
#trouble {
    position: relative;
    background: linear-gradient(to bottom, #fcfbfa 150px, #f0eae6 150px);
}

#trouble:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/trouble_bg_white.png) no-repeat center top;
    background-size: cover;
}

#trouble .bg_white {
    display: flex;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

#trouble .bg_white h2 small {
    display: block;
    font-size: var(--19px);
    letter-spacing: 0.15em;
}

#trouble .bg_white h2 strong {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--30px);
    line-height: 1.5;
}

#trouble .bg_white li {
    position: relative;
    padding: 0.3rem 0 0.3rem 20px;
    border-bottom: 1px solid #f2d7dc;
}

#trouble .bg_white li:before {
    position: absolute;
    top: 6px;
    left: 0;
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url(../images/icon_check_trouble.svg) no-repeat center center;
    background-size: cover;
}

#trouble .bg_white li strong {
    color: var(--pink);
    font-size: 110%;
    background: linear-gradient(transparent 60%, #fff0f2 60%);
}

#trouble .answer {
    padding: 3rem 0;
    color: var(--font-color-brown);
}

#trouble .answer h3 {
    margin-bottom: 2rem;
    font-size: var(--24px);
    text-align: center;
    line-height: 1.6;
}

#trouble .answer h3>strong {
    display: inline-block;
    border-bottom: 1px dashed #de9ba6;
    margin-right: 3px;
    padding-bottom: 3px;
}

#trouble .answer dt {
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
    font-size: var(--18px);
    letter-spacing: 0.13em;
    border-top: 1px solid #ebc3ca;
    border-bottom: 1px solid #ebc3ca;
}
#trouble .trouble_slide_in_top_imgPC{
  width: 100%;
}

@media screen and (min-width: 768px) {
    #trouble {
        background: linear-gradient(to bottom, #fcfbfa 200px, #f0eae6 200px);
    }

    #trouble .bg_white {
        padding: 4rem 8rem;
    }

    #trouble .bg_white>div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #trouble .bg_white>div>h2 {
        margin-right: 60px;
    }

    #trouble .bg_white li {
        padding: 0.8rem 0 0.8rem 35px;
    }

    #trouble .bg_white li:before {
        top: 15px;
        width: 21px;
        height: 21px;
    }

    #trouble .answer {
        padding: 3rem 0 8rem;
    }

    #trouble .answer h3 {
        margin-bottom: 5rem;
        font-size: var(--28px);
        text-align: left;
    }

    #trouble .answer h3>strong {
        margin-right: 5px;
        padding-bottom: 6px;
    }
}

/* trouble min-width:768px */

/* difference */
#difference .head {
    padding: 3rem 0 2.5rem;
    background: url(../images/difference_head_bg_sp.jpg) no-repeat center center;
    background-size: cover;
    text-align: center;
    font-size: var(--25px);
    border-top: 2px solid #6196b1;
}

#difference .head>strong {
    display: block;
    text-align: center;
    font-size: 120%;
    line-height: 1.6;
}

#difference h3.min_b {
    font-size: var(--28px);
}

#difference .slide_wrapper .flex>div.flex {
    padding-top: 2rem;
}

#difference dl {
    padding: 0.8rem 1rem 1rem;
    box-sizing: border-box;
    width: calc(50% - 6px);
    background: #fff;
    border-radius: 4px;
}

#difference dt.t_blue {
    margin-bottom: 0.5rem;
    font-size: var(--20px);
}

#difference dd {
    font-size: var(--16px);
}

.difference-answer {
    padding-top: 180px;
    background: #f0f0f0 url(../images/difference-answer_sp.jpg) no-repeat center bottom;
    background-size: cover;
}

.difference-answer .col12 {
    text-align: center;
}

.difference-answer p {
    display: inline-block;
    padding: 0.5rem 0;
    text-align: center;
    font-size: var(--22px);
    line-height: 1.6;
    border-top: 1px solid #b0cbd8;
    border-bottom: 1px solid #b0cbd8;
}

@media screen and (min-width: 768px) {
    #difference .head {
        padding: 8rem 0 5rem;
        background-image: url(../images/difference_head_bg.jpg);
    }

    #difference .slide_wrapper .flex>div.fle {
        margin-top: 5rem;
        padding-top: 4rem;
    }

    #difference h3.min_b {
        font-size: var(--24px);
    }

    #difference dl {
        padding: 2rem;
        width: calc(50% - 10px);
        min-height: 290px;
    }

    #difference dt.t_blue {
        font-size: var(--21px);
    }

    .difference-answer {
        background-image: url(../images/difference-answer.jpg);
        background-color: #f0f0f0;
        background-position: center center;
        padding: 500px 0 0;
        background-size: auto 100%;
    }

    .difference-answer p {
        padding: 1rem 0;
        font-size: var(--27px);
    }

    #difference .slide_wrapper .flex>div.flex {
        margin-top: 2rem;
    }
}

/* difference min-width:768px */

@media screen and (min-width: 1080px) {
    #difference dl {
        min-height: 260px;
    }

    #difference h3.min_b {
        font-size: var(--28px);
    }
}

/* advice */
#advice.bg_blue {
    background: url(../images/advice_bg_sp.jpg) no-repeat left top;
    background-size: cover;
}

#advice h2>span {
    display: inline-block;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #b0cbd8;
    letter-spacing: 0.15em;
}

#advice h2>strong {
    display: block;
    font-size: var(--30px);
    line-height: 1.6;
    padding-left: 8%;
}

#advice .flex>figure>figcaption {
    font-size: var(--16px);
    padding-left: 10px;
}

@media screen and (min-width: 768px) {
    #advice.bg_blue {
        background-image: url(../images/advice_bg.jpg);
    }

    #advice div.flex-50 {
        padding-right: 15px;
    }

    #advice .flex>figure>figcaption {
        padding-left: 0;
        margin-top: 2rem;
    }

    #advice figure+div {
        padding-left: 30px;
    }

    #advice h2>strong {
        padding-left: 0;
    }
}

/* advice min-width:768px */

@media screen and (min-width: 1320px) {
    #advice figure>img {
        max-width: 220px;
    }
}

/* advice min-width:1320px */

/* awards */
#awards {
    /*position: relative;*/
    /*padding: 6px;*/
    /*box-sizing: border-box;*/
    /*background: url(../images/awards_bg_sp.jpg) no-repeat center bottom;*/
    /*background-size: cover;*/
    /*color: #fff;*/
    /*z-index: 1;*/
}

/*#awards:before,*/
/*#awards:after {*/
/*    position: absolute;*/
/*    top: 2px;*/
/*    left: 10px;*/
/*    content: "";*/
/*    display: block;*/
/*    width: 50%;*/
/*    max-width: 380px;*/
/*    height: 380px;*/
/*    background: url(../images/awards_photocare.png) no-repeat left top;*/
/*    background-size: 100%;*/
/*    z-index: -1;*/
/*}*/

/*#awards:after {*/
/*    left: auto;*/
/*    right: 0;*/
/*    background-image: url(../images/awards_brightclean.png);*/
/*}*/

#awards>.container {
    padding: 2rem 0;
    background-color: #f6f2ef;
    /*border: 1px solid var(--pink);*/
}

#awards h2 {
    margin-left: auto;
    margin-right: auto;
}

#awards h2>span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--pink);
    letter-spacing: 0.15em;
}

/*#awards h2>span:before,*/
/*#awards h2>span:after {*/
/*    content: "";*/
/*    display: block;*/
/*    width: 30px;*/
/*    height: 1px;*/
/*    background: var(--pink);*/
/*}*/

#awards h2>strong {
    display: block;
    margin-top: 1rem;
    text-align: center;
    font-size: var(--26px);
    line-height: 1.6;
}

#awards .small {
    padding: 0;
    text-align: center;
    font-size: var(--10px);
    line-height: 1.5;
}

#awards .awards_img_container {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

#awards .awards_img_container_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 30px 40px;
    justify-content: center;
    align-items: center;
}

#awards .awards_img_container_list li:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#awards .awards_img_container_list li:nth-child(2):after {
    content: "※";
    font-size: 8px;
}

#awards .awards_img_container_txt {
    margin-top: 10px;
    text-align: center;
    font-size: 8px;
}

#awards .small {
    margin-top: 20px;
    padding: 0 5%;
    font-size: 0.5em;
    text-align: left;
}

@media screen and (min-width: 768px) {
    #awards {
        /*background-image: url(../images/awards_bg.jpg);*/
        /*padding: 10px;*/
    }

    #awards:before,
    #awards:after {
        top: 0;
    }

    #awards>.container {
        padding: 5rem 0 8rem;
    }

    #awards figure.col2 {
        padding-left: 0;
        padding-right: 0;
    }

    #awards .awards_img_container {
        margin-top: 30px;
    }

    #awards .awards_img_container_list {
        display: flex;
        gap: 35px;
        justify-content: center;
        align-items: center;
    }

    #awards .awards_img_container_list li:nth-child(2):after {
        content: "※";
        font-size: 12px;
    }

    #awards .awards_img_container_txt {
        margin-top: 10px;
        text-align: center;
        font-size: 12px;
    }

    #awards .awards_img_container img {
        width: 200px;
        height: auto;
    }

    #awards .small {
        margin-top: 20px;
        text-align: center;
    }

    #awards .sp_br {
        display: none;
    }
}

/* awards min-width:768px */

@media screen and (min-width: 1320px) {
    #awards>.container {
        padding: 5rem 0;
    }

    #awards h2>span:before,
    #awards h2>span:after {
        width: 50px;
    }
}

/* awards min-width:1320px */

/* features */
.feature_title {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--light-pink);
    border-bottom: 1px solid var(--light-pink);
    color: var(--pink);
}

.feature_title>span {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.feature_title>span.mont {
    width: 28%;
    font-size: var(--15px);
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 0;
}

.feature_title>span.mont>small {
    display: inline-block;
    transform: translateY(2px);
}

.feature_title>span.mont>strong {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    font-size: 32px;
}

.feature_title>span.mont+span {
    width: 47%;
    padding: 0 5px;
    font-size: var(--25px);
    text-align: center;
}

.feature_title>span.mont+span:before,
.feature_title>span.icon:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: var(--light-pink);
}

.feature_title>span.icon {
    display: flex;
    align-items: center;
    width: 25%;
    padding-left: 10px;
}

.feature_title>span.icon>img {
    display: block;
    margin-left: 5px;
    width: 35px;
}

.feature_title>span.icon>img.head {
    width: 22px;
}

#features-1 .feature_title>span.mont {
    width: 26%;
}

#features-1 .feature_title>span.mont+span {
    width: 39%;
}

#features-1 .feature_title>span.icon {
    width: 35%;
}

#features .min_b.title_30 {
    letter-spacing: normal;
    line-height: 1.7;
    font-size: var(--26px);
}

#features .title_24 {
    line-height: 1.6;
    font-size: var(--22px);
}

/* features-1 */
#features-1 dl.col6>dt {
    margin-bottom: 1.5rem;
}

#features-1 .merit::before {
    content: "";
    display: block;
    margin: 3rem auto 2rem;
    height: 5px;
    width: calc(100% - 30px);
    max-width: 1260px;
    border-top: 3px double var(--light-pink);
}

#features-1 .merit_title {
    position: relative;
    text-align: center;
    font-size: var(--21px);
}

#features-1 .merit_title:before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background: url(../images/features_merit_icon.png) no-repeat center center;
    background-size: cover;
}

#features-1 .merit h3>strong {
    display: block;
    padding: 0.5rem;
    text-align: center;
    color: var(--pink);
    font-weight: 700;
    font-size: var(--18px);
    background: #fff;
}

#features-1 .merit .content_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#features-1 .merit .content_nav>a {
    display: block;
    padding: 0.3rem;
    width: calc(50% - 8px);
    box-sizing: border-box;
    background: var(--pink);
    color: #fff;
    font-weight: 700;
    font-size: var(--18px);
    text-align: center;
}

/* features-2 */
#features-2 .merit_box {
    padding: 2rem;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #f2d7dc;
}

@media screen and (min-width: 768px) {
    .feature_title {
        justify-content: center;
    }

    .feature_title>span {
        padding: 0 3rem;
    }

    .feature_title>span.mont {
        font-size: var(--17px);
        text-align: right;
        letter-spacing: 0.15em;
    }

    .feature_title>span.mont>strong {
        margin-left: 15px;
        font-size: 60px;
    }

    .feature_title>span.mont+span {
        font-size: var(--34px);
        letter-spacing: 0.1em;
    }

    .feature_title>span.icon>img {
        width: 56px;
    }

    .feature_title>span.icon>img.head {
        width: 32px;
    }

    .feature_title>span.mont,
    #features-1 .feature_title>span.mont,
    .feature_title>span.mont+span,
    #features-1 .feature_title>span.mont+span,
    .feature_title>span.icon,
    #features-1 .feature_title>span.icon {
        width: auto;
        padding: 0 2rem;
    }

    .feature_title>span.icon>img {
        margin-left: 10px;
    }

    .feature_title>span.mont+span:before,
    .feature_title>span.icon:before {
        height: 60px;
    }

    #features .min_b.title_30 {
        font-size: var(--30px);
    }

    /* features-1 */
    #features-1 .flex-40.min_b.title_30 {
        padding-left: 6%;
    }

    #features-1 dl.col6>dt {
        margin-bottom: 0;
        min-height: 7rem;
    }

    #features-1 .merit::before {
        margin: 6rem auto 4rem;
        border-top-width: 5px;
    }

    #features-1 .merit_title {
        margin-bottom: 1rem;
        font-size: var(--26px);
    }

    #features-1 .merit_title:before {
        margin-right: 10px;
        width: 70px;
        height: 70px;
    }

    #features-1 .merit h3>strong {
        font-size: var(--20px);
    }

    #features-1 .merit .content_nav {
        display: none;
    }

    #features-1 .merit .small,
    #features-2 .small {
        font-size: var(--11px);
    }

    /* features-2 */
    #features-2 .merit_box {
        padding: 3rem 5rem;
    }
}

/* features min-width:768px */

@media screen and (min-width: 1080px) {

    .feature_title>span.mont,
    #features-1 .feature_title>span.mont,
    .feature_title>span.mont+span,
    #features-1 .feature_title>span.mont+span,
    .feature_title>span.icon,
    #features-1 .feature_title>span.icon {
        width: auto;
        padding: 0 50px;
    }
}

/* other-features */
#other-features .col4>section {
    border-top: 1px solid #de9ba6;
    padding-top: 25px;
}

#other-features dt.min_b {
    margin-bottom: 0.6rem;
    font-size: var(--22px);
    line-height: 1.6;
}

#other-features figure.flex-s50 {
    padding-left: 20px;
}

#other-features dd.flex>figure {
    padding-left: 0;
    width: calc(50% - 10px);
    max-width: 285px;
}

#other-features figcaption {
    display: block;
    margin-top: 1rem;
    font-size: var(--15px);
}

@media screen and (min-width: 768px) {
    #other-features .col4 {
        max-width: 360px;
    }

    #other-features .col4>section {
        padding-top: 40px;
    }

    #other-features dt.min_b {
        margin-bottom: 2rem;
        font-size: var(--25px);
    }

    #other-features figure.flex-s50 {
        padding-left: 0;
        margin-top: 3rem;
    }

    #other-features dd.flex>figure {
        width: 100%;
    }

    #other-features dd.flex>figure+figure {
        margin-top: 3rem;
    }

    #other-features dl.flex-s50>dd {
        min-height: 100px;
    }
}

/* other-features min-width:768px */

@media screen and (min-width: 1080px) {
    #other-features dl.flex-s50>dd {
        min-height: 136px;
    }
}

/* check */
#check dt {
    padding: 0.5rem 2rem;
    background: #fff;
    font-size: var(--22px);
    font-weight: 700;
    color: var(--pink);
}

#check dd {
    padding: 2rem 0;
}

#check dd a {
    position: relative;
    display: block;
    padding: 0 0 10px 30px;
    color: var(--font-color-brown);
    font-size: var(--18px);
    cursor: pointer;
}

#check dd a::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid var(--pink);
}

#check dd a.current {
    cursor: default;
}

#check dd a.current:hover {
    opacity: 1;
}

#check dd a.current:before {
    background: var(--pink);
}

#check dd a.current:after {
    position: absolute;
    top: 2px;
    left: 6px;
    content: "";
    width: 7px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(40deg);
}

#check .btn_check {
    display: block;
    padding: 1rem;
    background: var(--pink);
    color: #fff;
    font-size: var(--20px);
    font-weight: 700;
    text-align: center;
    line-height: 1;
    cursor: pointer;
}

#check .result {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#check .result figure {
    padding-right: 20px;
    width: 25%;
    max-width: 100px;
}

#check .result h3 {
    font-size: var(--32px);
}

#check .result h3>.smaller {
    display: block;
    line-height: 1.6;
}

#check .result p {
    margin-top: 1rem;
    width: 100%;
}

.btn_check_again {
    display: inline-block;
    padding: 0.5rem 3rem;
    background: #fff;
    color: var(--pink);
    font-weight: 700;
    font-size: var(--20px);
    cursor: pointer;
}

#check .wrapper p a.btn_check,
#check .wrapper p a.btn_check_again,
.result_wrapper {
    display: none;
}

@media screen and (min-width: 768px) {
    #check dd {
        padding: 3rem 0;
    }

    #check dd a {
        padding: 0 0 10px 40px;
    }

    #check dd a::before {
        top: 6px;
        width: 23px;
        height: 23px;
    }

    #check dd a.current:after {
        top: 8px;
        left: 8px;
    }

    #check .btn_check {
        padding: 2rem;
    }

    #check .result p {
        margin-top: 2rem;
    }
}

/* check min-width:768px */

/* product */
.product .head {
    position: relative;
}

.product .head>figure {
    position: relative;
}

.product .head>figure>figcaption {
    position: absolute;
    bottom: -5px;
    left: 0;
    color: #fff;
    font-size: 277%;
    letter-spacing: 0.1em;
    line-height: 1;
}

.product .head .col6 {
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-20px);
    margin-bottom: -20px;
}

.product .head figure.flex-60 {
    width: 53%;
}

.product .head div.flex-40 {
    width: 47%;
}

.product .head h2 {
    margin: 1rem 0;
    font-size: var(--19px);
    color: var(--pink);
    line-height: 1.6;
}

.product#bright-clean .head h2 {
    color: var(--blue);
    letter-spacing: -0.05em;
}

.product .head h2 strong {
    display: block;
    font-weight: 700;
    font-size: 150%;
}

.product .head .icon>img {
    display: inline-block;
    margin-right: 3px;
    width: 22%;
    max-width: 50px;
}

.product .title_28 {
    width: 23%;
    text-align: center;
    font-size: var(--20px);
}

.product .check_list {
    width: 75%;
}

.product .check_list li {
    position: relative;
    padding: 0.3rem 0 0.3rem 18px;
    font-family: var(--font-family-min);
    font-weight: 600;
    color: var(--pink);
    border-top: 1px solid #ebc3ca;
}

.product .check_list li:last-child {
    border-bottom: 1px solid #ebc3ca;
}

#bright-clean.product .check_list li {
    color: var(--blue);
    border-top: 1px solid #c5cdd1;
}

#bright-clean.product .check_list li:last-child {
    border-bottom: 1px solid #c5cdd1;
}

.product .check_list li:before {
    position: absolute;
    top: 6px;
    left: 0;
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url(../images/icon_checklist.svg) no-repeat center center;
    background-size: cover;
}

#bright-clean.product .check_list li:before {
    background-image: url(../images/icon_checklist_b.svg);
}

.product .flex>figure.flex-s50 {
    padding-right: 20px;
}

.product .flex>div.flex-s50 {
    font-size: var(--16px);
}

.product .new {
    display: inline-block;
    padding: 2px 3px;
    background: var(--pink);
    color: #fff;
    font-size: var(--16px);
    font-family: var(--font-family-en);
    line-height: 1;
}

#bright-clean.product .new {
    background: var(--blue);
}

.product .title_24 {
    font-size: var(--22px);
    line-height: 1.6;
}

.product .mode {
    padding-bottom: 3rem;
}

.product .mode>h2 {
    padding-bottom: 0;
    color: var(--pink);
    font-weight: 700;
    font-size: var(--24px);
}

#bright-clean.product .mode>h2 {
    color: var(--blue);
}

.product .mode>h2>span {
    display: inline-block;
    margin-right: 10px;
    font-size: 70%;
    font-weight: normal;
    letter-spacing: 0.15em;
}

.product .mode dt {
    margin-bottom: 1rem;
    padding: 0.5rem 0 0.8rem;
    font-size: var(--20px);
    font-weight: 700;
    color: var(--pink);
    border-top: 1px solid #ebc3ca;
    border-bottom: 1px solid #ebc3ca;
    line-height: 1.2;
}

#bright-clean.product .mode dt {
    color: var(--blue);
    border-top-color: #c5cdd1;
    border-bottom-color: #c5cdd1;
}

.product .mode dt>strong {
    display: inline-block;
    margin-right: 1rem;
    font-size: 150%;
    font-weight: 500;
    font-family: var(--font-family-en);
    transform: translateY(2px);
}

.product .mode dd>p {
    font-size: var(--24px);
}

.product .mode dd>p>.time {
    display: inline-block;
    margin-left: 10px;
    padding: 0.5rem 1.5rem;
    background: #fff;
    border-radius: 30px;
    font-size: 75%;
    line-height: 1;
}

.product .mode dd>p>.time>.small {
    display: inline-block;
    transform: translateY(-2px);
}

@media screen and (min-width: 768px) {
    .product .product_head_phot_care_first{
      background: #edf2f2;
    }
    .product .product_head_phot_care_second{
      background: #D5E1E8;
    }
    
    .product .head {
        margin: 0 auto;
        max-width: 1320px;
    }

    #bright-clean.product .head {
        background: #d6e1e8;
    }

    .product .head>figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
    }

    .product .head>figure>img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product .head .col6 {
        transform: none;
        margin-bottom: 0;
    }

    .product .head h2 {
        margin: 0 0 1.5rem;
    }

    .product .head h2 strong {
        margin-top: 0.4rem;
    }

    .product .title_28 {
        margin-bottom: 1.5rem;
        width: 100%;
        text-align: left;
        font-size: var(--28px);
    }

    .product .check_list {
        width: 100%;
    }

    .product .check_list li {
        padding: 0.8rem 0 0.8rem 35px;
    }

    .product .check_list li:before {
        top: 11px;
        width: 21px;
        height: 21px;
    }

    .product .flex>figure.flex-s50 {
        padding-right: 0;
    }

    .product .flex>div.flex-s50 {
        padding-left: 30px;
        font-size: var(--17px);
    }

    .product .title_24 {
        font-size: var(--23px);
    }

    .product .mode {
        padding: 3rem 0 6rem;
    }

    .product .mode dt {
        margin-bottom: 2rem;
    }

    .product .mode dd>p>.time {
        display: inline-block;
        margin-left: 20px;
        padding: 0.5rem 2rem 0.8rem;
    }
}

/* product min-width:768px */

/* photo-care / bright-clean */
#photo-care {
    background: #fbf3f4;
    padding-bottom: 5rem;
    color: var(--font-color-brown);
}

#bright-clean {
    background: #f6f8f8;
    color: var(--font-color-blue);
}

#photo-care .photo-care-under,
#bright-clean .bright-clean-under {
    background: url(../images/photo-care-under_bg.jpg) no-repeat center bottom;
    background-size: auto 100%;
}

#bright-clean .bright-clean-under {
    background-image: url(../images/bright-clean-under_bg.jpg);
}

#photo-care .photo-care-under h2,
#bright-clean .bright-clean-under h2 {
    padding-top: 200px;
    padding-bottom: 10px;
    font-size: var(--24px);
    letter-spacing: 0.15em;
    color: #fff;
}

#photo-care .photo-care-under .wrapper,
#bright-clean .bright-clean-under .wrapper,
#photo-care .photo-care-under .col12,
#bright-clean .bright-clean-under .col12 {
    max-width: 100%;
    width: 100%;
}

@media screen and (min-width: 768px) {
    #photo-care {
        padding-bottom: 0;
    }

    #photo-care .photo-care-under h2,
    #bright-clean .bright-clean-under h2 {
        padding-top: 370px;
    }

    #photo-care .photo-care-under,
    #bright-clean .bright-clean-under {
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
    }
}

/* photo-care / bright-clean min-width:768px */

/* voice */
#voice h3.min_b {
    font-size: var(--26px);
}

#voice h3.min_b:before {
    content: "";
    display: block;
    margin: 0 auto 4rem;
    width: 100%;
    height: 1px;
    background: #de9ba6;
}

#voice .col10 .flex+.flex {
    margin-top: 2rem;
}

#voice .col10 .flex>figure {
    box-sizing: border-box;
    padding-right: 15px;
}

#voice .wrap_slide {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 80px;
}

#voice .voice_slide-items li {
    height: auto;
    margin-right: 20px;
    margin-left: 20px;
}

#voice .voice_slide-items li>img {
    border-radius: 20px;
}

#voice .voice_slide-items li>p {
    margin-top: 1rem;
}

/* Dots */
#voice .voice_slide-items .slick-dots {
    position: absolute;
    bottom: -50px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

#voice .voice_slide-items .slick-dots li {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 6px;
    padding: 0;
    cursor: pointer;
}

#voice .voice_slide-items .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

#voice .voice_slide-items .slick-dots li button:hover,
#voice .voice_slide-items .slick-dots li button:focus {
    outline: none;
}

#voice .voice_slide-items .slick-dots li button:hover:before,
#voice .voice_slide-items .slick-dots li button:focus:before {
    opacity: 1;
}

#voice .voice_slide-items .slick-dots li button:before {
    font-family: "slick";
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    content: "";
    background: #fff;
}

#voice .voice_slide-items .slick-dots li.slick-active button:before {
    background: #bd394f;
}

@media screen and (min-width: 768px) {
    #voice h3.min_b:before {
        width: calc(100% - 60px);
        margin: 2rem auto 8rem;
    }

    #voice .col10 {
        display: flex;
        justify-content: space-around;
    }

    #voice .col10 .flex {
        width: calc(33.3% - 60px);
    }

    #voice .col10 .flex+.flex {
        margin-top: 0;
    }

    #voice .col10 .flex>figure {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    #voice .wrap_slide {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 120px;
    }

    #voice .voice_slide-items li {
        margin-right: 30px;
        margin-left: 30px;
    }

    /* Dots */
    #voice .voice_slide-items .slick-dots {
        bottom: -80px;
    }

    #voice .voice_slide-items li>p {
        margin-top: 2rem;
    }
}

/* voice min-width:768px */

/* benefit */
#benefit .bg_pink {
    padding: 1.5rem;
    border-radius: var(--border-radius);
}

#benefit .bg_pink>h2 {
    position: relative;
    width: 100%;
    padding-left: 25%;
    padding-bottom: 10px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ebc3ca;
    font-size: var(--24px);
    color: var(--pink);
    font-weight: 700;
    line-height: 1.4;
    box-sizing: border-box;
}

#benefit .bg_pink>h2:before {
    position: absolute;
    bottom: 10px;
    left: 0;
    content: "";
    width: 23%;
    height: 195px;
    background: url(../images/benefit_img.png) no-repeat left bottom;
    background-size: 100%;
}

#benefit .bg_pink>h2>span {
    display: inline-block;
    width: 40%;
    max-width: 145px;
}

#benefit .flex>dl {
    position: relative;
    margin-top: 15px;
    padding: 2.5rem 1rem 2rem;
    width: calc(50% - 5px);
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
    z-index: 1;
}

#benefit .flex>dl dt {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 33%;
    max-width: 72px;
    z-index: -1;
}

#benefit .flex>dl dd {
    font-size: var(--28px);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

#benefit .flex>dl dd>strong {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    font-weight: normal;
    color: var(--pink);
}

@media screen and (min-width: 768px) {
    #benefit .bg_pink {
        padding: 3rem 2rem 5rem;
    }

    #benefit .bg_pink>h2 {
        padding-bottom: 20px;
        margin: 0 auto 3rem;
        max-width: 540px;
        padding-left: 170px;
        font-size: var(--26px);
    }

    #benefit .bg_pink>h2:before {
        width: 150px;
    }

    #benefit .flex {
        max-width: 540px;
        margin: 0 auto;
    }

    #benefit .flex>dl {
        width: calc(50% - 15px);
    }

    #benefit .flex>dl {
        position: relative;
        margin-top: 20px;
        padding: 4rem 1rem;
    }

    #benefit .flex>dl dt {
        top: -30px;
    }
}

/* benefit min-width:768px */

/* FAQ */
.title_faq {
    margin-bottom: 30px;
    font-size: var(--30px);
    color: var(--pink);
    letter-spacing: 0.2em;
    text-align: center;
}

#faq dl {
    padding: 0 20px;
    box-sizing: border-box;
    background: var(--pale-brown);
    border-radius: var(--border-radius);
}

#faq dl+dl {
    margin-top: 20px;
}

#faq dt {
    position: relative;
    padding: 20px 20px 20px 26px;
    font-size: var(--20px);
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity 0.2s;
}

#faq dt:hover {
    opacity: 0.7;
}

#faq dt:before {
    position: absolute;
    top: 19px;
    left: 0;
    content: "Q";
    display: inline-block;
    color: var(--pink);
    font-size: 150%;
    transform: translateY(-6px);
}

#faq dt:after {
    position: absolute;
    top: 21px;
    right: 0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #de9ba6;
    border-bottom: 2px solid #de9ba6;
    transform: rotate(45deg);
}

#faq dt.current:after {
    top: 28px;
    transform: rotate(-135deg);
}

#faq dd {
    display: none;
    padding-bottom: 20px;
}

@media screen and (min-width: 768px) {
    .title_faq {
        margin-bottom: 60px;
    }

    #faq dl {
        padding: 0 40px;
    }

    #faq dl+dl {
        margin-top: 30px;
    }

    #faq dt {
        padding: 25px 25px 25px 40px;
    }

    #faq dt:after {
        top: 33px;
    }

    #faq dt.current:after {
        top: 36px;
    }

    #faq dd {
        padding-bottom: 30px;
    }
}

/* faq min-width:768px */

/* .buy */
#buy .inner-wrapper+.inner-wrapper {
    margin-top: 2rem;
}

#buy .head .mont {
    padding-top: 1rem;
    color: var(--light-pink);
    letter-spacing: 0.15em;
}

#buy .head>h2 {
    margin: 1rem 0;
    font-size: var(--20px);
    line-height: 1.7;
}

#buy .head>h2>strong {
    display: block;
    font-weight: 700;
    font-size: 150%;
}

#buy .head .icon>img {
    display: inline-block;
    margin-right: 3px;
    width: 22%;
    max-width: 50px;
}

#buy .head .price {
    margin: 0.5rem 0;
    font-size: var(--34px);
}

#buy .head .price>small {
    display: inline-block;
    font-size: 60%;
}

/* // */
#buy .shokai_discount {
    margin-top: 10px;
    position: relative;
    background-color: #e05a5c;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 17px;
}

@media screen and (min-width: 768px) {
    #buy .shokai_discount {
        font-size: 20px;
    }
}

#buy .shokai_discount::after {
    position: absolute;
    bottom: -13px;
    right: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 1;
    margin: 0 auto;
    border-color: #e05a5c transparent;
    border-width: 18px 12px 0 12px;
    border-style: solid;
    content: "";
}

.shokai_teika {
    position: relative;
    font-size: 20px !important;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .shokai_teika {
        font-size: 27px !important;
    }
}

.shokai_teika::before {
    position: absolute;
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: currentColor;
    line-height: 1;
    width: 1em;
    height: 0.1em;
    background: currentColor;
    bottom: 40%;
    right: 25px;
}

@media screen and (min-width: 768px) {
    .shokai_teika::before {
        right: 85px;
        bottom: 42%;
    }
}

.shokai_teika::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    bottom: 16%;
    right: 23px;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .shokai_teika::after {
        right: 83px;
        bottom: 18%;
    }
}

.shokai_teikaSmall {
    font-size: 50% !important;
}

@media screen and (min-width: 768px) {
    .shokai_teikaSmall {
        font-size: 60%;
    }
}

.shokai_priceBox {
    margin-top: -20px !important;
    font-weight: bold;
}
.shokai_priceBox.no-discount{
    margin-top: 0 !important;
}

@media screen and (min-width: 768px) {
    .shokai_priceBox {
        margin-top: -27px !important;
    }
}

.shokai_price {
    color: #e05a5c;
    font-size: 35px;
}

@media screen and (min-width: 768px) {
    .shokai_price {
        font-size: 50px;
    }
}

/* // */

#buy .free-shipping {
    padding: 3px;
    font-weight: 700;
    font-size: var(--20px);
    text-align: center;
    border: 1px solid var(--brown-40);
}

#buy .free-shipping:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    width: 28px;
    height: 20px;
    background: url(../images/icon_freeshipping.svg) no-repeat left center;
    background-size: 100%;
    transform: translateY(-1px);
}

#buy .cart_form.btn {
    margin-bottom: 4rem;
}

#buy .addcart {
    margin-top: 20px;
    background: var(--pink);
    background-size: auto 65%;
    box-shadow: 0px 8px 0px rgba(0, 0, 0, 0.1);
    color: #fff;
    font-size: var(--24px);
    font-weight: 600;
    text-align: center;
    border-radius: 50px;
    display: block;
    padding: 1.2rem;
    cursor: pointer;
    width: 96%;
}

#buy .detail {
    display: none;
}

#buy .detail dl {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1rem;
}

#buy .detail dt,
#buy .detail dd {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--brown-20);
}

#buy .detail dt {
    width: 30%;
}

#buy .detail dd {
    width: 70%;
}

@media screen and (min-width: 768px) {
    #buy .inner-wrapper+.inner-wrapper {
        margin-top: 4rem;
    }

    #buy .col10 {
        max-width: 650px;
    }

    #buy .head>h2 {
        margin: 2rem 0;
    }

    #buy .head .price {
        margin: 1rem 0;
        font-size: var(--40px);
    }

    #buy .free-shipping:before {
        width: 32px;
        height: 22px;
    }
}

/* buy min-width:768px */

/* safe-cautions */
.trigger {
    position: relative;
    padding: 5px;
    border: 1px solid var(--brown-40);
    font-size: var(--18px);
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.trigger:after {
    position: absolute;
    top: 10px;
    right: 20px;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #de9ba6;
    border-bottom: 2px solid #de9ba6;
    transform: rotate(45deg);
}

.trigger.current:after {
    top: 15px;
    transform: rotate(-135deg);
}

.trigger:hover {
    opacity: 0.7;
}

#safe-cautions .detail {
    display: none;
}

#safe-cautions h3 {
    margin: 2rem 0 0.5rem;
}

@media screen and (min-width: 768px) {
    .trigger:after {
        top: 15px;
        width: 11px;
        height: 11px;
    }

    .trigger.current:after {
        top: 20px;
    }
}

/* safe-cautions min-width:768px */



/* footer */
.footer {
    color: var(--font-color-brown);
    background: #fff;
    border-top: 1px solid var(--brown-20);
}

.footer .footer_menu a {
    display: inline-block;
    padding: 3px 0;
    color: var(--font-color-brown);
    font-size: var(--16px);
    line-height: 1.4;
    vertical-align: middle;
}

.footer .footer_menu a:after {
    content: "";
    display: inline-block;
    margin: 0 5px;
    width: 1px;
    height: 12px;
    background: var(--brown-20);
    transform: translateY(2px);
}

.footer .footer_menu a:last-child:after {
    display: none;
}

.footer .copyright {
    border-top: 1px solid var(--brown-20);
    font-size: 80%;
}

@media screen and (min-width: 768px) {
    .footer .footer_menu {
        padding: 15px 30px;
    }

    .footer .footer_menu a:after {
        margin: 0 15px;
    }

    .footer .footer_menu a:nth-child(3):after {
        display: inline-block;
    }

    .footer .copyright {
        padding: 0;
    }

    .footer .copyright .col9 {
        padding-right: 170px;
    }
}

/* footer min-width:768px */

.slide_wrapper {
    padding: 15px;
    margin: 0 auto;
}

.slide_wrapper .buttons {
    display: flex;
    justify-content: space-between;
}

.slide_wrapper .buttons>.button {
    display: block;
    padding: 0.5rem;
    box-sizing: border-box;
    width: calc(50% - 10px);
    background: #7dafc7;
    color: #fff;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.slide_wrapper .buttons>.button.selected {
    background: #3f81a1;
}

.difference_slide-items>div {
    padding-top: 2rem;
}

@media screen and (min-width: 768px) {
    .slide_wrapper {
        padding: 30px;
        max-width: 1320px;
    }

    .slide_wrapper .buttons {
        display: none;
    }

    .difference_slide-items>div {
        padding-top: 0;
    }

    .difference_slide-items .slick-slide {
        padding: 30px;
        box-sizing: border-box;
    }
}

.delivery_mt {
    margin-top: 3rem !important;
}

@media screen and (min-width: 768px) {
    .delivery_mt {
        margin-top: 4.5rem !important;
    }

    .pc_dis_none {
        display: none;
    }
}

div.cm_myse {
    position: relative;
    margin: 50px auto -7%;
    padding-top: 37.3%;
    width: 50%;
    height: 0;
}

div.cm_myse iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75.4%;
}

.rakuten_link {
    background-size: auto 65%;
    box-shadow: 0px 8px 0px rgba(0, 0, 0, 0.1);
    font-size: var(--24px);
    font-weight: 600;
    text-align: center;
    border-radius: 50px;
    display: block;
    padding: 1.2rem;
    cursor: pointer;
    width: 100%;
    margin-bottom: 5rem;
    max-width: 564px;
    background: #fff !important;
    color: #bd394f !important;
    border: 1px solid #bd394f;
}

@media screen and (max-width: 767px) {
    .rakuten_link {
        width: 92% !important;
    }

    div.cm_myse {
        margin: 20px auto -12%;
        padding-top: 67%;
        width: 90%;
    }
}

/* Edge(EdgeHTML) */
_:-ms-lang(x)::backdrop,
.index_list a>figure img {
    height: auto;
}

_:lang(x)::-ms-,
.index_list a>figure img {
    height: auto;
}

.campaign_box {
    margin: 0 auto;
}

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

.campaign_box {
    margin-top: -50px;
}

.download_box {
    margin: 20px auto 0;
    padding: 10px 20px;
    display: block;
    max-width: 600px;
    background: #646464;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}

.campaign_box_inner {
    margin: 0 auto;
    max-width: 700px;
}

.campaign_box_inner .detail {
    margin-bottom: 30px;
}

.pdf {
    max-width: 20px;
}

.lead_text {
    margin-top: 40px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.text01 {
    margin: 30px 0 20px;
    font-size: 16px;
}

.small {
    font-size: 12px;
}

.mt_50 {
    margin-top: 50px;
}

.mt_30 {
    margin-top: 30px;
}

.mt_10 {
    margin-top: 10px;
}

.inter_box {
    margin-top: 30px;
    text-align: center !important;
    font-size: 16px;
}

.t_centre {
    text-align: center !important;
}

.text02 {
    font-size: 18px;
}

.t_bold {
    font-weight: bold;
}

.fs_16 {
    font-size: 16px;
}

@media screen and (max-width: 450px) {
    .campaign_box {
        margin-top: -30px;
    }

    .lead_text {
        margin-top: 25px;
        font-size: 120%;
    }

    .text01 {
        margin: 20px 0 10px;
        font-size: 100%;
    }

    .small {
        font-size: 90%;
    }

    .mt_50 {
        margin-top: 30px;
    }

    .t_centre {
        font-size: 100% !important;
    }

    .fs_16 {
        font-size: 100%;
    }
}

@media only screen and (max-width:750px) {
    .u_pc {
        display: none !important;
    }

    .u_sp {
        display: block;
    }
}

@media only screen and (min-width: 751px) {
    .u_pc {
        display: block;
    }

    .u_sp {
        display: none !important;
    }
}

.s_box {
    margin-left: 10px;
    display: inline-block;
    font-size: 16px;
}

.s_box_txt {
    font-size: 12px;
}

.s__txt {
    margin-right: 20px;
    padding: 0px 10px;
    position: relative;
    top: -8px;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid;
}

.price_txt {
    margin: 25px 0 20px !important;
    line-height: 30px;
}

.ss_txt {
    font-size: 11px;
}

.img_set {
    position: relative;
}

.img_set_box {
    width: 34%;
    top: 60px;
    right: -210px;
    position: absolute;
}

@media screen and (max-width: 767px) {
    .s_box {
        margin: 8px 0;
        display: inline-block;
        font-size: 15px;
    }

    .price_txt {
        margin: 18px 0 11px !important;
        line-height: 16px;
    }

    .s__txt {
        margin-right: 0px;
        padding: 6px 16px;
        position: relative;
        top: -15px;
        font-size: 16px;
    }

    .img_set_box {
        width: 45%;
        top: auto;
        right: auto;
        left: 2%;
        bottom: 20px;
        position: absolute;
    }
}

/* 2311_16 */
#at_cosme .voice {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    color: #476c6c;
    border: 1px solid #81bfc097;
}



#at_cosme .voice_head {
    display: flex;
    justify-content: space-between;
}

#at_cosme .voice_head img {
    width: 40%;
}

#at_cosme hr {
    height: 2px;
    background-color: #c3c3c398;
    margin: 10px 0;
}

#at_cosme .person_ico {
    display: inline-block;
    padding: 2%;
    border-radius: 100%;
    background-color: #eaeaea;
    width: 1.5em;
    height: 1.5em;
    overflow: hidden;
}

#at_cosme .info_list {
    display: grid;
    grid-template-columns: 1fr 3em 4em;
    align-items: center;
}

#at_cosme .info_list li {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: .5em;
}

#at_cosme .info_list li span {
    display: inline-block;
}

.product-inst-review .reviewer-rating {
    display: inline-block;
    padding-top: 2px;
    color: #000;
}

.reviewer-rating.rtg-5 {
    padding-left: 112px;
    background-position: 0 -73px;
}

.reviewer-rating.rtg-6 {
    padding-left: 112px;
    background-position: 0 -93px;
}

.reviewer-rating.rtg-7 {
    padding-left: 112px;
    background-position: 0 -113px;
}

.reviewer-rating {
    background: url(../images/ico_review_star_all.png) no-repeat;
    font-weight: bold;
    font-size: 105%;
    line-height: 1.25;
}

#at_cosme .voice-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2%;
    max-width: 1000px;
    padding: 0 15px;
}

.voice-note {
    text-align: right;
    width: 100%;
    font-size: 11px;
    color: #283d3d;
    margin-top: 10px;
    padding-right: 15px;
}

@media screen and (max-width: 768px) {
    #at_cosme .voice-wrapper {
        display: block;
    }

    #at_cosme .voice-wrapper>*+* {
        margin-top: 20px;
    }

    #at_cosme .voice {
        padding: 30px;
        font-size: 14px;
    }

    #at_cosme .info_list {
        grid-template-columns: 1fr 3em 4em;
    }

    .voice-note {
        text-align: left;
        padding-left: 15px;
    }
}

/*2024/02/27*/
.ttl_user-voice.pc_dis_none{
    display: none;

}





.awards_contents_container{
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    /*padding: 0 14rem;*/
}

.awards_contentsGroup01{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: start;
    /*width: 75%;*/
}

.awards_contentsGroup01 .awards_logo_container{
    width: 50%;
}

.awards_contentsGroup02{
    width: 25%;
}

.awards_logo_container{
    margin-top: 30px;
}

.awards_logo_container.pc_dis_none{
    display: none;
}

img.awards_logoGroup{
    width: 100%;
}

.awards_listUnit{
    width: calc((100% - 20px) / 2 );
    margin-right: 20px;
}

.awards_listUnit:last-child{
    margin-right: 0;
}

.awards_listHeading{
    position: relative;
    display: inline-block;
    z-index: 1;
    font-size: 18px;
    font-weight: bold;
    color: #5b2c34;
    background-color: #f6f2ef;
    padding: 0 20px;
}

.awards_listHeadingContainer{
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-bottom: 2em;
}

.awards_listHeadingContainer:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #5b2c34;
    top: 50%;
    left: 50%;
    transform : translate(-50%,-50%);
}

table.awards_listTable{
    width: 100%;
    border: none;
}

.awards_listTable tr,
.awards_listTable th,
.awards_listTable td{
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    font-size: 11px;
    padding: 4px 0;
    border: none;
    background: transparent;
    text-align: left;
    color: #5b2c34;
}

.awards_listTable th{
    position: relative;
    width: 20%;
    padding-left: 2.1em;
}

.awards_listTable th:after{
    content: "";
    position: absolute;
    width: 1.5em;
    height: 1px;
    background-color: #5b2c34;
    top: 1.25em;
    left: 1em;
    transform : translate(-50%,-50%);
}

.small.pc_dis_none{
    display: none;
}

/*hydro_lotion*/

.hydro_lotion{
    background: #fff;

}

.hydro_lotionInner{
    box-sizing: border-box;
    padding: 8rem 0 10rem;
    max-width: 1320px;
    margin: 0 auto;
}

.hydro_lotionHeading{
    font-size: 30px;
    font-weight: normal;
    color: #8faadc;
    padding: 0 0 20px;
    text-align: center;
    letter-spacing: 0.1em;
}

.hydro_lotionHeading02{
    font-size: 18px;
    font-weight: normal;
    color: #8faadc;
    text-align: left;
    letter-spacing: 0.1em;
}

.hydro_lotionHeading03{
    font-family: "Noto Sans CJK JP", sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    color: #555555;
}

.hydro_lotionHeading03_02{
    font-family: "Noto Sans CJK JP", sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #555555;

}

.hydro_lotionContentsGroup{
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    align-items: start;
    column-gap: 20px;
    padding: 0 11%;
}

.hydro_lotionContents01,
.hydro_lotionContents02{
    display: flex;
    flex-flow: column;
    row-gap: 20px;
    width: calc((100% - 20px) / 2);
}

.textUnit{
    width: 100%;
}

.textUnit p{
    font-family: "Noto Sans CJK JP" , sans-serif;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .1em;
    color: #555555;
}

.hydro_lotionImg{
    width: 100%;
}

.hydro_lotionImg img{
    width: 100%;
}

.hydro_lotionImg01{
    width: 70%;
}

.hydro_lotionBtn{
    display: block;
    width: 90%;
    text-align: center;
    border-radius: 4rem;
    font-family: "Noto Sans CJK JP" , sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: #ca6173;
    padding: 1.3rem 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {

    #awards h2{
        display: block;
        width: 100%;
        font-size: 1.5em;
    }

    #awards h2>span{
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .ttl_user-voice.sp_none {
        display: none;
    }

    .ttl_user-voice.pc_dis_none{
        display: block;
    }

    .small.sp_none{
        display: none;
    }

    .small.pc_dis_none{
        display: block;
    }

    .awards_logo_container.sp_none{
        display: none;
    }

    .awards_logo_container.pc_dis_none{
        display: block;
        margin-bottom: 24px;
    }

    .awards_contents_container{
        flex-flow: column;
    }

    .awards_contentsGroup01,
    .awards_contentsGroup02{
        width: 100%;
    }

    .awards_contentsGroup01{
        flex-flow: column;
    }

    .awards_listUnit{
        width: 100%;
        margin-right: 0;
    }

    .awards_contentsGroup01 .awards_logo_container{
        width: 100%;
    }

    #awards .awards_img_container{
        margin-top: 24px;
    }

    #awards .awards_img_container_list{
        grid-template-columns: auto;
        width: 60%;
        margin: 0 auto;
    }

    .awards_listTable th{
        padding-left: 1.5em;
    }

    .awards_listTable th:after{
        left: .3em;
    }

    .awards_listHeading{
        font-size: 14px;
    }

    /*  hydro_lotion  */

    .hydro_lotionInner{
        padding-left: 1.3rem;
        padding-right: 1.3rem;
    }

    .hydro_lotionContentsGroup{
        flex-flow: column;
        row-gap: 48px;
        padding: 0;
        column-gap: 0;
    }

    .hydro_lotionContents01,
    .hydro_lotionContents02{
        width: 100%;
    }
    
    .hydro_lotionContents01{
        row-gap: 0;
    }

    .hydro_lotionHeading{
        font-size: 20px;
    }

    .hydro_lotionHeading02{
        font-size: 14px;
        text-align: center;

    }

    .hydro_lotionHeading03{
        font-size: 20px;
        text-align: center;
    }

    .hydro_lotionHeading03_02{
        font-size: 12px;
        text-align: center;
        margin-bottom: 36px;
    }

    .textUnit{
        margin-bottom: 36px;
    }

    .textUnit p{
        text-align: center;
    }


    .hydro_lotionImg01{
        width: 100%;
    }

    .awards_contents_container{
        padding: 0 2rem;
    }

}




/* guide */
#guide.container {
    padding: 50px 15px;
    background: var(--pale-brown);
    color: #333;
}
#guide .guide-wrap{
    max-width: 1030px;
    margin: 0 auto;
}
#guide h2{
    font-size: 2.8rem;
    font-weight: 600;
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-align: center;
    line-height: 0.8;
    margin-bottom: 30px;
}
#guide h2 span{
    font-size: 1.2rem;
    letter-spacing: 2px;
}
#guide h3{
    font-size: 14px;
    border: 1px solid #333;
    border-radius: 5px;
    margin-top: 15px;
    padding: 5px;
    min-height: 50px;
    line-height: 1.5;
    text-align: center;
    font-weight: 600;
    box-sizing: border-box;
    position: relative;
}
#guide .link_underline{
    text-decoration: underline;
}
#guide h3.one-line{
    display: flex;
    align-items: center;
    justify-content: center;
}
#guide h3.link::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-48%);
    width: 20px;
    height: 20px;
    background: url(../images/external_link-icon.png);
    background-size: cover;
}
#guide h3 a{
    color: #333;
}
#guide p {
    padding: 5px 0;
}
    
@media screen and (min-width:769px) {
    #guide.container {
        padding: 60px 30px;
    }
    #guide h3{
        min-height: 60px;
        margin-top: 20px;
        font-size: 16px;
    }
    #guide h3.link::after{
        width: 25px;
        height: 25px;
        right: 15px;
    }
    #guide p{
        font-size: 16px;
    }
}/* min-width:660px */