/* ================================================================
   トップページ
   reference/トップページ.svg（1600px幅）の座標をそのまま再現する。
   横位置は「画面中央からの距離」で指定：left: calc(50% + (X - 800)px)
   縦位置は各セクション上端からの距離。
   ================================================================ */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.home .site-header--home{position:absolute;z-index:8;top:0;left:0;width:100%;height:170px;background:transparent}
.home .site-header--home:after{display:none}
.home .site-header--home .header-inner{height:170px}

.hp{position:relative;overflow:hidden;background:#f2f9f8;color:#033632}
:where(.hp) :where(h1,h2,h3,h4,p){margin:0}
:where(.hp) ul{margin:0;padding:0;list-style:none}
.hp section{position:relative}
.hp .svg-art{display:block;overflow:visible}
.hp .svg-art text{user-select:none}

/* ---- 共通見出し（ハッチ文字 + ……日本語） ---- */
.hp-heading{position:absolute;display:flex;align-items:flex-end;font-weight:inherit}
.hp-heading__hatch{flex:none}
.hp-heading__ja{display:flex;align-items:center;flex:none;margin:0 0 12px;color:#033632;font-family:"Zen Maru Gothic",sans-serif;font-size:20px;font-weight:700;line-height:29px;letter-spacing:.15em;white-space:nowrap}
.hp-heading__ja .svg-art{width:53px;height:4px;margin-right:16px}

/* ================= HERO ================= */
.hp-hero{height:839px;z-index:2}
.hp-hero__bg{position:absolute;inset:0;background:#fff center/cover no-repeat}
.hp-hero__bg:after{content:"";position:absolute;z-index:1;inset:0;background:#f2f9f8;opacity:.5;mix-blend-mode:soft-light}
.hp .hp-hero__bg.vegas-container{position:absolute}
.hp-hero__bg.is-slider{background-image:none!important}
/* 参考サイト（etoile-dental.net）と同じ kenburnsrev アニメーション */
.vegas-animation-kenburnsrev{animation:vegas-kenburnsrev ease-in-out}
@keyframes vegas-kenburnsrev{0%{transform:scale(1.1)}100%{transform:scale(1)}}
.hp-hero__inner{position:absolute;top:0;bottom:0;left:65px;width:760px}
.hp-hero__title{position:absolute;top:256px;left:0;color:#007066;font-family:"Zen Maru Gothic",sans-serif;font-size:42px;font-weight:700;line-height:65px;letter-spacing:.1em;white-space:nowrap}
.hp-hero__lead{position:absolute;top:404px;left:0;color:#007066;font-family:"Zen Maru Gothic",sans-serif;font-size:18px;font-weight:700;line-height:32px;letter-spacing:.15em;white-space:nowrap}
.hp-hero__hatch{position:absolute;top:487px;left:-17px;width:919px;height:auto;pointer-events:none}
.hp-hero__circle{position:absolute;display:block;border-radius:50%;transition:translate .35s ease}
.hp-hero__circle .svg-art{width:100%;height:auto}
.hp-hero__circle:hover{translate:0 -6px}
.hp-hero__circle--general{top:604px;left:30px;width:248px;z-index:3}
.hp-hero__circle--anesthesia{top:698px;left:244px;width:242px;z-index:2}
.hp-hero__circle--hospital{top:670px;left:436px;width:252px;z-index:1}

/* 火災事故のお詫び：メインビジュアルの中央に重ねる（2026-10-09 先生修正。デザイン：トップページ – 28 / アートボード – 10） */
/* 中央に置く。画面幅が狭いときは左の丸（一般診療）に重ならないよう 360px より左には出さない */
.hp-alert{position:absolute;z-index:4;top:366px;left:max(calc(50% - 400px),360px);width:800px;min-height:300px;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 0 15px rgba(0,0,0,.31)}
.hp-alert__body{padding:43px 67px 36px;color:#000}
.hp-alert__body h2{display:flex;align-items:center;justify-content:center;gap:35px;white-space:nowrap;font-family:"Zen Maru Gothic",sans-serif;font-size:18px;font-weight:700;line-height:26px;letter-spacing:.1em}
.hp-alert__body h2:before,.hp-alert__body h2:after{content:"";flex:0 1 150px;height:1px;background:rgba(0,0,0,.25)}
.hp-alert__body p{margin-top:15px;font-size:14px;line-height:30px;letter-spacing:.1em}

/* ================= 整形外科センター バナー ================= */
.hp-banner{padding-top:214px}
.hp-banner__link{display:block;width:1000px;margin:0 auto;transition:opacity .3s ease}
.hp-banner__link .svg-art{width:100%;height:auto}
.hp-banner__link:hover{opacity:.85}

/* ================= TOPICS ================= */
.hp-topics{padding-top:112px}
.hp-topics__panel{position:relative;width:1350px;height:480px;margin:0 auto;border-radius:15px;background:#fff}
.hp-topics__head{position:absolute;top:144px;left:75px;width:198px;text-align:center}
.hp-topics__title{width:198px;height:auto}
.hp-topics__ja{display:block;margin-top:12px;font-family:"Zen Maru Gothic",sans-serif;font-size:22px;font-weight:700;line-height:32px;letter-spacing:.05em}
.hp-topics__more{position:absolute;top:160px;left:0;display:flex;width:196px;height:56px;align-items:center;justify-content:center;gap:3px;padding-top:10px;border-top:1px solid #09a89a;border-bottom:1px solid #09a89a;color:#09a89a;font-size:15px;line-height:22px;letter-spacing:.05em}
.hp-topics__more .svg-art{position:relative;top:-5px;width:30px;height:30px;transition:transform .3s ease}
.hp-topics__more:hover .svg-art{transform:translateX(4px)}
.hp-topics__list{position:absolute;top:93px;left:356px;width:900px;border-top:1px solid rgba(52,112,159,.37)}
.hp-topics__list a{display:flex;height:73px;align-items:center;border-bottom:1px solid rgba(52,112,159,.37);transition:background .3s ease}
.hp-topics__list a:hover{background:#f6fcfb}
.hp-topics__list time{position:relative;top:-3px;width:130px;margin-left:38px;color:#00786b;font-family:Jost,sans-serif;font-size:21px;line-height:31px;letter-spacing:0}
.hp-topics__empty{padding:24px 38px;border-bottom:1px solid rgba(52,112,159,.37);font-size:15px}
.hp-topics__text{position:relative;top:-5px;margin-left:34px;font-size:16px;line-height:23px;letter-spacing:.1em}

/* ================= INTRO ================= */
.hp-intro{height:885px;margin-top:123px}
.hp-intro__hatch{position:absolute;top:0;left:calc(50% - 500px);width:1570px;height:auto}
.hp-intro__photo{position:absolute;top:104px;left:0;width:100%;height:517px;overflow:hidden}
.hp-intro__photo-img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;will-change:transform}
.hp-intro__photo-img.is-cover{height:100%;object-fit:cover;object-position:center top;transform:none!important}
.hp-intro__card{position:absolute;top:162px;left:calc(50% - 123px);width:723px;height:600px;border-radius:30px;background:rgba(255,255,255,.95)}
.hp-intro__body{padding:58px 0 0 71px}
.hp-intro__body h2{color:#09a89a;font-family:"Zen Maru Gothic",sans-serif;font-size:35px;font-weight:700;line-height:51px;letter-spacing:.1em}
.hp-intro__body h3{margin-top:15px;color:#09a89a;font-family:"Zen Maru Gothic",sans-serif;font-size:22px;font-weight:700;line-height:32px;letter-spacing:.1em}
.hp-intro__body h3 span{background:linear-gradient(#f8d471,#f8d471) 14px 30px/170px 3px no-repeat}
.hp-intro__body p{margin-top:42px;font-size:15px;font-weight:500;line-height:32px;letter-spacing:.1em}
.hp-intro__body p+p{margin-top:32px}
.hp-intro__foot{position:absolute;right:0;bottom:0;left:0;height:141px;padding:33px 259px 0 0;border-radius:0 0 30px 30px;background:rgba(9,168,154,.95);color:#fff;font-size:18px;font-weight:700;line-height:35px;letter-spacing:.1em;text-align:right}
.hp-intro__illust{position:absolute;top:392px;left:486px;width:218px;height:auto}

/* ================= MEDICAL ================= */
.hp-medical{height:1554px}
.hp-medical__panel{position:absolute;top:0;right:0;left:calc(50% - 573px);height:1331px;border-radius:30px 0 0 30px;background:#fff}
.hp-medical__stamp{position:absolute;top:91px;left:calc(50% - 662px);width:161px;height:auto}
.hp-medical__stamp .svg-art{width:100%;height:auto}
.hp-medical__dots{position:absolute;top:445px;left:calc(50% - 662px);width:136px;height:auto}
.hp-medical__deco{position:absolute;top:293px;left:calc(50% + 395px);width:492px;height:auto}
.hp-heading--medical{top:113px;left:calc(50% - 470px)}
.hp-heading--medical .hp-heading__hatch{width:467px;height:auto;margin-right:35px}
.hp-medical__lead{position:absolute;top:281px;left:calc(50% - 401px)}
.hp-medical__lead h3{color:#09a89a;font-family:"Zen Maru Gothic",sans-serif;font-size:25px;font-weight:700;line-height:36px;letter-spacing:.15em}
.hp-medical__lead p{margin-top:17px;font-size:15px;font-weight:500;line-height:32px;letter-spacing:.1em}

.hp-card{position:absolute;display:block;width:300px;height:390px;border:solid rgba(15,152,140,.2);border-width:9px 10px;border-radius:50px;background:#0f988c padding-box;color:#fff;text-align:center;transition:translate .35s ease}
.hp-card:hover{translate:0 -6px}
.hp-card--mint{border-color:rgba(88,198,175,.2);background-color:#58c6af}
.hp-card--light{height:300px;background-color:#fff;color:#033632}
.hp-card--1{top:481px;left:calc(50% - 490px)}
.hp-card--2{top:481px;left:calc(50% - 149px)}
.hp-card--3{top:481px;left:calc(50% + 191px)}
.hp-card--4{top:911px;left:calc(50% - 489px)}
.hp-card--5{top:911px;left:calc(50% - 149px)}
.hp-card--6{top:911px;left:calc(50% + 191px)}
.hp-card__icon{position:absolute;height:auto}
.hp-card h4{position:absolute;top:159px;left:0;width:100%;font-family:"Zen Maru Gothic",sans-serif;font-size:23px;font-weight:700;line-height:33px;letter-spacing:.2em}
.hp-card small{position:absolute;top:201px;left:0;width:100%;font-family:Jost,sans-serif;font-size:14px;font-weight:700;line-height:21px;letter-spacing:.15em;opacity:.49}
.hp-card p{position:absolute;top:262px;left:0;width:100%;font-size:15px;font-weight:500;line-height:22px;letter-spacing:.1em}
.hp-card__arrow{position:absolute;top:312px;left:calc(50% - 20px);width:40px;height:auto}
.hp-card--1 .hp-card__icon{top:35px;left:97px;width:94px}
.hp-card--2 .hp-card__icon{top:36px;left:95px;width:90px}
.hp-card--3 .hp-card__icon{top:42px;left:114px;width:62px}
.hp-card--3 h4{top:143px;letter-spacing:.1em}
.hp-card--3 small{top:217px}
.hp-card--3 p{top:250px;line-height:24px}
.hp-card--light h4{top:111px;color:#09a89a;font-size:20px;line-height:29px}
.hp-card--light small{top:145px;color:#10a79a}
.hp-card--light p{top:182px}
.hp-card--light .hp-card__arrow{top:224px}
.hp-card--4 .hp-card__icon{top:21px;left:104px;width:72px}
.hp-card--5 .hp-card__icon{top:24px;left:103px;width:95px}
.hp-card--6 .hp-card__icon{top:26px;left:95px;width:110px}

/* ================= FUTURE ================= */
.hp-future{height:1860px}
.hp-future__wood{position:absolute;top:0;left:-50px;width:493px;height:auto}
/* 背景の白い円。--1 は木・猫と一緒に左端に固定（木のイラストより手前、猫・本文より奥） */
.hp-future__circle{position:absolute;border-radius:50%;background:#fff;pointer-events:none}
.hp-future__circle--1{top:170px;left:-203px;width:1279px;height:1279px}
.hp-future__circle--2{top:1209px;left:calc(50% + 353px);width:479px;height:479px;opacity:.95}
.hp-future__cat{position:absolute;top:76px;left:-12px;width:247px;height:auto}
/* 手と白丸は1枚の画像。右端に固定 */
.hp-future__hand{position:absolute;top:201px;right:-109px;width:377px;height:auto}
.hp-heading--future{top:96px;left:calc(50% - 326px);display:block;width:481px;height:160px}
.hp-heading--future .hp-heading__hatch{width:386px;height:auto}
.hp-heading--future .hp-heading__ja{position:absolute;top:128px;left:168px;margin:0}
.hp-heading--future .hp-heading__ja .svg-art{margin-right:12px}

.hp-feature{position:absolute;left:0;width:100%;scroll-margin-top:120px}
.hp-feature--1{top:369px}
.hp-feature--2{top:853px}
.hp-feature--3{top:1345px}
.hp-feature__photo{position:absolute;top:0;left:calc(50% - 600px);width:530px;height:400px;border-radius:30px;object-fit:cover}
.hp-feature__badge{position:absolute;top:14px;left:calc(50% - 130px);display:flex;width:120px;height:120px;padding-top:27px;flex-direction:column;align-items:center;border-radius:50%;color:#fff;font-family:Jost,sans-serif;font-size:47px;font-weight:400;line-height:50px}
.hp-feature__badge small{font-size:11px;font-weight:700;line-height:16px;letter-spacing:.2em;text-indent:.2em}
.hp-feature__badge--pink{background:#ffa8a8}
.hp-feature__badge--mint{background:#58c6af}
.hp-feature__copy{position:absolute;top:11px;left:calc(50% + 48px);width:560px}
.hp-feature h3{color:#09a89a;font-family:"Zen Maru Gothic",sans-serif;font-size:30px;font-weight:700;line-height:50px;letter-spacing:.1em}
.hp-feature__copy p{margin-top:24px;font-size:15px;font-weight:500;line-height:32px;letter-spacing:.1em}
.hp-feature__links{display:flex;margin:31px 0 0 -3px;flex-direction:column;align-items:flex-start;gap:14px}
.hp-pill{display:inline-flex;height:46px;padding:0 15px 0 25px;align-items:center;gap:22px;border:3px solid rgba(88,198,175,.3);border-radius:23px;background:#fff padding-box;color:#09a89a;font-size:15px;line-height:22px;letter-spacing:.1em;transition:background-color .3s ease}
.hp-pill .svg-art{width:18px;height:auto;transition:transform .3s ease}
.hp-pill:hover{background-color:#eaf8f5}
.hp-pill:hover .svg-art{transform:translateX(4px)}
.hp-feature--2 .hp-feature__photo{left:calc(50% + 71px)}
.hp-feature--2 .hp-feature__badge{top:22px;left:calc(50% + 11px)}
.hp-feature--2 .hp-feature__copy{top:64px;right:calc(50% + 45px);left:auto;text-align:right}
.hp-feature--2 .hp-feature__links{margin:31px 0 0;align-items:flex-end}
.hp-feature--3 .hp-feature__badge{top:16px}
.hp-feature--3 .hp-feature__copy{top:64px}

/* ================= DOCTOR ================= */
.hp-doctor{height:1833px}
.hp-doctor__wood{position:absolute;top:0;left:calc(50% + 55px);width:521px;height:auto}
.hp-doctor__panel{position:absolute;top:145px;bottom:-80px;left:0;width:calc(50% + 500px);border-radius:0 30px 30px 0;background:#fff}
.hp-doctor__pets{position:absolute;top:87px;left:calc(50% + 305px);width:321px;height:auto}
.hp-heading--doctor{top:223px;left:calc(50% - 600px)}
.hp-heading--doctor .hp-heading__hatch{width:451px;height:auto;margin-right:24px}
.hp-heading--doctor .hp-heading__ja{margin-bottom:14px}
.hp-heading--doctor .hp-heading__ja .svg-art{margin-right:12px}
.hp-doctor__eyebrow{position:absolute;top:424px;left:calc(50% - 600px);color:#00786b;font-family:"Zen Maru Gothic",sans-serif;font-size:15px;font-weight:700;line-height:22px;letter-spacing:.3em;white-space:nowrap}
.hp-doctor__quote{position:absolute;top:458px;left:calc(50% - 600px);color:#09a89a;font-family:"Zen Maru Gothic",sans-serif;font-size:30px;font-weight:700;line-height:55px;letter-spacing:.1em;white-space:nowrap}
.hp-doctor__quote span{padding-left:70px}
.hp-doctor__photo{position:absolute;top:398px;left:50%;width:599px;height:707px;border-radius:30px;object-fit:cover;object-position:86% 0}
.hp-doctor__message{position:absolute;z-index:1;top:613px;left:calc(50% - 605px);width:660px;height:218px;padding:25px 0 0 39px;border:5px solid rgba(9,168,154,.3);border-radius:20px;background:#f6fcfb padding-box}
.hp-doctor__message>p:first-child{font-size:15px;font-weight:500;line-height:32px;letter-spacing:.1em}
.hp-doctor__name{position:absolute;top:119px;right:30px;display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:24px;text-align:right}
.hp-doctor__name span{color:#09a89a;font-family:"Zen Maru Gothic",sans-serif;font-size:15px;font-weight:500;letter-spacing:.1em}
.hp-doctor__name strong{color:#00786c;font-family:"Zen Maru Gothic",sans-serif;font-size:22px;font-weight:700;letter-spacing:.05em}
.hp-doctor__name small{grid-column:1/3;margin:6px 6px 0 0;color:#58c6af;font-family:Jost,sans-serif;font-size:14px;font-weight:700;letter-spacing:.2em}
.hp-doctor__stats{position:absolute;top:886px;left:calc(50% - 604px);display:flex;gap:18px}
.hp-doctor__stats li{width:168px;text-align:center}
.hp-doctor__stats p{margin-top:8px;color:#00786b;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.1em;white-space:nowrap}
.hp-stat{position:relative;display:flex;width:168px;height:168px;padding-top:31px;flex-direction:column;align-items:center;border:5px solid #d2f3ec;border-radius:50%;background:#fff;color:#00a99a;font-family:"Zen Maru Gothic",sans-serif;font-weight:700}
.hp-stat__label{font-size:15px;line-height:22px;letter-spacing:.1em}
.hp-stat b{margin-top:12px;font-family:Jost,sans-serif;font-size:38px;font-weight:500;line-height:38px}
.hp-stat b small{margin-right:2px;font-family:"Zen Maru Gothic",sans-serif;font-size:17px;font-weight:700;letter-spacing:.1em}
.hp-stat__unit{margin-top:-6px;font-size:17px;line-height:22px;letter-spacing:.1em}
.hp-stat .hp-stat__text{margin-top:16px;font-family:"Zen Maru Gothic",sans-serif;font-size:25px;font-weight:700;line-height:36px}
.hp-doctor__career{position:absolute;top:1188px;left:calc(50% - 600px);width:997px}
.hp-doctor__career h3{position:relative;height:28px;padding-left:23px;line-height:24px;border-bottom:1px solid #09a89a;color:#09a89a;font-family:"Zen Maru Gothic",sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em}
.hp-doctor__career h3:before{content:"";position:absolute;top:6px;left:0;width:12px;height:12px;border-radius:50%;background:#93e1d0}
.hp-doctor__career p{margin-top:12px;font-size:15px;line-height:32px;letter-spacing:.1em}
.hp-doctor__career i{margin:0 1.2em;font-style:normal;opacity:.35}

.hp-gallery{position:absolute;top:1403px;left:0;width:100%;height:334px;overflow:hidden}
.hp-gallery__hatch{position:absolute;top:0;left:calc(50% - 1336px);width:2262px;height:auto}
.hp-gallery__track{position:relative;display:flex;width:max-content;padding-top:63px;align-items:flex-start;gap:40px;animation:hp-gallery 50s linear infinite}
.hp-gallery__track img{width:300px;height:240px;flex:none;border-radius:15px;object-fit:cover}
.hp-gallery__track img:nth-child(even){margin-top:34px}
.hp-gallery:hover .hp-gallery__track{animation-play-state:paused}
@keyframes hp-gallery{from{transform:translateX(-30px)}to{transform:translateX(calc(-50% - 50px))}}
@media (prefers-reduced-motion:reduce){.hp-gallery__track{animation:none}}

/* 最下部のお問い合わせエリアと重なるパネルを隠す */
.home .access-section{position:relative;z-index:1}

/* ================================================================
   1240px未満：座標レイアウトを解除して縦積みにする
   ================================================================ */
@media (max-width:1239px){
  .hp section{height:auto}
  .hp-hero{height:auto;min-height:760px;padding:190px 0 40px}
  .hp-hero__bg{bottom:auto;height:640px;background-position:62% top}
  .hp-hero__bg .vegas-slide-inner{background-position:62% top!important}
  .hp-hero__inner{position:relative;left:auto;width:auto;padding:0 65px;font-size:0}
  .hp-hero__title,.hp-hero__lead{position:relative;top:auto;white-space:normal}
  .hp-hero__lead{margin-top:18px}
  .hp-hero__hatch{position:absolute;top:340px;left:10px;width:min(919px,90vw)}
  .hp-hero__circle{position:relative;top:auto;left:auto;display:inline-block;width:min(31%,248px)!important;margin:170px -1% 0 0;vertical-align:top}
  .hp-hero__circle--anesthesia{margin-top:200px}.hp-hero__circle--hospital{margin-top:185px}
  .hp-alert{position:relative;top:auto;left:auto;width:min(800px,calc(100% - 48px));margin:40px auto 0}
  .hp-alert__body{padding:34px 40px 30px}
  .hp-banner{padding:80px 24px 0}
  .hp-banner__link{width:100%;max-width:1000px}
  .hp-topics{padding:70px 24px 0}
  .hp-topics__panel{width:100%;height:auto;padding:50px 40px}
  .hp-topics__head,.hp-topics__list{position:static;width:100%}
  .hp-topics__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
  .hp-topics__head h2{display:flex;align-items:center;gap:20px}
  .hp-topics__title{width:150px}
  .hp-topics__ja{margin:0}
  .hp-topics__more{position:static;width:196px}
  .hp-topics__list a{height:auto;min-height:73px;padding:12px 0;flex-wrap:wrap;row-gap:6px}
  .hp-topics__list time{margin-left:10px}
  .hp-topics__text{flex-basis:100%;margin-left:10px}
  .hp-intro{margin-top:90px;padding:75px 0 90px}
  .hp-intro__hatch{left:24px;width:1100px}
  .hp-intro__photo{position:relative;top:auto;height:420px}
  .hp-intro__card{position:relative;top:auto;left:auto;width:auto;height:auto;margin:-120px 24px 0;padding-bottom:0}
  .hp-intro__body{padding:48px 40px 40px}
  .hp-intro__body p br{display:none}
  .hp-intro__foot{position:relative;height:auto;padding:30px 230px 30px 40px;text-align:left}
  .hp-intro__illust{top:auto;bottom:0;left:auto;right:20px}
  .hp-medical{padding:90px 24px 100px}
  .hp-medical__panel{left:24px;bottom:0;height:auto}
  .hp-medical__stamp{top:20px;left:10px;width:120px}
  .hp-medical__dots{display:none}
  .hp-medical__deco{top:230px;left:auto;right:-160px;width:380px;opacity:.6}
  .hp-heading{position:relative;top:auto!important;left:auto!important;flex-wrap:wrap;column-gap:24px}
  .hp-heading__hatch{max-width:calc(100vw - 60px)}
  .hp-heading--medical{margin-left:120px}
  .hp-heading--future{display:flex;width:auto;height:auto}
  .hp-heading--future .hp-heading__ja{position:static;margin:0 0 12px}
  .hp-medical__lead{position:relative;top:auto;left:auto;margin:36px 0 0 40px}
  .hp-medical__lead p br{display:none}
  .hp-medical__cards{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px;margin:50px 20px 0 40px}
  .hp-card{position:relative;top:auto!important;left:auto!important;width:auto}
  .hp-card__icon{left:50%!important;transform:translateX(-50%)}
  .hp-future{padding:230px 24px 40px}
  .hp-future__hand{top:120px;right:-75px;width:260px}
  .hp-future__wood{width:360px}.hp-future__cat{top:55px;width:180px}
  .hp-feature{position:relative;top:auto!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;margin-top:80px}
  .hp-feature__photo,.hp-feature__copy,.hp-feature__badge{position:relative!important;top:auto!important;right:auto!important;left:auto!important}
  .hp-future__circle{display:none}
  .hp-feature__photo{width:100%;height:auto;aspect-ratio:530/400}
  .hp-feature__copy{width:auto}
  .hp-feature__copy p br{display:none}
  .hp-feature__badge{position:absolute!important;top:-20px!important;left:calc(50% - 85px)!important}
  .hp-feature--2 .hp-feature__photo{order:2}
  .hp-feature--2 .hp-feature__badge{left:calc(50% - 35px)!important}
  .hp-pill{height:auto;min-height:46px;padding-block:8px}
  .hp-doctor{padding:120px 24px 60px}
  .hp-doctor__wood{top:0;left:auto;right:40px;width:380px}
  .hp-doctor__panel{top:110px;width:calc(100% - 24px)}
  .hp-doctor__pets{top:40px;left:auto;right:40px;width:240px}
  .hp-heading--doctor{margin:40px 0 0 16px}
  .hp-doctor__eyebrow,.hp-doctor__quote,.hp-doctor__photo,.hp-doctor__message,.hp-doctor__stats,.hp-doctor__career{position:relative;top:auto;left:auto}
  .hp-doctor__eyebrow{margin:40px 0 0 16px;white-space:normal}
  .hp-doctor__quote{margin:16px 0 0 16px;white-space:normal}
  .hp-doctor__photo{width:min(599px,calc(100% - 40px));height:auto;aspect-ratio:599/707;margin:36px 0 0 16px}
  .hp-doctor__message{width:auto;height:auto;margin:36px 16px 0;padding:25px 30px}
  .hp-doctor__name{position:static;justify-content:end;margin-top:14px}
  .hp-doctor__message>p:first-child br{display:none}
  .hp-doctor__stats{flex-wrap:wrap;margin:40px 0 0 16px}
  .hp-doctor__career{width:auto;margin:50px 16px 0}
  .hp-gallery{position:relative;top:auto;margin-top:60px;margin-left:-24px;width:calc(100% + 48px)}
}
@media (max-width:767px){
  .hp-hero{padding-top:110px}
  .hp-feature{scroll-margin-top:90px}
  .hp-hero__inner{padding:0 20px}
  .hp-hero__title{font-size:27px;line-height:44px}
  .hp-hero__lead{font-size:14px;line-height:26px;letter-spacing:.08em}
  .hp-hero__lead br{display:none}
  .hp-hero__hatch{top:250px}
  .hp-hero__bg{height:470px}
  .hp-hero__circle{width:34%!important;margin:130px -2% 0 0}
  .hp-hero__circle--anesthesia{margin-top:150px}.hp-hero__circle--hospital{margin-top:140px}
  .hp-banner{padding:50px 16px 0}
  .hp-banner__link{overflow-x:auto}
  .hp-banner__link .svg-art{min-width:0}
  .hp-topics{padding:50px 16px 0}
  .hp-topics__panel{padding:36px 20px}
  .hp-topics__head{flex-direction:column;gap:20px}
  .hp-topics__head h2{flex-direction:column;gap:8px}
  .hp-topics__list time{width:110px;font-size:17px}
  .hp-topics__text{font-size:14px}
  .hp-intro__hatch{width:640px}
  .hp-intro{padding-top:44px}
  .hp-intro__photo{height:300px}
  .hp-intro__card{margin:-80px 12px 0}
  .hp-intro__body{padding:36px 22px 30px}
  .hp-intro__body h2{font-size:25px;line-height:38px}
  .hp-intro__body h3{font-size:16px;letter-spacing:.04em}
  .hp-intro__body h3 span{background-position:10px 29px;background-size:125px 3px}
  .hp-intro__body p{margin-top:26px;font-size:14px;line-height:28px}
  .hp-intro__foot{padding:24px 22px 150px;font-size:15px;line-height:28px}
  .hp-intro__illust{width:160px}
  .hp-medical{padding:70px 12px 60px}
  .hp-medical__panel{left:12px}
  .hp-medical__stamp{top:10px;left:0;width:84px}
  .hp-heading--medical{margin-left:40px}
  .hp-heading__hatch{width:min(300px,70vw)!important;margin-right:0!important}
  .hp-heading__ja{margin:10px 0 0!important;font-size:16px}
  .hp-medical__lead{margin:30px 12px 0 30px}
  .hp-medical__lead h3{font-size:17px;line-height:30px;letter-spacing:.06em}
  .hp-medical__lead p{font-size:14px;line-height:28px}
  .hp-medical__cards{grid-template-columns:1fr 1fr;gap:14px;margin:36px 6px 0 20px}
  .hp-card{height:300px;border-radius:34px;border-width:6px}
  .hp-card--light{height:250px}
  .hp-card__icon{top:22px!important;width:62px!important}
  .hp-card h4,.hp-card--3 h4{top:100px;font-size:16px;line-height:24px;letter-spacing:.05em}
  .hp-card small,.hp-card--3 small{top:152px;font-size:9px;letter-spacing:.08em}
  .hp-card p,.hp-card--3 p{top:176px;padding:0 8px;font-size:12px;line-height:18px}
  .hp-card p br{display:none}
  .hp-card__arrow{top:auto!important;bottom:16px;width:34px;left:calc(50% - 17px)}
  .hp-card--light h4{top:94px}.hp-card--light small{top:122px}.hp-card--light p{top:146px}
  .hp-future{padding:170px 16px 30px}
  .hp-future__wood{width:250px}.hp-future__cat{top:38px;width:125px}
  .hp-future__hand{top:70px;right:-52px;width:180px}
  .hp-feature{grid-template-columns:1fr;gap:26px;margin-top:60px}
  .hp-feature--2 .hp-feature__photo{order:0}
  .hp-feature--2 .hp-feature__copy{text-align:left}
  .hp-feature--2 .hp-feature__links{align-items:flex-start}
  .hp-feature__badge,.hp-feature--2 .hp-feature__badge{top:-24px!important;left:auto!important;right:-6px;width:90px;height:90px;padding-top:20px;font-size:34px;line-height:38px}
  .hp-feature h3{font-size:22px;line-height:36px}
  .hp-feature__copy p{margin-top:14px;font-size:14px;line-height:28px}
  .hp-pill{font-size:13px;gap:12px}
  .hp-doctor{padding:90px 12px 40px}
  .hp-doctor__wood{right:0;width:250px}
  .hp-doctor__panel{top:80px;width:calc(100% - 12px)}
  .hp-doctor__pets{top:30px;right:10px;width:160px}
  .hp-doctor__quote{font-size:22px;line-height:40px}
  .hp-doctor__quote span{padding-left:1em}
  .hp-doctor__eyebrow{font-size:13px;letter-spacing:.15em}
  .hp-doctor__photo{width:calc(100% - 32px)}
  .hp-doctor__message{padding:22px 20px}
  .hp-doctor__message>p:first-child{font-size:14px;line-height:28px}
  .hp-doctor__name{right:20px;column-gap:12px}
  .hp-doctor__name span{font-size:12px}
  .hp-doctor__stats{gap:10px;justify-content:center;margin-left:0}
  .hp-doctor__stats li{width:31%}
  .hp-stat{width:100%;height:auto;aspect-ratio:1;padding-top:14%;border-width:4px}
  .hp-stat__label{font-size:11px;line-height:16px;letter-spacing:0}
  .hp-stat b{font-size:24px;line-height:28px}
  .hp-stat b small,.hp-stat__unit{font-size:12px}
  .hp-stat .hp-stat__text{margin-top:10px;font-size:16px;line-height:24px}
  .hp-doctor__stats p{font-size:10px;line-height:16px;letter-spacing:0;white-space:normal}
  .hp-doctor__stats p br{display:none}
  .hp-doctor__career p{font-size:13px;line-height:26px}
  .hp-doctor__career p br{display:none}
  .hp-doctor__career i{margin:0 .5em}
  .hp-gallery{margin-left:-12px;width:calc(100% + 24px)}
  .hp-gallery__track img{width:220px;height:176px}
}

/* ================================================================
   スクロールアニメーション（WOW.js + animate.css）
   移動量は参考サイトに合わせて控えめに上書き（animate.cssの既定は要素幅・高さの100%）
   ================================================================ */
/* 読み込み完了まで非表示（ファーストビューのちらつき防止） */
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}
.hp .blurIn.animated{animation-duration:1.6s}
@media (prefers-reduced-motion:reduce){main.preload .wow{opacity:1!important}.hp .animated{animation:none!important}}

/* =========================================================
   SP ファーストビュー（767px以下）
   リファレンス「アートボード – 2.svg」（幅400px）の配置を vw に換算（400px時 1vw=4px）
   ① メインビジュアル：SP用画像／高さ370px（ヘッダーの下に潜り込む）／キャッチ非表示
   ② 3つの丸：メインビジュアル下端（370px）をまたぐグループとして中央配置
   ③ お知らせ：畳む機能なしで固定表示
   ========================================================= */
@media (max-width:767px){
  .hp-hero{min-height:0;padding:0;background:#f0f9f8}
  .hp-hero__bg{top:0;bottom:auto;height:370px;background-position:center top}
  .hp-hero__bg:not(.is-slider){background-image:var(--hero-sp)!important}
  .hp-hero__bg .vegas-slide-inner{background-position:center top!important}
  /* 丸の下にミント色の余白を残してお知らせへ（400px時 471px） */
  .hp-hero__inner{position:relative;height:calc(370px + 25.25vw);padding:0}
  /* キャッチはSPでは非表示。h1は見出し構造・読み上げ用に残すため視覚的にだけ隠す */
  .hp-hero__title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hp-hero__lead{display:none}
  .hp-hero__hatch{top:calc(370px - 28.25vw);left:calc(50% - 46.25vw);width:89.25vw;transform:none}
  /* 丸3つ：位置は画面中央からのオフセット、高さはメインビジュアル下端からのオフセット。
     麻酔・入院のSVGは円の周りに余白があるため、円の見た目のサイズがリファレンスと合うよう要素を大きめにしている */
  .hp-hero__circle{position:absolute;bottom:auto;margin:0}
  .hp-hero__circle--general{top:calc(370px - 20vw);left:calc(50% - 45.75vw);width:36.25vw!important}
  .hp-hero__circle--anesthesia{top:calc(370px - 8.875vw);left:calc(50% - 14.125vw);width:35.75vw!important;margin:0}
  .hp-hero__circle--hospital{top:calc(370px - 13vw);left:calc(50% + 13vw);width:37.25vw!important;margin:0}
  .hp-hero{min-height:calc(370px + 25.25vw)}
  .hp-alert{width:calc(100% - 50px);min-height:0;margin:calc(99px - 370px - 25.25vw) auto 30px}
  .hp-alert__body{padding:32px 20px 30px}
  .hp-alert__body h2{display:block;font-size:16px;text-align:center}
  .hp-alert__body h2:before,.hp-alert__body h2:after{content:none}
  .hp-alert__body p{margin-top:14px;line-height:26px}
}