@charset "UTF-8";
/* ======================================
X series Skincare
ver. 2.2
updated on 2026.01.28
====================================== */
/** clearfix --------------------------------------- */
.clearfix {display: block; zoom: 1;}
.clearfix:after {content: "."; display: block; height: 0.01px; clear: both; visibility: hidden; font-size: 0; line-height: 0;}
/** letter spacing --------------------------------------- */
.ls-1 {letter-spacing: -1px;}
.ls-2 {letter-spacing: -2px;}
.ls-3 {letter-spacing: -3px;}
.ls-4 {letter-spacing: -4px;}
.ls-5 {letter-spacing: -5px;}
.ls-6 {letter-spacing: -6px;}
.ls-8 {letter-spacing: -8px;}
.ls-10 {letter-spacing: -10px;}
.ls-12 {letter-spacing: -12px;}
.ls-14 {letter-spacing: -14px;}
/** base --------------------------------------- */
.series_feature {font-family: 'Noto Serif JP', serif; color: #000000; font-weight: 600;}
.series_feature h1, .series_feature h2, .series_feature h3, .series_feature h4, .series_feature h5 {border: 0; box-shadow: none; margin: 0; padding: 0; letter-spacing: 0; background: none; text-align: left; font-size: 100%; line-height:1.2;}
.series_feature span {border: 0; padding: 0; font-size: 1em;}
.series_feature img {width: 100%; height: auto;}
.series_feature em {font-style: normal;}
.series_feature a:hover {text-decoration: none;}
.series_feature .font_sans {font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
.series_feature .font_serif {font-family: 'Noto Serif JP', serif; font-weight: 600;}/* for Android */
.series_feature sup {font-size: 0.6em; line-height: 0;}
/* delighter --------------------------------------- */
#obg_lp .delighter {transition: opacity 0.6s linear 0.2s; opacity: 0;}
#obg_lp .delighter.started {opacity: 1;}
/* メインビジュアル ---------------------------------------  (updated on 2023.08.06)*/
#series_kv .series_dscp {bottom: 15px;}
/* series_feature --------------------------------------- (updated on 2023.08.06) */
.series_feature {padding: 30px 15px; overflow-x: hidden;}
/* FL_movie_top --------------------------------------- */
#FL_movie_top {padding: 30px 15px;}
#FL_movie_top ._movie_ttl {font-size: min(6.93vw,26px); text-align: center; font-weight: 700; margin: 0 0 14px;}
#FL_movie_top video {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 auto;}
/* tokucho_ttl  --------------------------------------- */
.tokucho_ttl {position: relative; text-align: center; padding: 0 0 10px; margin: 0 auto;}
.tokucho_ttl .num {position: relative; display: inline-block; z-index: 2;}
.tokucho_ttl .num:after {margin: -35px 0 0 -32px; padding: 0 35px 0 32px; content: " "; display: block; width: 100%; border-bottom: 1px solid #C3984D; z-index: 1;}
.tokucho_ttl .num .num01 {font-size: 1.3em; font-style: oblique; color: #C3984D; padding: 0 0 0 10px; background: #ffffff; vertical-align: middle;}
.tokucho_ttl .num .num02 {font-size: 3em; font-style: oblique; color: #C3984D; background: #ffffff; vertical-align: middle;}
.tokucho_ttl .num .ico_new {display: inline-block; background: #ffffff; padding: 0 10px;}
/*.tokucho_ttl .num .ico_new_line {display: inline-block; border: 1px solid #e60027; transform: skewX(-20deg);}*/
.tokucho_ttl .num .ico_new_txt {display: inline-block; transform: padding: 0 6px 0 2px; font-size: 1.3em; font-style: oblique; color: #e60027; vertical-align: middle;}
.tokucho_ttl.tokucho01 .num02 {padding-right: 10px;}
.tokucho_ttl .txt {font-size: 1.35em; line-height: 1.4; letter-spacing: -1px; margin: 25px 0; text-align: center;}
.tokucho_ttl ._ico_new {position: absolute; z-index: 2; width: min(24vw,90px); top: min(-1.333vw,-5px); left: min(5.866vw,22px);}
/* FL_features --------------------------------------- */
#FL_features {padding: 0 16px 10px;}
._feat_hdr {position: relative;}
._feat_box {margin: 0 0 35px;}
._feat_main_inr {display: -webkit-box; display: flex; flex-direction: column; background-color: #fff; padding: 0 0 35px;}
._feat_main ._main {display: contents;}
._feat_main ._dsc {font-size: min(4.4vw,18px); line-height: 1.6; text-align: center;}
._feat_main ._list li {background-color: #888; color: #fff; text-align: center; font-size: min(4.6vw,18px); line-height: 1; padding: min(3.733vw,14px) 0; margin-bottom: min(3.333vw,12.5px);}
._feat_main ._ant {font-size:min(2.933vw,11px) ; line-height: 1.6; margin-top: min(2.266vw,17px);}
._feat_main ._pic {text-align: center;}
._feat01 {padding-top: min(8.266vw,31px);}
._feat01 ._feat_main ._main {padding: 25px 0;}
._feat01 ._feat_main ._dsc {order: 1; margin: 0 0 15px;}
._feat01 ._feat_main ._list {order: 3;}
._feat01 ._feat_main ._pic {order: 2; width: min(52.6vw,197.5px); margin: 0 auto 17px;}
._feat01 ._feat_main ._ant {order: 4;}
._feat02 ._feat_main_inr {background: #fff url(/-/media/obagi/promotion/framelift/bg_feat02_sp.jpg) center top no-repeat; background-size: 100% auto;}
._feat02 ._feat_main ._list  {order: 1; width: min(54.4vw,204px);}
._feat02 ._feat_main ._ant {order: 2;}
._feat03 ._feat_main ._dsc {order: 1;}
._feat03 ._feat_main ._pic {order: 3; width: min(53.33vw,200px); margin: 0 auto;}
._feat03 ._feat_main ._ant {order: 2; text-align: center; margin: 0 0 16px;}
/* FL_items --------------------------------------- */
.FL_items {padding: 35px 0 0;}
.FL_item_box {text-align: center; display: -webkit-box; display: flex; flex-direction: column; margin: 0 0 40px;}
.FL_item_box ._item_dtl {display: contents;}
.FL_item_box ._item_hl {order: 1; padding: 0 0 16px;}
.FL_item_box ._item_hl ._hl_txt {padding: 0; color: #C3984D; font-size: min(6.933vw,26px) !important; line-height: 1.6; margin: 0 0 3.5px;}
.FL_item_box ._item_name {order: 2; font-size: min(5.866vw,22px) !important; line-height: 1.2; text-align: center !important; font-weight: 700; margin: 0 0 15px !important;}
.FL_item_box ._item_dsc {order: 3; font-size: min(4.8vw,18px); line-height: 1.5; margin: 0 0 10px;}
.FL_item_box ._item_ant {order: 4; font-size: min(2.66vw,10px); line-height: 1.6; margin: 0 0 25px;}
.FL_item_box ._item_pic {order: 5;}
.FL_item_box ._item_price {order: 6; font-size: min(3.2vw,12px); line-height: 1.75; margin-top: -1em;}
.FL_item_box ._item_price ._price_unit {font-size: min(2.66vw,10px) !important;}
.FL_item_box ._item_pic_ant {order: 7; font-size: min(2.66vw,10px); margin: 10px 0 0; color: #666;}
/* How to --------------------------------------- */
#FL_howto .FL_howto_hdr {padding: 23px 0; color: #C3984D; text-align: center; font-size: min(6.933vw,25px); font-weight: normal; width: 100%; margin: 0;}
#FL_howto ._step_hdr {position: relative;}
#FL_howto ._step_hdr ._step_num {position: relative; width: 70px; height: 70px; border-radius: 50%; background-color: #C3984D; text-align: center; color: #fff; z-index: 2;}
#FL_howto ._step_hdr ._step_num ._txt {display: block; font-size: 1em; line-height: 1; font-weight: 500; padding: 16px 0 0;}
#FL_howto ._step_hdr ._step_num ._txt ._num {display: block; font-size: 1.4em; line-height: 1; font-weight: 500;}
#FL_howto ._step_hdr:after {position: absolute; content: " "; width: 100%; border-top: 1px solid #C3984D; top: 50%;}
#FL_howto ._step_ttl {font-size: min(5.866vw,22px); line-height: 1.5; font-weight: 700; padding: 15px 0 0;}
#FL_howto ._step_ttl .ico img {width: min(8.266vw,31px);}
#FL_howto ._step_main {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 0 0 0 10px;}
#FL_howto ._step_main ._step_txt {width: 65%;}
#FL_howto ._step_main ._step_txt p {font-weight: 500; font-size: min(4vw,15px); line-height: 1.5; text-align:justify;}
#FL_howto ._step_main ._step_txt p strong {font-weight: 700;}
#FL_howto ._step_main ._step_pic {width: 35%;}

#FL_howto .FL_howto_step._Step2 ._step_main {padding: 28px 0 16px; border-bottom: 1px solid #ccc;}
#FL_howto .FL_howto_step._Step2 ._step_main:nth-last-of-type(1) {border-bottom: 0;}
#FL_howto .FL_howto_step._Step1 ._step_main ._step_txt p,
#FL_howto .FL_howto_step._Step3 ._step_main ._step_txt p {padding: 16px 0;}
#FL_howto .FL_howto_step._Step3 {padding: 0 0 20px;}
/* Movie --------------------------------------- */
#FL_movie {padding: 30px 15px;}
#FL_movie ._movie_main {margin-bottom: 30px;}
#FL_movie ._movie_main iframe {width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden;}
#FL_movie ._movie_main ._movie_ttl {font-size: min(4vw,15px); text-align: center; font-weight: 500; padding: 12px 0 0;}
/* 商品ラインナップ --------------------------------------- */
#series_item_list + .block-contents-4  {display: none;}/* 2026.01.28 自動出力を非表示にする */
#series_item_list .block-contents-4 .block-series,
#series_item_list .block-contents-4 .block-series .series-inner {margin-bottom: 0; padding-bottom: 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts {width: auto; margin: 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .image p.ico {margin: 10px 0 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .description span {margin: 0 2em;}
#series_obagix .block-contents-4 h2.subttl {background: none; border: 1px solid #999999; font-size: 1.6em; line-height: 1; letter-spacing: 0; text-align: center; margin: 0 0 25px; padding: 0.8em 0;}
#series_obagix #item_care01 {padding-bottom: 30px;}
#series_obagix #item_care01 .block-series,
#series_obagix #item_care02 .block-series {width: 100%;}
#series_obagix #item_care01 .block-series .series-inner,
#series_obagix #item_care02 .block-series .series-inner {display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#series_obagix #item_care01 .block-series .series-inner a,
#series_obagix #item_care02 .block-series .series-inner a {width: 50%; padding: 0 0 2em;}
#series_obagix #item_care01 .block-series .series-inner a .description,
#series_obagix #item_care02 .block-series .series-inner a .description {position: relative; padding: 0;}
#series_obagix #item_care01 .block-series .series-inner a .img-name-item,
#series_obagix #item_care02 .block-series .series-inner a .img-name-item {position: relative; padding: 0 1em; margin-top: -1.5em;}


/* ========================================
+Media Querie
======================================== */
/* SP */
		@media screen and (max-width: 640px) {
div.block-contents-1 {margin-left: 0; margin-right: 0; width: 100%;}
div.block-contents-1 .block-h1,
div.block-contents-1 .ttl-h2-1,
div.block-contents-1 .block-series {margin-right: 15px; margin-left: 15px;}
div.block-contents-1 .block-h1 {padding-bottom: 24px;}
div.block-contents-1 .block-series {width: calc(100% - 30px);}
.sp_none {display: none;}
		}
/* SP small */
		@media screen and (max-width: 320px) {

		}

/* TB・PC  */
		@media screen and (min-width:641px) {
.tb-pc_none {display: none;}
/* series_feature --------------------------------------- (updated on 2023.08.06) */
.series_feature {width: 600px; margin: 0 auto;}
/* FL_movie_top --------------------------------------- */
#FL_movie_top {padding: 30px 0 108px;}
#FL_movie_top ._movie_ttl {font-size: min(2.5vw,36px); margin: 0 0 20px;}
#FL_movie_top video {width: min(48vw,690px);}
/* tokucho_ttl  --------------------------------------- */
.tokucho_ttl .txt {margin: 25px 0 0;}
.tokucho_ttl ._ico_new {width: min(7.8472vw,113px); top: -2vw; left: min(12vw,200px);}
/* FL_features --------------------------------------- */
#FL_features {background-image: url(bg_features_pc.jpg);}
._feat_box {width: min(66vw,925px); margin: 0 auto min(5.38vw,27.5px);}
._feat_main_inr {-webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: min(2.22vw,32px) min(4.3vw,62px) min(3.125vw,45px) min(3.68vw,53px);}
._feat_main ._main {display: block;}
._feat_main ._dsc {font-size: min(1.666vw,24px); line-height: 1.4; text-align: left;}
._feat_main ._list li {font-size: min(1.388vw,20px);}
._feat_main ._ant {font-size: min(0.833vw,12px); margin-top: min(0.52vw,7.5px);}

._feat01 ._feat_main_inr {padding-top: 0;}
._feat01 ._feat_main ._list {padding: 0 min(3.47vw,50px) 0 min(1.63vw,23.5px);}
._feat01 ._feat_main ._pic {width: min(19.027vw,274px); margin: 0;}
._feat02 ._feat_main_inr {background: #fff url(/-/media/obagi/promotion/framelift/bg_feat02_pc.jpg) right top no-repeat; background-size: 47.59% auto; margin-top: 40px; margin-bottom: 80px;}
._feat02 ._feat_main ._list {width: min(31.38vw,452px); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
._feat02 ._feat_main ._list li {width: calc(50% - 5.5px); margin: 0 0 12px;}
._feat02 ._feat_main ._list li:nth-of-type(2n+1) {margin-right: 11px;}
._feat03 ._feat_main ._pic {width: min(14.02vw,202px); margin: 0 min(1.875vw,27px) 0 0;}
._feat03 ._feat_main ._ant {text-align: left; margin: min(0.902vw,13px) 0 0 0;}
/* FL_items --------------------------------------- */
.FL_items {padding: 35px 0 0;}
.FL_item_box {-webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; flex-wrap: nowrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: left;}
.FL_item_box ._item_hl ._hl_txt {font-size: min(2.5vw,36px) !important;}
.FL_item_box ._item_dtl {display: block; width: min(47.222vw,680px);}
.FL_item_box ._item_name {text-align: left !important; line-height: 1.4; font-size: min(2.36vw,30px) !important; letter-spacing: -1px;}
.FL_item_box ._item_dsc {font-size: min(1.458vw,21px); line-height: 1.6;}
.FL_item_box ._item_ant {font-size: min(0.833vw,12px); line-height: 1.58; margin: 0 0 20px;}
.FL_item_box ._item_price {font-size: min(1.25vw,18px); line-height: 1.4; margin-top: 0;}
.FL_item_box ._item_price ._price_unit {font-size: min(0.833vw,12px) !important;}
.FL_item_box ._item_pic_ant {display: none;}
/* ........................................... Each Item */
.FL_item_box._item_emulsion,
.FL_item_box._item_wash {-webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row;}
.FL_item_box._item_lotion ._item_hl ._hl_txt._hl_txt01 {padding-right: 0 !important;}
.FL_item_box._item_lotion ._item_hl ._hl_txt._hl_txt02 {padding-left: 0 !important;}
.FL_item_box._item_lotion ._item_dtl {width: min(39.236vw,565px);}
.FL_item_box._item_lotion ._item_pic {width: min(29.5vw,425px); margin-right: min(5.138vw,74px);}
.FL_item_box._item_emulsion ._item_dtl {width: min(44.79vw,645px);}
.FL_item_box._item_emulsion ._item_pic {width: min(27.91vw,402px); margin-left: min(5.138vw,74px);}
.FL_item_box._item_cleansing ._item_dtl {width: min(44.79vw,645px);}
.FL_item_box._item_cleansing ._item_pic {width: min(25.8vw,372px); margin-right: min(5.138vw,74px);}
.FL_item_box._item_wash ._item_dtl {width: min(44.79vw,645px);}
.FL_item_box._item_wash ._item_pic {width: min(29.16vw,420px);}
/* How to --------------------------------------- */
#FL_howto {width: min(100%,685px); padding: 0; margin: 0 auto;}
#FL_howto .FL_howto_hdr {padding: 0 0 14px; font-size: min(2.5vw,36px);}
#FL_howto ._step_hdr ._step_num {width: min(8vw,84px); height: min(8vw,84px);}
#FL_howto ._step_hdr ._step_num ._txt {font-size: min(1.8vw,17.5px); padding: min(1.8vw,16px) 0 0;}
#FL_howto ._step_hdr ._step_num ._txt ._num {font-size: min(2.6vw,27px);}

#FL_howto ._step_ttl {font-size: min(5.866vw,22px); line-height: 1.5; font-weight: 700; padding: 15px 0 0;}
#FL_howto ._step_ttl .ico img {width: min(8.266vw,31px);}
#FL_howto ._step_main {-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 20px;}
#FL_howto ._step_main ._step_txt {width: calc(100% - min(10vw,125px));}
#FL_howto ._step_main ._step_txt p {font-weight: 500; font-size: min(4vw,15px); line-height: 1.5; text-align:justify;}
#FL_howto ._step_main ._step_txt p strong {font-weight: 700;}
#FL_howto ._step_main ._step_pic {width: min(13vw,125px);}

#FL_howto .FL_howto_step._Step2 ._step_ttl {padding-left: 20px;}
#FL_howto .FL_howto_step._Step2 ._step_main {padding: 28px 0 16px 20px;}
#FL_howto .FL_howto_step._Step1 ._step_main ._step_txt p,
#FL_howto .FL_howto_step._Step3 ._step_main ._step_txt p {padding: 22px 0;}
/* Movie --------------------------------------- */
#FL_movie {padding: 30px 0;}
/* 商品ラインナップ --------------------------------------- */
#series_obagix #item_care01 .block-series .series-inner a,
#series_obagix #item_care02 .block-series .series-inner a {padding: 0 0 80px;}

		}

/* TB only */
		@media screen and (min-width:641px) and (max-width:1024px) {
div.block-contents-1 {width: auto !important;}
div.block-contents-1 .block-h1,
div.block-contents-1 .ttl-h2-1,
div.block-contents-1 .block-series {width: auto !important; margin-right: auto !important; margin-left: auto !important;}
div.block-contents-1 .block-h1 {padding-left: 24px; padding-bottom: 24px;}
.tb_none {display: none;}
#series_obagix .block-contents-4 {width: auto;}
		}

/* PC only */
		@media print, screen and (min-width:1025px) {
div.block-contents-1 {width: auto !important;}
div.block-contents-1 .block-h1,
div.block-contents-1 .ttl-h2-1,
div.block-contents-1 .block-series {width: 940px; margin-right: auto; margin-left: auto;}
div.block-contents-1 .block-h1 {padding-bottom: 24px;}
.pc_none {display: none;}
/* series_feature --------------------------------------- (updated on 2023.08.06) */
.series_feature {width: 960px; margin: 0 auto;}
/* Movie --------------------------------------- */
#FL_movie {padding: 30px 0;}
#FL_movie ._movie_main {width: 560px; margin-right: auto; margin-left: auto;}
#FL_movie ._movie_ttl {font-size: min(2.5vw,36px);}
		}