@charset "utf-8";
/* -------------------------------------------*/
/* ソリューション一覧ページ */
/* -------------------------------------------*/
.p-solution__content {
  margin-block: 4.6rem 9.6rem;
}

.p-solution__list {
  display: grid;
  gap: 9.4rem 4.8rem;
  grid-template-columns: repeat(2, 1fr);
}

.p-solution__link {
  display: block;
}

.p-solution__card {
  border-radius: 0.8rem 0.8rem 0 0;
  overflow: hidden;
}

.p-solution__title {
  background-color: #008785;
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7142857143;
  padding: 1.8rem 3.2rem;
}

.p-solution__img {
  border-radius: 0 0 0.8rem 0.8rem;
  overflow: hidden;
  position: relative;
}

.p-solution__thumbnail {
  aspect-ratio: 589/360;
  height: auto;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.3s ease;
  will-change: transform;
}

.p-solution__text {
  color: #333333;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4782608696;
  margin-top: 1.2rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.3s ease;
}


/* -------------------------------------------*/
/* ソリューションシングルページ */
/* -------------------------------------------*/
.p-solution-single-main {
  margin-top: 3.4rem;
}

.p-solution-single__sidebar {
  position: relative;
}

/* 目次  */
.p-toc {
  border: solid 1px #707070;
  border-radius: 0.8rem;
  margin: 4.5rem 0 7.5rem 0;
  padding: 3rem 4.5rem 4.4rem;
}
@media (width <= 667px) {
  .p-toc {
    padding: 2rem;
  }
}
.p-toc__title {
  border-bottom: 1px solid #707070;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.6666666667;
}
@media (width <= 667px) {
  .p-toc__title {
    font-size: 1.8rem;
  }
}
.p-toc__list {
  list-style-type: disc;
  margin: 0;
  padding-block: 1.8rem 0;
  padding-left: 2rem;
}
.p-toc__item {
  display: list-item;
}
.p-toc__item a {
  display: inline;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.3;
  text-decoration: underline;
  transition: color 0.3s ease;
}
@media (width <= 667px) {
  .p-toc__item a {
    font-size: 1.6rem;
  }
}

/* ソリューションシングルページ共通CSS */
/* -------------------------------------------*/
.p-single-solving-problem__title {
  color: #008785;
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.3333333333;
  margin: 0 0 1rem 0;
}

.p-single-solving-problem__time {
  align-items: center;
  display: flex;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6666666667;
  margin: 0 0 2.2rem 0;
}
.p-single-solving-problem__time::before {
  background-image: url("../img/common/ico_time.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 1.7rem;
  margin-right: 0.8rem;
  width: 1.7rem;
}

.p-single-solving-problem__category {
  margin: 0 0 2rem 0;
}

.p-single-solving-problem__category a {
  background-color: #fff;
  color: #008785;
  font-size: 1.7rem;
  font-weight: 400;
  padding: 0.4rem 1.3rem;
}

.p-single-solving-problem__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0 0 4.6rem 0;
}

.p-single-solving-problem__tag a {
  background-color: #008785;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  padding: 0.2rem 1.6rem;
}

.p-single-solving-problem__thumbnail {
  margin: 0 0 4.7rem 0;
}

.p-single-solving-problem__thumbnail img {
  border-radius: 0.8rem;
  height: auto;
  width: 100%;
}

.p-single-solving-problem__read {
  margin: 0 0 6rem 0;
}

.p-single-solving-problem__read p {
  font-size: clamp(1.6rem, 0.26vw + 1.32rem, 1.8rem);;
  font-weight: 500;
  line-height: 1.8888888889;
}

.p-single-solving-problem__read ul {
  border-bottom: dotted 2px #707070;
  border-top: dotted 2px #707070;
  line-height: 1.8888888889;
  margin: 2rem 0 2rem 0;
  padding: 2rem 0;
}

.p-single-solving-problem__read ul li {
  font-size: 1.8rem;
  font-weight: 500;
  padding-left: 2.2rem;
  position: relative;
}
@media (width <= 667px) {
  .p-single-solving-problem__read ul li {
    font-size: 1.6rem;
  }
}

.p-single-solving-problem__read ul a {
  color: #008785;
  text-decoration: underline;
}

.p-single-solving-problem__read ul li::before {
  color: #6BB9B8;
  content: "●";
  font-size: 0.9em;
  left: 0;
  position: absolute;
  top: 0.1em;
}

.p-single-solving-problem__read h2 {
  border-bottom: solid #008785 6px;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.6153846154;
  margin: 0 0 2.5rem 0;
  padding: 0 0 1rem 0;
}
@media (width <= 667px) {
  .p-single-solving-problem__read h2 {
    font-size: 2rem;
  }
}

.p-single-solving-problem__read h3 {
  color: #008785;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.7083333333;
  margin: 0 0 2rem 0;
}

.p-single-solving-problem__read h4 {
  font-size: 2rem;
  font-weight: 900;
}

.p-single-solving-problem__read strong {
  color: #f96718;
  font-weight: bold;
}

.p-single-solving-problem__contents .content {
  margin: 0 0 4.8rem 0;
}

.p-single-solving-problem__contents h2 {
  border-bottom: solid #008785 6px;
  font-size: 2.7rem;
  font-weight: bold;
  line-height: 1.6296296296;
  margin: 0 0 3.6rem 0;
  padding: 0 0 0.4rem 0;
}
@media (width <= 667px) {
  .p-single-solving-problem__contents h2 {
    font-size: 2rem;
  }
}

.p-single-solving-problem__contents h3 {
  color: #008785;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.7083333333;
  margin: 0 0 1rem 0;
}
@media (width <= 667px) {
  .p-single-solving-problem__contents h3 {
    font-size: 2rem;
  }
}

.p-single-solving-problem__contents h4 {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.7;
  margin: 0;
}

.p-single-solving-problem__contents p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8888888889;
  margin: 0 0 3.2rem 0;
}
@media (width <= 667px) {
  .p-single-solving-problem__contents p {
    font-size: 1.6rem;
  }
}

.p-single-solving-problem__contents p a {
  color: #008785;
  text-decoration: underline;
}

.p-single-solving-problem__img {
  margin: 0 0 2.7rem 0;
}

.p-single-solving-problem__img img {
  border-radius: 0.8rem;
  height: auto;
  width: 100%;
}

.p-single-solving-problem__contents ul {
  border-bottom: dotted 2px #707070;
  border-top: dotted 2px #707070;
  margin: 1.6rem 0 1.6rem 0;
  padding: 2rem 0;
}

.p-single-solving-problem__contents ul li {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
  padding-left: 2.2rem;
  position: relative;
}
@media (width <= 667px) {
  .p-single-solving-problem__contents ul li {
    font-size: 1.6rem;
  }
}
.p-single-solving-problem__contents ul li::before {
  color: #6BB9B8;
  content: "●";
  font-size: 0.9em;
  left: 0;
  position: absolute;
  top: 0.1em;
}

.p-single-solving-problem__contents ul a {
  color: #008785;
  text-decoration: underline;
}

.p-single-solving-problem__contents ol {
  list-style: decimal inside;
  margin: 1.6rem 0 1.6rem 0;
  padding-left: 1.5rem;
}

.p-single-solving-problem__contents ol li {
  color: #f96718;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.p-single-solving-problem__contents .scroll-offset {
  scroll-margin-top: 80px;
  /* 固定ヘッダーの高さに合わせて調整 */
}

.p-single-solving-problem__contents strong {
  color: #f96718;
  font-weight: 500;
}

.p-single-solving-problem__cta.c-rocotime-cta {
  padding: 1.1rem 1.4rem 1.5rem 2.4rem;
  margin: 7rem 0 9rem 0;
  border: 0.5rem solid #162E48;
  border-radius: 2rem;
  grid-template-columns: auto 1fr auto;
}
@media (width <= 667px) {
  .p-single-solving-problem__cta.c-rocotime-cta {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    /* 必要に応じて追加（縦並びで高さ自動に） */
  }
}

.p-single-solving-problem__cta.c-rocotime-cta .c-rocotime-cta__title {
  border-bottom: 0;
  margin: 0;
  padding: 0;
  width: 20.6rem;
}

.p-single-solving-problem__cta.c-rocotime-cta .c-rocotime-cta__sub-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
}

.p-single-solving-problem__cta.c-rocotime-cta .c-rocotime-cta__lead {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}

.p-single-solving-problem__cta.c-rocotime-cta .c-rocotime-cta__text {
  font-size: clamp(1.6rem, 0.26vw + 1.32rem, 1.8rem);
  margin: 0;
}

.p-single-solving-problem__cta.c-rocotime-cta .c-rocotime-cta__body {
  gap: 0rem;
  padding-left: 1rem;
}

.p-single-solving-problem .p-single-solving-problem__ctalink-text {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8888888889;
  margin: 0 0 4.2rem 0;
}
.p-single-solving-problem__ctalink {
  border: solid 1px #707070;
  background-color: #F5F5F5;
  padding: 3.8rem 4.7rem;
}
.p-single-solving-problem__ctalink-title {
  font-size: 2.7rem;
  font-weight: bold;
  color: #008785;
  line-height: 1.6296296296;
  margin: 0 0 1.6rem 0;
}
.p-single-solving-problem__ctalink-txt {
  font-size: clamp(1.6rem, 0.26vw + 1.32rem, 1.8rem);
  line-height: 1.8888888889;
  margin: 0 0 2rem 0;
  font-weight: 500;
}

.p-single-solving-problem__ctalink-demo a {
  align-items: center;
  background-color: #fff;
  border: solid #f96718 4px;
  border-radius: 4rem;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
  display: flex;
  font-size: 2rem;
  font-weight: bold;
  min-width: 35rem;
  padding: 2.3rem 4.8rem;
  transition: background-color 0.3s ease;
  width: -moz-fit-content;
  width: fit-content;
}

.p-single-solving-problem__ctalink-demo a::before {
  background-image: url(../img/common/ico_mail.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 1.9rem;
  margin-right: 0.8rem;
  width: 2.5rem;
}

.p-single-solving-problem__ctaarea {
  display: block;
  flex: 1;
  width: 100%;
}

/* -------------------------------------------*/

@media screen and (max-width: 1280px){
  .p-solution__inner {
    padding-inline: 2.4rem;
  }
  .p-solution-single,
  .p-solution-single__cta,
  .p-solution-single-main {
    padding-inline: 2.4rem;
  }
}

@media screen and (max-width: 667px){
  .p-solution__list {
    gap: 4rem;
    grid-template-columns: 1fr;
  }
  .p-solution__title {
    font-size: 2.4rem;
    padding: 1.6rem 3rem;
  }
  .p-solution__text {
    font-size: 1.8rem;
  }
  .p-solution-single-main {
    margin-top: 2.4rem;
  }
  .p-single-solving-problem__title {
    font-size: 2.4rem;
  }
  .p-single-solving-problem__ctalink {
    padding: 3.2rem;
  }
  .p-single-solving-problem__ctalink-text {
    margin-bottom: 2.4rem;
  }
  .p-single-solving-problem__ctalink-demo a {
    font-size: 1.8rem;
    min-width: 100%;
    padding: 1.6rem 2rem;
  }
}

@media (any-hover: hover){
  .p-solution__link:hover .p-solution__thumbnail {
    transform: scale(1.1);
  }
  .p-solution__link:hover .p-solution__text {
    text-decoration-color: #333333;
  }
  .p-toc__item a:hover {
    color: #008785;
  }
  .p-single-solving-problem__ctalink-demo a:hover {
    background-color: #FFDECC;
  }
}