@charset "utf-8";
/* ====================================
Layout
==================================== */
.p__home-container.feature {
  padding: 4rem 0;
}
.feature-box-wrapper {
  position: relative;
}
.feature-list {
  row-gap: 4rem;
} 
.feature-listItem .feature-box-wrapper::before {
  content: "";
  background-color: #008085;
  width: 100%;
  height: 70%;
  display: block;
  position: absolute;
  top: 0;
  z-index: -1;
}
.feature-box-row {
  margin-left: 0;
  margin-right: 0;
}
.feature-box-container {
  padding: 0;
}
.feature-box {
  padding: 2.5rem 1rem;
}
.feature-box-body {
  row-gap: 1rem;
}
.feature-box-body-label {
  border: .0625rem solid #fff;
  font-size: .75rem;
  background-color: rgb(255, 255, 255,0.2);
  width: fit-content;
  padding: .25rem 1rem;
  border-radius: 1rem;
}
.feature-description {
  color: #f5f5f5;
  font-size: .875rem;
}
.feature-box-body .btn-link {
  color: #1A6366;
}
.feature-video {
  padding: 0;
}
.video_wrapper video {
  width: 100%;
  display: block;
}
/* 詳細 */
.feature-top {
  padding-bottom: 4rem;
}
.feature-wrapper {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.feature-container-row, .feature-row {
  row-gap: 2.5rem;
}
.worries-container h2 {
  font-size: 1.5rem;
}
.worries-container h2 .marker {
  background:linear-gradient(transparent 60%,#BFE7E9 0);
}
.worries-column {
  gap: 1.5rem;
}
.worries-column figure img {
  max-width: 8.75rem;
}
.worries-list li:not(:last-child) {
  margin-bottom: 1rem;
}
.worries-list-item {
  column-gap: .5rem;
  line-height: 1;
}
.worries-list-item::before {
  content: "\f6a2";
  color: #00A0A5;
  font-weight: normal;
  font-size: 1.5rem;
}
.suggest-wrapper {
  border: .0625rem solid #ddd;
  background-color: #fff;
  padding: 2rem;
}
.suggest-container {
  row-gap: 2.5rem;
}
.suggest-container-top .left-top, .suggest-container-top .right-top {
  border-bottom: .0625rem solid #ddd;
  width: 1.5rem;
  height: 1.5rem;
}
.suggest-container-top .left-top {
  border-right: .0625rem solid #ddd;
}
.suggest-container-top .right-top {
  border-left: .0625rem solid #ddd;
}
.suggest-middle-section {
  margin-bottom: 5rem;
}
.suggest-title h2 {
  color: #00A0A5;
  font-size: 1.5rem;
}
.suggest-title h2 span {
  color: #666;
  font-size: 1.125rem;
}
.suggest-middle {
  padding: 0 1.5rem;
}
.suggest-middle-row:not(:last-child) {
  margin-bottom: 2.5rem;
}
.suggest-middle-icon .material-symbols-outlined {
  color: #00A0A5;
  font-size: 2rem;
}
.suggest-middle-title {
  font-size: 1.25rem;
}
.suggest-middle-txt {
  color: #333;
  margin-bottom: 1rem;
}
.suggest-container-bottom .left-bottom, .suggest-container-bottom .right-bottom {
  border-top: .0625rem solid #ddd;
  width: 1.5rem;
  height: 1.5rem;
}
.suggest-container-bottom .left-bottom {
  border-right: .0625rem solid #ddd;
}
.suggest-container-bottom .right-bottom {
  border-left: .0625rem solid #ddd;
}
/* 導入効果 */
.introduction-effect-container {
  padding: 0 1.5rem;
}
.introduction-effect-inner {
  background-color: #F5F5F5;
  padding: 1.5rem;
  row-gap: 1.25rem;
}
.introduction-effect-inner-row {
  row-gap: 2.5rem;
}
.introduction-effect-title {
  color: #00A0A5;
  font-size: 1.5rem;
}
.introduction-effect-column {
  row-gap: .75rem;
}
.introduction-effect-thumbnail {
  background-color: #fff;
  padding: 1.5rem 2rem;
}
.introduction-effect-column-title {
  font-size: 1.125rem;
}
.introduction-effect-column-txt {
  color: #333;
}
.introduction-effect-column-txt ul, .introduction-effect-column-txt ol {
  padding-left: 24px;
}
.introduction-effect-column-txt ul {
  list-style-type: disc;
}
.introduction-effect-column-txt ol {
  list-style-type: decimal;
}
/* 関連記事 */
.related-contents-column {
  margin-bottom: 2rem;
}
.related-contents-column-inner {
  border-radius: .25rem;
  border: .0625rem solid #ccc;
  padding: 1rem;
  background-color: #fff;
  row-gap: 1rem;
  position: relative;
}
.related-contents-column:hover .related-contents-column-inner {
  border-color: #00A0A5;
}
.related-contents-column-inner .feature-label {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  font-size: .75rem;
  background-color: rgb(255, 255, 255,0.75);
  color: #111;
  border: #00A0A5 .0625rem solid;
  border-radius: 1rem;
  padding: .5rem .75rem;
  line-height: 1;
  z-index: 3;
}
.related-contents-column:hover .feature-label {
  text-decoration: none;
}
.related-contents-column-inner-info-txt {
  color: #555;
  display: -webkit-box;             
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; 
}
.related-contents-title {
  font-size: 1.5rem;
}
.related-contents-column-inner-thumbnail {
  margin-bottom: 0;
  overflow: hidden;
  width: 100%;
}
.related-contents-column-inner-thumbnail img {
  transition: transform .3s ease;
  object-fit: cover;
  width: 100%;
  height: 12.5rem;
}
.related-contents-column:hover .related-contents-column-inner-thumbnail img {
  transform: scale(1.1);
}
.related-contents-column-inner-info {
  row-gap: .5rem;
}
.related-contents-column-inner-info-title {
  font-size: 1.125rem;
}
.related-contents-column:hover .related-contents-column-inner-info-title {
  text-decoration: underline;
}
@media (min-width: 36rem) and (max-width: 47.9988rem) {
  .feature-box {
    padding: 2.5rem 0;
  }
  .worries-column figure img {
    max-width: 11.25rem;
  }
  .feature-video {
    padding: inherit;
  }
}
@media (min-width: 48rem) and (max-width: 61.9988rem) {
  .feature-box {
    padding: 2.5rem 0;
  }
  .feature-video {
    padding: inherit;
  }
  .worries-column figure img {
    max-width: 12.5rem;
  }
}
@media (min-width: 62rem) {
  .p__home-container.feature {
    padding: 6.25rem 0;
  }
  /* 新規 */
  .feature-list {
    row-gap: 5rem;
  }
  .feature-box-wrapper {
    padding: 2.5rem 0;
  }
  .feature-listItem .feature-box-wrapper::before {
    width: 80%;
    height: 100%;
    padding: 2.5rem 0;
  }
  .feature-listItem:nth-child(odd) .feature-box, .feature-listItem:nth-child(even) .feature-video {
    order: 0;
  }
  .feature-listItem:nth-child(odd) .feature-video, .feature-listItem:nth-child(even) .feature-box {
    order: 1;
  }
  .feature-listItem:nth-child(even) .feature-box-wrapper::before {
    right: 0;
  }
  .feature-listItem:nth-child(odd) .feature-box-wrapper::before {
    left: 0;
  }
  .feature-box-container {
    padding: 0;
  }
  .feature-box {
    padding: 0;
  }
  .feature-listItem:nth-child(odd) .feature-box-body {
    padding: 0 2.5rem 0 1rem;
  }
  .feature-listItem:nth-child(even) .feature-box-body {
    padding: 0 1rem 0 2.5rem;
  }
  .feature-box-body {
    row-gap: 1.5rem;
  }
  .feature-description {
    font-size: 1rem;
  }
  .feature-box-body .btn-link {
    padding: .75rem 1.25rem;
  }
  .feature-video {
    padding: 0 .75rem;
  }
  /* 詳細 */
  .feature-top {
    padding-bottom: 6.25rem;
  }
  .feature-wrapper {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }
  .feature-container-row {
    row-gap: 5rem;
  }
  .feature-row {
    row-gap: 5rem;
  }
  .worries-container h2 {
    font-size: 1.75rem;
  }
  .worries-column {
    column-gap: 4rem;
  }
  .worries-column figure img {
    max-width: inherit;
  }
  .worries-list li:not(:last-child) {
    margin-bottom: 1.25rem;
  }
  .worries-list-item {
    font-size: 1.25rem;
  }
  .worries-list-item::before {
    font-size: 2.25rem;
  }
  .suggest-wrapper {
    padding: 4.5rem;
  }
  .suggest-container {
    row-gap: 5rem;
  }
  .suggest-container-top .left-top, .suggest-container-top .right-top {
    width: 2rem;
    height: 2rem;
  }
  .suggest-title h2 {
    font-size: 2.5rem;
    row-gap: .5rem;
  }
  .suggest-title h2 span {
    font-size: 1.25rem;
  }
  .suggest-middle {
    padding: 0 2rem;
  }
  .suggest-middle-row:not(:last-child) {
    margin-bottom: 5rem;
  }
  .suggest-middle-container {
    position: relative;
  }
  .suggest-middle-section:not(:last-child) {
    margin-bottom: 21.875rem;
  }
  .suggest-middle-section:last-child {
    margin-bottom: 9.375rem;
  }
  .suggest-middle-icon .material-symbols-outlined {
    font-size: 2.25rem;
  }
  .suggest-middle-title {
    font-size: 1.5rem;
  }
  .images-container {
    height: 25rem;
    position: sticky;
    position: -webkit-sticky;
    top: 15%;
  }
  .images-container p {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    transition: .8s !important;
    opacity: 0;
  }
  .images-container p:first-child, .images-container p.active {
    visibility: visible;
    opacity: 1;
  }
  /* 導入効果 */
  .introduction-effect-container {
    padding: 0 2rem;
  }
  .introduction-effect-inner {
    padding: 2rem;
    row-gap: 2.5rem;
  }
  .introduction-effect-inner-row {
    row-gap: 2.5rem;
  }
  .introduction-effect-thumbnail {
    padding: 2rem 3rem;
  }
  .introduction-effect-title {
    font-size: 1.75rem;
  }
  .introduction-effect-column {
    row-gap: 1rem;
  }
  .introduction-effect-column-title {
    font-size: 1.25rem;
  }
  .related-contents-container-row {
    row-gap: 2rem;
  }
  .related-contents-title {
    font-size: 1.75rem;
  }
  .related-contents-column-inner-info {
    row-gap: .5rem;
  }
  .related-contents-column-inner-info-title {
    font-size: 1.25rem;
  }
}