/* stylelint-disable property-no-vendor-prefix */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable selector-id-pattern */

/* 各種コンテンツのスタイル */

/* スケジュールコンテンツ */
.event-box {
  --event-base-radius: var(--plus-number-32);
  --event-padding: var(--plus-number-32);

  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: center;
  align-self: start;
  justify-content: center;
  padding: var(--event-padding);
  padding-top: calc(var(--plus-number-80) + var(--plus-number-08));
  background-color: var(--bg-secondary);
  border-radius: var(--event-base-radius);
}

.event-box.trial {
  background-color: var(--bg-sub-nature);
}

.event-box.atten {
  background-color: var(--bg-sub-thesky);
}

.event-title {
  position: absolute;
  top: var(--plus-number-32);
  left: 0;
  width: calc(calc(var(--percentage-100) / 4) * 3);
  padding: var(--plus-number-08) var(--plus-number-32);
  font-size: var(--fs-28);
  font-weight: var(--jp-medium);
  line-height: var(--lh-100);
  color: var(--text-onfill);
  letter-spacing: var(--ls-s);
  background: var(--bg-item);
  border-radius: var(--radius-one-side-r);
}

.event-box.trial > .event-title {
  background-color: var(--bg-nature);
}

.event-box.atten > .event-title {
  background-color: var(--bg-thesky);
}

.event-list {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-16) var(--plus-number-24);
  align-items: center;
  justify-content: center;
  width: var(--percentage-100);
  padding: var(--plus-number-24);
  background-color: var(--bg-primary);
  border-radius: calc(var(--event-base-radius) - var(--event-padding));
  box-shadow: var(--drop-shadow-box);
}

.event-year time {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: var(--fs-14);
  line-height: var(--lh-100);
}

.event-year span {
  font-family: var(--font-en);
  font-size: var(--fs-18);
  font-weight: var(--en-medium);
  letter-spacing: var(--ls-m);
}

.event-month {
  padding: var(--plus-number-08) var(--plus-number-24);
  background-color: var(--bg-thesky);
  border-radius: var(--radius-corners);
}

.event-month time {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: var(--fs-18);
  font-weight: var(--jp-medium);
  color: var(--text-onfill);
}

.event-month span {
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: var(--en-bold);
  letter-spacing: var(--ls-m);
}

.event-day {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.event-day time {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: var(--fs-24);
  font-weight: var(--jp-medium);
  line-height: var(--lh-100);
  color: var(--text-description);
}

.event-day span {
  font-family: var(--font-en);
  font-size: var(--fs-35);
  font-weight: var(--en-bold);
  line-height: var(--lh-100);
  color: var(--text-body);
  letter-spacing: var(--ls-m);
}

.event-week {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--plus-number-24);
  height: var(--plus-number-24);
  font-size: var(--fs-14);
  font-weight: var(--jp-medium);
  line-height: var(--lh-100);
  color: var(--text-onfill);
  border-radius: var(--percentage-50);
}

.event-week.weekdays {
  background-color: var(--bg-item);
}

.event-week.saturday {
  background-color: var(--bg-thesky);
}

.event-week.sunday {
  background-color: var(--bg-sun);
}

.event-times {
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-08);
}

.event-time-list {
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-04);
}

.event-time {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.event-time time {
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: var(--en-bold);
  line-height: var(--lh-100);
}

.event-group {
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-08) var(--plus-number-16);
  align-items: center;
}

.event-group dt.deco02 {
  background-color: var(--bg-close-thesky);
}

.event-group > dt {
  flex-grow: 1;
}

.event-group > dd {
  flex-basis: 80%;
  flex-grow: 2;
}

.event-group-list {
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-16);
}

.event-group-list > li {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-16);
  align-items: center;
}

.event-group-list > li:not(:last-of-type)::after {
  display: block;
  width: var(--plus-number-01);
  height: var(--plus-number-48);
  content: "";
  background-color: var(--bg-onfill);
  transform: rotate(25deg);
}

@media (width <= 1080px) {
  .event-title {
    width: calc(var(--percentage-100) - var(--plus-number-24));
    font-size: var(--fs-24);
  }
}

@media (width <= 520px) {
  .event-box {
    --event-padding: var(--plus-number-16);

    padding-top: var(--plus-number-80);
  }

  .event-title {
    top: var(--plus-number-24);
    font-size: var(--fs-20);
  }

  .event-times {
    flex-flow: column nowrap;
    width: var(--percentage-100);
  }

  .event-time-list {
    flex-flow: column nowrap;
    text-align: center;
  }

  .event-time {
    justify-content: center;
  }

  .event-group-list {
    flex-flow: column nowrap;
    gap: var(--plus-number-08);
    align-items: center;
  }

  .event-group-list > li:not(:last-of-type)::after {
    display: none;
  }
}

/* 固定ページ内スケジュールコンテンツ */
.schedule-display > p {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
}

.schedule-content {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: center;
}

.schedule-content .event-times {
  gap: var(--plus-number-16) var(--plus-number-32);
  justify-content: center;
}

.schedule-content .event-time {
  gap: var(--plus-number-04);
  font-size: var(--fs-24);
  font-weight: var(--jp-medium);
  color: var(--text-sun);
}

.schedule-content .event-time time,
.schedule-content .event-time span {
  font-family: var(--font-en);
  font-size: var(--fs-35);
  font-weight: var(--en-bold);
}

.schedule-content .event-box {
  flex-flow: row wrap;
  width: var(--percentage-100);
  padding: var(--plus-number-32);
}

.schedule-content .event-list {
  width: calc(var(--percentage-50) - var(--plus-number-16));
}

@media (width <= 810px) {
  .schedule-content .event-list {
    width: var(--percentage-100);
  }
}

@media (width <= 520px) {
  .schedule-content .event-box {
    padding: var(--plus-number-16);
  }
}

/* 特典リストコンテンツ */
.special-box {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: flex-end;
}

.special-box > li {
  position: relative;
  align-items: center;
  justify-items: center;
  width: calc(var(--percentage-100) - var(--plus-number-24));
  padding: var(--plus-number-40);
  margin-top: var(--plus-number-40);
  border: var(--bd-item);
  border-radius: var(--radius-32);
}

.special-kinds {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  padding: var(--plus-number-24);
  font-size: var(--fs-24);
  line-height: var(--lh-120);
  color: var(--text-onfill);
  text-align: center;
  letter-spacing: var(--ls-m);
  transform: translate(-25%, -25%);
}

.special-kinds.wave::before {
  position: absolute;
  z-index: -1;
  background-color: var(--bg-sun);
}

.special-content,
.special-detail {
  display: flex;
  flex-flow: column nowrap;
}

.special-content {
  gap: var(--plus-number-16);
  align-items: center;
}

.special-content > dt {
  font-size: var(--fs-35);
  font-weight: var(--jp-bold);
  text-align: center;
}

.special-content > dd {
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-08) 0;
  align-items: center;
  justify-content: center;
  padding: var(--plus-number-16) var(--plus-number-24);
  color: var(--text-onfill);
  background: var(--bg-sun);
  border-radius: var(--radius-16);
}

.special-content > dd .tax::after {
  background-color: var(--bg-primary);
}

.special-detail {
  gap: var(--plus-number-08);
}

@media (width <= 520px) {
  .special-box > li {
    padding-top: var(--plus-number-64);
  }

  .special-content > dd {
    padding: var(--plus-number-24);
  }
}

/* お知らせ一覧 */
.notice-display {
  position: relative;
  display: flex;
  padding: var(--plus-number-40);
  padding-bottom: var(--plus-number-64);
  border: var(--bd-item);
  border-radius: var(--radius-32);
}

.notice-display button {
  position: absolute;
  right: var(--mins-number-01);
  bottom: var(--mins-number-01);
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-08);
  align-items: center;
  justify-content: center;
  padding: var(--plus-number-16) var(--plus-number-64);
  font-size: var(--fs-18);
  line-height: var(--lh-100);
  color: var(--text-onfill);
  background-color: var(--bg-item);
  border-radius: var(--radius-notice-button);
}

.notice-display > button.arrow-right::after {
  background-color: var(--bg-primary);
}

.notice-list-box {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  width: var(--percentage-100);
}

.notice-list-box li:not(:last-of-type) {
  padding-bottom: var(--plus-number-16);
  border-bottom: var(--bd-divider);
}

.notice-list {
  row-gap: var(--plus-number-08);
  align-items: center;
  line-height: var(--lh-100);
}

.notice-list > time {
  font-family: var(--font-en);
  font-size: var(--fs-20);
  line-height: var(--lh-100);
  color: var(--text-description);
}

.notice-list > h3 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-20);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-icon {
  padding: var(--plus-number-08) var(--plus-number-16);
  font-size: var(--fs-14);
  line-height: var(--lh-100);
  text-align: center;
  background-color: var(--bg-disabled);
  border-radius: var(--radius-corners);
}

.notice-icon.trial-category {
  background-color: var(--bg-close-nature);
}

.notice-icon.atten-category {
  background-color: var(--bg-close-thesky);
}

.notice-icon.notice-category {
  background-color: var(--bg-close-sun);
}

.notice-icon.news-category {
  background-color: var(--bg-secondary);
}

@media (width <= 810px) {
  .notice-display {
    padding-bottom: var(--plus-number-72);
  }
}

@media (width <= 520px) {
  .notice-display {
    padding: var(--plus-number-32) var(--plus-number-24);
    padding-bottom: var(--plus-number-72);
  }
}

/* お申込みリストコンテンツ */
.applicationlist-display {
  gap: var(--plus-number-40);
}

.application-display li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--plus-number-16);
  align-items: center;
  padding: var(--plus-number-24);
  padding-top: var(--plus-number-56);
  margin-top: var(--plus-number-40);
}

.application-display li.thesky {
  background-color: var(--bg-sub-thesky);
}

.application-display li.nature {
  background-color: var(--bg-sub-nature);
}

.application-display li.sun {
  background-color: var(--bg-sub-sun);
}

.application-display li.aircraft {
  background-color: var(--bg-secondary);
}

.application-icon {
  position: absolute;
  top: 0;
  width: var(--plus-number-80);
  height: var(--plus-number-80);
  background-color: var(--bg-modal);
  border-radius: var(--percentage-50);
  box-shadow: var(--drop-shadow-drop);
  transform: translate(0, -50%);
}

.application-icon span.mail::before,
.application-icon span.download::after {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--plus-number-40);
  height: var(--plus-number-40);
  transform: translate(50%, 50%);
}

.thesky .application-icon span.mail::before,
.thesky .application-icon span.download::after {
  background-color: var(--bg-thesky);
}

.nature .application-icon span.mail::before,
.nature .application-icon span.download::after,
.aircraft .application-icon span.mail::before,
.aircraft .application-icon span.download::after {
  background-color: var(--bg-nature);
}

.sun .application-icon span.mail::before,
.sun .application-icon span.download::after {
  background-color: var(--bg-sun);
}

.application-content {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: center;
}

.application-content dt {
  font-size: var(--fs-20);
  font-weight: var(--jp-bold);
}

.thesky .application-content dt {
  color: var(--text-thesky);
}

.nature .application-content dt,
.aircraft .application-content dt {
  color: var(--text-nature);
}

.sun .application-content dt {
  color: var(--text-sun);
}

@media (width <= 1080px) {
  .application-end {
    grid-column: span 6;
  }
}

@media (width <= 520px) {
  .application-end {
    grid-column: span 4;
  }
}

/* 写真いっぱい式説明コンテンツ */
.lotsofphoto-display {
  position: relative;
}

.lotsofphoto-photo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--plus-number-08);
}

.lotsofphoto-photo picture:first-of-type {
  grid-column: 1 / 4;
}

.lotsofphoto-photo picture:last-of-type {
  grid-column: 2 / 5;
}

.lotsofphoto-box {
  position: absolute;
  top: var(--plus-number-64);
  right: var(--plus-number-32);
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-40);
  align-items: flex-end;
}

.lotsofphoto-box h3 {
  font-size: var(--fs-35);
  font-weight: var(--jp-medium);
  color: var(--text-brand);
}

.lotsofphoto-box p {
  font-size: var(--fs-18);
  line-height: 2.5;
}

@media (width <= 1080px) {
  .lotsofphoto-box {
    top: var(--plus-number-24);
    right: 0;
    gap: var(--plus-number-32);
  }

  .lotsofphoto-box h3 {
    font-size: var(--fs-28);
  }

  .lotsofphoto-box p {
    font-size: var(--fs-16);
    line-height: 2;
  }
}

@media (width <= 810px) {
  .lotsofphoto-photo {
    grid-row: 2 / 3;
  }

  .lotsofphoto-box {
    position: static;
    grid-row: 1 / 2;
    gap: var(--plus-number-16);
    align-items: center;
  }

  .lotsofphoto-box h3,
  .lotsofphoto-box p {
    text-align: center;
  }
}

@media (width <= 520px) {
  .lotsofphoto-box p {
    text-align: start;
  }
}

/* 特徴リストコンテンツ */
.feature-display,
.feature-box {
  display: flex;
  flex-flow: column nowrap;
}

.feature-display {
  gap: var(--plus-number-64);
}

.feature-box {
  gap: var(--plus-number-24);
}

@media (width <= 810px) {
  .feature-display > li {
    gap: var(--plus-number-16);
  }

  .feature-box {
    gap: var(--plus-number-16);
  }
}

/* コンテンツ一覧式コンテンツ */
.pagelinkbox-display {
  gap: var(--plus-number-16);
}

.pagelinkbox-display > a:last-of-type {
  grid-column: span 8;
}

.pagelinkbox-box {
  position: relative;
}

.pagelinkbox-box dt {
  position: absolute;
  bottom: var(--plus-number-04);
  left: 0;
  z-index: 1;
  min-width: 160px;
  padding: var(--plus-number-08) var(--plus-number-24);
  font-size: var(--fs-20);
  font-weight: var(--jp-medium);
  color: var(--text-brand);
  background-color: var(--bg-primary);
  border-radius: var(--radius-one-side-r);
}

.pagelinkbox-box dd figure {
  z-index: 0;
  display: block;
  border-radius: 0;
}

.pagelinkbox-display > a:last-of-type .pagelinkbox-box dd figure .ratio-banner,
.pagelinkbox-display > a:last-of-type .pagelinkbox-box dd figure .ratio-banner img {
  aspect-ratio: 21 / 4.9;
}

.pagelinkbox-box dd figure figcaption p {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-08);
  align-items: center;
}

.pagelinkbox-box dd figure figcaption p.arrow-right::after {
  background-color: var(--bg-primary);
}

@media (width <= 1080px) {
  .pagelinkbox-display > a:last-of-type {
    grid-column: span 6;
  }
}

@media (width <= 520px) {
  .pagelinkbox-display > a:last-of-type {
    grid-column: span 4;
  }

  .pagelinkbox-box dd figure .ratio-banner,
  .pagelinkbox-box dd figure .ratio-banner img,
  .pagelinkbox-display > a:last-of-type .pagelinkbox-box dd figure .ratio-banner,
  .pagelinkbox-display > a:last-of-type .pagelinkbox-box dd figure .ratio-banner img {
    aspect-ratio: 21 / 8;
  }
}

/* FAQリストコンテンツ */
.faq-display {
  gap: var(--plus-number-32) var(--plus-number-64);
}

.faq-display > li {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
  padding-bottom: var(--plus-number-24);
  border-bottom: var(--bd-divider);
}

@media (width <= 1080px) {
  .faq-display {
    gap: var(--plus-number-32);
  }
}

/* ギャラリーコンテンツ */
.gallery-display li {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
}

@media (width <= 520px) {
  .gallery-display {
    gap: var(--plus-number-40);
  }
}

/* 機材紹介コンテンツ */
.equipment-display {
  gap: var(--plus-number-56);
}

.equipment-display > li {
  padding: var(--plus-number-32);
  background-color: var(--bg-sub-thesky);
  border-radius: var(--radius-16);
}

.equipment-content {
  display: flex;
  flex-flow: column nowrap;
  gap: calc(var(--plus-number-16) - var(--plus-number-04));
}

.equipment-content > dd {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
  align-items: center;
}

.equipment-content > dd p,
.equipment-content > dd a {
  font-size: var(--fs-20);
  font-weight: var(--jp-bold);
  line-height: var(--lh-120);
}

.equipment-content > dd ul {
  margin-bottom: var(--plus-number-04);
}

.equipment-photo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.equipment-photo iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

@media (width <= 810px) {
  .equipment-photo {
    grid-row: 3 / 4;
  }
}

@media (width <= 520px) {
  .equipment-display > li {
    padding: var(--plus-number-16);
  }
}

/* リスト項目コンテンツ */
.listitem-display {
  gap: var(--plus-number-64);
}

.listitem-display > li {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
}

.listitem-content {
  display: flex;
  flex-flow: row wrap;
  gap: 0 var(--plus-number-32);
}

@media (width <= 520px) {
  .listitem-display {
    gap: var(--plus-number-40);
  }
}

/* テーブル項目コンテンツ */
.tableitem-display > li {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
}

/* 要点リストコンテンツ */
.keypoints-display {
  gap: var(--plus-number-32) var(--plus-number-16);
}

.keypoints-display > dt {
  align-self: start;
}

.keypoints-display > dd {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
}

.keypoints-display > dd > p {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: var(--fs-18);
  font-weight: var(--jp-bold);
}

.keypoints-display > dd > p span {
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: var(--en-bold);
  color: var(--text-sun);
  letter-spacing: var(--ls-m);
}

@media (width <= 520px) {
  .keypoints-display {
    gap: var(--plus-number-08);
  }

  .keypoints-display > dd:not(:last-of-type) {
    gap: var(--plus-number-08);
    margin-bottom: var(--plus-number-16);
  }

  .keypoints-display > dd > p {
    justify-content: center;
  }
}

/* 料金リストコンテンツ */
.feelist-display > p {
  justify-self: center;
}

.feelist-box {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  align-self: start;
  padding: var(--plus-number-32);
  background: var(--bg-sub-thesky);
  border-radius: var(--radius-16);
}

.feelist-box dt {
  width: var(--percentage-100);
  padding: var(--plus-number-08);
  font-size: var(--fs-18);
  font-weight: var(--jp-medium);
  color: var(--text-onfill);
  text-align: center;
  background-color: var(--bg-thesky);
}

.feelist-content,
.feelist-content tbody {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
}

.feelist-content {
  width: var(--percentage-100);
  padding: var(--plus-number-16);
  background-color: var(--bg-primary);
  box-shadow: var(--drop-shadow-drop);
}

.feelist-content table:not(.feelist-total) tbody {
  padding-bottom: var(--plus-number-08);
}

.feelist-content tr {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.feelist_discount {
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-08) var(--plus-number-40);
}

.feelist-input {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
}

.feelist-checkbox {
  display: flex;
  flex-flow: row wrap;
  gap: 0 var(--plus-number-08);
  align-items: center;
}

.feelist-checkbox input[type="checkbox"] {
  position: relative;
  width: var(--plus-number-24);
  height: var(--plus-number-24);
  appearance: none;
  border: var(--form-border);
  border-radius: var(--radius-04);
  transition: all 0.2s ease-in-out;
}

.feelist-checkbox input[type="checkbox"]:checked {
  background: var(--form-button);
  border: var(--form-focus);
}

.feelist-checkbox input[type="checkbox"]:checked::before {
  position: absolute;
  top: var(--percentage-50);
  left: var(--percentage-50);
  width: var(--plus-number-08);
  height: var(--plus-number-16);
  content: "";
  border-right: var(--form-checkbox);
  border-bottom: var(--form-checkbox);
  transform: translate(-50%, -60%) rotate(50deg);
}

.feelist-checkbox > span {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-08);
  align-items: center;
}

.feelist-checkbox > span::after {
  position: relative;
  padding: var(--plus-number-04) var(--plus-number-08);
  font-size: var(--fs-14);
  line-height: var(--lh-100);
  color: var(--text-body);
  content: "なし";
  background-color: var(--bg-tertiary);
  transition: all 0.4s;
}

.feelist-checkbox:has(:checked) > span::after {
  color: var(--text-sun);
  content: "あり";
  background-color: var(--bg-sub-sun);
}

.feelist-checked-none,
.feelist-total-none {
  display: none;
}

.feelist-drawn .tax {
  justify-content: end;
}

.feelist-total tbody {
  padding-top: var(--plus-number-08);
  border-top: var(--bd-field);
}

.feelist-total tr {
  font-size: var(--fs-24);
  font-weight: var(--jp-bold);
}

.feelist-total td span span {
  font-size: var(--fs-35);
  color: var(--text-sun);
}

@media (width <= 520px) {
  .feelist-box {
    padding: var(--plus-number-16);
  }
}

/* フローチャートコンテンツ */
.flowchart-display {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-32);
  align-items: flex-start;
  justify-content: center;
}

.flowchart-display > li {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
  width: var(--percentage-100);
}

.flowchart-display::before {
  position: absolute;
  top: calc(var(--plus-number-40) / 2);
  left: var(--percentage-50);
  display: block;
  width: var(--percentage-100);
  height: var(--plus-number-01);
  content: "";
  background-color: var(--bg-sun);
  transform: translateX(-50%);
}

.flowchart-display > li h4 {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
  align-items: center;
  font-weight: var(--jp-bold);
  line-height: var(--lh-100);
  color: var(--text-sun);
  text-align: center;
}

.flowchart-display > li h4::before {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--plus-number-40);
  height: var(--plus-number-40);
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: var(--en-light);
  line-height: var(--lh-100);
  color: var(--text-onfill);
  content: attr(data-flow);
  background-color: var(--bg-sun);
  border-radius: var(--percentage-50);
}

.flowchart-display > li:not(:first-of-type) h4::after {
  position: absolute;
  top: calc(var(--plus-number-16) - var(--plus-number-04));
  display: inline-block;
  width: var(--plus-number-16);
  height: var(--plus-number-16);
  content: "";
  background-color: var(--bg-sun);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10"><path d="M0.4,4.7L4,8.3c0.5,0.5,1.4,0.5,2,0l3.6-3.6c0.9-0.9,0.3-2.4-1-2.4H1.4C0.1,2.3-0.5,3.8,0.4,4.7z"/></svg>');
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10"><path d="M0.4,4.7L4,8.3c0.5,0.5,1.4,0.5,2,0l3.6-3.6c0.9-0.9,0.3-2.4-1-2.4H1.4C0.1,2.3-0.5,3.8,0.4,4.7z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: translate(-96px, 0) rotate(-90deg);
}

@media (width <= 1080px) {
  .flowchart-display {
    flex-flow: column nowrap;
  }

  .flowchart-display::before {
    top: 0;
    left: calc(var(--plus-number-40) / 2);
    width: var(--plus-number-01);
    height: var(--percentage-100);
  }

  .flowchart-display > li h4 {
    flex-flow: row nowrap;
    align-items: center;
  }

  .flowchart-display > li p,
  .flowchart-display > li ul {
    padding-left: var(--plus-number-48);
  }

  .flowchart-display > li:not(:first-of-type) h4::after {
    top: unset;
    transform: translate(12px, -48px) rotate(0deg);
  }
}

/* 証明証リストコンテンツ */
.certificate-box {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: center;
}

.certificate-display {
  padding: var(--plus-number-32);
  background-color: var(--bg-sub-nature);
  border-radius: var(--plus-number-16);
}

.certificate-content {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  padding: var(--plus-number-16);
  background-color: var(--bg-primary);
  box-shadow: var(--drop-shadow-drop);
}

.certificate-content > h3 {
  font-size: var(--fs-24);
  font-weight: var(--jp-medium);
  color: var(--text-nature);
}

.certificate-content > dl {
  display: flex;
  flex-flow: row wrap;
  gap: var(--plus-number-04) var(--plus-number-16);
  align-items: center;
  padding: var(--plus-number-08) var(--plus-number-16);
  border: var(--bd-divider);
}

.certificate-list > li {
  font-size: var(--fs-18);
  line-height: var(--lh-120);
}

.certificate-list > li span {
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: var(--en-bold);
  color: var(--text-sun);
  letter-spacing: var(--ls-m);
}

@media (width <= 520px) {
  .certificate-display {
    padding: var(--plus-number-16);
  }

  .certificate-content > dl {
    padding: var(--plus-number-08);
  }
}

/* 詳細テキストリスト */
.detailtext-display {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: center;
}

.detailtext-content {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
}

.detailtext-content > li {
  position: relative;
  padding-left: var(--plus-number-24);
}

.detailtext-content > li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--plus-number-16);
  height: var(--plus-number-02);
  content: "";
  background-color: var(--bg-far-thesky);
  border-radius: var(--radius-01);
  transform: translate(0, calc(var(--plus-number-16) - var(--plus-number-04)));
}

/* メリットコンテンツ */
.advantages-display {
  align-items: start;
}

.advantages-content {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
  align-items: center;
}

.advantages-content > h3 {
  font-size: var(--fs-28);
  font-weight: var(--jp-bold);
  color: var(--text-brand);
  text-align: center;
}

.advantages-content > p {
  text-align: center;
}

.advantages-main,
.advantages-sub,
.advantages-sub-box > li {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

.advantages-main,
.advantages-sub-box > li {
  gap: var(--plus-number-08);
}

.advantages-main > button {
  align-self: center;
}

.advantages-sub {
  gap: var(--plus-number-16);
}

.advantages-sub-box {
  width: var(--percentage-100);
}

@media (width <= 520px) {
  .advantages-content > h3,
  .advantages-content > p {
    text-align: start;
  }
}

/* マップコンテンツ */
.map-display > dl {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
}

.map-display > dl > dt {
  align-self: center;
  font-size: var(--fs-20);
  font-weight: var(--jp-medium);
  color: var(--text-description);
}

.map-display > dl > dd iframe {
  max-width: 100%;
}

/* アクセス詳細コンテンツ */
.accessdeta-display {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-24);
}

.accessdeta-box {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
}

.accessdeta-box > dt {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-04);
  align-items: center;
  padding-bottom: var(--plus-number-04);
  font-size: var(--fs-24);
  font-weight: var(--jp-medium);
  color: var(--text-description);
  border-bottom: var(--bd-item);
}

.accessdeta-box > dt.car::before,
.accessdeta-box > dt.train::before {
  background-color: var(--bg-brand);
}

.accessdeta-box > dd {
  align-items: center;
  font-size: var(--fs-18);
  font-weight: var(--jp-medium);
}

.accessdeta-box > dd > p {
  padding: var(--plus-number-08);
  text-align: center;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-corners);
}

.accessdeta-list {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-16);
}

.accessdeta-list > li {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.accessdeta-list > li > p:first-of-type,
.accessdeta-required {
  padding: 0 var(--plus-number-04);
  background-color: var(--bg-primary);
}

.accessdeta-list > li::after {
  position: absolute;
  z-index: -1;
  display: block;
  width: var(--percentage-100);
  height: var(--plus-number-02);
  content: "";
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-01);
}

.accessdeta-required {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--plus-number-04);
  align-items: center;
  justify-content: center;
}

.accessdeta-required.car::before {
  background-color: var(--bg-item);
}

.accessdeta-required > span {
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: var(--en-bold);
}

.accessdeta-supplement {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--plus-number-08);
  font-weight: var(--jp-regular);
}

.accessdeta-supplement > dt {
  font-size: var(--fs-20);
  font-weight: var(--jp-bold);
  color: var(--text-brand);
}

.accessdeta-photo {
  align-self: center;
}

@media (width <= 1080px) {
  .accessdeta-box > dd::after {
    right: var(--percentage-50);
    bottom: 0;
    width: var(--plus-number-04);
    height: 20%;
  }
}

@media (width <= 520px) {
  .accessdeta-box > dd::after {
    height: 17.5%;
  }
}