/* Reset
----------------------------------------------------*/
/* Google reCAPTCHA */
.grecaptcha-badge {
  visibility: hidden;
}

/* KV
----------------------------------------------------*/
/* Layout */
.home-kv {
  background: var(--color-white);
}

.home-kv-inner {
  position: relative;
  z-index: var(--z-index-home-kv);
}

/* Item */
.home-kv-item {
  background: var(--color-image-hover);
  display: block;
  margin: 0 calc(var(--spacing-unit-rem) * 0.5);
}

.home-kv-item-image {
  aspect-ratio: 1400 / 865;
  display: block;
  transition: opacity var(--duration-quickly) ease;
  height: calc(800 / var(--based-viewport-width) * 100vw);
  width: auto;
}

.home-kv-item-image img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-kv-item-image:hover {
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .home-kv-item {
    margin: 0;
  }

  .home-kv-item-image {
    aspect-ratio: 390 / 320;
    height: auto;
    width: 100%;
  }

  .home-kv-item-image img {
    object-fit: cover;
    height: 100%;
  }
}

/* Arrows */
.home-kv-slider-arrow {
  align-items: center;
  display: flex;
  inset: 0 calc(var(--spacing-unit-rem) * 35);
  justify-content: space-between;
  margin: auto;
  pointer-events: none;
  position: absolute;
}

.home-kv-slider-arrow-button {
  --button-size: 50;
  --icon-size: 16;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: background-color var(--duration-quickly) ease;
  width: calc(var(--button-size) / var(--rem-to-px) * var(--rem-unit));
}

.home-kv-slider-arrow-button::before {
  aspect-ratio: 1 / 1;
  background-color: var(--color-sn);
  content: '';
  fill: var(--color-white);
  mask: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 12 18" xmlns="http://www.w3.org/2000/svg"><path d="M11.0004 9L1.90039 18L0.900391 17L8.90039 9L0.900391 1L1.90039 0L11.0004 9Z"/></svg>')
    no-repeat center center / contain;
  transition: background-color var(--duration-quickly) ease;
  width: calc(var(--icon-size) / var(--rem-to-px) * var(--rem-unit));
}

.home-kv-slider-arrow-button:is(.-prev)::before {
  transform-origin: center;
  scale: -1 1;
}

@media (hover: hover) and (pointer: fine) {
  .home-kv-slider-arrow-button:hover {
    background-color: var(--color-accent);
  }

  .home-kv-slider-arrow-button:hover::before {
    background-color: var(--color-white);
  }
}

@media (max-width: 1280px) {
  .home-kv-slider-arrow {
    inset: 0 calc(var(--spacing-unit-rem) * 20);
  }
}

@media (max-width: 860px) {
  .home-kv-slider-arrow {
    inset: 0 calc(var(--spacing-unit-rem) * 10);
  }
}

@media (max-width: 767px) {
  .home-kv-slider-arrow {
    inset: unset;
    top: calc(100% + var(--spacing-unit-rem) * 2);
    right: calc(var(--spacing-unit-rem) * 6);
    left: calc(var(--spacing-unit-rem) * 6);
  }

  .home-kv-slider-arrow-button {
    --button-size: 32;
    --icon-size: 12;
    background: transparent;
    border: 1px solid var(--color-sn);
  }
}

/* Dots */
.home-kv-slider-dots {
  display: flex;
  gap: calc(var(--spacing-unit-rem) * 2);
  justify-content: center;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

:is(.home-kv-slider-dots) button {
  --bullet-size: calc(var(--spacing-unit-rem) * 1);
  aspect-ratio: 1 / 1;
  background: var(--color-sn);
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  font-size: 0;
  padding: 0;
  width: var(--bullet-size);
}

:is(.home-kv-slider-dots) :is(.slick-active) button {
  background: var(--color-accent);
}

@media (max-width: 767px) {
  .home-kv-slider-dots {
    gap: calc(var(--spacing-unit-rem) * 1);
    padding-top: 0;
    position: absolute;
    top: calc(100% + var(--spacing-unit-rem) * 2.5);
    right: 0;
    left: 0;
  }
}

/* Reset Slick.js */
.slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* About
----------------------------------------------------*/
/* Layout */
.home-about {
  display: grid;
  background: var(--color-white);
  justify-items: center;
  padding-top: calc(var(--spacing-unit-rem) * 11);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
  position: relative;
  z-index: 1;
}

.home-about::after {
  --offset-y: calc(var(--spacing-unit-rem) * 42);
  background: var(--color-yellow-lemon);
  content: '';
  position: absolute;
  top: var(--offset-y);
  left: 0;
  height: calc(100% - var(--offset-y));
  width: 100%;
  z-index: -1;
}

.home-about-inner {
  inline-size: var(--content-width);
}

@media (max-width: 767px) {
  .home-about {
    margin: 0 auto;
    padding-top: calc(var(--spacing-unit-rem) * 10);
    padding-bottom: 0;
  }

  .home-about::after {
    --offset-y: calc(var(--spacing-unit-rem) * 33);
  }
}

/* Main */
.home-about-main {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 25);
}

@media (max-width: 767px) {
  .home-about-main {
    gap: calc(var(--spacing-unit-rem) * 85);
  }
}

@media (max-width: 640px) {
  .home-about-main {
    gap: calc(var(--spacing-unit-rem) * 71);
  }
}

@media (max-width: 500px) {
  .home-about-main {
    gap: calc(var(--spacing-unit-rem) * 40);
  }
}

/* Item */
.home-about-item {
  position: relative;
}

.home-about-item:is(.-policy)::before,
.home-about-item:is(.-policy)::after {
  content: '';
  position: absolute;
}

.home-about-item:is(.-policy)::before {
  background: var(--color-white);
  top: 0;
  left: 100%;
  height: 100%;
  width: var(--content-width-offset);
}

.home-about-item:is(.-policy)::after {
  --width: 105;
  aspect-ratio: 105 / 980;
  background: url('/wp/wp-content/themes/jc2024/assets/img/home-2024/dist/svg/img_home_about_item_deco.svg') no-repeat center center / contain;
  opacity: 0.2;
  bottom: calc(0px - var(--spacing-unit-rem) * 28);
  right: calc((var(--spacing-unit-rem) * 19) - var(--content-width-offset));
  width: calc(var(--width) / var(--rem-to-px) * var(--rem-unit));
}

.home-about-item-contents {
  background: var(--color-white);
  width: max-content;
}

.home-about-item:is(.-philosophy) .home-about-item-contents {
  --padding-x: calc(var(--spacing-unit-rem) * 10);
  padding: calc(var(--spacing-unit-rem) * 12) var(--padding-x);
  margin-left: calc(0px - var(--padding-x));
}

.home-about-item:is(.-policy) .home-about-item-contents {
  margin-left: auto;
  padding-top: calc(var(--spacing-unit-rem) * 12);
  padding-right: calc(var(--spacing-unit-rem) * 2);
  padding-bottom: calc(var(--spacing-unit-rem) * 12);
  padding-left: calc(var(--spacing-unit-rem) * 22);
}

.home-about-item-heading {
  color: var(--color-accent);
  font-family: var(--font-mincho);
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.075em;
  line-height: 1.8;
}

.home-about-item-description {
  padding-top: calc(var(--spacing-unit-rem) * 3);
}

.home-about-item-description-line {
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15em;
  line-height: 2;
}

.home-about-item-description-line + .home-about-item-description-line {
  padding-top: calc(var(--spacing-unit-rem) * 3);
}

.home-about-item-caption {
  display: block;
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-medium);
  line-height: 2;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-about-item-image {
  --width: 0;
  position: absolute;
  height: auto;
  width: calc(var(--width) / var(--based-viewport-width) * 100vw);
}

.home-about-item:is(.-philosophy) .home-about-item-image {
  --width: 800;
  aspect-ratio: 800 / 672;
  top: calc(0px - var(--spacing-unit-rem) * 3);
  right: calc((var(--spacing-unit-rem) * 10) - var(--content-width-offset));
}

.home-about-item:is(.-policy) .home-about-item-image {
  --width: 970;
  aspect-ratio: 970 / 495;
  top: calc(0px - var(--spacing-unit-rem) * 14);
  left: calc(0px - var(--content-width-offset));
}

.home-about-item-image img {
  height: auto;
  width: 100%;
}

@media (max-width: 1400px) {
  .home-about-item:is(.-policy)::after {
    --width: 96;
    right: calc((var(--spacing-unit-rem) * 7) - var(--content-width-offset));
    bottom: calc(0px - var(--spacing-unit-rem) * 16);
  }
}

@media (min-width: 768px) and (max-width: 960px) {
  .home-about-item:is(.-policy)::after {
    --width: 80;
    right: calc((var(--spacing-unit-rem) * 5) - var(--content-width-offset));
    bottom: calc(0px - var(--spacing-unit-rem) * 5);
  }

  .home-about-item-description-line {
    font-size: var(--font-size-300);
  }

  .home-about-item:is(.-philosophy) .home-about-item-image {
    right: calc((var(--spacing-unit-rem) * 5) - var(--content-width-offset));
  }

  .home-about-item:is(.-policy) .home-about-item-image {
    --width: 800;
    aspect-ratio: 970 / 640;
  }

  .home-about-item:is(.-policy) .home-about-item-image img {
    object-fit: cover;
    height: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .home-about-item:is(.-philosophy) {
    --offset-x: 5%;
    left: calc(0px - var(--content-width-offset) + var(--home-gutter-width));
    width: calc(100% - var(--offset-x));
  }

  .home-about-item:is(.-policy) {
    left: calc(0px - var(--content-width-offset) + var(--home-gutter-width));
    width: calc(100% + (var(--content-width-offset) * 2) - (var(--home-gutter-width) * 2));
  }

  .home-about-item:is(.-policy)::before {
    display: none;
  }

  .home-about-item:is(.-policy)::after {
    --width: 56;
    right: calc(var(--spacing-unit-rem) * 1);
    bottom: calc(var(--spacing-unit-rem) * 1);
  }

  .home-about-item-contents {
    width: 100%;
  }

  .home-about-item:is(.-philosophy) .home-about-item-contents {
    --padding-x: calc(var(--content-width-offset) / 2);
    margin-left: 0;
    padding-top: 0;
    padding-bottom: calc(var(--spacing-unit-rem) * 6);
  }

  .home-about-item:is(.-policy) .home-about-item-contents {
    padding: calc(var(--spacing-unit-rem) * 23) calc(var(--content-width-offset) / 2) 0;
  }

  .home-about-item-heading {
    font-size: var(--font-size-500);
  }

  .home-about-item-description-line {
    font-size: var(--font-size-200);
  }

  .home-about-item-description-line + .home-about-item-description-line {
    padding-top: calc(var(--spacing-unit-rem) * 2);
  }

  .home-about-item-caption {
    font-size: var(--font-size-50);
    line-height: 2;
    padding-top: calc(var(--spacing-unit-rem) * 1.5);
  }

  .home-about-item:is(.-philosophy) .home-about-item-image {
    --width: 325;
    top: calc(100% - var(--spacing-unit-rem) * 3);
    right: calc(0px - var(--content-width-offset) - var(--offset-x));
  }

  .home-about-item:is(.-policy) .home-about-item-image {
    --width: 338;
    aspect-ratio: 338 / 190;
    top: calc(0px - var(--spacing-unit-rem) * 24);
    left: 0;
  }

  .home-about-item-image img {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .home-about-item:is(.-policy) .home-about-item-contents {
    padding: calc(var(--spacing-unit-rem) * 10) calc(var(--content-width-offset) / 2) 0;
  }
}

@media (max-width: 500px) {
  .home-about-item:is(.-policy) .home-about-item-contents {
    padding: calc(var(--spacing-unit-rem) * 23) calc(var(--content-width-offset) / 2) 0;
  }
  .home-about-item:is(.-policy) .home-about-item-image {
    top: calc(0px - var(--spacing-unit-rem) * 4);
  }
}

/* Banner */
.home-about-banner {
  padding-top: calc(var(--spacing-unit-rem) * 10);
}

.home-about-banner-item {
  background: var(--color-image-hover);
  display: block;
}

.home-about-banner-item img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-about-banner-item:hover img {
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .home-about-banner {
    background: var(--color-white);
    padding: calc(var(--spacing-unit-rem) * 5) calc(var(--content-width-offset) / 2) calc(var(--spacing-unit-rem) * 10);
    position: relative;
    left: calc(0px - var(--content-width-offset) + var(--home-gutter-width));
    width: calc(100% + (var(--content-width-offset) * 2) - (var(--home-gutter-width) * 2));
  }
}

/* Features
----------------------------------------------------*/
/* Layout */
.home-features {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* main */
.home-features-main {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
}

.home-features-main-inner {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 7);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .home-features-main {
    padding-top: calc(var(--spacing-unit-rem) * 4);
  }
}

/* Item */
.home-features-item-contents {
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-features-item-label {
  color: var(--color-accent);
  display: block;
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-light);
  line-height: 1.3;
}

.home-features-item-image img {
  height: auto;
  width: 100%;
}

.home-features-item-heading-ja {
  font-family: var(--font-mincho);
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-features-item-heading-en {
  color: var(--color-sn);
  display: block;
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-light);
  line-height: 1.2;
  padding-top: calc(var(--spacing-unit-rem) * 1);
  text-transform: lowercase;
}

.home-features-item-description {
  font-size: var(--font-size-200);
  letter-spacing: 0.075em;
  line-height: 2.4;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-features-more {
  display: grid;
  justify-items: center;
  padding-top: calc(var(--spacing-unit-rem) * 7);
}

@media (max-width: 767px) {
  .home-features-main-inner {
    gap: calc(var(--spacing-unit-rem) * 6);
    grid-template-columns: 1fr;
  }

  .home-features-item-contents {
    padding-top: calc(var(--spacing-unit-rem) * 1.5);
  }

  .home-features-item-label {
    font-size: var(--font-size-600);
  }

  .home-features-item-heading-ja {
    padding-top: calc(var(--spacing-unit-rem) * 2.5);
  }

  .home-features-item-heading-en {
    font-size: var(--font-size-300);
    padding-top: calc(var(--spacing-unit-rem) * 1.5);
  }

  .home-features-item-description {
    padding-top: calc(var(--spacing-unit-rem) * 1);
  }

  .home-features-more {
    padding-top: calc(var(--spacing-unit-rem) * 3);
  }
}

/* Facilities */
.home-features-facilities {
  padding-top: calc(var(--spacing-unit-rem) * 8);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
}

.home-features-facilities-heading {
  font-family: var(--font-mincho);
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1;
  text-align: center;
}

.home-features-facilities-description {
  font-size: var(--font-size-200);
  line-height: 2.4;
  padding-top: calc(var(--spacing-unit-rem) * 4);
  text-align: center;
}

.home-features-facilities-marquee {
  --item-gap: calc(var(--spacing-unit-rem) * 3);
  overflow: hidden;
  padding-top: calc(var(--spacing-unit-rem) * 7);
  width: 100vw;
}

.home-features-facilities-marquee-wrap {
  display: flex;
  gap: var(--item-gap);
  width: max-content;
}

.home-features-facilities:is(.-marquee-active) .home-features-facilities-marquee-wrap {
  --keyframes-scroll-text-repeat-length: 2;
  animation: scroll_text 30s linear infinite;
}

.home-features-facilities-block {
  display: flex;
  gap: var(--item-gap);
}

.home-features-facility-item-image img {
  --width: 400;
  aspect-ratio: 400 / 240;
  height: auto;
  width: calc(var(--width) / var(--rem-to-px) * var(--rem-unit));
}

.home-features-facility-item-title {
  display: block;
  font-size: var(--font-size-100);
  padding-top: calc(var(--spacing-unit-rem) * 1.5);
}

@media (max-width: 767px) {
  .home-features-facilities {
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }

  .home-features-facilities-heading {
    font-size: var(--font-size-500);
  }

  .home-features-facilities-description {
    margin: 0 auto;
    padding-top: calc(var(--spacing-unit-rem) * 2.5);
    width: var(--content-width);
    word-break: keep-all;
  }

  .home-features-facilities-marquee {
    padding-top: calc(var(--spacing-unit-rem) * 3.5);
    width: calc(100vw - var(--home-gutter-width) * 2);
  }

  .home-features-facility-item-image img {
    --width: 237;
  }
}

/* Activity
----------------------------------------------------*/
/* Layout */
.home-activity {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-activity-main {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
}

@media (max-width: 767px) {
  .home-activity-main {
    padding-top: calc(var(--spacing-unit-rem) * 4);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }
}

/* Item */
.home-activity-item {
  --padding-top: 0;
  padding-top: var(--padding-top);
  position: relative;
}

.home-activity-item + .home-activity-item:not(:is(.-seminar)) {
  --padding-top: calc(var(--spacing-unit-rem) * 33);
}

.home-activity-item + .home-activity-item:is(.-seminar) {
  --padding-top: calc(var(--spacing-unit-rem) * 23.5);
}

@media (max-width: 960px) {
  .home-activity-item + .home-activity-item:not(:is(.-seminar)) {
    --padding-top: calc(var(--spacing-unit-rem) * 10);
  }

  .home-activity-item + .home-activity-item:is(.-seminar) {
    --padding-top: calc(var(--spacing-unit-rem) * 10);
  }
}

@media (max-width: 767px) {
  .home-activity-item + .home-activity-item:not(:is(.-seminar)) {
    --padding-top: calc(var(--spacing-unit-rem) * 9);
  }

  .home-activity-item + .home-activity-item:is(.-seminar) {
    --padding-top: calc(var(--spacing-unit-rem) * 6.5);
  }
}

/* Item contents */
.home-activity-item:not(:is(.-seminar)) .home-activity-item-contents {
  position: relative;
  width: calc(var(--spacing-unit-rem) * 60);
  z-index: 1;
}

.home-activity-item:not(:is(.-seminar)):nth-child(odd) .home-activity-item-contents {
  margin-left: auto;
}

.home-activity-item:is(.-seminar) .home-activity-item-contents {
  text-align: center;
}

.home-activity-item-label {
  color: var(--color-sn);
  display: block;
  font-family: var(--font-sans-serif);
  font-size: calc(30 / var(--rem-to-px) * var(--rem-unit));
  font-weight: var(--font-weight-light);
}

.home-activity-item-heading {
  color: var(--color-accent);
  font-family: var(--font-mincho);
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.075em;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-activity-item-lead {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-semi-bold);
  line-height: 2.1;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-activity-item-description {
  padding-top: calc(var(--spacing-unit-rem) * 3.5);
}

.home-activity-item-description-line {
  font-size: var(--font-size-200);
  line-height: 2.4;
}

.home-activity-item-description-line + .home-activity-item-description-line {
  padding-top: calc(var(--spacing-unit-rem) * 3);
}

.home-activity-item-more {
  padding-top: calc(var(--spacing-unit-rem) * 5);
}

.home-activity-item:is(.-seminar) .home-activity-item-more {
  display: grid;
  justify-items: center;
}

@media (max-width: 767px) {
  .home-activity-item:not(:is(.-seminar)) .home-activity-item-contents {
    padding-top: calc(var(--spacing-unit-rem) * 6);
    width: 100%;
  }

  .home-activity-item-label {
    font-size: var(--font-size-600);
  }

  .home-activity-item-heading {
    font-size: var(--font-size-500);
    padding-top: calc(var(--spacing-unit-rem) * 2.5);
  }

  .home-activity-item:is(.-seminar) .home-activity-item-heading {
    padding-top: calc(var(--spacing-unit-rem) * 1.5);
  }

  .home-activity-item-lead {
    font-size: var(--font-size-300);
    padding-top: calc(var(--spacing-unit-rem) * 1);
    word-break: keep-all;
  }

  .home-activity-item:is(.-seminar) .home-activity-item-lead {
    padding-top: calc(var(--spacing-unit-rem) * 2.5);
  }

  .home-activity-item-description {
    padding-top: calc(var(--spacing-unit-rem) * 0.5);
  }

  .home-activity-item-description-line + .home-activity-item-description-line {
    padding-top: calc(var(--spacing-unit-rem) * 2);
  }

  .home-activity-item-more {
    padding-top: calc(var(--spacing-unit-rem) * 3.5);
  }

  .home-activity-item:is(.-seminar) .home-activity-item-more {
    padding-top: calc(var(--spacing-unit-rem) * 5.5);
  }
}

/* Item image */
.home-activity-item-images {
  position: absolute;
}

.home-activity-item:nth-child(odd) .home-activity-item-images {
  top: 0;
  left: calc(var(--home-gutter-width) - var(--content-width-offset));
}

.home-activity-item:nth-child(even) .home-activity-item-images {
  --offset-x: 40;
  --offset-y: -20;
  top: calc((var(--offset-y) / var(--based-viewport-width) * 100vw) + var(--padding-top));
  right: calc((var(--offset-x) / var(--based-viewport-width) * 100vw) + var(--home-gutter-width) - var(--content-width-offset));
}

.home-activity-item-image {
  position: relative;
  width: calc(var(--width) / var(--based-viewport-width) * 100vw);
  z-index: 1;
}

.home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image1) {
  --width: 720;
}

.home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image2) {
  margin-top: -19%;
  margin-left: 67%;
  --width: 400;
}

.home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image3) {
  margin-top: 9.5%;
  margin-left: 19%;
  --width: 280;
}

.home-activity-item:nth-child(even) .home-activity-item-image:is(.-image1) {
  --width: 640;
}

.home-activity-item:nth-child(even) .home-activity-item-image:is(.-image2) {
  margin-top: -22%;
  margin-left: -32%;
  --width: 360;
}

.home-activity-item:nth-child(even) .home-activity-item-image:is(.-image3) {
  margin-top: 7%;
  margin-left: 37.5%;
  --width: 265;
}

.home-activity-item-image::after {
  background: var(--color-yellow-lemon);
  content: '';
  position: absolute;
  top: calc(var(--offset-y) / var(--based-viewport-width) * 100vw);
  left: calc(var(--offset-x) / var(--based-viewport-width) * 100vw);
  height: 100%;
  width: 100%;
  z-index: -1;
}

.home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image1)::after {
  --offset-x: 45;
  --offset-y: 120;
}

.home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image2)::after {
  --offset-x: 63;
  --offset-y: 80;
}

.home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image3)::after {
  --offset-x: 40;
  --offset-y: 50;
}

.home-activity-item:nth-child(even) .home-activity-item-image:is(.-image1)::after {
  --offset-x: -100;
  --offset-y: 70;
}

.home-activity-item:nth-child(even) .home-activity-item-image:is(.-image2)::after {
  --offset-x: -40;
  --offset-y: 45;
}

.home-activity-item:nth-child(even) .home-activity-item-image:is(.-image3)::after {
  --offset-x: -40;
  --offset-y: 35;
}

.home-activity-item-image img {
  height: auto;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 960px) {
  .home-activity-item:nth-child(even) .home-activity-item-images {
    --offset-y: 120;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image1) {
    --width: 680;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image2) {
    --width: 320;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image1) {
    --width: 600;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image2) {
    --width: 420;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image1)::after {
    --offset-x: 16;
    --offset-y: 42;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image2)::after {
    --offset-x: 20;
    --offset-y: 28;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image1)::after {
    --offset-x: -40;
    --offset-y: 25;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image2)::after {
    --offset-x: -25;
    --offset-y: 30;
  }
}

@media (max-width: 767px) {
  .home-activity-item-images {
    position: relative;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-images,
  .home-activity-item:nth-child(even) .home-activity-item-images {
    top: unset;
    right: unset;
    left: unset;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image1) {
    --width: 270;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image2) {
    margin-top: -15%;
    margin-left: 51%;
    --width: 150;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image3) {
    margin-top: 10.5%;
    margin-left: 0;
    --width: 140;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image1) {
    --width: 225;
    margin-left: auto;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image2) {
    margin-top: -12%;
    margin-left: 5.5%;
    --width: 150;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image3) {
    margin-top: 6%;
    margin-left: 66%;
    --width: 120;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image1)::after {
    --offset-x: 16;
    --offset-y: 42;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image2)::after {
    --offset-x: 20;
    --offset-y: 30;
  }

  .home-activity-item:nth-child(odd) .home-activity-item-image:is(.-image3)::after {
    --offset-x: 30;
    --offset-y: 20;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image1)::after {
    --offset-x: -40;
    --offset-y: 25;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image2)::after {
    --offset-x: -20;
    --offset-y: 20;
  }

  .home-activity-item:nth-child(even) .home-activity-item-image:is(.-image3)::after {
    --offset-x: -15;
    --offset-y: 15;
  }
}

/* Marquee */
.home-activity-marquee {
  --item-gap: calc(var(--spacing-unit-rem) * 4);
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  padding-top: calc(var(--spacing-unit-rem) * 3);
  width: 100vw;
}

.home-activity-marquee-wrap {
  display: flex;
  gap: var(--item-gap);
  width: max-content;
}

.home-activity-marquee:is(.-marquee-active) .home-activity-marquee-wrap {
  --keyframes-scroll-text-repeat-length: 2;
  animation: scroll_text 30s linear infinite;
}

.home-activity-marquee-block {
  display: flex;
  gap: var(--item-gap);
}

.home-activity-marquee-item-image {
  --height: 391;
  height: calc(var(--height) / var(--rem-to-px) * var(--rem-unit));
}

.home-activity-marquee-item-image img {
  height: 100%;
  width: auto;
}

.home-activity-marquee-item-title {
  align-items: baseline;
  display: flex;
  gap: 2em;
  padding-top: calc(var(--spacing-unit-rem) * 1.5);
}

.home-activity-marquee-item-title-large {
  font-family: var(--font-mincho);
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-semi-bold);
}

.home-activity-marquee-item-title-small {
  font-size: var(--font-size-100);
}

@media (max-width: 767px) {
  .home-activity-marquee {
    --item-gap: calc(var(--spacing-unit-rem) * 1.5);
    padding-top: calc(var(--spacing-unit-rem) * 4);
  }

  .home-activity-marquee-item-image {
    --height: 184;
  }

  .home-activity-marquee-item-title {
    flex-direction: column;
    gap: calc(var(--spacing-unit-rem) * 1);
    padding-top: calc(var(--spacing-unit-rem) * 1.2);
  }

  .home-activity-marquee-item-title-large {
    font-size: var(--font-size-100);
  }

  .home-activity-marquee-item-title-small {
    font-size: var(--font-size-25);
  }
}

/* Recommend
----------------------------------------------------*/
/* Layout */
.home-recommend {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-recommend-main {
  inline-size: var(--content-width);
  overflow: hidden;
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
}

@media (max-width: 767px) {
  .home-recommend-main {
    padding-top: calc(var(--spacing-unit-rem) * 4);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }

  .home-recommend-slider {
    margin: auto;
    width: calc(280 / var(--rem-to-px) * var(--rem-unit));
  }
}

/* Item */
.home-recommend-item {
  background: var(--color-image-hover);
  display: block;
  margin: 0 calc(var(--spacing-unit-rem) * 4);
}

.home-recommend-item img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-recommend-item:hover img {
    opacity: 0.75;
  }
}

.home-recommend-slider-dots {
  display: flex;
  gap: calc(var(--spacing-unit-rem) * 2);
  justify-content: center;
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

:is(.home-recommend-slider-dots) button {
  --bullet-size: calc(var(--spacing-unit-rem) * 1);
  aspect-ratio: 1 / 1;
  background: var(--color-sn);
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  font-size: 0;
  padding: 0;
  width: var(--bullet-size);
}

:is(.home-recommend-slider-dots) :is(.slick-active) button {
  background: var(--color-accent);
}

@media (max-width: 767px) {
  .home-recommend-item {
    margin: 0;
  }
}

/* Menu
----------------------------------------------------*/
/* Layout */
.home-menu {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-menu-main {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
}

.home-menu-main-inner {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 7);
}

@media (max-width: 767px) {
  .home-menu-main {
    padding-top: calc(var(--spacing-unit-rem) * 4);
  }

  .home-menu-main-inner {
    gap: calc(var(--spacing-unit-rem) * 5.5);
  }
}

/* Block */
.home-menu-block-heading {
  color: var(--color-accent);
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  padding-bottom: calc(var(--spacing-unit-rem) * 3);
}

.home-menu-block-main {
  border: 0.5px solid #808080;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 767px) {
  .home-menu-block-heading {
    font-size: var(--font-size-300);
    padding-bottom: calc(var(--spacing-unit-rem) * 2);
  }

  .home-menu-block-main {
    border: 0;
    gap: calc(var(--spacing-unit-rem) * 0.5) calc(var(--spacing-unit-rem) * 1.5);
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Item */
.home-menu-item {
  display: block;
  border: 0.5px solid #808080;
  position: relative;
  transition: filter var(--duration-quickly) ease;
}

.home-menu-item::after {
  --border-width-offset: 1px;
  background: rgba(214, 90, 119, 0.03);
  border: 2px solid var(--color-accent);
  content: '';
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(0px - var(--border-width-offset));
  left: calc(0px - var(--border-width-offset));
  transition: opacity var(--duration-quickly) ease;
  height: calc(100% + var(--border-width-offset) * 2);
  width: calc(100% + var(--border-width-offset) * 2);
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .home-menu-item:hover::after {
    opacity: 1;
  }
}

.home-menu-item-inner {
  display: block;
}

.home-menu-item-inner img {
  aspect-ratio: 243 / 77; /* ボタン毎に画像サイズが異なるので強制的に縦横比を固定 */
  height: auto;
  width: 100%;
}

.home-menu-more {
  align-items: center;
  display: flex;
  gap: calc(var(--spacing-unit-rem) * 9);
  justify-content: center;
  padding-top: calc(var(--spacing-unit-rem) * 5);
}

@media (max-width: 767px) {
  .home-menu-item {
    border: 0;
  }

  .home-menu-more {
    flex-direction: column;
    gap: calc(var(--spacing-unit-rem) * 3.5);
    padding-top: calc(var(--spacing-unit-rem) * 5.5);
  }
}

/* Search */
.home-menu-search {
  --textfield-height: calc(var(--spacing-unit-rem) * 7);
  border: 1px solid var(--color-accent);
  width: calc(var(--spacing-unit-rem) * 50);
}

:is(.home-menu-search) :is(div.asl_w, div.asl_w *),
:is(.home-menu-search) :is(div.asl_r, div.asl_r *),
:is(.home-menu-search) :is(div.asl_s, div.asl_s *) {
  box-sizing: border-box;
}

:is(.home-menu-search) #ajaxsearchlite1 form {
  height: 100%;
}

:is(.home-menu-search) #ajaxsearchlite1 .probox,
:is(.home-menu-search) div.asl_w .probox {
  background: var(--color-white);
  height: var(--textfield-height);
}

:is(.home-menu-search) #ajaxsearchlite1 .probox .proinput,
:is(.home-menu-search) div.asl_w .probox .proinput {
  color: var(--color-black) !important;
  font-size: var(--font-size-200);
}

:is(.home-menu-search) #ajaxsearchlite1 .probox .proinput input,
:is(.home-menu-search) div.asl_w .probox .proinput input {
  color: var(--color-black) !important;
  font-size: var(--font-size-200);
  height: var(--textfield-height);
}

:is(.home-menu-search) div.asl_w .probox .proinput input.autocomplete {
  margin-top: calc(0px - var(--textfield-height)) !important;
}

:is(.home-menu-search) #ajaxsearchlite1 .probox .proinput input::placeholder,
:is(.home-menu-search) div.asl_w .probox .proinput input::placeholder {
  color: #808080 !important;
}

:is(.home-menu-search) div.asl_w .probox .proloading,
:is(.home-menu-search) div.asl_w .probox .proclose,
:is(.home-menu-search) div.asl_w .probox .promagnifier,
:is(.home-menu-search) div.asl_w .probox .prosettings {
  aspect-ratio: 1 / 1;
  height: var(--textfield-height);
  width: auto;
}

:is(.home-menu-search) div.asl_w .probox .promagnifier {
  background: var(--color-accent);
  border-left: 1px solid transparent;
  transition: background var(--duration-quickly) ease, border-left-color var(--duration-quickly) ease;
  height: 100%;
  width: calc(var(--spacing-unit-rem) * 5);
}

@media (hover: hover) and (pointer: fine) {
  :is(.home-menu-search) div.asl_w .probox .promagnifier:hover {
    background: var(--color-white);
    border-left-color: var(--color-accent);
  }
}

:is(.home-menu-search) div.asl_m .probox {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(.home-menu-search) div.asl_m .probox .promagnifier .innericon,
:is(.home-menu-search) div.asl_m .probox .prosettings .innericon,
:is(.home-menu-search) div.asl_m .probox .proclose .innericon {
  background-color: var(--color-white);
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 37 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.75 16.7494C1.75 8.57443 8.42399 1.88281 16.72 1.88281C25.0178 1.88281 31.69 8.51819 31.69 16.7494C31.69 24.9806 25.0178 31.616 16.72 31.616C8.42399 31.616 1.75 24.9244 1.75 16.7494ZM16.72 0.382812C7.60127 0.382812 0.25 7.74031 0.25 16.7494C0.25 25.7585 7.60127 33.116 16.72 33.116C20.8836 33.116 24.6793 31.594 27.5747 29.0763L35.4667 37.0515C35.758 37.3459 36.2329 37.3484 36.5273 37.0571C36.8218 36.7657 36.8242 36.2909 36.5329 35.9964L28.6608 28.0413C31.4694 25.1088 33.19 21.1364 33.19 16.7494C33.19 7.68044 25.8369 0.382812 16.72 0.382812Z"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: calc(20 / var(--rem-to-px) * var(--rem-unit));
  transition: background-color var(--duration-quickly) ease;
}

@media (hover: hover) and (pointer: fine) {
  :is(.home-menu-search) div.asl_m .probox .promagnifier:hover .innericon,
  :is(.home-menu-search) div.asl_m .probox .prosettings:hover .innericon,
  :is(.home-menu-search) div.asl_m .probox .proclose:hover .innericon {
    background-color: var(--color-accent);
  }
}

:is(.home-menu-search) div.asl_m .probox .promagnifier .innericon svg,
:is(.home-menu-search) div.asl_m .probox .prosettings .innericon svg,
:is(.home-menu-search) div.asl_m .probox .proloading svg {
  display: none;
}

@media (max-width: 767px) {
  .home-menu-search {
    width: 100%;
  }
}

/* Banner */
.home-menu-banner {
  margin: 0 auto;
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
  max-width: calc(var(--spacing-unit-rem) * 104);
}

.home-menu-banner-item {
  background: var(--color-image-hover);
  display: block;
}

.home-menu-banner-item img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-menu-banner-item:hover img {
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .home-menu-banner {
    padding-top: calc(var(--spacing-unit-rem) * 6);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
    width: var(--content-width);
  }
}

/* Case
----------------------------------------------------*/
/* Layout */
.home-case {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-case-main {
  --content-padding-top: calc(var(--spacing-unit-rem) * 10);
  --item-heading-font-size: var(--font-size-400);
  --item-heading-leading: 1.2;
  --item-image-padding-top: calc(var(--spacing-unit-rem) * 3);
  --item-image-aspect-ratio: 360 / 240;
  inline-size: var(--content-width);
  padding-top: var(--content-padding-top);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
  position: relative;
}

.home-case-main-inner {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 8);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .home-case-main {
    --content-padding-top: calc(var(--spacing-unit-rem) * 4.5);
    --content-width: 280;
    --item-heading-font-size: var(--font-size-300);
    --item-image-padding-top: calc(var(--spacing-unit-rem) * 2.5);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }

  .home-case-main-inner {
    grid-template-columns: 1fr;
    margin: auto;
    width: calc(var(--content-width) / var(--rem-to-px) * var(--rem-unit));
  }
}

/* Item */
.home-case-item-heading {
  font-size: var(--item-heading-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--item-heading-leading);
  text-align: center;
}

.home-case-item-image {
  padding-top: var(--item-image-padding-top);
}

.home-case-item-image img {
  aspect-ratio: var(--item-image-aspect-ratio);
  height: auto;
  width: 100%;
}

.home-case-item-detail {
  padding: calc(var(--spacing-unit-rem) * 2) calc(var(--spacing-unit-rem) * 2) 0;
}

.home-case-item-detail-inner {
  background: var(--color-base);
}

.home-case-item-detail-heading {
  align-items: center;
  background: var(--color-base);
  cursor: pointer;
  display: grid;
  font-size: var(--font-size-50);
  font-weight: var(--font-weight-bold);
  line-height: 2;
  padding: calc(var(--spacing-unit-rem) * 1);
  position: relative;
  text-align: center;
  transition: background var(--duration-quickly) ease;
}

.home-case-item-detail-heading::marker,
.home-case-item-detail-heading::-webkit-details-marker {
  display: none;
}

.home-case-item-detail-heading:focus-visible {
  outline: var(--focus-visible-outline);
}

.home-case-item-detail-heading::after {
  aspect-ratio: 1 / 1;
  background: url('/wp/wp-content/themes/jc2024/assets/img/common/arrow_black_narrow.svg') no-repeat center center / contain;
  content: '';
  position: absolute;
  right: calc(var(--spacing-unit-rem) * 2);
  rotate: 90deg;
  transform-origin: center;
  transition: rotate var(--duration-quickly) ease;
  width: calc(var(--spacing-unit-rem) * 1.5);
}

:is([open]) .home-case-item-detail-heading::after {
  rotate: -90deg;
}

@media (hover: hover) and (pointer: fine) {
  .home-case-item-detail-heading:hover {
    background: var(--color-content-divider);
  }
}

.home-case-item-detail-main {
  font-size: var(--font-size-50);
  line-height: 1.8;
  padding: calc(var(--spacing-unit-rem) * 2);
}

.home-case-more {
  display: grid;
  justify-items: center;
  padding-top: calc(var(--spacing-unit-rem) * 5);
}

@media (max-width: 767px) {
  .home-case-item-detail {
    padding: calc(var(--spacing-unit-rem) * 1.5) calc(var(--spacing-unit-rem) * 2.5) 0;
  }

  .home-case-item-detail-heading {
    padding: calc(var(--spacing-unit-rem) * 0.5);
  }

  .home-case-item-detail-main {
    padding: calc(var(--spacing-unit-rem) * 1.5);
  }

  .home-case-more {
    display: none;
  }
}

/* Arrows */
.home-case-slider-arrow {
  --position-x: calc(0px - calc(var(--spacing-unit-rem) * 4));
  --item-image-height: calc(var(--content-width) / calc(var(--item-image-aspect-ratio)));
  align-items: center;
  display: none;
  justify-content: space-between;
  pointer-events: none;
  position: absolute;
  top: calc(var(--content-padding-top) + (var(--item-heading-font-size) * var(--item-heading-leading)) + var(--item-image-padding-top));
  right: var(--position-x);
  left: var(--position-x);
  height: calc(var(--item-image-height) / var(--rem-to-px) * var(--rem-unit));
}

.home-case-slider-arrow-button {
  --button-size: 24;
  --icon-size: 8;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 1px solid var(--color-sn);
  border-radius: 100%;
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
  width: calc(var(--button-size) / var(--rem-to-px) * var(--rem-unit));
}

.home-case-slider-arrow-button::before {
  aspect-ratio: 1 / 1;
  background-color: var(--color-sn);
  content: '';
  mask: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 12 18" xmlns="http://www.w3.org/2000/svg"><path d="M11.0004 9L1.90039 18L0.900391 17L8.90039 9L0.900391 1L1.90039 0L11.0004 9Z"/></svg>')
    no-repeat center center / contain;
  width: calc(var(--icon-size) / var(--rem-to-px) * var(--rem-unit));
}

.home-case-slider-arrow-button:is(.-prev)::before {
  transform-origin: center;
  scale: -1 1;
}

@media (max-width: 767px) {
  .home-case-slider-arrow {
    display: flex;
  }
}

/* SNS
----------------------------------------------------*/
/* Layout */
.home-sns {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-sns-main {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 10);
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
}

@media (max-width: 960px) {
  .home-sns-main {
    gap: calc(var(--spacing-unit-rem) * 5.5);
    padding-top: calc(var(--spacing-unit-rem) * 4.5);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }
}

/* Block */
.home-sns-block {
  display: grid;
  justify-items: center;
}

.home-sns-block:not(.-col2) {
  margin: 0 auto;
  max-width: calc(var(--spacing-unit-rem) * 100);
}

.home-sns-block:is(.-col2) {
  gap: calc(var(--spacing-unit-rem) * 19);
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 960px) {
  .home-sns-block:is(.-col2) {
    gap: calc(var(--spacing-unit-rem) * 5.5);
    grid-template-columns: 1fr;
  }
}

/* Item */
.home-sns-item {
  --youtube-iframe-aspect-ratio: 520 / 310;
  width: 100%;
}

.home-sns-item-heading {
  align-items: baseline;
  color: var(--color-accent);
  display: flex;
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-900);
  gap: calc(var(--spacing-unit-rem) * 2);
  line-height: 1;
  text-transform: uppercase;
}

.home-sns-item-heading::after {
  content: attr(data-text-ja);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
}

.home-sns-item-main {
  padding-top: calc(var(--spacing-unit-rem) * 4);
}

.home-sns-item-more {
  display: grid;
  justify-items: center;
  padding-top: calc(var(--spacing-unit-rem) * 4);
}

@media (max-width: 960px) {
  .home-sns-item-heading {
    font-size: calc(22 / var(--rem-to-px) * var(--rem-unit));
    gap: calc(var(--spacing-unit-rem) * 1);
  }

  .home-sns-item-heading::after {
    font-size: var(--font-size-100);
  }

  .home-sns-item-main {
    padding-top: calc(var(--spacing-unit-rem) * 2.5);
  }
}

/* Instagram */
.home-sns-instagram {
  align-items: center;
  aspect-ratio: var(--youtube-iframe-aspect-ratio);
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 3);
  grid-template-columns: repeat(2, 1fr);
}

.home-sns-instagram-post {
  background: var(--color-image-hover);
}

.home-sns-instagram-post img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-sns-instagram-post:hover img {
    opacity: 0.75;
  }
}

@media (max-width: 960px) {
  .home-sns-instagram {
    aspect-ratio: unset;
    gap: calc(var(--spacing-unit-rem) * 2);
  }
}

/* YouTube */
.home-sns-youtube iframe {
  aspect-ratio: var(--youtube-iframe-aspect-ratio);
  display: block;
  height: auto;
  width: 100%;
}

/* LINE */
.home-sns-line-banner {
  background: var(--color-image-hover);
  display: block;
}

.home-sns-line-banner-inner {
  display: block;
}

.home-sns-line-banner-inner img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-sns-line-banner:hover img {
    opacity: 0.75;
  }
}

/* News
----------------------------------------------------*/
/* Layout */
.home-news {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-news-main {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 7);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
}

@media (max-width: 767px) {
  .home-news-main {
    padding-top: calc(var(--spacing-unit-rem) * 1);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }
}

/* Article */
.home-news-article {
  --thumbnail-width: calc(125 / var(--rem-to-px) * var(--rem-unit));
  border-bottom: 1px solid var(--color-content-divider);
  transition: background var(--duration-quickly) ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-news-article:hover {
    background: #fdfafb;
  }
}

.home-news-article-inner {
  align-items: center;
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 2);
  grid-template-columns: var(--thumbnail-width) 1fr;
  padding: calc(var(--spacing-unit-rem) * 3) calc(var(--spacing-unit-rem) * 4);
}

.home-news-article-inner:is(:link, :visited) {
  color: var(--color-black);
  text-decoration: none;
}

.home-news-article-thumbnail img {
  height: auto;
  width: 100%;
}

.home-news-article-contents {
  align-items: center;
  display: flex;
  gap: calc(var(--spacing-unit-rem) * 2);
}

.home-news-article-category {
  align-items: center;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  font-size: var(--font-size-25);
  justify-content: center;
  height: calc(20 / var(--rem-to-px) * var(--rem-unit));
  width: calc(92 / var(--rem-to-px) * var(--rem-unit));
}

.home-news-article-title {
  display: block;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}

.home-news-article-date {
  display: block;
  font-size: var(--font-size-50);
  color: var(--color-sn);
}

.home-news-more {
  display: grid;
  justify-items: center;
  padding-top: calc(var(--spacing-unit-rem) * 5);
}

@media (max-width: 1536px) {
  .home-news-article-category {
    font-size: var(--font-size-50);
  }

  .home-news-article-title {
    font-size: var(--font-size-300);
  }

  .home-news-article-date {
    font-size: var(--font-size-100);
  }
}

@media (max-width: 767px) {
  .home-news-article-inner {
    align-items: flex-start;
    gap: calc(var(--spacing-unit-rem) * 1.5);
    padding: calc(var(--spacing-unit-rem) * 3) 0;
  }

  .home-news-article-contents {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-news-article-title {
    font-size: var(--font-size-200);
  }

  .home-news-article-category {
    font-size: var(--font-size-25);
  }

  .home-news-article-date {
    font-size: var(--font-size-50);
    line-height: 2;
  }

/*   .home-news-more {
    display: none;
  } */
}

/* Cooperation
----------------------------------------------------*/
/* Layout */
.home-cooperation {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-cooperation-main {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
}

.home-cooperation-lead {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-semi-bold);
}

.home-cooperation-main-inner {
  display: grid;
  align-items: start;
  gap: calc(var(--spacing-unit-rem) * 10);
  grid-template-columns: repeat(2, 1fr);
  padding-top: calc(var(--spacing-unit-rem) * 8);
}

@media (max-width: 767px) {
  .home-cooperation-main {
    padding-top: calc(var(--spacing-unit-rem) * 6);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }

  .home-cooperation-main-inner {
    gap: calc(var(--spacing-unit-rem) * 6.5);
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .home-cooperation-lead {
    display: none;
  }
}

/* Block */
.home-cooperation-block {
  background: var(--color-base);
  padding: calc(var(--spacing-unit-rem) * 8) calc(var(--spacing-unit-rem) * 7);
  position: relative;
}

.home-cooperation-block-heading {
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-medium);
  position: absolute;
  top: calc(0px - calc(var(--spacing-unit-rem) * 2));
  left: 0;
  text-align: center;
  width: 100%;
}

.home-cooperation-block-main {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 3);
}

@media (max-width: 767px) {
  .home-cooperation-block {
    padding: calc(var(--spacing-unit-rem) * 4);
  }

  .home-cooperation-block-heading {
    font-size: var(--font-size-400);
  }

  .home-cooperation-block-main {
    gap: calc(var(--spacing-unit-rem) * 2);
  }
}

/* Item */
.home-cooperation-item {
  --arrow-position-x: calc(var(--spacing-unit-rem) * 5);
  --item-padding-x: calc(var(--spacing-unit-rem) * 2);
  --item-padding-y: calc(var(--spacing-unit-rem) * 4);
  background: var(--color-white);
  padding: var(--item-padding-y) var(--item-padding-x);
}

.home-cooperation-item:is(:link, :visited) {
  border: 1px solid transparent;
  color: var(--color-black);
  display: block;
  padding-right: calc(var(--item-padding-x) + var(--arrow-position-x));
  position: relative;
  text-decoration: none;
  transition: background var(--duration-quickly) ease, border-color var(--duration-quickly) ease;
}

.home-cooperation-item:is(:link, :visited)::before,
.home-cooperation-item:is(:link, :visited)::after {
  background: var(--color-accent);
  content: '';
  position: absolute;
}

.home-cooperation-item:is(:link, :visited)::before {
  top: calc(var(--spacing-unit-rem) * 2);
  right: var(--arrow-position-x);
  bottom: calc(var(--spacing-unit-rem) * 2);
  width: 1px;
}

.home-cooperation-item:is(:link, :visited)::after {
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  margin: auto;
  top: 0;
  right: calc(var(--spacing-unit-rem) * 2);
  bottom: 0;
  height: calc(10 / var(--rem-to-px) * var(--rem-unit));
  width: calc(10 / var(--rem-to-px) * var(--rem-unit));
}

@media (hover: hover) and (pointer: fine) {
  .home-cooperation-item:is(:link, :visited):hover {
    background: #fdfafb;
    border-color: var(--color-accent);
  }
}

.home-cooperation-item-image img {
  margin: 0 auto;
  mix-blend-mode: multiply;
  height: calc(var(--spacing-unit-rem) * 7);
  width: auto;
}

.home-cooperation-item-contents {
  padding-top: calc(var(--spacing-unit-rem) * 1);
}

.home-cooperation-item-heading {
  line-height: 1.1;
  text-align: center;
}

.home-cooperation-item-heading-small {
  font-size: var(--font-size-50);
}

.home-cooperation-item-heading-large {
  font-size: var(--font-size-200);
}

.home-cooperation-item-caption {
  display: block;
  font-size: var(--font-size-50);
  line-height: 1.8;
  padding-top: calc(var(--spacing-unit-rem) * 0.5);
  text-align: center;
}

@media (max-width: 767px) {
  .home-cooperation-item {
    --arrow-position-x: calc(var(--spacing-unit-rem) * 3.5);
    --item-padding-y: calc(var(--spacing-unit-rem) * 3.5);
  }

  .home-cooperation-item:is(:link, :visited) {
  }

  .home-cooperation-item:is(:link, :visited)::after {
    right: calc(var(--spacing-unit-rem) * 2);
    height: calc(7 / var(--rem-to-px) * var(--rem-unit));
    width: calc(5 / var(--rem-to-px) * var(--rem-unit));
  }

  .home-cooperation-item-image:is(.-mobile-small) img {
    height: calc(var(--spacing-unit-rem) * 6);
  }

  .home-cooperation-item-contents {
    padding-top: calc(var(--spacing-unit-rem) * 1);
  }

  .home-cooperation-item-heading {
  }

  .home-cooperation-item-heading:not(.-mobile-flex) {
    display: grid;
  }

  .home-cooperation-item-heading-large {
    line-height: 2.4;
  }

  .home-cooperation-item-heading-small + .home-cooperation-item-heading-large {
    line-height: 2.1;
    font-size: var(--font-size-100);
  }

  .home-cooperation-item-caption {
    padding-top: calc(var(--spacing-unit-rem) * 0.5);
    word-break: keep-all;
  }
}

/* Access
----------------------------------------------------*/
/* Layout */
.home-access {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

/* Main */
.home-access-main {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 9);
  grid-template-columns: 40% 1fr;
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 15);
}

.home-access-image img {
  height: auto;
  width: 100%;
}

.home-access-content-divider {
  background: var(--color-content-divider);
  margin: calc(var(--spacing-unit-rem) * 4) 0;
  height: 1px;
  width: 100%;
}

@media (max-width: 767px) {
  .home-access-main {
    gap: calc(var(--spacing-unit-rem) * 1.5);
    grid-template-columns: 1fr;
    padding-top: calc(var(--spacing-unit-rem) * 4);
    padding-bottom: calc(var(--spacing-unit-rem) * 10);
  }

  .home-access-content-divider {
    margin: calc(var(--spacing-unit-rem) * 3) 0;
  }
}

/* Block */
.home-access-block + .home-access-block {
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-access-block-heading {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
}

.home-access-block:is(.-bus, .-taxi) .home-access-block-heading {
  --icon-size: 30;
  align-items: center;
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 2);
  grid-template-columns: calc(var(--icon-size) / var(--rem-to-px) * var(--rem-unit)) 1fr;
}

.home-access-block:is(.-bus, .-taxi) .home-access-block-heading::before {
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: '';
  width: calc(var(--icon-size) / var(--rem-to-px) * var(--rem-unit));
}

.home-access-block:is(.-bus) .home-access-block-heading::before {
  background-image: url('/wp/wp-content/themes/jc2024/assets/img/home-2024/dist/webp/icon_home_access_bus.webp');
}

.home-access-block:is(.-taxi) .home-access-block-heading::before {
  background-image: url('/wp/wp-content/themes/jc2024/assets/img/home-2024/dist/webp/icon_home_access_taxi.webp');
}

.home-access-block-main:is(.-col2) {
  display: grid;
  gap: calc(var(--spacing-unit-rem) * 2);
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
  .home-access-block + .home-access-block {
    border-top: 1px solid var(--color-content-divider);
    margin-top: calc(var(--spacing-unit-rem) * 3);
    padding-top: calc(var(--spacing-unit-rem) * 2.5);
  }

  .home-access-block:is(.-bus, .-taxi) .home-access-block-heading {
    gap: calc(var(--spacing-unit-rem) * 1);
  }

  .home-access-block-main:is(.-col2) {
    gap: calc(var(--spacing-unit-rem) * 0.5);
    grid-template-columns: 1fr;
  }
}

/* Details */
.home-access-detail {
  padding-top: calc(var(--spacing-unit-rem) * 2);
}

.home-access-block:is(.-bus) .home-access-detail {
  padding-top: calc(var(--spacing-unit-rem) * 3);
}

.home-access-block:is(.-taxi) .home-access-detail {
  padding-top: calc(var(--spacing-unit-rem) * 1);
}

.home-access-detail-heading {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-bold);
  padding-bottom: calc(var(--spacing-unit-rem) * 2);
}

.home-access-detail-description-line {
  font-size: var(--font-size-200);
  line-height: 2;
}

.home-access-detail-description-line + .home-access-detail-description-line {
  padding-top: calc(var(--spacing-unit-rem) * 1);
}

.home-access-detail-more {
  padding-top: calc(var(--spacing-unit-rem) * 2.5);
}

@media (max-width: 767px) {
  .home-access-block:is(.-taxi) .home-access-detail {
    padding-top: calc(var(--spacing-unit-rem) * 2);
  }

  .home-access-detail-heading {
    padding-bottom: calc(var(--spacing-unit-rem) * 1);
  }

  .home-access-detail-description-line + .home-access-detail-description-line {
    padding-top: calc(var(--spacing-unit-rem) * 2);
  }

  .home-access-detail-more {
    padding-top: calc(var(--spacing-unit-rem) * 2);
  }
}

/* Banner
----------------------------------------------------*/
.home-banner {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

.home-banner-inner {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 10);
}

.home-banner-link {
  background: var(--color-image-hover);
  display: block;
  margin: 0 auto;
  width: 70%;
}

.home-banner-link img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-banner-link:hover img {
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .home-banner-inner {
    padding-top: calc(var(--spacing-unit-rem) * 6.5);
    padding-bottom: calc(var(--spacing-unit-rem) * 6.5);
  }

  .home-banner-link {
    width: 100%;
  }
}

/* Reserve
----------------------------------------------------*/
/* Layout */
.home-reserve {
  background: var(--color-yellow-lemon);
  display: grid;
  justify-items: center;
}

.home-reserve-inner {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 6);
  padding-bottom: calc(var(--spacing-unit-rem) * 10);
}

@media (max-width: 767px) {
  .home-reserve-inner {
    padding-top: calc(var(--spacing-unit-rem) * 4.5);
    padding-bottom: calc(var(--spacing-unit-rem) * 6);
  }
}

/* Head */
.home-reserve-heading {
  color: var(--color-accent);
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.home-reserve-heading::before {
  content: attr(data-text-en);
  display: block;
  font-family: var(--font-sans-serif);
  font-size: calc(56 / var(--rem-to-px) * var(--rem-unit));
  font-weight: var(--font-weight-regular);
  line-height: 1;
  padding-bottom: calc(var(--spacing-unit-rem) * 1);
  text-transform: uppercase;
}

.home-reserve-lead {
  display: block;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  padding-top: calc(var(--spacing-unit-rem) * 4);
  text-align: center;
  word-break: keep-all;
}

@media (max-width: 767px) {
  .home-reserve-heading {
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-medium);
  }

  .home-reserve-heading::before {
    font-size: var(--font-size-600);
    padding-bottom: calc(var(--spacing-unit-rem) * 1.5);
  }

  .home-reserve-lead {
    padding-top: calc(var(--spacing-unit-rem) * 3.5);
  }
}

/* Main */
.home-reserve-main {
  display: flex;
  gap: calc(var(--spacing-unit-rem) * 3);
  justify-content: center;
  padding-top: calc(var(--spacing-unit-rem) * 3);
}

@media (max-width: 767px) {
  .home-reserve-main {
    align-items: center;
    flex-direction: column;
  }
}

/* FV直下のバナー */
.home-top-banner {
  background: var(--color-white);
  display: grid;
  justify-items: center;
}

.home-top-banner-inner {
  inline-size: var(--content-width);
  padding-top: calc(var(--spacing-unit-rem) * 10);
  padding-bottom: calc(var(--spacing-unit-rem) * 5);/* 10より変更 */
}

.home-top-banner-link {
  background: var(--color-image-hover);
  display: block;
  margin: 0 auto;
  width: 100%;/* 70%より変更 */
}

.home-top-banner-link img {
  transition: opacity var(--duration-quickly) ease;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .home-top-banner-link:hover img {
    opacity: 0.75;
  }
}

@media (max-width: 767px) {
  .home-top-banner-inner {
    padding-top: calc(var(--spacing-unit-rem) * 10);/* 6.5より変更 */
    padding-bottom: calc(var(--spacing-unit-rem) * 0.5);/* 6.5より変更 */
    }

  .home-top-banner-link {
    width: 100%;
  }
}