@charset "UTF-8";
/* =========================================================
   CONVEX INC. - Main Stylesheet Entry
   このファイル(style.scss)をコンパイルすると
   1つの css/style.css に全ての SCSS が集約される。

   コンパイル方法:
     $ sass scss/style.scss css/style.css --style=expanded --no-source-map

   構成:
     scss/
     ├── style.scss              ← このファイル(エントリ)
     ├── common/                  ← 全ページ共通
     │   ├── _index.scss          ← common パーシャルの集約
     │   ├── _base.scss           ← 変数・mixin・リセット・フォント・ベース
     │   ├── _header.scss
     │   ├── _footer.scss
     │   ├── _menu.scss
     │   ├── _scroll_meter.scss
     │   ├── _fade_in.scss
     │   └── _loading.scss
     └── pages/                   ← 各ページ専用
         └── _top.scss            ← トップページ
   ========================================================= */
/* Reset (外部 CDN) */
@import url("https://unpkg.com/ress/dist/ress.min.css");
@media screen and (min-width: 768px) {
  html {
    font-size: 0.685vw;
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 62.5%;
  }
}
@media (max-width: 767px) {
  html {
    font-size: clamp(7.5px, 2vw, 10px);
  }
}
/* 共通(変数・コンポーネント・演出) */
/* =========================================================
   Common Partials Aggregator
   全ページ共通の SCSS をここで集約。
   style.scss からは `@import "common/index";` 1行で全てが読み込まれる。

   新しい共通コンポーネントを追加した場合は、ここに @import を追加する。
   ========================================================= */
/* =========================================================
   Font Face Declarations (ローカルフォント)
   ローカルの assets/fonts/ から読み込み
   - .ttf 形式 (TrueType)
   - font-display: swap で FOIT を回避
   - Inter は 28pt 版を使用 (Inter_28pt-*.ttf)
   ========================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Inter_28pt-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter_28pt-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter_28pt-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter_28pt-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ZenKakuGothicNew-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ZenKakuGothicNew-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ZenKakuGothicNew-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ZenKakuGothicNew-Bold.ttf") format("truetype");
}
/* =========================================================
   Variables
   ========================================================= */
/* =========================================================
   Mixins
   ========================================================= */
/* =========================================================
   Base
   ========================================================= */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  display: block;
  width: 100%;
  min-height: 100vh;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: #000000;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  a:hover {
    opacity: 0.7;
  }
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* =========================================================
   Utility
   ========================================================= */
.imgArea {
  display: block;
}
.imgArea img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 767px) {
  .pc_only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .sp_only {
    display: none !important;
  }
}

/* =========================================================
   Keyframes (common)
   ========================================================= */
@keyframes glow_float {
  0% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    border-radius: 70% 30% 65% 35%/35% 70% 30% 65%;
    transform: translate(10%, -12%) scale(1.15) rotate(8deg);
  }
  50% {
    border-radius: 35% 65% 30% 70%/65% 35% 70% 30%;
    transform: translate(-12%, 10%) scale(0.85) rotate(-8deg);
  }
  75% {
    border-radius: 65% 35% 70% 30%/30% 65% 35% 70%;
    transform: translate(13%, 8%) scale(1.1) rotate(5deg);
  }
  100% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}
/* =========================================================
   Glow color animation (smooth interpolation)
   ---------------------------------------------------------
   通常 background-image は離散値扱いでアニメーション補間されないため、
   キーフレームで色を直接書くと「カチッ」と切り替わってしまう。
   そこで @property で <color> 型のカスタムプロパティを登録し、
   linear-gradient の中で参照することで滑らかな色補間を実現する。
   ========================================================= */
@property --glow_c1 {
  syntax: "<color>";
  initial-value: rgba(111, 243, 255, 0.23);
  inherits: false;
}
@property --glow_c2 {
  syntax: "<color>";
  initial-value: rgba(254, 255, 182, 0.5);
  inherits: false;
}
@keyframes glow_color_intro {
  0% {
    --glow_c1: rgba(111, 243, 255, 0.5);
    --glow_c2: rgba(254, 255, 182, 0.6);
  }
  33% {
    --glow_c1: rgba(255, 100, 160, 0.55);
    --glow_c2: rgba(255, 180, 100, 0.6);
  }
  66% {
    --glow_c1: rgba(140, 90, 255, 0.55);
    --glow_c2: rgba(80, 220, 220, 0.6);
  }
  100% {
    --glow_c1: rgba(111, 243, 255, 0.5);
    --glow_c2: rgba(254, 255, 182, 0.6);
  }
}
@keyframes glow_color_philosophy {
  0% {
    --glow_c1: rgba(111, 166, 255, 0.55);
    --glow_c2: rgba(121, 255, 49, 0.55);
  }
  33% {
    --glow_c1: rgba(150, 70, 255, 0.55);
    --glow_c2: rgba(0, 220, 160, 0.55);
  }
  66% {
    --glow_c1: rgba(50, 200, 255, 0.55);
    --glow_c2: rgba(255, 200, 60, 0.55);
  }
  100% {
    --glow_c1: rgba(111, 166, 255, 0.55);
    --glow_c2: rgba(121, 255, 49, 0.55);
  }
}
@keyframes glow_color_recruit {
  0% {
    --glow_c1: rgba(111, 243, 255, 0.5);
    --glow_c2: rgba(254, 255, 182, 0.6);
  }
  33% {
    --glow_c1: rgba(255, 140, 60, 0.6);
    --glow_c2: rgba(255, 80, 160, 0.55);
  }
  66% {
    --glow_c1: rgba(150, 100, 255, 0.55);
    --glow_c2: rgba(80, 230, 200, 0.6);
  }
  100% {
    --glow_c1: rgba(111, 243, 255, 0.5);
    --glow_c2: rgba(254, 255, 182, 0.6);
  }
}
/* =========================================================
   Generic Components
   複数ページで共通利用する汎用UIパーツ。
   - section_title : セクション見出し(JA + EN)
   - text_button   : 矢印 + テキスト + 下線の小型リンクボタン
   - outline_text  : セクション背景の大型「アウトラインのみ」テキスト
   ========================================================= */
/* ---------------------------------------------------------
   Section Title
   セクション見出し(日本語 + 英語サブ)
   配置(JA / EN)とサイズが共通。
   _right モディファイアで右寄せ + SP時は縦並び反転(JAが上)
   --------------------------------------------------------- */
.section_title {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.section_title_right {
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .section_title_right {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 1.2rem;
  }
}
.section_title_ja {
  display: inline-block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .section_title_ja {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.section_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  color: #cecece;
  white-space: nowrap;
  padding-bottom: 0.6rem;
  align-self: flex-end;
}

/* ---------------------------------------------------------
   Text Button (矢印 + テキスト + 下線)
   --------------------------------------------------------- */
.text_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 0 0.2rem;
  border-bottom: 0.075rem solid #000000;
}
.text_button_arrow {
  display: block;
  width: 0.6rem;
  height: 1rem;
}
.text_button_arrow img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.text_button_text {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.12rem;
  color: #000000;
}

/* ---------------------------------------------------------
   Outline Text
   セクション背景に配置される、アウトラインだけの大型テキスト。
   背景に薄く装飾として浮かぶ。aboutページのセクション末尾に
   絶対配置されることが多い。
   --------------------------------------------------------- */
.outline_text {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 900;
  font-size: 12.8rem;
  line-height: 1;
  letter-spacing: 1.28rem;
  color: transparent;
  -webkit-text-stroke: 0.05rem #cecece;
  text-stroke: 0.05rem #cecece;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 767px) {
  .outline_text {
    font-size: 4.8rem;
    letter-spacing: 0.48rem;
    -webkit-text-stroke: 0.025rem #cecece;
    text-stroke: 0.025rem #cecece;
  }
}

/* =========================================================
   Header (グローバルヘッダー)
   画面下部に固定(position: fixed)してスクロールしても常時追従。

   背景色の切り替え(ロジック):
   - デフォルト(初期表示・ヒーロー領域上): 透明(背景なし)
   - hero 外に出たとき(.has_bg): 半透明黒 + backdrop-filter ぼかし
   ※「has_bg」クラスはJSで付与/解除する。
     初期状態を「透明」にしてあるので、JS実行前(ローディング中)でも
     見た目どおりに表示される。
   ========================================================= */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8rem;
  padding: 2rem 4rem;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 100;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
@media (max-width: 767px) {
  .header {
    height: auto;
    padding: 1.6rem 2.4rem;
  }
}
.header.has_bg {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(0.8rem);
  -webkit-backdrop-filter: blur(0.8rem);
}
.post-type-archive-news .header, .single-news .header {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(0.8rem);
  -webkit-backdrop-filter: blur(0.8rem);
}
.header {
  /* ---------- ハンバーガー(純CSS3本線) ---------- */
}
.header_menu {
  display: block;
  position: relative;
  width: 3.2rem;
  height: 2.4rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
@media (max-width: 767px) {
  .header_menu {
    width: 2.8rem;
    height: 2rem;
  }
}
.header_menu::before, .header_menu::after, .header_menu_bar {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
.header_menu::before {
  top: 0;
}
.header_menu_bar {
  top: 50%;
  transform: translateY(-50%);
}
.header_menu::after {
  bottom: 0;
}
.header_contact {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  transition: opacity 0.3s ease;
}

/* =========================================================
   Footer (グローバルフッター)
   PC : 黒背景 + 大きい背景ロゴ + 小ロゴ + メニュー(横) + コピーライト
   SP : 大きい背景ロゴ非表示 + 小ロゴ + メニュー(縦) + コピーライト
   ========================================================= */
.footer {
  display: block;
  position: relative;
  width: 100%;
  padding: 20rem 20rem 10rem;
  background-color: #000000;
  overflow: hidden;
}
@media (max-width: 767px) {
  .footer {
    padding: 6rem 2.4rem 1.2rem;
  }
}
.footer {
  /* ---------- 背景の大ロゴ(PCのみ) ----------
     元画像は黒ロゴ。フッターは黒背景なので、
     filter: invert(1) で白に反転し、opacity で薄く表示して
     「うっすら浮かぶ白いシルエット」の演出を実現する。
     (Photoshop等で白の透過PNGを別途用意する代わりにCSSで対処) */
}
.footer_bg_logo {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  opacity: 0.08;
  filter: invert(1);
}
.footer_bg_logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom left;
     object-position: bottom left;
}
@media (max-width: 767px) {
  .footer_bg_logo {
    display: none;
  }
}
.footer_inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  position: relative;
  width: 100%;
  z-index: 1;
}
.footer {
  /* ---------- 小ロゴ ---------- */
}
.footer_logo {
  display: block;
  width: 19.987rem;
  height: 2.8rem;
}
.footer_logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}
.footer {
  /* ---------- メニュー ---------- */
}
.footer_nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.4rem 4rem;
  width: 100%;
}
@media (max-width: 767px) {
  .footer_nav {
    flex-direction: column;
    gap: 2rem;
  }
}
.footer_nav_link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.footer_nav_link_ja {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #ffffff;
}
.footer_nav_link_en {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  color: #cecece;
}
.footer {
  /* ---------- コピーライト ---------- */
}
.footer_copyright {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.footer_copyright_text, .footer_copyright_link {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: #888888;
  white-space: nowrap;
}

/* =========================================================
   Hamburger Menu Panel
   ハンバーガークリックで下からスライドアップして表示。
   body に `.is_menu_open` クラスが付いている間は表示状態。

   構成:
   - .menu_panel : 画面下から立ち上がるパネル(白背景)
   - .menu_panel_top    : ロゴ + メニュー一覧
   - .menu_panel_bottom : ヘッダー部分(閉じるボタン + CONTACT)

   PC : ロゴ「CORPORATE LOGO」テキスト + メニュー6項目を横並び
   SP : ロゴはCONVEX SVG + メニュー6項目を縦並び
   ========================================================= */
.menu_panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 10rem 0 0;
  background-color: #ffffff;
  border-right: 0.05rem solid #888888;
  z-index: 90;
  overflow-y: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 767px) {
  .menu_panel {
    padding: 0;
    gap: 0;
  }
}
.menu_panel {
  /* ---------- パネル上部: ロゴ + メニュー ---------- */
}
.menu_panel_top {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding: 0 10rem;
}
@media (max-width: 767px) {
  .menu_panel_top {
    gap: 3.2rem;
    padding: 4rem 2.4rem;
  }
}
.menu_panel_logo {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 200;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.2rem;
  color: #000000;
  white-space: nowrap;
  width: 20rem;
}
@media (max-width: 767px) {
  .menu_panel_logo {
    width: 20rem;
    height: 2.8rem;
  }
}
.menu_panel_logo img {
  -o-object-fit: contain;
     object-fit: contain;
}
.menu_panel_logo_svg {
  display: block;
  width: 20rem;
  height: 2.8rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.menu_panel_nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 767px) {
  .menu_panel_nav {
    flex-direction: column;
    gap: 3.2rem;
  }
}
.menu_panel_link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.menu_panel_link_ja {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #000000;
}
.menu_panel_link_en {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  color: #cecece;
}
.menu_panel {
  /* ---------- パネル下部: 閉じるボタン + CONTACT ---------- */
}
.menu_panel_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 8rem;
  padding: 0 4rem;
}
@media (max-width: 767px) {
  .menu_panel_bottom {
    height: auto;
    padding: 2.4rem;
  }
}
.menu_panel_close {
  display: block;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
@media (max-width: 767px) {
  .menu_panel_close {
    width: 2.1rem;
    height: 2.1rem;
  }
}
.menu_panel_close::before, .menu_panel_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background-color: #000000;
}
.menu_panel_close::before {
  transform: translateY(-50%) rotate(45deg);
}
.menu_panel_close::after {
  transform: translateY(-50%) rotate(-45deg);
}
.menu_panel_contact {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

/* =========================================================
   Open state
   body に .is_menu_open が付いている時はメニューパネルが表示される
   ========================================================= */
.is_menu_open {
  overflow: hidden;
}
.is_menu_open .menu_panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 110;
}
.is_menu_open .header {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Contact Thanks Modal (送信完了オーバーレイ) - Anima style.css に忠実に再現

   ★ 別ページではなくオーバーレイ(モーダル)として実装。
   ★ 表示制御は body に .is_thanks_open を付与 (またはモーダル自身に .is_open)
   ★ CF7 では JS 側で wpcf7mailsent イベントを受けて表示する想定

   Anima の構造を踏襲:
     .content (全画面灰背景 padding 200) → このページではオーバーレイ背景
       .form (白カード padding 100 0 / radius 10) → モーダル本体
         .textfield-label (column center gap 20)
           タイトル (24px Zen)
           本文 (14px Zen)
         TOPボタン (188×40)

   構成:
     .contact_thanks                  オーバーレイ全体 (fixed 全画面)
       .contact_thanks_card             白カード (中央配置)
         .contact_thanks_text             column center gap 20
           .contact_thanks_title              タイトル 24px
           .contact_thanks_message            本文 14px
         .contact_thanks_button             TOPへ ボタン (188×40)
   ========================================================= */
.contact_thanks {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 20rem;
  background-color: #cecece;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .contact_thanks {
    padding: 6rem 2.4rem;
    background-color: #ffffff;
  }
}
body.is_thanks_open .contact_thanks {
  display: flex;
}
.contact_thanks.is_open {
  display: flex;
}
.contact_thanks {
  /* =====================================================
     白カード (Anima .form)
     PC: padding 100 0 / 白背景 / radius 10 / column / center / gap 40
     SP: 白カードのスタイル消失 (背景なし/radius なし/padding なし)
         → ただのテキスト + ボタンの中央配置 (gap 40)
     ===================================================== */
}
.contact_thanks_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  max-width: 104rem;
  padding: 10rem 0;
  background-color: #ffffff;
  border-radius: 1rem;
  position: relative;
}
@media (max-width: 767px) {
  .contact_thanks_card {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    gap: 4rem;
    max-width: none;
    min-height: 60rem;
    justify-content: center;
  }
}
.contact_thanks {
  /* =====================================================
     テキストエリア (Anima .textfield-label)
     column / center / gap 20
     ===================================================== */
}
.contact_thanks_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 0 2.4rem;
  text-align: center;
}
@media (max-width: 767px) {
  .contact_thanks_text {
    gap: 1.6rem;
    padding: 0;
  }
}
.contact_thanks_title {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.4;
  color: #000000;
  text-align: center;
}
@media (max-width: 767px) {
  .contact_thanks_title {
    font-size: 2.4rem;
    line-height: normal;
  }
}
.contact_thanks_message {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
  text-align: center;
}
@media (max-width: 767px) {
  .contact_thanks_message {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.contact_thanks {
  /* =====================================================
     TOPへ ボタン (Anima .button)
     PC: width 188 / height 40 / 黒 / radius 3 / 12px Inter 700 white
     SP: display flex / align-self stretch / width 100% (全幅!)
     ===================================================== */
}
.contact_thanks_button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18.8rem;
  height: 4rem;
  padding: 0 4rem;
  background-color: #000000;
  border: none;
  border-radius: 0.3rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
}
.contact_thanks_button:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .contact_thanks_button {
    display: flex;
    width: 100%;
    align-self: stretch;
  }
}

body.is_thanks_open {
  overflow: hidden;
}

/* =========================================================
   Scroll Meter
   画面左端中央に固定された縦長のメモリ(目盛り)。
   ページスクロールに連動して上から目盛りが色付いていく。

   背景連動の色反転:
   - 通常(白セクション): 灰色トラック + 黒色フィル
   - ヒーロー(暗背景)領域: 半透明白トラック + 白色フィル
   ※「is_dark_bg」クラスをJSが付与/解除する。

   実装:
   - スクロール進捗のフィル表示は animation-timeline: scroll() を使用(JS不要)
   - 背景連動の色切り替えは IntersectionObserver による class 付与(JS必要)
   - SP(767px以下)では非表示
   ========================================================= */
.scroll_meter {
  display: block;
  position: fixed;
  top: 50%;
  left: 2.4rem;
  width: 2rem;
  height: 50vh;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 50;
}
@media (max-width: 767px) {
  .scroll_meter {
    display: none;
  }
}
.scroll_meter {
  /* ---------- SVG共通 ---------- */
}
.scroll_meter_svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: color 0.3s ease;
}
.scroll_meter {
  /* ---------- グレーのトラック(常時表示の背景目盛り) ---------- */
}
.scroll_meter_svg_track {
  color: #cecece;
}
.scroll_meter {
  /* ---------- 黒色のフィル(スクロール進捗を表す) ---------- */
}
.scroll_meter_svg_fill {
  color: #000000;
  clip-path: inset(0 0 100% 0);
  animation-name: scroll_meter_reveal;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: scroll(root block);
}
.scroll_meter {
  /* ---------- ヒーロー領域に重なっているときは白系に反転 ---------- */
}
.scroll_meter.is_dark_bg .scroll_meter_svg_track {
  color: rgba(255, 255, 255, 0.4);
}
.scroll_meter.is_dark_bg .scroll_meter_svg_fill {
  color: #ffffff;
}

@keyframes scroll_meter_reveal {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
/* =========================================================
   Fade In (Scroll-triggered)
   要素がビューポートに入った時、下からふわっとフェードイン。

   実装方針:
   - 最小限のインラインJS (IntersectionObserver) と CSS transition を併用。
   - JS非対応 / 無効環境では <noscript> でフォールバック(全要素を表示)。
   - 過去に CSS Scroll-driven Animations (view()) で実装していたが、
     Chrome 環境によって `view()` が認識されず、動かないことがあったため
     より信頼性の高いこの方式に変更。

   使い方:
     <p class="fade_in">テキスト</p>
     <p class="fade_in" style="--delay: 1">テキスト</p>  ← 順番にずらしたい場合
     <p class="fade_in" style="--delay: 2">テキスト</p>

   JS側で要素がビューポートに入ったときに `.is_visible` クラスを付与する。
   ========================================================= */
.fade_in {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: calc(var(--delay, 0) * 200ms);
  will-change: opacity, transform;
}
.fade_in.is_visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Fade In (Character by character)
   1文字ずつ下からふわっとフェードイン。

   使い方:
     <p class="fade_in_chars">
       <span class="fade_in_char" style="--char-delay: 0">あ</span>
       <span class="fade_in_char" style="--char-delay: 1">い</span>
       <span class="fade_in_char" style="--char-delay: 2">う</span>
     </p>

   複数のブロックを連続して animate したい場合は parent に
   `style="--base-delay: 9"` のように指定すれば、その分だけ全文字に
   開始オフセットが追加される。

   親要素 (.fade_in_chars) に `.is_visible` が付与されると
   内部の .fade_in_char が char-delay 順にふわっと表示される。
   ========================================================= */
.fade_in_chars .fade_in_char {
  display: inline-block;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: calc((var(--base-delay, 0) + var(--char-delay, 0)) * 80ms);
  will-change: opacity, transform;
}
.fade_in_chars.is_visible .fade_in_char {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade_in {
    transition: none;
  }
  .fade_in_chars .fade_in_char {
    transition: none;
  }
}
/* =========================================================
   Loading Overlay (index.html 統合版)

   タイムライン:
     0s         : 白背景 / Cのみ表示 / メジャー最大伸長 / 0%
     0–3s       : メジャー巻取り + 0→100% カウントアップ
     3.0–3.5s   : o, n, v, e, x, INC. が順番にスライドイン
     3.6s       : ロゴ完成
     3.8s〜4.6s : 白背景がフェードアウト + ロゴが FV ロゴ位置へ移動
     4.6s以降   : 表示状態の最終形(ロゴが FV 位置にぴったり重なる)
                  → FV 側の <svg.top_hero_logo> と完全一致するためシームレス

   ※ FV のロゴ位置 (PC 1440x1024 を想定):
       hero 全体: width:100%, height:1024px, padding:100px 200px
       hero 内部の logo_wrap: flex 右寄せ・縦中央
       → ロゴ中心 X = 100vw - 200px(右パディング) - elem_w/2
       → ロゴ中心 Y = 512px (hero高 1024px の中央)
   ========================================================= */
.page_loading {
  overflow: hidden;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.loading.is_done {
  display: none;
}

/* ---------- 白背景(フェードアウト) ---------- */
.loading_bg {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  animation: loading_bg_fade 2s ease-out 5.5s forwards;
}

/* ---------- ロゴ+パーセントのコンテナ(中央で表示 → フェードアウト) ---------- */
.loading_content {
  width: 43.175rem;
  animation: loading_content_fade 2s ease-out 5.5s forwards;
}
@media (max-width: 767px) {
  .loading_content {
    width: 28rem;
  }
}

/* ---------- ロゴSVG ---------- */
.loading_visual {
  display: block;
  width: 100%;
  height: auto;
}
.loading_visual path {
  fill: #000000;
}
.loading_visual line {
  stroke: #000000;
}

/* ---------- 各文字グループ ---------- */
.loading_letter {
  opacity: 0;
  transform: translate(-0.8rem, 0);
  animation-name: loading_letter_in;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.loading_letter_c {
  opacity: 1;
  transform: none;
  animation-name: none;
}
.loading_letter_o {
  animation-delay: 3s;
}
.loading_letter_n {
  animation-delay: 3.1s;
}
.loading_letter_v {
  animation-delay: 3.2s;
}
.loading_letter_e {
  animation-delay: 3.3s;
}
.loading_letter_x {
  animation-delay: 3.4s;
}
.loading_letter_inc {
  animation-delay: 3.5s;
}

/* ---------- メジャー(rect の width をアニメーション) ---------- */
.loading_tape {
  animation-name: loading_tape_retract;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

/* ---------- パーセンテージ ---------- */
.loading_percent {
  display: block;
  width: 100%;
  margin-top: 1rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
  animation-name: loading_percent_out;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@media (max-width: 767px) {
  .loading_percent {
    margin-top: 0.8rem;
    font-size: 1rem;
  }
}

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes loading_tape_retract {
  from {
    width: 37rem;
  }
  to {
    width: 0rem;
  }
}
@keyframes loading_letter_in {
  from {
    opacity: 0;
    transform: translate(-0.8rem, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes loading_percent_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* 白背景フェードアウト */
@keyframes loading_bg_fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ロゴ+パーセント全体をフェードアウト */
@keyframes loading_content_fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* 各ページ */
/* =========================================================
   Top Page
   PC: 1440px / SP: 375px(breakpoint 767px)

   フォントスタイル参照(styleguideのSP用変数):
     sp-large       : Inter 400 / 24px / lh 36px  (英語見出し)
     sp-medium-jp   : Zen 400 / 20px              (日本語中見出し)
     sp-regular-jp  : Zen 400 / 14px / lh 24px    (日本語本文)
     sp-regular     : Zen 400 / 12px / lh 20px    (英語本文)
     sp-regular-bold-jp : Zen 700 / 14px          (日本語強調本文)
   ========================================================= */
.pc-layout {
  display: block;
}
@media (max-width: 767px) {
  .pc-layout {
    display: none;
  }
}

.sp-layout {
  display: none;
}
@media (max-width: 767px) {
  .sp-layout {
    display: block;
  }
}

.page_top .top_hero_logo {
  opacity: 1;
}

.top {
  overflow: visible;
  display: block;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Hero
     ===================================================== */
}
.top_hero {
  display: block;
  position: relative;
  width: 100%;
  height: 102.4rem;
  background-color: #f2f2f2;
  overflow: hidden;
  max-height: 100vh;
}
@media (max-width: 767px) {
  .top_hero {
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }
}
.top_hero_image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.top_hero_overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.top_hero_logo_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10rem 20rem;
  z-index: 2;
  max-height: 100vh;
}
@media (max-width: 767px) {
  .top_hero_logo_wrap {
    padding: 0 2.4rem;
  }
}
.top_hero_logo {
  display: block;
  width: 43.175rem;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}
@media (max-width: 767px) {
  .top_hero_logo {
    width: 28rem;
  }
}
.top {
  /* =====================================================
     Section: Intro (This is CONVEX)
     ===================================================== */
}
.top_intro {
  display: block;
  position: relative;
  width: 100%;
  padding: 20rem;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .top_intro {
    padding: 6rem 2.4rem;
    overflow: hidden;
  }
}
.top_intro_glow {
  display: block;
  position: absolute;
  top: 27.4rem;
  right: 8rem;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  background: linear-gradient(112deg, var(--glow_c1) 0%, var(--glow_c2) 100%);
  filter: blur(10rem);
  pointer-events: none;
  z-index: 0;
  animation: glow_float 12s ease-in-out 0s infinite, glow_color_intro 30s ease-in-out 0s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .top_intro_glow {
    animation: none;
  }
}
@media (max-width: 767px) {
  .top_intro_glow {
    top: 27.2rem;
    right: auto;
    left: 11.8rem;
    width: 30rem;
    height: 30rem;
  }
}
.top_intro_inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6rem;
  position: relative;
  width: 100%;
  max-width: 104rem;
  margin: 0 auto;
  z-index: 1;
}
@media (max-width: 767px) {
  .top_intro_inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6rem;
    max-width: 100%;
  }
}
.top_intro_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  width: 60rem;
}
@media (max-width: 767px) {
  .top_intro_text {
    width: 100%;
  }
}
.top_intro_heading {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .top_intro_heading {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
.top_intro_body_ja {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .top_intro_body_ja {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.top_intro_body_en {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .top_intro_body_en {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
.top_intro_vert {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 4rem;
}
@media (max-width: 767px) {
  .top_intro_vert {
    gap: 2.4rem;
  }
}
.top_intro_vert_text {
  display: block;
  width: 6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 6.4rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.top_intro_vert_text .fade_in_char {
  display: block;
}
@media (max-width: 767px) {
  .top_intro_vert_text {
    width: 3.5rem;
    font-size: 3.6rem;
  }
}
.top {
  /* =====================================================
     Section: Design Philosophy
     ===================================================== */
}
.top_philosophy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  position: relative;
  width: 100%;
  padding: 20rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .top_philosophy {
    padding: 6rem 2.4rem;
    gap: 6rem;
    overflow: hidden;
  }
}
.top_philosophy_glow {
  display: block;
  position: absolute;
  top: 131.8rem;
  left: 36rem;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: linear-gradient(112deg, var(--glow_c1) 0%, var(--glow_c2) 100%);
  filter: blur(10rem);
  pointer-events: none;
  z-index: 0;
  animation: glow_float 14s ease-in-out -3s infinite, glow_color_philosophy 35s ease-in-out -3s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .top_philosophy_glow {
    animation: none;
  }
}
@media (max-width: 767px) {
  .top_philosophy_glow {
    top: 63.1rem;
    left: -5.9rem;
    width: 30rem;
    height: 30rem;
  }
}
.top_philosophy_image {
  display: block;
  position: relative;
  width: calc(100% + 20rem);
  margin-right: -20rem;
  height: 80rem;
  z-index: 1;
}
@media (max-width: 767px) {
  .top_philosophy_image {
    width: calc(100% + 2.4rem);
    margin-right: -2.4rem;
    height: 30.645rem;
  }
}
.top_philosophy_content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rem;
  position: relative;
  width: 100%;
  z-index: 1;
}
.top_philosophy_text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2rem;
  width: 60rem;
}
@media (max-width: 767px) {
  .top_philosophy_text {
    width: 100%;
  }
}
.top_philosophy_lead {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: right;
  color: #000000;
}
@media (max-width: 767px) {
  .top_philosophy_lead {
    font-size: 2rem;
    line-height: 1.5;
  }
}
.top_philosophy_body_ja {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0;
  text-align: right;
  color: #000000;
}
@media (max-width: 767px) {
  .top_philosophy_body_ja {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.top_philosophy_body_en {
  display: block;
  width: 60rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0;
  text-align: right;
  color: #000000;
}
@media (max-width: 767px) {
  .top_philosophy_body_en {
    width: 100%;
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
.top {
  /* =====================================================
     (Section Title / Text Button / Outline Text は共通コンポーネント化済み)
     common/_components.scss に定義。クラス名は .section_title / .text_button
     ===================================================== */
  /* =====================================================
     Section: Projects (各物件 x 4件)

     ・領域に入ると固定(scroll-pin)、下から1枚ずつ重なるスタッキング演出。
     ・JS不要 : position:sticky のみで実現。
     ・各物件を `height: 100vh; position: sticky; top: 0;` にし、4枚で
       合計 400vh のスクロール領域を確保。DOM順により後ろの物件が
       前の物件を覆っていく(自然な絵画順)ため、別途z-index は補助的に指定。
     ・PC/SP 共通で同じ動作。
     ===================================================== */
}
.top_projects {
  display: block;
  position: relative;
  width: 100%;
}
.top_project {
  display: block;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.top_project:nth-child(1) {
  z-index: 1;
}
.top_project:nth-child(2) {
  z-index: 2;
}
.top_project:nth-child(3) {
  z-index: 3;
}
.top_project:nth-child(4) {
  z-index: 4;
}
.top_project_image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.top_project_overlay {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 25%);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 767px) {
  .top_project_overlay {
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 14%, rgba(0, 0, 0, 0) 40%);
  }
}
.top_project_content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: absolute;
  inset: auto 4rem 10rem 4rem;
  z-index: 2;
}
@media (max-width: 767px) {
  .top_project_content {
    inset: auto 2.4rem 2.4rem 2.4rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
}
.top_project_title {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.16rem;
  color: #ffffff;
  text-shadow: 0px 0px 1.5rem rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.top_project_meta {
  display: inline-flex;
  align-items: flex-start;
  gap: 2rem;
}
.top_project_meta_labels, .top_project_meta_values {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0px 0px 1.5rem rgba(0, 0, 0, 0.5);
}
.top {
  /* =====================================================
     Section: News
     PC : 左にタイトル / 右にテーブル
     SP : タイトルが上 / テーブルが下 の縦並び
     ===================================================== */
}
.top_news {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6rem;
  position: relative;
  width: 100%;
  padding: 20rem;
}
@media (max-width: 767px) {
  .top_news {
    flex-direction: column;
    padding: 6rem 2.4rem;
    gap: 2.4rem;
  }
}
@media (max-width: 767px) {
  .top_news .section_title {
    width: 100%;
    gap: 1.2rem;
  }
  .top_news .section_title_ja {
    font-size: 3.2rem;
    letter-spacing: 0;
  }
}
.top_news_table {
  display: block;
  width: 60rem;
}
@media (max-width: 767px) {
  .top_news_table {
    width: 100%;
  }
}
.top_news_row {
  display: block;
  width: 100%;
  padding: 2rem 0;
  border-bottom: 0.05rem solid #cecece;
}
.top_news_row:first-child {
  border-top: 0.05rem solid #cecece;
}
@media (max-width: 767px) {
  .top_news_row {
    padding: 1.6rem 0;
  }
  .top_news_row:first-child {
    padding-top: 0;
  }
}
.top_news_label {
  display: block;
  margin-bottom: 1.2rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #000000;
}
@media (max-width: 767px) {
  .top_news_label {
    font-weight: 700;
  }
}
.top_news_text {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
}
@media (max-width: 767px) {
  .top_news_text {
    font-weight: 400;
    line-height: 2.4rem;
  }
}
.top {
  /* =====================================================
     Section: Recruit
     PC : 左に文章 + ボタン / 下にフルワイド画像
     SP : 上に文章 + ボタン / 下に右はみ出し画像
     ===================================================== */
}
.top_recruit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  position: relative;
  width: 100%;
  padding: 20rem 0 20rem 20rem;
}
@media (max-width: 767px) {
  .top_recruit {
    padding: 6rem 2.4rem;
    gap: 6rem;
    overflow-x: clip;
    overflow-y: visible;
  }
}
.top_recruit_glow {
  display: block;
  position: absolute;
  top: -6rem;
  left: 80.4rem;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: linear-gradient(112deg, var(--glow_c1) 0%, var(--glow_c2) 100%);
  filter: blur(10rem);
  pointer-events: none;
  z-index: 0;
  animation: glow_float 10s ease-in-out -5s infinite, glow_color_recruit 25s ease-in-out -5s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .top_recruit_glow {
    animation: none;
  }
}
@media (max-width: 767px) {
  .top_recruit_glow {
    top: -6.3rem;
    left: 20.1rem;
    width: 30rem;
    height: 30rem;
  }
}
.top_recruit_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  position: relative;
  width: 40rem;
  z-index: 1;
}
@media (max-width: 767px) {
  .top_recruit_content {
    width: 100%;
  }
}
.top_recruit_heading {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .top_recruit_heading {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
.top_recruit_body {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .top_recruit_body {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.top_recruit_image {
  display: block;
  position: relative;
  width: 100%;
  height: 40rem;
  z-index: 1;
}
@media (max-width: 767px) {
  .top_recruit_image {
    width: calc(100% + 2.4rem);
    margin-right: -2.4rem;
    height: 20rem;
  }
}

/* =========================================================
   ※ .text_button は common/_components.scss に共通化済み
   ========================================================= */
/* =========================================================
   About Page
   PC: 1440px / SP: 375px(breakpoint 767px)

   SPフォントサイズ参照:
     sp-large       : Inter 400 / 24px / lh 36px  (英語見出し)
     sp-regular-jp  : Zen 400 / 14px / lh 24px    (日本語本文)
     sp-regular     : Zen 400 / 12px / lh 20px    (英語本文)

   構成:
     .about
       .about_hero               全幅ヒーロー (背景画像 + ABOUT US 大見出し)
       .about_brand              「静かで整った...」セクション
       .about_philosophy         「企業理念」セクション
       .about_projects           「実績」セクション
   ========================================================= */
.about {
  display: block;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Hero
     PC : 444px / padding 200px / title 横並び
     SP : 200px / padding 0 24px / title 縦並び
     ===================================================== */
}
.about_hero {
  display: block;
  position: relative;
  width: 100%;
  height: 44.4rem;
  overflow: hidden;
  background-color: #cecece;
}
@media (max-width: 767px) {
  .about_hero {
    height: 20rem;
  }
}
.about_hero_image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.about_hero_overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.about_hero_inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20rem;
  z-index: 2;
}
@media (max-width: 767px) {
  .about_hero_inner {
    justify-content: center;
    padding: 0 2.4rem;
  }
}
.about_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 767px) {
  .about_hero_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.about_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #ffffff;
}
@media (max-width: 767px) {
  .about_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.about_hero_title_ja {
  display: inline-block;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .about_hero_title_ja {
    padding-bottom: 0;
    font-size: 1rem;
    align-self: flex-start;
  }
}
.about {
  /* =====================================================
     Section: Brand (静かで整ったブランドの佇まい)
     PC : padding 200px / gap 100px
     SP : padding 60px 24px / gap 40px
     ===================================================== */
}
.about_brand {
  display: block;
  position: relative;
  width: 100%;
  padding: 20rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .about_brand {
    padding: 6rem 2.4rem;
  }
}
.about_brand_inner {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .about_brand_inner {
    gap: 4rem;
  }
}
.about_brand_heading_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.about_brand_heading {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 6.4rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .about_brand_heading {
    font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 3.6rem;
    letter-spacing: 0;
  }
}
.about_brand_sub {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .about_brand_sub {
    font-size: 1.4rem;
  }
}
.about_brand_body_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
}
@media (max-width: 767px) {
  .about_brand_body_wrap {
    flex-direction: column;
    gap: 4rem;
  }
}
.about_brand_body_ja {
  display: block;
  width: 50rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .about_brand_body_ja {
    width: 100%;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.about_brand_body_en {
  display: block;
  width: 40rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .about_brand_body_en {
    width: 100%;
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
.about_brand_outline {
  position: absolute;
  right: -3.6rem;
  bottom: 0;
  z-index: 0;
}
@media (max-width: 767px) {
  .about_brand_outline {
    right: -1.4rem;
    bottom: -0.6rem;
  }
}
.about {
  /* =====================================================
     Section: Philosophy (企業理念)
     PC : padding 200px / 左右2カラム
     SP : padding 60px 24px / 縦並び
     ===================================================== */
}
.about_philosophy {
  display: block;
  position: relative;
  width: 100%;
  padding: 20rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .about_philosophy {
    padding: 6rem 2.4rem;
  }
}
.about_philosophy_inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  gap: 4rem;
}
@media (max-width: 767px) {
  .about_philosophy_inner {
    flex-direction: column;
    gap: 4rem;
  }
}
@media (max-width: 767px) {
  .about_philosophy .section_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .about_philosophy .section_title_en {
    padding-bottom: 0;
    align-self: flex-start;
  }
  .about_philosophy .section_title_ja {
    letter-spacing: 0.24rem;
  }
}
.about_philosophy_body_wrap {
  display: flex;
  flex-direction: column;
  width: 60rem;
  gap: 4rem;
}
@media (max-width: 767px) {
  .about_philosophy_body_wrap {
    width: 100%;
    gap: 4rem;
  }
}
.about_philosophy_body_ja {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .about_philosophy_body_ja {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.about_philosophy_body_en {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .about_philosophy_body_en {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
.about_philosophy_outline {
  position: absolute;
  left: -1.2rem;
  bottom: 0;
  z-index: 0;
}
@media (max-width: 767px) {
  .about_philosophy_outline {
    left: -1rem;
    bottom: -1.1rem;
  }
}
.about {
  /* =====================================================
     Section: Projects (実績)
     PC : padding 200px / 画像 800x533 横並び
     SP : padding 60px 24px / 画像 500x333 横並び (右にはみ出す)
     ===================================================== */
}
.about_projects {
  display: block;
  position: relative;
  width: 100%;
  padding: 20rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .about_projects {
    padding: 6rem 2.4rem;
  }
}
.about_projects_inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .about_projects_inner {
    gap: 4rem;
  }
}
.about_projects_intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 4rem;
}
@media (max-width: 767px) {
  .about_projects .section_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    width: 100%;
  }
  .about_projects .section_title_en {
    padding-bottom: 0;
    align-self: flex-start;
  }
  .about_projects .section_title_ja {
    letter-spacing: 0.24rem;
  }
}
.about_projects_lead {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .about_projects_lead {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.about_projects_list {
  position: relative;
  align-self: stretch;
  width: auto;
  margin-right: -20rem;
  height: 50rem;
}
@media (max-width: 767px) {
  .about_projects_list {
    margin-right: -2.4rem;
    height: 30rem;
  }
}
.about_projects_list .slick-list {
  overflow: visible;
  height: 100%;
}
.about_projects_list .slick-list .slick-track {
  height: 100%;
}
.about_projects_list .slick-slide {
  margin-right: 2rem;
  height: 100%;
}
@media (max-width: 767px) {
  .about_projects_list .slick-slide {
    margin-right: 1.6rem;
  }
}
.about_projects_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.about_projects_arrow:hover {
  background-color: #ffffff;
}
.about_projects_arrow.slick-disabled {
  opacity: 0.3;
  cursor: default;
}
@media (max-width: 767px) {
  .about_projects_arrow {
    width: 3.6rem;
    height: 3.6rem;
  }
}
.about_projects_arrow::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-top: 0.15rem solid #000000;
  border-right: 0.15rem solid #000000;
}
@media (max-width: 767px) {
  .about_projects_arrow::before {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.about_projects_arrow_prev {
  left: 1.6rem;
}
.about_projects_arrow_prev::before {
  transform: rotate(-135deg);
  margin-left: 0.3rem;
}
.about_projects_arrow_next {
  right: 21.6rem;
}
.about_projects_arrow_next::before {
  transform: rotate(45deg);
  margin-right: 0.3rem;
}
@media (max-width: 767px) {
  .about_projects_arrow_next {
    right: 4rem;
  }
}
.about_projects_outline {
  position: absolute;
  right: -3rem;
  bottom: 0;
  z-index: 0;
}
@media (max-width: 767px) {
  .about_projects_outline {
    right: -1.3rem;
    bottom: 0.1rem;
  }
}
.about_project {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 80rem;
  height: 54rem;
  padding: 2rem;
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .about_project {
    width: 50rem;
    height: 33.3rem;
  }
}
.about_project_image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.about_project_content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  width: 100%;
}
@media (max-width: 767px) {
  .about_project_content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
}
.about_project_title {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.16rem;
  color: #ffffff;
  text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.about_project_meta {
  display: inline-flex;
  align-items: flex-start;
  gap: 2rem;
}
.about_project_meta_label, .about_project_meta_value {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);
  white-space: pre-line;
}

/* =========================================================
   Projects Page (実績一覧)
   PC: 1440px (SPは後日デザインを受領後に実装)

   構成:
     .projects
       .projects_hero            黒背景ヒーロー (PROJECTS 大見出し + カテゴリ縦ナビ)
       .projects_card * n        各物件カード
         ├ .projects_card_slider   画像スライダー (slick.js)
         ├ .projects_card_meta     枚数 ("1/2") + 左右矢印
         └ .projects_card_info     物件タイトル + カテゴリ/所在地/竣工年
       .footer                   既存共通フッター
   ========================================================= */
.projects {
  display: block;
  position: relative;
  width: 100%;
  background-color: #000000;
  /* =====================================================
     Section: Hero
     PC : padding 200px / gap 100px
     SP : padding 100px 24px / gap 60px
          タイトルは PC と同じ横並びを維持(デザイン通り)
     ===================================================== */
}
.projects_hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  position: relative;
  width: 100%;
  padding: 20rem;
  background-color: #000000;
}
@media (max-width: 767px) {
  .projects_hero {
    padding: 10rem 2.4rem;
    gap: 6rem;
  }
}
.projects_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.projects_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #ffffff;
}
@media (max-width: 767px) {
  .projects_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.projects_hero_title_ja {
  display: inline-block;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #888888;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .projects_hero_title_ja {
    padding-bottom: 0.4rem;
    font-size: 1rem;
  }
}
.projects {
  /* =====================================================
     Category Side Nav (縦並び)
     ・先頭の ALL のみアクティブ表示(矢印 + 白色)
     ・それ以外はグレーで物件名のみ
     ===================================================== */
}
.projects_category {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.2rem;
}
.projects_category_link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0 0.4rem 0.4rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.12rem;
  color: #888888;
  transition: color 0.2s ease;
}
.projects_category_link:hover {
  color: #ffffff;
}
.projects_category_link_active {
  color: #ffffff;
}
.projects_category_arrow {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.1rem solid currentColor;
  border-right: 0.1rem solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.projects {
  /* =====================================================
     Project Card (物件1件分)
     PC : 画像2枚並び (各 50%幅, aspect-ratio 1.33)
          ↓
          カウンタ + 矢印 (padding 20px 200px 0)
          ↓
          タイトル + メタ (padding 40px 200px)
     ===================================================== */
}
.projects_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: #000000;
}
.projects_card_slider {
  position: relative;
  width: 100%;
}
.projects_card_slider .projects_card_image {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1.33;
  background-color: #888888;
  overflow: hidden;
}
.projects_card_meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2rem 20rem 0;
}
@media (max-width: 767px) {
  .projects_card_meta {
    padding: 2rem 2.4rem 0;
  }
}
.projects_card_counter {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.12rem;
  color: #f2f2f2;
  text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);
}
.projects_card_arrows {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.projects_card_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ffffff;
  transition: opacity 0.2s ease;
}
.projects_card_arrow.slick-disabled {
  opacity: 0.3;
  cursor: default;
}
.projects_card_arrow::before {
  content: "";
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 0.1rem solid currentColor;
  border-right: 0.1rem solid currentColor;
}
.projects_card_arrow_prev::before {
  transform: rotate(-135deg);
  margin-left: 0.3rem;
}
.projects_card_arrow_next::before {
  transform: rotate(45deg);
  margin-right: 0.3rem;
}
.projects_card_info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 4rem 20rem;
}
@media (max-width: 767px) {
  .projects_card_info {
    flex-direction: column;
    gap: 2rem;
    padding: 3.2rem 2.4rem 6rem;
  }
}
.projects_card_title {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.16rem;
  color: #ffffff;
  text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .projects_card_title {
    white-space: normal;
  }
}
.projects_card_metainfo {
  display: inline-flex;
  align-items: flex-start;
  gap: 2rem;
}
.projects_card_metainfo_label, .projects_card_metainfo_value {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #ffffff;
  white-space: pre-line;
}

/* =========================================================
   Company Page (会社概要)
   PC: 1440px (SPは後日デザイン受領後に追加対応)

   構成:
     .company
       .company_hero             ヒーロー (背景画像 + COMPANY PROFILE)
       .company_ceo              代表の経歴 (左に写真 + 右にテーブル + outline)
       .company_info             基本情報 + アクセス (左ラベル / 右テーブル)
   ========================================================= */
.company {
  display: block;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  overflow-x: clip;
  /* =====================================================
     Section: Hero
     PC : 444px / padding 200px
     ===================================================== */
}
.company_hero {
  display: block;
  position: relative;
  width: 100%;
  height: 44.4rem;
  overflow: hidden;
  background-color: #cecece;
}
@media (max-width: 767px) {
  .company_hero {
    height: 20rem;
  }
}
.company_hero_image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.company_hero_overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.company_hero_inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20rem;
  z-index: 2;
}
@media (max-width: 767px) {
  .company_hero_inner {
    justify-content: center;
    padding: 0 2.4rem;
  }
}
.company_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 767px) {
  .company_hero_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.company_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #ffffff;
}
@media (max-width: 767px) {
  .company_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.company_hero_title_ja {
  display: inline-block;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .company_hero_title_ja {
    padding-bottom: 0;
    font-size: 1rem;
    align-self: flex-start;
  }
}
.company {
  /* =====================================================
     Section: CEO Profile (代表の経歴)
     PC : 左に写真 (640x853) + 右にコンテンツ
          右側は padding 200px 200px 0 0 で右端を確保
     SP : 全幅縦並び / padding 60px 24px / gap 40px
     ===================================================== */
}
.company_ceo {
  display: flex;
  align-items: center;
  gap: 10rem;
  position: relative;
  width: 100%;
  padding: 20rem 20rem 0 0;
}
@media (max-width: 767px) {
  .company_ceo {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    padding: 6rem 2.4rem;
  }
}
.company_ceo_image {
  display: block;
  position: relative;
  width: 64rem;
  height: 85.333rem;
  flex-shrink: 0;
  background-color: #cecece;
  overflow: hidden;
}
@media (max-width: 767px) {
  .company_ceo_image {
    width: 100%;
    height: auto;
    aspect-ratio: 0.75;
  }
}
.company_ceo_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  flex: 1;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .company_ceo_content {
    width: 100%;
    gap: 4rem;
    padding: 0;
  }
}
.company_ceo_heading {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 767px) {
  .company_ceo_heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}
.company_ceo_heading_en {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  color: #000000;
}
@media (max-width: 767px) {
  .company_ceo_heading_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.company_ceo_heading_ja {
  padding-bottom: 0.6rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #cecece;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .company_ceo_heading_ja {
    padding-bottom: 0;
    align-self: flex-start;
  }
}
.company_ceo_history {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.company_ceo_history_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}
.company_ceo_history_year {
  display: inline-flex;
  align-items: flex-start;
  padding: 0.5rem 2rem 0.4rem;
  border: 0.1rem solid #cecece;
}
.company_ceo_history_year_num {
  display: flex;
  align-items: center;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  color: #000000;
  white-space: nowrap;
}
.company_ceo_history_year_unit {
  display: flex;
  align-items: center;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #000000;
  align-self: flex-end;
  padding-bottom: 0.1rem;
  padding-left: 0.2rem;
}
.company_ceo_history_text {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .company_ceo_history_text {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.company_ceo_name {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
  white-space: pre-line;
}
@media (max-width: 767px) {
  .company_ceo_name {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.company_ceo_outline {
  position: absolute;
  right: -3.8rem;
  bottom: -7.6rem;
  z-index: 0;
}
@media (max-width: 767px) {
  .company_ceo_outline {
    top: 50%;
    right: -28%;
    bottom: auto;
    transform: rotate(90deg);
    transform-origin: center center;
  }
}
.company {
  /* =====================================================
     Section: Information (基本情報 + アクセス)
     PC : 各ブロックが左ラベル + 右テーブル の横並び (space-between)
          親 padding 200px / gap 100px
     ===================================================== */
}
.company_info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rem;
  position: relative;
  width: 100%;
  padding: 20rem;
}
@media (max-width: 767px) {
  .company_info {
    gap: 6rem;
    padding: 6rem 2.4rem;
  }
}
.company_info_block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 4rem;
}
@media (max-width: 767px) {
  .company_info_block {
    flex-direction: column;
    gap: 4rem;
  }
}
.company_info_label {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  padding: 0.4rem 0 0.4rem 0.4rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.12rem;
  color: #000000;
}
.company_info_label::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.1rem solid currentColor;
  border-right: 0.1rem solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.company_table {
  display: flex;
  flex-direction: column;
  width: 60rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .company_table {
    width: 100%;
  }
}
.company_table_row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 3.2rem 0;
  border-bottom: 0.1rem solid #f2f2f2;
}
.company_table_row:first-child {
  padding-top: 0;
}
@media (max-width: 767px) {
  .company_table_row {
    flex-direction: column;
    gap: 0.8rem;
    padding: 2rem 0;
  }
}
.company_table_label {
  display: block;
  width: 12rem;
  flex-shrink: 0;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
}
@media (max-width: 767px) {
  .company_table_label {
    width: auto;
  }
}
.company_table_value {
  display: block;
  flex: 1;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
  white-space: pre-line;
}
.company_access_wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 60rem;
}
@media (max-width: 767px) {
  .company_access_wrap {
    width: 100%;
    gap: 2rem;
  }
}
.company_map {
  display: block;
  width: 100%;
  height: 45rem;
  border: 0;
  background-color: #cecece;
  overflow: hidden;
}
@media (max-width: 767px) {
  .company_map {
    height: auto;
    aspect-ratio: 1.33;
  }
}

/* =========================================================
   Recruit Page (採用情報) - Anima style.css に忠実に再現

   構成 (Anima 命名 → このプロジェクト命名):
     .recruit_hero            ヒーロー (背景画像 + RECRUIT)
     .recruit_intro           採用メッセージ (縦書き + 本文 + RECRUIT outline)
       .recruit_intro_content   width: 1040 中央配置 .content
         .recruit_intro_vert      .vert-text (1文字縦並びの2列)
         .recruit_intro_body      .convex 右側本文
     .recruit_stair           階段画像 (height: 1024 全幅)
     .recruit_message         CEO写真 + 右側コンテンツ + MESSAGE outline
     .recruit_workstyle       黒背景 環境を知る (左寄せ padding 200 0 200 200)
     .recruit_jobs            仕事&キャリア (1040幅 中央)
     .recruit_process         黒背景 採用までの流れ
     .recruit_form_section    APPLICATION FORM (padding 0 300px)
   ========================================================= */
.recruit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  overflow-x: clip;
  /* =====================================================
     Section: Hero
     Anima: height: 444 / padding: 200 / gap: 100
     ===================================================== */
}
.recruit_hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  width: 100%;
  height: 44.4rem;
  padding: 20rem;
  position: relative;
  background-color: #cecece;
  overflow: hidden;
}
@media (max-width: 767px) {
  .recruit_hero {
    height: 20rem;
    padding: 10rem 2.4rem;
  }
}
.recruit_hero_image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.recruit_hero_overlay {
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.recruit_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .recruit_hero_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.recruit_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #ffffff;
}
@media (max-width: 767px) {
  .recruit_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.recruit_hero_title_ja {
  display: inline-flex;
  align-items: flex-end;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .recruit_hero_title_ja {
    padding-bottom: 0;
    font-size: 1rem;
    align-self: flex-start;
  }
}
.recruit {
  /* =====================================================
     Section: Intro (Anima .div-2)
     PC: padding: 200, gap: 100, align-items: flex-start
         内側 .content (width 1040) を中央に配置
     SP: padding 60 24 / gap 100 / content は column(縦書き上 + 本文下) gap 32
     RECRUIT outline (text-wrapper-4) は section に対して absolute
     ===================================================== */
}
.recruit_intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  width: 100%;
  padding: 20rem;
  position: relative;
}
@media (max-width: 767px) {
  .recruit_intro {
    padding: 6rem 2.4rem;
    gap: 10rem;
  }
}
.recruit_intro_content {
  display: flex;
  width: 104rem;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .recruit_intro_content {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
  }
}
.recruit_intro_vert {
  display: inline-flex;
  align-items: flex-start;
  gap: 4rem;
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .recruit_intro_vert {
    gap: 2.4rem;
  }
}
.recruit_intro_vert_col {
  display: flex;
  flex-direction: column;
  width: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.recruit_intro_vert_col_offset {
  padding-top: 6rem;
}
.recruit_intro_vert_ch {
  display: block;
  width: 3.2rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 4.8rem;
  text-align: center;
  letter-spacing: 0;
  color: #000000;
}
@media (max-width: 767px) {
  .recruit_intro_vert_ch {
    width: 2.4rem;
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
.recruit_intro_body {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0;
  color: #000000;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .recruit_intro_body {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.recruit_intro_outline {
  position: absolute;
  left: -1.5rem;
  bottom: 3.6rem;
  z-index: 0;
}
.recruit {
  /* =====================================================
     Section: Stair (.image)
     PC : height: 1024 / width: 100%
     SP : aspect-ratio: 1.33 / width: 100%
     ===================================================== */
}
.recruit_stair {
  display: block;
  position: relative;
  width: 100%;
  height: 102.4rem;
  background-color: #cecece;
  overflow: hidden;
}
@media (max-width: 767px) {
  .recruit_stair {
    height: auto;
    aspect-ratio: 1.33;
  }
}
.recruit_stair_image {
  display: block;
  width: 100%;
  height: 100%;
}
.recruit {
  /* =====================================================
     Section: Message (.message)
     Anima: padding: 200 / gap: 100 / align-items: flex-end
     中身: image-2 (全幅 aspect 1.5) + .frame-2 (width 600 右寄せ)
     MESSAGE outline (message-2): absolute left:-17 bottom:102
     ===================================================== */
}
.recruit_message {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rem;
  width: 100%;
  padding: 20rem;
  position: relative;
}
@media (max-width: 767px) {
  .recruit_message {
    padding: 6rem 2.4rem;
    gap: 6rem;
    align-items: flex-end;
  }
}
.recruit_message_image {
  display: block;
  width: 100%;
  aspect-ratio: 1.5;
  background-color: #cecece;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.recruit_message_content {
  display: flex;
  flex-direction: column;
  width: 60rem;
  align-items: flex-end;
  gap: 4rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .recruit_message_content {
    width: 100%;
    align-items: flex-start;
    gap: 4rem;
  }
}
.recruit_message_heading {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 767px) {
  .recruit_message_heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}
.recruit_message_heading_en {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  color: #000000;
}
@media (max-width: 767px) {
  .recruit_message_heading_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.recruit_message_heading_ja {
  padding-bottom: 0.6rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #cecece;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .recruit_message_heading_ja {
    padding-bottom: 0;
  }
}
.recruit_message_body {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .recruit_message_body {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.recruit_message_name {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
  text-align: right;
  white-space: pre-line;
}
@media (max-width: 767px) {
  .recruit_message_name {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.recruit_message_outline {
  position: absolute;
  left: -1.7rem;
  bottom: 10.2rem;
  z-index: 0;
}
@media (max-width: 767px) {
  .recruit_message_outline {
    left: auto;
    right: -1.1rem;
    bottom: 1px;
  }
}
.recruit {
  /* =====================================================
     Section: Work Style (.work-style) - 黒背景
     Anima: padding: 200 0 200 200 / gap: 100 / align-items: flex-start
     内側構造:
       .div-3 (見出し)
       .frame-3 (padding-right: 200, リード)
       .image-3 (height: 400 全幅)
       .projects (width: 1040 役割リスト)
     ===================================================== */
}
.recruit_workstyle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  width: 100%;
  padding: 20rem 0 20rem 20rem;
  background-color: #000000;
  position: relative;
}
@media (max-width: 767px) {
  .recruit_workstyle {
    padding: 6rem 2.4rem;
    gap: 4rem;
  }
}
.recruit_workstyle_heading {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 767px) {
  .recruit_workstyle_heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}
.recruit_workstyle_heading_en {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  color: #ffffff;
}
@media (max-width: 767px) {
  .recruit_workstyle_heading_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.recruit_workstyle_heading_ja {
  padding-bottom: 0.6rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .recruit_workstyle_heading_ja {
    padding-bottom: 0;
    color: #5e5e5e;
  }
}
.recruit_workstyle_lead_wrap {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
  width: 100%;
  padding: 0 20rem 0 0;
}
@media (max-width: 767px) {
  .recruit_workstyle_lead_wrap {
    padding: 0;
    gap: 0;
  }
}
.recruit_workstyle_lead {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #ffffff;
  flex: 1;
}
@media (max-width: 767px) {
  .recruit_workstyle_lead {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.recruit_workstyle_image {
  display: block;
  width: 100%;
  height: 40rem;
  background-color: #888888;
  overflow: hidden;
}
@media (max-width: 767px) {
  .recruit_workstyle_image {
    width: calc(100% + 2.4rem);
    height: 20rem;
    margin-right: -2.4rem;
    aspect-ratio: auto;
  }
}
.recruit_workstyle_roles {
  display: flex;
  flex-direction: column;
  width: 104rem;
  align-items: flex-start;
  position: relative;
}
@media (max-width: 767px) {
  .recruit_workstyle_roles {
    width: 100%;
  }
}
.recruit_workstyle_role {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 4rem 0;
  border-bottom: 0.1rem solid #5e5e5e;
}
@media (max-width: 767px) {
  .recruit_workstyle_role {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 0;
  }
}
.recruit_workstyle_role_num {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  font-size: 3.6rem;
  line-height: 1;
  color: #ffffff;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .recruit_workstyle_role_num {
    font-size: 2.4rem;
  }
}
.recruit_workstyle_role_body {
  display: flex;
  flex-direction: column;
  width: 60rem;
  justify-content: center;
  gap: 3.2rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .recruit_workstyle_role_body {
    width: 100%;
    gap: 1.6rem;
  }
}
.recruit_workstyle_role_title {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.4;
  color: #ffffff;
}
@media (max-width: 767px) {
  .recruit_workstyle_role_title {
    font-size: 1.6rem;
  }
}
.recruit_workstyle_role_text {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #ffffff;
}
.recruit {
  /* =====================================================
     Section: Jobs & Career (.div-2 of jobs)
     Anima: padding: 200 / gap: 100 / 中身は 1040 幅
     中身構造:
       .div-3 (見出し JOBS & CAREER)
       .div-4 (gap: 20, リスト + 注意書き)
         .projects (column)
           .table-row-2 * 3 (画像 + frame-5)
         .text-wrapper-15 (注意書き)
     ===================================================== */
}
.recruit_jobs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  width: 100%;
  padding: 20rem;
  position: relative;
}
@media (max-width: 767px) {
  .recruit_jobs {
    padding: 6rem 2.4rem;
    gap: 4rem;
  }
}
.recruit_jobs_heading {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 767px) {
  .recruit_jobs_heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}
.recruit_jobs_heading_en {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  color: #000000;
}
@media (max-width: 767px) {
  .recruit_jobs_heading_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.recruit_jobs_heading_ja {
  padding-bottom: 0.6rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #cecece;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .recruit_jobs_heading_ja {
    padding-bottom: 0;
  }
}
.recruit_jobs_inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.recruit_jobs_list {
  display: flex;
  flex-direction: column;
  width: 104rem;
  margin: 0 auto;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .recruit_jobs_list {
    width: 100%;
  }
}
.recruit_jobs_note {
  display: block;
  width: 104rem;
  margin: 0 auto;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
@media (max-width: 767px) {
  .recruit_jobs_note {
    width: 100%;
  }
}
.recruit_job {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  width: 100%;
  padding: 4rem 4rem 4rem 0;
  border-bottom: 0.05rem solid #888888;
}
@media (max-width: 767px) {
  .recruit_job {
    flex-direction: column;
    gap: 2rem;
    padding: 0 0 2rem;
  }
}
.recruit_job_image {
  display: block;
  width: 20rem;
  height: 13.4rem;
  flex-shrink: 0;
  background-color: #cecece;
  overflow: hidden;
}
@media (max-width: 767px) {
  .recruit_job_image {
    width: 100%;
    height: auto;
    aspect-ratio: 1.5;
  }
}
.recruit_job_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.recruit_job_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
  flex: 1;
}
@media (max-width: 767px) {
  .recruit_job_content {
    width: 100%;
    gap: 4rem;
  }
}
.recruit_job_title {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.4;
  color: #000000;
}
.recruit_job_table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.recruit_job_table_row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
@media (max-width: 767px) {
  .recruit_job_table_row {
    gap: 1.2rem;
  }
}
.recruit_job_table_label {
  display: block;
  width: 10rem;
  flex-shrink: 0;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
@media (max-width: 767px) {
  .recruit_job_table_label {
    width: 7rem;
    font-weight: 700;
  }
}
.recruit_job_table_value {
  display: block;
  flex: 1;
  min-width: 0;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
.recruit_job_dummy {
  color: #ff0000;
}
.recruit {
  /* =====================================================
     Section: Hiring Process (.process)
     Anima: padding: 200 / gap: 100 / background: black / align-items: flex-start
     .table: gap 40 / .table-row-3: gap 40 / 番号 14 Inter 500 / 説明 14 Zen
     ===================================================== */
}
.recruit_process {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  width: 100%;
  padding: 20rem;
  background-color: #000000;
  position: relative;
}
@media (max-width: 767px) {
  .recruit_process {
    padding: 6rem 2.4rem;
    gap: 4rem;
  }
}
.recruit_process_heading {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 767px) {
  .recruit_process_heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}
.recruit_process_heading_en {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  color: #ffffff;
}
@media (max-width: 767px) {
  .recruit_process_heading_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.recruit_process_heading_ja {
  padding-bottom: 0.6rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .recruit_process_heading_ja {
    padding-bottom: 0;
  }
}
.recruit_process_table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  width: 100%;
}
@media (max-width: 767px) {
  .recruit_process_table {
    gap: 2.4rem;
  }
}
.recruit_process_step {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 100%;
}
@media (max-width: 767px) {
  .recruit_process_step {
    align-items: flex-start;
    gap: 4rem;
  }
}
.recruit_process_step_num {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  color: #ffffff;
}
.recruit_process_step_text {
  display: block;
  flex: 1;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #ffffff;
}
.recruit {
  /* =====================================================
     Section: Application Form (.div-2 of form)
     Anima: padding: 200 / gap: 100
     内側 .form: padding 0 300 / gap 40 / align-items: center
     textfield(.textfield): bg anti_flash_white / padding 10 20
     button(.button): bg taupe / padding 6 40 / radius 3
     button-wrapper(送信): bg black / height 40 / padding 0 40 / radius 3
     ===================================================== */
}
.recruit_form_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rem;
  width: 100%;
  padding: 20rem;
  position: relative;
}
@media (max-width: 767px) {
  .recruit_form_section {
    padding: 6rem 2.4rem;
    gap: 4rem;
  }
}
.recruit_form_section_heading {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.2rem;
  width: 100%;
}
@media (max-width: 767px) {
  .recruit_form_section_heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}
.recruit_form_section_heading_en {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  color: #000000;
}
@media (max-width: 767px) {
  .recruit_form_section_heading_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.recruit_form_section_heading_ja {
  padding-bottom: 0.6rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #cecece;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .recruit_form_section_heading_ja {
    padding-bottom: 0;
  }
}
.recruit_form_step {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 767px) {
  .recruit_form_step {
    max-width: 100%;
  }
}
.recruit .wpcf7 {
  width: 100%;
}
.recruit_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
}
@media (max-width: 767px) {
  .recruit_form {
    gap: 4rem;
  }
}
.recruit_form_fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.recruit_form_field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}
.recruit_form_field .wpcf7-form-control-wrap {
  width: 100%;
}
.recruit_form_label {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: #000000;
}
.recruit_form_label_required {
  color: #ff0000;
  font-size: 1.4rem;
}
.recruit_form_input, .recruit_form_textarea {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  background-color: #f2f2f2;
  border: none;
  border-radius: 0;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
}
.recruit_form_input::-moz-placeholder, .recruit_form_textarea::-moz-placeholder {
  color: #cecece;
}
.recruit_form_input::placeholder, .recruit_form_textarea::placeholder {
  color: #cecece;
}
.recruit_form_input:focus, .recruit_form_textarea:focus {
  outline: 0.1rem solid #888888;
}
.recruit_form_textarea {
  height: 20rem;
  min-height: 20rem;
  resize: vertical;
  line-height: 2.4rem;
}
.recruit_form_file {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}
@media (max-width: 767px) {
  .recruit_form_file {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
}
.recruit_form_file_name {
  font-size: 1.4rem;
}
.recruit_form_file .wpcf7-form-control-wrap {
  display: none;
}
.recruit_form_file_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 4rem;
  background-color: #888888;
  border: none;
  border-radius: 0.3rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
}
.recruit_form_file_name {
  display: inline-block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: #000000;
}
.recruit_form_agree {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  margin-top: 4rem;
  justify-content: center;
}
.recruit_form_agree label {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.recruit_form_agree label span {
  font-size: 1.4rem;
}
.recruit_form_agree_checkbox {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.recruit_form_agree_label {
  display: inline-block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .recruit_form_agree_label {
    white-space: normal;
  }
}
.recruit_form_submit_wrap {
  text-align: center;
}
.recruit_form_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  padding: 0 4rem;
  background-color: #000000;
  border: none;
  border-radius: 0.3rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s ease;
  margin-top: 4rem;
}
.recruit_form_submit:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .recruit_form_submit {
    display: flex;
    width: 100%;
    height: 4rem;
  }
}

/* =========================================================
   News Page (ニュース一覧) - Anima style.css に忠実に再現

   構成:
     .news_hero            ヒーロー (anti_flash_white 灰背景 + NEWS 黒)
     .news_content         padding 200 / gap 100 / column / center
       .news_table         ニュース行リスト (border-bottom 0.5px に連続)
         .news_row * n
           - 日付 (14px Inter)
           - content (項目 14px Zen Med + 本文 14px Zen Light)
       .news_pagination    1 / 2 / > 矢印
   ========================================================= */
.news {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Hero
     Anima PC: height: 444 / padding: 200 / gap: 100
     Anima SP: height: 200 / padding: 100px 24px (margin trick で中央配置)
     背景: anti_flash_white (#f2f2f2) - 他ページと違って灰背景・黒文字
     ===================================================== */
}
.news_hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10rem;
  width: 100%;
  height: 44.4rem;
  padding: 20rem;
  position: relative;
  background-color: #f2f2f2;
  overflow: hidden;
}
@media (max-width: 767px) {
  .news_hero {
    height: 20rem;
    padding: 0 2.4rem;
    gap: 0;
  }
}
.news_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .news_hero_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.news_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #000000;
}
@media (max-width: 767px) {
  .news_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.news_hero_title_ja {
  display: inline-flex;
  align-items: flex-end;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #000000;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .news_hero_title_ja {
    padding-bottom: 0;
    font-size: 1rem;
    align-self: flex-start;
  }
}
.news {
  /* =====================================================
     Section: Content (ニュース本体)
     Anima PC: padding: 200 / gap: 100 / column / align-items: center
     Anima SP: padding: 60 24 / gap: 40 / column / align-items: center
     ===================================================== */
}
.news_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rem;
  width: 100%;
  padding: 20rem;
  position: relative;
}
@media (max-width: 767px) {
  .news_content {
    padding: 6rem 2.4rem;
    gap: 4rem;
  }
}
.news {
  /* =====================================================
     Table (ニュースリスト)
     Anima: column / 全幅
     全行 padding 24 0 / gap 40 / border-bottom 0.5 american-silver
     ===================================================== */
}
.news_table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.news_row {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  width: 100%;
  padding: 2.4rem 0;
  border-bottom: 0.05rem solid #cecece;
  position: relative;
}
@media (max-width: 767px) {
  .news_row {
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.4rem 0;
  }
}
.news_row_date {
  display: block;
  flex-shrink: 0;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: #000000;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .news_row_date {
    font-size: 1.2rem;
  }
}
.news_row_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 1;
  width: 100%;
}
.news_row_title {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
}
@media (max-width: 767px) {
  .news_row_title {
    font-weight: 700;
    line-height: 1.5;
  }
}
.news_row_text {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
}
@media (max-width: 767px) {
  .news_row_text {
    font-weight: 400;
    line-height: 2.4rem;
  }
}
.news {
  /* =====================================================
     Pagination (frame-2)
     Anima: inline-flex / align-items: center / justify-content: center / gap: 20
     ===================================================== */
}
.news_pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0.4rem 0 0.4rem 0.4rem;
}
@media (max-width: 767px) {
  .news_pagination {
    gap: 1.6rem;
  }
}
.news_pagination_link {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: #cecece;
  transition: color 0.2s ease;
}
.news_pagination_link:hover {
  color: #000000;
}
.news_pagination_link_active {
  color: #000000;
  pointer-events: none;
  cursor: default;
}
.news_pagination_arrow {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.1rem solid currentColor;
  border-right: 0.1rem solid currentColor;
  transform: rotate(45deg);
  color: #000000;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.prev .news_pagination_arrow {
  transform: rotate(-135deg);
}
.news_pagination_arrow_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
}
.news_pagination_arrow_link:hover {
  opacity: 0.7;
}

/* =========================================================
   News Details Page (ニュース詳細) - Anima style.css に忠実に再現

   構成:
     .news_details_content       padding 200 400 / gap 100 / column / center
       .news_details_group           ニュース本体 column / gap 20
         - 日付
         - タイトル (20px / 28)
         - 本文段落 (14px / 24)
         - .news_details_block         見出し付きブロック (column / gap 10)
           - 小見出し
           - 本文 or リスト (ul/ol ネスト)
       .news_details_pagination    PREV | NEXT
   ========================================================= */
.news_details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Content
     Anima PC: padding: 200 400 / gap: 100 / column / align-items: center
               (実質的に左右 400px のパディングで内側 640px に絞られる)
     Anima SP: padding: 60 24 / gap: 40 / column / align-items: center
     ===================================================== */
}
.news_details_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rem;
  width: 100%;
  padding: 20rem 40rem;
  position: relative;
}
@media (max-width: 767px) {
  .news_details_content {
    padding: 6rem 2.4rem;
    gap: 4rem;
  }
}
.news_details {
  /* =====================================================
     News Group (本文ブロック)
     Anima: column / gap: 20 / 全幅
     ===================================================== */
}
.news_details_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.news_details_date {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #000000;
}
.news_details_title {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .news_details_title {
    font-size: 2rem;
    line-height: normal;
  }
}
.news_details_body {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
.news_details_body > * + * {
  margin-top: 2.4rem;
}
.news_details_body > * + h2,
.news_details_body > * + h3 {
  margin-top: 4rem;
}
.news_details {
  /* =====================================================
     Block (見出し付きブロック)
     Anima .block-list: column / gap: 10 / 全幅
     ・小見出し (.text-wrapper-3: 14px / 24)
     ・本文 or リスト
     ===================================================== */
}
.news_details_block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}
.news_details_block_heading {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
.news_details_block_body {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
.news_details_list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 0 1.2em;
  list-style: disc;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
.news_details_list ul {
  margin: 0;
  padding: 0 0 0 1.4em;
  list-style: disc;
}
.news_details_list ul ul {
  list-style: disc;
}
.news_details_list li {
  padding: 0;
}
.news_details_ordered {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 0 1.4em;
  list-style: decimal;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
}
.news_details_ordered ol {
  margin: 0;
  padding: 0 0 0 1.4em;
  list-style: lower-alpha;
}
.news_details_ordered ol ol {
  list-style: lower-roman;
}
.news_details_ordered li {
  padding: 0;
}
.news_details {
  /* =====================================================
     Pagination (PREV | NEXT)
     Anima: inline-flex / center / gap: 20 / 14px Inter / letter-spacing: 1.4
     PREV (.text-wrapper-4: american-silver) / 区切り 1px縦線 / NEXT (.text-wrapper-5: 黒)
     ===================================================== */
}
.news_details_pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  align-self: center;
}
.news_details_pagination_link {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.14rem;
  color: #cecece;
  transition: color 0.2s ease;
}
.news_details_pagination_link:hover {
  color: #000000;
}
.news_details_pagination_link_active {
  color: #000000;
}
.news_details_pagination_link_disabled {
  color: #cecece;
  pointer-events: none;
  cursor: default;
}
.news_details_pagination_sep {
  display: inline-block;
  width: 0.1rem;
  height: 1.4rem;
  background-color: #cecece;
  flex-shrink: 0;
}

/* =========================================================
   Contact Page (お問い合わせ) - Anima style.css に忠実に再現
   ★ WordPress Contact Form 7 (CF7) を想定したマークアップに対応

   構成:
     .contact_hero            ヒーロー (anti_flash_white 灰背景 + CONTACT 黒)
     .contact_content         padding 200 400 / gap 40 / column / center
       .contact_form              <form class="wpcf7-form contact_form"> CF7のフォーム
         .contact_form_field        各入力フィールド
           .contact_form_label        ラベル (任意項目以外は赤*)
           [.contact_form_input/_textarea]  CF7 ショートコード差し込み
         .contact_form_agree        同意チェックボックス
         .contact_form_submit       送信ボタン

   ★ CF7 のショートコード例:
     [text* your-name class:contact_form_input placeholder "プレスホルダー"]
     [textarea* your-message class:contact_form_textarea placeholder "プレスホルダー"]
     [checkbox* privacy "個人情報の取扱いについて同意する"]
     [submit class:contact_form_submit "入力内容を確認する"]

   ★ CF7 が出力する追加のクラスにも対応:
     .wpcf7-form-control-wrap (input のラッパ)
     .wpcf7-not-valid-tip      (エラー表示)
     .wpcf7-list-item          (チェックボックスのラッパ)
     .wpcf7-response-output    (送信後のフラッシュメッセージ)
   ========================================================= */
.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Hero
     Anima PC: height: 444 / padding: 200 / gap: 100
     Anima SP: height: 200 / padding: 0 24 (margin trick で中央配置)
     背景: anti_flash_white (#f2f2f2) - News と同じ灰背景・黒文字
     ===================================================== */
}
.contact_hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10rem;
  width: 100%;
  height: 44.4rem;
  padding: 20rem;
  position: relative;
  background-color: #f2f2f2;
  overflow: hidden;
}
@media (max-width: 767px) {
  .contact_hero {
    height: 20rem;
    padding: 0 2.4rem;
    gap: 0;
  }
}
.contact_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .contact_hero_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.contact_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #000000;
}
@media (max-width: 767px) {
  .contact_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.contact_hero_title_ja {
  display: inline-flex;
  align-items: flex-end;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #000000;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .contact_hero_title_ja {
    padding-bottom: 0;
    font-size: 1rem;
    align-self: flex-start;
  }
}
.contact {
  /* =====================================================
     Section: Content
     Anima PC: padding: 200 400 / gap: 40 / column / align-items: center
     Anima SP: padding: 60 24 / gap: 40 / column / align-items: flex-start
     ===================================================== */
}
.contact_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding: 20rem 2.4rem;
  position: relative;
}
@media (max-width: 767px) {
  .contact_content {
    padding: 6rem 2.4rem;
    gap: 4rem;
    align-items: flex-start;
  }
}
.contact_content .wpcf7,
.contact_content .wpcf7-form {
  width: 100%;
}
.contact {
  /* =====================================================
     Form
     Anima: column / gap: 20 / 全幅
     CF7: <form class="wpcf7-form contact_form">
     ===================================================== */
}
.contact_form_step {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .contact_form_step {
    max-width: 100%;
  }
}
.contact_form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.contact_form_field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}
.contact_form_label {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: #000000;
}
.contact_form_label_required {
  color: #ff0000;
  font-size: 1.4rem;
}
.contact_form_input, .contact_form_textarea {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  background-color: #f2f2f2;
  border: none;
  border-radius: 0;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
}
.contact_form_input::-moz-placeholder, .contact_form_textarea::-moz-placeholder {
  color: #cecece;
}
.contact_form_input::placeholder, .contact_form_textarea::placeholder {
  color: #cecece;
}
.contact_form_input:focus, .contact_form_textarea:focus {
  outline: 0.1rem solid #888888;
}
.contact_form_textarea {
  height: 20rem;
  min-height: 20rem;
  resize: vertical;
  line-height: 2.4rem;
}
.contact .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #ff0000;
}
.contact .wpcf7-response-output {
  display: block;
  width: 100%;
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.6rem;
  border: 0.1rem solid #cecece;
  background-color: #f2f2f2;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
}
.contact_form_agree {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  align-self: center;
}
@media (max-width: 767px) {
  .contact_form_agree {
    align-self: flex-start;
  }
}
.contact_form_agree_checkbox {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.contact_form_agree_label {
  display: inline-block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width: 767px) {
  .contact_form_agree_label {
    white-space: normal;
  }
}
.contact .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
}
.contact .wpcf7-list-item > label {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  cursor: pointer;
}
.contact .wpcf7-list-item input[type=checkbox] {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  flex-shrink: 0;
}
.contact .wpcf7-list-item .wpcf7-list-item-label {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #000000;
  cursor: pointer;
}
@media (max-width: 767px) {
  .contact .wpcf7-list-item .wpcf7-list-item-label {
    white-space: normal;
  }
}
.contact_form_submit_wrap {
  text-align: center;
}
.contact_form_submit {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  padding: 0 4rem;
  background-color: #000000;
  border: none;
  border-radius: 0.3rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
  align-self: center;
}
.contact_form_submit:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .contact_form_submit {
    display: flex;
    width: 100%;
    height: 4rem;
    align-self: stretch;
  }
}
.contact .wpcf7-submit {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  padding: 0 4rem;
  background-color: #000000;
  border: none;
  border-radius: 0.3rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
}
.contact .wpcf7-submit:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .contact .wpcf7-submit {
    display: flex;
    width: 100%;
    height: 4rem;
    align-self: stretch;
  }
}
.contact .wpcf7-spinner {
  margin-left: 0.8rem;
}

/* =========================================================
   Contact Confirm Page (お問い合わせ確認) - Anima style.css に忠実に再現

   特徴:
   - Hero / Content 構造は contact ページとほぼ同じ
   - 入力欄(灰背景)ではなく「ラベル + 値」を縦並びで表示するだけ
   - 必須マーク (*) は確認画面なので不要
   - 送信ボタン: width 188px / "送信" (短いラベル)

   ★ CF7 では標準で確認画面はないため、以下のいずれかで実装:
     ① Contact Form 7 Multi-Step Forms プラグインで2ステップ化
     ② Contact Form 7 Confirm プラグインで確認画面付与
     ③ 自前 JS で1画面内の表示切替

   このページは静的HTMLとしてデザインだけ用意し、
   WordPress実装時にプラグインや JS でデータを引き継ぐ。

   構成:
     .contact_confirm_hero            ヒーロー (contact と同じ)
     .contact_confirm_content         padding 200 400 / gap 40 / column / center
       .contact_confirm_form              入力内容の表示
         .contact_confirm_field             ラベル + 値 (column gap 8)
       .contact_confirm_submit          送信ボタン (188×40)
   ========================================================= */
.contact_confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Hero (contact と同じ)
     Anima: height: 444 / padding: 200 / gap: 100
     背景: anti_flash_white (#f2f2f2) / 黒文字
     ===================================================== */
}
.contact_confirm_hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10rem;
  width: 100%;
  height: 44.4rem;
  padding: 20rem;
  position: relative;
  background-color: #f2f2f2;
  overflow: hidden;
}
@media (max-width: 767px) {
  .contact_confirm_hero {
    height: 20rem;
    padding: 0 2.4rem;
    gap: 0;
  }
}
.contact_confirm_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .contact_confirm_hero_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.contact_confirm_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #000000;
}
@media (max-width: 767px) {
  .contact_confirm_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.contact_confirm_hero_title_ja {
  display: inline-flex;
  align-items: flex-end;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #000000;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .contact_confirm_hero_title_ja {
    padding-bottom: 0;
    font-size: 1rem;
    align-self: flex-start;
  }
}
.contact_confirm {
  /* =====================================================
     Section: Content
     Anima: padding: 200 400 / gap: 40 / column / align-items: center
     ===================================================== */
}
.contact_confirm_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding: 20rem 40rem;
  position: relative;
}
@media (max-width: 767px) {
  .contact_confirm_content {
    padding: 6rem 2.4rem;
    gap: 4rem;
    align-items: flex-start;
  }
}
.contact_confirm {
  /* =====================================================
     Form (確認内容表示エリア)
     Anima: column / gap 20 / 全幅
     ===================================================== */
}
.contact_confirm_form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.contact_confirm_field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}
.contact_confirm_label {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: #000000;
}
@media (max-width: 767px) {
  .contact_confirm_label {
    font-weight: 700;
    line-height: normal;
  }
}
.contact_confirm_value {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 767px) {
  .contact_confirm_value {
    line-height: 2.4rem;
  }
}
.contact_confirm {
  /* =====================================================
     送信ボタン (.button)
     Anima: width 188 / height 40 / padding 0 40 / radius 3 / 黒 / 12px Inter 700 white
     ※ contact ページのボタン (auto width) と違って固定幅 188px
     ===================================================== */
}
.contact_confirm_submit {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.8rem;
  height: 4rem;
  padding: 0 4rem;
  background-color: #000000;
  border: none;
  border-radius: 0.3rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
  align-self: center;
}
.contact_confirm_submit:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .contact_confirm_submit {
    width: 100%;
    align-self: stretch;
  }
}

/* =========================================================
   Privacy Policy Page (プライバシーポリシー)
   Anima style.css に忠実に再現

   構成:
     .privacy_policy_hero            ヒーロー (anti_flash_white 灰背景 + 黒文字)
     .privacy_policy_content         padding 200 400 / gap 40 / column / center
       .privacy_policy_block * n        各条文ブロック
         - リード文 (第1条ブロックのみ)
         - 見出し (16px Zen Medium 500)
         - 本文 (14px Zen / 28)
   ========================================================= */
.privacy_policy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Hero
     Anima: height: 444 / padding: 200 / gap: 100
     背景: anti_flash_white / 黒文字 (news/contact と同じ)
     ===================================================== */
}
.privacy_policy_hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10rem;
  width: 100%;
  height: 44.4rem;
  padding: 20rem;
  position: relative;
  background-color: #f2f2f2;
  overflow: hidden;
}
@media (max-width: 767px) {
  .privacy_policy_hero {
    height: 20rem;
    padding: 0 2.4rem;
    gap: 0;
  }
}
.privacy_policy_hero_title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .privacy_policy_hero_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.privacy_policy_hero_title_en {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.36rem;
  color: #000000;
}
@media (max-width: 767px) {
  .privacy_policy_hero_title_en {
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
  }
}
.privacy_policy_hero_title_ja {
  display: inline-flex;
  align-items: flex-end;
  padding-bottom: 0.6rem;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #000000;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .privacy_policy_hero_title_ja {
    padding-bottom: 0;
    font-size: 1rem;
    align-self: flex-start;
  }
}
.privacy_policy {
  /* =====================================================
     Section: Content
     Anima PC: padding: 200 400 / gap: 40 / column / align-items: center
     Anima SP: padding: 60 24 / gap: 40 / column / align-items: flex-start
     ===================================================== */
}
.privacy_policy_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding: 20rem 40rem;
  position: relative;
}
@media (max-width: 767px) {
  .privacy_policy_content {
    padding: 6rem 2.4rem;
    gap: 4rem;
    align-items: flex-start;
  }
}
.privacy_policy {
  /* =====================================================
     Block (各条文ブロック .text-list)
     Anima PC: column / gap 20 / padding 0 0 40 / border-bottom 0.5 american-silver
     Anima SP: 同じ (column / gap 20 / padding 0 0 40 / border-bottom 0.5)
     ===================================================== */
}
.privacy_policy_block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  padding: 0 0 4rem;
  border-bottom: 0.05rem solid #cecece;
}
@media (max-width: 767px) {
  .privacy_policy_block {
    padding: 0 0 4rem;
    gap: 2rem;
  }
}
.privacy_policy_block_last, .privacy_policy_block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.privacy_policy_lead {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .privacy_policy_lead {
    line-height: 2.4rem;
  }
}
.privacy_policy_heading {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #000000;
}
.privacy_policy_body {
  display: block;
  width: 100%;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #000000;
}
@media (max-width: 767px) {
  .privacy_policy_body {
    line-height: 2.4rem;
  }
}
.privacy_policy_link {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  transition: opacity 0.2s ease;
}
.privacy_policy_link:hover {
  opacity: 0.7;
}

/* =========================================================
   404 NOT FOUND Page - Anima style.css に忠実に再現

   ★ サンクスモーダル(contact_thanks)とデザインは似ているが、
     こちらは「1ページとして実装」(オーバーレイではない)。

   構成:
     .not_found_content              padding 200 / 灰背景 / column / center / gap 40
       .not_found_card                  白カード (radius 10 / padding 100 0)
         .not_found_label                  "404 NOT FOUND" (24px Inter)
         .not_found_text                   メイン + 補足テキスト (column gap 20)
           .not_found_title                  24px Zen
           .not_found_message                14px Zen
         .not_found_button                TOPへ ボタン (188×40)
   ========================================================= */
.not_found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* =====================================================
     Section: Content
     Anima PC: padding: 200 / gap: 40 / column / align-items: center
               背景: american_silver (#cecece)
     Anima SP: padding: 60 24 / height 600 / gap: 40 / white background (灰なし)
               ※ サンクスSPと同じパターン
     ===================================================== */
}
.not_found_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding: 20rem;
  background-color: #cecece;
  position: relative;
}
@media (max-width: 767px) {
  .not_found_content {
    height: 60rem;
    padding: 6rem 2.4rem;
    background-color: #ffffff;
    justify-content: center;
  }
}
.not_found {
  /* =====================================================
     白カード (Anima .form)
     PC: padding 100 0 / 白背景 / radius 10 / column / center / gap 40
     SP: カードのスタイル消失 (透明 / radius 0 / padding 0)
         ※ 親 .not_found_content が height 600 / justify-content center なので
            ここではただの flex container として中身を縦中央配置
     ===================================================== */
}
.not_found_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  max-width: 104rem;
  padding: 10rem 0;
  background-color: #ffffff;
  border-radius: 1rem;
  position: relative;
}
@media (max-width: 767px) {
  .not_found_card {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    gap: 4rem;
    max-width: none;
  }
}
.not_found {
  /* =====================================================
     "404 NOT FOUND" ラベル (Anima .text-wrapper / .div)
     PC: 24px Inter 400 / line-height 1 / 黒
     SP: 24px Inter 400 / line-height 36px (Anima sp-large)
     ===================================================== */
}
.not_found_label {
  display: block;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
  text-align: center;
}
@media (max-width: 767px) {
  .not_found_label {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
.not_found {
  /* =====================================================
     テキストエリア (Anima .textfield-label)
     column / center / gap 20
     ===================================================== */
}
.not_found_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 0 2.4rem;
  text-align: center;
}
@media (max-width: 767px) {
  .not_found_text {
    gap: 1.6rem;
    padding: 0;
  }
}
.not_found_title {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.4;
  color: #000000;
  text-align: center;
}
@media (max-width: 767px) {
  .not_found_title {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
.not_found_message {
  display: block;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000000;
  text-align: center;
}
@media (max-width: 767px) {
  .not_found_message {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}
.not_found {
  /* =====================================================
     TOPへ ボタン (Anima .button)
     width 188 / height 40 / 黒 / radius 3 / 12px Inter 700 white
     SP: width 100% (全幅)
     ===================================================== */
}
.not_found_button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18.8rem;
  height: 4rem;
  padding: 0 4rem;
  background-color: #000000;
  border: none;
  border-radius: 0.3rem;
  font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
}
.not_found_button:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .not_found_button {
    display: flex;
    width: 100%;
    align-self: stretch;
  }
}/*# sourceMappingURL=style.css.map */