:root {
  --ink: #282828;
  --muted: #8d8d8d;
  --line: #e6e2da;
  --paper: #ffffff;
  --cream: #fff6df;
  --cream-soft: #fff9ea;
  --orange: #f79613;
  --nav: #524e44;
  /* Unified beige→orange heading-band gradient (pattern A), single source of truth. */
  --band-gradient: linear-gradient(90deg, #efede4 23.425%, #fcb759 100%);
  --blue: #2f557d;
  --green: #476f63;
  --wix-jp-font: arial, "ｍｓ ｐゴシック", "ms pgothic", 돋움, dotum, helvetica, sans-serif;
}

@font-face {
  font-family: "barlow-medium";
  src: url("/assets/36a372d56830353b.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "alfabet";
  src: url("/assets/74a0196c4b6a7d7f.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "alfabet";
  src: url("/assets/fc3da5ef7c404398.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "alfabet";
  src: url("/assets/bf67593f151e20dd.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "futura-lt-w01-book";
  src: url("/assets/4119f2fe8d454fe6.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "futura-lt-w01-light";
  src: url("/assets/753138253130ac3c.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "avenir-lt-w01_85-heavy1475544";
  src: url("/assets/b05d4dbdbbcefd6b.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "avenir-lt-w01_35-light1475496";
  src: url("/assets/10cc9c0f3098717f.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "proxima-n-w01-reg";
  src: url("/assets/4a47741f9ef9d5cb.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--wix-jp-font);
  line-height: 1.8;
  font-size: 15px;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

.header-top {
  width: min(1060px, calc(100vw - 40px));
  height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 1140px) {
  .header-top {
    /* Wix keeps the header row left-anchored at 114px at any viewport width. */
    margin-right: auto;
    margin-left: 114px;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  position: relative;
  top: -1px;
  width: 36px;
  height: 36px;
  border-radius: 2px;
}

.brand strong {
  position: relative;
  top: 4.1px;
  display: block;
  color: #000;
  font-family: var(--wix-jp-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.brand small {
  position: relative;
  top: -10.1px;
  display: inline-block;
  width: auto;
  margin-top: -4.8px;
  color: #222;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.2px;
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 81px;
  transform: translateY(2px);
}

.top-button {
  min-width: 142px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: #f79613;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.top-button:not(.secondary) {
  min-width: 240px;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 6px;
}

.top-button.secondary {
  background: #f6f2e9;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 16px;
  color: #222;
  letter-spacing: 1.6px;
}

.x-mark {
  position: relative;
  top: 1.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 3px;
  color: #1d1d1d;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
}

.x-mark span {
  width: 28px;
  height: 28px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l8.28-9.46L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l8.28-9.46L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ハンバーガー/ドロワーCTA/スクリムはデスクトップでは非表示（モバイル専用）。 */
.nav-toggle,
.nav-cta-group,
.nav-scrim {
  display: none;
}

.main-nav {
  width: 100%;
  min-height: 34px;
  display: flex;
  justify-content: center;
  background: var(--nav);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.nav-item {
  position: relative;
  flex: 0 0 auto;
}

.nav-link {
  position: relative;
  z-index: 0;
  min-width: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #fff;
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
}

.main-nav > .nav-item:nth-child(1) > .nav-link {
  width: 187px;
}

.main-nav > .nav-item:nth-child(2) > .nav-link {
  width: 202px;
}

.main-nav > .nav-item:nth-child(3) > .nav-link {
  width: 161px;
}

.main-nav > .nav-item:nth-child(4) > .nav-link {
  width: 77px;
}

.main-nav > .nav-item:nth-child(5) > .nav-link {
  width: 118px;
}

.main-nav > .nav-item:nth-child(6) > .nav-link {
  width: 132px;
}

.main-nav > .nav-item:nth-child(7) > .nav-link {
  width: 103px;
}

.nav-link.active,
.nav-link:hover {
  background: transparent;
  color: #524e44;
}

.nav-link.active::before,
.nav-item:not(.has-dropdown) > .nav-link:hover::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: -1;
  background: #efede4;
}

.has-dropdown:hover > .nav-link,
.has-dropdown:focus-within > .nav-link {
  background: var(--nav);
  color: #fff;
}

.has-dropdown:hover > .nav-link::before,
.has-dropdown:focus-within > .nav-link::before {
  content: none;
}

.nav-dropdown {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 20;
  min-width: 186px;
  display: grid;
  background: var(--nav);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown a {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a.active {
  background: #f1eee8;
  color: #3e3a32;
}

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #111;
}

.home-hero {
  margin-top: 1px;
  height: 600px;
}

.hero-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.home-hero .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.37, 0, 0.63, 1);
}

.home-hero .hero-slide.active {
  opacity: 1;
}

.hero-copy {
  position: absolute;
  top: 176px;
  left: 50%;
  z-index: 2;
  width: 560px;
  opacity: 0;
  transform: translateX(-50%);
  animation: hero-copy-in 2.5s ease 0.5s forwards;
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
}

@keyframes hero-copy-in {
  from {
    opacity: 0;
    filter: blur(12px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

.hero-copy p {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.9px;
  transform: translateY(4px);
}

.hero-copy h1 {
  width: fit-content;
  margin: -15px auto 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 96px;
}

.hero-copy span {
  display: block;
  margin-top: -16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.8px;
  letter-spacing: 2.8px;
}

.hero-copy a {
  width: 328px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 40px;
  background: #f79613;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-shadow: none;
}

.hero-badge {
  position: absolute;
  right: calc(50% - 424px);
  bottom: 31px;
  z-index: 2;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1eee8;
  color: #524e44;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 46px;
  z-index: 2;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.hero-dots button {
  width: 6px;
  height: 6px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(232, 230, 230);
  cursor: pointer;
}

.hero-dots button.active,
.hero-dots button[aria-current="true"] {
  background: rgba(255, 255, 255, 0.3);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 54px;
  height: 72px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s, visibility 0.2s;
}

.hero-arrow:hover {
  opacity: 0.6;
}

.hero-arrow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.hero-arrow::before {
  content: "";
  width: 27px;
  height: 27px;
  display: block;
  border-color: rgba(255, 255, 255, 0.88);
  border-style: solid;
  border-width: 0 0 3px 3px;
}

.hero-arrow.previous {
  left: 88px;
}

.hero-arrow.previous::before {
  transform: rotate(45deg);
}

.hero-arrow.next {
  right: 88px;
}

.hero-arrow.next::before {
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy {
    opacity: 1;
    animation: none;
    filter: none;
  }

  .home-hero .hero-slide,
  .hero-arrow {
    transition: none;
  }

  .concept-label::after {
    animation: none;
    transform: translateX(100%);
  }
}

[data-animate] {
  --animate-delay: 0ms;
  --animate-duration: 1000ms;
  --animate-iterations: 1;
}

[data-animate="fade-in"] {
  opacity: 0;
}

[data-animate="shape-center"] {
  opacity: 1;
  clip-path: inset(0 50% 0 50%);
}

[data-animate="shape-left"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}

[data-animate="reveal-left"] {
  opacity: 0;
  position: relative;
  overflow: visible;
  transform: translateX(-18px);
  will-change: opacity, transform;
}

[data-animate="cross-right"] {
  --wix-cross-distance: 18px;
  opacity: 1;
  will-change: transform;
}

[data-animate].is-visible {
  animation-delay: var(--animate-delay);
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
}

[data-animate="fade-in"].is-visible {
  animation-name: wix-fade-in;
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}

[data-animate="shape-center"].is-visible {
  animation-name: wix-shape-center;
  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  opacity: 1;
}

[data-animate="shape-left"].is-visible {
  animation-name: wix-shape-left;
  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  opacity: 1;
}

.orange-line[data-animate="shape-center"].is-visible {
  opacity: 1;
}

[data-animate="reveal-left"].is-visible {
  animation-name: wix-reveal-left;
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  opacity: 1;
}

[data-animate="cross-right"].is-visible {
  animation-name: wix-cross-right;
  animation-timing-function: linear;
  animation-iteration-count: var(--animate-iterations);
}

@keyframes wix-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes wix-shape-center {
  from {
    clip-path: inset(0 50% 0 50%);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes wix-shape-left {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes wix-reveal-left {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-heading-line-grow {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

@keyframes heading-block-line-grow {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes heading-title-fade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wix-cross-right {
  0% {
    transform: translateX(calc(var(--wix-cross-distance) * -1));
  }

  50% {
    transform: translateX(var(--wix-cross-distance));
  }

  100% {
    transform: translateX(calc(var(--wix-cross-distance) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    clip-path: none;
    transform: none;
    animation: none;
  }

  [data-animate="reveal-left"] {
    opacity: 1;
  }

  .home-collage-track,
  .home-collage-img {
    animation: none;
  }

  /* ホバー時の拡大バウンドは抑え、色・影の切替のみ残す。 */
  .gallery-prev,
  .gallery-next,
  .sns-main-frame > button {
    transition:
      background-color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .gallery-prev:hover,
  .gallery-next:hover,
  .gallery-prev:focus-visible,
  .gallery-next:focus-visible,
  .gallery-prev:active,
  .gallery-next:active {
    transform: none;
  }

  /* SNSボタンは縦センタリングの translateY(-50%) を維持したまま拡大だけ止める。 */
  .sns-main-frame > button:hover,
  .sns-main-frame > button:focus-visible,
  .sns-main-frame > button:active {
    transform: translateY(-50%);
  }

}

.subpage-hero {
  position: relative;
  margin-top: 1px;
  height: 200px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.subpage-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subpage-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(126, 89, 43, 0.12);
}

.subpage-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-family: var(--wix-jp-font);
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 4px;
  text-shadow: none;
}

.subpage-hero-concept h1 {
  letter-spacing: normal;
}

.breadcrumb {
  position: relative;
  top: -3.5px;
  width: min(980px, calc(100vw - 40px));
  margin: 25px auto 0;
  color: #999997;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.breadcrumb span,
.breadcrumb a {
  /* ラベルと「>」を近づけ「TOP>」を一括りに見せる（>の後ろの空きは .bc-sep 側で確保）。 */
  margin-right: 4px;
  line-height: normal;
}

/* 末尾が全角閉じ括弧のラベルは字形の右アキ分だけ詰めて、他と同じ見た目の間隔にする。 */
.breadcrumb .bc-tight {
  margin-right: -3px;
}

/* 区切りの「>」は実サイト(Wix)と同一の細いシェブロンSVG（10×10・現在色）。 */
.breadcrumb .bc-sep {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.5 28.9L20.6 3c-.6-.6-1.6-.6-2.2 0l-4.8 4.8c-.6.6-.6 1.6 0 2.2l19.8 20-19.9 19.9c-.6.6-.6 1.6 0 2.2l4.8 4.8c.6.6 1.6.6 2.2 0l21-21 4.8-4.8c.8-.6.8-1.6.2-2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.5 28.9L20.6 3c-.6-.6-1.6-.6-2.2 0l-4.8 4.8c-.6.6-.6 1.6 0 2.2l19.8 20-19.9 19.9c-.6.6-.6 1.6 0 2.2l4.8 4.8c.6.6 1.6.6 2.2 0l21-21 4.8-4.8c.8-.6.8-1.6.2-2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.body-blog-r .breadcrumb,
.body-blog-hh .breadcrumb {
  top: -8.5px;
}

.page {
  width: min(980px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 86px 0 90px;
}

.home-page {
  width: 100%;
  padding: 0;
}

.content-body {
  font-size: 15px;
}

.home-intro {
  position: relative;
  height: 680px;
  display: grid;
  align-content: start;
  justify-items: center;
  overflow: hidden;
  padding: 86px 20px 58px;
  text-align: center;
  background: #fffdf8;
}

.home-intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-body .home-intro h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #524e44;
  font-family: var(--wix-jp-font);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0;
}

.orange-line {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 3px;
  display: block;
  margin: 8px auto 22px;
  background: var(--orange);
}

.home-page .home-intro .orange-line[data-animate].is-visible {
  animation-delay: 1050ms;
}

.home-copy {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 40px));
  margin: 0 auto;
  text-align: center;
}

.home-copy p {
  margin: 0 0 12px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}

.home-audience {
  position: relative;
  min-height: 1032px;
  overflow: hidden;
  padding: 108px 20px 0;
  background: #fff;
  text-align: center;
}

/* Wix decorative color blobs (円ピンク/円イエロー/円オレンジ), measured on live. */
.home-blob {
  position: absolute;
  pointer-events: none;
}

.home-blob-aud-pink {
  left: 246px;
  top: 95px;
  width: 305px;
  height: 305px;
}

.home-blob-aud-yellow {
  left: 967px;
  top: 451px;
  width: 400px;
  height: 400px;
}

.home-blob-links-orange {
  left: 157px;
  top: 16px;
  width: 351px;
  height: 351px;
}

.home-blob-links-pink {
  left: 918px;
  top: 228px;
  width: 305px;
  height: 305px;
}

.content-body .home-audience h2,
.content-body .home-links h2 {
  margin: 0 0 68px;
  color: #524e44;
  font-family: var(--wix-jp-font);
  font-size: 24px;
  font-weight: 900;
  line-height: 34.8px;
  letter-spacing: 0;
}

.content-body .home-audience h2 {
  position: relative;
  margin-bottom: 48px;
}

.content-body .home-audience h2::after {
  content: "";
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: 32px;
  height: 3px;
  background: var(--orange);
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

.content-body .home-audience h2.is-visible::after,
.content-body .home-audience h2.line-reveal-visible::after {
  animation: home-heading-line-grow 720ms cubic-bezier(0.37, 0, 0.63, 1) 620ms both;
}

.home-audience-grid {
  position: relative;
  width: min(634px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 16px;
  justify-content: center;
  margin: 0 auto;
}

.home-audience-grid article {
  width: 200px;
  height: 200px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 26px 16px;
  border-radius: 50%;
  background: #eeece4;
  color: #524e44;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
}

.home-audience-grid article:nth-child(2) {
  line-height: 21px;
}

.home-audience-grid span {
  display: block;
}

/* 写真コラージュ: 左→右へ流れ続ける無限マーキー。両端はフェードでなじませる。 */
.home-collage {
  position: relative;
  width: 100%;
  height: 300px;
  margin: 36px 0 10px;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.home-collage-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  height: 100%;
  will-change: transform;
  /* 2セット並べた幅の半分（＝1セット分）を移動して継ぎ目なくループ。
     間隔は gap ではなく各画像の margin-right で取り、-50% が正確に1セット分になるようにする。 */
  animation: home-collage-flow 20s linear infinite;
}

.home-collage-img {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 190px;
  width: auto;
  margin-right: 26px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  /* 控えめな“ふわふわ”浮遊。位置ごとに周期・開始位相をずらしてランダム感を出す。 */
  animation: home-collage-float 6s ease-in-out infinite;
}

/* 6枚周期で高さ・重なり・浮遊のばらつきを付ける（2セットとも同一パターン＝継ぎ目維持）。 */
.home-collage-img:nth-child(6n + 1) {
  margin-top: 40px;
  animation-duration: 6.2s;
  animation-delay: -0.4s;
}

.home-collage-img:nth-child(6n + 2) {
  margin-top: 6px;
  animation-duration: 5.3s;
  animation-delay: -1.7s;
}

.home-collage-img:nth-child(6n + 3) {
  margin-top: 72px;
  margin-left: -22px;
  z-index: 3;
  animation-duration: 7.1s;
  animation-delay: -0.9s;
}

.home-collage-img:nth-child(6n + 4) {
  margin-top: 20px;
  animation-duration: 6.6s;
  animation-delay: -2.3s;
}

.home-collage-img:nth-child(6n + 5) {
  margin-top: 52px;
  margin-left: -18px;
  z-index: 2;
  animation-duration: 5.7s;
  animation-delay: -1.1s;
}

.home-collage-img:nth-child(6n + 6) {
  margin-top: 12px;
  animation-duration: 6.9s;
  animation-delay: -3s;
}

@keyframes home-collage-flow {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes home-collage-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(0.7deg);
  }
}

.home-support {
  min-height: 324px;
  padding: 70px 20px 36px;
  background: #f1ffe9;
  text-align: center;
}

.content-body .home-support h2 {
  margin: 0 0 14px;
  color: #0e957e;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 1px;
}

/* Wix shows a short teal rule under the support heading. */
.content-body .home-support h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 14px auto 0;
  background: #0e957e;
}

.content-body .home-support h2.line-reveal::after,
.content-body .support-band h2.line-reveal::after,
.sns-note.line-reveal::after,
.inquiry-cta p.line-reveal::after {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
}

.content-body .home-support h2.line-reveal-visible::after,
.content-body .support-band h2.line-reveal-visible::after,
.sns-note.line-reveal-visible::after,
.inquiry-cta p.line-reveal-visible::after {
  animation: heading-block-line-grow 720ms cubic-bezier(0.37, 0, 0.63, 1) 620ms both;
}

.heading-fade {
  opacity: 0;
  transform: translateY(5px);
}

.heading-fade.heading-fade-visible {
  animation: heading-title-fade 760ms cubic-bezier(0.37, 0, 0.63, 1) both;
}

.content-body .home-support p {
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 26.6px;
}

/* 蛍光ペン風マーカー（Wixの「月額上限2万円」装飾） */
.support-highlight {
  color: #0e957e;
  font-weight: 700;
  padding-bottom: 3px;
  background: linear-gradient(to bottom, transparent 37%, #fffa6e 37%);
}

.content-body .home-support p:nth-of-type(2) {
  margin-bottom: 22px;
}

.home-support p:nth-of-type(2)::first-letter {
  color: inherit;
}

.home-support > a {
  width: 328px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #0e957e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.home-support > a::after {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-left: 3px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-links {
  position: relative;
  min-height: 600px;
  padding: 146px 20px 100px;
  background: #fff;
  text-align: center;
}

.home-links > div {
  position: relative;
}

.content-body .home-links h2 {
  position: relative;
  margin-bottom: 44px;
  color: #524e44;
}

.content-body .home-links h2::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  width: 32px;
  height: 3px;
  background: var(--orange);
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

.content-body .home-links h2.is-visible::after,
.content-body .home-links h2.line-reveal-visible::after {
  animation: home-heading-line-grow 720ms cubic-bezier(0.37, 0, 0.63, 1) 620ms both;
}

.home-links > div {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  gap: 8px;
  justify-content: center;
}

.home-links a {
  position: relative;
  height: 160px;
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.home-links a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  /* Wix: ホバーで黒オーバーレイが 0.45 → 0.08 に薄まり画像が明るく出る。 */
  transition: background-color 0.2s ease;
}

.home-links a:hover::after,
.home-links a:focus-visible::after {
  background: rgba(0, 0, 0, 0.08);
}

/* Wix renders the cards as background-size 160% / position 51% 50% (43% on cards 2-3). */
.home-links a img {
  position: absolute;
  width: 160%;
  height: auto;
  left: -73px;
  top: -48px;
  max-width: none;
}

.home-links a:nth-child(2) img,
.home-links a:nth-child(3) img {
  top: -41px;
}

.home-links span,
.home-links small {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
}

.home-links span {
  top: 55px;
  font-family: "avenir-lt-w01_85-heavy1475544", sans-serif;
  line-height: normal;
}

.home-links small {
  display: block;
  top: 84.5px;
  margin-top: 0;
  font-size: 20px;
  line-height: 1;
}

.home-links a:nth-child(2) span {
  letter-spacing: 1.8px;
}

.home-links small::before {
  content: "";
  width: 22px;
  height: 22px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.eyebrow {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 8px;
}

.content-body h1 {
  margin: 0 0 28px;
  color: #1f2933;
  font-size: 58px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

.content-body h2,
.content-body p.short-line {
  margin: 38px 0 14px;
  color: var(--blue);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35;
}

.content-body p {
  margin: 0 0 15px;
}

.content-body ul {
  padding-left: 1.2rem;
}

.content-body li {
  margin-bottom: 8px;
}

.fee-page {
  position: relative;
  z-index: 0;
  padding-top: 92px;
  padding-bottom: 80px;
}

.fee-page::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: #fffdf8;
}

.fee-page > * {
  position: relative;
  z-index: 1;
}

.fee-stack {
  display: grid;
  gap: 22px;
}

.fee-card {
  background: #fff;
  border: 1px solid rgba(247, 150, 19, 0.32);
  border-radius: 8px;
  padding: 30px 30px 32px;
  font-family: var(--wix-jp-font);
}

.fee-card-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0 0 18px;
}

.fee-card-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  border-radius: 50%;
}

.fee-card-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fee-card h2 {
  min-width: 0;
  margin: 0;
  color: #324158;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
}

.fee-card-badge {
  margin-left: auto;
  padding: 3px 14px 4px;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.fee-card p {
  margin: 0;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: -0.28px;
}

.fee-highlight-price {
  min-height: 56px;
  margin: 0 0 16px;
  padding: 9px 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--cream-soft);
  border: 1px solid rgba(247, 150, 19, 0.26);
  border-radius: 6px;
}

.fee-highlight-price strong {
  color: var(--orange);
  font-size: 31px;
  font-weight: 700;
  line-height: 1.1;
}

.fee-highlight-price .fee-tax,
.fee-highlight-price .fee-price-label {
  color: #324158;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.fee-lead,
.fee-extra-lead {
  color: var(--orange);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.32px;
}

.fee-lead {
  margin: 0 0 10px;
}

.fee-extra-lead {
  margin: 18px 0 8px;
}

.fee-table {
  margin: 0 0 16px;
  overflow: hidden;
  --fee-label-column: 150px;
  --fee-label-divider-gap: 22px;
  --fee-value-gap: 18px;
  background: #fff;
  border: 1px solid rgba(247, 150, 19, 0.34);
  border-radius: 7px;
}

.fee-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(146px, var(--fee-label-column)) max-content;
  justify-content: start;
  align-items: center;
  column-gap: var(--fee-value-gap);
  row-gap: 4px;
  padding: 8px 22px;
  border-top: 1px solid rgba(247, 150, 19, 0.22);
}

.fee-row:first-child {
  border-top: 0;
}

.fee-row:nth-child(even) {
  background: #fffdf8;
}

.fee-row-label {
  position: relative;
  min-width: 0;
  padding-right: var(--fee-label-divider-gap);
  color: #324158;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
}

.fee-label-justify {
  display: block;
  width: 100%;
  font-variant-numeric: tabular-nums;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  white-space: nowrap;
}

.fee-row-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 26px;
  background: rgba(247, 150, 19, 0.48);
  transform: translateY(-50%);
}

.fee-row-price {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  align-items: baseline;
  gap: 12px;
}

.fee-row-no-tax .fee-row-price {
  grid-template-columns: max-content;
}

.fee-row-no-tax .fee-row-main {
  grid-column: auto;
  text-align: left;
}

.fee-row-main {
  color: var(--orange);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

.fee-row-tax {
  color: #324158;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.fee-muted-row .fee-row-main {
  color: #324158;
  font-size: 18px;
}

.fee-note {
  margin-top: 12px;
  color: #222;
}

.fee-alert {
  margin-top: 20px;
  padding: 14px 18px 16px;
  background: var(--cream-soft);
  border: 1px solid rgba(247, 150, 19, 0.26);
  border-radius: 7px;
}

.fee-alert h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.fee-alert h3 span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}

.fee-alert ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fee-alert li {
  position: relative;
  margin: 0;
  padding-left: 15px;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.28px;
}

.fee-alert li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.fee-trial-card {
  border-color: rgba(247, 150, 19, 0.72);
  background: #fff;
}

.fee-trial-subtitle {
  margin: -6px 0 12px 60px;
  color: #324158;
  font-size: 16px;
  font-weight: 700;
}

.fee-trial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  gap: 24px;
  align-items: stretch;
}

.fee-breakdown-table {
  --fee-label-column: 188px;
  --fee-value-gap: 18px;
  margin-bottom: 0;
}

.fee-trial-card .fee-row {
  grid-template-columns: minmax(170px, var(--fee-label-column)) max-content;
  column-gap: var(--fee-value-gap);
  padding-right: 16px;
  padding-left: 16px;
}

.fee-trial-card .fee-row-price {
  grid-template-columns: max-content max-content;
  gap: 10px;
}

.fee-trial-card .fee-label-justify {
  display: inline;
  width: auto;
  text-align: left;
  text-align-last: auto;
  text-justify: auto;
}

.fee-trial-card .fee-row-no-tax .fee-row-price {
  grid-template-columns: max-content;
}

.fee-trial-card .fee-row-label {
  font-size: 16px;
}

.fee-trial-card .fee-row-main {
  font-size: 21px;
}

.fee-trial-card .fee-row-tax {
  font-size: 14px;
}

.fee-trial-breakdown {
  min-width: 0;
}

.fee-total-row {
  margin-top: 10px;
  padding: 12px 18px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  border-top: 2px solid #596170;
}

.fee-total-row span {
  color: #324158;
  font-size: 18px;
  font-weight: 700;
}

.fee-total-row strong {
  color: var(--orange);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.fee-total-row small {
  color: #324158;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.fee-benefit-panel {
  min-width: 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(247, 150, 19, 0.26);
  border-radius: 7px;
}

.fee-benefit-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fee-benefit-panel li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #324158;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.fee-benefit-panel li span {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

.fee-benefit-panel p {
  margin-top: 14px;
  color: #324158;
  font-size: 14px;
  line-height: 1.85;
}

.support-band {
  width: 100vw;
  margin: 51px 0 0 calc(50% - 50vw);
  padding: 66px 20px 69px;
  background: #edffe7;
  text-align: center;
}

.support-band > div {
  width: min(980px, calc(100vw - 40px));
  margin: 0 auto;
}

.support-band h2 {
  margin: 0 0 14px;
  color: #0e957e;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 1px;
}

/* ホームの support 見出しと同じ短い緑の下線 */
.content-body .support-band h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 14px auto 0;
  background: #0e957e;
}

.support-band p {
  margin: 0 0 10px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 26.6px;
}

.support-band > div > a {
  width: 328px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  border-radius: 8px;
  background: #0e957e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.support-band > div > a::after {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-left: 3px;
  background: currentColor;
  /* 実サイト(Wix)のボタンアイコンと同一の幅広フラット矢印SVG。 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.centered-lead {
  margin: 0 auto 82px;
  text-align: center;
}

.centered-lead p {
  margin: 0;
  color: #524e44;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.32px;
}

.schedule-page .centered-lead {
  margin-bottom: 72px;
}

.schedule-page .centered-lead p {
  line-height: 32px;
}

.banded-section {
  margin: 0 0 86px;
}

.heading-band {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0 0 38px;
  padding: 0 16px;
  border-radius: 7px;
  background: transparent;
  color: #524e44;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.25;
}

/* Shared gradient-band wipe: gradient lives on ::before for a single colour
   source, but the clip-path wipe is applied to the whole element (generic
   [data-animate="shape-left"] rule), so the TEXT wipes in together with the
   band — text and band reveal as one. Used by every beige→orange band. */
.heading-band::before,
.concept-label::before,
.section-label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--band-gradient);
}

.content-body .heading-band {
  color: #524e44;
  font-family: var(--wix-jp-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

/* schedule実サイトの帯は単色(#f2d491)でグラデーションなし。
   --band-gradientは他ページと共有のため、ここだけscoped overrideで対応。 */
.schedule-page .heading-band::before {
  background: #f2d491;
}

.learning-page .heading-band,
.study-style-page .heading-band {
  color: #524e44;
}

.heading-band.center {
  justify-content: center;
  text-align: center;
}

.plain-copy {
  color: #111;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
}

.plain-copy p {
  margin: 0 0 16px;
}

p.note-line {
  display: grid;
  grid-template-columns: 0.9em minmax(0, 1fr);
  width: fit-content;
  max-width: 100%;
  padding-left: 0;
  text-indent: 0;
  text-align: left;
}

p.note-line .note-mark,
p.note-line .note-text {
  display: block;
  min-width: 0;
}

p.note-line .note-mark {
  align-self: start;
  display: block;
  font-size: 1.08em;
  line-height: inherit;
  text-align: center;
  transform: translateY(-1px);
}

.center-copy {
  text-align: center;
}

.small-note {
  margin: -26px 0 34px;
  font-size: 13px;
  font-weight: 500;
}

.circle-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
  margin-top: 60px;
  overflow: hidden;
}

.circle-teaser-grid article {
  min-height: 220px;
  padding: 58px 36px 20px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #fff8e8;
  text-align: center;
}

.circle-teaser-grid h3 {
  margin: 0 0 18px;
  color: var(--orange);
  font-size: 24px;
  font-weight: 700;
}

.circle-teaser-grid p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.process-card,
.annual-card {
  margin-top: 36px;
  padding: 36px 42px;
  border-radius: 7px;
  background: #f5f2e9;
  text-align: center;
}

.process-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  color: #524e44;
  font-weight: 900;
}

.days-overview {
  margin: 0 0 132px;
}

.schedule-card {
  margin-top: 34px;
  padding: 40px 105px 84px;
  border-radius: 7px;
  background: #f5f2e9;
  text-align: center;
}

.days-overview .schedule-card {
  margin-top: -20px;
  padding-top: 51px;
  background: #fbf9ef;
}

.days-overview .small-note {
  margin-left: 15px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.schedule-card h3 {
  margin: 0 0 4px;
  color: #524e44;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.8;
}

.schedule-lead {
  margin-bottom: 27px;
}

.schedule-lead p,
.annual-card p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.days-overview .schedule-lead p {
  color: #222;
  font-weight: 400;
  letter-spacing: -0.28px;
}

.days-week-panel {
  position: relative;
  display: grid;
  grid-template-columns: 430px 232px;
  justify-content: start;
  align-items: stretch;
  gap: 20px;
  width: auto;
  height: 552px;
  margin: 0 -10px;
  padding: 10px 24px 36px 68px;
  border-radius: 7px;
  background: #fff;
}

.days-activity-days {
  text-align: center;
}

.days-example-label {
  position: absolute;
  top: 20px;
  left: 22px;
  color: #999997;
  font-family: var(--wix-jp-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 32.4px;
  letter-spacing: -0.36px;
}

.days-activity-days h4 {
  display: inline-block;
  width: 424px;
  height: 32px;
  margin: 12px auto 0;
  padding: 0;
  border-bottom: 2px solid var(--orange);
  color: #f79613;
  font-family: var(--wix-jp-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.9px;
}

.days-weekdays {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: #f79613;
  font-family: var(--wix-jp-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: -0.32px;
}

.days-activity-days > .days-weekdays {
  width: 424px;
  max-width: 100%;
  margin: 0 auto;
}

.days-weekdays span {
  padding: 0;
}

.days-activity-days > .days-weekdays {
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--orange);
  align-items: center;
  height: 32px;
  line-height: 24px;
}

.days-activity-days > .days-weekdays span {
  margin-top: 0;
}

.days-time-row {
  position: relative;
  display: grid;
  grid-template-columns: 118px 1fr;
  width: 430px;
  max-width: 100%;
  min-height: 40px;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 73px;
  color: #524e44;
  font-family: var(--wix-jp-font);
  font-size: 14px;
  letter-spacing: -0.28px;
}

.days-time-row-multi {
  min-height: 64px;
}

/* Beige stripe behind the row, fixed 400px wide and starting at the icon's
   centre (the icon is positioned absolutely so it overhangs the stripe without
   dictating its height — 1-line rows stay 40px, 2-line rows grow to 64px, as on
   Wix). Yellow-icon rows get the lighter cream, orange-icon rows the deeper. */
.days-time-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 400px;
  max-width: calc(100% - 30px);
  z-index: 0;
  background: #fbe8c2;
}

.days-time-row:nth-child(odd)::before {
  background: #fffbe4;
}

.days-time-row .days-time,
.days-time-row strong {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 12px;
}

.days-time-row .days-time {
  color: #806035;
  font-weight: 700;
  line-height: 25.2px;
  white-space: nowrap;
  text-align: left;
}

.days-time-row strong {
  color: #524e44;
  font-weight: 700;
  line-height: 25.2px;
  text-align: center;
}

/* Match the Wix figure's (slightly irregular) inter-row gaps so the six rows
   land on the same baselines as the live site. Children 3-8 are the rows. */
.days-time-row:nth-child(3) { margin-bottom: 21px; }
.days-time-row:nth-child(4) { margin-bottom: 24px; }
.days-time-row:nth-child(5) { margin-bottom: 27px; }
.days-time-row:nth-child(6) { margin-bottom: 15px; }
.days-time-row:nth-child(7) { margin-bottom: 12px; }
.days-time-row:nth-child(8) {
  margin-top: 15px;
  margin-bottom: 0;
}

.days-time-row-multi strong {
  line-height: 22.4px;
}

.days-row-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffd365;
  color: #fff;
}

/* Right-pointing speech-bubble tail bridging the circle into the stripe. */
.days-row-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 13px;
  border-color: transparent transparent transparent #ffd365;
  transform: translate(-5px, -50%);
}

.days-row-icon-dialogue,
.days-row-icon-lunch,
.days-row-icon-cleanup {
  background: var(--orange);
}

.days-row-icon-dialogue::after,
.days-row-icon-lunch::after,
.days-row-icon-cleanup::after {
  border-left-color: var(--orange);
}

.days-row-icon svg {
  width: 34px;
  height: 34px;
  display: block;
  fill: #fff;
}

.days-la-card {
  display: flex;
  height: 468px;
  min-height: 0;
  flex-direction: column;
  margin-top: 18px;
  padding: 26px 16px 16px;
  border-radius: 12px;
  background: #f7f6f1;
  text-align: left;
}

.days-la-card .days-weekdays {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0;
  border-top: 1px solid #524e44;
  border-bottom: 1px solid #524e44;
  color: #524e44;
  height: 32px;
  align-items: center;
  text-align: center;
}

.days-la-card .days-weekdays span {
  height: auto;
  line-height: 28.8px;
}

.days-la-card > strong {
  display: block;
  margin: 95px 0 51px;
  color: #bbb496;
  font-family: "barlow-medium", "barlow", Arial, sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.days-la-card small {
  display: block;
  margin-bottom: 30px;
  color: #bbb496;
  font-family: var(--wix-jp-font);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.days-la-card small span {
  display: block;
}

.days-la-en {
  line-height: 14.4px;
  letter-spacing: 0.6px;
}

.days-la-ja {
  margin-top: 6px;
  line-height: 21.6px;
  letter-spacing: 6px;
}

.days-la-card p {
  margin: auto 0 0;
  color: #222;
  font-family: var(--wix-jp-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: -0.24px;
}

.days-la-card .days-la-note {
  display: block;
}

.days-la-note-heading,
.days-la-note-body {
  display: block;
}

.days-la-card b {
  color: #f79613;
  font-weight: 700;
}

.schedule-card .days-example-note {
  grid-column: 1 / -1;
  width: max-content;
  max-width: 100%;
  margin: -4px 0 0;
  color: #222;
  font-size: 12px;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: -0.24px;
  text-align: left;
  white-space: nowrap;
}

.days-detail-list {
  display: grid;
  gap: 76px;
}

.days-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 55px;
  align-items: start;
}

.days-detail h2 {
  position: relative;
  margin: 0 0 25px;
  padding-left: 25px;
  color: #000;
  font-family: var(--wix-jp-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
}

.days-detail:nth-child(2) h2 {
  color: #324158;
}

.days-detail h2::before {
  content: "";
  position: absolute;
  top: 16.8px;
  left: 0;
  width: 17px;
  height: 29px;
  border-radius: 0 18px 18px 0;
  background: var(--orange);
  transform: translateY(-50%);
}

.days-detail h3 {
  margin: 26px 0 12px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--orange);
  color: #f79613;
  font-family: var(--wix-jp-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.34px;
}

.days-detail:nth-child(2) h3 {
  margin-top: 22px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.days-detail:nth-child(2) h3 ~ p {
  margin-bottom: 0;
}

.days-detail p {
  margin: 0 0 8px;
  color: #000;
  font-family: var(--wix-jp-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.days-detail:nth-child(2) > div > p:first-of-type,
.days-detail:nth-child(3) > div > p:first-of-type {
  color: #524e44;
  font-weight: 700;
}

.days-detail:nth-child(3) > div > p:nth-of-type(2) {
  margin-top: 22px;
}

.days-detail .days-detail-link-lead {
  margin: 26px 0 0;
  color: #f79613;
  font-weight: 700;
}

.days-detail .days-detail-link-lead + a {
  margin-top: 0;
}

.days-detail a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  min-width: 294px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 18px;
  border-radius: 8px;
  background: #f79613;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  isolation: isolate;
  transition:
    background-color 260ms ease,
    transform 260ms ease;
}

.hero-copy a::after,
.days-detail a::after,
.orange-cta::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  /* 実サイト(Wix)のボタンアイコンと同一の幅広フラット矢印SVG。 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.days-page .days-detail a::after {
  position: relative;
  z-index: 1;
  transition: transform 320ms cubic-bezier(0.37, 0, 0.22, 1);
}

.days-page .days-detail a:hover::after,
.days-page .days-detail a:focus-visible::after {
  transform: translateX(7px);
}

.days-detail img {
  width: 312px;
  height: 240px;
  display: block;
  border-radius: 7px;
  object-fit: cover;
}

.days-detail-full {
  grid-template-columns: 1fr;
}

.days-detail:nth-child(3) > div {
  width: 631px;
  max-width: 100%;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 58px;
  text-align: left;
}

.month-grid div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
}

.month-grid strong {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--orange);
  font-size: 18px;
  font-weight: 900;
}

.month-grid strong.filled {
  background: var(--orange);
  color: #fff;
}

.month-grid span {
  color: #524e44;
  font-weight: 900;
}

.schedule-overview {
  margin-bottom: 60px;
}

.schedule-overview .annual-card {
  min-height: 392px;
  margin-top: 14px;
  padding: 14px 63px 32px;
  text-align: left;
}

.schedule-overview .annual-card p {
  margin: 0 0 22px -47px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: -0.24px;
}

.schedule-overview .schedule-year-note {
  display: flex;
  gap: 8px;
  align-items: start;
  margin: 0 0 22px -47px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: -0.24px;
}

.schedule-overview .schedule-year-note .note-line {
  margin: 0;
}

.schedule-overview .center-copy {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.schedule-overview .month-grid {
  gap: 22px 52px;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 58px);
}

.schedule-overview .month-grid div {
  gap: 8px;
}

.schedule-overview .month-grid strong {
  color: #f79613;
  font-weight: 700;
  line-height: 32.4px;
  letter-spacing: -0.36px;
}

.schedule-overview .month-grid strong.filled {
  background: #f79613;
  color: #fff;
}

.schedule-overview .month-grid span {
  color: #f79613;
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.schedule-overview .month-grid .month-grid-note,
.schedule-overview .month-grid .month-grid-note .pch {
  color: #524e44;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

@media (min-width: 769px) {
  .schedule-overview {
    margin-bottom: 70px;
  }

  .schedule-overview .center-copy {
    margin-bottom: 6px;
  }

  .schedule-overview .annual-card {
    margin-top: 0;
  }

  .days-page .centered-lead {
    margin-bottom: 66px;
  }

  .days-overview {
    margin-bottom: 144px;
  }

  .days-overview .heading-band {
    margin-bottom: 0;
  }

  .days-overview .schedule-card {
    margin-top: 29px;
    padding-bottom: 70px;
  }
}

.schedule-current-link {
  margin: 0 0 141px;
  text-align: center;
}

.schedule-current-link a {
  width: 400px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 8px;
  background: #f79613;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.schedule-current-link a::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.schedule-events {
  display: grid;
  grid-template-columns: repeat(2, 464px);
  gap: 48px 52px;
  margin-bottom: 110px;
}

.schedule-event-card h2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin: 0 0 24px;
  color: #f79613;
  font-family: var(--wix-jp-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
  letter-spacing: 1.2px;
  text-align: center;
}

.schedule-event-card h2::before,
.schedule-event-card h2::after {
  content: "";
  height: 0;
  border-top: 4px dotted var(--orange);
}

.schedule-event-card img {
  width: 464px;
  height: 320px;
  display: block;
  margin-bottom: 22px;
  border-radius: 7px;
  object-fit: cover;
}

.schedule-event-card p {
  margin: 0 0 8px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.schedule-event-card.no-image {
  padding-top: 10px;
}

.schedule-holidays {
  margin-bottom: 71px;
}

.schedule-holidays h2 {
  position: relative;
  margin: 0 0 24px;
  padding-left: 25px;
  color: #324158;
  font-family: var(--wix-jp-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
}

.schedule-holidays h2::before {
  content: "";
  position: absolute;
  top: 16.8px;
  left: 0;
  width: 17px;
  height: 29px;
  border-radius: 0 18px 18px 0;
  background: var(--orange);
  transform: translateY(-50%);
}

.schedule-holidays > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.schedule-holidays article {
  min-height: 214px;
  padding: 20px 22px;
  border-radius: 7px;
  background: #fff3d9;
}

.schedule-holidays h3 {
  margin: 0 0 10px;
  color: #f79613;
  font-family: var(--wix-jp-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.32px;
}

.schedule-holidays h3::before {
  content: "■";
  margin-right: 2px;
  color: #000;
}

.schedule-holidays p {
  margin: 0 0 5px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.flow-list {
  display: grid;
  gap: 92px;
  margin-top: 30px;
}

.flow-step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
}

.step-number {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #efede4;
  color: #524e44;
  font-family: "futura-lt-w01-light", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
}

.step-connector {
  position: absolute;
  left: 50%;
  top: 126px;
  width: 40px;
  height: 12px;
  fill: var(--orange);
  transform: translate(-50%, -50%) rotate(90deg);
}

.flow-step:last-child .step-connector {
  display: none;
}

.content-body .flow-step .marker-heading {
  margin: 0 0 8px;
  color: #524e44;
  font-weight: 700;
  line-height: 33.6px;
}

.flow-step p {
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.flow-cta {
  margin: 99px 0 10px;
  text-align: center;
}

.flow-cta a {
  width: min(400px, 100%);
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f79613;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 19.2px;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  justify-content: center;
  column-gap: 8px;
  row-gap: 69px;
  margin-top: 86px;
}

.staff-page {
  padding-bottom: 13px;
}

.staff-page .page-neighbor-nav {
  margin-top: 186px;
}

.staff-page .page-neighbor-nav a {
  width: 320px;
  min-height: 32px;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.staff-card {
  height: 516px;
  overflow: hidden;
  background: #edebeb;
}

.staff-card:nth-child(1),
.staff-card:nth-child(3),
.staff-card:nth-child(5),
.staff-card:nth-child(8) {
  background: #fbf9ef;
}

.staff-card:nth-child(n + 7) {
  transform: translateX(-2px);
}

.staff-card-image {
  position: relative;
  height: 134px;
  background: url("/assets/staff-card-bg.jpg") center / cover;
}

.staff-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(76, 54, 24, 0.12);
}

.staff-card-image img {
  position: absolute;
  left: 21px;
  bottom: -4px;
  width: 98px;
  height: 98px;
  border: 4px solid #f79613;
  border-radius: 50%;
  object-fit: cover;
}

.staff-card-body {
  padding: 36.4px 22px 18.6px;
  color: #524e44;
  font-family: var(--wix-jp-font);
}

.staff-card-body p {
  margin: 0 0 14px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.staff-card-body .staff-role {
  margin-bottom: 6px;
  color: #222;
  font-size: 12px;
  line-height: normal;
}

.staff-card-body h2 {
  margin: 0 0 6px;
  margin-left: -1px;
  color: #524e44;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 4px;
}

.staff-card-body .staff-nickname {
  margin-bottom: 0;
  color: #524e44;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
}

.staff-card-body h3 {
  margin: 21px 0 6px;
  color: #f79613;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.staff-card:first-child .staff-card-body h3 {
  line-height: normal;
}

.staff-card-body h3,
.staff-card-body h3 ~ p {
  margin-left: -3px;
}

.staff-card-body h3 ~ p {
  color: #000;
}

.staff-card-body .staff-lines span {
  color: #000;
  letter-spacing: normal;
}

.staff-card-body .staff-lines .staff-text-muted {
  color: #222;
}

.staff-card-body .staff-lines .staff-text-tight {
  letter-spacing: -0.7px;
}

.learning-page {
  padding-top: 40px;
}

.learning-page .banded-section:first-child {
  margin-bottom: 28px;
}

.learning-page .banded-section:first-child .plain-copy {
  margin-top: 0;
}

.learning-page .banded-section:first-child .heading-band {
  min-height: 58px;
  display: flex;
  align-items: center;
  margin: 14px 0 40px;
}

.learning-page .plain-copy p {
  color: #000;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.learning-page .circle-teaser-grid {
  gap: 0;
  margin-top: 44px;
  overflow: visible;
  position: relative;
}

.learning-page .circle-teaser-grid::before,
.learning-page .circle-teaser-grid::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  width: 570px;
  height: 570px;
  border-radius: 50%;
  background: #fff8e8;
  pointer-events: none;
}

.learning-page .circle-teaser-grid::before {
  left: -1px;
}

.learning-page .circle-teaser-grid::after {
  left: calc(50% - 30px);
}

.learning-page .circle-teaser-grid article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 570px;
  height: 570px;
  min-height: 0;
  justify-self: start;
  padding: 66px 74px 68px;
  border-radius: 50%;
  background: transparent;
}

.learning-page .circle-teaser-grid article:first-child {
  padding-right: 88px;
  padding-left: 88px;
  transform: translateX(-1px);
}

.learning-page .circle-teaser-grid article:last-child {
  padding-right: 88px;
  padding-left: 88px;
  transform: translateX(-30px);
}

.learning-page .circle-teaser-grid article:last-child > * {
  transform: translateY(-13px);
}

.content-body .learning-progress-heading {
  padding-left: 23px;
  margin-top: 96px;
  margin-bottom: 56px;
}

.learning-page .circle-teaser-grid h3 {
  margin-bottom: 18px;
  color: #f79613;
  font-family: var(--wix-jp-font);
  line-height: 33.6px;
  letter-spacing: 2.4px;
}

.learning-page .circle-teaser-grid p {
  margin: 0;
  color: #000;
  font-family: "alfabet", sans-serif;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: normal;
  text-align: left;
}

.learning-page .circle-teaser-grid article:last-child p {
  letter-spacing: -0.28px;
}

.learning-page .learning-process,
.learning-page .learning-flex {
  grid-template-columns: 464px 464px;
  gap: 51px;
}

.learning-page .learning-process {
  margin-top: 51px;
}

.learning-page .learning-flex {
  margin-top: 63px;
}

.learning-page .learning-flex .plain-copy p {
  letter-spacing: normal;
}

.learning-diagram {
  width: 464px;
  margin-top: 0;
  padding: 21px 38px 25px;
  border-radius: 6px;
  background: #edeae1;
  color: #524e44;
  text-align: center;
  transform: translateY(6px);
}

.learning-diagram h3 {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: 1.6px;
}

.learning-diagram-circles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.learning-diagram-circles > span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 5px double #f79613;
  border-radius: 50%;
  color: #f79613;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
  letter-spacing: 0.9px;
}

.learning-diagram-circles .project-circle {
  align-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: 0.8px;
}

.learning-diagram-circles .project-circle span {
  display: block;
  transform: translateY(10px);
}

.learning-diagram-circles .project-line {
  letter-spacing: -1.6px;
}

.learning-diagram-circles .study-line {
  letter-spacing: 0.8px;
}

.learning-diagram-arrow {
  margin: 6px 0 5px;
  color: var(--orange);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.learning-diagram p {
  margin: 0;
  padding: 15px 18px;
  border-radius: 7px;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
  letter-spacing: 0.9px;
}

.orange-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 48px;
  margin-top: 18px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.learning-page .orange-cta {
  margin-top: 7px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.learning-collage {
  width: 464px;
  height: 320px;
  margin-top: 52px;
  display: block;
  object-fit: cover;
  border-radius: 3px;
}

.learning-page .page-neighbor-nav {
  margin-top: 205px;
  margin-bottom: 10px;
}

.learning-page .page-neighbor-nav a {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.study-style-page,
.days-page,
.schedule-page {
  padding-top: 54px;
}

.days-page {
  padding-bottom: 58px;
}

.days-page .page-neighbor-nav {
  margin-top: 178px;
  margin-bottom: 5px;
}

@media (min-width: 769px) {
  .days-page .page-neighbor-nav {
    margin-top: 172px;
    margin-bottom: 9px;
  }
}

.schedule-page .page-neighbor-nav {
  margin-top: 147px;
  margin-bottom: 10px;
}

.schedule-page .page-neighbor-nav a {
  width: 320px;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.study-style-page {
  padding-bottom: 12px;
}

.study-style-page .centered-lead {
  margin-bottom: 90px;
}

.study-style-page .centered-lead p {
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
}

.study-style-overview {
  margin: 0 0 70px;
}

.study-style-overview > h2:not(.heading-band) {
  margin: 0 0 54px 16px;
  color: #111;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.study-style-overview > .heading-band {
  margin-bottom: 38px;
}

.study-style-overview > .plain-copy {
  margin-bottom: 39px;
}

.study-style-page .plain-copy p {
  color: #000;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.study-process-card {
  height: 401px;
  padding: 55px 294px 50px;
  border-radius: 5px;
  background: #edeae1;
  color: #524e44;
  text-align: center;
}

.study-process-card h3 {
  display: inline-block;
  margin: 0 0 25px;
  padding-bottom: 5px;
  border-bottom: 1px solid #524e44;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.4;
}

.study-process-circles {
  display: grid;
  grid-template-columns: repeat(3, 124px);
  gap: 8px;
  justify-content: center;
}

.study-process-circles > span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 5px double #f79613;
  border-radius: 50%;
  color: #f79613;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.9px;
  line-height: 1.4;
}

.study-process-circles > span:nth-child(3) {
  align-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.study-process-circles .project-circle span {
  display: block;
}

.study-process-circles .project-line {
  letter-spacing: -1.6px;
}

.study-process-arrow {
  margin: 1px 0 2px;
  color: #f79613;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
}

.study-process-card p {
  width: min(100%, 388px);
  margin: 0;
  padding: 15px 18px;
  border-radius: 7px;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.9px;
  line-height: 1.4;
}

.study-style-detail {
  display: grid;
  grid-template-columns: 464px 464px;
  gap: 51px;
  align-items: start;
  margin: 0 0 72px;
}

.study-style-detail img {
  width: 464px;
  height: 320px;
  display: block;
  object-fit: cover;
  border-radius: 5px;
}

.study-style-detail .marker-heading {
  margin-bottom: 23px;
  font-size: 24px;
  line-height: 33.6px;
}

.study-style-independent .marker-heading,
.study-style-collaborative .marker-heading {
  letter-spacing: 1.2px;
}

.study-style-detail .plain-copy p {
  margin-bottom: 0;
}

.study-style-independent {
  margin-bottom: 59px;
}

.study-style-collaborative {
  margin-bottom: 71px;
}

.study-style-project {
  margin-bottom: 128px;
}

.study-project-list {
  margin: 32px 0 28px;
  padding: 22px 20px;
  border-radius: 7px;
  background: #edeae1;
  color: #524e44;
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  letter-spacing: -0.28px;
  list-style: none;
}

.study-project-list li {
  margin: 0;
}

.study-style-project-images {
  display: grid;
  gap: 24px;
}

.study-style-final {
  min-height: 280px;
  padding: 43px 0 30px;
  border-radius: 7px;
  background: #fff3d8;
  text-align: center;
}

.study-style-final .marker-heading {
  justify-content: center;
  margin: 0 0 18px;
  color: #f79613;
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
}

.content-body .study-style-final .marker-heading {
  margin: 0 0 18px;
  color: #f79613;
  font-weight: 700;
}

.study-style-final .marker-heading::before {
  display: none;
}

.study-style-final .plain-copy p {
  margin-bottom: 0;
}

.study-style-page .page-neighbor-nav {
  margin-top: 125px;
}

.concept-page {
  padding-top: 52px;
  padding-bottom: 13px;
}

.concept-section {
  margin-bottom: 88px;
}

.concept-mission {
  padding-top: 0;
  margin-bottom: 156px;
}

.concept-label {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 51px;
  padding: 0 18px 0 19px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  color: #524e44;
}

.concept-label::after {
  display: none;
}

.concept-label strong {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  font-family: var(--wix-jp-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.concept-label span {
  position: relative;
  z-index: 1;
  top: 9px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.6px;
}

.concept-two-col {
  display: grid;
  grid-template-columns: 464px 464px;
  gap: 52px;
  align-items: start;
}

.concept-page .content-body .marker-heading {
  color: #000;
  line-height: 33.6px;
  white-space: nowrap;
}

.concept-page .copy-block {
  color: #000;
  font-weight: 400;
  line-height: 25.2px;
}

.concept-mission .copy-block,
.concept-tech .copy-block {
  letter-spacing: -0.28px;
}

.concept-mission .copy-block p,
.concept-tech .copy-block p,
.concept-place .copy-block p,
.concept-world .copy-block p {
  margin-bottom: 0;
}

.concept-mission .copy-block p:nth-child(2),
.concept-mission .copy-block p:nth-child(4) {
  margin-bottom: 25.2px;
}

.concept-place .copy-block,
.concept-world .copy-block {
  line-height: 25.2px;
}

.concept-tech .copy-block {
  line-height: 25.2px;
}

.concept-two-col img {
  width: 464px;
  height: 320px;
  border-radius: 6px;
  object-fit: cover;
}

.concept-tech-content img {
  margin-top: 60px;
}

.concept-tech {
  margin-bottom: 81px;
}

.concept-place {
  margin-bottom: 79px;
}

.concept-place-follow {
  margin-top: 40px;
}

.concept-place-bottom {
  margin-top: 32px;
}

.concept-world {
  margin-bottom: 0;
}

.concept-page .page-neighbor-nav {
  margin-top: 150px;
}

.concept-page .page-neighbor-nav a {
  width: 320px;
  min-height: 32px;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
}

.top-button,
.breadcrumb a,
.breadcrumb > span:not(.bc-sep),
.breadcrumb .bc-sep,
.page-neighbor-nav a {
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, gap 0.18s ease, letter-spacing 0.18s ease;
}

.top-button {
  box-sizing: border-box;
  border: 1px solid transparent;
}

.top-button:not(.secondary):hover,
.top-button:not(.secondary):focus-visible {
  border-color: var(--orange);
  background: #fff;
  color: var(--orange);
}

.top-button.secondary:hover,
.top-button.secondary:focus-visible {
  border-color: #222;
  background: #fff;
  color: #222;
}

.top-button:active {
  background: #f6f2e9;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible,
.breadcrumb > span:not(.bc-sep):hover {
  color: var(--orange);
}

.breadcrumb a:hover + .bc-sep,
.breadcrumb a:focus-visible + .bc-sep,
.breadcrumb > span:not(.bc-sep):hover + .bc-sep {
  color: var(--orange);
}

.page-neighbor-nav a:hover,
.page-neighbor-nav a:focus-visible {
  gap: 7px;
  border-color: #222;
  color: var(--orange);
  letter-spacing: 1.4px;
}

.page-neighbor-nav a:active {
  color: #c9700c;
}

.page-neighbor-nav .nav-prev::before,
.page-neighbor-nav .nav-next::after {
  transition: background-color 0.16s ease, transform 0.18s ease;
}

.page-neighbor-nav .nav-prev:hover::before,
.page-neighbor-nav .nav-prev:focus-visible::before {
  transform: scaleX(-1);
}

.page-neighbor-nav .nav-next:hover::after,
.page-neighbor-nav .nav-next:focus-visible::after {
  transform: none;
}

.section-label {
  position: relative;
  z-index: 0;
  width: min(398px, 100%);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 45px;
  padding: 0 20px;
  overflow: hidden;
  border-radius: 6px;
  background: transparent;
  color: #524e44;
}

.section-label strong {
  font-family: var(--wix-jp-font);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}

.section-label span {
  font-size: 13px;
  font-weight: 900;
}

.marker-heading {
  display: flex;
  align-items: flex-start;
  margin: 0 0 26px;
  color: #0a0a0a;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.45;
}

.content-body .marker-heading {
  margin: 0 0 26px;
  color: #000;
  font-weight: 700;
  line-height: 33.6px;
}

.content-body .learning-page .marker-heading,
.content-body.learning-page .marker-heading,
.learning-page .marker-heading {
  color: #000;
  line-height: 33.6px;
}

.marker-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 28px;
  display: inline-block;
  margin-top: 2.8px;
  margin-right: 10px;
  background: var(--orange);
  border-radius: 0 16px 16px 0;
}

.copy-block {
  color: #111;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
}

.copy-block p {
  margin: 0 0 29px;
}

.predeschool-page {
  width: 100%;
  padding-top: 90px;
}

.predeschool-page .content-body {
  width: 100%;
}

.predeschool-intro {
  width: min(980px, calc(100vw - 40px));
  margin: 0 auto 78px;
  text-align: center;
}

.predeschool-intro h2 {
  margin: 0;
  color: #524e44;
  font-family: var(--wix-jp-font);
  font-size: 24px;
  font-weight: 900;
  line-height: 34.8px;
  letter-spacing: 0;
}

.predeschool-intro .orange-line {
  margin: 10px auto 20px;
}

.predeschool-intro p {
  margin: 0;
  color: #524e44;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.32px;
}

.predeschool-target-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 58px 20px;
  background: #fffdf1;
  text-align: center;
}

.predeschool-target {
  width: min(980px, calc(100vw - 40px));
  margin: 0 auto;
}

.predeschool-target p {
  margin: 0;
  color: #222;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.predeschool-target p.note-line {
  display: block;
  width: auto;
  max-width: none;
}

.predeschool-target p.note-line .note-mark,
.predeschool-target p.note-line .note-text {
  display: inline;
}

.predeschool-target p.note-line .note-mark {
  transform: none;
}

.predeschool-target p:nth-child(3),
.predeschool-target p:nth-child(4) {
  margin-top: 23px;
}

.predeschool-target p:first-child {
  color: #524e44;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.4px;
}

.predeschool-target p:nth-child(3) {
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.32px;
}

.predeschool-target strong {
  color: var(--orange);
  font-weight: 700;
}

.form-preview {
  width: min(760px, calc(100vw - 40px));
  margin: 72px auto 0;
  padding-bottom: 30px;
}

.form-preview h2 {
  margin: 0 0 14px;
  color: #303030;
  font-size: 25px;
  font-weight: 900;
  text-align: center;
}

.form-preview > p {
  margin: 0 0 7px;
  text-align: center;
}

/* White card around the form, like Wix (card 640px, 40px padding). */
.form-card {
  width: min(640px, 100%);
  margin: 34px auto 0;
  padding: 40px;
  background: #fff;
  box-sizing: border-box;
}

/* 体験申込(ケースシート trial-application)の iframe 埋め込みカード。
   中身のフォームが自前の余白を持つため、カード側の padding は絞る。 */
.predeschool-embed-card {
  padding: 16px;
}

.trial-application-frame {
  display: block;
  width: 100%;
  border: 0;
  /* 初期高さ。子ページからの postMessage(height) 受信後は JS が実高さに追従させる。
     メッセージが届かない環境でも iframe 内部スクロールで操作は完結する。 */
  height: 1600px;
}

.form-field {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  color: #524e44;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.form-field input {
  width: 100%;
  height: 33px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #efefef;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  color: #303030;
}

.form-field textarea {
  width: 100%;
  height: 76px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: #efefef;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 15px;
  color: #303030;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.form-field small {
  display: block;
  margin-top: 6px;
  color: #999;
  font-size: 14px;
  line-height: 20px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 36px;
  color: #524e44;
  font-size: 15px;
  line-height: 36px;
  cursor: pointer;
}

.form-check input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--orange);
  cursor: pointer;
}

.form-submit {
  width: 100%;
  height: 40px;
  display: block;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contact-note {
  margin-top: 130px;
  text-align: center;
}

.contact-note p {
  margin: 0;
  color: #524e44;
  font-family: var(--wix-jp-font);
  font-size: 24px;
  font-weight: 900;
  line-height: 34.8px;
  letter-spacing: 0;
}

.contact-note .orange-line {
  margin: 14px auto 22px;
}

.contact-note a {
  width: 400px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #efede4;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.contact-note a::after {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-left: 6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.predeschool-collage {
  margin-top: 91px;
  margin-bottom: 0;
}

.study-environment-page,
.blog-page,
.access-page,
.inquiry-page,
.sns-page {
  padding-top: 64px;
  padding-bottom: 56px;
}

.study-environment-page {
  padding-top: 54px;
  padding-bottom: 54px;
}

.study-environment-page .centered-lead p {
  color: #524e44;
  margin-bottom: 0;
  line-height: 32px;
  letter-spacing: normal;
}

.study-environment-page .marker-heading {
  margin-bottom: 16px;
  color: #000;
  line-height: 33.6px;
}

.study-environment-page .copy-block {
  color: #000;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.study-environment-page .copy-block p {
  margin-bottom: 0;
}

.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  gap: 78px;
  align-items: start;
}

.environment-gallery {
  margin-top: 117px;
}

.media-copy {
  min-width: 0;
}

.image-gallery {
  position: relative;
  width: 452px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.gallery-main {
  width: 100%;
  height: 286px;
  display: block;
  margin-left: 0;
  border-radius: 2px;
  box-shadow: 0 12px 26px rgba(82, 78, 68, 0.1);
  object-fit: cover;
}

.environment-gallery > .image-gallery .gallery-main {
  width: 100%;
  margin-left: 0;
}

.gallery-prev,
.gallery-next,
.sns-main-frame > button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  /* ホバー: 1.12倍に拡大しつつ濃橙へ、影を大きく浮かせる。押した感のある弾み。 */
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.gallery-prev:hover,
.gallery-next:hover,
.gallery-prev:focus-visible,
.gallery-next:focus-visible {
  background: #e98608;
  transform: scale(1.12);
  box-shadow: 0 10px 22px rgba(233, 134, 8, 0.38);
}

.gallery-prev:active,
.gallery-next:active {
  transform: scale(1.04);
  transition-duration: 0.08s;
}

/* SNSカルーセルの次ボタンは translateY(-50%) で縦センタリングしているので、
   拡大時も併記しないと中央がズレる（transform は上書きされるため）。 */
.sns-main-frame > button:hover,
.sns-main-frame > button:focus-visible {
  background: #e98608;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 10px 22px rgba(233, 134, 8, 0.38);
}

.sns-main-frame > button:active {
  transform: translateY(-50%) scale(1.04);
  transition-duration: 0.08s;
}

.gallery-prev {
  top: 126px;
  left: -17px;
  width: 34px;
  height: 34px;
  box-shadow: 0 6px 14px rgba(247, 150, 19, 0.24);
}

.gallery-prev::before,
.gallery-next::before,
.sns-main-frame > button::before {
  content: "";
  position: relative;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.gallery-prev::before {
  left: 2px;
  transform: rotate(-135deg);
}

.gallery-next::before,
.sns-main-frame > button::before {
  left: -2px;
}

.gallery-next {
  top: 126px;
  right: -17px;
  width: 34px;
  height: 34px;
  box-shadow: 0 6px 14px rgba(247, 150, 19, 0.24);
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  overflow: visible;
}

.gallery-thumbs button.is-hidden {
  display: none;
}

.gallery-thumbs button {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  opacity: 1;
  box-shadow: none;
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 2px;
  object-fit: cover;
  opacity: 0.58;
}

.gallery-thumbs button.active {
  box-shadow: 0 0 0 2px var(--orange);
}

.gallery-thumbs button.active img {
  opacity: 1;
}

.environment-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  gap: 78px;
  margin-top: 71px;
  align-items: start;
}

.environment-world-gallery .gallery-main {
  width: 100%;
  height: 286px;
  margin-left: 0;
}

.environment-world-gallery .gallery-next {
  top: 126px;
  right: -17px;
}

.environment-world-gallery .gallery-thumbs {
  height: auto;
  grid-auto-columns: auto;
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.environment-printer {
  margin-top: 109px;
  min-height: 430px;
}

.environment-printer h3 {
  margin: -20px 0 16px 26px;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
}

.environment-printer .gallery-main {
  width: 100%;
  height: 286px;
  margin-left: 0;
}

.environment-printer .gallery-next {
  top: 126px;
  right: -17px;
}

.environment-printer .gallery-thumbs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.environment-printer .gallery-thumbs button {
  width: 100%;
  height: auto;
}

.environment-printer .gallery-thumbs img {
  width: 100%;
  height: 100%;
}

.study-environment-page .page-neighbor-nav {
  margin-top: 117px;
  margin-bottom: 43px;
}

.study-environment-page .page-neighbor-nav a {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.page-neighbor-nav {
  display: flex;
  justify-content: center;
  margin: 92px 0 86px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.page-neighbor-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 長いページ名でも縦線との余白が揃うよう、全ボタン一律幅にする。 */
  width: 320px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 0;
  border-left: 1px solid #222;
  text-align: center;
}

.page-neighbor-nav .nav-prev::before,
.page-neighbor-nav .nav-next::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  /* 実サイト(Wix)のボタンアイコンと同一の矢印SVG（幅広・フラットな右矢印）。 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-neighbor-nav .nav-prev::before {
  transform: scaleX(-1);
}

.page-neighbor-nav a:last-child {
  border-right: 1px solid #222;
}

.blog-page,
.access-page,
.inquiry-page,
.freeschool-page {
  width: 100%;
}

.blog-page .content-body,
.access-page .content-body,
.inquiry-page .content-body,
.freeschool-page .content-body {
  width: 100%;
}

.access-page {
  padding-bottom: 0;
}

.blog-page {
  padding-bottom: 44px;
}

.sns-page .centered-lead {
  width: min(760px, calc(100vw - 40px));
  margin-bottom: 52px;
}

.sns-page .centered-lead {
  position: relative;
  top: -10px;
  margin-bottom: 66px;
}

.sns-page .centered-lead p {
  line-height: 32px;
}

.blog-list-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  background: #eeece4;
}

.blog-card {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(312px, 22vw, 445px);
  gap: clamp(70px, 6vw, 120px);
  align-items: start;
  margin: 0;
  padding: 52px max(48px, calc((100vw - 1390px) / 2));
}

.blog-card:nth-child(odd) {
  background: #eeece4;
}

.blog-card:nth-child(even) {
  background: #fffbef;
}

.blog-card-media {
  width: clamp(312px, 22vw, 445px);
  aspect-ratio: 445 / 342;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card:nth-child(2) .blog-card-media img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.blog-card .plain-copy {
  max-width: 720px;
}

.blog-card .marker-heading {
  margin-bottom: 36px;
  color: #000;
  line-height: 33.6px;
}

.blog-card .plain-copy {
  color: #222;
  font-weight: 400;
  line-height: 25.2px;
}

.blog-card .plain-copy p {
  margin-bottom: 0;
}

.blog-card a {
  display: inline-block;
  margin-top: 17px;
  color: var(--orange);
  font-family: "avenir-lt-w01_85-heavy1475544", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
}

.freeschool-page {
  padding: 44px 0 70px;
  background: #fffbef;
}

.body-freeschool {
  background: #fff;
}

.body-freeschool .site-header {
  background: #fff;
}

.body-freeschool .site-footer {
  background: #eeece4;
}

.body-freeschool .breadcrumb {
  margin-top: 0;
  padding-top: 25px;
}

.faq-list {
  width: min(916px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.faq-list h2 {
  width: max-content;
  margin: 0 0 24px;
  color: #524e44;
  font-family: arial;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.faq-item {
  min-height: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgb(247 150 19 / 14%);
  border-radius: 8px;
  background: #fff;
}

.faq-number {
  grid-row: 1;
  min-height: 82px;
  height: auto;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffe6b8 0%, #fff0d2 100%);
  color: #f79613;
  font-family: "futura-lt-w01-light";
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.faq-row {
  grid-column: 2;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-row h3 {
  width: auto;
  max-width: none;
  margin: 0 0 0 30px;
  padding: 0;
  color: #524e44;
  font-family: arial;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  transform: none;
}

.faq-arrow {
  position: relative;
  width: 26px;
  height: 26px;
  justify-self: center;
  border-radius: 50%;
  background: #f79613;
  transition: transform 200ms ease;
}

.faq-row[aria-expanded="true"] .faq-arrow {
  transform: none;
}

.faq-arrow::before,
.faq-arrow::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 8px;
  width: 10px;
  height: 1px;
  background: #fff;
}

.faq-arrow::before {
  transform: rotate(0deg);
}

.faq-arrow::after {
  right: auto;
  transform: rotate(90deg);
}

.faq-row[aria-expanded="true"] .faq-arrow::after {
  transform: rotate(0deg);
}

.faq-answer {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 24px 62px 38px 102px;
  border-top: 1px solid rgb(247 150 19 / 10%);
  color: #34302a;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0;
}

.faq-answer[hidden] {
  display: none;
}

.faq-answer p {
  margin: 0;
  padding: 0 0 10px;
  line-height: inherit;
}

.faq-answer .faq-answer-heading {
  margin: 0 0 10px;
  padding: 0;
  color: #f79613;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.faq-answer .faq-gallery-heading {
  margin: 18px 0 12px;
  padding: 0;
  color: #f79613;
  font-size: 15px;
  line-height: 1.7;
}

.faq-image-gallery {
  width: 100%;
  margin-top: 12px;
}

.faq-image-gallery .gallery-main {
  width: 100%;
  height: min(52vw, 420px);
  margin-left: 0;
  background: #fff4dc;
  object-fit: contain;
}

.faq-image-gallery .gallery-prev,
.faq-image-gallery .gallery-next {
  top: calc(min(52vw, 420px) / 2 - 17px);
}

.faq-image-gallery .gallery-thumbs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.faq-image-gallery .gallery-thumbs button {
  background: #fff4dc;
}

.faq-image-gallery .gallery-thumbs img {
  object-fit: contain;
}

.faq-gallery {
  width: 764px;
  max-width: 100%;
  height: 434px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.faq-gallery::-webkit-scrollbar {
  display: none;
}

.faq-gallery-track {
  display: flex;
  gap: 5px;
  width: max-content;
  height: 432px;
}

.faq-gallery img {
  flex: 0 0 auto;
  height: 432px;
  object-fit: cover;
  scroll-snap-align: start;
}

.faq-gallery img:nth-child(1) {
  width: 324px;
}

.faq-gallery img:nth-child(2) {
  width: 432px;
}

.faq-gallery img:nth-child(n + 3) {
  width: 575px;
}

.faq-preview-page {
  width: min(1180px, calc(100vw - 56px));
}

.faq-preview-header .marker-heading {
  margin-bottom: 30px;
}

.faq-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.faq-preview-panel {
  padding: 30px;
  border-radius: 8px;
  background: #fffdfa;
  box-shadow:
    0 22px 44px rgb(82 78 68 / 7%),
    0 0 0 1px rgb(82 78 68 / 8%);
}

.faq-preview-panel > h3 {
  margin: 0 0 9px;
  color: #524e44;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.faq-preview-panel > p {
  min-height: 44px;
  margin: 0 0 24px;
  color: #666057;
  font-size: 13px;
  line-height: 1.75;
}

.faq-preview .faq-item {
  min-height: 0;
  grid-template-columns: 62px minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

.faq-preview .faq-number {
  grid-row: 1 / span 2;
  min-height: 68px;
  height: auto;
  background: transparent;
  color: var(--orange);
  font-size: 17px;
  line-height: 1;
}

.faq-preview .faq-row {
  grid-column: 2;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) 46px;
  padding: 0;
}

.faq-preview .faq-row h3 {
  width: auto;
  max-width: none;
  margin: 0;
  color: #524e44;
  font-size: 16.5px;
  line-height: 1.55;
  transform: none;
}

.faq-preview .faq-arrow {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 50%;
  background: #fff7e8;
}

.faq-preview .faq-arrow::before,
.faq-preview .faq-arrow::after {
  top: 13px;
  left: 8px;
  width: 10px;
  background: #f79613;
}

.faq-preview .faq-arrow::before {
  transform: rotate(0deg);
}

.faq-preview .faq-arrow::after {
  right: auto;
  transform: rotate(90deg);
}

.faq-preview .faq-row[aria-expanded="true"] .faq-arrow {
  transform: none;
}

.faq-preview .faq-row[aria-expanded="true"] .faq-arrow::after {
  transform: rotate(0deg);
}

.faq-preview .faq-answer {
  grid-column: 2;
  margin-top: 0;
  padding: 0 46px 26px 0;
  color: #222;
  font-size: 13px;
  line-height: 1.85;
}

.faq-preview .faq-answer p {
  padding: 0 0 7px;
  line-height: inherit;
}

.faq-preview-a .faq-item {
  border-top: 1px solid #ded8c9;
  border-bottom: 1px solid #ded8c9;
  border-radius: 0;
  background: transparent;
}

.faq-preview-a .faq-number {
  color: #c99032;
}

.faq-preview-a .faq-arrow {
  background: transparent;
  box-shadow: inset 0 0 0 1px #e5dcc9;
}

.faq-preview-b {
  background: linear-gradient(180deg, #fff8e8 0%, #fffdf7 100%);
}

.faq-preview-b .faq-item {
  box-shadow: 0 0 0 1px rgb(247 150 19 / 14%);
}

.faq-preview-b .faq-number {
  background: linear-gradient(180deg, #fff1d6 0%, #fff8e8 100%);
}

.faq-preview-b .faq-answer {
  padding-top: 4px;
}

.faq-preview-b .faq-arrow {
  background: #f79613;
}

.faq-preview-b .faq-arrow::before,
.faq-preview-b .faq-arrow::after {
  background: #fff;
}

.faq-preview-category {
  margin: 2px 0 14px;
  padding: 0 0 0 15px;
  border-left: 2px solid #f79613;
  color: #9b6c25;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.faq-preview-c .faq-item {
  border: 1px solid #e7dfcf;
  border-left: 4px solid #f79613;
}

.faq-preview-c .faq-number {
  color: #b8a88e;
}

.faq-preview-c .faq-arrow {
  background: #f9f4ea;
}

.faq-preview-d .faq-item {
  grid-template-columns: 74px minmax(0, 1fr);
  background: #fbfaf6;
  box-shadow:
    inset 0 0 0 1px rgb(82 78 68 / 10%),
    0 14px 30px rgb(82 78 68 / 6%);
}

.faq-preview-d .faq-number {
  align-self: start;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin-top: 12px;
  justify-self: center;
  border-radius: 50%;
  background: #fff;
  color: #f79613;
  font-size: 19px;
  box-shadow: 0 0 0 1px rgb(247 150 19 / 22%);
}

.faq-preview-d .faq-answer {
  padding-right: 30px;
}

.faq-preview-d .faq-arrow {
  background: #524e44;
}

.faq-preview-d .faq-arrow::before,
.faq-preview-d .faq-arrow::after {
  background: #fff;
}

.access-lead {
  width: min(720px, calc(100vw - 40px));
  margin: 0 auto 26px;
  text-align: center;
}

.access-lead h2 {
  margin: 0;
  color: #524e44;
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
}

.access-lead .orange-line {
  margin: 12px auto 10px;
  opacity: 0;
}

.access-lead p {
  margin: 0 0 8px;
  color: #000;
  font-weight: 400;
}

.access-lead p.note-line {
  margin: 0 auto 8px;
}

.access-lead p:first-of-type {
  font-size: 16px;
  line-height: 22.4px;
}

.access-lead p:last-of-type {
  font-size: 14px;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.access-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 98px 20px 77px;
  background: #fffbef;
  text-align: center;
}

.access-band h2 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 18px;
  font-weight: 900;
}

.access-band h2 span {
  width: 1px;
  height: 14px;
  display: inline-block;
  background: var(--orange);
}

.access-routes {
  margin-bottom: 24px;
}

.access-routes p {
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.access-media {
  display: grid;
  grid-template-columns: 220px 460px;
  gap: 56px;
  justify-content: center;
  align-items: start;
  transform: translateX(20px);
}

.access-media img {
  width: 220px;
  height: 330px;
  object-fit: cover;
}

.map-preview {
  width: 460px;
  height: 330px;
  overflow: hidden;
  background: #edf5f7;
}

.map-preview iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.inquiry-page {
  padding-top: 20px;
  padding-bottom: 118px;
}

.inquiry-lead {
  width: min(735px, calc(100vw - 40px));
  margin: 0 auto 12px;
  color: #383838;
  text-align: center;
}

.inquiry-lead p {
  margin: 0;
  color: #222;
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: -0.32px;
}

.inquiry-lead p:first-child,
.inquiry-lead .phone-line {
  color: #524e44;
  letter-spacing: normal;
}

.inquiry-lead p:first-child {
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
}

.inquiry-lead .phone-line {
  position: relative;
  display: inline-block;
  margin-bottom: 4px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 1px;
  transform: translateX(-3px);
}

.inquiry-lead .phone-line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 380px;
  margin: 0 auto;
  height: 3px;
  background: #f79613;
}

.inquiry-lead p:nth-child(3) {
  margin-bottom: 21px;
  letter-spacing: -0.32px;
}

/* お問い合わせの注釈(※行)も他の行と同じく中央揃えにする。 */
.inquiry-lead p.note-line {
  display: block;
  width: auto;
  max-width: none;
  text-align: center;
}

.inquiry-lead p.note-line .note-mark,
.inquiry-lead p.note-line .note-text {
  display: inline;
}

.inquiry-lead p.note-line .note-mark {
  transform: none;
}

.inquiry-lead strong {
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 769px) {
  .inquiry-lead {
    height: 255.2px;
    transform: translateY(5.4px);
  }
}

.inquiry-form-band {
  width: 100vw;
  height: 652px;
  margin-left: calc(50% - 50vw);
  padding: 47px 20px 0;
  background: #eeece4;
}

.inquiry-form-band form {
  width: min(340px, calc(100vw - 40px));
  margin: 0 auto;
}

.inquiry-form-band label {
  display: block;
  margin-bottom: 31px;
  color: #524e44;
  font-family: "futura-lt-w01-book", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.inquiry-form-band label:nth-of-type(2) {
  margin-bottom: 48px;
}

.inquiry-form-band label span {
  color: var(--orange);
}

.inquiry-form-band input,
.inquiry-form-band textarea {
  width: 100%;
  display: block;
  border: 2px solid #efefef;
  border-radius: 5px;
  background: #fff;
  color: #524e44;
  font-size: 15px;
}

.inquiry-form-band input::placeholder,
.inquiry-form-band textarea::placeholder {
  color: #9e9e9e;
}

.inquiry-form-band input:focus,
.inquiry-form-band textarea:focus {
  border-color: var(--orange);
  outline: none;
}

.inquiry-form-band input {
  height: 52px;
  display: block;
  margin-top: 12px;
  padding: 0 26px;
}

.inquiry-form-band textarea {
  height: 126px;
  margin-bottom: 64px;
  padding: 18px 26px;
  resize: none;
}

.inquiry-form-band button {
  width: 170px;
  height: 46px;
  display: block;
  margin: 0 auto;
  border: 2px solid #524e44;
  border-radius: 4px;
  background: transparent;
  color: #524e44;
  font-family: "proxima-n-w01-reg", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.inquiry-form-band button:hover {
  background: #524e44;
  color: #fff;
}

.inquiry-form-band button:disabled {
  cursor: default;
  opacity: 0.6;
}

.form-thanks {
  margin: 14px 0 0;
  color: #524e44;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  visibility: hidden;
}

.form-thanks.is-visible {
  visibility: visible;
}

.form-thanks.is-error {
  color: #c0392b;
}

.inquiry-cta {
  width: min(620px, calc(100vw - 40px));
  margin: 88px auto 0;
  text-align: center;
}

.inquiry-cta p {
  position: relative;
  margin: 0;
  color: #524e44;
  font-size: 24px;
  font-weight: 700;
  line-height: 38.4px;
}

.inquiry-cta p:last-of-type::after {
  content: "";
  width: 32px;
  height: 3px;
  display: block;
  margin: 18px auto 0;
  background: var(--orange);
}

.inquiry-cta a {
  display: inline-flex;
  min-width: 328px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

/* flow / inquiry の「〜はこちら」CTAにも実サイトと同じフラット矢印を付ける。 */
.flow-cta a::after,
.inquiry-cta a::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-left: 3px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 262.63 109.95' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.13 109.95H12.5c-6.9 0-12.5-5.6-12.5-12.5s5.6-12.5 12.5-12.5h208.53l-60.61-63.84c-4.75-5.01-4.55-12.92.46-17.67s12.92-4.55 17.67.46l80.65 84.95a12.504 12.504 0 0 1-9.07 21.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero-copy a,
.schedule-current-link a,
.days-page .days-detail a,
.orange-cta,
.flow-cta a,
.inquiry-cta a,
.contact-note a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--orange);
  transition:
    background-color 260ms ease,
    transform 260ms ease;
}

.hero-copy a span,
.schedule-current-link a span,
.days-page .days-detail a span,
.orange-cta span,
.flow-cta a span,
.inquiry-cta a span,
.contact-note a span {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  transition: transform 320ms cubic-bezier(0.37, 0, 0.22, 1);
}

.hero-copy a::before,
.schedule-current-link a::before,
.days-page .days-detail a::before,
.orange-cta::before,
.flow-cta a::before,
.inquiry-cta a::before,
.contact-note a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -88px;
  z-index: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #e98608;
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.37, 0, 0.22, 1);
}

.hero-copy a::after,
.schedule-current-link a::after,
.days-page .days-detail a::after,
.orange-cta::after,
.flow-cta a::after,
.inquiry-cta a::after,
.contact-note a::after {
  position: relative;
  z-index: 1;
  transition: transform 320ms cubic-bezier(0.37, 0, 0.22, 1);
}

.hero-copy a:hover::before,
.hero-copy a:focus-visible::before,
.schedule-current-link a:hover::before,
.schedule-current-link a:focus-visible::before,
.days-page .days-detail a:hover::before,
.days-page .days-detail a:focus-visible::before,
.orange-cta:hover::before,
.orange-cta:focus-visible::before,
.flow-cta a:hover::before,
.flow-cta a:focus-visible::before,
.inquiry-cta a:hover::before,
.inquiry-cta a:focus-visible::before,
.contact-note a:hover::before,
.contact-note a:focus-visible::before {
  transform: translateY(-50%) scale(11.2);
}

.hero-copy a:hover span,
.hero-copy a:focus-visible span,
.schedule-current-link a:hover span,
.schedule-current-link a:focus-visible span,
.days-page .days-detail a:hover span,
.days-page .days-detail a:focus-visible span,
.orange-cta:hover span,
.orange-cta:focus-visible span,
.flow-cta a:hover span,
.flow-cta a:focus-visible span,
.inquiry-cta a:hover span,
.inquiry-cta a:focus-visible span,
.contact-note a:hover span,
.contact-note a:focus-visible span {
  transform: translateX(3px);
}

.hero-copy a:hover::after,
.hero-copy a:focus-visible::after,
.schedule-current-link a:hover::after,
.schedule-current-link a:focus-visible::after,
.days-page .days-detail a:hover::after,
.days-page .days-detail a:focus-visible::after,
.orange-cta:hover::after,
.orange-cta:focus-visible::after,
.flow-cta a:hover::after,
.flow-cta a:focus-visible::after,
.inquiry-cta a:hover::after,
.inquiry-cta a:focus-visible::after,
.contact-note a:hover::after,
.contact-note a:focus-visible::after {
  transform: translateX(7px);
}

/* オレンジ系プライマリCTA（TOPヒーロー / お申し込み / フロー）を
   ヘッダーボタン(.top-button)と挙動統一。通常時はオレンジベタ+白文字、
   ホバーで白背景+オレンジ枠+オレンジ文字へ色が切り替わるだけのシンプルな
   トランジション（円が広がる共有演出は無効化）。
   ※学びページの .orange-cta は対象外（元の円演出のまま）。 */
.hero-copy a,
.inquiry-cta a,
.flow-cta a {
  background: var(--orange);
  border: 1px solid transparent;
  color: #fff;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.hero-copy a::before,
.inquiry-cta a::before,
.flow-cta a::before {
  display: none;
}

.hero-copy a:hover,
.hero-copy a:focus-visible,
.inquiry-cta a:hover,
.inquiry-cta a:focus-visible,
.flow-cta a:hover,
.flow-cta a:focus-visible {
  background: #fff;
  border-color: var(--orange);
  color: var(--orange);
}

.hero-copy a:hover span,
.hero-copy a:focus-visible span,
.hero-copy a:hover::after,
.hero-copy a:focus-visible::after,
.inquiry-cta a:hover span,
.inquiry-cta a:focus-visible span,
.inquiry-cta a:hover::after,
.inquiry-cta a:focus-visible::after,
.flow-cta a:hover span,
.flow-cta a:focus-visible span,
.flow-cta a:hover::after,
.flow-cta a:focus-visible::after {
  transform: none;
}

.contact-note a {
  background: #f6f2e9;
  color: #222;
}

.contact-note a::before {
  background: #e8dfcf;
}

/* お問い合わせCTA: ヘッダーの「お問い合わせ」(.top-button.secondary)と挙動統一。
   通常ベージュ+濃色文字、ホバーで白背景+濃色枠+濃色文字へ。円演出は無効化。 */
.contact-note a {
  border: 1px solid transparent;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.contact-note a::before {
  display: none;
}

.contact-note a:hover,
.contact-note a:focus-visible {
  background: #fff;
  border-color: #222;
  color: #222;
}

.contact-note a:hover span,
.contact-note a:focus-visible span,
.contact-note a:hover::after,
.contact-note a:focus-visible::after {
  transform: none;
}

.home-support > a,
.support-band > div > a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0e957e;
  transition:
    background-color 260ms ease,
    transform 260ms ease;
}

.home-support > a span,
.support-band > div > a span {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  transition: transform 320ms cubic-bezier(0.37, 0, 0.22, 1);
}

.home-support > a::before,
.support-band > div > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -70px;
  z-index: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #0a7d6a;
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.37, 0, 0.22, 1);
}

.home-support > a::after,
.support-band > div > a::after {
  position: relative;
  z-index: 1;
  transition: transform 320ms cubic-bezier(0.37, 0, 0.22, 1);
}

.home-support > a:hover::before,
.home-support > a:focus-visible::before,
.support-band > div > a:hover::before,
.support-band > div > a:focus-visible::before {
  transform: translateY(-50%) scale(9.2);
}

.home-support > a:hover span,
.home-support > a:focus-visible span,
.support-band > div > a:hover span,
.support-band > div > a:focus-visible span {
  transform: translateX(3px);
}

.home-support > a:hover::after,
.home-support > a:focus-visible::after,
.support-band > div > a:hover::after,
.support-band > div > a:focus-visible::after {
  transform: translateX(7px);
}

.sns-page {
  padding-top: 64px;
}

.sns-carousel {
  position: relative;
  width: 640px;
  margin: 0 auto;
}

.sns-main-frame {
  position: relative;
  width: 640px;
}

.sns-main-image {
  width: 100%;
  height: 443px;
  display: block;
  object-fit: cover;
}

.sns-main-frame > button {
  top: 50%;
  right: -17px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  box-shadow: 0 6px 14px rgba(247, 150, 19, 0.24);
}

.sns-thumbs {
  width: 640px;
  display: flex;
  gap: 18px;
  margin-top: 9px;
  overflow: hidden;
}

.sns-thumbs button {
  flex: 0 0 calc((100% - 90px) / 6);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0.62;
}

.sns-thumbs button.active {
  opacity: 1;
}

.sns-thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sns-note {
  width: min(560px, calc(100vw - 40px));
  margin: 96px auto 0;
  text-align: center;
}

.sns-note p {
  margin: 0;
  color: #f79613;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.sns-note::after {
  content: "";
  display: block;
  width: 23px;
  height: 3px;
  margin: 15px auto 0;
  background: var(--orange);
}

.sns-embed-grid {
  width: 955px;
  margin: 13px auto 0;
  display: grid;
  grid-template-columns: 487px 461px;
  gap: 7px;
  align-items: start;
}

.sns-embed-spacer {
  width: 939px;
  height: 411px;
  margin: 13px auto 0;
}

.sns-x-post,
.sns-facebook-card {
  height: 411px;
  overflow: hidden;
  border: 1px solid #cfd9de;
  background: #fff;
}

.sns-x-post blockquote.twitter-tweet {
  max-width: 100%;
  margin: 0;
  padding: 12px;
  overflow-wrap: break-word;
}

.sns-x-post iframe {
  width: 100% !important;
}

.sns-facebook-card .fb-page,
.sns-facebook-card iframe {
  width: 100% !important;
}

.sns-page .page-neighbor-nav {
  margin: 133px 0 43px;
}

.sns-page .page-neighbor-nav a {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.blog-article-page {
  padding-top: 96px;
}

.interview-article {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.interview-article p {
  margin: 0 0 33px;
}

.interview-article .interview-muted {
  color: #222;
}

.content-body .interview-question {
  display: block;
  margin: 0 0 19.55px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: -0.32px;
}

.blog-r-page .interview-article p {
  margin: 0;
}

.blog-r-page .content-body .interview-question {
  margin: 31px 0 19.55px;
}

.blog-r-page .content-body .interview-question:first-child {
  margin-top: 0;
}

.blog-r-page .content-body .interview-question .question-cont {
  color: #222;
  font-style: normal;
}

.blog-r-page .content-body .question-social-activity .question-cont {
  display: inline-block;
  margin-left: 0;
}

.blog-r-page .content-body .question-school-fit {
  margin-top: 43px;
}

.blog-r-page .content-body .question-first-day {
  margin-top: 48px;
}

.blog-r-page .content-body .question-learning-view {
  margin-top: 59px;
}

.blog-r-page .content-body .question-first-day,
.blog-r-page .content-body .question-life-thinking,
.blog-r-page .content-body .question-learning-view,
.blog-r-page .content-body .question-final-fit {
  color: #000;
}

.blog-hh-page .interview-article p {
  margin: 0;
}

.blog-hh-page .interview-article .interview-caption {
  width: 464px;
  color: #000;
  font-size: 11px;
  line-height: 19.8px;
  letter-spacing: -0.22px;
}

.blog-hh-page .content-body .interview-question {
  margin: 31px 0 19.55px;
}

.blog-hh-page .content-body .interview-question:first-child {
  margin-top: 0;
  font-weight: 700;
}

.blog-hh-page .content-body .question-hh-action {
  margin-top: 46px;
}

.blog-hh-page .content-body .question-hh-fermentation {
  margin-top: 36px;
}

.blog-hh-page .content-body .question-hh-final {
  margin-top: 51px;
}

.content-body .interview-question span {
  color: #f79613;
}

.interview-article .down-arrow {
  margin: -22px 0 0;
  color: #524e44;
  text-align: center;
}

.blog-r-page .interview-article .before-final-question {
  margin-bottom: 69px;
}

.blog-r-page .interview-article .after-search-note {
  margin-bottom: 25.2px;
}

.blog-hh-page .interview-article .kombucha-paragraph {
  margin-top: 25.2px;
}

.interview-gallery {
  display: grid;
  grid-template-columns: repeat(2, 464px);
  gap: 52px;
  margin: 24px 0 40px;
}

.interview-gallery img {
  width: 464px;
  display: block;
  border-radius: 13px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 32%);
}

.blog-hh-page .interview-gallery-intro {
  margin-top: 41.5px;
}

.blog-hh-page .interview-gallery-math {
  margin-top: 38px;
  margin-bottom: 8px;
}

.blog-hh-page .interview-gallery-transistor {
  margin-top: 60px;
  margin-bottom: 15px;
}

.blog-hh-page .page-neighbor-nav {
  margin: 280px 0 9px;
}

.blog-r-page .page-neighbor-nav {
  margin: 235px 0 9px;
}

.blog-r-page .page-neighbor-nav a {
  width: 320px;
  justify-content: center;
}

.blog-article-page .content-body {
  width: min(860px, calc(100vw - 40px));
  margin: 0 auto;
}

.blog-article-page .interview-article {
  max-width: 860px;
  margin: 0 auto;
  color: #222;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0;
}

.blog-r-page .interview-article p,
.blog-hh-page .interview-article p {
  margin: 0 0 3px;
}

.blog-article-page .content-body .interview-question,
.blog-r-page .content-body .interview-question,
.blog-hh-page .content-body .interview-question,
.blog-r-page .content-body .question-school-fit,
.blog-r-page .content-body .question-first-day,
.blog-r-page .content-body .question-learning-view,
.blog-hh-page .content-body .question-hh-action,
.blog-hh-page .content-body .question-hh-fermentation,
.blog-hh-page .content-body .question-hh-final {
  position: relative;
  margin: 36px 0 12px;
  padding-left: 1.4em;
  color: #524e44;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0;
}

.blog-article-page .content-body .interview-question:first-child {
  margin-top: 0;
}

.blog-article-page .content-body .interview-question span:first-child {
  position: absolute;
  left: 0;
  color: var(--orange);
}

.blog-r-page .content-body .interview-question .question-cont,
.blog-r-page .content-body .question-first-day,
.blog-r-page .content-body .question-life-thinking,
.blog-r-page .content-body .question-learning-view,
.blog-r-page .content-body .question-final-fit {
  color: #524e44;
}

.blog-r-page .interview-article .before-final-question,
.blog-r-page .interview-article .after-search-note,
.blog-hh-page .interview-article .kombucha-paragraph {
  margin-bottom: 12px;
}

.blog-hh-page .interview-article .interview-caption {
  width: min(100%, 464px);
}

.interview-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.interview-gallery img {
  width: 100%;
}

.general-clean-page {
  padding-top: 50px;
  padding-bottom: 14px;
}

.year-plan h1 {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  border-radius: 6px;
  background: #ffd78e;
  color: #524e44;
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
}

.general-clean-page .year-plan-lead {
  margin: 0 0 7px;
  color: #000;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.year-plan-panel {
  height: 1073px;
  padding: 49px 20px 48px;
  border-radius: 6px 6px 0 0;
  background: #eeece4;
  text-align: center;
}

.year-plan-panel article {
  margin: 0 0 30px;
}

.year-plan-panel article:nth-child(2),
.year-plan-panel article:nth-child(4),
.year-plan-panel article:nth-child(5),
.year-plan-panel article:nth-child(6) {
  margin-bottom: 40px;
}

.year-plan-panel article:nth-child(3) {
  margin-bottom: 44px;
}

.year-plan-panel h2 {
  margin: 0;
  color: #f79613;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.4px;
}

.year-plan-panel h3 {
  margin: 0;
  color: #524e44;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.4px;
}

.year-plan-panel .year-plan-event-dark {
  color: #393939;
}

.year-plan-panel article:nth-child(5) > h3 {
  font-size: 18px;
}

.year-plan-panel p + h3 {
  margin-top: 28px;
}

.year-plan-panel p {
  margin: 0;
  color: #000;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: -0.26px;
}

.year-plan-panel p.note-line {
  display: block;
  width: auto;
  max-width: none;
  text-align: center;
}

.year-plan-panel p.note-line .note-mark,
.year-plan-panel p.note-line .note-text {
  display: inline;
}

.year-plan-panel p.note-line .note-mark {
  transform: none;
}

.year-plan-panel .year-plan-footnote {
  font-size: 12px;
  line-height: 21.6px;
  letter-spacing: -0.24px;
}

.year-plan-panel article:last-child div p:last-child {
  width: min(440px, 100%);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.general-clean-page .page-neighbor-nav {
  margin: 611px 0 88px;
}

.thankyou-page {
  width: 100%;
  padding: 0;
}

.thankyou-page .content-body {
  width: 100%;
}

.thanks-panel {
  min-height: 496px;
  display: grid;
  place-content: center;
  background: #f4f2f2;
  color: #000;
  text-align: center;
}

.thanks-panel h1 {
  width: min(600px, calc(100vw - 40px));
  margin: 0;
  color: #000;
  font-family: aether, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  transform: translateY(-4px);
}

.thanks-panel strong {
  width: min(600px, calc(100vw - 40px));
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  transform: translateY(-4px);
}

.subpage-hero-ai-classroom {
  height: 145px;
}

.ai-classroom-page {
  padding-top: 13px;
}

/* ai-heading-band is also .heading-band, so it inherits the shared ::before
   wipe + --band-gradient; only its own box metrics differ. */
.ai-heading-band {
  min-height: 64px;
  margin-bottom: 50px;
  border-radius: 4px 4px 0 0;
}

.content-body .ai-heading-band {
  margin: 38px 0 50px;
  padding-left: 19px;
  color: #524e44;
  font-size: 36px;
  line-height: 36px;
}

.ai-section {
  margin-bottom: 76px;
}

.ai-article > .ai-section:first-of-type {
  margin-bottom: 279px;
}

.ai-with-image,
.ai-place-grid,
.ai-place-follow {
  display: grid;
  grid-template-columns: 470px 464px;
  gap: 46px;
  align-items: start;
}

.ai-section img {
  width: 464px;
  height: 320px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

.ai-with-image:not(.ai-world) > img {
  margin-top: 60px;
}

.ai-with-image:not(.ai-world) {
  margin-bottom: 61px;
}

.ai-with-image .plain-copy {
  line-height: 1.4;
}

.ai-place-grid .plain-copy {
  line-height: 1.6;
}

.ai-with-image .plain-copy p {
  margin-bottom: 8px;
}

.ai-place-grid .plain-copy p {
  margin-bottom: 12px;
}

.ai-place-follow .plain-copy p,
.ai-place-bottom p,
.ai-world .plain-copy p {
  color: #000;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.ai-place-follow .plain-copy p:nth-child(n + 3) {
  letter-spacing: -0.28px;
}

.ai-place-follow .plain-copy p,
.ai-place-bottom p {
  margin-bottom: 0;
}

.ai-place-grid {
  margin-bottom: 37px;
}

.ai-place-follow {
  margin-bottom: 0;
}

.ai-article .ai-place-bottom {
  margin: 25px 0 55px;
}

.ai-world {
  margin-bottom: 92px;
}

.ai-classroom-page .page-neighbor-nav {
  margin: 153px 0 5px;
}

.ai-article .marker-heading {
  margin-bottom: 24px;
  font-size: 24px;
}

.ai-article .plain-copy {
  margin-bottom: 0;
}

.ai-article .plain-copy p {
  color: #000;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.28px;
}

.ai-place-grid .plain-copy p,
.ai-place-follow .plain-copy p,
.ai-article .plain-copy.ai-place-bottom p,
.ai-world .plain-copy p {
  letter-spacing: normal;
}

.ai-place-follow .plain-copy p:nth-child(n + 3) {
  letter-spacing: -0.7px;
}

.ai-article .plain-copy.ai-place-bottom {
  margin: 34px 0 55px;
}

/* トップへ戻るボタン: 現行Wix(#comp-m919pgbh / style-m92nvsu7)を忠実再現。
   通常オレンジ塗り+白文字/アイコン、ホバーで白背景+オレンジ枠+オレンジ文字/アイコン。 */
.to-top {
  position: fixed;
  right: 44px;
  bottom: 44px;
  z-index: 15;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 200px;
  border: 1.5px solid rgba(247, 150, 19, 0);
  background: #f79613;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: all 0.2s ease;
}

.to-top::before {
  content: "";
  width: 25px;
  height: 25px;
  background: currentColor;
  /* 実サイトのTOPアイコンと同一のシェブロンSVG。 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M177.687 128.054L105.35 61.402a7.205 7.205 0 0 0-5.35-1.886 7.198 7.198 0 0 0-5.349 1.886l-72.338 66.652a7.165 7.165 0 0 0-.407 10.138 7.172 7.172 0 0 0 5.283 2.309c1.743 0 3.49-.629 4.872-1.902L100 75.999l67.939 62.598a7.197 7.197 0 0 0 10.155-.406 7.163 7.163 0 0 0-.407-10.137z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M177.687 128.054L105.35 61.402a7.205 7.205 0 0 0-5.35-1.886 7.198 7.198 0 0 0-5.349 1.886l-72.338 66.652a7.165 7.165 0 0 0-.407 10.138 7.172 7.172 0 0 0 5.283 2.309c1.743 0 3.49-.629 4.872-1.902L100 75.999l67.939 62.598a7.197 7.197 0 0 0 10.155-.406 7.163 7.163 0 0 0-.407-10.137z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.to-top:hover,
.to-top:focus-visible {
  background: #fff;
  border-color: #f79613;
  color: #f79613;
}

.site-footer {
  background: #efede4;
}

.footer-inner {
  width: min(980px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 21px 0;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: center;
}

.footer-inner span:last-child {
  display: none;
}

.body-fee .footer-inner {
  padding: 19px 0 22px;
}

.body-access .footer-inner {
  padding: 19px 0 22px;
}

.body-blog .footer-inner {
  padding: 19px 0 22px;
}

.body-home .footer-inner {
  padding: 19px 0 24px;
}

.body-blog-hh .footer-inner {
  padding: 19px 0 23px;
}

.body-learning .footer-inner {
  padding: 19px 0 22px;
}

.body-concept .footer-inner,
.body-sns .footer-inner,
.body-general-clean .footer-inner {
  padding-bottom: 22px;
}

@media (max-width: 1000px) {
  .learning-page .circle-teaser-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 42px;
  }

  .learning-page .circle-teaser-grid::before,
  .learning-page .circle-teaser-grid::after {
    display: none;
  }

  .learning-page .circle-teaser-grid article {
    width: 100%;
    height: auto;
    min-height: 0;
    justify-self: stretch;
    padding: 34px 28px;
    border-radius: 28px;
    background: #fff8e8;
    transform: none;
  }

  .learning-page .circle-teaser-grid article:first-child,
  .learning-page .circle-teaser-grid article:last-child {
    padding: 34px 28px;
    transform: none;
  }
}

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ---- SP流体トークン（design-proposal.md §1） ----
     幅ピンポイント値の代わりに全コンポーネントで参照する共通値。
     :rootではなくSPスコープ内で定義し、PC非干渉を構造的に保証する。 */
  body {
    --sp-gutter: clamp(15px, 4vw, 32px);
    --sp-content: min(640px, 100vw - 2 * var(--sp-gutter));
    --sp-section-gap: clamp(56px, 10vw, 96px);
    --sp-block-gap: clamp(20px, 4.5vw, 36px);
  }

  /* ---- スティッキーフッター ----
     コンテンツがビューポートより短いページ(thankyou等)でフッターが
     中腹に浮き、下に地の余白が出る(監査high)。フッターを常に最下端へ。
     固定/絶対配置の子(ナビスクリム・to-top等)はflexの影響を受けない */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  body > main {
    flex: 1 0 auto;
  }

  .site-footer {
    margin-top: auto;
  }

  /* thankyouはコンテンツが1画面に満たず、灰色パネルの下に地の余白が
     広がって「作りかけ」に見える(監査high)。パネルをフッター直前まで
     伸ばし、中身はパネルのgrid place-content:centerで中央に保つ */
  .thankyou-page {
    display: flex;
    flex-direction: column;
  }

  .thankyou-page .content-body {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .thankyou-page .thanks-panel {
    flex: 1 0 auto;
  }

  /* ---- 本文カラムの行長制限（中間域600-900pxの間延び対策） ----
     長文テキストの共通ラッパーを「本の幅」に抑えて中央寄せ。
     640px上限は全角約40字。狭幅ではmin()の後段が勝ち従来と同じ幅になる
     ため、実質600px以上でのみ効く流体ルール。 */
  .media-copy,
  .plain-copy,
  .copy-block,
  .interview-article,
  .days-detail,
  .schedule-event-card,
  .predeschool-target,
  .circle-teaser-grid article {
    max-width: var(--sp-content);
    margin-inline: auto;
  }

  /* 本文カラム外に置かれた見出し(concept等)も同じカラム幅に乗せ、
     見出しと本文の左端を揃える(整列基準の混在を防ぐ)。
     .content-body側のmarginショートハンドに負けないよう詳細度を揃える */
  .marker-heading,
  .content-body .marker-heading {
    max-width: var(--sp-content);
    margin-inline: auto;
  }

  /* 複製(ai-article)ページ: min-width:769側のmarginショートハンド
     (.ai-article .plain-copy.ai-place-bottom)がmargin-inline:autoを打ち消し、
     このブロックだけ中央カラムから左に外れる(re-audit high)。後勝ちで復元 */
  .ai-article .plain-copy.ai-place-bottom {
    margin-inline: auto;
  }

  /* blogカード内で見出し(marker-heading)と本文(plain-copy)だけがカラムに
     乗り、続きを読むリンクと写真が全幅のままだと768/840pxで左端が4段階に
     バラける(re-audit medium)。リンクと写真も同じカラムに乗せる。
     .plain-copyは.blog-card .plain-copy(max-width:720px, 詳細度0,2,0)が
     上記カラムルール(0,1,0)に勝ち中央寄せされないため、詳細度を揃えて
     個別に上書きする必要がある */
  .blog-card .plain-copy {
    max-width: var(--sp-content);
    margin-inline: auto;
  }

  .blog-card-copy > a {
    display: block;
    max-width: var(--sp-content);
    margin-inline: auto;
  }

  .blog-card-media {
    max-width: var(--sp-content);
    margin-inline: auto;
  }

  /* scheduleの「長期の休み期間・祝日・第5週…」は素のh2/articleで
     カラムセレクタに乗らず、840pxで左端が上部コンテンツと揃わない
     (re-audit medium) */
  .schedule-holidays h2,
  .schedule-holidays > div {
    max-width: var(--sp-content);
    margin-inline: auto;
  }

  /* ---- SP日本語組版 ----
     balance: 見出しの行長を揃え「1文字だけ2行目」等のみっともない折れを防ぐ
     auto-phrase: 文節単位で折り返す(日本語対応ブラウザのみ、非対応は従来通り)
     pretty: 段落末尾の孤立行を避ける
     いずれもprogressive enhancementなので非対応環境では単に無視される。 */
  .content-body h1,
  .content-body h2,
  .content-body h3,
  .marker-heading,
  .heading-band,
  .subpage-hero h1,
  .centered-lead,
  .home-audience-grid article {
    text-wrap: balance;
    word-break: auto-phrase;
  }

  /* 中央寄せの詩的コピーは文節折り返しの恩恵が特に大きい。
     sns-noteのCTAコピーとgeneral-cleanの月別注記は狭幅で語中分断
     (「気になっ/た方は、」「準/じて」等)が起きる(監査high)ため追加 */
  .home-copy p,
  .hero-copy p,
  .sns-note p,
  .year-plan article p {
    word-break: auto-phrase;
  }

  /* sns-noteのCTAコピーはauto-phraseだけだと「気に/なった」で行が割れる
     (文節としては正しいが読み味が悪い)。行長を揃えて詰め込み折返しを
     避ける。※balanceはnowrap文節塊(.pch)併用時のみBlinkフリーズの
     既知バグがある — このpはpchを含まない平文なので安全(sp-checkで検証)。
     後段の.content-body p{text-wrap:pretty}に負けないようsection付き */
  section.sns-note p {
    text-wrap: balance;
  }

  /* inquiryのCTA見出しとリード文(いずれも平文p): 中央揃えで「みは」
     「さい。」等の孤立行が出る(re-audit medium / baseline inquiry-1)。
     pchを含まない平文なのでbalance可(上記の既知バグ注意書き参照) */
  section.inquiry-cta p,
  .inquiry-lead > p:not(.jp-phrase) {
    text-wrap: balance;
  }

  /* staffカード本文: 流体化で折返し位置が移動し「オランダ」「ハマり中」
     等の語中分断が発生(re-audit medium)。文節折返しに(非対応ブラウザは
     従来通りの自然折返しのまま) */
  .staff-card-body p {
    word-break: auto-phrase;
  }

  /* ビルド時にIntl.Segmenterで文節境界へ<wbr>を挿入した要素(.jp-phrase)。
     keep-allで文字単位の折返しを禁止し、改行は<wbr>の位置でだけ起こす。
     auto-phrase非対応のSafariでもChromeと同一の文節折返しになる。
     overflow-wrap:anywhereは長い英数字塊などがはみ出さない保険。 */
  .jp-phrase,
  .jp-phrase p,
  .jp-phrase span,
  .jp-phrase article {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 文節塊(.pch)は内部で絶対に折らない。keep-allは※等の記号後の折返しを
     防げないため、nowrapで原子性を保証する(SP限定。PCでは通常のインライン)。 */
  .jp-phrase .pch {
    white-space: nowrap;
  }

  /* ※注釈(note-line)は文節塊で折ると320px級で7〜12文字の細切れ行が
     連続し箇条書きのように見える(監査high: fee/general-clean)。
     注釈本文は文節固定(nowrap+keep-all)をやめて禁則処理つきの
     自然折返しにする(ナツ承認済み方針) */
  p.note-line,
  p.note-line .pch {
    white-space: normal;
    word-break: normal;
  }

  /* accessの移転注記だけは自然折返しだと360pxで2行目が「た。」1文字に
     なる(re-audit medium)。文節が短い注記なので文節固定に戻す */
  .access-lead p.note-line {
    word-break: keep-all;
  }

  .access-lead p.note-line .pch {
    white-space: nowrap;
  }

  /* study-environment本文: 320/360pxで小書き仮名「ィ」「っ」、840pxで
     長音符「ー」が行頭に落ちる(re-audit low, study-environment-7)。
     3セクション共通(ほっこりする空間/世界を学びの場にする/3Dプリンター)
     厳格禁則で防ぐ */
  .environment-gallery .copy-block p,
  .environment-more .copy-block p,
  .environment-printer .copy-block p {
    line-break: strict;
  }

  /* 「DE-SCHOOLで大切にしている学び」(learning冒頭)が360-430pxで
     「学び」2文字だけ2行目に落ちる(re-audit medium)。最後の文節境界
     <wbr>を無効化し「DE-SCHOOLで / 大切にしている学び」で折らせる。
     単一<wbr>の「学びの進め方」は対象外 */
  .learning-page .heading-band:not(.learning-progress-heading) .jp-line wbr:last-of-type {
    display: none;
  }

  /* PC値margin-top:130pxがSPでは過大で、predeschoolの送信ボタン〜
     お問い合わせCTA間の巨大空白(監査high)の主犯。流体トークンに置換 */
  .contact-note {
    margin-top: var(--sp-section-gap);
  }

  /* 送信後メッセージのプレースホルダーがvisibility:hiddenで54px+margin
     を常時占有し、送信ボタン下の空白を膨らませていた。非表示中は
     スペースごと消す(JSがis-visibleを付けた時だけ通常表示に戻る) */
  .form-thanks:not(.is-visible) {
    display: none;
  }

  /* PCの固定幅CTA(328px/400px)は320-360px端末で画面から溢れるため上限を画面幅に */
  .hero-copy a,
  .home-support > a,
  .support-band > div > a,
  .inquiry-cta a,
  .contact-note a {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .content-body p {
    text-wrap: pretty;
  }

  /* Blinkのtext-wrap:balance/prettyは、内部の折れないnowrap塊(.pch)の自然幅が
     利用可能幅と一致・超過する特定のビューポート幅で行分割探索が無限ループし、
     タブが完全フリーズする(実測: 320px×/schedule、375px×/fee)。
     .jp-phraseは<wbr>+.pchで折返し位置を既に完全制御しているため、
     balance/prettyの恩恵はなく、wrapに固定して危険な組合せ自体を断つ。 */
  html .jp-phrase,
  html .jp-phrase * {
    text-wrap: wrap;
  }

  .header-top {
    width: 100%;
    height: 64px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .brand strong {
    font-size: 22px;
  }

  .site-actions {
    display: none;
  }

  /* ---- ハンバーガーボタン（右上・ドロワーより前面で開閉可能） ---- */
  .nav-toggle {
    position: relative;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: #2b2b2b;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  .nav-toggle-bars {
    position: relative;
  }

  .nav-toggle-bars::before {
    position: absolute;
    top: -7px;
    left: 0;
  }

  .nav-toggle-bars::after {
    position: absolute;
    top: 7px;
    left: 0;
  }

  /* 開いている時はバーが×に変形 */
  .nav-open .nav-toggle-bars {
    background: transparent;
  }

  .nav-open .nav-toggle-bars::before {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-open .nav-toggle-bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 開いている間は背面スクロールをロック（nav-open は body に付与される） */
  body.nav-open {
    overflow: hidden;
  }

  /* ---- スクリム（背景の暗幕） ---- */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  .nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- ドロワー本体（.main-nav を右からスライドインするパネルに） ---- */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: min(84vw, 330px);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 76px 0 24px;
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--nav);
    /* 影は開いた時だけ。閉状態(画面外右に待機)で付けると影だけが
       画面右端に灰色のスジとして漏れて全ページに写り込む。 */
    box-shadow: none;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.28s ease,
      visibility 0s linear 0.28s;
    box-sizing: border-box;
  }

  .nav-open .main-nav {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -14px 0 30px rgba(0, 0, 0, 0.25);
    transition:
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.28s ease,
      visibility 0s;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-link {
    width: 100% !important;
    min-height: 54px;
    height: auto;
    justify-content: flex-start;
    padding: 14px 22px;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
  }

  /* ドロップダウン親（button）に開閉キャレットを付ける */
  .has-dropdown > .nav-link {
    position: relative;
    padding-right: 48px;
  }

  .has-dropdown > .nav-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .nav-item.expanded > .nav-link::after {
    transform: translateY(-30%) rotate(-135deg);
  }

  .nav-link.active,
  .nav-link:hover,
  .has-dropdown:hover > .nav-link,
  .has-dropdown:focus-within > .nav-link {
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
  }

  .nav-link.active::before,
  .nav-item:not(.has-dropdown) > .nav-link:hover::before {
    content: none;
  }

  /* ---- 子メニュー（アコーディオン） ---- */
  .main-nav .nav-dropdown {
    position: static;
    top: auto;
    left: auto;
    display: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.22);
  }

  .nav-item.expanded .nav-dropdown {
    display: block;
  }

  .main-nav .nav-dropdown a {
    min-height: 46px;
    justify-content: flex-start;
    padding: 12px 22px 12px 38px;
    text-align: left;
    white-space: normal;
    line-height: 1.4;
  }

  .main-nav .nav-dropdown a:hover,
  .main-nav .nav-dropdown a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  /* ---- ドロワー内の申込CTA（画面下に固める） ---- */
  .nav-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding: 20px 20px 6px;
  }

  .nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 4px;
    background: var(--orange);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }

  .nav-cta-secondary {
    background: #f6f2e9;
    color: #2b2b2b;
  }

  .home-hero {
    height: 600px;
  }

  .hero-arrow {
    display: block;
  }

  .hero img {
    object-position: left center;
  }

  .hero-copy {
    top: 170px;
    left: 50%;
    width: min(330px, calc(100vw - 40px));
    transform: translateX(-50%);
  }

  .hero-copy p {
    font-size: clamp(13px, 3.9vw, 16px);
  }

  .hero-copy h1 {
    font-size: clamp(38px, 12.4vw, 50px);
    line-height: 1.5;
  }

  .hero-copy span {
    font-size: clamp(11px, 3.3vw, 13px);
  }

  .hero-copy a {
    width: 100%;
    margin-top: 41px;
    font-size: clamp(13px, 3.6vw, 15px);
  }

  /* 対象バッジは現行WixのSPでも表示される重要情報。右上に小さめで出す。 */
  .hero-badge {
    right: 14px;
    top: 20px;
    bottom: auto;
    width: 100px;
    height: 100px;
    font-size: 12px;
  }

  .hero-dots {
    bottom: 24px;
  }

  /* 見た目6pxのまま、透明ボーダーでタップ領域を28pxに拡大。
     負マージンで相殺してドット間の見た目の間隔は維持する。 */
  .hero-dots button {
    box-sizing: content-box;
    border: 11px solid transparent;
    margin: -11px;
    background-clip: padding-box;
  }

  /* .activeのbackgroundショートハンドがclipをリセットするため再指定 */
  .hero-dots button.active {
    background-clip: padding-box;
  }

  .hero-arrow.previous {
    left: 18px;
  }

  .hero-arrow.next {
    right: 18px;
  }

  .home-intro {
    height: auto;
    min-height: auto;
    padding: 66px 18px 62px;
  }

  .content-body .home-intro h1 {
    font-size: clamp(20px, 6vw, 24px);
  }

  /* 固定980px幅だと親(.home-intro)の内容領域より広くなり右へはみ出して見切れる。
     モバイルでは親幅に収めて左右対称に中央寄せする。 */
  .home-copy {
    width: 100%;
  }

  .home-copy p {
    /* スマホの読みやすさ優先でフルード(320px:13px 〜 430px:15px) */
    font-size: clamp(13px, 3.7vw, 15px);
    line-height: 1.85;
  }

  .home-audience {
    min-height: auto;
    padding: 66px 15px 44px;
  }

  .content-body .home-audience h2,
  .content-body .home-links h2 {
    margin-bottom: 36px;
    font-size: clamp(18px, 5.2vw, 21px);
  }

  .home-audience-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 160px));
    gap: clamp(8px, 2.5vw, 16px);
  }

  /* 固定160pxだと320px幅で溢れるためフルード化。aspect-ratioで真円を維持し、
     文字・余白も幅に追従させる。 */
  .home-audience-grid article {
    width: 100%;
    max-width: 160px;
    height: auto;
    aspect-ratio: 1;
    padding: clamp(8px, 3vw, 18px);
    font-size: clamp(10.5px, 3.2vw, 12px);
    line-height: 1.55;
  }

  .home-collage {
    height: 208px;
    margin-top: 42px;
  }

  .home-collage-img {
    height: 128px;
    margin-right: 16px;
  }

  .home-collage-img:nth-child(6n + 1) {
    margin-top: 26px;
  }

  .home-collage-img:nth-child(6n + 2) {
    margin-top: 4px;
  }

  .home-collage-img:nth-child(6n + 3) {
    margin-top: 48px;
    margin-left: -14px;
  }

  .home-collage-img:nth-child(6n + 4) {
    margin-top: 14px;
  }

  .home-collage-img:nth-child(6n + 5) {
    margin-top: 34px;
    margin-left: -12px;
  }

  .home-collage-img:nth-child(6n + 6) {
    margin-top: 8px;
  }

  .home-support {
    min-height: auto;
    padding: 54px 18px 60px;
  }

  .content-body .home-support h2 {
    font-size: 18px;
  }

  .home-support > a {
    width: min(329px, 100%);
  }

  .home-links {
    min-height: auto;
    padding: 70px 18px 80px;
  }

  .home-links > div {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-links a {
    height: 132px;
  }

  /* カードが1カラム全幅(横長)になると、基本層の固定px オフセット
     (240x160カード前提)のままではズレて木材画像の継ぎ目(集成材の
     フィンガージョイント)が広く写り込む(re-audit medium)。
     木目画像自体に継ぎ目が多数あるため、object-fit:coverで単純に
     全面表示するとSPの横長比率では画像の大部分(継ぎ目含む)が写ってしまう。
     PC版と同じ「中央を拡大して継ぎ目を画面外に追い出す」考え方をコンテナ
     比率に依存しない形(scale変形)で再現する */
  .home-links a img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    max-width: none;
    object-fit: cover;
    /* 元画像(page-homeLinksWood.jpg, 768x512)は集成材で継ぎ目(フィンガー
       ジョイント)が複数箇所にあり、コンテナが横長になるほどcoverが画像の
       広い範囲を映して継ぎ目が露出する。画像内で継ぎ目のない一枚板の帯
       (原寸x=260-430px、画像幅の約45%地点)だけをtransform-originで指定し
       scaleで拡大して継ぎ目を画角外に追い出す */
    transform-origin: 45% 50%;
    transform: scale(4.6);
  }

  /* 基本層のnth-child(2,3)向けtop:-41px上書きは今回のscale方式では
     使わないため無効化(詳細度0,2,2で本ルールより強いため明示的に戻す) */
  .home-links a:nth-child(2) img,
  .home-links a:nth-child(3) img {
    top: 0;
  }

  /* fee側の助成見出しはSP未調整の20pxのまま(indexは18px)。揃える */
  .support-band h2 {
    font-size: 18px;
  }

  .subpage-hero {
    height: 150px;
  }

  /* SPではパンくずを出さない。モバイルのパンくずはタップ率が極端に低く、
     ドロワーメニュー+ページ下部の前後ナビで導線は足りている。
     ヒーロー直下の一等地はすぐ本文が始まる方が美しい(PCでは従来通り表示)。 */
  .breadcrumb {
    display: none;
  }

  /* 長いタイトル(見学・体験申し込み（無料）等)でも中央のまま自然に折り返す。
     PCのletter-spacing:4px/line-height:56pxのままだと390pxを超えて左寄りに崩れる。 */
  .subpage-hero h1 {
    max-width: calc(100vw - 40px);
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.45;
    letter-spacing: 2px;
    text-align: center;
  }

  .page {
    width: min(100vw - 30px, 980px);
    padding: 48px 0 70px;
  }

  .fee-page {
    padding-top: 48px;
  }

  .fee-stack {
    gap: 16px;
  }

  .fee-card {
    padding: 22px 18px 24px;
  }

  .fee-card p.note-line {
    width: 100%;
    max-width: 100%;
    word-break: normal;
  }

  .fee-card p.note-line .note-text,
  .fee-card p.note-line .pch {
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .fee-card p.note-line .note-text span {
    white-space: normal;
    word-break: normal;
  }

  .fee-card-heading {
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 14px;
  }

  .fee-card-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .fee-card-icon svg {
    width: 21px;
    height: 21px;
  }

  .fee-card h2 {
    flex: 1 1 calc(100% - 50px);
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.35;
  }

  .fee-card-badge {
    margin-left: 50px;
    padding: 2px 10px 3px;
    font-size: 13px;
  }

  .fee-highlight-price {
    flex-wrap: wrap;
    min-height: auto;
    padding: 10px 12px;
    gap: 4px 9px;
  }

  .fee-highlight-price strong {
    font-size: clamp(28px, 8vw, 31px);
  }

  .fee-highlight-price .fee-tax {
    font-size: 14px;
  }

  .fee-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    min-height: 0;
    padding: 11px 13px 12px;
  }

  .fee-trial-card .fee-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 11px 13px 12px;
  }

  .fee-row-price,
  .fee-trial-card .fee-row-price {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 0;
  }

  .fee-row-label {
    padding-right: 0;
    font-size: 16px;
  }

  .fee-label-justify {
    display: inline;
    width: auto;
    text-align: left;
    text-align-last: auto;
  }

  .fee-row-label::after {
    display: none;
  }

  .fee-row-main,
  .fee-trial-card .fee-row-main {
    font-size: 22px;
    text-align: left;
    white-space: nowrap;
  }

  .fee-row-tax,
  .fee-trial-card .fee-row-tax {
    font-size: 14px;
    white-space: nowrap;
  }

  .fee-trial-subtitle {
    margin: -4px 0 12px;
    font-size: 15px;
  }

  .fee-trial-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fee-total-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 0;
    padding: 14px 4px 6px;
  }

  .fee-total-row span {
    flex: 0 0 100%;
    font-size: 17px;
  }

  .fee-total-row strong {
    font-size: clamp(34px, 11vw, 42px);
    text-align: left;
  }

  .fee-total-row small {
    font-size: 14px;
  }

  .fee-benefit-panel {
    padding: 15px 14px;
  }

  .fee-benefit-panel li {
    font-size: 15px;
  }

  .content-body h1 {
    font-size: 42px;
  }

  .concept-page {
    padding-top: 44px;
  }

  .section-label {
    min-height: 58px;
    margin-bottom: 34px;
  }

  .section-label strong {
    font-size: 31px;
  }

  .marker-heading {
    font-size: clamp(18px, 5.2vw, 21px);
  }

  /* コンセプトページの見出しはPCでnowrap指定。SPでは解除しないと
     見出しが右で切れる上、grid セルのmin-contentを押し広げて本文まで巻き添えで切れる。 */
  .concept-page .content-body .marker-heading {
    white-space: normal;
  }

  .concept-two-col > * {
    min-width: 0;
  }

  .centered-lead {
    margin-bottom: 48px;
    line-height: 2;
  }

  /* PCでは1文=1행のセンター積みだが、SPだと各文が中途半端に折れて
     「ど、」のような単語ぶら下がりが出る。inline化して1つの文章として流す。 */
  .centered-lead p {
    display: inline;
    margin: 0;
    font-size: clamp(13px, 3.7vw, 15px);
  }

  /* 基底の .content-body .heading-band (30px/line-height:1) より詳細度を
     上げないと効かない。SPは一回り落ち着いたサイズ+ゆとりある行間で洗練させる。 */
  .content-body .heading-band {
    min-height: 52px;
    padding: 14px 18px;
    font-size: clamp(19px, 5.4vw, 23px);
    line-height: 1.45;
    letter-spacing: 0.02em;
  }

  /* 「｜」マーカーで区切った分節。.heading-bandはflexなので、
     分節はnowrapのflexアイテムにして「収まらなければ分節ごと次の行へ」
     という折り返しをflex-wrapで実現する(分節内部では絶対に折れない)。 */
  .heading-band {
    flex-wrap: wrap;
  }

  .heading-band .band-seg {
    flex: 0 0 auto;
    white-space: nowrap;
    text-wrap: initial;
  }

  .circle-teaser-grid,
  .staff-grid,
  .concept-two-col {
    grid-template-columns: 1fr;
  }

  .staff-card {
    height: auto;
    /* PC由来の516px固定を廃止。本文量の差でカード下に大きな空白が
       残る(監査high)ため、SPは内容量準拠の高さにする */
    min-height: 0;
    overflow: visible;
  }

  .staff-card:nth-child(n + 7) {
    transform: none;
  }

  .learning-page .circle-teaser-grid {
    gap: 24px;
    margin-top: 42px;
  }

  .learning-page .circle-teaser-grid::before,
  .learning-page .circle-teaser-grid::after {
    display: none;
  }

  .learning-page .circle-teaser-grid article {
    width: 100%;
    height: auto;
    min-height: 0;
    justify-self: stretch;
    padding: 34px 28px;
    border-radius: 28px;
    background: #fff8e8;
    transform: none;
  }

  .learning-page .circle-teaser-grid article:first-child,
  .learning-page .circle-teaser-grid article:last-child {
    padding: 34px 28px;
    transform: none;
  }

  .learning-page .learning-process,
  .learning-page .learning-flex {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 52px;
  }

  .learning-diagram {
    width: min(100%, calc(100vw - 30px));
    margin-right: auto;
    margin-left: auto;
    padding: 29px 17px 25px;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .learning-diagram h3 {
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #524e44;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
  }

  @media (max-width: 360px) {
    .learning-diagram h3 {
      white-space: normal;
    }

    /* 320px級では「プロジェクト型」が円内で1行に収まらず3行折返しになり
       1行目が円の内周に接触するため、この幅域だけ縮小して余白を作る
       （375/430pxはこのネストの外なので変化なし）。 */
    .learning-diagram-circles .project-circle {
      font-size: 10px;
    }

    .learning-diagram-circles .project-line {
      letter-spacing: -2.2px;
    }
  }

  .learning-diagram-circles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 2.2vw, 10px);
    max-width: 100%;
    margin: 0 auto;
  }

  .learning-diagram-circles > span {
    width: auto;
    font-size: clamp(13px, 4vw, 18px);
    line-height: 1.35;
  }

  .learning-diagram-circles .project-circle {
    font-size: clamp(12px, 3.4vw, 16px);
    line-height: 1.35;
  }

  .learning-diagram-circles .project-circle span {
    transform: none;
  }

  .learning-diagram-arrow {
    margin: 5px 0 9px;
    font-size: 30px;
    line-height: 1;
  }

  .learning-diagram p {
    width: 100%;
    margin: 0 auto;
    padding: 16px 14px;
    box-sizing: border-box;
    font-size: clamp(16px, 4.8vw, 19px);
    line-height: 1.45;
  }

  .learning-collage {
    width: 100%;
    height: auto;
  }

  .concept-label {
    /* PCと同じく幅いっぱいの帯にする */
    width: 100%;
    height: 58px;
    margin-bottom: 36px;
  }

  .concept-label strong {
    font-size: 31px;
  }

  .concept-tech-content img {
    margin-top: 0;
  }

  .concept-place-follow,
  .concept-place-bottom {
    margin-top: 28px;
  }

  .concept-page .page-neighbor-nav {
    margin-top: 56px;
  }

  .concept-two-col img {
    width: 100%;
    height: auto;
  }

  .process-card,
  .month-grid {
    grid-template-columns: 1fr;
  }

  .study-style-page .centered-lead {
    margin-bottom: 58px;
  }

  .study-style-overview > h2:not(.heading-band) {
    margin-left: 0;
    font-size: 22px;
  }

  .study-process-card {
    height: auto;
    min-height: 0;
    padding: 26px 18px;
  }

  .study-process-circles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 2.2vw, 10px);
    max-width: 100%;
    margin: 0 auto;
  }

  .study-process-circles > span {
    width: auto;
    font-size: clamp(13px, 4vw, 18px);
    line-height: 1.35;
  }

  .study-process-circles > span:nth-child(3) {
    font-size: clamp(12px, 3.4vw, 16px);
    line-height: 1.35;
  }

  .study-process-card p {
    font-size: 16px;
    /* PC値はwidth:388px+margin:0で左寄せ固定。600px以上で中央の円・
       矢印から白ボックスだけ左にズレて図が破綻する(監査high)ため中央へ */
    margin-inline: auto;
  }

  .study-style-detail {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 56px;
  }

  .study-style-detail img {
    width: 100%;
    height: auto;
  }

  .study-style-detail .marker-heading {
    font-size: 22px;
  }

  .study-project-list {
    padding: 20px 18px;
  }

  .study-style-final {
    min-height: 0;
    padding: 30px 18px;
  }

  .study-style-page .page-neighbor-nav {
    margin-top: 64px;
  }

  .schedule-overview .annual-card {
    min-height: 0;
    padding: 25px 24px 28px;
    border-radius: 7px;
  }

  .schedule-overview .annual-card p {
    margin-left: 0;
  }

  .schedule-overview .schedule-year-note {
    display: block;
    margin: 0 0 20px;
    font-size: clamp(13px, 3.8vw, 15px);
    line-height: 1.8;
    letter-spacing: 0;
  }

  .schedule-overview .schedule-year-note > span {
    display: block;
    margin-bottom: 2px;
  }

  .schedule-overview .schedule-year-note .note-line {
    width: 100%;
  }

  .schedule-overview .month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(49px, auto));
    grid-auto-flow: column;
    gap: 12px 18px;
    align-items: start;
  }

  .schedule-overview .month-grid div {
    gap: 8px;
    min-height: 49px;
    align-items: center;
  }

  .schedule-overview .month-grid strong {
    width: clamp(44px, 13.5vw, 56px);
    height: clamp(44px, 13.5vw, 56px);
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1;
  }

  .schedule-overview .month-grid span,
  .schedule-overview .month-grid .month-grid-note {
    min-width: 0;
    color: #524e44;
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
  }

  /* 「希望者面談（進路に関して）」等の長い注記は、月丸の下に全幅で
     落とすのではなく丸の右に置いたまま複数行に折り返す(ナツ指示)。
     文節固定(.pch nowrap)をやめて自然折返しに任せることで
     「）」の孤立行は防ぎつつ、行はテキスト側だけで折り返す。 */
  .schedule-overview .month-grid div {
    flex-wrap: nowrap;
  }

  .schedule-overview .month-grid span,
  .schedule-overview .month-grid .month-grid-note {
    flex: 1 1 auto;
  }

  .schedule-overview .month-grid .month-grid-note,
  .schedule-overview .month-grid .pch {
    white-space: normal;
    word-break: normal;
  }

  .schedule-current-link {
    margin-top: 0;
    margin-bottom: 70px;
  }

  .schedule-current-link a {
    width: 100%;
    /* 600-840pxで横800pxの細長い帯になる(監査medium)。ラベルに対して
       自然な幅で止めて中央に置く */
    max-width: 400px;
    margin-inline: auto;
  }

  .schedule-events,
  .schedule-holidays > div {
    grid-template-columns: 1fr;
  }

  .schedule-events {
    gap: 54px;
    margin-bottom: 72px;
  }

  .schedule-event-card img {
    width: 100%;
    height: auto;
  }

  .schedule-event-card h2 {
    font-size: 20px;
  }

  .schedule-holidays h2 {
    font-size: 21px;
  }

  .flow-step {
    grid-template-columns: 86px 1fr;
    gap: 16px;
  }

  /* PCの92px間隔はSPだと1画面1ステップ弱で間延びする。半分程度に圧縮。 */
  .flow-list {
    gap: 52px;
  }

  .flow-cta {
    margin-top: 56px;
  }

  /* 320pxでラベルが2行に折れると矢印(::after)がボタン右端へ押し出され
     overflow:hiddenで半分切れる(監査high)。左右パディングで矢印の
     居場所を常に確保する */
  .flow-cta a {
    padding-inline: 24px;
  }

  .step-number {
    width: 86px;
    height: 86px;
  }

  .step-connector {
    top: 92px;
  }

  .schedule-card,
  .annual-card,
  .process-card {
    padding: 26px 18px;
  }

  .days-overview {
    margin-bottom: 62px;
  }

  .days-week-panel,
  .days-detail {
    grid-template-columns: 1fr;
  }

  /* PCの固定631pxがgridトラックを押し広げ、days-detail全記事が631px化して
     右が画面外に切れていた。SPでは自然幅に戻す。 */
  .days-detail:nth-child(3) > div {
    width: auto;
  }

  .days-week-panel {
    width: min(800px, 100%);
    height: auto;
    margin: 0 auto;
    padding: 28px 10px 20px;
  }

  .days-example-label {
    top: 10px;
    left: 12px;
  }

  .days-activity-days,
  .days-la-card {
    min-width: 0;
  }

  .days-activity-days h4 {
    /* 下線(border-bottom)を月火水の行(.days-weekdays, width:100%)と
       揃えるため文字幅(width:auto)ではなく100%にする(ナツ指摘) */
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 2px 0 6px;
    line-height: 1.3;
  }

  .days-activity-days > .days-weekdays span,
  .days-la-card .days-weekdays span:first-child,
  .days-la-card .days-weekdays span:last-child {
    margin-top: 0;
  }

  .days-activity-days > .days-weekdays {
    width: 100%;
  }

  .days-time-row {
    /* 13px化に伴い時刻(10:00~11:00)が78pxに収まらないため84pxに */
    grid-template-columns: 84px 1fr;
    width: auto;
    padding-left: 50px;
    font-size: 13px;
  }

  /* 中央寄せだと「※20分区/切り」等の不格好な折れ方になるので左寄せに。 */
  .days-time-row strong {
    text-align: left;
    line-height: 1.6;
  }

  .days-time-row:nth-child(8) {
    margin-top: 0;
  }

  .days-time-row::before {
    left: 18px;
    width: auto;
    right: 0;
    max-width: none;
  }

  .days-row-icon {
    width: 36px;
    height: 36px;
  }

  .days-row-icon::after {
    border-width: 6px 0 6px 10px;
    transform: translate(-4px, -50%);
  }

  .days-la-card .days-weekdays {
    margin-top: 0;
  }

  .days-la-card .days-weekdays span {
    height: auto;
    line-height: inherit;
  }

  /* PCの固定468px+大マージンだとSPでは縦に間延びするため引き締める */
  .days-la-card {
    height: auto;
    padding: 22px 16px 20px;
  }

  .days-la-card > strong {
    margin: 36px 0 22px;
    font-size: 44px;
  }

  /* Wixの図に合わせたPCの不揃いな行間隔は、SPでは均一なリズムに揃える */
  .days-activity-days .days-time-row {
    margin-top: 0;
    margin-bottom: 12px;
  }

  .days-row-icon svg {
    width: 23px;
    height: 23px;
  }

  .schedule-card .days-example-note {
    grid-column: 1;
    width: auto;
    margin: 12px 0 0;
    white-space: normal;
  }

  .days-detail-list {
    gap: 54px;
  }

  .days-detail {
    gap: 22px;
  }

  .days-detail h2 {
    font-size: 21px;
  }

  .days-detail img {
    width: 100%;
    height: auto;
  }

  .days-detail a {
    width: 100%;
    min-width: 0;
  }

  .predeschool-page {
    padding-top: 54px;
  }

  .predeschool-intro {
    margin-bottom: 56px;
  }

  .predeschool-intro h2 {
    font-size: 23px;
  }

  .predeschool-target-band {
    padding: 58px 20px;
  }

  .fee-card,
  .support-card {
    padding: 22px 18px;
  }

  .study-environment-page,
  .blog-page,
  .access-page,
  .inquiry-page,
  .sns-page,
  .freeschool-page {
    padding-top: 48px;
  }

  .inquiry-page {
    padding-top: 24px;
  }

  .media-split,
  .environment-more,
  .blog-card,
  .access-media {
    grid-template-columns: 1fr;
  }

  .environment-gallery {
    margin-top: 56px;
  }

  .environment-more {
    gap: 28px;
    margin-top: 48px;
  }

  .image-gallery,
  .gallery-main,
  .sns-carousel,
  .sns-main-frame,
  .sns-main-image,
  .map-preview {
    width: 100%;
  }

  .sns-main-image {
    height: auto;
  }

  .sns-thumbs {
    width: 100%;
    gap: 10px;
    /* 6枚を1行に押し込むと2枚がクリップされ見えない。4枚/行で折り返す。 */
    flex-wrap: wrap;
  }

  .sns-thumbs button {
    flex-basis: calc((100% - 30px) / 4);
  }

  .sns-note {
    width: 100%;
  }

  .sns-note p {
    font-size: 17px;
  }

  .sns-embed-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 26px;
  }

  /* 600-840pxで埋め込みカードがX公式の標準上限(550px)を超えて伸び、
     不自然なプロポーションになる(監査medium)。上限を設けて中央寄せ */
  .sns-embed-grid > * {
    max-width: 550px;
    margin-inline: auto;
    width: 100%;
  }

  .sns-embed-spacer {
    width: 100%;
    height: 411px;
    margin-top: 26px;
  }

  .sns-x-post,
  .sns-facebook-card {
    /* 実ウィジェットは埋め込み内容量でタイムライン高さが伸びるため、
       PCの固定411pxをやめて内容に合わせる。 */
    height: auto;
  }

  .gallery-main {
    height: auto;
    margin-left: 0;
  }

  .environment-world-gallery .gallery-main {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  .environment-world-gallery .gallery-next {
    right: 8px;
  }

  .environment-world-gallery .gallery-thumbs {
    height: auto;
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .environment-printer .gallery-main {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  .gallery-prev {
    left: 8px;
  }

  .gallery-next,
  .sns-main-frame > button {
    right: 8px;
  }

  .gallery-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 高さ78px固定だと幅だけ流体で伸び、840pxで約5:1の極端な帯になる
     (監査medium)。320px時の見た目(約16:9)を全幅で維持する */
  .gallery-thumbs img {
    width: 100%;
    height: 100%;
  }

  .gallery-thumbs button {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .environment-printer .gallery-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .environment-printer .gallery-thumbs button {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .environment-printer .gallery-thumbs img {
    width: 100%;
    height: 100%;
  }

  .page-neighbor-nav {
    --page-neighbor-mobile-width: min(280px, calc(100vw - 96px));
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 60px 0 48px;
    font-size: 16px;
  }

  .page-neighbor-nav a,
  .page-neighbor-nav a:last-child {
    width: var(--page-neighbor-mobile-width);
    min-width: var(--page-neighbor-mobile-width);
    max-width: var(--page-neighbor-mobile-width);
    flex: 0 0 auto;
    min-height: 52px;
    border-right: 1px solid #222;
    border-left: 1px solid #222;
    color: #222;
    font-size: clamp(14px, 4.2vw, 17px);
    letter-spacing: 0;
  }

  .sns-page .page-neighbor-nav {
    margin: 56px 0 20px;
  }

  .blog-hh-page .page-neighbor-nav {
    margin: 56px 0;
  }

  /* blog-rだけSP上書きが抜けPC値(margin-top:235px)が漏れていた(監査high:
     本文末〜ナビ間の巨大空白の犯人)。他のblog系ページと同じ値に揃える */
  .blog-r-page .page-neighbor-nav {
    margin: 56px 0;
  }

  /* learning(205px)/days(178px)/schedule(147px)もPC値のナビ上余白が
     SPへ漏れて末尾が間延びしていた(監査medium)。共通値に正規化 */
  .learning-page .page-neighbor-nav,
  .days-page .page-neighbor-nav,
  .schedule-page .page-neighbor-nav {
    margin: 56px 0 20px;
  }

  .staff-page .page-neighbor-nav {
    margin: 56px 0;
  }

  .ai-classroom-page .page-neighbor-nav {
    margin: 56px 0;
  }

  .ai-section {
    margin-bottom: 56px;
  }

  /* PC値279px(Wixピクセル再現)がSPに漏れ、「AIが、自然にそばにいる〜」
     末尾に280px級の空白帯を作っていた(監査medium) */
  .ai-article > .ai-section:first-of-type {
    margin-bottom: var(--sp-section-gap);
  }

  .ai-with-image,
  .ai-place-grid,
  .ai-place-follow {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ai-section img {
    width: 100%;
    height: auto;
  }

  .blog-card {
    gap: 28px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .blog-card-media {
    width: 100%;
    justify-self: stretch;
  }

  .blog-card-media img {
    width: 100%;
    height: 100%;
  }

  .blog-card:nth-child(2) .blog-card-media img {
    width: auto;
    height: 100%;
  }

  .faq-list {
    width: min(100%, calc(100vw - 32px));
  }

  .faq-item {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .faq-row {
    min-height: 72px;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) 44px;
    /* 320px級で質問文の行末と「+」円が接触する(監査high、freeschool/
       faq-preview共通)。列間gapで物理的に重なれない構造にする */
    column-gap: 10px;
  }

  /* 600-840pxでカードが伸び切り、短い質問文と「+」の間に大きな空白が
     できる(監査medium)。FAQ一覧も本文カラム幅に揃える */
  .faq-list {
    max-width: var(--sp-content);
    margin-inline: auto;
  }

  /* faq-preview(4案)は狭幅でセルが約140pxしかなく、固定16.5pxだと
     「オルタナティブスクール」の文節がセルからはみ出し「+」円と重なって
     描画される(監査high)。狭幅のみフォントを流体で縮めて文節を収める */
  .faq-preview .faq-row h3 {
    font-size: clamp(13.5px, 4.4vw, 16.5px);
  }

  .faq-number {
    min-height: 72px;
    font-size: 17px;
  }

  .faq-row h3 {
    max-width: none;
    margin-left: 18px;
    padding: 0;
    font-size: 16px;
  }

  .faq-answer {
    grid-column: 1 / -1;
    padding: 20px 18px 30px 72px;
    font-size: 13.5px;
  }

  .faq-image-gallery .gallery-main {
    height: min(66vw, 320px);
  }

  .faq-image-gallery .gallery-prev,
  .faq-image-gallery .gallery-next {
    top: calc(min(66vw, 320px) / 2 - 17px);
  }

  .faq-gallery {
    width: 100%;
    height: min(66vw, 320px);
  }

  .faq-gallery-track,
  .faq-gallery img {
    height: min(66vw, 320px);
  }

  .faq-gallery img:nth-child(1) {
    width: min(49.5vw, 240px);
  }

  .faq-gallery img:nth-child(2) {
    width: min(66vw, 320px);
  }

  .faq-gallery img:nth-child(n + 3) {
    width: min(88vw, 426px);
  }

  .faq-preview-page {
    width: min(100%, calc(100vw - 32px));
  }

  .faq-preview-grid {
    grid-template-columns: 1fr;
  }

  .faq-preview-panel {
    padding: 20px;
  }

  .faq-preview-panel > p {
    min-height: 0;
  }

  .faq-preview .faq-item,
  .faq-preview-d .faq-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  /* C案(Section Rail)はborder-left:4px+外枠1pxの分だけ見出しカラムが
     他案より約5px狭く、430pxでC案だけ見出しが3行に折れる(re-audit
     medium)。番号ガターを狭めて実効幅をA/B/Dと揃える */
  .faq-preview-c .faq-item {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .faq-preview .faq-answer {
    padding-right: 18px;
  }

  .access-media {
    gap: 28px;
    justify-items: center;
    transform: none;
  }

  .map-preview {
    max-width: 452px;
    height: 300px;
  }

  .inquiry-lead p {
    font-size: 14px;
  }

  .inquiry-lead p:first-child,
  .inquiry-lead .phone-line {
    font-size: 17px;
  }

  /* 電話番号のオレンジ下線はPCで380px固定。SPでは行幅に収める。 */
  .inquiry-lead .phone-line::after {
    width: 100%;
    max-width: 380px;
  }

  .inquiry-form-band {
    height: auto;
    padding-bottom: 64px;
  }

  .inquiry-cta p {
    font-size: 20px;
  }

  .inquiry-cta a {
    min-width: 0;
    width: 100%;
  }

  .blog-article-page,
  .general-clean-page,
  .ai-classroom-page {
    padding-top: 42px;
  }

  .interview-question {
    font-size: 16px;
  }

  .interview-gallery {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 22px 0 34px;
  }

  .interview-gallery img {
    width: 100%;
  }

  .year-plan h1 {
    min-height: 52px;
    padding: 8px 12px;
    font-size: 25px;
  }

  .year-plan-panel {
    height: auto;
    padding-bottom: 88px;
  }

  .year-plan-panel h3 {
    font-size: 20px;
  }

  .year-plan-panel article:last-child div p:last-child {
    width: auto;
    margin-left: 0;
    text-align: center;
  }

  .general-clean-page .page-neighbor-nav {
    margin-top: 64px;
  }

  .thanks-panel {
    min-height: 430px;
    padding: 0 28px;
  }

  .thanks-panel h1,
  .thanks-panel strong {
    font-size: 30px;
    line-height: 42px;
  }

  .subpage-hero-ai-classroom {
    height: 150px;
  }

  .ai-article .heading-band {
    font-size: 28px;
  }

  /* 長いページ(コンセプト/卒業生の声等は5000px超)ではSPでも有用なので
     コンパクト版で表示。ホームバーと重ならないようセーフエリアを加算。 */
  .to-top {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    font-size: 13px;
    /* 先頭表示時は本文に被るため隠し、ある程度スクロールしたら
       site.jsが付与する.to-top-shownでフェードイン表示する。 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .to-top.to-top-shown {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .to-top::before {
    width: 18px;
    height: 18px;
  }

  /* iOSはinput/textareaの文字が16px未満だとフォーカス時に画面ごと
     ズームしてしまうため、SPでは16px以上にする。 */
  .form-field input,
  .form-field textarea,
  .inquiry-form-band input,
  .inquiry-form-band textarea {
    font-size: 16px;
  }

  /* ドロワー下部CTAがiPhoneのホームバーに重ならないように */
  .main-nav {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* タッチ端末はホバーが無いので、タップ時に軽く沈む触覚フィードバックを付ける */
  .hero-copy a:active,
  .inquiry-cta a:active,
  .flow-cta a:active,
  .contact-note a:active,
  .nav-cta:active,
  .home-links a:active,
  .home-support a:active,
  .to-top:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
  }
}

/* 320px級の極小幅では週間表の本文列が100px程度しか取れず、
   文節1つ(例:「メンタリングを元にした」)すら収まらない。
   時刻と本文を縦積みにして本文へ幅を明け渡す。 */
/* SP中間域(560-900px)限定: 単発のコンテンツ写真が1画面を覆う高さまで
   拡大される(監査medium: blog/blog-hh/blog-r/concept/複製)。高さに上限を
   設けて中央に置く。max-width:900に内包される範囲なのでPCは不変 */
@media (min-width: 560px) and (max-width: 900px) {
  .blog-card img,
  .interview-article img,
  .concept-section img,
  .ai-section img {
    width: auto;
    max-width: 100%;
    max-height: 620px;
    margin-inline: auto;
    display: block;
  }

  /* predeschool受入対象の※注記: 中間域で「可能性」の語中分断・
     「す。」2文字の孤立行が出る(re-audit low)。行長に余裕があるこの帯
     だけ文節固定に戻す(320-430の自然折返しは現状問題なしのため不変) */
  .predeschool-target p.note-line {
    word-break: keep-all;
  }

  .predeschool-target p.note-line .pch {
    white-space: nowrap;
  }
}

@media (max-width: 352px) {
  .days-time-row {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
}

/* SP 340-430px限定: CTAラベル「見学・体験申し込み（無料）はこちら」が
   矢印(::after)のインライン化+padding-inline追加による幅圧迫で2行に折れる
   (re-audit: flow@360, inquiry@375)。この帯だけ字詰めして1行に収める。
   320px級は従来どおり2行+矢印確保を許容。max-width:900内なのでPC不変 */
@media (min-width: 340px) and (max-width: 430px) {
  .flow-cta a,
  .inquiry-cta a {
    font-size: clamp(14px, 4vw, 15px);
    padding-inline: 12px;
  }
}

/* SP 374px以下限定: 助成緑ボックスの「フリースクール等利用者等支援事業」
   16文字の裸チャンク(pch外)が1行に入らず、overflow-wrap:anywhereの緊急
   折返しで「業」「の」等の1文字孤立行が出る(re-audit medium)。見出しは
   16文字が収まる字サイズへ、本文は緊急折返しをやめ厳格禁則の自然折返しに */
@media (max-width: 374px) {
  /* .content-body .home-support h2(0,2,1)に勝つため詳細度を合わせる */
  .content-body .home-support h2,
  .content-body .support-band h2 {
    font-size: 16px;
  }

  /* .content-body .home-support p(0,2,1)に勝つため詳細度を合わせる。
     .jp-phraseのkeep-all+overflow-wrap:anywhereによる緊急折返しが
     「業」「の」の1文字孤立行を生むため、厳格禁則の自然折返しに戻す。
     文中の.pch(「東京都」のみ)はnowrapのままだが短い文節なので無害 */
  .content-body .home-support p,
  .content-body .support-band p {
    word-break: normal;
    overflow-wrap: normal;
    line-break: strict;
  }
}