@charset "UTF-8";
/*
Theme Name: 株式会社アトラストエンタープライズ テーマ
Theme URI: https://atrust-hp.com
Description: 株式会社アトラストエンタープライズ
Version: 1.0.0
Author: 株式会社アトラストエンタープライズ
*/

.w-content {
  padding-left: 20px;
  padding-right: 20px;
}

.w-1440 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
}

.w-1100 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  width: 100%;
}

a:hover {
  opacity: 0.7;
}

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

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



/* Loading */
.loading {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #8F060D 0%, #B81727 100%);
  position: fixed;
  z-index: 999;
  top: 0;
}

.loading_inner {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.loading_box {
  transition: 0.4s;
  text-align: center;
}

body.is-show .loading_box {
  transform: translateY(10px);
}

.loading_logo {
  width: 50%;
  margin: 0 auto 80px;
  max-width: 542px;
}

.loading_visual {
  position: relative;
  width: 100%;
  height: 50px;
}

.loading_bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
}

.loading_move-wrapper {
  display: block;
  width: 90%;
  margin: auto;
  position: relative;
}

.loading_move {
  position: absolute;
  top: -11.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  color: #fff;
}

.loading_circle {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .loading_move-wrapper {
    width: 80%;
  }
}


/* Scroll Animetion */
.js-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  will-change: opacity, transform;
}

body.is-show .js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-fade.js-paint {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: translateY(0);
}

body.is-show .js-fade.js-paint.is-visible {
  animation: paint-action 2s ease-out forwards;
}

@keyframes paint-action {
  0% {
    clip-path: inset(0 100% 0 0);
  }

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


.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}


/* header */
/* ==========================================
   共通ヘッダー（common-header）基本構造
   ========================================== */
.common-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 100;
  box-sizing: border-box;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* 通常時・スクロール後・下層ページの共通スタイル（背景白） */
.common-header,
.common-header.is-scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* トップページかつ最上部（スクロール前）の特別スタイル（背景透明） */
.common-header.is-top:not(.is-scrolled) {
  background-color: transparent;
  box-shadow: none;
}

.common-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
}

/* --- ロゴエリア --- */
.common-header__logo {
  flex-shrink: 0;
  padding-left: 20px;
}

.common-header__logo-link {
  display: block;
  width: 542px;
  max-width: 100%;
}

/* トップ最上部とそれ以外でのロゴ表示切り替え */
.common-header.is-top:not(.is-scrolled) .common-header__logo-img--white {
  display: block;
}

.common-header.is-top:not(.is-scrolled) .common-header__logo-img--color {
  display: none;
}

.common-header.is-scrolled .common-header__logo-img--white,
.common-header:not(.is-top) .common-header__logo-img--white {
  display: none;
}

.common-header.is-scrolled .common-header__logo-img--color,
.common-header:not(.is-top) .common-header__logo-img--color {
  display: block;
}


/* --- メインナビゲーション（PC専用） --- */
.common-header__nav {
  margin-left: auto;
  margin-right: 40px;
  height: 100%;
}

.common-header__nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
}

.common-header__nav-item {
  position: relative;
  height: 100%;
}

.common-header__nav-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.common-header__nav-text-jp {
  font-size: 16px;
  line-height: 1.2;
}

.common-header__nav-text-en {
  font-size: 12px;
  line-height: 1.2;
  margin-top: 4px;
}

/* 【配色制御】トップページ最上部 */
.common-header.is-top:not(.is-scrolled) .common-header__nav-text-jp {
  color: #ffffff;
}

.common-header.is-top:not(.is-scrolled) .common-header__nav-text-en {
  color: #fff2f3;
}

/* 【配色制御】共用（スクロール後・下層ページ） */
.common-header.is-scrolled .common-header__nav-text-jp,
.common-header:not(.is-top) .common-header__nav-text-jp {
  color: #111111;
  transition: .4s;
}

.common-header.is-scrolled .common-header__nav-text-en,
.common-header:not(.is-top) .common-header__nav-text-en {
  color: #b81727;
}

/* 共用時のホバーはopacity1のまま、英語を暗い赤に変化 */
.common-header.is-scrolled .common-header__nav-link:hover,
.common-header:not(.is-top) .common-header__nav-link:hover {
  opacity: 1;
}

.common-header.is-scrolled .common-header__nav-link:hover .common-header__nav-text-jp,
.common-header:not(.is-top) .common-header__nav-link:hover .common-header__nav-text-jp {
  color: #8f060d;
}


/* --- プルダウンメニュー共通設定（PC用） --- */
.common-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1010;
}

/* 親要素ホバー時にプルダウンを表示 */
.common-header__nav-item:hover .common-header__dropdown,
.common-header__btn-wrapper:hover .common-header__dropdown {
  opacity: 1;
  visibility: visible;
}

.common-header__dropdown-link {
  display: block;
  font-size: 16px;
  color: #111111;
  padding: 10px 30px;
  background-color: #ffffff;
  transition: background-color 0.3s, color 0.3s;
  text-align: center;
}

/* ホバー時に背景を赤、文字を白に（親要素hoverのopacityを上書きリセット） */
.common-header__dropdown-link:hover {
  background-color: #8f060d !important;
  color: #ffffff !important;
  opacity: 1 !important;
}


/* --- 右側背景色付きボタンエリア（PC専用） --- */
.common-header__buttons {
  display: flex;
  height: 100%;
  flex-shrink: 0;
}

.common-header__btn-wrapper {
  position: relative;
  height: 100%;
}

.common-header__btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 155px;
  height: 100%;
  color: #ffffff;
  text-align: center;
  box-sizing: border-box;
}

.common-header__btn-icon {
  height: 42px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}

.common-header__btn-text {
  font-size: 16px;
  line-height: 1.2;
}

/* 各ボタン固有背景色 */
.common-header__btn--tel {
  background-color: #8f060d;
}

.common-header__btn--recruit {
  background-color: #111111;
}

.common-header__btn--line {
  background-color: #00c825;
}

@media screen and (max-width: 1700px) {

  .common-header,
  .common-header__inner {
    height: 90px;
  }

  .common-header__logo-link {
    width: 400px;
  }

  .common-header__nav-list {
    gap: 20px;
  }

  .common-header__nav {
    margin-right: 20px;
  }

  .common-header__btn {
    width: 140px;
  }

  .common-header__btn-text {
    font-size: 14px;
  }

  .common-header__dropdown-link {
    font-size: 14px;
    padding: 10px 20px;
  }

  .common-header__btn {
    width: 125px;
  }

  .common-header__btn-icon {
    height: 35px;
  }
}

@media screen and (max-width: 1400px) {

  .common-header,
  .common-header__inner {
    height: 80px;
  }

  .common-header__logo-link {
    width: 280px;
  }

  .common-header__btn-icon {
    height: 28px;
  }

  .common-header__nav-text-jp {
    font-size: 14px;
  }
}

@media screen and (min-width:1241px) {
  .common-header .h-spver {
    display: none !important;
  }
}

@media screen and (max-width:1240px) {
  .common-header .h-pcver {
    display: none !important;
  }
}

/* ==========================================
   レスポンシブ（1240px以下）スマホ専用設定
   ========================================== */
@media screen and (max-width: 1240px) {
  .common-header {
    height: 80px;
    /* スマホ用にヘッダー高さを最適化（必要に応じて100pxに変更可） */
  }

  .common-header__inner {
    height: 80px;
  }

  .common-header__logo {
    padding-left: 15px;
  }

  .common-header__logo-link {
    width: auto;
    height: 45px;
  }

  .common-header__logo-img {
    height: 100%;
    width: auto;
  }

  /* ハンバーガーボタン */
  .common-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 80px;
    /* ヘッダーの高さと揃えてスクエアに */
    height: 80px;
    background-color: #8f060d;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .common-header__hamburger-line {
    display: block;
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s;
  }

  /* 全画面ドロワーメニュー */
  .common-header__drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto;
    box-sizing: border-box;
  }

  /* JavaScriptでクラス「.is-open」が付与されたら表示 */
  .common-header__drawer.is-open {
    opacity: 1;
    visibility: visible;
  }

  .common-header__drawer-inner {
    position: relative;
    padding: 80px 20px 40px;
  }

  /* 閉じるボタン（右上固定の×マーク） */
  .common-header__drawer-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .common-header__drawer-close::before,
  .common-header__drawer-close::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 2px;
    background-color: #8f060d;
  }

  .common-header__drawer-close::before {
    transform: rotate(45deg);
  }

  .common-header__drawer-close::after {
    transform: rotate(-45deg);
  }

  /* ドロワー内テキストメニュー */
  .common-header__drawer-nav {
    margin-bottom: 40px;
  }

  .common-header__drawer-item {
    border-bottom: 1px solid #8f060d;
  }

  .common-header__drawer-item:first-child {
    border-top: 1px solid #8f060d;
  }

  .common-header__drawer-link {
    display: block;
    font-size: 16px;
    color: #8f060d;
    padding: 16px 40px 16px 0;
    position: relative;
    text-align: left;
    text-decoration: none;
    font-weight: 500;
  }

  /* 右側6pxの位置に配置する矢印アイコン */
  .common-header__drawer-link::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='20' fill='%238F060D' stroke='%238F060D' stroke-width='2'/%3E%3Cpath d='M19 14l8 8-8 8' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* 下部アクションボタン群 */
  .common-header__drawer-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .common-header__drawer-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 54px;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
  }

  /* PC用アイコンをスマホ側で白反転して流用可能にするためのCSSフィルタ */
  .common-header__drawer-btn-icon {
    height: 24px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .common-header__drawer-btn--tel {
    background-color: #8f060d;
  }

  .common-header__drawer-btn--recruit {
    background-color: #111111;
  }

  .common-header__drawer-btn--line {
    background-color: #00c825;
  }
}

@media screen and (max-width: 500px) {
  .common-header {
    height: 60px;
  }

  .common-header__inner {
    height: 60px;
  }

  .common-header__hamburger {
    width: 60px;
    height: 60px;
  }

  .common-header__drawer-close {
    width: 60px;
    height: 60px;
  }

  .common-header__logo {
    padding-left: 10px;
  }

  .common-header__logo-link {
    height: 31.5px;
  }
}


/* footer */
/* ==========================================
   フッター全体構造 & 応募フォームボックス
   ========================================== */
.common-footer {
  position: relative;
  width: 100%;
  /* 上のメインコンテンツとのマージン相殺を防ぎ、貫通させるための設定 */
  border-top: 1px solid transparent;
}

/* 応募フォーム白ボックス（上下の要素に50%ずつ食い込ませる） */
.common-footer__entry {
  position: relative;
  z-index: 10;
  /* 【PC時】ボックスの高さ（約440px）の半分ずつを上下に食い込ませる */
  margin-top: -220px;
  /* 上の要素（メインコンテンツ）への食い込み量 */
  margin-bottom: -220px;
  /* 下の要素（写真背景エリア）への食い込み量 */
}

.common-footer__entry-inner {
  position: relative;
  background-color: #ffffff;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* 背景の薄い文字 Entry Form */
.common-footer__entry-bg-text {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 128px;
  font-weight: 700;
  line-height: 1;
  color: #8f060d;
  opacity: 0.1;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}

/* 前面の日本語タイトル */
.common-footer__entry-title {
  position: relative;
  z-index: 2;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: #8f060d;
  margin-bottom: 30px;
}

/* 電話問い合わせエリア */
.common-footer__entry-tel {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 930px;
  margin: 0 auto 40px;
  padding: 12px 0;
  border-top: 3px solid #111111;
  border-bottom: 3px solid #111111;
  text-decoration: none;
  color: #111111;
  transition: opacity 0.4s;
}

.common-footer__entry-tel-label {
  font-size: 20px;
  font-weight: 700;
}

.common-footer__entry-tel-wrap {
      display: flex;
    align-items: center;
    justify-content: center;
}

.common-footer__entry-tel-icon {
  width: auto;
  height: 42px;
  object-fit: contain;
  margin-right: 5px;
}

.common-footer__entry-tel-number {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

/* 下部2つボタンエリア */
.common-footer__entry-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 930px;
  margin: 0 auto;
}

.common-footer__btn {
  display: flex;
  align-items: center;
  width: 450px;
  height: 100px;
  padding: 0 25px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.4s;
}

.common-footer__btn--line {
  background-color: #00c825;
}

.common-footer__btn--mail {
  background-color: #b81727;
}

.common-footer__btn-icon {
  width: 55px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.common-footer__btn-text {
  font-size: 24px;
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
}

/* 矢印をCSSで再現 */
.common-footer__btn-arrow {
  position: relative;
  width: 48px;
  height: 3px;
  background-color: #ffffff;
  flex-shrink: 0;
}

.common-footer__btn-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  height: 3px;
  background-color: #ffffff;
  transform: rotate(45deg);
  transform-origin: right top;
}


/* ==========================================
   下部：写真背景エリア
   ========================================== */
.common-footer__main {
  background-image: url('./images/footer_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 白ボックスの下半分（220px）が写真背景の上に重なるため、 */
  /* 重なり代（220px）＋会社ロゴまでのデザイン余白（80px）＝ 計300px を上部paddingとして設定 */
  padding: 350px 0 40px;
  color: #ffffff;
}

.common-footer__main-inner {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.common-footer__main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 左側：ロゴ・住所 */
.common-footer__info {
  max-width: 535px;
  width: 100%;
}

.common-footer__logo-link {
  display: block;
  margin-bottom: 20px;
}

.common-footer__logo-img {
  width: 100%;
  height: auto;
}

.common-footer__address {
  font-size: 16px;
  font-weight: 700;
  line-height: 2.0;
  color: #ffffff;
}

/* 右側：ナビゲーション */
.common-footer__nav {
  display: flex;
  gap: 90px;
}

.common-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.common-footer__nav-link {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.4s;
}

/* アクション行（LINE & PAGE TOP） */
.common-footer__action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 120px;
}

.common-footer__line-link {
  display: block;
  transition: opacity 0.4s;
}

.common-footer__line-icon {
  width: 48px;
  height: auto;
}

/* PAGE TOP ボタン構造 */
.common-footer__pagetop {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding-left: 25px;
  transition: opacity 0.4s;
}

.common-footer__pagetop::before {
  content: "";
  position: absolute;
  left: 0;
  top: 65%;
  width: 12px;
  height: 12px;
  border-top: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  transform: translateY(-50%) rotate(45deg);
}

/* 底面部（区切り線＆コピーライト） */
.common-footer__bottom {
  margin-top: 50px;
}

.common-footer__divider {
  border: none;
  border-top: 3px solid #ffffff;
  margin: 0 0 20px 0;
}

.common-footer__copyright {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

@media screen and (max-width: 1240px) {
  .common-footer__entry-buttons {
    flex-direction: column;
    align-items: center;
  }

  .common-footer__main-row {
    flex-direction: column;
    gap: 40px;
  }
}

/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .common-footer {
    border-top: 1px solid transparent;
  }

  /* スマホ時も白ボックスの上下50%ずつが綺麗に食い込むように調整 */
  .common-footer__entry {
    margin-top: -120px;
    margin-bottom: -120px;
  }

  .common-footer__entry-inner {
    padding: 40px 20px;
  }

  .common-footer__entry-bg-text {
    font-size: 11vw;
    top: 25px;
  }

  .common-footer__entry-title {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .common-footer__entry-tel {
    flex-direction: column;
    gap: 10px;
    padding: 15px 0;
    margin: 0 auto 20px;
  }

  .common-footer__entry-tel-label {
    font-size: 16px;
  }

  .common-footer__entry-tel-icon {
    height: 26px;
  }

  .common-footer__entry-tel-number {
    font-size: 28px;
  }

  .common-footer__entry-buttons {
    gap: 15px;
  }

  .common-footer__btn {
    width: 100%;
    height: 80px;
    padding: 0 20px;
  }

  .common-footer__btn-text {
    font-size: 18px;
  }

  .common-footer__btn-arrow {
    width: 35px;
  }

  .common-footer__main {
    /* スマホ用の重なり代（120px）＋ロゴまでの余白（60px）＝ 計180px */
    padding: 180px 0 30px;
  }

  .common-footer__info {
    max-width: 100%;
  }

  .common-footer__nav {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .common-footer__nav-list {
    gap: 15px;
  }

  .common-footer__action-row {
    margin-top: 60px;
  }
}

@media screen and (max-width: 500px) {
  .common-footer__btn {
    padding: 0 15px;
  }

  .common-footer__btn-icon {
    width: 35px;
  }

  .common-footer__btn-text {
    font-size: 16px;
    letter-spacing: 0;
  }

  .common-footer__entry-tel {
    gap: 5px;
    padding: 10px 0;
  }
}


/* TOP */
/* ==========================================
   メインビュー（top-mv）基本構造
   ========================================== */
.top-mv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 750px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding-bottom: 50px;
}

/* --- 背景：5枚の画像のフェード＆ズームアウトスライダー --- */
.top-mv__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top-mv__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: mvSliderAnime 20s cubic-bezier(0.58, 0.21, 0.41, 0.96) infinite;
}

.top-mv__slide--01 {
  background-image: url('images/mv01.jpg');
}

.top-mv__slide--02 {
  background-image: url('images/mv02.jpg');
}

.top-mv__slide--03 {
  background-image: url('images/mv03.jpg');
}

.top-mv__slide--04 {
  background-image: url('images/mv04.jpg');
}

.top-mv__slide--05 {
  background-image: url('images/mv05.jpg');
}

.top-mv__slide--01 {
  animation-delay: 0s;
}

.top-mv__slide--02 {
  animation-delay: 4s;
}

.top-mv__slide--03 {
  animation-delay: 8s;
}

.top-mv__slide--04 {
  animation-delay: 12s;
}

.top-mv__slide--05 {
  animation-delay: 16s;
}

@keyframes mvSliderAnime {
  0% {
    opacity: 0;
    transform: scale(1.15);
  }

  5% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
    transform: scale(1.0);
  }

  100% {
    opacity: 0;
  }
}

/* --- 中面：幾何学的装飾 --- */
.top-mv__decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.top-mv__decor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 最前面：コンテンツ配置 --- */
.top-mv__content {
  position: relative;
  z-index: 3;
}

.top-mv__content-inner {
  display: flex;
  width: 100%;
}

.top-mv__text-block {
  color: #ffffff;
  text-align: left;
}

.top-mv__sub-lead {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.0;
  color: #ffffff;
  margin-bottom: 24px;
}

.top-mv__main-title {
  font-size: 180px;
  font-weight: 700;
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 35px;
}

.top-mv__title-line {
  display: block;
}

.top-mv__tags {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.top-mv__tag {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  border: 2px solid #ffffff;
  padding: 10px 15px;
  box-sizing: border-box;
}


/* --- 右側：丸型リクルートボタン（右下絶対配置 & 滑らか可変） --- */
.top-mv__btn-block {
  position: absolute;
  right: 20px;
  bottom: 10px;
}

.top-mv__recruit-btn {
  position: relative;
  display: block;
  width: 180px;
  height: 180px;
  text-decoration: none;
}

/* テキストの縮小用コンテナ（ガクつき完全防止） */
.top-mv__recruit-text-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 常時回転用レイヤー */
.top-mv__recruit-text-wrap {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: spinCircleText 15s linear infinite;
}

.top-mv__recruit-text-svg {
  width: 100%;
  height: 100%;
}

/* SVGテキストのフォントサイズや文字間隔の微調整（CSSから指定可能） */
.top-mv__recruit-text-svg text {
  font-size: 16px;
  /* 均等配置した際に重ならない最適なサイズ */
  letter-spacing: 0.08em;
}

@keyframes spinCircleText {
  0% {
    transform: rotate(0deg);
  }

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

/* 内側：丸い線 */
.top-mv__recruit-circle-line {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
}

/* 中心：右向き三角 */
.top-mv__recruit-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #ffffff;
  transition: transform 0.4s ease;
  pointer-events: none;
}

/* ホバーアニメーション */
.top-mv__recruit-btn:hover .top-mv__recruit-text-scale {
  transform: scale(0.75);
}

.top-mv__recruit-btn:hover .top-mv__recruit-circle-line {
  transform: scale(1.5);
}

@media screen and (max-width: 1400px) {
  .top-mv__main-title {
    font-size: 12vw;
  }

  .top-mv__sub-lead {
    font-size: 3.4vw;
  }

  .top-mv__tag {
    font-size: 28px;
  }
}

/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .top-mv {
    height: 100vh;
    min-height: 560px;
    padding-bottom: 40px;
  }

  .top-mv__content {
    width: 100%;
  }

  .top-mv__content-inner {
    flex-direction: column;
  }

  .top-mv__sub-lead {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .top-mv__main-title {
    font-size: 11.5vw;
    margin-bottom: 20px;
  }

  .top-mv__tags {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .top-mv__tag {
    font-size: 16px;
    padding: 8px 12px;
  }

  .top-mv__btn-block {
    position: static;
    margin-top: -70px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .top-mv__recruit-btn {
    width: 100px;
    height: 100px;
  }
}


/* ==========================================
   使い回し用：共通パーツ（共通ルール2・BEM準拠）
   ========================================== */

/* --- 共通メインボタン --- */
.common-btn__main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 433px;
  height: 96px;
  background-color: #8f060d;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
  padding-right: 70px;
  /* 矢印分のセンターオフセット */
  transition: opacity 0.4s ease;
}

/* ホバー時の不透明度を1に固定（ベースの0.7を上書き） */
.common-btn__main:hover {
  opacity: 1 !important;
}

.common-btn__main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #111111;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.common-btn__main:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.common-btn__main-text {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.0;
  margin-left: auto;
  margin-right: auto;
}

.common-btn__main-arrow {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 3px;
  background-color: #ffffff;
}

.common-btn__main-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
  height: 3px;
  background-color: #ffffff;
  transform: rotate(45deg);
  transform-origin: right top;
}


/* --- 共通サブリンク --- */
.common-link__sub {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

/* ホバー時の不透明度を1に固定 */
.common-link__sub:hover {
  opacity: 1 !important;
}

.common-link__sub-text {
  color: #b81727;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.0;
}

.common-link__sub-box {
  position: relative;
  width: 56px;
  height: 56px;
  border: 3px solid #b81727;
  background-color: transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease;
}

.common-link__sub-arrow {
  position: relative;
  width: 35px;
  height: 3px;
  background-color: #b81727;
  transition: background-color 0.4s ease;
  left: -1px;
}

.common-link__sub-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 3px;
  background-color: #b81727;
  transform: rotate(45deg);
  transform-origin: right top;
  transition: background-color 0.4s ease;
}

.common-link__sub:hover .common-link__sub-box {
  background-color: #b81727;
}

.common-link__sub:hover .common-link__sub-arrow,
.common-link__sub:hover .common-link__sub-arrow::after {
  background-color: #ffffff;
}


/* ==========================================
   Companyセクション 固有スタイル
   ========================================== */
.top-company {
  position: relative;
  width: 100%;
  padding: 160px 0 200px;
  background-image: url('./images/company_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
  z-index: 4;
}

.top-company__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.top-company__left {
  position: relative;
  z-index: 5;
  text-align: left;
}

.top-company__title {
  color: #8f060d;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 30px;
}

.top-company__text {
  font-size: 20px;
  line-height: 2.0;
  max-width: 562px;
  width: 100%;
  margin-bottom: 80px;
}

.top-company__main-btn-wrap {
  margin-bottom: 80px;
}

.top-company__sub-links {
  display: flex;
  align-items: center;
  gap: 35px;
}


/* --- 右側：巨大縦書き装飾テキスト（確実な3列横並び） --- */
.top-company__right {
  position: absolute;
  right: -20px;
  /* 添付イメージに基づき、画面右端に寄せる調整 */
  top: -120px;
  bottom: -120px;

  /* 親要素は通常の横並びflexとして定義 */
  display: flex;
  flex-direction: row;
  gap: 40px;
  /* 列と列の間の隙間を均等に40pxで確保 */
  z-index: 2;
  pointer-events: none;
}

.top-company__bg-text {
  /* 子要素自体に縦書きを個別に指定することで、重ならずに1列ずつ独立します */
  writing-mode: vertical-rl;
  font-size: 128px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.04em;
  mix-blend-mode: multiply;
  white-space: nowrap;
  height: 100%;
}

/* 各列のカラー指定 */
.top-company__bg-text--side {
  color: #8f060d;
  margin-top: -0.4em;
}

.top-company__bg-text--center {
  color: #b81727;
  margin-top: -8em;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .top-company {
    padding: 80px 0 140px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
  }

  .top-company__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
  }

  .top-company__left {
    width: 100%;
  }

  .top-company__title {
    font-size: 32px;
  }

  .top-company__text {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .top-company__main-btn-wrap {
    margin-bottom: 40px;
  }

  .common-btn__main {
    width: 100%;
    max-width: 340px;
    height: 74px;
    padding-right: 55px;
  }

  .common-btn__main-text {
    font-size: 18px;
  }

  .common-btn__main-arrow {
    width: 35px;
  }

  .top-company__sub-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .common-link__sub {
    width: 100%;
    max-width: 340px;
    justify-content: space-between;
  }

  .common-link__sub-text {
    font-size: 18px;
  }

  /* スマホ時の縦書き3列の回り込み調整 */
  .top-company__right {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    height: auto;
    gap: 20px;
    align-self: center;
    margin-top: 20px;
    flex-direction: column;
  }

  .top-company__bg-text {
    font-size: 48px;
    height: auto;
    writing-mode: horizontal-tb;
    margin-top: 0;
  }

  .top-company__bg-text--center {
    margin-left: -8em;
  }
}


/* ==========================================
   共通パーツ：色違いModifier
   ========================================== */

/* --- 共通メインボタン：白背景バージョン --- */
.common-btn__main--white {
  background-color: #ffffff;
}

.common-btn__main--white .common-btn__main-text {
  color: #8f060d;
}

.common-btn__main--white .common-btn__main-arrow,
.common-btn__main--white .common-btn__main-arrow::after {
  background-color: #8f060d;
}

/* 【バグ修正】ホバーアウト・ホバー時の文字色と矢印の線の反転を完全分離 */
.common-btn__main--white:hover .common-btn__main-text {
  color: #ffffff !important;
  /* 文字色のみを白に */
  background-color: transparent !important;
  /* 背景が白化するのを防止 */
}

.common-btn__main--white:hover .common-btn__main-arrow,
.common-btn__main--white:hover .common-btn__main-arrow::after {
  background-color: #ffffff !important;
  /* 矢印の線のみを白に */
}


/* --- 共通サブリンク：オールホワイトバージョン --- */
.common-link__sub--white .common-link__sub-text {
  color: #ffffff;
}

.common-link__sub--white .common-link__sub-box {
  border-color: #ffffff;
}

.common-link__sub--white .common-link__sub-arrow,
.common-link__sub--white .common-link__sub-arrow::after {
  background-color: #ffffff;
}

.common-link__sub--white:hover .common-link__sub-box {
  background-color: #ffffff;
}

.common-link__sub--white:hover .common-link__sub-arrow,
.common-link__sub--white:hover .common-link__sub-arrow::after {
  background-color: #b81727;
}


/* ==========================================
   Join Usセクション 固有スタイル
   ========================================== */
.top-joinus {
  position: relative;
  width: 100%;
  margin-top: -80px;
  padding: 200px 0 240px;
  background-image: url('./images/joinus_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
}

.top-joinus__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

/* --- 左側：コンテンツエリア --- */
.top-joinus__left {
  position: relative;
  z-index: 5;
  text-align: left;
  max-width: 650px;
  width: 100%;
}

.top-joinus__title {
  margin-bottom: 30px;
}

.top-joinus__title-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.top-joinus__subtitle {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 50px;
}

.top-joinus__lead {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 100px;
}

.top-joinus__btn-wrap {
  margin-bottom: 80px;
}

.top-joinus__sub-links {
  display: flex;
  align-items: center;
  gap: 35px;
}


/* --- 【レイアウト修正】右側：2枚の画像重なり（右側はみ出し・コンテンツ枠固定） --- */
.top-joinus__right {
  position: relative;
  /* 背面500pxに対し、右側に前面375pxをはみ出させるための最適な総横幅を設定 */
  width: 660px;
  flex-shrink: 0;
  margin-left: 40px;
}

/* 上・背面画像（左上に固定配置） */
.top-joinus__img-bg {
  position: absolute;
  top: 0;
  left: 0;
  /* 左端からスタート */
  width: 500px;
  height: auto;
  z-index: 1;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 下・前面画像（右下に固定 ➔ 背面から右側へ綺麗にはみ出します） */
.top-joinus__img-fg {
  position: absolute;
  bottom: 0;
  right: 0;
  /* 右端（w-1440のインナー限界線）にピタッと吸着するため絶対にはみ出さない */
  width: 375px;
  height: auto;
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .top-joinus {
    margin-top: -40px;
    padding: 120px 0 160px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
  }

  .top-joinus__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
  }

  .top-joinus__left {
    max-width: 100%;
  }

  .top-joinus__title {
    margin-bottom: 20px;
  }

  .top-joinus__subtitle {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .top-joinus__lead {
    font-size: 22px;
    margin-bottom: 40px;
  }

  .top-joinus__btn-wrap {
    margin-bottom: 40px;
  }

  .top-joinus__sub-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .top-joinus__sub-links .common-link__sub {
    width: 100%;
    justify-content: space-between;
  }

  /* スマホ版もPCの「背面が左、前面が右はみ出し」のビジュアル関係性を踏襲 */
  .top-joinus__right {
    width: 100%;
    max-width: 440px;
    height: 320px;
    margin-left: 0;
    align-self: center;
  }

  .top-joinus__img-bg {
    width: 70%;
    top: 0;
    left: 0;
    /* 左上に寄せる */
    right: auto;
  }

  .top-joinus__img-fg {
    width: 55%;
    bottom: 0;
    right: 0;
    /* 右下にはみ出させる */
    left: auto;
  }
}


/* ==========================================
   Work & Data 共通背景ラッパー
   ========================================== */
.top-work-data {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  padding: 140px 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* 巨大な#FFF2F3の右向き三角形（右の頂点が1440pxインナーの右端と完全に揃う） */
.top-work-data__big-triangle {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: #fff2f3;
}


/* ==========================================
   1. Work セクション
   ========================================== */
.top-work {
  position: relative;
  z-index: 5;
  margin-bottom: 160px;
  /* Dataセクションとの間隔 */
}

/* Workの右方向の4連三角形デコレーション（縦横350px、ノーインライン画像指定） */
.top-work__decor-triangles {
  position: absolute;
  right: -100px;
  top: -40px;
  width: 350px;
  height: 350px;
  background-image: url('./images/work_decor_triangles.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  pointer-events: none;
}

/* ヘッダーエリア（下揃え） */
.top-work__header {
  display: flex;
  align-items: flex-end;
  gap: 90px;
  margin-bottom: 80px;
}

.top-work__title-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.top-work__subtitle {
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  line-height: 1.0;
}

/* 2連コンテンツカード */
.top-work__contents {
  display: flex;
  gap: 50px;
  margin-bottom: 80px;
}

.top-work__card {
  flex: 1;
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.top-work__card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.top-work__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-work__card-body {
  padding: 30px;
  background-color: #ffffff;
}

.top-work__card-header {
  display: flex;
  align-items: center;
  gap: 50px;
}

.top-work__card-number {
  color: #8f060d;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.0;
}

.top-work__card-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #8f060d;
}

/* 30pxの左詰め細線 */
.top-work__card-line {
  width: 30px;
  height: 1px;
  background-color: #8f060d;
  margin-top: 15px;
  margin-bottom: 30px;
}

.top-work__card-text {
  font-size: 16px;
  line-height: 2.0;
  color: #111111;
}

/* アクションボタン群 */
.top-work__actions {
  display: flex;
  align-items: center;
}

.top-work__sub-links {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-left: 60px;
  /* メインボタンの右側60pxに配置 */
}


/* ==========================================
   2. Data セクション（変則配置フリーレイアウト）
   ========================================== */
.top-data {
  position: relative;
  z-index: 5;
}

/* ヘッダーエリア（右寄せ・縦並び） */
.top-data__header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-bottom: 80px;
}

.top-data__title-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.top-data__subtitle {
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  line-height: 1.0;
  margin-top: 20px;
}



/* ==========================================
   Top: 数字で見るアトラスト（配置完全維持・リサイズ完全対応版）
   ========================================== */

/* 1440px基準で、gap（81px）とカラムを完全に相対％・vw計算へコンバート */
.top-data__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc((81 / 1440) * 100vw);
  /* gap（81px）も画面幅に合わせて可変 */
  max-width: 1440px;
  width: 100%;
  margin: 0 auto 80px;
  box-sizing: border-box;
  padding: 0 20px;
  /* 画面端に安全な余白を確保 */
}

/* 1440px以上の極大モニターでは、元の固定値でジャストホールド */
@media screen and (min-width: 1441px) {
  .top-data__grid {
    gap: 81px;
  }
}

/* 左右のカラム（列）構造 */
.top-data__col {
  display: flex;
  flex-direction: column;
  gap: calc((60 / 1440) * 100vw);
  /* ボックスの上下間隔（60px）も可変へ */
}

@media screen and (min-width: 1441px) {
  .top-data__col {
    gap: 60px;
  }
}

.top-data__col--left {
  width: calc((777 / 1440) * 100vw);
  max-width: 777px;
}

.top-data__col--right {
  width: calc((777 / 1440) * 100vw);
  max-width: 777px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* 【被りバグ完全解決】ネガティブマージン（-235px）と高低差（120px）を画面比例に変更 */
  margin-left: calc((-235 / 1440) * 100vw);
  margin-top: calc((120 / 1440) * 100vw);
}

@media screen and (min-width: 1441px) {
  .top-data__col--left {
    width: 777px;
  }

  .top-data__col--right {
    width: 777px;
    margin-left: -235px;
    margin-top: 120px;
  }
}


/* --- ボックス共通規定 --- */
.top-data__box {
  background-color: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  box-sizing: border-box;
  padding: calc((50 / 1440) * 100vw);
  /* パディング（50px）も画面連動にすることで内部面積を維持 */
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  overflow: hidden;
  width: 100%;
  /* 親カラムに対して100%可変 */
}

@media screen and (min-width: 1441px) {
  .top-data__box {
    padding: 50px;
  }
}

/* 【重要】固定高（height）を撤去し、アスペクト比（縦横比）の固定へシフト。これで歪まず縮みます */
.top-data__box--landscape {
  max-width: 777px;
  aspect-ratio: 777 / 582;
  /* 横長ボックスの黄金比を完全キープ */
}

.top-data__box--portrait {
  max-width: 582px;
  aspect-ratio: 582 / 777;
  /* 縦長ボックスの黄金比を完全キープ */
  width: calc((582 / 777) * 100%);
  /* 親の右カラム（777px）に対する正確なサイズ比率を維持 */
}

/* ボックス内のテキスト外殻ラッパー（元の通り維持） */
.top-data__box-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* --- 【元コードの配置ロジック・位置関係を100%完全無傷でホールド】 --- */
/* 1. 左上配置 */
.top-data__box--align-top-left {
  align-items: flex-start;
  text-align: left;
  background-image: url('./images/data_illust01.png');
  background-position: center left;
}

.top-data__box--align-top-left .top-data__box-inner {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: 0;
}

/* 2. 中央配置 */
.top-data__box--align-center {
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('./images/data_illust03.png');
  background-position: bottom left;
}

.top-data__box--align-center .top-data__box-inner {
  margin-top: 0;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

/* 3. 右下配置 */
.top-data__box--align-bottom-right {
  align-items: flex-end;
  text-align: right;
  background-image: url('./images/data_illust02.png');
  background-position: bottom left;
}

.top-data__box--align-bottom-right .top-data__box-inner {
  margin-top: 0;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

/* 4. 左下配置 */
.top-data__box--align-bottom-left {
  align-items: flex-start;
  text-align: left;
  background-image: url('./images/data_illust04.png');
  background-position: center left;
}

.top-data__box--align-bottom-left .top-data__box-inner {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}


/* --- タイポグラフィ詳細設定（文字サイズも1440px基準で完全にシンクロ縮小） --- */
.top-data__box-top {
  font-size: calc((48 / 1440) * 100vw);
  font-weight: 700;
  line-height: 1.2;
  color: #111111;
  margin-bottom: calc((15 / 1440) * 100vw);
}

.top-data__box-middle {
  display: inline-flex;
  align-items: baseline;
  justify-content: inherit;
  white-space: nowrap;
  /* 縮んだ拍子に数字と単位が不自然に2行に落ちるバグを永久遮断 */
}

.top-data__box-num {
  color: #8f060d;
  font-size: calc((150 / 1440) * 100vw);
  /* 150pxの超巨大数字も綺麗にスケールダウン */
  font-weight: 900;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.top-data__box-unit {
  color: #8f060d;
  font-size: calc((86 / 1440) * 100vw);
  font-weight: 900;
  line-height: 1.0;
  margin-left: calc((10 / 1440) * 100vw);
}

.top-data__box-bottom {
  font-size: calc((24 / 1440) * 100vw);
  font-weight: 700;
  line-height: 1.2;
  color: #111111;
  margin-top: calc((20 / 1440) * 100vw);
}

/* 1440px以上のPC環境では元のガチピン固定値へ完全固定 */
@media screen and (min-width: 1441px) {
  .top-data__box-top {
    font-size: 48px;
    margin-bottom: 15px;
  }

  .top-data__box-num {
    font-size: 150px;
  }

  .top-data__box-unit {
    font-size: 86px;
    margin-left: 10px;
  }

  .top-data__box-bottom {
    font-size: 24px;
    margin-top: 20px;
  }
}

/* アクション（中央揃え） */
.top-data__actions {
  display: flex;
  justify-content: center;
}

/* ==========================================
   レスポンシブ（767px以下）スマホ最適化（Work & Data 統合）
   ========================================== */
@media screen and (max-width: 767px) {
  .top-work-data {
    padding: 80px 0;
  }

  .top-work-data__big-triangle {
    clip-path: polygon(0 0, 100% 30%, 0 60%);
  }

  /* --- 1. Work スマホ対応 --- */
  .top-work {
    margin-bottom: 100px;
  }

  .top-work__decor-triangles {
    width: 150px;
    height: 150px;
    top: -20px;
  }

  .top-work__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 40px;
  }

  .top-work__subtitle {
    font-size: 28px;
  }

  .top-work__contents {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
  }

  .top-work__card-header {
    gap: 20px;
  }

  .top-work__card-number {
    font-size: 36px;
  }

  .top-work__card-title {
    font-size: 20px;
  }

  .top-work__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .top-work__sub-links {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
  }

  .top-work__sub-links .common-link__sub {
    width: 100%;
    justify-content: space-between;
  }

  .top-work__actions .common-btn__main {
    width: 100%;
    max-width: 340px;
    height: 74px;
    padding-right: 55px;
  }

  /* --- 2. Data スマホ対応 --- */
  .top-data__header {
    margin-bottom: 40px;
  }

  .top-data__subtitle {
    font-size: 28px;
    margin-top: 10px;
  }

  /* スマホ時は2列を解除し、上から順に綺麗な1列に並び替え */
  .top-data__grid {
    flex-direction: column;
    gap: 30px;
    padding: 0;
  }

  .top-data__col {
    width: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    gap: 30px;
  }

  /* 変則サイズを解除し、全て画面幅フィットの正方形に統一して中央配置に見やすく変更 */
  .top-data__box {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 30px 20px;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .top-data__box-inner {
    margin: auto !important;
  }

  .top-data__box-middle {
    justify-content: center;
  }

  .top-data__box-top {
    font-size: 24px;
  }

  .top-data__box-num {
    font-size: 18vw;
  }

  .top-data__box-unit {
    font-size: 12vw;
  }

  .top-data__box-bottom {
    font-size: 16px;
    margin-top: 15px;
  }

  .top-data__actions .common-btn__main {
    width: 100%;
    max-width: 340px;
    height: 74px;
    padding-right: 55px;
  }
}


/* ==========================================
   Featureセクション 基本構造
   ========================================== */
.top-feature {
  position: relative;
  width: 100%;
  padding: 140px 0;
  /* 背景画像はCSS側で相対指定（ノーインライン） */
  background-image: url('./images/feature_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

/* ヘッダーエリア（見出しと日本語の下揃え） */
.top-feature__header {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 80px;
}

.top-feature__title-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.top-feature__subtitle {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  /* 白文字指定 */
  line-height: 1.0;
}


/* --- 【参考コード昇華】スタッキングカード・ロジック --- */
.top-feature__list {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  /* ボトムアクションまでの隙間 */
}

.top-feature__card {
  background-color: #ffffff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 100%;
}

/* 各カードに position: sticky を適用し、スクロール時に少しずつ
  段階的なトップ位置へ固定されることで、重なり（スタック）を表現します。
*/
.top-feature__card--01 {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  margin-bottom: 40px;
}

.top-feature__card--02 {
  position: -webkit-sticky;
  position: sticky;
  top: 130px;
  /* 1枚目の上部が30px見えるように調整 */
  margin-top: 100px;
  margin-bottom: 40px;
}

.top-feature__card--03 {
  position: -webkit-sticky;
  position: sticky;
  top: 160px;
  /* 2枚目の上部が見えるように調整 */
  margin-top: 100px;
  margin-bottom: 0;
}


/* --- カード内部レイアウト（左右フレックス構造） --- */
.top-feature__card-container {
  display: flex;
  align-items: stretch;
  /* 左右の高さを均等に自動同期 */
  width: 100%;
}

/* 左側：ビジュアル画像領域 */
.top-feature__card-visual {
  flex: 1;
  max-width: 50%;
  /* 左右50%ずつに均等分割 */
  overflow: hidden;
}

.top-feature__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右側：テキストコンテンツ領域 */
.top-feature__card-content {
  flex: 1;
  max-width: 50%;
  padding: 60px 80px 60px 60px;
  /* 右側にドットスペースを確保 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* ドット絶対配置の基準 */
}

/* FEATURE 01 タイトルラベル部 */
.top-feature__card-label-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 15px;
}

.top-feature__card-label {
  color: #8f060d;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.0;
  padding-bottom: 8px;
  /* 数字とのボトムライン微調整 */
}

.top-feature__card-number {
  color: #8f060d;
  font-size: 64px;
  font-weight: 700;
  line-height: 0.9;
}

/* カードメインタイトル */
.top-feature__card-title {
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  line-height: 1.3;
  margin-bottom: 40px;
}

/* 特定キーワードの赤文字化（修飾Modifier） */
.top-feature__card-title--highlight {
  color: #8f060d;
}

/* 本文テキスト */
.top-feature__card-text {
  font-size: 16px;
  font-weight: 700;
  /* 指定の太字指定 */
  line-height: 1.8;
  color: #111111;
  max-width: 600px;
  width: 100%;
}


/* --- 右端：3連縦並びドットナビゲーション --- */
.top-feature__card-dots {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-feature__card-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #babec0;
  /* 非アクティブ色 */
  transition: background-color 0.3s ease;
}

.top-feature__card-dot--active {
  background-color: #8f060d;
  /* アクティブ色 */
}


/* --- ボトムアクションエリア --- */
.top-feature__actions {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  /* カードの下50px配置 */
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .top-feature {
    padding: 80px 0;
  }

  .top-feature__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 40px;
  }

  .top-feature__subtitle {
    font-size: 28px;
  }

  /* カード内部を縦並び（画像が上、テキストが下）に変更 */
  .top-feature__card-container {
    flex-direction: column;
  }

  .top-feature__card-visual,
  .top-feature__card-content {
    max-width: 100%;
    width: 100%;
  }

  .top-feature__card-visual {
    aspect-ratio: 16 / 10;
  }

  .top-feature__card-content {
    padding: 40px 20px 60px;
    /* 下部にドット用の余白を確保 */
  }

  .top-feature__card-number {
    font-size: 48px;
  }

  .top-feature__card-title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .top-feature__card-text {
    font-size: 15px;
  }

  .top-feature__card-text br {
    display: none;
    /* スマホでの変な位置での改行を防止 */
  }

  /* スマホ時はドットナビをカード下部の中央横並びへとスタイリッシュにスイッチ */
  .top-feature__card-dots {
    right: 25px;
    top: auto;
    bottom: 20px;
    flex-direction: row;
    gap: 10px;
  }
}


/* ==========================================
   Interview & News 共通背景ラッパー
   ========================================== */
.top-interview-news {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* 画像は後から設置されるカバー指定（アセット画像パスをあらかじめセット） */
  background-image: url('./images/interview_news_total_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 200px 0;
  overflow: hidden;
  box-sizing: border-box;
}


/* ==========================================
   1. Interview セクション
   ========================================== */
.top-interview {
  position: relative;
  z-index: 5;
  margin-bottom: 340px;
  /* Newsセクションとの間の180px指定隙間 */
}

/* ヘッダーエリア */
.top-interview__header {
  position: relative;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 80px;
}

.top-interview__header-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  z-index: 1;
  pointer-events: none;
}

.top-interview__header-bg-img {
  width: 100%;
  height: auto;
  display: block;
}

.top-interview__title {
  position: relative;
  z-index: 2;
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
}

/* 3連カードレイアウト */
.top-interview__contents {
  display: flex;
  gap: 30px;
  margin-bottom: 80px;
}

.top-interview__card {
  flex: 1;
}

.top-interview__card-inner {
  position: relative;
  width: 100%;
  /* w3:h4（縦横比 3:4）をCSSで完全に固定担保する構造 */
  aspect-ratio: 3 / 4;
}

.top-interview__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 【修正版】左上：5px飛び出る180pxの赤透明三角形バッジ（外枠コンテナ） */
.top-interview__profile-badge {
  position: absolute;
  top: -5px;
  /* 5px上へ飛び出す */
  left: -5px;
  /* 5px左へ飛び出す */
  width: 180px;
  height: 180px;
  z-index: 3;
  /* 親要素からの clip-path と background-color を削除して文字の消失を防ぐ */
}

/* 【追加】背景の三角形だけを別レイヤーとして後ろで切り抜く */
.top-interview__profile-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 三角形をここで切り抜く */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-color: rgba(143, 6, 13, 0.7);
  z-index: 1;
  /* テキストの背面に配置 */
}

/* プロフィールテキスト（切り抜きから完全に保護） */
.top-interview__profile-content {
  position: absolute;
  top: 20px;
  left: 20px;
  text-align: left;
  z-index: 2;
  /* 三角形背景（z-index: 1）の前面へ強制浮上 */
}

.top-interview__profile-name {
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 5px;
  white-space: nowrap;
}

.top-interview__profile-year {
  color: #e8e8e8;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.0;
}

/* 【スクショ解析】右下：370pxの赤透明長方形メッセージバッジ */
.top-interview__msg-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 360px;
  box-sizing: border-box;
  padding: 25px;
  z-index: 3;
  background-color: rgba(143, 6, 13, 0.7);
  /* #8F060D の opacity:0.7 */
}

.top-interview__msg-text {
  color: #ffffff;
  font-family: "Zen Kurenaido", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

/* アクションエリア */
.top-interview__actions {
  display: flex;
  align-items: center;
}

.top-interview__sub-links {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-left: 60px;
}


/* ==========================================
   2. News（施工事例・お知らせ）セクション
   ========================================== */
.top-news {
  position: relative;
  width: 100%;
}

/* 【デザイン完全再現】 Examples / News 巨大背景の全画面絶対配置（左端35px固定） */
.top-news__header-bg-wrap {
  position: absolute;
  top: -140px;
  left: 35px;
  width: 93%;
  max-width: 1528px;
  z-index: 1;
  pointer-events: none;
}

.top-news__header-bg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ヘッダータイトル（1440pxのコンテンツ幅の左端に完全一致） */
.top-news__inner {
  position: relative;
  z-index: 2;
  margin-bottom: 80px;
}

.top-news__title {
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  line-height: 1.0;
  text-align: left;
}

/* スライダーレイアウト（画面外フェードアウト・インナー開始位置同期） */
.top-news__slider-container {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-bottom: 50px;
}

.top-news__swiper {
  width: 100%;
  /* スライダーの開始左端を1440pxインナーの左端位置（50vw - 700px）へ完全に吸着させる極上設計 */
  padding-left: calc(50vw - 700px);
  overflow: visible;
  /* 右側は画面外へ無限に突き抜けさせる */
}

.top-news__slide {
  width: 535px;
  /* 参考コード指定のカードサイズ */
  height: auto;
}

.top-news__card {
  display: block;
  text-decoration: none;
  color: #111111;
}

.top-news__card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #ffffff;
  margin-bottom: 15px;
}

.top-news__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.top-news__card:hover .top-news__card-img {
  transform: scale(1.08);
}

/* メタ情報 */
.top-news__card-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

/* 【カテゴリ色分岐条件設定】 */
.top-news__card-tag {
  color: #ffffff;
  font-size: 20px;
  padding: 8px 0;
  line-height: 1.0;
  width: 155px;
  text-align: center;
  font-weight: 700;
}

/* 「お知らせ」カテゴリ（スラッグ例: news）➔ 背景#111 */
.top-news__card-tag--news,
.top-news__card-tag--default {
  background-color: #111111;
}

/* 「施工事例」カテゴリ（スラッグ例: examples）➔ 背景#B81727 */
.top-news__card-tag--examples {
  background-color: #b81727;
}

.top-news__card-date {
  font-size: 18px;
  color: #111111;
  font-weight: 700;
}

.top-news__card-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  /* 2行以上のタイトルを綺麗に三点リーダーで省略する安全ガード */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* --- スライダーコントロールエリア --- */
.top-news__controls {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* スクリプト連動・指定色カスタムスクロールバー */
.top-news__scrollbar.swiper-scrollbar {
  position: relative;
  left: 0;
  bottom: 0;
  width: calc(100% - 430px);
  height: 8px;
  background-color: #e8e8e8;
  border-radius: 0;
}

.top-news__scrollbar .swiper-scrollbar-drag {
  background-color: #8f060d;
  /* アクティブドラッグバー色 */
  border-radius: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .top-interview-news {
    padding: 80px 0;
  }

  /* --- 1. Interview スマホ対応 --- */
  .top-interview {
    margin-bottom: 100px;
  }

  .top-interview__header-bg {
    width: 100%;
    max-width: 320px;
  }

  .top-interview__title {
    font-size: 24px;
  }

  .top-interview__contents {
    flex-direction: column;
    gap: 40px;
  }

  /* スマホの横幅に合わせてバッジの文字サイズをフルスケール最適化 */
  .top-interview__profile-badge {
    width: 120px;
    height: 120px;
  }

  .top-interview__profile-content {
    top: 10px;
    left: 10px;
  }

  .top-interview__profile-name {
    font-size: 28px;
  }

  .top-interview__profile-year {
    font-size: 14px;
  }

  .top-interview__msg-badge {
    width: 100%;
    padding: 15px;
    bottom: 0;
    right: 0;
  }

  .top-interview__msg-text {
    font-size: 18px;
  }

  .top-interview__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .top-interview__sub-links {
    margin-left: 0;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    gap: 20px;
  }

  .top-interview__sub-links .common-link__sub {
    width: 100%;
    justify-content: space-between;
  }

  .top-interview__actions .common-btn__main {
    width: 100%;
    max-width: 340px;
    height: 74px;
    padding-right: 55px;
  }

  /* --- 2. News スマホ対応 --- */
  .top-news__header-bg-wrap {
    width: 85%;
    left: 15px;
    top: -15%;
  }

  .top-news__title {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .top-news__swiper {
    padding-left: 20px;
    /* スマホ時のコンテナ位置調整 */
  }

  .top-news__slide {
    width: 280px;
    /* スマホで見やすいカード幅へ縮小 */
  }

  .top-news__card-tag {
    font-size: 14px;
    width: 100px;
    padding: 5px 0;
  }

  .top-news__card-date {
    font-size: 14px;
  }

  .top-news__card-title {
    font-size: 16px;
  }

  /* スマホ時はコントロールを縦積みに変更（はみ出し防止） */
  .top-news__controls {
    flex-direction: column;
    gap: 30px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .top-news__scrollbar.swiper-scrollbar {
    width: 100%;
  }

  .top-news__btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .top-news__btn-wrap .common-btn__main {
    width: 100%;
    max-width: 340px;
    height: 74px;
    padding-right: 55px;
  }
}


/* ==========================================
   FAQセクション 全体・背景レイアウト
   ========================================== */
.top-faq {
  position: relative;
  width: 100%;
  background-color: #8f060d;
  /* 指示の背景色 */
  padding-top: 140px;
  overflow: hidden;
  box-sizing: border-box;
}

/* --- 【指示デザイン完全再現】背景装飾の3枚のランダム絶対配置 --- */
.top-faq__decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

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

/* 1. 右上部：400px画像 */
.top-faq__decor--rect-top {
  top: 100px;
  right: -20px;
  width: 400px;
}

/* 2. 左中央付近：290px画像 */
.top-faq__decor--rect-center {
  top: 35%;
  left: -30px;
  width: 200px;
}

/* 3. 左下部：750px画像 */
.top-faq__decor--rect-bottom {
  bottom: 20%;
  left: 130px;
  width: 650px;
}

/* コンテンツインナー（幅1100pxの特別指示） */
.top-faq__inner.w-1100 {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* ヘッダータイトル（中央寄せ） */
.top-faq__header {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

.top-faq__title-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.top-faq__actions {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}


/* ==========================================
   【独立コンポーネント】共通アコーディオン仕様（他ページ連動）
   ========================================== */
.common-faq {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* ボックス間は30px指定 */
}

.common-faq__item {
  background-color: #ffffff;
  /* 背景白 */
  border-radius: 0;
  /* 角丸は0指定 */
  margin: 0;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* --- 質問（クリックエリア） --- */
.common-faq__question {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30px 80px 30px 30px;
  /* 右側にプラスマイナス用の空間を確保 */
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
}

/* Qアイコン：40px四方・背景#111 */
.common-faq__icon-q {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #111111;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 25px;
}

.common-faq__question-text {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  line-height: 1.4;
  text-align: left;
}

/* 右側：30pxのCSS自作プラスマイナスアイコン（太さ2px） */
.common-faq__toggle-mark {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}

/* 横線 */
.common-faq__toggle-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  /* 太さ2px指定 */
  background-color: #111111;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

/* 縦線（プラスを形成） */
.common-faq__toggle-mark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  /* 太さ2px指定 */
  height: 100%;
  background-color: #111111;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* アコーディオンが開いている（.is-open）状態の挙動 */
.js-faq-item.is-open .common-faq__toggle-mark::before {
  transform: translateY(-50%) rotate(180deg);
  /* マイナス状態（横線はそのまま） */
}

.js-faq-item.is-open .common-faq__toggle-mark::after {
  transform: translateX(-50%) rotate(180deg);
  opacity: 0;
  /* 縦線を消すことでプラスからマイナスへ滑らかに変形 */
}


/* --- 回答（コンテンツ展開エリア） --- */
.common-faq__answer {
  margin: 0;
  padding: 0 30px;
  /* 【修正】左右の余白30pxをここに移植（縦の高さ0frの計算を絶対に邪魔しません） */
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease;
}

.common-faq__answer>* {
  min-height: 0;
}

/* 開いた時はインナーの高さ分だけ自動でグリッドを展開 */
.js-faq-item.is-open .common-faq__answer {
  grid-template-rows: 1fr;
}

.common-faq__answer-inner {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 0;
  box-sizing: border-box;
}

/* Aアイコン：40px四方・背景#B81727 */
.common-faq__icon-a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #b81727;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 25px;
  margin-bottom: 40px;
}

.common-faq__answer-text {
  line-height: 1.8;
  text-align: left;
  margin-bottom: 40px;
}


/* ==========================================
   【重要】フッター応募フォーム被り用の共通スペーサー
   ここで高さを一括管理するため、後からの修正や子ページ調整が非常に容易です
   ========================================== */
.common-spacer__footer-overlap {
  width: 100%;
  height: 350px;
  /* 被るフォームの高さに合わせてここで自在に高さを調整できます */
  background-color: transparent;
  pointer-events: none;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .top-faq {
    padding-top: 80px;
  }

  /* 背景画像のスマホスケールダウン */
  .top-faq__decor--rect-top {
    width: 180px;
  }

  .top-faq__decor--rect-center {
    width: 130px;
  }

  .top-faq__decor--rect-bottom {
    width: 320px;
    bottom: 50px;
  }

  .top-faq__header {
    margin-bottom: 40px;
  }

  .common-faq {
    gap: 15px;
  }

  .common-faq__question {
    padding: 20px 60px 20px 15px;
  }

  .common-faq__question-text {
    font-size: 16px;
  }

  .common-faq__toggle-mark {
    right: 15px;
    width: 20px;
    height: 20px;
  }

  .common-faq__answer {
    padding: 0 15px;
  }

  .common-faq__answer-inner {
    padding: 0;
  }

  .common-faq__icon-a {
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-right: 15px;
    margin-bottom: 25px;
  }

  .common-faq__answer-text {
    font-size: 14px;
    margin-bottom: 25px;

    br {
      display: none;
      /* スマホでの不自然な改行位置をリセット */
    }
  }

  .top-faq__actions {
    margin-top: 40px;
  }

  .top-faq__actions .common-btn__main {
    width: 100%;
    max-width: 340px;
    height: 74px;
    padding-right: 55px;
  }

  /* スマホ時のフッター重なり余白の調整 */
  .common-spacer__footer-overlap {
    height: 180px;
  }
}




/* ==========================================
   子ページ背景画像・一括管理エリア（スマホ・PC完全同期）
   ========================================== */

.page-main--privacy .page-fv {
  background-image: url('./images/privacy_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--privacy .page-fv {
    background-image: url('./images/privacy_fv-sp.jpg');
  }
}

.page-main--company .page-fv {
  background-image: url('./images/company_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--company .page-fv {
    background-image: url('./images/company_fv-sp.jpg');
  }
}

.page-main--work .page-fv {
  background-image: url('./images/work_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--work .page-fv {
    background-image: url('./images/work_fv-sp.jpg');
  }
}

.page-main--environment .page-fv {
  background-image: url('./images/environment_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--environment .page-fv {
    background-image: url('./images/environment_fv-sp.jpg');
  }
}

.page-main--recruit .page-fv {
  background-image: url('./images/recruit_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--recruit .page-fv {
    background-image: url('./images/recruit_fv-sp.jpg');
  }
}

.page-main--posts .page-fv {
  background-image: url('./images/posts_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--posts .page-fv {
    background-image: url('./images/posts_fv-sp.jpg');
  }
}

.page-main--contact .page-fv {
  background-image: url('./images/contact_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--contact .page-fv {
    background-image: url('./images/contact_fv-sp.jpg');
  }
}

.page-main--faq .page-fv {
  background-image: url('./images/faq_fv.jpg');
}

@media screen and (max-width: 767px) {
  .page-main--faq .page-fv {
    background-image: url('./images/faq_fv-sp.jpg');
  }
}


/* ==========================================
   子ページファーストビュー（page-fv）基本構造共通定義
   ========================================== */
.page-fv {
  position: relative;
  width: 100%;
  height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-fv__content {
  text-align: center;
}

.page-fv__title {
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
  margin-bottom: 50px;
}

.page-fv__eng-wrap {
  position: relative;
  display: inline-block;
  line-height: 1.0;
}

.page-fv__eng-large {
  display: block;
  color: #ffffff;
  font-size: 125px;
  font-weight: 700;
  line-height: 1.0;
  opacity: 0.3;
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
  user-select: none;
}

.page-fv__eng-small {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.0;
  white-space: nowrap;
  letter-spacing: 0.06em;
}

@media screen and (max-width: 767px) {
  .page-fv {
    height: 400px;
  }

  .page-fv__title {
    font-size: 32px;
    margin-bottom: 0;
  }

  .page-fv__eng-large {
    font-size: 15.5vw;
  }

  .page-fv__eng-small {
    font-size: 24px;
  }
}

/* --- パンくずリスト --- */
.breadcrumb {
  margin: 50px auto 80px;
  font-size: 20px;
}

.breadcrumb_inner {
  display: flex;
  align-items: center;
  line-height: 1;
  font-weight: 700;
}

.breadcrumb_divider {
  margin: 0 15px;
  width: 18px;
  display: block;
}

.breadcrumb_divider img {
  display: block;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .breadcrumb {
    margin: 30px auto 0;
    font-size: 16px;
  }
}

/* ==========================================
   Common: 関連リンク セクション専用外観スタイル
   ========================================== */

/* --- 1. 通常モード（白背景ベース） --- */
.common-related {
  position: relative;
  width: 100%;
  padding: 140px 0 0;
  background-color: #ffffff;
  /* 指定：背景は#fff */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.common-related__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 大見出しコンテナ */
.common-related__heading-wrap {
  width: 100%;
  padding-bottom: 30px;
  /* 指定：下30pxに線 */
  border-bottom: 2px solid #8f060d;
  /* 指定：2px solid #8F060Dの線 */
  margin-bottom: 50px;
  /* 指定：その下50pxにバナーリンク */
}

/* 大見出しタイトル */
.common-related__title {
  color: #8f060d;
  /* 指定：color: #8F060D */
  font-size: 48px;
  /* 指定：font-size: 48px */
  font-weight: 700;
  /* 指定：font-weight: 700 */
  line-height: 1.0;
  margin: 0;
  text-align: left;
  transition: color 0.4s ease;
}


/* --- 2. 【指示発展対応】赤背景 Modifier（common-related--bg-red） --- */
.common-related--bg-red {
  background-color: #8f060d;
  /* 指定：#8F060D背景のバージョン */
}

/* 赤背景の時は、大見出しと下線も#fff（真っ白）に自動チェンジ */
.common-related--bg-red .common-related__heading-wrap {
  border-bottom-color: #ffffff;
}

.common-related--bg-red .common-related__title {
  color: #ffffff;
}


/* --- 3. 2×2 バナーリンクグリッドロジック --- */
.common-related__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  /* 指定：gap15px */
  width: 100%;
}

/* 各バナーカード（指定：1100px時 w542px h226px ➔ 比率を保つ固定高アスペクト仕様） */
.common-related__card {
  position: relative;
  width: calc((100% - 15px) / 2);
  /* 2列グリッド（隙間15pxを引いて2等分） */
  height: 226px;
  /* 指定：h226pxほど */
  overflow: hidden;
  /* 【重要】ホバー時に中の画像がはみ出さないための絶対マスク */
  display: block;
  box-sizing: border-box;
}

/* 背景画像格納ラッパー */
.common-related__img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.common-related__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠いっぱいに写真を綺麗にフィッティング */
  display: block;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.common-related__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(143, 6, 13, 0.2);
  z-index: 2;
  transition: background-color 0.4s ease;
}

/* 前面テキストエリア（指定：padding30pxくらい / 左上配置） */
.common-related__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  /* 指定：padding30pxくらい */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 左上配置 */
  justify-content: flex-start;
  z-index: 3;
  /* オーバーレイの手前に重ねる */
  box-sizing: border-box;
}

/* カード見出し（日本語：48px / Bold） */
.common-related__card-title {
  color: #ffffff;
  /* 指定：color: #FFF; */
  font-size: 48px;
  /* 指定：font-size: 48px; */
  font-weight: 700;
  /* 指定：font-weight: 700; */
  line-height: 1.0;
  /* 指定：line-height:1; */
  display: block;
  margin-bottom: 15px;
  /* 指定：その15px下に英語 */
}

/* カードサブ（英語：16px / Bold） */
.common-related__card-sub {
  color: #ffffff;
  /* 指定：color: #FFF; */
  font-weight: 700;
  /* 指定：font-weight: 700; */
  line-height: 1.0;
  /* 指定：line-height:1; */
  display: block;
}


/* --- 4. 【指示完全再現】ホバーアクションエフェクト --- */
.common-related__card:hover .common-related__img {
  transform: scale(1.08);
  /* 【指定】ホバー時には中の画像が少しzoomイン */
}

/* マウスホバー時に薄い赤のオーバーレイを少しだけクリアにし、写真の躍動感をアップさせる実務テクニック */
.common-related__card:hover .common-related__overlay {
  background-color: rgba(143, 6, 13, 0.12);
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .common-related {
    padding: 80px 0 0;
  }

  /* 見出しのサイズと余白をスマホ用に最適化 */
  .common-related__heading-wrap {
    padding-bottom: 18px;
    margin-bottom: 35px;
  }

  .common-related__title {
    font-size: 28px;
  }

  /* スマホの狭い画面幅では2列だと文字が溢れるため、綺麗に1列（縦積み）にスイッチ */
  .common-related__grid {
    flex-direction: column;
    gap: 12px;
  }

  .common-related__card {
    width: 100% !important;
    /* 横幅100%いっぱいに */
    height: 140px;
    /* スマホ画面で邪魔にならない美しい高さに調整 */
  }

  /* パディングをスマホ用に最適化 */
  .common-related__body {
    padding: 20px;
  }

  /* 【はみ出し・文字潰れ完全防御】巨大な48pxの日本語タイトルをスマホ向けに最適スケールダウン */
  .common-related__card-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .common-related__card-sub {
    font-size: 13px;
  }
}

/* ==========================================
   プライバシーポリシー 固有スタイル
   ========================================== */
.privacy_lead {
  margin-bottom: 60px;
}

.privacy_section {
  margin-bottom: 50px;
}

.privacy_heading {
  font-size: 18px;
  margin-bottom: 20px;
  display: block;
}

.privacy_list {
  margin-top: 15px;
  padding-left: 1.5em;
}

.privacy_list li {
  list-style: disc;
  line-height: 1.8;
  margin-bottom: 10px;
}

.privacy_contact_info {
  margin-top: 30px;
}

.privacy_content {
  padding-bottom: 75px;
  margin-top: 50px;
}

@media screen and (max-width: 767px) {
  .privacy_lead {
    margin-bottom: 40px;
  }

  .privacy_section {
    margin-bottom: 40px;
  }

}


/* ==========================================
   Company イントロセクション 固有スタイル
   ========================================== */
.company-intro {
  position: relative;
  width: 100%;
  padding: 140px 0;
  /* 上下のセクションベース余白 */
  background-color: #ffffff;
  /* ベース背景白 */
  box-sizing: border-box;

  background-image: url('images/company_intro_bg.png');
  background-size: 93.2% auto;
  /* 1920px時に長さ1790px相当 */
  background-position: right 150px;
  /* トップから150pxの位置 */
  background-repeat: no-repeat;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.company-intro__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 内部コンテンツをすべて中央揃え */
  text-align: center;
}

/* 1. 上部画像エリア */
.company-intro__visual {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.company-intro__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2. 中央メイン見出し */
.company-intro__heading {
  font-size: 48px;
  font-weight: 700;
  color: #111111;
  line-height: 1.4;
  margin-top: 80px;
  /* 画像の下から80px */
  margin-bottom: 0;
  letter-spacing: 0.03em;
}

/* 「信頼を積み重ねる」の赤指定（#8F060D） */
.company-intro__heading-highlight {
  color: #8f060d;
}

/* 3. 本文テキスト */
.company-intro__text {
  font-size: 20px;
  line-height: 2.2;
  /* 行間をゆったり取る */
  margin-top: 50px;
  margin-bottom: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .company-intro {
    padding: 80px 0;
    background-size: 100% auto;
    background-position: center 60px;
  }

  /* 見出しスマホ用調整 */
  .company-intro__heading {
    font-size: 24px;
    margin-top: 40px;
    line-height: 1.5;
  }

  /* 本文テキストスマホ用調整 */
  .company-intro__text {
    font-size: 15px;
    margin-top: 30px;
    line-height: 2.0;
  }

  .company-intro__text br {
    display: none;
    /* スマホ画面での強制改行を無効化し、自動折り返しにする */
  }
}


/* ==========================================
   共通コンポーネント：子ページ内アンカーナビ
   ========================================== */
.common-page-nav {
  width: 100%;
}

.common-page-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  /* 指定のgap30px */
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.common-page-nav__item {
  flex: 1;
  width: 100%;
}

.common-page-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  /* 押しやすい高さを確保 */
  background-color: #8f060d;
  /* 指定背景色 */
  color: #ffffff;
  /* 指定テキスト色 */
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  padding-right: 45px;
  /* 右側の矢印スペースを確保 */
}

/* 指定：右側15pxの位置に設置される w20px h10px の下向き矢印（太さ2px） */
.common-page-nav__arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 10px;
  overflow: hidden;
}

/* CSSによるV字下向き矢印の形成 */
.common-page-nav__arrow::after {
  content: "";
  position: absolute;
  top: -7px;
  /* 上に持ち上げて先端だけを下部に見せる調整 */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-right: 2px solid #ffffff;
  /* 太さ2px */
  border-bottom: 2px solid #ffffff;
}


/* ==========================================
   共通コンポーネント：サブページ大見出し
   ========================================== */
.common-subpage-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.common-subpage-heading__eng {
  color: #8f060d;
  font-size: 64px;
  font-weight: 900;
  line-height: 1.0;
  margin-bottom: 10px;
}

.common-subpage-heading__jp {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
  margin: 0;
}


/* ==========================================
   Company: 数字で知る セクション固有スタイル
   ========================================== */
.company-data {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  background-color: #ffffff;
  /* 背景白指定 */
  box-sizing: border-box;
}

/* アンカーナビの下140pxにあける設定 */
.company-data__nav-wrap {
  margin-bottom: 140px;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.company-data__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 大見出しの下100pxあける設定 */
.company-data__heading-wrap {
  margin-bottom: 100px;
}

/* 2つずつ横並びの8ボックス構造（gap50px） */
.company-data__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2列横並び */
  gap: 50px;
  /* 指定のgap50px */
  width: 100%;
}

.company-data__box {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  padding: 50px;
  /* 指定のpadding50px */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 30px;
  /* アイコンとテキストのgap30px指定 */
}

/* 左側：アイコン領域 */
.company-data__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  /* max w150px / h150px 指定 */
  height: 150px;
  flex-shrink: 0;
}

.company-data__icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 右側：テキスト領域 */
.company-data__content {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* 1行目：項目名 */
.company-data__label {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* 2行目：数値と単位の複合ブロック */
.company-data__value {
  display: flex;
  align-items: baseline;
  /* 数字と日本語の足元（ベースライン）を綺麗に揃える */
  justify-content: center;
  color: #8f060d;
  /* 指定色 */
  margin-bottom: 12px;
}

/* 数字部分（50px） */
.company-data__value-num {
  font-size: 50px;
  font-weight: 900;
  line-height: 1.0;
}

/* 日本語部分（32px） */
.company-data__value-unit {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.0;
  margin-left: 4px;
}

/* 3行目：補足テキスト */
.company-data__note {
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .company-data {
    padding: 60px 0 80px;
  }

  .company-data__nav-wrap {
    margin-bottom: 60px;
  }

  /* スマホ時はナビを縦並びにスイッチしてはみ出し防止 */
  .common-page-nav__list {
    flex-direction: column;
    gap: 12px;
  }

  .common-page-nav__link {
    height: 54px;
    font-size: 16px;
  }

  .company-data__heading-wrap {
    margin-bottom: 50px;
  }

  .common-subpage-heading__eng {
    font-size: 44px;
  }

  .common-subpage-heading__jp {
    font-size: 24px;
  }

  /* 2列から1列の縦並びへコンバート */
  .company-data__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* スマホに最適化したパディングと要素配置（見やすさ優先で上下積みに変更） */
  .company-data__box {
    padding: 30px 20px;
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .company-data__icon-wrap {
    width: 100px;
    height: 100px;
  }

  .company-data__content {
    align-items: center;
    text-align: center;
  }

  .company-data__label {
    font-size: 22px;
  }

  .company-data__value {
    justify-content: center;
  }

  .company-data__value-num {
    font-size: 38px;
  }

  .company-data__value-unit {
    font-size: 22px;
  }

  .company-data__note {
    font-size: 16px;

    br {
      display: inline;
      /* 「施工実績」内の補足改行のみスマホでも自然に維持 */
    }
  }
}



/* ==========================================
   Company: 代表挨拶 セクション固有スタイル
   ========================================== */
.company-message {
  position: relative;
  width: 100%;
  padding: 140px 0;
  /* 上下のセクションセパレート余白 */
  background-color: #ffffff;
  /* 背景白指定 */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.company-message__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 大見出しの下を100pxあける設定 */
.company-message__heading-wrap {
  margin-bottom: 100px;
}

/* 【指示完全再現】横幅・gapをすべて%計算で算出したフレックス構造 */
.company-message__container {
  display: flex;
  align-items: flex-start;
  /* 上端揃え */
  justify-content: space-between;
  width: 100%;
  /* 40.0% (画像) + 7.3% (隙間) + 52.7% (本文) = 計100% */
  gap: 7.3%;
}

/* 左側：写真領域（440px / 1100px = 40.0%） */
.company-message__visual {
  width: 40.0%;
  flex-shrink: 0;
}

.company-message__img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  /* 柔らかなシャドウで高級感をプラス */
}

/* 右側：テキスト領域（580px / 1100px = 52.7%） */
.company-message__body {
  width: 52.7%;
  display: flex;
  flex-direction: column;
}

/* メッセージ本文 */
.company-message__text {
  text-align: left;
  /* 本文は左詰め */
  margin-top: 0;
  margin-bottom: 50px;
  /* 署名までの余白 */
}

/* 右詰め署名エリア */
.company-message__signature {
  text-align: right;
  /* 全体を右詰め */
}

.company-message__company-name {
  margin-top: 0;
  margin-bottom: 8px;
}

.company-message__ceo-name {
  margin: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .company-message {
    padding: 80px 0;
  }

  .company-message__heading-wrap {
    margin-bottom: 50px;
  }

  /* スマホ時は%の横並びを解除し、上から画像➔本文の綺麗な1列にする */
  .company-message__container {
    flex-direction: column;
    gap: 40px;
    /* スマホ時の上下間隔 */
  }

  /* スマホ時は両方とも横幅100%いっぱいに広げる */
  .company-message__visual,
  .company-message__body {
    width: 100%;
  }

  .company-message__visual {
    max-width: 340px;
    /* スマホで代表写真が巨大化しすぎないよう安全ガード */
    margin: 0 auto;
    /* 画像はスマホ中央寄せ */
  }

  .company-message__text {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
  }

  .company-message__company-name {
    font-size: 15px;
  }

  .company-message__ceo-name {
    font-size: 20px;
  }

  /* スマホの狭い画面幅で不自然な位置での改行を防ぐ（前回の鉄板ルール） */
  .company-message__text br {
    display: none;
  }
}


/* ==========================================
   共通コンポーネント：サブページ大見出し（白文字Modifier追加）
   ========================================== */
.common-subpage-heading--white .common-subpage-heading__eng {
  color: #ffffff;
  /* 英語タイトルを白に変更 */
}

.common-subpage-heading--white .common-subpage-heading__jp {
  color: #ffffff;
  /* 日本語タイトルを白に変更 */
}


/* ==========================================
   Company: 会社概要 セクション固有スタイル
   ========================================== */
.company-about {
  position: relative;
  width: 100%;
  padding: 140px 0;
  /* 上下のセクションセパレート余白 */
  /* 指定のグラデーション背景を全画面に適用 */
  background: linear-gradient(312deg, #8f060d 59.46%, #b81727 100%);
  box-sizing: border-box;
}

/* 見出しの下を100pxあける設定 */
.company-about__heading-wrap {
  margin-bottom: 100px;
}

/* --- 【デザイン完全再現】最大幅1440pxの#fff背景ボックス --- */
.company-about__white-box.w-1440 {
  background-color: #ffffff;
  /* ボックス背景白 */
  margin: 0 auto;
  padding: 100px 0;
  /* 内部の表とマップの間隔、および上下の余白を100pxで統一管理 */
  box-sizing: border-box;
}

/* 白ボックス内のコンテンツをw-1100幅に絞る */
.company-about__content.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}


/* --- 会社概要テーブル構造 --- */
.company-about__table {
  width: 100%;
  border-collapse: collapse;
  /* 線の重複を防ぐ */
  margin-bottom: 100px;
  /* 表の下100pxにマップを配置する指定 */
}

.company-about__row {
  /* 各行の下に 2px #BABEC0 の線を設置 */
  border-bottom: 2px solid #babec0;
}

.company-about__th,
.company-about__td {
  /* 指定：テキストの上下に30pxのpadding / 左揃え・上揃え */
  padding: 30px 0;
  text-align: left;
  vertical-align: top;
  /* テキストはすべてbodyデフォルトをそのまま継承 */
}

/* 見出し（th）の横幅を適度に固定して、右側の情報（td）の開始位置を縦に美しく揃える */
.company-about__th {
  width: 220px;
  font-weight: 700;
  color: #111111;
}

.company-about__td {
  color: #111111;
  line-height: 1.6;
}


/* --- Google Map エリア（インラインスタイル完全排除版） --- */
.company-about__map {
  width: 100%;
  /* 指定の高さ280px固定 */
  height: 280px;
  box-sizing: border-box;
}

.company-about__iframe {
  width: 100%;
  height: 100%;
  border: none;
  /* iframe固有の枠線をCSSで消去 */
  display: block;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .company-about {
    padding: 80px 0;
  }

  .company-about__heading-wrap {
    margin-bottom: 50px;
  }

  /* スマホ時は1440pxの白ボックスの左右の角を無くし、画面いっぱいに広げてパディングを調整 */
  .company-about__white-box.w-1440 {
    padding: 50px 0;
  }

  /* テーブル構造をスマホ用に「縦積み（1列）」にコンバートしてはみ出しを100%防ぐ */
  .company-about__table {
    margin-bottom: 50px;
  }

  .company-about__row {
    display: flex;
    flex-direction: column;
    /* 上下に並べる */
    padding: 20px 0;
  }

  .company-about__th,
  .company-about__td {
    width: 100%;
    padding: 0;
  }

  .company-about__th {
    font-size: 15px;
    margin-bottom: 6px;
    /* 項目名と中身の間の微小な隙間 */
  }

  .company-about__td {
    font-size: 14px;
  }

  /* スマホ時のGoogle Mapの高さ最適化 */
  .company-about__map {
    height: 240px;
  }
}


/* ==========================================
   Work: 事業内容 セクション固有スタイル
   ========================================== */
.work-business {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  background-color: #ffffff;
  /* 背景白指定 */
  box-sizing: border-box;
}

/* アンカーナビの下140px空ける設定 */
.work-business__nav-wrap {
  margin-bottom: 140px;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.work-business__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 大見出しの下100px空ける設定 */
.work-business__heading-wrap {
  margin-bottom: 100px;
}

/* 事業内容ブロックの縦並びコンテナ */
.work-business__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

/* テキストと写真の横並びアイテム */
.work-business__item {
  display: flex;
  align-items: flex-start;
  /* 指示：上揃え */
  justify-content: space-between;
  /* 両端に配置して自動で6.4%の隙間を作る */
  width: 100%;
}

/* 【指示完全再現】テキストエリア（515px / 1100px = 46.8%） */
.work-business__body {
  width: 46.8%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* 【指示完全再現】写真エリア（515px / 1100px = 46.8%） */
.work-business__visual {
  width: 46.8%;
}

.work-business__img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- タイポグラフィ詳細設定 --- */

/* Work 01 / Work 02 の指定スタイル */
.work-business__number {
  display: block;
  color: #8f060d;
  /* 指定色 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.0;
  margin-bottom: 15px;
  /* その下15px */
  letter-spacing: 0.02em;
}

/* 見出しタイトル */
.work-business__title {
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 15px;
  /* その下15px */
  letter-spacing: 0.04em;
}

/* 本文テキスト */
.work-business__text {
  /* bodyデフォルトをそのまま継承 */
  line-height: 2.0;
  color: #111111;
  margin: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .work-business {
    padding: 60px 0 80px;
  }

  .work-business__nav-wrap {
    margin-bottom: 60px;
  }

  .work-business__heading-wrap {
    margin-bottom: 50px;
  }

  .work-business__list {
    gap: 60px;
  }

  /* スマホ時は%指定の横並びを解除し、上からテキスト➔写真の1列にする */
  .work-business__item {
    flex-direction: column;
    gap: 30px;
    /* テキストと写真の間の隙間 */
  }

  /* スマホ時は横幅100%いっぱいに広げる */
  .work-business__body,
  .work-business__visual {
    width: 100%;
  }

  .work-business__number {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .work-business__title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .work-business__text {
    font-size: 15px;
    line-height: 1.8;
  }

  /* スマホでの窮屈な改行バグを防ぐため、強制改行brを非表示に */
  .work-business__text br {
    display: none;
  }
}


/* ==========================================
   Work: やりがい セクション固有スタイル
   ========================================== */
.work-motivation {
  position: relative;
  width: 100%;
  padding: 140px 0;
  /* 上下のセクションセパレート余白 */
  background-color: #ffffff;
  /* 背景白指定 */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.work-motivation__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 大見出しの下100px空ける設定 */
.work-motivation__heading-wrap {
  margin-bottom: 100px;
}

/* 縦並びのボックスラッパー（ボックス間は30px指定） */
.work-motivation__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* 指定：ボックスの間は30px */
  width: 100%;
}

/* テキストボックス構造 */
.work-motivation__box {
  width: 100%;
  background-color: #ffffff;
  /* 指定：2px solid #8F060Dのborder */
  border: 2px solid #8f060d;
  padding: 40px 8%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: left;
  /* 内部テキストは左揃え */
}

/* ボックス内タイトルスタイル */
.work-motivation__box-title {
  color: #8f060d;
  /* 指定色 */
  font-size: 24px;
  /* 指定サイズ */
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 15px;
  /* 指定：その下15px */
  letter-spacing: 0.04em;
}

/* ボックス内本文テキスト */
.work-motivation__box-text {
  margin: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .work-motivation {
    padding: 80px 0;
  }

  .work-motivation__heading-wrap {
    margin-bottom: 50px;
  }

  .work-motivation__list {
    gap: 20px;
    /* スマホ時は隙間を少しコンパクトに */
  }

  /* スマホの画面幅に合わせてパディングを最適化 */
  .work-motivation__box {
    padding: 30px 20px;
    /* スマホ時は左右を20pxに固定して文字幅を確保 */
  }

  .work-motivation__box-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .work-motivation__box-text {
    font-size: 14px;
    line-height: 1.6;
  }

  /* スマホでの細切れ改行による読みづらさを防ぐ安全ガード */
  .work-motivation__box-text br {
    display: none;
  }
}


/* ==========================================
   Work: 画像ギャラリースライダー 固有スタイル
   ========================================== */
.work-slider {
  position: relative;
  width: 100%;
  padding: 100px 0;
  /* セクションの上下パディング */

  background: linear-gradient(to bottom, #ffffff 50%, #fff2f3 50%);
  box-sizing: border-box;
  overflow: hidden;
}

.work-slider__inner {
  width: 100%;
}

.work-slider__swiper {
  width: 100%;
  overflow: visible;
  /* 左右にスライドをはみ出させて全画面感を描写 */
}

/* --- 【参考コード昇華】各スライドアイテムの立体拡大縮小制御 --- */
.work-slider__item {
  /* 参考コード指定のサイズ */
  width: 322px;
  height: 243px;
  margin: 0 30px;
  /* スライド同士の横の隙間 */
  box-sizing: border-box;

  /* 初期状態（左右の背景に退くスライド）は少し縮小させておく */
  transform: translate3d(0px, 0, 0) scale(0.8) !important;
  transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;

  /* 【指示完全再現】border-radiusは無し（0） */
  border-radius: 0 !important;
  z-index: 1;
}

.work-slider__img-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.work-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 【参考コード昇華】中央付近のアクティブなスライドをダイナミックに等倍（100%）拡大 --- */
.swiper-slide-prev.work-slider__item,
.swiper-slide-next.work-slider__item {
  transform: translate3d(0px, 0, 0) scale(1) !important;
  /* 等倍サイズに浮き上がらせる */
  z-index: 10;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .work-slider {
    padding: 60px 0;
    /* スマホでも背景の上半分・下半分の比率を心地よく維持 */
    background: linear-gradient(to bottom, #ffffff 50%, #fff2f3 50%);
  }

  /* スマホの画面幅に合わせてスライドのサイズをスマートにスケールダウン */
  .work-slider__item {
    width: 240px;
    height: 181px;
    margin: 0 15px;
    /* スマホ時は隙間もハーフに */

    /* スマホでは縮小率を優しくして（0.9倍）、視認性を高く保つ */
    transform: translate3d(0px, 0, 0) scale(0.9) !important;
  }

  /* スマホ中央アクティブ化 */
  .swiper-slide-prev.work-slider__item,
  .swiper-slide-next.work-slider__item,
  .swiper-slide-active.work-slider__item {
    transform: translate3d(0px, 0, 0) scale(1) !important;
  }
}



/* ==========================================
   Work: 一日の流れ セクション固有スタイル（上部揃え修正版）
   ========================================== */
.work-schedule {
  position: relative;
  width: 100%;
  padding: 140px 0;
  background-color: #fff2f3;
  /* 背景色：#FFF2F3 */
  box-sizing: border-box;
}

.work-schedule__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.work-schedule__heading-wrap {
  margin-bottom: 40px;
}

.work-schedule__lead {
  font-size: 20px;
  line-height: 1.8;
  color: #111111;
  text-align: center;
  margin-top: 0;
  margin-bottom: 80px;
  letter-spacing: 0.03em;
}

/* --- タイムライン外殻（中央縦線の範囲制限） --- */
.work-schedule__timeline {
  position: relative;
  width: 100%;
  padding: 0;
}

/* 一番上（8:00バッジの中央）から一番下（18:00バッジの中央）までしか線を引かない絶対制御 */
.work-schedule__timeline::before {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background-color: #8f060d;
  z-index: 1;
}

/* 各時間ごとのコンテナ行 */
.work-schedule__block {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 80px;
  min-height: 130px;
  box-sizing: border-box;
  z-index: 2;
}

.work-schedule__block:last-child {
  margin-bottom: 0;
}

/* バッジが線の下に潜る現象を完全根絶するレイヤー構造 */
.work-schedule__time-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: #8f060d;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 4px solid #fff2f3;
  /* 背景色と同じ太枠で背後の中央線を美しく消去 */
  z-index: 10;
  /* 最前面に強制配置して上通りを完全に防ぐ */
}


/* --- 吹き出しの左右配置制御（突起位置を上部に固定） --- */

/* 8:00, 10:00, 17:00, 18:00 ➔ 吹き出しは右側寄せ */
.work-schedule__block--text-right {
  justify-content: flex-end;
}

/* 右側にある吹き出しの「左側（中央線側）」の【上部】に突起を出す */
.work-schedule__block--text-right .work-schedule__balloon::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 40px;
  transform: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffffff;
  /* 三角形を左に向ける */
}

/* 12:00, 15:00 ➔ 吹き出しは左側寄せ */
.work-schedule__block--text-left {
  justify-content: flex-start;
}

/* 左側にある吹き出しの「右側（中央線側）」の【上部】に突起を出す */
.work-schedule__block--text-left .work-schedule__balloon::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 40px;
  transform: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #ffffff;
}

/* 吹き出し（バルーン）本体共通 */
.work-schedule__balloon {
  position: relative;
  width: 44%;
  /* 中央線を絶対に越えない安全な横幅 */
  background-color: #ffffff;
  padding: 35px;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgba(143, 6, 13, 0.04);
  border-radius: 0 !important;
  /* 角丸は完全に排除（0） */
  z-index: 3;
}

.work-schedule__balloon-title {
  color: #8f060d;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 12px;
}

.work-schedule__balloon-text {
  font-size: 15px;
  line-height: 1.7;
  color: #111111;
  margin: 0;
}


/* --- 2つの時間をまとめて1枚にする、反対側の縦長大迫力画像レイアウト --- */
.work-schedule__visual {
  position: absolute;
  top: 0;
  width: 44%;
  /* 2ブロックの高さ(200%) ＋ ブロック間の隙間(80px) を自動計算して下の時間の真横までジャストで伸ばす */
  height: calc(200% + 80px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  z-index: 2;
}

/* 8:00と17:00のペア画像（吹き出しが右なので画像は左に絶対配置） */
.work-schedule__block--has-visual-left .work-schedule__visual {
  left: 0;
}

/* 12:00のペア画像（吹き出しが左なので画像は右に絶対配置） */
.work-schedule__block--has-visual-right .work-schedule__visual {
  right: 0;
}

.work-schedule__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .work-schedule {
    padding: 80px 0;
  }

  .work-schedule__lead {
    font-size: 15px;
    margin-bottom: 50px;
    text-align: left;

    br {
      display: none;
    }
  }

  /* スマホ時は中央線を左端（時間バッジの真裏）へシフト */
  .work-schedule__timeline::before {
    left: 35px;
    top: 25px;
    /* スマホバッジ（54px）の中心 */
    bottom: 25px;
    transform: none;
  }

  /* 複雑な重なり・反転をすべてフラットにし、見やすい1列の縦並びへ自動スイッチ */
  .work-schedule__block {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-left: 80px;
    margin-bottom: 50px;
  }

  .work-schedule__time-badge {
    left: 35px;
    top: 0;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    font-size: 13px;
    border-width: 2px;
  }

  .work-schedule__balloon {
    width: 100%;
    padding: 25px 20px;
    border-radius: 0 !important;
    /* スマホでも角丸0を完全に維持 */
  }

  .work-schedule__balloon::after {
    display: none !important;
    /* スマホ時は横の突起を非表示 */
  }

  .work-schedule__balloon-text br {
    display: none;
  }

  /* absoluteを解除し、各ペアの最初のテキストの下に綺麗に横長画像として収める安全設計 */
  .work-schedule__visual {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    /* スマホで見やすい横長比率に変形 */
    margin-top: 20px;
  }
}



/* ==========================================
   Environment: 先輩インタビュー
   ========================================== */
.env-interview {
  position: relative;
  width: 100%;
  padding: 100px 0 0;
  background-color: #ffffff;
  box-sizing: border-box;
}

.env-interview__nav-wrap {
  margin-bottom: 140px;
}

.env-interview__heading-wrap {
  margin-bottom: 100px;
}

/* インタビューボックスコンテナ */
.env-interview__list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* --- 各インタビューアイテム（全画面2色グラデーション背景） --- */
.env-interview__item {
  width: 100%;
  padding: 100px 0;
  box-sizing: border-box;
  background-image: linear-gradient(90deg, #fff2f3 0%, #fff2f3 65.2%, #ffffff 65.2%, #ffffff 100%);
  margin-bottom: 150px;
}

/* 最後のインタビューアイテムだけは、後ろに続くコンテンツとの余白重複を防ぐため下隙間をリセット */
.env-interview__item:last-child {
  margin-bottom: 0;
}

/* 2人目：左右反転グラデーション */
.env-interview__item--reverse {
  background-image: linear-gradient(270deg, #fff2f3 0%, #fff2f3 65.2%, #ffffff 65.2%, #ffffff 100%);
}

/* インナーコンテナ（w-1100幅に同期） */
.env-interview__item-inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.env-interview__item--reverse .env-interview__item-inner {
  flex-direction: row-reverse;
}


/* --- Q&Aテキストエリア --- */
.env-interview__body {
  width: 52%;
  box-sizing: border-box;
}

.env-interview__dl {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 質問（Q）の文字色をすべて統一 (#8F060D) */
.env-interview__dt {
  color: #8f060d;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

.env-interview__dd {
  color: #111111;
  margin-left: 0;
  margin-bottom: 30px;
}


/* --- 写真＆プロフィールバッジエリア --- */
.env-interview__visual-wrap {
  width: 43%;
  flex-shrink: 0;
}

.env-interview__image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.env-interview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.env-interview__profile {
  position: absolute;
  bottom: -40px;
  right: -100px;
  background-color: #8f060d;
  padding: 25px 30px;
  box-sizing: border-box;
  text-align: right;
  min-width: 450px;
  z-index: 5;
}

.env-interview__item--reverse .env-interview__profile {
  right: auto;
  left: -100px;
}

/* 【指示完全再現】名前の上部の見出しテキスト */
.env-interview__catch {
  display: block;
  font-family: "Zen Kurenaido", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: left;
}

.env-interview__name {
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 4px;
}

.env-interview__meta {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .env-interview__item {
    padding: 60px 0;
    background-image: none !important;
    background-color: #fff2f3;
    margin-bottom: 60px;
    /* スマホ時は隙間もコンパクトに調整 */
  }

  .env-interview__item:last-child {
    margin-bottom: 0;
  }

  .env-interview__item:nth-child(even) {
    background-color: #ffffff;
  }

  .env-interview__item-inner.w-1100 {
    flex-direction: column !important;
    gap: 40px;
  }

  .env-interview__body,
  .env-interview__visual-wrap {
    width: 100%;
  }

  .env-interview__dl {
    gap: 24px;
  }

  .env-interview__dt {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .env-interview__dd {
    font-size: 14px;
    line-height: 1.6;

    br {
      display: none;
    }
  }

  .env-interview__image-box {
    max-width: 340px;
    margin: 0 auto;
            aspect-ratio: auto;
  }

  /* スマホの画面幅に合わせて長方形バッジのフォントサイズと幅を最適化（はみ出しガード） */
  .env-interview__profile {
    padding: 15px 20px;
    min-width: 100%;
    width: 100%;
    position: static;
  }

  .env-interview__catch {
    font-size: 20px;
    /* スマホ画面に収まるサイズに自動スケール */
    margin-bottom: 6px;
    white-space: normal;
    /* スマホでは自動折り返しを許可 */
    text-align: left;
  }

  .env-interview__name {
    font-size: 20px;
  }

  .env-interview__meta {
    font-size: 12px;
  }
}



/* ==========================================
   Environment: 社風 セクション固有スタイル
   ========================================== */
.env-culture {
  position: relative;
  width: 100%;
  padding: 140px 0;
  /* 上下のセクションベース余白 */
  background-color: #ffffff;
  /* 背景#fff指定 */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.env-culture__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 大見出しの下100px空ける設定 */
.env-culture__heading-wrap {
  margin-bottom: 100px;
}

/* --- 1. 指定：グラデーション背景の見出し帯（白文字） --- */
.env-culture__sub-heading {
  display: inline-block;
  background: linear-gradient(270deg, #8f060d 0%, #b81727 100%);
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  padding: 5px 30px;
  margin-top: 0;
  margin-bottom: 30px;
  box-sizing: border-box;
}


/* --- 2. メインコンテンツ（テキスト＆写真の横並び） --- */
.env-culture__main-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 50px;
}

/* 左側：テキストエリア（代表挨拶の黄金比率を継承：580px/1100px ≒ 52.7%） */
.env-culture__main-body {
  width: 48%;
}

.env-culture__main-text {
  margin: 0;
  text-align: left;
}

/* 右側：写真エリア（440px/1100px ＝ 40.0%） */
.env-culture__main-visual {
  width: 48%;
  flex-shrink: 0;
}

.env-culture__main-img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}


/* --- 3. 3連横並び特長グリッド --- */
.env-culture__feature-grid {
  display: flex;
  justify-content: space-between;
  /* 指定のgap75pxを全体1100pxに対する比率に換算（75/1100 ≒ 6.8%） */
  gap: 6.8%;
  width: 100%;
}

/* 各特長カード（(100% - (6.8% * 2)) / 3 ＝ 各幅約29.5%） */
.env-culture__feature-item {
  width: 29.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上部のアイコン画像を中央寄せ */
  text-align: center;
  /* テキストも美しく中央揃え */
}

/* 上部：丸いアイコンと文字（画像ラッパー） */
.env-culture__feature-img-wrap {
  width: 100%;
  max-width: 240px;
  /* 画像が巨大化しすぎない安心マスク上限 */
  margin-bottom: 20px;
  /* 画像とその下テキストの間隔 */
}

.env-culture__feature-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下部：詳細テキスト */
.env-culture__feature-text {
  margin: 0;
  text-align: center;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .env-culture {
    padding: 80px 0;
  }

  .env-culture__heading-wrap {
    margin-bottom: 50px;
  }

  /* グラデーション見出し帯をスマホ向けにスケールダウン */
  .env-culture__sub-heading {
    font-size: 18px;
    padding: 15px;
    margin-bottom: 25px;
  }

  /* メイン行の横並びを解除、シンプルな縦1列へシフト */
  .env-culture__main-row {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
  }

  .env-culture__main-body,
  .env-culture__main-visual {
    width: 100%;
  }

  .env-culture__main-text {
    font-size: 15px;
    line-height: 1.8;

    br {
      display: none;
    }

    /* スマホでの不自然な改行をリセット */
  }

  .env-culture__main-visual {
    max-width: 340px;
    /* スマホで写真が広がりすぎない安全ガード */
    margin: 0 auto;
  }

  /* 3つ並びのグリッドを縦並びにスイッチ */
  .env-culture__feature-grid {
    flex-direction: column;
    gap: 40px;
    /* 縦並び時の各カード間の余白 */
  }

  .env-culture__feature-item {
    width: 100%;
  }

  .env-culture__feature-img-wrap {
    max-width: 180px;
    /* スマホ向けにアイコンサイズを少しコンパクトに */
    margin-bottom: 12px;
  }

  .env-culture__feature-text {
    font-size: 14px;
    line-height: 1.6;
  }
}



/* ==========================================
   Environment: キャリアパス セクション（画像切り替え版）
   ========================================== */
.env-career {
  position: relative;
  width: 100%;
  padding: 140px 0;
  background-color: #ffffff;
  /* 背景白指定 */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.env-career__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.env-career__heading-wrap {
  margin-bottom: 40px;
}

.env-career__lead {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 80px;
}

/* 画像表示コンテナ */
.env-career__content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.env-career__picture {
  display: block;
  width: 100%;
}

.env-career__img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .env-career {
    padding: 80px 0;
  }

  .env-career__lead {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: left;

    /* スマホ環境での可読性を高める左詰め */
    br {
      display: none;
    }

    /* スマホでの不自然な改行を防止 */
  }
}


/* ==========================================
   FAQ: よくある質問 下層ページ専用外観スタイル
   ========================================== */
.page-main--faq {
  background-color: #8F060D;
}

.breadcrumb--white span {
  color: #ffffff !important;
}

.breadcrumb--white img,
.breadcrumb--white svg {
  filter: brightness(0) invert(1) !important;
}

.page-faq {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  box-sizing: border-box;
}

/* ページ内アンカーナビゲーションの下マージン */
.page-faq__nav-wrap {
  margin-bottom: 120px;
}

.common-page-nav__list--white .common-page-nav__link {
  background-color: #ffffff !important;
  /* 指定：白背景#fff */
  color: #111111 !important;
  /* 指定：黒文字#111 */
}

.common-page-nav__list--white .common-page-nav__arrow::after {
  border-color: #111111 !important;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.page-faq__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* カテゴリ単位のコンテナ */
.page-faq__category {
  margin-bottom: 100px;
  /* カテゴリ間の余白 */
}

.page-faq__category:last-child {
  margin-bottom: 0;
  /* 最後のカテゴリは下マージンリセット */
}

/* --- 【デザイン解説完全再現】見出しスタイル ＆ 左詰め100px白線 --- */
.page-faq__category-title {
  color: #ffffff;
  /* 指定：color #fff */
  font-size: 24px;
  /* 指定：font-size: 24px */
  font-weight: 700;
  /* 指定：font-weight: 700 */
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 45px;
  padding-bottom: 15px;
  /* 線との適度な距離 */
  position: relative;
  letter-spacing: 0.05em;
  text-align: left;
}

/* 指定：見出しの下に、100pxの横幅で太さ2px #fffの白い線が左詰め */
.page-faq__category-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  /* 横幅100px */
  height: 2px;
  /* 太さ2px */
  background-color: #ffffff;
  /* #fffの白い線 */
}



/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .page-faq {
    padding: 60px 0 80px;
  }

  .page-faq__nav-wrap {
    margin-bottom: 60px;
  }

  .page-faq__category {
    margin-bottom: 60px;
  }

  .page-faq__category-title {
    font-size: 20px;
    margin-bottom: 30px;
  }
}



/* ==========================================
   Recruit: 採用情報イントロ 固有スタイル
   ========================================== */
.recruit-intro__allwrap {
  padding: 0.1px 0 0;
  background-image: url('./images/joinus_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.recruit-intro {
  position: relative;
  width: 100%;
  padding: 120px 0 140px;
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.recruit-intro__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* センター寄せ配置 */
  text-align: center;
}

/* 1. 指定：メイン見出し（白文字・36px・太字） */
.recruit-intro__heading {
  color: #ffffff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 50px;
}

/* 2. リード文章 */
.recruit-intro__body {
  width: 100%;
  max-width: 850px;
}

.recruit-intro__text {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 30px;
}

.recruit-intro__text:last-child {
  margin-bottom: 0;
}

/* 3. ナビゲーションラッパー（指定：テキストの下150pxに配置） */
.recruit-intro__nav-wrap {
  margin-top: 100px;
  width: 100%;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .recruit-intro {
    padding: 80px 0 100px;
  }

  /* スマホの画面幅に合わせて見出しサイズを縮小（文字溢れ・端ぶつかりガード） */
  .recruit-intro__heading {
    font-size: 24px;
    margin-bottom: 35px;
  }

  .recruit-intro__inner.w-1100 {
    text-align: left;
    align-items: flex-start;
    /* スマホでは左詰めに変更して可読性を最大化 */
  }

  .recruit-intro__text {
    font-size: 14px;
    line-height: 1.7;

    /* スマホ環境での不自然なぶつ切り改行をリセット */
    br {
      display: none;
    }
  }
}



/* ==========================================
   Recruit: 働く魅力 セクション固有スタイル
   ========================================== */
.recruit-attraction {
  position: relative;
  width: 100%;
  padding: 0 0 140px;
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}

/* --- 【指示完全再現】見出し・背面巨大英語の重ね合わせロジック --- */
.recruit-attraction__heading-wrap {
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 指定：背面英語「ATTRACTION ATTRACTION ATTRACTION」 */
.recruit-attraction__bg-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 200px;
  font-weight: 700;
  line-height: 1;
  color: #b81727;
  opacity: 0.1;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}

/* 指定：前面日本語見出し */
.recruit-attraction__heading {
  position: relative;
  color: #8f060d;
  font-size: 48px;
  /* 指定：font-size: 48px; */
  font-weight: 700;
  /* 指定：font-weight: 700; */
  line-height: 1.3;
  margin: 0;
  z-index: 2;
  text-align: center;
}


/* --- リードテキスト（見出しの下50pxに配置 / 24px / 700） --- */
.recruit-attraction__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.recruit-attraction__lead {
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  line-height: 1.8;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 100px;
}


/* --- 3連魅力コンテンツ（間は80px、左テキスト・右写真） --- */
.recruit-attraction__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

.recruit-attraction__item {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* 左側：テキストエリア（幅52.7%） */
.recruit-attraction__body {
  width: 52.7%;
}

/* 指定：魅力アイテム見出し（24px / 700） */
.recruit-attraction__item-title {
  font-size: 24px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}

/* 指定：特定のテキスト「手に職」のみをカラー変更 */
.recruit-attraction__highlight {
  color: #8f060d;
  font-weight: 700;
}

/* 本文テキスト */
.recruit-attraction__item-text {
  margin: 0;
  text-align: left;
}

/* 右側：写真エリア（幅40.0%） */
.recruit-attraction__visual {
  width: 40.0%;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.recruit-attraction__img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .recruit-attraction {
    padding: 80px 0;
  }

  /* スマホ時は見出しエリアの高さを縮小し、背景英語の文字サイズもスケールダウンして圧迫感を軽減 */
  .recruit-attraction__heading-wrap {
    height: 140px;
  }

  .recruit-attraction__bg-text {
    font-size: 80px;
    /* スマホ画面に馴染むサイズへ自動スケール */
  }

  .recruit-attraction__heading {
    font-size: 22px;
    padding: 0 20px;
  }

  /* リード文の余白調整 */
  .recruit-attraction__lead {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: left;

    /* スマホでは読みやすい左詰めへ */
    br {
      display: none;
    }
  }

  /* 3連カードを縦並びにスイッチ */
  .recruit-attraction__list {
    gap: 50px;
    /* スマホ時のアイテム間の隙間 */
  }

  /* 写真とテキストを縦積みの1列にリセット */
  .recruit-attraction__item {
    flex-direction: column;
    gap: 20px;
  }

  .recruit-attraction__body,
  .recruit-attraction__visual {
    width: 100%;
  }

  .recruit-attraction__item-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .recruit-attraction__item-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .recruit-attraction__visual {
    max-width: 340px;
    /* スマホで写真が広がりすぎない安全上限 */
    margin: 0 auto;
    order: -1;
    /* スマホ時は「写真 ➔ テキスト」の順に並び替えて視認性をアップ */
  }
}



/* ==========================================
   Recruit: 募集要項 セクション固有スタイル（修正版）
   ========================================== */
.recruit-requirements {
  position: relative;
  width: 100%;
  padding: 140px 0;
  background-color: #e8e8e8;
  /* 背景は#E8E8E8 */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.recruit-requirements__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 見出しの下余白 */
.recruit-requirements__heading-wrap {
  margin-bottom: 80px;
}

/* 5pxの隙間（溝）を制御するテーブルコンテナ */
.recruit-requirements__table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 上下の行（row）の間の隙間を5pxに設定 */
}

.recruit-requirements__row {
  width: 100%;
  display: flex;
  align-items: stretch;
  /* 左（th）と右（td）の高さを自動で綺麗に揃える */
  gap: 5px;
  /* 見出しと項目の間の横の隙間を5pxに設定 */
}

/* 左側：見出し部分（幅24%） */
.recruit-requirements__th {
  width: 24%;
  background-color: #8f060d;
  /* 背景#8F060D */
  color: #ffffff;
  /* color: #FFF; */
  font-size: 18px;
  /* font-size: 18px; */
  font-weight: 700;
  /* font-weight: 700; */
  padding: 20px;
  /* padding20px */
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
}

/* 右側：項目内容部分（幅76%） */
/* 【指示修正】背景を#fff、文字色をbodyデフォルトに変更 */
.recruit-requirements__td {
  width: 76%;
  background-color: #ffffff;
  /* 修正：background-color: #fff; */
  color: #111111;
  /* 修正：文字色はbodyのデフォルト */
  font-size: 18px;
  /* font-size: 18px; */
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: left;
}

/* 仕事内容ブロックの細部調整 */
.recruit-requirements__sub-text {
  display: block;
  margin-top: 10px;
}

.recruit-requirements__list {
  margin: 8px 0;
  padding-left: 20px;
  /* 箇条書きのインデント */
}

.recruit-requirements__list li {
  list-style-type: disc;
  margin-bottom: 4px;
}

.recruit-requirements__list li:last-child {
  margin-bottom: 0;
}

/* 【指示修正】recruit-requirements__info-listを完全1列縦並びにリファクタリング */
.recruit-requirements__info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* 1列に並べる指定 */
  gap: 8px;
  /* 各項目間の適度な縦の隙間 */
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .recruit-requirements {
    padding: 80px 0;
  }

  .recruit-requirements__heading-wrap {
    margin-bottom: 40px;
  }

  /* スマホ時は5pxの格子を維持したまま、見出し（th）と項目（td）をきれいな縦1列に変更 */
  .recruit-requirements__row {
    flex-direction: column;
    gap: 5px;
    /* 縦並び時のthとtdの隙間5px */
  }

  /* スマホ時は横幅を100%いっぱいに広げる */
  .recruit-requirements__th,
  .recruit-requirements__td {
    width: 100%;
    padding: 15px;
    /* スマホ向けにパディングを少しタイトに調整 */
    font-size: 15px;
    /* 可読性の高いスマホ用フォントサイズへ縮小 */
  }

  /* 見出し（th）の上下中央寄せをスマホ用にリセット */
  .recruit-requirements__th {
    align-items: flex-start;
  }

  .recruit-requirements__td {
    font-size: 14px;
    line-height: 1.6;
  }
}


/* ==========================================
   Recruit: エントリー セクション固有スタイル
   ========================================== */
.recruit-entry {
  position: relative;
  width: 100%;
  padding: 30px 0 80px;
  background: url('./images/recruit_entry_bg.jpg') no-repeat center center / cover;
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.recruit-entry__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 左右2カラムのコンテナ構造 */
.recruit-entry__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* 下揃え */
  width: 100%;
  gap: 50px;
}


/* --- 左側：メッセージテキストエリア（幅55%） --- */
.recruit-entry__content {
  width: 55%;
  text-align: left;
}

.recruit-entry__title {
  font-size: 270px;
  font-weight: 900;
  line-height: 1.0;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 15px;
  white-space: nowrap;
}

.recruit-entry__sub {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 35px;
  letter-spacing: 0.03em;
}

.recruit-entry__text {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 24px;
}

.recruit-entry__text:last-child {
  margin-bottom: 0;
}


/* --- 右側：アクションボタンエリア（幅433pxパーツを内包） --- */
.recruit-entry__actions {
  width: 433px;
  /* 共通メインボタンのwidth:433pxにジャスト同期 */
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
}

.recruit-entry__btn-wrap {
  width: 100%;
}

/* テキストや矢印のホバーカラー変化を滑らかにするための transition 補強 */
.recruit-entry__btn-wrap .common-btn__main-text,
.recruit-entry__btn-wrap .common-btn__main-arrow,
.recruit-entry__btn-wrap .common-btn__main-arrow::after {
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}


/* ==========================================
   【指示完全再現】共通ボタンの特殊上書き（Modifier）
   ========================================== */

/* ------------------------------------------
   1. 応募フォームボタン（--recruit-form）
   ------------------------------------------ */
.common-btn__main--recruit-form {
  background-color: #b81727 !important;
  /* 指定：背景色はB81727 */
}

/* ホバー時のシャッターエフェクトの背景色を上書き */
.common-btn__main--recruit-form::before {
  background-color: #ffffff !important;
  /* 指定：ホバー時のエフェクトの色は#fff */
}

/* ホバー時の「文字色」の連動切り替え */
.common-btn__main--recruit-form:hover .common-btn__main-text {
  color: #b81727 !important;
  /* 指定：文字がB81727 */
}

/* ホバー時の「矢印（本体の横線 ＆ 先端の斜め線）」の連動切り替え */
.common-btn__main--recruit-form:hover .common-btn__main-arrow {
  background-color: #b81727 !important;
  /* 指定：矢印がB81727（本体線） */
}

.common-btn__main--recruit-form:hover .common-btn__main-arrow::after {
  background-color: #b81727 !important;
  /* 指定：矢印がB81727（先端斜め線） */
}


/* ------------------------------------------
   2. TEL応募ボタン（--recruit-tel）
   ------------------------------------------ */
.common-btn__main--recruit-tel {
  background-color: #8f060d !important;
  /* 指定：背景色は8F060D */
}

/* 【指定】数字部分の文字だけ1.3倍の大きさ */
.recruit-entry__tel-num {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 2px;
}

/* ホバー時のシャッターエフェクトの背景色を上書き */
.common-btn__main--recruit-tel::before {
  background-color: #fff2f3 !important;
  /* 指定：ホバー時のエフェクトの色は#FFF2F3 */
}

/* ホバー時の「文字色」の連動切り替え */
.common-btn__main--recruit-tel:hover .common-btn__main-text {
  color: #b81727 !important;
  /* 指定：文字がB81727 */
}

/* ホバー時の「矢印（本体の横線 ＆ 先端の斜め線）」の連動切り替え */
.common-btn__main--recruit-tel:hover .common-btn__main-arrow {
  background-color: #b81727 !important;
  /* 指定：矢印がB81727（本体線） */
}

.common-btn__main--recruit-tel:hover .common-btn__main-arrow::after {
  background-color: #b81727 !important;
  /* 指定：矢印がB81727（先端斜め線） */
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .recruit-entry {
    padding: 80px 0;
  }

  /* スマホ時は縦1列のレイアウトへフラット化 */
  .recruit-entry__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .recruit-entry__content,
  .recruit-entry__actions {
    width: 100% !important;
    /* 画面いっぱいに広げる */
  }

  /* スマホ時の文字サイズ調整 */
  .recruit-entry__title {
    font-size: 50px;
  }

  .recruit-entry__sub {
    font-size: 20px;
    margin-bottom: 25px;
  }

  .recruit-entry__text {
    font-size: 14px;
    line-height: 1.7;

    br {
      display: none;
    }
  }

  /* 【レスポンシブ安全設計】スマホ画面からはみ出さないよう、横幅固定（433px）を100%可変へ解除 */
  .recruit-entry__btn-wrap .common-btn__main {
    width: 100% !important;
    height: 74px;
    /* スマホで見やすい程よい高さにスケール */
    padding-right: 50px;
    /* 右側余白を少しタイトに */
  }

  .recruit-entry__btn-wrap .common-btn__main-text {
    font-size: 18px;
    /* 文字サイズもスマホ用に最適化 */
  }

  .recruit-entry__btn-wrap .common-btn__main-arrow {
    width: 30px;
    /* 矢印の横線も少しコンパクトに */
    right: 20px;
  }
}


/* ==========================================
   Recruit: 応募の流れ セクション固有スタイル
   ========================================== */
.recruit-flow {
  position: relative;
  width: 100%;
  padding: 140px 0;
  background-color: #ffffff;
  /* 指定：背景は#fff */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.recruit-flow__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* 見出しの下余白 */
.recruit-flow__heading-wrap {
  margin-bottom: 40px;
}

/* 指定：リードテキスト（24px / 700 / 中央揃え） */
.recruit-flow__lead {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 50px;
}

/* ステップの連なりコンテナ */
.recruit-flow__steps {
  width: 100%;
  max-width: 1030px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.recruit-flow__step {
  background-color: #ffffff;
  border: 3px solid #8f060d;
  padding: 50px;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  margin-bottom: 50px;
  box-sizing: border-box;
}

/* 最後のステップだけはマージンをリセットして次のセクションとの余白重複を防止 */
.recruit-flow__step:last-child {
  margin-bottom: 0;
}

/* --- 【指定完全再現】下向きの三角形矢印（最後のステップ以外） --- */
.recruit-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -33px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 20px solid #8f060d;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  z-index: 10;
}

/* 左側：アイコンラッパー（100px固定） */
.recruit-flow__icon-wrap {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-flow__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* 右側：テキストコンテンツ領域 */
.recruit-flow__body {
  flex: 1;
  text-align: left;
}

/* ステップ見出しタイトル（24px / Bold） */
.recruit-flow__step-title {
  font-size: 24px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ステップ説明本文 */
.recruit-flow__step-text {
  margin: 0;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .recruit-flow {
    padding: 80px 0;
  }

  /* スマホの画面幅に合わせてリードテキストを読みやすくスケールダウン */
  .recruit-flow__lead {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 40px;
    text-align: left;

    /* スマホでは可読性の高い左詰めへスイッチ */
    br {
      display: none;
    }
  }

  /* スマホ時はパディングをタイトにし、縦積みのセンター寄せ構成へスイッチ */
  .recruit-flow__step {
    padding: 35px 20px;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    margin-bottom: 40px;
    /* 隙間も少しコンパクトに */
  }

  /* 三角形の位置をスマホの間隔（40px）に合わせて再計算 */
  .recruit-flow__step:not(:last-child)::after {
    bottom: -23px;
    border-top-width: 15px;
    border-left-width: 20px;
    border-right-width: 20px;
  }

  .recruit-flow__icon-wrap {
    width: 80px;
    height: 80px;
  }

  .recruit-flow__body {
    text-align: center;
    /* スマホでの見栄えを重視した中央揃え */
  }

  .recruit-flow__step-title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .recruit-flow__step-text {
    font-size: 14px;
    line-height: 1.6;

    br {
      display: none;
    }
  }
}


/* ==========================================
   Blog: ブログ・お知らせ一覧 固有スタイル
   ========================================== */
.archive-blog {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.archive-blog__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.archive-blog__nav-wrap {
  width: 100%;
}

/* --- 1. 上部カテゴリナビゲーション個別カラー --- */
.common-page-nav__link--examples {
  background-color: #b81727 !important;
  color: #ffffff !important;
  border-color: #b81727 !important;
}

.common-page-nav__link--news {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* --- 2. 2×4 投稿リンク一覧グリッド --- */
.archive-blog__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 30px;
  width: 100%;
  margin-top: 100px;
  margin-bottom: 80px;
}

.archive-blog__card {
  width: 100%;
  box-sizing: border-box;
}

.archive-blog__link {
  text-decoration: none;
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}

.archive-blog__link:hover {
  opacity: 0.8;
}

.archive-blog__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f7f7f7;
  margin-bottom: 15px;
}

.archive-blog__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.archive-blog__meta {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-bottom: 15px;
}

/* --- カテゴリ名バッジ（ベース共通設定） --- */
.archive-blog__cat {
  display: block;
  width: 155px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background-color: #8f060d;
  /* デフォルト背景（未分類など用） */
  padding: 6px 0;
  text-align: center;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s ease;
}

/* 【追加・指示完全具現】カテゴリに応じた背景色の動的Modifier上書き */

/* 施工事例（スラッグ名: examples）のバッジ背景色 */
.archive-blog__cat--examples {
  background-color: #b81727 !important;
}

/* お知らせ（スラッグ名: news）のバッジ背景色 */
.archive-blog__cat--news {
  background-color: #111111 !important;
}


/* --- 日付 ＆ タイトル定義 --- */
.archive-blog__date-box .date {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #111111;
  margin: 0;
}

.archive-blog__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #111111;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 3. ページネーションモジュール（45px正方形） --- */
.archive-blog__pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.archive-blog__pagination ul.page-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.archive-blog__pagination ul.page-numbers li a,
.archive-blog__pagination ul.page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  box-sizing: border-box;
  border: 1px solid #111111;
  background-color: #ffffff;
  color: #111111;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.archive-blog__pagination ul.page-numbers li a:hover {
  background-color: #8f060d;
  opacity: 1;
}

.archive-blog__pagination ul.page-numbers li span.current {
  background-color: #111111;
  color: #ffffff;
  cursor: default;
}

.archive-blog__pagination ul.page-numbers li span.dots {
  border: none;
  background: transparent;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .archive-blog {
    padding: 60px 0 80px;
  }

  .archive-blog__nav-wrap .common-page-nav__list {
    flex-wrap: wrap;
    gap: 10px;
  }

  .archive-blog__nav-wrap .common-page-nav__item {
    width: 100%;
  }

  .archive-blog__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .archive-blog__meta {
    gap: 10px;
  }

  .archive-blog__cat {
    width: 110px;
    font-size: 14px;
  }

  .archive-blog__date-box .date {
    font-size: 14px;
  }

  .archive-blog__title {
    font-size: 17px;
  }

  .archive-blog__pagination ul.page-numbers li a,
  .archive-blog__pagination ul.page-numbers li span {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}


/* ==========================================
   Blog: ブログ記事詳細（single） 固有スタイル
   ========================================== */
.single-blog {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  background-color: #ffffff;
  /* 指定：背景は#fff */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.single-blog__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* --- 1. 最上部メタ情報（横並び / gap: 15px） --- */
.single-blog__meta {
  display: flex;
  align-items: center;
  gap: 15px;
  /* 指定：gap15px */
  width: 100%;
  margin-bottom: 30px;
  /* 指定：その下30pxに投稿名 */
}

/* 指定：カテゴリ名スタイル（ベース共通） */
.single-blog__cat {
  display: block;
  width: 155px;
  /* 指定：width155px */
  font-size: 20px;
  /* 指定：font-size: 20px; */
  font-weight: 700;
  /* 指定：font-weight: 700; */
  line-height: 1;
  /* 指定：line-height: 1; */
  color: #ffffff;
  background-color: #8f060d;
  padding: 6px 0;
  text-align: center;
  flex-shrink: 0;
}

/* 【一覧と完全同期】カテゴリに応じた背景色の動的上書き */
.single-blog__cat--examples {
  background-color: #b81727 !important;
  /* 指定：施工事例の背景色は#B81727 */
}

.single-blog__cat--news {
  background-color: #111111 !important;
  /* 指定：お知らせの背景色は#111111 */
}

/* 指定：日付スタイル */
.single-blog__date-box .date {
  font-size: 16px;
  font-weight: 700;
  /* 指定：font-weight: 700; */
  line-height: 1;
  /* 指定：line-height: 1; */
  color: #111111;
  margin: 0;
}


/* --- 2. 投稿名タイトル --- */
.single-blog__title {
  font-size: 20px;
  /* 指定：font-size: 20px; */
  font-weight: 700;
  /* 指定：font-weight: 700; */
  line-height: 1.5;
  color: #111111;
  margin-top: 0;
  margin-bottom: 50px;
  /* 指定：その下50pxにアイキャッチ画像 */
  text-align: left;
  letter-spacing: 0.02em;
}


/* --- 3. アイキャッチ画像エリア --- */
.single-blog__img-wrap {
  width: 100%;
  max-height: 620px;
  /* 縦に伸びすぎて画面を圧迫するのを防ぐ安全上限 */
  overflow: hidden;
  margin-bottom: 50px;
  /* 指定：その下50pxにコンテンツ部分 */
}

.single-blog__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* --- 4. コンテンツ本文部分 ＆ 【指定】2px solid #111の下線 --- */
.single-blog__body {
  width: 100%;
  text-align: left;
  padding-bottom: 50px;
  /* 指定：コンテンツ部分の下50pxに下線 */
  border-bottom: 2px solid #111111;
  /* 指定：2px solid #111の下線 */
  margin-bottom: 100px;
  /* 指定：そこから100px下にリンク */
  box-sizing: border-box;
}

/* WordPressの投稿内出力（pタグや画像）に対する標準可読性担保 */
.single-blog__body p {
  margin-top: 0;
  margin-bottom: 25px;
}

.single-blog__body p:last-child {
  margin-bottom: 0;
}


/* --- 5. 【指定完全再現】前後・一覧ナビゲーション（中央揃え / gap: 30px） --- */
.single-blog__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 指定：中央揃え */
  gap: 30px;
  /* 指定：gap30px */
  width: 100%;
}

.single-blog__nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.single-blog__nav-item--prev .single-blog__nav-link {
  margin-left: auto;
}

.single-blog__nav-item--next .single-blog__nav-link {
  margin-right: auto;
}

/* 前の記事・次の記事共通テキストスタイル（20px / Bold） */
.single-blog__nav-link {
  font-size: 20px;
  /* 指定：font-size: 20px; */
  font-weight: 700;
  /* 指定：font-weight: 700; */
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
  white-space: nowrap;
}

.single-blog__nav-link:hover {
  color: #b81727;
  /* ホバー時はアトラストカラーで心地よく反応 */
  opacity: 1;
}

/* 一覧に戻るボタン専用スタイル（背景#111 / width: 350px / 24px / Bold） */
.single-blog__nav-item--back {
  flex: 0 0 350px;
  /* 指定：width350px をガチっと固定 */
  width: 350px;
}

.single-blog__btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  background-color: #111111;
  /* 指定：背景#111 */
  color: #ffffff;
  text-decoration: none;
  font-size: 24px;
  /* 指定：font-size: 24px; */
  font-weight: 700;
  /* 指定：font-weight: 700; */
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-sizing: border-box;
}

.single-blog__btn-back:hover {
  background-color: #b81727;
  /* ホバー時は深紅へソリッドに変化 */
  opacity: 1;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .single-blog {
    padding: 60px 0 80px;
  }

  /* メタ情報の縮小 */
  .single-blog__meta {
    gap: 10px;
    margin-bottom: 20px;
  }

  .single-blog__cat {
    width: 110px;
    font-size: 14px;
  }

  .single-blog__date-box .date {
    font-size: 14px;
  }

  /* タイトルのスマホ調整 */
  .single-blog__title {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .single-blog__img-wrap {
    margin-bottom: 35px;
  }

  /* 本文の下線余白をスマホ用にコンパクト化 */
  .single-blog__body {
    font-size: 14px;
    line-height: 1.7;
    padding-bottom: 35px;
    margin-bottom: 50px;
    /* 100pxから50pxへ縮小して画面全体のバランスを保持 */
  }

  /* 【ナビのレスポンシブ最適化】3カラムだと横幅が破綻するため、縦積みの美しい並びに組み替え */
  .single-blog__navigation {
    gap: 20px;
  }

  .single-blog__nav-item {
    width: 100%;
  }

  /* スマホ時は「一覧に戻る」の幅固定を解除して100%可変にし、押しやすさを最優先 */
  .single-blog__nav-item--back {
    width: 100%;
    flex: 1;
  }

  .single-blog__btn-back {
    height: 54px;
    font-size: 18px;
    /* 文字溢れを防ぐスマホ用フォントサイズ */
  }

  .single-blog__nav-link {
    font-size: 16px;
  }
}


/* ==========================================
   404 Error Page: 固有外観スタイル
   ========================================== */
.error404-content {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  background-color: #ffffff;
  /* 白背景指定 */
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.error404-content__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 内部コンテンツ・ボタンをすべて中央に整列 */
  text-align: center;
}

/* エラー解説メッセージ */
.error404-content__body {
  margin-bottom: 70px;
  /* メッセージからボタンまでの心地よい余白 */
  width: 100%;
}

.error404-content__text {
  font-size: 16px;
  line-height: 2.0;
  color: #333333;
  margin-top: 0;
  margin-bottom: 24px;
  letter-spacing: 0.03em;
}

.error404-content__text:last-child {
  margin-bottom: 0;
}

/* ボタンラッパー配置（共通ボタンの横幅433pxを中央に美しく鎮座させる） */
.error404-content__btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .error404-content {
    padding: 60px 0 80px;
  }

  .error404-content__inner.w-1100 {
    text-align: left;
    align-items: flex-start;
    /* スマホ時は読みやすい左詰めへ自然にシフト */
  }

  .error404-content__body {
    margin-bottom: 45px;
  }

  .error404-content__text {
    font-size: 14px;
    line-height: 1.7;

    /* スマホ画面での意図しない箇所のぶつ切り改行を解除 */
    br {
      display: none;
    }
  }

  /* 【共通レスポンシブルール】共通メインボタンを画面幅いっぱいの可変幅に安全調整 */
  .error404-content__btn-wrap .common-btn__main {
    width: 100% !important;
    height: 74px;
    /* スマホで押しやすい高さへスケール */
    padding-right: 50px;
  }

  .error404-content__btn-wrap .common-btn__main-text {
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
  }

  .error404-content__btn-wrap .common-btn__main-arrow {
    width: 30px;
    right: 20px;
  }
}


/* ==========================================
   Contact: お問い合わせフォーム（カスタムフラット版）
   ========================================== */
.page-contact {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  background-color: #ffffff;
  /* 背景は#fff */
  box-sizing: border-box;
}

.page-contact__inner.w-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.page-contact__heading-wrap {
  margin-bottom: 40px;
}

.page-contact__lead {
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
}

.page-contact__lead p {
  font-size: 20px;
  margin: 0;
  text-align: center;
}

/* フォームコンテナ（リードの下100px配置） */
.page-contact__form-wrap {
  margin-top: 100px;
  width: 100%;
}


/* --- テーブルレイアウト（背景・ボーダーを完全抹消） --- */
.contact_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

/* 【指示完全再現】th、tdのbackground-colorとborderは無し */
.contact_table tr,
.contact_table th,
.contact_table td {
  background-color: transparent !important;
  /* 背景なし */
  border: none !important;
  /* ボーダーなし */
}

.contact_table tr {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  /* 行ごとの美しい縦余白バランス */
}

.contact_table th {
  width: 320px;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  text-align: left;
  padding: 14px 20px 14px 0;
  /* 左端をピシッと整列 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* 共通必須バッジデザイン（背景#B81727 / 白文字 / 直角） */
.page-contact .required {
  display: inline-block;
  background-color: #b81727 !important;
  /* コーポレートカラー赤 */
  color: #ffffff !important;
  /* 白文字 */
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  margin-left: 12px !important;
  border-radius: 0 !important;
  /* 直角ルール */
  vertical-align: middle;
  line-height: 1.0 !important;
  white-space: nowrap;
}

.contact_table td {
  flex: 1;
  padding: 0;
  box-sizing: border-box;
}


/* --- 【指示完全再現】入力フィールド各種外観指定 --- */
.wpcf7-text,
.wpcf7-textarea {
  width: 100%;
  max-width: 100%;
  padding: 16px 20px;
  /* 【指示】textareaとtextのボーダーなし。background-colorは#E8E8E8 */
  border: none !important;
  background-color: #e8e8e8 !important;
  /* 【指示】入力値は文字色#111、font-family、font-weight: 500 */
  color: #111111 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px;
  box-sizing: border-box;
  border-radius: 0;
  transition: background-color 0.3s ease;
}

.wpcf7-text:focus,
.wpcf7-textarea:focus {
  background-color: #dfdfdf !important;
  /* フォーカス時に優しくトーンダウン */
  outline: none;
}

.wpcf7-textarea {
  height: 220px;
  resize: vertical;
}

/* --- 【指示完全再現】プレイスホルダー仕様指定 --- */
/* 全主要ブラウザのプレースホルダーを完全網羅して上書き */
.wpcf7-text::placeholder,
.wpcf7-textarea::placeholder {
  color: #111111 !important;
  /* 文字色#111 */
  opacity: 0.4 !important;
  /* opacity0.4 */
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  /* 指定ファミリー */
  font-weight: 500 !important;
  /* font-weight: 500 */
}

.wpcf7-text::-webkit-input-placeholder,
.wpcf7-textarea::-webkit-input-placeholder {
  color: #111111 !important;
  opacity: 0.4 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 500 !important;
}

.wpcf7-text::-moz-placeholder,
.wpcf7-textarea::-moz-placeholder {
  color: #111111 !important;
  opacity: 0.4 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 500 !important;
}


/* --- 【指示完全再現】ラジオボタン ＆ 同意チェックボックスカスタム --- */

/* 【指示】ラジオボタンの要素は縦並びにしてください */
.wpcf7-radio {
  display: flex;
  flex-direction: column;
  /* 縦並び指定 */
  gap: 16px;
  /* 縦の隙間 */
  width: 100%;
  padding: 14px 0;
}

.wpcf7-radio .wpcf7-list-item,
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: block;
}

.wpcf7-radio label,
.wpcf7-acceptance label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  user-select: none;
}

/* 【指示完全再現】ラジオボタン本体 ＆ 同意チェックボックス本体を丸型同型へ昇華 */
.wpcf7-radio input[type="radio"],
.wpcf7-acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  /* 押しやすいスマートサイズ */
  height: 20px;
  border: 2px solid #BABEC0;
  /* 統一アトラストカラー外枠 */
  border-radius: 50% !important;
  /* 【指示】チェックボックスも同じデザイン（丸型） */
  margin: 0 12px 0 0;
  position: relative;
  background-color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

/* 【指示完全再現】中の赤丸をもっと大きくしてください */
.wpcf7-radio input[type="radio"]:checked::before,
.wpcf7-acceptance input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background-color: #b81727;
  /* 赤丸 */
  border-radius: 50%;
}


/* --- 【指示完全再現】個人情報取り扱い同意チェック領域 --- */
.accept {
  text-align: center;
  margin: 50px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ラジオボタンと完全同一の label 構造として地続き描写 */
.accept label {
  align-items: center;
  justify-content: center;
}

.accept a {
  color: #b81727;
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

.accept a:hover {
  opacity: 0.7;
}

/* 【指示】「必須」も他の箇所と同じデザインにしてください */
.accept .required {
  margin-left: 8px !important;
}


/* --- 送信確認ボタンセクション --- */
.button_section {
  display: flex;
  justify-content: center;
  width: 100%;
}

p.submit_button.formbtn {
  margin: 0;
  width: 350px;
}

p.submit_button input.wpcf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350px !important;
  /* 横幅350px */
  height: 74px;
  background-color: #111111 !important;
  /* 背景#111 */
  color: #ffffff !important;
  font-size: 24px !important;
  /* font-size 24px */
  font-weight: 700 !important;
  /* 太字 */
  border: none !important;
  outline: none;
  border-radius: 0 !important;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background-color 0.3s ease;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

p.submit_button input.wpcf7-submit:hover {
  background-color: #b81727 !important;
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .page-contact {
    padding: 60px 0 80px;
  }

  .page-contact__lead p {
    font-size: 15px;
    line-height: 1.6;

    br {
      display: none;
    }
  }

  .page-contact__form-wrap {
    margin-top: 50px;
  }

  /* スマホ時は縦積みの1カラム構造へスイッチ */
  .contact_table,
  .contact_table tbody,
  .contact_table tr,
  .contact_table th,
  .contact_table td {
    display: block;
    width: 100% !important;
  }

  .contact_table tr {
    flex-direction: column;
    padding: 15px 0;
    border-bottom: 1px solid #e1e1e1 !important;
    /* スマホ並び時の視認境界線 */
  }

  .contact_table tr:last-child {
    border-bottom: none !important;
  }

  .contact_table th {
    padding: 0 0 10px 0;
    font-size: 15px;
  }

  .wpcf7-text,
  .wpcf7-textarea {
    padding: 14px;
    font-size: 15px;
  }

  .wpcf7-textarea {
    height: 160px;
  }

  .accept label {
    font-size: 14px;
    align-items: flex-start;
    text-align: left;
  }

  .accept input[type="checkbox"] {
    margin-top: -1px;
    /* スマホ縦積み時のチェック丸位置の重心微調整 */
  }

  p.submit_button.formbtn,
  p.submit_button input.wpcf7-submit {
    width: 100% !important;
    height: 60px;
    font-size: 18px !important;
  }
}


/* ==========================================
   Contact: お問い合わせ内容確認画面 専用スタイル
   ========================================== */
.confirm_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

/* 入力画面のフラットルールを完全継承 */
.confirm_table tr {
  display: flex;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #e1e1e1;
  /* th・tdに線を付けない代わりに、行の区切りとして極淡い線をtrにのみ敷いて可読性を最大化 */
  box-sizing: border-box;
}

/* 指示準拠：thの背景・ボーダーは無し */
.confirm_table th {
  width: 280px;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  text-align: left;
  padding: 0 20px 0 0;
  /* 左端をピシッと揃えるパディング */
  background-color: transparent !important;
  /* 背景なし */
  border: none !important;
  /* ボーダーなし */
  box-sizing: border-box;
}

/* 指示準拠：tdの背景・ボーダーは無し ＆ 【フォント指定の完全反映】 */
.confirm_table td {
  flex: 1;
  /* 指示：文字色#111、font-family、font-weight: 500 */
  color: #111111 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px;
  line-height: 1.7;
  padding: 0;
  background-color: transparent !important;
  /* 背景なし */
  border: none !important;
  /* ボーダーなし */
  word-break: break-all;
  /* 長いメールアドレス等の右端突き抜けバグを絶対防御 */
}

/* 電話番号などが空（お客様が未入力）でtdの中身が空っぽの時でも、行の高さが垂直に潰れないための安全ガード */
.confirm_table td:empty::before {
  content: " ";
  display: inline-block;
}


/* --- 【デザイン完全再現】2ボタンエリア（横並び・中央揃え・gap制御） --- */
.confirm_button {
  display: flex;
  justify-content: center;
  /* 中央揃え */
  align-items: center;
  gap: 30px;
  /* ボタンとボタンの間の隙間 */
  width: 100%;
  margin-top: 60px;
  position: relative;
}

.confirm_button .button_section {
  margin: 0;
  width: 350px;
  /* 指定条件：width350px */
}

.confirm_button p.formbtn {
  margin: 0;
  width: 350px;
}

/* 共通インプットボタンのベース上書き（350px / 24px / Bold） */
.confirm_button input.wpcf7-submit,
.confirm_button input.wpcf7-previous {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350px !important;
  /* 指定：width350px */
  height: 74px;
  font-size: 24px !important;
  /* 指定：font-size: 24px; */
  font-weight: 700 !important;
  /* 指定：font-weight: 700; */
  border: none !important;
  outline: none;
  border-radius: 0 !important;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-sizing: border-box;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* 1. 【送信する】ボタン（一番重要な決定アクション：アトラストレッドを適用） */
.confirm_button input.wpcf7-submit {
  background-color: #b81727 !important;
  /* 決定の赤 */
  color: #ffffff !important;
}

.confirm_button input.wpcf7-submit:hover {
  background-color: #8f060d !important;
  /* ホバー時は深みのある赤へソリッド変化 */
}

/* 2. 【内容を修正する】ボタン（一つ手前に戻るサブアクション：シックな黒を適用） */
.confirm_button .prev input.wpcf7-previous {
  background-color: #111111 !important;
  /* 背景#111 */
  color: #ffffff !important;
}

.confirm_button .prev input.wpcf7-previous:hover {
  background-color: #b81727 !important;
  /* ホバー時はアトラストレッドへ変化 */
}

/* くるくる回るローディングスピナー（Contact Form 7が送信時に自動出力するマークアップ）の絶対位置調整 */
.confirm_button .wpcf7-spinner {
  position: absolute;
  margin: 0;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
}


/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {

  /* スマホ時はテーブルを解除して、完全な縦1列並びへトランスフォーム */
  .confirm_table,
  .confirm_table tbody,
  .confirm_table tr,
  .confirm_table th,
  .confirm_table td {
    display: block;
    width: 100% !important;
  }

  .confirm_table tr {
    flex-direction: column;
    padding: 15px 0;
    border-bottom: 1px solid #e1e1e1 !important;
  }

  .confirm_table th {
    padding: 0 0 6px 0;
    font-size: 15px;
  }

  .confirm_table td {
    font-size: 15px;
    line-height: 1.5;
  }

  /* 【レスポンシブ安全設計】スマホ画面の横幅を絶対に突き抜けないよう、縦1列にスイッチ */
  .confirm_button {
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
  }

  /* 350px固定を解除し、スマホ幅100%可変へと安全に拡張 */
  .confirm_button .button_section,
  .confirm_button p.formbtn,
  .confirm_button input.wpcf7-submit,
  .confirm_button input.wpcf7-previous {
    width: 100% !important;
    height: 60px;
    font-size: 18px !important;
    /* スマホで見やすい文字サイズにスケール */
  }
}



/* 追従CTA */
.floating-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  z-index: 10;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 閉じるボタン（黒丸に×） */
.floating-cta__close {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  padding: 0;
}

/* ホバー時に少し大きくする */
.floating-cta__close:hover {
  transform: scale(1.2);
}

/* ×印の作成 */
.floating-cta__close span {
  position: absolute;
  width: 15px;
  height: 2px;
  background-color: #fff;
}

.floating-cta__close span:nth-child(1) {
  transform: rotate(45deg);
}

.floating-cta__close span:nth-child(2) {
  transform: rotate(-45deg);
}

/* CTA画像 */
.floating-cta__link {
  display: block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  line-height: 0;
}

.floating-cta__link img {
  width: 100%;
  height: auto;
}

/* 閉じた時のクラス */
.floating-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* スマホでのサイズ調整（必要に応じて） */
@media screen and (max-width: 767px) {
  .floating-cta {
    width: 180px;
    bottom: 15px;
    right: 15px;
  }

  .floating-cta__close {
    top: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
  }

  .floating-cta__close span {
    width: 10px;
  }
}



/* 下部固定ナビゲーションのコンテナ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: none;
  z-index: 9;
}

.nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  gap: 8px;
  transition: opacity 0.3s;
}

.nav-btn:active {
  opacity: 0.7;
}

.nav-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.btn-call {
  background-color: #F1B93B;
}

.btn-contact {
  background-color: #D94E3B;
}

.btn-line {
  background-color: #27C734;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
  }
}

@media (max-width: 380px) {
  .nav-btn {
    font-size: 13px;
    gap: 4px;
  }

  .nav-icon {
    width: 20px;
    height: 20px;
  }
}