@charset "UTF-8";
/* Di
==================================================*/
h1.h_circle_l {
  margin-bottom: 15px; }

/* Di Navigation
========================================*/
#diNav {
  display: none;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #ff6d00;
  z-index: 9998; }
  #diNav > ul {
    *zoom: 1;
    list-style: none none outside;
    width: 1000px;
    margin: 0 auto;
    padding: 8px 0; }
    #diNav > ul:after {
      content: "";
      display: table;
      clear: both; }
    #diNav > ul > li {
      float: left;
      width: 158px;
      height: 42px;
      margin: 0;
      border: 1px solid #fff;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      text-align: center; }
      #diNav > ul > li + li {
        margin: 0 0 0 8px; }
      #diNav > ul > li > a {
        display: block;
        height: 42px;
        background: transparent url(../image/icon_angle_down_w.png) 50% 28px no-repeat;
        color: #fff;
        font-size: 94%;
        font-weight: bold;
        line-height: 28px;
        text-decoration: none;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out; }
      #diNav > ul > li:hover > a, #diNav > ul > li.current > a {
        color: #333;
        background: #ffe4e4 url(../image/icon_angle_down_k.png) 50% 30px no-repeat;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out; }

/* Di Info Header
========================================*/
h1.h_circle_l > span {
  font-size: 55%; }

#diAnotherName {
  margin: 0 0 20px;
  font-weight: bold; }

#diModified {
  float: right;
/*   clear: both; */
  margin: 0 0 25px;
  font-weight: bold;
  text-align: right; }

#diTag {
  *zoom: 1;
  float: left;
  list-style: none none outside;
  margin: 0 0 20px;
  padding: 10px 0 0; }
  #diTag:after {
    content: "";
    display: table;
    clear: both; }
  #diTag > li {
    float: left;
    margin: 0 15px 0 0;
    font-weight: bold;
    line-height: 28px; }
    #diTag > li.l {
      background: #009844; }
    #diTag > li.g {
      background: #70AEDC; }
    #diTag > li.a {
      background: #CF65DC; }
    #diTag > li:first-child {
      min-width: 115px;
      padding: 0 10px;
      color: #fff;
      text-align: center; }
      #diTag > li:first-child + li:before {
        content: "［"; }
      #diTag > li:first-child + li:after {
        content: "］"; }

#diRelated {
  float: right;
  width: 260px;
  margin: 20px 0; }
  #diRelated > dd {
    width: 218px; }
    #diRelated > dd > h3 {
      margin: 0 0 14px;
      padding: 0;
      color: #fff;
      font-size: 82%;
      line-height: 28px;
      text-align: center; }
      #diRelated > dd > h3.l {
        background: #009844; }
      #diRelated > dd > h3.g {
        background: #65a9dc; }
      #diRelated > dd > h3.a {
        background: #c170a9; }
    #diRelated > dd > ul {
      list-style: none none outside;
      margin: 0 0 20px;
      padding: 0; }
      #diRelated > dd > ul > li {
        margin: 0 0 10px;
        padding: 0 0 10px;
        border-bottom: 1px dotted #999;
        font-size: 88%;
        position: relative;
        padding-left: 20px; }
        #diRelated > dd > ul > li:before {
          content: url(../image/icon_caret_right.png);
          display: block;
          position: absolute;
          top: 0;
          left: 0; }

/* Di Info Contents
========================================*/
.pageNav {
  clear: both; }

/* Di Picture
------------------------------*/
#diPicture {
  float: left;
  width: 370px;
  margin: 0;
  padding: 0 0 70px; }
  #diPicture #mainPicture {
    width: 360px;
    height: 360px;
    margin: 0 0 6px;
    border: 1px solid #999;
    text-align: center; }
    #diPicture #mainPicture > img {
      max-width: 360px;
      max-height: 360px;
      height: auto; }
  #diPicture #pictureList {
    *zoom: 1;
    list-style: none none outside;
    margin: 0 0 8px;
    padding: 0; }
    #diPicture #pictureList:after {
      content: "";
      display: table;
      clear: both; }
    #diPicture #pictureList > li {
      float: left;
      width: 84px;
      height: 84px;
      margin: 0 6px 6px 0;
      border: 1px solid #999;
      text-align: center;
      overflow: hidden;
      cursor: pointer; }
      #diPicture #pictureList > li > a {
        display: block;
        height: 82px;
        padding: 1px; }
      #diPicture #pictureList > li img {
        max-width: 82px;
        max-height: 82px;
        height: auto; }
      #diPicture #pictureList > li.selected {
        width: 82px;
        height: 82px;
        border: 2px solid #f00; }
        #diPicture #pictureList > li.selected > a {
          padding: 0; }
  #diPicture #pictureDl {
    width: 362px; }

/* Di Data
------------------------------*/
#diData {
  float: right;
  width: 590px;
  margin: 0;
  padding: 0 0 70px; }

.diDataList {
  width: 100%;
  margin: 0 0 10px;
  border: 1px solid #999;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  empty-cells: show; }
  .diDataList > tbody > tr > th {
    width: 177px;
    padding: 10px 0;
    background: #efefef;
    border: 1px solid #999;
    border-right: 0;
    font-size: 88%;
    vertical-align: middle; }
    .diDataList > tbody > tr > th > span {
      font-weight: normal; }
  .diDataList > tbody > tr > td {
    padding: 10px;
    border: 1px solid #999;
    border-left: 0;
    vertical-align: middle; }
    .diDataList > tbody > tr > td > p {
      margin: 0;
      padding: 10px; }
  .diDataList > tbody > tr.diDComponent > td, .diDataList > tbody > tr.diDPh > td, .diDataList > tbody > tr.diDOsmosis > td {
    padding: 0; }
    .diDataList > tbody > tr.diDComponent > td > p + p, .diDataList > tbody > tr.diDPh > td > p + p, .diDataList > tbody > tr.diDOsmosis > td > p + p {
      border-top: 1px solid #999; }
    .diDataList > tbody > tr.diDComponent > td > p > span, .diDataList > tbody > tr.diDPh > td > p > span, .diDataList > tbody > tr.diDOsmosis > td > p > span {
      display: block;
      font-size: 75%; }
  .diDataList > tbody > tr.diDCode > td {
    padding: 0; }
    .diDataList > tbody > tr.diDCode > td > p {
      float: left; }
      .diDataList > tbody > tr.diDCode > td > p + p {
        border-left: 1px solid #999; }
  .diDataList > tbody > tr.diDShape > td {
    padding: 0; }
    .diDataList > tbody > tr.diDShape > td > dl {
      float: left;
      margin: 0;
      padding: 0;
      width: 100%; }
      .diDataList > tbody > tr.diDShape > td > dl > dt {
        display: block;
        margin: 0;
        padding: 10px 0 10px 10px;
        font-size: 75%;
        font-weight: bold;
        line-height: 1.73; }
      .diDataList > tbody > tr.diDShape > td > dl > dd {
        margin: 0;
        padding: 10px 0 10px 10px;
        border-top: 1px dotted #999; }
      .diDataList > tbody > tr.diDShape > td > dl + dl {
        border-left: 1px solid #999; }

.diDataList .medical_fee_wrap{
  text-align: center;
  margin-right: 10px;
}
.diDataList .medical_fee_wrap .medical_fee_btn{
  position: relative;
  font-size: 12px;
}
.diDataList .medical_fee_wrap .medical_fee_btn::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent #f00;
  margin-right: 5px;
}
/* .diDataList .medical_fee_wrap .medical_fee_btn img {
  width: 24px;
  height: auto;
  border-radius: 50%;
} */

.diDComparison {
  margin: 30px 0 0;
  padding: 0 10px;
  border: 1px solid #999; }
  .diDComparison > dt {
    padding: 10px 0;
    font-weight: bold; }
  .diDComparison > dd {
    margin: 0;
    padding: 10px;
    border-top: 1px dotted #999; }
    .diDComparison > dd > ul {
      list-style: none none outside;
      margin: 0;
      padding: 0; }
      .diDComparison > dd > ul > li + li {
        margin: 10px 0 0; }

/* Di Code List
========================================*/
#diCodeList {
  padding: 0 0 70px; }
  #diCodeList .diCodeList {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #999;
    empty-cells: show;
    table-layout: fixed; }
    #diCodeList .diCodeList th, #diCodeList .diCodeList td {
      padding: 10px 5px; }
    #diCodeList .diCodeList > thead > tr > th {
      background: #efefef;
      border: 1px solid #999;
      border-bottom: none; }
    #diCodeList .diCodeList > tbody > tr > td {
      border: 1px solid #999;
      border-top: none;
      text-align: center; }
      #diCodeList .diCodeList > tbody > tr > td > img {
        display: block;
        margin: 0 auto 10px; }
  #diCodeList #diCodeListBtn {
    list-style: none none outside;
    margin: -10px 0 0;
    padding: 0; }
    #diCodeList #diCodeListBtn > li {
      margin: 0;
      text-align: right; }
      #diCodeList #diCodeListBtn > li + li {
        margin-top: 20px; }
      #diCodeList #diCodeListBtn > li > p {
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        *zoom: 1;
        *display: inline;
        margin: 0; }

/* Di News List
========================================*/
#diNewsList {
  padding: 0 0 70px; }

/* Di Assets List
========================================*/
#diAssets {
  padding: 0 0 35px; }

/* Di Character
========================================*/
#diCharacter {
  padding: 0 0 70px; }

/* Di Q&A
========================================*/
#diQA {
  padding: 0 0 70px; }

/* Di Inquiry
========================================*/
#diInquiry {
  margin: 0 0 70px; }


.zaikoSearchProduct-wrap {
  display: flex;
  justify-content: space-between;
  padding-bottom: 35px;
}

.zaikoSearchProduct-wrap .zaikoSearchProduct {
  width: calc(100% - 300px);
  box-sizing: border-box;
}
.zaikoSearchProduct-wrap .zaikoSearchProduct  .zaikoSearchProduct-bg{
  background-color: #efefef;
  padding: 20px 40px;
}
.zaikoSearchProduct-wrap .zaikoSearchProduct dl {
  margin-top: 0;
}
.zaikoSearchProduct-wrap .zaikoSearchProduct dd {
  margin-left: 0;
}
.zaikoSearchProduct-wrap .zaikoSearchProduct dd form {
  display: flex;
  width: 100%;
}

.zaikoSearchProduct-wrap .zaikoSearchProduct h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.25rem;
}
.zaikoSearchProduct-wrap .zaikoSearchProduct-note {
  font-size: 0.75rem;
  text-indent: -1em;
  padding-left: 1em;
}
.zaikoSearchProduct-wrap .zaikoSearchProduct-other {
  text-align: right;
  margin-bottom: 0;
}
.zaikoSearchProduct-wrap .zaikoSearchProduct-other a {
}
.zaikoSearchProduct-wrap .zaikoSearchProduct-other a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent #f00;
  margin-right: 5px;
}

.zaikoSearchProduct-wrap #zaikoSearchProduct {
  flex: 1;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
   vertical-align: middle;
   height: 44px;
   padding: 0 15px;
   background: #fff;
   border: 1px solid #999;
   font-size: 14px;
   line-height: 44px;
   vertical-align: top;
 }
.zaikoSearchProduct-wrap #zaikoSearchProduct:focus {
   border: 1px solid #f00;
   outline: 0;
 }


 .zaikoSearchProduct-wrap #zaikoSearchProductBtn {
 height: 46px;
 padding: 0;
 background-color: #333;
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
 background-size: 100%;
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #000000));
 background-image: -moz-linear-gradient(top, #666666, #000000);
 background-image: -webkit-linear-gradient(top, #666666, #000000);
 background-image: linear-gradient(to bottom, #666666, #000000);
 border: 0;
 vertical-align: middle;
 width: 54px;
color: #fff;}
 .zaikoSearchProduct-wrap #zaikoSearchProductBtn img {
   vertical-align: middle;
 }
 .zaikoSearchProduct-wrap #zaikoSearchProductBtn:hover {
   background:#333 none; }
 .zaikoSearchProduct-wrap #zaikoSearchProductBtn:focus {
   outline: 0; }


.zaikoSearchProduct-wrap #diRelated,
.zaikoSearchProduct-wrap #diModified {
  float: none;
}

@media screen and (min-width: 768px) and (max-width: 998px) {
  .zaikoSearchProduct-wrap .zaikoSearchProduct .zaikoSearchProduct-bg {
    padding: 20px;
  }
}
@media screen and (max-width: 767px) {
  .zaikoSearchProduct-wrap {
    flex-direction: column;
  }
  .zaikoSearchProduct-wrap .zaikoSearchProduct {
    width: calc(100% - 20px);
    margin: 10px 10px 0;

  }
  .zaikoSearchProduct-wrap .zaikoSearchProduct .zaikoSearchProduct-bg{
    padding: 20px 10px;
  }
  .zaikoSearchProduct-wrap .zaikoSearchProduct h3 {
    font-size: 1.125rem;
  }
}


#main section .header-btn {
  display: flex;
  align-items: center;
  margin-bottom: 23px;
}
#main section .header-btn h3 {
  width: calc(100% - 254px - 1rem);
  margin-bottom: 0;
}
#main section .header-btn .btn54 {
  width: 254px;
  margin-left: 1rem;
}

@media screen and (max-width: 767px) {
  #main section .header-btn {
    flex-direction: column;
  }
  #main section .header-btn h3 {
    width: calc(100% - 40px);
    margin-bottom: 1rem;
  }
  #main section .header-btn .btn54 {
    width: calc(100% - 40px);
    box-sizing: border-box;
    margin: 0 auto;
  }
}


/* Edit 22.12 */
.diRelated-wrap .shipmentStatus{
  margin-top: 20px;
}
.diRelated-wrap .shipmentStatus:first-of-type{
  margin-top: 0;
}
.shipmentStatus {
  width: 258px;
  margin: 0;
  border: 1px solid #999;

}
.shipmentStatus dt {
  background-color: #efefef;
  border-bottom: 1px solid #999;
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 6px;
}
.shipmentStatus dd {
  margin: 0;
  line-height: 1.5;
  padding: 8px 12px;
}
.shipmentStatus .shipmentStatus-txt-f {
  font-size: 15px;
  padding-right: 0;
}
.shipmentStatus dd span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.shipmentStatus dd span::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
}
.shipmentStatus dd span.usual::before {
  background-color: #0059b2;
}
.shipmentStatus dd span.limit::before {
  background-color: #FF8C00;
}
.shipmentStatus dd span.suspension::before {
  content: none;
  /* background-color: #fff; */
}
.diRelated-wrap .shipmentStatus-btm-link {
  margin: 10px 0 0;
}
.diRelated-wrap .shipmentStatus-btm-link a {
  font-size: 15px;
}
.diRelated-wrap .shipmentStatus-btm-link a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent #f00;
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .shipmentStatus {
    width: auto;
    margin: 20px 10px 0;
  }
  .diRelated-wrap .shipmentStatus:first-of-type{
    margin-top: 20px;
  }
  .diRelated-wrap .shipmentStatus-btm-link {
    margin: 10px 10px 0;
  }
}