@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');

/* リセット */
html,body,h1,h2,h3,h4,,h5,ul,li,dt,dd,dl,p,div{margin:0; padding:0; line-height: 1;}
img{width: 100%; vertical-align: bottom;}
ul{list-style: none;}
a{text-decoration: none; color:inherit;}
*{box-sizing: border-box;}



/* オスマンサス用CSS*/
.pc_margin {
	margin-top: 8%;
}

.mu {
	letter-spacing: -0.3em;
}


.su {
	letter-spacing: -0.4em;
}


.ku {
	letter-spacing: -0.4em;
}


.purasu {
	letter-spacing: -0.3em;
}
.ki {
	letter-spacing: -0.4em;
}
.nn {
	letter-spacing: -0.35em;
}
.mo{
	letter-spacing: -0.38em;
}
.ku2{
	letter-spacing: -0.38em;
}
.se{
	letter-spacing: -0.45em;
}
.ii{
	letter-spacing: -0.28em;
}
.si{
	letter-spacing: -0.43em;
}
.ri{
	letter-spacing: -0.50em;
}
.yoko{
	letter-spacing: -0.45em;
}





/* 共通 */

body{
    margin: 0;
    font-family:"游ゴシック体", YuGothic,"游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size:14px;
	font-weight:500;
    letter-spacing: 1px;
    color:#333;
}


.kinmokusei_fragrance_container{
    background: rgba(222, 177, 148, .2);
} 

#kinmokusei{
    background: url(../images/kinmokusei_bg.png) 50% 37% / 100% no-repeat;
}

.main_container{
    width: 100%;
}


/* p,h1{
    margin: 0;
    line-height: 1;
} */

.flex_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}



.ja_text{
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.75;
}

.eg_text{
    font-size: clamp(12px, 1.3vw, 14px);
    line-height: 1.75;
    font-family: 'Didact Gothic', sans-serif;
    letter-spacing: 2px;
}

.image_block{
    text-align: center;
}

/* ヘッダー */
.header{
    height: 150px;
}

.logo_block{
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    padding: 30px 0 0 70px;
}

/* ファーストビュー */
.fv_container{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.main_img_block{
    width: 100%;
}

.main_text_block{
    position: absolute;
    left: 5vw;
    bottom: 5vw;
}

.main_text{
    font-size: clamp(12px, 1.5vw, 15px);
    letter-spacing: 3px;
    line-height: 1.75;
    color: #fff;
}

.main_text_01{
    margin-bottom: 25px;
}

/* ホワイトムスク */
.white_musk_container{
    max-width: 1200px;
    margin: 140px auto 140px;
}

.white_title{
    margin: 0 auto 20px;
    font-size: clamp(22px, 4vw, 35px);
    letter-spacing: 2px;
    font-weight: normal;
    text-align: center;
}

.white_text{
    margin-bottom: 30px;
    text-align: center;
}

.white_musk_container .flex_block{
    width: 31%;
    max-width: 369px;
}

.white_img_block{
    margin-bottom: 40px;
}

.white_musk_container .flex_block .ja_text{
    min-height: 124px;
}

.line{
    margin: 20px 0;
}

.kinmokusei{
    margin: 50px auto;
}

.kinmokusei a:hover{
    opacity: 0.2;
}

/* キンモクセイ */
.kinmokusei_main_container{
    height: auto;
    padding-top: 84%;
    background: url(../images/MRK_kinmokusei_logo.png) 15% 15% / 45% no-repeat, url(../images/renewal_MRK_kinmokusei_img.jpg) left top / 100% no-repeat;
}

.kinmokusei_container{
    margin: 100px auto 0;
}

.kinmokusei_container .flex_box{
    justify-content: center;
}

.kinmokusei_container .flex_block{
    width: 31%;
    max-width: 369px;
}

.kinmokusei_container .right_block{
    padding: 0 10px;
}

.fragrance_note{
    vertical-align: top;
}

.kinmokusei_fragrance_container .fragrance_img_block{
    max-width: 210px;
    margin: 70px auto;
    padding-top: 70px;
}

.kinmokusei_bnrbox{
    border:2px solid rgb(221, 208, 208);
    margin-bottom:100px;
    
}

.kinmokusei_bnrbox a{
    transition: .2s;
}

.kinmokusei_bnrbox a:hover{
    opacity: 0.8;
}


.kinmokusei_bnrbox .sp{
    display: none;
}
  
.kinmokusei_bnr{
    max-width: 770px;
    margin: 0 auto;
    padding-top: 85px;
}

.kinmokusei_bnr:hover img{
    opacity: 0.6;
    transition-duration: 0.3s;
}

.kinmokusei_bnr p{
    text-align: center;
}

@media (max-width:769px){
    .kinmokusei_bnrbox .sp{
        display: block;
    } 

    .kinmokusei_bnrbox .pc{
        display: none;
    }

    .kinmokusei_bnr{
        max-width: 370px;
        padding-top: 50px;
    }

    .kinmokusei_fragrance_container .fragrance_img_block {
    margin: 50px auto;
    padding-top: 50px;
    }
}

/* フレグランス */
.fragrance_container{
    background-color: #f2f5f7;
    padding-bottom: 100px;
}

.category_main_block{
    position: relative;
}

.category_text_block{
    position: absolute;
    top: clamp(20px, 3vw, 70px);
    left: 50%;
    color: #fff;
    text-align: center;
    -ms-transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    width: 100%;
}

.category_main_text{
    font-size: clamp(22px, 3vw, 35px);
    margin-bottom: clamp(20px, 3vw, 32px);
}

.eg_sub{
    font-family: futura-pt-condensed, sans-serif;
    letter-spacing: 5px;
    font-weight: 400;
    font-size: clamp(30px, 2vw, 50px);
    margin-bottom: 1vw;
}

.category_discription{
    line-height: 1.75;
}

.category_block{
    max-width: 1170px;
    margin: 50px auto 0;
    background-color: #fff;
    padding: 50px 2%;
}

.category_title{
    font-family: futura-pt-condensed, sans-serif;
    font-weight: 400;
    text-align: center;
    letter-spacing: 5px;
    margin-bottom: 25px;
    font-size: clamp(32px, 3vw, 45px);
}

.category_catch{
    text-align: center;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.33;
    /* margin-bottom: 40px; */
}

.softener_img{
    max-width: 240px;
}

.alomawater_img{
    max-width: 120px;
}

.fragrancegel_img{
    max-width: 165px;
}

.reeddiffuser_img{
    max-width: 168px;
}

.roomfabricmist_img{
    max-width: 168px;
}

.airfreshener_img{
    max-width: 171px;
} 
  

  
.softener_box{
    max-width: 550px;
}

.alomaoil_block .product_block {
    max-width: 169px;
}


.product_box{
    width:50%;
    max-width: 770px;
    margin: 0 auto;
}

.product_name{
    text-align: center;
    margin-top: 25px;
    font-size: clamp(12px, 1.5vw, 14px);
}

.product_discription{
    font-size: clamp(13px, 2vw, 15px);
    /* text-align: center; */
    line-height: 1.33;
    /* margin: 40px 0 25px; */
}



.aromastonediffuser_box .left_block,
.aromastonediffuser_box .center_block{
    padding-top: 10%;
}

.airfreshener_block .product_discription,
.fragrancegel_block .product_discription,
.reeddiffuser_block .product_discription,
.roomfabricmist_block .product_discription{
    margin-bottom: 8px;
}

.product_note{
    font-size: clamp(12px, 1.5vw, 14px);
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.33;
}

.annotation{
    font-size: 10px;
    vertical-align: top;
}

/* マルチケア */
.multi_care_container{
    background-color: #f2f5f7;
    padding-bottom: 100px;
}

.multi_care_text_block{
    color: #000;
}

.component_dicription{
    margin-bottom: 15px;
}

.component_block{
    /* max-width: 880px; */
    max-width:92%;
    margin: 0 auto 50px;
    border: 1px solid #ccc;
}

.component_title{
    font-size: clamp(20px, 3vw, 24px);
    text-align: center;
}

.component_title_sub{
    font-size: clamp(16px, 2vw, 18px);
    text-align: center;
    margin: 25px 0 15px;
}

.component_line{
    max-width: 70px;
    margin: 20px auto;
    border: 2px solid #000;
}

.component_box{
    justify-content: center;
    margin-bottom: 20px;
}

.component_parts{
    margin: 0 1%;
}

.hairbodymist_img{
    max-width: 115px;
}

.hairbodymist_block .component_img_block{
    max-width: 476px;
    margin: 0 auto 25px;
}

.multioil_block .component_img_block{
    max-width: 766px;
    margin: 0 auto 25px;
}

.multioil_img{
    max-width: 98px;
}

.multioil_block .component_dicription,
.multibalm_block .component_dicription,
.handnailcream_block .component_dicription{
    margin-bottom: 25px;
}

/* .multibalm_block .component_img_block{
    max-width: 747px;
    margin: 0 auto 25px;
} */

.handnailcream_img{
    max-width: 98px;
}

.handnailcream_block .component_img_block{
    max-width: 477px;
    margin: 0 auto 25px;
}

.multibalm_block .component_img_block{
    max-width: 747px;
    margin: 0 auto 25px;
}

.gift_box{
    max-width: 510px;
    margin: 0 auto 50px;
}

.top{
    text-align: center;
    padding: 50px 0;
}  

.button{
    font-size: clamp(16px, 2vw, 18px);
    background: #c7a17d;
    color: #fff;
    border-radius: 30px;
    padding: 16px 108px;
    text-decoration: none;
}

.button:hover{
    background: #deb194;
}

/* フッター */
.footer{
    background-color: #333;
    padding: 100px 0;
}

.footer_box{
    max-width: 140px;
    margin: 0 auto 50px;
}

.copy_write{
    text-align: center;
    color: #fff;
}

.footer_box .insta{
    background: url("../images/insta.png");
    width: 70px;
    height: 70px;
}

.footer_box .insta:hover{
    background: url("../images/insta_over.png");
    width: 70px;
    height: 70px;
}

.footer_box .cart{
    background: url("../images/cart.png");
    width: 70px;
    height: 70px;
}

.footer_box .cart:hover{
    background: url("../images/cart_over.png");
    width: 70px;
    height: 70px;
}


@media (max-width:769px){
    .category_main_block{
        position: unset;
    }

    .category_text_block{
        position: unset;
        -ms-transform: unset;
        -webkit-transform: unset;
        color: #000;
        margin-top: 50px;
    }
}

@media (max-width:769px){

    .main_text_block{
        position: static;
        padding:0 5vw;
    }
    
    .main_text{
        line-height: 1.75;
        color: #333;

    }

 
    /* 共通 */
    .product_discription{
        text-align: left;
    }

    .product_discription br{
        display: none;
    }

    .product_block{
        width: 27%;
    }

    .softener_box .product_block{
        width: 50%;
    }

    .product_note{
        text-align: left;
    }

    .category_main_text{
        margin-top: 10px;
    }

     /* ヘッダー */
    .header{
        height: auto;
        padding: 20px 0;
    }

    .logo_block{
        width: 50%;
        padding: 0 0 0 10%;
    }

    #kinmokusei{
        background: url(../images/kinmokusei_bg.png) 50% 30% / 200% no-repeat;
    }

    /* ホワイトムスク */

    .white_title{
        margin:0;
    }

    .white_musk_container{
        margin: 50px auto;
        padding: 0 2%;
    }

    .white_text{
        margin-bottom: 0;
    }

    .flex_block{
        width: 100%!important;
    }

    .white_musk_container .flex_block{
        margin: auto;
    }

    .white_img_block{
        width: 80%;
        margin: 20px auto;
    }

    .white_musk_container .flex_block .ja_text{
        min-height: unset;
    }

    .white_musk_container .center_block,
    .white_musk_container .right_block{
        margin-top: 30px;
    }

    /* フレグランス */
    .category_block{
        width: 90%;
    }

    /* マルチケア */
    .component_block{
        padding: 0 4%;
        margin-top:20px;
    }

    .hairbodymist_img, .multioil_img, .handnailcream_img {
        width: 75%;
        height: auto;
    }

    /* フッター */
    .footer{
        padding: 50px 0;
    }
}


/*和田修正　　22.11*/

.product_wrapper{
    display:flex;
    flex-wrap:wrap;
    align-items: flex-start;
    padding:2% 4% ;
}


.product_img_flex{
    width:45%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding:0;
    
}

.product_txt_wrapper{
    width:55%;
    padding:40px 0 0 40px;
 }

 .product_img_flex.center{
     justify-content: center;
 }

 .product_img_flex.center li{
     margin:0 10px;
 }

.product_img_flex li{
width:calc(94% / 3);
}

.product_dis{
    font-size: clamp(13px, 2vw, 15px);
    line-height: 1.6;
}

.product_txtnote{
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 1.33;
}

.product_info{
    font-size: clamp(12px, 1.5vw, 14px);
}

.product_price{
    font-size: clamp(13px, 1.5vw, 16px)
}

.product_price span{
    font-size:12px;
}

.buy_link {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.buy_link a {
    flex: 1 1 calc(50% - 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 5px;
    box-sizing: border-box;
}

/* 疑似要素で「空きブロック」を作る */
.buy_link::after {
    content: "";
    flex: 1 1 calc(50% - 10px);
}

.buy_link a img {
    max-width: 100%;
    max-height: 40px;             /* 高さを揃えるため制限 */
    object-fit: contain;
}

.buy_link a.koushiki{
    border:1px solid #333;
}

.buy_link a.rakuten{
    color:#bf0000;
    border:1px solid #bf0000;
}

.buy_link a.koushiki:hover{
    background: #333;
    color:#fff;
    border:1px solid #333;
}

.buy_link a.rakuten:hover{
    color:#fff;
    background: #bf0000;
    border:1px solid #bf0000;
}

@media (max-width:769px){
.product_img_flex{
    width:100%;
}

.product_txt_wrapper{
    width:100%;
    padding:0;
}


}