/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root{
    --bg-clr: #e9e6e3;
    --point-clr: #817341;
    --btn-clr: #2e2e2e;
    --Pg-En-sans: "Josefin Sans", sans-serif;
}


#stylingoil_wrap{
    width: 100%;
    max-width: 800px;
    font-size: clamp(1.58rem, 0.352rem + 2.56vw, 2.4rem);
    margin: 30px auto; 
    text-align: center;
    font-family: "noto-sans-cjk-jp", sans-serif;
    line-height: 1.8;
}

#stylingoil_wrap img{
    max-width: 100%;
    vertical-align: bottom;
}

#stylingoil_wrap sup{
    font-size: 11px;
    vertical-align: super;
    margin-left: 5px;
}

#stylingoil_wrap .spbr{
    display: none;
}

#stylingoil_wrap .comm_mt{
    margin-top: 3.5em;
}

#stylingoil_wrap .comm_ttl{
    margin-bottom: 40px;
    letter-spacing: 0.05rem;
    font-weight: 400;
}

#stylingoil_wrap .comm_ttl dt{
    font-size: clamp(1.6rem, 1.269rem + 0.91vw, 2rem);
    letter-spacing: 0.2em;
    font-weight: 500;
    margin-bottom: 1em;
}

#stylingoil_wrap .comm_ttl dd h2{
    color: var(--point-clr);
    letter-spacing: 0.03em;
    font-weight: 500;
    font-size: clamp(2.2rem, 0.611rem + 4.34vw, 4.5rem);
}

#stylingoil_wrap .comm_ttl dd span{
    font-size: 65%;
    display: block;
}

#stylingoil_wrap .comm_ttl dd{
    margin-bottom: 0.5em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}


#stylingoil_wrap .comm_btn{
    background: var(--btn-clr);
    border-radius: 50px;
    /*border: 3px #817341 solid;*/
    background-image: linear-gradient( 0deg, #817341 0%, #B6AA86 100%);
    width: 90%;
    max-width: 600px;
    margin: 2.5em auto 0;
}

#stylingoil_wrap .comm_btn a{
    display: block;
    padding: 15px 0;
    color: #fff;
    position: relative;
}
/*#stylingoil_wrap .comm_btn a::after{
    content: "";
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    transform: rotate(45deg);
    right: 7%;
}*/


#stylingoil_wrap ul.navi-btn{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#stylingoil_wrap ul.navi-btn li{
    width: 48%;
    max-width: 345px;
    margin-bottom: 2%;
    background: #fff;
    border: 0.15em solid var(--point-clr);
    border-radius: 50px;
    font-size: clamp(1.1rem, 0.56rem + 1.65vw, 2rem);
}

#stylingoil_wrap ul.navi-btn li a{
    color: var(--point-clr);
    display: block;
    padding: 0.8em 0;
    position: relative;
}

/*#stylingoil_wrap ul.navi-btn li a::after{
    content: "";
    width: 4%;
    aspect-ratio:1/1;
    border: 0;
    border-bottom: solid 2px;
    border-right: solid 2px;
    position: absolute;
    top: 50%;
    margin-top: -4%;
    transform: rotate(45deg);
    right: 8%;
}*/

#stylingoil_wrap .staff_box{
    background: #fff;
    padding: 2em;
    margin-top: 2em;
    border-radius: 15px 70px 15px 70px;
    color: #707070;
}

#stylingoil_wrap .staff_box a{
    color: #707070;
}

#stylingoil_wrap .staff_box .comm_flex{
    margin-bottom: 1em;
}

#stylingoil_wrap .staff_box .comm_flex p{
    width: 22%;
    text-align: left;
}

#stylingoil_wrap .staff_box .comm_flex dl{
    width: 72%;
    text-align: left;
}

#stylingoil_wrap .staff_box .comm_flex dt{
    font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
    margin-bottom: 0.5em;
}

#stylingoil_wrap .staff_box .comm_flex dt span{
    border: 1px solid;
    font-size: 75%;
    margin-right: 3%;
    padding: 2px 5px;
}

#stylingoil_wrap .staff_box .comm_flex dt i{
    margin-right: 0.4em;
}

#stylingoil_wrap .staff_box .comm_flex dd{
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
}

#stylingoil_wrap .staff_box .comm_flex dd span{
    font-size: 80%;
}


#stylingoil_wrap .staff_box p{
    text-align: left;
    font-size: 85%;
}








#stylingoil_wrap #kv{
    background: url("/img/item/stylingoil/bk.jpg") no-repeat center;
    background-size: cover;
    padding: 2.6em 0;
    margin-bottom: 2em;
}
#stylingoil_wrap #kv .sub-ttl{
    font-size: clamp(1.6rem, 1.269rem + 0.91vw, 2rem);
    letter-spacing: 0.2em;
    font-weight: 500;
    margin: 0 auto 1em;
}
#stylingoil_wrap #kv h1{
    color: var(--point-clr);
    letter-spacing: 0.03em;
    font-weight: 500;
    font-size: clamp(2.2rem, 0.611rem + 4.34vw, 4.5rem);
    margin-bottom: 40px;
}

#stylingoil_wrap #kv h1 span{
    font-size: 65%;
    display: block;
}

#stylingoil_wrap #kv h2{
    font-size: clamp(3.2rem, 0.61rem + 4.3vw, 5.2rem);
}

#stylingoil_wrap #kv p{
    width: 90%;
    margin: 2em auto;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

#stylingoil_wrap #kv ul{
    margin: 0 auto;
}


#stylingoil_wrap #about{
    margin-bottom: 3.5em;
}

#stylingoil_wrap #about p{
    text-align: left;
    margin: 1em auto 0;
    max-width: 700px;
}





#stylingoil_wrap #difference{
    background: var(--bg-clr);
    padding: 2em 0;
}

#stylingoil_wrap #difference .comm_ttl h2{
    margin-top: 0.8em;
    color: inherit;
}

#stylingoil_wrap #difference .comm_ttl h2 span{
    border-top: 1px solid var(--base-color);
    border-bottom: 1px solid var(--base-color);
    padding: 0.6em 0;
}

#stylingoil_wrap #difference .text{
    text-align: left;
    margin-bottom: 1.5em;
}

#stylingoil_wrap #difference .comm_flex .box{
    width: 47%;
    background: var(--point-clr);
    color: #fff;
    border-radius: 20px;
    padding: 1.5%;
    box-sizing: border-box;
    font-size: clamp(1.2rem, 0.62rem + 1.5vw, 2rem);
    margin-bottom: 2em;
    position: relative;
}

#stylingoil_wrap #difference .comm_flex .box::after{
    content: "";
    position: absolute;
    box-sizing: border-box;
    border: 15px solid transparent;
    border-top: 18px solid var(--point-clr);
    bottom: -28px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#stylingoil_wrap #difference table{
    background: #fff;
    font-size: clamp(1.2rem, 0.72rem + 1.5vw, 2rem);
}

#stylingoil_wrap #difference table th{
    background: var(--point-clr);
    color: #fff;
    padding: 5px 0;
    border-bottom: 1px solid #fff;
    vertical-align: middle;
}

#stylingoil_wrap #difference table tr:first-of-type th:not(:first-of-type){
    border-left: 1px solid #fff;
    padding: 10px 0;
}

#stylingoil_wrap #difference table td{
    width: 41%;
    padding: 2%;
    vertical-align: middle;
}

#stylingoil_wrap #difference table td{
    border-top: 1px solid var(--point-clr);
    border-left: 1px solid var(--point-clr);
}


#stylingoil_wrap #difference .advice{
    margin-top: 3em;
}

#stylingoil_wrap #difference .advice h3{
    background: var(--base-color);
    color: #fff;
    border-radius: 50px;
    display: inline-block;
    padding: 0.3em 2em;
    font-weight: normal;
}

#stylingoil_wrap #difference .advice dl{
    background: #fff;
    border-radius: 15px;
    padding: 2em 0 1em;
    margin-top: -1em;
}

#stylingoil_wrap #difference .advice dt{
    width: 90%;
    margin: 0 auto 0.5em;
    border-bottom: 1px solid;
    padding-bottom: 0.5em;
    font-weight: bold;
}

#stylingoil_wrap #difference .advice dd{
    text-align: left;
    width: 90%;
    margin: 0 auto;
}





#stylingoil_wrap #hikaku{
    background: url("/img/item/stylingoil/hikaku-bg.jpg") no-repeat;
    padding: 3em 0;
}


#stylingoil_wrap #trend img{
    margin: 0 auto 1.5em;
}

#stylingoil_wrap #trend p.text{
    text-align: left;
}


#stylingoil_wrap #trouble{
    background: url("/img/item/stylingoil/nayami-bk.jpg") no-repeat;
    padding: 3em 0;
}

#stylingoil_wrap #trouble h2{
    color: var(--base-color);
}

#stylingoil_wrap #trouble .block{
    max-width: 600px;
    margin: auto;
    background: #fff;
    padding: 1.5em 0;
    border-radius: 15px;
}

#stylingoil_wrap #trouble ol{
    display: inline-block;
    text-align: left;
}

#stylingoil_wrap #trouble ol li{
    margin-bottom: 0.5em;
    font-size: 90%;
  'FILL' 0,
}

#stylingoil_wrap #trouble ol li .material-symbols-outlined {
  font-variation-settings:
  'FILL' 1 ;
  font-size: 92%;
  margin-right: 0.5em;
}

#stylingoil_wrap #trouble p{
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
    font-weight: 500;
    margin-top: 2em;
}




#stylingoil_wrap #so{
    max-width: 700px;
}

#stylingoil_wrap #so #fuki{
    background: var(--base-color);
    color: #fff;
    display: inline-block;
    border-radius:40px;
    padding: 0.05em 1em;
    margin: -1em auto 1em;
    font-size: clamp(1.8rem, 0.96rem + 2.8vw, 3.2rem);
    position: relative;
}

#stylingoil_wrap #so #fuki::after{
    content: "";
    position: absolute;
    box-sizing: border-box;
    border: 15px solid transparent;
    border-top: 18px solid var(--base-color);
    bottom: -28px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#stylingoil_wrap #so h2{
    font-size: clamp(2.2rem, 1.12rem + 2.86vw, 4rem);
    margin-bottom: 1em;
}

#stylingoil_wrap #so .staff_box{
    background: var(--bg-clr);
}


#stylingoil_wrap #so .navi-btn{
    margin-top: 2em;
}

/*#stylingoil_wrap #so .navi-btn li{
    width: 31%;
}*/





/*--------------ヘアタイプ------------------*/

#stylingoil_wrap .hairtype .comm_ttl dd:last-of-type{
    text-align: left;
}

#stylingoil_wrap .hairtype .block{
    margin-bottom: 2em;
    background: #fff;
    padding-bottom: 2em;
}

#stylingoil_wrap .hairtype .block .comm_w90{
    max-width: 650px;
    margin: auto;
}

#stylingoil_wrap .hairtype .block .comm_w90 h2{
    font-size: clamp(1.65rem, 0.574rem + 3vw, 3.5rem);
    font-weight: 500;
    margin: 0.5em auto;
    color: var(--point-clr);
}


#stylingoil_wrap .hairtype .block .comm_w90 .comm_flex .image{
    width: 47%;
}

#stylingoil_wrap .hairtype .block .comm_w90 dl{
    text-align: left;
    width: 50%;
    font-size: clamp(1.2rem, 0.72rem + 1.6vw, 2rem);
}

#stylingoil_wrap .hairtype .block .comm_w90 dt{
    margin-bottom: 10px;
}

#stylingoil_wrap .hairtype .block .comm_w90 dd{
    margin-bottom: 1.2em;
}

#stylingoil_wrap .hairtype .block .comm_w90 dd li{
    display: flex;
    align-items: center;
    margin-bottom: 0.8em;
}

#stylingoil_wrap .hairtype .block .comm_w90 dd li p{
    width: 25%;
}

#stylingoil_wrap .hairtype .block .comm_w90 dd li span{
    margin-left: 10px;
    width: 73%;
    font-size: clamp(1.3rem, 0.88rem + 1.4vw, 2rem);
}

#stylingoil_wrap .hairtype .block .comm_w90 .text{
    text-align: left;
    border-top: 1px solid;
    margin-top: 1.5em;
    padding-top: 1em;
}

#stylingoil_wrap .hairtype .block .comm_w90 .btn{
    background: var(--btn-clr);
    border-radius: 50px;
    margin-top: 2.5em;
    line-height: 1.5;
    font-size: clamp(1.5rem, 1.015rem + 1.02vw, 2rem);
}

#stylingoil_wrap .hairtype .block .comm_w90 .btn a{
    display: block;
    padding: 0.5em 0;
    color: #fff;
    position:relative;
}

#stylingoil_wrap .hairtype .block .comm_w90 .btn a::after{
    content: "";
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    transform: rotate(45deg);
    right: 7%;
}




/*--------------ヘアスタイル------------------*/
#stylingoil_wrap #style{
    background: url("/img/item/stylingoil/hair-bg.jpg") no-repeat;
    padding: 2em 0;
}

#stylingoil_wrap #style #thumb{
    margin-top: 2em;
    flex-wrap: wrap;
}

#stylingoil_wrap #style #thumb .box{
    width: 48%;
    margin-bottom: 2.5em;
}

#stylingoil_wrap #style #thumb .box p{
    margin-top: 1.8em;
    background: #fff;
    border: 0.15em solid var(--point-clr);
    border-radius: 50px;
    font-size: clamp(1.1rem, 0.56rem + 1.65vw, 2rem);
}

#stylingoil_wrap #style #thumb .box p a{
    color: var(--point-clr);
    display: block;
    padding: 0.3em 0;
    line-height: 1.5;
}

#stylingoil_wrap #style.hairtype .block .ttl{
    background: var(--point-clr);
    color: #fff;
    margin-bottom: 1em;
    letter-spacing: 0.05em;
}



/*--------------長さ------------------*/
#stylingoil_wrap #length{
    background: var(--bg-clr);
    padding: 2em 0;
}

#stylingoil_wrap #length ul.navi-btn{
    margin: 2em auto;
}

#stylingoil_wrap #length .block{
    padding-top: 1.2em;
}


/*--------------髪質------------------*/
#stylingoil_wrap #quality .staff_box{
    background: var(--bg-clr);
}

#stylingoil_wrap #quality ul.navi-btn{
    margin: 2em auto;
}

#stylingoil_wrap #quality ul.navi-btn li{
    width: 32%;
}

#stylingoil_wrap  #quality.hairtype .block{
    background: var(--bg-clr);
    padding-top: 2em;
}

#stylingoil_wrap #quality.hairtype .block .comm_w90 dd li p{
    mix-blend-mode: multiply;
}



#stylingoil_wrap #fragrance .staff_box{
    background: var(--bg-clr);
}

#stylingoil_wrap #fragrance .navi-btn{
    margin: 2em auto;
    justify-content: center;
}

#stylingoil_wrap #fragrance .navi-btn li{
    width: 32%;
    margin: 0 0.5% 2%;
    box-sizing: border-box;
}

#stylingoil_wrap #fragrance .block{
    margin-bottom: 2em;
    background: var(--bg-clr);
    padding: 2em 5% 2.5em;
    box-sizing: border-box;
}

#stylingoil_wrap #fragrance .block dl{
    margin-bottom: 1em;
}

#stylingoil_wrap #fragrance .block dt h2{
    font-size: clamp(2.4rem, 0.611rem + 3.64vw, 4rem);
    margin-bottom: 0.2em;
    color: var(--point-clr);
}

#stylingoil_wrap #fragrance .block dd{
    text-align: left;
}

#stylingoil_wrap #fragrance .block .comm_btn{
    max-width: 600px;
    border: 0.15em solid var(--point-clr);
    border-radius: 50px;
    font-size: clamp(1.2rem, 0.56rem + 1.65vw, 2rem);
    margin-top: 1em;
    position: relative;
}

#stylingoil_wrap #fragrance .block .comm_btn a{
    padding: 20px 0;
}

#stylingoil_wrap #fragrance .block .comm_btn::before{
    content: "";
    background: url("/img/item/stylingoil/floral.png") no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 13%;
    aspect-ratio: 81/79;
    position: absolute;
    left: -5%;
    top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);

}

#stylingoil_wrap #fragrance #fruity.block .comm_btn::before{
    background: url("/img/item/stylingoil/fruity.png") no-repeat;
    background-size: 100%;
    width: 17%;
    aspect-ratio: 25/19;
}

#stylingoil_wrap #fragrance #fruity.block .comm_btn a{
    padding: 14px 0;
}

#stylingoil_wrap #fragrance #fruity.block .comm_btn br{
    display: none;
}



#stylingoil_wrap #fragrance #herbs.block .comm_btn::before{
    background: url("/img/item/stylingoil/herb.png") no-repeat;
    background-size: 100%;
    width: 13%;
    aspect-ratio: 11/14;
    left: -3%;
}

#stylingoil_wrap #fragrance #musk.block .comm_btn::before{
    background: url("/img/item/stylingoil/musk.png") no-repeat;
    background-size: 100%;
    width: 22%;
    aspect-ratio: 33/18;
}

#stylingoil_wrap #fragrance #sweet.block .comm_btn::before{
    background: url("/img/item/stylingoil/sweet.png") no-repeat;
    background-size: 100%;
    width: 17%;
    aspect-ratio: 95/82;
}




#stylingoil_wrap #howto .bg{
    background: #f5f0e8;
    padding: 2em 0;
    margin-bottom: 2em;
}

#stylingoil_wrap #howto h3{
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-size: clamp(1.65rem, 1.08rem + 2.04vw, 3rem);
    padding: 0.3em 0;
    margin-bottom: 1em;
}

#stylingoil_wrap #howto #amount li{
    width: 31%;
}

#stylingoil_wrap #howto #amount li p{
    line-height: 1.3;
    margin-top: 0.3em;
    font-size: clamp(1.4rem, 0.516rem + 1.81vw, 2.4rem);
}

#stylingoil_wrap #howto #amount li .box{
    background: #fff;
    border-radius: 15px;
    padding: 0.5em 0.2em;
    margin-bottom: 1em;
}

#stylingoil_wrap #howto #amount li .box span{
    display: block;
    font-size: 65%;
}

#stylingoil_wrap #howto #amount li .box p::after{
    content: "滴";
    font-size: 78%;
    margin-left: 0.2em;
}

#stylingoil_wrap #howto .staff_box{
    background: var(--bg-clr);
}

#stylingoil_wrap #howto #other{
    background: url("/img/item/stylingoil/bk.jpg") no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 1em;
}

#stylingoil_wrap #howto #other h2{
    background: var(--base-color);
    display: inline-block;
    padding: 0.3em 1em;
    color: #fff;
    font-size: clamp(1.1rem, 0.56rem + 1.65vw, 2rem);
    position: relative;
    margin-bottom: 3em;
    margin-top: -1em;
    width: 80%;
    max-width: 350px;
}

#stylingoil_wrap #howto #other h2::after{
    content: "";
    position: absolute;
    box-sizing: border-box;
    border: 10px solid transparent;
    border-top: 13px solid var(--base-color);
    left: 50%;
    bottom: -1.1em;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#stylingoil_wrap #howto #other h3{
    margin-bottom: 2em;
}


#stylingoil_wrap #howto #other .block{
    margin-bottom: 3.5em;
}

#stylingoil_wrap #howto #other .block .ttl{
    background: #74693a;
    color: #fff;
    text-align: left;
    position: relative;
    text-indent: 3%;
    margin-bottom: 2em;
}

#stylingoil_wrap #howto #other .block .ttl ol{
    width: 30%;
    max-width: 180px;
    position: absolute;
    right: 2%;
    display: flex;
    top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
}

#stylingoil_wrap #howto #other .block .ttl ol li{
    margin-left: 0.5em;
    text-align: right;
}

#stylingoil_wrap #howto #other .block .comm_flex{
    align-items: flex-start;
}

#stylingoil_wrap #howto #other .block .comm_flex dl{
    width: 56%;
    text-align: left;
}

#stylingoil_wrap #howto #other .block .comm_flex dt{
    font-weight: 500;
}

#stylingoil_wrap #howto #other .block .comm_flex dd{
    width: 90%;
    margin: 0 0 0.5em 1em;
    line-height: 1.5;
    font-size: 90%;
}


#stylingoil_wrap #howto #other .block .comm_flex img{
    width: 40%;
    max-width: 300px;
}


#stylingoil_wrap #howto #mis h4{
    background: var(--base-color);
    color: #fff;
    padding: 0.3em 0;
    font-weight: 500;
    margin-bottom: 1.5em;
}

#stylingoil_wrap #howto #mis .comm_flex{
    margin-bottom: 3.5em;
    position: relative;
}

#stylingoil_wrap #howto #mis .comm_flex::after{
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #000000;
    height: calc(tan(60deg) * 5% / 1);
    width: 3%;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

#stylingoil_wrap #howto #mis .comm_flex dl{
    width: 47%;
    position: relative;
}

#stylingoil_wrap #howto #mis .comm_flex dd{
    width: 90%;
    height: 50%;
    position: absolute;
    /* top: 73%; */
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: 1.4;
    font-size: clamp(1rem, 0.468rem + 1.6vw, 2rem);
}



#stylingoil_wrap #faq .inner{
    text-align: left
}


#stylingoil_wrap #faq .inner dl dt::before,
#stylingoil_wrap #faq .inner dl dd::before{
    width: 14%;
    max-width: 55px;
    aspect-ratio:1/1;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid;
    text-align: center;
    font-family: var(--Pg-En-sans);
    font-weight: 600;
    padding-top: 6px;
    box-sizing: border-box;
}
#stylingoil_wrap #faq .inner dl dt,
#stylingoil_wrap #faq .inner dl dd{
    display: flex;
    align-items: start;
    width:100%;
}

#stylingoil_wrap #faq .inner dl dt p,
#stylingoil_wrap #faq .inner dl dd p{
    width: 96%;
    margin-left: 4%
}

#stylingoil_wrap #faq .inner dl dt{
    color: var(--point-clr);
    font-weight: bold;
    font-size: 110%;
}

#stylingoil_wrap #faq .inner dl dd{
    margin: 0.8em 0 2.5em;
}


#stylingoil_wrap #faq .inner dl dt::before{
    content: "Q";
}

#stylingoil_wrap #faq .inner dl dd::before{
    content: "A";
    background: var(--point-clr);
    color: #fff;
}




#stylingoil_wrap #recommend{
    counter-reset: number;
}

#stylingoil_wrap #recommend .block{
    margin-bottom: 2em;
    background: var(--bg-clr);
    padding-bottom: 3em;
    position: relative;
    counter-increment: number;
}

#stylingoil_wrap #recommend .block::before{
    content: "No." counter(number);
    background: var(--base-color);
    color: #fff;
    display: block;
    margin-bottom: 40px;
    letter-spacing: 0.18em;
    font-size: 80%;
    padding: 10px 0;
}


#stylingoil_wrap #recommend .block h2{
    font-size: clamp(1.6rem, 0.864rem + 2.06vw, 2.4rem);
    margin-bottom: 15px;
}

#stylingoil_wrap #recommend .block h3{
    font-size: clamp(2rem, 0.864rem + 2.56vw, 3.4rem);
    margin-bottom: 30px;
}

#stylingoil_wrap #recommend .block .comm_flex{
    align-items: start;
}

#stylingoil_wrap #recommend .block .comm_flex .pic{
    width: 44%;
    max-width: 500px;
}

#stylingoil_wrap #recommend .block .comm_flex .price{
    width: 52%;
    text-align: left;
}

#stylingoil_wrap #recommend .block .comm_flex .price ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}


#stylingoil_wrap #recommend .block .comm_flex .price ul li{
    font-size: clamp(1.4rem, 0.48rem + 1.32vw, 1.8rem);
    text-align: right;
    margin-bottom: 5px;
}

#stylingoil_wrap #recommend .block .comm_flex .price ul li:nth-of-type(1)::before{
    content: "容量";
    border: 1px solid;
    font-size: 80%;
    padding: 0 0.8em;
    margin-right: 10px;
}


#stylingoil_wrap #recommend .block .comm_flex .price ol li a{
    background: var(--point-clr);
    border-radius: 50px;
    margin-bottom: 0.8em;
    display: block;
    color: #fff;
    font-size: clamp(1.1rem, 0.68rem + 1.4vw, 1.8rem);
    padding: 8px 0;
    text-align: center;
}

/*#stylingoil_wrap #recommend .block .comm_flex .price ol li a::after{
    content: "";
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    transform: rotate(45deg);
    right: 5%;
}*/
#stylingoil_wrap #recommend .point{
    margin-top: 3em;
}

#stylingoil_wrap #recommend .point dt{
    border-bottom: 1px solid;
    margin-bottom: 1.5em;
    font-size: clamp(1.7rem, 1.064rem + 2.06vw, 2.8rem);
    font-weight: 500;
    position: relative;
}

#stylingoil_wrap #recommend .point dt span{
    background: var(--bg-clr);
    padding: 0 0.5em;
    position: absolute;
    top: -25px;
    left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
}


#stylingoil_wrap #recommend .block dd{
    margin-bottom: 1em;
    text-align: left;
}










@media only screen and (max-width: 480px) {  
#stylingoil_wrap .spbr{
    display: block;
}

#kensho .bg.staff .comm_flex{
    align-items: flex-start;
}




#stylingoil_wrap #fragrance #fruity.block .comm_btn br{
    display: block;
}









}