/*
	共通設定
-------------------------------------------------------*/
.wrpMainContents{
    background-image: url(/hythiol/products/images/hywp/sp/bg_contents.webp);
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
}

/*
	.sectionColumn
-------------------------------------------------------*/

.sectionColumn {
    margin-bottom: calc( 80 / 375 * 100vw);
}

.sectionColumn .modColumn .image {
    width: 100%;
    margin-bottom: calc( 40 / 375 * 100vw);
}

.sectionColumn .modColumn .text .columnBox {
    margin-top: calc( 20 / 375 * 100vw);
    padding: calc( 30 / 375 * 100vw) calc( 20 / 375 * 100vw);
}

.sectionColumn .modColumn .text .columnBox .txt {
    margin-top: calc( 4 / 375 * 100vw);
}

.sectionColumn .modColumn .lead,
.sectionColumn .modColumn .text .columnTxt .txt,
.sectionColumn .modColumn .text .columnTxt strong:not([class]) {
    font-size: calc( 14 / 375 * 100vw);
}

body {
    padding-top: 54px;
}

.pcOnly {
    display: none !important
}

.gap {
    padding-left: calc(24 / 375 * 100vw);
    padding-right: calc(23 / 375 * 100vw);
}

.gap_wide {
    padding-left: calc(14 / 375 * 100vw);
    padding-right: calc(14 / 375 * 100vw);
}

.gap_ver {
    padding-top: calc(40 / 375 * 100vw);
    padding-bottom: calc(42 / 375 * 100vw);
}

.gap_ver_large {
    padding-top: calc(56 / 375 * 100vw);
    padding-bottom: calc(56 / 375 * 100vw);
}

.gap_ver_mid {
    padding-top: calc(36 / 375 * 100vw);
    padding-bottom: calc(36 / 375 * 100vw);
}

.gap_ver_mini {
    padding-top: calc(32 / 375 * 100vw);
    padding-bottom: calc(32 / 375 * 100vw);
}

.gap_ver_micro {
    padding-top: calc(24 / 375 * 100vw);
    padding-bottom: calc(24 / 375 * 100vw);
}

.lh_normal {
    line-height: 1.6;
}

.lh_normal::before {
    margin-top: calc((1 - 1.6) * .5em)
}

.lh_normal::after {
    margin-bottom: calc((1 - 1.6) * .5em)
}

.tips {
    letter-spacing: 0.1em;
    font-size: calc(10 / 375 * 100vw);
}

.fukidashi::before,
.fukidashi::after {
    height: 70%;
    top: 15%;
}

.fukidashi::before {
    transform: rotate(-30deg);
    left: -15%;
}

.fukidashi::after {
    transform: rotate(30deg);
    right: -15%;
}

/*--------------------------------------
displayFlex
--------------------------------------*/
.displayFlex.spNoneFlex {
    display: block
}

.displayFlex_box02>* {
    width: 48%
}

.displayFlex_box03.afterPseudo::after,
.displayFlex_box03>* {
    width: 31.5%
}

.displayFlex_box04.afterPseudo::after,
.displayFlex_box04>* {
    width: 20.6%
}

.displayFlex_box02.spNoneFlex>*,
.displayFlex_box03.spNoneFlex>*,
.displayFlex_box04.spNoneFlex>* {
    width: 100%
}

.displayFlex_box02.spNoneFlex+.displayFlex_box02.spNoneFlex,
.displayFlex_box02.spNoneFlex>*+* {
    margin-top: calc(24 / 375 * 100vw)
}

.displayFlex_box03.spNoneFlex+.displayFlex_box03.spNoneFlex,
.displayFlex_box03.spNoneFlex>*+*,
.displayFlex_box04.spNoneFlex+.displayFlex_box03.spNoneFlex,
.displayFlex_box04.spNoneFlex>*+*,
.displayFlex_box03.spNoneFlex+.displayFlex_box04.spNoneFlex,
.displayFlex_box04.spNoneFlex+.displayFlex_box04.spNoneFlex {
    margin-top: calc(12 / 375 * 100vw)
}

.displayFlex.flow_spWrap {
    -ms-flex-flow: wrap;
    flex-flow: wrap
}

.displayFlex.flow_spCol {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column
}

.displayFlex_spOnly {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.dfc.spNoneFlex {
    display: block !important
}

/*--------------------------------------
mb
--------------------------------------*/
.mb_big {
    margin-bottom: calc(62 / 375 * 100vw);
}

.mb_large {
    margin-bottom: calc(32 / 375 * 100vw);
}

.mb_big_movie {
    margin-bottom: calc(15 / 375 * 100vw);
}

.mb_moreMid {
    margin-bottom: calc(28 / 375 * 100vw);
}

.mb_normal {
    margin-bottom: calc(26 / 375 * 100vw);
}

.mb_mid {
    margin-bottom: calc(24 / 375 * 100vw);
}

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

.mb_small {
    margin-bottom: calc(12 / 375 * 100vw);
}

.mb_nano {
    margin-bottom: calc(6 / 375 * 100vw);
}

.mb_micro {
    margin-bottom: calc(12 / 375 * 100vw);
}

/*--------------------------------------
text
--------------------------------------*/
.text_huge {
    font-size: calc(36 / 375 * 100vw);
}

.text_sp_32 {
    font-size: calc(32 / 375 * 100vw);
}


.text_moreBig {
    font-size: calc(28 / 375 * 100vw);
    line-height: 1.1;
}

.text_sp_26 {
    font-size: calc(26 / 375 * 100vw);
}

.text_sp_24 {
    font-size: calc(24 / 375 * 100vw);
}

.text_sp_21 {
    font-size: calc(21 / 375 * 100vw);
}

.text_main {
    font-size: calc(24 / 375 * 100vw);
    font-feature-settings: "palt";
    letter-spacing: 0.2em;
}

.text_big {
    font-size: calc(22 / 375 * 100vw);
}

.text_moreLarge {
    font-size: calc(22 / 375 * 100vw);
}

.text_sp_20 {
    font-size: calc(20 / 375 * 100vw);
}

.text_large {
    font-size: calc(18 / 375 * 100vw);
}

.text_sp_16 {
    font-size: calc(16 / 375 * 100vw);
}

.text_moreMid {
    font-size: calc(16 / 375 * 100vw);
}

.text_mid {
    font-size: calc(14 / 375 * 100vw);
}

.text_normal {
    font-size: calc(14 / 375 * 100vw);
}

.text_annotation {
    font-size: calc(9 / 375 * 100vw);
}

.text_small {
    font-size: calc(10 / 375 * 100vw);
}

.text_sp_huge {
    font-size: calc(36 / 375 * 100vw) !important;
}

.text_sp_big {
    font-size: calc(24 / 375 * 100vw) !important;
}

.text_sp_morelarge {
    font-size: calc(20 / 375 * 100vw) !important;
}

.text_sp_large {
    font-size: calc(18 / 375 * 100vw) !important;
}

.text_sp_mid {
    font-size: calc(16 / 375 * 100vw) !important;
}

.text_sp_normal {
    font-size: calc(14 / 375 * 100vw) !important;
}

.text_sp_small {
    font-size: calc(12 / 375 * 100vw) !important;
}

.text_sp_right {
    text-align: right;
}

.text_sp_left {
    text-align: left;
}

.text_sp_center {
    text-align: center;
}



/*--------------------------------------
main
--------------------------------------*/
.main_box {
    position: relative;
}

.main_kv {
    width: 100%;
}

.main_read {
    font-size: calc(24 / 375 * 100vw);
    text-align: center;
    line-height: 1.3;
    margin: calc(32 / 375* 100vw) auto calc(16 / 375* 100vw);
    color: #DE0067;
}

.main_txt h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.main_box .text_annotation{
    padding-left: calc(24 / 375* 100vw);
    padding-right: calc(23 / 375* 100vw);
}

.main_anno {
    font-size: calc(12 / 375 * 100vw);
}

.main_anno02 {
    width: calc(228 / 375 * 100vw);
    margin-left: auto;
    margin-right: auto;
}

.main_kanwa {
    font-size: calc(12 / 375 * 100vw);
}

.main_txt .text_annotation {
    line-height: 1.3;
    width: calc(328 / 375 * 100vw);
    margin: calc(8 / 375 * 100vw) auto calc(40 / 375 * 100vw);
}

.buy_ttl {
    font-size: calc(16 / 375 * 100vw);
    margin-bottom: calc(17 / 375 * 100vw);
}

.main .buy_ttl {
    margin-top: calc(40 / 375 * 100vw);
}

.main_buy {
    margin-bottom: calc(56 / 375 * 100vw);
    position: relative;
}

.main_buy>a {
    position: relative;
    z-index: 0;
}

.main_buy>picture {
    position: absolute;
    z-index: 1;
    width: calc(116 / 375 * 100vw);
    right: calc(-8 / 375 * 100vw);
    bottom: calc(-32 / 375 * 100vw);
}

/*--------------------------------------
sec01
--------------------------------------*/
.sec01 {
    padding-top: calc(100 / 375 * 100vw);
    padding-bottom: calc(46 / 375 * 100vw);
    position: relative;
}

.sec01 h2 img {
    width: calc(300 / 375 * 100vw);
}

.sec01_prod {
    margin-top: calc(-88 / 375 * 100vw);
    margin-bottom: calc(-45 / 375 * 100vw);
}

.sec01_name{
    position: relative;
}

.sec01_name img {
    width: calc(300 / 375 * 100vw);
}

.sec01_name::before{
    position: absolute;
    z-index: -1;
    content: "";
    background-color: #fff;
    width: calc(350 / 375 * 100vw);
    height: calc(90 / 375 * 100vw);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    filter: blur(50px);
}

.sec01_tri {
    margin-top: calc(64 / 375 * 100vw);
    margin-bottom: calc(16 / 375 * 100vw);
}

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

.sec01_tri img {
    width: calc(260 / 375 * 100vw);
}

.icon_down {
    width: calc(19 / 375 * 100vw);
}

.sec01 .text_annotation {
    margin-top: calc(8 / 375 * 100vw);
}

.sec01_focus {
    width: calc(215 / 375 * 100vw);
}

.sec01_effect{
    font-size: calc(13 / 375 * 100vw);
    font-weight: 600;
    text-align: left;
}

/*--------------------------------------
tvcm
--------------------------------------*/
.tvcm {
    margin-top: calc(24 / 375 * 100vw);
}

.tvcm h3 {
    position: relative;
}

.tvcm_title {
    width: calc(174 / 375 * 100vw);
    margin: 0 auto calc(12 / 375 * 100vw);
}

/*--------------------------------------
sec02
--------------------------------------*/

.linkStyle_01 {
    border: 1px solid #dbd7d5;
    border-radius: 10px;
    padding: calc(16 / 375 * 100vw) calc(26 / 375 * 100vw);
    margin-bottom: calc( 20 / 375 * 100vw);
    text-align: left;
}

.linkStyle_01 .icon_down {
    opacity: 0.4;
}

.sec02 {
    padding: calc(40 / 375 * 100vw) 0 calc(60 / 375 * 100vw);
}

.sec02_inner {
    width: calc(328 / 375 * 100vw);
    margin: 0 auto;
}

.sec02_par01,
.sec02_par02 {
    width: calc(225 / 375 * 100vw);
}

.sec02_ttl {
    font-size: calc(24 / 375 * 100vw);
}

.sec02_par01 {
    left: 0;
    top: calc(112 / 375 * 100vw);
}

.sec02_par02 {
    right: 0;
    top: calc(240 / 375 * 100vw);
}

.sec02 h2 img {
    width: calc(304 / 375 * 100vw);
}

.sec02_img img {
    width: calc(346 / 375 * 100vw);
}

.sec02_fukidashi01 img,
.sec02_fukidashi02 img,
.sec02_fukidashi03 img {
    width: calc(100 / 375 * 100vw);
}

.sec02_fukidashi01 {
    top: calc(-44 / 375 * 100vw);
    left: 0;
}

.sec02_fukidashi02 {
    top: calc(-44 / 375 * 100vw);
    left: calc(114 / 375 * 100vw);
    margin: auto;
}

.sec02_fukidashi03 {
    top: calc(-44 / 375 * 100vw);
    right: 0;
}

.sec02 h3 img {
    width: calc(270 / 375 * 100vw);
}

.sec02 .bg_white {
    padding-left: calc(27 / 375 * 100vw);
    padding-right: calc(27 / 375 * 100vw);
    margin-top: calc(-17 / 375 * 100vw);
}

.sec02 .bg_white > h3 {
    line-height: calc(36 / 24);
}

.sec02 .bg_white .displayFlex {
    border-bottom: 2px dotted #dddad8;
    padding-bottom: calc(16 / 375 * 100vw);
    width: calc(258 / 375 * 100vw);
}

.sec02 .bg_white .displayFlex:last-child {
    width: calc(280 / 375 * 100vw);
}

.sec02 .bg_white .displayFlex:nth-child(2) > :nth-child(2),
.sec02 .bg_white .displayFlex:nth-child(4) > :nth-child(2),
.sec02 .bg_white .displayFlex:nth-child(3) > :nth-child(2){
    line-height: calc(21/14);
}


.sec02 .bg_white .displayFlex > :last-child {
    width: calc(236 / 375 *100vw);
    line-height: calc(21/14);
}

.sec02 .bg_white .displayFlex+* {
    margin-top: calc(16 / 375 * 100vw);
}

.sec02 .bg_white .displayFlex:last-child {
    margin-top: calc(8/ 375 * 100vw);
    margin-left: auto;
    margin-right: auto;
    border-bottom: none;
    padding-bottom: 0;
}

.sec02 .bg_white .displayFlex:last-child > p {
    line-height: calc(13.5 /9);
    width: 100%;
}

.sec02 .bg_white .displayFlex img {
    width: calc(21 / 375 * 100vw);
    min-width: calc(21 / 375 * 100vw);
    margin-right: calc(12 / 375 * 100vw);
}

.sec02 .bg_white .displayFlex .lh_normal::before {
    margin-top: 0;
}

.sec02 .bg_white .displayFlex .lh_normal::after {
    margin-bottom: -0.3em;
}

.sec02_check_image {
    width: calc(252 / 375 * 100vw);
    margin-right: auto; 
    position: relative;
    z-index: 1;
    margin-left: auto;
}

.sec02_checkList {
    width: calc(328 / 375 * 100vw);
    margin: 0 auto;
}


/*--------------------------------------
sec03
--------------------------------------*/
.sec01 .sec03 h2 {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(-20 / 375 * 100vw);
}

.sec01 .sec03 h2 img {
    width: calc(32 / 375 * 100vw);
}

.sec04 .sec03 h2 {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(-20 / 375 * 100vw);
}

.sec04 .sec03 h2 img {
    width: calc(32 / 375 * 100vw);
}

/*--------------------------------------
sec04
--------------------------------------*/
.sec04 {
    padding-top: calc(56 / 375 * 100vw);
    padding-bottom: calc(39 / 375 * 100vw);
    position: relative;
}

.sec04 h2 img {
    width: calc(318 / 375 * 100vw);
}

.sec04_ttl {
    font-size: calc(24 / 375 * 100vw);
}

.sec04_prod {
    margin-top: calc(-108 / 375 * 100vw);
    margin-bottom: calc(-80 / 375 * 100vw);
}

.sec04 .main_kanwa {
    font-size: calc(14 / 375 * 100vw);
}

.sec04 .tips {
    font-size: calc(12 / 375 * 100vw);
}

.sec04_txt img {
    width: calc(274 / 375 * 100vw);
}

.sec04 .text_annotation {
    padding-left: calc(24 / 375 * 100vw);
    padding-right: calc(24 / 375 * 100vw);
    margin-top: calc(22 / 375 * 100vw);
}

.sec04_name {
    width: 274px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.sec04_name::before{
    position: absolute;
    z-index: -1;
    content: "";
    background-color: #fff;
    width: calc(350 / 375 * 100vw);
    height: calc(90 / 375 * 100vw);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    filter: blur(25px);
}


/*--------------------------------------
sec05
--------------------------------------*/
.sec05 {
    position: relative;
    padding-bottom: 0;
}

.sec05_ttl {
    background-color: rgb(255,255,255,.76);
    background-size: calc(64 / 375 * 100vw) auto;
    background-position: left calc( 16 / 375 * 100vw) bottom 0;
    background-repeat: no-repeat;
    padding: calc(24 / 375 * 100vw) 0;
    margin: 0 auto;
    box-shadow: 0 0 calc(6 / 375 * 100vw) rgba(0, 0, 0, 0.16);
    margin-bottom: calc(39 / 375 * 100vw);
}

.sec05_subttl_outer{
    position: relative;
}

.sec05_subttl_outer > picture{
    position: absolute;
}

.sec05_subttl_outer > h3{
    position: relative;
    z-index: 1;
    margin-left: calc(32 /375 * 100vw);
    width: calc(324 / 375 * 100vw);
}

.sec05_subttl_outer > h3 > :first-child{
    white-space: nowrap;
    text-align: left;
}

.sec05_subttl_outer > h3 > :first-child > :nth-child(3){
    margin-left: calc(45/375*100vw);
}

.sec05_subttl_outer > h3 > :first-child > :last-child{
    display: inline-block;
    text-align: center;
    margin-left: calc(41/375*100vw);
}

.sec05 h2 img {
    width: calc(222 / 375 * 100vw);
}

.sec05 h3 strong {
    font-size: calc(32 / 375 * 100vw);
}

.sec05_mechanism img {
    width: calc(293 / 375 * 100vw);
    position: relative;
}

.sec05_mechanism > p {
    width: calc(290 / 375 * 100vw);
    margin-left: auto;
    margin-right: auto;
}

.sec05_mechanism > *{
    margin-left: calc(24 / 375 * 100vw);
    margin-right: calc(23 / 375 * 100vw);
}

.sec05_mechanism > :nth-child(3){
    margin: 0;
}

.sec05_mechanism > :nth-child(3) > p{
    width: calc(290 / 375 * 100vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(8 / 375 * 100vw);
    position: relative;
}

.sec05_mechanism > :nth-child(3) > :last-child{
    width: calc(290 / 375 * 100vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(16 / 375 * 100vw);
    position: relative;
}

.sec05_mechanism_txt {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.5;
}

.sec05_mechanism_img02 > div{
    margin-bottom: calc(41 / 375 * 100vw);
}

.sec05_point02 .dib div:nth-of-type(1) {
    top: 40%;
    left: 36%;
}

.sec05_point02 .dib div:nth-of-type(2) {
    top: 40%;
    right: 0;
}

.sec05_point02 .dib div:nth-of-type(3) {
    bottom: -1%;
    left: 62%;
}

.sec05_point .text_large {
    font-size: calc(23 / 375 * 100vw);
    font-weight: 400;
}

.sec05_point>div>span{
    font-size: calc(28/375*100vw);
    font-weight: 400;
    letter-spacing: 0;

}

.sec05_point>div:nth-of-type(1) {
    top: calc(30 / 274* 100%);
    left: calc(32 / 284* 100%);
}

.sec05_point>div:nth-of-type(2) {
    top: calc(30 / 274* 100%);
    right: calc(26 / 284 * 100%);
    letter-spacing: -0.18em;
}

.sec05_point>div:nth-of-type(3) {
    bottom: calc(45 / 375 * 100%);
    left: calc(29 / 284* 100%);
}

.sec05_point>div:nth-of-type(4) {
    bottom: calc(45 / 375 * 100%);
    right: calc(42 / 284 * 100%);
}

.sec05_txt{
    position: relative;
}

.sec05_bottom p {
    position: relative;
    padding-left: calc(24 / 375 * 100vw);
    padding-right: calc(23 / 375 * 100vw);
    text-align: center;
    font-size: calc(12 / 375 * 100vw);
    line-height: calc(18/12);
    margin-top:  calc(204 / 375 * 100vw);
}

.sec05_bottom {
    padding-bottom: calc(64 / 375 * 100vw);
    background-color: #fff;
    background-image: url(/hythiol/products/images/hywp/sp/sec05_bottom_bg.webp);
    background-repeat: no-repeat, repeat-y;
    background-size: 100%;
    background-position: center bottom;
}

.sec05_bottom h4 {
    position: relative;
    z-index: 1;
}

.sec05_bottom h4 span {
    text-align: center !important;
}

.sec05_bottom h4 img {
    width: calc(144 / 375 * 100vw);
    display: block;
    margin-bottom: calc(-32 / 375 * 100vw);
}

.sec05_bottom h4+* {
    margin-top: calc(-33 / 375 * 100vw);
}

.sec05_bottom > .sec05_bottom_inner > :nth-child(2){
    position: absolute;
}

.sec05_tri.sec05_mechanism_img{
    margin-bottom: calc( 56 / 375 * 100vw);
}

.sec05_tri.sec05_mechanism_img h3 {
    padding: 0;
}

.sec05_tri.sec05_mechanism_img p {
    margin-top: calc(12 / 375 * 100vw);
}

/* sectionColumn */
.wrpContents .modColumn {
    padding: calc(24 / 375 * 100vw) 0 calc(32 / 375 * 100vw);
    border: 1px solid #DE0067;
}

.modColumnInner {
    width: calc(290 / 375 * 100vw);
    margin: 0 auto;
}

.columnEn {
    font-size: calc(20 / 375 * 100vw);
    text-align: center;
    margin: 0 auto calc(16 / 375 * 100vw);
    color:  #DE0067;;
}

.columnTitle {
    font-size: calc(18 / 375 * 100vw);
    margin-bottom: calc(16 / 375 * 100vw);
    text-align: center;
}

.columnLead {
    font-size: calc(17 / 375 * 100vw);
    font-weight: bold;
    text-align: center;
    margin-bottom: calc(24 / 375 * 100vw);
}

.columnImage01 {
    width: 100%;
    margin: 0 auto calc(29 / 375 * 100vw);
}

.columnImage01 video {
    width: 100%;
}

.columnTxt {
    font-size: calc(14 / 375 * 100vw);
    margin-bottom: calc(8 / 375 * 100vw);
    line-height: 1.5;
}

.columnImage02 {
    width: calc(293 / 375 * 100vw);
    margin: 0 auto calc(10 / 375 * 100vw);
}

.columnImage02 .text_annotation {
    text-align: right;
    margin-top: calc(3 / 375 * 100vw);
}

.columnExpansion {
    font-size: calc(11 / 375 * 100vw);
    font-weight: bold;
    line-height: 2.1;
    text-align: right;
    padding-right: calc(50 / 375 * 100vw);
    margin-bottom: calc(16 / 375 * 100vw);
    position: relative;
}

.columnExpansion::after {
    content: '';
    display: inline-block;
    width: calc(30 / 375 * 100vw);
    height: calc(30 / 375 * 100vw);
    background-image: url(/hythiol/products/images/hywp/sp/column_icon.webp);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: calc(20 / 375 * 100vw);
    top: calc(-5 / 375 * 100vw);
}

.columnNote {
    border: 1px solid #707070;
    padding: calc(16 / 375 * 100vw) calc(12 / 375 * 100vw);
    margin-top: calc(16 / 375 * 100vw);
}

.columnNote dt {
    font-size: calc(16 / 375 * 100vw);
    font-weight: bold;
    margin-bottom: calc(8 / 375 * 100vw);
}

.columnNote dd {
    font-size: calc(12 / 375 * 100vw);
    line-height: 1.5;
}

/*--------------------------------------
sec06
--------------------------------------*/
.sec06 {
    padding: calc(40 / 375 * 100vw) 0 0;
}

.sec06_ttl,
.sec06_img {
    position: relative;
    z-index: 1;
}

.sec06_ttl{
    margin-left: calc(46 / 375 * 100vw);
}

.sec06_ttl .dfc img {
    width: calc(310 / 375 * 100vw);
}

.sec06_img {
    width: calc(326 / 375 * 100vw);
    margin-top: calc(24 / 375 * 100vw);
    margin-left: auto;
    z-index: 0;
}

.sec06 .text_annotation {
    font-size: calc(9/ 375 * 100vw);
    width: calc(303/ 375 * 100vw);
    padding-right: calc(23/ 375 * 100vw);;
    margin-top: calc(8 / 375 * 100vw);
    margin-left: auto;
}

.sec04_02 {
    background-image: url(/hythiol/products/images/hywp/sp/sec04-02_bg.webp);
    overflow: hidden;
}

.sec04_02>* {
    display: flex;
    align-items: center;
    flex-flow: column-reverse;
}

.sec04_02 h2 img {
    width: calc(211 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
}

.sec04_02 .sec04_prod {
    width: calc(345 / 375 * 100vw);
    margin-top: calc(-32 / 375 * 100vw);
    margin-bottom: calc(-64 / 375 * 100vw);
}

.sec06_ttl_txt02 {
    margin-top: calc(10 / 375 * 100vw);
}


/*--------------------------------------
floating_btn
--------------------------------------*/
.floating_btn {
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: calc(-20 / 375 * 100vw);
    width: calc(181 / 375 * 100vw);
    height: calc(68 / 375 * 100vw);
}

.floating_btn>span {
    padding-left: 8%;
    padding-bottom: 5%;
}


/*--------------------------------------
modal
--------------------------------------*/
.modal {
    width: calc(325 / 375 * 100vw);
}

.modal_btn {
    width: calc(260 / 375 * 100vw);
}

.modal_btn>*+* {
    margin-top: calc(10 / 375 * 100vw);
}

.modal_close {
    padding: calc(10 / 375 * 100vw);
    width: calc(24 / 375 * 100vw);
    height: calc(24 / 375 * 100vw);
}