@charset "utf-8";

/************************************************
common
************************************************/

.wrap {
  width: 100%;
  max-width: 100%;
  margin: 20px auto 30px;
}

.wrap .inner {
  width: 92%;
  max-width: 980px;
  margin: 0px auto;
}

.wrap h1,
.wrap h2,
.wrap h3,
.wrap h4,
.wrap h5,
.wrap dt,
.wrap dd,
.wrap li,
.wrap th,
.wrap td,
.wrap p,
.wrap a {
  color: #555555 !important;
}

.pankuzu {
  width: 96%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.wrap .inner .sns {
  margin-bottom: 50px;
}

.wrap .inner .sns ul {
  text-align: center;
}

.wrap .inner .sns li {
  display: inline-block;
  margin: 0 10px;
}

.w95p {
  width: 95% !important;
}
.w90p {
  width: 90% !important;
}
.w85p {
  width: 85% !important;
}
.w80p {
  width: 80% !important;
}
.w75p {
  width: 75% !important;
}
.w70p {
  width: 70% !important;
}
.w65p {
  width: 65% !important;
}
.w60p {
  width: 60% !important;
}
.w55p {
  width: 55% !important;
}
.w50p {
  width: 50% !important;
}
.w45p {
  width: 45% !important;
}
.w40p {
  width: 40% !important;
}
.w35p {
  width: 35% !important;
}
.w30p {
  width: 30% !important;
}
.w25p {
  width: 25% !important;
}
.w20p {
  width: 20% !important;
}
._mg-c {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media screen and (min-width: 751px) {
  .wrap .inner .sns li img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.6;
  }

  .wrap .inner .sns li img:hover {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
  }
}
@media screen and (max-width: 750px) {
  .sp-w100p {
    width: 100% !important;
  }
}

/************************************************
top
************************************************/

.mainVisual {
  width: 100%;
  height: 350px;
  margin-bottom: 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../../images/column/main-bg.png);
  background-repeat: repeat-x;
}

.mainVisual .inner {
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 0px;
  background-position: calc(50% - 337.5px) 0;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.mainVisual h1 {
  position: absolute;
  left: calc(50% - 0px);
  top: calc(50% - 90px);
  width: 465px;
}
.mainVisual h1 span {
  font-size: 18px;
  display: block;
  text-align: right;
  color: #50291e;
  border-radius: 15px;
  margin-bottom: 20px;
  letter-spacing: 0.2em;
}

.mainVisual h1 img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 1158px) {
  .mainVisual h1 {
    left: auto;
    right: 10px;
  }
}
@media screen and (max-width: 880px) {
  .mainVisual h1 span {
    font-size: 16px;
  }
}

@media screen and (max-width: 750px) {
  .mainVisual {
    height: 370px;
    background-repeat: repeat;
  }
  .mainVisual h1 span {
    font-size: 12px;
    text-align: center;
  }
  .mainVisual h1 {
    position: static;
    width: 90%;
    margin: 30px auto 0 auto;
  }
  .mainVisual .inner {
    background-position: bottom;
    background-size: contain;
  }
}
@media screen and (max-width: 320px) {
  .mainVisual {
    height: 310px;
  }
  .mainVisual h1 span {
    font-size: 10px;
  }
}

.wrap .inner.archive-column {
  margin-top: 70px;
}

.wrap .inner.top-column h2 {
  font-size: 16px;
  text-align: center;
  position: relative;
  margin-bottom: 110px;
}

.wrap .inner.top-column h2::after {
  content: "";
  width: 100px;
  height: 10px;
  border-radius: 5px;
  background: #e5e5e5;
  display: block;
  position: absolute;
  bottom: -50px;
  left: calc(50% - 50px);
  z-index: -1;
}

.wrap .inner ul.category {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  display: -ms-flex;
  -ms-flex-flow: wrap;
  -ms-justify-content: center;
  display: -webkit-flex;
  -webkit-flex-flow: wrap;
  -webkit-justify-content: center;
  margin-bottom: 50px;
}

.wrap .inner ul.category li {
  text-align: center;
}

.wrap .inner ul.category li a {
  font-size: 12px;
}

.wrap .inner ul.category li a span {
  border-radius: 40px;
  height: 80px;
  width: 80px;
  display: block;
  margin-bottom: 4px;
  background-color: #ccc;
  background-size: cover;
  background-position: center center;
}

.wrap .inner ul.category li.cat-item-all a::before {
  background-image: url("/images/2020/03/vol-01-hero.jpg");
}
.wrap .inner ul.category li.cat-item-test1 a::before {
  background-image: url("/images/2020/03/aaaa.jpg");
}
.wrap .inner ul.category li.cat-item-test2 a::before {
  background-image: url("/images/2020/03/bbbb.jpg");
}
.wrap .inner ul.category li.cat-item-test3 a::before {
  background-image: url("/images/2020/03/cccc.jpg");
}

.wrap .inner ul.category li {
  margin-right: 70px;
}

.wrap .inner ul.category li:last-child {
  margin-right: 0px;
}

.wrap .inner .article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.article .clm {
  width: calc(33% - 30px * 2 / 3);
  margin: 0 30px 30px 0;
}

.article .clm .image {
  width: 100%;
  height: 308px;
  border-radius: 10px 50px;
  background-size: cover;
  margin-bottom: 20px;
}

@media screen and (min-width: 751px) {
  .article .clm:nth-child(3n) {
    margin-right: 0px;
  }

  /****** オンマウス ******/

  .wrap .inner ul.category li:hover a:before {
    background-color: rgba(255, 255, 255, 0.3);
    background-blend-mode: lighten;
  }
  .wrap .inner ul.category li:hover a {
    text-decoration: underline;
  }
  .clm .image {
    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
  }
  .clm:hover .image {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
  }
  .clm:hover p {
    opacity: 0.7;
  }
}

@media screen and (max-width: 750px) {
  .wrap .inner ul.category {
    align-items: center;
    justify-content: space-around;
    -ms-justify-content: space-around;
    -webkit-justify-content: space-around;
  }
  .wrap .inner ul.category li a::before {
    border-radius: 30px;
    height: 60px;
    width: 60px;
  }
  .wrap .inner ul.category li {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .article .clm {
    width: calc(50% - 20px * 1 / 2);
    margin: 0 20px 20px 0;
  }
  .article .clm:nth-child(2n) {
    margin-right: 0px;
  }
  .article .clm .image {
    height: 200px;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 375px) {
  .article .clm .image {
    height: 160px;
  }
}

@media screen and (max-width: 320px) {
  .article .clm {
    width: 100%;
    margin: 0 0 20px 0;
  }
  .article .clm .image {
    height: 250px;
  }
}

.t-head,
.c-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.t-head {
  margin-bottom: 10px;
}

.t-head > :last-child,
.c-head > :last-child {
  margin-left: auto;
}

.t-head span,
.c-head span {
  font-size: 12px;
  color: #fff;
  border-radius: 10px;
  padding: 0px 10px;
  min-width: 84px;
  box-sizing: border-box;
  text-align: center;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.c-head span {
  margin-bottom: 10px;
}

.time {
  font-size: 12px;
  color: #666;
}

.contents-column .time {
  text-align: right;
  margin-bottom: 5px;
}

.time::before {
  font-family: "Font Awesome 5 Free";
  content: "\f073";
  font-weight: 400;
  margin-right: 5px;
}

.c-head h1.title {
  font-size: 30px;
  margin-left: 15px;
  font-weight: bold;
  margin-top: -10px;
  letter-spacing: -0.02em;
  line-height: 1.5;
  width: calc(100% - 100px);
}

.c-head .time {
  padding-bottom: 5px;
}

.brnad-bnr {
  margin-top: 30px;
}
.brnad-bnr a img {
  width: 100%;
  border: 1px solid #ccc;
}

.bottom_sns {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-head h1.title {
    width: 100%;
  }
}

/************************************************
detail
************************************************/

.contents-column .c-head {
  margin-top: 50px;
}

.contents-column .visual {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  border-radius: 30px 5px;
  overflow: hidden;
}

.contents-column .visual img {
  width: 100%;
}

.inner.contents-column .sc-img {
  margin-bottom: 20px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.inner.contents-column .sc-img img {
  width: 100%;
}

.inner.contents-column p.read {
  font-size: 16px;
  position: relative;
  margin-bottom: 110px;
}

.inner.contents-column p.read::after {
  content: "";
  width: 100px;
  height: 10px;
  border-radius: 5px;
  background: #e5e5e5;
  display: block;
  position: absolute;
  bottom: -50px;
  left: calc(50% - 50px);
  z-index: -1;
}

.inner.contents-column p.read-h2 {
  font-size: 16px;
  margin-bottom: 60px;
}

@media screen and (max-width: 750px) {
  .c-head h1.title {
    font-size: 20px;
    margin-left: 0px;
    font-weight: bold;
    margin-top: 1px;
    letter-spacing: -0.02em;
  }
  .inner.contents-column p.read {
    text-align: left;
    line-height: 180%;
  }
  .inner.contents-column p.read-h2 {
    margin-bottom: 30px;
  }
}

/****** 記事監修 ******/

.writer {
  width: 100%;
  border-radius: 20px;
  background: transparent;
  border: 1px dotted #ababab;
  margin-bottom: 70px;
}

.writer dl {
  display: flex;
  flex-flow: wrap;
  display: -ms-flex;
  -ms-flex-flow: wrap;
  display: -webkit-flex;
  -webkit-flex-flow: wrap;
  padding: 30px;
  box-sizing: border-box;
  align-items: center;
}

.writer dl dt {
  border-radius: 50px;
  height: 100px;
  width: 100px;
  display: block;
  background-color: #ccc;
  margin-right: 30px;
  display: none;
}

.writer dl dd {
  width: calc(100% - 130px);
}

.writer dl dd p.name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

@media screen and (max-width: 750px) {
  .writer dl {
    padding: 20px;
  }
  .writer dl dt {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
  }
  .writer dl dd {
    width: 100%;
  }
  .writer dl dd p.name {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

/****** 目次 ******/

dl.index {
  display: flex;
  flex-flow: wrap;
  display: -ms-flex;
  -ms-flex-flow: wrap;
  display: -webkit-flex;
  -webkit-flex-flow: wrap;
  box-sizing: border-box;
  margin-bottom: 100px;
}

dl.index dt {
  font-size: 18px;
  letter-spacing: 0.25em;
  text-align: left;
  color: #555;
  font-family: "Arial Black", Gadget, sans-serif;
  padding-right: 50px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #acacac;
}

dl.index dt::before {
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  font-weight: 900;
  margin-right: 12px;
}

dl.index dd {
  padding-left: 70px;
}

dl.index dd li._h2 {
  margin-bottom: 4px;
  margin-top: 15px;
}

dl.index dd li._h2:first-child {
  margin-top: 0px;
}

dl.index dd li._h3 {
  margin-bottom: 8px;
  margin-left: 3em;
}

dl.index dd li:last-child {
  margin-bottom: 0px;
}

dl.index dd li a {
  font-size: 16px;
  position: relative;
}

dl.index dd li a:hover {
  text-decoration: underline;
}

dl.index dd li._h2 a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f13a";
  font-weight: 900;
  position: absolute;
  top: 0.1em;
  left: -1.5em;
}

dl.index dd li._h3 a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  font-weight: 900;
  position: absolute;
  top: 0.1em;
  left: -1.5em;
}

_:-ms-lang(x)::-ms-backdrop,
dl.index dd li._h2 a::before,
_:-ms-lang(x)::-ms-backdrop,
dl.index dd li._h3 a::before {
  top: -0.1em;
}

@media screen and (max-width: 750px) {
  dl.index dt {
    font-size: 16px;
    width: 100%;
    padding-bottom: 5px;
    padding-right: 0px;
    border-right-style: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #acacac;
    margin-bottom: 15px;
  }
  dl.index dd {
    padding-left: 25px;
  }
  dl.index dd li._h2 {
    margin-bottom: 10px;
  }
  dl.index dd li._h3 {
    margin-left: 2em;
  }
  dl.index dd li a {
    font-size: 14px;
  }
}

/****** 記事本文 ******/

.inner.contents-column section {
  margin-bottom: 100px;
}

.inner.contents-column section hr {
  border: none;
  margin-bottom: 50px;
}
.note {
  text-indent: -1em;
  margin-left: 1em;
}
.note.is_snack {
  font-size: 16px;
  margin-bottom: 20px;
}
/* テキスト */

.inner.contents-column section p {
  font-size: 16px;
  line-height: 180%;
  margin-bottom: 1.5em;
}

.inner.contents-column h2 {
  background-image: url(/images/column/h2-bg.png);
  background-color: #ffe9e9;
  font-size: 26px;
  font-weight: bold;
  padding: 15px 20px;
  box-sizing: border-box;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #e2bebe;
  margin-bottom: 20px;
}

.inner.contents-column h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: #ef8d8d;
  padding-left: 10px;
}

.inner.contents-column h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.inner.contents-column h5 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: #fff6f6;
  padding-bottom: 4px;
}

.inner.contents-column h5 span {
  font-size: inherit;
  font-weight: inherit;
  display: inline-block;
  position: relative;
}

.inner.contents-column h5 span::after {
  content: "";
  position: absolute;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: #ffc8c8;
  bottom: -9px;
  left: 0;
  width: 7em;
}

@media screen and (max-width: 750px) {
  .inner.contents-column h2 {
    font-size: 20px;
  }
  .inner.contents-column h3 {
    font-size: 18px;
  }
  .inner.contents-column h4 {
    font-size: 16px;
  }
  .inner.contents-column h5 {
    font-size: 16px;
  }
}

/****** 装飾系 ******/

/* 囲み */

._box {
  width: 100%;
  border: 1px solid #ffe9e9;
  box-sizing: border-box;
  padding: 30px;
  background-color: #fff6f6;
  border-radius: 15px;
  margin-bottom: 30px;
}

@media screen and (max-width: 750px) {
  ._box {
    padding: 18px;
  }
}

/* リスト */

ul.list {
  margin: 0 0 30px 0;
}
ul.list li {
  font-size: 16px;
  line-height: 2;
  margin-left: 1.5em;
}

.images {
  display: block;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 35px;
}
.images img {
  width: 100%;
}
.images {
  position: relative;
}
.images::before,
.images::after {
  content: "";
  position: absolute;
  transform: rotate(-35deg);
  width: 70px;
  height: 25px;
  background-color: #ffffff;
  z-index: 1;
}
.images::before {
  top: -10px;
  left: -25px;
  border-bottom: 1px solid #e5e5e5;
}
.images::after {
  bottom: -10px;
  right: -25px;
  border-top: 1px solid #e5e5e5;
}

ul._box .images::before,
ul._box .images::after {
  content: "";
  position: absolute;
  transform: rotate(-35deg);
  width: 70px;
  height: 25px;
  background-color: #fff6f6;
  z-index: 1;
}
ul._box .images::before {
  top: -10px;
  left: -25px;
  border-bottom: 1px solid #f5c6c6;
}
ul._box .images::after {
  bottom: -10px;
  right: -25px;
  border-top: 1px solid #f5c6c6;
}

ul.list li h4 {
  position: relative;
}

ul.list li h4::before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";
  font-weight: 900;
  color: #ef8d8d;
  position: absolute;
  left: -1.5em;
}

ul.list li:last-child p {
  margin-bottom: 0px;
}

/* 数字リスト */

ol.number-list {
  counter-reset: my-counter;
  list-style: none;
  margin: 0 0 30px 0;
}
ol.number-list > li {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 30px;
  position: relative;
}

ol.number-list > li:last-child > p {
  margin-bottom: 0px;
}

ol.number-list li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #ef8d8d;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
  color: #ffffff;
  font-size: 90%;
  line-height: 1;
  position: absolute;
  top: 2px;
  left: 0;
}

/* チェックリスト */

.inner.contents-column h3.check {
  border: none;
  padding-left: 0;
  margin-bottom: 10px;
}

.inner.contents-column h3.check::before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-weight: 900;
  color: #ef8d8d;
  margin-right: 10px;
}

@media screen and (max-width: 750px) {
  ol.number-list li:before {
    height: 20px;
    width: 20px;
    top: 1px;
  }
}

_:-ms-lang(x)::-ms-backdrop,
ol.number-list li:before {
  top: 4px;
}

/* 表組 */

table.table-list {
  margin-bottom: 30px;
}

table.table-list,
table.table-list tr,
table.table-list th,
table.table-list td {
  border-collapse: collapse;
  border: 1px solid #ffe9e9;
}

table.table-list th {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 15px;
  box-sizing: border-box;
  text-align: left;
  background-color: #fff6f6;
  width: 30%;
}

table.table-list th span {
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  display: inline-block;
  vertical-align: middle;
}

table.table-list.list th::before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-weight: 900;
  margin-right: 8px;
  color: #ef8d8d;
  display: inline-block;
  vertical-align: middle;
}

table.table-list.list th span {
  width: calc(100% - 1.7em);
}

table.table-list.step th::before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";
  font-weight: 900;
  margin-right: 8px;
  color: #ef8d8d;
  display: inline-block;
}

table.table-list.step.non-ico th::before {
  display: none;
}

table.table-list td {
  font-size: 16px;
  padding: 15px 20px;
  box-sizing: border-box;
}

@media screen and (max-width: 750px) {
  table.table-list tr:last-child td:last-child {
    border-bottom: solid 2px #ffe9e9;
    width: 100%;
  }
  table.table-list th,
  table.table-list td {
    border-bottom: none;
    display: block;
    width: 100%;
  }
}

/* 表組2 */

table.scroll-tbl {
  margin-bottom: 30px;
  width: 100%;
}

table.scroll-tbl,
table.scroll-tbl caption,
table.scroll-tbl tr,
table.scroll-tbl th,
table.scroll-tbl td {
  border-collapse: collapse;
  border: 1px solid #ffe9e9;
}

table.scroll-tbl th {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 15px;
  box-sizing: border-box;
  text-align: center;
  background-color: #f2f9fd;
}

table.scroll-tbl caption {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 15px;
  box-sizing: border-box;
  text-align: center;
  background-color: #ffe9e9;
}

table.scroll-tbl td {
  font-size: 16px;
  padding: 15px 15px;
  box-sizing: border-box;
  text-align: center;
}

table.scroll-tbl.baby-pregnant-woman {
  margin-bottom: 5px;
}

table.scroll-tbl.baby-pregnant-woman td {
  text-align: left;
}

@media screen and (max-width: 750px) {
  table.scroll-tbl caption {
    font-size: 14px;
    padding: 5px;
  }
  table.scroll-tbl.feed th,
  table.scroll-tbl.feed td {
    font-size: 12px;
    padding: 10px 5px;
  }
}

table.scroll-tbl.feed th:first-child,
table.scroll-tbl.feed td:first-child {
  background-color: #fffcec;
}

table.scroll-tbl.baby-pregnant-woman th:first-child,
table.scroll-tbl.baby-pregnant-woman td:first-child {
  background-color: #fffcec;
}

/* 商品回遊リンク */

.link-box a {
  display: block;
  background: #fff;
  border: 2px solid #d8d8d8;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 30px;
  padding: 20px 30px;
  box-sizing: border-box;
  position: relative;
}

.link-box a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  color: #ffc8c8;
  font-weight: 900;
  position: absolute;
  top: calc(50% - 18px);
  right: 30px;
  font-size: 25px;
}

.link-box a dl {
  display: flex;
  flex-flow: wrap;
  display: -ms-flex;
  -ms-flex-flow: wrap;
  display: -webkit-flex;
  -webkit-flex-flow: wrap;
  align-items: center;
}

.link-box a dt {
  width: 70px;
  margin-right: 30px;
}

.link-box a dt img {
  width: 100%;
}

.link-box a dd {
  font-size: 18px;
  font-weight: bold;
}

.link-box a dd span {
  display: block;
  font-size: 16px;
  font-weight: normal;
  margin-top: 1px;
}

/* コンテンツ回遊リンク */

.article-box a {
  display: block;
  background-color: #f7f7f7;
  width: 100%;
  margin-bottom: 15px;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e0e0e0;
}
.article-box a::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 0;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: #fff #fff #ddd #ddd;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1);
}

.article-box a dl {
  display: flex;
  flex-flow: wrap;
  display: -ms-flex;
  -ms-flex-flow: wrap;
  display: -webkit-flex;
  -webkit-flex-flow: wrap;
  align-items: center;
}

.article-box a dt {
  width: 200px;
  margin-right: 30px;
}

.article-box a dt img {
  width: 100%;
}
.article-box a dd {
  width: calc(100% - 230px);
}

.article-box a dd p {
  margin-top: 5px;
  margin-bottom: 0 !important;
}

.article-box a dd span {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  display: block;
  padding-left: 1.3em;
  color: #555555;
}

.article-box a dd span::before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  font-weight: 900;
  font-size: 16px;
  position: absolute;
  left: 0em;
  top: 4px;
}

_:-ms-lang(x)::-ms-backdrop,
.article-box a dd span::before {
  top: 0px;
}

@media screen and (max-width: 750px) {
  .article-box a dt {
    width: 100%;
    margin-right: 0px;
    padding-bottom: 15px;
  }
  .article-box a dd {
    width: 100%;
  }
}

.calculate {
  display: block;
  background: #fff;
  border: 1px solid #d8d8d8;
  width: 100%;
  margin-bottom: 30px;
  padding: 20px 30px;
  box-sizing: border-box;
}
.calculate.is_snack {
  margin-bottom: 10px;
}
.calculate ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.calculate ul li {
  font-size: 18px;
  text-align: center;
  position: relative;
}
.calculate ul > li > span {
  font-size: 22px;
  display: block;
  margin-top: 0px;
  font-weight: bold;
}
.calculate ul > li > span > span {
  font-size: 16px;
  font-weight: bold;
  padding-left: 5px;
}
.calculate ul li:nth-of-type(1) {
  margin-right: 30px;
}
.calculate ul li:nth-of-type(1):after {
  content: "×";
  position: absolute;
  right: -10px;
  bottom: 22px;
}
.calculate ul li:nth-of-type(2) {
  margin-right: 30px;
}
.calculate ul li:nth-of-type(2):after {
  content: "＝";
  position: absolute;
  right: -25px;
  bottom: 16px;
}
.calculate ul li:nth-of-type(3) {
}
.inner.contents-column .calculate h5 {
  border-bottom-color: #f5f5f5;
}
@media screen and (max-width: 750px) {
  .calculate ul li {
    font-size: 14px;
    width: 100%;
  }
  .calculate ul > li > span {
    font-size: 20px;
  }
  .calculate ul > li > span > span {
    font-size: 14px;
  }
  .calculate ul li:nth-of-type(1) {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .calculate ul li:nth-of-type(1):after {
    right: auto;
    left: calc(50% - 0.5em);
    bottom: -20px;
  }
  .calculate ul li:nth-of-type(2) {
    margin-right: 0;
    margin-bottom: 30px;
  }
  .calculate ul li:nth-of-type(2):after {
    right: auto;
    left: calc(50% - 0.5em);
    bottom: -25px;
    transform: rotate(90deg);
  }
}
.bnr {
  margin: 0 auto 50px;
}
.bnr img {
  width: 100%;
  box-sizing: border-box;
}
.bnr a img {
  border: 1px solid #dedaba;
}
@media screen and (max-width: 750px) {
  .bnr {
    margin: 0 auto 30px;
  }
}
.bcs-list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.bcs-list-name {
	background: #ffe9e9;
	text-align: center;
	padding: 15px;
	font-size: 16px;
	font-weight: bold;
	width: 100%;
}
.bcs-list > dl {
	width: 20%;
	border-top: 1px solid #ffe9e9;
	border-left: 1px solid #ffe9e9;
	border-bottom: 1px solid #ffe9e9;
	box-sizing: border-box;
}
.bcs-list > dl:last-child {
	border-right: 1px solid #ffe9e9;
}
.bcs-list > dl > dt{
	padding: 15px;
	background: #fff6f6;
	text-align: center;
	font-size: 16px;
    font-weight: bold;
	border-bottom: 1px solid #ffe9e9;
}
.bcs-list > dl > dd.bcs-list-image{
	padding: 30px 30px 0 30px;
}
.bcs-list > dl > dd.bcs-list-txt{
	padding: 20px;
	font-size: 15px;
}
.table-feed-caption {
	margin-top: -20px;
	text-align: right;
}
@media screen and (max-width: 900px) {
	.bcs-list-name {
		padding: 15px 10px;
		font-size: 15px;
	}
	.bcs-list > dl {
		width: 100%;
		border-top: 1px solid #ffe9e9;
		border-left: 1px solid #ffe9e9;
		border-right: 1px solid #ffe9e9;
		border-bottom: none;
	}
	.bcs-list > dl > dt{
		font-size: 15px;
	}
	.bcs-list > dl:last-child {
		border-bottom: 1px solid #ffe9e9;
	}
	.bcs-list > dl > dd.bcs-list-image{
		padding: 30px 30% 0 30%;
	}
	.table-feed-caption {
		font-size: 12px !important;
	}
}
.example {
	margin-top: 30px;
}
.example > h5{
	margin-top: 30px;
	border-bottom: solid 2px #ef8d8d !important;
}
.example > ul {
	margin-bottom: 30px;
}
.example > ul > li {
	font-size: 16px;
	list-style: disc;
	list-style-position: outside;
	margin-left: 1.5em;
	margin-bottom: 5px;
}
.example > ul > li:last-child {
	margin-bottom: 0;
}