@charset "utf-8";
/* ==================================
common
===================================== */
@font-face {
  font-family: "mgenplus";
  src: url("/dcms_media/other/mgenplus-1c-regular.woff") format("woff"), url("/dcms_media/other/mgenplus-1c-bold.woff") format("woff"), url("/dcms_media/other/mgenplus-1c-black.woff") format("woff");
}
body {
  font-family: 'Noto Sans JP', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Noto Sans JP', sans-serif;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
a,
.t-default a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
#locator ol {
  padding: 0;
}
.br-pc {
  display: inline;
}
.br-sp {
  display: none;
}
.rounded-20 {
  border-radius: 20px;
}

/* タイトル */
.main-title {
  font-size: 40px;
  margin-bottom: 40px;
  line-height: 1.2;
}
@media only screen and (max-width: 690px) {
  .main-title {
    font-size: 30px;
  }
}
.heading-25 {
  position: relative;
  padding-top: 5rem;
  color: #0f78d2;
  font-weight: bold;
}
.heading-25::before {
  position: absolute;
  bottom: 0.5em;
  left: 0;
  z-index: -1;
  color: #d4e7f7;
  font-size: 1.5em;
  line-height: normal;
  content: attr(data-word);
  pointer-events: none;
  font-weight: bold;
}
.heading-25.green {
  color: #159f75;
}
.heading-25.green::before {
  color: #d5eee6;
}
.page_contact .heading-25.green {
  color: #0f78d2;
}
.page_contact .heading-25.green::before {
  color: #d4e7f7;
}
.dlb_title-sub-04.green::before {
  background-color: #159f75;
}
@media only screen and (max-width: 820px) {
  .heading-25::before {
    font-size: 1.4em;
  }
}

/* ボタン */
.btn.bg-grad-01,
.btn.bg-grad-02 {
  border: none !important;
}
.btn.bg-grad-01 a {
  color: #fff;
  border: 1px solid transparent !important;
  /*border-color: #0f78d2 !important;
  border-right-color: #5BA2DE !important;*/
}
.btn.bg-grad-02 a {
  color: #fff;
  border: 1px solid transparent !important;
  /*border-color: #159f75 !important;
  border-right-color: #59E0B7 !important;*/
}
.btn.bg-grad-01:hover a {
  background-color: #fff;
  color: #0f78d2;
  border: 1px solid #0f78d2 !important;
}
.btn.bg-grad-02:hover a {
  background-color: #fff;
  color: #159f75;
  border-color: #159f75 !important;
}
div.btn.bg-grad-02 a:hover::before {
  background: url(/dcms_media/image/arrow-green.png) 0 0 no-repeat;
}
div.btn.btn-outline-accent-02 a::before {
  background: url(/dcms_media/image/arrow-green.png) 0 0 no-repeat;
}
div.btn.btn-outline-accent-02 a:hover:before {
  background: url(/dcms_media/image/arrow.png) 0 0 no-repeat;
}
div.btn.anker-link a::before {
  right: 40px;
  -webkit-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}
.dlb_flow-1 .dlb_flow-item+.dlb_flow-item::before {
  border-color: transparent transparent transparent #0f78d2 !important;
}
.share_top-link .top-link .btn a:hover:after {
  border-color: #0f78d2;
}

/* ==================================
ユーティリティー
===================================== */
/*---------- 画像の比率 ----------*/
.u-aspect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-aspect.--4x3 img {
  aspect-ratio: 4 / 3;
}
.u-aspect.--16x9 img {
  aspect-ratio: 16 / 9;
}
.u-aspect.--21x9 img {
  aspect-ratio: 21 / 9;
}
.u-aspect.--1x1 img {
  aspect-ratio: 1 / 1;
}
.u-aspect.--2x1 img {
  aspect-ratio: 2 / 1;
}
.u-aspect.--3x1 img {
  aspect-ratio: 3 / 1;
}
.u-aspect.--4x1 img {
  aspect-ratio: 4 / 1;
}
.u-aspect.--7x8 img {
  aspect-ratio: 7 / 8;
}
.u-aspect.--9x16 img {
  aspect-ratio: 9 / 16;
}
.u-aspect.--3x4 img {
  aspect-ratio: 3 / 4;
}

/* 画像全体を枠内に入れたいとき */
.u-aspect.--contain img {
  object-fit: contain;
}

/* ==================================
グラデーション
===================================== */
.grad-color {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==================================
テキストシャドウ
===================================== */
.text-shadow {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

/* ==================================
背景画像を設定したい時
===================================== */
.bg_image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* ==================================
黒透過
===================================== */
.bg-black-shadow {
  position: relative;
}
.bg-black-shadow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

/* ==================================
白透過
===================================== */
.bg-white-shadow {
  position: relative;
}
.bg-white-shadow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

/* ==================================
table要素のborder-right
===================================== */
.main_table th {
  border-right: 1px solid #dee2e6;
}

/* ==================================
フローコンテンツの矢印の色（デフォルトはグレー）
===================================== */
.dlb_flow-5 .dlb_flow-item+.dlb_flow-item::before {
  border-color: #e2cb58 transparent transparent transparent !important;
}

/* ==================================
 横100% BGとテキストの背景画像の設定（コンテンツ31）
===================================== */
.dlb_contents_wrap-wide {
  background-size: cover;
}

/* ==================================
横並びコンテンツの崩れ修正（コンテンツ66/67）
===================================== */
.dlb_contents_overflow .dlb_contents_overflow-right:before,
.dlb_contents_overflow .dlb_contents_overflow-left:before {
  top: 50% !important;
}

/* ==================================
アコーディオンの矢印の調整
===================================== */
.dlb_list_accordion .btn::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.dlb_list_accordion .btn.collapsed::after {
  margin-top: -6px !important;
  right: 11px !important;
}
.dlb_list_accordion .btn::after {
  margin-top: -3px !important;
  right: 11px !important;
}

/* ==================================
アコーディオンの中のボタンの矢印を消す
===================================== */
.accordion-in-btn .btn::after,
.accordion-in-btn .btn::before {
  display: none !important;
}
.accordion-in-btn .btn {
  padding-right: 0 !important;
}

/* ==================================
ブログの見た目調整
===================================== */
.dlb_blog_column-4 .dlb_blog-data p {
  max-height: none !important;
}

/* ==================================
お知らせの見た目調整
===================================== */
.dlb_news-list dl {
  border-top: 1px solid #f5f5f5;
  padding: 16px 0;
}
.dlb_news-list dl:last-child {
  border-bottom: 1px solid #f5f5f5;
  padding: 16px 0;
}

@media only screen and (max-width: 820px) {
  /* ==================================
table-responsive
===================================== */
  .table-responsive table {
    min-width: 1000px;
  }
}
@media only screen and (max-width: 690px) {
  /* ==================================
    table-responsive
    ===================================== */
  .table-responsive table {
    min-width: 800px;
  }
  /* ==================================
    改行
    ===================================== */
  .br-sp {
    display: inline;
  }
  .br-pc {
    display: none;
  }
  /* ==================================
    アンカーリンク
    ===================================== */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
  }
  .btn.btn-anchor-link {
    padding-left: 0 !important;
  }
  /* ==================================
    パンくず
    ===================================== */
  #locator ol {
    padding: 0;
  }
  /* ==================================
    お知らせ
    ===================================== */
  .dlb_news .rss_date {
    padding-left: 0;
  }

  /* ==================================
    サイトマップ
    ===================================== */
  #sitemap {
    padding-left: 0 !important;
  }
}
/* ==================================
フェード
===================================== */
/* アニメーションディレイ */
.animate__delay-0-25s {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.animate__delay-0-5s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.animate__delay-0-75s {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}
@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0f78d2;
  /*伸びる背景色の設定*/
  z-index: 10;
}
.top-recruit .bgLRextend::before {
  background-color: #159f75;
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* ==================================
header
===================================== */
header nav .navbar-nav li a:hover::before,
header nav .navbar-nav li.is-main_current a::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 90%;
  height: 2px;
  transform: translateX(-50%);
  background-color: #0f78d2;
}
header nav .navbar-nav .dropdown-menu a::after {
  display: none;
}
div.btn.contact-btn a {
  padding: 16px 40px 16px 60px;
  transform: none;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
div.btn.contact-btn a:hover {
  background: #fff;
  color: #0f78d2;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
div.btn.recruit-btn a {
  padding: 16px 40px 16px 60px;
  transform: none;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
div.btn.recruit-btn a:hover {
  background: #fff;
  color: #159f75;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
div.btn.contact-btn a::before,
div.btn.recruit-btn a::before {
  display: none !important;
}
div.btn a.dropdown-item::before {
  background: url(/dcms_media/image/arrow-on.png) 0 0 no-repeat;
}
header .openbtn {
  display: none;
}
#navbar-01 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.collapse:not(.show),
.mm_btn {
  display: none;
}

/* メガメニュー追記 */
header nav .navbar-nav li .dropdown-item:hover::before,
header nav .navbar-nav li.is-main_current .dropdown-item::before {
  content: "";
  position: absolute;
  background: url(/dcms_media/image/arrow-on.png) 0 0 no-repeat;
  width: 15px;
  height: 15px;
  top: 50%;
  right: 20px;
  left: unset;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
}
header nav .navbar-nav li .dropdown-item:hover::after {
  content: "";
  display: block;
  position: absolute;
  top: unset;
  bottom: 0;
  left: 50%;
  width: 90%;
  height: 2px;
  transform: translateX(-50%);
  background-color: #0f78d2;
}
header nav .navbar-nav li a:hover::before {
  content: "";
  display: block;
  position: absolute;
  top: unset;
  bottom: 0;
  left: 50%;
  width: 90%;
  height: 2px;
  transform: translateX(-50%);
  background-color: #0f78d2;
}
.dropdown:hover>.dropdown-menu {
  width: 100vw;
  left: 0;
}
.dropdown-menu .btn+.btn {
  border: none;
}
.btn-arrow-after-accent-02 a:hover {
  color: #159f75 !important;
}
.btn-arrow-after-accent-02 a:hover::after {
  background-color: #159f75 !important
}
.btn-arrow-after-accent-02 a:hover:before {
  background: url(/dcms_media/image/arrow-green.png) 0 0 no-repeat !important;
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
}
.btn-arrow-after-accent-02 a::before {
  background: url(/dcms_media/image/arrow-green.png) 0 0 no-repeat !important;
}
.dropdown-menu .btn.bg-grad-01 a::before,
.dropdown-menu .btn.bg-grad-02 a::before,
div.btn.contact-btn:hover:before,
div.btn.recruit-btn:hover:before {
  display: none !important;
}
.dropdown-menu .btn.bg-grad-01 a::after,
.dropdown-menu .btn.bg-grad-02 a::after {
  content: "";
  position: absolute;
  background: url(/dcms_media/image/arrow.png) 0 0 no-repeat;
  width: 15px;
  height: 15px;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
  display: block !important;
}
.dropdown-menu .btn.bg-grad-01:hover a::after {
  background: url(/dcms_media/image/arrow-on.png) 0 0 no-repeat;
}
.dropdown-menu .btn.bg-grad-02:hover a::after {
  background: url(/dcms_media/image/arrow-green.png) 0 0 no-repeat;
}
@media only screen and (min-width: 1251px) {
  header .dropdown {
    position: static !important;
  }
}
@media only screen and (max-width: 1250px) {
  header .container {
    width: 100%;
    margin: 0;
  }
  header div.btn.contact-btn,
  header div.btn.recruit-btn {
    padding-top: 0;
    max-width: none;
    margin: 0;
    width: 100%;
  }
  .dropdown:hover>.dropdown-menu {
    width: auto;
  }
  .bs_header-01.navbar-light .navbar-nav a.nav-link::before {
    background-color: unset;
    left: unset;
  }
  header nav .navbar-nav li .dropdown-item:hover::before,
  header nav .navbar-nav li.is-main_current .dropdown-item::before {
    content: "";
    position: absolute;
    background: url(/dcms_media/image/arrow-on.png) 0 0 no-repeat;
    width: 15px;
    height: 15px;
    top: 50%;
    right: 20px;
    left: unset;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
  }
  header nav .navbar-nav li .dropdown-item:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: unset;
    bottom: 0;
    left: 50%;
    width: 90%;
    height: 2px;
    transform: translateX(-50%);
    background-color: #0f78d2;
  }
  .recruit-btn .mm_btn::after {
    border-color: #fff !important;
  }
  .bs_header-01 .nav-item.contact-btn,
  .bs_header-01 .nav-item.recruit-btn {
    border: none !important;
    margin-top: 1rem;
  }
  .bs_header-01 .nav-item.recruit-btn .mm_btn {
    height: 60px;
  }
}

/* メガメニューEND */

.lib-header__logo img {
  width: 60px;
}

@media print,
screen and (min-width: 992px) {
  .lib-header__logo img {
    width: 100px;
  }
  .is-scroll .lib-header__logo img {
    width: 100px;
  }
}


/* ==========================================
   1. ヘッダー共通（初期透過 & 画面固定）
   ========================================== */
.lib-header__outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* スクロール時に背景を白へ切替 */
.lib-header__outer.is-scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================
     2. PC表示のスタイル (769px以上)
     ========================================== */
@media screen and (min-width: 769px) {
  .lib-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
    padding: 15px 30px;
  }

  .lib-nav__panel {
    background: transparent !important;
  }

  .lib-nav__outer {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .lib-nav__list {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
  }

  .lib-nav__btn {
    font-weight: 700;
    color: #222222;
    padding-bottom: 6px;
    position: relative;
    text-decoration: none;
  }

  /* HOMEなどの下線（アクティブ & ホバー） */
  .lib-nav__item.is-active .lib-nav__btn::after,
  .lib-nav__btn:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #005A2B;
    /* テーマカラーの緑 */
  }

  /* 右側CTAボタン */
  .lib-induce__outer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
  }

  .lib-induce__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px 0 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    min-width: 140px;
    box-sizing: border-box;
  }

  /* 採用情報（濃紺） */
  .lib-induce__btn.bg-laccent {
    background-color: #1F4259 !important;
  }

  /* お問い合わせ（赤） */
  .lib-induce__btn.bg-lother {
    background-color: #E50012 !important;
  }

  /* ボタン内の丸枠矢印アイコン（共通設定） */
  .lib-induce__btn .ico-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 50% !important;
    position: relative !important;
    margin-left: 10px !important;
    flex-shrink: 0 !important;
  }

  .lib-induce__btn .ico-arrow::after {
    content: '' !important;
    width: 5px !important;
    height: 5px !important;
    border-top: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    transform: rotate(45deg) !important;
    margin-right: 2px !important;
  }
}

/* ==========================================
     3. SP表示のスタイル (768px以下)
     ========================================== */
@media screen and (max-width: 768px) {
  .lib-header__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: transparent !important;
  }

  /* ハンバーガーボタンの背景透明化と三本線の緑化 */
  .lib-menu__btn {
    background: transparent !important;
    border: none !important;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .lib-menu__btn .line {
    background-color: #005A2B !important;
    /* 緑色 */
    width: 26px;
    height: 3px;
    margin: 3px 0;
    border-radius: 2px;
  }
}


@media only screen and (min-width: 1251px) {
  .navbar-expand-lg #navbar-01 {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1250px) {
  .navbar-expand-lg>.container-fluid {
    flex-wrap: wrap;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: static;
  }
}
@media only screen and (max-width: 1250px) {
  /* ==================================
    header
    ===================================== */
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    box-shadow: none !important;
    border: none;
  }
  #navbar-01 {
    padding: 20px 0;
    overflow-x: scroll;
    height: 100vh;
  }
  header .openbtn {
    display: block;
    position: relative;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #fff !important;
    border: none !important;
  }
  header .openbtn span {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: absolute;
    left: 13px;
    height: 2px;
    background: #0f78d2;
    width: 50%;
  }
  header .openbtn span.open-btn,
  header .openbtn span.close-btn {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: transparent;
    height: auto;
    font-size: 12px;
  }
  header .openbtn span.close-btn,
  header .openbtn.active span.open-btn,
  header nav .navbar-nav li a:hover::after,
  header nav .navbar-nav li.is-main_current a::after {
    display: none !important;
  }
  header .openbtn.active span.close-btn {
    display: block !important;
  }
  header .openbtn span:nth-of-type(1) {
    top: 13px;
  }
  header .openbtn span:nth-of-type(2) {
    top: 21px;
  }
  header .openbtn span:nth-of-type(3) {
    top: 29px;
  }
  header .openbtn.active span:nth-of-type(1) {
    transform: translateY(7px) rotate(-45deg);
  }
  header .openbtn.active span:nth-of-type(2) {
    display: none;
  }
  header .openbtn.active span:nth-of-type(3) {
    transform: translateY(-9px) rotate(45deg);
  }
  .bs_header-01 .nav-item {
    border-bottom: 2px dashed rgba(15, 120, 210, 0.5);
    margin: 0 10px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: none;
  }
  .bs_header-01 .nav-item:first-child {
    border-top: 2px dashed rgba(15, 120, 210, 0.5);
  }
  .bs_header-01.navbar-light .navbar-nav a.nav-link {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
  }
  .bs_header-01.navbar-light .navbar-nav a.nav-link::before {
    content: "";
    position: relative;
    top: 50%;
    margin-top: -4px;
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    margin-right: 0.5rem;
    border-top: 2px solid #0f78d2;
    border-right: 2px solid #0f78d2;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-right: -0.5rem;
    position: absolute;
    right: 24px;
  }
  .bs_header-01.navbar-light .navbar-nav .dropdown a.nav-link::before {
    display: none;
  }
  .mm_btn {
    display: block;
    position: absolute;
    width: 40px;
    height: 87px;
    top: 0;
    right: 0;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  .mm_btn.active::after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  .mm_btn::after {
    content: "";
    position: relative;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #0f78d2;
    border-right: 2px solid #0f78d2;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  div.btn.contact-btn,
  div.btn.recruit-btn {
    float: none !important;
    padding-top: 10px;
    max-width: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto !important;
  }
}

@media only screen and (max-width: 690px) {
  #navbar-01 {
    padding: 0;
  }
  .mm_btn {
    height: 50px;
  }
  .bs_header-01 .nav-item {
    margin: auto;
  }
  div.btn.contact-btn,
  div.btn.recruit-btn {
    padding-top: 0;
  }
}

/* PC表示時：グローバルメニューとボタンを横一列＆上下中央に並べる */
@media screen and (min-width: 769px) {
  /* 1. デフォルトCSSの固定余白を解除 */
  .lib-header__outer .lib-nav__panel,
  .lib-header__outer .lib-nav__panel:has(.lib-induce__outer) {
    padding-right: 0 !important;
  }

  /* 2. 全体コンテナの横並び＆上下中央配置 */
  .lib-header__outer .lib-nav__outer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 32px !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* 3. テキストメニュー（横並び & 高さをボタンに合わせて上下中央配置） */
  .lib-header__outer .lib-nav__list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .lib-header__outer .lib-nav__list>li {
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    /* ボタン高さに揃える */
  }

  .lib-header__outer .lib-nav__btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* 4. 採用情報・お問い合わせボタン（横並び & センタリング） */
  .lib-header__outer .lib-induce__outer {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .lib-header__outer .lib-induce__outer>li {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .lib-header__outer .lib-induce__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 165px !important;
    height: 44px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .lib-header__outer .lib-induce__btn .txt {
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
}

/* ==========================================
   MV（メインビジュアル）カスタムCSS
   ========================================== */

/* 1. デフォルトの外枠余白リセット＆全幅化 */
.fv-container,
.lib-fv-004 {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.lib-fv-004__outer {
  position: relative !important;
  width: 100% !important;
  height: clamp(550px, 42vw, 750px) !important;
  /* ★高さの最小・可変・最大値を制御 */
  overflow: hidden !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* スライダー画像の比率・背景フィット調整 */
.lib-fv-004 .swiper-slide img {
  width: 100%;
  height: auto;
  min-height: 550px;
  object-fit: cover;
}

/* 2. テキスト・ボタンエリアの配置 */
.fv-copy__content {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;
  padding: 0 30px;
  z-index: 10;
  box-sizing: border-box;
  pointer-events: none;
  /* 下のスライダー操作を阻害しない */
}

.fv-copy__inner {
  pointer-events: auto;
}

/* 「実績を見る」ボタン */
.fv-copy__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: #005C17 !important;
  /* 指定の緑 */
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 50px 50px 50px 0;
  /* 角丸デザイン */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease;
}

.fv-copy__btn:hover {
  opacity: 0.85;
}

/* ボタン内の丸矢印アイコン */
.fv-copy__btn .ico-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  margin-left: 14px;
}

.fv-copy__btn .ico-arrow::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
  margin-right: 2px;
}

/* 未来の「安心」を、自分の手でつくる。 (fs-64) */
.fv-copy__title {
  color: #005C17 !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 20px 0 12px 0 !important;
  letter-spacing: -0.01em;
}

/* 社会に欠かせない技術を身につけ... (fs-30) */
.fv-copy__sub {
  color: #333333 !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* 3. Scroll（右下縦書き） */
.fv-scroll {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #005C17;
  font-size: 14px;
  font-weight: 500;
}

.fv-scroll__txt {
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.fv-scroll::after {
  content: '';
  width: 1px;
  height: 50px;
  background-color: #005C17;
}

/* ==========================================
   4. レスポンシブ調整 (スマホ・タブレット)
   ========================================== */
@media screen and (max-width: 991px) {
  .fv-copy__title {
    font-size: 38px !important;
  }
  .fv-copy__sub {
    font-size: 20px !important;
  }
  .fv-copy__btn {
    font-size: 15px;
    padding: 10px 20px;
  }
}

@media screen and (max-width: 576px) {
  .fv-copy__content {
    bottom: 40px;
    padding: 0 20px;
  }
  .fv-copy__title {
    font-size: 26px !important;
  }
  .fv-copy__sub {
    font-size: 15px !important;
  }
  .fv-scroll {
    right: 15px;
    bottom: 20px;
  }
}

/* ==========================================
   1. ヘッダー背景の完全透明化
   ========================================== */
/* スクロール前（初期状態）の背景・影を強制リセット */
.lib-header__outer:not(.is-scrolled),
.lib-header__outer:not(.is-scrolled) .lib-header__inner,
.lib-header__outer:not(.is-scrolled) .lib-header__bar,
.lib-header__outer:not(.is-scrolled) .lib-nav__panel,
.lib-header__outer:not(.is-scrolled) .lib-nav__cover {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ==========================================
   2. 「実績を見る」ボタンの左側を画面左端まで伸長
   ========================================== */
.fv-copy__btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #005C17 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 12px 28px 12px 24px !important;
  border-radius: 0 50px 50px 0 !important;
  /* 右側のみ丸角 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  z-index: 1 !important;
}

/* 擬似要素を使ってボタンの緑背景を画面左端（100vw分）まで突き抜けさせる */
.fv-copy__btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 100% !important;
  /* ボタンの左端を起点に */
  width: 100vw !important;
  /* 画面左外側まで無限に伸ばす */
  background-color: #005C17 !important;
  z-index: -1 !important;
}


/* ==========================================
   3. MV下部の白い透明グラデーション設定
   ========================================== */
.lib-fv-004__outer {
  position: relative !important;
}

/* MV画像の上に下から上へ消える白グラデーションを配置 */
.lib-fv-004__outer::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 55% !important;
  /* グラデーションがかかる高さ（調整可） */
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.95) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  /* 画像より上、テキストより下 */
}

/* テキスト・ボタン群をグラデーションの上に表示 */
.fv-copy__content,
.fv-scroll {
  z-index: 10 !important;
}

/* ==========================================
   1. ヘッダー透明化 & MVをページ最上部へ引き上げる設定
   ========================================== */
/* ヘッダー全体の余白による白帯を打ち消し、MV画像を最上部（ヘッダー裏）まで敷き詰める */
#wrapper,
#wrapper:has(.lib-header-BS02),
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* スクロール前（初期状態）のヘッダーおよび内部要素を完全に透明化 */
.lib-header__outer:not(.is-scrolled),
.lib-header__outer:not(.is-scrolled) .lib-header__inner,
.lib-header__outer:not(.is-scrolled) .lib-header__bar,
.lib-header__outer:not(.is-scrolled) .lib-nav__panel,
.lib-header__outer:not(.is-scrolled) .lib-nav__cover {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ==========================================
   2. 「実績を見る」ボタンのレスポンシブ切り替え
   ========================================== */
/* ボタン共通基本スタイル */
.fv-copy__btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #005C17 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 12px 28px 12px 24px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  z-index: 1 !important;
}

/* --- 画面幅 1,600px 以下：左側背景を画面左端まで伸ばす --- */
@media screen and (max-width: 1600px) {
  .fv-copy__btn {
    border-radius: 0 50px 50px 0 !important;
    /* 右側のみ丸角 */
  }

  .fv-copy__btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 100% !important;
    width: 100vw !important;
    /* 画面左端まで伸ばす */
    background-color: #005C17 !important;
    z-index: -1 !important;
    display: block !important;
  }
}

/* --- 画面幅 1,601px 以上：テキストの上で独立した角丸ボタン（カプセル型） --- */
@media screen and (min-width: 1601px) {
  .fv-copy__btn {
    border-radius: 50px !important;
    /* 全周を丸角にする */
  }

  /* 左側への伸ばしを非表示にする */
  .fv-copy__btn::before {
    display: none !important;
  }
}
/* ==========================================
   1. ヘッダーへの白い半透明フィルター適用
   ========================================== */
/* スクロール前（初期状態）のヘッダー背景に上から下へ消える白グラデーションを配置 */
.lib-header__outer:not(.is-scrolled) {
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.4) 60%,
      rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: none !important;
}

/* 内部要素の個別背景は透過指定 */
.lib-header__outer:not(.is-scrolled) .lib-header__inner,
.lib-header__outer:not(.is-scrolled) .lib-header__bar,
.lib-header__outer:not(.is-scrolled) .lib-nav__panel,
.lib-header__outer:not(.is-scrolled) .lib-nav__cover {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ==========================================
   2. MV（メインビジュアル）の高さを800pxに拡張
   ========================================== */
/* スライダー全体の高さ調整 (PC表示時) */
@media screen and (min-width: 769px) {
  .lib-fv-004,
  .lib-fv-004__outer,
  .lib-fv-004__slider,
  .lib-fv-004 .swiper-wrapper,
  .lib-fv-004 .swiper-slide {
    height: 800px !important;
  }

  .lib-fv-004 .swiper-slide img {
    width: 100% !important;
    height: 800px !important;
    min-height: 800px !important;
    object-fit: cover !important;
    /* 画像の縦横比を維持しながら800pxに収める */
  }
}

/* スマホ表示時の高さ調整 (画面サイズに合わせて高さを最適化) */
@media screen and (max-width: 768px) {
  .lib-fv-004,
  .lib-fv-004__outer,
  .lib-fv-004__slider,
  .lib-fv-004 .swiper-wrapper,
  .lib-fv-004 .swiper-slide {
    height: 550px !important;
  }

  .lib-fv-004 .swiper-slide img {
    width: 100% !important;
    height: 550px !important;
    object-fit: cover !important;
  }
}

.lib-header__logo .thumb {
  background-color: transparent;
}

/* ==========================================
   SP表示用調整 (768px以下)
   ========================================== */

/* PC時はSP用改行タグを非表示 */
@media screen and (min-width: 769px) {
  .u-sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  /* 1. ハンバーガーボタンの線崩れ・重なりを防止 */
  .lib-menu__btn {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* デフォルトCSSの absolute 配置をリセットして綺麗に縦並び化 */
  .lib-menu__btn .line {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 28px !important;
    height: 3px !important;
    background-color: #005A2B !important;
    border-radius: 2px !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  /* 2. SP用改行を表示 */
  .u-sp-only {
    display: block !important;
  }

  /* 3. キャッチコピーの位置・余白調整（左余白を広げて右へシフト） */
  .fv-copy__content {
    bottom: 30px !important;
    padding-left: 24px !important;
    /* ★左余白を広げてテキストを右にずらす */
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  .fv-copy__title {
    font-size: 36px !important;
    line-height: 1.3 !important;
    margin: 12px 0 10px 0 !important;
    letter-spacing: -0.02em !important;
  }

  .fv-copy__sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* 「実績を見る」ボタンのSPサイズ調整 */
  .fv-copy__btn {
    font-size: 24px !important;
    padding: 8px 18px 8px 16px !important;
  }

  .fv-copy__btn .ico-arrow {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ==========================================
   1. ボタン内の丸枠矢印アイコン（詳細度を上げて強制表示）
   ========================================== */
.lib-header__outer .lib-induce__btn .ico-arrow,
html.is-open .lib-induce__btn .ico-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
  position: relative !important;
  margin-left: 10px !important;
  flex-shrink: 0 !important;
}

.lib-header__outer .lib-induce__btn .ico-arrow::after,
html.is-open .lib-induce__btn .ico-arrow::after {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  border-top: 1.5px solid #ffffff !important;
  border-right: 1.5px solid #ffffff !important;
  transform: rotate(45deg) !important;
  margin-right: 2px !important;
}


/* ==========================================
      2. SP表示時：メニュー開閉調整 (html.is-open)
      ========================================== */
@media screen and (max-width: 768px) {
  /* 緑パネル本体 */
  html.is-open .lib-header__outer .lib-nav__panel,
  html.is-open .lib-nav__panel {
    display: block !important;
    position: fixed !important;
    top: 70px !important;
    right: 0 !important;
    width: 72% !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    padding: 30px 20px 30px 24px !important;
    background-color: #005C17 !important;
    background: #005C17 !important;
    border-radius: 0 0 0 24px !important;
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.25) !important;
    /* パネル自体の外枠影 */
    box-sizing: border-box !important;
    z-index: 999 !important;
    overflow-y: auto !important;
  }

  /* 内部要素・リスト・ボタンから「不要な影」と「枠線」を全消去 */
  html.is-open .lib-nav__cover,
  html.is-open .lib-nav__outer,
  html.is-open .lib-nav__list,
  html.is-open .lib-nav__item,
  html.is-open .lib-nav__btn,
  html.is-open .lib-induce__outer,
  html.is-open .lib-induce__outer>li {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* テキストメニュー（HOME、会社概要...） */
  html.is-open .lib-nav__list {
    display: block !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  html.is-open .lib-nav__item {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
  }

  html.is-open .lib-nav__btn {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
  }

  /* 採用情報・お問い合わせボタン */
  html.is-open .lib-induce__outer {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.is-open .lib-induce__outer>li {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  html.is-open .lib-induce__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px 0 20px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  html.is-open .lib-induce__btn.bg-laccent {
    background-color: #1F4259 !important;
    /* 採用情報（濃紺） */
  }

  html.is-open .lib-induce__btn.bg-lother {
    background-color: #E50012 !important;
    /* お問い合わせ（赤） */
  }

  /* 閉じるボタン（×）の最前面固定 */
  html.is-open .lib-menu__btn {
    position: fixed !important;
    top: 12px !important;
    right: 15px !important;
    z-index: 1005 !important;
    background: transparent !important;
  }
}

/* SP表示時：ボタン内部（テキストと矢印）の横並び配置 */
@media screen and (max-width: 768px) {
  html.is-open .lib-induce__btn,
  .lib-header__outer .lib-induce__btn {
    display: flex !important;
    flex-direction: row !important;
    /* 縦並びを解除して横並びに固定 */
    align-items: center !important;
    /* 上下中央揃え */
    justify-content: space-between !important;
    /* テキスト左・矢印右の左右均等配置 */
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px 0 20px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* テキスト部分のリセット */
  html.is-open .lib-induce__btn .txt,
  .lib-header__outer .lib-induce__btn .txt {
    display: inline-block !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* 矢印アイコンのサイズと丸枠配置 */
  html.is-open .lib-induce__btn .ico-arrow,
  .lib-header__outer .lib-induce__btn .ico-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 50% !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* 矢印（＞）の描画 */
  html.is-open .lib-induce__btn .ico-arrow::after,
  .lib-header__outer .lib-induce__btn .ico-arrow::after {
    content: '' !important;
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-top: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    transform: rotate(45deg) !important;
    margin-right: 2px !important;
  }
}

/* スクロール前かつメニューが閉じている時のみ透明化 */
html:not(.is-open) .lib-header__outer:not(.is-scrolled),
html:not(.is-open) .lib-header__outer:not(.is-scrolled) .lib-header__inner,
html:not(.is-open) .lib-header__outer:not(.is-scrolled) .lib-header__bar,
html:not(.is-open) .lib-header__outer:not(.is-scrolled) .lib-nav__panel,
html:not(.is-open) .lib-header__outer:not(.is-scrolled) .lib-nav__cover {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================
   SP表示時：ボタン同士の余白（margin-bottom）確保 & レイアウト崩れ防止
   ========================================== */
@media screen and (max-width: 768px) {
  /* 1. リスト項目（li）全てにボタン間の下余白（12px）を確実に確保 */
  html.is-open .lib-induce__outer>li,
  .lib-header__outer .lib-induce__outer>li {
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  /* 2. ドロップダウンを持つ li (採用情報) を縦並び構造に固定 */
  html.is-open .lib-induce__outer>li.nav-dropdown-item,
  .lib-header__outer .lib-induce__outer>li.nav-dropdown-item {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  /* 3. 「採用情報」ボタン自体のスタイル・サイズ維持 */
  .nav-dropdown-item>.lib-induce__btn,
  html.is-open .nav-dropdown-item>.lib-induce__btn,
  html.is-open .lib-header__outer .nav-dropdown-item>.lib-induce__btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px 0 20px !important;
    /* 内側余白をお問い合わせボタンに合わせる */
    border-radius: 6px !important;
    /* 角丸をお問い合わせボタンに合わせる */
    box-sizing: border-box !important;
  }

  /* 4. 下層メニュー（白枠）の余白調整 */
  .nav-dropdown-menu,
  html.is-open .nav-dropdown-menu {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
    /* ボタンと白枠の間隔 */
    margin-bottom: 0 !important;
    /* 親liのmargin-bottom(12px)に任せるため0 */
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
  }

  /* 非表示状態 */
  .nav-dropdown-item:not(.is-open):not(.open) .nav-dropdown-menu,
  html.is-open .nav-dropdown-item:not(.is-open):not(.open) .nav-dropdown-menu {
    display: none !important;
  }

  /* 表示状態 */
  .nav-dropdown-item.is-open .nav-dropdown-menu,
  .nav-dropdown-item.open .nav-dropdown-menu,
  html.is-open .nav-dropdown-item.is-open .nav-dropdown-menu,
  html.is-open .nav-dropdown-item.open .nav-dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* メニュー内の各リンク設定 */
  .nav-dropdown-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-dropdown-menu li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #E5E7EB !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .nav-dropdown-menu li:last-child a {
    border-bottom: none !important;
  }

  /* 矢印アイコンの回転（開いた時） */
  .nav-dropdown-item.is-open .ico-arrow,
  .nav-dropdown-item.open .ico-arrow {
    transform: rotate(90deg) !important;
    transition: transform 0.3s ease !important;
  }
}

/* ==========================================
   1. トップページ専用 メインコンテンツ全幅化
   ========================================== */
.page-index #contents,
.page-index #dcms_layoutPageBlockPasteArea,
.page-index #dcms_layoutPageBlock {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ==========================================
      2. Message セクション全体
      ========================================== */
.sec-message {
  position: relative !important;
  width: 100% !important;
  background-image: url(/dcms_media/image/bg-message.png) !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center bottom -100px !important;
  padding: 0 0 200px;
  overflow: hidden !important;
  font-family: 'Noto Sans JP', sans-serif;
}

.sec-message__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================
      3. 左カラム（テキスト・ボタン）
      ========================================== */
.sec-message__content {
  width: 44%;
}

.sec-message__head {
  margin-bottom: 40px;
}

.sec-message__en {
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 115px !important;
  color: #005C17 !important;
  line-height: 1 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 400 !important;
}

.sec-message__ja {
  display: block;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  letter-spacing: 0.05em;
  margin-top: 0px;
}

/* 見出し (緑の■付き) */
.sec-message__title {
  position: relative;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  padding-left: 24px !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.3 !important;
}

.sec-message__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #005C17;
}

/* 本文テキスト */
.sec-message__text {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #333333 !important;
  margin: 0 0 40px 0 !important;
}

/* 会社概要を見るボタン (#17495D) */
.sec-message__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #17495D !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 14px 24px 14px 30px !important;
  border-radius: 50px !important;
  min-width: 230px !important;
  box-sizing: border-box !important;
  transition: opacity 0.3s ease !important;
}

.sec-message__btn:hover {
  opacity: 0.85;
}

.sec-message__btn .ico-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
  margin-left: 15px !important;
  flex-shrink: 0 !important;
}

.sec-message__btn .ico-arrow::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 1.5px solid #ffffff !important;
  border-right: 1.5px solid #ffffff !important;
  transform: rotate(45deg) !important;
  margin-right: 2px !important;
}


/* ==========================================
      4. 右カラム（画像重なり配置）
      ========================================== */
.sec-message__media {
  width: 50%;
  position: relative;
  padding-bottom: 60px;
}

.sec-message__img,
.sec-message__img img,
.sec-message__img.--sub,
.sec-message__img.--sub img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.sec-message__img.--main img {
  width: 90%;
  height: auto;
  display: block;
}

.sec-message__img.--sub {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 52%;
  z-index: 2;
}

.sec-message__img.--sub img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}


/* ==========================================
      5. 背景流れるテキスト (PLAN ART CORPORATION)
      ========================================== */
/* aria-hidden="true" による display:none 無効化 & 位置調整 */
.sec-message__marquee-wrap[aria-hidden="true"],
.sec-message__marquee-wrap {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.sec-message__marquee {
  display: flex !important;
  white-space: nowrap !important;
  width: max-content !important;
  will-change: transform;
  animation: marquee 50s linear infinite !important;
  /* スピード：50秒 */
}

.sec-message__marquee span {
  font-family: 'Libertinus Serif Display', 'Times New Roman', serif !important;
  font-size: 190px !important;
  color: #4E93AF !important;
  opacity: 0.18 !important;
  /* 不透明度：0.18（薄め） */
  line-height: 0.9 !important;
  padding-right: 80px !important;
  display: inline-block !important;
}

/* 右から左へ無限ループするアニメーション */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* ==========================================
   SP表示時：Messageセクションレイアウト＆サイズ微調整
   ========================================== */
@media screen and (max-width: 768px) {
  [class*=lib-fv]+#contents {
    padding-top: 2rem;
  }
  /* 1. Message上の余白をさらに小さく詰める */
  .sec-message {
    padding-top: 10px !important;
    padding-bottom: 70px !important;
    background-position: center top 200px !important;
  }

  .sec-message__inner {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 20px !important;
  }

  /* 2. 「Message」英語タイトルのサイズ縮小（改行・はみ出し防止） */
  .sec-message__en {
    font-size: 64px !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
  }

  .sec-message__ja {
    font-size: 16px !important;
  }

  /* 3. 要素の並び順定義 */
  .sec-message__content {
    display: contents !important;
  }

  .sec-message__head {
    order: 1 !important;
    margin-bottom: 15px !important;
  }

  .sec-message__media {
    order: 2 !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    padding-bottom: 30px !important;
  }

  .sec-message__title {
    order: 3 !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  .sec-message__text {
    order: 4 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
  }

  /* 4. 会社概要を見るボタン（流れる文字との被り防止マージン追加） */
  .sec-message__btn-wrap {
    order: 5 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 45px !important;
    /* 下のマージンを空けて被りを解消 */
    position: relative !important;
    z-index: 3 !important;
  }

  .sec-message__btn {
    margin: 0 auto !important;
    font-size: 15px !important;
    padding: 12px 20px 12px 24px !important;
  }

  /* 5. 流れる文字のSPサイズ＆位置調整 */
  .sec-message__marquee-wrap {
    bottom: 5px !important;
  }

  .sec-message__marquee span {
    font-size: 96px !important;
    padding-right: 30px !important;
    line-height: 1 !important;
  }
}

/* ==========================================
   Numbers セクション全体
   ========================================== */
.sec-numbers {
  position: relative;
  background-image: url('/dcms_media/image/bg-numbers.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto;
  padding: 80px 0;
  font-family: 'Noto Sans JP', sans-serif;
}

.sec-numbers__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  z-index: 2;
}

/* 見出し */
.sec-numbers__head {
  margin-bottom: 40px;
}

.sec-numbers__en {
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 115px !important;
  color: #005C17 !important;
  line-height: 1 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 400 !important;
}

.sec-numbers__ja {
  display: block;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  letter-spacing: 0.05em;
}

/* カードリスト (PC横並び) */
.sec-numbers__list {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 標準CSSの緑ポッチ(::before)と余白の打ち消し */
.sec-numbers__list>li::before,
.sec-numbers__item::before {
  content: none !important;
  display: none !important;
}

.sec-numbers__list>li,
.sec-numbers__item {
  flex: 1;
  margin-top: 0 !important;
  padding-left: 0 !important;
}

/* カード本体 (背景透過・上部余白縮小) */
.sec-numbers__card {
  position: relative;
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid #E5E5E5;
  padding: 20px 20px 105px !important;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 数字エリア */
.sec-numbers__num-wrap {
  text-align: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.sec-numbers__num {
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 140px !important;
  color: #005C17 !important;
  line-height: 1 !important;
  font-weight: 400;
}

.sec-numbers__unit {
  font-size: 40px !important;
  color: #005C17 !important;
  font-weight: 700;
  margin-left: 4px;
}

/* アイコン + ラベル (枠内中央揃え) */
.sec-numbers__info {
  display: flex;
  align-items: center;
  justify-content: center !important;
  /* ★枠内の真ん中に配置 */
  gap: 16px;
  position: relative;
  z-index: 2;
  width: 100%;
}

.sec-numbers__icon {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

.sec-numbers__label {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* カード内背景薄文字 (Project, Engineer, Repeat) */
.sec-numbers__bg-txt[aria-hidden="true"],
.sec-numbers__bg-txt {
  display: block !important;
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 84px !important;
  color: #E2E9EE !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 1 !important;
}


/* ==========================================
     SP表示レスポンシブ対応 (768px以下)
     ========================================== */
@media screen and (max-width: 768px) {
  .sec-numbers {
    padding: 60px 0;
    background-size: 100% auto;
  }

  .sec-numbers__inner {
    padding: 0 20px;
  }

  .sec-numbers__head {
    margin-bottom: 30px;
  }

  .sec-numbers__en {
    font-size: 64px !important;
  }

  .sec-numbers__ja {
    font-size: 18px !important;
  }

  .sec-numbers__list {
    flex-direction: column;
    gap: 20px;
  }

  .sec-numbers__card {
    padding: 16px 16px 35px !important;
  }

  .sec-numbers__num {
    font-size: 90px !important;
  }

  .sec-numbers__unit {
    font-size: 28px !important;
  }

  .sec-numbers__label {
    font-size: 16px !important;
  }

  .sec-numbers__bg-txt[aria-hidden="true"],
  .sec-numbers__bg-txt {
    font-size: 60px !important;
    bottom: -2px !important;
  }
}

/* ==========================================
   Work セクション全体
   ========================================== */
.sec-work {
  position: relative !important;
  width: 100% !important;
  padding: 100px 0 !important;
  overflow: hidden !important;
  font-family: 'Noto Sans JP', sans-serif;
}
/* 1. 右側に引っ付く背景画像 (bg-work.png) ★領域拡大・全体カバー */
.sec-work__bg[aria-hidden="true"],
.sec-work__bg {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 75vw !important;
  /* 背景の幅を拡大 */
  height: 100% !important;
  /* background-image: url('/dcms_media/image/bg-work.jpg') !important; */
  background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url(/dcms_media/image/bg-work.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: cover !important;
  /* 縦横いっぱいに表示 */
  pointer-events: none !important;
  z-index: 1 !important;
}

.sec-work__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative !important;
  z-index: 2 !important;
}

/* 2. 左側に引っ付く画像エリア ★画面最左端へ吸着＆サイズ固定 */
.sec-work__media {
  width: calc(46% + (100vw - 100%) / 2) !important;
  margin-left: calc((100% - 100vw) / 2) !important;
  position: relative;
  z-index: 2;
}

.sec-work__img {
  width: 100% !important;
}

.sec-work__img img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 3. 右カラム：テキスト・ボタン */
.sec-work__content {
  width: 48%;
}

.sec-work__head {
  margin-bottom: 35px;
}

.sec-work__en {
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 115px !important;
  color: #005C17 !important;
  line-height: 1 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 400 !important;
}

.sec-work__ja {
  display: block;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  letter-spacing: 0.05em;
}

/* 見出し (緑■付き) */
.sec-work__title {
  position: relative;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  padding-left: 24px !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.3 !important;
}

.sec-work__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #005C17;
}

/* 本文テキスト */
.sec-work__text {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #333333 !important;
  margin: 0 0 40px 0 !important;
}

/* 仕事内容を見るボタン (#17495D) */
.sec-work__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #17495D !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 14px 24px 14px 30px !important;
  border-radius: 50px !important;
  min-width: 230px !important;
  box-sizing: border-box !important;
  transition: opacity 0.3s ease !important;
}

.sec-work__btn:hover {
  opacity: 0.85;
}

.sec-work__btn .ico-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
  margin-left: 15px !important;
  flex-shrink: 0 !important;
}

.sec-work__btn .ico-arrow::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 1.5px solid #ffffff !important;
  border-right: 1.5px solid #ffffff !important;
  transform: rotate(45deg) !important;
  margin-right: 2px !important;
}


/* ==========================================
     SP表示レスポンシブ対応 (768px以下)
     ========================================== */
@media screen and (max-width: 768px) {
  .sec-work {
    padding: 40px 0 60px !important;
  }

  /* 背景画像を右上に配置 */
  .sec-work__bg[aria-hidden="true"],
  .sec-work__bg {
    width: 100vw !important;
    height: 70% !important;
    top: 0 !important;
    transform: none !important;
    background-size: cover !important;
  }

  .sec-work__inner {
    flex-direction: column !important;
    padding: 0 20px !important;
  }

  /* 親の枠組みを解除して順番を自由に並び替え */
  .sec-work__content {
    display: contents !important;
  }

  /* 順序1: タイトル (Work / 仕事内容) */
  .sec-work__head {
    order: 1 !important;
    margin-bottom: 20px !important;
  }

  .sec-work__en {
    font-size: 64px !important;
  }

  .sec-work__ja {
    font-size: 18px !important;
  }

  /* 順序2: 左画像 */
  .sec-work__media {
    order: 2 !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-bottom: 30px !important;
  }

  .sec-work__img {
    width: 100% !important;
  }

  .sec-work__img img {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 順序3: 見出しが入ります */
  .sec-work__title {
    order: 3 !important;
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  /* 順序4: 本文テキスト */
  .sec-work__text {
    order: 4 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
  }

  /* 順序5: ボタン */
  .sec-work__btn-wrap {
    order: 5 !important;
    width: 100% !important;
  }

  .sec-work__btn {
    font-size: 15px !important;
    padding: 12px 20px 12px 24px !important;
  }
}

/* ==========================================
   People セクション全体
   ========================================== */
.sec-people {
  position: relative !important;
  width: 100% !important;
  padding: 100px 0 !important;
  overflow: hidden !important;
  font-family: 'Noto Sans JP', sans-serif;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: cover !important;
}

.sec-people__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative !important;
  z-index: 2 !important;
}

/* 1. 左カラム：テキスト・ボタン */
.sec-people__content {
  width: 44%;
}

.sec-people__head {
  margin-bottom: 35px;
}

.sec-people__en {
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 115px !important;
  color: #005C17 !important;
  line-height: 1 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 400 !important;
}

.sec-people__ja {
  display: block;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  letter-spacing: 0.05em;
}

/* 見出し (緑■付き) */
.sec-people__title {
  position: relative;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  padding-left: 24px !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.3 !important;
}

.sec-people__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #005C17;
}

/* 本文テキスト */
.sec-people__text {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #333333 !important;
  margin: 0 0 40px 0 !important;
}

/* 社員インタビューを見るボタン (#17495D) */
.sec-people__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #17495D !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 14px 24px 14px 30px !important;
  border-radius: 50px !important;
  min-width: 260px !important;
  box-sizing: border-box !important;
  transition: opacity 0.3s ease !important;
}

.sec-people__btn:hover {
  opacity: 0.85;
}

.sec-people__btn .ico-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
  margin-left: 15px !important;
  flex-shrink: 0 !important;
}

.sec-people__btn .ico-arrow::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 1.5px solid #ffffff !important;
  border-right: 1.5px solid #ffffff !important;
  transform: rotate(45deg) !important;
  margin-right: 2px !important;
}

/* 2. 右カラム：画像3枚横並び */
.sec-people__media {
  width: 52%;
  display: flex !important;
  gap: 16px;
  justify-content: space-between;
}

.sec-people__img {
  flex: 1;
}

.sec-people__img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* ==========================================
     SP表示レスポンシブ対応 (768px以下)
     ========================================== */
@media screen and (max-width: 768px) {
  .sec-people {
    padding: 50px 0 60px !important;
  }

  .sec-people__inner {
    flex-direction: column !important;
    padding: 0 20px !important;
  }

  .sec-people__content {
    width: 100% !important;
    margin-bottom: 35px !important;
  }

  .sec-people__head {
    margin-bottom: 20px !important;
  }

  .sec-people__en {
    font-size: 64px !important;
  }

  .sec-people__ja {
    font-size: 18px !important;
  }

  .sec-people__title {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  .sec-people__text {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
  }

  .sec-people__btn-wrap {
    width: 100% !important;
  }

  .sec-people__btn {
    font-size: 15px !important;
    padding: 12px 20px 12px 24px !important;
    min-width: 240px !important;
  }

  /* SP表示時の3枚画像横並び設定 */
  .sec-people__media {
    width: 100% !important;
    gap: 8px !important;
  }
}

/* ==========================================
   JOIN US (採用情報) セクション
   ========================================== */
.sec-recruit {
  position: relative !important;
  width: 100% !important;
  padding: 80px 0 !important;
  font-family: 'Noto Sans JP', sans-serif;
}

.sec-recruit__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
}

/* カードバナー本体 (PC背景画像 + 横方向グラデーション) */
.sec-recruit__card {
  position: relative;
  border-radius: 24px;
  padding: 60px 60px 50px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background-image:
    linear-gradient(90deg, #005C17 0%, rgba(0, 194, 49, 0) 100%),
    url('/dcms_media/image/bg-recruit.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ffffff;
}

/* 左テキストエリア */
.sec-recruit__content {
  max-width: 620px;
  z-index: 2;
}

/* JOIN US 英語タイトル (128px) */
.sec-recruit__en {
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 128px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* 下線 + 採用情報 (30px) */
.sec-recruit__sub {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  margin-bottom: 28px;
}

.sec-recruit__line {
  flex: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.7);
  max-width: 280px;
}

.sec-recruit__ja {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap;
}

/* 本文テキスト */
.sec-recruit__text {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* 採用情報を見るボタン */
.sec-recruit__btn-wrap {
  z-index: 2;
  margin-left: 20px;
}

.sec-recruit__btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* テキストをボタン中央に配置 */
  background-color: #005C17 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 14px 50px !important;
  /* 左右に均等パディング */
  border-radius: 50px !important;
  min-width: 250px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: opacity 0.3s ease !important;
}

.sec-recruit__btn:hover {
  opacity: 0.85;
}

.sec-recruit__btn .txt {
  text-align: center !important;
}

/* 矢印アイコン（右端絶対配置） */
.sec-recruit__btn .ico-arrow {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.sec-recruit__btn .ico-arrow::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 1.5px solid #ffffff !important;
  border-right: 1.5px solid #ffffff !important;
  transform: rotate(45deg) !important;
  margin-right: 2px !important;
}


/* ==========================================
     SP表示レスポンシブ対応 (768px以下)
     ========================================== */
@media screen and (max-width: 768px) {
  .sec-recruit {
    padding: 40px 0 !important;
  }

  .sec-recruit__inner {
    padding: 0 20px !important;
  }

  /* SP背景画像 + 縦方向グラデーションへ切り替え */
  .sec-recruit__card {
    padding: 40px 20px 30px;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image:
      linear-gradient(180deg, #005C17 0%, rgba(0, 194, 49, 0) 100%),
      url('/dcms_media/image/bg-recruit-sp.png');
  }

  .sec-recruit__content {
    max-width: 100%;
  }

  .sec-recruit__en {
    font-size: 64px !important;
  }

  .sec-recruit__sub {
    justify-content: center;
    margin-bottom: 20px;
    gap: 12px;
  }

  .sec-recruit__line {
    max-width: 120px;
  }

  .sec-recruit__ja {
    font-size: 20px !important;
  }

  .sec-recruit__text {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 30px !important;
  }

  .sec-recruit__btn-wrap {
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: center;
  }

  .sec-recruit__btn {
    font-size: 15px !important;
    padding: 12px 45px !important;
    min-width: 240px !important;
  }

  .sec-recruit__btn .ico-arrow {
    right: 15px !important;
  }
}

.lib-cta__outer.lib-cta-BS01 {
  display: none;
}

/* ==================================
footer
===================================== */
.footer-sub-menu li {
  position: relative;
  padding-left: 16px;
}
.footer-sub-menu li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 1px;
  background-color: #707070;
}

/* ==========================================
   フッター全体スタイル & 標準リセット
   ========================================== */
footer.sec-footer,
.lib-footer__outer {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-top: 1px solid #005C17 !important;
  /* 上部の緑枠線 */
  padding: 60px 0 30px !important;
  color: #222222 !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* CMS標準の暗いユーティリティエリアの打ち消し */
.lib-footer__utility {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.sec-footer__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
}

.sec-footer__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

/* ------------------------------------------
      左エリア：ロゴ・住所情報
      ------------------------------------------ */
.sec-footer__info {
  width: 35%;
}

.sec-footer__logo {
  margin-bottom: 30px !important;
}

.sec-footer__logo img {
  max-width: 220px;
  height: auto;
  display: block;
}

.sec-footer__address {
  font-style: normal;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #333333 !important;
}

.sec-footer__company {
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.sec-footer__add {
  margin-bottom: 8px !important;
}

.sec-footer__tel-fax {
  font-weight: 500 !important;
  margin: 0 !important;
}

/* ------------------------------------------
      右エリア：ナビゲーション・お問い合わせ
      ------------------------------------------ */
.sec-footer__right {
  width: 60%;
}

.sec-footer__nav-wrap {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

/* 各カラム（縦区切り線付き） */
.sec-footer__col {
  position: relative;
  padding-left: 24px;
  border-left: 1px solid #222222;
  /* 左側の黒縦線 */
}

.sec-footer__nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sec-footer__nav-list li {
  margin-bottom: 18px !important;
}

.sec-footer__nav-list li:last-child {
  margin-bottom: 0 !important;
}

.sec-footer__nav-list li a,
.sec-footer__nav-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease;
}

.sec-footer__nav-list li a:hover,
.sec-footer__nav-title:hover {
  opacity: 0.7;
}

/* 採用情報配下のリスト */
.sec-footer__nav-group {
  display: flex;
  flex-direction: column;
}

.sec-footer__nav-sub {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 0 !important;
}

.sec-footer__nav-sub li {
  margin-bottom: 12px !important;
}

.sec-footer__nav-sub li a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333333 !important;
  text-decoration: none !important;
}

.sec-footer__nav-sub li a:hover {
  opacity: 0.7;
}

/* ------------------------------------------
      お問い合わせボタン (#E40619)
      ------------------------------------------ */
.sec-footer__contact {
  width: 100%;
}

.sec-footer__btn-contact {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #E40619 !important;
  /* 赤色指定 */
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 16px 40px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition: opacity 0.3s ease !important;
  width: 100%;
}

.sec-footer__btn-contact:hover {
  opacity: 0.88;
}

/* メールアイコン（CSS描画） */
.sec-footer__btn-contact .ico-mail {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 2px;
  margin-right: 14px;
}

.sec-footer__btn-contact .ico-mail::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 11px 0 11px;
  border-color: #ffffff transparent transparent transparent;
}

/* 矢印アイコン（右端固定） */
.sec-footer__btn-contact .ico-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
}

.sec-footer__btn-contact .ico-arrow::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #ffffff;
  border-right: 1.5px solid #ffffff;
  transform: rotate(45deg);
  margin-right: 2px;
}

/* ------------------------------------------
      最下部：サイトマップ・著作権表記
      ------------------------------------------ */
.sec-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #E5E5E5;
}

.sec-footer__utility {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sec-footer__utility li a {
  font-size: 14px !important;
  color: #333333 !important;
  text-decoration: none !important;
}

.sec-footer__utility .separator {
  color: #999999;
  font-size: 12px;
}

.sec-footer__copyright {
  font-size: 13px !important;
  color: #666666 !important;
  margin: 0 !important;
}


/* ==========================================
   SP表示レスポンシブ対応 (768px以下)
   ========================================== */
@media screen and (max-width: 768px) {
  footer.sec-footer {
    padding: 30px 0 20px !important;
  }

  .sec-footer__inner {
    padding: 0 20px !important;
  }

  /* 親要素の枠組みを解除して order で配置順を統一制御 */
  .sec-footer__main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 25px !important;
  }

  .sec-footer__info,
  .sec-footer__right {
    display: contents !important;
  }

  /* 1. ロゴ（中央配置） */
  .sec-footer__logo {
    order: 1 !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 25px !important;
  }

  .sec-footer__logo img {
    margin: 0 auto !important;
    max-width: 170px !important;
  }

  /* 2. ナビゲーション（横並び2カラム化） */
  .sec-footer__nav-wrap {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
  }

  .sec-footer__col {
    flex: 1 !important;
    padding-left: 12px !important;
    border-left: 1px solid #222222 !important;
    /* 左縦線 */
  }

  .sec-footer__nav-list li {
    margin-bottom: 10px !important;
  }

  .sec-footer__nav-list li a,
  .sec-footer__nav-title {
    font-size: 15px !important;
  }

  .sec-footer__nav-sub {
    margin-top: 8px !important;
  }

  .sec-footer__nav-sub li {
    margin-bottom: 6px !important;
  }

  .sec-footer__nav-sub li a {
    font-size: 12px !important;
  }

  /* 3. お問い合わせボタン */
  .sec-footer__contact {
    order: 3 !important;
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  .sec-footer__btn-contact {
    font-size: 18px !important;
    padding: 14px 20px !important;
  }

  /* 4. 会社住所（中央揃え） */
  .sec-footer__address {
    order: 4 !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
  }

  .sec-footer__company,
  .sec-footer__add,
  .sec-footer__tel-fax {
    margin-bottom: 4px !important;
  }

  /* 5. ユーティリティ & コピーライト */
  .sec-footer__bottom {
    border-top: none !important;
    padding-top: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    text-align: center !important;
  }

  .sec-footer__utility {
    justify-content: center !important;
  }

  .sec-footer__utility li a {
    font-size: 12px !important;
  }

  .sec-footer__copyright {
    font-size: 11px !important;
  }
}

/* ==========================================
   フッター内の緑ドット（::before）削除 & 余白リセット
   ========================================== */
.sec-footer li::before,
.sec-footer__utility li::before,
.sec-footer__nav-list li::before,
.sec-footer__nav-sub li::before {
  content: none !important;
  display: none !important;
}

.sec-footer li,
.sec-footer li~li {
  margin-top: 0 !important;
  /* 標準CSSの margin-top: .5rem を打ち消し */
  padding-left: 0 !important;
}
ul.sec-footer__nav-sub {
  padding-left: 1rem !important;
}

/* 下層ページ */

/* ==========================================
   スクロール時のヘッダーボタン崩れ（丸型アイコン化）を防止
   ========================================== */

/* 1. ボタン自体（aタグ）が丸く縮小されるのを防ぎ、元の形状を維持 */
html.is-scroll .lib-header__btn a,
html.is-scroll .lib-header__btn-list a,
html.is-scroll .lib-header__nav-list .--btn a {
  width: auto !important;
  height: auto !important;
  padding: 12px 24px !important;
  /* ★元のボタンのパディング（余白）に合わせて調整してください */
  border-radius: 0 !important;
  /* ★元のボタンの角丸に合わせて調整してください（四角なら0） */
  justify-content: center !important;
}

/* 2. 隠されてしまうテキスト（.txt）を強制的に再表示 */
html.is-scroll .lib-header__btn a .txt,
html.is-scroll .lib-header__btn-list a .txt,
html.is-scroll .lib-header__nav-list .--btn a .txt {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  margin: 0 !important;
}

/* 3. 矢印アイコンの位置・余白を正常化 */
html.is-scroll .lib-header__btn a .ico-arrow,
html.is-scroll .lib-header__btn a i,
html.is-scroll .lib-header__btn-list a .ico-arrow,
html.is-scroll .lib-header__btn-list a i,
html.is-scroll .lib-header__nav-list .--btn a .ico-arrow {
  margin-left: 12px !important;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

@media print,
screen and (min-width: 992px) {
  /* 1. スクロール時もヘッダーの高さを固定し、ガクガク動くのを防ぐ */
  html.is-scroll:not(.is-gnav__open) .lib-header__outer {
    height: 120px !important;
    padding: 0 !important;
    transition: none !important;
    background-color: #fff !important;
  }

  /* 2. ヘッダー内部の要素（ロゴ・メニュー・ボタン）を常に縦中央揃えに固定 */
  html.is-scroll .lib-header__inner,
  html.is-scroll .lib-header__container,
  html.is-scroll .lib-header__info,
  html.is-scroll .lib-header__gnav,
  html.is-scroll .lib-header__child {
    display: flex !important;
    align-items: center !important;
    height: 120px !important;
  }

  html.is-scroll .lib-header__outer.lib-header-BS02 .lib-induce__btn {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    /* 縦並び(column)を横並び(row)にリセット */
    padding: 12px 24px !important;
    /* スクロール前と同じパディングを再指定（※必要に応じて数値を調整） */
    align-items: center !important;
    /* 縦中央揃え */
    justify-content: center !important;
  }
}

/* ==========================================
   下層ページ：ヘッダー被り解消（ヒーローエリアの余白調整）
   ========================================== */

/* 1. PC表示 (992px以上) */
@media print,
screen and (min-width: 992px) {
  /* BlueMonkey標準の padding-top: 0; を打ち消し、ヘッダーの高さ分下げる */
  #wrapper:has(.lib-header-BS02) .lib-hero__outer {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }
}

/* 2. SP表示・タブレット等 (991px以下) */
@media screen and (max-width: 991px) {
  #wrapper:has(.lib-header-BS02) .lib-hero__outer {
    padding-top: 70px !important;
    padding-bottom: 30px !important;
    min-height: auto !important;
  }
}

.lib-fixed__bnr.js-fixed__bnr.is-scroll {
  display: none;
}

/* ==========================================
   MV（メインビジュアル）動画背景＆配置修正CSS (更新版)
   ========================================== */

/* 1. 外枠の高さを動画の比率に合わせる（固定高さを解除） */
.lib-fv-004__outer {
  position: relative !important;
  width: 100% !important;
  height: clamp(550px, 50vw, 800px) !important;
  /* ★高さの最小・可変・最大値を制御 */
  overflow: hidden !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* 2. 動画エリア（相対配置にして高さを確保） */
.fv-video__wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* 以前の画像と同じサイズ挙動を動画に適用 */
.fv-video__main {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* 枠からはみ出る分を綺麗にトリミング */
  display: block !important;
}

/* 3. キャッチコピーとScrollの位置指定を絶対配置に固定 */
.fv-copy__content,
.fv-scroll {
  position: absolute !important;
  z-index: 10 !important;
}

/* ヘッド部分の背景グラデーションと基本設定 */
.lib-hero__outer {
  position: relative;
  background: linear-gradient(135deg, #EAF7FB 0%, #EDF8FC 7.14%, #F0F9FC 14.29%, #F3FAFD 21.43%, #F6FCFD 28.57%, #F9FDFE 35.71%, #FCFEFE 42.86%, #FFF 50%, #FFF 100%);
  padding: 80px 0 40px;
}

/* 下線のグラデーション（擬似要素で実装） */
.lib-hero__outer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #00A8CC 0%, #2BAEBD 7.14%, #41B3AD 14.29%, #53B79D 21.43%, #63BB8B 28.57%, #71BF77 35.71%, #7FC35F 42.86%, #8CC63F 50%, rgba(113, 161, 50, 0.86) 57.14%, rgba(87, 125, 37, 0.71) 64.29%, rgba(62, 91, 24, 0.57) 71.43%, rgba(39, 59, 13, 0.43) 78.57%, rgba(18, 30, 4, 0.29) 85.71%, rgba(3, 5, 0, 0.14) 92.86%, rgba(0, 0, 0, 0.00) 100%);
}

/* インナーのレイアウト（テキストを左寄せにして縦に並べる） */
.lib-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* 英語サブタイトル (Great Vibes) */
.lib-hero__en {
  font-family: 'Great Vibes', cursive;
  color: #005C17;
  font-size: 30px;
  line-height: 1;
}

/* 日本語メインタイトル (Noto Sans JP) */
.lib-hero__title.title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 30px;
  color: #222;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

/* =========================================================
   経営理念ブロック
========================================================= */

/* ブロック全体の余白（必要に応じて調整） */
.philosophy-block {
  padding: 40px 0 60px;
}

/* --- タイトル部分 --- */
.philosophy-heading {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  /* リストとの余白 */
}

.philosophy-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  /* 36px / 30px */
}

.philosophy-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  /* 32px / 24px */
  margin: 0;
}

/* --- リスト部分 --- */
.philosophy-list {
  list-style: none;
  /* デフォルトのリストスタイルを打ち消し */
  padding: 0;
  margin: 0 0 40px 0;
  /* 下のテキストとの余白 */
}

.philosophy-list li {
  position: relative;
  color: #364153;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  /* 32px / 16px */
  padding-left: 1.5em;
  /* ◆マークを置くための左余白 */
  margin-bottom: 16px;
  /* 各リストアイテム間の余白 */
}

/* リストアイテム最後の余白を消す */
.philosophy-list li:last-child {
  margin-bottom: 0;
}

/* ◆マーク（擬似要素で実装） */
.philosophy-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: #00A8CC;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  background-color: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
}

/* --- テキスト部分 --- */
.philosophy-text {
  color: #6A7282;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  /* 32px / 16px */
  margin: 0;
}

/* =========================================================
   代表挨拶ブロック
========================================================= */

/* ブロック全体（背景を横幅いっぱいにする） */
.greeting-block {
  background: #F4FBFD;
  padding: 80px 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー（テキスト位置を上のブロックと揃えるための追記） */
.greeting-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル部分 --- */
.greeting-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.greeting-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.greeting-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- コンテンツ部分（左右カラム） --- */
.greeting-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  /* テキストと画像の間の余白 */
}

/* 左側：テキストエリア */
.greeting-text-area {
  flex: 1;
  /* 余ったスペースをテキスト領域に割り当て */
}

.greeting-catch {
  color: #1E2939;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  /* 24px / 16px */
  margin: 0 0 24px 0;
}

.greeting-body p {
  color: #4A5565;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  /* 32px / 16px */
  margin: 0 0 24px 0;
  /* 段落ごとの余白 */
}

.greeting-body p:last-of-type {
  margin-bottom: 32px;
  /* 署名部分との余白 */
}

.greeting-sign {
  color: #4A5565;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

/* 右側：画像エリア */
.greeting-image-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* 画像と名前の間の余白 */
  flex-shrink: 0;
  /* 画面が縮んでも画像エリアのサイズを保持 */
}

.greeting-image-box {
  display: flex;
  width: 220px;
  height: 293px;
  /* 小数点は丸めています */
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  /* 小数点は丸めています */
  background: #F3F4F6;
  color: #9CA3AF;
  /* ダミーテキスト用の色（適宜変更可） */
}

.greeting-image-caption {
  color: #4A5565;
  font-size: 14px;
  /* 画像幅に合わせ、少し小さめに設定 */
  margin: 0;
  text-align: center;
}

/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  /* ブロック全体の上下余白をスマホ用に少し狭める */
  .greeting-block {
    padding: 40px 0;
  }

  /* コンテンツ部分を縦並び（1カラム）に変更 */
  .greeting-content {
    flex-direction: column;
    gap: 40px;
    /* テキストと画像の間の縦余白 */
  }

  /* 右側だった画像エリアを画面幅に合わせて中央寄せ */
  .greeting-image-area {
    width: 100%;
    align-items: center;
  }
}

/* =========================================================
   会社概要ブロック
========================================================= */

.overview-block {
  padding: 80px 0;
}

/* --- タイトル部分 --- */
.overview-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.overview-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.overview-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- テーブル部分 --- */
.overview-table-wrapper {
  border: 1px solid #F3F4F6;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
}

.overview-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  /* CMSの外枠指定などを念のため打ち消し */
}

/* tdとthの共通設定 */
.overview-table th,
.overview-table td {
  padding: 16px 24px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  border-top: none !important;
  border-bottom: 1px solid #F3F4F6 !important;
  border-left: none !important;
  border-right: none !important;
  /* ←★ここを追記（右側の線を消す） */
  text-align: left !important;
  vertical-align: top !important;
}

/* 見出し(th)固有の設定 */
.overview-table th {
  width: 25% !important;
  min-width: 200px !important;
  font-weight: 400 !important;
  border-right: 1px solid #F3F4F6 !important;
  color: #6A7282 !important;
  /* CMSの白文字を打ち消し */
}

/* データ(td)固有の設定 */
.overview-table td {
  color: #4A5565 !important;
}

/* 奇数行の背景色（CMSの青背景を白で上書き） */
.overview-table tr:nth-child(odd) th,
.overview-table tr:nth-child(odd) td {
  background-color: #FFFFFF !important;
}

/* 偶数行の背景色 */
.overview-table tr:nth-child(even) th,
.overview-table tr:nth-child(even) td {
  background-color: #F9FDFE !important;
}

/* 最後の行の線を消す */
.overview-table tr:last-child th,
.overview-table tr:last-child td {
  border-bottom: none !important;
}

/* --- リスト部分（◇） --- */
.overview-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.overview-list li {
  position: relative !important;
  padding-left: 1.5em !important;
  margin-bottom: 12px !important;
  color: #4A5565 !important;
}

.overview-list li:last-child {
  margin-bottom: 0 !important;
}

/* 水色の◇マーク */
.overview-list li::before {
  content: "◇" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #00A8CC !important;
  font-weight: 700 !important;
  background-color: transparent !important;
  /* CMSのひし形図形を打ち消し */
  width: auto !important;
  height: auto !important;
}

/* --- 取引先部分の行間調整 --- */
.overview-clients {
  line-height: 2 !important;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .overview-block {
    padding: 40px 0;
  }

  /* セルをブロック要素にして縦並びに */
  .overview-table th,
  .overview-table td {
    display: block !important;
    width: 100% !important;
  }

  /* スマホ時は見出しの右線を消し、下の余白を詰めてtdとの一体感を出す */
  .overview-table th {
    border-right: none !important;
    border-bottom: none !important;
    padding: 16px 24px 4px 24px !important;
    font-weight: 700 !important;
  }

  /* スマホ時はテキストの上の余白を詰める */
  .overview-table td {
    padding: 0 24px 16px 24px !important;
  }
}

/* =========================================================
   沿革ブロック
========================================================= */

/* ブロック全体（背景を横幅いっぱいにする） */
.history-block {
  background: #F4FBFD;
  padding: 80px 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー */
.history-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル部分 --- */
.history-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 80px;
  /* ★ 見出しと年数の余白を広げました（60px → 80px） */
}

.history-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.history-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- 沿革リスト（タイムライン） --- */
.history-list {
  display: flex;
  flex-direction: column;
}

.history-item {
  display: flex;
  position: relative;
  /* 年数 + 余白分のスペースを左に確保 */
  padding-left: 160px;
  /* ★ テキスト全体の開始位置を右へ（120px → 160px） */
  padding-bottom: 60px;
  margin: 0;
}

.history-item:last-child {
  padding-bottom: 40px;
}

/* タイムラインの青い丸 */
.history-item::before {
  content: "";
  position: absolute;
  /* 年数の右側に配置 */
  left: 130px;
  /* ★ 年数の右側の余白を広げる（90px → 130px） */
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00A8CC;
  z-index: 2;
}

/* タイムラインの縦線 */
.history-item::after {
  content: "";
  position: absolute;
  /* 丸の中央に配置 */
  left: 134px;
  /* ★ 丸の中心に合わせる（94px → 134px） */
  top: 16px;
  bottom: 0;
  width: 2px;
  background-color: #CBEBF2;
  z-index: 1;
}

/* 左側の年 */
.history-year {
  position: absolute;
  /* 年数を絶対配置に変更 */
  left: 0;
  /* 左端に固定 */
  top: 0;
  width: auto;
  /* 幅の固定を解除 */
  color: #00A8CC;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

/* 右側のコンテンツ */
.history-content {
  margin: 0;
}

/* 月 */
.history-month {
  color: #1E2939;
  /* デザイン画像に合わせて濃いグレーに */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

/* テキスト本文 */
.history-text {
  color: #6A7282;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* 本社住所などの補足テキスト */
.history-subtext {
  font-size: 14px;
  display: inline-block;
  margin-top: 4px;
}

/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .history-block {
    padding: 40px 0;
  }

  .history-heading {
    margin-bottom: 40px;
  }

  /* スマホ時は縦並びに変更し、左の余白を縮小 */
  .history-item {
    flex-direction: column;
    /* ★ここを追加（年とテキストを縦に並べる） */
    padding-left: 30px;
    padding-bottom: 40px;
  }

  /* タイムラインの青い丸の位置を左端に戻す */
  .history-item::before {
    left: 0;
    top: 6px;
    /* 年数のテキストの高さに合わせる */
  }

  /* タイムラインの縦線の位置を戻す */
  .history-item::after {
    left: 4px;
    top: 16px;
  }

  /* 年数の絶対配置を解除し、横幅を100%にする */
  .history-year {
    position: static;
    width: 100%;
    /* ★追加（潰れるのを防ぐ） */
    margin-bottom: 12px;
    /* 下のテキスト（月）との余白 */
  }
}

/* =========================================================
   アクセスブロック
========================================================= */

.access-block {
  padding: 80px 0;
}

/* --- タイトル部分 --- */
.access-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.access-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.access-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- マップ部分 --- */
.access-map-wrapper {
  border: 1px solid #F3F4F6;
  /* テーブルなどで使用した枠線色に合わせています */
  border-radius: 10px;
  /* 角丸 */
  overflow: hidden;
  /* iframeの角を丸く見せるためにはみ出しを隠す */
  line-height: 0;
  /* iframeの下にできる隙間をなくす */
  font-size: 0;
}

.access-map-wrapper iframe {
  width: 100%;
  height: 450px;
  border: none;
  vertical-align: bottom;
}

/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .access-block {
    padding: 40px 0;
  }

  .access-heading {
    margin-bottom: 32px;
  }

  /* スマホ時は高さを少し抑えて見やすくする（お好みで変更可能です） */
  .access-map-wrapper iframe {
    height: 350px;
  }
}

/* =========================================================
   What We Do ブロック（事業内容）
========================================================= */

.whatwedo-block {
  padding: 40px 0 80px;
  background: #FFFFFF;
}

/* --- コンテンツ部分（左右カラム） --- */
.whatwedo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 画像とテキストの高さを中央で揃える */
  gap: 60px;
  /* テキストと画像の間の余白 */
}

/* 左側：テキストエリア */
.whatwedo-text-area {
  flex: 1;
  /* 余ったスペースをテキスト領域に割り当て */
}

.whatwedo-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 32px;
  /* 本文との余白 */
}

.whatwedo-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 10px;
}

.whatwedo-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

.whatwedo-text {
  color: #6A7282;
  /* 会社概要と同じテキストカラー */
  font-size: 16px;
  line-height: 2;
  margin: 0;
}

/* 右側：画像エリア */
.whatwedo-image-area {
  flex: 1;
  max-width: 50%;
  /* 画像エリアが半分以上の幅を取らないように制限 */
}

.whatwedo-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* 角丸 */
  vertical-align: bottom;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .whatwedo-block {
    padding: 40px 0;
  }
  .whatwedo-heading__ja {
    font-size: 20px;
  }
  .whatwedo-content {
    flex-direction: column;
    /* 縦並びに変更 */
    gap: 40px;
  }
  .whatwedo-image-area {
    max-width: 100%;
    /* 画像を横幅いっぱいまで広げる */
    width: 100%;
  }
}

/* =========================================================
   Core Services ブロック（主要事業）
========================================================= */

/* ブロック全体（背景を横幅いっぱいにする） */
.core-services-block {
  background: #F4FBFD;
  padding: 80px 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー（はみ出しリセット） */
.core-services-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル部分 --- */
.core-services-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 60px;
}

.core-services-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.core-services-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- サービス一覧 --- */
.core-services-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  /* 各サービス間の縦の余白 */
}

/* サービス個別のアイテム（基本は画像左・テキスト右） */
.core-services-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* テキスト左・画像右のレイアウト */
.core-services-item.--reverse {
  flex-direction: row-reverse;
}

/* 画像エリア */
.core-services-image-area {
  flex: 1;
  max-width: 50%;
}

.core-services-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* 角丸 */
  vertical-align: bottom;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  /* 少しだけ影をつけて画像を馴染ませる */
}

/* テキストエリア */
.core-services-text-area {
  flex: 1;
}

/* 半透明の大きな番号 */
.core-services-number {
  color: #00A8CC33;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

/* サービス名 */
.core-services-title {
  color: #1E2939;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 16px 0;
}

/* キャッチコピー（小見出し） */
.core-services-catch {
  color: #1E2939;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* 本文テキスト */
.core-services-text {
  color: #6A7282;
  font-size: 16px;
  line-height: 2;
  margin: 0;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .core-services-block {
    padding: 40px 0;
  }

  .core-services-heading {
    margin-bottom: 40px;
  }

  .core-services-list {
    gap: 60px;
    /* 縦の余白を少し縮小 */
  }

  /* スマホ時はすべて「画像上・テキスト下」に統一 */
  .core-services-item,
  .core-services-item.--reverse {
    flex-direction: column;
    gap: 24px;
    /* 画像とテキストの余白 */
  }

  .core-services-image-area {
    max-width: 100%;
    /* 画像を横幅いっぱいまで広げる */
  }
}

/* =========================================================
   Strengths ブロック（当社の強み）
========================================================= */

.strengths-block {
  padding: 80px 0;
  background: #FFFFFF;
}

/* --- タイトル部分 --- */
.strengths-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.strengths-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.strengths-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- カード一覧 --- */
.strengths-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* PC時は2列に分割 */
  gap: 32px;
  /* カード間の余白（縦・横） */
}

/* 個別のカード */
.strengths-item {
  background: #F4FBFD;
  padding: 40px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.strengths-title {
  color: #1E2939;
  font-size: 18px;
  /* 本文より少し大きめに設定 */
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.strengths-text {
  color: #6A7282;
  font-size: 16px;
  line-height: 2;
  margin: 0;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .strengths-block {
    padding: 40px 0;
  }

  /* スマホ時は1列に変更し、カード間の余白を少し詰める */
  .strengths-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* スマホ時はカード内の余白を少し小さくする */
  .strengths-item {
    padding: 24px;
  }
}

/* =========================================================
   プロジェクト実績（タブ＆テーブル）
========================================================= */

.projects-block {
  padding: 40px 0 80px;
}

/* --- タブメニュー全体（PC用） --- */
.projects-tab-menu {
  border-bottom: 1px solid #E5E7EB !important;
  /* タブ下のグレーの線 */
  gap: 0 !important;
  justify-content: flex-start !important;
}

/* 非選択時のタブボタン */
.projects-tab-menu .lib-tab__btn {
  background: transparent !important;
  color: #6A7282 !important;
  border: none !important;
  padding: 16px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease;
}

.projects-tab-menu .lib-tab__btn:hover {
  background: #F9FDFE !important;
  /* ホバー時に少し明るく */
}

/* 選択中（アクティブ）のタブボタン */
.projects-tab-menu .lib-tab__btn[aria-selected="true"] {
  background: #005C17 !important;
  /* グリーン */
  color: #FFFFFF !important;
}

/* --- スマホ用アコーディオンボタン --- */
.projects-toggle-btn {
  font-weight: 700 !important;
}
.projects-toggle-btn[aria-expanded="true"] {
  background: #005C17 !important;
  /* スマホで開いた時の色もグリーンに */
  color: #FFFFFF !important;
}

/* --- パネル内の余白調整 --- */
.projects-panel-content {
  padding: 32px 0 0 0 !important;
  background: transparent !important;
  border: none !important;
}


/* --- テーブル部分 --- */
.projects-table-wrapper {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #FFFFFF;
  overflow-x: auto;
  /* スマホ時に横スクロール可能にする */
  -webkit-overflow-scrolling: touch;
  /* スマホでのスクロールを滑らかに */
}

/* テーブルの内側の角丸を効かせるため、ラッパーとは別に調整 */
.projects-table {
  width: 100% !important;
  min-width: 800px;
  /* 横幅の最小値を指定し、スマホで潰れないようにする */
  border-collapse: collapse !important;
  border: none !important;
}

/* ヘッダー（グリーン背景） */
.projects-table th {
  background: #005C17 !important;
  color: #FFFFFF !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: left !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px solid #FFFFFF !important;
  white-space: nowrap !important;
}
/* 最後の見出しの右線は消す */
.projects-table th:last-child {
  border-right: none !important;
}

/* ★追加：奇数行の背景色（白で固定） */
.projects-table tr:nth-child(odd) td {
  background-color: #FFFFFF !important;
}

/* ★追加：偶数行の背景色 */
.projects-table tr:nth-child(even) td {
  background-color: #FAFCFE !important;
}

/* データセル */
.projects-table td {
  padding: 16px 24px !important;
  color: #4A5565 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  border-bottom: 1px solid #E5E7EB !important;
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid #E5E7EB !important;
  vertical-align: middle !important;
  /* white-space: nowrap !important; は削除しました（はみ出し防止） */
}

/* 最後のセルの右線は消す */
.projects-table td:last-child {
  border-right: none !important;
}

/* 最後の行の線を消す */
.projects-table tr:last-child td {
  border-bottom: none !important;
}

/* 建設会社名のテキスト装飾（例）鹿島建設...） */
.projects-company {
  color: #005C17;
  font-weight: 700;
}

/* プロジェクト名のリンク装飾 */
.projects-table a {
  color: #4A5565;
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: inline-block;
  /* ★追加：アイコンとの改行防止 */
}
.projects-table a:hover {
  opacity: 0.7;
}

/* --- 注記テキスト --- */
.projects-note {
  text-align: right;
  color: #9CA3AF;
  font-size: 14px;
  margin: 12px 0 0 0;
}
/* --- 列幅の調整 --- */
.projects-table th:nth-child(1) {
  width: 22% !important;
}
.projects-table th:nth-child(2) {
  width: 30% !important;
}
.projects-table th:nth-child(3) {
  width: 23% !important;
}
.projects-table th:nth-child(4) {
  width: 25% !important;
}

/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .projects-block {
    padding: 40px 0;
  }

  .projects-panel-content {
    padding: 24px 0 0 0 !important;
  }

  .projects-table th,
  .projects-table td {
    padding: 12px 16px !important;
    /* スマホ時は少し余白を詰める */
    font-size: 14px !important;
  }
}

/* =========================================================
   採用情報 - Messageブロック
========================================================= */

.recruit-message-block {
  padding: 40px 0 80px;
  background: #FFFFFF;
}

/* --- タイトル部分（センター寄せ） --- */
.recruit-message-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 中央揃え */
  text-align: center;
  margin-bottom: 40px;
  /* 本文との余白 */
}

.recruit-message-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
}

.recruit-message-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
  position: relative;
  /* 緑のラインの基準位置 */
  padding-bottom: 24px;
  /* 緑のラインとの余白 */
}

/* タイトル下の緑のライン（擬似要素） */
.recruit-message-heading__ja::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 基準の左端から自身の幅の半分だけ戻して中央配置 */
  width: 48px;
  height: 2px;
  background: #005C17;
}

/* --- テキスト部分 --- */
.recruit-message-body {
  max-width: 860px;
  /* テキストエリアの最大幅を制限して画面中央に配置 */
  margin: 0 auto;
}

.recruit-message-text {
  color: #6A7282;
  font-size: 16px;
  line-height: 2;
  margin: 0;
  text-align: left;
  /* テキスト自体は左揃えにして読みやすく */
}

/* 赤文字の装飾（画像合わせ） */
.recruit-text-red {
  color: #E60012;
  /* 赤色 */
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .recruit-message-block {
    padding: 40px 0;
  }

  .recruit-message-heading {
    margin-bottom: 32px;
  }

  /* スマホ時は見出しが改行されることを考慮して少しサイズと余白を調整 */
  .recruit-message-heading__ja {
    font-size: 20px;
    padding-bottom: 20px;
  }
}

/* =========================================================
   採用情報 - 求める人物像ブロック
========================================================= */

/* ブロック全体（背景を横幅いっぱいにする） */
.ideal-candidate-block {
  background: #F7FAF8;
  padding: 80px 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー（はみ出しリセット） */
.ideal-candidate-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  /* CMSの共通幅 */
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル部分（センター寄せ） --- */
.ideal-candidate-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
}

.ideal-candidate-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
}

.ideal-candidate-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
  position: relative;
  padding-bottom: 24px;
}
.ideal-candidate-heading__ja::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 中央配置 */
  width: 48px;
  height: 2px;
  background: #005C17;
}

/* --- カード一覧 --- */
.ideal-candidate-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* PC時は3列 */
  gap: 32px;
}

/* 個別のカード */
.ideal-candidate-card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  /* うっすらとした影で浮き出させる */
}

/* カード内のヘッダー */
.ideal-candidate-card__header {
  margin-bottom: 24px;
}

.ideal-candidate-card__en {
  display: block;
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
}

.ideal-candidate-card__ja {
  color: #1E2939;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.ideal-candidate-card__sub {
  color: #1E2939;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* カード内のテキスト */
.ideal-candidate-card__text {
  color: #6A7282;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  flex-grow: 1;
  /* 余白を埋めて、下のタグをカード下部に押しやる */
}

/* --- タグエリア --- */
.ideal-candidate-card__tags {
  display: flex;
  flex-wrap: wrap;
  /* 横に並びきらない場合は改行させる */
  gap: 8px 12px;
  /* 縦横の余白 */
  margin-top: 32px;
}

.ideal-candidate-tag {
  display: inline-block;
  border: 1px solid #005C17;
  border-radius: 20px;
  padding: 4px 16px;
  color: #005C17;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  background: #FFFFFF;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .ideal-candidate-block {
    padding: 40px 0;
  }

  .ideal-candidate-heading {
    margin-bottom: 40px;
  }

  /* スマホ時は1列に縦並び */
  .ideal-candidate-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* カード内の余白を少し縮小 */
  .ideal-candidate-card {
    padding: 32px 24px;
  }
}

/* =========================================================
   採用情報 - Who We Welcome ブロック
========================================================= */

.who-we-welcome-block {
  padding: 80px 0;
}

/* --- タイトル部分（センター寄せ） --- */
.welcome-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
}

.welcome-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
}

.welcome-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
  position: relative;
  padding-bottom: 24px;
}

/* タイトル下の緑のライン（擬似要素） */
.welcome-heading__ja::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: #005C17;
}

/* --- カード一覧（グリッド） --- */
.welcome-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* --- 個別のカード共通設定 --- */
.welcome-card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 中身を左寄せ */
}

/* アイコンエリア */
.welcome-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.welcome-card__icon img {
  width: 24px;
  height: auto;
}

/* ラベル（角丸） */
.welcome-card__label {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 20px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* タイトル */
.welcome-card__title {
  color: #1E2939;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 16px 0;
}

/* テキスト本文 */
.welcome-card__text {
  color: #6A7282;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 24px 0;
  flex-grow: 1;
  /* 下部のリストが常に一番下に揃うように余白を埋める */
}

/* 箇条書きリスト */
.welcome-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.welcome-card__list li {
  position: relative;
  padding-left: 1.2em;
  /* 丸ポチのスペース */
  margin-bottom: 10px;
  color: #6A7282;
  font-size: 14px;
  line-height: 1.6;
}

.welcome-card__list li:last-child {
  margin-bottom: 0;
}

/* 箇条書きの丸ポチ */
.welcome-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  /* 文字の中央に高さを合わせる */
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* --- テーマカラーの個別設定 --- */

/* 1. 緑（経験豊富なベテラン技術者） */
.welcome-card--green {
  border-top: 6px solid #005C17;
}
.welcome-card--green .welcome-card__icon {
  background: #005C1718;
  /* 透明度付き */
}
.welcome-card--green .welcome-card__label,
.welcome-card--green .welcome-card__list li::before {
  background: #005C17;
}

/* 2. 青（意欲ある若手人材） */
.welcome-card--blue {
  border-top: 6px solid #00A8CC;
}
.welcome-card--blue .welcome-card__icon {
  background: #00A8CC18;
  /* 透明度付き */
}
.welcome-card--blue .welcome-card__label,
.welcome-card--blue .welcome-card__list li::before {
  background: #00A8CC;
}

/* 3. 黄緑（グローバル人材） */
.welcome-card--lightgreen {
  border-top: 6px solid #8CC63F;
}
.welcome-card--lightgreen .welcome-card__icon {
  background: #8CC63F18;
  /* 透明度付き */
}
.welcome-card--lightgreen .welcome-card__label,
.welcome-card--lightgreen .welcome-card__list li::before {
  background: #8CC63F;
}

/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .who-we-welcome-block {
    padding: 40px 0;
  }

  .welcome-heading {
    margin-bottom: 40px;
  }

  /* スマホ時は1列に縦並び */
  .welcome-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* カード内の余白を少し縮小 */
  .welcome-card {
    padding: 24px;
  }
}

/* =========================================================
   採用情報 - Why Plan-Art ブロック
========================================================= */

/* ブロック全体（背景を横幅いっぱいにする） */
.why-planart-block {
  background: #F7FAF8;
  padding: 80px 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー（はみ出しリセット） */
.why-planart-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル部分（センター寄せ） --- */
.why-planart-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
}

.why-planart-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
}

.why-planart-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
  position: relative;
  padding-bottom: 24px;
}

/* タイトル下の緑のライン（擬似要素） */
.why-planart-heading__ja::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: #005C17;
}

/* --- カード一覧 --- */
.why-planart-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* PC時は2列 */
  gap: 32px;
}

/* --- 個別のカード --- */
.why-planart-card {
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  /* ヘッダーの背景色を角丸に沿わせるため */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

/* カード上部（緑背景） */
.why-planart-card__header {
  background: #005C17;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* アイコンエリア */
.why-planart-card__icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.15);
  /* 白を少し透過して配置 */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-planart-card__icon img {
  width: 24px;
  height: auto;
}

/* カード上部の見出しエリア */
.why-planart-card__title-area {
  display: flex;
  flex-direction: column;
}

.why-planart-card__en {
  color: #FFFFFF;
  font-family: "Great Vibes", cursive;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 4px;
}

.why-planart-card__ja {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

/* カード下部（白背景） */
.why-planart-card__body {
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-grow: 1;
}

/* テキスト本文 */
.why-planart-card__text {
  color: #6A7282;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  flex: 1;
  /* 左側を埋める */
}

/* 右側のハイライトボックス */
.why-planart-card__highlight {
  background: #F0F9F3;
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 140px;
  /* ボックスが潰れないように最小幅を設定 */
  text-align: center;
}

.why-planart-card__highlight-sub {
  color: #6A7282;
  font-size: 12px;
  margin-bottom: 8px;
}

.why-planart-card__highlight-main {
  color: #005C17;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .why-planart-block {
    padding: 40px 0;
  }

  .why-planart-heading {
    margin-bottom: 40px;
  }

  /* スマホ時は1列に縦並び */
  .why-planart-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* カード下部を縦並びに変更 */
  .why-planart-card__body {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  /* スマホ時はヘッダーの余白も少し調整 */
  .why-planart-card__header {
    padding: 24px;
  }

  /* ハイライトボックスを横幅いっぱいにする */
  .why-planart-card__highlight {
    width: 100%;
    padding: 16px;
  }
}

/* =========================================================
   採用情報 - Explore ブロック
========================================================= */

.explore-block {
  padding: 80px 0;
  background: #F7FAF8;
  /* 前のブロックと背景色が同じ想定 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー（はみ出しリセット） */
.explore-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル部分（センター寄せ） --- */
.explore-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
}

.explore-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
}

.explore-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
  position: relative;
  padding-bottom: 24px;
}

/* タイトル下の緑のライン（擬似要素） */
.explore-heading__ja::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: #005C17;
}

/* --- カード一覧 --- */
.explore-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* PC時は4列 */
  gap: 24px;
}

/* --- 個別のカード --- */
.explore-card {
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  /* 角丸を効かせるため */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  /* リンクの下線を消す */
  transition: box-shadow 0.3s ease;
}

.explore-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  /* ホバー時に影を濃くする */
}

/* 画像エリア */
.explore-card__image-area {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* 画像の比率を固定 */
  overflow: hidden;
}

/* 画像の上に被せる薄い黒のレイヤー */
.explore-card__image-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #00000080;
  /* 薄い黒 */
  z-index: 1;
}

.explore-card__image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* ホバー時に画像を少し拡大 */
.explore-card:hover .explore-card__image-area img {
  transform: scale(1.05);
}

/* 画像上の英語テキスト */
.explore-card__en {
  position: absolute;
  bottom: 16px;
  left: 20px;
  color: #FFFFFF;
  font-family: "Great Vibes", cursive;
  font-size: 28px;
  z-index: 2;
  /* 黒レイヤーの上に表示 */
  line-height: 1;
}

/* カード下部（白背景） */
.explore-card__body {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.explore-card__ja {
  color: #1E2939;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.explore-card__text {
  color: #6A7282;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 24px 0;
  flex-grow: 1;
  /* 「詳しく見る」を一番下に押しやる */
}

/* 詳しく見る リンク部分 */
.explore-card__link {
  color: #00A8CC;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.3s ease;
}

.explore-card:hover .explore-card__link {
  opacity: 0.7;
  /* ホバー時に少し薄くする */
}

.explore-card__arrow {
  font-family: sans-serif;
  /* 矢印のフォントを整える */
}

/* =========================================================
   レスポンシブ調整
========================================================= */

/* タブレット・小さめのPCサイズ（1024px以下） */
@media screen and (max-width: 1024px) {
  .explore-list {
    grid-template-columns: repeat(2, 1fr);
    /* 2列に変更して潰れるのを防ぐ */
  }
}

/* スマートフォンサイズ（768px以下） */
@media screen and (max-width: 768px) {
  .explore-block {
    padding: 40px 0;
  }

  .explore-heading {
    margin-bottom: 40px;
  }

  .explore-list {
    grid-template-columns: 1fr;
    /* 1列に変更 */
    gap: 20px;
  }

  .explore-card__body {
    padding: 20px;
  }
}

/* =========================================================
   社員インタビュー ブロック（独立仕様）
========================================================= */

/* --- ブロックごとの余白 --- */
.interview-heading-block {
  padding-top: 40px;
  margin-bottom: 60px;
}

.interview-item-block {
  margin-bottom: 120px;
  /* 次の人との間隔 */
}

.interview-item-block:last-child {
  margin-bottom: 80px;
  /* 一番最後（フッター等の上）の間隔 */
}

/* --- タイトル部分 --- */
.interview-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.interview-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.interview-heading__main {
  color: #1E2939;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px 0;
  letter-spacing: 0.05em;
}

.interview-heading__text {
  color: #6A7282;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

/* --- 1つのインタビューセット --- */
.interview-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* 左右反転（クラス --reverse 付与時） */
.interview-item.--reverse {
  flex-direction: row-reverse;
}

/* =======================================
   左側：画像エリア
======================================= */
.interview-image-area {
  flex: 1;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* メイン画像とサブ画像の隙間 */
}

.interview-main-img {
  position: relative;
  width: 100%;
}

.interview-main-img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* プロフィールボックス（緑背景） */
.interview-profile {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0, 92, 23, 0.95);
  color: #FFFFFF;
  padding: 24px 32px;
  width: auto;
  min-width: 280px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 左右反転時のプロフィールボックス位置 */
.interview-item.--reverse .interview-profile {
  right: auto;
  left: 16px;
}

.interview-profile__en {
  font-family: "Great Vibes", cursive;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 4px;
}

.interview-profile__ja {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.interview-profile__dept,
.interview-profile__year {
  font-size: 14px;
  line-height: 1.6;
}

/* サブ画像2枚 */
.interview-sub-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.interview-sub-imgs img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =======================================
   右側：テキストエリア
======================================= */
.interview-text-area {
  flex: 1;
}

/* 大見出し */
.interview-catch {
  color: #005C17;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 32px 0;
  padding-left: 16px;
  border-left: 4px solid #005C17;
  /* 左側の緑の縦線 */
}

/* Q&A部分 */
.interview-qa dl {
  margin: 0 0 40px 0;
}

.interview-qa dt {
  color: #005C17;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.6;
}

.interview-qa dd {
  color: #4A5565;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 32px 0;
}
.interview-qa dd:last-child {
  margin-bottom: 0;
}

/* --- スケジュールエリア --- */
.interview-schedule {
  background: #F7FAF8;
  /* ご指定の背景色 */
  padding: 32px;
  border-radius: 10px;
}

.interview-schedule__title {
  color: #1E2939;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 24px 0;
}

/* タイムラインの構築 */
.interview-timeline__item {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin: 0;
  padding-bottom: 32px;
}

.interview-timeline__item:last-child {
  padding-bottom: 0;
}

/* 時刻 */
.interview-timeline__item dt {
  color: #005C17;
  font-size: 16px;
  font-weight: 700;
  width: 60px;
  /* 時刻の幅を固定 */
  flex-shrink: 0;
  margin: 0;
  line-height: 1.6;
}

/* スケジュール内容と線・ドット */
.interview-timeline__item dd {
  color: #4A5565;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding-left: 32px;
  position: relative;
  flex-grow: 1;
}

/* ドット（丸ポチ） */
.interview-timeline__item dd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #005C17;
  z-index: 2;
}

/* 縦線 */
.interview-timeline__item dd::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: -40px;
  width: 2px;
  background: #D5E5D8;
  z-index: 1;
}

/* 最後の項目の縦線は消す */
.interview-timeline__item:last-child dd::after {
  display: none;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .interview-heading-block {
    padding-top: 40px;
    margin-bottom: 40px;
  }

  .interview-item-block {
    margin-bottom: 80px;
  }
  .interview-item-block:last-child {
    margin-bottom: 40px;
  }

  /* スマホ時は縦並びに変更 */
  .interview-item,
  .interview-item.--reverse {
    flex-direction: column;
    gap: 32px;
  }

  .interview-image-area {
    max-width: 100%;
  }

  .interview-profile {
    width: 90%;
    padding: 24px;
  }

  .interview-schedule {
    padding: 24px;
  }

  .interview-timeline__item dd {
    padding-left: 20px;
  }
}

/* =========================================================
   数字で見る - Key Figures ブロック
========================================================= */

.key-figures-block {
  padding: 40px 0 80px;
}

/* --- タイトル部分 --- */
.key-figures-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 画像に合わせて左寄せ */
  margin-bottom: 40px;
}

.key-figures-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.key-figures-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- カード一覧 --- */
.key-figures-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* PC時は3列 */
  gap: 32px;
}

/* --- 個別のカード --- */
.key-figures-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* 右上の円（共通設定） */
.key-figures-card__circle {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px;
  height: 150px;
  border-radius: 37282700px;
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}

/* カード内のテキスト・数字 */
.key-figures-card__title {
  color: #6A7282;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px 0;
  position: relative;
  z-index: 1;
  /* 円の上に表示 */
}

.key-figures-card__number-area {
  display: flex;
  align-items: baseline;
  /* 数字と単位の下端を揃える */
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.key-figures-card__number {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 64px;
  /* 数字を大きく */
  font-weight: 700;
  line-height: 1;
}

.key-figures-card__unit {
  font-size: 20px;
  font-weight: 700;
  margin-left: 4px;
}

.key-figures-card__desc {
  color: #9CA3AF;
  /* 少し薄めのグレー */
  font-size: 14px;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* --- 各カードのテーマカラー設定 --- */

/* 1. 緑（累計プロジェクト実績） */
.key-figures-card--green .key-figures-card__number-area {
  color: #005C17;
}
.key-figures-card--green .key-figures-card__circle {
  background: #005C17;
}

/* 2. 青（在籍技術者数） */
.key-figures-card--blue .key-figures-card__number-area {
  color: #00A8CC;
}
.key-figures-card--blue .key-figures-card__circle {
  background: #00A8CC;
}

/* 3. 黄緑（リピート受注率） */
.key-figures-card--lightgreen .key-figures-card__number-area {
  color: #8CC63F;
}
.key-figures-card--lightgreen .key-figures-card__circle {
  background: #8CC63F;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .key-figures-block {
    padding: 40px 0;
  }

  .key-figures-heading {
    margin-bottom: 32px;
  }

  .key-figures-list {
    grid-template-columns: 1fr;
    /* 1列に変更 */
    gap: 24px;
  }

  .key-figures-card {
    padding: 40px 24px;
  }

  /* スマホ時は数字を少し小さく */
  .key-figures-card__number {
    font-size: 56px;
  }
}

/* =========================================================
   データで見る - Infographics ブロック
========================================================= */

.infographics-block {
  padding: 80px 0;
  background: #F7FAF8;
  /* ご指定の背景色 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー（はみ出しリセット） */
.infographics-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル部分 --- */
.infographics-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.infographics-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.infographics-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
  /* positionとpadding-bottom、::afterを削除してラインを消去 */
}

/* --- コンテナとカードの共通設定 --- */
.infographics-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.info-card {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.info-card__title-area {
  display: flex;
  flex-direction: column;
}

.info-card__title {
  color: #1E2939;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.info-card__subtitle {
  color: #9CA3AF;
  font-size: 13px;
  margin: 0;
}

/* =========================================================
   上段：月平均残業時間（棒グラフ）
========================================================= */

.info-card__header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

.info-card__number-area {
  text-align: right;
}

.info-card__big-num {
  color: #005C17;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

.info-card__big-num .unit {
  font-size: 16px;
  margin-left: 4px;
}

.info-card__num-desc {
  color: #9CA3AF;
  font-size: 13px;
}

/* グラフエリア */
.bar-chart-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bar-chart {
  position: relative;
  height: 240px;
  min-width: 700px;
  margin-bottom: 24px;
}

/* Y軸 */
.bar-chart__y-axis {
  position: absolute;
  top: 0;
  left: 40px;
  right: 0;
  bottom: 30px;
  /* 左端から40px空ける */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.y-line {
  position: relative;
  width: 100%;
  border-top: 1px dashed #E5E7EB;
  height: 0;
}
.y-line:last-child {
  border-top: 1px solid #D1D5DB;
}

.y-label {
  position: absolute;
  left: -32px;
  /* 40pxの余白の中に配置されるため隠れない */
  top: -10px;
  color: #9CA3AF;
  font-size: 12px;
}

/* 平均線 */
.bar-chart__avg-line {
  position: absolute;
  left: 40px;
  right: 0;
  border-top: 1px dashed #00A8CC;
  z-index: 1;
}

.avg-label {
  position: absolute;
  right: 12px;
  top: -26px;
  background: #00A8CC;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

/* バー本体 */
.bar-chart__bars {
  position: absolute;
  top: 0;
  left: 40px;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding-bottom: 30px;
}

.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  width: 32px;
  z-index: 2;
}

.bar-val {
  color: #005C17;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
}
.bar.green {
  background: #005C17;
}
.bar.blue {
  background: #00A8CC;
}

.bar-label {
  position: absolute;
  bottom: -24px;
  color: #6A7282;
  font-size: 12px;
}

/* =======================================
   凡例エリア
======================================= */
.bar-chart__legend-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #E5E7EB;
  padding-top: 24px;
}

.legend-items {
  display: flex;
  gap: 24px;
}

/* 凡例のテキストと四角（■）の配置 */
.legend-item {
  color: #6A7282;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 擬似要素で四角（■）を作る（空タグ削除対策） */
.legend-item::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 0;
  /* 四角形にする */
}

/* それぞれの色指定 */
.legend-green::before {
  background: #005C17;
}

.legend-blue::before {
  background: #00A8CC;
}

.legend-note {
  color: #9CA3AF;
  font-size: 12px;
}


/* =========================================================
   下段：グリッド（年収・男女・在籍）
========================================================= */

.info-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.info-col-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- 年収レンジ（横棒グラフ） --- */
.h-bar-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.h-bar-item {
  display: flex;
  flex-direction: column;
}

.h-bar-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.h-bar-range {
  color: #1E2939;
  font-size: 14px;
  font-weight: 700;
}

.h-bar-pct {
  color: #005C17;
  font-size: 14px;
  font-weight: 700;
}

/* グラフの背景枠（薄いグレー） */
.h-bar-track {
  position: relative;
  width: 100%;
  height: 20px;
  /* ご指定の20pxに変更 */
  background: #F3F4F6;
  border-radius: 20px;
  /* 角丸指定 */
  margin-bottom: 8px;
  font-size: 0;
  /* 中に入れた   による高さのズレを防ぐ */
}

/* グラフの緑のバー（空タグ削除対策として擬似要素で表示） */
.h-bar-track::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: #005C17;
  opacity: 0.75;
  /* ご指定の透過度 */
  border-radius: 20px;
}

/* 各パーセンテージに応じた幅の指定 */
.bar-15::before {
  width: 30%;
}
.bar-25::before {
  width: 50%;
}
.bar-30::before {
  width: 60%;
}
.h-bar-desc {
  color: #9CA3AF;
  font-size: 12px;
}

/* --- 男女比率（半円SVG） --- */
.gender-charts {
  display: flex;
  justify-content: space-around;
  margin-top: 32px;
}

.arc-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* グラフを囲む枠（グレーのSVG幅に合わせて120pxに変更） */
.arc-wrapper {
  position: relative;
  width: 120px;
  height: 65px;
  margin-bottom: 16px;
}

/* ベースのグレーの半円（CSSにSVGを埋め込み） */
.arc-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 65px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='65' viewBox='0 0 120 65' fill='none'%3E%3Cpath d='M5 60C5 45.4131 10.7946 31.4236 21.1091 21.1091C31.4236 10.7946 45.4131 5 60 5C74.5869 5 88.5764 10.7946 98.8909 21.1091C109.205 31.4236 115 45.4131 115 60' stroke='%23E5E7EB' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  font-size: 0;
  /*   の高さを消す */
}

/* 緑・水色の半円の共通設定 */
.arc-fg {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: left bottom;
}

/* 男性の半円（緑色） */
.arc-fg--men {
  width: 104px;
  height: 65px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='65' viewBox='0 0 104 65' fill='none'%3E%3Cpath d='M5 60C5 45.4131 10.7946 31.4236 21.1091 21.1091C31.4236 10.7946 45.4131 5 60 5C74.5869 5 88.5764 10.7946 98.8909 21.1091' stroke='%23005C17' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 女性の半円（水色） */
.arc-fg--women {
  width: 27px;
  height: 49px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='49' viewBox='0 0 27 49' fill='none'%3E%3Cpath d='M5 43.8909C5 29.304 10.7946 15.3145 21.1091 5' stroke='%2300A8CC' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E");
}

.arc-val {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.arc-label {
  color: #4A5565;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 凡例の丸（空タグ削除対策） */
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  font-size: 0;
}
.legend-dot.green {
  background: #005C17;
}
.legend-dot.blue {
  background: #00A8CC;
}


/* --- 在籍年数（バーグラフ） --- */
.bar-chart-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bar-chart-item {
  display: flex;
  flex-direction: column;
}

.bar-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bar-range {
  color: #4A5565;
  font-size: 14px;
}

.bar-pct {
  color: #005C17;
  font-size: 14px;
  font-weight: 700;
}

/* グレーの背景バー */
.bar-track {
  width: 100%;
  height: 10px;
  background-color: #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
}

/* 緑色の実線バー */
.bar-fill {
  height: 100%;
  background-color: #005C17;
  border-radius: 10px;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .infographics-block {
    padding: 40px 0;
  }

  .info-grid-bottom {
    grid-template-columns: 1fr;
    /* 1カラムに */
    gap: 32px;
  }

  .info-card {
    padding: 24px;
    /* スマホ時は余白を縮小 */
  }

  .info-card__header-flex {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .info-card__number-area {
    text-align: left;
  }

  /* スマホの棒グラフ凡例 */
  .bar-chart__legend-area {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* =========================================================
   最下段：Work-Life Balance（追加ブロック）
========================================================= */

.info-worklife {
  background: #005C17;
  /* 全体を緑背景に */
  border: none;
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 64px;
  color: #FFFFFF;
}

/* --- 左側：円グラフエリア --- */
.worklife-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.circle-chart {
  margin-bottom: 24px;
}

.circle-wrapper {
  position: relative;
  width: 144px;
  height: 144px;
}

/* 円グラフの背景と前面（SVGをCSSで読み込み） */
.circle-bg,
.circle-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

.circle-bg {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='162' height='162' viewBox='0 0 162 162' fill='none'%3E%3Cpath d='M81 153C120.765 153 153 120.765 153 81C153 41.2355 120.765 9 81 9C41.2355 9 9 41.2355 9 81C9 120.765 41.2355 153 81 153Z' stroke='white' stroke-opacity='0.15' stroke-width='18'/%3E%3C/svg%3E");
}

.circle-fg {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='162' height='162' viewBox='0 0 162 162' fill='none'%3E%3Cpath d='M153 81C153 41.2355 120.765 9 81 9C41.2355 9 9 41.2355 9 81C9 120.765 41.2355 153 81 153C120.765 153 153 120.765 153 81Z' stroke='%238CC63F' stroke-width='18' stroke-linecap='round' stroke-dasharray='353 453'/%3E%3C/svg%3E");
  transform: rotate(-144deg);
}

/* 中央の数値 */
.circle-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circle-num {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.circle-unit {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.circle-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.circle-sub {
  color: #8CC63F;
  font-size: 12px;
}

/* --- 右側：テキスト・指標エリア --- */
.worklife-right {
  display: flex;
  flex-direction: column;
}

.worklife-heading {
  margin-bottom: 16px;
}

.worklife-en {
  display: block;
  font-family: "Great Vibes", cursive;
  font-size: 28px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  /* 少し透かした白 */
  margin-bottom: 4px;
}

.worklife-ja {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #FFFFFF;
}

.worklife-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 32px 0;
}

/* 3つの枠 */
.worklife-stats {
  display: flex;
  gap: 16px;
}

.w-stat-box {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.w-stat-val {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.w-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}


/* =========================================================
   スマートフォン用レイアウト追加
   ※既存の @media screen and (max-width: 768px) { ... } の中に追加してください
========================================================= */
@media screen and (max-width: 768px) {

  .info-worklife {
    flex-direction: column;
    padding: 32px 24px;
    gap: 40px;
  }

  .worklife-stats {
    flex-direction: column;
    /* 3つの枠を縦並びに */
    gap: 12px;
  }
}

/* =========================================================
   キャリアパス ブロック (Phase04 分岐対応版)
========================================================= */

.career-path-block {
  padding: 80px 0;
  font-family: 'Noto Sans JP', sans-serif;
}

/* --- タイトル部分 --- */
.career-path-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
  text-align: center;
}

.career-path-heading__en {
  color: #005C17;
  font-family: 'Libertinus Serif Display', serif !important;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
}

.career-path-heading__ja {
  color: #222222;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

/* --- タイムライン全体構造 --- */
.career-timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* PC用：上段(Phase01〜03)を繋ぐグラデーションライン */
.career-timeline__upper {
  position: relative;
  margin-bottom: 50px;
}

.career-timeline__line-upper {
  position: absolute;
  top: 39px;
  /* 円の中心 */
  left: 16.66%;
  /* Phase01の中心付近 */
  right: 16.66%;
  /* Phase03の中心付近 */
  height: 2px;
  background: linear-gradient(90deg, #00A8CC 0%, #37B0B5 50%, #6ABD81 100%);
  z-index: 1;
}

.career-timeline__list {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 2;
}

/* PC用：Phase03からPhase04への分岐ライン矢印 */
.career-timeline__branch-arrow {
  position: absolute;
  top: 190px;
  right: 16.66%;
  /* Phase03の中心下から伸びるイメージ */
  width: 2px;
  height: 40px;
  background-color: #6ABD81;
}
.career-timeline__branch-arrow::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #8CC63F;
  border-bottom: 2px solid #8CC63F;
  transform: rotate(45deg);
}
.u-pc-only {
  display: block;
}

/* 下段(Phase04)の2つ並び */
.career-timeline__lower {
  position: relative;
  z-index: 2;
  margin-top: -10px;
  /* PC時の上段との距離調整 */
}

.career-timeline__list-split {
  display: flex;
  gap: 24px;
  justify-content: center;
  /* Phase04を右寄せ（02, 03の下）に配置 */
}

/* 分岐後のPhase04は幅を限定して2つ並べる */
.phase-04 {
  width: calc(33.333% - 16px);
  flex: 0 0 auto !important;
}


/* --- 各Phaseのアイテム共通 --- */
.career-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 円形ラベル */
.career-item__circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* 各Phaseの色設定 */
.phase-01 .career-item__circle {
  background: #00A8CC;
}
.phase-02 .career-item__circle {
  background: #37B0B5;
}
.phase-03 .career-item__circle {
  background: #6ABD81;
}
.phase-04 .career-item__circle {
  background: #8CC63F;
}

/* コンテンツエリア */
.career-item__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}

.career-item__period {
  color: #9CA3AF;
  font-size: 13px;
  margin-bottom: 4px;
}

.career-item__title {
  color: #1E2939;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px 0;
  text-align: center;
  line-height: 1.4;
}

/* テキストボックス */
.career-item__box {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #DCF0F7;
  background: #F4FBFD;
  padding: 24px 20px;
  color: #6A7282;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  flex-grow: 1;
}

.career-item__box p {
  margin: 0;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .career-path-block {
    padding: 60px 0;
  }
  .career-path-heading__en {
    font-size: 48px;
  }
  .u-pc-only {
    display: none !important;
  }

  /* 上段（01〜03）と下段（04×2）をまとめて縦一列に */
  .career-timeline__upper {
    margin-bottom: 40px;
  }
  .career-timeline__list,
  .career-timeline__list-split {
    flex-direction: column;
    gap: 40px;
  }

  /* SP時の縦ライン描画用（Phase01〜04すべてを貫くラインを疑似要素で代用） */
  .career-timeline__line-upper {
    display: none;
  }

  .career-timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 80px;
    /* 最後の円の手前で止める目安 */
    left: 39px;
    /* SP時の円の中心 */
    width: 2px;
    background: linear-gradient(180deg, #00A8CC 0%, #37B0B5 33%, #6ABD81 66%, #8CC63F 100%);
    z-index: 1;
  }

  /* SP時は横幅の制限を解除 */
  .phase-04 {
    width: 100%;
  }

  /* アイテムのレイアウト変更（左に円、右にテキスト） */
  .career-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    position: relative;
    z-index: 2;
  }

  .career-item__circle {
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 20px;
  }

  .career-item__content {
    align-items: flex-start;
    padding-top: 8px;
  }

  .career-item__title {
    text-align: left;
    margin-bottom: 12px;
  }
}
/* --- Phase04 統合ボックスのスタイル調整 --- */
.career-timeline__lower-box {
  width: calc(66.666% - 8px);
  margin: 24px auto 0 auto;
}

/* スマホ表示時の横幅・余白リセット */
@media screen and (max-width: 768px) {
  .career-timeline__lower-box {
    width: 100%;
    margin: 20px 0 0 0;
  }
}


/* =========================================================
   評価・給与制度 ブロック
========================================================= */

.evaluation-system-block {
  padding: 40px 0 0;
}

.evaluation-inner {
  display: flex;
  align-items: center;
  /* 左右の中央揃え */
  justify-content: space-between;
  gap: 60px;
}

/* --- 左側：テキストエリア --- */
.evaluation-text-area {
  flex: 1;
  max-width: 50%;
}

.evaluation-heading {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 40px 0;
  line-height: 1.4;
}

.evaluation-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* 各項目間の余白 */
}

/* 個別の項目と水色のライン */
.evaluation-item {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-left: 4px solid #00A8CC;
  /* 水色のアクセントライン */
}

.evaluation-item__title {
  color: #1E2939;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.evaluation-item__desc {
  color: #6A7282;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

/* --- 右側：画像エリア --- */
.evaluation-image-area {
  flex: 1;
  max-width: 45%;
  /* 画像が大きくなりすぎないように調整 */
}

.evaluation-image-area img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  /* 画像の角丸 */
  vertical-align: bottom;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  /* 少し影をつけて馴染ませる */
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .evaluation-system-block {
    padding: 40px 0;
  }

  .evaluation-inner {
    flex-direction: column;
    /* 縦並びに変更 */
    gap: 40px;
  }

  .evaluation-text-area,
  .evaluation-image-area {
    max-width: 100%;
    /* 幅を100%にする */
  }

  .evaluation-heading {
    margin-bottom: 24px;
  }
}

/* =========================================================
   募集ポジション ブロック
========================================================= */

.positions-block {
  padding: 80px 0;
}

/* --- タイトル部分 --- */
.positions-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.positions-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.positions-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- アコーディオン一覧 --- */
.positions-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.position-item {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  /* 角丸対策 */
}

/* クリックできるサマリー領域 */
.position-summary {
  display: block;
  /* CMS対策：デフォルトの三角を消しやすくする */
  padding: 32px;
  position: relative;
  cursor: pointer;
  list-style: none;
  /* デフォルトの三角形を消す */
  list-style-type: none;
}

/* Safari・一部ブラウザ向けのデフォルト三角形消去 */
.position-summary::-webkit-details-marker {
  display: none;
}

/* 右上の▽アイコン（CSSで描画） */
.position-summary::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 32px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #9CA3AF;
  border-bottom: 2px solid #9CA3AF;
  transform: rotate(45deg);
  /* 下向きの矢印 */
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* 開いた時は上向き（△）に回転 */
details[open] .position-summary::after {
  transform: rotate(-135deg);
  top: 44px;
  /* 回転によるズレの微調整 */
}

/* --- サマリー内レイアウト --- */
.position-summary__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.position-badge {
  background: #00A8CC;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  display: inline-block;
  line-height: 1.4;
}

.position-dept {
  color: #9CA3AF;
  font-size: 16px;
}

.position-title {
  display: block;
  /* spanをブロック要素として扱う */
  color: #1E2939;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.4;
  padding-right: 32px;
  /* 右上の矢印に被らないように余白 */
}

.position-salary {
  display: block;
  /* spanをブロック要素として扱う */
  color: #6A7282;
  font-size: 16px;
  margin: 0 0 16px 0;
}

.position-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.position-tag {
  color: #00A8CC;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #D1F0F7;
  /* 薄い水色の枠線 */
  padding: 4px 12px;
  border-radius: 20px;
  line-height: 1.4;
}

/* --- アコーディオン開いた後の詳細部分 --- */
.position-content {
  padding: 0 32px 32px;
}

/* 上部の境界線 */
.position-content::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #E5E7EB;
  margin-bottom: 24px;
}

.position-desc {
  color: #6A7282;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 24px 0;
}

/* 詳細条件リスト（グリッドで2列） */
.position-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  margin-bottom: 32px;
}

.position-details dl {
  display: flex;
  margin: 0;
}

.position-details dt {
  color: #1E2939;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  /* 折り返さないように固定 */
}

.position-details dd {
  color: #6A7282;
  font-size: 16px;
  margin: 0;
}

/* 応募ボタン（ご指定の色：#8CC63F） */
.position-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #8CC63F;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 30px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.position-btn:hover {
  opacity: 0.8;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .positions-block {
    padding: 40px 0;
  }

  .positions-heading {
    margin-bottom: 32px;
  }

  .position-summary {
    padding: 24px;
  }

  /* アイコンの位置微調整 */
  .position-summary::after {
    top: 32px;
    right: 24px;
  }
  details[open] .position-summary::after {
    top: 36px;
  }

  .position-content {
    padding: 0 24px 24px;
  }

  .position-details {
    grid-template-columns: 1fr;
    /* スマホでは条件リストを1列に */
    gap: 16px;
  }

  .position-btn {
    width: 100%;
    /* スマホではボタンを幅いっぱいに */
  }
}

/* =========================================================
   選考の流れ ブロック
========================================================= */

/* ブロック全体（背景を横幅いっぱいにする） */
.selection-flow-block {
  background: #F4FBFD;
  padding: 80px 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* インナー（はみ出しリセット） */
.selection-flow-block .wrap {
  width: 100%;
  max-width: calc(1120px + .75rem * 2);
  margin: 0 auto;
  padding: 0 .75rem;
}

/* --- タイトル --- */
.selection-flow-heading {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 60px 0;
}

/* --- フロー一覧 --- */
.selection-flow-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

/* 各ステップのアイテム */
.selection-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  /* 幅を均等にする */
  text-align: center;
  padding: 0 10px;
}

/* 丸数字 */
.flow-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #00A8CC;
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1;
}

/* テキスト */
.flow-text {
  color: #1E2939;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 24px;
  /* 矢印との間隔 */
  line-height: 1.4;
}

/* 矢印（薄いグレー） */
.flow-arrow {
  color: #D1D5DB;
  font-size: 16px;
  line-height: 1;
}

/* --- 注釈テキスト --- */
.selection-flow-note {
  color: #9CA3AF;
  font-size: 14px;
  margin: 0;
}

/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .selection-flow-block {
    padding: 40px 0;
  }

  .selection-flow-heading {
    margin-bottom: 40px;
    text-align: center;
    /* スマホでは中央寄せに */
  }

  .selection-flow-list {
    flex-direction: column;
    /* 縦並びに変更 */
    align-items: center;
    /* ★これを追加して中央揃えにします */
    gap: 32px;
    margin-bottom: 40px;
  }

  .flow-text {
    margin-bottom: 16px;
  }

  /* スマホ時は矢印を90度回転させて下向きにする */
  .flow-arrow {
    transform: rotate(90deg);
  }

  .selection-flow-note {
    text-align: center;
  }
}

/* =========================================================
   エントリーフォーム ブロック
========================================================= */

.apply-form-block {
  padding: 80px 0 0;
}

/* フォームの横幅が広がりすぎないように制限して中央配置 */
.apply-form-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* --- タイトル部分 --- */
.apply-form-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}

.apply-form-heading__en {
  color: #005C17;
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.apply-form-heading__ja {
  color: #1E2939;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.333;
  margin: 0;
}

/* --- フォームコンテナ --- */
.apply-form-container {
  width: 100%;
}


/* =========================================================
   スマートフォン用レイアウト調整（768px以下で適用）
========================================================= */
@media screen and (max-width: 768px) {
  .apply-form-block {
    padding: 40px 0;
  }

  .apply-form-heading {
    margin-bottom: 32px;
  }
}

/* ==========================================
   採用情報ボタン ドロップダウンメニュー
   ========================================== */
.nav-dropdown-item {
  position: relative !important;
}

/* サブメニュー初期状態（非表示） */
.nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 220px !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
  z-index: 1000 !important;
}

/* 開閉時の表示（is-openクラス付与時） */
.nav-dropdown-item.is-open .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* メニュー項目 */
.nav-dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

.nav-dropdown-menu li::before {
  content: none !important;
  display: none !important;
}

.nav-dropdown-menu li a {
  display: block !important;
  padding: 10px 20px !important;
  color: #333333 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  white-space: nowrap !important;
}

.nav-dropdown-menu li a:hover {
  background-color: #F4FBFD !important;
  color: #005C17 !important;
}

/* 開閉時のボタン矢印アニメーション */
.nav-dropdown-item.is-open .ico-arrow {
  transform: rotate(90deg) !important;
  transition: transform 0.3s ease !important;
}

.lib-sitemap__list a {
  position: relative;
  padding-left: 1.5em;
}