/* r87 — Common Test page readability + restrained interaction polish. Loaded after kyotsu-r47.css. */

/* Page rhythm and anchors. */
.kyotsu-page{font-feature-settings:"palt" 1;text-rendering:optimizeLegibility}
#subjects,#fees,#planning{scroll-margin-top:124px}
.kyotsu-page :focus-visible{outline:2px solid #4c879e;outline-offset:3px}

/* 1px reading progress: useful, almost invisible. */
.kyotsu-read-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:120;pointer-events:none;background:transparent}
.kyotsu-read-progress span{display:block;width:100%;height:100%;background:#427f96;transform:scaleX(0);transform-origin:left center;will-change:transform}

/* Header and hero: clearer clickable states without changing the composition. */
.kyotsu-page .course-links a{transition:color .16s ease,background-color .16s ease,opacity .16s ease}
.kyotsu-page .course-links a:not(.contact):hover{color:#102f43}
.kyotsu-page .course-links .contact{transition:background-color .16s ease,transform .16s ease}
@media(hover:hover){.kyotsu-page .course-links .contact:hover{background:#1a4a62;transform:translateY(-1px)}}
.kyotsu-page .course-hero h1{text-wrap:balance}
.kyotsu-page .course-hero p{max-width:680px;color:#58717d;line-height:1.84}
.kyotsu-page .course-hero-meta{max-width:610px;margin-top:25px}
.kyotsu-page .course-hero-meta span{min-height:38px;display:flex;align-items:center;color:#365e70}
.kyotsu-page .course-actions a{transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease}
@media(hover:hover){
  .kyotsu-page .course-actions .primary:hover{background:#1a4a62;transform:translateY(-1px)}
  .kyotsu-page .course-actions .secondary:hover{color:#173f55;border-color:#567f90;transform:translateX(2px)}
}

/* Compact sticky in-page navigation. */
.kyotsu-jumpnav{position:sticky;top:72px;z-index:45;background:rgba(255,255,255,.965);border-bottom:1px solid #d9e3e7;backdrop-filter:blur(12px)}
.kyotsu-jumpnav .course-shell{display:flex;align-items:center;gap:0;min-height:44px;overflow-x:auto;scrollbar-width:none}
.kyotsu-jumpnav .course-shell::-webkit-scrollbar{display:none}
.kyotsu-jumpnav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 22px;border-left:1px solid #e5ecef;color:#6a7f89;font-size:11px;font-weight:750;text-decoration:none;white-space:nowrap;transition:color .16s ease,background-color .16s ease}
.kyotsu-jumpnav a:first-child{padding-left:0;border-left:0}
.kyotsu-jumpnav a::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:2px;background:#3f7e96;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.kyotsu-jumpnav a:first-child::after{left:0}
.kyotsu-jumpnav a:hover,.kyotsu-jumpnav a.is-current{color:#173f55}
.kyotsu-jumpnav a.is-current::after{transform:scaleX(1)}

/* Section headings: more breathing room and a stable reading hierarchy. */
.kyotsu-page .course-section{padding-top:64px;padding-bottom:64px}
.kyotsu-page .course-head{margin-bottom:25px}
.kyotsu-page .course-head>span{color:#708791;font-size:10.8px;letter-spacing:.075em}
.kyotsu-page .course-head h2{font-size:30px;line-height:1.24}
.kyotsu-page .course-head p{max-width:760px;color:#647b86;line-height:1.78}

/* Subject ledger is the primary information surface. */
.kyotsu-official-ledger{position:relative;border-top:2px solid #173f55;border-bottom:1px solid #cfdbe0}
.kyotsu-official-row{position:relative;padding:21px 12px 21px 8px;transition:background-color .16s ease}
.kyotsu-official-row::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;background:#4d8499;transform:scaleY(0);transform-origin:center;transition:transform .18s ease}
@media(hover:hover){
  .kyotsu-official-row:hover{background:#f8fafb}
  .kyotsu-official-row:hover::before{transform:scaleY(1)}
}
.kyotsu-official-head small{color:#83969f;font-size:9.5px}
.kyotsu-official-head h3{font-size:17.5px;letter-spacing:-.01em}
.kyotsu-official-head span{color:#768b94;font-size:10px}
.kyotsu-subject-items{gap:0 32px}
.kyotsu-subject-items li{padding:9px 5px 9px 0;transition:background-color .15s ease,padding-left .15s ease}
.kyotsu-subject-items b{color:#294f60;font-size:13px;line-height:1.52}
.kyotsu-subject-items span{color:#6a808a;font-size:11px;line-height:1.6}
@media(hover:hover){.kyotsu-subject-items li:hover{padding-left:5px;background:#fbfcfc}}
.kyotsu-source-link{gap:5px;margin-top:18px;color:#34738d;transition:color .16s ease,border-color .16s ease,transform .16s ease}
@media(hover:hover){.kyotsu-source-link:hover{transform:translateX(2px)}}

/* Course summary: secondary to the ledger, so quieter than the main subject table. */
.kyotsu-regular-section{background:#fbfcfc}
.kyotsu-regular-grid{border-top:1px solid #cfdbe0;border-bottom:1px solid #cfdbe0;background:#fff}
.kyotsu-regular-grid>div{position:relative;padding:18px 18px 19px;transition:background-color .16s ease}
.kyotsu-regular-grid small{color:#8a9ba2;font-size:8.8px;letter-spacing:.065em}
.kyotsu-regular-grid b{color:#294f60;font-size:13px}
.kyotsu-regular-grid span{color:#687e88;font-size:10.8px;line-height:1.62}
@media(hover:hover){.kyotsu-regular-grid>div:hover{background:#f6f9fa}}
.kyotsu-basic-note{position:relative;margin-top:17px;padding:13px 15px 13px 18px;border:0;border-left:2px solid #6d97a8;background:#f4f8f9;color:#607985;font-size:11.2px}
.kyotsu-basic-note b{color:#244e60}

/* Price block: distinguish course price, one-time material fee and the 4+ waiver at a glance. */
#fees .course-price{box-shadow:0 10px 30px rgba(19,55,70,.045)}
#fees .course-price-main{display:flex;flex-direction:column;justify-content:center;padding:31px 30px}
#fees .course-price-main small{color:#b3c7cf;letter-spacing:.025em}
#fees .course-price-main strong{margin-top:9px;font-size:42px;letter-spacing:-.045em}
#fees .course-price-main p{max-width:245px;color:#d6e3e8;line-height:1.7}
#fees .course-table th,#fees .course-table td{padding-top:16px;padding-bottom:16px}
#fees .course-table th{color:#365e70;background:#f5f8f9}
#fees .course-table td{color:#5d7580;line-height:1.65}
#fees .course-table tr{transition:background-color .15s ease}
@media(hover:hover){#fees .course-table tr:hover td{background:#fbfcfc}}
.kyotsu-fee-examples{margin-top:24px;border-color:#d2dee3;background:#fff}
.kyotsu-fee-examples>div{position:relative;padding:18px 19px 19px;transition:background-color .16s ease}
.kyotsu-fee-examples small{color:#708791;font-size:9.8px}
.kyotsu-fee-examples strong{margin-top:5px;color:#173f55;font-size:21px;letter-spacing:-.025em}
.kyotsu-fee-examples span{color:#72868f;font-size:10px}
.kyotsu-fee-examples>div:nth-child(4){background:#eef5f7}
.kyotsu-fee-examples>div:nth-child(4) strong{color:#24657e}
@media(hover:hover){.kyotsu-fee-examples>div:hover{background:#f7fafb}.kyotsu-fee-examples>div:nth-child(4):hover{background:#e8f1f4}}

/* Preparation cards: readable grouping with restrained feedback. */
.kyotsu-support-grid .course-card{position:relative;min-height:148px;padding-top:24px;transition:background-color .16s ease}
.kyotsu-support-grid .course-card::before{content:"";position:absolute;left:22px;top:0;width:28px;height:2px;background:#8eabb6;transition:width .18s ease,background-color .18s ease}
.kyotsu-support-grid .course-card b{color:#294f60;font-size:14px}
.kyotsu-support-grid .course-card p{color:#657b85;font-size:12.3px;line-height:1.72}
@media(hover:hover){
  .kyotsu-support-grid .course-card:hover{background:#f8fafb}
  .kyotsu-support-grid .course-card:hover::before{width:42px;background:#427f96}
}

/* Bottom navigation + CTA interaction consistency. */
.kyotsu-page .course-switch-grid a{transition:background-color .16s ease,color .16s ease,padding-left .16s ease}
@media(hover:hover){.kyotsu-page .course-switch-grid a:not(.active):hover{background:#fff;color:#173f55;padding-left:15px}}
.kyotsu-page .course-cta a{transition:transform .16s ease,background-color .16s ease}
@media(hover:hover){.kyotsu-page .course-cta a:hover{transform:translateY(-1px);background:#f1f6f8}}

@media(max-width:820px){
  #subjects,#fees,#planning{scroll-margin-top:108px}
  .kyotsu-jumpnav{top:62px}
  .kyotsu-jumpnav a{padding:0 18px}
  .kyotsu-jumpnav a::after{left:18px;right:18px}
  .kyotsu-jumpnav a:first-child{padding-left:0}
  .kyotsu-page .course-section{padding-top:54px;padding-bottom:54px}
  .kyotsu-official-row{padding-left:6px;padding-right:6px}
  .kyotsu-subject-items{gap:0}
  .kyotsu-fee-examples>div{min-height:94px}
}
@media(max-width:620px){
  .kyotsu-jumpnav a{min-height:42px;padding:0 16px;font-size:10.8px}
  .kyotsu-jumpnav a::after{left:16px;right:16px}
  .kyotsu-jumpnav a:first-child{padding-left:0}
  .kyotsu-page .course-head h2{font-size:27px}
  .kyotsu-page .course-head p{font-size:13px;line-height:1.74}
  .kyotsu-official-row{padding-top:18px;padding-bottom:18px}
  .kyotsu-official-row::before{top:13px;bottom:13px}
  .kyotsu-subject-items b{font-size:12.6px}
  .kyotsu-subject-items span{font-size:10.6px}
  .kyotsu-regular-grid>div{padding:16px 17px}
  #fees .course-price-main strong{font-size:38px}
  #fees .course-table th,#fees .course-table td{padding:14px 13px;font-size:12px}
  #fees .course-table th{width:110px}
  .kyotsu-fee-examples>div{padding:15px 14px;min-height:88px}
  .kyotsu-fee-examples strong{font-size:18px}
  .kyotsu-support-grid .course-card{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .kyotsu-page *,.kyotsu-page *::before,.kyotsu-page *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}