@charset "UTF-8";

/* トップページ専用 */
body.home .jca-front {
    box-sizing: border-box;
    width: 100%;
    max-width: 72.25rem;
    margin: 0 auto;
    background: #fff;
    color: var(--jca-ink);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* キービジュアルとコンテンツの最大幅を揃える */
@media (min-width: 34em) {
    body.home .jca-front { max-width: 34rem; }
}
@media (min-width: 48em) {
    body.home .jca-front { max-width: 45rem; }
}
@media (min-width: 62em) {
    body.home .jca-front { max-width: 60rem; }
}
@media (min-width: 75em) {
    body.home .jca-front { max-width: 72.25rem; }
}

body.home .jca-front *,
body.home .jca-front *::before,
body.home .jca-front *::after { box-sizing: border-box; }
body.home .jca-front h2,
body.home .jca-front h3,
body.home .jca-front p { margin: 0; }
body.home .jca-front a { text-decoration: none; }
body.home .jca-front a:focus-visible { outline: 3px solid #194f9a; outline-offset: 4px; }
body.home .jca-front__inner { width: 100%; margin: 0 auto; padding: 0 .9375rem 0; }

/* キービジュアル */
body.home .jca-hero { position: relative; isolation: isolate; min-height: 330px; background: #fff7f7; }
body.home .jca-hero__bleed { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient(to bottom, transparent 70%, #fff), linear-gradient(90deg, #fff4f4 50%, #fff3f3 50%); pointer-events: none; }
/* 写真の高さをキービジュアルに合わせる */
body.home .jca-hero__image { position: absolute; top: 0; right: 0; width: 78%; height: 100% !important; object-fit: cover; object-position: center 43%; }
body.home .jca-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff4f4 0%, rgba(255,255,255,.97) 24%, rgba(255,255,255,0) 48%, rgba(255,255,255,0) 73%, #fff3f3 96%); pointer-events: none; }
body.home .jca-hero__content { position: relative; z-index: 1; padding: 50px 7% 8px; }
body.home .jca-front .jca-hero__eyebrow { margin-left: -6%; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.4; transform: rotate(-7deg); transform-origin: left center; }
body.home .jca-hero h2 { color: #131313; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(37px, 4.3vw, 64px); font-weight: 700; letter-spacing: .025em; line-height: 1.1; }
body.home .jca-hero h2 span { color: var(--jca-red); font-size: 1.14em; }
body.home .jca-front .jca-hero__description { margin-top: 12px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 18px; font-weight: 600; letter-spacing: .04em; line-height: 1.55; }
body.home .jca-hero__message { position: absolute; z-index: 1; bottom: 24%; right: 3%; color: #161616; font-family: "JCA Hero Yuji Syuku", "Yu Kyokasho", cursive; font-size: clamp(18px, 2vw, 24px); font-weight: 400; font-style: normal; letter-spacing: .08em; line-height: 1.55; text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #fff, 0 0 12px rgba(255,255,255,.95); transform: rotate(-17deg) skewX(-4deg); }
body.home .jca-hero__message span { position: relative; display: block; margin-left: .95em; }
body.home .jca-hero__message span::after { content: ""; position: absolute; right: -7%; bottom: -.5em; width: 123%; height: .85em; background: url("../images/front-page/handdrawn-underline.svg") center / 100% 100% no-repeat; pointer-events: none; }

/* 写真の端を全幅の背景になじませる */
@media (min-width: 34em) {
    body.home .jca-hero { background: transparent; }
    body.home .jca-hero__bleed { background: linear-gradient(90deg, #fff4f4, #fff 18%, #fff 65%, #fff3f3); }
    body.home .jca-hero__image { -webkit-mask-image: linear-gradient(to right, transparent, #000 28%, #000 78%, transparent); mask-image: linear-gradient(to right, transparent, #000 28%, #000 78%, transparent); }
    body.home .jca-hero::before { content: ""; position: absolute; z-index: 1; bottom: 0; left: 50%; width: 100vw; height: 90px; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.65) 65%, #fff); pointer-events: none; }
    body.home .jca-hero::after { display: none; }
}

/* 実践ラボ */
body.home .jca-lab { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.15fr .85fr 1.25fr; grid-template-areas: "intro action note" "intro action script"; gap: 12px 24px; align-items: center; min-height: 224px; padding: 22px 28px; border: 1px solid #f3e4e4; border-radius: 13px; overflow: hidden; background: #fff3f2 url("../images/front-page/lab.webp") right 61% / cover no-repeat; }
body.home .jca-lab::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(255,250,250,.96), rgba(255,247,247,.88) 48%, rgba(255,247,247,0) 76%); }
body.home .jca-lab__intro { grid-area: intro; }
body.home .jca-lab__eyebrow { color: var(--jca-red); font-size: 16px; font-weight: 700; white-space: nowrap; }
body.home .jca-lab h2 { margin: 3px 0 6px; color: var(--jca-red); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(36px, 4.25vw, 62px); font-weight: 700; line-height: 1.3; white-space: nowrap; }
body.home .jca-lab__description { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
body.home .jca-lab__action { grid-area: action; display: grid; gap: 18px; align-self: end; }
body.home .jca-lab__eligibility { display: flex; gap: 16px; align-items: center; padding: 12px 17px; border-radius: 12px; background: rgba(255,232,234,.85); font-size: 17px; font-weight: 700; line-height: 1.45; }
body.home .jca-lab__eligibility .fa { color: var(--jca-red); font-size: 36px; }
body.home .jca-lab__eligibility small { display: block; margin-top: 5px; font-size: 11px; color: var(--jca-muted); }
body.home .jca-button { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 58px; padding: 10px 20px; border-radius: 40px; color: #fff; background: linear-gradient(#ff0a25, #d90018); box-shadow: 0 2px 0 rgba(163,0,18,.12); font-size: 23px; font-weight: 700; white-space: nowrap; transition: filter .2s ease, box-shadow .2s ease; }
body.home .jca-button:hover,
body.home .jca-button:focus-visible { color: #fff; filter: brightness(.9); box-shadow: 0 4px 12px #b0001826; }
body.home .jca-button .jca-chevron { width: 11px; height: 11px; }
body.home .jca-lab__note { grid-area: note; align-self: start; justify-self: end; margin-top: 9px; text-align: right; font-size: 18px; line-height: 2.1; letter-spacing: .04em; }
body.home .jca-lab__note span { padding: 7px 11px; border-radius: 4px; color: #fff; background: rgba(20,18,18,.83); box-decoration-break: clone; }
body.home .jca-lab__script { grid-area: script; align-self: end; justify-self: start; margin-left: 12px; font-size: 30px; line-height: 1.25; text-align: center; transform: rotate(-13deg); }

/* コース一覧 */
body.home .jca-courses { margin-top: 20px; scroll-margin-top: 110px; }
body.home .jca-section-heading { display: flex; gap: 20px; align-items: center; margin-bottom: 12px; }
body.home .jca-section-heading h2 { flex-shrink: 0; padding-left: 14px; border-left: 7px solid var(--jca-red); font-size: 26px; font-weight: 700; line-height: 1.15; }
body.home .jca-section-heading p { font-size: 14px; color: var(--jca-muted); }
body.home .jca-section-heading a { display: flex; gap: 10px; align-items: center; margin-left: auto; color: #d90018; font-size: 15px; font-weight: 700; white-space: nowrap; }
body.home .jca-section-heading a:hover { text-decoration: underline; }
body.home .jca-all-label-short { display: none; }
body.home .jca-course-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
body.home .jca-course { display: block; min-width: 0; overflow: hidden; border: 1px solid #e0e4e9; border-radius: 6px; background: #fff; color: var(--jca-ink); box-shadow: 0 1px 2px #25334508; transition: box-shadow .2s, border-color .2s; }
body.home a.jca-course:hover { border-color: var(--jca-red); box-shadow: 0 4px 14px #25334518; color: var(--jca-ink); }
body.home .jca-course__visual { position: relative; aspect-ratio: 2.15; overflow: hidden; background: #f7eeee; }
body.home .jca-course__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.home .jca-course__body { position: relative; padding: 10px 22px 10px 11px; }
body.home .jca-course h3 { margin-bottom: 4px; color: #df001b; font-size: 16px; font-weight: 700; line-height: 1.45; letter-spacing: -.035em; }
body.home .jca-course p { color: var(--jca-muted); font-size: 13px; line-height: 1.75; }
body.home .jca-course__body p span { display: block; white-space: nowrap; letter-spacing: -.04em; }
body.home .jca-course__body > .jca-chevron { position: absolute; right: 12px; top: 50%; color: var(--jca-red); }
body.home .jca-course--soon .jca-course__visual img { opacity: .5; }
body.home .jca-course--soon h3 { color: var(--jca-ink); }
body.home .jca-course__badge { position: absolute; left: 0; bottom: 0; padding: 3px 18px; color: #fff; background: #687380; font-size: 13px; font-weight: 700; }

/* 学習ガイドと修了生メニュー */
body.home .jca-start { margin-top: 20px; padding: 9px 17px 12px; border-radius: 12px; background: #fcf5f5; }
body.home .jca-start h2 { margin-bottom: 8px; font-size: 22px; font-weight: 700; line-height: 1.2; }
body.home .jca-start h2 span { color: var(--jca-red); }
body.home .jca-start h2 b { font-size: 1.45em; }
body.home .jca-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
body.home .jca-steps li { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 12px 16px; border-radius: 9px; background: #fff; }
body.home .jca-steps__number { padding-right: 17px; border-right: 1px solid #e4e7eb; color: var(--jca-red); font-size: 28px; font-family: Arial, sans-serif; line-height: 1.4; }
body.home .jca-steps .fa { color: var(--jca-red); font-size: 34px; }
body.home .jca-steps h3 { font-size: 16px; font-weight: 700; line-height: 1.5; }
body.home .jca-steps p { font-size: 13px; color: var(--jca-muted); }
body.home .jca-steps .jca-chevron { margin-left: auto; color: var(--jca-red); }
body.home .jca-alumni { display: flex; gap: 22px; align-items: center; margin-top: 14px; padding: 9px 20px; border: 1px solid #e0e4e9; border-radius: 24px; background: #f9fafb; color: var(--jca-ink); }
body.home .jca-alumni:hover { color: var(--jca-ink); border-color: #909caa; background: #f1f3f6; }
body.home .jca-alumni > .fa { font-size: 30px; }
body.home .jca-alumni__title { font-size: 16px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
body.home .jca-alumni__title small { display: block; color: var(--jca-muted); font-size: 12px; }
body.home .jca-alumni__description { padding-left: 24px; border-left: 1px solid #d4dbe2; color: var(--jca-muted); font-size: 12px; }
body.home .jca-alumni__button { display: flex; gap: 25px; align-items: center; justify-content: center; margin-left: auto; padding: 5px 30px; border: 1px solid #dfe4ea; border-radius: 25px; background: #fff; font-size: 17px; font-weight: 700; white-space: nowrap; }

/* 実践ラボをキービジュアルに重ねる */
@media (min-width: 992px) {
    body.home .jca-hero { padding-bottom: 24px; }
    body.home .jca-front__inner { position: relative; z-index: 2; margin-top: -24px; }
    body.home .jca-lab { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
}

@media (min-width: 75em) {
    body.home .jca-lab { grid-template-columns: minmax(460px, 1.6fr) 300px minmax(0, 1fr); }
    body.home .jca-lab__eyebrow wbr { display: none; }
    body.home .jca-lab__eligibility { font-size: 18px; }
    body.home .jca-lab__eligibility > span { white-space: nowrap; }
    body.home .jca-course__body { padding-right: 16px; padding-left: 7px; }
    body.home .jca-course h3 { font-size: 13px; letter-spacing: -.045em; white-space: nowrap; }
    body.home .jca-course__body > .jca-chevron { right: 8px; width: 7px; height: 7px; }
}

@media (max-width: 1199px) {
    body.home .jca-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.home .jca-lab { grid-template-columns: 1.2fr 1fr .8fr; gap: 18px; padding: 22px; }
    body.home .jca-lab__eyebrow { font-size: 13px; }
    body.home .jca-lab__description { font-size: 15px; }
    body.home .jca-lab__eligibility { font-size: 14px; gap: 10px; }
    body.home .jca-lab__note { font-size: 13px; }
    body.home .jca-lab__script { font-size: 26px; }
    body.home .jca-section-heading p { display: none; }
    body.home .jca-course-grid { gap: 10px; }
    body.home .jca-course h3 { font-size: 14px; }
    body.home .jca-course__body { padding-left: 8px; }
    body.home .jca-steps li { gap: 10px; padding: 10px; }
    body.home .jca-steps__number { padding-right: 10px; }
    body.home .jca-steps h3 { font-size: 14px; }
    body.home .jca-steps p { font-size: 11px; }
    body.home .jca-alumni__description { display: none; }
}

@media (min-width: 768px) and (max-width: 991px) {
    body.home .jca-hero__message { right: 2%; bottom: 16%; font-size: 18px; }
    body.home .jca-lab { grid-template-columns: 1.1fr 1fr; grid-template-areas: "intro action"; }
    body.home .jca-lab__note,
    body.home .jca-lab__script { display: none; }
    body.home .jca-steps p { display: none; }
}

@media (max-width: 767px) {
    body.home .jca-front__inner { padding: 12px .9375rem; }
    body.home .jca-hero { min-height: 210px; }
    body.home .jca-hero::before { height: 54px; }
    body.home .jca-hero__image { right: 0; width: 78%; object-position: 63% 40%; }
    body.home .jca-hero::after { background: radial-gradient(ellipse at 100% 100%, rgba(255,246,246,.96), transparent 52%), linear-gradient(90deg, #fff6f6 0%, rgba(255,255,255,.94) 28%, rgba(255,255,255,.15) 59%, rgba(255,245,245,.08) 100%); }
    body.home .jca-hero__content { padding: 37px 20px 2px; }
    body.home .jca-front .jca-hero__eyebrow { margin-left: 0; font-size: 24px; line-height: 1.35; }
    body.home .jca-hero h2 { font-size: clamp(27px, 6.8vw, 42px); line-height: 1.1; letter-spacing: 0; }
    body.home .jca-front .jca-hero__description { margin-top: 9px; font-size: 12px; line-height: 1.6; letter-spacing: 0; }
    body.home .jca-hero__message { top: auto; right: 12px; bottom: 14%; font-size: 14px; letter-spacing: .03em; line-height: 1.5; }
    body.home .jca-hero__message span { margin-left: 14px; }
    body.home .jca-lab { display: block; min-height: 0; padding: 13px 12px 12px; border-radius: 8px; background-position: 62% center; }
    body.home .jca-lab::before { background: linear-gradient(90deg, rgba(255,250,250,.98), rgba(255,247,247,.84) 48%, rgba(255,247,247,.05)); }
    body.home .jca-lab__eyebrow { display: none; }
    body.home .jca-lab h2 { margin: 0 0 3px; font-size: clamp(34px, 9.5vw, 50px); line-height: 1.15; }
    body.home .jca-lab__description { font-size: 13px; line-height: 1.55; }
    body.home .jca-lab__action { gap: 10px; margin-top: 9px; }
    body.home .jca-lab__eligibility { justify-self: start; gap: 11px; padding: 8px 11px; border-radius: 7px; font-size: 12px; }
    body.home .jca-lab__eligibility .fa { font-size: 28px; }
    body.home .jca-lab__eligibility small { margin-top: 2px; font-size: 10px; }
    body.home .jca-desktop-break { display: none; }
    body.home .jca-button { min-height: 47px; padding: 9px 15px; font-size: 20px; gap: 15px; }
    body.home .jca-lab__note,
    body.home .jca-lab__script { display: none; }
    body.home .jca-courses { margin-top: 17px; }
    body.home .jca-section-heading { gap: 8px; margin-bottom: 10px; }
    body.home .jca-section-heading h2 { padding-left: 8px; border-left-width: 5px; font-size: clamp(16px, 4.4vw, 22px); }
    body.home .jca-section-heading a { gap: 6px; font-size: 12px; }
    body.home .jca-all-label { display: none; }
    body.home .jca-all-label-short { display: inline; }
    body.home .jca-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; }
    body.home .jca-course__visual { aspect-ratio: 2.45; }
    body.home .jca-course__body { padding: 5px 19px 6px 7px; }
    body.home .jca-course h3 { margin: 0; font-size: clamp(11px, 3.05vw, 16px); line-height: 1.4; }
    body.home .jca-course p { display: none; }
    body.home .jca-course--soon p { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; }
    body.home .jca-course--soon .jca-course__visual { aspect-ratio: 3.5; }
    body.home .jca-course--soon h3 { font-size: 14px; }
    body.home .jca-course__body > .jca-chevron { right: 9px; top: calc(50% - 4px); width: 7px; height: 7px; }
    body.home .jca-course__badge { top: 0; bottom: auto; padding: 2px 12px; border-radius: 0 0 4px 0; font-size: 11px; }
    body.home .jca-start { margin-top: 15px; padding: 0; background: transparent; }
    body.home .jca-start h2 { margin-bottom: 8px; font-size: clamp(15px, 4.2vw, 21px); }
    body.home .jca-steps { gap: 6px; }
    body.home .jca-steps li { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 4px 9px; padding: 8px 3px; border: 1px solid #eee8e8; border-radius: 7px; box-shadow: 0 2px 3px #25334509; } body.home .jca-steps__number { padding: 0; border: 0; font-size: 21px; }
    body.home .jca-steps .fa { font-size: 27px; }
    body.home .jca-steps li > div { grid-column: 1 / -1; text-align: center; }
    body.home .jca-steps h3 { font-size: clamp(10px, 2.9vw, 14px); white-space: nowrap; }
    body.home .jca-steps p,
    body.home .jca-steps .jca-chevron { display: none; }
    body.home .jca-alumni { gap: 12px; margin-top: 12px; padding: 9px 12px; border-radius: 20px; }
    body.home .jca-alumni > .fa { font-size: 27px; }
    body.home .jca-alumni__title { font-size: clamp(11px, 3.15vw, 15px); white-space: normal; }
    body.home .jca-alumni__title small { font-size: 10px; }
    body.home .jca-alumni__button { gap: 0; padding: 0; border: 0; background: transparent; font-size: 0; }
}