@charset "UTF-8";
/* Final site-specific overrides. Loaded after the legacy stylesheet. */
.p-initiative>.c-pillar,.p-initiative .c-heading__deco,.p-message>.c-pillar,.p-message__header,.p-message__items>.c-rail,.p-message__item-deco{display:none!important}.p-initiative .c-heading{width:auto!important}
.p-message{overflow:hidden!important;padding-block:clamp(84px,9vw,138px)!important;color:var(--hk-ink)!important;background:linear-gradient(180deg,#f3f8fd 0%,#fff 100%)!important;background-image:linear-gradient(180deg,#f3f8fd 0%,#fff 100%)!important}.p-message__body{width:min(1120px,calc(100% - 64px))!important;margin-inline:auto!important;padding-inline:0!important}.p-message__items{display:block!important}
.p-message__item:only-of-type{display:grid!important;grid-template:"title image" "text image"/minmax(0,1.08fr) minmax(330px,.78fr)!important;gap:clamp(34px,4.4vw,66px) clamp(56px,7vw,104px)!important;align-items:center!important;width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;color:var(--hk-ink)!important;background:transparent!important;background-image:none!important;box-shadow:none!important}.p-message__item:only-of-type:before,.p-message__item:only-of-type:after{display:none!important;content:none!important}.p-message__item-eyebrow{display:none!important}
.p-message__item:only-of-type .p-message__item-title{grid-area:title!important;display:flex!important;align-items:center!important;gap:22px!important;margin:0!important;padding:0 0 22px!important;border-bottom:1px solid #bdd3e8!important}.p-message__item-title--label{padding:8px 15px!important;border:1px solid var(--hk-blue)!important;border-radius:999px!important;color:var(--hk-blue)!important;background:transparent!important;backdrop-filter:none!important}.p-message__item:only-of-type .p-message__item-title--ttl{color:var(--hk-ink)!important;font-size:clamp(25px,2.5vw,38px)!important}.p-message__item:only-of-type .p-message__item-title--ttl:after{display:none!important}
.p-message__item:only-of-type .p-message__item-text{grid-area:text!important;position:relative!important;align-self:start!important;padding:clamp(32px,3.4vw,50px) clamp(30px,3.8vw,58px)!important;border:0!important;border-radius:clamp(28px,3vw,46px)!important;color:#fff!important;background:linear-gradient(135deg,#1974cf 0%,#075caf 100%)!important;background-image:linear-gradient(135deg,#1974cf 0%,#075caf 100%)!important;box-shadow:0 22px 50px rgb(8 67 130/.18)!important;backdrop-filter:none!important}.p-message__item:only-of-type .p-message__item-text:before{content:""!important;top:auto!important;right:18%!important;bottom:-25px!important;left:auto!important;width:0!important;height:0!important;border-width:26px 0 0 42px!important;border-style:solid!important;border-color:transparent transparent transparent #075caf!important;color:transparent!important;opacity:1!important;transform:rotate(8deg)!important}
.p-message__item:only-of-type .p-message__item-subTtl{margin-bottom:clamp(20px,2vw,30px)!important;padding:0!important;color:#fff!important;font-size:clamp(24px,2.35vw,35px)!important;line-height:1.65!important;text-decoration:none!important}.p-message__item:only-of-type .p-message__item-subTtl:before{content:"\201C";margin-right:8px;color:var(--hk-gold);font-family:Georgia,serif;font-size:1.7em;line-height:0;vertical-align:-.2em}.p-message__item:only-of-type .p-message__item-text>p:not(.p-message__item-subTtl):not(.p-message__item-name){color:rgb(255 255 255/.88)!important;font-size:clamp(13px,1.08vw,16px)!important;line-height:2!important}.p-message .p-message__item-name{margin-top:clamp(24px,2.4vw,34px)!important;color:#fff!important}.p-message .p-message__item-name span{color:var(--hk-gold)!important}
.p-message__item-img{grid-area:image!important;position:relative!important;z-index:1!important;margin:0!important;align-self:stretch!important}.p-message__item:only-of-type .p-message__item-img:before{display:none!important;content:none!important}.p-message__item-img>img:not(.p-message__item-deco){width:100%!important;height:100%!important;min-height:520px!important;max-height:680px!important;aspect-ratio:auto!important;border:0!important;border-radius:clamp(28px,3vw,46px)!important;object-fit:cover!important;object-position:54% center!important;box-shadow:0 24px 54px rgb(10 58 112/.18)!important;rotate:0deg!important}
.l-footer-body__cta-entry{overflow:hidden!important}.l-footer-body__cta-entry-people-decorate{right:clamp(8px,1vw,18px)!important;bottom:0!important;width:clamp(170px,15vw,230px)!important;height:clamp(140px,12vw,188px)!important;overflow:hidden!important;pointer-events:none!important}.l-footer-body__cta-entry-people.--profile{left:2%!important;bottom:4%!important;width:47%!important}.l-footer-body__cta-entry-people.--ingots{right:1%!important;bottom:4%!important;width:47%!important}.l-footer-body__cta-entry-people-svg{display:none!important}
@media(max-width:63.99rem){.p-message__body{width:min(100% - 40px,720px)!important}.p-message__item:only-of-type{grid-template-columns:1fr!important;grid-template-areas:"title" "image" "text"!important;gap:30px!important}.p-message__item-img{min-height:420px!important}.p-message__item-img>img:not(.p-message__item-deco){min-height:420px!important;max-height:540px!important}.l-footer-body__cta-entry-people-decorate{width:clamp(130px,35vw,190px)!important;height:clamp(118px,31vw,166px)!important}}
@media(max-width:47.99rem){.p-message{padding-block:72px!important}.p-message__item:only-of-type .p-message__item-title{align-items:flex-start!important;flex-direction:column!important;gap:14px!important}.p-message__item-img{min-height:340px!important}.p-message__item-img>img:not(.p-message__item-deco){min-height:340px!important;max-height:440px!important}.p-message__item:only-of-type .p-message__item-text{padding:30px 24px 36px!important}.l-footer-body__cta-entry-people-decorate{width:122px!important;height:116px!important}}

/* HOKUSEI Data: 数字ではなく文章が入力された場合は見出し用の大きさに整える。 */
.p-about-v2__stat.--s2 .p-about-v2__value:not(:has(em)) {
  max-width: 14em;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: clamp(22px, 2.15vw, 32px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .01em;
  text-wrap: balance;
}

/* カスタマイザーで指定した改行を、カードと代表メッセージで読みやすく見せる。 */
.p-initiative__card-txt br { display: block; content: ""; margin-top: .55em; }
.p-message__item-text > p:not(.p-message__item-subTtl):not(.p-message__item-name) br {
  display: block;
  content: "";
  margin-top: .7em;
}

/*
 * HOKUSEI Data：カスタマイザーの左パネルでプレビューが狭くなっても、
 * 裁量カードだけが右列へ戻らないようタブレット〜小型PC幅を補完する。
 */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p-about-v2__stat.--s4 {
    grid-column: 1 / 7 !important;
    grid-row: 4 !important;
    margin-top: 0 !important;
  }

  .p-about-v2__stat.--s2,
  .p-about-v2__stat.--s4 {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 29%) !important;
  }

  .p-about-v2__stat.--s2 > figure,
  .p-about-v2__stat.--s4 > figure { order: 2; }

  .p-about-v2__stat.--s2 > div,
  .p-about-v2__stat.--s4 > div { order: 1; }

  .p-about-v2__building {
    grid-row: 1 / span 4 !important;
    align-self: center;
  }
}

/* ENTRY本文とお問い合わせボタンの重なり防止。
   右側の静物写真を避けた位置から、ボタン40px＋可読余白16pxを確保する。 */
@media (min-width: 64rem) {
  .l-footer-body__cta-entry-copy {
    padding-right: calc(14.5vw + 56px) !important;
  }
}

/* CEO MESSAGE：旧吹き出しの三角形が既存疑似要素と競合し、
   カード下に破片状の装飾として現れるため撤去する。 */
.p-message__item:only-of-type .p-message__item-text::before,
.p-message__item:only-of-type .p-message__item-text::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   HERO VISUAL SYSTEM
   人物切り抜きは輪郭に沿う白縁、写真は矩形フレームで統一する。
   モーションは補間を使わず、数コマを切り替える段階的な動きにする。
   ========================================================= */
@keyframes hkHeroStepA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(-3px, -7px, 0) rotate(-1deg); }
  50% { transform: translate3d(4px, -3px, 0) rotate(1deg); }
  75% { transform: translate3d(-2px, -1px, 0) rotate(0deg); }
}

@keyframes hkHeroStepB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(4px, -3px, 0) rotate(1deg); }
  50% { transform: translate3d(-3px, -8px, 0) rotate(-1deg); }
  75% { transform: translate3d(2px, -2px, 0) rotate(1deg); }
}

@keyframes hkHeroPhotoStep {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
  33% { transform: scale(1.012) translate3d(-2px, -2px, 0); }
  66% { transform: scale(1.006) translate3d(2px, -1px, 0); }
}

/* 切り抜き画像の白縁。
   drop-shadowを4方向に重ねる方式は、素材の縁が半透明だと縁が痩せて消える。
   カスタマイザーで差し替えた画像（書き出し時にアンチエイリアスが乗る）で
   白枠が出なかったのはこれが原因。アルファを膨張させるSVGフィルタに統一し、
   どんな素材でも同じ太さのソリッドな白縁が出るようにする。 */
.p-hero__img > img:not(.p-hero__deco),
.p-story-hero__figures img,
.p-sub-fv__fig,
.p-guideline__hero-person {
  filter:
    url("#hokusei-cutout-outline")
    drop-shadow(0 13px 22px rgb(3 31 74 / .24)) !important;
  will-change: transform;
}

/* トップは既存のstepsアニメーションを維持し、輪郭だけ全画像で統一。 */
.p-hero__img {
  will-change: transform;
}

/* ストーリー：3人を独立したレーンに収め、文字と人物同士の干渉を防ぐ。 */
.p-story-hero__figures .--story-f1 {
  right: 29% !important;
  bottom: -4% !important;
  width: 16% !important;
  opacity: 1 !important;
  rotate: -2deg;
  animation: hkHeroStepA 5.6s step-end infinite !important;
}

.p-story-hero__figures .--story-f2 {
  right: 13% !important;
  bottom: -4% !important;
  width: 15% !important;
  opacity: 1 !important;
  rotate: 1deg;
  animation: hkHeroStepB 6.2s step-end -1.4s infinite !important;
}

.p-story-hero__figures .--story-f3 {
  right: 1% !important;
  bottom: 7% !important;
  width: 11% !important;
  opacity: 1 !important;
  rotate: 2deg;
  animation: hkHeroStepA 5.1s step-end -2.2s infinite !important;
}

/* FAQ：ストーリーヒーローと同じ3レーン構成。
   SVGの形態膨張で、グローを含まないソリッドな切り抜き枠を生成する。 */
.hokusei-cutout-defs,
.p-sub-fv__outline-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* FAQのヒーローも共通フィルタに揃える（旧 #faq-cutout-outline は廃止）。 */
.p-sub-fv.--faq .p-sub-fv__fig {
  filter:
    url("#hokusei-cutout-outline")
    drop-shadow(0 13px 22px rgb(3 31 74 / .24)) !important;
}

.p-sub-fv__loop-text {
  animation-duration: 78s !important;
}

.p-sub-fv__loop-text p {
  padding-right: .24em !important;
}

.p-sub-fv__fig.--f1 {
  right: 1% !important;
  bottom: -4% !important;
  width: 14% !important;
  animation: hkHeroStepA 5.8s step-end infinite !important;
}

.p-sub-fv__fig.--f2 {
  right: 19% !important;
  bottom: -2% !important;
  width: 15% !important;
  animation: hkHeroStepB 6.4s step-end -1.7s infinite !important;
}

.p-sub-fv__fig.--f3 {
  top: auto !important;
  right: 35% !important;
  bottom: 10% !important;
  width: 12% !important;
  animation: hkHeroStepA 5.2s step-end -2.6s infinite !important;
}

/* 募集要項：左右の人物を各46%の領域に分けて重なりを解消。 */
.p-guideline__hero-person.--woman {
  left: 0 !important;
  width: 46% !important;
  animation: hkHeroStepA 5.9s step-end infinite !important;
}

.p-guideline__hero-person.--man {
  right: 0 !important;
  width: 46% !important;
  animation: hkHeroStepB 6.5s step-end -1.8s infinite !important;
}

/* 社員インタビュー4ページ：通常写真には白い矩形フレームを付ける。 */
.p-iv-ref__hero-visual {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: clamp(5px, .45vw, 8px) solid #fff !important;
  box-shadow: 0 24px 54px rgb(3 31 74 / .20) !important;
}

.p-iv-ref__hero-visual > img {
  width: 100% !important;
  height: 100% !important;
  animation: hkHeroPhotoStep 6.4s step-end infinite !important;
  will-change: transform;
}

@media (max-width: 63.99rem) {
  .p-story-hero__figures .--story-f1 {
    right: 68% !important;
    bottom: -2% !important;
    width: 26% !important;
  }

  .p-story-hero__figures .--story-f2 {
    right: 37% !important;
    bottom: -2% !important;
    width: 26% !important;
  }

  .p-story-hero__figures .--story-f3 {
    right: 6% !important;
    bottom: 5% !important;
    width: 24% !important;
  }

  /* 小画面では見出しの可読性を優先し、主役の人物だけを残す。 */
  .p-sub-fv__fig.--f1 {
    right: 2% !important;
    bottom: -2% !important;
    width: 29% !important;
  }

  .p-sub-fv__fig.--f2,
  .p-sub-fv__fig.--f3 {
    display: none !important;
  }

  .p-guideline__hero-person.--woman {
    left: 1% !important;
    width: 44% !important;
  }

  .p-guideline__hero-person.--man {
    right: 1% !important;
    width: 44% !important;
  }
}

@media (max-width: 47.99rem) {
  .p-story-hero__figures .--story-f1 {
    right: 69% !important;
    width: 27% !important;
  }

  .p-story-hero__figures .--story-f2 {
    right: 38% !important;
    width: 27% !important;
  }

  .p-story-hero__figures .--story-f3 {
    right: 7% !important;
    width: 25% !important;
  }

  .p-sub-fv__fig.--f1 {
    right: -1% !important;
    width: 31% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__img,
  .p-story-hero__figures img,
  .p-sub-fv__fig,
  .p-guideline__hero-person,
  .p-iv-ref__hero-visual > img {
    animation: none !important;
  }
}

/* =========================================================
   TOP / Discover・事業モーダル・Information（v1.7.3）
   ========================================================= */
@keyframes hkDiscoverStep {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(5px, -7px, 0) rotate(8deg); }
  50% { transform: translate3d(-3px, -2px, 0) rotate(-5deg); }
  75% { transform: translate3d(3px, 3px, 0) rotate(3deg); }
}

/* 左側を埋めていた人物・商品写真は撤去し、星と線の軽い装飾だけを残す。 */
.p-variety__pillar-objs { display: none !important; }
.p-variety__steps { position: relative; }
.p-variety__steps::before,
.p-variety__steps::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: clamp(34px, 4vw, 58px);
  aspect-ratio: 1;
  pointer-events: none;
  background: url("../images/deco/star-white.svg") center / contain no-repeat;
  animation: hkDiscoverStep 5.8s step-end infinite;
}
.p-variety__steps::before { top: 7%; right: 2%; }
.p-variety__steps::after {
  right: auto;
  bottom: 9%;
  left: 2%;
  width: clamp(26px, 3vw, 44px);
  background-image: url("../images/deco/spark-gold.svg");
  animation-delay: -2.1s;
}

@media (min-width: 48rem) {
  /* 左端の装飾帯（縦のHOKUSEI＋破線レール）は最大176pxを占める。
     本文はその外側から始める。40pxだと1024〜1400pxの幅で破線に文字が乗る。 */
  .p-variety__inner {
    width: min(1180px, calc(100vw - 150px)) !important;
    padding-left: clamp(76px, 9vw, 120px) !important;
  }
  .p-variety__steps { display: grid; gap: clamp(72px, 8vw, 116px); }
  .p-variety__item.--b,
  .p-variety__item.--c {
    left: auto !important;
    width: min(88%, 980px) !important;
    min-height: clamp(390px, 38vw, 500px) !important;
    display: grid !important;
    grid-template-columns: minmax(280px, .95fr) minmax(300px, 1.05fr) !important;
    gap: clamp(34px, 4vw, 68px) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: clamp(24px, 2.8vw, 38px) !important;
    overflow: visible !important;
    border: 1px solid rgb(255 255 255 / .72) !important;
    border-radius: 34px !important;
    background: rgb(255 255 255 / .07) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .p-variety__item.--b { justify-self: start; }
  .p-variety__item.--c {
    grid-template-columns: minmax(300px, 1.05fr) minmax(280px, .95fr) !important;
    justify-self: end;
  }
  .p-variety__item.--c::after { display: none !important; content: none !important; }
  .p-variety__item.--b .p-variety__item-figure { grid-column: 1; }
  .p-variety__item.--b .p-variety__item-text { grid-column: 2; }
  .p-variety__item.--c .p-variety__item-figure {
    position: relative !important;
    inset: auto !important;
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    margin: 0 !important;
    border-radius: 26px !important;
  }
  .p-variety__item.--c .p-variety__item-text {
    position: relative !important;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    padding: 0 !important;
  }
  .p-variety__item.--b .p-variety__item-figure,
  .p-variety__item.--c .p-variety__item-figure { height: clamp(300px, 29vw, 390px); }
  .p-variety__item.--b .p-variety__item-figure img,
  .p-variety__item.--c .p-variety__item-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px !important;
  }
}

/* モーダルは移管前と同じ情報量を復旧し、トップの配色へ統一。 */
.c-modal { z-index: 10000 !important; background: rgb(2 30 72 / .76) !important; backdrop-filter: blur(8px); }
.c-modal__body {
  width: min(720px, calc(100vw - 36px)) !important;
  padding: clamp(44px, 5vw, 72px) !important;
  border: 2px solid #fff !important;
  border-radius: 32px !important;
  background: linear-gradient(145deg, #fff 0%, #eef6ff 100%) !important;
  box-shadow: none !important;
}
.c-modal__eyebrow {
  margin: 0 0 10px !important;
  color: var(--hk-blue) !important;
  font-family: var(--ff-en) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}
.c-modal__content h3 { color: var(--hk-blue) !important; }
.c-modal__content li::before { background: var(--hk-gold) !important; }

/* 右カラム内で2枚を中央寄せし、離れ過ぎない一組として見せる。 */
.p-information__banner-list {
  align-self: center !important;
  justify-content: center !important;
  gap: clamp(22px, 2.2vw, 34px) !important;
  width: min(270px, 100%) !important;
  margin-inline: auto !important;
}
.p-information__banner-item { width: 100% !important; margin: 0 !important; }

@media (max-width: 47.99rem) {
  .p-variety__steps::before { top: 2%; right: 0; }
  .p-variety__steps::after { bottom: 3%; left: 0; }
  .p-variety__item.--b,
  .p-variety__item.--c { box-shadow: none !important; }
  .p-information__banner-list { width: min(310px, 86vw) !important; }
  .c-modal__body { padding: 52px 26px 34px !important; border-radius: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .p-variety__steps::before,
  .p-variety__steps::after { animation: none !important; }
}

/* =========================================================
   Responsive hardening (v1.8.6)
   320px–1023pxで、余白・文字量・写真の重なり・操作領域を最終調整。
   ========================================================= */
html {
  overflow-x: clip;
  scroll-padding-top: 96px;
}

section[id] { scroll-margin-top: 96px; }

a,
button,
[role="button"] { touch-action: manipulation; }

.p-message__item-text p,
.p-initiative__card-text,
.p-about-v2__description,
.p-iv-ref__story-copy,
.p-iv-ref__bubble-card p {
  overflow-wrap: anywhere;
}

@media (max-width: 63.99rem) {
  /* トップFV：コピーを画面中央へ戻し、人物群はコピーの下側に整理する。 */
  .p-hero__title {
    top: 39% !important;
    left: 12% !important;
    width: 76% !important;
    font-size: clamp(40px, 7vw, 56px) !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }

  .p-hero__title span:first-child { margin-left: 0 !important; }
  .p-hero__img.--hp25 { top: 55% !important; left: -5% !important; width: 38% !important; }
  .p-hero__img.--hp20 { top: 54% !important; left: 49% !important; width: 59% !important; }
  .p-hero__img.--hp26 { top: 68% !important; left: 36% !important; width: 23% !important; }

  /* 長文カードは画面幅に応じて自然に縮み、内部だけで完結させる。 */
  .p-initiative__card-scroll { overscroll-behavior-inline: contain; }
  .p-initiative__card-item { min-width: 0; }

  /* 社員インタビュー：小画面で写真を残しつつ、情報カードを圧縮する。 */
  .p-iv-ref__hero-frame,
  .p-iv-ref__hero-caption { width: min(100% - 40px, 920px) !important; }

  .p-iv-ref__hero-bubble {
    right: 24px !important;
    bottom: 26px !important;
    left: 24px !important;
    padding: 32px 34px 34px !important;
  }

  .p-iv-ref__hero-bubble h1 {
    font-size: clamp(22px, 3.2vw, 29px) !important;
    line-height: 1.55 !important;
  }

  .p-iv-ref__interviews > .c-wrap,
  .p-iv-ref__future > .c-wrap,
  .p-iv-ref__related > .c-wrap {
    width: min(100% - 40px, 920px) !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 47.99rem) {
  html { scroll-padding-top: 78px; }
  section[id] { scroll-margin-top: 78px; }

  .l-header__logo a,
  .p-iv-ref__back {
    display: inline-flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }

  /* トップFV：320pxでも見出しと人物の顔が衝突しない構成。 */
  .p-hero__title {
    top: 35.5% !important;
    left: 7% !important;
    width: 86% !important;
    font-size: clamp(27px, 8.25vw, 34px) !important;
    line-height: 1.48 !important;
  }

  .p-hero__img.--hp25 { top: 51.5% !important; left: -8% !important; width: 43% !important; }
  .p-hero__img.--hp20 { top: 53% !important; left: 45% !important; width: 67% !important; }
  .p-hero__img.--hp26 { top: 67.5% !important; left: 33% !important; width: 27% !important; }
  .p-hero__loop { top: 73% !important; }
  .p-hero__loop-text p { font-size: 22vw !important; }

  /* 事業カードは1枚ずつ読みやすい幅で止まり、次カードが少し見える。 */
  .p-initiative__card-item {
    width: min(82vw, 300px) !important;
    padding: 20px 18px 48px !important;
  }

  .p-initiative__card-item img { max-width: 62% !important; }
  .p-initiative__card-text { font-size: 13px !important; line-height: 1.82 !important; }

  /* モーダルと各CTAは指で押せる最小サイズを確保。 */
  .c-modal__close,
  .c-box--arrow,
  .c-box--plus { min-width: 44px; min-height: 44px; }

  /* 社員インタビューFV：吹き出しが写真全体を覆わない比率へ。 */
  .p-iv-ref__hero { padding-bottom: 54px !important; }
  .p-iv-ref__hero-frame,
  .p-iv-ref__hero-caption { width: calc(100% - 28px) !important; }
  .p-iv-ref__hero-visual { min-height: 470px !important; }
  .p-iv-ref__hero-visual > img { object-position: 67% center !important; }

  .p-iv-ref__hero-bubble,
  .p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__hero-bubble {
    right: 14px !important;
    bottom: 16px !important;
    left: 14px !important;
    padding: 22px 20px 24px !important;
    border-width: 2px !important;
    border-radius: 28px 28px 28px 10px !important;
  }

  .p-iv-ref__hero-bubble::before {
    top: -24px !important;
    left: 20px !important;
    font-size: 50px !important;
  }

  .p-iv-ref__hero-bubble h1 {
    font-size: 18px !important;
    line-height: 1.55 !important;
    letter-spacing: .02em !important;
  }

  .p-iv-ref__hero-info { gap: 7px 9px !important; margin-top: 13px !important; }
  .p-iv-ref__hero-info strong { font-size: 20px !important; }
  .p-iv-ref__hero-info span { padding: 5px 8px !important; font-size: 9px !important; }

  .p-iv-ref__interviews > .c-wrap,
  .p-iv-ref__future > .c-wrap,
  .p-iv-ref__related > .c-wrap {
    width: calc(100% - 32px) !important;
  }

  .p-iv-ref__story,
  .p-iv-ref__future-grid,
  .p-iv-ref__bubbles { min-width: 0; }

  .p-iv-ref__story-visual,
  .p-iv-ref__story-visual img,
  .p-iv-ref__future-person,
  .p-iv-ref__future-person img { max-width: 100% !important; }

  .p-iv-ref__interviews-heading h2,
  .p-iv-ref__future-heading h2,
  .p-iv-ref__related-title h2 {
    font-size: clamp(27px, 9vw, 34px) !important;
    line-height: 1.32 !important;
  }
}

@media (max-width: 22.5rem) {
  .p-hero__title { font-size: 26px !important; }
  .p-iv-ref__hero-visual { min-height: 445px !important; }
  .p-iv-ref__hero-bubble h1 { font-size: 17px !important; }
  .p-iv-ref__interviews > .c-wrap,
  .p-iv-ref__future > .c-wrap,
  .p-iv-ref__related > .c-wrap { width: calc(100% - 24px) !important; }
}

/* =========================================================
   CEO message heading (v1.8.8)
   引用符アイコンを使わず、書体と色そのものをアクセントにする。
   ========================================================= */
.p-message__item:only-of-type .p-message__item-subTtl {
  position: relative;
  padding: clamp(4px, .5vw, 8px) 0 clamp(10px, 1vw, 15px) clamp(18px, 1.8vw, 26px) !important;
  border-left: clamp(5px, .45vw, 7px) solid #ffd84d;
  color: #fff !important;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif !important;
  font-size: clamp(29px, 2.65vw, 42px) !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
  line-height: 1.48 !important;
  text-wrap: balance;
  font-feature-settings: "palt" 1;
}

.p-message__item:only-of-type .p-message__item-subTtl::before {
  display: none !important;
  content: none !important;
}

.p-message__item:only-of-type .p-message__quote {
  display: none !important;
}

.p-message__item:only-of-type .p-message__item-subTtl::after {
  display: block;
  width: min(100%, 560px);
  height: 2px;
  margin-top: clamp(14px, 1.4vw, 20px);
  border-radius: 0;
  background: linear-gradient(90deg, #ffd84d 0%, rgb(255 216 77 / .5) 48%, transparent 100%);
  content: "";
}

@media (max-width: 47.99rem) {
  .p-message__item:only-of-type .p-message__item-subTtl {
    padding-left: 16px !important;
    border-left-width: 5px;
    font-size: clamp(25px, 7.8vw, 31px) !important;
    line-height: 1.5 !important;
    letter-spacing: -.02em !important;
  }
}

/* ============================================================
   ADD 2026-09-01: 採用サイトとして必要な4セクション
   （求める人物像／入社後の育ち方／社内の雰囲気／働く環境と制度）
   既存の配色トークン（--hk-blue / --hk-gold / --hk-cream / --hk-ink）で組む。
   ------------------------------------------------------------ */
.p-persona, .p-growth, .p-culture, .p-environment { --sec-pad: clamp(72px, 8vw, 124px); }

.p-sec-head { max-width: 46rem; margin: 0 auto clamp(38px, 4.5vw, 62px); text-align: center; }
.p-sec-head__en {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 14px; color: var(--hk-blue);
  font-family: var(--ff-en); font-size: 12px; font-weight: 800; letter-spacing: .2em;
}
.p-sec-head__en::before, .p-sec-head__en::after {
  content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--hk-gold);
}
.p-sec-head__title {
  margin: 0 0 16px; color: var(--hk-ink);
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(25px, 3.4vw, 42px); line-height: 1.45; letter-spacing: .01em;
  text-wrap: balance;
}
.p-sec-head__lead {
  margin: 0; color: #4b5563; font-size: clamp(14px, 1.1vw, 16px); line-height: 2;
}
/* ---- 求める人物像（生成りの明るい面に白カード。前後の藍と差をつける） ---- */
.p-persona {
  padding-block: var(--sec-pad); overflow: hidden;
  background: linear-gradient(180deg, #FFFBF2 0%, #F7F5EF 100%);
}
.p-persona__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(16px, 1.8vw, 26px); max-width: 1120px; margin: 0 auto; padding: 0; list-style: none;
}
.p-persona__item {
  position: relative; padding: clamp(28px, 2.6vw, 38px) clamp(22px, 2.2vw, 30px) clamp(26px, 2.4vw, 34px);
  border: 1px solid #ece6d8; border-radius: 22px; background: #FFFFFF;
  box-shadow: 0 12px 26px rgb(90 78 48 / .08);
}
.p-persona__no {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 50%; background: var(--hk-gold); color: var(--hk-ink);
  font-family: var(--ff-en); font-size: 15px; font-weight: 800;
}
.p-persona__item h3 {
  margin: 0 0 12px; color: var(--hk-ink);
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6;
}
.p-persona__item p { margin: 0; color: #4b5563; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.95; }

/* ---- 入社後の育ち方（3ステップ） ---- */
.p-growth { padding-block: var(--sec-pad); background: #FFFFFF; }
.p-growth__steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(18px, 2vw, 30px); max-width: 1080px; margin: 0 auto; padding: 0; list-style: none;
  counter-reset: growth;
}
.p-growth__item {
  position: relative; padding: clamp(30px, 2.8vw, 42px) clamp(24px, 2.3vw, 32px);
  border: 1px solid #dbe6f3; border-radius: 22px; background: var(--hk-cream);
}
.p-growth__step {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 999px;
  background: var(--hk-blue); color: #FFFFFF;
  font-family: var(--ff-en); font-size: 11px; font-weight: 800; letter-spacing: .14em;
}
.p-growth__item h3 {
  margin: 0 0 12px; color: var(--hk-ink);
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55;
}
.p-growth__item p { margin: 0; color: #4b5563; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.95; }
.p-growth__item::after {
  content: ""; position: absolute; top: 50%; right: -18px; width: 12px; height: 12px;
  border-top: 3px solid var(--hk-gold); border-right: 3px solid var(--hk-gold);
  rotate: 45deg; translate: 0 -50%;
}
.p-growth__item:last-child::after { display: none; }

/* ---- 社内の雰囲気 ---- */
.p-culture { padding-block: var(--sec-pad); background: var(--hk-cream); }
.p-culture__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: clamp(16px, 1.8vw, 24px); max-width: 1080px; margin: 0 auto; padding: 0; list-style: none;
}
.p-culture__item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: clamp(22px, 2.2vw, 30px); border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 10px 24px rgb(15 46 90 / .07);
}
.p-culture__mark {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: rgb(45 184 197 / .16); color: #12808c;
  font-family: var(--ff-en); font-size: 13px; font-weight: 800;
}
.p-culture__item h3 {
  margin: 0 0 8px; color: var(--hk-ink);
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6;
}
.p-culture__item p { margin: 0; color: #4b5563; font-size: clamp(12.5px, .96vw, 14px); line-height: 1.9; }

/* ---- 働く環境と制度 ---- */
.p-environment { padding-block: var(--sec-pad); background: #FFFFFF; }
.p-environment__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(14px, 1.6vw, 22px); max-width: 1080px; margin: 0 auto; padding: 0; list-style: none;
}
.p-environment__item {
  padding: clamp(24px, 2.3vw, 32px) clamp(20px, 2vw, 28px);
  border: 1px solid #e3e8ef; border-top: 4px solid var(--hk-gold); border-radius: 16px;
  background: #FFFFFF;
}
.p-environment__item h3 {
  margin: 0 0 10px; color: var(--hk-ink);
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(15px, 1.22vw, 17.5px); line-height: 1.6;
}
.p-environment__item p { margin: 0; color: #4b5563; font-size: clamp(12.5px, .96vw, 14px); line-height: 1.9; }
.p-environment__note {
  max-width: 1080px; margin: clamp(22px, 2.4vw, 34px) auto 0;
  color: #6b7280; font-size: 12.5px; line-height: 1.9; text-align: center;
}

@media (max-width: 63.99rem) {
  .p-growth__item::after { top: auto; right: 50%; bottom: -22px; rotate: 135deg; translate: 50% 0; }
}

/* =========================================================
   切り抜きの白縁：カスタマイザーで差し替える画像すべてに効かせる
   白縁を画像へ焼き込むと、差し替えた写真には付かない。
   SVGフィルタ #hokusei-cutout-outline（header で定義）で描くことで、
   縁が半透明に書き出された写真でも同じ太さのソリッドな白枠が出る。
   ここでは適用漏れだった箇所をまとめて拾う。
   ========================================================= */
.p-hero__img > img:not(.p-hero__deco),
.p-story-hero__figures img,
.p-sub-fv__fig,
.p-guideline__hero-person,
.p-guideline__mid-figure img,
.p-guideline__entry-figure img,
.p-member__photo,
.p-interview-detail__hero-photo,
.p-initiative__card-figure img,
.p-about-v2__stat figure img,
.p-variety__pillar-obj,
.l-footer-loop__char img,
.l-footer-body__cta-entry-people,
.p-message__item-deco ~ img,
.p-faq-hero__fig {
  filter:
    url("#hokusei-cutout-outline")
    drop-shadow(0 13px 22px rgb(3 31 74 / .24)) !important;
}
/* 図解のアイコンや帯の写真は切り抜きではないので白縁を付けない */
.p-story-flow img,
.p-story-cycle img,
.p-story-point img,
.p-benefit__band img,
.p-variety__item-figure img,
.p-whats__item-fig img,
.p-about-v2__building img,
.p-message__item-img > img:not(.p-message__item-deco) {
  filter: none !important;
}
/* インタビュー詳細の人物写真も差し替え対象なので白縁を付ける */
.p-interview-detail__portrait img {
  filter:
    url("#hokusei-cutout-outline")
    drop-shadow(0 13px 22px rgb(3 31 74 / .24)) !important;
}

/* =========================================================
   CEO MESSAGE / long-copy photo tracking (v1.9.14)
   長文の横で写真だけが上に残らないよう、PCでは本文を読む間だけ追従する。
   ========================================================= */
@media (min-width: 64rem) {
  .p-message { overflow: clip !important; }

  .p-message__item:only-of-type .p-message__item-img {
    position: sticky !important;
    top: 118px !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    margin: clamp(12px, 1.5vw, 24px) 0 0 !important;
  }

  .p-message__item:only-of-type .p-message__item-img > img:not(.p-message__item-deco) {
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(68vh, 680px) !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: 54% center !important;
  }
}

@media (max-width: 63.99rem) {
  .p-message__item:only-of-type .p-message__item-img {
    position: relative !important;
    top: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  @supports (animation-timeline: view()) {
    .p-message__item:only-of-type .p-message__item-img {
      animation: hkMessagePhotoReveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 42%;
    }
  }
}

@keyframes hkMessagePhotoReveal {
  from { opacity: .35; translate: 24px 28px; }
  to { opacity: 1; translate: 0 0; }
}
/* Storyの図解アイコンとバナーは切り抜きではないので白縁を付けない */
.p-story-cycle__figure img,
.p-story-flow__figure img,
.p-story-point__figure img,
.p-information__banner-item img { filter: none !important; }

/* 白縁の当て漏れ（本番の実ページから機械的に洗い出した3箇所）
   クラス名を推測して書いていたため、実際の p-member-v2__circle などに
   当たっていなかった。差し替え対象の写真はここで拾い切る。 */
.p-member-v2__circle img,
.p-guideline__career-intro img,
.p-guideline__entry-figure,
.p-about-v2__building img.--cutout {
  filter:
    url("#hokusei-cutout-outline")
    drop-shadow(0 13px 22px rgb(3 31 74 / .24)) !important;
}

/* Aboutの建物写真も切り抜き素材なので白縁を付ける */
.p-about-v2__building img {
  filter:
    url("#hokusei-cutout-outline")
    drop-shadow(0 13px 22px rgb(3 31 74 / .24)) !important;
}

/* インタビュー詳細の下部2セクション。ここも差し替え対象なので白縁を付ける
   （p-iv-ref__future の人物と、p-iv-ref__related の関連メンバー） */
.p-iv-ref__future-person img,
.p-iv-ref__member-stage img {
  filter:
    url("#hokusei-cutout-outline")
    drop-shadow(0 13px 22px rgb(3 31 74 / .24)) !important;
}

/* =========================================================
   Responsive consolidation (v1.9.17)
   後から追加された固定幅指定同士の競合を、小画面の実寸に合わせて解消する。
   ========================================================= */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  /* 4列では本文が細くなりすぎるため、タブレットは2×2にする。 */
  .p-initiative__card-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: min(720px, calc(100% - 40px)) !important;
    margin-inline: auto !important;
  }
  .p-initiative__card-item {
    width: auto !important;
    padding: 24px 22px 54px !important;
  }
}

@media (max-width: 47.99rem) {
  /* 4事業：2列グリッドと固定300pxが競合して重なっていた。
     1枚ずつ止まる横スクロールに統一し、次のカードを少しだけ見せる。 */
  .p-initiative__card-wrapper { overflow: hidden !important; }
  .p-initiative__card-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 0 20px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .p-initiative__card-items {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    width: max-content !important;
    margin: 0 !important;
    padding-inline: 20px !important;
  }
  .p-initiative__card-item {
    flex: 0 0 min(82vw, 300px) !important;
    width: min(82vw, 300px) !important;
    scroll-snap-align: center;
  }

  /* Discover：装飾帯用の余白が本文幅を圧迫していたため、カードを通常余白へ戻す。 */
  .p-variety__inner {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 20px !important;
  }
  .p-variety__item.--a,
  .p-variety__item.--b,
  .p-variety__item.--c {
    left: auto !important;
    width: 100% !important;
    margin-block: 44px !important;
    padding: 0 !important;
  }
  .p-variety__item-figure,
  .p-variety__item-text { width: 100% !important; }

  /* 320pxでは minmax(320px) がコンテナを超えるため、縮小可能な1列へ。 */
  .p-environment__list {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  .p-environment__item { min-width: 0 !important; }

  /* 募集要項FVの人物を画面内へ収める。 */
  .p-guideline__hero-figure {
    right: 8px !important;
    width: min(36vw, 132px) !important;
    height: min(62vw, 220px) !important;
  }
  .p-guideline__hero-spark.--s2 { right: 2% !important; }

  /* 関連社員：扇状の重なりをやめ、押しやすく見分けやすい2×2へ。 */
  .p-iv-ref__member-stage ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
    align-items: end !important;
    padding-inline: 0 !important;
  }
  .p-iv-ref__member-stage li,
  .p-iv-ref__member-stage li:nth-child(even),
  .p-iv-ref__member-stage li.is-current {
    width: auto !important;
    margin-left: 0 !important;
    translate: 0 0 !important;
  }
  .p-iv-ref__member-stage figure {
    aspect-ratio: .72 !important;
    border-radius: 999px 999px 24px 999px !important;
  }
  .p-iv-ref__bubbles p { font-size: 14.5px !important; line-height: 1.95 !important; }
}

/* =========================================================
   注記の記号を、丸いアイコンに置き換える
   本文に「※」を並べると素っ気なく、AIが書いたような印象になる。
   記号は消し、CSSで丸いしるしを添える。
   ========================================================= */
.p-req__note,
.p-guideline__note,
.p-benefit__note,
.p-guideline__row-note,
.p-guideline__table-note {
  position: relative;
  padding-left: 26px;
  list-style: none;
}
.p-req__note::before,
.p-guideline__note::before,
.p-benefit__note::before,
.p-guideline__row-note::before,
.p-guideline__table-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 16px;
  height: 16px;
  background: url("../images/deco/note-mark.svg") center / contain no-repeat;
  opacity: .85;
}

/* 「価値の循環」3枚のホバー効果は不要（浮き上がりと影の変化を止める） */
.p-story-points li:hover { translate: none !important; box-shadow: 0 18px 44px rgb(10 46 99 / .075) !important; }
.p-story-points li { transition: none !important; }

/* =========================================================
   Story ヒーロー：3人の写真を、他2枚の上へ大きく重ねる
   161x95 と小さく右下に離れていたので、2枚にまたがる位置へ。
   カスタマイザーの幅・位置指定より後に置いて上書きする。
   ========================================================= */
.p-story-hero__figures .--story-f3 {
  right: 8% !important;
  bottom: auto !important;
  top: 20% !important;
  width: 21% !important;
  max-width: 300px;
  z-index: 5 !important;      /* 他2枚(2,3)より手前 */
  rotate: 4deg;
}
@media (max-width: 63.99rem) {
  .p-story-hero__figures .--story-f3 {
    right: 4% !important; top: 24% !important; width: 27% !important;
  }
}
@media (max-width: 47.99rem) {
  .p-story-hero__figures .--story-f3 {
    right: 2% !important; top: 30% !important; width: 32% !important;
  }
}

/* =========================================================
   Discover #01 の写真を横長に
   写真の枠に固定の高さ（最大390px）が入っていて、列幅317pxに対して
   縦長（0.81）に切り取られ、元が横長1600x1200の写真の左右が落ちていた。
   列を少し広げ、枠を3:2にして写真本来の向きで見せる。
   ========================================================= */
@media (min-width: 64rem) {
  .p-variety__item.--b { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important; }
  .p-variety__item.--b .p-variety__item-figure {
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }
  .p-variety__item.--b .p-variety__item-figure img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* =========================================================
   Responsive QA consolidation (v1.10.1)
   320px / 720px / desktop の実画面検査を基準に、後から重なった固定値を整理。
   ========================================================= */

/* 写真そのものはホバーで拡大しない。リンクであることは色・線で伝える。 */
@media (hover: hover) and (pointer: fine) {
  .p-iv-index__list a:hover img,
  .p-member-v2__list a:hover .p-member-v2__circle img,
  .p-iv-ref__member-stage li:hover figure img,
  .p-information__banner-item:hover img,
  .p-variety__item a:hover img {
    scale: 1 !important;
    transform: none !important;
  }

  .p-member-v2__list a:hover .p-member-v2__circle img {
    translate: -50% 0 !important;
    rotate: 0deg !important;
  }

  .p-iv-ref__member-stage li:hover {
    scale: .905 !important;
    translate: 0 0 !important;
  }

  .p-iv-ref__member-stage li.is-current:hover {
    scale: 1 !important;
    translate: 0 -10px !important;
  }
}

@media (max-width: 63.99rem) {
  /* インタビューFV：写真と情報を別レイヤーにし、人物を隠さない。 */
  .p-iv-ref__hero {
    padding-bottom: 64px !important;
  }

  .p-iv-ref__hero-frame {
    overflow: visible !important;
  }

  .p-iv-ref__hero-visual {
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
  }

  .p-iv-ref__hero-visual > img {
    width: 100% !important;
    height: 100% !important;
    object-position: center !important;
  }

  .p-iv-ref__hero-bubble,
  .p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__hero-bubble {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 48px) !important;
    margin: -34px auto 0 !important;
    padding: 24px 30px 26px !important;
    translate: 0 0 !important;
  }

  .p-iv-ref__hero-caption {
    margin-top: 18px !important;
  }

  /* タブレット本文はPCの余白を引きずらず、1カラムとして読み進めやすくする。 */
  .p-iv-ref__interviews { padding: 82px 0 112px !important; }
  .p-iv-ref__interviews-heading { margin-bottom: 52px !important; }
  .p-iv-ref__story + .p-iv-ref__story { margin-top: 68px !important; }
  .p-iv-ref__future { padding: 86px 0 78px !important; }
  .p-iv-ref__future-grid { margin-top: 52px !important; }
  .p-iv-ref__profile { margin-top: 58px !important; }
}

@media (max-width: 47.99rem) {
  /* トップFV：流し文字は残しつつ、主見出しより強くならない大きさへ。 */
  .p-hero__loop { top: 76% !important; }
  .p-hero__loop-text p { font-size: clamp(54px, 18vw, 68px) !important; }

  /* Data：320pxでの2列組みをやめ、写真・数値・説明を順に読む1列へ。 */
  .p-about-v2__data {
    gap: 38px !important;
    margin-top: 58px !important;
  }

  .p-about-v2__building {
    width: 100% !important;
    align-self: center !important;
  }

  .p-about-v2__building img {
    width: 110% !important;
    margin-left: -5% !important;
  }

  .p-about-v2__stat,
  .p-about-v2__stat.--s2,
  .p-about-v2__stat.--s4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 24px 20px 26px;
    border-radius: 24px;
    background: rgb(255 255 255 / .72);
  }

  .p-about-v2__stat > figure,
  .p-about-v2__stat.--s2 > figure,
  .p-about-v2__stat.--s4 > figure {
    order: 1 !important;
  }

  .p-about-v2__stat > div,
  .p-about-v2__stat.--s2 > div,
  .p-about-v2__stat.--s4 > div {
    order: 2 !important;
    min-width: 0;
    text-align: center;
  }

  .p-about-v2__stat figure img,
  .p-about-v2__stat.--s4 figure img {
    max-width: min(76%, 190px) !important;
    max-height: 148px !important;
  }

  .p-about-v2__stat div > p:last-child {
    max-width: 28em;
    margin: 12px auto 0 !important;
    font-size: 13.5px !important;
    line-height: 1.9 !important;
  }

  .p-about-v2__stat.--s2 .p-about-v2__value:not(:has(em)) {
    max-width: none;
    font-size: clamp(21px, 7vw, 26px) !important;
    line-height: 1.48 !important;
  }

  .p-about-v2__value { font-size: clamp(46px, 15vw, 56px) !important; }
  .p-about-v2__phrase { font-size: clamp(21px, 7vw, 26px) !important; }

  /* Story FV：3人写真を本文の下へ移し、タイトル・説明との衝突を解消。 */
  .p-story-hero__figures .--story-f3 {
    top: 66% !important;
    right: 2% !important;
    width: 26% !important;
  }

  /* 長文と注記の最低可読サイズ。 */
  .p-message__item:only-of-type .p-message__item-text > p:not(.p-message__item-subTtl):not(.p-message__item-name),
  .p-guideline__note {
    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  /* Discoverカードは縦長化させず、差し替え写真の比率を安定させる。 */
  .p-variety__item-figure {
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }

  .p-variety__item-figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* インタビューFVを狭い画面でも短く、写真→コピーの順で見せる。 */
  .p-iv-ref__hero-frame,
  .p-iv-ref__hero-caption { width: calc(100% - 24px) !important; }

  .p-iv-ref__hero-visual {
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
  }

  .p-iv-ref__hero-bubble,
  .p-iv-ref__hero:not(:has(.p-iv-ref__hero-frame)) > .p-iv-ref__hero-bubble {
    width: calc(100% - 24px) !important;
    margin: -18px auto 0 !important;
    padding: 22px 20px 24px !important;
  }

  .p-iv-ref__hero-info span {
    padding: 0 !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
  }

  .p-iv-ref__interviews { padding: 70px 0 92px !important; }
  .p-iv-ref__interviews-heading { margin-bottom: 42px !important; }
  .p-iv-ref__story + .p-iv-ref__story { margin-top: 56px !important; }
  .p-iv-ref__future { padding: 72px 0 68px !important; }
  .p-iv-ref__future-grid { margin-top: 40px !important; }
  .p-iv-ref__future-grid > figure { min-height: 380px !important; }
  .p-iv-ref__profile { margin-top: 46px !important; }
  .p-iv-ref__related { padding: 62px 0 64px !important; }
}

@media (max-width: 22.5rem) {
  .p-about-v2__inner,
  .p-message__body {
    width: calc(100% - 24px) !important;
  }

  .p-about-v2__stat { padding-inline: 16px; }
  .p-iv-ref__hero-bubble h1 { font-size: 18px !important; }
}

/* =========================================================
   Mobile art direction (v1.11.0)
   375px モックを基準に、単なる縮小ではなく情報の組み方をSP専用に再設計。
   文言・画像差し替え機能は維持し、カード密度と写真比率だけを制御する。
   ========================================================= */
@media (max-width: 47.99rem) {
  :root { --hk-sp-gutter: clamp(12px, 4.25vw, 18px); }

  body {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .c-wrap { padding-inline: var(--hk-sp-gutter) !important; }

  /* Header: 参考モックと同じ、ブランド＋ハンバーガーだけの静かな構成。 */
  .l-header { padding: 8px !important; }
  .l-header__body {
    width: 100% !important;
    min-height: 54px !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
  }
  .l-header__logo a { gap: 7px !important; min-height: 42px !important; }
  .l-header__logo-mark { height: 29px !important; }
  .l-header__logo-text {
    display: inline-block !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }
  .l-header__nav-entry { display: none !important; }
  .l-header__humburger {
    right: 8px !important;
    width: 42px !important;
    height: 42px !important;
  }
  .l-header__humburger-txt { display: none !important; }
  .l-header__humburger-line { width: 24px !important; }

  /* Hero: 巨大マーキーを外し、切り抜きを一枚のコラージュとして構成。 */
  .p-hero,
  .p-hero__body { height: clamp(520px, 156vw, 610px) !important; }
  .p-hero__loop { display: none !important; }
  .p-hero__title {
    top: 37% !important;
    left: 20% !important;
    z-index: 8 !important;
    width: 70% !important;
    font-size: clamp(27px, 8.6vw, 34px) !important;
    line-height: 1.38 !important;
    text-align: left !important;
    text-shadow: 0 2px 0 rgb(0 70 150 / .14);
  }
  .p-hero__img { display: block !important; }
  .p-hero__img.--hp22 { top: 15% !important; left: 6% !important; width: 22% !important; }
  .p-hero__img.--hp-woman { top: 13% !important; left: 29% !important; width: 20% !important; }
  .p-hero__img.--hp-man { top: 14% !important; left: 46% !important; width: 19% !important; }
  .p-hero__img.--hp24 { top: 17% !important; right: 6% !important; left: auto !important; width: 12% !important; }
  .p-hero__img.--hp21 { top: 22% !important; right: 13% !important; left: auto !important; width: 28% !important; }
  .p-hero__img.--hp23 { top: 38% !important; right: 4% !important; left: auto !important; width: 13% !important; }
  .p-hero__img.--hp28 { top: 47% !important; left: 5% !important; width: 14% !important; }
  .p-hero__img.--hp25 { top: auto !important; bottom: 10% !important; left: 2% !important; width: 34% !important; }
  .p-hero__img.--hp26 { top: auto !important; bottom: 4% !important; left: 34% !important; width: 24% !important; }
  .p-hero__img.--hp20 { top: auto !important; right: -3% !important; bottom: 8% !important; left: auto !important; width: 47% !important; }

  /* Information: ニュースは詰め、バナーは2枚を横並びにする。 */
  .p-information { padding: 52px 0 58px !important; }
  .p-information .c-wrap { padding-inline: var(--hk-sp-gutter) !important; }
  .p-information__heading-group { margin-bottom: 22px !important; }
  .p-information__heading-group .c-heading--lg { font-size: 34px !important; }
  .p-information__list { border-top: 1px solid rgb(255 255 255 / .34) !important; }
  .p-information__list-item-link {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 13px 0 !important;
  }
  .p-information__list-item-sub { gap: 8px !important; }
  .p-information__list-item-date { font-size: 10px !important; }
  .p-information__list-item-category {
    padding: 2px 9px !important;
    font-size: 10px !important;
  }
  .p-information__list-text {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
  .p-information .c-button-primary { margin-top: 22px !important; min-height: 42px !important; }
  .p-information__banner-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 30px 0 0 !important;
  }
  .p-information__banner-item { width: 100% !important; border-radius: 12px !important; }
  .p-information__banner-item img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  /* About: 写真・コピーとも画面幅で整え、不要な縦見出しを外す。 */
  .p-about-v2 { padding: 58px 0 64px !important; }
  .p-about-v2__inner { width: calc(100% - (var(--hk-sp-gutter) * 2)) !important; }
  .p-about-v2__intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  .p-about-v2__copy { order: 1 !important; padding: 0 !important; }
  .p-about-v2__hero {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid #d7e4f2 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .p-about-v2__hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 11px !important;
    object-fit: cover !important;
  }
  .p-about-v2__vertical { display: none !important; }
  .p-about-v2__heading { gap: 10px !important; padding-bottom: 10px !important; }
  .p-about-v2__heading h2 { font-size: 34px !important; }
  .p-about-v2__lead {
    margin-top: 22px !important;
    font-size: clamp(20px, 6vw, 24px) !important;
    line-height: 1.58 !important;
  }
  .p-about-v2__text {
    margin-top: 18px !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  /* Data: 画像左／文章右のコンパクトカード＋建物写真。 */
  .p-about-v2__data {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 64px !important;
    padding-bottom: 0 !important;
  }
  .p-about-v2__data-heading {
    order: 0 !important;
    width: 100% !important;
    margin-bottom: 18px !important;
    text-align: center !important;
  }
  .p-about-v2__data-heading strong { font-size: 38px !important; }
  .p-about-v2__data-heading em { font-size: 44px !important; }
  .p-about-v2__stat,
  .p-about-v2__stat.--s2,
  .p-about-v2__stat.--s4 {
    display: grid !important;
    grid-template-columns: minmax(78px, 31%) minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 166px !important;
    margin: 0 !important;
    padding: 15px !important;
    border: 1px solid #dbe6f2 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .p-about-v2__stat.--s1 { order: 1 !important; }
  .p-about-v2__stat.--s2 { order: 2 !important; }
  .p-about-v2__stat.--s3 { order: 3 !important; }
  .p-about-v2__stat.--s4 { order: 4 !important; }
  .p-about-v2__stat > figure,
  .p-about-v2__stat.--s2 > figure,
  .p-about-v2__stat.--s4 > figure { order: 1 !important; }
  .p-about-v2__stat > div,
  .p-about-v2__stat.--s2 > div,
  .p-about-v2__stat.--s4 > div { order: 2 !important; text-align: left !important; }
  .p-about-v2__stat figure img,
  .p-about-v2__stat.--s4 figure img {
    max-width: 100% !important;
    max-height: 112px !important;
  }
  .p-about-v2__stat small { font-size: 10px !important; }
  .p-about-v2__stat h3 { font-size: 13px !important; }
  .p-about-v2__value { font-size: clamp(37px, 12vw, 48px) !important; }
  .p-about-v2__stat.--s2 .p-about-v2__value:not(:has(em)),
  .p-about-v2__phrase {
    font-size: clamp(18px, 5.8vw, 23px) !important;
    line-height: 1.42 !important;
  }
  .p-about-v2__stat div > p:last-child {
    margin: 8px 0 0 !important;
    font-size: 11.5px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }
  .p-about-v2__building {
    order: 5 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 4px 0 0 !important;
    padding: 7px 7px 28px !important;
    border: 1px solid #dbe6f2 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .p-about-v2__building img {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  /* Business: 横スクロールをやめ、モック同様の2列×2段に固定。 */
  .p-initiative { padding: 58px 0 64px !important; }
  .p-initiative__title { margin-bottom: 28px !important; font-size: 26px !important; }
  .p-initiative__card-wrapper,
  .p-initiative__card-scroll { overflow: visible !important; }
  .p-initiative__card-scroll { padding: 0 var(--hk-sp-gutter) !important; }
  .p-initiative__card-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    transform: none !important;
  }
  .c-scroll-hint { display: none !important; }
  .p-initiative__card-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 320px !important;
    padding: 14px 12px 42px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }
  .p-initiative__card-figure {
    display: grid !important;
    place-items: center !important;
    min-height: 104px !important;
    margin-bottom: 7px !important;
  }
  .p-initiative__card-item img {
    width: auto !important;
    max-width: 88% !important;
    max-height: 100px !important;
  }
  .p-initiative__card-en { font-size: 10px !important; }
  .p-initiative__card-ttl {
    min-height: 3.2em !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  .p-initiative__card-txt {
    display: -webkit-box !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    font-size: 10.5px !important;
    line-height: 1.65 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 6 !important;
  }
  .p-initiative__card-icon {
    right: 8px !important;
    bottom: 8px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
  }

  /* Discover: 1カード内を横組みにし、カード単位で明確に区切る。 */
  .p-variety { padding: 58px 0 64px !important; }
  .p-variety__pillar,
  .p-variety__rail,
  .p-variety__pillar-objs { display: none !important; }
  .p-variety__inner {
    width: 100% !important;
    padding: 0 var(--hk-sp-gutter) !important;
  }
  .p-variety__heading { margin-bottom: 10px !important; }
  .p-variety__title {
    margin-bottom: 30px !important;
    font-size: 26px !important;
  }
  .p-variety__steps { display: grid !important; gap: 18px !important; }
  .p-variety__steps {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .p-variety__steps::before,
  .p-variety__steps::after { display: none !important; }
  .p-variety__item.--b,
  .p-variety__item.--c {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid rgb(255 255 255 / .55) !important;
    border-radius: 18px !important;
    background: rgb(255 255 255 / .1) !important;
    box-shadow: none !important;
  }
  .p-variety__item.--b .p-variety__item-figure { grid-column: 1 !important; order: 1 !important; }
  .p-variety__item.--b .p-variety__item-text { grid-column: 2 !important; order: 2 !important; }
  .p-variety__item.--c .p-variety__item-text { grid-column: 1 !important; order: 1 !important; }
  .p-variety__item.--c .p-variety__item-figure { grid-column: 2 !important; order: 2 !important; }
  .p-variety__item-figure {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }
  .p-variety__item-figure img { border-radius: 12px !important; box-shadow: none !important; }
  .p-variety__item-num { font-size: 11px !important; }
  .p-variety__item-script { font-size: 18px !important; line-height: 1.05 !important; }
  .p-variety__item-en2,
  .p-variety__item-sub { display: none !important; }
  .p-variety__item-title {
    margin: 8px 0 !important;
    font-size: 18px !important;
    line-height: 1.42 !important;
  }
  .p-variety__item-lead {
    font-size: 10.5px !important;
    line-height: 1.7 !important;
  }
  .p-variety__item-lead br { display: none !important; }
  .p-variety__item-more {
    gap: 7px !important;
    min-height: 34px !important;
    margin-top: 12px !important;
    font-size: 10px !important;
  }
  .p-variety__item-more .c-box { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }

  /* CEO message: 写真→青い本文カード。長文でも余白を増やし過ぎない。 */
  .p-message { padding: 58px 0 64px !important; }
  .p-message__body { width: calc(100% - (var(--hk-sp-gutter) * 2)) !important; }
  .p-message__item:only-of-type {
    display: grid !important;
    grid-template-areas: "title" "image" "text" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  .p-message__item:only-of-type .p-message__item-title {
    gap: 10px !important;
    padding-bottom: 12px !important;
  }
  .p-message__item-title--label { padding: 5px 10px !important; font-size: 10px !important; }
  .c-modal__close-txt { font-size: 10px !important; }
  .p-message__item:only-of-type .p-message__item-title--ttl { font-size: 23px !important; }
  .p-message__item-img { min-height: 0 !important; }
  .p-message__item-img { width: 100% !important; }
  .p-message__item-img > img:not(.p-message__item-deco) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    border: 0 !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    object-position: 54% center !important;
    box-shadow: none !important;
    rotate: 0deg !important;
  }
  .p-message__item:only-of-type .p-message__item-text {
    margin-top: -42px !important;
    padding: 28px 20px 26px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }
  .p-message__item:only-of-type .p-message__item-text::before,
  .p-message__item:only-of-type .p-message__item-text::after { display: none !important; }
  .p-message__item:only-of-type .p-message__item-subTtl {
    padding: 0 0 13px 14px !important;
    border-left-width: 4px !important;
    font-size: clamp(22px, 6.8vw, 27px) !important;
    line-height: 1.45 !important;
  }
  .p-message__item:only-of-type .p-message__item-text > p:not(.p-message__item-subTtl):not(.p-message__item-name) {
    margin-top: 18px !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
  }
  .p-message .p-message__item-name { margin-top: 22px !important; font-size: 12px !important; }

  /* Footer: ENTRY→主要導線→装飾の順。リンクは細い罫でコンパクトに。 */
  .l-footer { padding: 34px 0 24px !important; }
  .l-footer > .c-wrap { padding-inline: var(--hk-sp-gutter) !important; }
  .l-footer-body { display: flex !important; flex-direction: column !important; gap: 28px !important; }
  .l-footer-body__cta { order: 1 !important; margin: 0 !important; gap: 8px !important; }
  .l-footer-body__nav { order: 2 !important; }
  .l-footer-body__cta-entry {
    min-height: 162px !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .l-footer-body__cta-entry-heading--en { font-size: 34px !important; }
  .l-footer-body__cta-entry-copy {
    max-width: 68% !important;
    margin-top: 12px !important;
    padding-right: 42px !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
  }
  .l-footer-body__cta-entry-copy .c-box {
    right: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  .l-footer-body__cta-entry-people-decorate {
    right: 8px !important;
    bottom: 8px !important;
    width: 102px !important;
    height: 104px !important;
  }
  .l-footer-body__cta-default {
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
  .l-footer-body__cta-default .c-box { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
  .l-footer-body__nav-logo img { width: 132px !important; }
  .l-footer-body__nav-main { margin-top: 18px !important; gap: 0 !important; }
  .l-footer-body__nav-main > li { border-top: 1px solid rgb(255 255 255 / .24) !important; }
  .l-footer-body__nav-main a {
    min-height: 38px !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
  }
  .l-footer-body__nav-main > li > ul { display: none !important; }
  .l-footer-loop { min-height: 210px !important; padding: 28px 0 18px !important; }
  .l-footer-loop__char img { height: clamp(68px, 22vw, 92px) !important; }
  .l-footer__addr { display: none !important; }
  .l-footer__copy { margin-top: 12px !important; font-size: 10px !important; text-align: center !important; }
  .l-footer__btn-top { display: none !important; }
}

/* 600〜767px: スマホ2枚分に近い横幅を、1列の巨大カードにしない。 */
@media (min-width: 37.5rem) and (max-width: 47.99rem) {
  :root { --hk-sp-gutter: 24px; }

  .p-about-v2__intro {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: 30px !important;
    align-items: start !important;
  }
  .p-about-v2__hero { order: 1 !important; }
  .p-about-v2__copy { order: 2 !important; }
  .p-about-v2__lead { font-size: 22px !important; }

  body .p-about-v2__data {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  body .p-about-v2__data-heading {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }
  .p-about-v2__stat,
  .p-about-v2__stat.--s2,
  .p-about-v2__stat.--s4 {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: minmax(82px, 31%) minmax(0, 1fr) !important;
    min-height: 205px !important;
  }
  body .p-about-v2__building {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: min(100%, 560px) !important;
    justify-self: center !important;
  }

  .p-initiative__card-scroll { padding-inline: 24px !important; }
  .p-initiative__card-item { min-height: 340px !important; }
  .p-initiative__card-txt {
    font-size: 12px !important;
    -webkit-line-clamp: 5 !important;
  }

  .p-variety__item.--b,
  .p-variety__item.--c { width: 100% !important; }

  .p-message__item-img,
  .p-message__item:only-of-type .p-message__item-text { width: min(100%, 600px) !important; margin-inline: auto !important; }
  .p-message__item:only-of-type .p-message__item-text { margin-top: -42px !important; }
}

/* =========================================================
   Interview detail mobile refinement (v1.11.9)
   参考サイトの「質問 → 要旨 → 本文」の階層と、人物写真を
   カード境界へ重ねる構成を、ホクセイの色・素材へ置き換える。
   ========================================================= */
@media (max-width: 47.99rem) {
  /* MESSAGE: 指定改行を保ったまま、2行で読める級数へ整える。 */
  html body main.p-iv-ref .p-iv-ref__interviews-heading {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 42px !important;
    text-align: left !important;
  }
  html body main.p-iv-ref .p-iv-ref__interviews-heading > p {
    margin-bottom: 14px !important;
    font-size: 11px !important;
    letter-spacing: .24em !important;
  }
  html body main.p-iv-ref .p-iv-ref__interviews-heading h2 {
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: clamp(20px, 5.8vw, 23px) !important;
    font-weight: 900 !important;
    line-height: 1.55 !important;
    letter-spacing: .035em !important;
    text-align: left !important;
    text-wrap: balance !important;
  }
  html body main.p-iv-ref .p-iv-ref__interviews-heading h2::after {
    width: 76px !important;
    height: 3px !important;
    margin-top: 18px !important;
    margin-inline: 0 !important;
    border-radius: 999px !important;
  }

  /* INTERVIEW: 質問・要旨・回答を、色と面で明確に分離する。 */
  html body main.p-iv-ref .p-iv-ref__story-copy {
    padding: 0 20px 27px !important;
    overflow: hidden !important;
    border: 1px solid #cfe2f3 !important;
    border-top: 5px solid #1675d1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 13px 30px rgb(12 55 103 / .07) !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-copy::before,
  html body main.p-iv-ref .p-iv-ref__story-copy::after {
    display: none !important;
    content: none !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-question {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 0 -20px 0 !important;
    padding: 15px 20px 14px !important;
    border-bottom: 1px solid #d9e9f7 !important;
    background: #edf6ff !important;
    color: #1768b6 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.65 !important;
    letter-spacing: .055em !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-question::before {
    flex: 0 0 auto !important;
    margin-top: 3px !important;
    color: #efb51d !important;
    font-size: 31px !important;
    line-height: .7 !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-copy h3 {
    margin: 22px 0 21px !important;
    color: #0757a8 !important;
    font-size: clamp(21px, 6.2vw, 25px) !important;
    font-weight: 900 !important;
    line-height: 1.55 !important;
    letter-spacing: .035em !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-copy h3::after {
    width: 54px !important;
    height: 3px !important;
    margin-top: 15px !important;
    border-radius: 999px !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) {
    margin-top: 0 !important;
    color: #294763 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.92 !important;
    letter-spacing: .025em !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) br + br {
    display: block !important;
    content: "" !important;
    margin-top: 8px !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-copy > p:not(.p-iv-ref__story-question) br:last-child {
    display: none !important;
  }
  html body main.p-iv-ref .p-iv-ref__story-copy > .p-iv-ref__story-question:not(:first-child) {
    margin-top: 28px !important;
    border-top: 1px solid #d9e9f7 !important;
  }

  /* FUTURE: 切り抜き人物を最後の吹き出し右下へ寄せる。 */
  html body main.p-iv-ref .p-iv-ref__future-grid {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    margin-top: 40px !important;
    padding-bottom: 238px !important;
  }
  html body main.p-iv-ref .p-iv-ref__bubbles {
    position: relative !important;
    z-index: 2 !important;
  }
  html body main.p-iv-ref .p-iv-ref__bubbles > article:last-child {
    margin-right: 24px !important;
  }
  html body main.p-iv-ref .p-iv-ref__future-person,
  html body main.p-iv-ref .p-iv-ref__future-grid > figure.p-iv-ref__future-person {
    position: absolute !important;
    right: -2px !important;
    bottom: -3px !important;
    left: auto !important;
    z-index: 3 !important;
    width: 180px !important;
    max-width: 54% !important;
    min-height: 0 !important;
    height: 300px !important;
    margin: 0 !important;
    overflow: visible !important;
    rotate: 2.5deg !important;
    transform: none !important;
  }
  html body main.p-iv-ref .p-iv-ref__future-person img {
    position: absolute !important;
    inset: auto 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    filter: drop-shadow(0 13px 14px rgb(7 48 94 / .18)) !important;
    translate: none !important;
    animation: none !important;
    transform: none !important;
  }

  /* PROFILE: 1カラムでもデスクトップと同じ縦長ポートレートを保つ。 */
  html body main.p-iv-ref .p-iv-ref__profile {
    overflow: visible !important;
  }
  html body main.p-iv-ref .p-iv-ref__profile-photo,
  html body main.p-iv-ref .p-iv-ref__profile > figure.p-iv-ref__profile-photo {
    position: relative !important;
    align-self: auto !important;
    justify-self: end !important;
    box-sizing: border-box !important;
    width: min(74%, 240px) !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 18px 24px auto !important;
    overflow: hidden !important;
    border: 1px solid #cfe2f3 !important;
    border-radius: 18px !important;
    background: #dbe8f3 !important;
  }
  html body main.p-iv-ref .p-iv-ref__profile-photo img,
  html body main.p-iv-ref .p-iv-ref__profile > figure.p-iv-ref__profile-photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 20% !important;
    translate: none !important;
    animation: none !important;
    transform: none !important;
  }
}

@media (min-width: 37.5rem) and (max-width: 47.99rem) {
  html body main.p-iv-ref .p-iv-ref__future-grid { padding-bottom: 260px !important; }
  html body main.p-iv-ref .p-iv-ref__future-person,
  html body main.p-iv-ref .p-iv-ref__future-grid > figure.p-iv-ref__future-person {
    width: 196px !important;
    height: 322px !important;
  }
  html body main.p-iv-ref .p-iv-ref__profile-photo,
  html body main.p-iv-ref .p-iv-ref__profile > figure.p-iv-ref__profile-photo {
    width: 260px !important;
  }
}

/* =========================================================
   Story mobile refinement (v1.11.8)
   ヒーローの明度、見出し装飾、本文、価値循環図を再設計。
   ========================================================= */
@media (max-width: 47.99rem) {
  /* Hero: 明るい青を基調にし、3素材を独立したレーンへ収める。 */
  html body .p-story-hero {
    min-height: 650px !important;
    background:
      radial-gradient(circle at 16% 22%, rgb(255 255 255 / .22), transparent 27%),
      radial-gradient(circle at 82% 72%, rgb(83 184 255 / .30), transparent 31%),
      linear-gradient(155deg, #368fe8 0%, #1f7ddd 48%, #0963bd 100%) !important;
  }
  html body .p-story-hero__inner {
    padding-top: 102px !important;
    padding-bottom: 190px !important;
  }
  html body .p-story-hero__copy {
    margin-top: 72px !important;
    padding-right: 8px !important;
  }
  html body .p-story-hero .p-story-hero__figures img.--story-f1 {
    right: auto !important;
    bottom: -1% !important;
    left: 4% !important;
    width: 25% !important;
    max-width: none !important;
  }
  html body .p-story-hero .p-story-hero__figures img.--story-f2 {
    right: auto !important;
    bottom: 1% !important;
    left: 37% !important;
    width: 27% !important;
    max-width: none !important;
  }
  html body .p-story-hero .p-story-hero__figures img.--story-f3 {
    right: 4% !important;
    bottom: 5% !important;
    left: auto !important;
    width: 29% !important;
    max-width: none !important;
  }

  /* What's Hokusei: 意味の曖昧な///を廃止し、一本のアクセントへ。 */
  html body section#whats.p-story-whats {
    padding-block: 66px 78px !important;
  }
  html body section#whats .p-story-whats__inner {
    width: 100% !important;
    padding-inline: 14px !important;
  }
  html body section#whats .p-story-whats__heading {
    width: 100% !important;
    margin-bottom: 26px !important;
    padding: 25px 16px 21px !important;
    border-width: 1.5px !important;
    border-radius: 18px !important;
    background: rgb(255 255 255 / .84) !important;
    box-shadow: none !important;
  }
  html body section#whats .p-story-whats__heading::before {
    top: -3px !important;
    left: 50% !important;
    width: 54px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #f6c94a !important;
    translate: -50% 0 !important;
  }
  html body section#whats .p-story-whats__heading::after {
    display: none !important;
    content: none !important;
  }
  html body section#whats .p-story-whats__heading-en {
    font-size: clamp(35px, 10.8vw, 44px) !important;
  }
  html body section#whats .p-story-whats__heading h2 {
    margin-top: 10px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  /* 本文: カスタマイザー内のbrを段落区切りとして活かす。 */
  html body section#whats .p-story-whats__lead {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 54px !important;
    padding: 19px 18px 20px !important;
    border-left: 4px solid #2379d8 !important;
    border-radius: 0 13px 13px 0 !important;
    background: rgb(255 255 255 / .70) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.85 !important;
    letter-spacing: .035em !important;
    text-align: left !important;
  }
  html body section#whats .p-story-whats__lead br {
    display: block !important;
    content: "" !important;
    margin-top: 7px !important;
  }
  html body section#whats .p-story-whats__lead strong {
    display: inline !important;
    margin-top: 0 !important;
    padding-bottom: 3px !important;
    background: linear-gradient(transparent 66%, rgb(246 201 74 / .72) 66%) !important;
    font-weight: 850 !important;
  }

  /* 価値循環: モバイルでも矢印の向きを保つ横長ダイアグラム。 */
  html body section#whats .p-story-flow {
    display: grid !important;
    grid-template-columns: 180px 24px 190px 24px 160px !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 64px !important;
    padding: 58px 16px 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-width: 1.5px !important;
    border-radius: 22px !important;
    background: rgb(255 255 255 / .86) !important;
    box-shadow: none !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body section#whats .p-story-flow::-webkit-scrollbar { height: 5px !important; }
  html body section#whats .p-story-flow::-webkit-scrollbar-track { background: transparent !important; }
  html body section#whats .p-story-flow::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgb(10 46 99 / .24) !important;
  }
  html body section#whats .p-story-flow__title {
    top: 12px !important;
    left: 16px !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    letter-spacing: .12em !important;
    translate: 0 0 !important;
  }
  html body section#whats .p-story-flow__source {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, 76px) !important;
    gap: 5px !important;
    align-self: center !important;
  }
  html body section#whats .p-story-flow__source-item {
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 4px !important;
    border-bottom: 1px dashed rgb(10 46 99 / .18) !important;
    text-align: left !important;
  }
  html body section#whats .p-story-flow__source-item:last-child { border-bottom: 0 !important; }
  html body section#whats .p-story-flow__source-item img {
    width: 62px !important;
    height: 62px !important;
  }
  html body section#whats .p-story-flow span { font-size: 14px !important; line-height: 1.35 !important; }
  html body section#whats .p-story-flow small { margin-top: 3px !important; font-size: 9px !important; line-height: 1.45 !important; }
  html body section#whats .p-story-flow__connector {
    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    align-items: center !important;
    align-self: stretch !important;
    padding-inline: 4px !important;
  }
  html body section#whats .p-story-flow__connector.--source {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html body section#whats .p-story-flow__ship {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 4px !important;
    scroll-snap-align: center !important;
  }
  html body section#whats .p-story-flow__ship img {
    width: 100% !important;
    height: 142px !important;
    margin-block: -5px !important;
  }
  html body section#whats .p-story-flow__ship em {
    padding: 7px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  html body section#whats .p-story-flow__connector.--result {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: grid !important;
    align-self: stretch !important;
  }
  html body section#whats .p-story-flow__destination {
    grid-column: 5 !important;
    grid-row: 1 !important;
    align-self: center !important;
    scroll-snap-align: center !important;
  }
  html body section#whats .p-story-flow__destination img {
    width: 118px !important;
    height: 122px !important;
  }
  html body section#whats .p-story-flow__destination span { font-size: 15px !important; }
  html body section#whats .p-story-flow__solution {
    position: static !important;
    grid-column: 3 / 6 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 330px !important;
    min-height: 62px !important;
    margin: 12px 0 0 !important;
    padding: 7px 14px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    translate: 0 0 !important;
  }
  html body section#whats .p-story-flow__solution img {
    width: 48px !important;
    height: 48px !important;
  }
  html body section#whats .p-story-flow__solution span { font-size: 15px !important; }
  html body section#whats .p-story-flow__solution small { font-size: 9px !important; }
}

/* Discoverの旧ID指定より優先し、2枚目の写真列が0pxになる競合を解消。 */
@media (max-width: 47.99rem) {
  html body section#variety .p-variety__steps > article.p-variety__item.--b,
  html body section#variety .p-variety__steps > article.p-variety__item.--c {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  html body section#variety .p-variety__steps > article.p-variety__item.--c .p-variety__item-text {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body section#variety .p-variety__steps > article.p-variety__item.--c .p-variety__item-figure {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body section#variety .p-variety__item-text {
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }
  html body section#variety .p-variety__item-head {
    min-height: 0 !important;
    margin: 0 0 8px !important;
  }
  html body section#variety .p-variety__item-script {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }
  html body section#variety .p-variety__item-title {
    min-height: 0 !important;
    margin: 7px 0 !important;
    padding: 0 0 9px !important;
    font-size: 19px !important;
    line-height: 1.36 !important;
  }
  html body section#variety .p-variety__item-lead {
    min-height: 0 !important;
    margin: 7px 0 0 !important;
    font-size: 10.5px !important;
    line-height: 1.65 !important;
  }
  html body section#variety .p-variety__item-more {
    min-height: 30px !important;
    margin: 9px 0 0 !important;
    padding: 0 0 6px !important;
    font-size: 9.5px !important;
  }
}

/* Tablet: 余白をPCのまま引きずらず、写真とカードの比率を先に整える。 */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p-about-v2,
  .p-information,
  .p-initiative,
  .p-variety,
  .p-message { padding-block: 76px !important; }

  .p-about-v2__inner,
  .p-message__body { width: min(calc(100% - 48px), 760px) !important; }

  .p-about-v2__intro {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: 34px !important;
  }
  .p-about-v2__vertical { display: none !important; }
  .p-about-v2__data { margin-top: 82px !important; gap: 28px 20px !important; }
  .p-about-v2__stat { min-height: 180px !important; }

  .p-initiative__card-scroll { padding-inline: 24px !important; }
  .p-initiative__card-items { gap: 12px !important; }
  .p-initiative__card-item { min-height: 360px !important; padding: 16px 14px 46px !important; }
  .p-initiative__card-txt { font-size: 11px !important; line-height: 1.7 !important; }

  .p-variety__inner { width: min(calc(100% - 64px), 760px) !important; padding-left: 0 !important; }
  .p-variety__item.--b,
  .p-variety__item.--c { width: 88% !important; }

  .p-message__item-img > img:not(.p-message__item-deco) {
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
  }
  .p-message__item:only-of-type .p-message__item-text { box-shadow: none !important; }
}

/* =========================================================
   Mobile hero composition (v1.11.3)
   支給PDF「地方で グローバルに働く！」の縦長構図を再現する。
   上段6点／中央コピー／下段3グループの順序と余白を固定する。
   ========================================================= */
@media (max-width: 37.49rem) {
  .p-hero,
  .p-hero__body {
    height: clamp(500px, 156vw, 585px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .p-hero__title {
    top: 47.5% !important;
    left: 8% !important;
    z-index: 7 !important;
    width: 84% !important;
    font-size: clamp(29px, 8.9vw, 34px) !important;
    line-height: 1.43 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
  }
  .p-hero__title span:first-child {
    margin-left: 0 !important;
    font-size: 1em !important;
  }

  /* 上段：包装／社員2名／地金。 */
  .p-hero__img.--hp28 {
    top: 15.5% !important;
    right: auto !important;
    left: 4% !important;
    width: 20% !important;
  }
  .p-hero__img.--hp-woman {
    top: 17.5% !important;
    right: auto !important;
    left: 27% !important;
    width: 15% !important;
  }
  .p-hero__img.--hp-man {
    top: 17% !important;
    right: auto !important;
    left: 58% !important;
    width: 16% !important;
  }
  .p-hero__img.--hp23 {
    top: 16% !important;
    right: 3% !important;
    left: auto !important;
    width: 17% !important;
  }

  /* 中段：ジャンプ／アルミ形材／恐竜。 */
  .p-hero__img.--hp22 {
    top: 28% !important;
    right: auto !important;
    left: 2% !important;
    width: 29% !important;
  }
  .p-hero__img.--hp24 {
    top: 31% !important;
    right: auto !important;
    left: 45% !important;
    width: 10% !important;
  }
  .p-hero__img.--hp21 {
    top: 25.5% !important;
    right: 2% !important;
    left: auto !important;
    width: 31.5% !important;
  }

  /* 下段：海外メンバー／タオル／国内メンバー。 */
  .p-hero__img.--hp25 {
    top: auto !important;
    right: auto !important;
    bottom: 1.5% !important;
    left: -2.5% !important;
    width: 38% !important;
  }
  .p-hero__img.--hp26 {
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 34.5% !important;
    width: 32% !important;
  }
  .p-hero__img.--hp20 {
    top: auto !important;
    right: -3.5% !important;
    bottom: 1.5% !important;
    left: auto !important;
    width: 42% !important;
  }

  /* PDFにある手描き記号だけを必要な場所へ寄せる。 */
  .p-hero__body > .--pd01,
  .p-hero__body > .--pd02,
  .p-hero__body > .--pd03,
  .p-hero__body > .--pd04,
  .p-hero__body > .--pd05,
  .p-hero__body > .--pd06,
  .p-hero__body > .--pd07,
  .p-hero__body > .--pd08,
  .p-hero__body > .--pd09,
  .p-hero__body > .--pd10,
  .p-hero__body > .--pd11,
  .p-hero__body > .--pd12 { z-index: 6 !important; }

  .p-hero__body > .--pd01 { top: 13% !important; left: 61% !important; width: 5% !important; }
  .p-hero__body > .--pd04 { top: 12% !important; left: 30% !important; width: 6% !important; }
  .p-hero__body > .--pd06 { top: 25% !important; left: 92% !important; width: 5% !important; }
  .p-hero__body > .--pd08 { top: 36% !important; left: 91% !important; width: 7% !important; }
  .p-hero__body > .--pd09 { top: 66% !important; left: 1% !important; width: 8% !important; }
  .p-hero__body > .--pd11 { top: 70% !important; left: 40% !important; width: 5% !important; }
}

/* =========================================================
   Mobile refinement (v1.11.5)
   About / Data / Discover / CEO / Footer の実機幅を再調整。
   ========================================================= */
@media (max-width: 47.99rem) {
  /* About: 見出し・導入文の呼吸を確保する。 */
  body .p-about-v2__text {
    margin-top: 30px !important;
  }

  /* Data: 見出しと建物写真を導入行に置き、4カードは左右交互にする。 */
  body .p-about-v2__data {
    display: grid !important;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: 13px !important;
    align-items: stretch !important;
  }
  body .p-about-v2__data-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  body .p-about-v2__data-heading strong { font-size: clamp(31px, 9.8vw, 40px) !important; }
  body .p-about-v2__data-heading em { font-size: clamp(36px, 11.5vw, 46px) !important; }
  body .p-about-v2__building {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 6px 24px !important;
  }
  body .p-about-v2__building img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
  body .p-about-v2__stat,
  body .p-about-v2__stat.--s2,
  body .p-about-v2__stat.--s4 {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
  }
  body .p-about-v2__stat.--s1,
  body .p-about-v2__stat.--s3 {
    grid-template-columns: minmax(78px, 31%) minmax(0, 1fr) !important;
  }
  body .p-about-v2__stat.--s2,
  body .p-about-v2__stat.--s4 {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 31%) !important;
  }
  body .p-about-v2__stat.--s1 > figure,
  body .p-about-v2__stat.--s3 > figure { order: 1 !important; }
  body .p-about-v2__stat.--s1 > div,
  body .p-about-v2__stat.--s3 > div { order: 2 !important; }
  body .p-about-v2__stat.--s2 > div,
  body .p-about-v2__stat.--s4 > div { order: 1 !important; }
  body .p-about-v2__stat.--s2 > figure,
  body .p-about-v2__stat.--s4 > figure { order: 2 !important; }

  /* Discover: 番号をカード内へ戻し、余白を抑えた交互レイアウトにする。 */
  body .p-variety__steps {
    gap: 14px !important;
  }
  body .p-variety__item.--b,
  body .p-variety__item.--c {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px !important;
    border: 1px solid rgb(255 255 255 / .62) !important;
    border-radius: 20px !important;
    background: rgb(255 255 255 / .12) !important;
    box-shadow: none !important;
  }
  body .p-variety__item.--b .p-variety__item-figure {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
  }
  body .p-variety__item.--b .p-variety__item-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
  }
  body .p-variety__item.--c .p-variety__item-text {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
  }
  body .p-variety__item.--c .p-variety__item-figure {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
  }
  body .p-variety__steps .p-variety__item-num {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffd84d !important;
    font-size: 11px !important;
    line-height: 1 !important;
    transform: none !important;
  }
  body .p-variety__item-figure {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  body .p-variety__item-title br { display: none !important; }
  body .p-variety__item-lead { margin-top: 8px !important; }
  body .p-variety__item-more { margin-top: 10px !important; }

  /* CEO: 写真を本文より一回り小さくし、カードへの重なりを自然にする。 */
  body .p-message__item-img {
    justify-self: center !important;
    width: min(60%, 190px) !important;
    margin-inline: auto !important;
  }
  body .p-message__item-img > img:not(.p-message__item-deco) {
    aspect-ratio: 4 / 3 !important;
  }
  body .p-message__item:only-of-type .p-message__item-text {
    margin-top: -18px !important;
  }

  /* ENTRY: 透過PNGの背後に残っていた装飾背景・影を完全に外す。 */
  body .l-footer-body__cta-entry-people-decorate,
  body .l-footer-body__cta-entry-people {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  body .l-footer-body__cta-entry-people-decorate::before,
  body .l-footer-body__cta-entry-people-decorate::after { display: none !important; }

  /* Footer collage: 2列配置をやめ、中央素材を軸にした5点構成へ組み直す。 */
  body .l-footer-loop {
    position: relative !important;
    min-height: 300px !important;
    height: 300px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body .l-footer-loop__char {
    position: absolute !important;
    display: block !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    rotate: 0deg !important;
    transform: none !important;
  }
  body .l-footer-loop__char img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }
  body .l-footer-loop__char[data-item="01"] { bottom: 1% !important; left: 3% !important; z-index: 3 !important; width: 28% !important; }
  body .l-footer-loop__char[data-item="02"] { right: 1% !important; bottom: 0 !important; left: auto !important; z-index: 3 !important; width: 36% !important; }
  body .l-footer-loop__char[data-item="03"] { top: 4% !important; left: 7% !important; z-index: 4 !important; width: 18% !important; }
  body .l-footer-loop__char[data-item="04"] { top: 2% !important; right: 2% !important; left: auto !important; z-index: 3 !important; width: 31% !important; }
  body .l-footer-loop__char[data-item="05"] { top: 34% !important; left: 38% !important; z-index: 5 !important; width: 24% !important; }
}

@media (min-width: 37.5rem) and (max-width: 47.99rem) {
  body .p-about-v2__data {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  }
  body .p-about-v2__data-heading { grid-column: 1 !important; grid-row: 1 !important; }
  body .p-about-v2__building { grid-column: 2 !important; grid-row: 1 !important; }
  body .p-about-v2__stat,
  body .p-about-v2__stat.--s2,
  body .p-about-v2__stat.--s4 { grid-column: 1 / -1 !important; }
}