/* アートスクール（コラージュ・光の球・切り抜きパーツ・教室のセクション） */

/* ---------- コラージュの舞台 ---------- */

.art-stage { background: #d9d9d9; }

.art-collage {
  width: 100%;
  height: auto;
}

.art-float,
.art-sections {
  position: absolute;
  inset: 0;
}

.art-float {
  overflow: hidden;
  pointer-events: none;
}

/* 黄色い球（光の球）。蛍のように、やわらかい光が強まったり弱まったりする（動きと明るさは art-school.js） */
.orb {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* まわりににじむ光 */
.orb-glow {
  position: absolute;
  inset: -130%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 246, 160, 0.72) 0%,
    rgba(255, 238, 112, 0.42) 20%,
    rgba(250, 242, 120, 0.2) 42%,
    rgba(236, 248, 140, 0.08) 68%,
    rgba(236, 248, 140, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0.7;
  will-change: opacity, transform;
}

/* 芯。縁はぼかして、紙の丸ではなく光の粒に見せる */
.orb-core {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    #fffef0 0%,
    #fff9c8 24%,
    color-mix(in srgb, var(--orb, #ecd84f) 70%, #fff6b0) 52%,
    color-mix(in srgb, var(--orb, #ecd84f) 55%, transparent) 74%,
    rgba(255, 240, 120, 0) 100%);
  will-change: opacity;
}

/* 切り抜いた紙の球（光らせない）。ほかの切り抜きと同じ影で浮かせる */
.orb--paper img {
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18))
    drop-shadow(0 6px 9px rgba(0, 0, 0, 0.16));
}

/* 切り抜いたパーツ。紙が少し浮いたような影を落とす */
.cutout {
  position: absolute;
  will-change: transform;
}

.cutout img {
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 calc(var(--lift, 4) * 0.5px) calc(var(--lift, 4) * 0.5px) rgba(0, 0, 0, 0.18))
    drop-shadow(0 calc(var(--lift, 4) * 1.4px) calc(var(--lift, 4) * 2.2px) rgba(0, 0, 0, 0.16));
}

/* 動かさずに手前へ重ねるだけのパーツ（画板を描く腕など）は、元の絵と見分けがつかないように影を付けない */
.cutout--static { will-change: auto; }
.cutout--static img { filter: none; }

/* 転がるパーツは画像だけを回す。影は外側に付けて、向きが回らないようにする */
.cutout--pebbles {
  filter:
    drop-shadow(0 calc(var(--lift, 4) * 0.5px) calc(var(--lift, 4) * 0.5px) rgba(0, 0, 0, 0.18))
    drop-shadow(0 calc(var(--lift, 4) * 1.4px) calc(var(--lift, 4) * 2.2px) rgba(0, 0, 0, 0.16));
}
.cutout--pebbles img { filter: none; will-change: transform; }

/* ---------- 教室のセクション ---------- */

.art-sections {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}

.school {
  position: relative;
  scroll-margin-top: 0;
}

.school-text {
  position: absolute;
  left: calc(194 / 1280 * 100%);
  top: calc(545 / 936 * 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  --t: clamp(32px, 3.594vw, 56px);  /* 46 / 1280 */
  --s: clamp(13px, 1.172vw, 18px);  /* 15 / 1280 */
}

#highschool .school-text { top: calc(574 / 935 * 100%); }
.school--nire .school-text { top: calc(634 / 936 * 100%); }

.school-title,
.school-en {
  background: var(--paper);
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.school-title { margin-bottom: 5px; }
.school-en { margin-bottom: 10px; }
.school--nire .school-title { margin-bottom: 10px; }

/* タイトル・英字・説明文はアウトライン化した SVG。大きさは --t / --s に合わせて変わる。
   --x は文字ごとに違う左余白の補正で、3 つの文字の左端をそろえる */
.school-title > span,
.school-en > span { display: block; font-size: 0; }

.school-title img {
  display: block;
  width: calc(var(--t) * var(--w) / 46);
  max-width: 100%;
  height: auto;
  transform: translateX(calc(var(--x, 0) / var(--w) * 100%));
}

.school-en img {
  display: block;
  width: calc(var(--s) * var(--w) / 15);
  max-width: 100%;
  height: auto;
  transform: translateX(calc(var(--x, 0) / var(--w) * 100%));
}

/* 説明文：行ごとの白い帯の上に、全行ぶんの SVG を重ねる */
.school-desc {
  /* タイトルの文字の左端（--t の 12.4/46）と、説明文の文字の左端（12.2/15 × --s）をそろえる */
  --dm: calc(var(--t) * 12.4 / 46 - var(--s) * 12.2 / 15);
  margin-left: var(--dm);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 22px;
}

.school-line {
  display: block;
  width: calc(var(--s) * var(--w) / 15);
  height: calc(var(--s) * 2);
  /* 説明文の白い帯はなし（写真の上にそのまま置く） */
}

.school-line + .school-line { margin-top: calc(var(--s) * -5 / 15); }

/* 説明文は白い文字で、写真の上でも読めるよう、やわらかい影を付ける（SVG の墨色を白に変える） */
.school-desc-svg {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--s) * var(--w) / 15);
  max-width: none;
  height: auto;
  transform: translateX(calc(var(--x, 0) / var(--w) * 100%));
}

/* 説明文は、行ごとの白い帯の上に、墨色の文字（PC もスマホも同じ） */
.school-line { background: #fff; }
.school-desc-svg { filter: none; }

.desc-pc { display: contents; }
.desc-sp { display: none; }

/* ---------- スマホ ---------- */

@media (max-width: 767px) {
  .school-text {
    left: 0;
    top: calc(300 / 936 * 100%);
    padding: 0 var(--gutter);
    /* タイトルは、いちばん長い nire（779 幅）が 1 行で画面に収まる大きさに、全コースそろえる */
    --t: calc((100vw - var(--gutter) * 2) * 46 / 779);
    --s: 15px;  /* 説明文の文字の大きさ（全コース共通） */
  }

  /* こどもあとりえは、上の人物の顔にかからないよう、下げる */
  #kodomo .school-text { top: calc(480 / 936 * 100%); }
  #highschool .school-text { top: calc(330 / 935 * 100%); }
  .school--nire .school-text { top: calc(330 / 936 * 100%); }

  /* 長い行のあるコースは、スマホ用に改行を増やした説明文に切り替える */
  .desc-pc { display: none; }
  .desc-sp { display: contents; }
  /* ワンデイは 1 行がいちばん長い（360px）ので、画面が狭いときは説明文をさらに左へずらして収める */
  #oneday .school-text { padding-left: min(var(--gutter), calc(100vw - 360.2px)); }

  /* タイトルの白い帯の左右に余白を足して、説明文の白い帯と左端・文字の位置をそろえる */
  .school-title { margin-bottom: 3px; padding: 0 calc(var(--s) * 12.2 / 15 - var(--t) * 12.4 / 46); }
  .school-desc { --dm: 0px; }
  .school-en { margin-bottom: 5px; }
  .school-desc { margin-bottom: 10px; }
  .more { width: 120px; height: 34px; padding-left: 0; font-size: 13px; gap: 8px; }
  .more img { width: 15px; }

  /* 長い教室名は画面の幅に収める */
  .school-title img { max-width: calc(100vw - var(--gutter) * 2); }
}

/* アートスクールの「もっとみる」：スマホだけ、白い背景に黒い文字（PC は黒い背景に白い文字のまま） */
@media (max-width: 767px) {
  /* スマホは「もっとみる」の文字はなし。タイトルの下に、左揃えで、右上向きの矢印だけを置く */
  /* 応援メンバーで使っている、手書き風の丸（中は白） */
  .school .more { width: 34px; height: 34px; padding: 0; gap: 0; border-radius: 50%; background: #fff url(../img/circle-hand.svg) center / 34px 34px no-repeat; color: var(--ink); justify-content: center; }
  .school .more span { display: none; }
  .school .more img { width: 13px; filter: brightness(0); transform: rotate(-45deg); transition: transform 0.35s var(--ease-out), filter 0.3s ease-out; }
  .school .more:hover img,
  .school .more:focus-visible img { transform: rotate(-45deg) translateX(3px); }
}