/* About / recruitment page layouts. Shared lower-page spacing stays in subpages.css. */
.kv-about-philosophy { padding: 85px 0 65px; background: linear-gradient(#fffc, #fffc), url('../img/about/philosophy-bg.webp') center / cover; text-align: center; }
.kv-about-philosophy h2 { color: var(--kv-subpage-accent); font-size: 25px; line-height: 1.7; }
.kv-about-philosophy p { max-width: 700px; margin: 35px auto 0 !important; }
.kv-about-gallery { display: grid; grid-template-columns: 1fr 1.8fr 1fr; gap: 65px; align-items: end; max-width: 1080px; margin: 45px auto 0; }
.kv-about-gallery img { width: 100%; border-radius: 15px; }
@media (min-width: 901px) {
    /* Design: 250px square photos either side of a 441x300 team photo, overlapping the bottom of the band by 109px. */
    .kv-about-philosophy { position: relative; isolation: isolate; padding-bottom: 0; background: none; }
    /* Band photo from the design source (1332x1080), cropped like the design (width-fitted, 25.9% down) without distortion. */
    .kv-about-philosophy::before { content: ''; position: absolute; inset: 0 0 109px; z-index: -1; background: linear-gradient(#fffc, #fffc), url('../img/about/philosophy-band.webp') center 25.9% / cover no-repeat; }
    .kv-about-gallery { grid-template-columns: 250px 441px 250px; gap: 70px; justify-content: center; max-width: none; position: relative; z-index: 1; }
    .kv-about-gallery img:nth-child(2) { margin-bottom: 50px; }
    .kv-about-content > .kv-subpage-section:first-child { margin-top: 101px; }
}
.kv-about-gallery img:nth-child(2) { align-self: start; margin-bottom: 40px; }
.kv-about-content { padding-top: 0; }
.kv-director { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; margin: 70px 35px 0; align-items: start; }
.kv-director-photo { position: relative; z-index: 1; }
.kv-director-photo > img { width: 100%; border-radius: 12px; }
.kv-director-name { position: relative; width: max-content; max-width: 90%; padding: 15px 25px; margin-top: -90px; margin-left: -25px; background: #fff; box-shadow: 0 2px 12px #0001; color: var(--kv-subpage-heading); }
.kv-director-name h3 { font-size: 27px; }
.kv-director-name p { font-size: 13px; }
.kv-director-photo > .kv-button { display: flex; width: max-content; max-width: 100%; margin: 25px 0 0 auto; }
.kv-director-name { text-align: center; }
.kv-director-name p[lang="en"] { color: #6cc9cf; }
.kv-director-message { margin: 30px 0 0 -35px; padding: 45px 40px 50px 75px; border-radius: 12px; background: #54b8bf; color: #fff; }
.kv-director-message h3 { color: #fff; font-size: 23px; line-height: 1.6; margin-bottom: 25px !important; }
.kv-about-distance { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 70px; margin-top: 40px; align-items: start; }
.kv-about-treatment-cards { display: grid; gap: 32px; }
.kv-about-treatment-cards h4 { padding: 16px 24px !important; background: var(--kv-subpage-heading); color: #fff; font-size: 18px; }
.kv-subpage-link-row { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; }
.kv-subpage-link-row .kv-button { flex: 0 1 calc(50% - 8px); min-width: 210px; text-align: center; }
.kv-about-distance-lead { margin-bottom: 40px !important; }
.kv-subpage-small-note { margin-top: 8px !important; font-size: 13px; color: #70797a; }
.kv-subpage .kv-subpage-list--spaced > li + li { margin-top: 8px; }
.kv-about-access iframe { width: 100%; height: 300px; border: 0; }
.kv-about-access .kv-button { display: flex; margin: 20px auto 0; }
.kv-about-access .kv-about-video { margin-top: 32px; }
.kv-about-access .kv-about-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.kv-statement { text-align: center; }
.kv-statement-heading { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.kv-statement-heading::after { content: ''; position: absolute; width: 100%; height: 1px; background: var(--kv-subpage-accent); bottom: 27px; z-index: 0; }
.kv-statement-heading > span { font-family: 'Jost', sans-serif; font-size: 84px; font-weight: 400; color: #83d2d7; }
.kv-statement-heading > strong { position: relative; z-index: 1; min-width: 420px; padding: 20px 40px; margin-top: -10px; font-size: 20px; color: #fff; background: var(--kv-subpage-accent); }
.kv-statement-lead { margin: 40px 0 24px !important; color: var(--kv-subpage-accent); font-weight: 700; font-size: 18px; }
.kv-statement .kv-subpage-text { max-width: 850px; margin: auto; }
.kv-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 50px 60px; margin-top: 45px; align-items: start; }
.kv-value-card { background: #f0f9fa; }
.kv-value-card:last-child:nth-child(3n+1) { grid-column: 2; }
.kv-value-card > div { padding: 30px 25px 25px; background: var(--kv-subpage-accent); }
.kv-value-card img { width: 100%; height: 160px !important; object-fit: contain; margin-bottom: 25px; }
.kv-subpage .kv-value-card h3 { display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 10px !important; color: var(--kv-subpage-heading); background: #cdf0ef; font-size: 17px; line-height: 1.6; text-align: center; }
.kv-value-card > p { padding: 25px !important; }
.kv-company-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; margin-top: 50px; align-items: start; }
.kv-company-grid > img { width: 100%; border-radius: 12px; }
.kv-definition-list { margin: 0; }
.kv-definition-list > div { display: grid; grid-template-columns: 194px minmax(0,1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid #87c9cd; }
.kv-definition-list > div:first-child { border-top: 1px solid #87c9cd; }
.kv-definition-list dt { font-weight: 700; }
.kv-definition-list dd { margin: 0; }
@media (max-width: 1100px) {
    .kv-about-gallery { gap: 30px; }
    .kv-director { margin-right: 0; margin-left: 20px; }
    .kv-director-message { padding: 30px 30px 35px 60px; }
    .kv-about-distance { gap: 35px; }
    .kv-value-grid { gap: 30px; }
    .kv-value-card > div { padding: 20px 15px; }
    .kv-company-grid { gap: 30px; }
    .kv-definition-list > div { grid-template-columns: 110px minmax(0,1fr); gap: 10px; }
}
@media (max-width: 700px) {
    .kv-about-philosophy { padding: 50px 0 40px; }
    .kv-about-philosophy h2 { font-size: 21px; }
    .kv-about-philosophy p { text-align: left; margin-top: 25px !important; }
    .kv-about-gallery { gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 30px; }
    .kv-about-gallery img:nth-child(2) { grid-column: 1 / -1; grid-row: 1; width: 85%; margin: 0 auto 8px; }
    .kv-about-gallery img { border-radius: 8px; }
    .kv-director { grid-template-columns: 1fr; margin: 35px 0 0; }
    .kv-director-name { margin-left: 10px; margin-top: -70px; padding: 12px 20px; }
    .kv-director-message { margin: 30px 0 0; padding: 30px 24px; }
    .kv-director-message h3 { font-size: 21px; }
    .kv-about-distance, .kv-company-grid { grid-template-columns: 1fr; }
    .kv-about-distance { gap: 45px; }
    .kv-about-access iframe { height: 280px; }
    .kv-statement-heading > span { font-size: 58px; }
    .kv-statement-heading > strong { min-width: 0; width: 75%; padding: 18px 20px; font-size: 18px; }
    .kv-statement .kv-subpage-text { text-align: left; }
    .kv-value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
    .kv-value-card:last-child:nth-child(3n+1) { grid-column: auto; }
    .kv-value-card img { height: 130px !important; }
    .kv-value-card > p { padding: 20px !important; }
}
@media (max-width: 480px) {
    .kv-value-grid { grid-template-columns: 1fr; gap: 30px; }
    .kv-value-card > div { padding: 25px; }
    .kv-value-card img { height: 160px !important; }
    .kv-definition-list > div { grid-template-columns: 100px minmax(0,1fr); font-size: 14px; }
}
/* Director greeting: same design values as the top-page greeting (design/当院について.svg). */
@media (min-width: 1201px) {
    .kv-director { grid-template-columns: 588px 612px; margin: 98px 0 0; }
    .kv-director-photo { padding-left: 38px; }
    .kv-director-photo > img { width: 550px; height: 450px !important; object-fit: cover; border-radius: 15px; }
    .kv-director-name { width: 185px; max-width: none; padding: 20px 10px 18px; margin: -100px 0 0 -25px; border-radius: 10px; box-shadow: 0 3px 18px #0002; line-height: 1.6; color: #4b9499; }
    .kv-director-name p:first-child { font-size: 13px; font-weight: 500; }
    .kv-director-name h3 { font-size: 22px; margin: 7px 0 3px !important; color: #4b9499; }
    .kv-director-name p[lang="en"] { font-size: 14px; font-weight: 600; font-family: Jost, sans-serif; }
    .kv-director-photo > .kv-button { width: 323px; min-height: 43px; margin: 11px 0 0 auto; justify-content: center; }
    .kv-director-message { min-height: 692px; margin: 31px 12px 0 -50px; padding: 46px 58px 52px 102px; border-radius: 15px; background: #41b2b9e6; }
    .kv-director-message h3 { font-size: 25px; line-height: 1.6; margin-bottom: 30px !important; }
    .kv-director-message p { font-size: 15px; line-height: 32px; }
}
/* Distant visitors and policy panel (design/当院について.svg). */
@media (min-width: 1201px) {
    .kv-about-distance { grid-template-columns: 730px 400px; gap: 70px; }
    .kv-about-distance-lead { margin-bottom: 64px !important; }
    .kv-about-distance .kv-subpage-subheading { font-size: 20px; }
    .kv-about-distance .kv-subpage-detail-list > div + div { margin-top: 98px; }
    .kv-about-treatment-cards { margin-top: 30px; }
    .kv-about-treatment-cards h4 { min-height: 60px; display: flex; align-items: center; padding: 0 33px !important; }
    .kv-about-treatment-cards .kv-subpage-card-body { padding: 25px 33px 30px; }
    .kv-subpage-link-row .kv-button { flex: 0 0 323px; min-width: 0; min-height: 43px; }
    .kv-subpage-link-row { gap: 13px; }
    .kv-about-content .kv-subpage-panel { padding-left: 100px; padding-right: 100px; }
}
.kv-subpage .kv-subpage-list--spaced > li + li { margin-top: 12px; }
/* Recruit (design/採用情報.svg) */
.kv-subpage .kv-text-center { text-align: center; }
@media (min-width: 1201px) {
    /* VISION / MISSION: Jost ExtraLight 100px, 417x70 badge, rule through the badge centre. */
    .kv-statement-heading::after { bottom: 35px; }
    .kv-statement-heading > span { font-size: 100px; font-weight: 200; letter-spacing: .05em; color: #6cc9cf; }
    .kv-statement-heading > strong { min-width: 417px; min-height: 70px; padding: 20px 40px; margin-top: -16px; } /* design: the English word sits directly on the box */
    .kv-statement-lead { margin-top: 45px !important; }
    /* Value cards: icons at their design size centred 129px below the top, white 302x83 label at 224px. */
    .kv-value-card > div { position: relative; display: flow-root; height: 331px; padding: 0; }
    .kv-value-card img { width: auto; max-width: calc(100% - 58px); height: var(--icon-h) !important; margin: calc(129px - var(--icon-h) / 2) auto 0; display: block; }
    .kv-value-card:nth-child(1) { --icon-h: 127px; }
    .kv-value-card:nth-child(2) { --icon-h: 148px; }
    .kv-value-card:nth-child(3) { --icon-h: 136px; }
    .kv-value-card:nth-child(4) { --icon-h: 146px; }
    .kv-value-card:nth-child(5) { --icon-h: 159px; }
    .kv-value-card:nth-child(6) { --icon-h: 177px; }
    .kv-value-card:nth-child(7) { --icon-h: 166px; }
    .kv-subpage .kv-value-card h3 { position: absolute; top: 224px; left: 29px; right: 29px; min-height: 83px; background: #ffffffc2; color: #256c71; font-size: 18px; }
}
/* Director name card: same design values as the top page at every width (185px card, 10px radius, 13/22/14px text, 0.2em tracking). */
.kv-subpage .kv-director-name { width: 185px; max-width: none; padding: 20px 10px 18px; border-radius: 10px; box-shadow: 0 3px 18px #0002; line-height: 1.6; color: #4b9499; letter-spacing: .2em; }
.kv-subpage .kv-director-name p:first-child { font-size: 13px; font-weight: 500; }
.kv-subpage .kv-director-name h3 { font-size: 22px; line-height: 1.6; letter-spacing: .2em; margin: 7px 0 3px !important; color: #4b9499; }
.kv-subpage .kv-director-name p[lang="en"] { font: 600 14px/1.6 Jost, sans-serif; letter-spacing: .2em; }
@media (min-width: 901px) and (max-width: 1200px) { .kv-subpage .kv-director-name { margin: -80px 0 0 -20px; } }
@media (max-width: 900px) { .kv-subpage .kv-director-name { margin: -60px 0 0 10px; } }
@media (max-width: 900px) { .kv-subpage .kv-director-photo > .kv-button { width: 100%; margin: 20px 0 0; } } /* same as the top page greeting */
/* Recruitment requirements: one 会社概要-style table per job. */
.kv-recruit-job + .kv-recruit-job { margin-top: 60px; }
.kv-recruit-job > .kv-definition-list { margin-top: 20px; }
@media (max-width: 900px) { .kv-recruit-job + .kv-recruit-job { margin-top: 45px; } }
.kv-recruit-jobs { margin-top: 50px; }
@media (max-width: 900px) { .kv-recruit-jobs { margin-top: 35px; } }
/* Requirements table (reference layout): tinted label column, labels vertically centred, thin rule between rows. */
.kv-subpage .kv-definition-list--table > div { grid-template-columns: 30% minmax(0,1fr); gap: 0; padding: 0; border-bottom: 1px solid #b5dde0; }
.kv-subpage .kv-definition-list--table > div:first-child { border-top: 1px solid #b5dde0; }
.kv-subpage .kv-definition-list--table dt { display: flex; align-items: center; padding: 24px 30px; background: #eaf6f7; color: #293132; }
.kv-subpage .kv-definition-list--table dd { padding: 24px 30px 24px 45px; line-height: 2.1; }
@media (max-width: 900px) {
    .kv-subpage .kv-definition-list--table > div { grid-template-columns: 110px minmax(0,1fr); font-size: 14px; }
    .kv-subpage .kv-definition-list--table dt { padding: 16px 12px; }
    .kv-subpage .kv-definition-list--table dd { padding: 16px 0 16px 16px; line-height: 1.9; }
}
/* Phones: label as a tinted bar above its content (reference layout). */
@media (max-width: 600px) {
    .kv-subpage .kv-definition-list--table > div { grid-template-columns: 1fr; }
    .kv-subpage .kv-definition-list--table dt { padding: 12px 14px; border-bottom: 1px solid #b5dde0; }
    .kv-subpage .kv-definition-list--table dd { padding: 14px 14px 16px; line-height: 1.9; }
}