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

.wrpCts{
    width: 100%;
    max-width: 1024px;
}

section .ctsInner{
    padding: 0 109px;
}

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

.txtEx{
    font-size: 12px;
}

.max {
    width: 654px;
    margin-left: auto;
    margin-right: auto;
}

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

.sectionConcern .ctsInner{
    padding: 0 109px;
}

.sectionConcern h2{
    font-size: 40px;
    width: fit-content;
    margin: 0 auto;
}

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

.sectionConcern .concernImg{
    padding-top: 77px;
}

/*--------------------------------------
sectionProduct
--------------------------------------*/
.sectionProduct{
    padding: 87px 0 40px;
}

.sectionProduct .ctsInner{
    padding: 0 43px 0 145px;
    grid-template-columns: 245px 514px;
    align-items: end;
}

.sectionProduct .image{
    grid-area: 1 / 1 / 3 / 2;
    margin-bottom: auto;
}

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

.sectionProduct .ctsHeading p{
    width: 331px;
}

.sectionProduct .ctsHeading h2{
    font-size: 26px;
    margin-bottom: 24px;
}

.sectionProduct .detail{
    grid-area: 2 / 2 / 3 / 3;
    width: 514px;
    margin-bottom: 115px;
}

.sectionProduct .detail .text{
    font-size: 18px;
    letter-spacing: .1em;
    white-space: nowrap;
}

.sectionProduct .detail .txtEx{
    margin-top: 16px;
    width: 408px;
}

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

.sectionTurnover .ctsHeading h2{
    font-size: 31px;
    font-weight: 700;
    margin: 0 auto;
}

.sectionTurnover .txtEx{
    text-align: center;
    margin-top: 16px;
}

.sectionTurnover .turnoverVideo{
    margin-top: 16px;
}

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

.sectionEffect .ctsInner{
    padding: 0 109px;
}

.sectionEffect .ctsInner .max{
    width: 754px;
}

.sectionEffect .ctsHeading h2{
    font-size: 40px;
    white-space: nowrap;
}

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

.sectionEffect .image{
	width: 654px;
	margin: 45px auto 0;
}

.sectionEffect .ctsBody .txtEx{
    margin-top: 24px;
    text-align: center;
}

/*--------------------------------------
sectionPoint
--------------------------------------*/
.sectionPoint{
    padding-bottom: 128px;
}

.sectionPoint .ctsHeading{
    padding: 40px 0;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}

.sectionPoint .ctsHeading h2{
    font-size: 50px;
}

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

.sectionPoint .boxPoint01{
    margin-top: 80px;
}

.sectionPoint .number{
    width: 412px;
    height: 72px;
    font-size: 26px;
}

.sectionPoint .boxPointCts{
    padding: 64px 0;
}

.sectionPoint .ttl{
    margin: 0 auto 40px;
}

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

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

.sectionPoint .videoTtl{
    font-size: 40px;
    margin-bottom: 20px;
}

/* 各ポイント */
.sectionPoint .boxPoint .ttl{
    font-size: 42px;
}

.sectionPoint .boxPoint  .txtEx {
    margin-top: 19px;
    line-height: calc(15/16);
}

.sectionPoint .boxPoint01 .image + .txtEx{
    text-align: center;
    font-size: 16px;
}

.sectionPoint .boxPoint02 .max{
    width: 715px;
}

.sectionPoint .boxPoint02 .ttl sup{
    font-size: 16px;
    vertical-align: text-top;
}

.sectionPoint .boxPoint02 .txt,
.sectionPoint .boxPoint02 .txtEx,
.sectionPoint .boxPoint02 .image{
    width: 654px;
    margin-left: auto;
    margin-right: auto;
}

.sectionPoint .boxPoint02 .image picture{
    display: block;
    max-width: 438px;
    margin: 0 auto;
}

.sectionPoint .boxPoint .image .txtEx {
    font-size: 18px;
    margin-top: 0;
}

.sectionPoint .boxPoint02 .txtEx {
    margin-top: 10px;
}

/*--------------------------------------
sectionSilky
--------------------------------------*/
.sectionSilky{
    padding: 80px 0 70px;
}

.box_silky {
    display: grid;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
    grid-template-columns: min(174px,calc(174/1024*100%)) min(750px,calc(750/1024*100%));
    gap: 16px 0;
}

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

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

.box_silky h4{
    margin-top: 15px;
}

.box_silky h4 :nth-child(1){
    font-size: 45px;
    font-weight: 700;
    color: #DE0067;
    line-height: calc(30/45);
}

.box_silky h4 :nth-child(1)::after{
    content: "";
    display: block;
    width: 628px;
    height: 31px;
    background-image: url('/hythiol/products/images/hc2/ttl_silky_effect.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 11px; 
    margin-bottom: 13px;
}


.box_silky h4 :nth-child(2){
    font-size: 40px;
    font-weight: 700;
    display: inline-block;
    line-height: calc(60/40);
}

.box_silky .txt_wrap{
    grid-area: 2 / 2 / 3 / 3;
}

.box_silky .fukidashi {
    width: 400px;
    margin-bottom: 14px;
}

.fukidashi {
    margin-bottom: 40px;
    padding-bottom: 32px;
}

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

.sectionEffect .ctsInner02 {
    padding-top: 48px;
}

/*--------------------------------------
sectionSize
--------------------------------------*/
.sectionSize{
	padding: 64px 0 80px;
}

.sectionSize .wrpCts {
    max-width: 1044px;
}

.box_products {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 10px;
}

.box_products>*:last-child {
    width: 576px;
    min-width: 576px;
}

.box_products .ctsHeading h2 {
    font-size: 26px;
    white-space: nowrap;
}

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

.box_products h4 {
    text-align: left;
}

.box_products::before {
    width: 450px;
    bottom: -56px;
    right: -80px;
}

.box_shine {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row-reverse;
    margin-bottom: 72px;
}

.box_shine>*:first-child {
    width: calc(100% - 372px);
    padding-left: 24px;
}

.box_shine>*:last-child {
    width: 372px;
}

.box_shine p.mincho {
    font-size: 24px;
    margin-bottom: 20px;
}

.box_shine h2 {
    margin-bottom: 26px;
    text-align: left;
}

.box_shine h2 + p {
    font-size: 14px;
}

.box_cm .buy_ttl {
    width: 300px;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------
sectionNew
--------------------------------------*/
.sectionNew {
    margin-bottom: 68px;
}

.new03 h2 {
    margin-bottom: 48px;
}

.sectionNew .ctsInner {
    padding-left: 68px;
    padding-right: 68px;
}

.sectionNew .ctsInner .image {
    margin-bottom: 72px;
}

.wrpContents .sectionEffect+.sectionMechanism {
    padding-top: 56px;
}

/*--------------------------------------
buy_wrap
--------------------------------------*/
.buy_ttl {
    position: relative;
    font-size: 20px;
    margin-bottom: 18px;
    margin-top: 64px;
}

.buy_wrap {
    padding-top: 32px;
    padding-bottom: 40px;
}

.buy_wrap .buy {
    max-width: 822px;
    margin-left: auto;
    margin-right: auto;
}

.buy_wrap .buy_ttl {
    margin-bottom: 32px;
}

.buy_wrap .buy_img {
    text-align: center;
    margin-bottom: 32px;
}

.buy_wrap .buy_img img {
    width: 656px;
}