/* deco-sem: lecture page decoration (CSS only; every word as before). Visual language of about-introduction 案3 改B:
   photo head with the title over its foot, facts as a hairline list, numbered topics, light blue / white bands,
   4:5 inset portrait, the booking band as the clear destination. Only white, #e7f1f7, #2f5d34 (+ hairline #cfdde6). */

/* ---------- 1. head: the title sits over the foot of the hero photo (only where page-head is followed by the hero) */
body.deco-sem main:has(> .page-head + .sj-reg-hero){position:relative}
body.deco-sem main > .page-head:has(+ .sj-reg-hero){position:absolute!important;top:0;left:0;right:0;z-index:2;height:var(--sem-hero-h);
  padding:0 22px 22px!important;margin:0!important;background:linear-gradient(180deg,rgba(12,34,17,0) 52%,rgba(12,34,17,.5) 74%,rgba(12,34,17,.86) 100%)!important;
  display:flex;align-items:flex-end;pointer-events:none}
body.deco-sem main > .page-head:has(+ .sj-reg-hero) h1{color:#fff!important;text-align:left!important;margin:0!important;font-size:24px!important;
  letter-spacing:.1em!important;line-height:1.5!important;max-width:720px;opacity:1!important;transform:none!important;text-wrap:balance}
body.deco-sem main > .page-head:has(+ .sj-reg-hero) h1:before{content:"";display:block;width:32px;height:1px;background:rgba(255,255,255,.8);margin:0 0 14px}
body.deco-sem{--sem-hero-h:290px}
body.deco-sem .sj-reg-hero{background:#0c2211!important;padding:0!important;margin:0!important}
body.deco-sem .sj-reg-hero-inner{max-width:none!important;padding:0!important;margin:0!important}
body.deco-sem .sj-reg-hero-img{height:var(--sem-hero-h)!important;aspect-ratio:auto!important;width:100%!important;object-fit:cover!important;
  object-position:66% 30%!important;filter:none!important}

/* ---------- 2. key facts: compact label / value rows on white, readable on the first screen */
body.deco-sem .class-overview{background:#fff!important;padding:18px 0 40px!important}
body.deco-sem .class-overview .service-body-inner{padding:0 22px!important;max-width:1000px}
body.deco-sem .class-overview .class-facts{max-width:640px!important;margin:0 auto!important;padding:0!important;background:transparent!important;
  border:0!important;border-bottom:1px solid #cfdde6!important}
body.deco-sem .class-facts li{display:grid!important;grid-template-columns:6.8em 1fr;gap:0 14px!important;align-items:baseline!important;
  padding:10px 0!important;border-bottom:0!important;border-top:1px solid #cfdde6!important;line-height:1.6!important}
body.deco-sem .class-overview .class-facts li:first-child{border-top:0!important}
body.deco-sem .class-facts .fact-label{min-width:0!important;font-size:11.5px!important;letter-spacing:.12em!important;color:#2f5d34!important;
  opacity:.75;padding:0!important;background:none!important;text-align:left!important;white-space:normal!important;word-break:keep-all;overflow-wrap:normal!important}
body.deco-sem .class-facts li:not(:has(.fact-label))>.fact-value{grid-column:2;text-align:left!important}
body.deco-sem .class-facts .fact-value{font-size:15px!important;color:#1f3d23!important;letter-spacing:.03em!important;min-width:0;overflow-wrap:anywhere}
body.deco-sem .class-overview .hpp-when-li .fact-value{font-size:17px!important}
body.deco-sem .hpp-when-row{font-size:14px}
body.deco-sem .class-overview .class-facts li{opacity:1!important;transform:none!important}
body.deco-sem .class-overview .class-facts{opacity:1!important;transform:none!important}

/* ---------- 3. section titles: centred, a short green rule below (as on about-introduction) */
body.deco-sem .service-body h2,body.deco-sem .service-booking h2{font-size:22px!important;letter-spacing:.1em!important;color:#2f5d34!important;
  text-align:center!important;margin:0 0 32px!important}
body.deco-sem .service-body h2:before{display:none!important}
body.deco-sem .service-body h2:after,body.deco-sem .service-booking h2:after{content:"";display:block;width:32px;height:2px;background:#2f5d34;margin:18px auto 0}

/* ---------- 4. instructor: light blue band, 4:5 inset portrait beside the name */
body.deco-sem .service-body--beige{background:#e7f1f7!important;padding:64px 0 56px!important}
body.deco-sem .service-body--white:not(.class-overview){background:#fff!important;padding:64px 0 56px!important}
body.deco-sem .service-body-inner{padding-left:22px!important;padding-right:22px!important}
body.deco-sem .class-person{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;max-width:640px;margin:0 auto}
body.deco-sem .cls-head{display:grid!important;grid-template-columns:128px 1fr;gap:0 20px!important;align-items:end!important}
body.deco-sem .cls-face{width:128px!important;height:160px!important;border-radius:4px!important;object-fit:cover!important;object-position:50% 30%!important}
body.deco-sem .cls-head .class-person-name{font-size:18px!important;line-height:1.6!important;color:#1f3d23!important;padding-bottom:4px}
body.deco-sem .cls-bio{border-top:1px solid #cfdde6!important;margin-top:22px!important;padding-top:18px!important}
body.deco-sem .cls-bio-h{color:#2f5d34!important;opacity:.75;font-size:11.5px!important}
body.deco-sem .class-person-bio p{font-size:15px!important;line-height:1.95!important}
body.deco-sem .class-person-link{text-align:center;margin-top:26px!important}
body.deco-sem .class-profile-btn{background:transparent!important;color:#2f5d34!important;border:0!important;border-bottom:1px solid #2f5d34!important;
  border-radius:0!important;padding:0 0 4px!important}

/* ---------- 5. long fixed topics: numbered hairline list, calm and compact */
body.deco-sem .cls-about .service-body-inner{max-width:720px;margin:0 auto;counter-reset:semt}
body.deco-sem .cls-topic{border-top:1px solid #cfdde6!important;counter-increment:semt}
body.deco-sem .cls-topic:last-child{border-bottom:1px solid #cfdde6!important}
body.deco-sem .cls-topic>summary{display:grid!important;grid-template-columns:44px 1fr 18px;align-items:center!important;gap:0 10px!important;
  padding:20px 0!important;font-size:16px!important;line-height:1.6!important;color:#1f3d23!important}
body.deco-sem .cls-topic>summary:before{content:counter(semt,decimal-leading-zero);font-family:"Noto Serif JP",serif;font-size:22px;color:#2f5d34;
  letter-spacing:.04em;line-height:1}
body.deco-sem .cls-topic>summary:after{content:""!important;width:14px;height:14px;justify-self:end;
  background:linear-gradient(#2f5d34,#2f5d34) center/14px 1px no-repeat,linear-gradient(#2f5d34,#2f5d34) center/1px 14px no-repeat}
body.deco-sem .cls-topic[open]>summary:after{background:linear-gradient(#2f5d34,#2f5d34) center/14px 1px no-repeat}
body.deco-sem .cls-topic-in{padding:0 0 28px 54px!important}
body.deco-sem .cls-topic-in .class-prose p{font-size:15px!important;line-height:1.95!important}
body.deco-sem .cls-topic-in .class-prose ul{margin:0 0 12px!important;padding-left:1.1em!important}
body.deco-sem .cls-topic-in .class-prose li{font-size:14px!important;line-height:1.85!important;margin:0 0 10px!important;color:#1f3d23}
body.deco-sem .cls-topic-in .class-prose li::marker{color:#2f5d34}
body.deco-sem .cls-topic-in table{margin:0!important}

/* ---------- 6. booking: the destination — light blue band, the facts and the form on white */
body.deco-sem .service-booking{background:#e7f1f7!important;padding:72px 0 80px!important;border-top:6px solid #2f5d34;scroll-margin-top:56px}
body.deco-sem .service-booking-inner{max-width:720px!important;padding:0 16px!important}
body.deco-sem .service-booking h2{font-size:24px!important}
body.deco-sem .service-booking .class-facts{background:#fff!important;border:0!important;border-radius:6px;padding:4px 20px!important;margin:0 0 22px!important;max-width:none!important}
body.deco-sem .service-booking .class-facts li:first-child{border-top:0!important}
body.deco-sem .service-booking .class-facts li{grid-template-columns:7.4em 1fr}
body.deco-sem .booking-intro{font-size:15px!important;line-height:1.9!important;text-align:left!important;padding:0 4px;color:#1f3d23!important}
body.deco-sem .kr-booking-embed{background:#fff;border-radius:6px;padding:26px 18px 30px;margin-top:24px!important}
body.deco-sem .kr-booking-embed .forminator-ui input:not([type=radio]):not([type=checkbox]),
body.deco-sem .kr-booking-embed .forminator-ui select,body.deco-sem .kr-booking-embed .forminator-ui textarea{border-color:#cfdde6!important}
body.deco-sem .kr-booking-embed .forminator-button-submit{width:100%!important;background:#2f5d34!important;color:#fff!important;border-radius:4px!important;
  padding:16px!important;font-size:16px!important;letter-spacing:.2em!important}

/* ---------- 7. the floating bar: green, the button white with a downward chevron (decorative, no text) */
body.deco-sem .apb{background:#2f5d34!important;border-top:0!important}
body.deco-sem .apb-in,body.deco-sem .apb-txt,body.deco-sem .apb-txt b{color:#fff!important}
body.deco-sem .apb-txt b{font-weight:var(--w-base)!important}
body.deco-sem .apb-btn{background:#fff!important;color:#2f5d34!important;border-radius:4px!important;display:inline-flex!important;align-items:center;gap:10px}
body.deco-sem .apb-btn:after{content:"";width:7px;height:7px;border-right:1.5px solid #2f5d34;border-bottom:1.5px solid #2f5d34;transform:translateY(-2px) rotate(45deg);flex:none}

@media(max-width:899px){body.deco-sem .apb{padding-top:8px!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
body.deco-sem .apb-in{gap:10px!important}
body.deco-sem .apb-txt{font-size:11.5px!important;line-height:1.4!important}
body.deco-sem .apb-txt b{font-size:12.5px!important}
body.deco-sem .apb-btn{padding:12px 16px!important;font-size:14px!important;white-space:nowrap}}
@media(max-width:360px){body.deco-sem .apb-btn{padding:12px 14px!important;font-size:14px!important}}

/* ---------- PC */
@media(min-width:900px){
body.deco-sem{--sem-hero-h:min(58vh,560px)}
body.deco-sem main > .page-head:has(+ .sj-reg-hero){padding:0 8vw 56px!important;
  background:linear-gradient(180deg,rgba(12,34,17,0) 50%,rgba(12,34,17,.55) 100%),linear-gradient(90deg,rgba(12,34,17,.5) 0%,rgba(12,34,17,0) 45%)!important}
body.deco-sem main > .page-head:has(+ .sj-reg-hero) h1{font-size:36px!important}
body.deco-sem .sj-reg-hero-img{object-position:60% 32%!important}
body.deco-sem .class-overview{padding:56px 0 72px!important}
body.deco-sem .class-overview .class-facts{max-width:960px!important;display:grid!important;grid-template-columns:1fr 1fr;column-gap:56px;border-bottom:0!important}
body.deco-sem .class-overview .class-facts li{border-top:0!important;border-bottom:1px solid #cfdde6!important;padding:16px 0!important}
body.deco-sem .class-overview .class-facts li:first-child{border-top:0!important}
body.deco-sem .class-facts .fact-value{font-size:16px!important}
body.deco-sem .service-body--beige,body.deco-sem .service-body--white:not(.class-overview){padding:110px 0 96px!important}
body.deco-sem .service-body h2,body.deco-sem .service-booking h2{font-size:26px!important;margin-bottom:48px!important}
body.deco-sem .class-person{max-width:880px}
body.deco-sem .class-person{display:grid!important;grid-template-columns:240px 1fr;grid-template-rows:auto auto 1fr;gap:0 56px;align-items:start}
body.deco-sem .cls-head{display:contents!important}
body.deco-sem .cls-face{grid-column:1;grid-row:1/4;width:240px!important;height:300px!important}
body.deco-sem .cls-head .class-person-name{grid-column:2;grid-row:1;font-size:24px!important;padding-top:6px}
body.deco-sem .cls-bio{grid-column:2;grid-row:2}
body.deco-sem .class-person-link{grid-column:2;grid-row:3;text-align:left}
body.deco-sem .service-booking{padding:110px 0 120px!important}
body.deco-sem .kr-booking-embed{padding:40px 44px 44px}
body.deco-sem .service-booking .class-facts{padding:6px 32px!important}
}