@charset "UTF-8";
/*
Theme Name: 有限会社小林タイル テーマ
Theme URI: https://kobayashitile-recruit.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, #CF1800 0%, #EE4B15 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: 316px;
}

.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: 316px;
  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;
  transition: .4s;
}

.common-header.is-top:not(.is-scrolled) .common-header__nav-text-en {
  color: #ffffff;
  transition: .4s;
}

.common-header.is-top:not(.is-scrolled) .common-header__nav-link:hover {
  opacity: 1;
}

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

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

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

/* 共用時のホバーは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,
.common-header.is-scrolled .common-header__nav-link:hover .common-header__nav-text-en,
.common-header:not(.is-top) .common-header__nav-link:hover .common-header__nav-text-en {
  color: #EE4B15;
}


/* --- プルダウンメニュー共通設定（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: #100000;
  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: #CF1800 !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;
  max-width: 44px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}

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

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

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

.common-header__btn--line {
  background-color: #50CB0D;
}

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

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

  .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: 250px;
  }

  .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: 60px;
    /* スマホ用にヘッダー高さを最適化（必要に応じて100pxに変更可） */
  }

  .common-header__inner {
    height: 60px;
  }

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

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

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

  .common-header__sp-buttons {
    margin-left: auto;
  }

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

  .common-header__hamburger-line {
    display: block;
    width: 30px;
    height: 1px;
    background-color: #fff;
    transition: all 0.3s;
  }

  .common-header.is-scrolled .common-header__hamburger-line {
    background-color: #100000;
  }

  /* 全画面ドロワーメニュー */
  .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: 60px;
    height: 60px;
    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: 30px;
    height: 1px;
    background-color: #CF1800;
  }

  .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 #100000;
  }

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

  .common-header__drawer-link {
    display: block;
    font-size: 16px;
    color: #100000;
    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 28 12'%3E%3Cpath d='M0 10h26 M18 2l8 8' fill='none' stroke='%23CF1800' 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--mail {
    background-color: #CF1800;
  }

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

  .common-header__drawer-btn--line {
    background-color: #50CB0D;
  }
}

@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: 24px;
  }

  .common-header__sp-btn-icon img {
    width: 35px;
    height: auto;
  }
}


/* 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: #CF1800;
  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: #CF1800;
  margin-bottom: 30px;
}

.common-footer__entry-text {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  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 #100000;
  border-bottom: 3px solid #100000;
  text-decoration: none;
  color: #100000;
  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: #50CB0D;
}

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

.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;
  max-width: 316px;
  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;
}

.common-footer__nav-link:hover {
  color: #EE4B15;
  opacity: 1;
}

/* アクション行（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;
}

.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);
  transition: 0.4s;
}

.common-footer__pagetop:hover {
  color: #EE4B15;
  opacity: 1;
}

.common-footer__pagetop:hover::before {
  border-color: #EE4B15;
}

/* 底面部（区切り線＆コピーライト） */
.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: 23px;
    margin-bottom: 20px;
  }
  .common-footer__entry-text {
    font-size: 15px;
    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: 600px;
  max-height: 1080px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #000;
  /* 画像読み込み前のちらつき防止 */
}

/* ==========================================================================
   Top Page - First View (FV)
   ========================================================================== */

.top-fv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 1080px;
  overflow: hidden;
  background-color: #000;
}

.top-fv__inner {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   1. 最背面背景 (FVパーツ⑤)
   -------------------------------------------------------------------------- */
.top-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.top-fv__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   2. 中層：人物画像配置・グループ (FVパーツ①〜③)
   -------------------------------------------------------------------------- */
.top-fv__person-group {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- 配置設定 (Height 100% / 比率維持) --- */
.top-fv__person {
  position: absolute;
  height: 100%;
}

/* fv_part01: 左下配置 */
.top-fv__person--01 {
  left: 0;
  top: 0;
}

/* fv_part02: 中央配置 */
.top-fv__person--02 {
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  top: 0;
}

/* fv_part03: 右上配置 */
.top-fv__person--03 {
  right: 0;
  bottom: -3%;
}

/* --- アニメーション要素（画像自体） --- */
.top-fv__person-img {
  display: block;
  height: 100%;
  width: auto;
  max-height: 100%;
  max-width: none;
  object-fit: contain;

  /* 初期共通: 透明、右上オフセット、モノクロ */
  opacity: 0;
  transform: translate(40px, -40px);
  filter: grayscale(100%);

  /* トランジション個別プロパティ設定 */
  transition-property: opacity, transform, clip-path, filter;
  transition-duration: 0.8s, 0.8s, 1.8s, 1.8s;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 各パーツ固有の初期 clip-path と アニメーションディレイ --- */

/* 人物①（5頂点） */
.top-fv__person--01 .top-fv__person-img {
  object-position: top left;
  clip-path: polygon(60% 0%, 88% 0%, 1% 100%, 0% 100%, 0% 65%);
  transition-delay: 0.2s, 0.2s, 1.0s, 1.0s;
}

/* 人物②（4頂点） */
.top-fv__person--02 .top-fv__person-img {
  object-position: center center;
  clip-path: polygon(82% 0%, 104% 0%, 37% 100%, 13% 100%);
  transition-delay: 0.4s, 0.4s, 1.2s, 1.2s;
}

/* 人物③（6頂点） */
.top-fv__person--03 .top-fv__person-img {
  object-position: bottom right;
  clip-path: polygon(91% 0%, 100% 0%, 100% 27%, 30% 100%, 0% 100%, 0% 88%);
  transition-delay: 0.6s, 0.6s, 1.4s, 1.4s;
}

/* --- body.is-fin 付与時の復帰状態（頂点数をそれぞれの初期値と一致させる） --- */
body.is-fin .top-fv__person-img {
  opacity: 1;
  transform: translate(0, 0);
  filter: grayscale(0%);
}

/* 人物①: 5頂点で全体化 */
body.is-fin .top-fv__person--01 .top-fv__person-img {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
}

/* 人物②: 4頂点で全体化 */
body.is-fin .top-fv__person--02 .top-fv__person-img {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* 人物③: 6頂点で全体化 */
body.is-fin .top-fv__person--03 .top-fv__person-img {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
}


/* --------------------------------------------------------------------------
   3. 最前面装飾 (FVパーツ④: 赤三角・文字パーツ)
   -------------------------------------------------------------------------- */
.top-fv__deco {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.top-fv__deco-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  opacity: 0;
  transform: translate(-30px, 30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.8s,
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.8s;
}

body.is-fin .top-fv__deco-img {
  opacity: 0.8;
  transform: translate(0, 0);
}


/* --- 最前面：コンテンツ配置 --- */
.top-mv__content {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  max-width: 1750px;
  margin: 0 auto;
  padding-bottom: 50px;
}

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

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

.top-mv__sub-lead {
  font-size: clamp(20px, 2vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  color: #CF1800;
  margin-bottom: 24px;
}

.top-mv__sub-lead span {
  display: inline-block;
  background-color: #fff;
  padding: 8px 20px;
}

.top-mv__main-title {
  font-size: clamp(64px, 6.7vw, 128px);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 35px;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.50);
}

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

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

.top-mv__tag {
  font-size: clamp(18px, 1.7vw, 32px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  border: 2px solid #fff;
  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: clamp(120px, 10vw, 180px);
  height: clamp(120px, 10vw, 180px);
  text-decoration: none;
  border-radius: 50%;
  background-color: #fff;
}

.top-mv__recruit-btn:hover {
  opacity: 1;
}

/* テキストの縮小用コンテナ（ガクつき完全防止） */
.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;
  fill: #CF1800;
}

@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 #CF1800;
  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 #CF1800;
  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);
}

/* 2. ズーム時（画面高さが低い状態）の縦崩れ防止 */
@media screen and (max-height: 800px) {
  .top-mv {
    min-height: 500px;
  }
  .top-mv__content {
    padding-bottom: 24px;
  }
  .top-mv__main-title {
    font-size: clamp(36px, 5.5vw, 80px);
    margin-bottom: 16px;
  }
  .top-mv__sub-lead {
    font-size: clamp(16px, 1.8vw, 24px);
    margin-bottom: 12px;
  }
  .top-mv__tag {
    font-size: clamp(12px, 1.4vw, 20px);
    padding: 6px 12px;
  }
  .top-mv__btn-block {
    right: 20px;
    bottom: 20px;
  }
  .top-mv__recruit-btn {
    width: 110px;
    height: 110px;
  }
}

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

  .top-mv__content {
    width: 100%;
    flex-direction: column;
    justify-content: center;
  }

  .top-mv__sub-lead {
    font-size: 3vw;
    margin-bottom: 12px;
  }
  .top-mv__sub-lead span {
	padding: 0.4em 0.8em;
}

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

  .top-mv__tags {
    gap: 1vw;
  }

  .top-mv__tag {
    font-size: 3.1vw;
    padding: 0.5em;
  }

  .top-mv__btn-block {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    bottom: 50px;
  }

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

  .top-fv__person {
    height: auto;
  }

  .top-fv__person-img {
    height: auto;
    width: 100%;
  }

  .top-fv__person--02 {
    left: 0;
    transform: none;
    width: 100%;
    top: 10%;
  }
  .top-fv__person--02 .top-fv__person-img {
    clip-path: polygon(85% 0%, 100% 0%, 8% 75%, 0% 67%);
  }
}


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

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

.common-btn__main-text {
  color: #fff;
  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: #fff;
}

.common-btn__main-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
  height: 3px;
  background-color: #fff;
  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;
}

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

.common-link__sub-box {
  position: relative;
  width: 56px;
  height: 56px;
  border: 3px solid #EE4B15;
  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: #EE4B15;
  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: #EE4B15;
  transform: rotate(45deg);
  transform-origin: right top;
  transition: background-color 0.4s ease;
}

.common-btn__main--black {
  background-color: #100000;
}

/* ==========================================
   レスポンシブ（767px以下）スマホ最適化
   ========================================== */
@media screen and (max-width: 767px) {
  .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連横並びグリッド --- */
.common-three_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 1100pxコンテナに対して約75px相当の余白（パーセント指定またはpx指定） */
  gap: 6.8%;
  width: 100%;
}

/* 各特長カード */
.common-three_grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 上部：丸いアイコンと文字（画像ラッパー） */
.common-three_grid-img-wrap {
  width: 100%;
  margin-bottom: 20px;
}

.common-three_grid-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下部：詳細テキスト */
.common-three_grid-text {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}


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

  /* 3列グリッドを1列（縦並び）にスイッチ */
  .common-three_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /* 縦並び時の各カード間の余白 */
  }

  .common-three_grid-img-wrap {
    margin-bottom: 12px;
  }

  .common-three_grid-text {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* --- 4連横並びグリッド --- */
.common-four_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 1100pxコンテナに対して約75px相当の余白（パーセント指定またはpx指定） */
  gap: 6.8%;
  width: 100%;
}

/* 各特長カード */
.common-four_grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 上部：丸いアイコンと文字（画像ラッパー） */
.common-four_grid-img-wrap {
  width: 100%;
  margin-bottom: 20px;
}

.common-four_grid-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下部：詳細テキスト */
.common-four_grid-text {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}


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

  /* 3列グリッドを1列（縦並び）にスイッチ */
  .common-four_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /* 縦並び時の各カード間の余白 */
  }

  .common-four_grid-img-wrap {
    margin-bottom: 12px;
  }

  .common-four_grid-text {
    font-size: 14px;
    line-height: 1.6;
  }
}



/* ==========================================================================
   Top Page - Recruit Section
   ========================================================================== */

.top-recruit {
  position: relative;
  width: 100%;
  padding: 100px 0 200px;
  overflow: hidden;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   1. 背景グラデーション (左上 & 右下)
   -------------------------------------------------------------------------- */
.top-recruit__bg-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  max-width: 1000px;
  background: linear-gradient(142deg, #CF1800 0%, #FFF 42.74%);
  z-index: -2;
  pointer-events: none;
}

.top-recruit__bg-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
  height: 25%;
  max-width: 800px;
  background: linear-gradient(90deg, #CF1800 0%, #EE4B15 100%);
  z-index: -2;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. 赤三角形・ひし形装飾パーツ (4箇所)
   -------------------------------------------------------------------------- */
.top-recruit__deco {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

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

.top-recruit__deco--top-left {
  bottom: 120px;
  left: 180px;
  width: 120px;
}

.top-recruit__deco--bottom-left {
  bottom: 30px;
  left: 40px;
  width: 100px;
}

.top-recruit__deco--top-right {
  top: 40%;
  right: 30px;
  width: 100px;
}

.top-recruit__deco--bottom-right {
  bottom: 35%;
  right: 80px;
  width: 180px;
}

/* --------------------------------------------------------------------------
   3. メインレイアウト構造
   -------------------------------------------------------------------------- */
.top-recruit__container {
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.top-recruit__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 650px;
}

/* --------------------------------------------------------------------------
   4. 左側：テキストエリア (& 透過座布団)
   -------------------------------------------------------------------------- */
.top-recruit__txtarea {
  position: absolute;
  left: calc(13% - 6vw - 100px);
  bottom: 50px;
  z-index: 2;
  margin-left: 8.333%;
  padding: 60px 40px 50px;
}

/* 白透過70%の座布団背景 */
.top-recruit__txtarea::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
}

/* 筆記体英語画像 (Be the craftman) */
.top-recruit__en-img-wrap {
  position: absolute;
  top: -70%;
  right: -20%;
  width: 80%;
  max-width: 780px;
  z-index: 6;
  pointer-events: none;
}

.top-recruit__en-img {
  width: 100%;
  height: auto;
}

/* サブタイトル (RECRUITING) */
.top-recruit__sub-ttl {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 15px;
  position: absolute;
  top: -200px;
  left: 0;
}

/* キャッチコピー */
.top-recruit__ttl {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 30px;
  color: #FFF;
  position: absolute;
  top: -115px;
  left: 0;
}

/* 行ごとの赤グラデーション背景 */
.top-recruit__ttl-line {
  display: inline-block;
  padding: 4px 18px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #CF1800 0%, #EE4B15 100%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 本文 */
.top-recruit__txt {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  color: #100000;
  margin-bottom: 35px;
}

.top-recruit__btn-wrap {
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   5. 右側：画像スライダー (5枚)
   -------------------------------------------------------------------------- */
.top-recruit__slider-wrap {
  position: relative;
  z-index: 1;
  width: 72.18%;
  margin-left: auto;
}

.top-recruit__slider {
  width: 100%;
  height: auto;
  max-height: 850px;
  min-height: 740px;
  overflow: hidden;
}

.top-recruit__slide {
  width: 100%;
  height: auto;
}

.top-recruit__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   レスポンシブ (スマホ表示)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .top-recruit {
    padding: 80px 0;
  }

  .top-recruit__inner {
    flex-direction: column;
    min-height: auto;
  }

  .top-recruit__slider-wrap {
    width: 100%;
    margin-left: 0;
  }

  .top-recruit__slider,
  .top-recruit__slide {
    height: 380px;
    min-height: auto;
    max-height: none;
  }

  .top-recruit__txtarea {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    margin-left: 0;
  }

  .top-recruit__en-img-wrap {
    top: -50px;
    left: 20px;
    max-width: 80%;
  }

  .top-recruit__sub-ttl {
    font-size: 28px;
    margin-bottom: 10px;
    position: static;
  }

  .top-recruit__ttl {
    font-size: 20px;
    margin-bottom: 20px;
    position: static;
  }

  .top-recruit__txt {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
  }
}

@media screen and (max-width: 768px) {
  .top-recruit__deco--top-left {
    width: 70px;
  }

  .top-recruit__deco--bottom-right {
    width: 70px;
  }

  .top-recruit__ttl-line {
    padding: 3px 10px;
  }
}


/* ==========================================================================
   Top Page - Service Section
   ========================================================================== */

/* 1. 外側セクション (#CF1800 背景) */
.top-service {
  position: relative;
  width: 100%;
  background-color: #CF1800;
  padding-top: 90px;
  padding-bottom: 90px;
}

/* 2. 内側カード容器 (#FFF5F2 背景 / 20px内側赤枠線) */
.top-service__card {
  position: relative;
  max-width: 1640px;
  margin: 0 auto;
  background-color: #FFF5F2;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* 端から20px位置に 2px solid #CF1800 のボーダー描画 */
.top-service__card::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 2px solid #CF1800;
  pointer-events: none;
  z-index: 1;
}

.top-service__inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   3. 見出しエリア (SERVICE & 二重線)
   -------------------------------------------------------------------------- */
.top-service__header {
  text-align: center;
  margin-bottom: 50px;
}

.top-service__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  max-width: 970px;
  margin: 0 auto 30px;
}

.top-service__title {
  color: #CF1800;
  font-size: 96px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 左右の二重線装飾 (CSSで実装) */
.top-service__double-line {
  flex: 1;
  height: 8px;
  border-top: 2px solid #CF1800;
  border-bottom: 2px solid #CF1800;
}

.top-service__sub-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   4. 3つのボックスカード
   -------------------------------------------------------------------------- */
.top-service__boxes {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
}

.top-service__box {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #FFF;
  overflow: hidden;
}

/* 上部テキスト部分 (#100000背景) */
.top-service__box-head {
  background-color: #100000;
  padding: 25px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.top-service__box-text-wrap {
  padding-right: 35px;
}

.top-service__box-title-jp {
  font-size: 24px;
  font-weight: 700;
  color: #FFF;
  line-height: 1.3;
  margin-bottom: 6px;
}

.top-service__box-title-en {
  font-size: 13px;
  font-weight: 700;
  color: #FFF;
  opacity: 0.85;
  line-height: 1.3;
}

/* 右下の矢印アイコン (横棒 + ＼線、太さ3px) */
.top-service__box-arrow {
  position: absolute;
  right: 25px;
  bottom: 25px;
  width: 28px;
  height: 12px;
  display: block;
  transition: transform 0.3s ease;
}

/* 横線 */
.top-service__box-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #FFF;
}

/* 斜め線 ＼ */
.top-service__box-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 3px;
  background-color: #FFF;
  transform: rotate(45deg);
  transform-origin: right bottom;
}

/* 下部画像部分 */
.top-service__box-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #DDD;
}

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

/* ホバーインタラクション */
.top-service__box:hover .top-service__box-img {
  transform: scale(1.06);
}

.top-service__box:hover .top-service__box-arrow {
  transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   5. 下部アクションエリア
   -------------------------------------------------------------------------- */
.top-service__actions {
  display: flex;
  align-items: center;
  gap: 40px;
}

.top-service__main-btn-wrap {
  flex-shrink: 0;
}

.top-service__sub-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .top-service {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .top-service__card {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .top-service__card::before {
    inset: 12px;
    content: none;
  }

  .top-service__title-wrap {
    gap: 20px;
  }

  .top-service__title {
    font-size: 64px;
  }

  .top-service__sub-title {
    font-size: 24px;
  }

  .top-service__boxes {
    flex-direction: column;
    gap: 20px;
  }

  .top-service__box-head {
    min-height: auto;
    padding: 15px;
  }

  .top-service__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
  .top-service__main-btn-wrap {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .top-service__title-wrap {
    gap: 15px;
  }

  .top-service__title {
    font-size: 42px;
  }

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

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

  .top-service__sub-links {
    gap: 12px;
  }

  .top-service__box-arrow {
    right: 12px;
    bottom: 20px;
    width: 25px;
    height: 10px;
  }
}



/* ==========================================================================
   Top Page - Attraction Section
   ========================================================================== */

/* 1. 外側セクション */
.top-attraction {
  width: 100%;
  background:
    url('./images/attraction_deco.png') left 50px bottom 50px no-repeat,
    url('./images/attraction_bg.png') left center no-repeat,
    linear-gradient(180deg, rgba(238, 75, 21, 0.10) 0%, rgba(238, 75, 21, 0.30) 100%);
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
}

.top-attraction__container {
  margin: 0 auto;
}

.top-attraction__inner {
  display: grid;
  grid-template-columns: 27% 73%;
  align-items: start;
}

/* --------------------------------------------------------------------------
   2. 左側：サイド固定エリア (sticky)
   -------------------------------------------------------------------------- */
.top-attraction__side {
  position: relative;
  min-height: 100%;
  padding-left: 61px;
}

.top-attraction__side-inner {
  position: sticky;
  top: 110px;
}

.top-attraction__side-title {
  margin-bottom: 15px;
}

.top-attraction__side-title-img {
  display: block;
  width: 100%;
  max-width: 410px;
  height: auto;
}

.top-attraction__side-sub {
  font-size: 20px;
  font-weight: 700;
  color: #100000;
  line-height: 1.4;
  margin-bottom: 50px;
}

/* 赤グラデーションボタン */
.top-attraction__side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  height: 55px;
  padding: 0 25px;
  background: linear-gradient(90deg, #CF1800 0%, #EE4B15 100%);
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}


.top-attraction__side-btn-text {
  color: #FFF;
  line-height: 1;
}

/* 矢印アイコン (横棒 + ＼斜め線) */
.top-attraction__side-btn-arrow {
  position: relative;
  width: 28px;
  height: 12px;
  display: block;
}

.top-attraction__side-btn-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #FFF;
}

.top-attraction__side-btn-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 2px;
  background-color: #FFF;
  transform: rotate(45deg);
  transform-origin: right bottom;
}

/* --------------------------------------------------------------------------
   3. 右側：コンテンツエリア (3つのカード)
   -------------------------------------------------------------------------- */
.top-attraction__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.top-attraction__item {
  width: 100%;
  background-color: #FFF;
  padding: 50px 80px;
  display: grid;
  grid-template-columns: 45% minmax(0, 1fr);
  gap: 50px;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.top-attraction__image {
  width: 100%;
  overflow: hidden;
}

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

/* テキスト情報ブロック */
.top-attraction__body {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 30px 35px;
  align-items: start;
  padding-top: 30px;
}

.top-attraction__num-box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.top-attraction__en-label {
  display: block;
  font-family: "Oswald", sans-serif;
  line-height: 1.0;
  margin-bottom: 4px;
}

.top-attraction__num {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 48px;
  line-height: 1.0;
  position: relative;
}

/* 数字の下線 */
.top-attraction__num::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background-color: #100000;
  margin-top: 15px;
}

.top-attraction__card-title {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.top-attraction__highlight {
  color: #CF1800;
}

.top-attraction__text {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  max-width: 575px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .top-attraction {
    padding: 60px 20px;
    box-sizing: border-box;
  }

  .top-attraction__side {
	padding-left: 0;
}

  .top-attraction__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .top-attraction__side-inner {
    position: static;
  }

  .top-attraction__side-sub {
    margin-bottom: 25px;
  }

  .top-attraction__item {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 30px 20px;
  }
}

@media screen and (max-width: 768px) {
  .top-attraction__side-title-img {
    max-width: 280px;
  }

  .top-attraction__side-sub {
    font-size: 18px;
  }

  .top-attraction__body {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px 16px;
    padding-top: 10px;
  }

  .top-attraction__num {
    font-size: 38px;
  }

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

  .top-attraction__text {
    font-size: 15px;
  }
  .top-attraction__num-box,
  .top-attraction__card-title,
  .top-attraction__text {
	grid-column: unset;
	grid-row: unset;
}
}


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


/* ==========================================
   1. Interview セクション
   ========================================== */
.top-interview {
  position: relative;
  z-index: 5;
  margin-bottom: 150px;
}

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

.top-interview__header-bg {
  position: absolute;
  bottom: -30%;
  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;
  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(207, 24, 0, 0.7);
  z-index: 1;
  /* テキストの背面に配置 */
}

/* プロフィールテキスト（切り抜きから完全に保護） */
.top-interview__profile-content {
  position: absolute;
  top: 20px;
  left: 20px;
  text-align: left;
  z-index: 2;
  filter: drop-shadow(0 0 10px #000);
}

.top-interview__profile-name {
  color: #fff;
  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;
  white-space: nowrap;
}

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

.top-interview__msg-text {
  color: #fff;
  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%;
}

.top-news__header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 50px;
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   1. 左側：タイトル部分
   -------------------------------------------------------------------------- */
.top-news__title-group {
  display: flex;
  flex-direction: column;
}

.top-news__title-en {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.top-news__title-jp {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   2. 右側：カテゴリリンク部分
   -------------------------------------------------------------------------- */
.top-news__cat-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.top-news__cat-item {
  list-style: none;
}

.top-news__cat-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding-left: 60px;
}

/* 左側の横棒共通指定 (width: 50px, height: 3px) */
.top-news__cat-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 3px;
  transition: width 0.3s ease;
}

/* カテゴリ: お知らせ (#CF1800) */
.top-news__cat-link--news {
  color: #CF1800;
}

.top-news__cat-link--news::before {
  background-color: #CF1800;
}

/* カテゴリ: 施工事例 (#EE4B15) */
.top-news__cat-link--examples {
  color: #EE4B15;
}

.top-news__cat-link--examples::before {
  background-color: #EE4B15;
}


/* --------------------------------------------------------------------------
   レスポンシブ対応 (スマホ表示)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .top-news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 30px;
  }

  .top-news__title-en {
    font-size: 44px;
    margin-bottom: 8px;
  }

  .top-news__title-jp {
    font-size: 16px;
  }

  .top-news__cat-list {
    gap: 15px;
  }

  .top-news__cat-link {
    font-size: 16px;
    padding-left: 50px;
    /* スマホ時は少し横棒と間隔を調整 */
  }

  .top-news__cat-link::before {
    width: 40px;
  }
}

/* スライダーレイアウト（画面外フェードアウト・インナー開始位置同期） */
.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: #100000;
}

.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;
}

.top-news__card-tag--default {
  background-color: #100000;
}

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

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

.top-news__card-date {
  font-size: 18px;
  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: #FFF8F8;
  border-radius: 0;
}

.top-news__scrollbar .swiper-scrollbar-drag {
  background-color: #CF1800;
  /* アクティブドラッグバー色 */
  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;
  }
}


/* ==========================================================================
   Top Page - Area Section
   ========================================================================== */

/* 1. セクション全体（1枚背景画像） */
.top-area {
  position: relative;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 120px;
  background-image: url('./images/area_bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
}

/* 2. 右下三角形装飾 */
.top-area__deco-triangle {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 2;
  pointer-events: none;
  max-width: 32%;
}

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

/* 3. コンテナ＆レイアウト */
.top-area__container {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  max-width: 1740px;
}

.top-area__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. 左側：関東地図 ＆ 波紋アニメーション (ソフトライト)
   -------------------------------------------------------------------------- */
.top-area__map-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.top-area__map-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

/* 波紋表示用エリア (ソフトライト合成) */
.top-area__ripple-wrap {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.top-area__ripple-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #EE4B15;
  opacity: 0;
  animation: ripple 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.top-area__ripple-circle--1 {
  animation-delay: 0s;
}

.top-area__ripple-circle--2 {
  animation-delay: 1.3s;
}

.top-area__ripple-circle--3 {
  animation-delay: 2.6s;
}

/* 波紋アニメーション定義（中央から広がりながらフェードアウト） */
@keyframes ripple {
  0% {
    width: 0%;
    height: 0%;
    padding-bottom: 0%;
    opacity: 0.9;
  }

  100% {
    width: 120%;
    height: 0%;
    padding-bottom: 120%;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   5. 右側：テキストコンテンツ ＆ AREA文字背景
   -------------------------------------------------------------------------- */
.top-area__content {
  position: relative;
  width: 100%;
}

/* AREA透過文字画像 (w765px) */
.top-area__bg-text {
  position: absolute;
  top: -50px;
  left: -60px;
  width: 100%;
  max-width: 765px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
}

.top-area__bg-text-img {
  width: 100%;
  height: auto;
}

.top-area__text-inner {
  position: relative;
  z-index: 2;
}

/* メインタイトル */
.top-area__title {
  color: #FFF;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 30px;
}

.top-area__title-large {
  font-size: 48px;
}

/* 説明文 */
.top-area__description {
  color: #FFF;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 40px;
  max-width: 700px;
}

/* 都道府県リスト */
.top-area__list {
  color: #FFF;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .top-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .top-area__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .top-area__map-wrap {
    max-width: 480px;
  }

  .top-area__bg-text {
    top: -40px;
    left: 0;
    max-width: 100%;
  }

  .top-area__title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .top-area__title-large {
    font-size: 38px;
  }

  .top-area__description {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
  }

  .top-area__list {
    font-size: 36px;
  }
}

@media screen and (max-width: 768px) {
  .top-area {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .top-area__title {
    font-size: 22px;
  }

  .top-area__title-large {
    font-size: 30px;
  }

  .top-area__description {
    font-size: 15px;
  }

  .top-area__list {
    font-size: 26px;
    line-height: 1.6;
  }
}


/* ==========================================================================
   Top Page - Company Section
   ========================================================================== */

/* 1. セクション全体（1枚背景画像） */
.top-company {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 120px;
  background-color: #FFF;
  background-image: url('./images/company_bg.png');
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.top-company__inner {
  margin: 0 auto;
}

/* 2. 2カラムレイアウト (gap: 50px) */
.top-company__wrapper {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.top-company__card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   3. 見出しエリア (英語 + 日本語 50px間隔)
   -------------------------------------------------------------------------- */
.top-company__header {
  display: flex;
  align-items: baseline;
  gap: 50px;
  margin-bottom: 25px;
}

/* 英語タイトル (font-size: 64px, font-weight: 700) */
.top-company__title-en {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.0;
  color: #100000;
  letter-spacing: 0.05em;
}

/* 英語タイトルの頭文字 (color: #CF1800) */
.top-company__title-first {
  color: #CF1800;
}

/* 日本語タイトル (font-size: 20px, font-weight: 700) */
.top-company__title-jp {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #100000;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. 画像エリア
   -------------------------------------------------------------------------- */
.top-company__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #EEE;
}

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

/* --------------------------------------------------------------------------
   5. 右寄せボタンエリア
   -------------------------------------------------------------------------- */
.top-company__btn-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .top-company {
    padding-top: 70px;
    padding-bottom: 80px;
  }

  .top-company__wrapper {
    flex-direction: column;
    gap: 60px;
  }

  .top-company__header {
    gap: 30px;
    margin-bottom: 20px;
  }

  .top-company__title-en {
    font-size: 48px;
  }

  .top-company__title-jp {
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .top-company {
    padding-top: 50px;
    padding-bottom: 60px;
  }

  .top-company__wrapper {
    gap: 45px;
  }

  .top-company__header {
    gap: 20px;
  }

  .top-company__title-en {
    font-size: 38px;
  }

  .top-company__title-jp {
    font-size: 16px;
  }
}


/* ==========================================
   FAQセクション 全体・背景レイアウト
   ========================================== */
.top-faq {
  position: relative;
  width: 100%;
  background-color: #FFF8F8;
  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;
}

.top-faq__decor--rect-top {
  top: 200px;
  left: 70px;
  width: 224px;
}

.top-faq__decor--rect-bottom {
  bottom: 300px;
  right: 40px;
  width: 314px;
}

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

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

.top-faq__title-group {
  display: flex;
  flex-direction: column;
}

.top-faq__title-en {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.top-faq__title-jp {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}


.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四方・背景#CF1800 */
.common-faq__icon-q {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #CF1800;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  margin-right: 25px;
}

.common-faq__question-text {
  font-size: 20px;
  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: #100000;
  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: #100000;
  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 60px 0 30px;
  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四方・背景#EE4B15 */
.common-faq__icon-a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #EE4B15;
  color: #fff;
  font-size: 20px;
  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: left;
}

.page-fv__title {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
}

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

.page-fv__eng-large {
  position: absolute;
  top: 20px;
  left: -200px;
  display: block;
  color: #fff;
  font-family: "Vujahday Script", cursive;
  font-size: 128px;
  font-weight: 400;
  line-height: 1.0;
  opacity: 0.3;
  letter-spacing: 0.02em;
  user-select: none;
}

.page-fv__eng-small {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.0;
  white-space: nowrap;
  margin-bottom: 10px;
  display: block;
}

@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;
    left: -10px;
  }

  .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;
}

.breadcrumb_divider {
  margin: 0 15px;
  width: 5px;
  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: #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;
  border-bottom: 2px solid #CF1800;
  margin-bottom: 50px;
}

/* 大見出しタイトル */
.common-related__title {
  color: #CF1800;
  font-size: 48px;
  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: #FFF0EE;
  /* 指定：#FFF0EE背景のバージョン */
}


/* --- 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(207, 24, 0, 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: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.0;
  display: block;
  margin-bottom: 15px;
}

/* カードサブ（英語：16px / Bold） */
.common-related__card-sub {
  color: #fff;
  font-weight: 700;
  line-height: 1.0;
  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(207, 24, 0, 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;
  }

}


/* ==========================================
   共通コンポーネント：子ページ内アンカーナビ
   ========================================== */
.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: #CF1800;
  /* 指定背景色 */
  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 #fff;
  /* 太さ2px */
  border-bottom: 2px solid #fff;
}


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

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

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

.common-subpage-heading--orange .common-subpage-heading__eng {
  color: #EE4B15;
}


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

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

  /* スマホ時はナビを縦並びにスイッチしてはみ出し防止 */
  .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;
  }
}


/* ==========================================
   Company: 代表挨拶 セクション固有スタイル
   ========================================== */
.company-message {
  position: relative;
  width: 100%;
  padding: 90px 0 100px;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 大見出しの下を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 Page - Feature Section
   ========================================================================== */

.company-feature {
  width: 100%;
  padding-top: 90px;
  padding-bottom: 120px;
}

.company-feature__inner {
  margin: 0 auto;
}

/* 見出しエリア */
.company-feature__heading-wrap {
  text-align: center;
  margin-bottom: 100px;
}

/* 強みアイテムグループ */
.company-feature__items {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.company-feature__item {
  display: flex;
  gap: 50px;
}

/* 2番目の左右反転スタイル */
.company-feature__item--reverse {
  flex-direction: row-reverse;
}

.company-feature__img-wrap {
  flex: 1;
  max-width: 515px;
  overflow: hidden;
}

.company-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.company-feature__content {
  flex: 1;
}

/* --------------------------------------------------------------------------
   FEATURE + 数字 (下揃え ＆ フォント指定)
   -------------------------------------------------------------------------- */
.company-feature__num-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 15px;
}

.company-feature__label {
  color: #CF1800;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  line-height: 1.0;
}

.company-feature__num {
  color: #CF1800;
  font-family: "Oswald", sans-serif;
  font-size: 64px;
  line-height: 1.0;
}

/* タイトル ＆ 強調色 (#EE4B15) */
.company-feature__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.company-feature__highlight {
  color: #EE4B15;
}


/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .company-feature {
    padding-top: 60px;
    padding-bottom: 80px;
  }

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

  .company-feature__items {
    gap: 50px;
  }

  .company-feature__item,
  .company-feature__item--reverse {
    flex-direction: column;
    gap: 25px;
  }

  .company-feature__img-wrap {
    max-width: 100%;
    width: 100%;
  }

  .company-feature__num {
    font-size: 48px;
  }

  .company-feature__title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .company-feature__text br {
    display: none;
  }
}

/* ==========================================
   Company: 会社概要 セクション固有スタイル
   ========================================== */
.company-about {
  position: relative;
  width: 100%;
  padding: 140px 0;
  background: #FFF8F8;
  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;
}

.company-about__row {
  border-bottom: 2px solid #FFF8F8;
}

.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;
  color: #100000;
}

.company-about__td {
  color: #100000;
  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;
  width: 100%;
}

.work-business__item--reverse {
  flex-direction: row-reverse;
}

.work-business__body {
  width: 49%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.work-business__visual {
  width: 46%;
}

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

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

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

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

.work-business__title span {
  color: #CF1800;
}

/* 本文テキスト */
.work-business__text {
  /* bodyデフォルトをそのまま継承 */
  line-height: 2.0;
  color: #100000;
  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 Attraction Section Header & Marquee
   ========================================================================== */

.work-attraction {
  padding: 50px 0 120px;
}

.work-attraction__heading-wrap {
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* はみ出したマーキーテキストを非表示 */
}

/* 背面マーキー全体コンテナ */
.work-attraction__bg-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-55%);
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* マーキーアニメーション用トラック */
.work-attraction__bg-text-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: work-attraction-marquee 25s linear infinite;
}

/* 流れるテキスト単体スタイル */
.work-attraction__bg-text-item {
  display: inline-block;
  font-size: 200px;
  font-weight: 700;
  line-height: 1;
  color: #CF1800;
  opacity: 0.1;
  padding-right: 0.3em;
  /* 単語同士の間隔 */
  letter-spacing: 0.05em;
}

/* 右から左への無限ループアニメーション定義 */
@keyframes work-attraction-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* 前面日本語見出し */
.work-attraction__heading {
  position: relative;
  color: #CF1800;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  z-index: 2;
  text-align: center;
}

.work-attraction__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

.work-attraction__lead {
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}

.work-attraction__skill {
  color: #CF1800;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .work-attraction__heading-wrap {
    height: 100px;
  }

  .work-attraction__bg-text-item {
    font-size: 100px;
  }

  .work-attraction__heading {
    font-size: 32px;
  }

  .work-attraction__lead {
	font-size: 16px;
	margin-top: 30px;
}

  .work-attraction__skill {
    font-size: 22px;
  }
}

/* ==========================================================================
   Work Attraction Section - Antei Block
   ========================================================================== */

.work-attraction__antei {
  position: relative;
}

/* 1. 上部オレンジカプセル見出し */
.work-attraction__antei-header {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 90%;
  margin: 0 auto -25px;
}

.work-attraction__antei-title {
  background-color: #EE4B15;
  color: #FFF;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: 12px 50px;
  border-radius: 50px;
  white-space: nowrap;
}

/* 2. 4列カードリスト */
.work-attraction__antei-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* 各カードアイテム */
.work-attraction__antei-item {
  background-color: #FFF;
  border: 3px solid #EE4B15;
  padding: 45px 15px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

/* アイコン画像領域 */
.work-attraction__antei-icon-wrap {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  max-width: 150px;
  height: 150px;
}

.work-attraction__antei-icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* カードテキスト */
.work-attraction__antei-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .work-attraction__antei-title {
    font-size: 20px;
    padding: 10px 35px;
  }

  .work-attraction__antei-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .work-attraction__antei-text {
    font-size: 16px;
  }
}

@media screen and (max-width: 600px) {
  .work-attraction__antei-header {
    width: 100%;
    margin-bottom: -18px;
  }

  .work-attraction__antei-title {
    font-size: 16px;
    padding: 10px 15px;
    white-space: normal;
    border-radius: 30px;
  }

  .work-attraction__antei-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .work-attraction__antei-item {
    padding: 35px 15px 20px;
  }

  .work-attraction__antei-icon-wrap {
    height: 90px;
    margin-bottom: 15px;
  }

  .work-attraction__antei-text {
    font-size: 15px;
    min-height: auto;
  }
}


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

  background: linear-gradient(to bottom, #ffffff 50%, #FFF8F8 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%, #FFF8F8 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: #FFF8F8;
  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: #100000;
  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: 160px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background-color: #CF1800;
  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: #CF1800;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 4px solid #FFF8F8;
  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: #CF1800;
  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: #100000;
  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 {
  width: 100%;
  padding-top: 90px;
  padding-bottom: 120px;
  overflow: hidden;
}

/* 見出しエリア */
.env-interview__heading-wrap {
  text-align: center;
  margin-bottom: 70px;
}

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

/* --------------------------------------------------------------------------
   レイアウト構造 (左右非対称 Flexbox)
   -------------------------------------------------------------------------- */
.env-interview__list {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.env-interview__item {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 2人目 (左画像 / 右テキスト) 反転指定 */
.env-interview__item--reverse {
  flex-direction: row-reverse;
}

/* --- テキストコンテンツ側 (w-1440の枠に端を合わせる) --- */
.env-interview__content {
  flex: 1;
  padding-left: max(20px, calc((100vw - 1440px) / 2 + 20px));
  padding-right: 60px;
}

.env-interview__item--reverse .env-interview__content {
  padding-left: 60px;
  padding-right: max(20px, calc((100vw - 1440px) / 2 + 20px));
}

/* --- 画像エリア側 (画面端までぴったり付く) --- */
.env-interview__img-wrap {
  width: 48%;
  flex-shrink: 0;
}

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

/* --------------------------------------------------------------------------
   Q&A テキストスタイル
   -------------------------------------------------------------------------- */
.env-interview__qa-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.env-interview__qa-item {
  display: flex;
  flex-direction: column;
}

/* 質問 (Q.01〜Q.04) スタイル */
.env-interview__question {
  color: #CF1800;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* 2人目の質問カラー (#EE4B15) */
.env-interview__item--color-orange .env-interview__question {
  color: #EE4B15;
}

/* 回答 (A) スタイル (デフォルトタイポグラフィ継承) */
.env-interview__answer {
  font-size: 16px;
  font-weight: 500;
  line-height: 2.0;
  color: #100;
  margin: 0;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .env-interview {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .env-interview__list {
    gap: 70px;
  }

  .env-interview__item,
  .env-interview__item--reverse {
    flex-direction: column-reverse;
  }

  .env-interview__img-wrap {
    width: 100%;
    max-width: 100%;
  }

  .env-interview__content,
  .env-interview__item--reverse .env-interview__content {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 35px;
  }

  .env-interview__question {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .env-interview__answer {
    font-size: 15px;
    line-height: 1.8;
  }
}

@media screen and (max-width: 768px) {
  .env-interview__heading-wrap {
    margin-bottom: 40px;
  }

  .env-interview__list {
    gap: 50px;
  }

  .env-interview__qa-list {
    gap: 25px;
  }

  .env-interview__answer br {
    display: none;
  }
}


/* ==========================================
   Environment: 職場環境 セクション固有スタイル
   ========================================== */
.env-environment {
  position: relative;
  width: 100%;
  padding: 140px 0;
  background-color: #ffffff;
  box-sizing: border-box;
}

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

/* --- 2. メインコンテンツ（テキスト＆写真の横並び） --- */
.env-environment__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

/* ==========================================================================
   Environment Page - Environment Block
   ========================================================================== */

/* テキストと写真の横並びアイテム */
.env-environment__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.env-environment__item--reverse {
  flex-direction: row-reverse;
}

.env-environment__body {
  width: 49%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.env-environment__visual {
  width: 46%;
}

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

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

.env-environment__number {
  display: block;
  color: #CF1800;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.0;
  margin-bottom: 15px;
  letter-spacing: 0.02em;
}

.env-environment__title {
  font-size: 24px;
  font-weight: 700;
  color: #100000;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 15px;
  letter-spacing: 0.04em;
}

.env-environment__title span {
  color: #CF1800;
}

.env-environment__text {
  line-height: 2.0;
  color: #100000;
  margin: 0;
}

/* --------------------------------------------------------------------------
   レスポンシブ（767px以下）スマホ最適化
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .env-environment__item {
    flex-direction: column;
    gap: 30px;
  }

  .env-environment__body,
  .env-environment__visual {
    width: 100%;
  }

  .env-environment__number {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .env-environment__title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .env-environment__text {
    font-size: 15px;
    line-height: 1.8;
  }

  .env-environment__text br {
    display: none;
  }
}

/* --- 3. 3連横並び特長グリッド --- */
.env-environment__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-environment__feature-item {
  width: 29.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上部のアイコン画像を中央寄せ */
  text-align: center;
  /* テキストも美しく中央揃え */
}

/* 上部：丸いアイコンと文字（画像ラッパー） */
.env-environment__feature-img-wrap {
  width: 100%;
}

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

.env-environment__skill {
  color: #CF1800;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}

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

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

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

  /* 3つ並びのグリッドを縦並びにスイッチ */
  .env-environment__feature-grid {
    flex-direction: column;
    gap: 40px;
    /* 縦並び時の各カード間の余白 */
  }

  .env-environment__feature-item {
    width: 100%;
  }

  .env-environment__skill {
    font-size: 22px;
  }
}

/* ==========================================================================
   Environment Page - Benefit Grid (env-environment__benefit)
   ========================================================================== */

.env-environment__benefit {
  width: 100%;
}

/* 4列グリッドコンテナ */
.env-environment__benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

/* 各福利厚生カード */
.env-environment__benefit-item {
  background-color: #FFF8F8;
  padding: 35px 15px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* アイコン画像領域 */
.env-environment__benefit-icon-wrap {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.env-environment__benefit-icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* カードテキスト */
.env-environment__benefit-text {
  color: #EE4B15;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .env-environment__benefit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .env-environment__benefit-item {
    padding: 30px 15px 20px;
  }

  .env-environment__benefit-icon-wrap {
    height: 75px;
    margin-bottom: 15px;
  }

  .env-environment__benefit-text {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .env-environment__benefit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .env-environment__benefit-item {
    padding: 22px 10px 18px;
  }

  .env-environment__benefit-icon-wrap {
    height: 60px;
    margin-bottom: 10px;
  }

  .env-environment__benefit-text {
    font-size: 14px;
  }
}

/* ==========================================
   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: 20px;
  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: #FFF0EE;
}

.page-faq {
  position: relative;
  width: 100%;
  padding: 100px 0 140px;
  box-sizing: border-box;
}

/* ページ内アンカーナビゲーションの下マージン */
.page-faq__nav-wrap {
  margin-bottom: 120px;
}


/* ユーザー指定：コンテンツ最大幅 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 {
  font-size: 24px;
  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;
}

.page-faq__category-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 2px;
  background-color: #100000;
}



/* ==========================================
   レスポンシブ（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;
}

.recruit-intro {
  position: relative;
  width: 100%;
  padding: 100px 0 70px;
  box-sizing: border-box;
}

/* ユーザー指定：コンテンツ最大幅 1100px レイアウト */
.recruit-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.recruit-intro__nav-wrap {
  width: 100%;
}


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


/* ==========================================================================
   Recruit Page - Message Section
   ========================================================================== */

.recruit-message {
  width: 100%;
  padding-top: 90px;
  padding-bottom: 120px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   1. 最上部英語見出し (MESSAGE & 二重線)
   -------------------------------------------------------------------------- */
.recruit-message__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  max-width: 970px;
  margin: 0 auto 60px;
}

.recruit-message__title {
  color: #CF1800;
  font-size: 96px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 左右の二重線装飾 */
.recruit-message__double-line {
  flex: 1;
  height: 8px;
  border-top: 2px solid #CF1800;
  border-bottom: 2px solid #CF1800;
}

/* --------------------------------------------------------------------------
   2. メインコンテンツ (左写真・右テキスト)
   -------------------------------------------------------------------------- */
.recruit-message__main {
  width: 100%;
  margin-bottom: 100px;
}

.recruit-message__main-inner {
  display: flex;
  width: 100%;
}

/* 左写真：画面左端〜中央右寄りまで拡大 */
.recruit-message__img-wrap {
  width: 50%;
  max-width: 876px;
  flex-shrink: 0;
}

.recruit-message__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右テキスト：w-1440の枠に収まるようパディング配置 */
.recruit-message__content {
  flex: 1;
  max-width: 720px;
  padding-left: 60px;
  padding-right: 20px;
}

.recruit-message__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 30px;
}

.recruit-message__sub-heading {
  color: #EE4B15;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 30px;
}

.recruit-message__text {
  margin-bottom: 30px;
}

.recruit-message__text:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. 「こんな方にオススメ」ボックス
   -------------------------------------------------------------------------- */
.recruit-message__recommend {
  background-color: #FFF8F8;
  padding-top: 80px;
  padding-bottom: 100px;
  margin: 0 auto;
}

.recruit-message__recommend-inner {
  margin: 0 auto;
}

.recruit-message__recommend-title {
  color: #CF1800;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 50px;
}

.recruit-message__recommend-boxes {
  display: flex;
  gap: 20px;
}

.recruit-message__recommend-box {
  flex: 1;
  background-color: #FFF;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* 1行・2行の見出しがあっても、下のアイコン上部が揃うように固定幅(min-height)を担保 */
.recruit-message__recommend-box-title {
  line-height: 1.4;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.recruit-message__recommend-icon-wrap {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: flex-start;
  /* アイコン上部揃え */
  justify-content: center;
}

.recruit-message__recommend-icon {
  max-width: 185px;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .recruit-message__title-wrap {
    gap: 30px;
    margin-bottom: 40px;
  }

  .recruit-message__title {
    font-size: 64px;
  }

  .recruit-message__main-inner {
    flex-direction: column;
  }

  .recruit-message__img-wrap {
    width: 100%;
    max-width: 100%;
  }

  .recruit-message__content {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 40px;
  }

  .recruit-message__recommend-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .recruit-message {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .recruit-message__title-wrap {
    gap: 15px;
  }

  .recruit-message__title {
    font-size: 42px;
  }

  .recruit-message__heading {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .recruit-message__sub-heading {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .recruit-message__recommend {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .recruit-message__recommend-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .recruit-message__recommend-boxes {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .recruit-message__recommend-box-title {
    min-height: auto;
    margin-bottom: 15px;
  }

  .recruit-message__recommend-icon-wrap {
    height: auto;
  }
}


/* ==========================================================================
   Recruit Page - Marquee Section
   ========================================================================== */

.recruit-marquee {
  width: 100%;
  overflow: hidden;
  /* 上半分 #FFF, 下半分 #FFFAF6 の背景グラデーション */
  background: linear-gradient(to bottom, #FFF 55%, #FFFAF6 55%);
  padding: 10px 0;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* 横移動用トラック */
.recruit-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll 30s linear infinite;
}

/* テキストスタイル */
.recruit-marquee__text {
  display: inline-block;
  color: #CF1800;
  font-size: clamp(80px, 15vw, 200px);
  /* 画面幅に応じて可変・最大200px */
  font-weight: 700;
  line-height: 1;
  opacity: 0.1;
  padding-right: 0.4em;
  /* ループ時の単語間スペース */
  letter-spacing: 0.05em;
}

/* 無限ループアニメーション定義 */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   レスポンシブ調整
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .recruit-marquee {
    padding: 5px 0;
  }

  .recruit-marquee__track {
    animation-duration: 20s;
    /* スマホ時はスクロール速度を少し調整 */
  }
}


/* ==========================================
   Recruit: 募集要項 セクション固有スタイル（修正版）
   ========================================== */
.recruit-requirements {
  position: relative;
  width: 100%;
  padding: 140px 0;
  background-color: #FFFAF6;
  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: #EE4B15;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
}

/* 右側：項目内容部分（幅76%） */
.recruit-requirements__td {
  width: 76%;
  background-color: #fff;
  color: #100000;
  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;
}


/* --- 右側：アクションボタンエリア --- */
.recruit-entry__actions {
  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: #CF1800 !important;
  /* 指定：背景色はCF1800 */
}

/* ホバー時のシャッターエフェクトの背景色を上書き */
.common-btn__main--recruit-form::before {
  background-color: #ffffff !important;
  /* 指定：ホバー時のエフェクトの色は#fff */
}

/* ホバー時の「文字色」の連動切り替え */
.common-btn__main--recruit-form:hover .common-btn__main-text {
  color: #CF1800 !important;
  /* 指定：文字がCF1800 */
}

/* ホバー時の「矢印（本体の横線 ＆ 先端の斜め線）」の連動切り替え */
.common-btn__main--recruit-form:hover .common-btn__main-arrow {
  background-color: #CF1800 !important;
  /* 指定：矢印がCF1800（本体線） */
}

.common-btn__main--recruit-form:hover .common-btn__main-arrow::after {
  background-color: #CF1800 !important;
  /* 指定：矢印がCF1800（先端斜め線） */
}


/* ------------------------------------------
   2. TEL応募ボタン（--recruit-tel）
   ------------------------------------------ */
.common-btn__main--recruit-tel {
  background-color: #CF1800 !important;
  /* 指定：背景色はCF1800 */
}

/* 【指定】数字部分の文字だけ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: #CF1800 !important;
  /* 指定：文字がCF1800 */
}

/* ホバー時の「矢印（本体の横線 ＆ 先端の斜め線）」の連動切り替え */
.common-btn__main--recruit-tel:hover .common-btn__main-arrow {
  background-color: #CF1800 !important;
  /* 指定：矢印がCF1800（本体線） */
}

.common-btn__main--recruit-tel:hover .common-btn__main-arrow::after {
  background-color: #CF1800 !important;
  /* 指定：矢印がCF1800（先端斜め線） */
}


/* ==========================================
   レスポンシブ（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 / 中央揃え） */
.recruit-flow__lead {
  font-size: 20px;
  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: #fff;
  border: 3px solid #CF1800;
  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 #CF1800;
  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--all {
  background-color: #100000 !important;
  color: #fff !important;
  border-color: #100000 !important;
}

.common-page-nav__link--examples {
  background-color: #CF1800 !important;
  color: #fff !important;
  border-color: #CF1800 !important;
}

.common-page-nav__link--news {
  background-color: #EE4B15 !important;
  color: #fff !important;
  border-color: #EE4B15 !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: #fff;
  background-color: #100000;
  /* デフォルト背景（未分類など用） */
  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: #CF1800 !important;
}

/* お知らせ（スラッグ名: news）のバッジ背景色 */
.archive-blog__cat--news {
  background-color: #EE4B15 !important;
}


/* --- 日付 ＆ タイトル定義 --- */
.archive-blog__date-box .date {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #100000;
  margin: 0;
}

.archive-blog__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #100000;
  margin: 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 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 #100000;
  background-color: #ffffff;
  color: #100000;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

.archive-blog__pagination ul.page-numbers li span.current {
  background-color: #100000;
  color: #fff;
  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: #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;
  width: 100%;
  margin-bottom: 30px;
  /* 指定：その下30pxに投稿名 */
}

/* 指定：カテゴリ名スタイル（ベース共通） */
.single-blog__cat {
  display: block;
  width: 155px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: #100000;
  padding: 6px 0;
  text-align: center;
  flex-shrink: 0;
}

/* 【一覧と完全同期】カテゴリに応じた背景色の動的上書き */
.single-blog__cat--examples {
  background-color: #CF1800 !important;
  /* 指定：施工事例の背景色は#CF1800 */
}

.single-blog__cat--news {
  background-color: #EE4B15 !important;
  /* 指定：お知らせの背景色は#EE4B15 */
}

/* 指定：日付スタイル */
.single-blog__date-box .date {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}


/* --- 2. 投稿名タイトル --- */
.single-blog__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 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. コンテンツ本文部分 ＆ 下線 --- */
.single-blog__body {
  width: 100%;
  text-align: left;
  padding-bottom: 50px;
  border-bottom: 2px solid #100000;
  margin-bottom: 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;
  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-weight: 700;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}

/* 一覧に戻るボタン専用スタイル（背景#100000 / width: 350px / 24px / Bold） */
.single-blog__nav-item--back {
  flex: 0 0 350px;
  width: 350px;
}

.single-blog__btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  background-color: #100000;
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-sizing: border-box;
}


/* ==========================================
   レスポンシブ（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: #100000;
  text-align: left;
  padding: 14px 20px 14px 0;
  /* 左端をピシッと整列 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* 共通必須バッジデザイン（背景#CF1800 / 白文字 / 直角） */
.page-contact .required {
  display: inline-block;
  background-color: #CF1800 !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: #100000 !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: #100000 !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: #100000 !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: #100000 !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: #111;
  user-select: none;
}

/* 【指示完全再現】ラジオボタン本体 ＆ 同意チェックボックス本体を丸型同型へ昇華 */
.wpcf7-radio input[type="radio"],
.wpcf7-acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #BABEC0;
  border-radius: 50% !important;
  margin: 0 12px 0 0;
  position: relative;
  background-color: #fff;
  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: #CF1800;
  /* 赤丸 */
  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 {
  text-decoration: underline;
}


/* 【指示】「必須」も他の箇所と同じデザインにしてください */
.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: #100000 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  border: none !important;
  outline: none;
  border-radius: 0 !important;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: .4s;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

p.submit_button input.wpcf7-submit:hover {
  opacity: 0.7;
}


/* ==========================================
   レスポンシブ（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: #100000;
  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: #100000 !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: 0.4s;
  box-sizing: border-box;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* 1. 【送信する】ボタン（一番重要な決定アクション：レッドを適用） */
.confirm_button input.wpcf7-submit {
  background-color: #CF1800 !important;
  color: #ffffff !important;
}

.confirm_button input.wpcf7-submit:hover {
  opacity: 0.7;
}

/* 2. 【内容を修正する】ボタン（一つ手前に戻るサブアクション：シックな黒を適用） */
.confirm_button .prev input.wpcf7-previous {
  background-color: #100000 !important;
  color: #ffffff !important;
}

.confirm_button .prev input.wpcf7-previous:hover {
  opacity: 0.7;
}

/* くるくる回るローディングスピナー（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;
  }
}