/* =============================================================================
   components.css — 複数のセクションで共有する部品
   レイアウト用ラッパー、表示切り替えのユーティリティクラス、矢印、ボタン部品、テキストリンク、
   共通のホバー時の光、そしてオープニング演出中にそれらが取る状態。
   ============================================================================= */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 7px;
}

.wrap {
  width: calc(100% - var(--gutter)*2);
  max-width: 1440px;
  margin-inline: auto;
}

.section {
  position: relative;
}

/* 写真のクレジット。右下に小さく表示する（クレジット表記が必要な提供写真向け）。 */
.photo-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgb(0 0 0 / .5);
  color: #fff;
  line-height: 1.6;
  letter-spacing: .04em;
  pointer-events: none;
}

/* 途中で改行させない語句。日本語はどこでも改行できてしまうので、長い見出しはこの単位で折り返す。
   TOP と下層ページで共通。 */
.phrase {
  display: inline-block;
}

.sp-only,
.sp-break,
.culture-mobile-break {
  display: none;
}

.arrow {
  line-height: 1;
  transition: transform .25s;
}

.text-link:hover .arrow {
  transform: translate(3px,-3px);
}

/* ----- ホバーのパターン ---------------------------------------------------------------------
   カードに .hover-zoom を付けると画像がゆっくり手前に寄る。ボタンとテキストリンクは独自の
   ホバー（下にある光と矢印の動き）を持つ。transform ではなく scale を使うのは、同じ画像に
   スクロール演出が掛ける transform とぶつからないようにするため。 */
.hover-zoom img {
  transition: scale .6s var(--motion-ease);
}

@media (hover: hover) {
  .hover-zoom:hover img {
    scale: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hover-zoom:hover img {
    scale: none;
  }
}

/* ----- ボタン ------------------------------------------------------------------------
   ページ上のすべてのアクションボタンを 1 つの部品でまかなう。
     .btn            本文中のボタン（高さ 64px）
     .btn--sm        ヘッダーと Hero 用（44px）
     .btn--light     白地に青いラベル。青や暖色の背景の上で使う
     .btn--solid     ブランドブルー地に白いラベル
     .btn--ghost     透明に白い細線。Hero のネイビーの上で使う
   [data-specular] を付けるとポインターを追うリムライトが加わる（js/specular.js）。その色は
   --specular-line と --specular-base で、下でトーンごとに設定する。サイズは文脈ごとに
   --btn-h / --btn-pad / --btn-gap で調整し、ボタン自体のスタイルは書き換えない。 */
.btn {
  --btn-h: 64px;
  --btn-pad: 28px;
  --btn-gap: 32px;
  --specular-line: #fff;
  --specular-base: rgb(255 255 255 / .35);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--btn-gap);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border: 1px solid transparent;
  border-radius: 999px;
  font: var(--w-body) var(--t-body)/1 var(--f-ui);
  letter-spacing: .01em;
  white-space: nowrap;
  transition: translate .25s var(--motion-ease), background-color .25s, border-color .25s, box-shadow .35s ease, filter .35s ease;
}

.btn--sm {
  --btn-h: 44px;
  --btn-pad: 20px;
  --btn-gap: 22px;
}

.btn__label,
.btn__arrow {
  position: relative;
  z-index: 2;
}

.btn__arrow {
  line-height: 1;
  transition: transform .25s;
}

/* リムライト用の canvas。ボタンの塗りとラベルの間に置く */
.btn__light {
  position: absolute;
  inset: -24px;
  z-index: 1;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
}

@media (hover: hover) {
  .btn:hover {
    translate: 0 -2px;
  }

  .btn:hover .btn__arrow {
    transform: translate(3px, -3px);
  }
}

.btn--light {
  --specular-line: var(--c-orange-lt);
  --specular-base: rgb(22 68 175 / .18);
  background: #fff;
  color: var(--c-blue);
}

.btn--solid {
  background: var(--c-blue);
  border-color: rgb(255 255 255 / .4);
  color: #fff;
}

.btn--solid:hover {
  background: var(--c-deep);
}

.btn--ghost {
  background: rgb(255 255 255 / .2);
  border-color: #fff;
  color: #fff;
}

.btn--ghost:hover {
  background: rgb(255 255 255 / .32);
  border-color: #fff;
}

@media (max-width: 760px) {
  .btn {
    --btn-h: 56px;
    --btn-pad: 24px;
    --btn-gap: 24px;
  }

  .btn--sm {
    --btn-h: 44px;
    --btn-pad: 18px;
    --btn-gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    translate: none;
  }
}

.text-link {
  display: inline-flex;
  gap: 30px;
  align-items: center;
}

.section-title h2 {
  line-height: 1.05;
  letter-spacing: -.055em;
  color: var(--accent);
}

/* セクションタイトルの下の日本語の 1 行。本文ではなくタイトルの一部として読ませたいので、
   本文のゴシックではなくタイトルと同じ明朝体にする。 */
.section-title p {
  font-family: var(--f-serif);
  letter-spacing: .08em;
  margin-top: 17px;
}

.closing-actions .wrap {
  width: 80%;
}

.recruit-main > *,
.company-gallery > *,
.youtube-grid > *,
.news > * {
  min-width: 0;
}

.motion-paused *,
.motion-paused *:before,
.motion-paused *:after {
  animation-play-state: paused !important;
}

@media (max-width:760px) {
  .sp-only,
  .sp-break {
    display: block;
  }

  .section-title p {
    margin-top: 13px;
  }

  .text-link {
    gap: 25px;
  }

  .closing-actions .wrap {
    width: 88%;
  }
}

@media (prefers-reduced-motion:reduce) {
  #hero-stage,
  .culture-card-media,
  .company-gallery figure {
    translate: none;
    transform: none;
  }
}

.hero-about-flow .hero-journey,
.hero-about-flow .hero-journey-viewport,
.hero-about-flow .growth-feature {
  background: transparent;
}

/* すべてのアクションボタンがホバー / フォーカス時にまとう柔らかなオレンジの光。テキストリンクは
   対象外。面を持たないので光が文字の周りのにじみに見えてしまうため、ホバーは矢印の動きだけにする。 */
:is(.btn, .back-top, button) {
  transition: box-shadow .35s ease,filter .35s ease,background-color .35s ease;
}

/* ホバーはマウスのある端末だけ。スマホではタップ後もホバーの見た目が残り、MENU などが光ったままになる。 */
:is(.btn, .back-top, button):focus-visible {
  box-shadow: 0 0 16px 3px #e6510029,0 0 38px 10px #ff913326;
  filter: drop-shadow(0 0 10px #ff8a3330);
}

@media (hover: hover) {
  :is(.btn, .back-top, button):hover {
    box-shadow: 0 0 16px 3px #e6510029,0 0 38px 10px #ff913326;
    filter: drop-shadow(0 0 10px #ff8a3330);
  }
}

@media (min-width:761px) {
  .wrap {
    max-width: none;
  }
}

@media (max-width:760px) {
  .variant-b .wrap {
    width: 90%;
    max-width: none;
  }
}

/* 結びの 3 行を横切るオレンジの光は、読めるくらいゆっくり動かす。 */
.story-conclusion,
#services .projects-closing h3,
#culture .culture-statement-sweep {
  transition: background-position 1.8s cubic-bezier(.22,.61,.36,1);
}

.logo-intro-pending #hero .hero-copy,
.logo-intro-pending .hero-bottom,
.logo-intro-pending .header nav,
.logo-intro-pending .menu-toggle {
  opacity: 0;
}


/* 共通のエントリー CTA。エントリー導線ではどこでも .btn と（必要なら）.btn--sm と組み合わせて使う。 */
.btn.btn--entry {
  --specular-line: #fff;
  --specular-base: rgb(255 255 255 / .3);
  background: var(--c-orange);
  border-color: transparent;
  color: #fff;
}
.btn.btn--entry:hover {
  background: #c74400;
  box-shadow: 0 6px 20px rgb(230 81 0 / .22);
}
.btn.btn--entry:focus-visible {
  outline-color: var(--c-blue);
  box-shadow: 0 0 0 3px #fff;
}