/*============================================================*/
/*    共通 */
/*============================================================*/
@media screen and (min-width: 768px){
    body {
        min-width: auto;
    }
}
section {
    margin: 0;
}
p {
    margin: 0;
}

.main_content {
    margin-bottom: 0;
}


/*============================================================*/
/*    フッター */
/*============================================================*/
.attention_box .att-in {
	max-width: 768px;
}


/*============================================================*/
/*    cart */
/*============================================================*/
.cart {
}
.cart button {
	border-radius: 4px;
	color: #fff;
	width: 100%;
	font-size: 4.5vw;
	line-height: 0;
	padding: 4.5vw 0;
	background: #8DD64D;
	background: linear-gradient(180deg, #8DD64D 0%, #569715 100%);
}
.cart button i {
    margin-left: 10px;
}
@media screen and (min-width: 769px){
    .cart button {
        font-size: 30px;
        padding: 25px 0;
    }
}


/*============================================================*/
/*    枠 */
/*============================================================*/
main {
    max-width: 768px;
    width: 100%;
    margin: auto;
    font-size: 3.5vw;
    line-height: 1.8;
}
@media screen and (min-width: 769px){
    main {
        font-size: 24px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
    }
}


/*============================================================*/
/*    メインビジュアル */
/*============================================================*/
.mv img {
    width: 100%;
}


/*============================================================*/
/*    オファー1 */
/*============================================================*/
.offer1 {
    background: #F6F5F5 url("../img/offer1_bg.jpg") no-repeat center top;
    background-size: 100% auto;
    padding: 0 4vw 5vw;
}
.offer1_block {
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
    padding: 3vw 0;
}
.offer1 .cart {
    margin: 5vw 3vw;
}
@media screen and (min-width: 769px){
    .offer1 {
        padding: 0 40px 40px;
    }
    .offer1_block {
        padding: 20px 0;
    }
    .offer1 .cart {
        margin: 30px 20px;
    }
}


/*============================================================*/
/*    あの頃と、明らかに肌が変わってきた... */
/*============================================================*/
.change {
    padding: 5vw 4vw;
}
@media screen and (min-width: 769px){
    .change {
        padding: 40px;
    }
}


/*============================================================*/
/*    必要なうるおいが、肌に届いていないから！？ */
/*============================================================*/
.skin_comparison {
    background: #FDEEEC;
    padding: 5vw 4vw;
}
@media screen and (min-width: 769px){
    .skin_comparison {
        padding: 40px;
    }
}


/*============================================================*/
/*    美肌を研究し続けて140年以上 */
/*============================================================*/
.birth {
    padding: 5vw 4vw 8vw;
}
@media screen and (min-width: 769px){
    .birth {
        padding: 40px 40px 80px;
    }
}


/*============================================================*/
/*    6つのケア */
/*============================================================*/
.care {
    padding: 5vw 4vw;
}
.care_note {
    font-size: 70%;
}
@media screen and (min-width: 769px){
    .care {
        padding: 40px;
    }
}



/*============================================================*/
/*    ポイント1 */
/*============================================================*/
.point1 {
    padding: 5vw 4vw;
    background: #FDEEEC;
}
.point1_title {
    margin-bottom: 5vw;
}
.point1_text {
    text-align: center;
    margin-bottom: 5vw;
}
.point1 ul {
    padding: 0;
}
.point1 li {
    margin-bottom: 5vw;
}
.point1 li:last-child {
    margin-bottom: 0;
}
.point1_note {
    font-size: 70%;
    text-align: right;
    margin-top: 10px;
}
@media screen and (min-width: 769px){
    .point1 {
        padding: 40px;
    }
    .point1_title {
        margin-bottom: 30px;
    }
    .point1_text {
        margin-bottom: 30px;
    }
    .point1 li {
        margin-bottom: 30px;
    }
}



/*============================================================*/
/*    ポイント2 */
/*============================================================*/
.point2 {
    padding: 5vw 4vw 0;
}
.point2_title {
    margin-bottom: 5vw;
}
.point2_text {
    text-align: center;
    margin-bottom: 5vw;
}
.point2_text span {
    font-size: 70%;
}
.point2 ul {
    padding: 0;
}
.point2 li {
    margin-bottom: 5vw;
}
.point2 li:last-child {
    margin-bottom: 0;
}
.point2_note {
    font-size: 70%;
    text-align: right;
    margin-top: 10px;
}
@media screen and (min-width: 769px){
    .point2 {
        padding: 40px;
    }
    .point2_title {
        margin-bottom: 30px;
    }
    .point2_text {
        margin-bottom: 30px;
    }
    .point2 li {
        margin-bottom: 30px;
    }
}




/*============================================================*/
/*    ポイント3 */
/*============================================================*/
.point3 {
    padding: 5vw 4vw;
    background: #F3F0E9;
}
.point3_title {
    margin-bottom: 5vw;
}
.point3_text {
    margin-top: 5vw;
}
.point3_text2 {
    margin-top: 5vw;
}
@media screen and (min-width: 769px){
    .point3 {
        padding: 40px;
    }
    .point3_title {
        margin-bottom: 30px;
    }
    .point3_text {
        margin-top: 30px;
    }
    .point3_text2 {
        margin-bottom: 30px;
    }
}


/*============================================================*/
/*    声 */
/*============================================================*/
.voice {
    padding: 5vw 4vw 10vw;
}
.voice_block {
    border: 1vw solid #FDEEEC;
    padding: 5vw;
    margin-bottom: 4vw;
}
.voice_block_poster {
    text-align: right;
    margin-top: 3vw;
}
.voice_note {
    font-size: 70%;
}
@media screen and (min-width: 769px){
    .voice {
        padding: 40px 40px 80px;
    }
    .voice_block {
        border: 10px solid #FDEEEC;
        margin-bottom: 30px;
        padding: 30px;
    }
    .voice_block_poster {
        margin-top: 20px;
    }
}


/*============================================================*/
/*    オファー2 */
/*============================================================*/
.offer2 {
    background: #F6F5F5;
}
.offer2_inner {
    padding: 0 4vw 5vw;
}
.offer2_title {
    margin-bottom: 5vw;
}
.offer2_block {
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
    padding: 10px 0;
}
.offer2 .cart {
    margin: 5vw 3vw;
}
@media screen and (min-width: 769px){
    .offer2_inner {
        padding: 0 40px 40px;
    }
    .offer2_title {
        margin-bottom: 40px;
    }
    .offer2_block {
        padding: 20px 0;
    }
    .offer2 .cart {
        margin: 30px 20px;
    }
}


/*============================================================*/
/*    声 */
/*============================================================*/
.ingredient {
    padding: 5vw 4vw;
    background: #FDEEEC;
}
.ingredient_btn {
    position: relative;
    background: #FFF;
    text-align: center;
    display: block;
    margin: 4vw 0 3vw;
    padding: 2vw;
    cursor: pointer;
}
.ingredient_btn::before {
    color: #ED7476;
    font-size: 5.5vw;
    font-family: "Font Awesome 5 Pro";
    content: "\f0d7";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 3vw;
    transform: translate(0 , -50%);
}
.ingredient .active::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f0d8";
    font-weight: 900;
}
.ingredient_box {
    display: none;
}
@media screen and (min-width: 769px){
    .ingredient {
        padding: 40px;
    }
    .ingredient_btn {
        margin: 40px 0 20px;
        padding: 15px;
    }
    .ingredient_btn::before {
        font-size: 40px;
        right: 30px;
    }
}