@charset "utf-8";

.csdc_only_area {
    width: 100%;
    margin: 0 auto;
}
.csdc_only_area li {
    list-style: none;
}
.csdc_only_area a {
    color: #333;
    text-decoration: none;
}
.csdc_only_area img {
    width: 100%;
    height: auto;
}
.cd_slider_area_sp {
    display: none;
}
.csdc_only_area {
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
}
.cd_slider_area, .about_csdc, .csdc_na_area, .cd_ranking_area, .csdc_pr_area {
    margin: 0 0 8%;
}
p.brand_name {
    color: #999;
}
.csdc_logo_sp {
    display: none;
}


/* メニューリスト */
header.csdc_imenu_list {
    margin-bottom: 5%;
}
nav.csdc_gnav:hover {
    cursor: pointer;
}
span.cd_nav_title {
    font-size: 1.4rem;
}
nav.csdc_gnav a.cd_ctgrt {
    padding: 0;
}
nav.csdc_gnav ul {
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
}
nav.csdc_gnav a {
    font-size: 1.6rem;
}

nav.csdc_gnav li::marker {
    display: none;
}
nav.csdc_gnav {
    background: #000;
}
span.cd_nav_title {
    color: #fff;
}

/* 以下カテゴリメニューについての記述 */
/*2階層目以降は横並びにしない*/
/*nav.csdc_gnav ul ul {
    display: block;
}*/
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav.csdc_gnav ul li{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 2% 1%;
}

/*ナビゲーションのリンク設定*/
nav.csdc_gnav ul li a{
  display: block;
  text-decoration: none;
  color: #333;
  padding:20px 35px;
  transition:all .3s;
}

nav.csdc_gnav ul li li a{
  padding:10px 0px;
}
nav.csdc_gnav li.cd_has-child ul{
    padding: 0;
    /*絶対配置で位置を指定*/
      position: absolute;
      /*left:0;*/
      top:80px;
      z-index: 4;
    /*形状を指定*/
      background:#f2f2f2;
      width:1150px;
    /*はじめは非表示*/
      visibility: hidden;
      opacity: 0;
    /*アニメーション設定*/
      transition: all .3s;
}

/*hoverしたら表示*/
nav.csdc_gnav li.cd_has-child:hover > ul,
nav.csdc_gnav li.cd_has-child ul li:hover > ul,
nav.csdc_gnav li.cd_has-child:active > ul,
nav.csdc_gnav li.cd_has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}


/*ナビゲーションaタグの形状*/
nav.csdc_gnav li.cd_has-child ul li a{
    color: #333;
    font-size: 1.4rem;
}

nav.csdc_gnav li.cd_has-child ul ul li a {
    background: #eee;
}

/*nav.globalnav-wrap li.has-child ul li:last-child a{
  border-bottom:none;
}*/

nav.csdc_gnav li.cd_has-child ul li a:hover,
nav.csdc_gnav li.cd_has-child ul li a:active{
  /*background:#eee;*/
    opacity: .6;
}
nav.csdc_gnav ul.cd_nav_child {
    display: flex;
    flex-wrap: wrap;
    left: 0;
    justify-content: left;
}
nav.csdc_gnav ul.cd_nav_child li {
    width: 20%;
    padding: 1% 0;
    /*border-right: solid 1px #fff;
    border-bottom: solid 1px #fff;*/
}
nav.csdc_gnav ul.cdn_child02 {
    position: absolute;
    left: -100%;
}
nav.csdc_gnav ul.cdn_child03 {
    position: absolute;
    left: -200%;
}
nav.csdc_gnav ul.cdn_child01::after, nav.csdc_gnav ul.cdn_child02::after, nav.csdc_gnav ul.cdn_child03::after {
    content: "";
    position: absolute;
    top: -20px;
    border: 12px solid transparent;
    border-bottom: 13px solid #f2f2f2;
    transition: opacity 300ms;
}
nav.csdc_gnav ul.cdn_child01::after {
    left: 9%;
}
nav.csdc_gnav ul.cdn_child02::after {
    left: 29%;
}
nav.csdc_gnav ul.cdn_child03::after {
    left: 49%;
}
.na_area ul::after {
    content: "";
    display: block;
    width: 23%;
}



/* slide */
.cd_slider_area ul {
    padding: 0;
}

/* ブランドについて */
.about_csdc a span {
    background-color: #000;
    color: #fff;
    display: block;
    text-align: center;
    padding: 1.5%;
    font-size: 1.5rem;
}

/*コンテンツタイトル共通*/
.csdc_only_area div.csdc_na_title {
    font-family: 'Noto Serif JP', serif;
    font-weight: 200;
    font-size: 3rem;
}
.csdc_na_title {
    margin-bottom: 3%;
    text-align: center;
}
.cd_nat_en {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: 3.8rem;
    letter-spacing: 0.04em;
}
.cd_nat_ja {
    font-size: 1.4rem;
    display: block;
    font-weight: 400;
    font-family: 'Noto Sans JP', sans-serif;
}


/* NEWARRIVAL */
.csdc_na_iarea ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
}
.csdc_na_iarea ul::after {
    content: "";
    display:block;
    width: /*48.5%*/23%; /*アイテムが増えるごとに微調整*/
}
.csdc_na_iarea li {
    width: 23%;
    margin: 0 0 5%;
}


/* RANKING */
.cd_ranking_itema ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
}
.cd_ranking_itema li {
    width: 18%;
    margin: 0 0 5%;
}
.cd_ranking_icon {
    position: absolute;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 50%;
    font-size: 12px;
    color: #333333;
    width: 30px;
    height: 30px;
    line-height: 2.5;
}
.cd_rank01, .cd_rank02, .cd_rank03 {
    color: #fff;
    background-color: #000;
}


/*PROMOTION*/
.cd_promotion_item_sp {
    display: none;
}
div.csdc_pr_area div.cd_promotion_item_pc img {
    margin: 0 0 3%;
}


/* CATEGORY */
.csdc_ctgr_con_sp {
    display: none;
}
.ctgr_box ul, .ctgr_box {
    padding: 0;
}
/*.cd_cbox_child {
    display: none;
}*/
.cd_ctgr_list {
    cursor: pointer;
}
ul.ctgr_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}
li.cd_cbox01, li.cd_cbox02, li.cd_cbox03, li.cd_cbox04, li.cd_cbox05, li.cd_cbox06 {
    width: calc(100% / 3);
    text-align: center;
    color: #fff;
    border-bottom: solid 1px;
    border-left: solid 1px;
}
.ocbtn_con {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 1.7%;
    border-right: solid 1px;
    border-left: solid 1px;
}
.ocbtn_con span.material-icons-round {
    font-size: 1.8rem;
    padding-left: 1%;
}
li.cd_cbox01 span, li.cd_cbox02 span, li.cd_cbox03 span, li.cd_cbox04 span, li.cd_cbox05 span, li.cd_cbox06 span {
    background: #000;
    display: block;
    padding: 5%;
}
ul.cd_cbox_child {
    background: #f2f2f2;
}
div.cd_ctgr_list ul li li a{
  padding:10px 0px;
}
div.cd_ctgr_list li.cd_cbox ul{
    padding: 0;
    /*絶対配置で位置を指定*/
      /*position: absolute;
      top:80px;*/
      z-index: 999999;
    /*形状を指定*/
      background:#f2f2f2;
      width:1150px;
    /*はじめは非表示*/
      /*visibility: hidden;
      opacity: 0;*/
    /*アニメーション設定*/
      transition: all .3s;
    display: flex;
    flex-wrap: wrap;
    border-right: solid 1px #fff;
}
li.cd_cbox ul.cd_cbox_child li {
    width: calc(100% / 3);
    border-right: solid 1px #fff;
    border-bottom: solid 1px;
}
ul.cd_cbox_child li span.cdcc_name {
    background: #f2f2f2;
    /*border-bottom: solid 1px #fff;*/
}
li.cd_cbox02 ul.cd_cbox_child, li.cd_cbox05 ul.cd_cbox_child {
    position: relative;
    left: -383px;
}
li.cd_cbox03 ul.cd_cbox_child, li.cd_cbox06 ul.cd_cbox_child {
    position: relative;
    left: -766px;
}
.cd_cbox_con {
    display: none;
}
ul.ctgr_box li.click span.cd_box_child.open {
    background: #fff;
    color: #000;
    border: solid 1px #000;
}


/*-------------------------------------------
ここからOur Storyページ記述
--------------------------------------------*/
.cdos_mainContainer h1, .cdos_mainContainer h2, .cdos_mainContainer p, .cdos_mainContainer li, .cdos_mainContainer span, .cdos_mainContainer a {
  font-family: "Hiragino Mincho W3 JIS2004", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "YuMincho", "游明朝", "游明朝体", serif;
}
.cdos_brand-statement .cdos_background-image {
    background-image: url(https://www.dojindo-pharmacy.com/ec/html/template/default/assets/img/cd/our_story/statement_bg.jpg);
    background-position: left;
}




/* 以下レスポンシブ */
@media screen and (max-width:768px) {
    .csdc_only_area {
        width: 90%;
        margin: 0 auto;
    }
    .csdc_imenu_list {
        display: none;
    }
    .cd_slider_area, .about_csdc, .csdc_na_area, .cd_ranking_area, .csdc_pr_area {
        margin: 20% 0 15%;
    }
    .cd_slider_area {
        display: none;
    }
    .cd_slider_area_sp {
        display: block;
    }
    .cd_slider_area_sp ul {
        padding: 0;
    }
    .breadcrumbs {
        display: none;
    }
    .csdc_logo {
        display: none;
    }
    .csdc_logo_sp {
        display: block;
    }
    .cd_nat_en {
        font-size: 2.8rem;
    }
    .cd_nat_ja {
        font-size: 1.3rem;
    }
    .csdc_na_title {
        margin-bottom: 8%;
    }
    .csdc_lg_area {
        margin-bottom: 3%;
    }
    
    /* CATEGORY */
    .csdc_ctgr_con_sp {
        display: block;
        margin-bottom: 15%;
    }
	/*
    .csdc_ctgr_con {
        display: none;
    }
	*/
    .ctgr_box {
        display: block;
    }
    li.cd_cbox01, li.cd_cbox02, li.cd_cbox03, li.cd_cbox04, li.cd_cbox05, li.cd_cbox06 {
        width: 100%;
    }
    .ocbtn_con {
        padding: 5%;
    }
    div.cd_ctgr_list ul li li a {
        padding: 7%;
        display: block;
        font-size: 1.3rem;
    }
    li.cd_cbox ul.cd_cbox_child li {
        width: 50%;
        border-bottom: solid 1px #fff;
    }
    ul.cd_cbox_child {
        display: flex;
        flex-wrap: wrap;
    }
    div.cd_ctgr_list li.cd_cbox ul {
        width: 100%;
    }
    ul.cd_cbox_child span.cdcc_name {
        background: #f2f2f2;
    }
    li.cd_cbox02 ul.cd_cbox_child, li.cd_cbox05 ul.cd_cbox_child {
        position: relative;
        left: 0;
    }
    li.cd_cbox03 ul.cd_cbox_child, li.cd_cbox06 ul.cd_cbox_child {
        position: relative;
        left: 0;
    }
    div.cd_cbox_con .ul.cd_cbox_child li span.cdcc_name {
        border-bottom: none;
    }
    span.cdcc_name_all01 {
        position: relative;
        top: 10px;
    }
    .cd_ctgr_list ul.ctgr_box li.cd_cbox ul.cd_cbox_child span.cdcc_name::after {
        content: none;
    }
    .cd_ctgr_list ul.ctgr_box li.cd_cbox span, .online_cous_btn a div.cd_cbox span {
        position: relative;
    }
    .cd_ctgr_list ul.ctgr_box li.cd_cbox span::after {
        content: "";
        position: absolute;
        display: block;
        width: 2vw;
        height: 2vw;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(45deg);
        bottom: 45%;
        margin: auto;
        right: 5%;
    }
    .online_cous_btn a div.cd_cbox span::after {
        content: "";
        position: absolute;
        display: block;
        width: 2vw;
        height: 2vw;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(315deg);
        bottom: 33%;
        margin: auto;
        left: 232px;
    }
    
    /* NEWARRIVAL */
    .csdc_na_area li {
        width: 45%;
    }
    .csdc_na_area li:nth-child(n):nth-child(-n+3) {
        margin: 0;
    }
    .csdc_na_iarea ul li {
        margin-bottom: 6%;
    }
    
    /* RANKING */
    .cd_ranking_itema {
        width: 100%;
        height: auto;
        overflow-x: scroll;
    }
    .cd_ranking_itema ul {
        width: 200%;
    }
    .cd_ranking_icon {
        position: relative;
    }
    .csdc_na_iarea ul {
        padding: 0;
    }
    
    /* PROMOTION */
    .cd_promotion_item_pc {
        display: none;
    }
    .cd_promotion_item_sp {
        display: block;
    }
    div.csdc_pr_area div.cd_promotion_item_sp img {
        margin: 0 0 3%;
    }
}