@charset "UTF-8";

/* =========================================================
   株式会社富山データー機器サービス 採用LP　共通スタイル
   （ページ送りの器・ヘッダー・ボタン・見出し・タブ・カード・フッターなど）
   ========================================================= */

/* ===== 変数 ===== */
:root {
  --site-header-height: 70px;
  --column-width: 480px;
  --gutter: 24px;
  --color-main: #3a86ff;
  --color-yellow: #fff536;
  --color-green: #81f677;
  --color-text: #1a1a1a;
  --color-blue-deep: #2861a4;
  --color-white: #ffffff;
  --color-pale-yellow: #fafeb3;
  --color-pale-blue: #edf4fe;
  --color-gray: #f5f5f5;
  --color-tab-off: #a5a5a5;
  --color-error: #d0312d;
  --line: 1px solid var(--color-text);
  --line-thin: 0.5px solid var(--color-text);
  --radius-card: 19px;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===== リセット・基本 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background-color: var(--color-pale-blue);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
  padding: 0;
  list-style: none;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

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

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

strong {
  font-weight: 700;
}

[hidden] {
  display: none !important;
}

small {
  font-size: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-main);
  outline-offset: 3px;
}

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

@media (min-width: 481px) {
  html {
    font-size: 15px;
  }
}

/* ===== ページ送りの器（演出0） ===== */
.swipe-container {
  position: relative;
  width: min(100%, var(--column-width));
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background-color: var(--color-white);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.swipe-container::-webkit-scrollbar {
  display: none;
}

/* 長尺セクションの中を読んでいる間だけ、スナップを外す（演出0-3） */
.swipe-container.is-free-scroll {
  scroll-snap-type: none;
}

/* 指で送っている間・送り先へ動かしている間は、スナップとなめらかスクロールを止めて、JSの動きにそのまま従わせる */
.swipe-container.is-paging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.swipe-section {
  position: relative;
  box-sizing: border-box;
  height: calc(100vh - var(--site-header-height));
  height: calc(100dvh - var(--site-header-height));
  min-height: calc(100vh - var(--site-header-height));
  min-height: calc(100dvh - var(--site-header-height));
  max-height: calc(100vh - var(--site-header-height));
  max-height: calc(100dvh - var(--site-header-height));
  scroll-margin-top: var(--site-header-height);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* FVだけはヘッダーを引かず全画面（FV表示中はヘッダーを隠すため） */
.swipe-section--fv {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  scroll-margin-top: 0;
}

/* 長尺セクション（演出0-3）：1画面より長くなってよい */
.swipe-section--long {
  height: auto;
  min-height: calc(100vh - var(--site-header-height));
  min-height: calc(100dvh - var(--site-header-height));
  max-height: none;
  scroll-snap-stop: normal;
}

/* 長尺セクションの下端にもスナップ位置を作る */
.snap-end {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  scroll-snap-align: end;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .swipe-container {
    scroll-behavior: auto;
  }
}

/* ===== PC表示時の左右の境目（黒の細線） ===== */
.column-frame {
  display: none;
}

@media (min-width: 481px) {
  .column-frame {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 40;
    width: calc(var(--column-width) + 2px);
    transform: translateX(-50%);
    border-right: var(--line);
    border-left: var(--line);
    pointer-events: none;
  }
}

/* ===== 固定ヘッダー（演出0-4） ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 30;
  width: min(100%, var(--column-width));
  height: var(--site-header-height);
  transform: translateX(-50%);
  background-color: var(--color-white);
  border-bottom: var(--line);
  transition:
    opacity 0.2s linear,
    visibility 0.2s linear;
}

.intro-active .site-header {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 0 14px 0 16px;
}

.site-header__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.site-header__logo img {
  width: auto;
  height: 36px;
}

.site-header__label {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
}

.site-header__nav {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

@media (max-width: 359px) {
  .site-header__inner {
    padding: 0 10px 0 12px;
  }

  .site-header__logo {
    gap: 6px;
  }

  .site-header__logo img {
    height: 30px;
  }

  .site-header__label {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* ===== ボタン（ピル型・黒の細線） ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  background-color: var(--color-yellow);
  border: var(--line);
  border-radius: 999px;
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.btn--white {
  background-color: var(--color-white);
}

.btn--small {
  padding: 7px 13px;
  font-size: 12px;
}

.btn--large {
  position: relative;
  min-width: 260px;
  padding: 17px 64px 17px 32px;
  font-size: 15px;
}

.btn--block {
  width: 100%;
  min-width: 0;
}

/* 右端の青い丸＋白い矢印 */
.btn__arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  background-color: var(--color-main);
  border: var(--line-thin);
  border-radius: 50%;
}

.btn__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-65%, -50%) rotate(45deg);
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
}

/* 送信中：矢印の丸をくるくる回る輪に替え、押せないようにする */
.btn.is-loading {
  cursor: progress;
}

.btn:disabled {
  opacity: 0.75;
}

.btn.is-loading .btn__arrow {
  background-color: transparent;
  border: 3px solid var(--color-main);
  border-top-color: transparent;
  animation: btn-spin 0.8s linear infinite;
}

.btn.is-loading .btn__arrow::before {
  display: none;
}

@keyframes btn-spin {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }

  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading .btn__arrow {
    animation-duration: 2.4s;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover {
    background-color: #fffa9e;
  }

  .btn--white:hover {
    background-color: var(--color-gray);
  }
}

/* ===== セクションの基本 ===== */
.section {
  overflow: hidden;
}

/* 長尺セクションは hidden にすると中のスナップ位置（.snap-end）がセクション側に属してしまうので、
   スクロール領域を作らない clip ではみ出しだけを切る（見出しの影が前の画面に重ならないように） */
.swipe-section--long.section {
  overflow: visible;
  overflow: clip;
}

.section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 36px var(--gutter) 40px;
}

.swipe-section--long .section__inner {
  height: auto;
  padding-bottom: 72px;
}

/* 背面の装飾の器 */
.deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ===== 先方コピーの見出し（01〜03） ===== */
.lead-title {
  font-family: var(--font-head);
  font-size: clamp(1.57rem, 6.6vw, 1.86rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* ===== セクション見出し（04〜09：日本語の小さなラベル＋英字の大見出し） ===== */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  font-weight: inherit;
}

.section-head__label {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* フチは文字の外側に半分だけ見える（paint-order: stroke fill）ので、見せたい太さの2倍で指定する */
.section-head__en {
  display: block;
  color: var(--color-main);
  font-family: var(--font-head);
  font-size: clamp(2.75rem, 13.2vw, 3.3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 5px var(--color-text);
  paint-order: stroke fill;
}

.section-head__en--small {
  font-size: clamp(2.1rem, 10vw, 2.55rem);
  letter-spacing: -0.02em;
}

/* 01〜03：先方コピーの見出しの上に置く英字（大見出しと同じ形） */
.section-head__en + .lead-title,
.section-head__en + .band-text {
  margin-top: 14px;
}

/* ===== 本文 ===== */
.section-text {
  font-size: 1rem;
  line-height: 1.8;
}

/* 【 】の強調：太字＋黄のマーカー（文字の下半分） */
.mark {
  font-weight: 700;
  background-image: linear-gradient(transparent 55%, var(--color-yellow) 55%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mark--white {
  background-image: linear-gradient(transparent 55%, var(--color-white) 55%);
}

/* 1行ずつ白い帯に載せる文章（参考サイトのメッセージ欄の形） */
.band-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.band-text__line {
  display: inline-block;
  padding: 3px 8px;
  background-color: var(--color-white);
  font-family: var(--font-head);
  font-size: 1.07rem;
  font-weight: 700;
  line-height: 1.6;
}

.band-text--gray .band-text__line {
  background-color: var(--color-gray);
}

/* ===== 斜めの帯（参考サイトのMVの平行四辺形） ===== */
.slash {
  position: absolute;
  display: block;
  clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
}

.slash--blue {
  background-color: var(--color-main);
}

.slash--gray {
  background-color: #e4e4e4;
}

.slash--yellow {
  background-color: var(--color-yellow);
}

.slash--green {
  background-color: var(--color-green);
}

.slash--white {
  background-color: var(--color-white);
}

/* ===== ギザギザの形（参考サイトの、尖った角のある大きな面） ===== */
.burst {
  position: absolute;
  display: block;
}

/* 上の辺がギザギザ */
.burst--up {
  clip-path: polygon(0 34%, 14% 62%, 30% 8%, 46% 50%, 64% 0, 78% 44%, 100% 16%, 100% 100%, 0 100%);
}

/* 下の辺がギザギザ */
.burst--down {
  clip-path: polygon(0 0, 100% 0, 100% 66%, 86% 36%, 70% 94%, 54% 50%, 36% 100%, 22% 56%, 0 84%);
}

.burst--white {
  background-color: var(--color-white);
}

.burst--blue {
  background-color: var(--color-main);
}

.burst--yellow {
  background-color: var(--color-yellow);
}

.burst--pale {
  background-color: var(--color-pale-blue);
}

/* ===== グラデーションの面（上から／下から、背景の色へ溶ける） ===== */
.grad {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
}

.grad--top {
  top: 0;
  height: 42%;
  background-image: linear-gradient(to bottom, var(--grad-color), rgba(255, 255, 255, 0));
}

.grad--bottom {
  bottom: 0;
  height: 50%;
  background-image: linear-gradient(to top, var(--grad-color), rgba(255, 255, 255, 0));
}

.grad--white {
  --grad-color: rgba(255, 255, 255, 0.9);
}

.grad--yellow {
  --grad-color: rgba(255, 245, 54, 0.55);
}

.grad--deep {
  --grad-color: rgba(40, 97, 164, 0.75);
}

/* ===== 項目名の頭の「／」（文字ではなく線で描き、太さをそろえる） ===== */
.slash-mark::before {
  content: "";
  position: absolute;
  display: block;
  width: 3px;
  height: 1.05em;
  background-color: var(--color-main);
  border-radius: 2px;
  transform: skewX(-26deg);
}

/* ===== 番号（青の塗り＋黒フチの英数字） ===== */
.num {
  display: block;
  color: var(--color-main);
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1.5px var(--color-text);
  paint-order: stroke fill;
}

/* ===== カード ===== */
.card {
  background-color: var(--color-white);
  border: var(--line-thin);
  border-radius: var(--radius-card);
}

/* ===== バッジ（緑のピル型） ===== */
.badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--color-green);
  border: var(--line-thin);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* ===== ＋の丸ボタン ===== */
.plus-icon {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  background-color: var(--color-main);
  border: var(--line-thin);
  border-radius: 50%;
}

.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
  background-color: var(--color-white);
  border-radius: 1px;
}

.plus-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ===== タブ（04 仕事内容・08 募集要項。参考サイトのタブの形） ===== */
.tabs__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  margin: 0;
  padding: 10px 8px 8px;
  background-color: var(--color-tab-off);
  border: var(--line);
  border-left-width: 0;
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.tabs__tab:first-child {
  border-left-width: 1px;
}

.tabs__tab[aria-selected="true"] {
  background-color: var(--color-white);
  border-bottom-color: transparent;
  cursor: default;
}

/* 下に小さな青丸の下向き矢印 */
.tabs__tab-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  background-color: var(--color-main);
  border-radius: 50%;
}

.tabs__tab-icon::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 1.5px solid var(--color-white);
  border-bottom: 1.5px solid var(--color-white);
}

.tabs__panel {
  background-color: var(--color-white);
}

/* 切り替えた先のパネルを、少し大きい状態からふっと出す（参考サイトの実測 0.15s） */
.tabs__panel.is-entering {
  transform-origin: center top;
  animation: tab-in 0.15s ease-out;
}

@keyframes tab-in {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabs__panel.is-entering {
    animation: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tabs__tab[aria-selected="false"]:hover {
    background-color: #bdbdbd;
  }
}

/* ===== PC表示時の左右の背景・右側のボタン（スマホ・タブレットの縦では非表示） ===== */
.pc-side,
.pc-nav {
  display: none;
}

@media (min-width: 768px) {
  .swipe-container {
    z-index: 1;
  }

  .pc-side {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-image: linear-gradient(
      to bottom,
      var(--color-pale-yellow) 0%,
      var(--color-pale-blue) 55%,
      var(--color-pale-blue) 100%
    );
    pointer-events: none;
  }

  /* 下から淡い黄緑がにじむ */
  .pc-side__grad {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 40%;
    background-image: linear-gradient(to top, rgba(129, 246, 119, 0.22), rgba(129, 246, 119, 0));
  }

  /* 左下の青・右上の黄のギザギザの面 */
  .pc-side__burst--left {
    bottom: -4%;
    left: -6%;
    width: 30%;
    height: 34%;
    opacity: 0.9;
  }

  .pc-side__burst--right {
    top: -4%;
    right: -6%;
    width: 30%;
    height: 30%;
  }

  .pc-side__burst {
    animation: pc-slash-float 6s ease-in-out infinite alternate;
  }

  .pc-side__burst--right {
    animation-delay: -3s;
  }

  /* 水玉の模様 */
  .pc-side__dots {
    position: absolute;
    width: 160px;
    height: 160px;
    background-image: radial-gradient(var(--color-main) 2.5px, transparent 3px);
    background-size: 18px 18px;
    opacity: 0.35;
  }

  .pc-side__dots--left {
    top: 8%;
    left: 4%;
  }

  .pc-side__dots--right {
    right: 4%;
    bottom: 10%;
  }

  /* 左右それぞれ、中央列の外側の幅いっぱい */
  .pc-side__area {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100% - var(--column-width)) / 2);
    padding: 0 12px;
  }

  .pc-side__area--left {
    left: 0;
  }

  .pc-side__area--right {
    right: 0;
  }

  .pc-side__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .pc-side__logo {
    width: auto;
    height: clamp(60px, 7vw, 88px);
  }

  .pc-side__label {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.2em;
  }

  .pc-side__copy {
    position: relative;
    margin-top: 32px;
    font-family: var(--font-head);
    font-size: clamp(1.1rem, 2vw, 1.9rem);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .pc-side__en {
    position: relative;
    margin-top: 6px;
    color: var(--color-main);
    font-family: var(--font-head);
    font-size: clamp(1.7rem, 4.4vw, 4.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    -webkit-text-stroke: 6px var(--color-text);
    paint-order: stroke fill;
  }

  /* 縦向きの大きな英字を薄く敷く（左は「RECRUIT」、右はボタンの後ろに「ENTRY」） */
  .pc-side__text {
    position: absolute;
    top: 50%;
    color: transparent;
    font-family: var(--font-head);
    font-size: clamp(6rem, 12vw, 11rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
    -webkit-text-stroke: 2px rgba(58, 134, 255, 0.28);
  }

  .pc-side__text--left {
    left: 2%;
  }

  .pc-side__text--right {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 斜めの帯（ゆっくり浮かぶ） */
  .pc-side__slash {
    rotate: -14deg;
    animation: pc-slash-float 7s ease-in-out infinite alternate;
  }

  .pc-side__slash--a {
    top: 6%;
    left: -4%;
    width: 22%;
    height: 90px;
  }

  .pc-side__slash--b {
    top: 15%;
    left: 8%;
    width: 9%;
    height: 34px;
    animation-delay: -2s;
  }

  .pc-side__slash--c {
    bottom: 12%;
    left: 6%;
    width: 16%;
    height: 56px;
    animation-delay: -4s;
  }

  .pc-side__slash--d {
    right: -6%;
    bottom: 5%;
    width: 24%;
    height: 96px;
    animation-delay: -1s;
  }

  .pc-side__slash--e {
    top: 28%;
    right: 6%;
    width: 13%;
    height: 50px;
    animation-delay: -3s;
  }

  .pc-side__slash--f {
    right: 13%;
    bottom: 22%;
    width: 7%;
    height: 28px;
    animation-delay: -5s;
  }

  .pc-nav {
    position: fixed;
    top: 50%;
    right: calc((100% - var(--column-width)) / 4);
    z-index: 35;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: translate(50%, -50%);
  }

  .pc-nav__btn {
    min-width: 220px;
  }
}

/* 左右の幅が狭いPC・タブレットの横向き（768〜899px）では、ボタンと文字を小さく */
@media (min-width: 768px) and (max-width: 899px) {
  .pc-nav__btn {
    min-width: 0;
    width: calc((100vw - var(--column-width)) / 2 - 24px);
    padding: 12px 44px 12px 14px;
    font-size: 13px;
  }

  .pc-nav__btn .btn__arrow {
    right: 8px;
    width: 26px;
    height: 26px;
  }

  .pc-side__en {
    -webkit-text-stroke-width: 4px;
  }
}

@keyframes pc-slash-float {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 -16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-side__slash,
  .pc-side__burst {
    animation: none;
  }
}

/* ===== フッター ===== */
.site-footer {
  position: relative;
  padding: 36px var(--gutter) 28px;
  background-color: var(--color-white);
  border-top: var(--line);
  text-align: center;
}

.site-footer__logo {
  width: auto;
  height: 48px;
  margin: 0 auto 12px;
}

.site-footer__name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.site-footer__address {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.8;
}

.site-footer__address a {
  text-decoration: none;
}

.site-footer__copy {
  margin-top: 20px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ===== 演出A：英字の大見出しの影スライド（参考サイトの実測値） ===== */
/* 左下からすべり込みながら、右上にずれた黒い影が文字に重なるまで寄ってくる。
   セクションに is-active が付くたびに再生する（外れたら最初の状態に戻る） */
.is-js .swipe-section .section-head__en {
  opacity: 0;
}

.is-js .swipe-section.is-active .section-head__en {
  opacity: 1;
  animation: head-shadow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@keyframes head-shadow {
  0% {
    opacity: 0;
    transform: translate(-50px, 50px);
    text-shadow: 100px -100px 0 var(--color-text);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
    text-shadow: 0 0 0 var(--color-text);
  }
}

/* ===== 演出B：ポップイン（参考サイトの実測値） ===== */
/* 大きめの状態から弾んで所定の大きさに収まる。要素ごとの遅れ（--pop-delay）は common.js で 0.12秒ずつ付ける。
   transform ではなく scale で動かす（バッジの傾きなど、もともとの transform を消さないため） */
.is-js .swipe-section .js-pop {
  opacity: 0;
}

.is-js .swipe-section.is-active .js-pop {
  opacity: 1;
  animation: pop-in 0.8s ease-out both;
  animation-delay: var(--pop-delay, 0s);
}

@keyframes pop-in {
  0% {
    opacity: 0;
    scale: 1.4;
  }

  40% {
    opacity: 1;
    scale: 0.94;
  }

  60% {
    scale: 1.03;
  }

  80% {
    scale: 0.99;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

/* ===== 演出C：見出しを1行ずつ（下から、ぼかしを取りながら） ===== */
/* 改行（<br>）ごとの行に分けるのは common.js。行ごとの遅れ（--line-delay）も common.js で付ける */
.text-line {
  display: block;
}

.is-js .swipe-section .js-lines .text-line {
  opacity: 0;
}

.is-js .swipe-section.is-active .js-lines .text-line {
  animation: line-in 0.7s var(--ease-out) var(--line-delay, 0s) both;
}

@keyframes line-in {
  0% {
    opacity: 0;
    translate: 0 0.6em;
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

/* ===== 演出D：帯の文章を1行ずつ、左から帯を引くように出す ===== */
.is-js .swipe-section .band-text__line {
  clip-path: inset(0 100% 0 0);
}

.is-js .swipe-section.is-active .band-text__line {
  animation: band-in 0.6s var(--ease-out) var(--line-delay, 0s) both;
}

@keyframes band-in {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* ===== 演出E：画面の中の文章・カードを下からふわっと（画面に入るたびに） ===== */
/* 長尺セクションの中でも、見えた所から順に出るように、common.js の IntersectionObserver で is-inview を付け外しする */
.is-js .js-fade {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.7s var(--ease-out),
    translate 0.7s var(--ease-out);
  transition-delay: var(--fade-delay, 0s);
}

.is-js .js-fade.is-inview {
  opacity: 1;
  translate: 0 0;
}

/* ===== 演出F：背面の斜めの帯がすべり込み、そのあとゆっくり浮かぶ ===== */
.is-js .swipe-section .deco .slash {
  opacity: 0;
}

.is-js .swipe-section.is-active .deco .slash {
  animation:
    slash-in 0.9s var(--ease-out) var(--slash-delay, 0s) both,
    slash-float 6s ease-in-out calc(var(--slash-delay, 0s) + 0.9s) infinite alternate;
}

.deco .slash:nth-child(even) {
  --slash-x: -90px;
}

/* ギザギザの面は、少し下から持ち上がる */
.is-js .swipe-section .deco .burst {
  opacity: 0;
}

/* 持ち上がったあとは、ゆっくり上下にゆれる */
.is-js .swipe-section.is-active .deco .burst {
  animation:
    burst-in 1s var(--ease-out) 0.1s both,
    burst-float 5s ease-in-out 1.1s infinite alternate;
}

@keyframes burst-float {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 -12px;
  }
}

@keyframes burst-in {
  0% {
    opacity: 0;
    translate: 0 40px;
  }

  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes slash-in {
  0% {
    opacity: 0;
    translate: var(--slash-x, 90px) 0;
  }

  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes slash-float {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 -10px;
  }
}

/* ===== 演出G：イラストがゆっくり上下にゆれる ===== */
@keyframes bob {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-js .swipe-section .section-head__en,
  .is-js .swipe-section .js-pop,
  .is-js .swipe-section .js-lines .text-line,
  .is-js .swipe-section .deco .slash,
  .is-js .swipe-section .deco .burst,
  .is-js .js-fade {
    opacity: 1;
  }

  .is-js .swipe-section .band-text__line {
    clip-path: none;
  }

  .is-js .js-fade {
    translate: 0 0;
    transition: none;
  }

  .is-js .swipe-section.is-active .section-head__en,
  .is-js .swipe-section.is-active .js-pop,
  .is-js .swipe-section.is-active .js-lines .text-line,
  .is-js .swipe-section.is-active .band-text__line,
  .is-js .swipe-section.is-active .deco .slash,
  .is-js .swipe-section.is-active .deco .burst {
    animation: none;
  }
}