@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@600;700&display=swap');
/* 
ObagiX Vitalize Liftcream sampling campaign / 2025.6.23
basic --------------------------------------- */
.block-contents-1 {margin: 0 !important; width: auto !important;}
.block-contents-1 .block-h1 {display: none;}
#btn-buy {display: none;}
#obg_cam {font-family: 'Noto Sans JP', sans-serif; color: #000000; font-weight: 400; max-width: 750px; margin: 0 auto;}
#obg_cam h1, #obg_cam h2, #obg_cam h3, #obg_cam h4, #obg_cam h5 {box-shadow: none; margin: 0; letter-spacing: 0; background: none;}
#obg_cam span {border: 0; padding: 0;}
#obg_cam img {width: 100%; height: auto;}
#obg_cam em {font-style: normal;}
#obg_cam a:hover {text-decoration: none;}
#obg_cam .font_serif {font-family: 'リュウミン R-KL', 'Ryumin Regular KL', serif; font-weight: 600;}/* for Android */
#obg_cam sup {font-size: 0.6em; 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-7 {letter-spacing: -7px;}
.ls-8 {letter-spacing: -8px;}
.ls-9 {letter-spacing: -9px;}
.ls1 {letter-spacing: 1px;}
.ls2 {letter-spacing: 2px;}
.ls3 {letter-spacing: 3px;}
/* KV --------------------------------------- */
#cam_kv {padding: 0; border: 0;}
/* CP --------------------------------------- */
.pr_cp {background-color: #000; padding: min(10.66vw,80px) min(4vw,30px);}
.pr_cp .cp_hdr {background: url(bg_pr_hdr.jpg) left top no-repeat; background-size: cover; padding: min(5.33vw,40px) 0 min(4vw,30px); text-align: center; color: #fff;}
.pr_cp .cp_hdr .term {width: min(67.73vw,508px); margin: 0 auto min(5.33vw,40px);}
.pr_cp .cp_hdr .term .term_ttl {width: 37.4%; background-color: #000; color: #fff; font-size: min(3.6vw,27px); line-height: 1; padding: 0.8em 0;}
.pr_cp .cp_hdr .term .term_date {width: 62.6%; background-color: #fff; color: #333; font-family: 'Jost', 'Noto Sans JP', sans-serif; font-weight: 500;}
.pr_cp .cp_hdr .term .term_date .year {font-size: min(4.8vw,36px); line-height: 1;}
.pr_cp .cp_hdr .term .term_date em {font-size: 155%; line-height: 1;}
.pr_cp .cp_hdr .term .term_date .end {font-size: min(3.7vw,28px); line-height: 1;}

.pr_cp .cp_hdr .txt01 {text-align: center; font-size: min(4vw,30px); line-height: 1.3;}
.pr_cp .cp_hdr .txt02 {display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;}
.pr_cp .cp_hdr .txt02 .txt02_01 {font-size: min(6.13vw,46px); line-height: 1.3;}
.pr_cp .cp_hdr .txt02 .txt02_02 {font-size: min(16.4vw,123px); line-height: 1; transform: scale(0.78, 1); transform-origin: top left; width: 40%; padding: 0 0 0 0.1em;}
.pr_cp .cp_hdr .txt02 .txt02_03 {font-size: min(6.13vw,46px); line-height: 1.1; text-align: left;}

.pr_cp .cp_main {background-color: #fff; margin: 0 0 min(7.46vw,56px);}
.pr_cp .cp_main .main_hdr {background: url(bg_pr_main_ttl.jpg) center top no-repeat; background-size: cover; color: #fff; font-size: min(4.8vw,36px); line-height: 1.1; text-align: center; font-weight: 500; padding: min(2.1vw,16px) 0 min(3.7vw,28px);}

/* cp_btn_regist --------------------------------------- */
.cp_btn_regist {margin: 0 0 min(4.26vw,32px);}

/* Concept --------------------------------------- */
.x_cream_cncpt {padding: min(16vw,120px) min(4vw,30px) min(13.3vw,100px); background: url(bg_concept.jpg) left top no-repeat; background-size: cover;}
.x_cream_cncpt .cncpt_ttl {font-size: min(8.5vw,64px); line-height: 1.5; padding: 0 0 min(8vw,60px);}
.x_cream_cncpt .cncpt_txt {font-size: min(4.26vw,32px); line-height: 2; padding: 0 0 min(20vw,150px);}
.x_cream_cncpt .cncpt_ant {font-size: min(2.9vw,22px); line-height: 1;}
.x_cream_cncpt .cncpt_item_pic {width: min(53vw,400px); margin: 0 auto;}
.x_cream_cncpt .cncpt_item_cpy {font-size: min(6.4vw,48px); line-height: 1.5; text-align: center; padding: 0 0 min(10.66vw,80px);}
.x_cream_cncpt .cncpt_item_dtl {border: 1px solid #000; padding: min(2.4vw,18px); margin: 0 0 min(5.33vw,40px);}
.x_cream_cncpt .cncpt_item_dtl .item_name,
.x_cream_cncpt .cncpt_item_dtl .item_price {font-size: min(3.7vw,28px); line-height: 1.5;}
.x_cream_cncpt .cncpt_item_dtl .item_ant {font-size: min(2.9vw,22px); line-height: 1.5;}
.x_cream_cncpt .cncpt_ant {font-size: min(2.9vw,22px); line-height: 1.5;}

/* Movie --------------------------------------- */
.x_cream_mov {padding: min(16vw,120px) min(4vw,30px);}
.x_cream_mov .mov_frame iframe {aspect-ratio: 9 / 16; width: 100%; height: auto;}

/* Recommend --------------------------------------- */
.x_cream_rcm {background: url(bg_rcm.jpg) left top no-repeat; background-size: cover; padding: min(12vw,90px) min(4vw,30px) min(16vw,120px);}
.x_cream_rcm .rcm_ttl {font-size: min(8.5vw,64px); line-height: 1; text-align: center; padding: 0 0 min(6.66vw,50px); color: #fff;}
.x_cream_rcm .rcm_list {background-color: #fff; padding: min(10.66vw,80px) 0 min(5.33vw,40px) min(5.33vw,40px);}
.x_cream_rcm .rcm_list li {background: url(ico_check.png) left top no-repeat; background-size: min(6.66vw,50px) auto; padding: 0 0 0 min(8vw,60px); margin: 0 0 min(5.33vw,40px); font-size: min(4.26vw,32px); line-height: 1.3;}

/* Point --------------------------------------- */
.x_cream_point {background-color: #000; color: #fff;}
.x_cream_point .point_box {position: relative; padding: 0 min(4vw,30px) min(13.3vw,100px);}
.x_cream_point .point_box .point_ttl {font-family: 'Jost', 'Noto Sans JP', sans-serif; font-size: min(6.4vw,48px); line-height: 1.66; background-color: #eadfb6 !important; padding: 0;}
.x_cream_point .point_box .point_hdr {padding: min(5.33vw,40px) 0 0;}
.x_cream_point .point_box .point_hdr .txt,
.x_cream_point .point_box .point_txt {display: block; font-size: min(4.26vw,32px); line-height: 1.5; text-align: center; margin: 0 0 min(6.4vw,48px);}
.x_cream_point .point_box .point_hdr strong {display: block; font-size: min(8.5vw,64px); line-height: 1.125; text-align: center; margin: 0 0 min(6.4vw,48px);}
.x_cream_point .point_box .point_hdr .mark {font-size: 85% !important; vertical-align: top; position: relative; top: -0.2em;}
.x_cream_point .point_box .point_pic {text-align: center; margin: 0 0 min(6.4vw,48px);}
.x_cream_point .point_box .point_ant {font-size: min(2.9vw,22px); line-height: 1.5;}

.x_cream_point .point01,
.x_cream_point .point03 {background: url(bg_point01.jpg) left top no-repeat; background-size: cover;}
.x_cream_point .point02,
.x_cream_point .point04 {background: url(bg_point02.jpg) right top no-repeat; background-size: cover;}
.x_cream_point .point01 .point_pic img,
.x_cream_point .point03 .point_pic img,
.x_cream_point .point04 .point_pic img {max-width: min(40vw,300px);}
.x_cream_point .point02 .point_pic img {max-width: min(64vw,480px);}

/* Item Info --------------------------------------- */
.x_cream_info {background: url(bg_info.jpg) left top no-repeat; background-size: cover; padding: min(16vw,120px) 0;}
.x_cream_info .info_hdr {text-align: center; font-size: min(4.8vw,36px); line-height: 1.3; border: 1px solid #000; padding: min(3.46vw,26px) 0; margin: 0 min(4vw,30px) min(10.66vw,80px);}
.x_cream_info .info_cpy {text-align: center; padding: 0 0 min(13.3vw,100px);}
.x_cream_info .info_cpy .txt01 {display: block; font-size: min(5.33vw,40px); line-height: 1.5; margin: 0 0 min(5.33vw,40px);}
.x_cream_info .info_cpy strong {display: block; font-size: min(12.8vw,96px); line-height: 1; margin: 0 0 min(5.33vw,40px);}
.x_cream_info .info_cpy .txt02 {display: block; font-size: min(7.46vw,56px); line-height: 1.3;}
.x_cream_info .info_dscp {padding: 0 min(4vw,30px); font-size: min(4.26vw,32px); line-height: 1.5; text-align: center; margin: 0 0 min(10.66vw,80px);}
.x_cream_info .info_dtl {padding: 0 min(4vw,30px);}
.x_cream_info .info_dtl .inr {border: 1px solid #000; padding: min(2.4vw,18px); margin: 0 0 min(5.33vw,40px);}
.x_cream_info .info_dtl .item_name,
.x_cream_info .info_dtl .item_price {font-size: min(3.7vw,28px); line-height: 1.5;}
.x_cream_info .info_dtl .item_ant {font-size: min(2.9vw,22px); line-height: 1.5;}
.x_cream_info .info_dtl_ant {padding: 0 min(4vw,30px); font-size: min(2.9vw,22px); line-height: 1.5;}

/* Method --------------------------------------- */
.x_cream_method {padding: min(16vw,120px) min(4vw,30px) min(8vw,60px);}
.x_cream_method .mthd_ttl {font-size: min(8.5vw,64px); line-height: 1.125; padding: 0 0 min(8vw,60px); text-align: center;}
.x_cream_method .mthd_point {background-color: #f4f1f1; padding: min(5vw,38px);}
.x_cream_method .mthd_point .mthd_p_ttl {font-size: min(5.33vw,40px); line-height: 1; color: #bf912e; padding: 0;}
.x_cream_method .mthd_p_main {display: -webkit-box; display: flex; flex-wrap: nowrap;}
.x_cream_method .mthd_point .mthd_p_txt {width: 66%; font-size: min(3.7vw,28px); color: #333; line-height: 1.5; padding: min(4vw,30px) 0 0;}
.x_cream_method .mthd_p_main .mthd_p_pic {width: 34%;}

.x_cream_method .mthd_point01 {margin: 0 0 min(2.66vw,20px);}
.x_cream_method .mthd_point02 {margin: 0 0 min(5.33vw,40px);}

.x_cream_method .mthd_step {}
.x_cream_method .mthd_step .mthd_s_ttl {background-color: #c0aa7d !important; padding: 0 0 0 min(4.8vw,36px);}
.x_cream_method .mthd_step .mthd_s_ttl .ttl_num {display: inline-block; color: #fff; font-family: 'Jost', 'Noto Sans JP', sans-serif; font-size: min(6.4vw,48px); line-height: 1.66; font-weight: 500;}
.x_cream_method .mthd_step .mthd_s_ttl .ttl_sub {display: inline-block; vertical-align: bottom; font-size: min(3.7vw,28px); color: #333; line-height: 1; padding: 0 0 0.8em 1em !important;}
.x_cream_method .mthd_step .mthd_s_main {display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding: min(3vw,23px) min(4.6vw,35px); background-color: #f4f1f1;}
.x_cream_method .mthd_step .mthd_s_main .content_left {width: min(60vw,450px); }
.x_cream_method .mthd_step .mthd_s_main .content_left .left_with_point {width: min(52.6vw,395px); display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; background-color: #fff; border-radius: min(0.66vw,5px); padding: min(1.33vw,10px);}
.x_cream_method .mthd_step .mthd_s_main .content_left .point_txt {width: min(30.9vw,232px);}
.x_cream_method .mthd_step .mthd_s_main .point_txt_ttl {display: inline-block; font-family: 'Jost', 'Noto Sans JP', sans-serif;  font-weight: 400; font-size:  min(5.33vw,40px); line-height: 1.2; border-bottom: 1px solid #231815; margin: 0 0 min(2.4vw,18px);}
.x_cream_method .mthd_step .mthd_s_main .point_txt_main {font-size: min(2.9vw,22px); line-height: 1.4; color: #231815; white-space: nowrap;}
.x_cream_method .mthd_step .mthd_s_main .content_left .point_pic {width: min(19.4vw,146px);}
.x_cream_method .mthd_step .content {font-size: min(3.7vw,28px); color: #333; line-height: 1.5;}
.x_cream_method .mthd_step .mthd_s_main .content_right {width: min(19.33vw,145px); padding: 0 min(1.73vw,13px) 0 0;}

/* Apply --------------------------------------- */
.x_cream_apply {padding: min(8vw,60px) min(4vw,30px) min(16vw,120px); text-align: center;}
.x_cream_apply .apply_ttl {padding: 0 0 min(8vw,60px);}
.x_cream_apply .apply_ttl .txt_en {display: block; font-family: 'Jost', 'Noto Sans JP', sans-serif;  font-weight: 500; font-size: min(4.26vw,32px); line-height: 1; color: #bf912e; margin: 0 0 min(2.4vw,18px);}
.x_cream_apply .apply_ttl .txt_ja {display: block; font-size: min(8.5vw,64px); line-height: 1; color: #333;}
.x_cream_apply .apply_mov iframe {aspect-ratio: 9 / 16; width: 100%; height: auto;}

/* Voice --------------------------------------- */
.x_cream_voice{padding: 0 min(4vw,30px) min(13.3vw,100px); text-align: center;}
.x_cream_voice .voice_ttl {font-size: min(8.5vw,64px); line-height: 1; color: #333; padding: 0 0 min(8vw,60px); margin: 0;}
.x_cream_voice .voice_main {background-color: #f4f1f1; padding: min(10.66vw,80px) min(4.8vw,36px);}
.x_cream_voice .voice_person {display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; padding: 0 0 min(4vw,30px); }
.x_cream_voice .voice_person .p_face {width: 16.4%;}
.x_cream_voice .voice_person .p_fukidashi {display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; width: 100%; height: auto;}
.x_cream_voice .voice_person .p_voice_ico {width: min(1.86vw,14px); padding: min(8.5vw,64px) 0 min(4.8vw,36px);}
.x_cream_voice .voice_person .p_voice {width: 100%; background-color: #fff; border-radius: min(1.33vw,10px); padding: min(6.66vw,50px) 0;}
.x_cream_voice .voice_person .p_txt {white-space: nowrap; width: calc(83.6% - 1em); text-align: left; font-size: min(4.26vw,32px); line-height: 1.5; padding: 0 0 0 1em;}
.x_cream_voice .voice_ant {text-align: right; font-size: min(2.9vw,22px); line-height: 1.5; }

.x_cream_voice .voice_person.voice02 .p_txt {text-align: right;}
.x_cream_voice .voice_person.voice03 .p_voice {padding: min(4vw,30px) 0;}

/* pr_xseries --------------------------------------- */
.pr_xseries .x_main {background-color: #fff; text-align: center; padding: 0 0 min(12vw,90px);}
.pr_xseries .x_main .x_ttl {color: #bf912e; font-size: min(8.5vw,64px); line-height: 1.5; margin: 0 0 min(6.66vw,50px); padding: min(14.66vw,110px) 0 0;}
.pr_xseries .x_main .x_name {font-size: min(5.33vw,40px); line-height: 1.5; margin: 0 0 min(4vw,30px);}
.pr_xseries .x_main .x_txt {font-size: min(4.26vw,32px); line-height: 1.5; margin: 0 0 min(4vw,30px);}
.pr_xseries .x_main .x_ant {font-size: min(2.9vw,22px); line-height: 1;}
.pr_xseries .x_main .x_price {font-size: min(3.7vw,28px); line-height: 1.5; padding: 0 0 min(5.33vw,40px);}

/* cp_xseries --------------------------------------- */
.cp_insta {background: #f4f1f1 url(bg_pr_insta.jpg) center top no-repeat; background-size: 100% auto; text-align: center; padding: min(16vw,120px) min(4vw,30px);}
.cp_insta .insta_ttl {font-size: min(6.4vw,48px); line-height: 1; margin: 0 0 min(8vw,60px);}
.cp_insta .insta_txt {font-size: min(4.26vw,32px); line-height: 1.5; margin: 0 0 min(5.33vw,40px);}
.cp_insta .insta_pic {margin: 0 0 min(5.33vw,40px);}

/* cp_terms_and_conditions --------------------------------------- */
.cp_TC {padding: min(16vw,120px) min(4vw,30px);}
.cp_TC h2.tc_ttl {color: #bf912e; font-size: min(6.4vw,48px); line-height: 1.5; margin: 0 0 min(5.33vw,40px); text-align: center;}
.cp_TC .tc_main {border: 1px solid #000; padding: min(5.33vw,40px) min(4.66vw,35px) min(1.33vw,10px); margin: 0 0 min(9.33vw,70px);}
.cp_TC .tc_main a:link {text-decoration: underline;}
.cp_TC .tc_main p,
.cp_TC .tc_main ul {font-size: min(3.2vw,24px); line-height: 1.5; margin: 0 0 min(4vw,30px); word-break: break-all;}
.cp_TC .tc_main ul li {list-style-type: disc; margin: 0 0 1em 1.5em;}
.cp_TC .tc_subttl {font-family: sans-serif; font-size: min(3.2vw,24px); line-height: 1.5; font-weight: 600;}

/* cp_kokorohto_park --------------------------------------- */
.cp_park {padding: 0 min(4vw,30px) min(16vw,120px);}
.cp_park .park_inr {border: 2px solid #00629d; border-radius: 0 0 min(2.66vw,20px) min(2.66vw,20px);}
.cp_park .park_ttl {background-color: #00629d; border: 2px solid #00629d; border-radius: min(2.66vw,20px) min(2.66vw,20px) 0 0; color: #fff; text-align: center; font-size: min(4.26vw,32px); line-height: 1; padding: min(3.33vw,25px) 0;}
.cp_park .park_logo {width: min(64vw,480px); margin: 0 auto;}
.cp_park .park_txt {padding: 0 min(4.66vw,35px) min(4vw,30px); font-size: min(3.2vw,24px); line-height: 1.5; }

/* ========================================
+Media Querie
======================================== */
/* TB・PC  */
		@media screen and (min-width:641px) {
/* CP --------------------------------------- */
.pr_cp .cp_main .present .present_item_txt .spec {font-size: min(2.66vw,20px);}
/* Method --------------------------------------- */
.x_cream_method .mthd_ttl {font-size: min(8vw,60px); }
		}

/* TB only */
		@media screen and (min-width:641px) and (max-width:900px) {
#obg_cam {margin-top: 110px;}
		}

/* ??? */
		@media screen and (min-width:901px) and (max-width:1024px) {
#obg_cam {margin-top: 120px;}
		}

/* PC only */
	@media print, screen and (min-width:1025px) {
/* basic --------------------------------------- */
#obg_cam {margin-top: 30px;}
		}