@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');
/* 
ObagiC Serum reserve campaign / 2026.1.9
basic --------------------------------------- */
.block-contents-1 {margin: 0 !important; width: auto !important;}
.block-contents-1 .block-h1 {display: none;}
#btn-buy {display: none;}
#obg_rsrv {font-family: 'Noto Sans JP', sans-serif; color: #000; font-weight: 400; max-width: 750px; margin: 0 auto;}
#obg_rsrv h1, #obg_rsrv h2, #obg_rsrv h3, #obg_rsrv h4, #obg_rsrv h5 {box-shadow: none; margin: 0; letter-spacing: 0; background: none; font-size: auto;}
#obg_rsrv span {border: 0; padding: 0; font-size: auto;}
#obg_rsrv img {width: 100%; height: auto;}
#obg_rsrv em {font-style: normal;}
#obg_rsrv a:hover {text-decoration: none;}
#obg_rsrv .font_serif {font-family: 'リュウミン R-KL', 'Ryumin Regular KL', serif; font-weight: 600;}/* for Android */
#obg_rsrv 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 --------------------------------------- */
#rsv_kv {padding: 0; border: 0;}
/* CP --------------------------------------- */
.rsv_cp {background-color: #ffd647; padding: 0 min(4vw,30px) min(10.66vw,80px);}
.rsv_cp .cp_hdr {padding: min(10.66vw,80px) 0 min(35vw,260px); text-align: center;}
.rsv_cp .cp_hdr .txt01,
.rsv_cp .cp_hdr .txt02 {text-align: center; font-size: min(8.53vw,64px); line-height: 1.16;}
.rsv_cp .cp_main {position: relative; background-color: #fff; padding: min(10.66vw,80px) 0 min(5.33vw,40px) 0;}
.rsv_cp .cp_main .serum {position: absolute; top: min(-30vw,-120px);}
.rsv_cp .cp_main .term {padding: 0 min(2.66vw,20px); margin: 0 0 min(4vw,30px);}
.rsv_cp .cp_main .term .term_box {width: 100%; border: 1px solid #000;}
.rsv_cp .cp_main .term .term_box .term_ttl {width: 22%; background-color: #000; font-size: min(3.2vw,24px); line-height: 1.3; font-weight: 700; text-align: center; color: #fff; padding: min(1.33vw,10px) 0;}
.rsv_cp .cp_main .term .term_box .term_date {width: 78%; font-family: 'Jost', 'Noto Sans JP', sans-serif; font-size: min(4.8vw,36px); line-height: 1; text-align: center; font-weight: bold;}
.rsv_cp .cp_main .term .term_box .term_date .hyph {margin: 0 5px; vertical-align: top; line-height: 1.3;}
.rsv_cp .cp_main .term .term_box .term_date em {font-size: 155%; letter-spacing: 2px;}
.rsv_cp .cp_main .term .term_box .term_date .youbi {display: inline-block; font-size: 77%;}
.rsv_cp .cp_main .term_item_hdr {padding: 0 0 min(5.33vw,40px);}
.rsv_cp .cp_main .term_item_hdr .txt-01 {display: block; font-family: 'Noto Sans JP', sans-serif; font-size: min(3.2vw,24px); line-height: 1.3; text-align: center; margin: 0 0 5px;}
.rsv_cp .cp_main .term_item_hdr strong {display: block; font-size: min(5.33vw,40px); line-height: 1.3; text-align: center;}
.rsv_cp .cp_main .cp_items {display: -webkit-box; display: flex; flex-wrap: nowrap; background-color: #ffd647; padding: 0 0 2px;}
.rsv_cp .cp_main .cp_item:nth-of-type(1) {margin-right: min(1.86vw,14px);}
.rsv_cp .cp_main .cp_item .cp_item_ttl {background-color: #000; padding: min(0.665vw,5px) 0 min(1.86vw,14px); text-align: center;}
.rsv_cp .cp_main .cp_item .cp_item_ttl .txt {font-family: 'Noto Sans JP', sans-serif; color: #fff; font-size: min(2.93vw,22px); line-height: 1; font-weight: 500;}
.rsv_cp .cp_main .cp_item .item_name {background-color: #fff; font-size: min(4.8vw,36px); line-height: 1.3; padding: 0 0 0  min(1.86vw,14px);}
.rsv_cp .cp_main .item .item_name .item_name_sub {font-size: min(3.2vw,24px); line-height: 1.6;}

.rsv_cp .cp_btns {padding: 0 min(5.33vw,40px);}
.rsv_cp .cp_btn {padding: min(8vw,60px) 0 min(5.33vw,40px);}
.rsv_cp .cp_btn a {display: block; background-color: #ff7c00; color: #fff; border-radius: 70px; padding: min(6.9vw,52px) 0; margin: 0 auto; box-shadow: 0px min(1.1vw,8px) min(3.2vw,24px) 0px rgba(109,109,109,0.3); font-size: min(4.8vw,36px); line-height: 1.2; text-align: center; font-weight: 700;}
.rsv_cp .cp_btn .txt {display: inline-block; background: url(ico_store.png) left top no-repeat; background-size: auto 100%; padding: 0  1em 0 2em !important;}
.rsv_cp .cp_btn_online {padding: 0 0 min(5.33vw,40px);}
.rsv_cp .cp_btn_online a {display: block; background-color: #f7efc6; color: #000; border-radius: 70px; padding: min(6.9vw,52px) 0; margin: 0 auto; box-shadow: 0px min(1.1vw,8px) min(3.2vw,24px) 0px rgba(109,109,109,0.3); font-size: min(4.8vw,36px); line-height: 1.2; text-align: center; font-weight: 700;}
.rsv_cp .cp_btn_online .txt {display: inline-block; background: url(ico_pc.png) left top no-repeat; background-size: auto 100%; padding-left: 2em !important;}
.rsv_cp .cp_ant {padding: 0 min(5.33vw,40px);}
.rsv_cp .cp_ant p {font-size: min(2.93vw,22px); line-height: 1.5; margin-left: 1em; text-indent: -1em;}

/* Concept --------------------------------------- */
.cserum_cncpt .cncpt_main {background: url(bg_concept_txt.jpg) center top no-repeat; background-size: cover; padding: min(7.33vw,55px) min(4vw,30px) min(14.66vw,110px);}
.cserum_cncpt .cncpt_txt {text-align: center;font-size: min(4.26vw,32px); line-height: 1.5; padding: 0 0 min(10.66vw,80px);}
.cserum_cncpt .cncpt_item_list {border: 1px solid #000; padding: min(2.66vw,20px); margin: 0 0 min(5.33vw,40px);}
.cserum_cncpt .cncpt_item_list ul li {font-size: min(3.7vw,28px); line-height: 1.5;}
.cserum_cncpt .cncpt_ant {font-size: min(2.9vw,22px); line-height: 1.5;}

/* Recommend --------------------------------------- */
.cserum_rcm {background: url(bg_rcm.jpg) left top no-repeat; background-size: cover; padding: min(14.66vw,110px) min(4vw,30px) min(12vw,90px);}
.cserum_rcm .rcm_ttl {font-size: min(8.5vw,64px); line-height: 1; text-align: center; padding: 0 0 min(8vw,60px);}
.cserum_rcm .rcm_list ul {border-top: 1px solid #f1da6b;}
.cserum_rcm .rcm_list ul li {padding: min(3.73vw,28px) min(5.33vw,40px); border-bottom: 1px solid #f1da6b; font-size: min(4.26vw,32px); line-height: 1.3;}
.cserum_rcm .rcm_list ul li .list_txt {display: block; background: url(ico_check.png) left top 3px no-repeat; background-size: auto 1em; padding-left: min(8.93vw,67px) !important;}
.cserum_rcm .rcm_ant {font-size: min(2.9vw,22px); line-height: 1.5; margin-top: min(5.33vw,40px);}

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

/* Point --------------------------------------- */
.cserum_point {background: url(bg_point.jpg) center top no-repeat; background-size: cover; padding: min(21.33vw,160px) min(4vw,30px) min(16vw,120px);}
.cserum_point .point_box {position: relative; background-color: #fff; padding: min(13.33vw,100px) min(5.33vw,40px) min(6.66vw,50px); margin: 0 0 min(16vw,120px);}
.cserum_point .point_box .point_ttl {position: absolute; top: min(-5.33vw,-20px); width: calc(100% - min(8vw,60px)); text-align: center;}
.cserum_point .point_box .point_ttl img {width: min(32.53vw,244px) !important;}

.cserum_point .point_box .point_hdr {padding: 0;}
.cserum_point .point_box .point_hdr .txt {display: block; font-size: min(4.26vw,32px); line-height: 1.5; text-align: center; margin: 0 0 min(6.4vw,48px);}
.cserum_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(8vw,60px);}
.cserum_point .point_box .point_hdr .mark {font-size: 85% !important; vertical-align: top; position: relative; top: -0.2em;}

.cserum_point .point_box .point_dtl {font-size: min(4.26vw,32px); line-height: 1.5; margin: 0 0 min(8vw,60px);}
.cserum_point .point_box .point_pic {text-align: center; margin: 0 0 min(8vw,60px);}
.cserum_point .point_box .point_topic {border: 1px solid #000; padding: min(8vw,60px) min(5.33vw,40px); margin: 0 0 min(8vw,60px);}
.cserum_point .point_box .point_topic .topic_pic1 {width: min(14vw,105px); margin: 0 auto min(8vw,60px);}
.cserum_point .point_box .point_topic .topic_txt {font-size: min(4.26vw,32px); line-height: 1.5; margin: 0 0 min(13.33vw,100px);}
.cserum_point .point02 .point_topic .topic_txt {margin: 0 0 min(8vw,60px);}
.cserum_point .point_box .point_topic .topic_pic2 {text-align: center;}
.cserum_point .point_box .point_ant {font-size: min(2.9vw,22px); line-height: 1.5;}

.cserum_point .point01 .point_pic img,
.cserum_point .point02 .point_pic img,
.cserum_point .point02 .point_topic .topic_pic2 img {max-width: min(60vw,450px);}
.cserum_point .point03 {margin-bottom: 0;}

/* C Serum Series --------------------------------------- */
.cserum_series {background: url(bg_series.jpg) left top no-repeat; background-size: 100% 100%; padding: min(31.33vw,235px) min(4vw,30px) min(16vw,120px);}
.cserum_series .series_hdr {text-align: center; width: min(56vw,420px); margin: 0 auto min(5.33vw,40px);}
.cserum_series .series_ttl {text-align: center; width: min(68.8vw,516px); margin: 0 auto min(11.33vw,85px);}
.cserum_series .series_txt {font-size: min(4.26vw,32px); line-height: 1.5; text-align: center; margin: 0 0 min(7.73vw,58px);}
.cserum_series .series_pic {text-align: center; margin: 0 0 min(4vw,30px);}
.cserum_series .series_pic_ant {font-size: min(2.9vw,22px); line-height: 1.5; margin: 0 0 min(4vw,30px);}
.cserum_series .series_ant {font-size: min(2.9vw,22px); line-height: 1.5;}

/* rsv_more --------------------------------------- */
.rsv_more {padding: min(16vw,120px) min(4vw,30px);}
.rsv_more .more_ttl {font-size: min(8.5vw,64px); line-height: 1; padding: 0 0 min(8vw,60px);}
.rsv_more .more_cpy {font-size: min(4.8vw,36px); line-height: 1.5; padding: 0 0 min(5.33vw,40px); text-align: center; border-bottom: 1px solid #000;}
.rsv_more .more_item {display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; padding: min(5.33vw,40px); border-bottom: 1px solid #000;}
.rsv_more .more_item .item_pic {width: min(24vw,180px);}
.rsv_more .more_item .item_dtl {padding: 0 0 0 min(4vw,30px);}
.rsv_more .more_item .item_dtl .item_name a {font-family: 'Noto Sans JP', sans-serif; color: #bf912e; font-size: min(3.46vw,26px); line-height: 1.5; border-bottom: 1px solid #bf912e;}
.rsv_more .more_item .item_dtl .item_spec {font-size: min(3.46vw,26px); line-height: 1.26; margin: 0 0 min(3.46vw,26px);}
.rsv_more .more_item .item_dtl .item_price {font-size: min(4.8vw,36px); line-height: 1;}
.rsv_more .more_item_ant {font-size: min(2.9vw,22px); line-height: 1.5; margin: min(5.33vw,40px) 0 0;}

/* rsv_25th --------------------------------------- */
.rsv_25th {padding: min(16vw,120px) 0; text-align: center;}
.rsv_25th .logo {width: min(51.2vw,384px); margin: 0 auto min(10.66vw,80px);}
.rsv_25th .ttl {font-size: min(8.266vw,62px); line-height: 1; margin: 0 0 min(8vw,60px);}
.rsv_25th .txt p {font-size: min(4.26vw,32px); line-height: 1.5; margin: 0 0 min(8vw,60px);}
.rsv_25th .pic {width: min(77.33vw,580px); margin: 0 auto min(10.66vw,80px);}
.rsv_25th .cserum_25th {width: min(22.66vw,170px); margin: 0 auto min(5.33vw,40px);}
.rsv_25th .ant {font-size: min(2.9vw,22px); line-height: 1.5;}

/* ========================================
+Media Querie
======================================== */
/* TB・PC  */
		@media screen and (min-width:750px) {
/* CP --------------------------------------- */
.rsv_cp .cp_main .serum {top: -240px;}
/* Movie --------------------------------------- */
.cserum_mov .mov_frame {text-align: center;}
.cserum_mov .mov_frame iframe {max-width: 400px;}
/* Point --------------------------------------- */
.cserum_point .point_box .point_ttl {top: -40px;}
/* rsv_more --------------------------------------- */
.rsv_more .more_item .item_dtl .item_name a {font-size: min(2vw,24px);}
		}

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

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

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