@charset "utf-8";

/* pg__fv */
.pg__fv {
  background-image: url("https://katsushima.jp/system_panel/uploads/images/fv-works.png");
}

/* works */
.works {
  padding-top: clamp(3.750rem, -1.250rem + 10.417vw, 11.250rem);
}
.works__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.works__top {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.works__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(3.000rem, 1.667rem + 2.778vw, 5.000rem);
  width: fit-content;
  min-width: 226px;
  height: clamp(2.938rem, 2.396rem + 1.128vw, 3.750rem);
  padding-right: 10px;
  padding-left: 20px;
  background-color: #349b8b;
  border: 1px solid #349b8b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  transition: all 0.5s;
}
.works-btn__text {
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(1.000rem, 0.917rem + 0.174vw, 1.125rem);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  transition: all 0.5s;
}
.works-btn__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(2.250rem, 1.917rem + 0.694vw, 2.750rem);
  height: clamp(2.250rem, 1.917rem + 0.694vw, 2.750rem);
  background-color: #c4841e;
}
.works-btn__icon {
  width: clamp(0.750rem, 0.667rem + 0.174vw, 0.875rem);
}
a:hover .works__btn {
  background-color: #fff;
}
a:hover .works__btn .works-btn__text {
  color: #349b8b;
}
.works__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.938rem, 1.146rem + 1.649vw, 3.125rem);
  width: 100%;
  margin-top: clamp(3.750rem, -1.250rem + 10.417vw, 11.250rem);
  padding-right: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
  padding-left: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
  scroll-margin-top: 99px;
}
.works__item {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.works-item__left {
  display: flex;
  flex-direction: column;
  flex: 1039;
  min-width: 0;
  padding-top: clamp(1.312rem, -0.312rem + 3.385vw, 3.750rem);
  padding-right: clamp(0.625rem, -1.333rem + 4.080vw, 3.500rem);
  padding-bottom: clamp(1.500rem, 0.375rem + 2.344vw, 3.188rem);
  padding-left: clamp(0.625rem, -1.333rem + 4.080vw, 3.500rem);
  background-color: #dceadf;
}
.works-item__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.works-item__cate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: clamp(1.812rem, 1.604rem + 0.434vw, 2.125rem);
  padding-right: 12px;
  padding-left: 12px;
  background-color: #fff;
  border: 1px solid #c4841e;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.750rem, 0.583rem + 0.347vw, 1.000rem);
  line-height: 1;
  color: #c4841e;
  white-space: nowrap;
}
.works-item__cate--orange {
  background-color: #c4841e;
  color: #fff;
}
.works-item__title {
  margin-top: 24px;
  padding-bottom: 15px;
  border-bottom: 1px solid #707070;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-size: clamp(1.250rem, 0.750rem + 1.042vw, 2.000rem);
  line-height: 1.4;
  color: #000;
}
.works-item__wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: clamp(1.250rem, 0.625rem + 1.302vw, 2.188rem);
}
.works-item__box {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 0.625rem + 0.521vw, 1.250rem);
}
.works-item-box__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(6.750rem, 5.750rem + 2.083vw, 8.250rem);
  height: clamp(1.938rem, 1.729rem + 0.434vw, 2.250rem);
  background-color: #349b8b;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.750rem, 0.583rem + 0.347vw, 1.000rem);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.works-item-box__text {
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.875rem, 0.792rem + 0.174vw, 1.000rem);
  line-height: 1.75;
  color: #000;
}
.works-item__right {
  position: relative;
  flex: 513;
  min-width: 0;
  overflow: hidden;
}
.works-item__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* flow */
.flow {
  padding-top: clamp(5.313rem, 1.063rem + 8.854vw, 11.688rem);
  scroll-margin-top: 99px;
}
.flow .title__sub--left,
.flow .title__main--left {
  padding-right: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
  padding-left: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
}
.flow__container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.flow__content {
  display: flex;
  align-items: flex-start;
  gap: clamp(3.750rem, 2.750rem + 2.083vw, 5.250rem);
  width: 100%;
  margin-top: clamp(3.750rem, 3.667rem + 0.174vw, 3.875rem);
  padding-left: clamp(1.250rem, -9.417rem + 22.222vw, 17.250rem);
}
.flow__left {
  position: relative;
  flex: 1;
  min-width: 0;
}
.flow__left::before {
  content: "";
  position: absolute;
  top: clamp(0.766rem, -0.036rem + 1.671vw, 1.969rem);
  bottom: clamp(2.688rem, 2.063rem + 1.302vw, 3.625rem);
  left: clamp(0.884rem, -0.110rem + 2.071vw, 2.375rem);
  z-index: 0;
  width: 1px;
  background-color: #c7c7c7;
  transform: translateX(-50%);
}
.flow__item + .flow__item {
  margin-top: clamp(3.750rem, 3.333rem + 0.868vw, 4.375rem);
}
.flow-item__top {
  display: flex;
  align-items: center;
  gap: clamp(0.688rem, -0.188rem + 1.823vw, 2.000rem);
}
.flow-item__number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(1.750rem, -0.250rem + 4.167vw, 4.750rem);
  height: clamp(1.531rem, -0.073rem + 3.342vw, 3.938rem);
  background-color: #349b8b;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(1.000rem, 0.208rem + 1.649vw, 2.188rem);
  line-height: 1;
  color: #fff;
}
.flow-item__title {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-size: clamp(1.250rem, 0.917rem + 0.694vw, 1.750rem);
  line-height: 1;
  color: #349b8b;
}
.flow-item__text {
  margin-top: clamp(1.188rem, 0.729rem + 0.955vw, 1.875rem);
  margin-left: clamp(2.438rem, -0.438rem + 5.990vw, 6.750rem);
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.875rem, 0.792rem + 0.174vw, 1.000rem);
  line-height: 1.75;
  color: #000;
}
.flow__right {
  flex-shrink: 0;
  width: clamp(20.563rem, 6.854rem + 28.559vw, 41.125rem);
  margin-top: clamp(0rem, -11.750rem + 24.479vw, 17.625rem);
}
.flow__img {
  width: 100%;
  height: auto;
  aspect-ratio: 658 / 374;
  object-fit: cover;
}

/* faq */
.faq {
  padding-top: clamp(5.313rem, 1.063rem + 8.854vw, 11.688rem);
  padding-bottom: clamp(5.000rem, 0.833rem + 8.681vw, 11.250rem);
  scroll-margin-top: 99px;
}
.faq .title__sub--left,
.faq .title__main--left {
  padding-left: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
}
.faq__container {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.875rem, -5.750rem + 15.885vw, 13.313rem);
  width: 100%;
}
.faq__left {
  flex-shrink: 0;
  width: clamp(20.188rem, 6.229rem + 29.080vw, 41.125rem);
}
.faq__img {
  width: 100%;
  height: auto;
  margin-top: clamp(3.000rem, -1.542rem + 9.462vw, 9.813rem);
  aspect-ratio: 658 / 379;
  object-fit: cover;
}
.accordion {
  flex: 1;
  min-width: 0;
  padding-right: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
}
.accordion::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px solid #707070;
}
.accordion-header {
  display: flex;
  align-items: center;
  gap: clamp(0.375rem, -0.625rem + 2.083vw, 1.875rem);
  width: 100%;
  padding-top: clamp(1.375rem, -0.167rem + 3.212vw, 3.688rem);
  padding-bottom: clamp(1.250rem, 0.542rem + 1.476vw, 2.313rem);
  padding-left: clamp(0.625rem, -0.833rem + 3.038vw, 2.813rem);
  border-top: 1px solid #707070;
  cursor: pointer;
}
.accordion-header__q {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(1.625rem, -0.333rem + 4.080vw, 4.563rem);
  height: clamp(1.000rem, 0.542rem + 0.955vw, 1.688rem);
  background-color: #349b8b;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.750rem, 0.583rem + 0.347vw, 1.000rem);
  line-height: 1;
  color: #fff;
}
.accordion-header__title {
  flex: 1;
  min-width: 0;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-size: clamp(0.875rem, 0.625rem + 0.521vw, 1.250rem);
  line-height: 1.4;
  color: #000;
}
.accordion-header__icon {
  position: relative;
  flex-shrink: 0;
  width: clamp(1.813rem, 0.646rem + 2.431vw, 3.563rem);
  aspect-ratio: 57 / 37;
  background-color: #fff;
  border: 1px solid #707070;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.accordion-header__icon::before,
.accordion-header__icon::after {
  content: "";
  position: absolute;
  background-color: #707070;
  transition: background-color 0.3s ease-in-out;
}
.accordion-header__icon::before {
  top: 50%;
  left: calc(50% - clamp(0.313rem, 0.125rem + 0.391vw, 0.594rem));
  width: clamp(0.625rem, 0.250rem + 0.781vw, 1.188rem);
  height: 1px;
  margin-top: -0.5px;
}
.accordion-header__icon::after {
  top: calc(50% - clamp(0.313rem, 0.125rem + 0.391vw, 0.594rem));
  left: 50%;
  width: 1px;
  height: clamp(0.625rem, 0.250rem + 0.781vw, 1.188rem);
  margin-left: -0.5px;
  transition: top 0.3s ease, height 0.3s ease, background-color 0.3s ease-in-out;
}
.accordion-header:hover .accordion-header__icon {
  background-color: #349b8b;
  border-color: #349b8b;
}
.accordion-header:hover .accordion-header__icon::before,
.accordion-header:hover .accordion-header__icon::after {
  background-color: #fff;
}
.accordion-header.active .accordion-header__icon::after {
  top: 50%;
  height: 0;
}
.accordion-content {
  padding-bottom: clamp(1.250rem, -0.208rem + 3.038vw, 3.438rem);
  padding-left: clamp(0.625rem, -0.833rem + 3.038vw, 2.813rem);
}
.accordion-content__text {
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.750rem, 0.583rem + 0.347vw, 1.000rem);
  line-height: 1.75;
  color: #000;
}

@media (max-width: 1023px) {
  .works__content,
  .flow,
  .faq {
    scroll-margin-top: 49px;
  }
}

@media (max-width: 767px) {
  .pg__fv {
    background-image: url("https://katsushima.jp/system_panel/uploads/images/pg-fv-works.png");
  }

  .works__top {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .works__content {
    padding-right: 10px;
    padding-left: 10px;
  }
  .works__item {
    flex-direction: column-reverse;
  }
  .works-item__top {
    gap: 10px;
  }
  .works-item__title {
    margin-top: 29px;
    padding-bottom: 20px;
  }
  .works-item__right {
    width: 100%;
    flex: none;
    aspect-ratio: 370 / 196;
  }

  .flow .title__sub--left,
  .flow .title__main--left {
    padding-right: 20px;
    padding-left: 20px;
  }
  .flow__content {
    flex-direction: column;
    gap: 60px;
    padding-left: 20px;
  }
  .flow__left {
    padding-right: 30px;
  }
  .flow__left::before {
    top: 12px;
    bottom: 44px;
    left: 14px;
  }
  .flow__right {
    width: calc(100% - 41px);
    margin-top: 0;
    margin-left: 41px;
  }

  .faq .title__sub--left,
  .faq .title__main--left {
    padding-left: 20px;
  }
  .faq__container {
    flex-direction: column;
    gap: 30px;
  }
  .faq__left {
    width: 82.8%;
  }
  .faq__img {
    aspect-ratio: 323 / 112;
  }
  .accordion {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
  }
  .accordion-header {
    align-items: flex-start;
    padding-right: 10px;
  }
  .accordion-content {
    padding-right: 10px;
  }
  .accordion-content__text {
    line-height: 2;
  }
}