/* 楽ごり：余白・写真・細い罫線で整える、講座案内のデザイン。 */
:root {
  --editorial-rule: #cdd5c9;
  --editorial-muted: #61735e;
}

/* 未来の3つの選択肢：囲まず、文字の強弱と空間で区切る。 */
.future { padding-bottom: 112px; }
.future > h2, #skills h2 { font-size: clamp(32px, 3.7vw, 48px); line-height: 1.6; }
.future > .section-sub { line-height: 2.1; max-width: 660px; }
.future-grid { gap: 40px; margin-top: 52px; }
.future-grid article {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--editorial-rule);
  padding: 25px 0 0;
  min-width: 0;
}
.future-grid .number {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
  color: #647a60;
}
.future-grid h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.75;
  letter-spacing: .04em;
  margin: 24px 0 18px;
  text-wrap: pretty;
}
.future-grid article p { font-size: 14px; line-height: 2.05; }
.future-note { margin-top: 32px; max-width: 900px; line-height: 1.9; }

/* 学ぶ理由は、箱を並べず誌面のような横組みに。 */
.learning-reasons { margin-top: 64px; padding-top: 35px; }
.learning-reasons > .eyebrow { font-size: 10px; }
.learning-reasons h3 { font-size: clamp(25px, 2.6vw, 33px); }
.learning-reasons ul { gap: 36px; margin-top: 30px; }
.learning-reasons li { padding-left: 0; border-left: 0; }
.learning-reasons strong { font-size: 14px; line-height: 1.9; }
.learning-reasons li span { line-height: 2; }
.learning-reasons .future-link {
  padding: 19px 0 15px;
  margin-top: 28px;
  border-bottom: 1px solid #879b80;
  font-weight: 600;
}

/* 技術紹介：大きな写真と余白のある文章を、交互に配置。 */
#skills { background: #f2f2e9; }
#skills > .section { padding-top: 110px; padding-bottom: 90px; }
#skills .section-head { align-items: flex-end; gap: 60px; }
#skills .section-head h2 { margin-bottom: 0; }
#skills .section-head > p { margin-bottom: 7px; line-height: 2.1; }
#skills .skills-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 68px; margin-top: 58px; }
#skills .skills-grid > article {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: 0;
  border: 0;
}
#skills .skills-grid > article:nth-child(2) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); }
#skills .skills-grid > article:nth-child(2) .skill-media-frame { grid-column: 2; grid-row: 1; }
#skills .skills-grid > article:nth-child(2) .skill-copy { grid-column: 1; grid-row: 1; }
#skills .skill-media-frame { margin: 0; border-radius: 2px; min-width: 0; }
#skills .skill-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border-radius: 0; }
#skills .skill-copy { min-width: 0; padding: 15px 0; }
#skills .skill-label { display: flex; align-items: center; gap: 20px; margin: 0 0 22px; padding-bottom: 17px; border-bottom: 1px solid #b5c2ad; }
#skills .skill-label .number { display: block; margin: 0; font-size: 36px; line-height: 1; font-family: var(--serif); color: #596e51; }
#skills .skill-label > span:last-child { font-size: 9px; letter-spacing: .12em; line-height: 1.8; color: #51634a; }
#skills .skill-copy h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(27px, 2.8vw, 36px); letter-spacing: .06em; line-height: 1.6; margin: 0 0 22px; }
#skills .skill-copy > p:not(.skill-label) { color: var(--muted); font-size: 14px; line-height: 2.1; max-width: 26em; margin: 0; }
#skills .skill-copy small { display: block; font-size: 11px; margin-top: 18px; color: var(--muted); }
#skills .image-disclaimer { margin-top: 38px; font-size: 10px; }

/* 講師紹介に深緑の面を使い、ページのリズムを締める。 */
.teacher.tinted { background: #183e34; color: #f8f8ef; }
.teacher .eyebrow { color: #c4d2b9; }
.teacher h2 { font-size: clamp(30px, 3.4vw, 44px); }
.teacher p { color: #e0e8d8; }
.teacher .stats > div { border-color: #72917c; }
.teacher .stats strong { color: #fffdf3; font-size: clamp(36px, 4vw, 54px); }
.teacher .stats span, .teacher .stats small { color: #e0e8d8; }

@media (max-width: 1000px) {
  .future-grid { gap: 26px; }
  .future-grid h3 { font-size: 22px; }
  #skills .skills-grid > article, #skills .skills-grid > article:nth-child(2) { gap: 32px; }
  #skills .skill-copy h3 { font-size: 28px; }
  #skills .skill-label { gap: 12px; }
  #skills .skill-label > span:last-child { font-size: 8px; }
}
@media (max-width: 760px) {
  .future-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 34px; }
  .future-grid article { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 22px; padding: 26px 0 28px; }
  .future-grid .number { grid-column: 1; grid-row: 1 / 3; font-size: 33px; padding-top: 4px; }
  .future-grid h3 { grid-column: 2; font-size: 24px; margin: 0 0 12px; }
  .future-grid article p { grid-column: 2; font-size: 13px; }
  .learning-reasons ul { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .learning-reasons li { padding-bottom: 21px; border-bottom: 1px solid var(--line); }
  #skills .skills-grid { gap: 48px; }
  #skills .skills-grid > article, #skills .skills-grid > article:nth-child(2) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #skills .skills-grid > article:nth-child(2) .skill-media-frame, #skills .skills-grid > article:nth-child(2) .skill-copy { grid-column: 1; grid-row: auto; }
  #skills .skill-copy { padding: 0; }
  #skills .skill-label { margin-bottom: 16px; padding-bottom: 13px; }
  #skills .skill-label .number { font-size: 30px; }
  #skills .skill-label > span:last-child { font-size: 9px; }
  #skills .skill-copy > p:not(.skill-label) { max-width: none; font-size: 13px; }
  #skills .skill-copy h3 { margin-bottom: 13px; }
}
@media (max-width: 640px) {
  .future { padding-bottom: 65px; }
  .future > h2, #skills h2 { font-size: 30px; }
  .future-note { margin-top: 14px; }
  .learning-reasons { margin-top: 38px; padding-top: 26px; }
  #skills > .section { padding-top: 65px; padding-bottom: 60px; }
  #skills .section-head { display: block; }
  #skills .section-head > p { margin-top: 22px; font-size: 13px; }
  #skills .skills-grid { margin-top: 35px; }
  .teacher h2 { font-size: 30px; }
}