/* ========================================
   リセット
======================================== */
.dream_facecream a:link{
    color: #716863;
    display: block;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.dream_facecream a:visited,
.dream_facecream a:active{
    color: #716863;
}

/* ========================================
   共通スタイル
======================================== */
.dream_facecream{
    margin: auto;
    width: 100%;
    max-width: 750px;
    box-shadow: 20px 0 15px -10px #0003, -20px 0 15px -10px #0003;
}
.dream_facecream img{
    width: 100%;
}
.dream_facecream .is-flex{
    display: flex;
    align-items: center;
}
.dream_facecream .pr{
    position: relative;
}
.dream_facecream .pa{
    position: absolute;
}
.dream_facecream .side-margin{
    margin: 0 10%;
}
.dream_facecream .special_page{
    bottom: 0.3%;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
}

/* 見出し */
.dream_facecream h2{
    margin-bottom: 5%;
}
.dream_facecream h3{
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    position: relative;
    line-height: 1.2;
    text-align: center;
    background: #feecf4;
    padding: 6% 0 5%;
    font-size: min(41px, 10.9vw);
    color: #5e605d;
    margin-bottom: 8%;
    letter-spacing: -0.15rem;
}
.dream_facecream h3::before{
    position: absolute;
    top: -21px;
    left: 50%;
    transform: translateX(-50%);
    background: #fa82b6;
    padding: 0.4% 4% 1.1%;
    letter-spacing: 0.2rem;
    line-height: 1;
    color: #fff;
    font-size: min(30px, 10.6vw);
    border-radius: 100px;
}
.dream_facecream h3::after{
    content: '';
    position: absolute;
    bottom: -21px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 27px solid transparent;
    border-right: 27px solid transparent;
    border-top: 27px solid #feecf4;
}
.dream_facecream h3 .strong{
    color: #f783b5;
    font-size: min(49px, 12.3vw);
    letter-spacing: -0.2rem;
}

/* テキスト */
.dream_facecream p{
    line-height: 1.8;
    font-weight: 400;
    font-size: min(27px, 7.3vw);
    color: #5d5d5d;
}
.dream_facecream .note{
    margin-top: 2.1%;
    line-height: 1.6;
    font-size: min(17px, 4.3vw);
    color: #717171;
}
.dream_facecream sup{
    font-size: min(14px, 3vw);
    color: #5f605d;
}
.dream_facecream figure{
    margin-bottom: 6%;
}

/* ========================================
   目次
======================================== */
.dream_facecream .contens{
    margin: 7% auto 5%;
}
.dream_facecream .contens_ttl{
    padding: 0 1.4%;
    line-height: 1;
    background-color: #fff;
    z-index: 1;
    color: #f981b5;
    font-size: min(41px, 10.9vw);
    left: 50%;
    transform: translateX(-50%);
    top: -3.6%;
}
.dream_facecream .contens_inner{
    margin: auto;
    padding: 8.6% 0 5%;
    width: 50%;
}
.dream_facecream .contens_inner::before,
.dream_facecream .contens_inner::after{
    display: block;
    background-image: url(/img/items/498_dream_facecream/contens_line.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 66%;
    height: 83px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.dream_facecream .contens_inner::before{
    content: '';
    top: 0;
}
.dream_facecream .contens_inner::after{
    content: '';
    bottom: 0;
    transform: translateX(-50%) scaleY(-1);
}
.dream_facecream .contens_inner li{
    position: relative;
    color: #716863;
    font-size: min(28px, 7.5vw);
    line-height: 1.4;
    padding-bottom: 3%;
    padding-left: 3%;
    margin-bottom: 4%;
    border-bottom: 2px dashed #fd9cb5;
}
.dream_facecream .contens_inner li:last-child{
    border-bottom: none;
}
/* 目次リスト矢印 */
.dream_facecream .contens_inner li::before,
.dream_facecream .contens_inner li::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 3%;
}
.dream_facecream .contens_inner li::before{
    width: 12px;
    height: 12px;
    margin-top: -8px;
    margin-right: 9px;
    border-top: 2.5px solid #ffffff;
    border-right: 2.5px solid #ffffff;
    transform: rotate(135deg);
    z-index: 1;
}
.dream_facecream .contens_inner li::after{
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #f981b5;
    border-radius: 50%;
}

/* ========================================
   製品の特長
======================================== */
/* point共通 */
.dream_facecream .point1,
.dream_facecream .point2,
.dream_facecream .point3,
.dream_facecream .point4,
.dream_facecream .point5,
.dream_facecream .point6{
    margin-bottom: 12%;
}
.dream_facecream .point1 h3::before{ content: 'point1'; }
.dream_facecream .point2 h3::before{ content: 'point2'; }
.dream_facecream .point3 h3::before{ content: 'point3'; }
.dream_facecream .point4 h3::before{ content: 'point4'; }
.dream_facecream .point5 h3::before{ content: 'point5'; }
.dream_facecream .point6 h3::before{ content: 'point6'; }
.dream_facecream .point7 h3::before{ content: 'point7'; }

/* efficacy-desc共通 */
.dream_facecream .efficacy-desc{
    gap: 4%;
}
.dream_facecream .efficacy-desc figure{
    flex: 1;
    margin-bottom: 0;
}
.dream_facecream .efficacy-desc figure img{
    width: 100%;
    height: auto;
}
.dream_facecream .ingredient-desc{
    padding: 2%;
    border: 1.5px solid #f981b5;
    border-radius: 10px;
}

/* point1 */
.dream_facecream .point1 .efficacy-desc{
    margin: 0 10%;
    padding: 3%;
    border: 2px solid #fb83b7;
    border-radius: 13px;
}
.dream_facecream .point1 .efficacy-desc p{
    width: 70%;
    margin: 0;
}

/* point2, point3, point4共通 */
.dream_facecream .point2 .efficacy-desc,
.dream_facecream .point3 .efficacy-desc,
.dream_facecream .point4 .efficacy-desc{
    margin-top: 5%;
}
.dream_facecream .point2 .efficacy-desc p,
.dream_facecream .point3 .efficacy-desc p,
.dream_facecream .point4 .efficacy-desc p{
    width: 65%;
}

/* point5 */
.dream_facecream .point5 .efficacy-desc{
    justify-content: center;
    gap: 7%;
    margin-top: 4.5%;
}
.dream_facecream .point5 .efficacy-desc figure{
    width: 33%;
    flex: none;
}

/* point6 */
.dream_facecream .point6 .efficacy-desc{
    margin: 0 10%;
    margin-top: 3.5%;
    padding: 3%;
    border: 2px solid #fb83b7;
    border-radius: 13px;
}

/* point7 */
.dream_facecream .point7 .efficacy-desc.sensitive{
    margin-bottom: 6.5%;
}
.dream_facecream .point7 .efficacy-desc.sensitive h4,
.dream_facecream .point7 .efficacy-desc.test h4{
    border: 6px solid #ddfbf7;
    border-bottom: none;
    border-radius: 13px 13px 0 0;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    position: relative;
    line-height: 1.25;
    text-align: center;
    padding: 5% 0 4%;
    font-size: min(34px, 9vw);
    color: #5e605d;
    letter-spacing: -0.15rem;
}
.dream_facecream .point7 .efficacy-desc.sensitive ul{
    flex-wrap: wrap;
    gap: 16px 4%;
    padding: 4%;
    background: #eef8f8;
    border: 6px solid #ddfbf7;
    border-top: none;
    border-radius: 0 0 13px 13px;
}
.dream_facecream .point7 .efficacy-desc.sensitive ul li{
    width: 48%;
}
.dream_facecream .point7 .efficacy-desc.test{
    padding-bottom: 12%;
    background: #eef8f9;
}
.dream_facecream .point7 .efficacy-desc.test h4{
    border: none;
    text-shadow:
        6px 0 0 #fff,
        -6px 0 0 #fff,
        0 6px 0 #fff,
        0 -6px 0 #fff,
        4px 4px 0 #fff,
        -4px 4px 0 #fff,
        4px -4px 0 #fff,
        -4px -4px 0 #fff,
        3px 5px 0 #fff,
        -3px 5px 0 #fff,
        3px -5px 0 #fff,
        -3px -5px 0 #fff,
        5px 3px 0 #fff,
        -5px 3px 0 #fff,
        5px -3px 0 #fff,
        -5px -3px 0 #fff;
}
.dream_facecream .point7 .efficacy-desc.test ul li{
    margin-bottom: 1.4%;
    padding: 2%;
    background: #fff;
    border: 4px solid #bce8ef;
    border-radius: 13px;
}
.dream_facecream .point7 .efficacy-desc.test ul li p{
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.1rem;
    font-size: min(29px, 7.7vw);
    color: #64b9bd;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
}

/* ========================================
   HOW TO USE
======================================== */
.dream_facecream .how_to_use{
    padding: 6% 0 6%;
    background: #c88ebc;
}
.dream_facecream .how_to_use h3{
    position: relative;
    margin-bottom: 3%;
    font-size: min(55px, 13.5vw);
    background: #c88ebc;
    color: #fff;
}
.dream_facecream .how_to_use h3::before{
    content: 'HOW TO USE';
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    font-size: min(24px, 6.3vw);
}
.dream_facecream .how_to_use h3::after{
    content: '・・・';
    position: absolute;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    font-size: min(29px, 8.8vw);
    letter-spacing: -0.2rem;
}
.dream_facecream .how_to_use .bg_color{
    background: #fff;
    border-radius: 13px;
    margin: 0 4%;
    padding: 4%;
}
.dream_facecream .how_to_use .bg_color .howto_order > p{
    background: #fdf6f7;
    padding: 4% 5%;
    border-radius: 13px;
}
.dream_facecream .how_to_use .howto_order_inner{
    margin: 5% 5% 0;
}
.dream_facecream .how_to_use .howto_order_inner li{
    padding-left: 5%;
    width: 50%;
}
.dream_facecream .how_to_use .howto_order_inner li:first-child{
    padding-right: 5%;
    padding-left: 0;
    border-right: 4px dotted #c98fbd;
}

/* ========================================
   sec_birth（ドリームデザインとは）
======================================== */
.dream_facecream .sec_birth_wrapper h2{
    margin-bottom: 0;
}
.dream_facecream .sec_birth .textBlock{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}
.dream_facecream .sec_birth .textBlock .marker_gr{
    background-image: linear-gradient(transparent 50%, rgba(97, 190, 197, .27) 50%);
    padding-bottom: 0.5%;
}
.dream_facecream .sec_birth .block01{
    top: 1.3%;
}
.dream_facecream .sec_birth .block01 sup{
    font-size: 0.6em;
}
.dream_facecream .sec_birth .block01 p + p{
    margin-top: 1.2em;
}
.dream_facecream .sec_birth .block01 .bg_circle{
    background-image: url(/img/items/498_dream_facecream/bg_circle.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    padding: 1.3% 4.2% 2.2%;
}
.dream_facecream .sec_birth .block02{
    bottom: 4.4%;
}



/* SPスタイル */
@media screen and (max-width: 768px) {
    .dream_facecream{
        max-width: inherit;
        box-shadow: none;
    }
    .dream_facecream .features,
    .dream_facecream .how_to_use,
    .dream_facecream .sec_birth_wrapper{
        scroll-margin-top: 50px;
    }
    .dream_facecream .point7 .efficacy-desc.sensitive h4,
    .dream_facecream .point7 .efficacy-desc.test h4{
        margin: 0;
    } 
    .dream_facecream p{
        line-height: 1.7;
    }
    .dream_facecream h3{
        line-height: 1.2;
    }
    .dream_facecream .contens_inner li,
    .dream_facecream p{
        font-weight: 600;
    }
    .dream_facecream .sec_birth_wrapper p{
        line-height: 2;
    }

}