@charset "UTF-8";

/**********************************************************
SFCC移行時の追加設定
**********************************************************/
#info_contents {
    justify-content: center;
    display: flex;
    align-items: center;
}
#info_contents #section {
    max-width: 720px;
    margin: 0 8px;
}
#info_contents #section a:hover {
    color: #333 !important;
    text-decoration: none;
}
#info_contents #section a:link {
    color: #333;
    text-decoration: underline;
}
#info_contents #section .page-summary p {
    line-height: 1.5;
}
#info_contents #section .box--bg img.common-img {
    /* width: 60%; */
    margin: 30px auto 0 auto;
}

/**********************************************************
PC、スマホ共通の全体設定
**********************************************************/

@media screen and (min-width: 768px) {
    #info_contents {
        font-size: 14px;
    }
}
@media screen and (max-width: 768px) {
    #info_contents {
        font-size: 16px;
    }
}

@font-face {
 font-family: "Yu Gothic";
 src: local("Yu Gothic Medium");
 font-weight: 100;
}
@font-face {
 font-family: "Yu Gothic";
 src: local("Yu Gothic Medium");
 font-weight: 200;
}
@font-face {
 font-family: "Yu Gothic";
 src: local("Yu Gothic Medium");
 font-weight: 300;
}
@font-face {
 font-family: "Yu Gothic";
 src: local("Yu Gothic Medium");
 font-weight: 400;
}
@font-face {
 font-family: "Yu Gothic";
 src: local("Yu Gothic Bold");
 font-weight: bold;
}

/*========================================
会長
========================================*/
.yoshidayoshiaki,.takatani {
    display:inline-block;
    width:4em;
    overflow:hidden;
    text-indent:-4em;
}
.miyazaki {
    display:inline-block;
    width:4em;
    overflow:hidden;
    text-indent:-3em;
}
.yoshidayoshiaki:after { content:"\e900田嘉明"; }
.takatani:after { content:"\e9b3谷成夫"; }
.miyazaki:after { content:"宮\e9b4緑"; }

/*========================================
軽減税率
========================================*/
.cart_box span.icon-tax { color:#F99; }

/*========================================
非表示
========================================*/
.pc_none, .sph_none { display: none!important; }

/*========================================
seo
========================================*/
.contents_seo {
    background:none!important;
    height:1px;
}
.contents_seo * {
    display:block;
    text-indent:-9999em;
    background:none!important;
}
.contents_seo　img { display:none; }
/*========================================
navi_link
========================================*/
.navi_link {
    text-align:right;
    margin:0.3em 0;
}
.navi_link a:hover { opacity:0.7; }
.navi_link a:after {
    content:"\e964";
    font-family:"icomoon";
    font-weight:normal;
    margin-left:0.1em;
    text-decoration:none;
    display:inline-block;
}
.navi_link a[href^="#"]:after {
content:"\e962"/*アンカーの場合は下矢印に*/;
}
.navi_link a[target="_blank"]:after { content:"\e906"/*別窓のときは別窓マークに*/; }
/*========================================
navi_btn
========================================*/
.navi_btn {
    text-align:center;
    margin-bottom:1em;
}
.navi_btn a {
    display:inline-block;
    margin:0.5em 1em;
    border:2px solid #ccc;
    padding:0.5em 1em;
    text-decoration:none;
    font-weight:bold;
    background-color:#fff;
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
}
.navi_btn a:after {
    content:"\e96a";
    font-family:"icomoon";
    font-weight:normal;
    margin-left:0.15em;
    font-size:1.4em;
    vertical-align:-0.15em;
}
.navi_btn a[href^="#"]:after {
content:"\e968"/*アンカーの場合は下矢印に*/;
}
.navi_btn a[target="_blank"]:after {
    content:"\e906"/*別窓のときは別窓マークに*/;
    margin-left:0.3em;
    opacity:0.7;
}
.navi_btn a:hover {/* border-color:#666;*/ opacity:0.7; }
@media screen and (max-width: 768px) {
    .navi_btn { font-size:0.8em; }
}
/*========================================
navi_list
========================================*/
.navi_list a {
    display: block;
    padding:0.15em 0 0.7em;
    padding-left:1.2em;
}
.navi_list a:before {
    display:inline-block/*下線を無効に*/;
    content:"\e983";
    font-family:icomoon;
    margin-right:0.2em;
    text-decoration:none;
    text-indent:-1.2em;
}
.navi_list a[href^="#"]:before {
content:"\e982"/*アンカーの場合は下矢印に*/;
}
/*========================================
20230130追記 化粧品カテTOP
========================================*/
@media screen and (max-width: 768px) {
    #skintop .navi_list a:before,
    #healthtop .navi_list a:before{
        content: none;
    }
    #skintop .navi_list a[href^="#"]:before,
    #healthtop .navi_list a[href^="#"]:before {
        content:none;
    }
}
.navi_list a[target="_blank"]:after {
    content:"\e906"/*別窓のときは別窓マークを追加*/;
    display:inline-block/*下線を無効に*/;
    font-family:icomoon;
    margin-left:0.2em;
    text-decoration:none;
}
@media screen and (max-width: 768px) {
    .navi_list a { text-decoration:none; }
    .navi_list a:hover { background:#f0f0f0; }
}
/*========================================
thum_menu
========================================*/
.thum_menu:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.thum_menu { min-height: 1px; }
* html .thum_menu {/*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
.thum_menu li {
    width:33.3%;
    float:left;
}
@media screen and (max-width: 768px) {
    .thum_menu li { width:50%; }
}
.thum_menu li a {
    display:block;
    text-decoration:none;
    padding:0.8em 1em;
    border:0.1em solid #ccc;
    margin:0.3em;
    border-radius:0.3em;
    -webkit-border-radius:0.3em;
    -moz-border-radius: 0.3em;
    position:relative;
}
@media screen and (max-width: 768px) {
   .thum_menu li a {
       text-align:center;
       font-size:0.8em;
   }
   .thum_menu li a img {
       display:block;
       margin: 0 auto 0.3em;
   }
}
.thum_menu li a:after {
    content:"";
    display:inline-block;
    border:0.4em solid #ccc;
    border-top-color:transparent!important;
    border-left-color:transparent!important;
    position:absolute;
    right:0.5em;
    bottom:0.5em;
}
.thum_menu li a:hover { border-color:#000; }
.thum_menu li a:hover:after {
    right:0.4em;
    bottom:0.4em;
}
.thum_menu li a img {
    height:3.5em;
    vertical-align:middle;
    margin-right:0.3em;
}
/*========================================
thum_menu2 複数行のメニュー
========================================*/
.thum_menu2:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.thum_menu2 { min-height: 1px;}
* html .thum_menu2 {/*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
.thum_menu2 li {
    width:33.3%;
    float:left;
}
@media screen and (max-width: 768px) {
    .thum_menu2 li { width:50%; }
}
.thum_menu2 li a {
    text-decoration:none;
    border:0.1em solid #ccc;
    margin:0.3em;
    border-radius:0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    position:relative;
}
@media screen and (min-width: 768px) {
    .thum_menu2 li a {
        display:table;
        width:96%;
    }
    .thum_menu2 li a span {
        display:table-cell;
        vertical-align:middle;
        padding:0.8em 0;
    }
    .thum_menu2 li a span:first-child {
        padding-left:1em;
        padding-right:0.5em;
        width:4em;
        text-align:center;
    }
}
@media screen and (max-width: 768px) {
    .thum_menu2 li a {
        display:block;
        text-align:center;
        font-size:0.8em;
        padding:0.8em 0;
    }
    .thum_menu2 li a img {
        display:block;
        margin: 0 auto 0.3em;
    }
}

.thum_menu2 li a:after {
    content:"";
    display:inline-block;
    border:0.4em solid #ccc;
    border-top-color:transparent!important;
    border-left-color:transparent!important;
    position:absolute;
    right:0.5em;
    bottom:0.5em;
}
.thum_menu2 li a:hover { border-color:#000; }
.thum_menu2 li a:hover:after {
    right:0.4em;
    bottom:0.4em;
}
.thum_menu2 li a img {
    height:3.5em;
    vertical-align:middle;
    margin-right:0.3em;
}
/*========================================
サムネイル付きリスト
========================================*/
.thum_list { overflow:hidden; }
.thum_list li {
    display:table;
    table-layout:fixed;
    position:relative;
}
@media screen and (min-width: 768px) {
    .thum_list li {
        width:50%;
        float:left;
    }
}
.thum_list .img_box,
.thum_list .txt_box {
    display:table-cell;
    vertical-align:top;
    padding:0.5em 0;
    padding-right:0.6em;
    line-height:1.4;
}
.thum_list a { text-decoration:none; }
.thum_list .img_box {
    width:60px;
    text-align:center;
}
@media screen and (min-width: 768px) {
    .thum_list .img_box img { height:60px; }
}
@media screen and (min-width: 768px) {
    .thum_list .img_box { width:5em; }
}
.thum_list .name {
    margin-bottom:0.3em;
    font-weight:bold;
    text-decoration:underline;
}
.thum_list .name:hover { text-decoration:none; }
.thum_list .copy { font-size:0.88em; }
.thum_list .txt_box p {
    font-size:0.88em;
    margin-bottom:0;
}
/*========================================
注意　warning_box
========================================*/
@media screen and (min-width: 768px) {
    .warning_box { margin:1em 0; }
    .warning_title {
        display:inline-block;
        border:3px double #666;
        padding:0.2em 0.5em;
        font-weight:bold;
    }
    .warning_body { margin-top:0.5em; }
}

@media screen and (max-width: 768px) {
    .warning_title:before {
        content:"\e98a";
        font-family:icomoon;
        margin-right:0.3em;
        display:inline-block;
        text-decoration:none;
        color:#666;
    }
    .warning_box { margin:0.5em 0; }
    .warning_title {
        text-decoration:underline;
        text-indent:-0.6em;
        padding-left:1.2em;
    }
    .warning_body { display:none; }
}
/*========================================
とは？　teaching_box
========================================*/
.teaching_title:before {
    content:"\e984";
    font-family:icomoon;
    margin-right:0.3em;
    display:inline-block;
    text-decoration:none;
    color:#666;
}
.teaching_box { margin:0.5em 0; }
@media screen and (max-width: 768px) {
    .teaching_box { font-size:0.88em; }
}
.teaching_title {
    text-decoration:underline;
    text-indent:-0.6em;
    padding-left:1.2em;
}
.teaching_body {
    display:none;
    padding:0.6em 1em;
    background:#fff;
    box-shadow:rgba(0, 0, 0, 0.25) 0.2em 0.2em 0.4em 0 inset;
    -webkit-box-shadow:rgba(0, 0, 0, 0.25) 0.2em 0.2em 0.4em 0 inset;
    -moz-box-shadow:rgba(0, 0, 0, 0.25) 0.2em 0.2em 0.4em 0 inset;
    border:0.1em solid #ccc;
    font-size:0.9em;
}
/*========================================
ツールチップ　tooltip
========================================*/
@media screen and (min-width: 768px) {
    .tooltip {
        display:inline-block;
        position:relative;
        font-size:14px;/*フォントサイズ絶対指定*/
        line-height:1;/*?マークの縦位置をテキストと揃える*/
        vertical-align:middle;
    }
    .tooltip:not(:target) {
     z-index:1\9; /*IE9*/
    }
    .tooltip_mark {
        text-indent:-9999em;
        width:1em;
        height:1em;
        background:url("/common/image/mark_question.png") no-repeat left center;
        display:inline-block;
        cursor: help;
        margin-left:5px;
        z-index:1;
    }
    .tooltip_box {
        display:none;
        position:absolute;
        width:20em;
        top:0;
        left:2em;
        background-color:#FFF;
        padding:0.1em;
        text-align:left;
        font-size:0.88em;
        line-height:1.6;
        border:0.1em solid #666;
        box-shadow:rgba(0, 0, 0, 0.25) 0.4m 0.4em 0.5em 0;
        -webkit-box-shadow:rgba(0, 0, 0, 0.25) 0.4em 0.4em 0.5em 0;
        -moz-box-shadow:rgba(0, 0, 0, 0.25) 0.4em 0.4em 0.5em 0;
        z-index:9999;
    }
    .tooltip_title,
    .tooltip_body {
        padding:0.5em 0.7em;
        font-weight:normal;
    }
    .tooltip_title {
        font-weight:bold;
        border-bottom:0.1em dotted #ccc;
        background:#f0f0f0;
    }
    .tooltip_body { font-weight:normal; }
    .tooltip .tooltip_close {
        cursor:pointer;
        float:right;
        text-align:right;
        width:4.5em;
        background:none\9;/*IE8で非表示*/
        padding-right:0\9;/*IE8で非表示*/
    }
}
/*----------------------------------------
スマホ
----------------------------------------*/
@media screen and (max-width: 768px) {
    .tooltip_box,
    .tooltip_title { display:inline; }
    .tooltip_box {
        font-size:0.88em;
        margin-bottom:0.5em;
    }
    .tooltip_title {
        padding:0.5em 0;
        text-decoration:underline;
        font-weight:normal;
    }
    .tooltip_title:before {
        content:"\e984";
        font-family:icomoon;
        font-weight:normal;
        margin-right:0.3em;
        display:inline-block;
        text-decoration:none;
        color:#666;
    }
    .tooltip_body {
        display:none;
        background:#fff;
        box-shadow:rgba(0, 0, 0, 0.25) 0.2em 0.2em 0.4em 0 inset;
        -webkit-box-shadow:rgba(0, 0, 0, 0.25) 0.2em 0.2em 0.4em 0 inset;
        -moz-box-shadow:rgba(0, 0, 0, 0.25) 0.2em 0.2em 0.4em 0 inset;
        border:0.1em solid #ccc;
        padding:0.5em 0.8em;
        font-weight:normal;
        font-size:0.88em;
    }
    .tooltip_mark,
    .tooltip_close { display:none!important; }
}
/*----------------------------------------
発送遅れ商品
----------------------------------------*/
@media screen and (min-width: 768px) {
    .tooltip_shipping_delay .tooltip_mark/*発送遅れ商品*/ { background-image:url(/common/image/mark_attention.png); }
}
@media screen and (max-width: 768px) {
    .tooltip_shipping_delay { display:inline; }
    .tooltip_shipping_delay .tooltip_title {
        display:inline-block;
        text-indent:-9999em;
        width:12px;
        height:12px;
        overflow:hidden;
        background:url("/common/image/mark_attention.png") no-repeat left center;
    }
    .tooltip_shipping_delay .tooltip_body { color:#F66; }
}

/*========================================
no contents
========================================*/
.no_contents {
    margin:1em 0;
    padding:8em 0;
    border:0.1em dashed #ccc;
    text-align:center;
    color:#666;
    background:rgba(255, 255, 255, 0.9);
}
@media screen and (max-width: 768px) {
    .no_contents {
        padding:3em 0;
        font-size:0.88em;
    }
}
/*========================================
キャプチャ
========================================*/
.pict_cap {
    margin:1em;
    text-align:center;
}
.pict_cap img {
    padding:/*0.7em*/2%;
    border:0.1em solid #fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.5em 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.5em 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.5em 0;
    border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    -moz-border-radius: 0.8em;
}
@media screen and (min-width: 768px) {
    .pict_cap img { max-width:80%; }
    .pict_cap.sph img { max-width:45%; }
}

/*========================================
sph_topcontrol 上へボタン
========================================*/
.scrollcontrol {
    position:fixed;
    bottom:0;
    right:0;
    display:table;
    z-index:99;
    border-spacing:0.5em;
    border-collapse:separate;
}
.scrollcontrol a {
    display:table-cell;
    text-align:right;
}
.scrollcontrol a img { height:3em; }
/*========================================
loading
========================================*/
.loading { text-align:center; }
.contents_main .loading { padding:3em 0; }
@media screen and (min-width: 768px) {
    .loading img {
        max-width:100px;
        height:auto;
    }
}
/*========================================
contents_box
========================================*/
.contents_main .contents_box { margin-bottom:2em; }
@media screen and (max-width: 768px) {
    .contents_main .contents_box { margin-bottom:1.5em; }
}
/*clearfix*/
.contents_box:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.contents_box { min-height: 1px; }
* html .contents_box { /*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
/*20240612追加 特集一覧さる丸の一覧非表示*/
#info_contents div#medical div.contents_box:nth-of-type(2) {
    display: none;
}
/*========================================
paging
========================================*/
.paging {
    border: none!important/*base.css相殺*/;
    padding: 1em 0;
    text-align: center;
    margin-bottom: 1.5em;/*231219追加*/
}
@media screen and (max-width: 768px) {
    .paging { font-size:/*3.2vw*/0.75em; }
}
.paging ul,
.paging li {
    display: inline-block;
    text-align: center;
}
.paging li.copy {
    width: 100%;
    font-size: 0.88em;
    margin-bottom: 0.5em;
}
#body_cart .paging li.page_prev a {
    padding: 1em 2em;/*231219変更*/
    text-decoration: none;/*231219追加*/
    border: 1px solid #ccc;/*231219追加*/
    border-radius: 3px;/*231219追加*/
}
.paging li a,
.paging li.page_now,
.paging li.active {
    padding: 0.5em 1em;
}
.paging li.page_now,
.paging li.active {
    background: #f0f0f0;
    font-weight: bold;
}
.paging li:first-child,
.paging li:last-child { background:none/*pagingプラグインバグ対策*/; }
.paging li.page_prev a:before,
.paging a.prev:before {
/*    content: "\e963";*//*231219追加*/
    margin-right:0.1em;
    display:inline-block;
    text-decoration:none;
}
.paging li.page_next a:after,
.paging a.next:after {
    content: "\e964";
    margin-left:0.1em;
    display:inline-block;
    text-decoration:none;
}
/*========================================
スマホ用テーブルスクロール
========================================*/
.table_scroll { overflow:auto; }
@media screen and (max-width: 768px) {
    /*.addsize,
    .table_scroll{overflow:auto;position:relative; }
    .addsize:before,
    .table_scroll:before{display:inline-block;content:"スクロール >>";background:#ccc;padding:0.2em 0.5em;color:#fff;font-size:0.6em;
        position:absolute;right:0;top:0;
    }*/
    .table_scroll { white-space:nowrap; }
}
.table_scroll::-webkit-scrollbar {
height:0.5em;
}
.table_scroll::-webkit-scrollbar-track {
background:#f0f0f0;
}
.table_scroll::-webkit-scrollbar-thumb {
background:#666;
border-radius:1em;
 -webkit-border-radius: 1em;
 -moz-border-radius: 1em;
}
/*========================================
reply
========================================*/
#mydhc_contact {
    padding: 1em 0;
    font-size: 0.88em;
}
dl.fromDHC {
    border: 1px solid #ccc;
    background: #fffbe6;
    padding: 1em;
    margin: 1em 0;
}
dl.fromDHC dt {
    font-weight: bold;
    background: #fffbe6 url("//www.dhc.co.jp/common/image/mark_mail.png") no-repeat top left;
    background-size: 2.8em auto;
    -webkit-background-size: 2.8em auto;
    -moz-background-size: 2.8em auto;
    -o-background-size: 2.8em auto;
    -ms-background-size: 2.8em auto;
    padding: 0.9em;
    padding-left: 3.5em;
    width: 100%;
    float: none;
    text-align: left;
    background-position: 0 0!important;
}
dl.fromDHC dt:after { content: "："; }
dl.fromDHC dd { margin-left: 0; }
/*========================================
レイアウト
========================================*/
.contents { position: relative; }
/*clearfix*/
.contents:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.contents { min-height: 1px; }
* html .contents { /*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
/*----------------------------------------
PC
----------------------------------------*/
@media screen and (min-width: 768px) {
    .contents {
        width: 950px/*1000px*/;
        margin:0 auto;
    }
    .contents_main,
    .contents_side { margin-bottom:2em; }
    .contents_main {
        width: 720px;
        float: right;
        margin-bottom: 1em;
    }
    .contents_side {
        width: 200px/*240px*/;
        float: left;
    }
    .layout_mydhc .contents_main {
        width: 750px;
        float: left;
    }
    .layout_mydhc .contents_side {
        width:170px/*210px*/;
        float: right;
    }
    .layout_login .contents_main {
        width: 100%;
        float: none;
    }
    .layout_login .contents_side {
        width: 100%;
        float: none;
    }
    #global_footer { clear: both; }
    .layout_contents .contents_main {
        width: 950px;
        margin:0 auto;
        float: none;
    }
    .layout_form .pankuzu_list,
    .layout_form #header_mini,
    .layout_form .flow_box,
    .layout_form .contents_main,
    .layout_form .contents_side {
        width: 780px;
        margin-left:auto;
        margin-right:auto;
        float: none;
    }
    .layout_popup .contents {
        width: 100%;
        max-width: 600px;
    }
    .layout_popup .contents_main,
    .layout_popup .contents_side {
        width: auto;
        float: none;
    }
}
/*----------------------------------------
SPH
----------------------------------------*/
@media screen and (max-width: 768px) {
    #contents_popup {
        padding: 0.5em;
        /*以下相殺*/
        border: none;
        width: 100%;
        margin: 0;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    #contents,
    .contents {
        /*以下相殺*/
        width: auto!important;
        min-width: inherit!important;
        max-width: inherit!important;
    }
    .contents { padding: 0; }
    .contents_main,
    .contents_side {
        margin: 0 0.5em 0.5em;
        /*以下相殺*/
        width: auto!important;
        float: none;
        padding: 0!important;
    }
    .contents_main #top_category .bn_layout2,
    .contents_side #top_category .bn_layout2,
    #guide_shopping
    {
        margin: 0 -0.5em 0.5em !important;
    }
}
/*========================================
layout_popup
========================================*/
.layout_popup p { line-height:1.7; }
@media screen and (min-width: 768px) {
    .layout_popup .contents_main {
        border: 1px solid #ccc;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        box-shadow: rgb(204, 204, 204) 2px 2px 5px 1px;
        -webkit-box-shadow: rgb(204, 204, 204) 2px 2px 5px 1px;
        -moz-box-shadow: rgb(204, 204, 204) 2px 2px 5px 1px;
        text-align: left;
        margin: 0 auto;
        padding: 1.5em;
    }
}
.layout_popup .date { text-align: right; }
/*========================================
contents_side
========================================*/
@media screen and (min-width: 768px) {
    .contents_side { font-size: 0.85em/*0.9em*/; }
}
.layout_form .contents_side { font-size:1em; }
.contents_side img { max-width: 100%; }
/*========================================
#global_header
========================================*/
@media screen and (max-width: 768px) {
    #global_header * {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
    }
}
#global_header {
    /*border-top:0.3em solid #00569c;*/
    background: #fff;
    width:100%;
}
/*clearfix*/
#global_header:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
#global_header { min-height: 1px; }
* html #global_header { /*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
/*========================================
#global_footer
========================================*/
#global_footer {
    background:#e6e6e6;
    overflow:hidden;
}
/*clearfix*/
/*#global_footer:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
#global_footer { min-height: 1px; }
* html #global_footer { /*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ /*}*/
@media screen and (max-width: 768px) {
    #global_footer * {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        text-decoration:none;
    }
    #global_footer {
        font-size:10px;
        font-size: 3vw;
    }
    /*clearfix*/
    #footer_navi:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    #footer_navi { min-height: 1px; }
    * html #footer_navi { /*height: 1px;/*\*//*/
      height: auto;
      overflow: hidden;
      /**/ }
    #footer_navi { padding: 0.5em; }
    #footer_navi ul {
        overflow:hidden;
        margin-bottom:0.5em;
    }
    #footer_navi .menu_next li {
        width: 50%;
        float: left;
    }
    #footer_navi .menu_next li a { background: #fff url("//www.dhc.co.jp/sph/image/select_next.png") no-repeat right center; }
    #footer_navi .menu_back li a {
        background: #00569c url("//www.dhc.co.jp/sph/image/tab_prev.png") no-repeat left center;
        color:#fff;
        text-align:center;
    }
    #footer_navi .menu_next li a,
    #footer_navi .menu_back li a {
        display: block;
        padding: 0.8em;
        background-size: auto 30%;
        -webkit-background-size: auto 30%;
        -moz-background-size: auto 30%;
        -o-background-size: auto 30%;
        -ms-background-size: auto 30%;
        border: 0.1em solid #ccc;
        margin: 0.1em;
    }
    #sphfooter {
        clear:both;
        background-color:#fff;
    }
}
/*========================================
.global_color
========================================*/
.global_bg { background:#00569c; }
/*========================================
.global_top_img
========================================*/
.global_top_img {
    border:4px solid #ccc;
    padding:3em;
    text-align:center;
    margin-bottom:1em;
    background-repeat: no-repeat;
    background-position:left bottom;
}
@media screen and (max-width: 768px) {
    .global_top_img {
        background-position:center bottom;
        background-size:auto 8em;
        -webkit-background-size:auto 8em;
        -moz-background-size:auto 8em;
        -o-background-size:auto 8em;
        -ms-background-size:auto 8em;
        padding:1.5em 3em 9em;
        margin:0.5em;
    }
}
.global_top_img h1 {
    position:absolute;
    text-indent:-9999em;
}
/*========================================
.global_end_img
========================================*/
.global_end_img {
    padding-top:1em;
    text-align:center;
    background:url("//www.dhc.co.jp/common/image/global_end_img.png") no-repeat center bottom;
    background-size:auto 12em;
    -webkit-background-size:auto 12em;
    -moz-background-size:auto 12em;
    -o-background-size:auto 12em;
    -ms-background-size:auto 12em;
    padding-bottom:12em;
    margin-bottom:2em;
}
@media screen and (max-width: 768px) {
    .global_end_img {
        background-size:auto 7em;
        -webkit-background-size:auto 7em;
        -moz-background-size:auto 7em;
        -o-background-size:auto 7em;
        -ms-background-size:auto 7em;
        padding-bottom:7em;
    }
}
.global_end_img h2 {
    font-size:1.3em;
    margin-bottom:1em;
}
.global_end_img h2 span {
    display:inline-block;
    font-size:1em;
    font-weight:bold;
    margin:0;
}
.global_end_img p { margin-bottom:1em; }
@media screen and (min-width: 768px) {
    .global_end_img p span { display:block; }
}
@media screen and (max-width: 768px) {
    .global_end_img p span { display:inline; }
}
.global_end_img .btn_box { margin:2em 1em; }
/*========================================
#display_mode
========================================*/
/*#display_mode {
    text-align:center;
    margin-bottom:1em;
}
#display_mode a {
    color:#7acce4;
    text-decoration:underline;
}
/*========================================
#copyright
========================================*/
#copyright {
    background-color: #00569c;
    padding: 1.2em 1em;
    color: #fff;
    text-align: center;
}
#copyright ul a {
    color:#fff!important;
    border-left:1px solid #fff;
    padding:0 0.8em;
}

#copyright ul { margin-top:1em; }
#copyright li:first-child a { border:none; }
#copyright li { display:inline; }
@media screen and (min-width: 768px) {
    #copyright img { width:540px; }
}
@media screen and (max-width: 768px) {
    #copyright img { width:100%; padding-right:14%; }
}
/*========================================
#header_mini
========================================*/
#header_mini { padding:0.7em 0; }
/*========================================
ロゴ
========================================*/
#global_header .logo a {
/*    display: block;
    text-indent: -9999em;
    background-image: url("/common/image/logo.png");
    background-size:contain;
    -webkit-background-size:contain;
    -moz-background-size:contain;
    -o-background-size:contain;
    -ms-background-size:contain;
    background-position: left center;
    background-repeat: no-repeat;
    image-rendering:-webkit-optimize-contract;*/
    display: block;
    width: 86px;
}
@media screen and (min-width: 768px) {
    #global_header .logo { 
        width: 19.5%; 
        padding-bottom: 2px;
    }
    /*#global_header .logo a { height: 38px; }*/
}
@media screen and (max-width: 768px) {
    #global_header .logo {
        height: 46px;
        width: 12%;
        margin-bottom: 2px;
    }
    #global_header .logo a {
        text-indent:0;
        background:none;
        margin-left: 10px;
        width:auto/*相殺*/;
    }
    #global_header .logo img { width:40%; }
    #global_header .header_box {
        display:block;
        width:100%;
    }
    #global_header .logo,
    #global_header .menu_box {
        display:table-cell;
        vertical-align:middle;
    }
}
/*=========================================
ヘッダメニュー
=========================================*/
@media screen and (max-width: 768px) {
    .menu_box {
        width: 55%;
        padding: 0.1em 0.2em;
        text-align:right;
        font-size:9.2vw;
        line-height:1;
    }
    .menu_box li {
        display: inline-block;
        vertical-align:bottom;
        position:relative;
        text-align:center;
    }
    .menu_box li a { text-decoration:none; }
    .menu_box li a span {
        display:block;
        color:#666;
        margin-bottom:0.05em;
    }
    .menu_box li a span[class^="icon-"] {
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-color: #fff;
        -webkit-text-stroke-width: 0.3px;
    }
    .menu_box li a span.icon-cart { margin-right:0.18em/*カート位置微調整*/; }
    .menu_box li a span:nth-child(2) {
        font-size:0.24em;
    }
    .menu_box li img { width: 100%; }
}
a.menu_cart_link { display:block; }
img.num {
    width:100%;
    position: absolute;
    top:0;
    left:0;
}
/*=========================================
ヘッダ固定
=========================================*/
#global_header .header_box.fixed {
    width: 100%;
    top: 0;
    z-index: 10;
}
#global_header .header_box.fixed .logo a { width:80%; }
#global_header .header_box.fixed .menu_box span:nth-child(2) {
display:none;
}
#global_header .header_box.fixed .menu_box {
    font-size:9vw;
    padding:0.2em 0.3em;
}
/*========================================
ショッピングガイド（sph）
========================================*/
@media screen and (max-width: 768px) {
    #shopguide * {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
    }
    #shopguide {
        background: #fff;
        font-size: 4vw;
    }
    #shopguide a {
        color: #333;
        text-decoration: none;
    }
    #shopguide ul { margin: 0.5em; }
    /*clearfix*/
    #shopguide ul:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    #shopguide ul { min-height: 1px; }
    * html #shopguide ul { /*height: 1px;/*\*//*/
      height: auto;
      overflow: hidden;
      /**/ }
    #shopguide .title {
        clear: both;
        background-color: #f0f0f0;
        padding: 0.2em 0.5em;
        font-weight: bold;
        border-top: 0.15em solid #000;
    }
    #shopguide .title:before {
        font-family:icomoon;
        font-weight:normal;
        margin-right:0.2em;
        color:#777;
    }
    #footer_present .title:before { content:"\e937"; }
    #footer_category .title:before { content:"\e944"; }
    #footer_campaign .title:before { content:"\e940"; }
    .menu_list {
        width: 100%;
        overflow: hidden;
    }
    .menu_list li {
        width: 20%;
        float: left;
        border: 0.1em solid #ccc;
        padding: 1.2em 1em;
    }
    .menu_list li a { display: block; }
    #footer_present li {
        width:33.3%;
        float:left;
    }
    #footer_present li a {
        display:block;
        margin:0.2em;
    }
    #footer_category li {
        width: 24%;
        float: left;
        background: #fff;
        text-align: center;
        border: 0.15em solid #ccc;
        margin: 0.2em 0.5%;
        font-size: 0.65em;
        padding: 0.5em;
        border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
    }
    #footer_category li span {
        font-size:3.5em;
        display: block;
        margin: 0.15em auto;
    }
    /* 20230414更新 総TOPのカテゴリボタン追加*/
    #footer_category.contents_box li {
        width: 32%;
    }
}
/*========================================
ぱんくずリスト
========================================*/
.pankuzu_list { line-height:1; }
.pankuzu_list li {
    display:inline-block;
    margin-right:0;
}
.pankuzu_list li a:after {
    content:"\e96a";
    font-family:icomoon;
    display:inline-block;
    text-decoration:none;
    opacity:0.5;
}
.pankuzu_list li span {
    display:inline-block;
    padding:0 0.2em;
    max-width:30em;
    white-space:nowrap;
}
/*----------------------------------------
PC
----------------------------------------*/
@media screen and (min-width: 768px) {
    .pankuzu_list {
        font-size:0.88em;
        padding:0.8em 0;
        text-align:left;
        white-space:nowrap;
        overflow:hidden;
    }
    .pankuzu_list li a span { text-decoration:underline; }
    .pankuzu_list li a:hover span { text-decoration:none; }
    .pankuzu_list li span {
        padding-bottom:1px/*chrome欠け対策*/;
        overflow:hidden;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
    }
}
/*----------------------------------------
SPH
----------------------------------------*/
@media screen and (max-width: 768px) {
    .pankuzu_list {
        font-size: 3vw;
        padding-left:0.6em;
    }
    .breadcrumbs,
    .pankuzu_list ul { overflow: hidden; }
    /*.breadcrumbs,
    .pankuzu_list { border-top:1px solid #666; }
    */
    .breadcrumbs .pankuzu_list { border-top:none/*ボーダーごとスライドするための処置*/; }
    .pankuzu_list li span {
        padding-top:0.8em;
        padding-bottom:0.8em;
    }
}

/*========================================
ボタン
========================================*/
@media screen and (max-width: 768px) {
    .btn_box div,
    .btn_box li { display: inline; }
    .btn_box div > a,
    .btn_box li > a {
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        padding: 0.5em 0.7em;
        box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
        -moz-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px 0px;
        cursor: pointer;
        text-decoration:none;
    }
    .btn_mydhc a { margin: 0 auto; }
}
/*========================================
見出し
========================================*/
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.global_title { font-family:/*"icomoon", */"Yu Gothic", YuGothic, "メイリオ", Meiryo, Arial, sans-serif;/* Better Font Rendering =========== 
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/ }
 h1 span:not([class$="_none"]), h2 span:not([class$="_none"]), h3 span:not([class$="_none"]) {
 font-weight: normal;
 display: inline-block;
 margin-left:1em;
 vertical-align:middle;
 text-transform:uppercase;
}
@media screen and (min-width: 768px) {
    h2 span { font-size:0.5em; }
    h3 span { font-size:0.85em; }
}
@media screen and (max-width: 768px) {
    h1 span { font-size: 0.85em; }
}
/*----------------------------------------
共通見出し共通設定
----------------------------------------*/
.global_h2,
.mydhc_h2,
.catop_h2,
.global_h3,
.mydhc_h3,
.catop_h3,
.global_h4,
/*.mydhc_h4,*/
.catop_h4 { margin-bottom:0.7em; }
@media screen and (min-width: 768px) {
    .global_h2,
    .mydhc_h2,
    .catop_h2 {
        font-size:1.8em;
        font-weight:normal;
    }
}
.global_h2,
.mydhc_h2 {
    border-bottom:1px solid #666;
    padding-bottom:0.3em;
}
@media screen and (min-width: 768px) {
    .catop_h2 { border-bottom:1px dotted #ccc; }
    .global_h3,
    .mydhc_h3,
    .catop_h3 { font-size:1.3em; }
    .global_h4,
    .mydhc_h4,
    .catop_h4 { font-size:1.2em; }
    .global_h5,
    .mydhc_h5,
    .catop_h5 { font-size:1.12em; }
    h6 { font-size:1em; }
}
@media screen and (max-width: 768px) {
    .global_h2,
    .mydhc_h2 { border-bottom-width:0.1em; }
    .global_h2,
    .mydhc_h2,
    .catop_h2 { font-size: 1.2em; }
}
/*----------------------------------------
グローバル
----------------------------------------*/
.global_h1,
/*.global_h2,*/
.global_h3,
.global_h4 { font-weight:bold; }
.global_title {
    background:#f0f0f0;
    padding:0.5em;
    font-size:1.2em;
    font-weight:bold;
    margin-bottom:1em;
}
@media screen and (min-width: 768px) {
    .contents_main .global_title/*:not(h1)*/ {
        border-top:0.2em solid #000;
        font-size:1.13em;
        letter-spacing:0.1em;
    }
    /*.contents_side .global_title {
        text-align:center;
        font-size:1.2em;
        margin-bottom:0.5em;
        font-weight:bold;
    }*/
}
.global_h1 {
    font-size:1.3em;
    text-align:center;
}
.global_h1:after { content:"\a"; }
.global_h2 { /*border-bottom: 1px solid #666;*/ margin-top:2em; }
.global_h3 {
    border:0.1em solid #999;
    margin-top:1.5em;
    padding:0.5em 0.5em 0.3em;
    font-weight:normal;
}
@media screen and (max-width: 768px) {
    .global_h3 { font-size:1em; }
}
.global_h4 {
    margin-top: 1.5em;
    border-left: 0.35em solid #ccc;
    padding-left: 0.5em;
}
.global_h5:before {
    content:"■";
    margin-right:0.2em;
    color:#ccc;
}
/*----------------------------------------
.contents_box相殺
----------------------------------------*/
.contents_box .global_h2,
.contents_box .global_h3,
.contents_box .global_h4,
.contents_box .global_h5 { margin-top:0; }
/*----------------------------------------
マイDHC
----------------------------------------*/
.mydhc_h1 {
    color:#fff;
    background-color:#00569c;
    font-weight:normal;
    letter-spacing:0.1em;
}
@media screen and (min-width: 768px) {
    .mydhc_h1 {
        /*color:#fff;
        background-color:#54aea5#00569c;*/
        font-size:1.2em;
        margin-bottom:2em;
        line-height:1;
        padding:/*0.3em */0.5em;
    }
}
@media screen and (max-width: 768px) {
    .mydhc_h1 {
        padding: 5px 10px;
        font-size: 1em;/*color: #fff;
        background-color: #54aea5;*/
    }
    .contents_main .mydhc_h1,
    .contents_main .global_title { margin-bottom: 1em; }
}
.mydhc_h2 {
    margin-top: 2em;
    border-color:#00569c;
    padding-bottom:0.3em;/*position:relative;*/
}
/*.mydhc_h2:after {
    content:"";
    display:block;
    line-height:0;
    overflow:hidden;
    position:absolute;
    left:0;
    bottom:-1px;
    width:50%;
    border-bottom:1px solid #00569c;
}*/.mydhc_h3 { /*border-left:0.3em solid #00569c;
    padding-left:0.6em;*/ font-weight:normal; }
.mydhc_h3:before {
    content:"";
    border-left:0.3em solid #00569c;
    margin-right:0.6em;
}
@media screen and (min-width: 768px) {
    /*.mydhc_h3 {
        border-left:5px solid #54aea5;
        padding-left:0.5em;
    }*/
    .mydhc_h3 .date { font-size:0.88em; }
}
@media screen and (max-width: 768px) {
    .mydhc_h3,
    .privilege_title {
        margin-top: 1.5em;
        font-weight: bold;/*border-left: 0.3em solid #54aea5;
        padding-left: 0.5em;*/
    }
}
.mydhc_h4 {
    color:/*#54aea5*/#00569c;
    font-weight:bold;
}
.mydhc_h5:before {
    content:"■";
    color:/*#54aea5*/#00569c;
    margin-right:0.2em;
}
/*----------------------------------------
.contents_box相殺
----------------------------------------*/
.contents_box .mydhc_h2,
.contents_box .mydhc_h3,
.contents_box .mydhc_h4,
.contents_box .mydhc_h5 { margin-top:0!important; }
/*----------------------------------------
カテTOP
----------------------------------------*/
.catop_h3 {    padding: 0.5em 0.5em 0.3em;            margin: 0.4em 0 1em;            font-size: 1.1em;}
h2 + h3.catop_h3 { margin-top:0; }
.catop_h3 a {
    display:block;
    text-decoration:none;
}
.catop_h3 a:after {
    content:"\e96a";
    font-family:icomoon;
    font-weight:normal;
    display:block;
    width:1em;
    float:right;
}
@media screen and (min-width: 768px) {
    .catop_h2 {
        border-bottom-color:#999;
        padding-left:0.5em;
        border-left:0.2em solid #000;
    }
    /*.catop_h2:before{content:"";border-left:0.25em solid #00569c;margin-right:0.5em;}*/
    .catop_h3 {
        /*background:#f0f0f0 url("/common/image/bg_slash.png") repeat left top;
        padding:0.6em;
        color:#fff;*/
        padding:0.4em 0.5em;
        background:#f0f0f0;
    }
    .catop_h4 {
        border-bottom:1px dotted #999;
        padding-bottom:0.2em;
    }
    .catop_h5:before {
        content:"■";
        margin-right:0.2em;
    }
    .catop_h6 {
        font-size:1em;
        margin-bottom:0.5em;
    }
    .catop_h6:before { content:"【"; }
    .catop_h6:after { content:"】"; }
}
@media screen and (max-width: 768px) {
    .catop_h2 {
        margin-top:1.2em;
        border-left:0.35em solid #ccc;
        padding-left:0.5em;
    }
    .catop_h2 span {
        margin-left:0;
        font-size:0.6em;
        display:block;
    }
    .catop_h3 {
        border-bottom: 2px solid #ccc;
    }
    .catop_h3 span {
        margin-left:0;
        font-size:0.8em;
        display:block;
    }
    .catop_h4 {
        padding:0;
        margin:0.5em 0;
    }
    .catop_h4:before {
        content:"■";
        margin-right:0.2em;
    }
}
/*----------------------------------------
.detail_title
----------------------------------------*/
@media screen and (min-width: 768px) {
    .detail_title {
        font-weight:bold;
        padding-bottom:0.3em;
        border-bottom:3px solid #ccc;
        margin-top:2.5em;
        margin-bottom:1em;
        position:relative;
    }
    .detail_title:after {
        content:"";
        display:block;
        line-height:0;
        overflow:hidden;
        position:absolute;
        left:0;
        bottom:-3px;
        width:30%;
        border-bottom:3px solid #000;
    }
}
@media screen and (max-width: 768px) {
    .detail_title {
        background-color: #666;
        color: #fff;
        font-weight: bold;
        margin-bottom: 0.5em;
        padding:/* 0.2em */0.5em;
    }
}
/*----------------------------------------
.contents_box相殺
----------------------------------------*/
.contents_box .catop_h2,
/*.contents_box .catop_h3,*/
.contents_box .catop_h4,
.contents_box .catop_h5,
.contents_box .catop_h6 { margin-top:0; }
/*========================================
coupon_box　クーポン券基礎要素
========================================*/
dl.coupon_box dt img {
    float: left;
    margin-right: 0.7em;
}
dl.coupon_box .price_box strong { font-size: 1.5em; }
dl.coupon_box .price_box span { display: inline-block; }

@media screen and (max-width: 768px) {
    dl.coupon_box dt strong { display: block; }
    dl.coupon_box .price_box { text-align:center; }
    dl.coupon_box dd.price_box,
    dl.coupon_box dd.item { clear:both; }
}
/*========================================
バナーレイアウト
========================================*/
div.bn_layout1,
.bn_layout1 > li,
.bn_layout2 > li,
.bn_layout3 > li,
.bn_layout4 > li,
.bn_layout5 > li,
.bn_p3s2 > li { margin-bottom:0.7em; }
.bn_layout1 > li a,
.bn_layout2 > li a,
.bn_layout3 > li a,
.bn_layout4 > li a,
.bn_layout5 > li a,
.bn_p3s2 > li a {
    display:block;
    text-decoration:none;
}
.bn_layout2 > li,
.bn_layout3 > li,
.bn_layout4 > li,
.bn_layout5 > li,
.bn_p3s2 > li {
    font-size:0.88em;
    line-height:1.3;
}
.bn_layout1 img,
.bn_layout2 img,
.bn_layout3 img,
.bn_layout4 img,
.bn_layout5 img,
.bn_p3s2 img { margin-bottom:0.1em;}
.bn_layout1 img + span,
.bn_layout2 img + span,
.bn_layout3 img + span,
.bn_layout4 img + span,
.bn_layout5 img + span,
.bn_p3s2 > li + span { padding-top:0.3em; }
 .bn_layout1 li > a > span:not(.img_box), .bn_layout2 li > a > span:not(.img_box), .bn_layout3 li > a > span:not(.img_box), .bn_layout4 li > a > span:not(.img_box), .bn_layout5 li > a > span:not(.img_box), .bn_p3s2 li > a > span:not(.img_box) {
 display:block;
 padding-bottom:1.2em;
}
/*.bn_layout1 { text-align:center; }*/
.bn_layout1 img {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.bn_layout2:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.bn_layout2 { min-height: 1px; }
* html .bn_layout2 {/*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
.bn_layout3:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.bn_layout3 { min-height: 1px; }
* html .bn_layout3 {/*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
.bn_layout4:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.bn_layout4 { min-height: 1px; }
* html .bn_layout4 {/*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
.bn_layout5:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.bn_layout5 { min-height: 1px; }
* html .bn_layout5 {/*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
.bn_p3s2:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.bn_p3s2 { min-height: 1px; }
* html .bn_p3s2 {/*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
.bn_layout2 > li {
    float:left;
    width:49%;
}
@media screen and (max-width: 768px) {
    #top_category .bn_layout2 > li {
        padding: 1%;
        width:50%;
    }
}
.bn_layout2 > li:nth-child(even) {
margin-left:2%;
}
@media screen and (max-width: 768px) {
    #top_category .bn_layout2 > li:nth-child(even) {
}
margin-left:0% !important;
}
.bn_layout3 > li {
    float:left;
    width:32%;
    margin-right:2%;
}
.bn_layout3 > li:nth-child(3n) {
margin-right:0;
}
.bn_layout4 > li {
    float:left;
    width:23.8%;
    margin-right:1.6%
}
.bn_layout4 > li:nth-child(4n) {
margin-right:0;
}
.bn_layout5 > li {
    float:left;
    width:18.8%;
    margin-right:1.5%
}
.bn_layout5 > li:nth-child(5n) {
margin-right:0;
}
@media screen and (min-width: 768px) {
    .bn_p3s2 > li {
        float:left;
        width:32%;
        margin-right:2%
    }
    .bn_p3s2 > li:nth-child(3n) {
        margin-right:0;
    }
}
@media screen and (max-width: 768px) {
    .bn_p3s2 > li {
        float:left;
        width:49%;
    }
    .bn_p3s2 > li:nth-child(even) {
        margin-left:2%;
    }
}
/*========================================
ページインデックス
========================================*/
div.page_index {
    border:3px double #ccc;
    margin-bottom:1em;
}
/*========================================
20230130追記 化粧品カテTOP========================================*/
@media screen and (max-width: 768px) {
    #skintop div.page_index,
    #healthtop div.page_index {
        border:none;
        margin-bottom:1em;
    }
}
div.page_index ul {
    font-size:0.9em;
    line-height:1;
}
/*========================================
20230130追記 化粧品カテTOP
========================================*/
@media screen and (max-width: 768px) {
    #skintop div.page_index ul,
    #healthtop div.page_index ul {
        font-size: 0.70em;
        line-height: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 0px;
        justify-content: space-between;
    }
}
div.page_index li {
    display:inline-block;
    margin-right:1em;
}
/*========================================
20230130追記 化粧品カテTOP
========================================*/
@media screen and (max-width: 768px) {
    #skintop div.page_index li,
    #healthtop div.page_index li {
        border: 1px solid #ccc;
        display: block;
        width: 32.3%;
        margin-right:0em;
    }
    #skintop div.page_index ul li:first-child,
    #healthtop div.page_index ul li:first-child{    background: #dedede;
    }
    #skintop div.page_index li a,
    #healthtop div.page_index li a{
        padding: 7% 0%;
    }
}
div.page_index li a {
    padding-top:0.25em;
    padding-bottom:0.25em;
}
div.page_index li a:before { color:#00569c; }
/*----------------------------------------
PC
----------------------------------------*/
@media screen and (min-width: 768px) {
    div.page_index {
        display:table;
        width:100%;
        border-collapse:separate;
        border-spacing:0 0.6em;
        border-right:none;
        border-left:none;
    }
    div.page_index .title,
    div.page_index ul {
        display:table-cell;
        vertical-align:middle;
    }
    div.page_index .title {
        white-space:nowrap;
        padding-right:1.5em;
        font-weight:normal;
    }
    div.page_index ul {
        border-left:0.1em dotted #ccc;
        padding-left:1em;
    }
    div.page_index .title:before {
        content:"";
        display:block;
        float:left;
        border-left:0.3em solid #00569c;
        margin-right:0.5em;
        height:1.5em;
    }
}
/*----------------------------------------
SPH
----------------------------------------*/
@media screen and (max-width: 768px) {
    div.page_index {
        padding:0.4em;
        border-left:none;
        border-right:none;
        text-align:center;
        font-size:0.88em;
    }
}
/*========================================
20230130追記 化粧品カテTOP
========================================*/
@media screen and (max-width: 768px) {
    #skintopdiv.page_index,
    #healthtopdiv.page_index{
        padding:0;
        text-align:center;
        font-size:1em;
    }
    div.page_index .title + ul {
        border-top:0.1em dotted #ccc;
        margin-top:0.4em;
        padding-top:0.4em;
    }
}
/*========================================
ページインデックス
========================================*/
/*.page_index{overflow:hidden;margin-bottom:1em;}
.page_index .title{display:none;}
.page_index li{float:left;}
@media screen and (min-width: 768px) {
    .page_index li{width:25%;}
}
@media screen and (max-width: 768px) {
    .page_index li{width:50%;font-size:0.8em;}
}
/*========================================
.sns_list
========================================*/
ul.sns_list {
    background: -moz-linear-gradient(top, #FFF 0%, #FFF 3%, #E6E6E6 3%, #FFF);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03, #FFF), color-stop(0.03, #E6E6E6), to(#FFF));
    border-radius:0.5em;
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em;
    border: 0.1em solid #CCC;
    overflow:hidden;
    display:table;
    border-collapse:separate/*角丸対策*/;
    table-layout:fixed;
    width:95%;
    margin:0.5em auto;
    font-size:0.83em;
}
@media screen and (max-width: 768px) {
    ul.sns_list {
        font-size:0.7em;
        margin-bottom:1em;
    }
}
ul.sns_list li {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    border-left:0.1em dotted #ccc;
}
ul.sns_list li:first-child { border:0; }
ul.sns_list li a {
    display:block;
    padding:0.3em;
    text-decoration:none;
}
@media screen and (max-width: 768px) {
    ul.sns_list li a { padding:0.5em; }
}
ul.sns_list li a:hover { opacity:0.7; }
ul.sns_list li a img {
    vertical-align:middle;
    margin:0.3em;
    width:1.5em;
    height:auto;
}
ul.sns_list li a span { display:inline-block; }
/*ul.sns_list li.sns_facebook { background:#4267b2; }
ul.sns_list li.sns_twitter { background:#1b95e0; }
ul.sns_list li.sns_line { background:#00c300; }*/
/*========================================
tab_title 開閉式タイトル
========================================*/
.tab_title:after {
    content:"\e9ab";
    font-family:icomoon;
    opacity:0.7;
    font-weight:normal;
    display:block;
}
@media screen and (min-width: 768px) {
    .tab_title:after { float:right; }
}
@media screen and (max-width: 768px) {
    .tab_title { position:relative; }
    .tab_title:after {
        /*font-size:1.5em;*/
        font-family:icomoon;
        line-height:1;
        width:1em;
        height:1em;
        position:absolute;
        right:1em;
        top:0;
        bottom:0;
        margin:auto;
    }
}
.tab_title.ygchange:after { content:"\e96c"; }
h2.tab_title {
    border: 0.1em solid #000;
    font-size: 1.7em;
    padding:/* 0.2em */0.5em;
    margin: 0.5em 0;
    background:#fff;
}
h2.tab_title.ygchange { border-color:#666; }
@media screen and (max-width: 768px) {
    h2.tab_title {
        padding: 0.7em 0.5em;
        padding-right:2em;
        font-size: 1em;
    }
}
/*clearfix*/
.tab_box:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.tab_box { min-height: 1px; }
* html .tab_box { /*height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/ }
/*========================================
ネットポイント,商品番号表示,定期定価表示
========================================*/
dl.goodscode,
dl.netpoint,
dl.goodsprice {
    display:inline-block;
    margin-right:1em;
    font-size:0.75em;
}
.netpoint dt,
.netpoint dd,
.goodscode dt,
.goodscode dd,
.goodsprice dt,
.goodsprice dd { display:inline-block; }
/*========================================
電話番号
========================================*/
.contact_us {
    display:block;
    border:3px double #ccc;
    margin:1em 0;
    background-color:#fff;
    line-height:1.3;
}
.contact_us .title,
.contact_us .phone,
.contact_us .copy,
.contact_us ul {
    padding:0.5em 3%;
    display:block;
}
.contact_us .title {
    display:block;
    border-bottom:1px solid #ccc;
    font-weight:bold;
}
.contact_us .title span {
    font-weight:normal;
    font-size:0.8em;
    margin-left:0.2em;
    display:inline-block;
}
.contact_us .phone {
    font-size:0.83em;
    text-align:center;
}
.contact_us .phone a,
.contact_us .hours {
    display:inline-block;
    vertical-align:middle;
}
.contact_us .phone a {
    margin:0.3em 0;
    cursor:default;
    font-size:2.5em;
    font-weight:bold;
    text-decoration:none !important;
    color:#00569c !important;
    line-height:1;
}
.contact_us .copy {
    padding-top:0;
    display:block;
    font-size:0.75em;
}
#cs_health.contact_us .phone a { color:#060; }
#cs_skin.contact_us .phone a { color:#F36; }
/*文中使用*/
p .contact_us,
p .contact_us .title,
p .contact_us .title span,
p .contact_us .phone,
p .contact_us .phone a,
p .contact_us .hours,
p .contact_us .copy,
p span.phone,
p span.phone span,
li .contact_us,
li .contact_us .title,
li .contact_us .title span,
li .contact_us .phone,
li .contact_us .phone a,
li .contact_us .hours,
li .contact_us .copy {
    display:inline!important;
    padding:0;
    margin:0;
    font-weight:normal;
    border:none;
    font-size:1em!important;
    background:none;
    vertical-align:baseline;
}
p .contact_us .phone a,
li .contact_us .phone a { color:#333; }
.phone a:link {
    text-decoration:none;
    padding: 0 0.2em;
}
@media screen and (max-width: 768px) {
    .phone .hours { font-size:0.88em; }
}
/*========================================
特典アイコン
========================================*/
.privilege_list { box-sizing:content-box; }
.privilege_list li .title {
    padding:0.3em;
    text-align:center;
    color:#fff;
    line-height:1;
    border-radius:0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
}
.myprivilege_box h2 {
    padding:0.4em;
    border:0.15em solid #ccc;
    background-repeat:no-repeat;
    background-position:0.5em center;
    background-color:#fff!important;
    border-radius:0.4em;
    -webkit-border-radius:0.4em;
    -moz-border-radius:0.4em;
}
@media screen and (max-width: 768px) {
    .myprivilege_box h2 { font-size:1em!important; }
}
.myprivilege_box.vip h2,
.privilege_list li.vip .title {
    background-color:#d1b200;
    border-color:#d1b200;
}
.myprivilege_box.apavip h2,
.privilege_list li.apavip .title {
    background-color:#ff829a;
    border-color:#ff829a;
}
.myprivilege_box.special h2,
.privilege_list li.special .title {
    background-color:#Ff7800;
    border-color:#Ff7800;
}
.myprivilege_box.coupon h2,
.privilege_list li.coupon .title {
    background-color:#FC0;
    border-color:#FC0;
}
.myprivilege_box.dhccard h2,
.privilege_list li.dhccard .title {
    background-color:#55a1ff;
    border-color:#55a1ff;
}
.myprivilege_box.discount h2,
.privilege_list li.discount .title {
    background-color:#54aea5;
    border-color:#54aea5;
}
.myprivilege_box.birthday h2,
.privilege_list li.birthday .title {
    background-color:#F33;
    border-color:#F33;
}
.myprivilege_box.skin h2,
.privilege_list li.skin .title {
    background-color:#7acce4;
    border-color:#7acce4;
}
.myprivilege_box h2:before,
.privilege_list li .title:before {
    margin:0.1em 0.2em;
    font-family:"icomoon";
    font-weight:normal;
}
.myprivilege_box.vip h2:before,
.privilege_list li.vip .title:before { content:"\e94e"; }
.myprivilege_box.apavip h2:before,
.privilege_list li.apavip .title:before { content:"\e915"; }
.myprivilege_box.special h2:before,
.privilege_list li.special .title:before { content:"\e938"; }
.myprivilege_box.coupon h2:before,
.privilege_list li.coupon .title:before { content:"\e90f"; }
.myprivilege_box.dhccard h2:before,
.privilege_list li.dhccard .title:before { content:"\e909"; }
.myprivilege_box.discount h2:before,
.privilege_list li.discount .title:before { content:"\e942"; }
.myprivilege_box.birthday h2:before,
.privilege_list li.birthday .title:before { content:"\e904"; }
.myprivilege_box.skin h2:before,
.privilege_list li.skin .title:before { content:"\e948"; }
/*========================================
ご連絡
========================================*/
.renraku_list { box-sizing:contents-box; }
.renraku_list li.cs .date { display:block; }
/*========================================
customerstatus
========================================*/
#customerstatus .tokuten_box {
    background:#f0f0f0;
    padding:0.5em 0.7em;
    margin-bottom:1em;
    border:1px solid #ccc;
    line-height:1.4;
}
#customerstatus .name {
    border-bottom:1px dotted #666;
    padding-bottom:0.5em;
    margin-bottom:0.5em;
    font-weight:bold;
}
#customerstatus .name span { display:inline-block; }
#customerstatus a:hover { opacity:0.7; }
#customerstatus dl { margin-bottom:1em; }
#customerstatus dt { margin-bottom:0.2em; }
#customerstatus dt a {
    display:block;
    text-decoration:none;
}
#customerstatus dt a:after {
    content:"\e983";
    font-family:icomoon;
    color:#333;
    display:block;
    width:1em;
    float:right;
}
#customerstatus dd {
    text-align:center;
    background:#fff;
    color:#f30;
    padding:0.6em 0.5em;
    border-radius:0.3em;
    -webkit-border-radius:0.3em;
    -moz-border-radius:0.3em;
    box-shadow: rgb(204, 204, 204) 1px 1px 2px 1px inset;
    -webkit-box-shadow: rgb(204, 204, 204) 1px 1px 2px 1px inset;
    -moz-box-shadow: rgb(204, 204, 204) 1px 1px 2px 1px inset;
}
#customerstatus .tokuten_rankup dd strong { font-size:1.3em; }
#customerstatus .tokuten_rankup dd span { display:inline-block; }
#customerstatus .tokuten_netpoint dd strong { font-size:1.5em; }
#customerstatus li {
    padding:0.3em 0;
    border-top:1px dotted #ccc;
    margin:0;
}
#customerstatus li:first-child { border:none; }
#customerstatus li a {
    text-decoration:none;
    display:block;
    padding-right:1em;
    background:url("//www.dhc.co.jp/sitetop/image/arrow.gif") no-repeat right center;
}
#customerstatus .privilege_list li .title {
    display:block;
    float:left;
}
#customerstatus .privilege_list li .copy {
    margin-left:2.5em;
    display:block;
}
#customerstatus .tokuten_box .privilege_list strong {
    font-size:1em;
    color:#333;
    font-weight:normal;
}
#customerstatus .privilege_list li { text-align:left; }
#customerstatus .btn_box {
    margin:0/*form_common相殺*/;
    margin-top:0.5em;
}
#customerstatus .btn_box div { margin-top:0.5em; }
#customerstatus .btn_box div a {
    font-size:1em;
    display:block;
}
#customerstatus .btn_box .btn_stamp a {
    background:#fff;
    padding:0.5em;
}
#customerstatus .btn_box .btn_stamp a:before {
    content:"\e94c";
    font-family:icomoon;
    margin-right:0.2em;
    font-weight:normal;
    font-size:1.4em;
    vertical-align:-0.1em;
    opacity:0.7;
}
#customerstatus .renraku_list li { text-align:left; }
#customerstatus .renraku_list .date { display:block; }
/*----------------------------------------
仮ログインクーポン
----------------------------------------*/
#customerstatus strong.red {
    display:block;
    text-align:center;
    font-size:1.15em;
    background:#ff3;
    padding:0.2em 0;
    margin-bottom:0.3em;
    border-radius:1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
}
#body_sitetop #customerstatus strong.red:before {
    content:"\e90f";
    font-weight:normal;
    font-family:"icomoon";
    margin-right:0.2em;
}
/*========================================
検索サジェスト
========================================*/
.np-keyword-suggest,
.np-item-suggest {
    position:absolute;
    left:0;
    top:0;
    border:0.2em solid #ccc;
    background:#fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0.3em 0.3em 0.5em 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0.3em 0.3em 0.5em 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0.3em 0.3em 0.5em 0;/*text-transform:uppercase;*/
}
.np-keyword-suggest { width:20em; }
.np-keyword-suggest .item {
    line-height:1.4!important;
    padding:0.4em 0.5em;
    border-bottom:0.1em solid #ccc;
    text-align:left;
    padding-left:4em;
    background-image:url("//www.dhc.co.jp/common/image/icon_goods.svg");
    background-repeat:no-repeat;
    background-position:0.5em center;
    background-size:3em;
    -webkit-background-size:3em;
    -moz-background-size:3em;
    -o-background-size:3em;
    -ms-background-size:3em;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.np-keyword-suggest-group-query .item { background-image:url("//www.dhc.co.jp/common/image/icon_keyword.svg"); }
.np-keyword-suggest .item:hover { background-color:#f0f0f0; }
.np-item-suggest { width:30em; }
.np-item-suggest .title { display:none; }
.upper * { line-height:1.5; }
.suggest_upper_area,
.suggest_upper_content { padding:0.7em 0.5em; }
.suggest_upper_area .title {
    display:block;
    text-align:left;
    font-weight:bold;
}
.suggest_upper_content { padding-bottom:1em; }
.suggest_upper_content .name { display:none; }
.suggest_upper_content .display_matrix { text-align:center; }
.suggest_upper_content .display_matrix li {
    display:inline-block;
    width:30%;
    float:none;
    margin:0 0.2em;
    white-space:nowrap;
}
/*----------------------------------------
画像サジェストのボタン独自設定
----------------------------------------*/
#search_box .btn_search { padding-bottom:1em; }
.btn_search a { color:#fff!important; }
/*========================================
ad_footer_banner 左下に固定するバナー
========================================*/
.ad_footer_banner {
    position:fixed;
    width:80%;
    bottom:2%;
    left:2%;
    z-index:100;
}
.ad_footer_banner img {
    max-height:16vh;
    box-shadow: rgb(0 0 0) 0 0 0.5em 0;
    -webkit-box-shadow: rgb(0 0 0) 0 0 0.5em 0;
    -moz-box-shadow: rgb(0 0 0) 0 0 0.5em 0;
}
.ad_footer_banner a img:hover {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
    outline:0.2em solid #fff;
}
/*========================================
動画iframeのレスポンシブ
========================================*/
.movie_box { text-align:center;position:relative;width:100%;padding-top:56.25%; }
.movie_box iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
/*========================================
list_number
========================================*/
.list_number { counter-reset:li; }
.list_number > li {
    position:relative;
    list-style:none;
    text-indent:-1.8em;
    padding-left:1.8em;
    font-size:1em;
    margin-bottom:0.3em;
}
.list_number > li:before {
    content:counter(li);
    counter-increment:li;
    font-weight:bold;
    padding:0 0.3em;
    font-family:Tahoma, Geneva, sans-serif;
    color:#666;
    border:0.1em solid #666;
    margin-right:0.5em;
}
/*========================================
20220413更新_PCのみ画像をシャキッとさせる
========================================*/
@media screen and (min-width: 768px) {
    .bn_layout1 img,
    .bn_layout2 img,
    .bn_layout3 img,
    .bn_layout4 img,
    .bn_layout5 img,
    .bn_p3s2 img,
    .thum_menu img,
    .thum_menu2 img{image-rendering:-webkit-optimize-contrast; }
}

/*修正*/
#what, #kind, #parts, #cause, #care, #items, #start {
    font-size: 2.0em;
    font-weight: 700;
    position: relative;
    margin-top: 60px;
    /* 前のh2との隙間調整 */
    padding: 6px 12px 5px 12px;
    /* 上右下左パディング */
    border: 2px solid #0058aa;
    /* 青い四角形の枠線 */
    cursor: default;
    color: #0058aa;
    /* 青文字に変更 */
    /* 下線の代わりに枠線に変更したので border-bottom は削除 */
}

.box {
　　width: 100%;
}

#sec06cont01 > div > img {
    width: 50%;
}

#sec06cont02 > div > img {
    width: 50%;
}

#sec06cont03 > div > img {
    width: 60%;
}

#sec06cont04 > div > img {
    width: 30%;
}

#sec06cont05 > div > img {
    width: 60%;
}

#sec06cont06 > div > img {
    width: 50%;
}

.table th, .table td {
    vertical-align: middle;
    text-align: left;
}

@media screen and (max-width: 768px) {
    #what, #kind, #parts, #cause, #care, #items, #start {
        font-size: 1.3em;
        font-weight: 600;
    }
}