@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&family=Noto+Serif+JP:wght@600;700&display=swap');
/* font family --------------------------------------- */
.font_sans {font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
.font_serif {font-family: 'Noto Serif JP', serif; font-weight: 600;}/* for Android */
/* 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;}
.ls-10 {letter-spacing: -10px;}
.ls-11 {letter-spacing: -11px;}
.ls-12 {letter-spacing: -12px;}
/* 調整 --------------------------------------- */
h2 {letter-spacing: 0; padding: 0; margin: 0;}
h2 span {font-size: 1em;}
h3 {background: none;}
h3 span {border: 0;}
/* -----------------------------------------------------
メインビジュアル (updated on 2023.02.01)
----------------------------------------------------- */
#series_kv {background: #ffffff; position: relative; padding-top: 30px;}
#series_kv .kv_image img {width: 100%; height: auto;}
#series_kv .series_name {position: absolute; top: 0; left: 0; width: 100%; text-align: center;}
#series_kv .series_dscp {position: absolute; bottom: 25px; left: 0; width: 100%; text-align: center;}
#series_kv .series_name .logo {padding: 40px 0 12px;}
#series_kv .series_name .logo img {width: 112px; height: auto;}
#series_kv .series_name .name {font-size: 1.2em; line-height: 1.3;}
#series_kv .series_dscp .txt {font-size: 1em; line-height: 1.4; padding: 0 0 7px;}
#series_kv .series_dscp .ant {font-size: 0.7em; line-height: 1.3;}
/* BestCosmeBanner ----------------------------------------------------- */
.bnr_top_bc {width: 90%; max-width: 1200px; margin: 40px auto 0;}
.bnr_top_bc img {width: 100%; height: auto; border-radius: 4px;}
.bnr_top_bc .ant {font-size: 0.7em; text-align: center; color: #999999; margin: 15px 0 0;}
/* Media Query --------------------------------------- */
		@media screen and (max-width: 320px) {
#series_kv .series_name .logo img {width: 100px;}
#series_kv .series_name .name {font-size: 1em;}
#series_kv .series_dscp .txt {font-size: 0.8em;}
		}
		@media screen and (min-width: 641px) {
#series_kv {margin: 30px 0 0;}
#series_kv .series_name {top: 15%; left: 8%; width: 84%; text-align: left;}
#series_kv .series_name .logo img {width: 200px;}
#series_kv .series_name .name {font-size: 1.1em;}
#series_kv .series_dscp {top: 65%; left: 8%; width: 84%; text-align: left;}
#series_kv .series_dscp .txt {font-size: 0.9em;}
#series_kv .series_dscp .ant {font-size: 0.6em;}
		}
		@media print, screen and (min-width:1025px) {
#series_kv .series_name {top: 20%; left: 10%; width: 80%;}
#series_kv .series_name .name {font-size: 1.8em;}
#series_kv .series_dscp {top: 60%; left: 10%; width: 80%;}
#series_kv .series_dscp .txt {font-size: 1.1em;}
#series_kv .series_dscp .ant {font-size: 0.7em;}
		}
/* -----------------------------------------------------
商品ラインナップ
----------------------------------------------------- */
#series_item_list .series_item_list_ttl {font-weight: normal;}
#series_item_list .block-contents-4 .block-series,
#series_item_list .block-contents-4 .block-series .series-inner {position: relative; margin-bottom: 0; padding-bottom: 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts {width: auto; margin: 0 15px;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .image p.ico {margin: -30px 0 0;}
/* リンクエリアを覆い隠す（Xスペシャルケア）：解除（2024.08.28）
#series_item_list #series_obagix_specialcare .block-contents-4 .block-series:after {display: block; content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 200;}
 --------------------------------------- */
/* parts --------------------------------------- */
#series_item_list .block-contents-4 .series_item {display: block; position: relative; width: 50%;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts {margin: 0; padding: 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner {position: relative;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .description {position: absolute; z-index: 1; display: inline-block; width: 100%; top: 65%; left: 0; font-size: 0.7em; text-align: center; margin: 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .description span {margin: 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .img-name-item {padding: 30px 0 0; font-size: 0.9em; margin: 0;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .capacity-price {font-size: 0.9em;}
#series_item_list .block-contents-4 #item_cream .block-series .series-inner a.block-cts .block-inner .img-name-item span {letter-spacing: -2px;}
/* 「特長を見る」ボタン --------------------------------------- */
.series_item .btn_feature {margin: 0 0 20px;}
.series_item .btn_feature span {display: block; background-color: #000000; border-radius: 4px; color: #ffffff; font-size: 0.9em; width: 140px; margin: 5px auto 0; padding: 8px 0; cursor: pointer;}
/* Media Query --------------------------------------- */
		@media screen and (min-width: 641px) {
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .description {top: 0; font-size: 1em;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .img-name-item {padding: 30px 0 0; font-size: 1.2em;}
#series_item_list .block-contents-4 .block-series .series-inner a.block-cts .block-inner .capacity-price {font-size: 1em;}
#series_item_list .btn_feature {margin: 0 0 20px;}
#series_item_list .btn_feature span {width: 160px;}
		}
	@media print, screen and (min-width:1025px) {
#series_item_detail .item_howto {width: 960px;}
		}

/* -----------------------------------------------------
モーダルウィンドウ
----------------------------------------------------- */
/* モーダル全体(背景＋本体) */
.dtl_modal {display: none; position: fixed; top: 0; left:0; height: 100%; width: 100%; z-index: 1001;}
/* モーダル背景 */
.dtl_modal-bg {position: absolute; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5);}
/* モーダルクローズアイコン */
.dtl_modal-bg .ico_close {position: absolute; top: 4px; right: 4px; z-index: 1001;}
.dtl_modal-bg .ico_close .ico_circle {display: inline-block; background-color: #000; border-radius: 20px; width: 34px; height: 28px; padding: 6px 0 0; text-align: center;}
.dtl_modal-bg .ico_close img {width: 20px; height: auto; cursor: pointer;}
/* モーダル本体 */
.dtl_modal-content {position: absolute; top: 20px; left: calc(50% - 20px); transform:translateX(-50%); background: #ffffff; padding: 15px 20px 20px; margin: 0 20px;
overflow: scroll; /* はみ出た部分はスクロールさせる */
height: calc(100% - 150px);/* これが無いと「overflow:scroll」が利かない */
width: calc(100% - 80px);/* これが無いと「overflow:scroll」が利かない */} 
/* モーダル本体下の「商品詳細へ」ボタン */
.btn_go_to_itempage {position: absolute; bottom: 20px; left: 50%; margin-left: -100px;}
.btn_go_to_itempage a {display: block; background-color: #000000; border-radius: 4px; color: #ffffff; font-size: 1.2em; width: 200px; margin: 0 auto; padding: 12px 0; cursor: pointer; text-align: center; text-decoration: none;}
/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {position: fixed; width: 100%; height: 100%; left: 0;}
/* Media Query --------------------------------------- */
		@media screen and (min-width: 641px) {
.dtl_modal-bg .ico_close {top: 25px; right: 25px;}
.dtl_modal-bg .ico_close .ico_circle {border-radius: 40px; width: 54px; height: 44px; padding: 10px 0 0;}
.dtl_modal-bg .ico_close img {width: 34px;}
.dtl_modal-content {top: 50px; left: calc(50% - 50px); margin: 0 50px; width: calc(100% - 200px); max-width: 980px; padding: 15px 50px 40px; height: calc(100% - 210px);}
.btn_go_to_itempage {bottom: 20px;}
		}
		@media print, screen and (min-width:1025px) {
		.dtl_modal-bg .ico_close {top: 25px; left: calc(50% - 50px); margin: 0 50px; width: calc(50% - 23px); max-width: 567px; text-align: right;}
		}

/* -----------------------------------------------------
モーダルウィンドウ内 ＜共通＞
----------------------------------------------------- */
/* タイトル ----------------------------------------------------- */
.item_feature_head {display: block; border-bottom: 1px solid #cccccc; box-shadow: 0px 5px 3px -3px rgba(207, 207, 207, 0.25); text-align: left; margin: 60px 0 20px;}
.item_feature_head:first-child{margin-top: 0px;}
.item_feature_head .item_feature_ttl {display: block; font-size: 1.2em; padding: 0 0 5px;}

/* よくあるご質問 ----------------------------------------------------- */
.block-qa {padding: 1px 10px 30px;}
.block-qa div.block-cts {padding: 0; margin: 0;}
.block-qa div.block-cts .oHover {opacity: 1 !important;}
.block-qa div.block-cts a.question {display: block; padding: 0 !important; margin: 0; text-decoration: none;}
.block-qa div.block-cts a.question .ttl {width: 90% !important; padding: 10px 0 !important; font-size: 0.9em; font-weight: normal;}
.block-qa div.block-cts a.question p {display: none;}
.block-qa div.block-cts div.answer {display: none; padding-bottom: 1px;}
.block-qa div.block-cts div.answer p {font-size: 1em; line-height: 1.4; padding: 0 10px; margin: 0; font-family: serif; font-weight: normal;}
.block-qa div.block-cts a.question.close {background: #ffffff url('/-/media/obagi/common/images/sp/ico_arrow_02.png') right no-repeat; background-size: 16px auto; padding: 0;}
.block-qa div.block-cts a.question.open {background: #ffffff url('/-/media/obagi/common/images/sp/ico_arrow_03.png') right no-repeat; background-size: 16px auto; padding: 0;}
/* ご使用方法 ----------------------------------------------------- */
.item_howto {padding: 0 0 35px; margin: 0;}
.item_howto .ttl {background: none; font-size: 1.68em; line-height: 1.0; text-align: center; padding: 24px 0 17px; margin: 0 0 20px; border-bottom: 1px solid #333;}
.item_howto .pic {text-align: center;}
.item_howto .pic img {max-height: 170px; max-width: 340px; width: 100%;}
.item_howto .txt {padding: 20px 0 0; text-align: left; font-size: 14px;}
/* 全注釈 ----------------------------------------------------- */
.item_all_ant {width: 100%; max-width: 960px; margin: 0 auto; padding: 30px 0 0;}
.item_all_ant p {font-size: 0.75em; line-height: 1.6; text-align: left; font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
/* 関連記事 ----------------------------------------------------- */
.item_news {padding: 0;}
.item_news .news_ttl {background: none; font-size: 1.68em; line-height: 1.0; text-align: center; padding: 24px 0 17px; margin: 0 15px 20px; border-bottom: 1px solid #333;}
.item_news .news_list {padding: 0 22px; text-align: left;}
.item_news .news_list li {margin-bottom: 10px;}
.item_news .news_list a {display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-pack: start;  justify-content: flex-start; -webkit-box-align: center; align-items: center;}
.item_news .news_list .news_item_tmb {width: 99px; height: 99px; border: 1px solid #cbcbcb;}
.item_news .news_list .news_item_tmb img {width: 100%; height: auto;}
.item_news .news_list .news_item_ttl {width: calc(100% - 110px); font-size: 0.9em; line-height: 1.4; padding: 0 0 0 10px;}

		@media screen and (min-width: 641px) {
/* タイトル ----------------------------------------------------- */
.item_feature_head {margin: 60px 0 30px;}
.item_feature_head .item_feature_ttl {font-size: 1.4em;}
/* ご使用方法 ----------------------------------------------------- */
.item_howto {width: 90%; margin: 0 auto;}
		}
	@media print, screen and (min-width:1025px) {
/* ご使用方法 ----------------------------------------------------- */
.item_howto {width: 960px;}
		}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Media Querie

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 
SP ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
		@media screen and (max-width: 640px) {
/* .item_feature ----------------------------------------------------- */
.item_feature {padding: 0 0 40px;}
/* 使い方Youtube ----------------------------------------------------- */
.item_use .use_movie iframe {width: 100%; height: 220px;}
		}

/* 
SP small ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
		@media screen and (max-width: 320px) {
		}

/* 
TB・PC ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
		@media screen and (min-width:641px) {
/* .item_feature ----------------------------------------------------- */
.item_feature {padding: 0 0 50px;}
/* 使い方Youtube ----------------------------------------------------- */
.item_use {padding: 40px 0;}
.item_use {width: 560px; margin: 0 auto;}
.item_use iframe {width: 560px; height: 315px; margin: 0 auto;}
/* 口コミ ----------------------------------------------------- */
.item_voice .voice_list iframe {width: 100%; height: 400px;}
		}


/* 
TB only ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
		@media screen and (min-width:641px) and (max-width:1024px) {
.tb_none {display: none;}
		}

/* 
PC ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	@media print, screen and (min-width:1025px) {
/* basic --------------------------------------- */
.pc_none {display: none;}
		}