/* ==========================================================================
   Yamayo Measuring Tools — 120th Anniversary special site
   ========================================================================== */

/* -------------------------------------------------------------------------
   Base / Reset
   ------------------------------------------------------------------------- */

/* PC */
html {
  font-size: 62.5%;
  overflow-x: hidden;
}

:root {
  --blue: #0061ae;
  --blue-light: #E4EDFA;
  --blue-pale: #ddedff;
  --ink: #1a1a1a;
  --white: #ffffff;
  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  --container: 1210px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.inner {
  max-width: var(--container);
  margin: 0 auto;
}

a { color: inherit; text-decoration: none; }

/* SP */
@media (max-width: 900px) {
  .inner { padding: 0 2.4rem; }
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

/* PC */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 5px 10px 0 #C7E2FF;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 1.3rem 4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.brand img {
  width: 31.2rem;
}

.corp-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

.corp-link img {
  width: 1.7rem;
}

/* SP */
@media (max-width: 900px) {
  .site-header {
    padding: 1.5rem 1.4rem;
  }
  .brand img {
    width: 23.8rem;
  }
  .brand-tagline { display: none; }
  .corp-link { display: none; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

/* =========================
      PC
   ========================= */
   
   .hero {
     position: relative;
     background-image: url("../img/mv-bg.jpg");
     background-size: cover;
     background-position: top left;
     background-repeat: no-repeat;
     overflow: hidden;
     aspect-ratio: 1440 / 1060;
   }
   
   .hero-inner {
     position: relative;
     z-index: 2;
     max-width: 100%;
   }
   
   .hero-headline {
     margin: 0;
     margin-top: clamp(44rem, 15.7rem + 32.9vw, 999rem);
     margin-left: auto;
     width: max-content;
     max-width: 90%;
     text-align: right;
     font-family: var(--font-serif);
     font-weight: 700;
     color: var(--blue);
     font-size: clamp(3rem, 1.6rem + 3.76vw, 999rem);
     line-height: 1.5;
     letter-spacing: 0.15em;
   }
   
   .hero-deco {
     position: absolute;
     inset: 0;
     overflow: hidden;
     pointer-events: none;
     top: -23rem;
   }
   
   .flow-item {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 30rem;
     object-fit: contain;
   
     filter: drop-shadow(0 2rem 2.8rem rgba(0, 40, 90, 0.22));
   
     /*
      * 12商品
      * 12秒間隔で登場
      */
     animation: flow-move 144s linear infinite;
     animation-delay: calc(var(--i) * -12s);
   
     will-change: transform, opacity;
     backface-visibility: hidden;
     transform-origin: center center;
   }
   
   
   /* =========================
      PC メインビジュアル商品
   ========================= */
   
   @keyframes flow-move {
   
     /* ==================================
        待機
        ================================== */
     0%,
     33% {
       transform:
         translate3d(145vw, -15vh, 0)
         rotate(10deg)
         scale(0.25);
     
       opacity: 0;
     }
     
     
     /* ==================================
        右上から登場
        ================================== */
     36% {
       transform:
         translate3d(145vw, -15vh, 0)
         rotate(10deg)
         scale(0.25);
     
       opacity: 0;
     }
     
     39% {
       opacity: 1;
     }
     
     
     /* ==================================
        右側
        ================================== */
     48% {
       transform:
         translate3d(82vw, 15vh, 0)
         rotate(10deg)
         scale(0.55);
     
       opacity: 1;
     }
     
     
     /* ==================================
        中央〜左下
        ================================== */
     60% {
       transform:
         translate3d(30vw, 43vh, 0)
         rotate(10deg)
         scale(0.9);
     
       opacity: 1;
     }
     
     
     /* ==================================
        左下へ退場
        ================================== */
     69% {
       transform:
         translate3d(-35vw, 75vh, 0)
         rotate(10deg)
         scale(1.2);
     
       opacity: 0;
     }
     
     
     /* ==================================
        次の周回まで画面外で待機
        ================================== */
     70%,
     100% {
       transform:
         translate3d(-35vw, 75vh, 0)
         rotate(10deg)
         scale(1.2);
     
       opacity: 0;
     }
   }
   
   
   /* =========================
      SP / タブレット
   ========================= */
   
   @media (max-width: 900px) {
   
     .hero {
       padding: 3rem 0 0;
       background-image: url("../img/mv-bg-sp.jpg");
       aspect-ratio: 750 / 1560;
       background-position: top center;
     }
   
     .hero-deco {
       top: -6rem;
     }
   
     .flow-item {
       width: 13rem;
     
       /*
        * SP
        * 12商品 × 8秒間隔 = 96秒
        */
       animation-duration: 96s;
       animation-delay: calc(var(--i) * -8s);
     }
     
     
     /* =========================
        SP専用 商品アニメーション
     
        待機時間を長くして、
        画面内の商品数を抑える
     ========================= */
     
     @keyframes flow-move {
     
       /* -------------------------
          画面外で待機
       ------------------------- */
       0%,
       35% {
         transform:
           translate3d(140vw, -10vh, 0)
           rotate(10deg)
           scale(0.32);
     
         opacity: 0;
       }
     
     
       /* -------------------------
          右上から登場
       ------------------------- */
       40% {
         transform:
           translate3d(115vw, 0vh, 0)
           rotate(10deg)
           scale(0.4);
     
         opacity: 1;
       }
     
     
       /* -------------------------
          右側
       ------------------------- */
       48% {
         transform:
           translate3d(85vw, 10vh, 0)
           rotate(10deg)
           scale(0.65);
     
         opacity: 1;
       }
     
     
       /* -------------------------
          中央
       ------------------------- */
       57% {
         transform:
           translate3d(45vw, 27vh, 0)
           rotate(10deg)
           scale(1);
     
         opacity: 1;
       }
     
     
       /* -------------------------
          左下
       ------------------------- */
       66% {
         transform:
           translate3d(-25vw, 52vh, 0)
           rotate(10deg)
           scale(1.4);
     
         opacity: 1;
       }
     
     
       /* -------------------------
          画面外へ退場
       ------------------------- */
       70% {
         transform:
           translate3d(-45vw, 60vh, 0)
           rotate(10deg)
           scale(1.5);
     
         opacity: 0;
       }
     
     
       /* -------------------------
          次の周回まで待機
       ------------------------- */
       71%,
       100% {
         transform:
           translate3d(-45vw, 60vh, 0)
           rotate(10deg)
           scale(1.5);
     
         opacity: 0;
       }
     }
   
   
     .hero-headline {
       letter-spacing: 0.15em;
       font-size: 3.6rem;
       line-height: 1.4;
       margin-top: clamp(56rem, 15.7rem + 32.9vw, 999rem);
       max-width: 93%;
     }
   }
   
   
   /* =========================
      タブレット
      430px〜900px
   ========================= */
   
   @media (min-width: 600px) and (max-width: 900px) {
   
     .hero {
       padding: 3rem 0 0;
       aspect-ratio: 750 / 750;
       background-position: top center;
     }
   
     .hero-headline {
       margin-top: 35rem;
     }
   }
   
   @media (min-width: 430px) and (max-width: 599px) {
    
      .hero {
        aspect-ratio: 750 / 1400;
      }
    }
   
   
   /* =========================
      スマホ
      600px以下
   ========================= */
   
   @media (max-width: 429px) {
   
     .hero {
       padding: 3rem 0 0;
       aspect-ratio: 750 / 1600;
       background-position: top center;
     }
   
   }



/* -------------------------------------------------------------------------
   Shared section styles
   ------------------------------------------------------------------------- */

/* PC */
.eyebrow {
  margin: 0 0 2rem;
  font-weight: 900;
  color: #F2F5FA;
  font-size: 10rem;
  line-height: 1;
  position: relative;
  z-index: 0;
}

.section-title {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
  color: var(--blue);
  position: relative;
  z-index: 1;
  margin-top: -5.7rem;
  margin-left: 1rem;
}

.section-title.light { color: var(--white); }

.section-heading.center { text-align: center; }

.reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* SP */
@media (max-width: 900px) {
  .eyebrow { font-size: 6.4rem; }
  .section-title { font-size: 2.4rem; }
}

/* -------------------------------------------------------------------------
   Message
   ------------------------------------------------------------------------- */

/* PC */
.message {
  background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%);
  margin-bottom: 15.7rem;
}

.message .eyebrow { color: #E4EDFA; }

.message-inner {
  display: grid;
  grid-template-columns: 50rem 1fr;
  gap: 11.3rem;
  align-items: center;
  padding: 0 2rem;
}

.message-photo {
  width: 100%;
  overflow: hidden;
}

.message-photo img {
  width: 50rem;
}

.message .section-title {
  margin-bottom: 6rem;
}

.message-text {
  margin: 0 0 7rem;
  font-size: 1.8rem;
  line-height: 2;
  color: var(--blue);
}

.message-signature {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  margin: 0;
  justify-content: end;
  color: var(--blue);
}

.signature-role {
  font-size: 1.6rem;
}

.signature-name {
  font-size: 3.4rem;
  font-weight: medium;
  letter-spacing: 0.1em;
}

/* SP */
@media (max-width: 900px) {
  .message {
    background: linear-gradient(180deg, #ECF5FF 0%, #FFFFFF 100%);
    padding-top: 0;
    margin-bottom: 9rem;
    z-index: 1;
    position: relative;
  }

  .message-photo img {
    width: 50rem;
    margin-top: 4rem; 
    position: relative;
    z-index: 2;
  }
  .message .eyebrow { margin-bottom: 4rem; }
  .message-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
  .message-photo { 
    width: 30rem; 
    margin: -10rem auto 0;
    position: relative;
    z-index: 2;
  }
  .message-text { text-align: left; font-size: 1.4rem; margin-bottom: 2rem; }
  .signature-name { font-size: 2.4rem; }
  .signature-role { font-size: 1.3rem; }
}

/* -------------------------------------------------------------------------
   History timeline
   ------------------------------------------------------------------------- */

/* PC */
.history { background: var(--white); padding-bottom: 10rem; }

.history .inner { padding: 0 2rem; }

.history .section-heading { margin-bottom: 4rem; }

.history .eyebrow {
  text-align: center;
  color: #F2F5FA;
}

.history h2 {
  text-align: center;
  margin-bottom: 7.6rem;
}

.timeline {
  position: relative;
  display: flex;
  gap: 4.8rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4.8rem;
  transform: translateX(-50%);
  background-image: url("../img/history-major.png");
  background-repeat: repeat-y;
  background-size: 4.8rem auto;
  background-position: top center;
}

.tl-col {
  flex: 1 1 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.tl-col-left  { text-align: left; margin-top: 6rem; }
.tl-col-right { text-align: left; }

.tl-item { padding: 0 12rem 6rem 10rem; }

.tl-col-left  .tl-photo { margin-left: auto;  margin-right: 0; }
.tl-col-right .tl-photo { margin-right: auto; margin-left: 0; }

.tl-photo { width: 30rem; }

.tl-col-left .tl-year,
.tl-col-left .tl-text {
  max-width: 30rem;
  margin-left: auto;
  margin-right: 0;
}

.tl-year {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 3.2rem;
  color: var(--blue-light);
  letter-spacing: -0.02em;
}

.tl-text {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--blue);
  line-height: 1.5;
}

.tl-col-right .tl-item:nth-child(3) {
  padding-top: 6rem;
  padding-bottom: 10rem;
}
.tl-col-right .tl-item:nth-child(4) {
  padding-top: 10rem;
}
.tl-col-left .tl-item:nth-child(5),
.tl-col-left .tl-item:nth-child(6) {
  padding-top: 5rem;
  padding-bottom: 15rem;
}

.tl-col-left .tl-item:nth-child(7) {
  padding-top: 29rem;
  padding-bottom: 15rem;
}

.tl-col-left .tl-item:nth-child(8) {
  padding-top: 35rem;
}

.tl-col-left .tl-item:last-child,
.tl-col-right .tl-item:last-child {
  padding-bottom: 0;
}

/* SP */
@media (max-width: 900px) {
  .history { padding-bottom: 8rem; }
  .history h2 { margin-bottom: 5rem; }
  .history .eyebrow { margin-bottom: 4.6rem; }
  .timeline-wrap { padding: 0 2rem; }
  .timeline { flex-direction: column; gap: 0; }
  .timeline::before { left: 3rem; top: 2rem; width: 5rem; background-image: url("../img/history-major-sp.png"); }

  .tl-col { display: contents; }

  .tl-col-left,
  .tl-col-right { text-align: left; margin-top: 0; }
  .tl-col-left .tl-year,
  .tl-col-left .tl-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .tl-year { font-size: 2.4rem; }
  .tl-text { font-size: 1.2rem; margin-bottom: 1.5rem; }
  .tl-item { padding: 0 0 4rem 8rem; }
  .tl-col-right .tl-item:last-child { padding-bottom: 0; }
  .tl-col-left  .tl-photo,
  .tl-col-right .tl-photo { margin-left: 0; margin-right: 0; width: 25rem; }

  /* 年代順に並べ替え（右列=奇数年、左列=偶数年） */
  .tl-col-right .tl-item:nth-child(1)  { order: 1; }
  .tl-col-left  .tl-item:nth-child(1)  { order: 2; }
  .tl-col-right .tl-item:nth-child(2)  { order: 3; }
  .tl-col-left  .tl-item:nth-child(2)  { order: 4; }
  .tl-col-right .tl-item:nth-child(3)  { order: 5; }
  .tl-col-left  .tl-item:nth-child(3)  { order: 6; }
  .tl-col-right .tl-item:nth-child(4)  { order: 7; }
  .tl-col-left  .tl-item:nth-child(4)  { order: 8; }
  .tl-col-right .tl-item:nth-child(5)  { order: 9; }
  .tl-col-left  .tl-item:nth-child(5)  { order: 10; }
  .tl-col-right .tl-item:nth-child(6)  { order: 11; }
  .tl-col-left  .tl-item:nth-child(6)  { order: 12; }
  .tl-col-right .tl-item:nth-child(7)  { order: 13; }
  .tl-col-left  .tl-item:nth-child(7)  { order: 14; }
  .tl-col-right .tl-item:nth-child(8)  { order: 15; }
  .tl-col-left  .tl-item:nth-child(8)  { order: 16; }
  .tl-col-right .tl-item:nth-child(9)  { order: 17; }
  .tl-col-left  .tl-item:nth-child(9)  { order: 18; }
  .tl-col-right .tl-item:nth-child(10) { order: 19; }
  .tl-col-left  .tl-item:nth-child(10) { order: 20; }
  .tl-col-right .tl-item:nth-child(11) { order: 21; }
  .tl-col-left  .tl-item:nth-child(11) { order: 22; }
  .tl-col-right .tl-item:nth-child(12) { order: 23; }
  .tl-col-left  .tl-item:nth-child(12) { order: 24; }
  .tl-col-right .tl-item:nth-child(13) { order: 25; }
  .tl-col-left  .tl-item:nth-child(13) { order: 26; }
  .tl-col-right .tl-item:nth-child(14) { order: 27; }
  .tl-col-left  .tl-item:nth-child(14) { order: 28; }
  .tl-col-right .tl-item:nth-child(15) { order: 29; }
  .tl-col-left  .tl-item:nth-child(15) { order: 30; }
  .tl-col-right .tl-item:nth-child(16) { order: 31; }

  .tl-col-right .tl-item:nth-child(3) {
    padding-top: 0;
    padding-bottom: 4rem;
  }
  .tl-col-right .tl-item:nth-child(4) {
    padding-top: 0;
  }
  .tl-col-left .tl-item:nth-child(5),
  .tl-col-left .tl-item:nth-child(6) {
    padding-top: 0;
    padding-bottom: 4rem;
  }

  .tl-col-left .tl-item:nth-child(7) {
    padding-top: 0;
    padding-bottom: 4rem;
  }

  .tl-col-left .tl-item:nth-child(8) {
    padding-top: 0;
  }
}

/* -------------------------------------------------------------------------
   Products
   ------------------------------------------------------------------------- */

/* PC */
.products .inner { padding: 0 2rem; }
.product-carousel { margin-bottom: 8.5rem; }

.pc-viewer {
  position: relative;
  max-width: 108rem;
  margin: 4rem auto 5rem;
}

.pc-stage {
  position: relative;
  width: 100%;
  height: 49rem;
  overflow: visible;
}

.pc-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 34rem;
  height: 100%;
  margin-left: -17rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease, opacity 0.5s ease;
  will-change: transform, opacity;
}

.pc-slide img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.pc-arrow--prev {
  left: calc(50% - 25rem);
  transform: translate(-50%, -50%);
}

.pc-arrow--next {
  left: calc(50% + 25rem);
  transform: translate(-50%, -50%);
}

.pc-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 0.2rem solid var(--blue);
  background: var(--white);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pc-arrow--prev .pc-arrow-icon {
  transform: rotate(180deg);
}

.pc-arrow:hover {
  background: var(--blue);
  color: var(--white);
}

.pc-dots {
  display: none;
}

.pc-dot {
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--blue-light);
  cursor: pointer;
}

.pc-dot.is-active {
  background: var(--blue);
}

.pc-info {
  background: var(--blue-light);
  border-radius: 1rem;
  padding: 5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  max-width: 108rem;
  margin: 0 auto;
}

.pc-info-text {
  flex: 1 1 auto;
  min-width: 0;
}

.fp-name-en {
  margin: 0;
  font-weight: 700;
  font-size: 3.4rem;
  color: var(--blue);
}

.fp-name-ja {
  margin: 0 0 4rem;
  font-size: 1.6rem;
  color: var(--blue);
}

.fp-desc {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--blue);
  white-space: pre-line;
}

.fp-link {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-block;
  font-weight: 700;
  color: var(--blue);
  font-size: 1.4rem;
}

/* SP */
@media (max-width: 900px) {
  .products .eyebrow {
    margin-bottom: 5rem;
  }
  .product-carousel {
    margin-top: 5rem;
  }
  .pc-info {
    flex-direction: column;
    align-items: stretch;
    padding: 4rem 2rem;
  }

  .pc-viewer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 4.6rem;
    column-gap: 2.7rem;
    margin: 2rem auto 3rem;
    overflow: hidden;
  }

  .pc-stage {
    order: 1;
    flex: 0 0 100%;
    height: 38rem;
    overflow: hidden;
  }

  .pc-slide {
    width: 26rem;
    margin-left: -13rem;
  }

  .pc-arrow {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 4rem;
    height: 4rem;
    border: 0.1rem solid var(--blue);
  }

  .pc-arrow--prev { order: 2; }
  .pc-dots        { order: 3; }
  .pc-arrow--next { order: 4; }

  .pc-dots {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .pc-arrow-icon {
    width: .6rem;
    height: 1.2rem;
  }

  .fp-name-en {
    text-align: center;
    font-size: 2.8rem;
  }
  .fp-name-ja {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 3rem;
  }
  .fp-link {
    font-size: 1.6rem;
    text-align: right;
  }

  /* 使用箇所が見当たらないため、不要なら削除して大丈夫です */
  .pg-card img { max-height: 9rem; }
  .pg-card p { font-size: 1.1rem; }
}

/* -------------------------------------------------------------------------
   Company data
   ------------------------------------------------------------------------- */

/* PC */
.company-data {
  position: relative;
  color: var(--white);
  overflow: hidden;
  margin-bottom: 15rem;
  padding: 7rem 0;
}

.company-data .eyebrow {
  color: #F2F5FA;
  opacity: .5;
  margin: 0;
}

.company-data .section-title {
  margin-top: -3.5rem;
  letter-spacing: 0.005em;
}

.cd-bg-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cd-bg {
  position: absolute;
  inset: 0;
  background-color: var(--blue);
  background-image: url("../img/company-data-bg-pc.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.company-data .inner { position: relative; z-index: 1; padding: 0 2rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  max-width: 108rem;
  margin: 8.1rem auto 0;
}

.stat-card {
  background: var(--white);
  border-radius: 1.2rem;
  padding: 5rem 1.5rem 4rem;
  color: var(--blue);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.stat-card:nth-child(1),
.stat-card:nth-child(3),
.stat-card:nth-child(5) {
  background: #D7E7FA;
}

.stat-label {
  margin: 0 0 5rem;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.stat-value span:not(.stat-num) {
  font-size: 3rem;
  font-weight: 600;
  margin-left: 0.3rem;
}

.stat-value {
  margin: 0 0 6rem;
  font-weight: 900;
  font-size: 7.5rem;
}

.stat-num {
  font-weight: inherit;
  font-size: inherit;
}

.stat-caption {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

.cd-closing {
  margin: 6rem 0 0;
  text-align: center;
  color: var(--white);
  font-size: 3rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  line-height: 1.8;
}

.stat-card:last-child .stat-value {
  font-size: 4.3rem;
  line-height: 1.2;
}

.stat-card:last-child .stat-value span:nth-of-type(2) {
  font-size: 2.5rem;
}

/* SP */
@media (max-width: 900px) {
  .company-data .eyebrow {
    font-size: 4.6rem;
    margin-bottom: 2.4rem;
  }
  .company-data .inner {
    padding: 0;
  }
  .company-data {
    margin-bottom: 8rem;
    padding: 7.3rem 0 4rem;
  }
  .cd-bg { background-image: url("../img/company-data-bg-sp.png"); }
  .cd-closing {
    margin-top: 4rem;
    font-size: 2rem;
    padding: 0 3rem;
  }
  .stat-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0 2rem;
  }

  .stat-card {
    padding: 5rem 1.3rem 4rem;
  }

  .stat-value {
    font-size: 7.5rem;
    line-height: 1;
    margin-bottom: 0;
  }

  .stat-value span:not(.stat-num) {
    font-size: 3rem;
  }

  .stat-label {
    margin-bottom: 0;
    font-size: 2.1rem;
  }
  .stat-caption { font-size: 1.4rem; }
}

/* -------------------------------------------------------------------------
   Gratitude banner
   ------------------------------------------------------------------------- */

/* PC */
.gratitude { line-height: 0; padding: 0 7rem; }

.gr-img { width: 100%; height: auto; }

.gr-img-sp { display: none; }

/* SP */
@media (max-width: 900px) {
  .gratitude { padding: 0 2rem; }
  .gr-img-pc { display: none; }
  .gr-img-sp { display: block; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

/* PC */
.site-footer {
  background: linear-gradient(180deg, #FFF 0%, #DDEDFF 100%);
  padding-top: 20rem;
}

.site-footer .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10.4rem;
  text-align: center;
  max-width: 131.3rem;
  padding: 0 6.5rem;
}

.footer-logo { width: 36.7rem; margin-right: auto; }

.footer-nav {
  display: flex;
  color: var(--blue);
  flex-wrap: wrap;
  justify-content: center;
  gap: 16.8rem;
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 12.5rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
}

.footer-bar {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  font-size: 1.3rem;
  padding: 2.2rem 2rem;
}

/* SP */
@media (max-width: 900px) {
  .site-footer {
    padding-top: 10rem;
  }
  .site-footer .inner {
    gap: 3rem;
  }
  .footer-nav {
    gap: 3.5rem;
    font-size: 1.6rem;
    padding: 0 8rem 4rem;
  }
  .footer-logo { width: 29.5rem; }
  .footer-bar { font-size: 1.2rem; padding: 1.3rem 0; }
}

/* -------------------------------------------------------------------------
   History modal
   ------------------------------------------------------------------------- */

/* PC */
.tl-card {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tl-card:hover {
  transform: translateY(-0.4rem);
}

.tl-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.4rem;
}

.tl-modal.is-open {
  display: flex;
}

.tl-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 60, 0.6);
}

.tl-modal-inner {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 1.2rem;
  max-width: 60rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 4rem;
  text-align: center;
  animation: tl-modal-pop 0.25s ease;
}

@keyframes tl-modal-pop {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.tl-modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  border: none;
  background: none;
  font-size: 3rem;
  line-height: 1;
  color: var(--blue);
  cursor: pointer;
}

.tl-modal-photo {
  max-width: 100%;
  max-height: 40vh;
  width: auto;
  margin: 0 auto 2.4rem;
  border-radius: 0.6rem;
}

.tl-modal-year {
  margin: 0 0 1.2rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 3.6rem;
  color: var(--blue-light);
}

.tl-modal-text {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--blue);
}

body.tl-modal-open {
  overflow: hidden;
}

/* SP */
@media (max-width: 900px) {
  .tl-modal-inner { padding: 3rem 2rem; }
  .tl-modal-year { font-size: 2.6rem; }
  .tl-modal-text { font-size: 1.5rem; }
}