@charset "utf-8";
/* ====================================
Layout
==================================== */
.p__scene__row {
  row-gap: 2rem;
}
.p__scene-link {
  border-radius: .25rem;
  border: .0625rem solid #ccc;
  padding: 1rem;
  height: 100%;
}
.p__scene-link:hover {
  border-color: #00A0A5;
}
.scene-box-link:hover .text-link::after {
  transform: translate(.25rem);
}
.p__scene__section-inner {
  row-gap: 1rem;
}
.p__scene__section-thumnail {
  position: relative;
  margin-bottom: .5rem;
}
.scene-category {
  position: absolute;
  left: .5rem;
  top: .5rem;
  border: .0625rem solid #00A0A5;
  background-color: #fff;
  color: #000;
  padding: .25rem 1rem;
  border-radius: 1rem;
  font-size: .75rem;
}
.p__scene-link:hover .scene-category {
  text-decoration: none;
}
.scene-title {
  font-size: 1rem;
  margin-bottom: .5rem;
}
.scene-text {
  color: #333;
  font-size: .875rem;
}
/*　一覧ページ　*/
.p__scene__row_list {
  margin-bottom: 4rem;
}
.scene-category-list {
  column-gap: .5rem;
  row-gap: .75rem;
  margin-bottom: 2.5rem;
}
.btn-scene-category {
  border: .0625rem solid #ccc;
  padding: .25rem 1rem;
  color: #333;
  border-radius: 1rem;
  font-size: .875rem;
}
.btn-scene-category:hover {
  background-color: #E0F6F8;
  border: .0625rem solid #00A0A5;
}
.btn-scene-category.active {
  background-color: #00A0A5;
  border: .0625rem solid #00A0A5;
}
/* 詳細ページ */
.p__scene__container {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
  row-gap: 2rem;
}
.scene__article-top {
  margin-bottom: 1.5rem;
}
.scene__article-top .p__header-title {
  font-size: 1.5rem;
}
.scene-mainVisual {
  margin-bottom: 1rem;
}
.p__scene__inner h2, .p__scene__inner h3, .p__scene__inner h4, .p__scene__inner h5, .p__scene__inner h6 {
  font-weight: bold;
}
.p__scene__inner h2 {
  margin-top: 1.875rem;
  margin-bottom: 2.5rem;
  font-size: 1.5rem;
  color: #00a0a5;
  line-height: 1.5;
}
.p__scene__inner h2:after {
  margin-top: 1rem;
  content: "";
  background: linear-gradient(90deg, #82f369 0%, #00c8cf 0%, #1a6366 100%);
  height: .125rem;
  display: block;
  width: 3.5rem;
}
.p__scene__inner h3 {
  padding-left: 1rem;
  font-size: 1.25rem;
  border-left: .125rem solid #00A0A5;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}
.p__scene__inner h4 {
  font-size: 1.125rem;
}
.p__scene__inner h5 {
  font-size: 1rem;
}
.p__scene__inner h6 {
  font-size: .875rem;
}
.scene__article-row .image-area:has(img) {
  order: 1;
}
.scene__article-row .text-area {
  order: 2;
}
.scene__article-row li:not(:last-child) {
  margin-bottom: 1rem;
}
.before-after {
  border: .0625rem solid #ccc;
  padding: 1.25rem;
}
.before-after .title {
  color: #1A6366;
  line-height: 1;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.before-after .list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
.before-after .list-item, .check-list li {
  display: flex;
  column-gap: .375rem;
}
.before-after .list-item:not(:last-child) {
  margin-bottom: .5rem;
}
.before-after .list-item:before, .check-list li::before {
  color: #1A6366;
  line-height: 1;
  padding-top: .125rem;
  font-size: 1.5rem;
}
.before-container {
  background-color: #F9F9F9;
  margin-bottom: 1rem;
}
.before-container .list-item:before {
  content: "\f6a2";
}
.after-container {
  background-color: #E5F5F6;
}
.after-container .list-item:before, .check-list li::before {
  content: "\e2e6";
}
.comment-wrapper {
  margin: 1rem 0;
}
.comment-wrapper .comment:nth-child(odd) .comment-avatar,.comment-wrapper .comment:nth-child(even) .comment-speech{
  order: 0;
}
.comment-wrapper .comment:nth-child(odd) .comment-speech,.comment-wrapper .comment:nth-child(even) .comment-avatar{
  order: 1;
}
.comment-wrapper .comment:not(:first-child) {
  margin-top: 1.5rem;
}
.comment-avatar {
  flex-shrink: 0;
  max-width: 4rem;
}
.comment-speech {
  position: relative;
  display: inline-block;
  margin: 1rem 0 0 1rem;
  padding: 1rem;
  border: .0625rem solid #ccc;
  border-radius: .25rem;
  background-color: #fff;
  text-align: left;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
}
.comment-wrapper .comment:nth-child(even) {
  justify-content: end;
}
.comment-wrapper .comment:nth-child(even) .comment-speech {
  margin-left: 0;
  margin-right: 1rem;
}
.comment-wrapper .comment:nth-child(odd) .comment-speech::before,
.comment-wrapper .comment:nth-child(odd) .comment-speech::after {
  content: "";
  position: absolute;
  top: 35%;
  left: 0;
  border-style: solid;
}
.comment-wrapper .comment:nth-child(odd) .comment-speech::before {
  border-width: 0 1rem 1rem 0;
  border-color: transparent #ccc transparent transparent;
  translate: -100% -50%;
}
.comment-wrapper .comment:nth-child(odd) .comment-speech::after {
  border-width: 0 .85rem .85rem 0;
  border-color: transparent #fff transparent transparent;
  translate: -100% calc(-50% - .0125rem);
}
.comment-wrapper .comment:nth-child(even) .comment-speech::before,
.comment-wrapper .comment:nth-child(even) .comment-speech::after {
  content: "";
  position: absolute;
  top: 35%;
  right: 0;
  border-style: solid;
}
.comment-wrapper .comment:nth-child(even) .comment-speech::before {
  border-width: 0 0 1rem 1rem;
  border-color: transparent transparent transparent #ccc;
  translate: 100% -50%;
}
.comment-wrapper .comment:nth-child(even) .comment-speech::after {
  border-width: 0 0 .85rem .85rem;
  border-color: transparent transparent transparent #fff;
  translate: 100% calc(-50% - .0125rem);
}
.suggest-list li {
  display: flex;
  column-gap: .5rem;
}
.suggest-list li::before {
  content: "\ea24";
  color: #FFBE55;
  line-height: 1;
  font-size: 1.75rem;
}
@media (min-width: 48rem) and (max-width: 61.9988rem) {
  .p__scene__inner {
    border: .0625rem solid #ccc;
    border-radius: .25rem;
    padding: 2rem;
  }
  .scene__article-top .p__header-title {
    font-size: 1.75rem;
  }
}
@media (min-width: 62rem) {
  .scene-category {
    font-size: .75rem;
  }
  .scene-title {
    font-size: 1.125rem;
  }
  .scene-text {
    font-size: 1rem;
  }
  /*　一覧ページ　*/
  .p__scene__row_list {
    margin-bottom: 4rem;
  }
  .scene-category-list {
    margin-bottom: 4rem;
  }
  /* 詳細ページ */
  .p__scene__container {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .p__scene__inner {
    border: .0625rem solid #ccc;
    border-radius: .25rem;
    padding: 4rem;
  }
  .scene__article-top .p__header-title {
    font-size: 2rem;
  }
  .scene__article-section .image-area:has(img) {
    order: 2;
  }
  .scene__article-section .text-area {
    order: 1;
  }
  .p__scene__inner h2 {
    margin-bottom: 2.5rem;
  }
  .p__scene__inner h2::after {
    width: 5rem;
  }
  .before-after {
    padding: 1.5rem;
  }
  .before-after .title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .before-after .list-item, .check-list li {
    column-gap: .5rem;
  }
  .comment-wrapper .comment:not(:first-child) {
    margin-top: 2rem;
  }
  .comment-avatar {
    max-width: 5rem;
  }
  .comment-speech {
    font-size: 1rem;
  }
}
@media (min-width: 62rem) and (max-width: 74.9988rem) {
  .p__scene__inner {
    padding: 3rem;
  }
}