/*--------------------------------------
共通設定
--------------------------------------*/
.wrpProductContents{
    background-image: url(/hythiol/zh-Hant/products/hc2/img/sp/bg_main.png);
}

.wrpProductContents section{
    padding: 0 calc(24/375*100vw);
}


.wrpCts{
    width: 100%;
}

.wrpMainContents section{
    padding: 0 calc(24/375*100vw);
}

section .ctsInner{
    padding: 0;
}

.wrpContents .txt{
    font-size: 12px;
}

.txtEx{
    margin-top: 8px;
}

body sup{
    font-size: 55%
}

/*--------------------------------------
mainVisual
--------------------------------------*/
.sectionMainVisual{
    overflow: hidden;
}

.mainVisual::before{
    display: none;
}

/*--------------------------------------
sectionConcern
--------------------------------------*/
.sectionConcern {
    padding-bottom:40px;
}

.sectionConcern h2 {
    font-size: 24px;
}

.sectionConcern .concernBox {
    width: 264px;
    margin: 0 auto;
}

.sectionConcern .concernBox .txtEx {
    line-height: calc(36/24);
    max-width: 230px;
    margin: 16px auto 0;
}

.sectionConcern .concernImg{
    max-width: 375px;
    margin: 0 auto;
    padding-top: 40px;
}

/*--------------------------------------
sectionProduct
--------------------------------------*/
.wrpProductContents .sectionProduct{
    padding: 47px 0 48px;
}

.sectionProduct .ctsInner{
    padding: 0;
    grid-template-columns: min(128px,calc(128/375*100%)) min(220px,calc(220/375*100%));
    justify-content: center;
    align-items: center;
    gap: 11px;
}

.sectionProduct .image{
    grid-area: 1 / 1 / 2 / 2;
    width: 93px;
    display: block;
    margin-left: auto;
}

.sectionProduct .ctsHeading{
    grid-area: 1 / 2 / 2 / 3;
    margin-bottom: auto;
    margin-top: 16px;
}

.sectionProduct .ctsHeading h2{
    font-size: 14px;
    margin-bottom: 13px;
}

.sectionProduct .ctsHeading p{
    width: 179px;
    margin-top: 17px;
}

.sectionProduct .detail{
    grid-area: 2 / 1 / 3 / 3;
    width: 100%;
    max-width: 348px;
    margin: 0 auto;
}

.sectionProduct .detail .text{
    max-width: 348px;
    margin: -7px auto 0;
    text-align: center;
}

.sectionProduct .txtEx{
    max-width: 284px;
    margin-top: 16px;
    margin-right: auto;
    margin-left: auto;
}

.effect .ctsBody .image+.txtEx+.text_center {
    font-size: 10px;
    margin-top: 8px;
}

/*--------------------------------------
sectionTurnover
--------------------------------------*/
.wrpMainContents .sectionTurnover{
    padding-top: 39px;
    padding-bottom: 40px;
}

.sectionTurnover .ctsHeading h2{
    font-weight: 700;
    font-size: 20px;
}

.sectionTurnover .txtEx{
    width: calc(278/375*100vw);
    margin: 8px auto 0;
}

.sectionTurnover .turnoverVideo{
    width: calc(278/375*100vw);
    margin: 15px auto 0;
}

/*--------------------------------------
sectionEffect
--------------------------------------*/
.wrpProductContents .sectionEffect{
    padding-bottom: 80px;
    margin-bottom: 0;
}

.sectionEffect .ctsInner{
    padding: 0;
}

.sectionEffect .max{
    max-width: 327px;
    margin: 0 auto;
}

.sectionEffect .ctsHeading h2{
    font-size: 17px;
}

.sectionEffect .ctsHeading h2 span{
    font-size: 23px;
}

.sectionEffect .image{
    margin-top: 18px;
}

.sectionEffect .txtEx{
    margin-top: 16px;
}

/*--------------------------------------
sectionPoint
--------------------------------------*/
.wrpMainContents .sectionPoint{
    padding: 0 0 80px;
}

.sectionPoint .wrpCts{
    padding: 0 calc(24/375*100vw);
    box-sizing: border-box;
}

.sectionPoint .ctsHeading{
    padding: 24px 0;
    box-shadow: 0 0 calc(6 / 375* 100vw) rgba(0, 0, 0, 0.16);
}

.sectionPoint .ctsHeading h2{
    font-size: 28px;
    line-height: calc(34/28);
}

.sectionPoint .boxPoint:nth-child(n+2){
    margin-top: 32px;
}

.sectionPoint .boxPoint{
    margin-top: 40px;
}

.sectionPoint .number{
    max-width: 260px;
    height: 41px;
    font-size: 17px;
    top: -41px;
}

.sectionPoint .boxPointCts{
    padding: 32px min(20px, calc(20/375*100vw)) 32px;
}

.sectionPoint .ttl{
    margin: 0 auto 16px;
    width: fit-content;
    white-space: nowrap;
    font-size: min(17px, calc(17/375*100vw));
}

.sectionPoint .image{
    margin: 16px auto 0;
}

.sectionPoint .video{
    margin-top: 22px;
}

.sectionPoint .videoTtl{
    font-size: 16px;
    margin-bottom: 9px;
}

/* 各ポイント */
.sectionPoint .boxPoint01 .image{
    max-width: 253px;
}

.sectionPoint .boxPoint01 .image + .txtEx{
	text-align: center;
}

.sectionPoint .boxPoint02 .boxPointCts{
    padding: 32px min(14px, calc(14/375*100vw)) 32px;
}

.sectionPoint .boxPoint02 .image{
    max-width: 223px;
}

/*--------------------------------------
sectionSilky
--------------------------------------*/
.wrpMainContents .sectionSilky{
    padding: 36px 0 32px;
}

.box_silky {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: min(65px, calc(65/375*100%)) min(251px, calc(251/375*100%));
    gap: 16px min(10px, calc(10/375*100%));
}

.box_silky .image{
    grid-area: 1 / 1 / 2 / 2;
}

.box_silky .fukidashi_wrap{
    grid-area: 1 / 2 / 2 / 3;
    margin-bottom: auto;
    margin-top: 8px;
}

.box_silky h4 :nth-child(1){
    font-size: 18px;
    font-weight: 700;
    color: #DE0067;
    line-height: calc(13/18);
    white-space: nowrap;
    margin-bottom: 9px;
}

.box_silky h4 :nth-child(1)::after{
    content: "";
    display: block;
    width: 160px;
    height: 11px;
    background-image: url('/hythiol/zh-Hant/products/hc2/img/sp/ttl_silky_effect.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 5px;
    margin-left: 3px;
}

.box_silky h4 :nth-child(2){
    font-size: 18px;
    font-weight: 700;
    line-height: calc(23/15);
    letter-spacing: .1em;
}

.box_silky .txt_wrap{
    grid-area: 2 / 1 / 3 / 3;
    max-width: 285px;
    margin: 0 auto;
}

.box_silky .fukidashi {
    margin-bottom: 8px;
}

.box_silky .lead {
    margin-bottom: 10px;
}

.fukidashi {
    margin-bottom: 16px;
    padding-bottom: 24px;
}

.fukidashi::after {
    width: 180px;
}

/*--------------------------------------
sectionSize
--------------------------------------*/
.wrpMainContents .sectionSize{
    padding-top: 40px;
    padding-bottom: 40px;
}

.sectionSize .ctsHeading h2{
    font-size: 20px;
    white-space: nowrap;
}

.box_products .ctsHeading h2{
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
}

.box_products .ctsHeading h2 span{
    font-size: 26px;
}

.box_products>*:last-child {
    text-align: center;
    margin-top: 24px;
    display: block;
}

.box_products>*:last-child img {
    max-width: 333px;
}

.box_products::before {
    width: 300px;
    bottom: -64px;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
}

.box_shine {
    margin-bottom: 36px;
}

.box_shine>*:last-child {
    margin-top: 20px;
}

.box_shine p {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
}

/*--------------------------------------
buy_wrap
--------------------------------------*/
.buy_ttl {
    position: relative;
    font-size: calc(16 / 375 * 100vw);
    margin-bottom: calc(16 / 375 * 100vw);
    margin-top: calc(24 / 375 * 100vw);
}

.buy_ttl::before,
.buy_ttl::after {
    width: 10%;
    height: 4px;
}

.buy_wrap {
    padding: 0 calc(24/375*100vw);
    padding-top: calc(16 / 375 * 100vw);
    padding-bottom: calc(20 / 375 * 100vw);
}

.buy_wrap .buy_img {
    margin-bottom: calc(16 / 375 * 100vw);
}

.box_cm .buy_ttl::before,
.box_cm .buy_ttl::after {
    width: 32%;
}

.particle01 {
    width: 171px;
    top: 12%;
}

.particle02 {
    width: 189.5px;
    top: 33%;
}

.particle03 {
    width: 187px;
    top: 44%;
}

.particle04 {
    width: 232.5px;
    top: 53%;
}

.particle05 {
    width: 248.5px;
    top: 68%;
}

.particle06 {
    width: 189.5px;
    top: 82%;
}

.mb_sp_20{
    margin-bottom: 20px;
}