#botanical_all{
    overflow: hidden;
    font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    line-height: 1.5;
}
#botanical_all img{
    width: 100%;
}
#botanical_all a{
    text-decoration: none;
    display: block;
}
#botanical_all ul {
    padding-inline-start: 0px;
}
#botanical_all li{
    list-style-type: none;
}
#botanical_all section{
    margin: 30px auto;
}
#seibun_bg_wrapper  {
    max-width: 1300px;
    margin: 0 auto;
}
.sec_tit_wrapper{
    text-align: center;
    margin-bottom: 30px;
}
#botanical_all h2{
    color: #959e9b;/*文字色*/
    padding: 0.5em 0;/*上下の余白*/
    border-top: solid 3px #B1DCE2;/*上線*/
    border-bottom: solid 3px #B1DCE2;/*下線*/
    text-align: center;
    display: inline-block;
}
#title {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 56.25vw;
    margin: 0 auto;
    max-height: 1150px;
    display: flex;
}
#heroimage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1800px;
    margin: 0 auto;
    width: 95%;
}
#hero-img {
    width: 70%;
}
#hero-logo {
    width: 50%;
    position: relative;
    z-index: 2;
    margin: 0 0 0 -30px;
    background-color: rgba(255,255,255,.9);
}
#keywords_w {
    max-width: 1300px;
    margin: 0 auto;
    background-color: #fff;
    filter: drop-shadow(2px 4px 6px #aaa);
}
#keywords{
    font-family: 'klee','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
.key_board{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width:98%;
    margin: 0 auto;
}
.key_board li{
    flex: 1 1 32%;
    margin-right:1%; 
    margin-bottom: 1%;
    position: relative;
    z-index: 1; 
}
.key_board li:last-child{
    margin-right: 0;
}
.key_board .key{
    position: absolute;
    width: 100%;
    font-size: 4vw;
    color: #fff;
}
.key_board .word{
    position: absolute;
    width: 80%;
    font-size: 10px;
    color: #fff;
}
/*7つのキーワード*/
#keywords{
    background-color: rgb(249, 249, 249);
}
#key1 p{
    top: 65%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    text-align: center;
}
/*ボリュームアップ*/
#key5 p{
    top: 65%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: 0 0 0 10%;
}
/*血色アップ*/
#key7 p{
    top: 65%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    text-align: center;
}
.left{
    text-align: left;
    display: block;
    width: 100%;
    margin: 0 auto;
}
/*縦じわフリー*/
#key9 p{
    top: 40%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: 0 0 0 10%;
}
#key10 p{
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    text-align: center;
}
#key11 p{
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    text-align: center;
}
#key12 p{
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    text-align: center;
}

/*唇の美容液*/
#key13 p{
    top: 30%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin:auto;
    text-align: center;
}
/*唇の美容液のテキスト*/
#key14 p{
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
}
#key15 p{
    top: 25%;
    left: 50%;
    transform: translateY(-25%) translateX(-50%);
    -webkit-transform: translateY(-25%) translateX(-50%);
    width: 80%;
    margin: 0 auto;
}
.key_board .word.li{
    top: 55%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin:auto;
    width: 70%;
}
/*リップパック*/
#key17 p{
    top: 65%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: 0 0 0 10%;
}
/*リップパックについて*/
#key19 p,#key20 ul,#key21 p,#key23 p,#key24 p{
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
    text-align: center;
}
/*リップ下地*/
#key25 p{
    top: 65%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: 0 0 0 10%;
}
/*グロス*/
#key27 p{
    top: 65%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: 0 0 0 10%;
}
/*下地としてもグロスとしても*/
#key29 p{
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: auto;
}
/*アニメーション*/
@keyframes fadeInUp {
    from {
        opacity: 0;
-webkit-transform: translate3d(0,10%,0);
        transform: translate3d(0, 10%, 0);
    }

    to {
        opacity: 1;
-webkit-transform: translateZ(0);
        transform: none;
    }
}

/*成分ここから*/
#seibun_bg_pc{
    display: none;
}
#seibun_bg_color{
    background-color: rgb(249, 249, 249);
}
#seibun_bg{
    min-height: 30vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
}
#seibun .seibun_name{    
    position: relative;
    padding: 0.5em;
    background: #a6d3c8;
    color: white;
    margin-top: .5em;
    margin-bottom: 0.3em;
}
#seibun .seibun_name::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
}
#seibun .seibun_detail{
    margin: auto;
    width: 80%;
    font-size: .8em;
    line-height: normal;
    display: none;
}
#seibun .seibun_text_box{
    text-align: center;
}
/*そのほかの成分*/
.seibun_bg{
    background-color: rgb(249,249,249);
}
.lip_open_wrapper{
    text-align: center;
}
.lip_nakami1,.lip_nakami2,.lip_nakami3,.lip_nakami4{
    display: none;
}
.lip_open {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    margin: 20px;
}
.seibun_items{
    background: linear-gradient(220deg, #41d4d3, #eb56ad);
    background-size: 400% 400%;
    -webkit-animation: se_oth_bg 4s ease infinite;
    -moz-animation: se_oth_bg 4s ease infinite;
    animation: se_oth_bg 4s ease infinite;
    position: relative;
    text-align: center;
    background-color: #fff;
    border: .25px solid #ccc;
    border-radius: 20px;
    padding: 10px;
    margin: 15px;
}
@-webkit-keyframes se_oth_bg {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes se_oth_bg {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes se_oth_bg { 
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
.seibun_items>div>p{
    font-weight: bold;
}
.se_oth_maru{
    background-color: #B1DCE2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 80px;
}
.atero{
    padding: 2em 0;
    background: linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3));
}
.atero_img{
    max-width: 200px;
    margin: 0 auto;
}
.atero_text{
    margin: 50px;
}
.br_768{
    display: none;
}
/*プランパーとは*/
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
dt{
    font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
    font-size: 3em;
    font-style: italic;
    color: #e3e3c1;
}
blockquote{
    margin-left: 1em;
    margin-right: 1em;
}
.plump_wrapper{
    text-align: right;
}
.plump_wrapper dl{
    display: inline-block;
}
.about_plumper_wrapper{
    position: relative;
}
.about_plumper_img{
    max-width: 430px;
    position: relative;
/*    z-index: -1;*/
}
.about_plumper_txt{
    position: absolute;
    background-color: rgba(255,255,255,.7);
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin: 0;
    padding: 1.5em .3em;
    width: 95%;
    line-height: 1.8em;
}
.about_plumper_txt>div{
    margin: .8em auto;
}
/*blackandwhite animation*/
@-webkit-keyframes passing-bar{
    0% {
        left: 0;
        right: auto;
        width: 0;
    }
    50% {
        left: 0;
        right: auto;
        width: 100%;
    }
    51% {
        left: auto;
        right: 0;
        width: 100%;
    }
    100% {
        left: auto;
        right: 0;
        width: 0;
    }
}
@keyframes passing-bar{
    0% {
        left: 0;
        width: 0;
    }
    50% {
        left: 0;
        width: 100%;
    }
    51% {
        left: 0;
        width: 100%;
    }
    100% {
        left: 100%;
        width: 0;
    }
}
@-webkit-keyframes passing-txt{
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes passing-txt{
    0% { opacity:0; }
    50% { opacity:0; }
    100% { opacity:1; }
}

/*使い方  */
.video_wrapper{
    text-align: center;
/*    background-color: rgb(249,249,249);*/
    background-position: center;
    background-size: cover;
}
#howtouse video{
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
}

/*users voice*/
#users_voice p{
    background-color: #f8f8ff;
    border: .5px dotted #ccc;
    padding: 1em 1.5em;
    border-radius: 20px;
    max-width: 800px;
    margin: 10px auto;
    filter:drop-shadow(0px 4px 3px #ccc)
}
.voice_wrapper{
    position: relative;
}
.lips1{
    display: none;
    max-width:280px;
    position: absolute;
    z-index: -1;
    bottom: 0px;
    right: 0;
}
.lips2{
    display: none;
    max-width:280px;
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0;
}
/*detail*/
.detail_img{
    max-width: 400px;
    margin: 0 auto;
}
.detail_brand_name_wrapper{
    text-align: center;
}
.detail_brand_name{
    position: relative;
    display: inline-block;
    padding: 0 60px;
}
.detail_brand_name:before, .detail_brand_name:after{
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2px;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
.detail_brand_name:before{
    left: 0;
}
.detail_brand_name:after{
    right: 0;
}
.detail_brand{
    font-size: .9em;
}
.detail_name{
    font-size: 1.1em;
    display: block;
    font-weight: bold;
}
.detail__price{
    margin-top: 0;
    text-align: right;
}
.detail_component{
    font-size: .8em;
    color:#aaa;
    border-top: .5px dotted #ccc;
    padding: 1.5em;
}
.detail_bg{
    background-color: rgb(249,249,249);
    padding: 20px;
}
@media(min-width: 500px){
    .key_board .word{
        font-size: 14px;
     }
    .atero_img{
        float:left;
        margin: 20px;
    }
}
@media(min-width: 768px){
    #botanical_all section{
        margin: 50px auto;
    }
    .sec_tit_wrapper{
        margin-bottom: 50px;
    }
    .key_board .word{
        font-size: 16px;
    }
    #key15 p{
        top: 30%;
        left: 50%;
        transform: translateY(-30%) translateX(-50%);
        -webkit-transform: translateY(-30%) translateX(-50%);
        width: 80%;
        margin: 0 auto;
    }
    #seibun_bg_wrapper{
        position: relative;
    }
    #seibun_bg{
        background-position: -150px;
        min-height: 480px;
    }
    #seibun .seibun_text_box{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 50%;
        max-width: 400px;
        /* background-color: rgba(255,255,255,.3); */
        filter: drop-shadow(-4px 0px 4px #cccccc);
    }
    #seubun .seibun_text_box>div{
        margin-left: -20px;
    }
    .br_768{
        display: block;
    }
    .lip_open_wrapper{
        position: relative;
        max-width: 800px;
        margin: auto;
    }
    .lip_nakami1{
        display: block;
        position: absolute;
        width: 50px;
        left: 70px;
        top: 30px;
    }
    .lip_nakami2{
        display: block;
        position: absolute;
        width: 30px;
        left: 140px;
        top: 200px;
    }
    .lip_nakami3{
        display: block;
        position: absolute;
        width: 30px;
        right: 200px;
        top: 80px;
    }
    .lip_nakami4{
        display: block;
        position: absolute;
        width: 50px;
        right: 80px;
        top: 170px;
    }
    .plump_wrapper{
        float: right;
    }
    .about_plumper_wrapper{
        position: relative;
    }
    .about_plumper_img{
        position: relative;
/*        z-index: -1;*/
    }
    .about_plumper_txt{
        background-color: inherit;
        bottom: 3em;
        left: 2em;
        right: 0;
        top: auto;
        left: auto;
        max-width: 930px;
        transform: inherit;
        -webkit-transform:inherit;
    }
    .about_plumper_txt p{
        background-color: #000;
        color: #fff;
    }

    /* css */
    .passing .passing-box {
        display: block;
        margin: 1em auto;
    }
    .passing .passing-bar {
        position: relative;
        display: inline-block;
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .passing .passing-bar:before {
        content: ' ';
        display: inline-block;
        width: 0;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        background: #000;
    }
    .passing .passing-txt {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        background-color: #000;
        color: #fff;
        font-weight: bold;
        line-height: 1.5;
    }
    .passing.move .passing-bar:before {
        -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
        -ms-animation: passing-bar 1s ease 0s 1 normal forwards;
        animation: passing-bar 1s ease 0s 1 normal forwards;
    }
    .passing.move .passing-txt {
        -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
        -ms-animation: passing-txt 0s ease .5s 1 normal forwards;
        animation:passing-txt 0s ease .5s 1 normal forwards;
    }
    
    #users_voice p{
        width: 90%;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .voice_wrapper{
        padding: 50px;
    }
    .lips1,.lips2{
        display: block;
    }
    .detail_flex{
        display: flex;
        align-items: center;
        max-width: 1000px;
        margin: 0 auto;
    }
    .detail_flex>div{
        flex: 0 0 50%;
    }
}
@media(min-width: 1024px){
    .key_board .word{
        font-size: 20px;
    }
    .key_board .key{
        font-size: 50px;
    }
    #seibun_bg{
        min-height: 700px;
    }
    #seibun_other_flex{
        display: flex;
    }
    .seibun_items{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .seibun_items{
        width: 25%
    }
    #seibun .seibun_detail{
        display: block;
    }
    .gradient_back_w{
        background-color: #fff;
        border-radius: 20px;        
        max-width: 1000px;
        margin: auto;
    }
    .atero{
        width: 600px;
        margin: auto;
        padding: 1em 3em;
    }
    
}