:root { --fs-body: 16px; --lh-body: 1.8; --section-y: 60px; --header-h: 60px; }

.jy-header { height: 60px; background: rgba(255, 255, 255, .4); font-size: 16px; }
.jy-logo { left: 20px; top: 10px; }
.jy-logo img { width: 91px; height: 140px; }
.jy-nav > summary { right: 26px; }

.jy-nav-panel { width: 50%; padding: 40px; font-size: 16px; line-height: 1.8; }
.jy-nav-panel::before,
.jy-nav-panel::after { right: 26px; }
.jy-nav-list > li > a,
.jy-nav-shop > details > summary { padding: 20px 60px 20px 20px; }
.jy-nav-shop > details > summary::after { right: 20px; width: 17px; height: 1px; }
.jy-nav-shop > details > summary::before { right: 28px; width: 1px; height: 16px; }
.jy-nav-sub { position: absolute; right: 0; z-index: 2; width: 100%; box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); }
.jy-nav-sub a { padding: 10px 20px; }
.jy-langs--nav { height: 30px; margin-top: 20px; margin-bottom: 20px; }
.jy-langs li { margin: 0 6px; }
.jy-langs a { height: 25px; padding: 0 8px; }
.jy-nav-rt { margin-bottom: 9.4px; }
.jy-btn-line { margin-bottom: 8px; padding: 20px 28px; font-size: 14px; }

.jy-hero { padding-top: 190px; }
.jy-hero-photo { height: 40svh; margin-bottom: 10px; }
.jy-hero-photo img { object-position: center 40%; }
.jy-hero-box { margin: -320px 5% 0; padding: 80px 160px; }
.jy-hero-ttl { margin: 0 auto 64px; padding-bottom: 24px; font-size: 24px; line-height: 43.2px; }
.jy-hero-name { font-size: 36px; letter-spacing: 2px; }
.jy-hero-logowrap { width: calc(100% - 40px); margin-bottom: 40px; }
.jy-hero-logo { width: 35%; height: 150px; }
.jy-hero-lead { margin: 0 0 8px; font-size: 18px; line-height: 1.8; }
.jy-hero-text p { font-size: 16px; }

.jy-intro { padding: 60px 0; }
.jy-intro-in { padding: 0 20px; }
.jy-intro-l { width: 40%; padding: 0 2.5% 0 20px; }
.jy-intro-r { width: 60%; padding-left: 2.5%; }
.jy-intro-ttl { margin: 0 0 8px; font-size: 18px; line-height: 1.8; }
.jy-intro-text p { font-size: 16px; }
.jy-intro-photo { aspect-ratio: 16 / 9; }

.jy-in { width: 90%; margin: 0 auto; padding: 0 20px; }
.jy-in--n { width: 81%; margin: 0 auto; padding: 0 20px; }

.jy-split { padding: 60px 0; }
.jy-split-item:nth-child(2n) { flex-direction: row-reverse; }
.jy-split-photo { height: 520px; }
.jy-split-inner { padding: 0 20px 0 140px; font-size: 16px; }
.jy-split-item:nth-child(2n) .jy-split-inner { padding: 0 80px; }

.jy-sec-ttl-main { font-size: 36px; letter-spacing: 2px; }

.jy-courses { padding: 60px 0 40px; }
.jy-course-main { padding: 40px; }
.jy-course-name { font-size: 18px; line-height: 1.8; }
.jy-course > details > summary { position: absolute; right: 30px; bottom: 40px; width: 70%; font-size: 16px; line-height: 1.8; }
.jy-course > details[open] > summary { bottom: 10px; }
.jy-course-body { padding: 0 40px 40px; font-size: 16px; line-height: 1.8; }
.jy-note { font-size: 16px; }

.jy-pdf { padding: 60px 0; }

.jy-cancel { padding: 0 0 60px; }
.jy-cancel-block { margin-bottom: 40px; }
.jy-cancel-ttl { font-size: 18px; line-height: 1.8; }
.jy-btn-big { min-width: 40%; padding: 16px 40px; font-size: 19.2px; line-height: 1.8; }
.jy-cancel-box p { font-size: 16px; }

.jy-faq { padding: 0 0 60px; }
.jy-faq .jy-sec-ttl { margin-bottom: 50px; }
.jy-faq-item { padding: 20px; }
.jy-faq-item > summary { padding-right: 20px; padding-left: 40px; font-size: 16px; line-height: 1.8; }
.jy-faq-item > summary::before { font-size: 28px; }
.jy-faq-icon { right: 0; }
.jy-faq-a { margin-top: 20px; padding: 15px; font-size: 16px; line-height: 1.8; }

.jy-info { width: 90%; margin: 0 auto 60px; font-size: 16px; line-height: 1.8; }
.jy-info .jy-in--n { width: 90%; }
.jy-info-table th { width: 25%; padding: 40px; }
.jy-info-table td { padding: 40px; }
.jy-info-block { margin-bottom: 40px; }
.jy-info-box { padding: 20px 30px; }
.jy-info-box-in { margin-bottom: 100px; }
.jy-info-box-l { width: 50%; padding: 48px; }
.jy-info-box-r { width: 50%; padding-left: 2.5%; }
.jy-map { margin-top: 80px; padding-bottom: 36.25%; }

.jy-footer { padding: 64px 0; font-size: 16px; line-height: 1.8; }
.jy-footer-in { width: 100%; }
.jy-footer-logo { width: 80px; height: 123px; }
.jy-footer-grp { margin-top: 40px; font-size: 18px; line-height: 1.8; }
.jy-footer-nav { width: 90%; margin: 40px auto 60px; }
.jy-footer-nav ul { display: flex; flex-wrap: wrap; }
.jy-footer-nav li { width: 25%; padding: 0 0 7px 56px; }
.jy-footer-nav a { padding-left: 24px; font-size: 13.12px; line-height: 28.8px; }
.jy-footer-copy { font-size: 12.8px; line-height: 1.8; }

.jy-tab { right: 0; bottom: 120px; display: flex; align-items: center; justify-content: center; width: 50px; height: 108px; padding: 30px 10px; border-radius: 12px 0 0 12px; font-size: 16px; line-height: 1.8; }

.to-top { right: 20px; bottom: 20px; width: 51px; height: 50px; padding: 15px 17px; border: 2px solid var(--color-fg-invert); border-radius: 100px; }

.jy-404 { padding: 190px 0 120px; font-size: 16px; line-height: 1.8; }
.jy-404-ttl { font-size: 24px; }

@media (min-width: 1300px) {
  :root { --header-h: 80px; }

  .jy-header { height: 80px; }
  .jy-logo { left: 30px; top: 25px; }
  .jy-logo img { width: 104px; height: 160px; }
  .jy-nav { display: none; }
  .jy-hnav { position: absolute; top: 0; right: 179px; display: flex; align-items: center; height: 80px; }
  .jy-hnav-list > li { height: 80px; }
  .jy-hnav-list > li > a { height: 80px; padding: 20px; }
  .jy-langs { margin: 0 30px 0 10px; }
  .jy-resv { display: block; width: 179px; height: 80px; }
  .jy-resv-main { width: 100%; height: 80px; }

  .jy-hero-photo { height: 100svh; }
  .jy-hero-box { margin: -320px 5% 0; padding: 80px 160px; }
  .jy-hero-logowrap { width: 100%; }
  .jy-hero-lead { margin-bottom: 40px; font-size: 24px; line-height: 43.2px; }

  .jy-intro { padding: 120px 0; }
  .jy-intro-in { padding: 0; }
  .jy-intro-l { padding: 0 2.5% 0 calc((100% - 1200px) / 2); }
  .jy-intro-ttl { margin-bottom: 40px; font-size: 24px; line-height: 43.2px; }

  .jy-in,
  .jy-in--n { width: 1200px; padding: 0; }
  .jy-info .jy-in--n { width: 1200px; }
  .jy-info { width: 1200px; margin-bottom: 120px; }
  .jy-footer-nav { width: 1200px; }

  .jy-split { padding: 120px 0; }
  .jy-courses { padding: 120px 0 80px; }
  .jy-pdf { padding: 120px 0; }
  .jy-cancel { padding-bottom: 120px; }
  .jy-cancel-block { margin-bottom: 80px; }
  .jy-cancel-ttl { font-size: 24px; line-height: 43.2px; }
  .jy-faq { padding-bottom: 120px; }
  .jy-faq-item { padding: 40px 30px; }
  .jy-faq-item > summary { padding-right: 20px; padding-left: 50px; font-size: 18px; line-height: 1.8; }
  .jy-faq-item > summary::before { font-size: 35px; }
  .jy-faq-icon { right: -8px; }
  .jy-faq-a { margin-top: 40px; padding: 25px; }
  .jy-info-block { margin-bottom: 80px; }
  .jy-info-table th { width: 300px; }

  .jy-course-name { font-size: 24px; line-height: 43.2px; }
  .jy-course-main { padding: 40px; }
}