@charset "utf-8";

/* ==================================================================
   style-new.css
   PC/SP共通・通常フロー構造の新レイアウト用スタイル。
   既存の css/style.css とは独立しており、index-new.html からのみ読込む。
   段階移植: 現在は「ヘッダー〜実績数字カード」までを収録。
   ================================================================== */

:root{
  --maroon:#ac002a;
  --maroon-soft:#fdf2f2;
  --border-grey:#ddd;
  --placeholder-grey:#d9d9d9;
  --page-bg:#efebeb;
  --text:#000;
}
*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  scroll-behavior:smooth;
  scroll-padding-top:60px;
}
html.no-scroll,
html.no-scroll body{
  overflow:hidden;
  /*height:100%;*/
}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--text);
  background:var(--page-bg);
  overflow-x:clip;
}
img{display:block;max-width:100%;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;padding:0;}
a{color:inherit;}

.oswald{font-family:"Oswald",sans-serif;}
.accent{color:var(--maroon);}

@media (width>=768px){
  .forMobile{display:none}
}

/* ---------------- Page container ---------------- */
.page{
  width:100%;
  margin:0 auto;
  background:var(--page-bg);
  overflow-x:clip;
}

/* ==================================================================
   Header / Navigation（PC・SP共通マークアップ）
   SP: ページ最上部に固定される白背景の帯。
   PC: ヒーロー画像の上に重ねて浮かせる（装飾的な重なりのため absolute）。
   ================================================================== */
.site-header{
  position:relative;
  z-index:50;
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border-radius:100px;
  padding:10px 20px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.site-header__logo{height:20px;width:auto;}
.site-header__nav{
  display:none;
}
.site-header__toggle{
  width:24px;
  height:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.site-header__toggle span{
  display:block;
  width:100%;
  height:2px;
  background:#000;
}

@media (max-width:767px){
  .site-header{
    position:sticky;
    top:0;
    z-index:150;
    background:var(--page-bg);
    padding:10px 20px;
  }
}


@media (min-width:768px){
  .site-header{
    position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:min(1350px, 94%);
    transition:background 0.2s ease-out;
  }

  body.scrolled .site-header{
    background:white;
    border-radius:10px;
  }

  .site-header__bar{
    background:none;
    box-shadow:none;
    padding:15px 50px;
  }
  .site-header__logo{height:auto;width:172px;}
  .site-header__nav{
    display:flex;
    align-items:center;
    gap:30px;
    font-weight:500;
    font-size:16px;
    white-space:nowrap;
  }
  .site-header__link{text-decoration:none;}
  .site-header__toggle{display:none;}
}






/* ---- mobile nav menu overlay ---- */
.site-menu{display:none;}
.site-menu.is-open{
  display:block;
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--page-bg);
  overflow-y:auto;
}
.site-menu__backdrop{
  position:absolute;
  inset:0;
  background:url("../img/hero-bg-doctor.jpg") center top / cover no-repeat;
  opacity:.2;
}
.site-menu__header{
  position:relative;
  z-index:1;
  margin:20px auto 0;
  width:335px;
  max-width:calc(100% - 40px);
  height:20px;
  background:#fff;
  border-radius:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
}
.site-menu__logo{height:20px;width:auto;}
.site-menu__close{
  position:relative;
  width:20px;
  height:20px;
}
.site-menu__close::before,
.site-menu__close::after{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:20px;
  height:2px;
  background:#000;
}
.site-menu__close::before{transform:rotate(45deg);}
.site-menu__close::after{transform:rotate(-45deg);}
.site-menu__panel{
  position:relative;
  z-index:1;
  margin:24px auto 0;
  width:335px;
  max-width:calc(100% - 40px);
  background:#fff;
  border-radius:0 0 20px 20px;
  padding:40px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
}
.site-menu__link{
  font-weight:500;
  font-size:16px;
  color:#000;
  text-decoration:none;
}

@media (min-width:768px){
  /* デスクトップはヘッダー内に横並びリンクを表示するため、
     オーバーレイメニュー自体は不要（トグルボタンも非表示）。 */
  .site-menu{display:none !important;}
}

/* ==================================================================
   Hero
   背景写真とグラデーションは装飾レイヤーとして absolute のまま。
   コンテンツ（見出し・リード文・周年表示）は通常フロー＋Gridで配置し、
   文章量が変化しても高さが自然に追従する。
   ================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding-bottom:40px;
}
.hero__media{
  position:absolute;
  inset:0;
}
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__tint{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(161,196,223,0) 78.6%, rgba(161,196,223,.85) 91.4%),
    linear-gradient(90deg, rgba(161,196,223,.85) 12.9%, rgba(161,196,223,0) 20.4%);
}
.hero__fade{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(239,235,235,0) 39.9%, var(--page-bg) 77.6%);
}

.hero__content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-areas:
    "anniversary"
    "text";
  gap:30px;
  padding:80px 20px 0;
}
.hero__anniversary{grid-area:anniversary;}
.hero__text{grid-area:text;}

@media (width<768px){
  .hero__text{
    position:relative;
  }
  .hero__text::before{
    content:"";
    width:200vw;
    height:300%;
    position:absolute;
    left:0%;
    top:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(closest-side,white,transparent);
    z-index:-1;
  }
}

.hero__anniversary-top{
  display:flex;
  align-items:center;
}
.hero__num{
  font-size:100px;
  color:var(--maroon);
  line-height:1;
}
.hero__anniversary-meta{
  display:flex;
  flex-direction:column;
}
.hero__th{
  font-weight:700;
  font-size:42px;
  color:var(--maroon);
  line-height:1;
  white-space:nowrap;
}
.hero__anniv-label{
  font-size:28px;
  color:var(--maroon);
  white-space:nowrap;
}
.hero__years{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:18px;
  color:var(--maroon);
  white-space:nowrap;
  margin-top:10px;
}
.hero__years img{width:16px;height:1px;}

.hero__headline{
  margin:0;
  font-weight:700;
  font-size:26px;
  line-height:1.5;
}
.hero__headline .accent{color:var(--maroon);}
.hero__lead{
  margin-top:20px;
  font-size:14px;
  line-height:2;
}

@media (min-width:768px){
  .hero{padding-bottom:60px;}
  .hero__content{
    grid-template-columns:1fr auto;
    grid-template-areas:"text anniversary";
    align-items:center;
    max-width:1200px;
    margin:0 auto;
    padding:170px 20px 0;
    gap:40px;
  }
  .hero__num{font-size:300px;}
  .hero__th{font-size:128px;}
  .hero__anniv-label{font-size:48px;}
  .hero__years{font-size:36px;gap:11px;margin-top:20px;padding-left: 16px;}
  .hero__years img{width:106px;}
  .hero__headline{font-size:40px;}
  .hero__lead{font-size:16px;margin-top:30px;}
}

/* ==================================================================
   医師カルテ ミニCTA（SP限定）
   PC版では現状 未実装（旧PC実装もコメントアウトされた未使用要素だった
   ため、既存の見え方に合わせてデスクトップでは非表示のままとする）。
   ================================================================== */
.cta-mini{
  display:flex;
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 10;
  width: 250px;
  opacity: 0;
}
.animationend .cta-mini{
  opacity: 0;
}
.cta-mini.is-dismissed{
  display: none;
}
@media (max-width:767px){
  .cta-mini{
    display:none;
    align-items:stretch;
    position:relative;
    width:calc(100% - 40px);
    margin:-70px auto 30px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    overflow:hidden;
    background:#fff;
    z-index:5;
  }
}
.cta-mini__thumb{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,0) 18.6%, #fff 51.4%),
    url("../img/card-doctor-thumb.jpg") left center / cover no-repeat;
  border-radius: 10px;
  overflow: hidden;
}
.cta-mini__body{
  width: 250px;
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:24px; 
  padding:20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.1);
  align-items: flex-end;
}
.cta-mini__text p{line-height:1.5;max-width: 160px;}
.cta-mini__line1{font-size:12px;}
.cta-mini__line2{font-size:14px;font-weight:700;margin-top: 10px;}
.cta-mini__brand{font-size:20px;line-height:1.4;}
.cta-mini__btn{
  background:var(--maroon);
  color:#fff;
  border-radius:100px;
  padding:8px 20px;
  font-weight:700;
  font-size:12px;
}
.cta-mini__close{
  position:absolute;
  top:-9px;
  right:-9px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.cta-mini__close img{
  width:7px;
  height:7px;
  transform:rotate(45deg);
}

/* ==================================================================
   お知らせ（Notices carousel）
   PC/SP共通のカルーセルDOMを使い、main-new.js のカルーセル処理を共有する。
   ================================================================== */
.notices{
  padding:40px 20px 30px;
  position:relative;
  z-index:5;
}
.notices__heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:24px;
  position: relative;
}
.notices__flank{width:33px;height:5px;}
.notices__flank--left{transform:scaleX(-1);}
.notices__heading h2{
  margin:0;
  font-weight:700;
  font-size:20px;
  white-space:nowrap;
}

.carousel__viewport{
  overflow:hidden;
  position: relative;
  .swiper{
    position: static;
  }
  .notice-pagination{
    position: static;
    --swiper-theme-color: #AC002A;
  }
  .notice-button-prev,
  .notice-button-next{
    background-color: white;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }
  .notice-button-prev svg,
  .notice-button-next svg{
    height: 15px;
    stroke: #000000;
  }
  .notice-button-prev{
    left: 0;
  }
  .notice-button-next{
    right: 0;
  }
}

.carousel__slide{
  flex:0 0 100%;
  width:100%;
  background:#fff;
  border:1px solid var(--border-grey);
  padding:15px;
  display:flex;
  gap:15px;
  align-items:center;
}
.carousel__thumb{
  flex:none;
  width:100px;
  height:130px;
  background:#f2f2f2;
  overflow:hidden;
}
.carousel__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.carousel__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.carousel__meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.carousel__badge{
  background:var(--maroon-soft);
  padding:4px 8px;
  font-size:11px;
  white-space:nowrap;
}
.carousel__title{
  font-weight:700;
  font-size:14px;
  letter-spacing:.7px;
  color:var(--maroon);
  line-height:1.4;
  margin-bottom:8px;
}
.carousel__desc{
  font-size:13px;
  line-height:1.5;
}
.carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--border-grey);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.carousel__arrow img{width:9px;height:auto;}
.carousel__arrow--prev{left:-18px;}
.carousel__arrow--next{right:-18px;}
.carousel__arrow--next img{transform:scaleX(-1);}

.carousel__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:20px;
}
.carousel__dots button{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--placeholder-grey);
}
.carousel__dots button.active{background:var(--maroon);}

@media (min-width:768px){
  .notices{padding:60px 0;}
  .notices__flank{width:93px;height:5px;}
  .notices__heading h2{font-size:32px;}
  .carousel__viewport{
    .swiper{
      max-width: 800px;
      margin-inline: auto;
      overflow: visible;
      position: relative;
    }
    .notice-button-prev{
      left: -35px;
    }
    .notice-button-next{
      right: -35px;
    }
  }
  .carousel__slide{padding:20px 40px;gap:40px;}
  .carousel__thumb{width:180px;height:180px;}
  .carousel__body{width:auto;}
  .carousel__meta{font-size:16px;}
  .carousel__badge{padding:5px 10px;font-size:12px;}
  .carousel__title{font-size:18px;}
  .carousel__desc{font-size:16px;line-height:1.5;}
  .carousel__arrow{width:70px;height:70px;}
  .carousel__arrow img{width:16px;}
  .carousel__arrow--prev{left:-90px;}
  .carousel__arrow--next{right:-90px;}
  .carousel .notice-button-prev,
  .carousel .notice-button-next{
    width: 70px;
    height: 70px;
  }
  .carousel .notice-button-prev svg,
  .carousel .notice-button-next svg{
    height: 30px;
  }
}

/* ==================================================================
   感謝メッセージ + ギャラリー（写真コラージュ）
   写真の重なり配置は装飾のため absolute のまま。ブレークポイントごとに
   座標のみ差し替える（カード追加・削除の対象ではないため許容）。
   ================================================================== */
/*
.gratitude{
  position:relative;
  padding:0 0 50px;
}
.gratitude__gallery{
  position:relative;
  height:280px;
  overflow:hidden;
}
.gratitude__photo{
  position:absolute;
  display:block;
  object-fit:cover;
  background:var(--placeholder-grey);
  transform:scale(.94);
  transition:transform .9s ease;
}
.gratitude__photo.in-view{transform:scale(1);}
.gratitude__photo--a{left:0;top:40px;width:151px;height:79px;}
.gratitude__photo--b{left:-10px;top:200px;width:154px;height:80px;}
.gratitude__photo--c{right:100px;top:0;width:100px;height:50px;opacity:.2;}
.gratitude__photo--d{right:0;top:16px;width:140px;height:73px;}
.gratitude__photo--e{right:20px;top:190px;width:150px;height:78px;opacity:.9;}
.gratitude__heading{
  margin:20px 0 0;
  font-weight:700;
  font-size:24px;
  text-align:center;
  line-height:1.5;
  padding:0 20px;
}
.gratitude__sub{
  margin-top:24px;
  font-size:14px;
  text-align:center;
  line-height:1.6;
  padding:0 20px;
}
@media (min-width:768px){
  .gratitude{padding:60px 0 80px;}
  .gratitude__gallery{height:700px;max-width:1200px;margin:0 auto;}
  .gratitude__photo--a{left:3.33%;top:23%;width:41.67%;height:37.14%;}
  .gratitude__photo--b{left:24.67%;top:65.43%;width:26.17%;height:23.43%;}
  .gratitude__photo--c{right:0;top:0;width:41.67%;height:37.14%;opacity:1;}
  .gratitude__photo--d{right:16.67%;top:47.14%;width:29.17%;height:26%;opacity:.9;}
  .gratitude__photo--e{right:47%;top:17.43%;width:22.17%;height:19.71%;opacity:.2;}
  .gratitude__heading{font-size:32px;margin-top:40px;white-space:nowrap;}
  .gratitude__sub{font-size:16px;margin-top:20px;}
}
*/


.gratitude{
  width:100%;
  height:622px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:24px;
}
@media (width<768px){
  .gratitude::before{
    content:"";
    width:200%;
    height:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:5;
    background:radial-gradient(closest-side,white,transparent);
  }
}
.gratitude__heading{
  font-weight:700;
  font-size:32px;
  text-align:center;
  line-height:1.5;
  padding:0 20px;
  white-space:nowrap;
  z-index:8;
}
.gratitude__sub{
  font-size:16px;
  text-align:center;
  line-height:1.6;
  padding:0 20px;
  white-space:nowrap;
  z-index:8;
}
@media (width>=768px){
  .gratitude__heading br,
  .gratitude__sub br{
    display:none;
  }
}

.gratitude__photo{
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  animation-duration:1.0s;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
  animation-timing-function:linear;
  animation-delay:calc(var(--p) * 1.0s * -1);
  animation-play-state:paused;
  opacity:0;
  z-index:3;
}
.gratitude__photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.gratitude__photo--a{
  width:500px;
  height:260px;
  left:calc(50% - 700px + 40px);
  top:calc(50% - 311px + 161px);
  animation-name:gratitude__photoA_anim;
}
.gratitude__photo--b{
  width:314px;
  height:164px;
  left:calc(50% - 700px + 236px);
  top:calc(50% - 311px + 458px);
  animation-name:gratitude__photoB_anim;
}
.gratitude__photo--c{
  width:266px;
  height:138px;
  left:calc(50% - 700px + 570px);
  top:calc(50% - 311px + 122px);
  animation-name:gratitude__photoC_anim;
}
.gratitude__photo--d{
  width:500px;
  height:260px;
  left:calc(50% - 700px + 900px);
  top:calc(50% - 311px + 0px);
  animation-name:gratitude__photoD_anim;
}
.gratitude__photo--e{
  width:350px;
  height:182px;
  left:calc(50% - 700px + 850px);
  top:calc(50% - 311px + 330px);
  animation-name:gratitude__photoE_anim;
}
@keyframes gratitude__photoA_anim{
  0%{
    opacity:0;
    transform:scale(0.95) translate(8%,-15%);
  }
  35%{
    opacity:1;
  }
  70%{
    opacity:1;
    transform:scale(1.05) translate(-8%,25%);
  }
  100%{
    opacity:1;
    transform:scale(1.05) translate(-8%,25%);
  }
}
@keyframes gratitude__photoB_anim{
  5%{
    opacity:0;
    transform:scale(0.95) translate(4%,-80%);
  }
  40%{
    opacity:1;
  }
  75%{
    opacity:1;
    transform:scale(1.05) translate(-14%,30%);
  }
  100%{
    opacity:1;
    transform:scale(1.05) translate(-14%,30%);
  }
}
@keyframes gratitude__photoC_anim{
  10%{
    opacity:0;
    transform:scale(0.95) translate(0%,-30%);
  }
  45%{
    opacity:1;
  }
  80%{
    opacity:1;
    transform:scale(1.05) translate(3%,-80%);
  }
  100%{
    opacity:1;
    transform:scale(1.05) translate(3%,-80%);
  }
}
@keyframes gratitude__photoD_anim{
  15%{
    opacity:0;
    transform:scale(0.95) translate(-10%,-30%);
  }
  50%{
    opacity:1;
  }
  85%{
    opacity:1;
    transform:scale(1.05) translate(10%,-70%);
  }
  100%{
    opacity:1;
    transform:scale(1.05) translate(10%,-70%);
  }
}
@keyframes gratitude__photoE_anim{
  20%{
    opacity:0;
    transform:scale(0.95) translate(-5%,-30%);
  }
  55%{
    opacity:1;
  }
  90%{
    opacity:1;
    transform:scale(1.05) translate(5%,40%);
  }
  100%{
    opacity:1;
    transform:scale(1.05) translate(5%,40%);
  }
}

@media (width<768px){
  .gratitude{
    width:100%;
    height:450px;
    gap:16px;
  }
  .gratitude__heading{
    font-size:24px;
    padding:0 10px;
  }
  .gratitude__sub{
    font-size:14px;
    padding:0 10px;
  }
  .gratitude__photo--a{
    width:152px;
    height:79px;
    left:calc(50% - 187.5px + 21px - 10.5px);
    top:calc(50% - 225px + 68px);
  }
  .gratitude__photo--b{
    width:154px;
    height:80px;
    left:calc(50% - 187.5px + 0px - 10.5px);
    top:calc(50% - 225px + 364px);
  }
  .gratitude__photo--c{
    width:113px;
    height:57px;
    left:calc(50% - 187.5px + 104px - 10.5px);
    top:calc(50% - 225px + 0px);
  }
  .gratitude__photo--d{
    width:158px;
    height:82px;
    left:calc(50% - 187.5px + 238px - 10.5px);
    top:calc(50% - 225px + 16px);
  }
  .gratitude__photo--e{
    width:166px;
    height:86px;
    left:calc(50% - 187.5px + 231px - 10.5px);
    top:calc(50% - 225px + 364px);
  }
}













/* ==================================================================
   実績数字カード（Stats）
   カード自体はもともとFlexboxで、PC/SPとも大きな変更は不要。
   SPは横スクロール、PCは中央揃えの折り返しに切り替える。
   ================================================================== */
.stats{
  padding:60px 0 50px;
}
.stats__slider{
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
  padding-left: 20px;
  box-sizing: content-box;
  .swiper{
    position: static;
  }
  .stats__pagination{
    position: static;
    --swiper-theme-color: #AC002A;
  }
  .stats__button-prev,
  .stats__button-next{
    background-color: white;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }
  .stats__button-prev svg,
  .stats__button-next svg{
    height: 15px;
    stroke: #000000;
  }
  .stats__button-prev{
    left: 0;
  }
  .stats__button-next{
    right: 0;
  }
}
/* .stats__track{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:0 20px 15px;
} */
.stat-card{
  scroll-snap-align:start;
  flex:0 0 336px;
  width: 336px;
  height: auto;
  background:#fff;
  border:1px solid var(--border-grey);
  display:grid;
  grid-template-areas: 
  "icon label"
  "icon number"
  "icon desc"
  "icon foot";
  align-items:center;
  column-gap:16px;
  padding:20px;
}
.stat-card__icon{
  width: 60px;
  grid-area: icon;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stat-label{
  grid-area: label;
  font-weight:500;
  font-size:16px;
  letter-spacing:.8px;
  color:var(--maroon);
}
.stat-number{
  grid-area: number;
  display:flex;
  align-items:flex-end;
  gap:6px;
  font-weight:700;
  color:var(--maroon);
  text-align: center;
  margin-bottom: 10px;
}
.stat-number .unit{font-size:14px;}
.stat-number .num{font-size:32px;line-height:1;}
.stat-desc{
  grid-area:desc;
  font-size:14px;
  line-height:1.65;
}
.stat-desc mark{
  position:relative;
  background:rgba(172,0,42,.2);
  color:inherit;
  font-weight:500;
  display:inline;
  font-size:inherit;
  line-height:1;
  /*box-decoration-break:clone;
  -webkit-box-decoration-break:clone;*/
}


.stat-foot{
  font-size:11px;
  line-height:1.5;
  margin-top:auto;
  text-align: right;
  padding-top: 10px;
}

@media (min-width:768px){
  .stats{
    padding:120px 20px 70px;
  }
  /* .stats__track{
    gap: 0;
    overflow:visible;
    max-width:1200px;
    margin:0 auto;
    padding:0;
  } */
  .stats__slider{
    padding-inline: 55px;
  }
  .stats__slider .stats__button-prev,
  .stats__slider .stats__button-next{
    width: 70px;
    height: 70px;
    top: 30%;
  }
  .stats__slider .stats__button-prev svg,
  .stats__slider .stats__button-next svg{
    height: 30px;
  }
  .stat-card{
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width:0;
    min-height:412px;
    padding:40px;
    width: 373px;
    flex-basis: 373px;
  }
  .stat-label{font-size:20.1px;letter-spacing:1px;}
  .stat-number .unit{font-size:16px;}
  .stat-number .num{font-size:40px;}
  .stat-desc{font-size:16px;width:100%;}
  .stat-foot{font-size:12px;text-align:right;width:100%;}
}

/* ==================================================================
   ヒストリー（30年の年表）
   ・年ごとの top / height 指定は一切持たない。行の高さは中身（カード）
     の量に応じて自然に決まる（.history-row を align-items:stretch の
     Flex行にし、写真は object-fit:cover で高さに追従させる）。
   ・年の追加／削除／並び替えは .history-row ブロックの増減だけで完結し、
     年ごとの専用CSSは作らない。
   ・縦ラインは border-left（装飾）、ドットのみ position:absolute。
   ・PCは「メタ情報 / カード / 写真」の横並び、SPは縦積みで、
     どちらも同一DOM順（メタ→カード→写真）のままCSSだけで切り替える。
   ================================================================== */
.history{
  padding:50px 20px 60px;
}
.history__heading{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:40px;
}
.history__eyebrow{
  font-weight:500;
  font-size:14px;
  letter-spacing:.7px;
  color:var(--maroon);
  line-height:1.4;
}
.history__title{
  font-weight:700;
  font-size:24px;
  line-height:1.5;
  margin:0;
}
.history__title .accent{color:var(--maroon);}

.history-list{
  display:flex;
  flex-direction:column;
  gap:50px;
}

.history-row{
  position:relative;
  z-index: 0;
  display:flex;
  flex-direction:column;
  gap:30px;
  padding-left: 30px;
}
.history-row::after{
  position: absolute;
  content: "";
  width: 2px ;
  height: calc(100% + 50px);
  background-color: var(--maroon);
  top: 0;
  left: 0;
}
.history-row__meta{
  padding-left:30px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.history-row__dot{
  position:absolute;
  z-index: 1;
  left:-15px;
  top:17px;
  width:32px;
  height:32px;
  border: 6px solid var(--page-bg);
  border-radius:50%;
  background-color: var(--maroon);
}
.history-row__year{
  font-size:60px;
  line-height:1;
  color:var(--maroon);
  margin:0;
}
.history-row__event{
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.history-row__event img{width:26px;height:auto;flex:none;margin-top:2px;}
.history-row__event span{font-weight:700;font-size:18px;line-height:1.4;}

.history-row__card{
  background:#fff;
  padding:20px;
  min-height:300px;
}
@media (width<768px){
  .history-row__card{
    min-height:0;
  }
}
.history-row__photo{
  width:100%;
  height:150px;
  position:relative;
  overflow:hidden;
}
.history-row__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  object-position:right center;
}







/*
.history-row__photo::after{
  content:none;
  position:absolute;
  inset:0;
  background:linear-gradient(to left, rgba(239,235,235,0) 55%, var(--page-bg) 100%);
}
*/
/*
.history-row__photo::after{
  content:"";
  width:calc(100% + 2px);
  height:calc(100% + 2px);
  position:absolute;
  left:-1px;
  top:-1px;
  background:
    linear-gradient(to right,var(--page-bg) 1%,transparent 25%,transparent 75%,var(--page-bg) 99%);
}
*/
.history-row__photo{
  border-radius:5px;
}

@media (width>=768px){
  .history-row__photo{
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    flex:0 1 320px;
    min-width:160px;
    height:100%;
    max-width: 980px;
  }
  .history-row__photo{
    border-radius:10px;
  }
  /*
  .history-row__photo::after{
    background:
      linear-gradient(to right,var(--page-bg) 1%,transparent 25%,transparent 75%,var(--page-bg) 99%),
      linear-gradient(to top,var(--page-bg) 3%,transparent 50%);
  }
  */
}









/* --- カード内部：既存の history__* クラス名をそのまま踏襲 --- */
.history__entries{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.history__entry{display:flex;flex-direction:column;gap:12px;width:100%;}
.history__entry--wide,
.history__entry--full{width:100%;}
.history__divider{height:1px;width:100%;background:var(--border-grey);}
.history__label{
  font-weight:700;
  font-size:16px;
  letter-spacing:.75px;
  color:var(--maroon);
  line-height:1.4;
  margin:0;
}
.history__milestone-list{display:flex;flex-direction:column;gap:12px;width:100%;}
.history__milestone-list--wrap{flex-direction:column;}
.history__milestone{width:100%;display:flex;flex-direction:column;gap:6px;}
.history__milestone--wrap-item{width:100%;}
.history__milestone-title{font-weight:700;font-size:14px;line-height:1.5;margin:0;}
.history__milestone-desc{font-size:14px;line-height:1.5;margin:0;}
.history__link-list{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.history__link{font-size:12px;line-height:1.5;text-decoration:underline;}

@media (min-width:768px){
  .history{padding:100px 20px 120px;}
  .history__heading{
    max-width:1400px;
    margin:0 auto 60px;
    gap:20px;
  }
  .history__eyebrow{font-size:20px;letter-spacing:1px;}
  .history__title{font-size:40px;white-space:nowrap;}

  .history-list{
    max-width:1400px;
    margin:0 auto;
    gap:0;
  }

  .history-row{
    flex-direction:row;
    gap:40px;
    padding-left: 54px;
  }
  .history-row__meta{
    flex:0 0 190px;
    padding-left:0;
  }
  .history-row__dot{
    left:-15px;
    top:32px;
  }
  .history-row__year{font-size:96px;}
  .history-row__event span{font-size:20px;}

  .history-row__card{
    flex: 0 1 800px;
    padding:40px;
    margin-bottom: 40px;
  }
  .history__entries{flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:0;row-gap:20px;}
  .history__entry{flex:1 1 200px;min-width:0;width:auto;gap:20px;}
  .history__entry--wide{flex:1 1 330px;}
  .history__entry--full{flex:1 1 100%;}
  .history__divider{
    flex:0 0 1px;
    align-self:stretch;
    width:1px;
    height:auto;
    margin:0 20px;
  }
  .history__milestone-list--wrap{flex-direction:row;flex-wrap:wrap;gap:16px 20px;}
  .history__milestone--wrap-item{width:240px;}
  .history__label{font-size:16px;letter-spacing:.8px;}
  .history__milestone-title{font-size:16px;}
  .history__milestone-desc{font-size:16px;}
  .history__link{font-size:14px;}
}

/* ==================================================================
   テーマでたどる医療トピック／温故知新30年史
   ・SPは既存の横スクロール（overflow-x:auto + scroll-snap）を踏襲
   ・PCはFlex-wrapで折り返す形に変更（旧PC実装は固定270px×7枚を
     1200px幅に無理やり詰め込んでおり、Flexboxのshrinkで137px程度に
     縮小表示されていた。カードの追加・削除がしやすいよう、
     本来の270pxのまま折り返す方式に変更している＝表示差分あり）
   ・「温故知新30年史」は現状Figma側もテキスト未確定のWIPのため、
     プレースホルダーの文言・画像はそのまま維持
   ================================================================== */
.topics{
  background:#fff;
  padding:100px 20px 0;
}
.topics__intro{
  max-width:335px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.topics__eyebrow{
  font-weight:500;
  font-size:20px;
  line-height:1.4;
  letter-spacing:1px;
  color:var(--maroon);
}
.topics__heading{
  font-weight:700;
  font-size:28px;
  line-height:1.5;
  margin:0;
}
.topics__heading span{
  display: inline-block;
}
.topics__lead{
  max-width:335px;
  margin:20px auto 0;
  text-align:center;
  font-size:16px;
  line-height:1.5;
}
.topics__lead p{margin:0;}
.topics__scroller{
  margin-top: 30px;

}
.topics__scroller {
  --swiper-theme-color: #AC002A;
}
.topics__grid{
  padding:0;
}
.topics__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:270px;
  flex-shrink:0;
  scroll-snap-align:start;
}
.topics__card a{
  text-decoration:none;
}
.topics__card-img{
  position:relative;
  width:100%;
  height:200px;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  display:block;
}
.topics__card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.topics__card-img--placeholder{background:#c4c4c4;}
.topics__card-img--layered img{position:absolute;inset:0;}
.topics__card-img-overlay{position:absolute;inset:0;background:#c4c4c4;}
.topics__card-label{
  font-weight:700;
  font-size:20px;
  line-height:1.4;
  letter-spacing:1px;
  text-align:center;
  margin:0.5em 0 0;
  display:block;
}

.topics__pagination{
  position: static;
}

.topics__banner{
  width:100%;
  max-width:335px;
  margin:30px auto 0;
}
.topics__banner img{width:100%;height:100%;object-fit:contain;display:block;}
.topics__banner--placeholder{background:#c4c4c4;}
.topics__banner-caption{font-size:16px;line-height:1.5;text-align:center;margin:0;}

@media (min-width:768px){
  .topics__intro{max-width:672px;}
  .topics__eyebrow{font-size:20.1px;letter-spacing:1.005px;}
  .topics__heading{font-size:40px;}
  .topics__lead{max-width:718px;}
  .topics__dots{display:none;}
  .topics__banner{max-width:800px;height:169px;margin-top:60px;}
}

.history2{
  background:#fff;
  padding:100px 20px;
}
.history2__intro{
  max-width:335px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.history2__eyebrow{
  font-weight:500;
  font-size:20px;
  line-height:1.4;
  letter-spacing:1px;
  color:var(--maroon);
}
.history2__heading{
  font-weight:700;
  font-size:28px;
  line-height:1.5;
  margin:0;
}
.history2__heading span{
  display: inline-block;
}
.history2__lead{
  max-width:335px;
  margin:20px auto 0;
  text-align:center;
  font-size:16px;
  line-height:1.5;
}
.history2__lead p{margin:0;}
.history2__scroller{
  margin-top: 30px;
  --swiper-theme-color: #AC002A;
}


.history2__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:270px;
  flex-shrink:0;
  scroll-snap-align:start;
}
.history2__card-img{
  position:relative;
  width:100%;
  height:200px;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.history2__card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.history2__card-img--placeholder{background:#c4c4c4;}
.history2__card-img--layered img{position:absolute;inset:0;}
.history2__card-img-overlay{position:absolute;inset:0;background:#c4c4c4;}
.history2__card-label{
  font-weight:700;
  font-size:20px;
  line-height:1.4;
  letter-spacing:1px;
  text-align:center;
  margin:0;
}

.history2__pagination{
  position: static;
}

.history2__banner{
  width:min(90vw,800px);
  max-width:100%;
  margin:30px auto 0;
}
.history2__banner img{width:100%;height:100%;object-fit:contain;display:block;}
.history2__banner--placeholder{background:#c4c4c4;}
.history2__banner-caption{font-size:16px;line-height:1.5;text-align:center;margin:0;}

@media (min-width:768px){
  .history2{padding:100px 20px;}
  .history2__intro{max-width:672px;}
  .history2__eyebrow{font-size:20.1px;letter-spacing:1.005px;}
  .history2__heading{font-size:40px;}
  .history2__lead{max-width:718px;}
  .history2__dots{display:none;}
  .history2__banner{margin-top:60px;}
}

/* ==================================================================
   医師アンケート
   ================================================================== */
.survey{
  background:#f3f3f3;
  padding:100px 20px;
}
.survey__intro{
  max-width:335px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.survey__eyebrow{
  font-weight:500;
  font-size:20px;
  line-height:1.4;
  letter-spacing:1px;
  color:var(--maroon);
}
.survey__heading{font-weight:700;font-size:28px;line-height:1.5;margin:0;}
.survey__lead{
  max-width:335px;
  margin:20px auto 0;
  font-size:16px;
  line-height:1.5;
  text-align:center;
}
.survey__illust{
  width:260px;
  height:auto;
  margin:40px auto 0;
}
.survey__tags{
  list-style:none;
  max-width:335px;
  margin:40px auto 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:center;
  gap:20px 10px;
}
.survey__tag{
  background:var(--maroon-soft);
  border:1px solid var(--maroon);
  border-radius:10px;
  min-height:40px;
  padding:8px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  background:white;
}
.survey__tag::before,.survey__tag::after{
  content:"";
  position:absolute;
  width:10px;
  height:12px;
  left:calc(50% - 9px * 0.5);
  top:calc(100% - 0px);
  box-sizing:border-box;
}
.survey__tag::before{
  background:white;
  clip-path:polygon(
    0% 0%, 50% 100%, 100% 0%
  );
  transform:translatey(-1.5px);
}
.survey__tag::after{
  background:var(--maroon);
  clip-path:polygon(
    0% 0%, 50% 100%, 100% 0%,
    88.9% 0%, 50% 92.86%, 11.11% 0%
  );
}
.survey__tag p{font-weight:700;font-size:16px;line-height:1.5;margin:0;}
.survey__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:60px auto 0;
  width:303px;
  max-width:100%;
  background:var(--maroon);
  color:#fff;
  border-radius:100px;
  padding:20px 20px;
  font-weight:700;
  font-size:14px;
  text-align:center;
  text-decoration:none;
}


@media (min-width:768px){
  .survey__intro{max-width:none;}
  .survey__eyebrow{font-size:20.1px;letter-spacing:1.005px;}
  .survey__heading{font-size:40px;}
  .survey__lead{max-width:718px; margin-top: 35px;}
  .survey__tags{max-width:1200px; margin-top: 45px;}
  .survey__tag{height:40px;padding:0 20px;}
  .survey__tag p{white-space:nowrap;}
}




.survey__cta{
  width:min(90vw,300px);
  height:60px;
  font-size:18px;
  font-weight:700;
  background:var(--maroon);
  border:1px solid var(--maroon);
  color:white;
  transition-duration:0.2s;
  transition-property:color,background;
  transition-timing-function:ease-out;
}
.survey__cta:hover{
  background:var(--maroon-soft);
  color:var(--maroon);
}
@media (width<768px){
  .survey__cta{
    height:50px;
  }
}




/* ==================================================================
   医師カルテ作成（診断クイズ・結果・おすすめサービス・みんなの結果）
   ・写真バンドは装飾レイヤーとしてabsolute（heroと同じ考え方）
   ・タイプカード／説明カード／スライダーは1つのFlex行の兄弟要素とし、
     PCはCSS Gridで「タイプ+スライダー列 / 説明カード列」の2カラムに、
     SPは縦積みに切り替える（DOM順は変更しない）
   ・公開/非公開は data-status 属性で切り替える（style="display:none"を
     個別要素に直書きしない）
   ================================================================== */
.karute-intro{
  position:relative;
  background:var(--page-bg);
  padding-bottom:60px;
}
.karute__media{
  height:264px;
  overflow:hidden;
}
.karute__band-img{width:100%;height:100%;object-fit:cover;}
/* .karute__band-tint{
  position:absolute;inset:0;
  background:
    linear-gradient(-90deg, rgba(161,196,223,0) 78.6%, rgba(161,196,223,.85) 91.4%),
    linear-gradient(-90deg, rgba(161,196,223,.85) 12.9%, rgba(161,196,223,0) 20.4%);
}
.karute__band-fade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(239,235,235,0) 22.4%, var(--page-bg) 60.9%);
} */

.karute__heading{
  position:relative;
  z-index:2;
  margin-top:-124px;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.karute__eyebrow{font-weight:500;font-size:20px;letter-spacing:1px;color:var(--maroon);}
.karute__title{font-weight:700;font-size:32px;line-height:1.5;margin:0;}
.karute__title .accent{color:var(--maroon);}
.karute__title--plain{font-size:28px;}

.karute__intro{margin-top:24px;padding:0 20px;font-size:16px;line-height:1.5;text-align:center;}
.karute__intro p{margin:0;}
.karute__intro p+p{margin-top:12px;}

/* ---- 診断クイズ（6問・JS制御） ---- */
.karute__quiz[hidden],
.karute__results[hidden]{display:none !important;}

.karute__card{
  margin:32px 20px 0;
  background:#fff;
  border-radius:10px;
  border:2px solid var(--maroon);
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.karute__card-top{display:flex;align-items:flex-start;gap:30px;}
.karute__qmeta{display:flex;flex-direction:column;align-items:center;gap:20px;flex:none;white-space:nowrap;}
.karute__qnum{color:var(--maroon);font-size:50px;line-height:1;margin:0;}
.karute__qcount{font-size:14px;letter-spacing:1.4px;color:#666;margin:0;}
.karute__qtext{flex:1;font-weight:700;font-size:20px;line-height:1.5;}
.karute__qtext p{margin:0;}
.karute__answers{display:flex;gap:15px;}
.karute__answer{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  flex:1;
  padding:20px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  color:var(--text);
  background:#fff;
  border:1px solid var(--border-grey);
  cursor:pointer;
  transition-duration:0.15s;
  transition-timing-function:ease;
  transition-property:box-shadow,transform,background,border-color;
}
.karute__answer:hover{
  /*box-shadow:0 2px 8px rgba(0,0,0,.1);*/
  border-color:var(--maroon);
  background:#FDF2F2;
}
.karute__answer:active{transform:scale(.97);}
.karute__answer:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;}
.karute__answer.is-selected{background:var(--maroon-soft);border-color:var(--maroon);}
.karute__answer img{width:20px;height:20px;}
.karute__answer u{
  text-decoration:none;
  display:block;
  white-space:nowrap;
}

.karute__back{
  display:flex;
  margin:0 auto;
  align-self:flex-start;
  padding:8px 4px;
  font-size:13px;
  font-weight:700;
  color:#666;
  text-decoration:underline;
  cursor:pointer;
  text-underline-offset:0.2em;
  position:relative;
}
.karute__back::before{
  content:"";
  width:20px;
  height:20px;
  border-radius:100%;
  border:1px solid #dddddd;
  position:absolute;
  left:-25px;
  top:calc(50% - 20px * 0.5);
  box-sizing:border-box;
}
.karute__back::after{
  content:"";
  width:14px;
  height:14px;
  background:#000000;
  clip-path:polygon(65.222% 76.778%, 38.444% 50%, 65.222% 23.222%, 61.658% 19.658%, 31.316% 50%, 61.658% 80.342%);
  position:absolute;
  top:calc(50% - 7px);
  left:-22px;
}
.karute__back[hidden]{
  opacity:0;
  pointer-events:none;
}

.karute__progress-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px auto 0;}
.karute__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--border-grey);
  transition:background .15s ease, transform .15s ease;
}
.karute__dot.is-active{background:var(--maroon);transform:scale(1.25);}
.karute__dot.is-done{background:var(--maroon);opacity:.5;}
.karute__caption{
  margin-top:16px;
  padding:0 20px;
  font-weight:500;
  font-size:20.1px;
  letter-spacing:1px;
  color:var(--maroon);
  text-align:center;
}

/* ---- 診断結果iframe（結果ページURLが設定された場合のみ表示） ---- */
.karute__result-frame{
  margin:40px 20px 0;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  padding:20px;
  position:relative;
}
.karute__result-frame[hidden]{display:none;}
.karute__result-frame-loading{
  text-align:center;
  font-weight:700;
  color:var(--maroon);
  margin:0 0 12px;
}
.karute__result-frame.is-loaded .karute__result-frame-loading{display:none;}
.karute__result-iframe{
  display:block;
  width:100%;
  min-height:520px;
  border:0;
  border-radius:6px;
}
.karute__result-frame-note{font-size:13px;color:#666;text-align:center;margin:12px 0 0;}
.karute__result-frame-note a{color:var(--maroon);}

.karute__retry{
  align-self:center;
  margin-top:4px;
  padding:12px 32px;
  border-radius:100px;
  border:1px solid var(--maroon);
  color:var(--maroon);
  font-weight:700;
  font-size:14px;
  background:#fff;
  cursor:pointer;
}
.karute__retry:hover{background:var(--maroon-soft);}

.karute__retry.big{
  width:min(90vw,300px);
  height:60px;
  font-size:18px;
  margin:0 auto;
  background:var(--maroon);
  color:white;
  transition-duration:0.2s;
  transition-property:color,background;
  transition-timing-function:ease-out;
}
.karute__retry.big:hover{
  background:var(--maroon-soft);
  color:var(--maroon);
}
@media (width<768px){
  .karute__retry.big{
    height:50px;
  }
}

/* ---- Results panel ---- */
.karute__results{
  position:relative;
  margin:40px 0 0;
  background:var(--maroon-soft);
  border-radius:10px;
  padding:100px 20px;
  display:flex;
  flex-direction:column;
  gap:30px;
}
.karute__results-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-weight:700;
  font-size:22px;
  color:var(--maroon);
  text-align:center;
}
.karute__results-heading p{margin:0;}
.karute__flank{width:46px;height:5px;}

.karute__result-row{
  display:flex;
  flex-direction:column;
  gap:40px;
}
.karute__type-desc-card{
  box-shadow:0 4px 5px rgba(0,0,0,.1);
  background-image:linear-gradient(-78.04deg, #fff 2.03%, #ffe2e2 99.16%);
  padding: 30px;
}
.karute__type-card{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:16px;
  margin-bottom: 20px;
}
.karute__type-avatar{
  flex:none;
  width:152pxpx;
  height:152px;
  border-radius:50%;
}
.karute__type-text{display:flex;flex-direction:column;gap:10px;font-weight:700;width: 100%;}
.karute__type-text p{margin:0;}
.karute__type-label{font-size:20px;color:var(--text);}
.karute__type-name{font-size:28px;line-height:1.2;color:var(--maroon);}
.karute__type-sub{font-size:16px;line-height:1.4;color:var(--maroon);}


.karute__desc-text{font-size:16px;line-height:2;color:var(--text);margin:0;}

.karute__sliders{display:flex;flex-direction:column;gap:20px;}
.karute__slider-row{display:flex;align-items:center;gap:10px;background:#fff;padding:10px 20px;}
.karute__slider-label{width:72px;flex:none;font-weight:700;font-size:18px;white-space:nowrap;margin:0;}
.karute__slider-track-wrap{position:relative;flex:1;display:flex;align-items:center;}
.karute__slider-track{width:100%;height:10px;border-radius:100px;background:var(--border-grey);}
.karute__slider-dot{position:absolute;left:20px;top:-3px;width:15px;height:15px;border-radius:100px;background:var(--maroon);}

/* ---- Recommended service card(s) ---- */
.karute__reco{display:flex;flex-direction:column;gap:20px;width:100%;}
.karute__reco-header{font-weight:700;font-size:22px;white-space:nowrap;margin:0;}



.karute__reco-cardsWrapper{
  position:relative;
}
.karute__reco-cards{
  width:100%;
}
@media (width>=768px){
  .karute__reco-cards .swiper-wrapper{
    align-items:stretch;
  }
  .karute__reco-cards .swiper-slide{
    height:auto;
  }
}
.karute__reco-card{
  user-select:none;
  display:block;
  text-decoration:none;
  color:var(--text);
  background:white;
  padding-bottom:40px;
}
.karute__reco-thumb{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1060 / 400;
  position:relative;
}
@media (width<768px){
  .karute__reco-thumb{
    aspect-ratio:335 / 160;
  }
}
.karute__reco-thumbImage{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  display:block;
  object-fit:cover;
  object-position:left top;
}
.karute__reco-title{
  display:block;
  padding:0 7.5%;
  margin-top:20px;
  font-size:16px;
  font-weight:bold;
  color:var(--maroon);
}
.karute__reco-heading{
  display:block;
  padding:0 7.5%;
  margin-top:0px;
  font-size:18px;
  font-weight:bold;
}
.karute__reco-desc{
  display:block;
  padding:0 7.5%;
  margin-top:20px;
  font-size:16px;
}
/*
.karute__reco-button{
  width:200px;
  max-width:90%;
  height:40px;
  margin:40px auto 0;
  background:var(--maroon);
  border:1px solid var(--maroon);
  color:white;
  font-size:14px;
  font-weight:bold;
  display:flex;
  justify-content:center;
  align-items:center;
  white-space:nowrap;
  box-sizing:border-box;
  border-radius:200vw;
}
@media (width>=768px){
  .karute__reco-button{
    transition-duration:0.1s;
    transition-timing-function:ease-out;
    transition-property:background,color;
  }
  .karute__reco-button:hover{
    color:var(--maroon);
    background:white;
  }
}
*/
.karute__reco-button{
  margin-top:30px;
  width:100%;
  padding:0 7.5%;
  display:flex;
  justify-content:left;
  align-items:center;
  gap:10px;
  font-size:16px;
  line-height:1.6;
}
.karute__reco-button img{
  width:20px;
  height:20px;
  display:block;
}
.karute__reco-cardsWrapper .swiper-button-prev,
.karute__reco-cardsWrapper .swiper-button-next{
  width:50px;
  height:50px;
  position:absolute;
  top:50%;
  border-radius:100%;
  background:white;
  border:1px solid #dddddd;
  margin:0;
}
.karute__reco-cardsWrapper .swiper-button-prev{
  left:0;
  right:auto;
  transform:translate(-50%,-50%);
}
.karute__reco-cardsWrapper .swiper-button-next{
  left:auto;
  right:0;
  transform:translate(50%,-50%);
}
.karute__reco-cardsWrapper .swiper-button-prev svg,
.karute__reco-cardsWrapper .swiper-button-next svg{
  display:none;
}
.karute__reco-cardsWrapper .swiper-button-prev::after,
.karute__reco-cardsWrapper .swiper-button-next::after{
  content:"";
  width:66.6%;
  height:66.6%;
  left:50%;
  top:50%;
  display:block;
  background:var(--text);
}
.karute__reco-cardsWrapper .swiper-button-prev::after{
  clip-path:polygon(65.222% 76.778%, 38.444% 50%, 65.222% 23.222%, 61.658% 19.658%, 31.316% 50%, 61.658% 80.342%);
}
.karute__reco-cardsWrapper .swiper-button-next::after{
  clip-path:polygon(34.778% 23.222%, 61.556% 50%, 34.778% 76.778%, 38.342% 80.342%, 68.684% 50%, 38.342% 19.658%);
}

.karute__reco-cardBadge{
  width:17%;
  height:auto;
  aspect-ratio:1 / 1;
  position:absolute;
  right:2.8%;
  top:7.5%;
  display:block;
}

@media (width<768px){
  .karute__reco-cardsWrapper .swiper-button-prev,
  .karute__reco-cardsWrapper .swiper-button-next{
    width:30px;
    height:30px;
  }
}


.karute__reco-mainLink{
  display:block;
  font-size:inherit;
  text-decoration:inherit;
  color:inherit;
}
.karute__reco-card:has(.additionalLinks) .karute__reco-mainLink .karute__reco-button{
  display:none;
}
.karute__reco-button.additionalLinks{
  margin-top:30px;
  font-size:inherit;
  text-decoration:inherit;
  color:inherit;
}
.karute__reco-button.additionalLinks + .additionalLinks{
  margin-top:7px;
}







/* ---- Share buttons ---- */
.karute__share{background:#fff;padding:40px 30px;display:flex;flex-direction:column;gap:20px;}
.karute__share-text{font-size:16px;line-height:1.4;text-align:center;margin:0;}
.karute__share-buttons{display:flex;flex-direction:column;gap:15px;}
.karute__share-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  width:100%;background:#fff;border:1px solid var(--border-grey);border-radius:100px;
  padding:10px 20px;font-weight:500;font-size:16px;color:var(--text);
  transition:box-shadow .15s ease, transform .15s ease;
}
.karute__share-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.08);}
.karute__share-btn:active{transform:scale(.97);}
.karute__share-btn img{width:30px;height:30px;}

/* ---- みんなの医師カルテ結果 ---- */
.karute__rank-heading{
  margin-top:80px;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.karute__rank-topbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:20px;
  padding:0 20px;
}
.karute__rank-caption{
  position:relative;
  order:-1;
  width:227px;
  max-width:calc(100% - 40px);
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.karute__rank-caption-bg{position:absolute;inset:0;width:100%;height:100%;}
.karute__rank-caption-text{
  position:relative;
  font-weight:700;
  font-size:12px;
  letter-spacing:.6px;
  color:var(--maroon);
  white-space:nowrap;
  margin:0;
}
.karute__rank-sub{font-weight:700;font-size:28px;color:var(--text);margin:0;}

.karute__rank-unpublished-note{display:none;padding:0 20px;text-align:center;font-size:16px;line-height:1.6;color:#666;}

.karute__rank-wrap{padding:0 20px 40px;}
.karute__rank-list{display:flex;flex-direction:column;gap:20px;margin-top: 30px;}
.karute__rank-row{display:flex;flex-direction:column;gap:10px;}
.karute__rank-top{display:flex;align-items:center;gap:6px;}
.karute__rank-num{width:26px;flex:none;font-size:18px;color:var(--text);margin:0;}
.karute__rank-num--top{color:var(--maroon);}
.karute__rank-name-wrap{display:flex;align-items:center;gap:5px;}
.karute__rank-avatar{border-radius:50%;flex:none;}
.karute__rank-name{font-weight:700;font-size:18px;color:var(--text);text-decoration:underline;white-space:nowrap;margin:0;}
.karute__rank-bottom{display:flex;align-items:center;gap:14px;}
.karute__rank-bar-wrap{position:relative;flex:1;height:10px;}
.karute__rank-bar-track{width:100%;height:10px;border-radius:100px;background:var(--placeholder-grey);}
.karute__rank-bar-fill{position:absolute;left:0;top:0;height:10px;border-radius:100px;background:var(--maroon);}
.karute__rank-pct{flex:none;font-weight:700;font-size:20px;color:var(--text);white-space:nowrap;margin:0;}
.karute__rank-pct--top{color:var(--maroon);}

/* 公開/非公開の切替: data-status="unpublished" でランキングを隠し、
   準備中メッセージを表示する。切替の粒度（パネル全体か行ごとか）は
   お客様確認待ちのためTODO.mdに記載。 */
.karute__rank-wrap[data-status="unpublished"] .karute__rank-list,
.karute__rank-wrap[data-status="unpublished"] .karute__rank-sub{display:none;}
.karute__rank-wrap[data-status="unpublished"] .karute__rank-unpublished-note{display:block;}

@media (min-width:768px){
  .karute-intro{padding-bottom:100px;}
  .karute__media{height:644px;}
  /* .karute__band-tint{
    background:
      linear-gradient(90deg, rgba(161,196,223,0) 78.6%, rgba(161,196,223,.85) 91.4%),
      linear-gradient(90deg, rgba(161,196,223,.85) 12.9%, rgba(161,196,223,0) 20.4%);
  }
  .karute__band-fade{
    background:linear-gradient(to bottom, rgba(239,235,235,0) 39.9%, var(--page-bg) 77.6%);
  } */
  .karute__heading{margin-top:-260px;}
  .karute__eyebrow{font-size:20.1px;letter-spacing:1px;}
  .karute__title{font-size:40px;white-space:nowrap;}

  .karute__intro{max-width:744px;margin-left:auto;margin-right:auto;}
  .karute__intro p+p{margin-top:0;}

  .karute__card{
    max-width:800px;
    margin:60px auto 0;
    padding:60px 40px;
    align-items:center;
  }
  .karute__card-top{align-items:center;gap:30px;}
  .karute__qnum{font-size:64px;}
  .karute__qtext{font-size:24px;}
  .karute__answers{gap:20px;}
  .karute__answer{flex:none;width:250px;font-size:16px;}
  .karute__answer img{width:26px;height:26px;}

  .karute__progress-dots{width:110px;}
  .karute__caption{max-width:756px;margin-left:auto;margin-right:auto;font-size:20.1px;}

  .karute__results{max-width:1200px;margin:60px auto 0;padding:60px;gap:40px;}
  .karute__results-heading{font-size:32px;}
  .karute__flank{width:93px;}

  .karute__result-frame{max-width:1200px;margin:60px auto 0;padding:30px;}
  .karute__result-iframe{min-height:900px;}

  .karute__result-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    grid-template-areas:
      "typecard desc"
      "sliders  desc";
    gap:20px 40px;
    align-items:stretch;
  }
  .karute__type-desc-card{
    display: contents;

  }
  .karute__desc-card{
    padding:40px 30px;
    box-shadow:0 4px 5px rgba(0,0,0,.1);
    background-image:linear-gradient(-78.04deg, #fff 2.03%, #ffe2e2 99.16%);
  }
  .karute__type-card{
    grid-area:typecard;
    gap:20px;
    flex-direction: row;
    padding:40px 30px;box-shadow:0 4px 5px rgba(0,0,0,.1);
    background-image:linear-gradient(-78.04deg, #fff 2.03%, #ffe2e2 99.16%);
  }
  .karute__type-avatar{width:152px;height:152px;}
  .karute__type-text{gap:20px;}
  .karute__type-label{font-size:24px;}
  .karute__type-name{font-size:36px;}
  .karute__type-sub{font-size:16px;}

  .karute__sliders{grid-area:sliders;gap:20px;}
  .karute__slider-row{gap:30px;padding:10px 20px;}
  .karute__slider-label{width:100px;font-size:20px;}
  .karute__slider-track{width:180px;}

  .karute__desc-card{grid-area:desc;height:100%;}

  /*
  .karute__reco-cards{flex-direction:row;gap:20px;}
  .karute__reco-card{flex:1 1 0;min-width:0;}
  .karute__reco-card--pc-only{display:block;}
  .karute__reco-title{font-size:32px;}
  .karute__reco-thumb{height:200px;}
  .karute__reco-badge{left:19px;top:24px;width:151px;height:32px;}
  .karute__reco-ribbon{right:auto;bottom:auto;left:401px;top:109px;width:79px;height:55px;}
  .karute__reco-ribbon-icon{width:50px;height:50px;}
  .karute__reco-ribbon-text{font-size:14px;letter-spacing:-1.4px;}
  .karute__reco-body{padding:20px 40px 40px;}
  .karute__reco-heading{font-size:18px;}
  .karute__reco-desc{font-size:16px;}
  */

  .karute__share{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding:20px 40px;
  }
  .karute__share-buttons{flex-direction:row;gap:10px;}
  .karute__share-btn{width:auto;}
  .karute__retry{margin:0;}

  .karute__rank-heading{margin-top:60px;}
  .karute__rank-topbar{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    max-width:1200px;
    margin:85px auto 0;
    max-width:750px;
    padding-inline: 0;
  }
  .karute__rank-caption{order:0;transform: translateY(-50%);}
  .karute__rank-unpublished-note{max-width:1200px;margin:0 auto;}
  .karute__rank-wrap{max-width:1200px;margin:0 auto;padding:0 20px 60px;}
  .karute__rank-list{max-width:750px;margin:30px auto 0;gap:20px;}
  .karute__rank-row{flex-direction:row;align-items:center;gap:29px;}
  .karute__rank-top{width:250px;flex:none;}
  .karute__rank-num{width:60px;font-size:24px;}
  .karute__rank-name{font-size:24px;}
  .karute__rank-bottom{flex:1;gap:20px;}
  .karute__rank-pct{font-size:24px;}
}

/* 768〜999px: type-cardはアバター+文字の横並びだと窮屈になるため、
   その幅の間だけ縦積みに切り替える（result-rowの2カラム自体は維持） */
@media (min-width:768px) and (max-width:999px){
  .karute__type-card{flex-direction:column;text-align:center;}
  .karute__type-text{align-items:center;}
  .karute__type-avatar{width:120px;height:120px;}
  .karute__slider-row{gap:12px;padding:10px;}
  .karute__slider-label{width:auto;font-size:14px;}
  .karute__slider-track{width:80px;}
}

/* ==================================================================
   これからの未来へ
   ・写真とグローは装飾レイヤーとしてabsolute
   ・マイルストーンは.future__milestoneの繰り返し。追加・削除は
     ブロックの増減だけで完結する（年ごとの専用CSSなし）
   ・旧PC版は診断線(diagonal)を1本の全幅装飾として持っていたが、
     マイルストーン単位で繰り返しやすい構造にするため、SP版と同じ
     「マイルストーンごとの小さな装飾線」に統一している（表示差分）
   ================================================================== */
.future{
  position:relative;
  overflow:hidden;
  padding-bottom:60px;
  background-image: linear-gradient(180deg, #FDFDFE, #E8EFF9);
}
/* .future__media{position:relative;z-index:0;} */
/* .future__photo-band-img{width:100%;height:220px;object-fit:cover;object-position:center 65%;display:block;}
.future__glow{
  position:absolute;
  top:50px;
  left:50%;
  transform:translateX(-50%);
  width:300px;
  height:300px;
  pointer-events:none;
}
.future__glow img{display:block;width:100%;height:100%;max-width:none;} */
.futere__bg{
  background: url('../img/future-bg-cityscape-sp.jpg') no-repeat top center;
  background-size: cover;
  padding-top: 59px;
  padding-bottom: 95px;
  clip-path: polygon(0 0 , 100% 0, 100% 100%, 0 calc(100% - 78px));
  margin-bottom: -78px;
}
.future__heading{
  position:relative;
  z-index:1;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.future__eyebrow{font-weight:500;font-size:20px;letter-spacing:1px;line-height:1.4;color:var(--maroon);}
.future__headline{font-weight:700;font-size:28px;line-height:1.5;margin:0;}
.future__headline .accent{color:var(--maroon);}
.future__head-text{
  position: relative;
}
.future__head-text::after{
  pointer-events: none;
  position: absolute;
  content: "";
  width:100%;
  padding-bottom: 130%;
  /*height: 0;
  border-radius: 50%;
  background: url('../img/future-glow-ellipse.svg') no-repeat center center;
  background-size: contain;*/
  background:radial-gradient(closest-side,white,transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (width<768px){
  .future__head-text::after{
    width:200%;
  }
}


.future__lead{
  /* max-width: 335px; */
  position:relative;
  z-index:1;
  margin:6px auto 0;
  padding:0 20px;
  font-size:16px;
  line-height:1.5;
  text-align:center;
}

.future__milestones{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
}
.future__milestone{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:44px 20px 0;
}
.future__diagonal{
  position:absolute;
  top: 0;
  left: 0;
  width:100%;
  height:127px;
  /* transform:translateX(-50%) rotate(11.81deg); */
  pointer-events:none;
  overflow:visible;
  z-index:0;
  background-color: #FDF2F2;
  clip-path: polygon(0 0, 100% 78px, 100% 100%, 0 calc(100% - 90px));
}
.future__diagonal img{display:block;width:100%;height:100%;max-width:none;}
._second .future__diagonal{
  height:156px;
  clip-path: polygon(0 0, 100% 78px, 100% 100%, 0 calc(100% - 100px));
}
._third .future__diagonal{
  height:171px;
  clip-path: polygon(0 0, 100% 78px, 100% 100%, 0 calc(100% - 100px));
}
._third.future__milestone{
  padding-top: 62px;
}
.future__milestone-icon{position:relative;z-index:1;width:43.75px;height:71px;}
.future__milestone-icon img{width:100%;height:100%;}
.future__milestone-year{position:relative;z-index:1;font-size:50px;color:var(--maroon);line-height:1;width:100%;margin:0;}
.future__milestone-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.future__milestone-title{font-weight:700;font-size:20px;line-height:1.5;color:var(--maroon);width:100%;margin:0;}
.future__milestone-desc{font-size:16px;line-height:1.5;width:100%;margin:0;}
.future__milestone-photo{
  position:relative;
  z-index:1;
  width:100%;
  max-width:300px;
  height:200px;
  object-fit:cover;
  margin-top:10px;
}
.thankyou-message{
  padding-inline: 20px;
  position: relative;
  padding-block: 105px 147px;
  margin-top: 56px;
  position: relative;
  z-index: 0;
}
.site-footer__deco-stack img{
  position: absolute;
  z-index: -1;
}
.thankyou-message__image01{
  width: calc(130/375*100%);
  top: 0;
  left: 0;
}
.thankyou-message__image02{
  width: calc(132/375*100%);
  bottom: 34px;
  left: -22px;
}
.thankyou-message__image03{
  width: calc(97/375*100%);
  bottom: 0;
  left: 128px;
}
.thankyou-message__image04{
  width: calc(116/375*100%);
  bottom: 34px;
  right: 0;
}
.thankyou-message__image05{
  width: calc(127/375*100%);
  right: 0;
  top: 10px;
}

@media (min-width:768px){
  .future{padding-bottom:100px;}
  /* .future__photo-band-img{height:400px;}
  .future__glow{width:500px;height:500px;top:20px;} */
  .futere__bg{
    background: url('../img/future-bg-cityscape.jpg') no-repeat top center;
    background-size: cover;
    padding-top: 150px;
    padding-bottom: 252px;
    clip-path: polygon(0 0 , 100% 0, 100% 100%, 0 calc(100% - 285px));
    margin-bottom: -285px;
  }

  .future__heading{margin-top:-80px;}
  .future__eyebrow{font-size:20.1px;letter-spacing:1px;}
  .future__headline{font-size:40px;white-space:nowrap;}
  .future__lead{max-width:718px;}
  .future__milestones-outer{
    position: relative;
    padding-top: 170px;
  }
  .future__milestones-outer::after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background-color: #FDF2F2;
    clip-path: polygon(0 0 , 100% 285px, 100% 100%, 0 calc(100% - 380px));
  }
  .future__milestones{
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:60px;
    max-width:1200px;
    margin:0 auto;
  }

  .future__milestone{flex:1 1 0;max-width:300px;box-sizing: content-box;}
  .future__milestone._first{
    margin-top: -130px;
  }
  .future__milestone._second{
    margin-top: -60px;
  }
  .future__milestone-year{font-size:64px;}
  .future__milestone-title{font-size:24px;}
  .future__diagonal{
    display: none;
  }
}
@media (width > 990px){
  .thankyou-message{
    padding-block: 0 206px;
  }
  .thankyou-message__image01{
    width: calc(308/1400*100%);
    top: 0;
    left: 0;
    max-width: 308px;
  }
  .thankyou-message__image02{
    width: calc(340/1400*100%);
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    max-width: 340px;
  }
  .thankyou-message__image03{
    width: calc(250/1400*100%);
    bottom: auto;
    left: auto;
    right: 0;
    top: 275px;
    max-width: 250px;
  }
  .thankyou-message__image04{
    width: calc(300/1400*100%);
    bottom: 34px;
    right: 0;
    max-width: 300px;
  }
  .thankyou-message__image05{
    width: calc(300/1400*100%);
    right: auto;
    top: auto;
    left: 300px;
    bottom: 0;
    max-width: 300px;
  }
}
/* ==================================================================
   Thank You Message / フッター
   ・写真グリッドはSP版のシンプルな「メイン写真+2x2デコ」構成に統一
     （旧PC版は4枚を個別にabsolute配置していたが、追加・差し替えが
     しやすいFlex/Gridの構成へ変更。表示差分あり）
   ================================================================== */
.site-footer{
  position:relative;
  padding:50px 20px 0;
  background:var(--page-bg);
}
.site-footer__deco-grid{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:50px;
}
.site-footer__deco-main{
  flex:none;
  width:130px;
  height:185px;
  object-fit:cover;
  background:var(--placeholder-grey);
}


.site-footer__thanks{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;}
.site-footer__eyebrow{font-weight:500;font-size:20px;letter-spacing:1px;line-height:1.4;color:var(--maroon);}
.site-footer__headline{font-weight:700;font-size:20px;line-height:1.5;margin:0;}
.site-footer__headline p{margin:0;}
.site-footer__headline span:not([class]){display: inline-block;}
.site-footer__headline .accent{color:var(--maroon);}

.site-footer__body{margin-top:30px;font-size:16px;line-height:1.5;text-align:center;}
.site-footer__line{margin-top:30px;font-weight:700;font-size:20px;line-height:1.5;color:var(--maroon);text-align:center;}

.site-footer__badge{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:50px;}
.site-footer__badge-logo{width:160px;height:auto;}
.site-footer__badge-num{display:flex;align-items:flex-end;gap:4px;line-height:1;}
.site-footer__num{font-size:44px;color:var(--maroon);line-height:1;}
.site-footer__th{font-weight:700;font-size:20px;color:var(--maroon);line-height:1.3;}
.site-footer__anniv-label{font-size:9px;color:var(--maroon);letter-spacing:.5px;margin-top:-4px;}
.site-footer__years{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;color:var(--maroon);line-height:1.5;}
.site-footer__years img{width:56px;height:1px;display:block;max-width:none;}

.site-footer__links{display:flex;align-items:center;justify-content:center;gap:32px;font-size:14px;line-height:1.5;}
.site-footer__link{color:var(--text);text-decoration:underline;}

.site-footer__copyright{margin-top:24px;padding-bottom:40px;font-size:12px;line-height:1.5;text-align:center;color:var(--text);}
.site-footer__logo{
  text-align: center;
  margin-top: 30px;
}
.site-footer__logo a{
  display: inline-block;
}
.site-footer__logo img{
  display:block;
  height:auto;
  max-width:240px;
}
@media (min-width:768px){
  .site-footer{padding:100px 20px 0;}
  .site-footer__deco-main{width:308px;height:436px;}
  .site-footer__deco-stack{width:400px;grid-auto-rows:200px;gap:10px;}
  .site-footer__thanks{max-width:718px;margin:0 auto;}
  .site-footer__eyebrow{font-size:20.1px;letter-spacing:1px;}
  .site-footer__headline{font-size:40px;}
  .site-footer__body{max-width:718px;margin:30px auto 0;}
  .site-footer__links{gap:40px;font-size:16px;}
  .site-footer__links .site-footer__link{text-decoration:underline;}
  .site-footer__copyright{padding-bottom:60px;}
  .site-footer__logo{
    margin-top: 40px;
  }
}








:root{
  --fadeInDuration:0.4s;
  --fadeInOffsetDelay:0.4s;
  --fadeInOffsetDelay2:1.6s;
}
.site-header__logo,
.site-header__nav > *,
.site-header__toggle{
  opacity:0;
  transition-property:opacity,transform;
  transition-duration:var(--fadeInDuration);
  transform:translatey(5px);
}
body.reveal{
  .site-header__logo,
  .site-header__nav > *,
  .site-header__toggle{
    opacity:1;
    transform:none;
  }
  .site-header__logo{transition-delay:calc(var(--fadeInOffsetDelay) + 0s)}
  .site-header__nav > *:nth-child(1){transition-delay:calc(var(--fadeInOffsetDelay) + 0.2s)}
  .site-header__nav > *:nth-child(2){transition-delay:calc(var(--fadeInOffsetDelay) + 0.4s)}
  .site-header__nav > *:nth-child(3){transition-delay:calc(var(--fadeInOffsetDelay) + 0.6s)}
  .site-header__nav > *:nth-child(4){transition-delay:calc(var(--fadeInOffsetDelay) + 0.8s)}
  .site-header__nav > *:nth-child(5){transition-delay:calc(var(--fadeInOffsetDelay) + 1.0s)}
  .site-header__nav > *:nth-child(6){transition-delay:calc(var(--fadeInOffsetDelay) + 1.2s)}
  .site-header__nav > *:nth-child(7){transition-delay:calc(var(--fadeInOffsetDelay) + 1.4s)}
  .site-header__nav > *:nth-child(8){transition-delay:calc(var(--fadeInOffsetDelay) + 1.6s)}
  .site-header__nav > *:nth-child(9){transition-delay:calc(var(--fadeInOffsetDelay) + 1.8s)}
  .site-header__toggle{transition-delay:calc(var(--fadeInOffsetDelay) + 1.2s)}
}
body.recentlyShown{
  .site-header__logo,
  .site-header__nav > *,
  .site-header__toggle{
    transition:none!important;
  }
}

.hero__num,
.hero__th,
.hero__anniv-label,
.hero__headline > *,
.hero__lead{
  opacity:0;
  transition-property:opacity,transform;
  transition-duration:var(--fadeInDuration);
  transform:translatey(15px);
}
.hero__years > *:nth-child(1),
.hero__years > *:nth-child(3){
  opacity:0;
  transition-property:opacity,transform;
  transition-duration:var(--fadeInDuration);
}
.hero__years > *:nth-child(2){
  opacity:1;
  transition-property:opacity,transform;
  transition-duration:calc(var(--fadeInDuration) * 2);
  transform-origin:center left;
  transform:scalex(0);
}
body.reveal{
  .hero__num,
  .hero__th,
  .hero__anniv-label,
  .hero__years > *,
  .hero__headline > *,
  .hero__lead{
    opacity:1;
    transform:none;
  }
  .hero__num{transition-delay:calc(var(--fadeInOffsetDelay2) + 0.0s)}
  .hero__th{transition-delay:calc(var(--fadeInOffsetDelay2) + 0.2s)}
  .hero__anniv-label{transition-delay:calc(var(--fadeInOffsetDelay2) + 0.4s)}
  .hero__years > *:nth-child(1){transition-delay:calc(var(--fadeInOffsetDelay2) + 0.0s)}
  .hero__years > *:nth-child(2){transition-delay:calc(var(--fadeInOffsetDelay2) + 0.2s)}
  .hero__years > *:nth-child(3){transition-delay:calc(var(--fadeInOffsetDelay2) + 0.8s)}
  .hero__headline > *:nth-child(1){transition-delay:calc(var(--fadeInOffsetDelay2) + 0.8s)}
  .hero__headline > *:nth-child(2){transition-delay:calc(var(--fadeInOffsetDelay2) + 1.0s)}
  .hero__headline > *:nth-child(3){transition-delay:calc(var(--fadeInOffsetDelay2) + 1.2s)}
  .hero__headline > *:nth-child(4){transition-delay:calc(var(--fadeInOffsetDelay2) + 1.4s)}
  .hero__headline > *:nth-child(5){transition-delay:calc(var(--fadeInOffsetDelay2) + 1.6s)}
  .hero__headline > *:nth-child(6){transition-delay:calc(var(--fadeInOffsetDelay2) + 1.8s)}
  .hero__headline > *:nth-child(7){transition-delay:calc(var(--fadeInOffsetDelay2) + 2.0s)}
  .hero__headline > *:nth-child(8){transition-delay:calc(var(--fadeInOffsetDelay2) + 2.2s)}
  .hero__headline > *:nth-child(9){transition-delay:calc(var(--fadeInOffsetDelay2) + 2.4s)}
  .hero__lead{transition-delay:calc(var(--fadeInOffsetDelay2) + 1.4s)}
}
body.recentlyShown{
  .hero__num,
  .hero__th,
  .hero__anniv-label,
  .hero__years > *,
  .hero__headline > *,
  .hero__lead{
    transition:none!important;
  }
}
.notices{
  opacity:0;
  transition-property:opacity;
  transition-duration:var(--fadeInDuration);
}
body.reveal{
  .notices{
    opacity:1;
    transition-delay:calc(var(--fadeInOffsetDelay2) + 1.8s)
  }
}
body.recentlyShown{
  .notices{
    transition:none!important;
  }
}





.rewind{
  display:block;
  width:35px;
  height:35px;
  position:fixed;
  right:15px;
  bottom:15px;
  background:var(--maroon);
  cursor:pointer;
  transition:opacity 0.1s ease-out;
  z-index:199;
  border-radius:3px;
  opacity:0;
  pointer-events:none;
}
.rewind::after{
  content:"";
  width:66%;
  height:66%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:white;
  clip-path:polygon(25.598% 67.598%, 50% 43.196%, 74.402% 67.598%, 82.718% 59.282%, 50% 26.564%, 17.282% 59.282%);
}
@media (width>=768px){
  .rewind:hover{
    opacity:0.7;
  }
}
body.scrolled .rewind{
  opacity:1;
  pointer-events:all;
}