@charset "utf-8";

.block-topics-detail h1 {
  font-family: var(--ff-serif);
  font-weight: 500;
}

.block-topics-detail-date {
  display: flex;
  align-items: center;
}

.block-topics-detail-date .item-date {
  color: var(--cl-gr-txt);
  font-size: 1.6rem;
  font-family: var(--ff-num);
  letter-spacing: 0.04em;
}

.block-topics-detail-date .item-tag {
  display: flex;
  margin: 0 -5px -5px 16px;
}

.block-topics-detail-date .item-tag span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin: 0 5px 5px 0;
  padding: 0 6px;
  background-color: #eef1ef;
  color: var(--cl-gr-txt);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.block-topics-detail figure,
.block-topics-detail-content figure {
  display: block;
  margin: 0;
  padding: 0;
}

.block-topics-detail img:not(.icon-img),
.block-topics-detail-content img:not(.icon-img) {
  display: block;
  height: auto;
  /* 早原追加分 */
  width: 100%;
  /* width: auto; */
  /* margin: 0 19%; */
}


.icon-img {
  height: 1em;
  width: auto !important;
  max-width: none !important;
  vertical-align: middle;
  margin-right: 0.4em;
  display: inline-block;
}


.block-topics-detail-content .ff-rs {
  font-family: var(--ff-num);
}

.block-topics-detail-content .topics-comment {
  font-size: 1.8rem;
  line-height: 1.666;
}

.block-topics-detail-content .topics-comment p + p {
  margin-top: 1.5em;
}

.block-topics-detail-content .topics-img-l figcaption {
  font-size: 1.4rem;
  text-align: center;
}

.block-topics-detail-content .topics-profile {
  display: flex;
  background-color: var(--cl-gn-bg);
}

.block-topics-detail-content .topics-green-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-topics-detail-content .topics-video-list .list-youtube iframe,
.block-topics-detail-content .topics-video-list .list-mp4 video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.block-topics-detail-content .topics-video-list .list-caption {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}

.block-topics-detail-content .topics-img-2col-list ul {
  display: flex;
  justify-content: space-between;
}

.block-topics-detail-content .topics-img-2col-list figcaption {
  font-size: 1.4rem;
}

.block-topics-detail-content .topics-publication {
  display: flex;
  background-color: var(--cl-gn-bg);
}

.block-topics-detail-content .topics-publication .item-user {
  font-size: 1.6rem;
}

.block-topics-detail-content .topics-publication .item-ttl {
  font-size: 1.6rem;
  font-weight: 700;
}

.block-topics-detail-content .topics-publication .item-comment {
  font-size: 1.4rem;
}

.block-topics-detail-content .topics-magazine-article .item-ttl {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.625;
}

.block-topics-detail-content .topics-magazine-article .item-comment {
  font-size: 1.4rem;
  line-height: 1.857;
}

.block-topics-detail-content .topics-tbl-1 table,
.block-topics-detail-content .topics-tbl-2 table,
.block-topics-detail-content .topics-tbl-3 table {
  border-collapse: collapse;
  table-layout: fixed;
}

.block-topics-detail-content .topics-tbl-1 th,
.block-topics-detail-content .topics-tbl-2 th,
.block-topics-detail-content .topics-tbl-3 th,
.block-topics-detail-content .topics-tbl-1 td,
.block-topics-detail-content .topics-tbl-2 td,
.block-topics-detail-content .topics-tbl-3 td {
  border-top: 1px solid var(--cl-gr-1);
  border-bottom: 1px solid var(--cl-gr-1);
  font-weight: 400;
}

.block-topics-detail-content .topics-tbl-1 th,
.block-topics-detail-content .topics-tbl-2 th,
.block-topics-detail-content .topics-tbl-3 th {
  background-color: var(--cl-gn-bg);
}

.block-topics-detail-content .topics-caution-list,
.block-topics-detail-content .topics-caution-no-list {
  font-size: 1.8rem;
  line-height: 1.444;
}

.block-topics-detail-content .topics-caution-no-list {
  counter-reset: listcautionnum;
}

.block-topics-detail-content .topics-caution-list li,
.block-topics-detail-content .topics-caution-no-list li {
  position: relative;
  padding-left: 30px;
}

.block-topics-detail-content .topics-caution-list li::before {
  content: "";
  display: block;
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: var(--cl-gn);
}

.block-topics-detail-content .topics-caution-no-list li::before {
  content: counter(listcautionnum) ".";
  position: absolute;
  left: 0;
  font-size: 2rem;
  font-family: var(--ff-num);
  counter-increment: listcautionnum;
}

.block-topics-detail-content .topics-article ul {
  display: flex;
  flex-wrap: wrap;
}

.block-topics-detail-content .topics-article .list-ttl {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.444;
}

.block-topics-detail-content .topics-article .list-comment {
  font-size: 1.8rem;
  line-height: 1.444;
}

.block-topics-detail-content .topics-article .vrt-1 li,
.block-topics-detail-content .topics-article .vrt-2 li {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.block-topics-detail-content .topics-article .list-video iframe,
.block-topics-detail-content .topics-article .list-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.block-topics-detail-content .topics-video-ttl .item-ttl {
  font-weight: 700;
  text-align: center;
}

.block-topics-detail-content .topics-video-ttl .item-youtube iframe,
.block-topics-detail-content .topics-video-ttl .item-mp4 video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.block-topics-detail-content .topics-link-list a {
  position: relative;
  text-decoration: underline;
}

.block-topics-detail-content .topics-link-list a,
.block-topics-detail-content .topics-btn-list a {
  font-size: 1.8rem;
}

.block-topics-detail-content .topics-btn-list .btn-gn span {
  position: relative;
}

.block-topics-detail-content .topics-link-list a::after,
.block-topics-detail-content .topics-btn-list .btn-gn span::after {
  content: "";
  display: inline-block;
  position: relative;
  margin-left: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.block-topics-detail-content .topics-link-list a.icon-outer::after {
  top: 1px;
  width: 14px;
  height: 14px;
  background-image: url(../../img/common/icon_link_outer.png);
}

.block-topics-detail-content .topics-link-list a.icon-pdf::after {
  top: 2px;
  width: 35px;
  height: 18px;
  background-image: url(../../img/common/icon_link_pdf.png);
}

.block-topics-detail-content .topics-btn-list .btn-gn.icon-outer span::after {
  width: 14px;
  height: 14px;
  background-image: url(../../img/common/icon_btn_outer.png);
}

.block-topics-detail-content .topics-btn-list .btn-gn.icon-pdf span::after {
  width: 35px;
  height: 18px;
  background-image: url(../../img/common/icon_btn_pdf.png);
}

.block-topics-detail-nav ul {
  display: flex;
  justify-content: space-between;
}

.block-topics-detail-nav .btn-bdr {
  width: 100%;
}

.block-topics-detail-nav .nav-prev .btn-bdr span::before,
.block-topics-detail-nav .nav-next .btn-bdr span::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 7px;
  height: 11px;
  background-image: url(../../img/common/arw_topics_nav.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.block-topics-detail-nav .nav-prev .btn-bdr span::before {
  margin-right: 9px;
}

.block-topics-detail-nav .nav-next .btn-bdr span::after {
  margin-left: 9px;
  transform: rotate(180deg);
}

.topics-toc {
  background-color: var(--cl-gn-bg);
}

.topics-toc-ttl {
  font-weight: 700;
  line-height: 1;
}

.topics-toc-list {
  counter-reset: listnum;
}

.topics-toc-item {
  position: relative;
  border-bottom: 1px solid var(--cl-gr-1);
  font-size: 1.8rem;
  line-height: 1.666;
}

.topics-toc-item::before {
  content: "";
  position: absolute;
  left: 0;
  font-size: 2rem;
  font-family: var(--ff-num);
  counter-increment: listnum;
  content: counter(listnum) ".";
}

.topics-toc-item .list-sub {
  counter-reset: listsubnum;
}

.topics-toc-item .list-sub > li {
  position: relative;
}

.topics-toc-item .list-sub > li::before,
.topics-toc-item .list-sub > li::after {
  position: absolute;
  font-size: 2rem;
  font-family: var(--ff-num);
}

.topics-toc-item .list-sub > li::before {
  left: 0;
  content: counter(listnum) "-";
}

.topics-toc-item .list-sub > li::after {
  left: 1em;
  counter-increment: listsubnum;
  content: counter(listsubnum) ".";
}

.topics-bg-box {
  background-color: var(--cl-gn-bg);
}

.topics-caution-box.bdr-rd {
  border: 1px solid var(--cl-rd);
  color: var(--cl-rd);
}

.topics-caution-box.bg-rd {
  border: 1px solid #fdf0f0;
  background-color: #fdf0f0;
  color: var(--cl-rd);
}

.topics-caution-box.bg-gn {
  border: 1px solid var(--cl-gn-bg);
  background-color: var(--cl-gn-bg);
}

@media all and (min-width: 768px) {
  .block-topics-detail {
    padding-top: 133px;
  }

  .block-topics-detail h1 {
    font-size: 3.4rem;
  }

  .block-topics-detail-date {
    margin-top: 22px;
  }

  .block-topics-detail-mv {
    margin-top: 64px;
  }

  .block-topics-detail-content {
    width: 1100px;
    margin: 80px auto 0;
  }

  .block-topics-detail-content h2 {
    margin: 100px 0 40px;
    padding: 0;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.428;
  }

  .block-topics-detail-content h2.ttl-h2-bdr {
    padding-bottom: 18px;
  }

  .block-topics-detail-content .topics-profile {
    align-items: center;
    padding: 40px;
  }

  .block-topics-detail-content .topics-profile figure {
    width: 180px;
  }

  .block-topics-detail-content .topics-profile figure img {
    width: 180px;
    height: 180px;
    border-radius: 180px;
    object-fit: cover;
  }

  .block-topics-detail-content .topics-profile .item-detail {
    width: calc(100% - 180px);
    padding-left: 64px;
  }

  .block-topics-detail-content .topics-profile .item-disc {
    margin-top: 22px;
    font-size: 1.4rem;
    line-height: 1.857;
  }

  .block-topics-detail-content .topics-profile .item-disc li {
    position: relative;
    padding-left: 1em;
  }

  .block-topics-detail-content .topics-profile .item-disc li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
  }

  .block-topics-detail-content .topics-green-btn .btn-gn {
    width: auto;
    min-width: 340px;
    max-width: 540px;
    height: auto;
    min-height: 56px;
    padding: 11px 20px;
  }

  .topics-video-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .topics-video-list li {
    width: calc((100% - 40px) / 2);
  }

  .topics-video-list li:not(:nth-child(-n + 2)) {
    margin-top: 40px;
  }

  .topics-video-list .list-caption {
    margin-top: 24px;
  }

  .topics-video-bnr-list ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .topics-video-bnr-list li {
    width: calc((100% - 32px) / 2);
  }

  .topics-video-bnr-list li:not(:nth-child(3n)) {
    margin-right: 16px;
  }

  .topics-video-bnr-list li:not(:nth-child(-n + 3)) {
    margin-top: 16px;
  }

  .block-topics-detail-content .topics-img-2col-list li {
    width: calc((100% - 40px) / 2);
  }

  .block-topics-detail-content .topics-img-2col-list figcaption {
    margin-top: 16px;
  }

  .block-topics-detail-content .topics-publication {
    padding: 40px;
  }

  .block-topics-detail-content .topics-publication figure {
    width: 180px;
  }

  .block-topics-detail-content .topics-publication figure img {
    width: 180px;
    height: 180px;
    border-radius: 180px;
  }

  .block-topics-detail-content .topics-publication .item-detail {
    width: calc(100% - 180px);
    padding-left: 64px;
  }

  .block-topics-detail-content .topics-publication .item-user + .item-ttl {
    margin-top: 14px;
  }

  .block-topics-detail-content .topics-publication .item-ttl {
    line-height: 1.625;
  }

  .block-topics-detail-content .topics-publication .item-comment {
    margin-top: 12px;
    line-height: 1.857;
  }

  .block-topics-detail-content .topics-magazine-article {
    display: flex;
  }

  .block-topics-detail-content .topics-magazine-article figure {
    width: 530px;
  }

  .block-topics-detail-content .topics-magazine-article .item-detail {
    width: calc(100% - 530px);
    padding-left: 64px;
  }

  .block-topics-detail-content .topics-magazine-article .item-comment {
    margin-top: 15px;
  }

  .block-topics-detail-content .topics-tbl-1 th,
  .block-topics-detail-content .topics-tbl-2 th,
  .block-topics-detail-content .topics-tbl-3 th,
  .block-topics-detail-content .topics-tbl-1 td,
  .block-topics-detail-content .topics-tbl-2 td,
  .block-topics-detail-content .topics-tbl-3 td {
    height: 70px;
    padding: 16px 20px;
    font-size: 1.8rem;
  }

  .block-topics-detail-content .topics-tbl-1 th,
  .block-topics-detail-content .topics-tbl-2 th,
  .block-topics-detail-content .topics-tbl-3 th {
    text-align: center;
  }

  .block-topics-detail-content .topics-tbl-1 th {
    width: 220px;
  }

  .block-topics-detail-content .topics-tbl-1 td {
    width: calc(100% - 220px);
  }

  .block-topics-detail-content .topics-tbl-2 th {
    width: 200px;
  }

  .block-topics-detail-content .topics-tbl-2 td {
    width: 350px;
  }

  .block-topics-detail-content .topics-tbl-3 th,
  .block-topics-detail-content .topics-tbl-3 td {
    width: 50%;
  }

  .block-topics-detail-content .topics-caution-list li + li,
  .block-topics-detail-content .topics-caution-no-list li + li {
    margin-top: 22px;
  }

  .block-topics-detail-content .topics-article .col-2 li {
    width: calc((100% - 40px) / 2);
  }

  .block-topics-detail-content .topics-article .col-3 li {
    width: calc((100% - 80px) / 3);
  }

  .block-topics-detail-content .topics-article .col-4 li {
    width: calc((100% - 72px) / 4);
  }

  .block-topics-detail-content .topics-article .col-2 li:not(:nth-child(2n)),
  .block-topics-detail-content .topics-article .col-3 li:not(:nth-child(3n)) {
    margin-right: 40px;
  }

  .block-topics-detail-content .topics-article .col-4 li:not(:nth-child(4n)) {
    margin-right: 24px;
  }

  .block-topics-detail-content .topics-article .col-1 li + li,
  .block-topics-detail-content .topics-article .col-2 li:not(:nth-child(-n + 2)),
  .block-topics-detail-content .topics-article .col-3 li:not(:nth-child(-n + 3)),
  .block-topics-detail-content .topics-article .col-4 li:not(:nth-child(-n + 4)) {
    margin-top: 40px;
  }

  .block-topics-detail-content .topics-article .col-1 .list-ttl,
  .block-topics-detail-content .topics-article .col-2 .list-ttl {
    margin-top: 24px;
    font-size: 2.2rem;
    line-height: 1.444;
  }

  .block-topics-detail-content .topics-article .col-3 .list-ttl {
    margin-top: 24px;
  }

  .block-topics-detail-content .topics-article .col-4 .list-ttl {
    margin-top: 16px;
  }

  .block-topics-detail-content .topics-article .col-1 .list-comment,
  .block-topics-detail-content .topics-article .col-2 .list-comment,
  .block-topics-detail-content .topics-article .col-3 .list-comment,
  .block-topics-detail-content .topics-article .col-4 .list-comment {
    margin-top: 14px;
  }

  .block-topics-detail-content .topics-article .vrt-1 li + li,
  .block-topics-detail-content .topics-article .vrt-2 li + li {
    margin-top: 64px;
  }

  .block-topics-detail-content .topics-article .vrt-1 figure,
  .block-topics-detail-content .topics-article .vrt-1 .list-video {
    width: 480px;
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-detail {
    width: 556px;
  }

  .block-topics-detail-content .topics-article .vrt-2 figure,
  .block-topics-detail-content .topics-article .vrt-2 .list-video {
    width: 340px;
  }

  .block-topics-detail-content .topics-article .vrt-2 .list-detail {
    width: 696px;
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-ttl,
  .block-topics-detail-content .topics-article .vrt-2 .list-ttl {
    font-size: 2.2rem;
    line-height: 1.454;
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-comment,
  .block-topics-detail-content .topics-article .vrt-2 .list-comment {
    line-height: 1.444;
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-ttl + .list-comment,
  .block-topics-detail-content .topics-article .vrt-2 .list-ttl + .list-comment {
    margin-top: 16px;
  }

  .block-topics-detail-content .topics-video-ttl {
    width: 800px;
    margin: 0 auto;
  }

  .block-topics-detail-content .topics-video-ttl .item-ttl {
    font-size: 2.4rem;
    line-height: 1.666;
  }

  .block-topics-detail-content .topics-video-ttl .item-youtube,
  .block-topics-detail-content .topics-video-ttl .item-mp4 {
    margin-top: 30px;
  }

  .block-topics-detail-content .topics-link-list,
  .block-topics-detail-content .topics-btn-list {
    display: flex;
  }

  .block-topics-detail-content .topics-link-list.align-center,
  .block-topics-detail-content .topics-btn-list.align-center {
    justify-content: center;
  }

  .block-topics-detail-content .topics-link-list.align-right,
  .block-topics-detail-content .topics-btn-list.align-right {
    justify-content: flex-end;
  }

  .block-topics-detail-content .topics-link-list li,
  .block-topics-detail-content .topics-btn-list li {
    width: 380px;
  }

  .block-topics-detail-content .topics-link-list li + li,
  .block-topics-detail-content .topics-btn-list li + li {
    margin-top: 20px;
  }

  .block-topics-detail-content .topics-btn-list a {
    width: 100%;
    height: auto;
    min-height: 56px;
    /* 早原追加分 */
    /* padding: 0 16px; */
  }

  .block-topics-detail-nav {
    width: 1100px;
    margin: 80px auto 0;
  }

  .block-topics-detail-nav li {
    width: 260px;
  }

  .topics-toc {
    margin-top: 100px;
    padding: 40px;
  }

  .topics-toc-ttl {
    font-size: 2.4rem;
  }

  .topics-toc-list {
    margin-top: 16px;
  }

  .topics-toc-item {
    padding: 24px 0 24px 2em;
  }

  .topics-toc-item .list-sub > li {
    padding: 21px 0 0 2.5em;
  }

  .topics-toc-item .list-sub > li::before,
  .topics-toc-item .list-sub > li::after {
    top: 21px;
  }

  .topics-bg-box {
    padding: 40px;
  }

  .topics-caution-box {
    padding: 39px;
  }
}

@media all and (max-width: 767px) {
  .block-topics-detail {
    padding-top: 30px;
  }

  .block-topics-detail h1 {
    font-size: 2.8rem;
    line-height: 1.214;
  }

  .block-topics-detail-date {
    margin-top: 12px;
  }

  .block-topics-detail-mv {
    margin: 32px -20px 0;
  }

  .block-topics-detail-content {
    margin-top: 40px;
  }

  .block-topics-detail-content h2 {
    margin: 40px 0 32px;
    padding: 0;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.333;
  }

  .block-topics-detail-content h2.ttl-h2-bdr {
    padding-bottom: 14px;
  }

  .block-topics-detail-content .topics-profile {
    padding: 24px;
  }

  .block-topics-detail-content .topics-profile figure {
    width: 100px;
  }

  .block-topics-detail-content .topics-profile figure img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    object-fit: cover;
  }

  .block-topics-detail-content .topics-profile .item-detail {
    width: calc(100% - 100px);
    padding-left: 16px;
  }

  .block-topics-detail-content .topics-profile .item-disc {
    margin-top: 14px;
    font-size: 1.4rem;
    line-height: 1.571;
  }

  .block-topics-detail-content .topics-profile .item-disc li {
    position: relative;
  }

  .block-topics-detail-content .topics-profile .item-disc li::before {
    content: "・";
  }

  .block-topics-detail-content .topics-green-btn .btn-gn {
    height: auto;
    min-height: 56px;
    padding: 12px 16px;
  }

  .block-topics-detail-content .topics-green-btn.fss-15 .btn-gn {
    font-size: 1.5rem;
  }

  .topics-video-list li + li {
    margin-top: 24px;
  }

  .topics-video-list .list-caption {
    margin-top: 16px;
  }

  .topics-video-bnr-list li + li {
    margin-top: 10px;
  }

  .block-topics-detail-content .topics-img-2col-list li {
    width: calc((100% - 10px) / 2);
  }

  .block-topics-detail-content .topics-img-2col-list figcaption {
    margin-top: 10px;
  }

  .block-topics-detail-content .topics-publication {
    padding: 24px;
  }

  .block-topics-detail-content .topics-publication figure {
    width: 100px;
  }

  .block-topics-detail-content .topics-publication figure img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
  }

  .block-topics-detail-content .topics-publication .item-detail {
    width: calc(100% - 100px);
    padding-left: 16px;
  }

  .block-topics-detail-content .topics-publication .item-user + .item-ttl {
    margin-top: 14px;
  }

  .block-topics-detail-content .topics-publication .item-ttl {
    line-height: 1.375;
  }

  .block-topics-detail-content .topics-publication .item-comment {
    margin-top: 11px;
    line-height: 1.571;
  }

  .block-topics-detail-content .topics-magazine-article .item-detail {
    margin-top: 22px;
  }

  .block-topics-detail-content .topics-magazine-article .item-comment {
    margin-top: 14px;
  }

  .block-topics-detail-content .topics-tbl-1 th,
  .block-topics-detail-content .topics-tbl-2 th,
  .block-topics-detail-content .topics-tbl-3 th,
  .block-topics-detail-content .topics-tbl-1 td,
  .block-topics-detail-content .topics-tbl-2 td,
  .block-topics-detail-content .topics-tbl-3 td {
    height: 40px;
    padding: 14px 16px;
    font-size: 1.6rem;
  }

  .block-topics-detail-content .topics-tbl-1 td {
    width: calc(100% - 130px);
  }

  .block-topics-detail-content .topics-tbl-2 tr {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto auto;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "th-1 td-1"
      "th-2 td-2";
  }

  .block-topics-detail-content .topics-tbl-2 th:nth-child(1) {
    grid-area: th-1;
  }

  .block-topics-detail-content .topics-tbl-2 td:nth-child(2) {
    grid-area: td-1;
  }

  .block-topics-detail-content .topics-tbl-2 th:nth-child(3) {
    grid-area: th-2;
  }

  .block-topics-detail-content .topics-tbl-2 td:nth-child(4) {
    grid-area: td-2;
  }

  .block-topics-detail-content .topics-tbl-1 th {
    width: 130px;
    vertical-align: top;
  }

  .block-topics-detail-content .topics-tbl-2 th,
  .block-topics-detail-content .topics-tbl-2 td {
    display: block;
    height: 100%;
  }

  .block-topics-detail-content .topics-tbl-2 tr:not(:first-child) th,
  .block-topics-detail-content .topics-tbl-2 th:not(:first-child),
  .block-topics-detail-content .topics-tbl-2 td:not(:nth-child(2)),
  .block-topics-detail-content .topics-tbl-2 tr:not(:first-child) td {
    border-top: none;
  }

  .block-topics-detail-content .topics-tbl-3 th,
  .block-topics-detail-content .topics-tbl-3 td {
    width: 50%;
  }

  .block-topics-detail-content .topics-tbl-3 td {
    vertical-align: top;
  }

  .block-topics-detail-content .topics-tbl-3 th:first-child,
  .block-topics-detail-content .topics-tbl-3 td:first-child {
    border-right: 1px solid var(--cl-gr-1);
  }

  .block-topics-detail-content .topics-tbl-3 th {
    text-align: center;
  }

  .block-topics-detail-content .topics-caution-list li + li,
  .block-topics-detail-content .topics-caution-no-list li + li {
    margin-top: 12px;
  }

  .block-topics-detail-content .topics-article .col-2 li,
  .block-topics-detail-content .topics-article .col-3 li,
  .block-topics-detail-content .topics-article .col-4 li {
    width: calc((100% - 10px) / 2);
  }

  .block-topics-detail-content .topics-article .col-2 li:not(:nth-child(2n)),
  .block-topics-detail-content .topics-article .col-3 li:not(:nth-child(2n)),
  .block-topics-detail-content .topics-article .col-4 li:not(:nth-child(2n)) {
    margin-right: 10px;
  }

  .block-topics-detail-content .topics-article .col-2 li:not(:nth-child(-n + 2)),
  .block-topics-detail-content .topics-article .col-3 li:not(:nth-child(-n + 2)),
  .block-topics-detail-content .topics-article .col-4 li:not(:nth-child(-n + 2)) {
    margin-top: 32px;
  }

  .block-topics-detail-content .topics-article .col-1 .list-ttl {
    margin-top: 22px;
  }

  .block-topics-detail-content .topics-article .col-2 .list-ttl,
  .block-topics-detail-content .topics-article .col-3 .list-ttl,
  .block-topics-detail-content .topics-article .col-4 .list-ttl {
    margin-top: 16px;
    font-size: 1.6rem;
  }

  .block-topics-detail-content .topics-article .col-1 .list-comment {
    margin-top: 10px;
    font-size: 1.8rem;
    line-height: 1.666;
  }

  .block-topics-detail-content .topics-article .col-2 .list-comment,
  .block-topics-detail-content .topics-article .col-3 .list-comment,
  .block-topics-detail-content .topics-article .col-4 .list-comment {
    margin-top: 10px;
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .block-topics-detail-content .topics-article .vrt-1 li + li,
  .block-topics-detail-content .topics-article .vrt-2 li + li {
    margin-top: 30px;
  }

  .block-topics-detail-content .topics-article .vrt-1 figure,
  .block-topics-detail-content .topics-article .vrt-2 figure,
  .block-topics-detail-content .topics-article .vrt-1 .list-video,
  .block-topics-detail-content .topics-article .vrt-2 .list-video {
    width: 140px;
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-detail,
  .block-topics-detail-content .topics-article .vrt-2 .list-detail {
    width: calc(100% - 164px);
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-ttl,
  .block-topics-detail-content .topics-article .vrt-2 .list-ttl {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-comment,
  .block-topics-detail-content .topics-article .vrt-2 .list-comment {
    font-size: 1.6rem;
    line-height: 1.333;
  }

  .block-topics-detail-content .topics-article .vrt-1 .list-ttl + .list-comment,
  .block-topics-detail-content .topics-article .vrt-2 .list-ttl + .list-comment {
    margin-top: 8px;
  }

  .block-topics-detail-content .topics-video-ttl .item-ttl {
    font-size: 2rem;
    line-height: 1.5;
  }

  .block-topics-detail-content .topics-video-ttl .item-youtube,
  .block-topics-detail-content .topics-video-ttl .item-mp4 {
    margin-top: 16px;
  }

  .block-topics-detail-content .topics-link-list li + li,
  .block-topics-detail-content .topics-btn-list li + li {
    margin-top: 20px;
  }

  .block-topics-detail-content .topics-btn-list a {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 0 12px;
  }

  .block-topics-detail-nav {
    margin-top: 40px;
  }

  .block-topics-detail-nav li {
    width: calc((100% - 10px) / 2);
  }

  .block-topics-detail-nav .btn-bdr {
    height: 44px;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  .topics-toc {
    margin-top: 80px;
    padding: 24px 16px;
  }

  .topics-toc-ttl {
    font-size: 2.2rem;
  }

  .topics-toc-list {
    margin-top: 22px;
  }

  .topics-toc-item {
    padding: 24px 0 24px 1.6em;
  }

  .topics-toc-item .list-sub {
    margin-left: -1.1em;
  }

  .topics-toc-item .list-sub > li {
    padding: 14px 0 0 2.5em;
  }

  .topics-toc-item .list-sub > li::before,
  .topics-toc-item .list-sub > li::after {
    top: 14px;
  }

  .topics-bg-box {
    padding: 24px 16px;
  }

  .topics-caution-box {
    padding: 23px 15px;
  }
}








/* 早原追加分 */
/* .b_secret_intro
--------------------------------------- */

.b_secret_intro__link{
	text-align: center;
}
.b_secret_intro__btn{
  color: #fff;
	display: block;
	width: 100%;
	padding: 12px 13px 12px 0;
	border-radius: 5px;
	border-style: none;
	font-size: 1.3em;
	background: #6c7a57 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 17"><polygon fill="%23ffffff" points="16,17 0,1.8 1.7,0 16,13.5 30.3,0 32,1.8 "/></svg>') no-repeat right center;
	background-size: 25% 25%;
	background-position: right 5% center;
}
#contents_area a.b_secret_intro__btn:link,
#contents_area a.b_secret_intro__btn:visited{
	color: #fff;
	text-decoration: none;
}




.b_secret_intro{
	background: #eff7ea;
	padding: 7% 5%;
	margin-bottom: 30px;
}

.b_secret_intro__head{
	margin-bottom: 5%;
}
.b_secret_intro__title{
	padding: 5%;
}

.b_secret_intro__frame{
	background: #fff;
	padding: 2%;
	border-radius: 5px;
	margin-bottom: 5%;
}
.b_secret_intro__block{
	padding: 2%;
}
.b_secret_intro__list{
	margin-bottom: 10px;
	padding: 6px 0px 4px 30px;
	background: url(../../images/product/skincare/serum/icon_checkbox.png) left center no-repeat;
	background-size: 25px;
	color: #2e2e2e;
	font-size: 1.1em;
}

@media only screen and (min-width: 768px){

.b_secret_intro{
	position: relative;
	height: 46rem;
}
.b_secret_intro__head,
.b_secret_intro__frame,
.b_secret_intro__link{
	position: absolute;
	width: 42%;
}
.b_secret_intro__head{
	top: 40px;
	left: 30px;
}
.b_secret_intro__frame{
	top: auto;
	right: 7rem;
}
.b_secret_intro__link{
	bottom: 40px;
	left: 30px;
}
.b_secret_intro__list{
	font-size: 1.2em;
}




}








/* .b_secret_voice
--------------------------------------- */
.b_secret_voice{
	background: #ffffde;
	padding: 5%;
}

.b_secret_voice__title{
	padding-bottom: 5%;
	text-align: center;
  margin: auto 22rem;
}
.b_secret_voice__block{
	background: #fff;
	padding: 6% 3%;
	margin-bottom: 20px;
	text-align: center;
}
.b_secret_voice__text{
	padding-bottom: 3%;
	margin-bottom: 3%;
	border-bottom: 1px dotted #6c7a57;
}
.b_secret_voice__image{
	padding-bottom: 3%;
}

@media only screen and (min-width: 768px){
.b_secret_voice__frame{
	display: flex;
  justify-content: space-between;
}
.b_secret_voice__block{
	width: 42%;
/* 早原追加分 */
  margin: 0 29%;
}

}









/* .b_secret_dm
--------------------------------------- */
.b_secret_dm{
	margin-bottom: 50px;
}


.frame_fit_img,
.swiper-container01 .swiper-slide img{
	max-width: 100%;
	height: auto;
}
.customer_dm_text{
	width: 70%;
	margin: 10px auto 0 auto;
}


.swiper-pagination01{
	text-align: center;
	padding-top: 15px;
}
.swiper-container01{
	overflow: hidden;
	width: 800px;
	margin: 20px auto;
}

@media only screen and (max-width: 768px){
.swiper-container01{
	width: 100%;
	margin: 3% 0;
}
.swiper-container01 .swiper-slide{
	position: relative;
}
.swiper-container01 .swiper-slide:before{
  content: "";
  display: block;
  padding-top: 65%;
}
.swiper-container01 .swiper-slide img{
	position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}

.customer_dm_text{
	width: 100%;
}

.b_secret_voice__title{
	padding-bottom: 5%;
	text-align: center;
  margin: 0;
}

/* 早原追加分 */
.b_secret_intro__btn{
  color: #fff;
	display: block;
	width: 100%;
	padding: 12px 13px 12px 0;
	border-radius: 5px;
	border-style: none;
	font-size: 1.3em;
	background: #6c7a57;
	background-size: 25% 25%;
	background-position: right 5% center;
}

}







/* .b_secret_request
--------------------------------------- */
.b_secret_request{
	background: #eff7ea;
	padding: 8% 7%;
	margin-bottom: 40px;
}
.b_secret_request__text{
	font-size: 1.1em;
	line-height: 1.5;
}
@media only screen and (max-width: 768px){
.b_secret_request__text{
	margin-bottom: 20px;
}
}

.b_secret_request__link{
	text-align: center;
}
/* ===== ログインボタン：ベース（常時：文字白／背景#6C7A57） ===== */
.b_secret_request__btn{
  display: block;
  width: 100%;
  color: #fff;                 /* 文字色は常時白 */
  text-decoration: none;
  border: none;
  border-radius: 5px;
  font-size: 1.3em;
  padding: 12px 44px 12px 16px; /* 右側は矢印分の余白 */

  /* ベース色 */
  background-color: #6C7A57;

  /* 背景レイヤーを2枚に分ける：
     1) 矢印SVG（最前面）
     2) 透明のオーバーレイ（通常時は透明、hoverで黒10%にする） */
  background-image:
    url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18"><polygon fill="%23ffffff" points="10,9 0.9,18 0,17.1 8.2,9 0,0.9 0.9,0"/></svg>'),
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0));
  background-repeat: no-repeat, no-repeat;
  background-position: right 14px center, center;
  background-size: 10px 18px, cover;

  /* クリック時の小さな押し込み */
  transition: background-image .15s ease, transform .02s ease, filter .15s ease;
}
.b_secret_request__btn:hover{
  /* hover時：2枚目（オーバーレイ）だけ 10% 黒へ */
  background-image:
    url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18"><polygon fill="%23ffffff" points="10,9 0.9,18 0,17.1 8.2,9 0,0.9 0.9,0"/></svg>'),
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.10));
}
.b_secret_request__btn:active{
  transform: translateY(1px);
}

/* リンク状態でも文字色・下線を固定（他のルールに負けないように） */
#contents_area a.b_secret_request__btn:link,
#contents_area a.b_secret_request__btn:visited,
#contents_area a.b_secret_request__btn:hover,
#contents_area a.b_secret_request__btn:active{
  color: #fff;
  text-decoration: none;
}

/* SPでも矢印を維持（SP側で background を無地に上書きしない） */
@media (max-width: 768px){
  .b_secret_request__btn{
    background-position: right 10px center, center; /* 矢印位置を少し内側へ */
  }
}

/* 早原追加分 */
.item-comment-min {
  font-size: 1.4rem;
}


@media only screen and (min-width: 768px){

.b_secret_request{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 30px;
}
.b_secret_request__text,
.b_secret_request__link{
	width: 46%;
}
.b_secret_request__btn{
	padding: 12px 0;
}

.smile {
  display: block;
  height: auto;
  /* 早原追加分 */
  /* width: 100%; */
  width: auto !important;
  margin: 0 19%;
}

}

@media only screen and (max-width: 768px){
  .block-topics-detail-content .topics-img-2col-list ul {
    display: block;
  }
  .block-topics-detail-content .topics-img-2col-list li {
    width: auto;
    margin-top: 24px;
  }
  .block-topics-detail img:not(.icon-img),
  .block-topics-detail-content img:not(.icon-img) {
    display: block;
    height: auto;
    /* 早原追加分 */
    width: 100%;
    margin: 0;
  }
  .awamp4 {
    width: 375px;
  }

}