@charset "UTF-8";
/* -----------------------------------------------------
メインビジュアル (updated on 2025.07.10)
----------------------------------------------------- */
#series_kv .series_dscp .ant {margin: 30px 30px 0; text-align: left;}
/*  -----------------------------------------------------
BestCosmeBanner (updated on 2023.02.06)
----------------------------------------------------- */
.bnr_top_bc {max-width: 1200px; margin: 30px auto;}
.bnr_top_bc img {width: 100%; height: auto;}
.bnr_top_bc .ant {font-size: 0.8em; text-align: center; color: #999999;}
/*  -----------------------------------------------------
series_feature (updated on 2023.02.06)
----------------------------------------------------- */
.series_feature {padding: 0 15px; overflow-x: hidden;}
/*  -----------------------------------------------------
Intro Type (updated on 2026.02.03)
----------------------------------------------------- */
.intro_type {padding: 50px 0;}
.intro_type_ttl {font-size: 1.2em;}
.bg_intro_type ul {display: -webkit-box; display: flex; flex-wrap: nowrap;}
.bg_intro_type ul.type {-webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff url(bg_intro_type.svg) left no-repeat; background-size: 100% 100%; padding: 5px 0; font-size: 0.9em;}
.bg_intro_type ul li {width: 25%; font-size: 0.85em; text-align: center;}
.bg_intro_type ul li .pic img {width: auto;}
.bg_intro_type ul li.c5 {padding: 15px 0 0;}
.bg_intro_type ul li.c5 .pic img {height: 90px;}
.bg_intro_type ul li.c10 .pic img {height: 106px;}
.bg_intro_type ul li.c20 .pic img {height: 105px;}
.bg_intro_type ul li.c25 .pic img {height: 105px;}
.bg_intro_type ul li .name {padding: 16px 0 10px; font-size: 1em; line-height: 1.2;}
.bg_intro_type ul li .price {padding: 0 0 16px; font-size: 0.9em; line-height: 1.2;}
.bg_intro_type ul li .price .tax {font-size: 0.8em;}
/*.bg_intro_type ul li.c25 .name {padding: 8px 0;}*/
.intro_guide {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; font-size: 0.9em;}
.intro_guide:after {display: block; content: " "; width: 100%; height: 10px; border-radius: 5px;  position: absolute; top: 0; left: 0;
background: rgba(253,246,209,1);
background: -moz-linear-gradient(left, rgba(253,246,209,1) 0%, rgba(249,225,105,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(253,246,209,1)), color-stop(100%, rgba(249,225,105,1)));
background: -webkit-linear-gradient(left, rgba(253,246,209,1) 0%, rgba(249,225,105,1) 100%);
background: -o-linear-gradient(left, rgba(253,246,209,1) 0%, rgba(249,225,105,1) 100%);
background: -ms-linear-gradient(left, rgba(253,246,209,1) 0%, rgba(249,225,105,1) 100%);
background: linear-gradient(to right, rgba(253,246,209,1) 0%, rgba(249,225,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf6d1', endColorstr='#f9e169', GradientType=1 );}
.intro_guide p {width: 100%; margin: 16px 0 0;}
.intro_guide .heigh {text-align: right;}
.intro_ant {font-size: 0.7em; line-height: 1.3; margin: 30px 0 0; text-align: left;}
/* tokucho_ttl (updated on 2026.02.03) ----------------------------------------------------- */
.tokucho_ttl {position: relative; text-align: center; padding: 0 0 10px; margin: 0 auto min(6.66vw,50px);}
.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 .txt {font-size: 1.3em; line-height: 3.3em; font-style: oblique; color: #C3984D; padding: 0 10px; background: #ffffff; vertical-align: middle;}
.tokucho_ttl .txt {font-size: 1.35em; line-height: 1.4; letter-spacing: 0; margin: 25px 0;}

/* item_feature  (updated on 2026.02.03) --------------------------------------- */
.item_feature {font-weight: 400; max-width: 750px; margin: 0 auto;}
.item_feature h1, .item_feature h2, .item_feature h3, .item_feature h4, .item_feature h5 {box-shadow: none; margin: 0; letter-spacing: 0; background: none; font-size: auto;}
.item_feature span {border: 0; padding: 0; font-size: auto;}
.item_feature img {width: 100%; height: auto;}
.item_feature em {font-style: normal;}
.item_feature a:hover {text-decoration: none;}
.item_feature .font_serif {font-family: 'リュウミン R-KL', 'Ryumin Regular KL', serif; font-weight: 600;}/* for Android */
.item_feature sup {font-size: 0.6em; line-height: 0;}

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

/* Point (updated on 2026.02.03) --------------------------------------- */
.cserum_point {padding: 0 0 min(4vw,30px);}
.cserum_point .point_box {position: relative; background-color: #fff; padding: 0 min(5.33vw,40px) min(6.66vw,50px); margin: 0 0 min(4vw,30px);}

.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(6.4vw,48px); 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(4vw,30px); 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(4vw,30px); 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 (updated on 2026.02.03) --------------------------------------- */
.cserum_series {padding: 0 0 min(16vw,120px);}
.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;}
/*  -----------------------------------------------------
 How To Use (updated on 2026.02.04)
----------------------------------------------------- */
.c_howto {padding: 0 0 min(8vw,60px); font-size: min(4vw,30px); line-height: 1.5;}
.c_howto .txt01 {margin: 0 0 30px;text-align: center;}
.c_howto .ht_step {padding: 0 0 20px;}
.c_howto .ht_step li {display:-webkit-box; display:flex; flex-wrap: nowrap; text-align: left; padding: 0 0 20px;}
.c_howto .ht_step li .num {font-family: sans-serif; color: #C3984D; padding: 0 10px 0 0; font-weight: 600;}
.c_howto .ht_step li .txt p {margin: 0 0 10px;}
.c_howto .ht_step li .txt .txt_ant {display: block; font-size: 0.8em;}
.c_howto .ht_point {border: 1px solid #ccc; padding: 0.8em;}
.c_howto .ht_point .ht_p_ttl {font-family: sans-serif; color: #C3984D; padding: 0 10px 0 0; font-weight: 600;}
/*  -----------------------------------------------------
 History (updated on 2026.02.04)
----------------------------------------------------- */
#c_history {padding: 0 0 min(8vw,60px); font-size: min(4vw,30px); line-height: 1.5;}
#c_history .his_main_ttl {text-align: center; margin: 0 0 20px;}
#c_history .his_main_hl {color: #C3984D; text-align: center; font-size: 1.2em; font-weight: normal; margin: 0 0 30px; letter-spacing: -1.5px;}
#c_history .his_main_lst li {display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
#c_history .his_data01 {padding: 0 5px 0 0;}
#c_history .his_data02 {padding: 0 5px 0 0;}
#c_history .his_data02 p {font-size: 0.85em; line-height: 1; border-radius: 30px; white-space: nowrap;}
#c_history .his_data02 .ico01 {background-color: #C3984D; color: #fff; padding: 4px 22px;}
#c_history .his_data02 .ico02 {background-color: #F9E269; padding: 4px 8px;}
#c_history .his_data02 .ico03 {font-size: 1.1em; background-color: #F9E269; padding: 4px 10px;}
#c_history .his_data03 {font-size: 0.85em; padding: 0 0 10px;}
#c_history .his_catch {border-top: 1px solid #000; border-bottom: 1px solid #000; margin: 10px 0 20px; padding: 18px 0;}
#c_history .his_catch p {text-align: center; font-size: 1em; white-space: nowrap; letter-spacing: -1px;}
#c_history .his_item img {width: 100%; height: auto;}
#c_history .his_ant {font-size: min(2.9vw,22px); line-height: 1.3;}
/*  -----------------------------------------------------
 Developer (updated on 2023.02.07)
----------------------------------------------------- */
#c_developer {padding: 0 0 min(8vw,60px); font-size: min(4vw,30px); line-height: 1.5;}
#c_developer .dev_ttl {font-size: 1em; line-height: 1.4; color: #C3984D; padding: 0; margin: 0 0 20px;}
#c_developer .dev_content .pic {float: left; text-align: center; padding: 0 20px 15px 0; width: 40%;}
#c_developer .dev_content .pic img {width: 100%; height: auto;}
#c_developer .dev_content .pic p {margin: 10px 0 0; font-size: 0.8em; line-height: 1.4;}
#c_developer .dev_content .comment p {font-size: 0.9em; line-height: 1.6; letter-spacing: -0.2px;}

/*  -----------------------------------------------------
 Bottom Annotation (updated on 2025.07.10)
----------------------------------------------------- */
.series_c-serum_ant {padding: 25px 15px; font-size: 0.7em; line-height: 1.5; text-align: left;}
/*  -----------------------------------------------------
 商品ラインナップ (updated on 2026.02.05)
----------------------------------------------------- */
#series_item_list .c_category {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#series_item_list .c_category .c_item {width: calc(50% - 30px); margin: 0 0 40px;}
#series_item_list .c_category .c_item:nth-of-type(2n+1) {padding-left: 20px; padding-right: 10px;}
#series_item_list .c_category .c_item:nth-of-type(2n) {padding-left: 10px; padding-right: 20px;}
#series_item_list .c_category .c_item h2 {border-radius: 5px; font-size: 0.7em; padding: 10px 5px;}
#series_item_list .c_category #item-c25 h2 {background-color: #FAE787;}
#series_item_list .c_category #item-c20 h2 {background-color: #FAE787;}
#series_item_list .c_category #item-c10 h2 {background-color: #FBEDA5;}
#series_item_list .c_category #item-c10L h2 {background-color: #FBEDA5;}
#series_item_list .c_category #item-c5 h2 {background-color: #FDF6D1;}
#series_item_list .c_category .c_item .block-inner {position: relative; padding: 40px 0 0;}
#series_item_list .c_category .description {position: absolute !important; top: 0 !important; padding: 0 !important;}
#series_item_list .c_category .description span {border: none !important; border-radius: 0 !important;}
#series_item_list .c_category .description .ttl_level {display: block !important; width: auto; padding: 0; margin: 0; text-align: center;}
#series_item_list .c_category .description .ico_level {display: block !important; width: auto; padding: 0; margin-top: -10px !important; text-align: center; letter-spacing: 2px;}

#series_item_list .c_category .img-name-item {margin-top: -40px !important;}


/* ====================================================== Media Querie
〜320px
SP small
======================================== */
		@media screen and (max-width: 320px) {
/*  -----------------------------------------------------
Intro Type (updated on 2023.02.07)
----------------------------------------------------- */
.bg_intro_type ul li.c5 {padding: 15px 0 0;}
.bg_intro_type ul li.c5 .pic img {height: 75px;}
.bg_intro_type ul li.c10 .pic img {height: 91px;}
.bg_intro_type ul li.c20 .pic img {height: 90px;}
.bg_intro_type ul li.c25 .pic img {height: 90px;}
		}
/* ====================================================== Media Querie
〜640px
SP only
======================================== */
		@media screen and (max-width: 640px) {
		#series_kv .series_dscp {background-color: #f5f5f5; position: static; margin-top: min(-40vw,-150px); padding-bottom: 20px;}
/*  -----------------------------------------------------
 商品ラインナップ (updated on 2026.02.05)
#series_item_list .c_category .image {position: relative;}
#series_item_list .c_category .image .ico {position: absolute !important; top: 30px !important; left: 0 !important;}
----------------------------------------------------- */
#series_item_list .c_category .image .ico {top: -30px !important;left: 0 !important;}
#series_item_list .c_category .block-inner {margin-top: 30px;}
		}
/* ====================================================== Media Querie
641px〜
TB , PC 
======================================== */
		@media screen and (min-width: 641px) {
.series_feature {width: 600px; margin: 0 auto;}
/* -----------------------------------------------------
メインビジュアル (updated on 2025.07.10)
----------------------------------------------------- */
#series_kv .series_dscp .ant {margin: min(1.66vw,20px) 0 0;}
/*  -----------------------------------------------------
Intro Type (updated on 2023.02.07)
----------------------------------------------------- */
.intro_type_ttl {margin: 0 0 20px;}
.bg_intro_type ul.type {margin: 0 0 20px;}
.intro_ant {text-align: center;}
/*  -----------------------------------------------------
 tokucho_ttl (updated on 2023.02.07)
----------------------------------------------------- */
.tokucho_ttl .txt {margin: 25px 0;}
/* Movie --------------------------------------- */
.cserum_mov .mov_frame {text-align: center;}
.cserum_mov .mov_frame iframe {max-width: 400px;}
/* Point (updated on 2026.02.03) --------------------------------------- */
.cserum_point .point_box .point_ttl {top: -40px;}
.cserum_point .point_box .point_hdr .txt {font-size: min(1.5vw,18px); margin: 0 0 min(4vw,30px);}
.cserum_point .point_box .point_hdr strong {font-size: min(2vw,24px); line-height: 1.5;}

.cserum_point .point_box .point_dtl {font-size: min(1.5vw,18px);}
.cserum_point .point_box .point_topic .topic_pic1 {width: min(8vw,96px);}
.cserum_point .point_box .point_topic .topic_txt {font-size: min(1.5vw,18px);}
.cserum_point .point_box .point_ant {font-size: min(1vw,12px);}

.cserum_point .point01 .point_pic img,
.cserum_point .point02 .point_pic img,
.cserum_point .point02 .point_topic .topic_pic2 img {max-width: min(25vw,300px);}
.cserum_point .point03 .point_pic img {max-width: min(30vw,360px);}
/* C Serum Series (updated on 2026.02.03) --------------------------------------- */
.cserum_series .series_txt {font-size: min(1.66vw,20px);}
.cserum_series .series_pic img {width: min(50vw,600px);}
.cserum_series .series_pic_ant {font-size: min(1vw,12px);}
.cserum_series .series_ant {font-size: min(1vw,12px);}

/*  -----------------------------------------------------
 How To Use (updated on 2026.02.04)
----------------------------------------------------- */
.c_howto {max-width: 600px; font-size: min(1.66vw,20px); margin: 0 auto;}
/*  -----------------------------------------------------
 History (updated on 2026.02.04)
----------------------------------------------------- */
#c_history {max-width: 600px; font-size: min(1.66vw,20px); margin: 0 auto;}
#c_history .his_ant {font-size: min(1vw,12px); line-height: 1.3;}
#c_history .his_main_ttl {font-size: min(1.5vw,18px);}
#c_history .his_main_hl {font-size: min(2vw,24px);}
#c_history .his_data01 {font-size: min(1.5vw,18px);}
#c_history .his_data02 p {font-size: min(1.33vw,16px); width: 100px; text-align: center;}
#c_history .his_data02 .ico01 {padding: 4px 0; font-weight: 600;}
#c_history .his_data02 .ico02 {padding: 4px 0;}
#c_history .his_data02 .ico03 {padding: 4px 0;}
#c_history .his_data03 {font-size: min(1.5vw,18px);}
#c_history .his_catch p {font-size: min(1.5vw,18px);}
/*  -----------------------------------------------------
 Developer (updated on 2023.02.07)
----------------------------------------------------- */
#c_developer {max-width: 680px; font-size: min(1.66vw,20px); margin: 0 auto;}
#c_developer .dev_ttl {white-space: nowrap; font-size: min(2vw,24px);}
#c_developer .dev_content .pic {width: min(13.33vw,160px);}
#c_developer .dev_content .pic p {font-size: min(1vw,12px)}
#c_developer .dev_content .comment p {font-size: min(1.5vw,18px);}
/*  -----------------------------------------------------
 Bottom Annotation (updated on 2025.07.10)
----------------------------------------------------- */
.series_c-serum_ant {text-align: center;}
/*  -----------------------------------------------------
 商品ラインナップ (updated on 2023.02.07)
----------------------------------------------------- */
#series_item_list .c_category .c_item h2 {font-size: 0.95em;}
#series_item_list .c_category .description .ttl_level {border: 1px solid #f00;font-size: 1em !important;}
		}
/* ====================================================== Media Querie
1025px〜
PCのみ
======================================== */
		@media screen and (min-width: 1025px) {
.series_feature {width: 960px; margin: 0 auto;}
/* -----------------------------------------------------
メインビジュアル (updated on 2025.07.10)
----------------------------------------------------- */
#series_kv .series_dscp .ant {margin: min(3.33vw,40px) 0 0;}
/*  -----------------------------------------------------
Intro Type (updated on 2023.02.07)
----------------------------------------------------- */
.intro_type {margin: 60px auto;}
.intro_type .intro_type_ttl {font-size: 1.6em;}
.bg_intro_type,
.intro_guide {width: 660px; margin: 0 auto;}
.bg_intro_type ul.type {padding: 5px 0;}
/*  -----------------------------------------------------
 tokucho_ttl (updated on 2023.02.06)
----------------------------------------------------- */
.tokucho_ttl .txt {font-size: 1.6em;}
/*  -----------------------------------------------------
 History (updated on 2023.02.07)
----------------------------------------------------- */

/*  -----------------------------------------------------
 Bottom Annotation (updated on 2023.02.07)
----------------------------------------------------- */
.bottom-ant {width: 960px; margin: 0 auto;}
/*  -----------------------------------------------------
 商品ラインナップ (updated on 2023.02.07)
----------------------------------------------------- */
#series_item_list .c_category .c_item h2 {font-size: 0.95em;}
#series_item_list .c_category .description .ttl_level {border: 1px solid #f00;font-size: 1em !important;}
		}