/* resposive_bcl.css */
/*------------------------------------------------------------------------ for sp ------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  #mainContents div.spCol100 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #mainContents div.spCol50 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #mainContents div.spCol33 {
    flex: 0 0 33%;
    max-width: 33%;
  }

  #mainContents div.spCol66 {
    flex: 0 0 66%;
    max-width: 66%;
  }

  html body #mainContents {
    max-width: 100%;
    overflow: hidden;
  }

  #mainContents .main-contents-inner3 {
    max-width: 92%;
    margin-left: 4%;
    margin-right: 4%;
  }

  html body #wrapper #mainContents div.main-contents-inner3.contWrap {
    padding: 1rem 6%;

  }

  #mainContents .namePriceWrap {
    max-width: 74%;
  }

  #mainContents .spHide {
    display: none !important;
  }

  #mainContents .f26 {
    font-size: 1.4rem;
    line-height: 1.2;
  }

  #mainContents #headCatchTitle {
    margin-top: 1.5rem;
  }

  #mainContents #itemCatchTitle {
    font-size: 1.6rem;
    line-height: 5.2;
    letter-spacing: -1px;
    margin: -2rem auto;
  }

  #mainContents #itemCatchTitle img {
    max-height: 6.5rem;
  }

  #mainContents #headCatchTitle img {
    max-height: 5.5rem;
  }

  #mainContents #headCatch>br {
    display: none;
  }

  #mainContents div.z2 h2+h3,
  #mainContents #headCatch {
    font-size: 14px !important;
    letter-spacing: -1px;
    padding: 0 2rem;
    line-height: 1.5;
  }

  #section1 .sectionInnerDef {
    padding-top: 0;
  }

  #mainContents .expTip div.col-3 {
    display: none;
  }

  #mainContents div.mt6rem {
    margin-top: 2rem;
  }

  #mainContents #materialWrap.mt60,
  #mainContents .expTip.mt60 {
    margin-top: 2rem !important;
  }

  #mainContents #washExp1 {
    padding-top: 0.5rem;
  }

  #mainContents #washExp1,
  #mainContents #washExp2 {
    line-height: 1.5;
    font-size: 1.15rem !important;
  }

  #wrapper #use1sp,
  #wrapper #use2sp {
    width: 33%;
    float: left;
    vertical-align: middle;
    margin-right: 0.5rem;
  }

  #mainContents #titleBetatsuki,
  #mainContents #titleStudy {
    font-size: 1.25rem;
    margin-top: auto;
    letter-spacing: -1px;
  }

  #mainContents #titleBetatsuki {
    font-size: 1.75rem;
  }

  #mainContents #expStudy {
    margin: 3rem auto;
    width: 100%;
    max-width: 100%;
    text-align: left;
    font-size: 1.25rem;
  }

  #mainContents #expStudy br {
    display: none;
  }

  /*#mainContents #studySecWrap{ margin-top: 6rem; }*/
  #mainContents #stepFigWrap {
    margin: 4rem auto auto auto !important;
  }

  #mainContents #materialWrap div.col-4,
  #mainContents #stepFigWrap div.col-4 {
    padding-left: 5px;
    padding-right: 5px;
  }

  #mainContents #stepFigWrap div.col-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #mainContents #handcreamAttn1 {
    margin: 1rem auto 3rem auto;
    width: 100%;
    max-width: 100%;
    font-size: 1.15rem !important;
  }

  #mainContents #materialWrap {
    margin-left: auto;
    margin-right: auto;
  }

  #mainContents #materialWrap div.col-4 {
    font-size: 1.15rem;
    line-height: 1.2;
  }

  #mainContents #figTehada {
    max-height: 6.5rem;
    width: 15rem;
    padding-bottom: 2rem;
    margin-left: -1rem;
  }

  #mainContents section div.main-contents-inner3,
  #mainContents div.sectionInnerDef {
    padding: 2rem 0 2rem 0;
  }

  #mainContents #section1 div.main-contents-inner3 {
    padding-bottom: 0;
  }

  #mainContents #itemCatchTitle.w80 {
    width: 100%;
  }

  #mainContents #itemWrap {
    margin-top: 4rem;
    padding-left: 0;
    padding-right: 0;
  }

  #mainContents #itemWrap div.col-6 {
    flex: 0 0 88%;
    max-width: 88%;
    margin: auto 6% 4rem 6%;
  }

  #mainContents #itemWrap img.itemImg {
    max-height: 250px;
  }

  #mainContents div.specWrap {
    display: flex;
  }

  img.flavor_illust {
    /*height: fit-content;*/
    height: min-intrinsic;
  }

  #mainContents div.namesWrap {
    width: 83%;
    flex: 0 0 83%;
    left: -6%;
  }

  html body #mainContents div.namesWrap h5.flavor {
    font-size: 1.45rem;
    /*background-size: 120% auto;*/
    letter-spacing: -0.5px;
  }

  #mainContents div.namesWrap .w60exp {
    line-height: 1.35;
    font-size: 12px !important;
    padding-top: 1rem;
  }

  #mainContents div.namesWrap .w60exp br {
    display: none;
  }

  /*#mainContents .itemTipWrap{ border-radius: 3rem; }*/
  /*#mainContents #item5tip h5.flavor{background: url(/img/freepages/vecuahoney_handcream/flv_col5@2x.png) no-repeat top -2.5rem center;background-size: 119% 152%;}*/
  #mainContents .priceWrap {
    line-height: 1.25;
  }

  #itemFlagRight,
  #itemFlagLeft,
  #topFlagRight,
  #topFlagLeft {
    max-width: 10rem;
  }

  #mainContents #section3 #mainCont3 {
    background: url(/img/freepages/vecuahoney_handcream/waku_1sp.png) no-repeat center center;
    background-size: 100% 100%;
  }

  #mainContents #section1 #mainCont1 {
    background: url(/img/freepages/vecuahoney_handcream/waku_chardon_sp.png) no-repeat center center;
    background-size: 100% 100%;
  }

  #mainContents #section4 #mainCont4,
  #mainContents #section2 #mainCont2 {
    background: url(/img/freepages/vecuahoney_handcream/waku_2sp.png) no-repeat center center;
    background-size: 100% 100%;
  }

  #mainContents #section5 #mainCont5 {
    background: url(/img/freepages/vecuahoney_handcream/waku_3sp.png) no-repeat center center;
    background-size: 100% 100%;
  }

  #mainContents #piram1 {
    width: 100%;
    padding-bottom: 5rem;
  }

  #mainContents #exp1inner {
    padding: 1rem 0 0 0;
    font-size: 1.2rem !important;
  }

  #woolongCatSp {
    margin-right: auto;
  }

  #mainContents #oolongExp1 {
    padding-left: 0;
    flex: 0 0 66.333333%;
    max-width: 66.333333%;
  }

  #mainContents #topExpWave {
    width: 80%;
  }

  #mainContents #topExp2 {
    text-align: center;
    font-size: 1.15rem !important;
    padding-top: 2rem;
    letter-spacing: -1px;
  }

  #woolojng_topSp2 {
    width: 28%;
    float: left;
    padding-bottom: 1.5rem;
  }

  #use2sp {
    padding-bottom: 2rem;
  }

  #mainContents #section5 #mainCont5,
  #mainContents #section3 #mainCont3,
  #mainContents #section4 #mainCont4,
  #mainContents #section2 #mainCont2 {
    padding-bottom: 3rem;
  }

  #mainContents #mainCont4 #newMark {
    top: -1rem;
    left: -1rem;
    max-height: 5rem;
  }

  #mainContents #feature img.flavor_illust {
    object-fit: contain;
  }

  #mainContents #creamH2Wrap {
    width: 100%;
    padding-top: 2rem;
  }

  #mainContents #mainCont5 img.leaf {
    max-height: 3rem;
    padding: 0.5rem 0;
  }

  #mainContents img.flavor_illust,
  /*#mainContents #item2tip .flavor_illust{ height: fit-content; padding-top: 7rem; }*/
  #mainContents #item2tip .flavor_illust {
    height: auto;
    padding-top: 7rem;
  }

  #mainContents #illustOoolong {
    width: 33%;
    margin: -3rem -2rem auto -2%;
    padding-bottom: 2rem;
  }

  #mainContents #itemNewMark {
    top: -2rem;
    left: 0rem;
    width: 9rem;
  }

  #mainContents .lemon-ugc-root :is(.lemon-text-\[12px\]) {
    line-height: 14px;
  }

  #wrapper #main_area #mainContents #mainCont2 {
    padding-bottom: 4.5rem;
  }

  #spChardonExp {
    padding: 2rem 0rem;
    position: relative;
  }

  #mainContents #itemPicChardonSP {
    width: 36%;
    margin: 1rem auto;
    position: relative;
    z-index: 2;
  }

  #mainContents #chardonMarkNewSP {
    position: absolute;
    left: 3rem;
    top: 8rem;
    width: 8rem;
    z-index: 0;
  }

  #mainContents #sozaiChardonSP .sozaiImg {
    max-width: 24vw;
  }

  #mainContents #sozaiChardonSP td {
    padding: 0 5px;
  }

  #mainContents #seibunMarkSP {
    width: 33rem;
    max-width: 90px;
  }

  #mainContents span.catchL {
    font-size: small;
  }

  #mainContents #item7tip div.namesWrap {
    left: 19%;
  }

  html body #mainContents #illustChardonne {
    width: 34%;
    left: -1rem;
    bottom: 11rem;
  }

  #mainContents #section1 #mainCont1.peachAdd {
    background: url(/img/freepages/vecuahoney_handcream/waku_peach_sp.png) no-repeat center center;
    background-size: 100% 100%;
  }

  #mainContents #itemPicPeachSP {
    width: 36% !important;
    margin: 1rem auto;
    position: relative;
    z-index: 2;
  }

  #mainContents #spPeachExp {
    margin-top: 4rem;
    padding-bottom: 4rem;
  }

  #mainContents #section5 h5.flavor {
    margin-left: auto;
    margin-right: auto;
  }

  #mainContents #section5 div#item8tip #illustPeach {
    width: 79px;
    margin: 2rem auto 2rem -2%;
    float: left;
    height: 167px;
    object-fit: contain;
  }

  #mainContents #mainCont1 div.txL.itemExp.lh-thin1 {
    font-size: 1rem;
  }

  /*============ 2025-10 ==================*/
  #mainContents #section0 #mainCont0 {
    background: url(/img/freepages/vecuahoney_handcream/bg0_grad_sp.png) no-repeat center center;
    background-size: 100% 100%;
  }

  #mainContents #section0 #mainCont0 div.expTip {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  #section0 img.sec0_itemPic {
    margin-top: auto;
    max-height: 231px;
    width: auto !important;
    max-width: fit-content;
  }

  #lateCatchSP {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  #itemDreamy,
  #itemLittle {
    width: 75%;
    margin: 2rem auto;
  }

  #titleLittle {
    width: 60%;
    margin: 1rem 20%;
  }

  #section0 #lemonadeCup,
  #littleExp #mochaCup,
  #littleExp #lateCup {
    max-height: 14rem;
  }

  #dreamyExp h4,
  #dreamyExp p,
  #littleExp h4,
  #littleExp p {
    margin-top: 0.5rem;
  }

  #dreamyExp p.f14rem,
  #littleExp p.f14rem {
    font-size: 1.2rem;
  }

  #mainContents #section0 #dreamyExp {
    padding-top: 0;
    margin-top: auto;
  }

  #titleDreamy {
    margin-top: 4rem;
  }

  #section0 #dreamyExpWrap {
    padding-top: 1rem;
  }

  #whiteteaCup {
    width: 85%;
    margin: 1rem auto;
  }

  #section0 h4.f24rem {
    font-size: 1.8rem;
    line-height: 1.1;
  }
}

@media screen and (max-width: 376px) {
  html body #mainContents #mainContents .matName {
    font-size: 1.25rem;
  }

  html body #mainContents #mainContents img.iconGentei {
    max-height: 40px;
  }

  html body #mainContents #mainContents .nameAndPrice .vaM {
    font-size: 13px !important;
    letter-spacing: -1px;
  }
}