/* ========================================
   FONT / TYPOGRAPHY
======================================== */

:root {
  --font-sans:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic",
    "Meiryo", sans-serif;
  --font-en: "Lora", serif;
  --font-slab: "Zilla Slab", serif;

  --tracking-base: 0.04em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;
  --tracking-en: 0.04em;
}

body {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-base);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.home,
body.home * {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic",
    "Meiryo", sans-serif !important;
}

body.home .p-top h1,
body.home .p-top h2,
body.home .p-top h3,
body.home .p-top h4,
body.home .p-top h5,
body.home .p-top h6 {
  font-weight: 400;
}

body.home .p-about__en,
body.home .p-point__en,
body.home .p-contents__en,
body.home .p-admission__en,
body.home .p-access__en,
body.home .p-news__en {
  font-family: var(--font-en) !important;
}

body.home .p-contents__date,
body.home .p-news__meta time,
body.home .l-footer__copyright {
  font-family: var(--font-slab) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: var(--tracking-wider);
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
}

.p-about__en,
.p-point__en,
.p-contents__en,
.p-admission__en,
.p-access__en,
.p-news__en {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: var(--tracking-en);
}

.p-contents__date,
.p-news__meta time,
.l-footer__copyright {
  font-family: var(--font-slab);
  font-weight: 500;
}

/* =========================
   Arrow hover animation
========================= */

.c-arrow-icon {
  position: relative;

  --arrow-w: clamp(28px, 3vw, 40px);
  --arrow-font: clamp(11px, 0.8333vw, 12px);
}

.c-arrow-icon::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--arrow-w);
  aspect-ratio: 36 / 26;

  border-radius: 50%;
  background: #414141;
  flex-shrink: 0;
}

.c-arrow-icon::before {
  content: "→";

  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--arrow-w);
  aspect-ratio: 36 / 26;

  color: #fff;
  font-size: var(--arrow-font);
  font-weight: 700;
  line-height: 1;

  transform: translateY(-50%);
  pointer-events: none;
}

/* 親a hoverで発火 */

a:hover .c-arrow-icon::before,
button:hover.c-arrow-icon::before,
a:hover.c-arrow-icon::before {
  animation: arrowInnerLoop 0.6s ease;
}

/* アニメーション */

@keyframes arrowInnerLoop {
  0% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  35% {
    opacity: 0;
    transform: translateY(-50%) translateX(2px);
  }

  36% {
    opacity: 0;
    transform: translateY(-50%) translateX(-12px);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ========================================
   Disable Hover Opacity
======================================== */

.p-top a:hover,
.p-top a:hover img,
.p-top button:hover {
  opacity: 1 !important;
}

/* ========================================
   SP / Arrow Icon Normalize
======================================== */

@media (max-width: 767px) {
  .c-arrow-icon {
    position: relative;
  }

  .c-arrow-icon::after,
  .c-arrow-icon::before {
    position: absolute;
    top: 50%;
    right: 0;

    width: 7.4359vw;
    min-width: 28px;
    aspect-ratio: 36 / 26;

    transform: translateY(-50%);
  }

  .c-arrow-icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* テキストありボタン：右端にアイコン */
  .p-admission__link,
  .p-access__button,
  .p-news__more,
  .p-contents__more,
  .p-support-links__link,
  .p-about__button {
    padding-right: calc(7.4359vw + 3.5vw);
  }

  /* アイコンのみボタン */
  .p-entry-cta__link,
  .p-bottom-cta__link,
  .p-sns__link {
    width: 7.4359vw;
    min-width: 28px;
    aspect-ratio: 36 / 26;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
  }
}

/* ========================================
   Tablet / Arrow Icon Normalize
======================================== */

@media (min-width: 768px) and (max-width: 1199px) {
  .c-arrow-icon {
    position: relative;
  }

  .c-arrow-icon::after,
  .c-arrow-icon::before {
    position: absolute;
    top: 50%;
    right: clamp(10px, 1.2vw, 16px);

    width: clamp(28px, 3vw, 36px);
    min-width: 28px;
    aspect-ratio: 36 / 26;

    transform: translateY(-50%);
  }

  .c-arrow-icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-admission__link,
  .p-access__button,
  .p-news__more,
  .p-contents__more,
  .p-support-links__link {
    padding-right: calc(clamp(28px, 3vw, 36px) + 2.4vw);
  }

  .p-entry-cta__link,
  .p-bottom-cta__link,
  .p-sns__link {
    width: clamp(28px, 3vw, 36px);
    min-width: 28px;
    aspect-ratio: 36 / 26;
    padding: 0;
  }
}