@charset "utf-8";

:root {
  --fc-normal-color: #444;
  --fc-white-color: white;
  --fc-black-color: black;
  --fc-gold-color: gold;
  --fc-grey-color: #666;
  --fc-red-color: #FA687D;
  --fc-red-l-color: red;
  --fc-red-d-color: red;
  --fc-pink-color: pink;
  --fc-pink-l-color: pink;
  --fc-pink-d-color: pink;
  --fc-blue-color: blue;
  --fc-blue-l-color: blue;
  --fc-blue-d-color: blue;
  --fc-green-color: green;
  --fc-green-l-color: green;
  --fc-green-d-color: green;
  --fc-yellow-color: yellow;
  --fc-yellow-l-color: yellow;
  --fc-yellow-d-color: yellow;
  --fc-orange-color: orange;
  --fc-orange-l-color: orange;
  --fc-orange-d-color: orange;
  --fc-brown-color: brown;
  --fc-brown-l-color: brown;
  --fc-brown-d-color: brown;

  --ff-mplus-font-family :"M PLUS Rounded 1c";
  --ff-serif-font-family :"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

  --bd-black-color: black;
  --bd-grey-color: grey;
  --bd-red-color: red;
  --bd-blue-color: blue;
  --bd-pink-color: pink;
  --bd-brown-color: brown;
  --bd-green-color: green;
  --bd-gold-color: gold;

  --bg-opa-color: rgba(255, 255, 255, 0.5);
  --bg-grey-color: #F5F5F5;
  --bg-yellow-color: yellow;
  --bg-beige-color: beige;
  --bg-blue-color: blue;
  --bg-pink-color: pink;
  --bg-green-color: green;

  --box-border-color: #888;
  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  --nallow-default-width: 1400px;
  --nallow-padding: 40px;

  --align-margin: 60px;
}

#main {
  font-size: 14px;
  color: #665755;
}

.heading-section {
  position: relative !important;
  margin-bottom: 30px !important;
  padding: 16px 20px 14px 20px !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  background: #857C77 !important;
}

.heading-section:before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  bottom: 1px !important;
  left: 1px !important;
  border: solid 2px #fff !important;
}

.h3 {
  position: relative;
  margin-bottom: 14px;
  padding: 0 0 0 26px;
  height: 50px;
  color: #fff;
  font-size: 15.6px;
  font-weight: 800;
  line-height: 20px;
  background: url(../images/h3_bg.png) left no-repeat;
}

.heading-bar {
  margin-bottom: 16px;
  padding: 8px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
  color: #fff;
  background: #857C77;
}

.heading-check {
  padding-left: 30px;
  margin: 0 0 10px 0;
  font-size: 15px;
  background: top 0.2em left 0 url(../images/list_check_bg.png) no-repeat;
}

.page-index {
  margin-bottom: 30px;
  padding: 20px 20px 10px 20px;
  border: solid 1px #857C77;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.page-index h4 {
  margin-bottom: 16px !important;
  padding: 8px !important;
  font-size: 19px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background: #857C77 !important;
}

.page-index ul li {
  display: flex !important;
  margin: 8px 0 14px 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.page-index ul li a {
  flex-grow: 1 !important;
  margin-left: 0.3em !important;
  color: #665755 !important;
}

.heading-line {
  margin-bottom: 14px;
  font-weight: 400;
  font-size: 20px;
  border-bottom: solid 2px #C3BDBA;
}

.list-indent li {
  margin-left: 1em;
  text-indent: -1em;
}

.list-check li {
  padding-left: 30px;
  margin: 0 0 6px 0;
  background: top 0.2em left 0 url(../images/list_check_bg.png) no-repeat;
}

.list-check li:last-child {
  margin-bottom: 0;
}

.list-faq dt {
  position: relative;
  margin-bottom: 14px;
  padding: 8px 56px 7px 56px;
  font-size: 16px;
  color: #fff;
  background: top 7px left 15px #837C78 url(../images/faq_bg.png) no-repeat;
  cursor: pointer;
}

.list-faq dt:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -2px;
  width: 15px;
  height: 3px;
  display: block;
  background: #fff;
}

.list-faq dt:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 21px;
  margin-top: -8px;
  width: 3px;
  height: 15px;
  display: block;
  background: #fff;
}

.list-faq dt.active:before {
  display: none;
}

.list-faq dd {
  display: none;
  margin-bottom: 22px;
}

.list-num > li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 28px;
  padding-bottom: 20px;
  border-bottom: solid 1px #707070;
}

.list-num > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.list-num > li:before {
  position: absolute;
  top: -4px;
  left: 0;
  content: '①';
  font-size: 20px;
}

.list-num > li:nth-child(2):before { content: '②'; }
.list-num > li:nth-child(3):before { content: '③'; }
.list-num > li:nth-child(4):before { content: '④'; }
.list-num > li:nth-child(5):before { content: '⑤'; }
.list-num > li:nth-child(6):before { content: '⑥'; }
.list-num > li:nth-child(7):before { content: '⑦'; }
.list-num > li:nth-child(8):before { content: '⑧'; }
.list-num > li:nth-child(9):before { content: '⑨'; }

.table-fill {
  width: 100%;
}

.table-fill th {
  padding: 16px 14px;
  color: #fff;
  font-weight: 800;
  background: #857C77;
  border: solid 1px #fff;
}

.table-fill td {
  padding: 16px 14px;
  background: #F5F5F5;
  border: solid 1px #fff;
}

hr.solid {
  display: block;
  height: 0;
  border: none;
  border-bottom: solid #999 1px;
}

.nowrap {
  white-space: nowrap;
}

.mw-200-pc {
  max-width: 200px;
}

.atopic-dermatitis-status li {
  margin-bottom: 10px;
  padding-left: 30px;
  background-position: left;
  background-repeat: no-repeat;
}

.atopic-dermatitis-status li:last-child {
  margin-bottom: 0;
}

.atopic-dermatitis-status li.allergen { background-image: url(../images/img_atopic-dermatitis_icon_allergen.png); }
.atopic-dermatitis-status li.immune-cells { background-image: url(../images/img_atopic-dermatitis_icon_immune-cells.png); }
.atopic-dermatitis-status li.cytokine { background-image: url(../images/img_atopic-dermatitis_icon_cytokine.png); }

.table-list {
  position: relative;
  width: 100%;
}

.table-list tr {
  border-bottom: solid 1px #f6f6f6;
}

.table-list tr:last-child {
  border-bottom: solid 1px #707070;
}

.table-list th {
  padding: 12px 10px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  background: #857B79;
  border: solid 1px #857B79;
}

.table-list td {
  padding: 8px 10px;
  background: #fff;
}

.table-list td:first-child {
  border-left: solid 1px #707070;
}

.table-list td:last-child {
  border-right: solid 1px #707070;
}

.table-list.mod-border th {
  border-right: solid 2px #B9B6B4;
}

.table-list.mod-border tr th:last-child {
  border-right: solid 1px #857B79;
}

.table-list.mod-border td {
  border-right: solid 1px #F5F5F5;
}

.table-list.mod-border tr td:last-child {
  border-right: solid 1px #707070;
}

.spot-box-care {
  padding: 6px 10px 10px 10px;
  background: #E7EFFB;
  border-radius: 4px;
}

.spot-box-care h5 {
  margin-bottom: 6px;
  padding-left: 6px;
  color: #407EBF;
  font-size: 16px;
  font-weight: 400;
}

.spot-box-care ul {
  display: flex;
  padding: 8px 16px;
  flex-wrap: wrap;
  column-gap: 30px;
  background: #fff;
}

.spot-box-care ul li:before {
  content: '';
  display: inline-block;
  margin-right: 8px;
  width: 9px;
  height: 9px;
  background: linear-gradient(to bottom, #A0BEE1, #6896D2);
  border-radius: 2px;
}

.spot-box-care ul li a {
  text-decoration: none;
}

.spot-box-care ul li a:hover {
  text-decoration: underline;
}

.syusa-box-care {
  padding: 6px 10px 10px 10px;
  background: #E7EFFB;
  border-radius: 4px;
}

.syusa-box-care h5 {
  margin-bottom: 6px;
  color: #3369B0;
  font-size: 17px;
  font-weight: 800;
}

.syusa-box-care h6 {
  margin-bottom: 6px;
  color: #3369B0;
  font-size: 15px;
  font-weight: 800;
}

.syusa-box-care ul {
  display: flex;
  padding: 8px 16px;
  flex-wrap: wrap;
  column-gap: 30px;
  background: #fff;
}

.syusa-box-care ul li:before {
  content: '';
  display: inline-block;
  height: 9px;
  border-radius: 2px;
}

.syusa-box-care ul li a {
  text-decoration: none;
}

.syusa-box-care ul li a:hover {
  text-decoration: underline;
}