/* pages/sub-common.css: 下層ページ全体の共通宣言（変数・ヘッダー・ドロワーの下層用指定・ヒーロー・区切り線・アーカイブ幅・CTA・フッターの下層用上書き）。
   下層の読み込み順で breadcrumb の後、各ページ専用CSS（company / business / archive / form / policy）の前。 */
:root {
  --pale: #dfeaff;
  --line: rgba(4, 26, 68, .22);
  --body: "YakuHanJP", "Noto Sans JP", sans-serif;
  --display: "YakuHanJP", "Noto Sans JP", sans-serif;
  --latin: "din-2014", "Arial Narrow", sans-serif;
  --wrap: 1246px;
  --gutter: clamp(20px, 4.4vw, 60px);
  --section: clamp(72px, 9vw, 120px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* 本文の入れ物（.wrap / .page-hero__inner / .form-page / .article 等）の幅と左端 */
  --container-w: min(calc(100% - (var(--gutter) * 2)), var(--wrap));
  --container-ml: auto;
}

/* PCでは本文の左右の端を、フッター上CTAの白い枠（.contact__card）とそろえる。
   枠と同じ vw 指定にするのは、中央寄せだとスクロールバーのあるブラウザで数pxずれるため */
@media (min-width: 768px) {
  :root {
    --container-w: 91.3616vw;
    --container-ml: 4.3192vw;
  }
}

.contact__grid-line {
  background: #fff;
}

.contact__ring {
  border-color: #fff;
}

.footer__social {
  font-family: var(--latin);
  font-weight: 700;
  font-size: clamp(10px, 1.025vw, 20px);
}

body {
  color: var(--c-navy);
  font-family: var(--body);
  font-size: 16px;
  line-height: 2;
  /* 背景はTOPと同じ WebGL キャンバス（.fluid-bg）。このグラデーションは WebGL 非対応・reduced-motion 時だけ見えるフォールバック */
  background: radial-gradient(36% 28% at 14% 10%, rgba(223, 234, 255, .9), transparent 72%),
    radial-gradient(30% 24% at 86% 22%, rgba(37, 187, 215, .28), transparent 72%),
    radial-gradient(40% 30% at 50% 60%, rgba(67, 90, 134, .22), transparent 74%),
    var(--c-white);
}

body.is-menu-open {
  overflow: hidden;
}

input,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
dd {
  margin-top: 0;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sub-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  height: 144px;
  pointer-events: none;
}

.sub-header__inner {
  height: 100%;
  padding: 34px var(--gutter) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.sub-logo {
  display: grid;
  grid-template-columns: 60px 166px;
  grid-template-rows: 28px 12px;
  column-gap: 11px;
  align-items: center;
  pointer-events: auto;
}

.sub-logo__mark {
  grid-row: 1 / 3;
  width: 60px;
  height: 60px;
}

.sub-logo__name {
  width: 166px;
  height: 24px;
  align-self: end;
}

.sub-logo__tag {
  width: 109px;
  height: 6px;
  margin-left: 28px;
  align-self: end;
}

.sub-menu-toggle {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.sub-menu-toggle:hover {
  background: var(--c-cyan);
  transform: rotate(8deg);
}

.sub-menu-toggle__lines,
.sub-menu-toggle__lines::before,
.sub-menu-toggle__lines::after {
  width: 22px;
  height: 1px;
  display: block;
  background: currentColor;
}

.sub-menu-toggle__lines {
  position: relative;
  background: transparent;
}

.sub-menu-toggle__lines::before,
.sub-menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.sub-menu-toggle__lines::before {
  top: -4px;
}

.sub-menu-toggle__lines::after {
  top: 4px;
}

.gnav {
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #041a44;
  color: #fff;
  clip-path: circle(0% at calc(100% - 90px) 66px);
  transition: clip-path 0.6s cubic-bezier(0.55, 0.06, 0.68, 0.19), visibility 0s linear 0.6s;
}

.gnav.is-open {
  clip-path: circle(150% at calc(100% - 90px) 66px);
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0s;
}

.gnav__topbar {
  flex: none;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 34px var(--gutter) 0;
}

/* マークは多色グラフィックで、brightness(0) invert(1) を通すと白い円に潰れるため、
   マークは原色のまま、ワードマークとタグラインだけ白反転する */
.gnav__topbar .sub-logo__name,
.gnav__topbar .sub-logo__tag {
  filter: brightness(0) invert(1);
}

.gnav__close {
  width: 60px;
  height: 64px;
  padding: 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.gnav__close-image {
  display: block;
  width: 60px;
  height: 64px;
}

.gnav__panel {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding: 32px 60px 16px;
}

.gnav__inner {
  grid-template-columns: 595px 506px;
  gap: 100px;
  align-items: center;
  align-content: center;
}

.gnav__photo {
  width: 595px;
  height: 459px;
  overflow: hidden;
  border-radius: 0;
}

.gnav__photo-img {
  display: block;
}

.gnav__main {
  gap: 50px;
}

.gnav__cols {
  grid-template-columns: 253px 253px;
}

.gnav__list {
  gap: 45px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnav__link {
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: 24px;
  line-height: 18px;
  letter-spacing: .05em;
  transition: opacity .3s var(--ease);
}

.gnav__link:hover,
.gnav__link:focus-visible {
  opacity: .7;
}

.gnav__dot {
  width: 10px;
  height: 10px;
}

.gnav__badges {
  gap: 21px;
}

.gnav__badge-box {
  width: 230px;
  height: 100px;
  padding: 0 56px;
  background: #fff;
  transition: opacity .4s var(--ease);
}

.gnav__badge-box--hospitaldx {
  padding: 10px 9px;
}

.gnav__badge-img--security {
  width: 75px;
  height: 75px;
  object-fit: contain;
}

.gnav__badge-crop {
  width: 120px;
  height: 76px;
}

.gnav__social-label {
  margin-bottom: 24px;
  color: #fff;
  font-family: var(--latin);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
}

.gnav__social-list {
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnav__social-link {
  width: 49px;
  height: 49px;
  color: #fff;
  transition: opacity .4s var(--ease);
}

.gnav__bottom {
  flex: none;
  position: relative;
  overflow: hidden;
}

.gnav__ghost {
  left: -.02em;
  bottom: -.08em;
  color: rgba(255, 255, 255, .06);
  font-family: var(--latin);
  font-weight: 700;
  font-size: 11vw;
  letter-spacing: -.02em;
}

.gnav__footer {
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 14px;
}

.gnav__policy a {
  opacity: .8;
  transition: opacity .3s var(--ease);
}

.gnav__copyright {
  opacity: .6;
}

/* 背景は body 最背面のキャンバスを透過表示する。
   overflow:hidden だと自身がスクロールコンテナになり子孫の position:sticky（代表写真の追従）が効かないため clip を使う。
   hidden は clip 未対応ブラウザ向けのフォールバック */
.mesh-stage {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.wrap {
  width: var(--container-w);
  margin-right: auto;
  margin-left: var(--container-ml);
}

.section {
  padding-block: var(--section);
}

.section-rule {
  border-top: 1px solid #041a44;
}

/* 区切り線（.section-rule / .related-links）の上下余白は80pxで統一。
   直前セクションの padding-bottom が乗ると80pxを超えるので、隣接する場合だけ打ち消す */
.section-rule,
.related-links {
  margin-top: 80px;
  padding-top: 80px;
}

.section:has(+ .section-rule),
.section:has(+ .related-links) {
  padding-bottom: 0;
}

.section--field-tight {
  padding-top: 56px;
}

.section--tight-bottom {
  padding-bottom: 0;
}

.section--tight-top-80 {
  padding-top: 80px;
}

.page-hero {
  min-height: 462px;
  padding: 174px 0 72px;
  position: relative;
}

.page-hero__inner {
  /* 共通ヒーローは高さ202px。幅は本文と同じにして、タイトル・パンくずを本文の左右端にそろえる */
  position: relative;
  height: 202px;
  width: var(--container-w);
}

.page-hero__en {
  margin-bottom: 18px;
  font: 700 clamp(16px, 1.7569vw, 24px)/1.6 var(--latin);
  color: var(--c-cyan);
  letter-spacing: .06em;
}

.page-hero__title {
  margin-bottom: 0;
  font: 700 clamp(44px, 6.5886vw, 90px)/1.16 var(--display);
  letter-spacing: .035em;
}

.eyebrow {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 clamp(16px, 1.4641vw, 20px)/1.6 var(--latin);
  letter-spacing: .07em;
}

.eyebrow::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-cyan);
  flex: none;
}

.section-title {
  margin-bottom: 24px;
  font: 700 clamp(28px, 3.55vw, 48px)/1.55 var(--display);
  letter-spacing: .035em;
}

#process-title {
  margin-bottom: 70px;
}

.section-copy {
  margin-bottom: 48px;
  max-width: 1180px;
  font-size: 15px;
  line-height: 2.2;
}

/* MISSION / VISION / VALUE の見出しは20px固定（.eyebrow は他ページと共用のクラスなので、ここだけ上書きする） */
.company-foundation__panel .eyebrow {
  font-size: 20px;
}

/* 区切り線はコンテンツ幅（.wrap 相当）に合わせる。上下80pxの余白は上の共通ルールで指定 */
.related-links {
  width: var(--container-w);
  margin-right: auto;
  margin-left: var(--container-ml);
  padding-bottom: 70px;
  border-top: 1px solid var(--line);
}

.related-links__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.related-link {
  min-height: 180px;
  padding: 40px;
  background: #fff;
  display: flex;
  align-items: center;
}

.related-link__dot {
  width: 11px;
  height: 11px;
  margin-right: 18px;
  border-radius: 50%;
  background: var(--c-cyan);
}

.related-link__title {
  font: 700 40px/1.5 var(--display);
}

.related-link__en {
  display: block;
  margin-top: 2px;
  font: 700 20px/1.4 var(--latin);
  letter-spacing: .12em;
  color: var(--c-cyan);
}

.related-link__arrow {
  width: 60px;
  height: 60px;
  margin-left: auto;
}

.contact__grid-line {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 1px;
  height: 100%;
  background: var(--pale);
}

.contact__grid-line--left {
  left: 17.4963vw;
}

.contact__grid-line--right {
  left: 82.4378vw;
}

.contact__ring {
  position: absolute;
  left: 48.9165vw;
  top: -34.1288vw;
  z-index: 1;
  width: 66.8741vw;
  height: 66.8741vw;
  border: 1px solid var(--pale);
  border-radius: 50%;
}

.contact__marquee {
  position: absolute;
  width: 91.3616vw;
}

.contact__marquee-text {
  font-family: var(--latin);
  font-size: clamp(119.94px, 11.713vw, 224.89px);
  font-weight: 700;
}

.contact__en {
  font-family: var(--latin);
  font-weight: 700;
  font-size: clamp(17.99px, 1.757vw, 33.73px);
}

.contact__title {
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(41.98px, 4.0996vw, 78.71px);
  line-height: 9.8389vw;
  letter-spacing: 0.41vw;
  white-space: nowrap;
  text-align: center;
  background: linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.contact-btn {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.contact-btn__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
}

.footer__copy {
  font-family: var(--latin);
  font-weight: 700;
  font-size: clamp(10.49px, 1.0249vw, 19.68px);
}

@media (max-width: 767px) {
  .page-hero__inner {
    height: auto;
  }

  .contact__grid-line,
  .contact__ring {
    display: none;
  }

  .contact__title {
    width: auto;
  }

  .contact__en {
    font-size: 4.2667vw;
  }

  .contact__title {
    margin-bottom: 10.6667vw;
    white-space: normal;
    text-align: center;
  }

  .u-br-sp {
    display: block;
  }

  .contact-btn__label {
    font-size: 4.2667vw;
  }

  .footer__copy {
    font-size: 3.4667vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-btn {
    transition-duration: 0.1s;
  }
}

@media (min-width: 768px) {
  .section-copy {
    font-size: 16px;
  }
}

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section: 72px;
  }

  body {
    font-size: 14px;
  }

  .sub-header {
    height: 98px;
  }

  .sub-header__inner {
    padding-top: 20px;
  }

  /* ロゴ枠をハンバーガーと同じ高さ44pxにし、行をその中で中央寄せする（行の合計29pxのままだと42pxのマークが下へはみ出し、
     ハンバーガーと中心がずれる）。ドロワー上部（.gnav__topbar）も同じ構造 */
  .sub-logo {
    grid-template-columns: 42px 104px;
    grid-template-rows: 20px 9px;
    column-gap: 8px;
    height: 44px;
    align-content: center;
  }

  .sub-logo__mark {
    width: 42px;
    height: 42px;
  }

  .sub-logo__name {
    width: 104px;
    height: auto;
  }

  .sub-logo__tag {
    width: 78px;
    height: auto;
    margin-left: 14px;
  }

  .sub-menu-toggle {
    width: 44px;
    height: 44px;
  }

  .gnav {
    clip-path: circle(0% at calc(100% - 42px) 49px);
  }

  .gnav.is-open {
    clip-path: circle(150% at calc(100% - 42px) 49px);
  }

  .gnav__topbar {
    padding: 20px var(--gutter) 0;
  }

  .gnav__close {
    width: 44px;
    height: 44px;
  }

  .gnav__close-image {
    width: 40px;
    height: 42.7px;
  }

  .gnav__panel {
    padding: 0 4.5333vw 4.2667vw;
  }

  .gnav__inner {
    flex: none;
    grid-template-columns: none;
    gap: 0;
  }

  .gnav__photo {
    display: none;
  }

  .gnav__main {
    gap: 5.3333vw;
  }

  .gnav__cols {
    gap: 8vw;
    width: auto;
    grid-template-columns: none;
  }

  .gnav__list {
    gap: 5.3333vw;
  }

  .gnav__link {
    gap: 2.4vw;
    font-size: 4.2667vw;
    line-height: 1.6;
  }

  .gnav__dot {
    width: 2.6667vw;
    height: 2.6667vw;
  }

  .gnav__badges {
    gap: 4.404vw;
  }

  .gnav__badge-box {
    width: 43.7333vw;
    height: 18.9333vw;
    padding: 0;
  }

  .gnav__badge-box--hospitaldx {
    padding: 0;
  }

  .gnav__badge-img--security {
    width: 15.1845vw;
    height: 15.1845vw;
  }

  .gnav__badge-crop--hospitaldx {
    width: 26.5355vw;
    height: 16.7981vw;
  }

  .gnav__social-label {
    margin-bottom: 5.3333vw;
    font-size: 4.2667vw;
    letter-spacing: .2133vw;
  }

  .gnav__social-list {
    gap: 4.5333vw;
  }

  .gnav__social-link {
    width: 13.0667vw;
    height: 13.0667vw;
  }

  .gnav__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
  }

  .page-hero {
    min-height: 340px;
    padding: 128px 0 48px;
  }

  .page-hero__en {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .page-hero__title {
    font-size: 42px;
  }

  .mesh-stage::after {
    background-size: 50vw 100%, 50vw 100%;
  }

  .section-title {
    font-size: 27px;
    line-height: 1.6;
  }

  .section-copy {
    font-size: 14px;
    line-height: 2;
  }

  .eyebrow {
    font-size: 14px;
  }

  .related-links {
    padding-block: 50px;
  }

  .related-links__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .related-link {
    min-height: 116px;
    padding: 24px;
  }

  .related-link__title {
    font-size: 20px;
  }

  .related-link__arrow {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* アーカイブ系ページのコンテンツ幅は1127px（他ページの --wrap:1246px と異なるため、ページ単位で上書きする） */
.page--archive {
  --wrap: 1127px;
}

/* 下層の共通CTAの帯。.marquee の共通宣言は components/marquee.css、@keyframes は base.css にある */
.marquee {
  position: relative;
  width: 100%;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* フォームの入力・確認・完了ページは .form-page の padding-bottom でCTAとの間隔を確保しているため、
   CTA側の margin-top は0にして二重に空かないようにする */
.page--form-flow .contact {
  margin-top: 0;
}

.contact__title {
  line-height: 1.5;
}

.contact-btn__label {
  font-size: clamp(15px, 1.464vw, 28px);
}

.footer__page-top {
  position: absolute;
  left: 93.704vw;
  top: 36.94vw;
  width: 2.855vw;
  height: 10.98vw;
}

.footer__page-top img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ●をテキストに対して flex で中央揃えにする */
.footer-menu__list li {
  display: flex;
  align-items: center;
  gap: .59vw;
  height: 3.29vw;
}

.footer__copy {
  font-size: clamp(10px, 1.025vw, 20px);
}

@media (max-width: 767px) {
  .contact__marquee {
    width: calc(100% - 40px);
  }

  .contact__title {
    width: calc(100% - 40px);
    font-size: 28px;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }

  .contact-btn__label {
    font-size: 12px;
  }

  .footer__page-top {
    display: none;
  }

  .footer-menu__list li {
    height: 42px;
    gap: 16px;
  }

  .footer__copy {
    font-size: 10px;
  }

  .contact__title {
    width: auto;
  }

  .contact__title {
    margin-bottom: 10.6667vw;
    line-height: 1.5;
  }

  .footer__badges img {
    width: 100%;
    height: auto;
  }

  .footer-menu__list li {
    height: auto;
    gap: 3.2vw;
  }

  .footer__copy {
    font-size: 3.4667vw;
  }

  /* SPでもページトップへ戻るボタンを固定の丸ボタンとして表示する。
     components/footer.css や上の .footer__page-top（absolute / display:none）より後ろに置くこと。
     display:none のままだと戻る導線が消える */
  .footer__page-top {
    position: fixed;
    left: auto;
    right: 16px;
    top: auto;
    bottom: 16px;
    z-index: 20;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--c-navy);
    box-shadow: 0 8px 24px rgba(4,26,68,.18);
  }

  .footer__page-top img {
    display: none;
  }

  .footer__page-top::after {
    content: '↑';
    color: #fff;
    font: 700 16px/1 var(--latin);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gnav__badge-box {
    transition-duration: .1s;
  }

  .marquee__track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .thanks__text .u-br-sp {
    display: inline;
  }
}