/* =====================================================================
   光隆駕訓班 — 自訂覆寫樣式（載入於 style_kl.css 之後）
   style_kl.css 是模板版面（只換色與字型），這裡放光隆專用的圖片、模組與微調。
   品牌色：#f0b429（琥珀黃，呼應教練車黃黑警示條）/ 深色 #b8860b / 淡色 #fdf1cf
   ===================================================================== */

/* ---------- 字型 ---------- */
body { font-family: 'Noto Sans TC', "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif; }
body.english { word-break: normal; overflow-wrap: anywhere; }
body.japanese,
body.japanese .m__common-heading__title { font-family: 'M PLUS 1p', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, 'Noto Sans TC', sans-serif; }
body.english .m__common-heading__title { font-family: "Roboto Condensed", 'Noto Sans TC', sans-serif; font-weight: 700; }

/* ---------- Header 商標 ---------- */
.m__header__contents .logo a { display: inline-flex !important; align-items: center; gap: 10px; }
.m__header__contents .logo img { width: auto; height: 30px; margin-right: 0; }
.m__header__contents .logo .kl-logo-text { font-size: 2.1rem; font-weight: 700; color: #1a1a1a; letter-spacing: 0.08em; line-height: 1; }
.m__header__contents .logo > span.alphabet { margin-left: 12px; font-size: 1.3rem; color: #666; letter-spacing: 0.1em; }
.m__header__contents .logo > span.alphabet.sub { margin-left: 8px; }
@media only screen and (max-width: 767px) {
  .m__header__contents .logo img { height: 24px; }
  .m__header__contents .logo .kl-logo-text { font-size: 1.7rem; }
  .m__header__contents .logo > span.alphabet { display: none; }
}

/* 主選單下拉：兩欄版加寬，避免長字換行 */
.m__header__contents .link > ul > li .sub-menu ul.column.column--kl { width: 460px; height: auto; }
.m__header__contents .link > ul > li .sub-menu ul.column.column--kl li { width: 200px; }

/* ---------- 首頁 HERO（固定背景 + 交叉淡入輪播） ---------- */
.kl-top .m__school__mv { background: #1a1a1a url("../images/kl/hero_aerial_dark.jpg") center center no-repeat; background-size: cover; }
.kl-top .m__school__mv .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; opacity: 0; animation: kl-hero-fade 28s ease-in-out infinite; }
.kl-top .m__school__mv .slide:nth-child(2) { animation-delay: 7s; }
.kl-top .m__school__mv .slide:nth-child(3) { animation-delay: 14s; }
.kl-top .m__school__mv .slide:nth-child(4) { animation-delay: 21s; }
.kl-top .m__school__mv::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55) 100%); }
@keyframes kl-hero-fade {
  0% { opacity: 0; }
  7% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kl-top .m__school__mv .slide { animation: none; }
  .kl-top .m__school__mv .slide:first-child { opacity: 1; }
}
.kl-top .m__top__main .m__top__title { top: -32vh; }
.kl-top .m__top__title img { width: 560px; max-width: 80vw; }
@media only screen and (max-width: 767px) {
  .kl-top .m__top__main .m__top__title { top: -36vh; }
  .kl-top .m__top__title img { width: 82vw; transform: translateX(0); }
}

/* ---------- 各校配色 → 光隆 ---------- */
.m__top__school--kl .school-name { background: #f0b429; }
.m__top__school--kl .m__common__flex-arrow:hover { background: #fdf1cf; color: #1a1a1a; }
.m__top__school--kl .license-list li { background: #f0b429; }
.m__top__school--kl .license-list li::before { background: #fdf1cf; }
.m__top__school--kl .sp-access li { background: #f0b429; }
.m__school__tab-contents--kl .school-tab-item:hover { background: #fdf1cf; }
.m__plan-category__tab-list--kl .plan-tab-item:hover { background: #fdf1cf; }
.m__top__school .license-list li .inner-box p { font-size: 1.3rem; line-height: 1.3; text-align: center; }
.m__top__school .license-list li .inner-box p small { display: block; font-size: 1rem; font-weight: 400; }

/* ---------- 場地設備頁（固定背景圖） ---------- */
.m__facility__mv--kl { background-image: url("../images/kl/car_s_curve.jpg"); }
.m__facility__slide-image--kl1 { background-image: url("../images/kl/car_parking_l.jpg"); background-size: 100% auto; }
.m__facility__slide-image--kl2 { background-image: url("../images/kl/heavy_balance.jpg"); background-size: 100% auto; }
.m__facility__slide-image--kl3 { background-image: url("../images/kl/scooter_course_aerial.jpg"); background-size: 100% auto; }
.m__facility__slide-image--kl4 { background-image: url("../images/kl/car_signals.jpg"); background-size: 100% auto; }
.m__facility__point--img { background-image: url("../images/kl/heavy_braking.jpg"); }
.m__facility__car-list > li .thumb img { width: 100%; }

/* ---------- 光隆特色頁 ---------- */
.m__point__mv1 .img-box { background-image: url("../images/kl/inst_car_1.jpg"); background-size: cover; }
.m__point__mv2 img { max-width: 100%; }
.m__point__mv2 { text-align: center; padding: 40px 0 0; }

/* ---------- 外語頁（固定背景圖） ---------- */
.m__english__mv { background-image: url("../images/kl/car_parking_l.jpg"); background-position: center center; }
.m__english__top-image { background-image: url("../images/kl/heavy_balance.jpg"); }
.m__foreign-language__main-image { background-image: url("../images/kl/car_s_curve.jpg"); }
.m__foreign-language__bottom-image { background-image: url("../images/kl/scooter_course_aerial.jpg"); }
.m__english__access .logo { fill: #b8860b; }
.m__english__access .logo img { height: 30px; width: auto; }
.m__english__access ul li p .notice { display: block; font-size: 1.3rem; color: #666; margin-top: 8px; }

/* ---------- INFORMATION 輪播：HTML 版橫幅 ---------- */
.kl-banner { display: block; position: relative; aspect-ratio: 1920 / 650; background: #1a1a1a center center / cover no-repeat; color: #fff; text-decoration: none; overflow: hidden; }
.kl-banner::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 100%); }
.kl-banner .txt { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); z-index: 1; text-align: left; line-height: 1.3; }
.kl-banner .txt b { display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: 0.05em; }
.kl-banner .txt span { display: block; font-size: 1.3rem; margin-top: 6px; opacity: 0.92; font-weight: 400; }
.kl-banner .tag { position: absolute; right: 0; top: 0; z-index: 1; background: #f0b429; color: #1a1a1a; font-size: 1.2rem; font-weight: 700; padding: 4px 14px; letter-spacing: 0.1em; }
.kl-banner:hover .txt b { text-decoration: underline; }
.m__top__banner-carousel ul li img { width: 100%; display: block; }
@media only screen and (max-width: 767px) {
  .kl-banner .txt b { font-size: 1.8rem; }
  .kl-banner .txt span { font-size: 1.1rem; }
}

/* ---------- 通用內容模組 ---------- */
.kl-lead { max-width: 900px; margin: 0 auto; font-size: 1.6rem; font-weight: 400; line-height: 2; padding: 40px 20px 0; }
.kl-lead.center { text-align: center; }
.kl-lead b { font-weight: 700; }
.kl-lead .red, .kl-red { color: #e0432f; }
.kl-sub-title { text-align: center; font-size: 2.2rem; font-weight: 500; margin: 60px 0 10px; }
.kl-sub-title .alphabet { display: block; font-size: 1.3rem; letter-spacing: 0.2em; color: #b8860b; font-family: "Roboto Condensed", sans-serif; font-weight: 700; }
.kl-section { padding: 60px 0; }
.kl-section--gray { background: #f0f0f0; }
.kl-section .l__contents__inner--width { padding-top: 0; }
.kl-note { max-width: 900px; margin: 20px auto 0; padding: 0 20px; font-size: 1.4rem; color: #555; font-weight: 400; }
.kl-note li { text-indent: -1em; padding-left: 1em; line-height: 1.9; }
.kl-note li::before { content: "＊"; }

/* 表格 */
.kl-table-wrap { overflow-x: auto; max-width: 960px; margin: 30px auto 0; padding: 0 10px; }
.kl-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 1.6rem; background: #fff; }
.kl-table th, .kl-table td { border: 1px solid #1a1a1a; padding: 12px 14px; text-align: center; vertical-align: middle; font-weight: 400; }
.kl-table thead th { background: #1a1a1a; color: #fff; font-weight: 500; }
.kl-table tbody th { background: #fdf1cf; font-weight: 500; }
.kl-table td.left, .kl-table th.left { text-align: left; }
.kl-table .num { font-family: "Roboto Condensed", 'Noto Sans TC', sans-serif; font-size: 1.8rem; letter-spacing: 0.02em; }
.kl-table--compact th, .kl-table--compact td { padding: 8px 10px; }
.kl-table caption { caption-side: bottom; text-align: left; font-size: 1.3rem; color: #666; padding-top: 10px; }
@media only screen and (max-width: 767px) {
  .kl-table { font-size: 1.3rem; }
  .kl-table th, .kl-table td { padding: 8px 6px; }
  .kl-table .num { font-size: 1.5rem; }
}

/* 時段格 */
.kl-time { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 900px; margin: 30px auto 0; padding: 0 10px; }
.kl-time span { display: block; border: 1px solid #1a1a1a; background: #fff; padding: 12px 4px; text-align: center; font-family: "Roboto Condensed", 'Noto Sans TC', sans-serif; font-size: 1.8rem; letter-spacing: 0.02em; }
.kl-time--4 { grid-template-columns: repeat(4, 1fr); }
@media only screen and (max-width: 767px) {
  .kl-time, .kl-time--4 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .kl-time span { font-size: 1.4rem; padding: 10px 2px; }
}

/* 相片格（附說明） */
.kl-gallery { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; padding: 40px 0 20px; margin: 0; }
.kl-gallery li { width: calc(33.333% - 20px); text-align: center; list-style: none; }
.kl-gallery--2 li { width: calc(50% - 15px); }
.kl-gallery--4 li { width: calc(25% - 23px); }
.kl-gallery li a, .kl-gallery li figure { display: block; margin: 0; }
.kl-gallery li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #eee; }
.kl-gallery li .cap { display: block; font-size: 1.6rem; padding: 12px 0 0; font-weight: 500; color: #1a1a1a; line-height: 1.5; }
.kl-gallery li .cap small { display: block; font-size: 1.2rem; color: #666; font-weight: 400; }
.kl-gallery li .no { display: inline-block; background: #f0b429; color: #1a1a1a; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 1.3rem; padding: 2px 10px; margin-bottom: 8px; }
@media only screen and (max-width: 767px) {
  .kl-gallery { gap: 14px; padding-top: 20px; }
  .kl-gallery li, .kl-gallery--2 li, .kl-gallery--4 li { width: calc(50% - 7px); }
  .kl-gallery li .cap { font-size: 1.3rem; padding-top: 8px; }
}

/* 條列學科/術科 兩欄 */
.kl-cols { display: flex; gap: 30px; max-width: 900px; margin: 30px auto 0; padding: 0 10px; }
.kl-cols > div { flex: 1; background: #fff; border: 1px solid #1a1a1a; }
.kl-cols h4 { background: #1a1a1a; color: #fff; text-align: center; font-size: 1.8rem; font-weight: 500; padding: 12px; }
.kl-cols ul { padding: 20px 24px; font-size: 1.6rem; font-weight: 400; }
.kl-cols ul li { padding: 6px 0 6px 1.2em; text-indent: -1.2em; border-bottom: 1px dashed #ddd; }
.kl-cols ul li:last-child { border-bottom: 0; }
.kl-cols ul li::before { content: "●"; color: #f0b429; font-size: 1rem; margin-right: 6px; vertical-align: 2px; }
@media only screen and (max-width: 767px) {
  .kl-cols { flex-direction: column; gap: 16px; }
}

/* 資訊卡（聯絡資訊、班別概要等） */
.kl-info { max-width: 900px; margin: 30px auto 0; background: #fff; border: 1px solid #1a1a1a; padding: 30px 40px; font-size: 1.6rem; }
.kl-info dl { display: flex; flex-wrap: wrap; }
.kl-info dt { width: 150px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #eee; }
.kl-info dd { width: calc(100% - 150px); padding: 10px 0; font-weight: 400; border-bottom: 1px solid #eee; }
.kl-info dt:last-of-type, .kl-info dd:last-of-type { border-bottom: 0; }
.kl-info a { color: #1a1a1a; }
.kl-info .telnumber { text-decoration: none; }
@media only screen and (max-width: 767px) {
  .kl-info { padding: 20px; font-size: 1.4rem; }
  .kl-info dt { width: 100%; padding-bottom: 0; border-bottom: 0; color: #b8860b; }
  .kl-info dd { width: 100%; padding-top: 4px; }
}

/* 地圖 */
.kl-map { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.kl-map iframe { width: 100%; height: 480px; border: 0; display: block; }
.kl-map .hand { display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 50px 0 20px; }
.kl-map .hand img { max-width: 100%; width: 420px; border: 1px solid #ccc; }
.kl-map .hand .txt { max-width: 480px; font-size: 1.6rem; font-weight: 400; line-height: 2; }
.kl-map .hand .txt h4 { font-size: 2rem; font-weight: 500; margin-bottom: 10px; }
@media only screen and (max-width: 767px) { .kl-map iframe { height: 320px; } }

/* 步驟流程（模板 flow 微調） */
.m__plan-category__flow .flow-list .first-step .step-num, .m__plan-category__flow .flow-list .second-step .step-num { background: #1a1a1a; }
.kl-flow-img { max-width: 1080px; margin: 30px auto 0; padding: 0 20px; }
.kl-flow-img img { width: 100%; display: block; }

/* 費用區 */
.kl-fee { max-width: 900px; margin: 30px auto 0; background: #fff; border: 2px solid #f0b429; padding: 30px 40px; font-size: 1.6rem; font-weight: 400; }
.kl-fee h4 { font-size: 2rem; font-weight: 500; margin-bottom: 10px; }
.kl-fee .tel { font-family: "Roboto Condensed", sans-serif; font-size: 3rem; font-weight: 700; letter-spacing: 0.05em; color: #1a1a1a; text-decoration: none; }
.kl-fee ul li { text-indent: -1em; padding-left: 1em; line-height: 1.9; }
.kl-fee ul li::before { content: "・"; }
.kl-fee .bank { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #ccc; }
.kl-fee .bank b { font-weight: 500; }

/* CTA 按鈕列 */
.kl-cta { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 50px 20px 80px; }
.kl-cta .m__common-btn__arrow a { min-width: 260px; }
.kl-cta .m__common-btn__arrow--yellow a { background: #f0b429; color: #1a1a1a; }
.kl-cta .m__common-btn__arrow--yellow a::before, .kl-cta .m__common-btn__arrow--yellow a::after { background: #1a1a1a; }

/* 表單 */
.kl-form .m__form .input_area dl { display: flex; align-items: flex-start; border-bottom: 1px solid #ddd; padding: 20px 0; }
.kl-form .m__form .input_area dl dt { width: 240px; display: flex; align-items: baseline; gap: 10px; font-size: 1.6rem; font-weight: 500; padding-top: 8px; }
.kl-form .m__form .input_area dl dt p { margin: 0; }
.kl-form .m__form .input_area dl dt p span { display: block; font-size: 1.2rem; color: #666; font-weight: 400; }
.kl-form .m__form .input_area dl dd { flex: 1; font-size: 1.6rem; }
.kl-form .m__common-form__input--full input { width: 100%; border: 1px solid #ccc; }
.kl-form .m__common-form__textarea textarea { border: 1px solid #ccc; height: 160px; }
.kl-form .m__common-form__radiobutton label, .kl-form .m__common-form__checkbox label { padding-left: 28px; margin: 4px 20px 4px 0; font-weight: 400; }
.kl-form .m__common-form__radiobutton label input, .kl-form .m__common-form__checkbox label input { display: inline-block; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; accent-color: #b8860b; }
.kl-form .notice { font-size: 1.4rem; color: #555; font-weight: 400; line-height: 1.9; }
.kl-form .personal-information dd .link a { color: #0ac; }
.kl-form .m__form__btn { margin: 0; text-align: center; }
.kl-form .m__form__btn .m__common__flex-arrow input { background-color: #1a1a1a; }
.kl-form .m__form__btn .m__common__flex-arrow input:disabled { opacity: 0.5; cursor: wait; }
.kl-form .g-recaptcha { margin: 20px 0 0; display: flex; justify-content: center; }
.kl-form-msg { text-align: center; font-size: 1.6rem; padding: 20px 0 0; min-height: 1.6em; font-weight: 500; }
.kl-form-msg.ok { color: #2a7d4f; }
.kl-form-msg.err { color: #e0432f; }
.kl-form .m__form__description .notice .telnumber { font-family: "Roboto Condensed", sans-serif; font-size: 2.4rem; font-weight: 700; color: #1a1a1a; text-decoration: none; }
@media only screen and (max-width: 767px) {
  .kl-form .m__form .input_area dl { flex-direction: column; padding: 14px 0; }
  .kl-form .m__form .input_area dl dt { width: 100%; padding-top: 0; margin-bottom: 8px; }
  .kl-form .m__form .input_area dl dd { width: 100%; }
}

/* 報名選課按鈕（模板 entry 區塊微調：文字置中兩行） */
.m__entry__btn__Area .m__common-btn__arrow a small { display: block; font-size: 1.2rem; font-weight: 400; margin-top: 4px; }

/* FAQ 分類標題底色 */
.m__faq__contents .m__common-heading__title { padding-top: 40px; }

/* NEWS 內文 */
.m__news__article-inner .content p { margin-bottom: 1em; font-weight: 400; }
.m__news__article-inner .content ul { margin: 0 0 1em 1.2em; font-weight: 400; }
.m__news__article-inner .content ul li { list-style: disc; }
.m__news__article-inner .content table { margin: 10px 0 20px; }

/* 首頁 學校介紹圖片比例 */
.m__school__tab-contents .school-tab-content .school-introduce .flex-box .img-box img { width: 600px; max-width: 100%; height: 400px; object-fit: cover; }
.m__school__tab-contents .school-tab-content .school-introduce.sp ul li img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.m__school__tab-contents .school-tab-content .sp-school-introduce .box .img-box img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 均榮驗車廠 區塊 */
.kl-glcar { display: flex; gap: 40px; align-items: center; max-width: 1000px; margin: 0 auto; padding: 60px 20px; }
.kl-glcar img { width: 420px; max-width: 45%; }
.kl-glcar .txt { flex: 1; font-size: 1.6rem; font-weight: 400; line-height: 2; }
.kl-glcar .txt h3 { font-size: 2.6rem; font-weight: 500; margin-bottom: 10px; }
.kl-glcar .txt .m__common-btn__arrow { margin-top: 20px; }
@media only screen and (max-width: 767px) { .kl-glcar { flex-direction: column; } .kl-glcar img { max-width: 100%; width: 100%; } }

/* ---------- Footer 聯絡資訊 ---------- */
.kl-footer-info { color: #fff; text-align: center; padding: 40px 20px 20px; font-size: 1.4rem; font-weight: 400; line-height: 2; border-top: 1px solid #555; }
.kl-footer-info .name { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.1em; }
.kl-footer-info .alphabet { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.15em; font-size: 1.2rem; color: #ccc; display: block; }
.kl-footer-info a { color: #fff; text-decoration: none; }
.kl-footer-info a:hover { color: #f0b429; }
.kl-footer-info .row span { display: inline-block; margin: 0 10px; }
.m__footer__icon-link ul { width: auto; gap: 40px; justify-content: center; }
.m__footer__icon-link ul li img { width: 34px; height: 34px; }
.m__footer__icon-link ul li:last-child img { width: 34px; }
.m__footer__icon-link ul li a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 1.2rem; text-decoration: none; }
.m__footer__menu--alert .text { color: #ccc; }
.m__footer__copyright p small { display: block; font-size: 1.1rem; color: #999; }

/* 語言切換小旗標（純文字） */
.kl-lang a { text-decoration: none; }

/* ---------- 小工具 ---------- */
.kl-center { text-align: center; }
.kl-mt0 { margin-top: 0 !important; }
.kl-pb60 { padding-bottom: 60px; }
.kl-hidden { display: none !important; }

/* ---------- 穩定性微調（關閉兩處視差位移，避免圖片被推出框外／頁尾選單被推到頁尾之外） ---------- */
.m__point__mv1 .img-box { transform: none !important; }
.m__footer .m__footer__menu--pc { transform: none !important; }

/* 首頁介紹區的小字說明（模板 .bus-navi 原為大字標語） */
.m__school__tab-contents .school-tab-content .school-introduce .bus-navi p,
.m__school__tab-contents .school-tab-content .sp-school-introduce .bus-navi p { font-size: 1.4rem; line-height: 1.9; font-weight: 400; }

/* 英日文頁尾：地址用一般字色，僅禁止轉載聲明用紅色 */
.m__footer--english .m__overseas_alert .text.kl-addr { color: #ccc; margin-bottom: 6px; }

/* 英文頁按鈕列：第二顆按鈕改為與第一顆相同的箭頭位置（模板原為短字 JAF 專用） */
.m__english__btn-area li:nth-child(2) .m__common__flex-arrow { width: auto; min-width: 300px; }
.m__english__btn-area li:nth-child(2) .m__common__flex-arrow::before { right: 20px; }
.m__english__btn-area li:nth-child(2) .m__common__flex-arrow::after { right: 25px; }

/* 首頁「交通資訊」區的報名時間小字（模板 .bus-navi p 為 2.6rem 標語字級） */
.m__school__tab-contents .school-tab-content .school-introduce .flex-box .bus-navi p { font-size: 1.4rem !important; line-height: 1.9; font-weight: 400; margin-bottom: 0; }

/* 路線圖頁：手機版單欄、資訊卡靠左對齊 */
.kl-gallery .kl-info { text-align: left; }
@media only screen and (max-width: 767px) {
  .kl-gallery.kl-route li { width: 100%; }
}

/* 手機版漢堡選單：模板原為 10px×1px 的細線，稍微放大以利辨識 */
@media only screen and (max-width: 767px) {
  .m__header__contents .link .school-link .integrated .menu { width: 20px; height: 13px; margin-top: 4px; }
  .m__header__contents .link .school-link .integrated .menu span { width: 20px; height: 2px; }
}

/* 載入畫面：KL 標誌為方形，百分比數字往下留一點距離 */
.m__common__loading--logo img { width: 72px; height: 60px; }
.m__common__loading .m__common__loading--number { padding-top: 14px; }