/* アートスクールの各クラス（こどもあとりえ・高等部など）。Figma 410:250〜410:490 */

/* 間隔の決まり：4 = 注記・リストの行 / 8 = 見出しと内容 / 20 = 同じ項目内のかたまり / 24 = 見出しの下・繰り返し / 48 = 項目の間 */

/* デザイン幅 1280 では左 260・右 220（右下の目次の分）。広い画面では本文 800 を中央寄りに置く */
.cls {
  padding: 100px 220px 160px max(260px, calc((100% - 800px) / 2 + 20px));
}

.cls-detail {
  container-type: inline-size;
  max-width: 800px;
}

/* ---------- 導入（キービジュアル・名前・説明・項目へのリンク） ---------- */

.cls-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cls-kv {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* タイトルと英字はアウトライン化した SVG。--x は SVG の左余白（文字ごとに違う）で、文字の左端を写真の左端にそろえる */
.cls-head {
  display: flex;
  flex-direction: column;
  padding-top: 3px;
}

.cls-title {
  margin: 0;
  height: 62px;
  font-size: 0;
}

.cls-title img,
.cls-en img {
  width: calc(var(--w) * 1px);
  max-width: none;
  height: auto;
  transform: translateX(calc(var(--x, 0) / var(--w) * 100%));
}

.cls-en {
  margin: 0;
  height: 16px;
  font-size: 0;
}


.cls-lead {
  font-size: 16px;
  line-height: 32px;
}

.cls-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 5px;  /* 説明文との間を、5px 広げる */
}

.cls-nav a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  font-size: 16px;
  line-height: 32px;
}

.cls-nav img {
  width: 15px;
  height: 11px;
  transform: rotate(90deg);
  transition: transform 0.35s var(--ease-out);
}

.cls-nav a:hover img,
.cls-nav a:focus-visible img { transform: rotate(90deg) translateX(3px); }

/* ---------- 各項目 ---------- */

.cls-sec {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}

.cls-sec--plain { padding-top: 0; border-top: 0; }

.cls-head2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cls-h {
  font-size: 20px;
  line-height: 28px;
}

.cls-catch {
  font-size: 18px;
  line-height: 32px;
}

.cls-sub {
  font-size: 16px;
  line-height: 28px;
}
/* 項目名を、黒い線の楕円で囲む */
.cls-oval {
  display: inline-block;
  padding: 3px 18px 4px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  line-height: 24px;
}

.cls-text {
  font-size: 14px;
  line-height: 28px;
}

.cls-note {
  font-size: 13px;
  line-height: 24px;
}

.cls-stack { display: flex; flex-direction: column; gap: 20px; }
.cls-group { display: flex; flex-direction: column; gap: 8px; }
.cls-tight { display: flex; flex-direction: column; gap: 4px; }
.cls-items { display: flex; flex-direction: column; gap: 24px; }

.cls-figure {
  width: 100%;
  height: auto;
}

/* ---------- 開講日の表 ---------- */

.sch {
  margin: 0;
  border-top: 1px solid var(--line);
}

.sch-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 24px;
}

.sch-row dt,
.sch-row dd { margin: 0; }

/* ---------- 授業の流れ（時刻の枠を点線でつなぐ年表） ---------- */

.tl {
  --tl-pill: 92px;
  position: relative;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* 時刻の枠の中心を通る、縦の点線 */
.tl::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-pill) / 2 - 1px);
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 7px, transparent 7px 13px);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-pill) minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 18px 0;
}
.tl-item + .tl-item { margin-top: 0; }

/* 時刻の枠 */
.tl-time {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 時刻のない項目は、点線の上に小さな点を置く */
.tl-dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 12px;
  height: 12px;
  margin-top: 17px;
  border-radius: 50%;
  background: var(--ink);
}

/* 右側：項目名、説明、項目ごとの区切り線 */
.tl-body {
  min-height: 46px;
  padding-bottom: 18px;
  border-bottom: 1px solid #bdbdb8;
}
.tl-item:last-child .tl-body { border-bottom: 0; padding-bottom: 0; }

.tl-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  min-height: 46px;
  padding-top: 8px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
}
.tl-sub { font-size: 12px; line-height: 20px; }
.tl-text { margin: 4px 0 0; font-size: 14px; line-height: 28px; }

/* ---------- 授業料の表 ---------- */

.fee {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 1px solid var(--line);
}

.fee th,
.fee td {
  padding: 8px 20px 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: inherit;
  line-height: 24px;
  text-align: left;
}

.fee thead th {
  padding: 8px 20px 8px 0;
  font-size: 12px;
  line-height: 18px;
}

.fee--2 .col-1 { width: 340px; }
.fee--5 .col-1 { width: 250px; }
.fee--5 .col-2 { width: 180px; }

/* 5 列の表は、スマホでは横にスクロールして見る */
.fee-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 料金表（区分ごとの列で比べる形） ---------- */
/* 上に区分ごとの見出し（区分名・コースのピル・入会金・大きな金額）、下に項目ごとの行。
   列が多いときは横にスクロールし、左の項目名は固定する */

.plan-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid #e3e3df;
}
.plan.plan-ticket { width: calc(var(--plan-label) + var(--plan-col)); min-width: 0; }
.plan-sub-h { margin-top: 32px; margin-bottom: 12px; }
.plan-entry-text { margin-bottom: 16px; }
.plan-corner {
  padding: 26px 12px 22px 14px !important;
  vertical-align: top;
  text-align: left;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}
.plan-corner-a { display: flex; align-items: center; height: 26px; }
.plan-corner-a.has-sub { height: 46px; align-items: flex-start; padding-top: 3px; box-sizing: border-box; }
.plan-corner-b { display: flex; align-items: center; height: 40px; margin-top: 16px; }
.plan-head:not(:has(.plan-course)) { padding-bottom: 24px; }
.plan-hint { margin-bottom: 8px; font-size: 12px; line-height: 18px; text-align: right; opacity: 0.7; }
.plan-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.plan {
  --plan-label: 140px;
  --plan-col: 168px;
  width: 100%;
  min-width: calc(var(--plan-label) + var(--plan-col) * var(--plan-n, 3));
  /* 固定した左の列の下に、スクロールした中身が透けないよう、collapse は使わない */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
}
.plan--1 { --plan-n: 1; }
.plan--2 { --plan-n: 2; }
.plan--3 { --plan-n: 3; }
.plan--4 { --plan-n: 4; }
.plan--5 { --plan-n: 5; }
.plan--6 { --plan-n: 6; }

.plan th,
.plan td {
  border-right: 1px solid #e3e3df;
  border-bottom: 1px solid #e3e3df;
  font-weight: inherit;
}

/* 左上の空き、左の項目名の列（横スクロールでも固定） */
.plan-corner,
.plan tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 #e3e3df;
  width: var(--plan-label);
  background: #fff;
}
.plan tbody th {
  padding: 18px 14px;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}

/* 区分ごとの見出し */
.plan-head {
  padding: 26px 12px 22px;
  vertical-align: top;
  border-top: 1px solid #e3e3df;
}
.plan-head > span { display: block; }
.plan-name {
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.02em;
}
.plan-sub { margin-top: 2px; font-size: 12px; line-height: 18px; opacity: 0.75; }
.plan-course {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(100%, 150px);
  height: 40px;
  box-sizing: border-box;
  margin: 16px auto 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
}

/* 項目の行：1 行おきに薄い灰色 */
.plan tbody td {
  padding: 18px 10px;
  font-size: 15px;
  line-height: 22px;
}
.plan tbody th,
.plan tbody td { border-bottom: 0; }
.plan tbody tr:last-child th,
.plan tbody tr:last-child td { border-bottom: 1px solid #e3e3df; }
.plan-yen { margin-left: 2px; font-size: 0.62em; }
.plan tbody td.plan-money { font-size: 19px; line-height: 26px; letter-spacing: 0.02em; }
.plan tbody tr:nth-child(odd) th,
.plan tbody tr:nth-child(odd) td { background: #f4f4f1; }

/* ---------- 日時・対象 ---------- */

.info { display: flex; flex-direction: column; gap: 8px; margin: 0; }

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-row dt {
  flex: none;
  padding: 3px 10px;
  border: 1px solid #000;
  font-size: 13px;
  line-height: 20px;
}

.info-row dd {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
}

/* ---------- 灰色の箱・黄色い点のリスト・チップ ---------- */

.cls-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #f6f5f3;
}

.cls-box-h {
  font-size: 15px;
  line-height: 24px;
}

.dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 28px;
}

.dots li {
  position: relative;
  padding-left: 18px;
}

.dots li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffc800;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 24px;
}

.chips li {
  padding: 5px 16px;
  border: 1px solid #000;
  border-radius: 999px;
}

.chips .chips-tail {
  padding: 5px 4px;
  border: 0;
}

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

.cols-2--wide { gap: 24px; }

/* ---------- 学生作品 ---------- */

.works {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.works img {
  flex: 1 1 calc((100% - 60px) / 4);
  width: 0;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  background: #f6f5f3;
}

.works img:nth-child(-n + 3) { flex-basis: calc((100% - 40px) / 3); }

/* ---------- 講師紹介 ---------- */

.teachers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 72px;
}

/* 1 人ずつ：名前（左）と肩書き（右）→ 写真があれば写真 → 紹介文（線はなし） */
.teacher { display: flex; flex-direction: column; gap: 0; }

.teacher-name {
  order: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 22px;
}

.teacher-name strong {
  font-size: 20px;
  font-weight: inherit;
  line-height: 30px;
}

.teacher-role {
  max-width: 52%;
  font-size: 13px;  /* 参画メンバーの肩書きと同じ（PC 13px、スマホ 11px） */
  line-height: 20px;
  text-align: right;
}

.teacher-photo {
  order: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eaeaea;
  margin-bottom: 22px;
}

.bubble-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 紹介文は、手描き風の吹き出し（少し傾けて、しっぽは上の名前・写真のほうへ） */
.teacher > .cls-text {
  order: 3;
  position: relative;
  isolation: isolate;
  margin: 10px 0 0;
  padding: 24px 28px;
  transform: rotate(-0.6deg);
}
.teacher:nth-child(even) > .cls-text { transform: rotate(0.6deg); }

.teacher > .cls-text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2px solid var(--ink);
  border-radius: 30px 38px 28px 40px / 36px 28px 38px 30px;
  background: #fff;
  filter: url(#bubble-wobble);
}
.teacher:nth-child(even) > .cls-text::before { border-radius: 38px 28px 40px 30px / 28px 38px 30px 36px; }

/* しっぽ（吹き出しの上の縁を、一か所だけ切って、上へ尖らせる） */
.teacher > .cls-text::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 56px;
  z-index: -1;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  background: #fff;
  transform: rotate(45deg) skew(-8deg, -8deg);
  filter: url(#bubble-wobble);
}
.teacher:nth-child(even) > .cls-text::after { left: auto; right: 64px; transform: rotate(45deg) skew(8deg, 8deg); }

/* ---------- リンク・締めの言葉 ---------- */

.cls-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid #000;
  font-size: 16px;
  line-height: 32px;
}

.cls-link img { width: 15px; height: 11px; }

.cls-quote {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 48px;
  background: #f6f5f3;
}

.cls-quote img { align-self: flex-start; width: 30px; height: 26px; }

.cls-quote p {
  margin: 0;
  font-size: 20px;
  line-height: 44px;
}

.cls-quote footer {
  font-size: 14px;
  line-height: 24px;
  text-align: right;
}

/* 本文の幅が狭いとき（タブレットやスマホ）は、説明を時刻とラベルの下に回す */
@container (max-width: 560px) {
  .fee--2 .col-1 { width: 62%; }
  .fee--5 { width: 620px; }
  .fee--5 .col-1 { width: 190px; }
  .fee--5 .col-2 { width: 150px; }
  .fee th, .fee td { padding-right: 12px; font-size: 13px; }
}

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

@media (max-width: 767px) {
  .plan { --plan-label: 84px; --plan-col: 148px; }
  /* 2 列までは、横にスクロールせず画面に収める */
  .plan--1, .plan--2 { --plan-col: 110px; }
  /* チケットコースの表は、上の表の 1 列と同じ幅 */
  .plan.plan-ticket.plan--1 { --plan-col: 148px; }
  .plan-head { padding: 20px 8px 18px; }
  .plan-name { font-size: 16px !important; line-height: 24px !important; }
  .plan-course { height: 34px; font-size: 12px !important; }
  .plan-corner { padding: 20px 8px 18px 10px !important; font-size: 12px; }
  .plan-corner-a { height: 24px; }
  .plan-corner-a.has-sub { height: 44px; padding-top: 2px; }
  .plan-corner-b { height: 34px; }
    .plan tbody th { padding: 14px 10px; font-size: 13px !important; line-height: 20px !important; }
  .plan tbody td { padding: 14px 8px; font-size: 14px !important; line-height: 20px !important; }
  .plan tbody td.plan-money { font-size: 17px !important; line-height: 24px !important; }

  .cls { padding: 124px var(--gutter) 80px; }
  .cls-hero { gap: 20px; }
  .cls-head { height: auto; }
  .cls-title { height: auto; }
  .cls-title img { width: min(calc(var(--w) * 0.62px), calc(100% + 26px)); }
  .cls-en img { width: calc(var(--w) * 0.8px); }
  .cls-en { height: auto; margin-top: 8px; }
  .cls-lead { font-size: 15px; line-height: 30px; }
  .cls-lead br { display: none; }
  .cls-nav { gap: 8px 20px; }
  .cls-nav a { font-size: 14px; line-height: 28px; }
  /* 肩書きが長い講師がいるので、スマホでは、名前の下に、肩書きを左揃えで置く */
  .teacher-name { flex-direction: column; align-items: flex-start; gap: 6px; }
  .teacher-role { max-width: none; text-align: left; }
  .tl { --tl-pill: 76px; }
  .tl-item { column-gap: 16px; }
  .tl-time { font-size: 14px; height: 40px; }
  .tl-title { min-height: 40px; padding-top: 5px; font-size: 16px; }
  .tl-dot { margin-top: 14px; }
  .tl::before { top: 20px; bottom: 20px; }
  .cls-sec { margin-top: 40px; padding-top: 40px; }
  .cls-sec--plain { padding-top: 0; }
  .cls-h { font-size: 18px; }
  .cls-catch { font-size: 16px; line-height: 28px; }
  .cls-text { font-size: 13px; line-height: 26px; }
  .cls-text br { display: none; }
  .sch-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 14px; }
  .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .works img, .works img:nth-child(-n + 3) { flex-basis: calc((100% - 20px) / 2); }
  .cls-quote { padding: 24px; }
  .cls-quote p { font-size: 16px; line-height: 32px; }
}