/* =========================================================
   ベーススタイル・ユーティリティ
========================================================= */
.lipcare_main {
  color: #211815;
  background: transparent; /* 白ベタ塗りを解除し、裏の背景画像を見せる */
  overflow: clip !important;
  position: relative;
  z-index: 1;
}
.lipcare_main * {
  font-feature-settings: "palt";
}

@media screen and (max-width: 900px) {
  .lipcare_main .isPc { display: none !important; }
}
@media screen and (min-width: 901px) {
  .lipcare_main .isSp { display: none !important; }
}

.lipcare_main .main_width {
  display: block;
  margin: 0 auto;
  max-width: 1084px;
}
@media screen and (max-width: 1100px) {
  .lipcare_main .main_width { padding: 0 1.454vw; }
}
@media screen and (max-width: 900px) {
  .lipcare_main .main_width { padding: 0 7.466vw; }
}

/* 共通：h2 spanの強制リセット (base.css対策) */
.lipcare_main h2 span,
.lipcare_main p span {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* =========================================================
   背景画像制御 (#lip_care_bg)
========================================================= */
#lip_care_bg {
  position: fixed;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100vh;
  transform: translateX(-50%);
  z-index: -1;
  background: #fff;
}
@media screen and (min-width: 901px) {
  #lip_care_bg::before {
    position: absolute; display: block; content: ""; left: 0; top: 0; width: 53.151%; height: 100%;
    background: url("/img/usr/freepage/lipcare/lip_care_bg_pc.jpg") right bottom/cover no-repeat;
  }
  #lip_care_bg .inr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  #lip_care_bg .inr:before {
    position: fixed; display: block; content: ""; top: 0; left: 46.484%; width: 53.151%; height: 100vh;
    background: url("/img/usr/freepage/lipcare/lip_care_image_pc.jpg") left center/cover no-repeat;
  }
}
@media screen and (max-width: 1024px) and (min-width: 901px) {
  #lip_care_bg::before { width: 479px; }
  #lip_care_bg .inr:before { left: 479px; width: calc(100% - 479px); }
}
@media screen and (max-width: 900px) {
  #lip_care_bg .inr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  #lip_care_bg:before {
    position: fixed; display: block; content: ""; transition: opacity 0.75s;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: url("/img/usr/freepage/lipcare/lip_care_image_sp.jpg") center/cover no-repeat;
  }
  #lip_care_bg .inr::before {
    position: fixed; z-index: 1; inset: 0; content: ""; top: -5vw; left: -5vw; width: 110vw; height: 110vh;
    backdrop-filter: blur(1.5vw); opacity: 0; transition: opacity 0.75s;
  }
  #lip_care_bg.bg_blur:before { opacity: 0.7; }
  #lip_care_bg.bg_blur .inr::before { opacity: 1; }
}

/* =========================================================
   各セクション共通
========================================================= */
.lipcare_main .lp_section { position: relative; z-index: 2; background: #fff; }
.lipcare_main .section_ttl { text-align: left; color: #000; position: relative; padding-top: 23px; }
.lipcare_main .section_ttl::before {
  position: absolute; left: 0; top: 0; width: 100vw; height: 1px; display: block; content: ""; border-top: solid 1px rgba(61, 58, 58, 0.5);
}
.lipcare_main .section_ttl .en { font-size: 13px; line-height: 1; margin: 0 0 1.5em; font-weight: normal; }

@media screen and (min-width: 901px) {
  .lipcare_main .lp_section { width: 100%; padding-top: 48px; margin-top: -48px; }
  .lipcare_main .section_inr { padding: 80px 0 100px; }
}
@media screen and (max-width: 900px) {
  .lipcare_main .lp_section { width: 100%; padding-top: 0; margin-top: 0; }
  .lipcare_main .section_ttl { padding-top: 2.666vw; }
  .lipcare_main .section_ttl .en { font-size: 3.466vw; margin-bottom: 2.5em; }
}

/* =========================================================
   Main Visual
========================================================= */
.lipcare_main #main_visual {
  margin-bottom: 0; position: relative; background: #DBE2EA; height: calc(100vh - 152px); min-height: 797px; z-index: 2;
}
.lipcare_main #main_visual::before {
  position: absolute; left: 0; top: 0; width: 100%; height: 100px; display: block; content: ""; background: #9BA8B0; transform: translateY(-100%);
}
.lipcare_main #main_visual .kv_img { position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; overflow: hidden; }
.lipcare_main #main_visual .kv_img img { object-fit: cover; object-position: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.lipcare_main #main_visual .kv_txt { position: absolute; }
.lipcare_main #main_visual .kv_txt .kv_txt_h1 img { width: 100%; height: auto; display: block;}

@media screen and (min-width: 901px) {
  .lipcare_main #main_visual .kv_txt { left: 9.453vw; top: 50%; transform: translateY(-50%); }
  .lipcare_main #main_visual .kv_txt .kv_txt_h1 { width: 20.859vw; }
}
@media screen and (min-width: 1281px) {
  .lipcare_main #main_visual { min-height: 62.265vw; }
}
@media screen and (max-width: 900px) {
  .lipcare_main #main_visual { height: auto; min-height: calc(100svh - 84px); }
  .lipcare_main #main_visual .kv_txt { left: 50%; top: auto; bottom: 8vw; transform: translateX(-50%); }
  .lipcare_main #main_visual .kv_txt .kv_txt_h1 { width: 56.394vw; }
}

/* =========================================================
   Lip Care (スクロールテキスト部分)
========================================================= */
.lipcare_main #lip_care { position: relative; }
.lipcare_main #lip_care .lip_care_ttl { font-size: 20px; line-height: 1.8; margin-bottom: 1em; font-weight: normal; }
.lipcare_main #lip_care p { letter-spacing: 0.12em; font-size: 15px; line-height: 1.7; margin: 0; }
.lipcare_main #lip_care p + p { margin-top: 1.75em; }
.lipcare_main #lip_care p.lip_care_catch { font-size: 17px; padding-bottom: 0.5em; }
.lipcare_main #lip_care p.lip_care_catch + p { margin-top: 1.15em; }

@media screen and (min-width: 901px) {
  .lipcare_main #lip_care .section_inr { padding: 30.468vw 0 18.359vw; }
  .lipcare_main #lip_care .main_width { position: relative; }
  .lipcare_main #lip_care .lip_care_inr { width: 46.48%; min-width: 595px; position: relative; }
  .lipcare_main #lip_care .lip_care_txt { width: 430px; max-width: 100%; padding: 3.5em 0; position: relative; }
  .lipcare_main #lip_care p.lip_care_catch { border-bottom: solid 1px rgba(61, 58, 58, 0.5); }
}
@media screen and (min-width: 1281px) {
  .lipcare_main #lip_care .section_inr { padding: 390px 0 235px; }
}
@media screen and (max-width: 900px) {
  .lipcare_main #lip_care .section_inr { text-align: center; padding: 0 0 30.4vw; position: relative; z-index: 1; }
  .lipcare_main #lip_care .lip_care_inr { opacity: 0; transition: opacity 0.5s; position: relative; height: 426.666vw; }
  .lipcare_main #lip_care .lip_care_inr .lip_care_cont { position: fixed; left: 0; top: 0; width: 100%; }
  .lipcare_main #lip_care .lip_care_inr.in { opacity: 1; }
  .lipcare_main #lip_care .lip_care_inr.in .lip_care_txt { margin-left: -0.5em; margin-right: -0.5em; }
  .lipcare_main #lip_care .lip_care_inr.scroll .lip_care_cont { position: relative; top: 217.333vw; }
  .lipcare_main #lip_care .lip_care_inr .fadeline { opacity: 0; transition: opacity 0.5s; }
  .lipcare_main #lip_care .lip_care_inr .fadeline.fadein { opacity: 1; }
  .lipcare_main #lip_care .lip_care_txt { margin-top: 27.733vw; }
  .lipcare_main #lip_care .lip_care_txt + .lip_care_txt { margin-top: 4em; padding-top: 0; }
  .lipcare_main #lip_care .lip_care_ttl { font-size: 4.8vw; margin-bottom: 2.65em; line-height: 1.7; }
  .lipcare_main #lip_care p { font-size: 3.333vw; line-height: 2; }
  .lipcare_main #lip_care p + p { margin-top: 2.2em; }
  .lipcare_main #lip_care p.lip_care_catch { font-size: 4vw; padding-bottom: 0.5em; line-height: 1.4; position: relative; display: inline-block; }
  .lipcare_main #lip_care p.lip_care_catch::before {
    position: absolute; left: 50%; bottom: 0.2em; width: calc(100% - 0.2em); transform: translateX(-50%);
    height: auto; display: block; content: ""; border-bottom: solid 1px #211815; opacity: 0.8;
  }
  .lipcare_main #lip_care .sp_textline { display: block; text-align: center; }
}

/* =========================================================
   Lip Charge
========================================================= */
.lipcare_main #lip_charge { background-color: #FFFEFD; position: relative; z-index: 3; }
.lipcare_main #lip_charge .lip_charge_wrap { display: flex; margin: 24px auto; justify-content: space-between; }
.lipcare_main #lip_charge .lip_charge_img { width: calc(50% + 107px); }
.lipcare_main #lip_charge .lip_charge_img img { width: 100%; height: auto; display: block;}
.lipcare_main #lip_charge .lip_charge_detail {
  width: calc(50% - 107px); padding: 0 0 0 57px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
}
.lipcare_main #lip_charge .lip_charge_detail h2 { font-size: 18px; margin: 0 0 2em; letter-spacing: 0.18em; font-weight: normal; }
.lipcare_main #lip_charge .lip_charge_detail h2 > span { display: block; }
.lipcare_main #lip_charge .lip_charge_detail p { font-size: 14px; letter-spacing: 0.18em; margin: 0; }
.lipcare_main #lip_charge .lip_charge_detail p sup { font-size: 60%; letter-spacing: 0.05em; margin-right: 0.8em; }

@media screen and (min-width: 901px) {
  .lipcare_main #lip_charge { margin-bottom: -80px; }
  .lipcare_main #lip_charge .section_inr { padding: 20px 0; }
}
@media screen and (max-width: 900px) {
  .lipcare_main #lip_charge .section_inr { padding: 11.733vw 0 19.2vw; }
  .lipcare_main #lip_charge .lip_charge_wrap { flex-direction: column; margin: 10.666vw auto 0; }
  .lipcare_main #lip_charge .lip_charge_wrap > div { width: 100%; }
  .lipcare_main #lip_charge .lip_charge_img img { width: calc(100% + 7.466vw); max-width: 200%; }
  .lipcare_main #lip_charge .lip_charge_detail { padding: 12.24vw 0 0 3.466vw; }
  .lipcare_main #lip_charge .lip_charge_detail h2 { text-align: center; font-size: 3.733vw; margin-bottom: 1.5em; letter-spacing: 0.2em; }
  .lipcare_main #lip_charge .lip_charge_detail h2 > span:nth-of-type(n+2) { margin-left: 1.15em; }
  .lipcare_main #lip_charge .lip_charge_detail p { font-size: 3.466vw; letter-spacing: 0.08em; line-height: 1.75; }
}

/* =========================================================
   Product
========================================================= */
.lipcare_main .item_meta { position: relative; padding-top: 1.5em; }
.lipcare_main .item_meta .item_ttl_ja { font-size: 19px; letter-spacing: 0.14em; line-height: 1.2; margin: 0.5em 0; font-weight: normal;}
.lipcare_main .item_meta .item_ttl_sub { display: flex; flex-wrap: wrap; margin: 0 0 0.5em; letter-spacing: 0.075em; }
.lipcare_main .item_meta .item_ttl_sub dt { width: 100%; font-size: 12px; margin: 0;}
.lipcare_main .item_meta .item_ttl_sub dd { font-size: 13px; margin: 0;}
.lipcare_main .item_meta .item_ttl_sub dd + dd { margin-left: 0.755em; }
.lipcare_main .item_meta .item_caution p { font-size: 10px; letter-spacing: 0.085em; margin: 0;}

.lipcare_main .item_meta .item_detail { margin-bottom: 12px; }
.lipcare_main .item_meta .item_detail .detail_catch { font-size: 17px; line-height: 1.8; margin: 0 0 0.8em; letter-spacing: 0.14em; font-weight: normal;}
.lipcare_main .item_meta .item_detail p { font-size: 12px; letter-spacing: 0.085em; line-height: 1.8; margin: 0 0 1.5em; text-align: justify;}

/* ボタン */
.lipcare_main .item_meta .buy_btn_wrap { margin-top: 26px; }
.lipcare_main .item_meta .buy_btn {
  width: 100%; max-width: 270px; height: 50px; background: #505152; color: #fff;
  display: flex; justify-content: center; align-items: center; position: relative;
  font-size: 14px; letter-spacing: 0.15em; text-decoration: none; transition: 0.5s;
}
.lipcare_main .item_meta .buy_btn:hover { opacity: 0.8; }
.lipcare_main .item_meta .buy_btn::before {
  content: "→"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

.lipcare_main .item_meta .view_more_link { font-size: 13px; margin: 1.35em auto; }
.lipcare_main .item_meta .view_more_link a { color: #211815; text-decoration: underline; transition: 0.5s; }
.lipcare_main .item_meta .view_more_link a:hover { opacity: 0.5; }

.lipcare_main .product_cautions { font-size: 10px; max-width: 960px; margin: 1em auto 0; box-sizing: border-box; }
.lipcare_main .product_cautions ul { margin: 0 0 0 -1em; padding: 0; list-style: none;}
.lipcare_main .product_cautions ul li { display: inline-block; line-height: 1.7; font-size: 10px; margin-left: 1em; letter-spacing: 0.025em; }

@media screen and (min-width: 901px) {
  .lipcare_main #product .product_wrap { max-width: 908px; margin: auto; }
  .lipcare_main #product .product-item_wrap { padding-top: 48px; margin-top: -48px; }
  .lipcare_main #product .product_item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 50px 0; }
  .lipcare_main #product .product_item .product_img { width: 42.291%; display: flex; justify-content: center; }
  .lipcare_main #product .product_item .product_img img { margin: auto; width: 100%; height: auto;}
  .lipcare_main #product .product_item .product_txt { width: 43.722%; }
  
  .lipcare_main #product .product_item:nth-child(even) .product_img { order: 2; }
  .lipcare_main #product .product_item:nth-child(even) .product_txt { order: 1; }
}
@media screen and (max-width: 900px) {
  .lipcare_main #product .product-item_wrap { margin-top: 16vw; }
  .lipcare_main #product .product-item_wrap + .product-item_wrap { margin-top: 18.666vw; }
  .lipcare_main #product .section_inr { padding: 14.933vw 0 40vw; }
  .lipcare_main #product .section_ttl { margin-bottom: 7.466vw; }
  .lipcare_main #product .product_item + .product_item { margin-top: 12.373vw; }
  .lipcare_main #product .product_item .product_img { width: 100%; max-width: 636px; margin: 0 auto;}
  .lipcare_main #product .product_item .product_img img { width: 100%; height: auto; display: block;}
  .lipcare_main #product .product_item .product_img.w-202 img { width: 55.327%; margin: auto; }
  
  .lipcare_main .item_meta { padding-top: 12.8vw; }
  .lipcare_main .item_meta .item_ttl_ja { font-size: 4.533vw; }
  .lipcare_main .item_meta .item_ttl_sub { font-size: 3.2vw; margin-bottom: 0.75em; }
  
  .lipcare_main .item_meta .item_detail { margin-bottom: 4vw; }
  .lipcare_main .item_meta .item_detail .detail_catch { font-size: 4.266vw; letter-spacing: 0.125em; line-height: 1.5; margin-bottom: 1.1em; }
  .lipcare_main .item_meta .item_detail p { font-size: 3.466vw; margin-bottom: 2em; letter-spacing: 0.15em; line-height: 1.5; }
  .lipcare_main .item_meta .item_detail p:last-child { margin-bottom: 1.65em; }
  
  .lipcare_main .item_meta .buy_btn_wrap { margin-top: 6.933vw; }
  .lipcare_main .item_meta .buy_btn { max-width: 100%; height: 13.333vw; font-size: 3.733vw;}
  .lipcare_main .item_meta .buy_btn::before { right: 4vw; }
  
  .lipcare_main .item_meta .view_more_link { font-size: 3.466vw; margin: 0.7em auto 0; }
  .lipcare_main .product_cautions { margin: 13.48vw auto 0; }
  .lipcare_main .product_cautions ul li { letter-spacing: 0.05em; margin-left: 0; display: block;}
}

/* =========================================================
   上下の透け・隙間防止の強制リセット (完全版)
========================================================= */
/* 1. ヘッダーの背景色を白にする（レイアウトを崩さないよう背景色のみ指定） */
header,
#header-wrapper {
    background-color: #ffffff !important;
}

/* パンくずリストを白背景にし、裏の画像より手前に出す */
.pane-topic-path {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 999 !important;
}

/* 2. メインビジュアル上部にできる謎の隙間（ハチミツが見える部分）を消去 */
.lipcare_main #main_visual::before {
    display: none !important;
}

/* 3. フッターおよびメインコンテンツより下のエリアを白背景で塗りつぶす
   ※ただし、背景画像用の #lip_care_bg は除外（:not）する */
main.lipcare_main ~ *:not(#lip_care_bg),
#footer,
.footer-wrapper {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 999 !important;
}