@charset "UTF-8";
.only-tb,
.pc_none {
	display: block;
}
.only-sp,
.other-sp,
.only-pc,
.tb_none {
	display: none;
}

/* ======================================
ヘッダー (updated on 24.09.30)
====================================== */
#language_link {width: 86%;}
#language_link .lang_txt {font-size: min(1.3vw,13px);}
#hdr-nav > li {padding: 8px; font-size: min(1.6vw,16px);}
#hdr-nav .products_navi .btn_close {padding: 0 25px; margin-top: -10px;}
#hdr-nav .products_navi .btn_close .mark {font-size: 40px;}
/* ======================================
フッター (updated on 21.01.13)
====================================== */
#block-footer .block-link .block-inner {width: 600px;}
#block-footer .ftr_logo {top: 120px; left: 0; padding: 0;}
#block-footer .ftr_logo img {width: 100px;}
#block-footer .brand-link {margin: 0 0 30px 40px;}
#block-footer .brand-link p {width: 22%; margin: 0; font-size: 0.9em;}
#block-footer .brand-link p img {width: 120px;}
#block-footer .brand-link p img.tb_none {display: none;}
#block-footer .brand-link p .ttl {margin: -25px 0 20px;}
#block-footer .txtlink-copy .inner ul.ftr_lst01 {max-width: 500px; margin: 0 auto;}
#block-footer .txtlink-copy .inner ul li:nth-of-type(4) {margin-right: 0; border-right: 0;}
/* ======================================
メイン (updated on 23.07.12)
====================================== */
#obg-main {margin-top: 116px;}

/*
* 共通要素
*
*****************************************/
.rspnsvimg {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */ }

/* パンくず */
div#list {display: none;}

/* 4カラム */
div.block-contents-1 {
  width: 700px;
  margin: 40px auto 70px; }
  div.block-contents-1 div.block-colum {
    display: block;
    zoom: 1; }
    div.block-contents-1 div.block-colum:after {
      content: ".";
      display: block;
      height: 0.01px;
      clear: both;
      visibility: hidden;
      font-size: 0;
      line-height: 0; }
    div.block-contents-1 div.block-colum div.block-colum-cts {
      float: none;
      width: 100%;
      margin: 0; }
    div.block-contents-1 div.block-colum div.block-subnav {
      float: none;
      width: 100%; }

div.block-contents-2 {
  width: 700px;
  margin: 50px auto 70px; }

div.block-contents-3 {
  width: 700px;
  margin: 50px auto 70px;
 }

div.block-contents-4 {
  margin: 50px auto 70px;
  width: 700px; }

div.block-contents-5 {
  width: 100%;
  margin: 50px auto 70px; }

/* 3カラム */
div.block-contents-11 {
  width: 700px;
  margin: 0 auto; }

div.block-contents-12 {
  margin: 40px auto; }

div.block-contents-13 {
  margin: 85px auto; }

/* sub-nav */
div.sub-nav {
  margin-top: 60px;
  width: 100%; }
  div.sub-nav ul li {
    width: 100%; }
    div.sub-nav ul li a {
      width: 100%; }
    div.sub-nav ul li ul li span {
      width: 100%; }
    div.sub-nav ul li ul li ul li a {
      width: 97.8%; }
    div.sub-nav ul li ul li ul li ul li a {
      width: 95.7%; }

/* block-sidebnr */
ul#block-sidebnr {
  display: block;
  zoom: 1;
  width: 660px;
  margin: 40px auto 0; }
  ul#block-sidebnr:after {
    content: ".";
    display: block;
    height: 0.01px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0; }
  ul#block-sidebnr li {
    float: left;
    margin: 0 30px 10px 0; }
    ul#block-sidebnr li:last-child {
      margin: 0; }

/* タイトル */
.wf-n {
	font-family: 'リュウミン R-KL', 'Ryumin Regular KL', '游明朝', YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", serif;
}

.wf-b {
	font-family: 'リュウミン R-KL', 'Ryumin Regular KL', '游明朝', YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", serif; 
}


  h1 span.sns-print {
    display: block;
    margin: 3px 0 0 auto;
    float: right; }
    h1 span.sns-print span.print {
      display: none; }
    h1 span.sns-print span.sns-line {
      padding: 0 0 0 5px;
      display: table-cell; }
      h1 span.sns-print span.sns-line img {
        width: 18px;
        height: 18px;
        margin-top: 4px; }


  h2 a.ico-arrow {
    margin-top: 18px;
    font-size: 13px; }
  h2.ttl-h2-1 {
    line-height: 1.3; }
    h2.ttl-h2-1 span {
      display: block; }

.fs {
  font-size: 0.75em; }

/* block */
div.block-colum-2 {
  display: block;
  zoom: 1; }
  div.block-colum-2:after {
    content: ".";
    display: block;
    height: 0.01px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0; }
  div.block-colum-2 div.colum-l {
    float: none;
    width: 100%; }
  div.block-colum-2 div.colum-r {
    float: none;
    width: 100%;
    margin-top: 30px; }

div.colum-wrp-inner {
  display: block;
  *display: inline;
  *zoom: 1;
  letter-spacing: normal;
  margin-right: 20px; }

/* ------------------------------------
add on 2017.5.25
・トップページの商品紹介画像
・商品ページ右側のシリーズアイコン画像
------------------------------------ */

div.block-txt-colum p.last {
  margin-right: 0; }

div.block-img-cap div.last {
  margin-right: 0; }
div.block-img-cap.img460 > div {
  width: auto; }
  div.block-img-cap.img460 > div img {
    width: 100%; }

div.block-block {
  display: block;
  zoom: 1;
  margin: 20px -20px 0 0;
  letter-spacing: -.4em;
  line-height: 1.8;
  color: #222222; }
  div.block-block:after {
    content: ".";
    display: block;
    height: 0.01px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0; }
  div.block-block > div {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    letter-spacing: normal;
    vertical-align: top;
    margin: 20px 20px 0 0;
    line-height: 1.5; }
    div.block-block > div.w60 {
      width: 60px; }
    div.block-block > div.w140 {
      width: 140px; }
    div.block-block > div.w220 {
      width: 220px; }
    div.block-block > div.w340 {
      width: 340px; }
    div.block-block > div.w300, div.block-block > div.w380, div.block-block > div.w460, div.block-block > div.w540, div.block-block > div.w620, div.block-block > div.w700, div.block-block > div.w780, div.block-block > div.w860 {
      display: block;
      width: auto;
      margin-right: 0; }
  div.block-block.w400, div.block-block.w430, div.block-block.w460 {
    margin-right: 0; }
    div.block-block.w400 > div, div.block-block.w430 > div, div.block-block.w460 > div {
      display: block;
      width: auto;
      margin-right: 0; }
      div.block-block.w400 > div img, div.block-block.w430 > div img, div.block-block.w460 > div img {
        width: 100%; }


/* block-search-sns updated on 2023.09.02 */
div.block-search-sns {margin-top: 70px;}
div.block-search-sns div.block-searchstore {width: calc(100% - 240px);}
div.block-searchstore {margin: 26px auto 0 auto; padding: 0; background: url("/-/media/obagi/common/images/bg_search_01.png") no-repeat right 25px top 20px; background-size: auto 80%;}
div.block-searchstore div.link-btn {margin: 0; padding: 0;}
div.block-search-sns div.sns-print {width: 220px;}
div.block-search-sns div.sns-print p.print {display: none; }
div.block-search-sns div.sns-print span.sns-mail {display: block; font-size: 14px; border: 1px solid #dbdbdb; box-shadow: 0 5px 3px -3px rgba(207, 207, 207, 0.25);}
div.block-search-sns div.sns-print span.sns-mail a {display: block; padding: 24px 0 23px; text-align: center; }
div.block-search-sns div.sns-print span.sns-mail a img {margin-top: 3px; width: 20px; height: 16px;}
div.block-search-sns div.sns-print span.sns-mail a span.txt {display: inline-block; margin: 0 0 0 12px; font-size: 13px; letter-spacing: 0.13em;}
div.block-search-sns div.sns-print span.sns-print {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; justify-content: space-between;}
div.block-search-sns div.sns-print span.sns-print span {width: 33.33%; box-sizing: border-box; text-align: center; }
        div.block-search-sns div.sns-print span.sns-print span.sns-fb a, div.block-search-sns div.sns-print span.sns-print span.sns-twi a, div.block-search-sns div.sns-print span.sns-print span.sns-gp a, div.block-search-sns div.sns-print span.sns-print span.sns-line a {display: block; padding: 17px 0; }


div.block-lsm {
  background: url("/-/media/obagi/series/images/tb/dco_line_01.png") repeat-x left top; }
  div.block-lsm div.link-btn {
    width: 700px;
    min-height: 80px;
    height: auto !important;
    height: 80px; }
    div.block-lsm div.link-btn p.blank-after-1 {
      font-size: 1em; }
      div.block-lsm div.link-btn p.blank-after-1 a {
        width: 220px;
        height: 60px;
        padding: 0 27px; }
        div.block-lsm div.link-btn p.blank-after-1 a span.cts-center {
          background: none;
          padding: 0; }
        div.block-lsm div.link-btn p.blank-after-1 a img {
          display: none; }
        div.block-lsm div.link-btn p.blank-after-1 a span.ico-arrow {
          float: none;
          background: url("/-/media/obagi/common/images/ico_blank_02.png") no-repeat left 50%;
          margin-top: 22px;
          padding: 0 0 0 15px; }
    div.block-lsm div.link-btn span.sns-print {
      margin: 18px 0 0; }

div.block-qa div.block-cts a.question h3.ttl {
  width: 575px;
  font-size: 1.0625em; }
div.block-qa div.block-cts div.answer {
  padding: 5px 30px 28px;
  font-size: 0.875em; }

/* list */
span.sns-print span.print {
  display: none; }
span.sns-print span.sns-line {
  padding: 0 0 0 5px;
  display: table-cell;
  border-right: 1px solid #dbdbdb; }
  span.sns-print span.sns-line img {
    width: 18px;
    height: 18px;
    margin-top: 4px; }
span.sns-print span.sns-mail {
  padding: 0 0 0 28px;
  display: inline;
  border-left: none;
  font-size: 13px; }
  span.sns-print span.sns-mail a {
    padding: 0; }
    span.sns-print span.sns-mail a img {
      margin-top: 3px; }
    span.sns-print span.sns-mail a span.txt {
      display: inline-block;
      margin: 3px 0 0 12px;
      border: none;
      font-size: 13px;
      letter-spacing: -0.02em; }

/* page-top */
div.link_for_sp {display: none;}



/* ======================================
商品詳細ページ ：
上半分（店舗を探す／通販購入ボタンまで）
====================================== */
#block-product-detail div.block-info {
  float: none; }
#block-product-detail div.block-utility {
  margin: 50px 0 0;
  float: none;
  width: auto;
  display: block;
  zoom: 1; }
  #block-product-detail div.block-utility:after {
    content: ".";
    display: block;
    height: 0.01px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0; }
  #block-product-detail div.block-utility div.block-buttons {
    width: 450px;
    float: right; }
    #block-product-detail div.block-utility div.block-buttons div.link-btn p.search-1 a {
      padding: 30px 0 29px 0;
      width: 100%; }
    #block-product-detail div.block-utility div.block-buttons div.print {
      display: none; }
    #block-product-detail div.block-utility div.block-buttons div.mail {
      display: block;
      margin: 24px 0 0;
      border: 1px solid #dbdbdb;
      box-shadow: 0px 5px 3px -3px rgba(207, 207, 207, 0.25);
      -webkit-box-shadow: 0px 5px 3px -3px rgba(207, 207, 207, 0.25);
      -moz-box-shadow: 0px 5px 3px -3px rgba(207, 207, 207, 0.25);
      font-size: 1.0625em;
      line-height: 1.5;
      letter-spacing: 0.01em; }
      #block-product-detail div.block-utility div.block-buttons div.mail a {
        display: block;
        padding: 27px 0;
        text-align: center; }
        #block-product-detail div.block-utility div.block-buttons div.mail a:hover {
          text-decoration: none; }
        #block-product-detail div.block-utility div.block-buttons div.mail a span {
          background: url("/-/media/obagi/common/images/ico_mail_01.png") no-repeat left 50%;
          -webkit-background-size: 20px 15px;
          -o-background-size: 20px 15px;
          background-size: 20px 15px;
          padding-left: 35px; }

/* SNS updated on 2023.09.02 */
#block-product-detail div.block-utility div.block-buttons ul.sns-print {margin: 24px 0 0; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; justify-content: center;}
#block-product-detail div.block-utility div.block-buttons ul.sns-print li {border: none;}
#block-product-detail div.block-utility div.block-buttons ul.sns-print li a {text-align: center; }



/* -------------------------------------------------- 

右側：シリーズボタン 

--------------------------------------------------*/
  #block-product-detail div.block-utility div.block-series {
    width: 220px;
    float: left; }
    #block-product-detail div.block-utility div.block-series a.block-cts {
      margin-top: 0; }
#block-product-detail div.block-utility .block-series .series-inner a.block-cts .img-name-series {
	font-size: 1em;
	letter-spacing: -1px;
}

/* -------------------------------------------------- 

下（全幅）：使用ステップ、店舗検索、SNS・印刷、関連商品、

--------------------------------------------------*/
.product .block-contents-2 {
  width: 700px; }
  .product .block-contents-2 div.img-zoom img {
    width: 686px;
    height: 436px;
    border: 7px solid #f4f4f4; }
  .product .block-contents-2 h2.ttl-h2-1 span {
    display: inline; }

/* -------------------------------------------------- 

下側：シリーズボタン 

--------------------------------------------------*/
.block-contents-2 .block-series .series-inner a.block-cts:nth-child(3n) {margin-right: 0;}
/* ======================================
シリーズTOP：TAB
====================================== */
.series_item_tab .tab_lst li {width: calc(20% - 2px);}
.series_item_tab .tab_lst li a {width: 100%;}
.series_item_tab .tab_lst li:nth-of-type(1) a,
.series_item_tab .tab_lst li:nth-last-of-type(1) a {padding: 14px 0 0; height: 66px;}
/* ======================================
シリーズTOP：メインビジュアル
====================================== */
#series_mv .image {width: 100%;}
#series_mv .text {width: 100%;}
#series_mv h2 {
	width: 65%;
	top: 35%;
	margin: 0;
	text-align: center;
	font-size: 2.0em;
	line-height: 1.4;
	letter-spacing: 0;
}
#series_mv h2 img {
	width: 132px;
	height: auto;
	margin: 0 0 14px;
}
/* ======================================
シリーズTOP：商品詳細
====================================== */
#series_item_detail .item_box .item_hdr .inr {width: 90%; margin: 0 auto;}
/* ======================================
シリーズTOP：商品詳細：注釈
====================================== */
#series_item_detail .feature_ant {width: 90%;}
/* ======================================
シリーズTOP：商品詳細：Q&A
====================================== */
#series_item_detail .item_qa {width: 90%; margin: 0 auto;}
/* ======================================
シリーズTOP：商品詳細：使い方
====================================== */
#series_item_detail .item_use {width: 90%; margin: 0 auto;}
/* ======================================
シリーズTOP：商品詳細：口コミ
====================================== */
#series_item_detail .item_voice {width: 90%; margin: 0 auto;}
/* ======================================
シリーズTOP：商品詳細：最後のまとめ注釈
====================================== */
#series_item_detail .item_end_ant {width: 600px;}
/* ======================================
シリーズTOP：商品詳細：関連記事
====================================== */
#series_item_detail .item_news {width: 90%; margin: 0 auto;}
/* ======================================
シリーズTOP：下部の商品一覧
====================================== */
#this_cat_items ul {width: 664px;}
#this_cat_items ul li a {width: 330px; height: auto;}
#this_cat_items ul li a .inr .pic {width: 40%; max-width: 160px;}
#this_cat_items ul li a .inr .info {width: 60%;}
/* ======================================
シリーズTOP：バナー
====================================== */
#series_bottom .item_bnr .block-subnav .block-sidebnr-outer,
#series_bottom .item_bnr .block-subnav .block-sidebnr-outer.slide-num2 {width: 660px;}
#series_bottom .item_bnr #block-sidebnr-wrapper,
#series_bottom .item_bnr #block-sidebnr-wrapper.slide-num2 {
	position: relative;
	overflow: hidden;
	width: 552px;
	height: 134px;
	margin: 0 auto;
	zoom: 1;
}
#series_bottom .item_bnr .block-subnav .block-sidebnr-outer a.link-l img,
#series_bottom .item_bnr .block-subnav .block-sidebnr-outer a.link-r img {padding: 44px 0 0 0;}
#series_bottom .item_bnr ul#block-sidebnr2 li {width: 272px; float: left;}
#series_bottom .item_bnr ul#block-sidebnr2 li img {width: 270px; height: auto;}
/* ======================================
シリーズTOP：よくあるご質問
====================================== */
.productinfo .series_faq-others_wrapper {
	width: 90%;
	margin: 0 auto;
	padding: 35px 0;
}
.productinfo .series_faq-others_wrapper h2 {padding-top: 60px;}
/* ======================================
シリーズTOP：他のシリーズ
====================================== */
.productinfo .series_faq-others_wrapper .ttl-h2-1 {margin-top: 20px;}
.productinfo .series_faq-others_wrapper .block-series .series-inner {display: inline-block; text-align: center;}
.productinfo .series_faq-others_wrapper .block-series .series-inner a.block-cts {
	display: block;
	width: 25%;
	float: left;
	height: auto;
	padding: 30px 0 0;
	margin: 0 0 20px;
	box-sizing: border-box;
}
.productinfo .series_faq-others_wrapper .block-series .series-inner a.block-cts .block-inner .description {top: 140px;}
.productinfo .series_faq-others_wrapper .block-series .series-inner a.block-cts .block-inner .description > span {border: 1px solid #b2b2b2; font-size: 0.85em;}
.block-contents-2 .block-series .series-inner a.block-cts .block-inner .description span.ico_level,
.productinfo .series_faq-others_wrapper .block-series .series-inner a.block-cts .block-inner .description span.ico_level {display: block; margin: 3px 0 0;}
/* ======================================
Obagiについて
====================================== */
body.about_index .block-library,
body.about_index .block-h1,
body.about_index .sns-print {display: none;}
body.about_index .block-contents-1 {
	position: relative;
	width: auto;
	margin-top: 25px;
	margin-left: 0;
	margin-right: 0;
	color: #333;
}
body.about_index #about_mv {
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0;
}
body.about_index #about_mv img {
	width: 100%;
	height: auto;
}
body.about_index #about_main {
	padding: 0;
	width: auto;
}
body.about_index #about_greeting {
	padding: 25px 30px 56px;
}
body.about_index #about_greeting .about_greeting_logo {
	top: 186px;
	right: 16%;
}
body.about_index #about_greeting .about_greeting_logo img {
	width: 149px;
	height: auto;
}
body.about_index #about_greeting h2 {
	text-align: left;
	font-size: 1.5em;
	line-height: 1.6;
	margin: 25px 0 25px;
	padding: 0;
}
body.about_index #about_greeting p {
	text-align: left;
	font-size: 1.06em;
	line-height: 1.4;
	margin: 0 0 16px;
}

body.about_index #about_concept {
	background: url(../../about/bg_concept.jpg) left -60px top 0 no-repeat;
	background-size: cover;
}
body.about_index #about_concept .concept_inr {
	background: none;
	height: auto;
	padding: 40px 0 0 50%;
}
body.about_index #about_concept .about_concept_ttl {
	padding: 0 0 12px;
}
body.about_index #about_concept h2 {
	font-size: 2.6em;
	line-height: 1.6;
	letter-spacing: -1px;
	margin: 0 0 25px;
	padding: 0;
}
body.about_index #about_concept p {
	font-size: 1em;
	line-height: 1.6;
	margin: 0 0 20px;
}

body.about_index #about_story .story_inr {
	width: auto;
}
body.about_index #about_story .about_story_left {
	float: left;
	width: 45%;
	padding: 170px 0 0 30px;
}
body.about_index #about_story .about_story_left .about_story_ttl {
	padding: 42px 0 13px;
}
body.about_index #about_story .about_story_left h2 {
	font-size: 2em;
	line-height: 1.6;
	letter-spacing: -2px;
	margin: 0 0 25px;
	padding: 0;
	color: #fff;
}
body.about_index #about_story .about_story_left h2 .mark {
	display: inline-block;
	vertical-align: top;
	padding: 16px 10px 0 13px;
}
body.about_index #about_story h2 .mark img {
	width: 20px;
	height: auto;
}
body.about_index #about_story .about_story_right {
	float: right;
	width: 50%;
	padding: 60px 0 70px;
}
body.about_index #about_story .about_story_right p {
	font-size: 1em;
	line-height: 1.6;
	margin: 0 0 20px;
}

body.about_index #about_message {
	background: url(../../about/bg_message.jpg) right top no-repeat;
	background-size: cover;
	height: auto;
	padding: 0 30px 36px;
}
body.about_index #about_message .message_inr {
	width: auto;
	height: auto;
}
body.about_index #about_message .about_message_ttl {
	padding: 40px 0 12px;
}
body.about_index #about_message h2 {
	font-size: 2.1em;
	line-height: 1.3;
	letter-spacing: -2px;
	margin: 0 0 24px;
	padding: 0;
	color: #fff;
}
body.about_index #about_message p {
	font-size: 1em;
	line-height: 1.5;
	margin: 0 0 10px;
}
body.about_index #about_message p.name {
	display: inline-block;
	margin: 0 0 20px;
	text-align: center;
}
body.about_index #about_message p.name .under_name {
	font-size: 0.75em;
}

/* ~~~~~~~~~~~~~~~~~~
シリーズトップへボタン
~~~~~~~~~~~~~~~~~~ */
#about_link_btn {
	background-color: #eaeaea;
	padding: 10px 0;
	text-align: center;
	margin: 0 0 50px;
}
#about_link_btn a {
	display: inline-block;
	background-color: #fff;
	font-size: 0.875em;
	line-height: 1;
	padding: 1em 2em;
	border: 1px solid #d8d5d5;
}
#about_link_btn a:hover {
	text-decoration: none;
}
#about_link_btn img {
	vertical-align: bottom;
	margin: 0 0 3px 10px;
	width: 9px;
	height: auto;
}



/* ======================================

リニューアル前のレイアウト用

====================================== */
/*
* 新着情報
*
*****************************************/
.news div.block-contents-1 div.block-colum div.block-contents-11 {
  float: none; }
  .news div.block-contents-1 div.block-colum div.block-contents-11 ul.block-news {
    margin-top: 50px; }
.news div.block-contents-1 div.block-colum div.block-subnav {
  margin-top: 70px; }

/*
* シリーズ一覧
*
*****************************************/
.series div#pc-main-visual {
  display: none; }
.series div#tb-main-visual {
  display: block;
  height: 370px;
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: 1px solid #d7d7d7;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); }
.series div#sp-main-visual {
  display: none; }
.series div.block-lsm div.link-btn span.sns-print {
  width: 427px; }
  .series div.block-lsm div.link-btn span.sns-print span.sns-line {
    padding: 0 5px; }
  .series div.block-lsm div.link-btn span.sns-print span.sns-mail {
    display: table-cell;
    padding: 0;
    width: 225px;
    text-align: right; }

/*
* CMライブラリ
*
*****************************************/
div.iframeWrp {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0 auto; }

div.iframeWrp iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }