/* 이펙터 · 2026-10 제작 · 병원소개·의료진 페이지 스타일 */

:root {
  --ha-ink: var(--ss-ink);
  --ha-sub: #505050;
  --ha-label: #7188a0;
  --ha-soft: #f4f4f4;
  --ha-sec: 4rem;
  --ha-r: 1.25rem;
  --ha-story-h: max(30rem, calc(100vh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)));
  --ha-h: 1.5rem;
  --ha-h2: 1.375rem;
  --ha-t: 1rem;
  --ha-tb: .9375rem;
  --ha-cardt: 1.125rem;
  --ha-s-lead: 1.125rem;
  --ha-s-body: 1rem;
  --ha-s-h1: 2rem;
  --ha-s-h2: 1.75rem;
  --ha-ego: .9375rem;
  --ha-en: 1.125rem;
  --hd-name: 1.0625rem;
  --hd-en: .75rem;
  --hd-pn: 1.5rem;
  --hd-pl: .9375rem;
}
@supports (height: 100svh) { :root { --ha-story-h: max(30rem, calc(100svh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h))); } }
@media (min-width: 576px) { :root { --ha-h: 1.75rem; --ha-h2: 1.5rem; --ha-t: 1.0625rem; --ha-tb: .9375rem; --ha-cardt: 1.1875rem; --ha-s-lead: 1.25rem; --ha-s-body: 1.0625rem; --ha-s-h1: 2.5rem; --ha-s-h2: 2.25rem; --ha-ego: .9375rem; --ha-en: 1.25rem; --hd-name: 1.125rem; --hd-en: .875rem; --hd-pn: 1.75rem; } }
@media (min-width: 768px) {
  :root { --ha-sec: 5rem; --ha-r: 1.5rem; --ha-h: 2rem; --ha-h2: 1.75rem; --ha-t: 1.1875rem; --ha-tb: 1rem; --ha-cardt: 1.25rem; --ha-s-lead: 1.5rem; --ha-s-body: 1.1875rem; --ha-s-h1: 2.75rem; --ha-s-h2: 2.5rem; --ha-ego: 1rem; --ha-en: 1.375rem; --hd-name: 1.25rem; --hd-en: .9375rem; --hd-pn: 2rem; --hd-pl: 1rem; }
}
@media (min-width: 992px) {
  :root { --ha-sec: 7.5rem; --ha-h: 2.25rem; --ha-h2: 2rem; --ha-t: 1.25rem; --ha-tb: 1.0625rem; --ha-cardt: 1.375rem; --ha-s-lead: 1.5rem; --ha-s-body: 1.25rem; --ha-s-h1: 3rem; --ha-s-h2: 2.75rem; --ha-ego: 1.0625rem; --ha-en: 1.5rem; --hd-name: 1.375rem; --hd-en: 1rem; --hd-pn: 2.25rem; --hd-pl: 1.0625rem; }
  :root { --ha-story-h: clamp(32rem, calc(100vh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 62.5rem); }
}
@supports (height: 100svh) { @media (min-width: 992px) { :root { --ha-story-h: clamp(32rem, calc(100svh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 62.5rem); } } }
@media (min-width: 1200px) { :root { --ha-s-lead: 1.625rem; --ha-t: 1.3125rem; --ha-tb: 1.125rem; --ha-s-body: 1.3125rem; } }
@media (min-width: 1400px) {
  :root { --ha-h: 2.6rem; --ha-h2: 2.2rem; --ha-t: 1.4167rem; --ha-tb: 1.1667rem; --ha-cardt: 1.5rem; --ha-s-lead: 1.84375rem; --ha-s-body: 1.4167rem; --ha-s-h2: 3.1875rem; --ha-ego: 1.1667rem; --ha-en: 1.825rem; --hd-name: 1.5rem; --hd-en: 1.2rem; --hd-pn: 2.6rem; --hd-pl: 1.2rem; }
}

.ha-stories { position: relative; z-index: 1; background: #14120f; }
.ha-story { position: relative; display: flex; align-items: center; height: var(--ha-story-h); overflow: hidden; background: var(--ha-bg, #3a3835); color: #fff; --e: 0; --h: 0; --c: 0; --p: 0; --q: 0; }
.ha-story-dark { color: var(--ss-ink); }
.ha-story-bg { position: absolute; inset: 0; }
.ha-story-bg .img-ph, .ha-story-bg img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; border: 0; }
.ha-story-bg .img-ph { background: var(--ha-bg, #3a3835); color: #fff; }
.ha-story-bg .img-ph::after { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .5); color: #fff; font-size: .75rem; }
.ha-story-dark .ha-story-bg .img-ph::after { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .3); color: #333; }
.ha-story:not(.ha-story-dark) .ha-story-bg::after { content: ""; position: absolute; inset: 0; background: var(--ha-tone, rgba(0, 0, 0, .18)); pointer-events: none; }
.ha-story-1, .ha-story-ego, .ha-story-3, .ha-story-4, .ha-story-5, .ha-story-6, .ha-story-7, .ha-story-end { --ha-tone: none; }
.ha-story-5 .ha-story-bg img { object-position: 72% 50%; }
@media (max-width: 767.98px) { .ha-story-5 { --ha-tone: linear-gradient(to top, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 82%); } }
@media (min-width: 768px) { .ha-story-5 .ha-story-bg img { object-position: 50% 50%; } }
.ha-story .container { position: relative; z-index: 1; }
.ha-story-txt { max-width: 100%; }
@media (min-width: 992px) { .ha-story-r .ha-story-txt { width: max-content; margin-left: auto; } }
@media (min-width: 1400px) { .ha-story-4 .ha-story-txt { margin-right: 5.3125rem; } }
.ha-story-c .ha-story-txt { margin-inline: auto; text-align: center; }
.ha-story p { margin: 0; }
.ha-story-t { font-size: var(--ha-s-lead); font-weight: 500; line-height: 1.5; }
.ha-story-t + .ha-story-t { margin-top: .75rem; }
.ha-story-lead { font-size: var(--ha-s-lead); font-weight: 500; line-height: 1.5; }
.ha-story-h1 { margin: .25rem 0 0; font-size: var(--ha-s-h1); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: inherit; }
@media (min-width: 1400px) { .ha-story-h1 { font-size: 3.25rem; } }
.ha-story-eyebrow { margin-top: 3rem !important; font-size: var(--ha-s-body); font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.ha-story-eyebrow + .ha-story-body { margin-top: .75rem !important; }
.ha-story-body { font-size: var(--ha-s-body); font-weight: 400; line-height: 1.5; }
@media (min-width: 992px) { .ha-story-eyebrow { margin-top: 4.5rem !important; } }

.ha-story-ego { padding-bottom: 4rem; }
.ha-story-en { font-size: var(--ha-en); font-weight: 600; line-height: 1.3; }
@media (min-width: 1400px) { .ha-story-en { font-size: 2.0625rem; } }
.ha-story-h2 { margin: .5rem 0 0; font-size: var(--ha-s-h2); font-weight: 700; line-height: 1.3; color: inherit; }
.ha-story-ego-line { margin-top: 2rem !important; font-size: var(--ha-ego); font-weight: 400; line-height: 1.66; color: rgba(255, 255, 255, .86); }
.ha-story-ego-line + .ha-story-ego-line { margin-top: 1.9375rem !important; }
.ha-story-ego-line-em { color: #fff; font-weight: 500; }

.ha-scroll { position: absolute; left: 50%; bottom: 1.5rem; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; transform: translateX(-50%); color: #fff; font: 700 .875rem/1.2 var(--ss-font); text-decoration: none; transition: opacity .6s ease, visibility .6s; }
.ha-scroll:hover { color: #fff; }
.ha-scroll-line { position: relative; display: block; width: 1px; height: 2.5rem; background: rgba(255, 255, 255, .6); }
.ha-scroll-line::after { content: ""; position: absolute; left: 50%; top: 0; width: .625rem; height: .625rem; margin-left: -.3125rem; border-radius: 50%; background: #c9cfd8; animation: haDot 1.8s ease-in-out infinite; }
@keyframes haDot { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(2.25rem); opacity: 0; } }
@media (min-width: 992px) { .ha-scroll { bottom: 3.5rem; font-size: .9375rem; } .ha-scroll-line { height: 2.75rem; } }
.ha-story-ego.is-scrolled .ha-scroll { opacity: 0; visibility: hidden; }

.ha-story-big { margin: 1rem 0 0; font-size: var(--ha-s-h2); font-weight: 600; line-height: 1.3; color: inherit; }
.ha-story-end .ha-story-t { font-size: calc(var(--ha-s-lead) * .915); font-weight: 300; line-height: 1.2; }
.ha-story-logo { position: absolute; left: 50%; bottom: 7%; z-index: 1; width: 8.75rem; transform: translateX(-50%); }
.ha-story-logo img { width: 100%; filter: brightness(0) invert(1); opacity: .72; }
@media (min-width: 768px) { .ha-story-logo { width: 12rem; } }
@media (min-width: 992px) { .ha-story-logo { width: 15.25rem; bottom: 9.5%; } }

html.ha-fx .hd-hero .ha-story-txt { opacity: 0; transform: translateY(1.5rem); transition: opacity .9s ease .1s, transform .9s ease .1s; }
html.ha-fx .hd-hero.is-in .ha-story-txt { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.ha-fx .hd-hero .ha-story-txt { opacity: 1; transform: none; transition: none; } .ha-scroll-line::after { animation: none; opacity: 1; } }

.ha-skip { position: fixed; left: -9999px; top: 0; z-index: 3000; padding: .75rem 1.25rem; background: var(--ss-ink); color: var(--ss-white); font-size: .875rem; }
.ha-skip:focus { left: 1rem; top: 1rem; color: var(--ss-white); }

:root { --ha-vh: 100vh; --ha-ease: cubic-bezier(.16, 1, .3, 1); --ha-par: 8.9%; --ha-tpar: 3rem; --ha-ls: .08em; }
@supports (height: 100svh) { :root { --ha-vh: 100svh; } }
@media (min-width: 992px) { :root { --ha-par: 9.8%; --ha-tpar: 8rem; --ha-ls: .2em; } }

.ha-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }

.ha-stories .ha-story-bg { inset: auto; left: 0; right: 0; top: -6%; height: 112%; }
.ha-stories .ha-story-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: var(--dk, 0); pointer-events: none; }

html:not(.ha-stack).ha-fx .ha-story-7.is-in .ha-story-bg > * { animation: haFocus 1.8s ease-out backwards; }
@keyframes haFocus { from { filter: blur(6px); } to { filter: blur(0); } }

.ha-after { position: relative; z-index: 2; background: var(--ss-white); }

@media (min-width: 992px) {
  body.ss-about .ss-header { transition: background-color .3s ease, box-shadow .3s ease; }
  body.ss-about.ha-clear .ss-header { background-color: transparent; box-shadow: none; }
  body.ss-about.ha-clear:not(.ha-light) .ss-header .ss-gnb-link, body.ss-about.ha-clear:not(.ha-light) .ss-header .ss-util-btn { color: var(--ss-white); }
  body.ss-about.ha-clear:not(.ha-light) .ss-header .ss-logo-pc { filter: brightness(0) invert(1); }
  body.ss-about.ha-clear .ss-header:is(:hover, :focus-within, :has(.ss-drop.is-open)) { background-color: var(--ss-white); box-shadow: 0 1px 0 rgba(17, 17, 17, .06); }
  body.ss-about.ha-clear .ss-header:is(:hover, :focus-within, :has(.ss-drop.is-open)) .ss-gnb-link { color: var(--ss-text-2); }
  body.ss-about.ha-clear .ss-header:is(:hover, :focus-within, :has(.ss-drop.is-open)) .ss-gnb-link:is(:hover, :focus-visible, .is-active, .is-current) { color: var(--ss-ink); }
  body.ss-about.ha-clear .ss-header:is(:hover, :focus-within, :has(.ss-drop.is-open)) .ss-util-btn { color: var(--ss-text); }
  body.ss-about.ha-clear .ss-header:is(:hover, :focus-within, :has(.ss-drop.is-open)) .ss-logo-pc { filter: brightness(0) invert(.067); }
}

.ha-sec { padding-block: var(--ha-sec); }
.ha-sec-soft { background: var(--ha-soft); }
.ha-h { margin: 0; font-size: var(--ha-h); font-weight: 600; line-height: 1.32; letter-spacing: -.01em; color: var(--ha-ink); }
.ha-h-c { text-align: center; }
.ha-split { display: grid; gap: 2rem; align-items: center; }
.ha-split-pic { overflow: hidden; border-radius: var(--ha-r); }
.ha-split-pic .img-ph, .ha-split-pic img { border-radius: var(--ha-r); }
.ha-split-pic img { display: block; width: 100%; height: auto; }
.ha-label { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: .22em; color: var(--ha-label); }
.ha-title { margin: 0; font-size: var(--ha-h); font-weight: 600; line-height: 1.32; letter-spacing: -.01em; color: var(--ha-ink); }
.ha-title-m { font-size: var(--ha-h2); line-height: 1.3; }
.ha-p { margin: 1.5rem 0 0; font-size: var(--ha-t); font-weight: 400; line-height: 1.4; color: var(--ha-ink); }
.ha-p-sub { margin-top: 1.5rem; font-size: var(--ha-tb); line-height: 1.52; color: var(--ha-sub); }
.ha-intro .ha-split-txt .ha-p { font-weight: 500; }
.ha-intro .ha-split-txt .ha-p-sub { font-size: calc(var(--ha-tb) * 1.07); font-weight: 400; }
.ha-p + .ha-p-sub { margin-top: 1.5rem; }
.ha-split-soft .ha-title-m + .ha-p { margin-top: 1.25rem; }
.ha-split-soft .ha-p { margin-top: 1rem; font-size: var(--ha-tb); line-height: 1.5; color: var(--ha-sub); }
.ha-br { display: none; }
@media (min-width: 1400px) { .ha-br { display: inline; } }
@media (min-width: 992px) {
  .ha-split { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .ha-split-rev .ha-split-pic { order: 2; }
  .ha-p { margin-top: 2.25rem; }
  .ha-p-sub, .ha-p + .ha-p-sub { margin-top: 1.875rem; }
  .ha-split-soft .ha-title-m + .ha-p { margin-top: 1.75rem; }
}
.ha-sec-soft .ha-h + .ha-split { margin-top: 2.5rem; }
.ha-split-soft + .ha-split-soft { margin-top: 3rem; }
@media (min-width: 992px) { .ha-split-soft + .ha-split-soft { margin-top: 5rem; } }

.ha-cards { display: grid; gap: 1rem; margin-top: 2.5rem; }
.ha-card { padding: 2rem 1.5rem; text-align: center; background: var(--ss-white); border: 1px solid #ddd; border-radius: 1.5rem; }
.ha-card-en { margin: 0 0 .75rem; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ha-label); }
.ha-card-t { margin: 0; font-size: var(--ha-cardt); font-weight: 600; line-height: 1.4; color: var(--ha-ink); }
.ha-card-d { margin: .75rem 0 0; font-size: var(--ha-tb); line-height: 1.5; color: var(--ha-sub); }
@media (min-width: 768px) { .ha-cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .ha-card { padding-inline: 1rem; } .ha-card-en { font-size: 1.125rem; } }
@media (min-width: 992px) { .ha-card { padding-inline: 1.5rem; } .ha-card-en { font-size: 1.25rem; } }

.ha-glob { overflow: hidden; background: #f3f4f6; }
.ha-roll { margin-top: 2.5rem; }
.ha-roll-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.ha-roll-set { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; }
.ha-gcard { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 12.5rem; min-height: 15rem; padding: 2.5rem .75rem 1.5rem; text-align: center; background: var(--ss-white); border: 1px solid rgba(17, 17, 17, .05); border-radius: 1.25rem; }
.ha-gcard-ico { width: 3rem; height: 3rem; margin-bottom: 1rem; }
.ha-gcard-ico .img-ph, .ha-gcard-ico img { width: 100%; height: 100% !important; aspect-ratio: 1 / 1 !important; border-radius: 0; object-fit: contain; }
.ha-gcard-ico { color: #5d758d; }
.ha-gcard-svg { display: block; width: 100%; height: 100%; }
.ha-gcard-ico .img-ph::after { font-size: .5rem; padding: 1px 3px; max-width: 100%; white-space: normal; text-align: center; }
.ha-gcard-t { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--ha-ink); }
.ha-gcard-e { display: block; margin-top: .5rem; font-size: .875rem; font-weight: 400; line-height: 1.5; }
@media (min-width: 768px) { .ha-gcard { width: 13.375rem; min-height: 16.25rem; padding: 3rem .75rem 2rem; } .ha-gcard-t { font-size: 1.25rem; } .ha-gcard-e { font-size: 1rem; } }
@media (min-width: 1400px) { .ha-gcard-t { font-size: 1.4rem; } .ha-gcard-e { font-size: 1.1667rem; } }
.ha-roll.is-rolling .ha-roll-track { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: haRoll var(--ha-roll-t, 36s) linear infinite; }
.ha-roll.is-rolling .ha-roll-set { flex-wrap: nowrap; justify-content: flex-start; flex: none; gap: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .ha-roll.is-rolling .ha-roll-set { gap: 1.5rem; padding-right: 1.5rem; } }
.ha-roll.is-rolling:hover .ha-roll-track, .ha-roll.is-rolling:focus-within .ha-roll-track { animation-play-state: paused; }
@keyframes haRoll { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--ha-roll-n, 4))); } }
@media (prefers-reduced-motion: reduce) { .ha-roll.is-rolling .ha-roll-track { animation: none; } }

.ha-become { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(26rem, 52.0833vw, 62.5rem); overflow: hidden; color: #fff; text-align: center; background: #988d87; }
.ha-become-bg { position: absolute; inset: 0; }
.ha-become-bg .img-ph, .ha-become-bg img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; border: 0; }
.ha-become-bg { background: #f1f1f3; }
@media (max-width: 767.98px) { .ha-become-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); pointer-events: none; } }
.ha-become-bg img.ha-become-model { object-position: 22% 50%; }
@media (min-width: 768px) { .ha-become-bg img.ha-become-model { object-position: 50% 50%; } }
.ha-become-bg .img-ph { background: #988d87; }
.ha-become-bg .img-ph::after { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .5); color: #fff; font-size: .75rem; }
.ha-become .container { position: relative; z-index: 1; }
.ha-become-tag { display: inline-block; margin: 0; padding: .375rem 1rem; font-size: .6875rem; font-weight: 300; line-height: 1.5; letter-spacing: .055em; border: 1px solid rgba(255, 255, 255, .85); }
.ha-become-h { margin: 1rem 0 0; font-size: 2.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.ha-become-p { margin: 1rem 0 0; font-size: var(--ha-s-lead); font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, .92); }
@media (min-width: 576px) { .ha-become-tag { font-size: .875rem; padding-inline: 1.5rem; } .ha-become-h { font-size: 3rem; } }
@media (min-width: 992px) { .ha-become-tag { font-size: 1rem; } .ha-become-h { margin-top: 1.5rem; font-size: 3.75rem; } .ha-become-p { margin-top: 1.125rem; } }
@media (min-width: 1400px) { .ha-become-tag { padding-block: .125rem; padding-inline: .8125rem; font-size: 1.4375rem; } .ha-become-h { font-size: 4.375rem; } }

.ha-after { overflow: clip; }

.ha-card { position: relative; transition: transform .45s var(--ha-ease), box-shadow .45s ease; }
@media (hover: hover) { .ha-card:hover { transform: translateY(-.5rem); box-shadow: 0 1.25rem 2rem -1.25rem rgba(17, 17, 17, .22); } }

.hd-hero { --ha-bg: #4b4e47; --ha-tone: none; }
@media (max-width: 767.98px) { .hd-hero .ha-story-bg img { object-position: var(--hd-pos-m, 68% 50%); } }
.hd-hero-lead { font-size: var(--ha-s-lead); font-weight: 500; line-height: 1.5; }
.hd-hero-h1 { margin: .75rem 0 0; font-size: var(--ha-s-h2); font-weight: 700; line-height: 1.3; color: inherit; }
.hd-hero-d { margin: .75rem 0 0; font-size: var(--ha-s-body); font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, .92); }

.hd-grp { padding-block: var(--ha-sec); border-top: 1px solid var(--ss-line-strong); }
.hd-hero + .hd-grp { border-top: 0; }
.hd-grp-h { margin: 0; text-align: center; font-size: var(--ha-h); font-weight: 600; line-height: 1.32; letter-spacing: -.01em; color: var(--ha-ink); }
.hd-grp-en { margin: 0; text-align: center; font-size: var(--hd-en); font-weight: 400; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: #5d5d5d; }

.hd-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.hd-list-l { justify-content: flex-start; }
@media (min-width: 768px) { .hd-list-2 { width: calc((100% - 3rem) / 3 * 2 + 1.5rem); margin-inline: auto; } .hd-list-2 .hd-doc { width: calc((100% - 1.5rem) / 2); } }
@media (min-width: 992px) { .hd-list-2 { width: calc((100% - 6rem) / 3 * 2 + 3rem); } .hd-list-2 .hd-doc { width: calc((100% - 3rem) / 2); } }
.hd-doc { flex: 0 0 auto; width: calc((100% - 1rem) / 2); }
@media (min-width: 768px) { .hd-list { gap: 2.5rem 1.5rem; margin-top: 2.5rem; } .hd-doc { width: calc((100% - 3rem) / 3); } }
@media (min-width: 992px) { .hd-list { gap: 2.5rem 3rem; } .hd-doc { width: calc((100% - 6rem) / 3); } }
.hd-doc-btn { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: center; color: inherit; font: inherit; cursor: pointer; }
.hd-doc-pic { position: relative; display: block; overflow: hidden; border-radius: var(--ha-r); background: #92928a; }
.hd-doc-pic .img-ph, .hd-doc-pic img { display: block; width: 100%; border: 0; border-radius: 0; transition: transform .5s ease; }
.hd-doc-pic img { aspect-ratio: 400 / 390; object-fit: cover; }
.hd-doc-pic .img-ph { background: #92928a; }
.hd-doc-pic .img-ph::after { background: rgba(255, 255, 255, .7); font-size: .6875rem; white-space: normal; max-width: 90%; text-align: center; }
.hd-doc-btn:hover .hd-doc-pic .img-ph, .hd-doc-btn:hover .hd-doc-pic img { transform: scale(1.06); }
.hd-doc-plus { position: absolute; right: .75rem; bottom: .75rem; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background-color .2s; }
.hd-doc-plus::before, .hd-doc-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); }
.hd-doc-plus::before { width: 1rem; height: 2px; }
.hd-doc-plus::after { width: 2px; height: 1rem; }
.hd-doc-btn:hover .hd-doc-plus, .hd-doc-btn:focus-visible .hd-doc-plus { background: rgba(255, 255, 255, .6); }
@media (min-width: 768px) { .hd-doc-plus { right: 1rem; bottom: 1rem; width: 3rem; height: 3rem; } .hd-doc-plus::before { width: 1.25rem; } .hd-doc-plus::after { height: 1.25rem; } }
.hd-doc-name { display: block; margin-top: 1rem; font-size: var(--hd-name); font-weight: 500; line-height: 1.5; color: var(--ha-ink); }
@media (min-width: 768px) { .hd-doc-name { margin-top: 1.5rem; } }

.hd-rep { position: relative; background: #6b6b6b; color: #fff; overflow: hidden; }
.hd-rep-bg { position: relative; height: 20rem; }
.hd-rep-bg img, .hd-rep-bg .img-ph { display: block; width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: 80% 50%; border: 0; border-radius: 0; }
.hd-rep-txt { padding: 2rem var(--ss-edge) 3rem; }
.hd-rep-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid #a6a6a6; }
.hd-rep-name { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.43; letter-spacing: -.005em; color: #fff; }
.hd-rep-en { font-size: 1rem; font-weight: 300; line-height: 1.5; letter-spacing: -.005em; color: #fff; }
.hd-rep-career { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.hd-rep-career li { position: relative; padding-left: 1.0625rem; margin-bottom: .5rem; font-size: 1rem; font-weight: 300; line-height: 1.5; letter-spacing: -.005em; color: rgba(255, 255, 255, .8); }
.hd-rep-career li::before { content: "·"; position: absolute; left: 0; top: 0; }
@media (min-width: 992px) {
  .hd-rep { height: 50rem; }
  .hd-rep-bg { position: absolute; inset: 0; height: auto; }
  .hd-rep-bg img, .hd-rep-bg .img-ph { object-position: 78% 50%; }
  .hd-rep > .container { position: relative; height: 100%; }
  .hd-rep-txt { position: absolute; left: 0; top: 50%; z-index: 1; width: max-content; max-width: 52%; padding: 0; transform: translateY(-50%); }
  .hd-rep-head { gap: 0 1rem; padding-bottom: 1.25rem; }
  .hd-rep-name { font-size: 2.625rem; }
  .hd-rep-en { font-size: 1.3125rem; }
  .hd-rep-career { margin-top: 1.875rem; }
  .hd-rep-career li { padding-left: 1.0625rem; margin-bottom: .625rem; font-size: 1.25rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) { .hd-rep-bg { height: 26rem; } .hd-rep-name { font-size: 2rem; } .hd-rep-en { font-size: 1.125rem; } .hd-rep-career li { font-size: 1.125rem; } }

.hd-pop { position: fixed; inset: 0; z-index: var(--ss-z-modal); display: none; align-items: center; justify-content: center; background: rgba(17, 17, 17, .6); }
.hd-pop.is-open { display: flex; }
.hd-pop-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 100%; overflow-y: auto; background: #6b6b6b radial-gradient(ellipse at 72% 40%, #707070 0%, #6b6b6b 70%); color: #fff; }
.hd-pop-close { position: absolute; top: .75rem; right: .75rem; z-index: 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.hd-pop-close .ss-ico { width: 1.75rem; height: 1.75rem; }
.hd-pop-close:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.hd-pop-in { display: flex; flex-direction: column-reverse; width: 100%; padding-top: 3.5rem; }
.hd-pop-txt { padding: 1.5rem var(--ss-edge) 2.5rem; }
.hd-pop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid #a6a6a6; }
.hd-pop-name { margin: 0; font-size: var(--hd-pn); font-weight: 700; line-height: 1.3; color: #fff; }
.hd-pop-en { font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.hd-pop-career { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.hd-pop-career li { position: relative; padding-left: 1rem; font-size: var(--hd-pl); font-weight: 400; line-height: 2; color: rgba(255, 255, 255, .88); }
.hd-pop-career li::before { content: "·"; position: absolute; left: 0; top: 0; }
.hd-pop-career li.is-empty { padding-left: 0; }
.hd-pop-career li.is-empty::before { content: none; }
.hd-pop-pic { align-self: center; width: 100%; max-width: 30rem; margin-top: 1rem; }
.hd-pop-pic .img-ph { width: 70%; max-width: 20rem; margin-inline: auto; }
.hd-pop-pic .img-ph, .hd-pop-pic img { display: block; border: 0; background: rgba(255, 255, 255, .12); }
.hd-pop-pic img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 84%, transparent 100%); }
.hd-pop-pic .img-ph::after { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .5); color: #fff; font-size: .6875rem; white-space: normal; max-width: 90%; text-align: center; }
@media (min-width: 992px) {
  .hd-pop-panel { height: 50rem; max-height: 100%; overflow: hidden; }
  .hd-pop-panel > .container { position: relative; flex: 1; min-height: 0; }
  .hd-pop-in { position: relative; display: block; height: 100%; padding-top: 0; }
  .hd-pop-txt { position: absolute; left: 0; top: 50%; z-index: 1; width: max-content; max-width: 52%; padding: 0; transform: translateY(-50%); }
  .hd-pop-en { font-size: 1.125rem; }
  .hd-pop-career { margin-top: 1.875rem; }
  .hd-pop-career li { line-height: 2.1; }
  .hd-pop-pic { position: absolute; right: calc(0px - (100vw - 100%) / 2); bottom: 0; width: 52vw; max-width: none; height: 100%; margin: 0; }
  .hd-pop-pic .img-ph { width: 100%; max-width: none; margin: 0; }
  .hd-pop-pic .img-ph, .hd-pop-pic img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: 78% bottom; }
  .hd-pop-close { top: 1.5rem; right: 1.5rem; }
}
@media (min-width: 1400px) { .hd-pop-en { font-size: 1.25rem; } }
@media (min-width: 1400px) { .hd-pop-pic { right: calc(9.1875rem - (100vw - 100%) / 2); width: min(61.875rem, 62vw); } }
@media (max-height: 560px) and (min-width: 992px) { .hd-pop-panel { height: 100%; } }
html.ha-fx .hd-pop.is-open .hd-pop-panel { animation: hdPop .35s ease both; }
@keyframes hdPop { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.ha-fx .hd-pop.is-open .hd-pop-panel { animation: none; } .hd-doc-pic .img-ph, .hd-doc-pic img { transition: none; } }