@charset "utf-8";
/* =========================================================
   キャリオン採用LP / 独自スタイル
   ========================================================= */

:root {
  --carion-pink: #FF3F92;
  --carion-green: #68D35E;
  --carion-yellow: #FEF231;
  --carion-blue: #0073C9;
}


/* ---- FV: PC時 16:9 ---- */
@media (min-width: 768px) {
  #hero {
    aspect-ratio: 16 / 9;
    background-image: none; /* ::before で描画するため無効化 */
  }

  /* 背景を200px下にずらして表示（上部に空白を出さない） */
  #hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/assets/img/top/fv_pc_bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 0;
  }
}

/* ---- FV 図形レイヤー ---- */

.fv-shape {
  position: absolute;
  top: 0;
  right: -15%;
  width: 70%;
  height: 100%;
  background: #0073C9;
  clip-path: polygon(70% 0%, 100% 0%, 30% 100%, 0% 100%);
  z-index: 1;
  pointer-events: none;
  transition: right 0.3s ease, width 0.3s ease;
  animation: fv-shape-reveal 0.6s ease-out 2s both;
}

/* ---- FV キャッチコピーテキストスライドイン ---- */

.fv-catchcopy-anim {
  animation: fv-catchcopy-in 0.6s ease-out 1.1s both;
}

@keyframes fv-catchcopy-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ---- FV コピー画像スライドイン ---- */

.fv-copy-anim {
  animation: fv-copy-in 0.5s ease-out 0.5s both;
}

@keyframes fv-copy-in {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}




@keyframes fv-shape-reveal {
  from { clip-path: polygon(0% 100%, 30% 100%, 30% 100%, 0% 100%); }
  to   { clip-path: polygon(70% 0%, 100% 0%, 30% 100%, 0% 100%); }
}

@media (min-width: 768px) {
  .fv-shape {
    width: 400px;
    right: 20%;
  }
}

@media (min-width: 1536px) {
  .fv-shape {
    right: 35%;
  }
}


/* ---- デコレーション図形（CSS製平行四辺形） ---- */

/*
  使い方:
    <div class="deco-shape-wrap [color] [size] from-left absolute left-[-250px] top-0 z-[1]" aria-hidden="true"></div>
    <div class="deco-shape-wrap [color] [size] from-right absolute right-[-250px] top-0 z-[1]" aria-hidden="true"></div>

  ラッパーは layout 位置固定（IntersectionObserver のため transform 禁止）。
  from-left: 左端配置・左から登場  /  from-right: 右端配置・右から登場（形状も鏡反転）
*/
.deco-shape-wrap {
  overflow: hidden;
  pointer-events: none;
  flex-shrink: 0;
}

/* サイズバリアント（SP基準） */
.deco-shape-wrap.size_m { width: 200px; height: 300px; }
.deco-shape-wrap.size_s { width: 150px; height: 225px; }

@media (min-width: 768px) {
  .deco-shape-wrap.size_m { width: 600px; height: 900px; overflow: visible;}
  .deco-shape-wrap.size_s { width: 300px; height: 450px; }
}


/* 平行四辺形の実体（::before で描画）- 共通 */
.deco-shape-wrap::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  /* 上から下へのマスクリビール: 初期は非表示 */
  -webkit-mask-image: linear-gradient(to bottom, #000, #000);
  -webkit-mask-size: 100% 0%;
  -webkit-mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(to bottom, #000, #000);
  mask-size: 100% 0%;
  mask-position: top center;
  mask-repeat: no-repeat;
  opacity: 0;
  transition:
    transform 0.79s cubic-bezier(0.16, 1, 0.3, 1),
    mask-size 1.0s ease 0.07s,
    -webkit-mask-size 1.0s ease 0.07s,
    opacity 1.5s ease;
}

/* 左から登場: 右上がりの平行四辺形、左から右へスライドイン */
.deco-shape-wrap.from-left::before {
  clip-path: polygon(0% 0%, 30% 0%, 100% 100%, 70% 100%);
  transform: translateX(-100%);
}

/* 右から登場: 左上がりの平行四辺形（鏡反転）、右から左へスライドイン */
.deco-shape-wrap.from-right::before {
  clip-path: polygon(70% 0%, 100% 0%, 30% 100%, 0% 100%);
  transform: translateX(100%);
}

/* カラーバリアント */
.deco-shape-wrap.blue::before   { background: #0073C9; }
.deco-shape-wrap.green::before  { background: #69D35F; }
.deco-shape-wrap.yellow::before { background: #FEF231; }
.deco-shape-wrap.pink::before   { background: #FF3E92; }

/* スクロール到達後: スライド完了 ＋ 上→下マスク全開 */
.deco-shape-wrap.is-visible::before {
  transform: translateX(0);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 1;
}

/* ---- twin: 端と端で接した2本ライン ---- */
/* overflow:hidden を解除し、::after が wrapper 外に出られるようにする     */
/* 初期状態の translateX(100%) で wrapper が右端外にあるため画面外になる  */
.deco-shape-wrap.twin {
  overflow: visible;
}

.deco-shape-wrap.twin::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000, #000);
  -webkit-mask-size: 100% 0%;
  -webkit-mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(to bottom, #000, #000);
  mask-size: 100% 0%;
  mask-position: top center;
  mask-repeat: no-repeat;
  transition:
    transform 0.79s cubic-bezier(0.16, 1, 0.3, 1),
    mask-size 1.0s ease 0.07s,
    -webkit-mask-size 1.0s ease 0.07s;
}

/* from-right twin: ::after を stripe 幅分（30%）左にオフセット */
.deco-shape-wrap.from-right.twin::after {
  left: -30%;
  clip-path: polygon(70% 0%, 100% 0%, 30% 100%, 0% 100%);
  transform: translateX(100%);
}

/* from-left twin */
.deco-shape-wrap.from-left.twin::after {
  right: -30%;
  clip-path: polygon(0% 0%, 30% 0%, 100% 100%, 70% 100%);
  transform: translateX(-100%);
}

/* is-visible 時 */
.deco-shape-wrap.twin.is-visible::after {
  transform: translateX(0);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* twin 単色カラー（::before と ::after 同色） */
.deco-shape-wrap.twin.blue::after   { background: #0073C9; }
.deco-shape-wrap.twin.green::after  { background: #69D35F; }
.deco-shape-wrap.twin.yellow::after { background: #FEF231; }
.deco-shape-wrap.twin.pink::after   { background: #FF3E92; }

/* twin カラーペア（上側::before / 下側::after を別色に指定） */
/* 使い方: <div class="deco-shape-wrap twin from-right twin-pink-yellow ..."> */
.deco-shape-wrap.twin-pink-yellow::before { background: #ff3e92; }
.deco-shape-wrap.twin-pink-yellow::after  { background: #fdf232; }


/* ---- opencompany FV 黄色デコ：SPではコンテンツの背後に ---- */
@media (max-width: 767px) {
  .oc-fv-deco-yellow {
    z-index: 0;
  }
}

/* ---- インタビューカード：ホバーで画像ズーム ---- */
.iv-card img {
  transition: transform 0.7s ease;
}
.iv-card a:hover img {
  transform: scale(1.1);
}

/* ---- 仕事カード：ホバーで画像ズーム ---- */
a.reveal img {
  transition: transform 0.4s ease;
}
a.reveal:hover img {
  transform: scale(1.1);
}
/* ボーダー（余白）はラッパー側に残し、imgのみズーム */


/* ---- FV コピー画像：位置・サイズを画面幅に応じて滑らかにリサイズ ---- */
.fv-copy-wrap {
  top: 80px;
  left: 1rem;
}

@media (min-width: 768px) {
  .fv-copy-wrap {
    top: 90px;
    /* 768px時=10px → 1280px時=80px で線形補間 */
    left: clamp(10px, calc(13.67vw - 95px), 80px);
  }
}

.fv-copy-wrap img {
  width: clamp(200px, 32.14vw, 450px);
}

@media (max-width: 767px) {
  .fv-copy-wrap img {
    width: clamp(200px, 70.14vw, 450px);
  }
}

/* ---- トップFV PC版 アスペクト比 16:10（lg以上） ---- */
@media (min-width: 1024px) {
  #hero {
    aspect-ratio: 16 / 10;
    height: auto;
    max-height: 1080px;
  }
}

/* 2000px以上では縦方向は固定し横だけ伸ばす */
@media (min-width: 2000px) {
  #hero {
    aspect-ratio: auto;
    height: 1250px; /* 2000px × 10/16 */
  }
}

/* ---- ダミー画像プレースホルダ ---- */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d8dbdf;
  background-image:
    linear-gradient(45deg, #cdd1d6 25%, transparent 25%, transparent 75%, #cdd1d6 75%),
    linear-gradient(45deg, #cdd1d6 25%, transparent 25%, transparent 75%, #cdd1d6 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  color: #8a9096;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  overflow: hidden;
}

.ph::after {
  content: attr(data-label);
  padding: 0 8px;
}

.ph-gray {
  background: #8d8d8d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.05em;
}


/* ---- ロゴマーク（カラフルなダミー） ---- */

.logo-mark {
  display: inline-block;
  width: 38px;
  height: 30px;
  background:
    linear-gradient(135deg, var(--carion-pink) 0 50%, transparent 50%) top left / 19px 15px no-repeat,
    linear-gradient(135deg, var(--carion-yellow) 0 50%, transparent 50%) top right / 19px 15px no-repeat,
    linear-gradient(135deg, var(--carion-blue) 0 50%, transparent 50%) bottom left / 19px 15px no-repeat,
    linear-gradient(135deg, var(--carion-green) 0 50%, transparent 50%) bottom right / 19px 15px no-repeat;
  border-radius: 3px;
}

.logo-mark--white {
  filter: none;
}


/* ---- 英語見出し ---- */

.heading-en {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1;
}


/* ---- Inter / Outfit（数字用）---- */

.font-inter {
  font-family: Inter, sans-serif;
}

.font-outfit {
  font-family: Outfit, sans-serif;
}


/* ---- 丸い矢印リンクアイコン ---- */

.circle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  transition: opacity .2s;
  color: var(--carion-blue);
}

.circle-link svg {
  width: 100%;
  height: 100%;
}

a:hover > .circle-link,
.group:hover .circle-link,
p:hover .circle-link {
  opacity: .65;
}


/* ---- セクションタブ（緑地＋黄色の斜めシャドウ） ---- */

.tab-label {
  position: relative;
  display: inline-block;
  background: var(--carion-green);
  color: #fff;
  font-weight: 700;
  padding: 12px 40px;
  font-size: 20px;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.tab-label::before {
  content: "";
  position: absolute;
  inset: 8px -6px -8px 6px;
  background: var(--carion-yellow);
  z-index: -1;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.tab-label--lg {
  font-size: 34px;
  padding: 16px 52px;
  letter-spacing: 2.04px;
}

.tab-label--lg::before {
  inset: 10px -8px -10px 8px;
}


/* ---- タブ（青地＋右下に緑シャドウ） ---- */

.tab-label-wrap {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

.tab-label-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--carion-green);
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  transform: translate(6px, 8px);
}

/* 影色バリエーション */
.tab-label-wrap--shadow-green::before  { background: var(--carion-green); }
.tab-label-wrap--shadow-yellow::before { background: var(--carion-yellow); }

/* tab-label-wrap内の共通レイアウト（blue / green 共通） */
.tab-label--blue,
.tab-label--green {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 16px;
}

@media (min-width: 768px) {
  .tab-label--blue,
  .tab-label--green {
    font-size: 34px;
  }
}

.tab-label-wrap .tab-label--blue,
.tab-label-wrap .tab-label--green {
  width: 100%;
}

.tab-label--blue::before,
.tab-label--green::before {
  display: none;
}

/* 色のみ */
.tab-label--blue  { background: var(--carion-blue); }
.tab-label--green { background: var(--carion-green); }


/* ---- MESSAGE右の斜めストライプ装飾 ---- */

.stripe-deco {
  position: absolute;
  width: 60px;
  height: 340px;
  transform: skewX(-18deg);
  border-radius: 4px;
}


/* ---- INTERVIEWカードの斜めカラーライン ---- */

.iv-accent {
  height: 6px;
  width: 100%;
  transform: skewX(-30deg);
  transform-origin: left;
  border-radius: 2px;
}


/* ---- スクロール出現アニメーション ---- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

/* 上からすーっとフェードイン（装飾ライン用） */
/* 左から右にスライドインしながらフェードイン（装飾ライン用） */
.reveal-from-top {
  opacity: 0;
  transform: translate(-120px, -80px);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.25, .8, .25, 1);
  will-change: opacity, transform;
}

.reveal-from-top.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal.delay-1 { transition-delay: .12s; }
.reveal.delay-2 { transition-delay: .24s; }
.reveal.delay-3 { transition-delay: .36s; }
.reveal.delay-4 { transition-delay: .48s; }

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


/* ---- 経営理念 説明ノート フェードイン ---- */
.philosophy-note {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.philosophy-note.is-open {
  opacity: 1;
}

/* ---- CULTURE 横スクロール写真マーキー ---- */

.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: marquee 45s linear infinite;
}

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

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ---- HERO 見出し（青・斜体太字） ---- */

.hero-copy {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: italic;
  color: var(--carion-blue);
  line-height: 1.15;
  letter-spacing: .02em;
}


/* ---- グローバルナビ ---- */

.global-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: 900px;
  height: 100dvh;
  background: var(--carion-blue);
  padding: 60px 64px;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.77, 0, .18, 1);
  overflow-y: auto;
}

.global-nav.is-open {
  transform: translateX(0);
}

.global-nav__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 60px;
  background: var(--carion-green);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity .2s;
}

.global-nav__close:hover {
  opacity: .85;
}

.global-nav__close span {
  display: block;
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
  transform-origin: center;
}

.global-nav__close span:first-child {
  transform: translateY(2px) rotate(45deg);
}

.global-nav__close span:last-child {
  transform: translateY(-2px) rotate(-45deg);
}

.global-nav__inner {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15%;
}

.global-nav__inner > nav {
  width: 50%;
}

.global-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.global-nav__list li {
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.global-nav__list li:first-child {
  border-top: none;
}

.global-nav__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  text-decoration: none;
  transition: opacity .2s;
}

.global-nav__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.global-nav__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.global-nav__item:hover {
  opacity: .7;
}

.global-nav__en {
  font-family: Poppins, sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #fff;
  letter-spacing: .04em;
}

.global-nav__ja {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1.0);
  letter-spacing: .08em;
}

.global-nav__cta {
  width: 50%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.global-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}

.global-nav__btn:hover {
  opacity: .85;
}

.global-nav__btn--pink {
  background: var(--carion-pink);
  color: #fff;
}

.global-nav__btn--white {
  background: #fff;
  color: var(--carion-blue);
  border: 2px solid rgba(255, 255, 255, .4);
}


/* ---- ページトップボタン ---- */

#to-top {
  -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}


/* ---- オーバーレイ背景 ---- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}


/* ---- ハンバーガーアイコン ---- */



/* ---- モバイル対応（〜767px） ---- */

@media (max-width: 767px) {
  .tab-label--lg {
    font-size: 20px;
    padding: 10px 32px;
    letter-spacing: 1px;
  }

  .tab-label--lg::before {
    inset: 8px -6px -8px 6px;
  }

  .tab-label {
    font-size: 16px;
    padding: 10px 28px;
  }

  .tab-label::before {
    inset: 6px -5px -6px 5px;
  }

  .global-nav {
    width: 100%;
    padding: 60px 24px;
  }

  .global-nav__inner {
    flex-direction: column;
    gap: 0;
  }

  .global-nav__inner > nav,
  .global-nav__cta {
    width: 100%;
  }

  .global-nav__cta {
    margin-top: 48px;
  }

  .marquee__track {
    gap: 16px;
  }
}


/* ---- スマホ（〜640px）：グローバルナビ縦並び ---- */

@media (max-width: 640px) {
  .global-nav__item {
    padding: 8px 0;
  }

  .global-nav__en {
    font-size: 12px;
    font-weight: 400;
  }

  .global-nav__ja {
    font-size: 16px;
  }
}