@charset "utf-8";

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

/* navilion */
.navilion {
  padding-top: clamp(4.125rem, -0.625rem + 9.896vw, 11.250rem);
  padding-bottom: clamp(5.000rem, 0.833rem + 8.681vw, 11.250rem);
  background-image: url("https://katsushima.jp/system_panel/uploads/images/top-bg.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.navilion__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.title__sub--navilion {
  font-size: clamp(0.875rem, 0.292rem + 1.215vw, 1.750rem);
}
.title__main--navilion {
  margin-top: clamp(0.375rem, 0.208rem + 0.347vw, 0.625rem);
  font-size: clamp(1.750rem, 0.917rem + 1.736vw, 3.000rem);
}
.navilion .text1 {
  max-width: 660px;
  margin-top: clamp(1.875rem, 1.458rem + 0.868vw, 2.500rem);
}
.navilion__items {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.250rem, -1.917rem + 6.597vw, 6.000rem);
  width: 100%;
  max-width: 1368px;
  margin-top: clamp(1.438rem, 2.167rem - 0.608vw, 1.875rem);
}
.navilion__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: clamp(13.562rem, 6.188rem + 15.365vw, 24.625rem);
  aspect-ratio: 1;
}
.navilion__item:nth-child(2) {
  margin-top: clamp(0rem, -3.542rem + 7.378vw, 5.312rem);
}
.navilion__item::before {
  content: "";
  position: absolute;
  top: 5.2%;
  left: 5.2%;
  z-index: 0;
  width: 89.7%;
  height: 89.5%;
  border-radius: 50%;
  background: linear-gradient(180deg, #eadbc4 0%, #c4841e 100%);
  opacity: 0.27;
  pointer-events: none;
}
.navilion__item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8edda 0%, #c4841e 100%);
  opacity: 0.7;
  pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, transparent 89.3%, #000 89.8%);
  mask: radial-gradient(closest-side, transparent 89.3%, #000 89.8%);
}
.navilion-item__text {
  position: relative;
  z-index: 1;
  margin-top: 19.8%;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(1.000rem, 0.333rem + 1.389vw, 2.000rem);
  line-height: 1.1;
  text-align: center;
  color: #000;
}
.navilion-item__text--small {
  margin-top: 23.4%;
  font-size: clamp(1.000rem, 0.625rem + 0.781vw, 1.562rem);
}
.navilion-item__icon {
  position: relative;
  z-index: 1;
  width: 51%;
  height: auto;
  margin-top: 12.1%;
}
.navilion-item__icon--2 {
  width: 61.9%;
  margin-top: 10.8%;
}
.navilion-item__icon--3 {
  width: 45.2%;
  margin-top: 7.5%;
}
.recommend {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: clamp(5.000rem, 3.333rem + 3.472vw, 7.500rem);
  padding-right: 20px;
  padding-left: 20px;
}
.recommend__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.813rem, 0.063rem + 1.563vw, 1.938rem);
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-size: clamp(1.500rem, 0.917rem + 1.215vw, 2.375rem);
  line-height: 1.1;
  text-align: center;
  color: #349b8b;
}
.recommend__title::before,
.recommend__title::after {
  content: "";
  flex-shrink: 0;
  width: clamp(1.062rem, 0.604rem + 0.955vw, 1.750rem);
  height: clamp(2.500rem, 1.500rem + 2.083vw, 4.000rem);
}
.recommend__title::before {
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 2px),
    #349b8b calc(50% - 2px),
    #349b8b calc(50% + 2px),
    transparent calc(50% + 2px)
  );
}
.recommend__title::after {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 2px),
    #349b8b calc(50% - 2px),
    #349b8b calc(50% + 2px),
    transparent calc(50% + 2px)
  );
}
.recommend__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.625rem, 0.208rem + 0.868vw, 1.250rem);
  width: 100%;
  max-width: 1064px;
  margin-top: 40px;
}
.recommend__item {
  display: flex;
  align-items: center;
  gap: clamp(1.875rem, 1.667rem + 0.434vw, 2.188rem);
  width: 100%;
  min-height: clamp(6.062rem, 3.271rem + 5.816vw, 10.250rem);
  padding-right: clamp(1.250rem, 1.042rem + 0.434vw, 1.563rem);
  padding-left: clamp(2.500rem, 2.292rem + 0.434vw, 2.813rem);
  background-color: #fff;
}
.recommend-item__icon {
  flex-shrink: 0;
  width: clamp(4.812rem, 3.229rem + 3.299vw, 7.188rem);
  height: clamp(4.188rem, 3.104rem + 2.257vw, 5.813rem);
  object-fit: contain;
  object-position: center;
}
.recommend-item__text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
  line-height: 1.33;
  color: #000;
}

/* gain */
.gain {
  padding-right: clamp(0rem, -7.667rem + 15.972vw, 11.500rem);
  padding-left: clamp(0rem, -7.667rem + 15.972vw, 11.500rem);
}
.gain__inner {
  position: relative;
  background-color: #dceadf;
}
.gain__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: clamp(3.750rem, 2.708rem + 2.170vw, 5.312rem);
  padding-right: 10px;
  padding-bottom: clamp(3.750rem, 3.250rem + 1.042vw, 4.500rem);
  padding-left: 10px;
}
.gain__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 88.14%;
  height: auto;
  max-width: none;
  pointer-events: none;
  object-fit: cover;
  object-position: left top;
}
.gain__title {
  position: relative;
  z-index: 1;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-size: clamp(1.375rem, 0.542rem + 1.736vw, 2.625rem);
  line-height: clamp(2.500rem, 1.667rem + 1.736vw, 3.750rem);
  text-align: center;
  color: #000;
}
.gain__title span {
  position: relative;
  display: inline-block;
}
.gain__title span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: clamp(7.188rem, 3.063rem + 8.594vw, 13.375rem);
  height: clamp(0.312rem, 0.146rem + 0.347vw, 0.562rem);
  margin-bottom: clamp(0rem, -0.375rem + 0.781vw, 0.562rem);
  background-image: radial-gradient(circle closest-side, #c4841e 99%, transparent 100%);
  background-size: clamp(1.375rem, 0.583rem + 1.649vw, 2.562rem) 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}
.gain__content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1152px;
  margin-top: clamp(1.938rem, -0.354rem + 4.774vw, 5.375rem);
}
.gain__left,
.gain__right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: clamp(10.375rem, 5.875rem + 9.375vw, 17.125rem);
  height: clamp(10.500rem, 5.417rem + 10.590vw, 18.125rem);
  margin-top: 64px;
  background-color: #eff0ee;
}
.gain__left {
  align-items: flex-start;
  padding-top: clamp(2.062rem, 1.062rem + 2.083vw, 3.688rem);
  padding-right: clamp(1.000rem, 0.167rem + 1.736vw, 2.250rem);
  padding-bottom: clamp(0.750rem, 0.333rem + 0.868vw, 1.375rem);
  padding-left: clamp(1.062rem, 0.271rem + 1.649vw, 2.250rem);
}
.gain__left::after,
.gain__right::before {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 10rem;
  height: 10px;
  background-color: #eff0ee;
  transform: translateY(-50%);
  pointer-events: none;
}
.gain__left::after {
  left: 100%;
}
.gain__right::before {
  right: 100%;
}
.gain-left__icon {
  align-self: center;
  width: clamp(6.188rem, 3.188rem + 6.250vw, 10.688rem);
  height: auto;
}
.gain-left__text {
  margin-top: 0;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.750rem, 0.500rem + 0.521vw, 1.125rem);
  line-height: clamp(1.000rem, 0.500rem + 1.042vw, 1.750rem);
  color: #000;
}
.gain-left__icon + .gain-left__text {
  margin-top: clamp(0.562rem, 0.188rem + 0.781vw, 1.125rem);
}
.gain__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: clamp(21.875rem, 19.583rem + 4.774vw, 25.312rem);
  height: clamp(18.250rem, 12.542rem + 11.892vw, 26.812rem);
  padding-top: clamp(1.250rem, -0.292rem + 3.212vw, 3.562rem);
  padding-right: clamp(1.250rem, 0.833rem + 0.868vw, 1.875rem);
  padding-bottom: clamp(1.250rem, 0.500rem + 1.563vw, 2.375rem);
  padding-left: clamp(1.250rem, 0.833rem + 0.868vw, 1.875rem);
  background-color: #eff0ee;
  border-top: clamp(1.188rem, 0.979rem + 0.434vw, 1.500rem) solid #c4841e;
  border-right: clamp(1.125rem, 0.917rem + 0.434vw, 1.438rem) solid #c4841e;
  border-bottom: clamp(1.188rem, 0.938rem + 0.521vw, 1.562rem) solid #c4841e;
  border-left: clamp(1.125rem, 0.917rem + 0.434vw, 1.438rem) solid #c4841e;
}
.gain-center__icon {
  width: clamp(7.438rem, 5.938rem + 3.125vw, 9.688rem);
  height: auto;
}
.gain-center__logo {
  width: clamp(10.250rem, 8.125rem + 4.427vw, 13.438rem);
  height: auto;
  margin-top: clamp(1.438rem, 1.229rem + 0.434vw, 1.750rem);
}
.gain-center__text {
  margin-top: clamp(0.938rem, 0.396rem + 1.128vw, 1.750rem);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(0.875rem, 0.792rem + 0.174vw, 1.000rem);
  line-height: clamp(0.938rem, 0.562rem + 0.781vw, 1.500rem);
  text-align: center;
  color: #000;
}
.gain__right {
  padding-top: clamp(1.375rem, 0.708rem + 1.389vw, 2.375rem);
  padding-right: clamp(0.312rem, -0.312rem + 1.302vw, 1.250rem);
  padding-bottom: clamp(1.062rem, 0.229rem + 1.736vw, 2.313rem);
  padding-left: clamp(0.312rem, -0.312rem + 1.302vw, 1.250rem);
}
.gain-right__icon {
  width: clamp(4.812rem, 2.479rem + 4.861vw, 8.344rem);
  height: auto;
}
.gain-right__text {
  width: 100%;
  margin-top: auto;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.750rem, 0.500rem + 0.521vw, 1.125rem);
  line-height: clamp(0.875rem, 0.458rem + 0.868vw, 1.500rem);
  text-align: center;
  color: #000;
  white-space: nowrap;
}
.gain__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 975px;
  margin-top: clamp(3.125rem, 2.833rem + 0.608vw, 3.562rem);
  padding-top: clamp(1.188rem, 0.729rem + 0.955vw, 1.875rem);
  padding-right: clamp(0.625rem, -1.292rem + 3.993vw, 3.500rem);
  padding-bottom: clamp(1.188rem, 0.833rem + 0.738vw, 1.719rem);
  padding-left: clamp(0.625rem, -1.292rem + 3.993vw, 3.500rem);
  background-color: #349b8b;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(0.750rem, 0.500rem + 0.521vw, 1.125rem);
  line-height: clamp(1.500rem, 1.333rem + 0.347vw, 1.750rem);
  text-align: center;
  color: #fff;
}
.gain__text::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: clamp(1.875rem, 1.708rem + 0.347vw, 2.125rem);
  height: clamp(1.750rem, 1.958rem + -0.174vw, 1.875rem);
  background-color: #349b8b;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

/* merit */
.merit {
  padding-top: clamp(2.813rem, -2.688rem + 11.458vw, 11.063rem);
}
.merit__inner {
  padding-right: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
  padding-left: clamp(1.250rem, -5.583rem + 14.236vw, 11.500rem);
}
.merit__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.title__main--merit {
  margin-top: clamp(0.625rem, 0.417rem + 0.434vw, 0.938rem);
  font-size: clamp(1.500rem, 0.500rem + 2.083vw, 3.000rem);
  line-height: clamp(1.625rem, 0.208rem + 2.951vw, 3.750rem);
}
.merit__table {
  display: grid;
  grid-template-columns: 174fr 466fr 466fr;
  width: 100%;
  max-width: 1106px;
  margin-top: clamp(2.500rem, 1.667rem + 1.736vw, 3.750rem);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16);
}
.merit__cell {
  min-width: 0;
}
.merit__cell--head {
  display: grid;
  place-items: center;
  min-height: clamp(2.875rem, 1.958rem + 1.910vw, 4.250rem);
  padding-right: 8px;
  padding-left: 8px;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 700;
  font-size: clamp(0.750rem, 0.500rem + 0.521vw, 1.125rem);
  line-height: 1.56;
  text-align: center;
  overflow-wrap: anywhere;
}
.merit__cell--head.merit__cell--label {
  background-color: #c3dbb7;
  color: #000;
}
.merit__cell--head.merit__cell--shop {
  background-color: #c4841e;
  color: #fff;
}
.merit__cell--head.merit__cell--navilion {
  background-color: #349b8b;
  color: #fff;
}
.merit__cell--label:not(.merit__cell--head) {
  display: grid;
  place-items: center;
  min-height: clamp(4.938rem, 4.604rem + 0.694vw, 5.438rem);
  padding-right: 8px;
  padding-left: 8px;
  background-color: #f0f8ec;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(0.750rem, 0.500rem + 0.521vw, 1.125rem);
  line-height: 1.4;
  text-align: center;
  color: #000;
}
.merit__cell--content {
  display: flex;
  align-items: center;
  min-height: clamp(4.938rem, 4.604rem + 0.694vw, 5.438rem);
  padding-right: 4.3%;
  padding-left: 13.7%;
  background-color: #fff;
}
.merit__cell--content:nth-child(3n) {
  background-color: #f8faf7;
}
.merit__cell:nth-child(n + 7) {
  border-top: 1px solid #bfbfbf;
}
.merit__icon {
  flex-shrink: 0;
  width: 13.3%;
  max-width: 62px;
  height: auto;
  margin-right: 6.9%;
  object-fit: contain;
  object-position: center;
}
.merit__mark {
  flex-shrink: 0;
  width: 6.4%;
  max-width: 30px;
  height: auto;
  margin-right: 7.5%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
}
.melit-cell__text {
  min-width: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(0.750rem, 0.500rem + 0.521vw, 1.125rem);
  line-height: 1.33;
  color: #000;
}

/* 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.75rem, 0.583rem + 0.35vw, 1rem);
  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.75rem, 0.417rem + 0.69vw, 1.25rem);
  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;
}

/* school */
.school {
  padding-bottom: clamp(5.000rem, 3.208rem + 3.733vw, 7.688rem);
}
.school__inner {
  padding-right: clamp(0.625rem, -6.625rem + 15.104vw, 11.500rem);
  padding-left: clamp(0.625rem, -6.625rem + 15.104vw, 11.500rem);
}
.school__inner > a {
  display: block;
}
.school__container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: clamp(1.688rem, 1.229rem + 0.955vw, 2.375rem);
  padding-bottom: clamp(1.250rem, 0.833rem + 0.868vw, 1.875rem);
  background-color: #fff;
  border: 3px solid #009944;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}
.school__container::before {
  content: "";
  position: absolute;
  top: clamp(2.875rem, 11.104rem - 6.858vw, 7.812rem);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(239, 240, 238, 0) 0%, #f0f8ec 100%);
  pointer-events: none;
}
.school__deco1,
.school__deco2 {
  position: absolute;
  z-index: 0;
  width: clamp(10.250rem, 9.125rem + 2.344vw, 11.938rem);
  aspect-ratio: 191 / 342;
  pointer-events: none;
}
.school__deco1 {
  top: 3px;
  left: 3px;
}
.school__deco2 {
  top: clamp(1.438rem, 6.333rem - 4.080vw, 4.375rem);
  right: 3px;
}
.school__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}
.school__left {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  padding-left: clamp(1.938rem, -0.604rem + 5.295vw, 5.750rem);
}
.school__logo {
  width: clamp(12.312rem, 6.146rem + 12.847vw, 21.562rem);
  aspect-ratio: 345 / 55;
  object-fit: contain;
}
.school__title {
  margin-top: clamp(0rem, -0.542rem + 1.128vw, 0.812rem);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(1.500rem, 0.667rem + 1.736vw, 2.750rem);
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: #009944;
}
.school__title span {
  margin-left: clamp(0.438rem, 0.229rem + 0.434vw, 0.750rem);
  font-weight: 500;
  font-size: clamp(1.000rem, 0.333rem + 1.389vw, 2.000rem);
  line-height: 1;
  color: #000;
}
.school__title::after {
  content: "";
  display: block;
  width: clamp(18.812rem, 9.312rem + 19.792vw, 33.062rem);
  max-width: 100%;
  height: 4px;
  margin-top: clamp(0.625rem, -0.208rem + 1.736vw, 1.875rem);
  background-image: radial-gradient(circle closest-side, #009944 99%, transparent 100%);
  background-size: 11px 4px;
  background-repeat: repeat-x;
}
.school__text {
  margin-top: clamp(0.625rem, -0.625rem + 2.604vw, 2.500rem);
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(0.875rem, 0.458rem + 0.868vw, 1.500rem);
  line-height: clamp(1.250rem, 0.417rem + 1.736vw, 2.500rem);
  color: #000;
}
.school__right {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 42.14%;
}
.school__img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.school__circle {
  position: absolute;
  right: clamp(0.625rem, -0.500rem + 2.344vw, 2.312rem);
  bottom: clamp(0.750rem, -0.458rem + 2.517vw, 2.562rem);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.188rem, 2.354rem + 3.819vw, 6.938rem);
  aspect-ratio: 1;
  background-color: #c4841e;
}
.school__arrow {
  width: clamp(1.312rem, 0.729rem + 1.215vw, 2.188rem);
}

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

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

  .navilion {
    background-size: contain;
  }
  .navilion .text1 {
    padding-right: 20px;
    padding-left: 20px;
  }
  .navilion__items {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .navilion__item:nth-child(2) {
    margin-top: 0;
  }
  .recommend {
    padding-right: 10px;
    padding-left: 10px;
  }
  .recommend__title::before {
    background: linear-gradient(
      to bottom left,
      transparent calc(50% - 1px),
      #349b8b calc(50% - 1px),
      #349b8b calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  }
  .recommend__title::after {
    background: linear-gradient(
      to bottom right,
      transparent calc(50% - 1px),
      #349b8b calc(50% - 1px),
      #349b8b calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  }
  .recommend__items {
    grid-template-columns: 1fr;
    max-width: 370px;
  }
  .recommend__item {
    gap: 35px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .recommend-item__text {
    line-height: 1.33;
  }

  .gain__container {
    padding-right: 11px;
    padding-bottom: 60px;
    padding-left: 11px;
  }
  .gain__bg {
    width: 100%;
    height: 629px;
  }
  .gain__title {
    max-width: 17em;
    margin-right: auto;
    margin-left: auto;
    font-size: 20px;
    line-height: 1.75;
  }
  .gain__title span::before {
    margin-bottom: -2px;
  }
  .gain__content {
    flex-wrap: wrap;
    max-width: 350px;
    margin-top: 31px;
    row-gap: 39px;
  }
  .gain__left,
  .gain__right {
    width: calc((100% - 18px) / 2);
    height: auto;
    min-height: 168px;
    margin-top: 0;
    aspect-ratio: auto;
  }
  .gain__left {
    padding-top: 33px;
    padding-right: 10px;
    padding-bottom: 12px;
    padding-left: 14px;
  }
  .gain__left::after,
  .gain__right::before {
    top: 100%;
    width: 10px;
    height: 52px;
    transform: none;
  }
  .gain__left::after {
    left: 50%;
    margin-left: -5px;
  }
  .gain__right::before {
    right: auto;
    left: 50%;
    margin-left: -5px;
  }
  .gain-left__text,
  .gain-right__text {
    position: relative;
    z-index: 1;
  }
  .gain__center {
    width: 100%;
    height: auto;
    order: 3;
    aspect-ratio: 350 / 292;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
  .gain__right {
    order: 2;
    padding-top: 22px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
  }
  .gain-left__text {
    width: 100%;
  }
  .gain-right__text {
    max-width: 120px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.35;
    white-space: normal;
  }
  .gain-center__logo {
    margin-top: 23px;
  }
  .gain-center__text {
    margin-top: 15px;
  }
  .gain__text {
    margin-top: 50px;
    padding-top: 19px;
    padding-right: 10px;
    padding-bottom: 19px;
    padding-left: 10px;
    line-height: 2;
  }

  .merit__inner {
    padding-right: 20px;
    padding-left: 20px;
  }
  .title__main--merit {
    font-size: 22px;
    line-height: 1.08;
  }
  .merit__table {
    grid-template-columns: 95fr 125fr 150fr;
  }
  .merit__cell--head {
    min-height: 46px;
    line-height: 1.33;
  }
  .merit__cell--label:not(.merit__cell--head) {
    place-items: center start;
    min-height: 79px;
    padding-right: 4px;
    padding-left: 8px;
    text-align: left;
    white-space: nowrap;
  }
  .merit__cell--content {
    flex-direction: column;
    justify-content: center;
    min-height: 79px;
    padding-right: 4px;
    padding-left: 4px;
  }
  .merit__cell:nth-child(4),
  .merit__cell:nth-child(5),
  .merit__cell:nth-child(6) {
    min-height: 95px;
  }
  .merit__icon {
    display: none;
  }
  .merit__mark {
    width: 22px;
    max-width: 22px;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .melit-cell__text {
    text-align: center;
  }

  .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;
  }

  .school__container {
    max-width: 500px;
    margin-inline: auto;
    padding-right: 20px;
    padding-left: 20px;
  }
  .school__deco1 {
    top: 0;
    left: 0;
  }
  .school__deco2 {
    top: auto;
    right: 0;
    bottom: 0;
  }
  .school__content {
    flex-direction: column;
    align-items: stretch;
  }
  .school__left {
    padding-left: 0;
  }
  .school__right {
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width: 374px) {
  .recommend__title {
    font-size: 22px;
  }
  .recommend__item {
    gap: 30px;
  }
  .recommend-item__icon {
    width: 60px;
  }
  .recommend-item__text {
    font-size: 14px;
  }

  .gain__title {
    font-size: 16px;
  }
  .gain__left,
  .gain__right {
    padding-inline: 8px;
  }
  .gain-left__text,
  .gain-right__text {
    font-size: 11px;
  }
  .gain-center__text {
    font-size: 12px;
  }

  .merit__inner,
  .merit__container {
    min-width: 0;
    max-width: 100%;
  }
  .merit__table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: 86px 113px 136px;
  }
  .title__main--merit {
    font-size: 20px;
  }
  .school__container {
    padding-inline: 10px;
  }
  .school__text {
    font-size: 12px;
  }
}