@charset "UTF-8";

/* ==========================================
   　　　　　　　　製品背景
   ========================================== */

/* 共通設定 */
body #common_section_wrapper_6 {
    position: relative;
    width: 100%;
    /* 3枚重ねにするため no-repeat を3つ指定 */
    background-repeat: no-repeat, no-repeat, no-repeat;
}


/* スマホ（640px以下） */
@media screen and (max-width: 640px) {
  
/* ほぐ軽 */
    body #common_section_wrapper_5 {
        background-image: 
            url('bg_03.png'), /* ★一番手前に下矢印を追加 */
            url('bg_hogukaru_img_sm.png'),
            linear-gradient(to bottom left, #f87407 0%, #d94100 20%, #d83a00 100%);
        background-position: 
            top center,  
            center 8%, 
            top center;
        background-size: 
            100% auto,    
            200% auto, 
            100% 50%;
    }

/* 温もり */
    body #common_section_wrapper_6 {
        background-image: 
            url('bg_nukumori_img_sm.png'),
            linear-gradient(to bottom left, #a797cf 0%, #8c62ae 20%, #824fa2 100%);
        background-position: 
            center 7%, 
            top center;
        background-size: 
            200% auto, 
            100% 50%;
    }

/* 爽快 */
    body #common_section_wrapper_7 {
        background-image: 
            url('bg_soukai_img_sm.png'),
            linear-gradient(to bottom left, #47a7db 0%, #0079ba 20%, #0079b9 100%);
        background-position: 
            center 8%, 
            top center;
        background-size: 
            200% auto, 
            100% 50%;
    }

/* バーニング */
    body #common_section_wrapper_8 {
        background-image: 
            url('bg_burning_img_sm.png'),
            linear-gradient(to bottom left, #e76076 0%, #e71749 20%, #e50037 100%);
        background-position: 
            center 7%, 
            top center;
        background-size: 
            200% auto, 
            100% 50%;
    }


}

/* タブレット（641px～1024px） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    
/* ほぐ軽 */
  body #common_section_wrapper_5 {
        background-image: 
            url('bg_03.png'), /* ★一番手前に下矢印を追加 */
            url('bg_hogukaru_img.png'),
            linear-gradient(to bottom left, #f87407 0%, #d94100 30%, #d83a00 100%);
        background-position: 
            top center,   /* ★矢印：最上部中央 */
            center 13%, 
            top center;
        background-size: 
            100% auto,    /* ★矢印：横幅100%（または contain） */
            150% auto, 
            100% 50%;
    }

/* 温もり */
    body #common_section_wrapper_6 {
        background-image: 
            url('bg_nukumori_img.png'),
            linear-gradient(to bottom left, #a797cf 0%, #8c62ae 30%, #824fa2 100%);
        background-position: 
            center 9%,   
            top center;
        background-size: 
            120% auto,    /* ★ 画面幅の120%（3割拡大）にして左右を適度にはみ出させる */
            100% 50%;     /* グラデーション高さ：3割 */
    }

/* 爽快 */
    body #common_section_wrapper_7 {
        background-image: 
            url('bg_soukai_img.png'),
            linear-gradient(to bottom left, #47a7db 0%, #0079ba 30%, #0079b9 100%);
        background-position: 
            center 7%,   
            top center;
        background-size: 
            130% auto,    /* ★ 画面幅の130%（3割拡大）にして左右を適度にはみ出させる */
            100% 50%;     /* グラデーション高さ：3割 */
    }

/* バーニング */
    body #common_section_wrapper_8 {
        background-image: 
            url('bg_burning_img.png'),
            linear-gradient(to bottom left, #e76076 0%, #e71749 20%, #e50037 100%);
        background-position: 
            center 10%,   
            top center;
        background-size: 
            130% auto,    /* ★ 画面幅の130%（3割拡大）にして左右を適度にはみ出させる */
            100% 50%;     /* グラデーション高さ：3割 */
    }

}

/* PC（1025px以上） */
@media screen and (min-width: 1025px) {
    
/* ほぐ軽 */
  body #common_section_wrapper_5 {
        background-image: 
            url('bg_03.png'), /* ★一番手前に下矢印を追加 */
            url('bg_hogukaru_img.png'),
            linear-gradient(to bottom left, #f87407 0%, #d94100 35%, #d83a00 100%);
        background-position: 
            top center,   /* ★矢印：最上部中央 */
            center 10%,
            top center;
        background-size: 
            100% auto,    /* ★矢印：横幅100%（または contain） */
            110% auto, 
            100% 60%;
    }

/* 温もり */
    body #common_section_wrapper_6 {
        background-image: 
            url('bg_nukumori_img.png'),
            linear-gradient(to bottom left, #a797cf 0%, #8c62ae 35%, #824fa2 100%);
        background-position: 
            center 7%,
            top center;
        background-size: 
            110% auto,    /* ★ 画面幅の110%（3割拡大）にして左右を適度にはみ出させる */
            100% 60%;     /* グラデーション高さ：3割 */
    }

/* 爽快 */
    body #common_section_wrapper_7 {
        background-image: 
            url('bg_soukai_img.png'),
            linear-gradient(to bottom left, #47a7db 0%, #0079ba 35%, #0079b9 100%);
        background-position: 
            center 8%,
            top center;
        background-size: 
            110% auto,    /* ★ 画面幅の110%（3割拡大）にして左右を適度にはみ出させる */
            100% 60%;     /* グラデーション高さ：3割 */
    }

/* バーニング */
    body #common_section_wrapper_8 {
        background-image: 
            url('bg_burning_img.png'),
            linear-gradient(to bottom left, #e76076 0%, #e71749 20%, #e50037 100%);
        background-position: 
            center 9%,
            top center;
        background-size: 
            110% auto,    /* ★ 画面幅の110%（3割拡大）にして左右を適度にはみ出させる */
            100% 60%;     /* グラデーション高さ：3割 */
    }

}







/* ==========================================
   気になる悩み別ラインナップのボタン
   ========================================== */

/* PCのみ文字小さく */
@media screen and (min-width: 1025px) {
  .lineupBtnTtl,
  .lineupBtnTtl *{
    font-size: 90% !important;
  }
}


/* PCのみ文字大きく */
@media screen and (min-width: 1025px) {
  .lineupBtnText,
  .lineupBtnText *{
    font-size: 105% !important;
  }
}


/* ※の大きさ制御 */
.lineupBtnChuusaku,
.lineupBtnChuusaku *{
   vertical-align: 0.7em !important;
   font-size: 50% !important;
}


/*※の受けテキストの行間 */
#lineupChuusakuText .cmn-richtext{
  line-height:0.7em;
  padding-top:0 !important;
  margin-top:0 !important;
}


/* ==========================================
 　爽快リカバリーとバーニングPROの※
   ========================================== */

.kome{
  font-size:40% !important;
  vertical-align: 1.0em;
}

#komeUkeSou .cmn-richtext,
#komeUkeBur .cmn-richtext{
  line-height:1.2em;
  padding-top:0 !important;
  margin-top:0 !important;
}




/* ==========================================
 　医薬部外品まわり
   ========================================== */

/*　小さい文字の制御 */
.MiniText{
  margin:0; !important;
  padding:0; !important;
  line-height:0.8em !important;
}

@media screen and (min-width: 1025px) {
.MiniText{
  	font-size:120%;
  }
}


/* ==========================================
 　こんなときにおすすめ
   ========================================== */

/* 見出し下線の共通 */
.custom-heading {
  position: relative; /* 子要素(::after)の位置基準にするために必要 */
  display: inline-block; /* 必要に応じて調整 */
  padding-bottom: 5px;         /* 文字と線の間の距離 */
}

.custom-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  bottom: 0;
  height: 2px; /* 線の太さ */
  width: 80%;  /* 文字幅の〇%の長さ */
  background-color: var(--line-color, #fa5014) !important; /* デフォルトはオレンジ */
}

/* テキストの文字間隔を広げる */
.custom-heading {
  letter-spacing: 0.1em;
}

/* 見出し下線のカラーバリエーション（クラスで色を上書き）*/
/* ピンク */
.custom-heading.theme-pink {
  --line-color: #e50839;
}

/* ブルー */
.custom-heading.theme-blue {
  --line-color: #008bd5;
}

/* パープル */
.custom-heading.theme-purple {
  --line-color: #864bbb;
}

/* オレンジ */
.custom-heading.theme-orange {
  --line-color: #fa5014;
}

/*　イラスト下のテキスト */
#osusumeTextHogu p.cmn-richtext,
#osusumeTextNuku p.cmn-richtext,
#osusumeTextSou p.cmn-richtext,
#osusumeTextBur p.cmn-richtext{
  line-height:1.0em;
}

/*　イラスト下のテキスト */
/* PC（1025px以上） */
@media screen and (min-width: 1025px) {
#osusumeTextHogu p.cmn-richtext,
#osusumeTextNuku p.cmn-richtext,
#osusumeTextSou p.cmn-richtext,
#osusumeTextBur p.cmn-richtext{
  	font-size:130%;
  }
}


/* ==========================================
 　こだわりの処方
   ========================================== */

/*--　リード --*/
.kodawariRead{
  line-height:1.2em;
  padding-top:0 !important;
  margin-top:0 !important;
}

/* PC（1025px以上） */
@media screen and (min-width: 1025px) {
.kodawariRead{
  text-align:center;
  font-size:130% !important;
  }
}

/* タブレット（641px～1024px） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
.kodawariRead{
  text-align:center;
  }
}

/*--　各特長のテキスト --*/
.kodawariText{
  line-height:0.9em;
  padding-top:0 !important;
  margin-top:0 !important;
}

.kodawariYuiroText{
  line-height:0.7em;
  padding-top:0 !important;
  margin-top:0 !important;
}

/* PC（1025px以上） */
@media screen and (min-width: 1025px) {
.kodawariText,
.kodawariYuiroText{
  font-size:130% !important;
  }
}

/*--　注釈 --*/
.chuushakuText{
  line-height:0.9em;
  padding-top:0 !important;
  margin-top:0 !important;
}

@media screen and (min-width: 1025px) {
.chuushakuText{
  	font-size:120%;
  }
}

/* ==========================================
 　おすすめの入浴法
   ========================================== */

/* タイトルの文字を大きく */
/* スマホ（640px以下） */
@media screen and (max-width: 640px) {
  #hogukaru2 .cmn-richtext,
  #nukumori2 .cmn-richtext,
  #soukai2 .cmn-richtext,
  #burning2 .cmn-richtext{
  	font-size:120% !important;
  }
}


/* お湯の温度と入浴方法の縦センターにする */
/* 1. 右側のテキストエリア枠を画面全体の高さに合わせる */
.g-ImageTextHP--v2__contentsBlock__text {
    display: flex !important;
    align-self: center !important; /* 画像の高さに対して中央に配置 */
}

/* 2. .g-Text 自体を中央配置にする */
.g-ImageTextHP--v2__contentsBlock__text .g-Text {
    margin-top: auto !important;
    margin-bottom: auto !important;
    transform: translateY(-4px) !important;
}


/* お湯の温度の行間を狭める */
.g-ImageTextHP--v2__contentsBlock__text .g-Text .cmn-richtext{
  line-height:1.1em !important;
}

/* 文字を少し大きく */
/* PC（1025px以上） */
@media screen and (min-width: 1025px) {
 .g-ImageTextHP--v2__contentsBlock__text .g-Text .cmn-richtext{
  	font-size:120% !important;
 }
}

/* リードの行間を狭める */
#osusumeNyuyokuHogu p.cmn-richtext,
#osusumeNyuyokuNuku p.cmn-richtext,
#osusumeNyuyokuSou p.cmn-richtext,
#osusumeNyuyokuBur p.cmn-richtext{
  line-height:1.0em;
}

/* リードの文字を少し大きく */
/* PC（1025px以上） */
@media screen and (min-width: 1025px) {
 #osusumeNyuyokuHogu p.cmn-richtext,
 #osusumeNyuyokuNuku p.cmn-richtext,
 #osusumeNyuyokuSou p.cmn-richtext,
 #osusumeNyuyokuBur p.cmn-richtext{
  	font-size:120% !important;
 }
}