/* Front-page SVG alignment. Scoped so completed lower-page layouts stay unchanged. */
.kv-home .kv-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kv-home .kv-heading > img { opacity: 1; } /* the PNG already carries the design's 14% opacity */
.kv-home .kv-hero-copy { top: 39%; }
.kv-home .kv-hero-copy h1 { font-size: 38px; }
.kv-home .kv-hero-copy p { font-size: 23px; margin-top: 12px !important; }
.kv-home .kv-hero-copy > span { font-size: 17px; margin-top: 12px; }
.kv-home .kv-hero-badges a { width: 194px; }
.kv-home .kv-hero-badges a:nth-child(2) { width: 158px; }
.kv-home .kv-hero-badges .kv-hero-moff { width: 234px; }
.kv-home .kv-hero-badges { bottom: -30px; align-items: end; }
.kv-home .kv-intro { padding: 75px 0 90px; }
.kv-intro-lead { display: flex; align-items: center; justify-content: center; gap: 25px; }
.kv-intro-lead > img { flex: 0 0 68px; width: 68px; }
.kv-intro-lead h2 { font-size: 23px; line-height: 1.8; color: #37787d; letter-spacing: .05em; }
.kv-home .kv-news { border: 0; border-radius: 10px; padding: 40px 50px; grid-template-columns: 135px 1fr; gap: 25px; margin-top: 55px; }
.kv-home .kv-news-heading { align-self: center; text-align: center; }
.kv-home .kv-news h3 { color: #111; font-size: 23px; }
.kv-home .kv-news-more { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 15px; border: 1px solid #52b3b9; border-radius: 30px; background: #fff; color: #37787d; font-size: 12px; line-height: 1.6; padding: 3px 10px; }
.kv-home .kv-news-more span { margin-left: 0; }
.kv-home .kv-news-list > a { border: 0; padding: 7px 0; font-size: 13px; grid-template-columns: 85px 1fr; }
.kv-home .kv-news-list b { display: none; }
.kv-home .kv-news-list time { color: #293132; }
.kv-home .kv-feature { gap: 100px; align-items: start; margin-bottom: 100px; }
.kv-home .kv-feature-image { position: relative; }
.kv-home .kv-feature-image img, .kv-home .kv-feature:nth-of-type(even) .kv-feature-image img { border-radius: 14px; }
.kv-home .kv-feature-number { z-index: 1; width: 120px; height: 120px; top: -40px; left: auto; right: 45px; font-size: 13px; }
.kv-home .kv-feature-number strong { font-size: 42px; }
.kv-home .kv-feature:nth-of-type(even) .kv-feature-number { right: auto; left: 45px; }
.kv-home .kv-feature-copy { padding-top: 0; }
.kv-home .kv-feature-copy h3 { margin-left: 0 !important; font-size: 25px; letter-spacing: .12em; }
.kv-home .kv-feature:nth-of-type(even) h3 { text-align: right; }
.kv-home .kv-feature .kv-button-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.kv-home .kv-feature .kv-button { width: 325px; }
.kv-home .kv-moff { --kv-moff-photo-height: 355px; padding: 90px 0 100px; }
.kv-moff-layout { display: grid; grid-template-columns: 335px minmax(0,1fr); gap: 100px; align-items: start; }
.kv-home .kv-moff-logo { width: 335px; margin-top: 40px; }
.kv-moff-kicker { font-size: 15px; font-weight: 700; letter-spacing: .18em; }
.kv-home .kv-moff h2 { font-size: 25px; margin-top: 8px !important; line-height: 1.7; letter-spacing: .08em; }
.kv-moff-description { font-size: 15px; margin-top: 32px !important; line-height: 2; }
.kv-home .kv-moff-dogs { margin-top: 60px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.kv-home .kv-moff-dogs img { border-radius: 0; width: 100%; height: auto !important; aspect-ratio: 1; object-fit: cover; }
.kv-home .kv-moff .kv-button-row { margin-top: 55px; gap: 20px; }
.kv-home .kv-moff .kv-button { flex: 1; min-width: 0; color: #293132; border-color: #293132; }
.kv-home .kv-moff .kv-moff-reserve { background: #293132; color: #fff; }
.kv-site .kv-home .kv-moff a.kv-button:hover { background: #293132; color: #fff; border-color: #293132; } /* hover inverts the normal colours */
.kv-site .kv-home .kv-moff a.kv-moff-reserve:hover { background: #fff; color: #293132; border-color: #293132; }
.kv-home .kv-greeting-grid { grid-template-columns: 550fr 650fr; }
.kv-home .kv-greeting-portrait .kv-button:hover { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.kv-home .kv-greeting-portrait > img { border-radius: 14px; }
.kv-home .kv-greeting-copy { border-radius: 14px; }
.kv-home .kv-medical-special .kv-medical-photo { margin-bottom: calc(-4.5% - 2px); } /* hide the transparent bottom edge of the exported photos */
.kv-home .kv-blog-row { grid-template-columns: 180px 1fr 74px; }
.kv-home .kv-blog-more { width: 74px; height: 74px; padding: 5px; font-size: 13px; flex-direction: row; gap: 4px; }
.kv-home .kv-blog-more:hover { opacity: .8; }
/* Thumbnails: enlarge 110% to hide white borders baked into the eyecatch files; the clip keeps the image inside its original box. */
.kv-home .kv-blog-cards article img { transform: scale(1.1); clip-path: inset(4.546%); }
.kv-home .kv-blog-more > span:last-child { font-size: 15px; }
.kv-home .kv-blog-treatment { --blog-accent: #41b2b9; }
.kv-home .kv-blog-symptoms { --blog-accent: #42b95e; }
.kv-home .kv-blog-voice { --blog-accent: #39a281; }
.kv-home .kv-blog-cards article span { background: var(--blog-accent, var(--blog-color)); color: #fff; border: 0; font-size: 12px; padding: 3px 14px; }
.kv-home .kv-blog-more { background: var(--blog-accent, var(--blog-color)); }
.kv-home :is(.kv-medical-card, .kv-blog-cards article) { transition: box-shadow .25s, transform .25s; }
.kv-home :is(a.kv-medical-card, .kv-blog-cards article):hover { transform: translateY(-4px); box-shadow: 0 8px 24px #213b4020; }
.kv-home :is(.kv-button,.kv-news-more,.kv-blog-more) { transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .3s ease; }
@media (min-width: 1201px) {
    /* Greeting spacing measured from design/トップページ.svg. */
    .kv-home .kv-greeting-grid { grid-template-columns: 588fr 612fr; }
    .kv-home .kv-greeting-portrait { padding-left: 38px; }
    .kv-home .kv-greeting .kv-name { width: 185px; padding: 22px 10px 20px; margin: -100px 0 11px -25px !important; line-height: 1.6; }
    .kv-home .kv-greeting .kv-name strong { margin: 7px 0 3px; }
    .kv-home .kv-greeting-portrait .kv-button { margin-top: 11px; }
    .kv-home .kv-greeting-copy { margin: 31px 12px 0 -50px; padding: 46px 58px 52px 102px; }
    .kv-home .kv-greeting-copy h3 { line-height: 1.6; margin-bottom: 30px !important; }
    .kv-home .kv-greeting-copy p { line-height: 32px; margin-bottom: 32px !important; }
    .kv-home .kv-greeting-copy p:last-child { margin-bottom: 0 !important; }
}
@media (min-width: 901px) and (max-width: 1200px) {
    .kv-home .kv-feature { gap: 55px; }
    .kv-moff-layout { grid-template-columns: 250px minmax(0,1fr); gap: 50px; }
    .kv-home .kv-moff h2 { font-size: 22px; }
}
@media (max-width: 900px) {
    .kv-home .kv-hero-copy h1 { font-size: 32px; }
    .kv-home .kv-hero-copy p { font-size: 21px; }
    .kv-home .kv-hero-copy > span { font-size: 13px; }
    .kv-home .kv-hero-badges a { width: 120px; }
    .kv-home .kv-hero-badges a:nth-child(2) { width: 100px; }
    .kv-home .kv-hero-badges .kv-hero-moff { width: 140px; }
    .kv-intro-lead h2 { font-size: 18px; }
    .kv-home .kv-news { display: grid; padding: 25px; grid-template-columns: 115px 1fr; gap: 20px; }
    .kv-home .kv-news h3 { display: block; font-size: 20px; margin-bottom: 0 !important; }
    .kv-home .kv-feature { gap: 35px; }
    .kv-home .kv-feature-copy h3 { font-size: 21px; letter-spacing: .04em; }
    .kv-home .kv-feature-number { width: 80px; height: 80px; right: 20px; top: -25px; font-size: 10px; }
    .kv-home .kv-feature:nth-of-type(even) .kv-feature-number { left: 20px; }
    .kv-home .kv-feature-number strong { font-size: 30px; }
    .kv-moff-layout { grid-template-columns: 180px minmax(0,1fr); gap: 35px; }
    .kv-home .kv-moff { padding: 60px 0; --kv-moff-photo-height: 260px; background-size: 100% 100%,auto 320px; }
    .kv-home .kv-moff-logo { width: 180px; }
    .kv-home .kv-moff h2 { font-size: 22px; }
    .kv-home .kv-moff-dogs { gap: 15px; margin-top: 30px; }
    .kv-home .kv-moff .kv-button-row { margin-top: 30px; flex-direction: column; }
    .kv-home .kv-greeting-grid { grid-template-columns: 1fr 1fr; }
    .kv-home .kv-blog-row { grid-template-columns: 1fr; }
    .kv-home .kv-blog-more { width: auto; height: auto; padding: 9px 20px; gap: 15px; }
}
@media (max-width: 600px) {
    .kv-home .kv-hero-copy { top: 27%; }
    .kv-home .kv-hero-copy h1 { font-size: 29px; }
    .kv-home .kv-hero-copy p { font-size: 19px; }
    .kv-home .kv-hero-copy > span { font-size: 12px; }
    /* Phone: badges grow with the screen (about 20% larger than before at 390px) up to the tablet sizes, so the small text stays readable. */
    .kv-home .kv-hero-badges { bottom: -22px; left: 12px; right: 12px; gap: 8px; }
    .kv-home .kv-hero-badges a { width: min(29vw, 120px); }
    .kv-home .kv-hero-badges a:nth-child(2) { width: min(25vw, 100px); }
    .kv-home .kv-hero-badges .kv-hero-moff { width: min(32vw, 140px); }
    .kv-home .kv-intro { padding: 65px 0 55px; }
    .kv-intro-lead { flex-direction: column; gap: 20px; }
    .kv-intro-lead > img { width: 54px; flex-basis: auto; }
    .kv-intro-lead h2 { font-size: 16px; letter-spacing: .02em; }
    .kv-home .kv-news { display: flex; flex-direction: column; padding: 25px 18px; margin-top: 35px; gap: 15px; }
    .kv-home .kv-news-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .kv-home .kv-news-more { margin-top: 0; }
    .kv-home .kv-news-list > a { grid-template-columns: 1fr; gap: 0; padding: 10px 0; }
    .kv-home .kv-feature { gap: 25px; margin-bottom: 80px; }
    .kv-home .kv-feature:nth-of-type(even) h3 { text-align: left; }
    .kv-home .kv-feature-copy h3 { padding-top: 0; font-size: 22px; }
    .kv-home .kv-feature .kv-button-row { align-items: center; }
    .kv-home .kv-feature .kv-button { flex: auto; max-width: 100%; }
    .kv-moff-layout { grid-template-columns: 1fr; gap: 30px; }
    .kv-home .kv-moff-logo { width: 200px; margin: 0 auto; }
    .kv-moff-kicker { text-align: center; font-size: 12px; }
    .kv-moff-description { font-size: 13px; margin-top: 24px !important; }
    .kv-home .kv-moff .kv-button { width: 100%; max-width: 100%; }
    .kv-home .kv-greeting-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .kv-home :is(.kv-medical-card,.kv-blog-cards article,.kv-button,.kv-news-more,.kv-blog-more) { transition: none; }
    .kv-home :is(a.kv-medical-card,.kv-blog-cards article):hover { transform: none; }
}

/* Main visual: same values as the Kusunoki theme's Vegas setup (transition "blur" 32px / 3s, animation "kenburnsrev" 1.1 -> 1 / 5s). */
.kv-home .kv-slides { overflow: hidden; }
.kv-home .kv-slide { filter: blur(32px); transition: none; }
.kv-home .kv-slide.is-current { filter: blur(0); transition: opacity 3s ease, filter 3s ease; }
.kv-home .kv-slide.is-prev { opacity: 1; filter: none; z-index: -3; }
.kv-home .kv-slide.is-intro { animation: kv-slide-blur-in 3s ease; }
.kv-home .kv-slide.is-current img { animation: kv-kenburnsrev 5s ease-in-out; }
.kv-home .kv-hero.is-paused .kv-slide img { animation-play-state: paused; }
@keyframes kv-slide-blur-in { from { opacity: 0; filter: blur(32px); } to { opacity: 1; filter: blur(0); } }
@keyframes kv-kenburnsrev { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Scroll animations (WOW.js + animate.css), same keyframes and timing as the Kusunoki theme's home.css. */
main.preload .wow { opacity: 0 !important; }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: none; } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: none; } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: none; } }
@keyframes blurIn { 0% { opacity: 0; filter: blur(16px); } 100% { opacity: 1; filter: blur(0); } }
.blurIn { animation-name: blurIn; }
.kv-home .blurIn.animated { animation-duration: 1.6s; }
/* Release the end state so the existing card hover lift (transform) still works after the animation. */
.kv-home .wow.animated { animation-fill-mode: backwards; }
/* Stagger items in the same row by 0.2s, as the Kusunoki cards do. */
.kv-home .kv-medical-grid > .wow:nth-child(2n),
.kv-home .kv-medical-small > .wow:nth-child(4n+2),
.kv-home :is(.kv-moff-dogs, .kv-blog-cards) > .wow:nth-child(3n+2) { animation-delay: .2s; }
.kv-home .kv-medical-small > .wow:nth-child(4n+3),
.kv-home :is(.kv-moff-dogs, .kv-blog-cards) > .wow:nth-child(3n) { animation-delay: .4s; }
.kv-home .kv-medical-small > .wow:nth-child(4n) { animation-delay: .6s; }
@media (max-width: 900px) {
    .kv-home .kv-medical-small > .wow:nth-child(2n+1) { animation-delay: 0s; }
    .kv-home .kv-medical-small > .wow:nth-child(2n) { animation-delay: .2s; }
}
@media (max-width: 600px) {
    .kv-home .kv-blog-cards > .wow { animation-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
    main.preload .wow { opacity: 1 !important; }
    .kv-home .animated { animation: none !important; }
    .kv-home .kv-slide, .kv-home .kv-slide.is-current { filter: none; transition: none; }
    .kv-home .kv-slide.is-intro, .kv-home .kv-slide.is-current img { animation: none; }
}

/* Colours checked against design/トップページ.svg (2026-10-06). The common bottom area (staff to footer) is not changed here. */
.kv-home :is(.kv-hero, .kv-intro, .kv-medical, .kv-features, .kv-moff, .kv-greeting, .kv-blog) { --kv-teal: #41b2b9; }
.kv-home .kv-heading h2 { color: #256c71; }
.kv-home .kv-heading p { color: #6cc9cf; }
.kv-home .kv-intro-lead h2 { color: #293132; }
.kv-home .kv-intro-lead em { font-style: normal; color: #4b9499; }
.kv-home .kv-news { background: #fff repeating-conic-gradient(#00000017 0 25%, transparent 0 50%) 0 0 / 5px 5px; border: 1px solid #70707017; }
.kv-home .kv-news h3, .kv-home .kv-news-list > a, .kv-home .kv-news-list time { color: #020202; }
.kv-site .kv-home .kv-news-more { color: #41b2b9; border-color: #41b2b9; }
.kv-home .kv-section-label { color: #256c71; }
.kv-home .kv-section-label small { color: #6cc9cf; }
.kv-home .kv-section-label::before, .kv-home .kv-section-label::after { border-top-color: #6cc9cf; }
.kv-home .kv-medical-label h4 { color: #4b9499; }
.kv-home .kv-medical-label .kv-arrow { background: #4b9499; }
.kv-home .kv-medical-gold h4 { color: #ac8c61; }
.kv-home .kv-medical-gold .kv-arrow { background: #ac8c61; }
.kv-home .kv-medical-special h4 { color: #fff; }
.kv-home .kv-medical-special .kv-medical-label .kv-arrow { background: #fff; color: #41b2b9; }
.kv-home .kv-feature-copy p { color: #293132; }
.kv-home .kv-greeting-copy { background: #41b2b9e6; }
.kv-home .kv-greeting .kv-name, .kv-home .kv-greeting .kv-name strong { color: #4b9499; }
.kv-home .kv-greeting .kv-name span { color: #6cc9cf; }
/* Wide screens (>1600px): MV badges spread toward the screen edges and grow up to 1.2x (1.2x at 1920px+).
   The right side keeps 200px so MOFF does not sit under the fixed chat button. */
@media (min-width: 1601px) {
    .kv-home .kv-hero-badges { left: max(100px, calc(1800px - 100vw)); right: max(200px, calc(1800px - 100vw)); }
    .kv-home .kv-hero-badges a { width: min(233px, 12.125vw); }
    .kv-home .kv-hero-badges a:nth-child(2) { width: min(190px, 9.875vw); }
    .kv-home .kv-hero-badges .kv-hero-moff { width: min(281px, 14.625vw); }
}
/* Director name card: same design values on the top page and 当院について at every width (185px card, 10px radius, 13/22/14px text, 0.2em tracking). */
.kv-site .kv-home .kv-greeting .kv-name { width: 185px; max-width: none; padding: 20px 10px 18px !important; border-radius: 10px; box-shadow: 0 3px 18px #0002; font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: .2em; text-align: center; }
.kv-site .kv-home .kv-greeting .kv-name strong { display: block; font-size: 22px; line-height: 1.6; letter-spacing: .2em; margin: 7px 0 3px; }
.kv-site .kv-home .kv-greeting .kv-name span { display: block; font: 600 14px/1.6 Jost, sans-serif; letter-spacing: .2em; }
@media (min-width: 901px) and (max-width: 1200px) { .kv-site .kv-home .kv-greeting .kv-name { margin: -80px 0 20px -20px !important; } }
@media (max-width: 900px) { .kv-site .kv-home .kv-greeting .kv-name { margin: -60px 0 20px 10px !important; } }
/* 当院、当サロンの想い: philosophy band before the features (same look as the 当院について philosophy band: photo under an 80% white veil, centred copy). */
.kv-home .kv-thought { padding: 85px 0 90px; text-align: center; background: linear-gradient(#fffc, #fffc), url('../img/about/philosophy-band.webp') center 30% / cover no-repeat; }
.kv-home .kv-thought .kv-heading { margin-bottom: 30px; }
.kv-home .kv-thought-catch { color: #41b2b9; font-size: 25px; font-weight: 700; letter-spacing: .12em; line-height: 1.7; }
.kv-home .kv-thought-text { margin-top: 30px !important; font-size: 16px; line-height: 2.1; letter-spacing: .06em; color: #293132; }
@media (max-width: 900px) {
    .kv-home .kv-thought { padding: 55px 0 60px; }
    .kv-home .kv-thought-catch { font-size: 20px; letter-spacing: .06em; }
    .kv-home .kv-thought-text { margin-top: 22px !important; font-size: 14px; line-height: 2; text-align: left; }
    .kv-home .kv-thought-text br { display: none; }
}
.kv-home .kv-thought .kv-heading > img { display: none; } /* no watermark logo on the photo band */
.kv-home .kv-thought .kv-heading { padding-top: 0; }