/**
 * ページ個別スタイル
 *
 * theme.css → components.css の後に読み込まれる。
 * そのページでしか使わない細かい調整はこのファイルへ書く。
 *
 * 書き方の約束
 *   - 必ず body のページ判定クラスで囲う（例: .single-usecase .entry-content）。
 *     囲わずに書けるものは共通部品なので components.css へ置く。
 *   - 色・角丸・横幅は theme.css の :root トークン（--navy / --haudi-green /
 *     --paper / --radius / --shell）を使う。個別に色を足さない。
 *   - レスポンシブは対象のルールの直後に @media を置く。離れた場所に書くと
 *     後勝ちで意図せず上書きされる。
 *
 *  1. トップページ                .home
 *  2. 固定ページ                  .page
 *  3. 投稿一覧・アーカイブ        .blog / .archive
 *  4. カテゴリー・タグ・タクソノミー  .category / .tag / .tax-*
 *  5. 投稿詳細                    .single-post
 *  6. 導入事例（usecase）             .post-type-archive-usecase / .single-usecase
 *  7. お役立ち情報（haudi-journal） .post-type-archive-haudi-journal / .single-haudi-journal
 *  8. インタビュー（interview）    .post-type-archive-interview / .single-interview
 *  9. 募集要項（requirements）     .post-type-archive-requirements / .single-requirements
 * 10. 検索結果                    .search
 * 11. 404                        .error404
 */


/* ---------------------------------------------------------------
   0. 共通

   すべてのページ
   --------------------------------------------------------------- */
/*-- 共通 --*/


/* 絞り込みタブのリンク先（事例・お役立ち情報・ニュースのアーカイブ共通）。
   ヘッダーが position: fixed のため、その高さぶん手前で止めて見出しが隠れないようにする。 */
#archive-list {
  scroll-margin-top: 112px;
}

@media (max-width: 767.98px) {
  #archive-list {
    scroll-margin-top: 88px;
  }
}

.smb-section__inner>.c-container {
  padding-right: 16px;
  padding-left: 16px;
}



/* ---------------------------------------------------------------
   1. トップページ  .home

   front-page.php。固定ページをホームに指定した場合は .page も付く。
   個別ページを狙う場合は .page-id-123 が使える。
   --------------------------------------------------------------- */
@keyframes heroUp {
  0% {
    opacity: 0;
    /* 強めのノイズ（ベース周波数を高く、スケールを大きく） */
    filter: url(#noise) contrast(200%) brightness(150%) blur(2px);
    transform: scale(0.95);
  }

  50% {
    opacity: 0.5;
    /* ざらざら感を残しつつ、少し文字の形が見えてくる */
    filter: url(#noise) contrast(150%) brightness(120%) blur(1px);
  }

  100% {
    opacity: 1;
    /* 最終的にはノイズを完全に消してくっきり表示 */
    filter: none;
    transform: scale(1);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.front-page-content .entry-content h2 {
  border-left: none !important;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  margin-bottom: 0;
  padding: 0;
  line-height: 1;
}

body.home .front-page-content p {
  color: #8a9096;
  margin-top: 8px;
}

.top-hero-header {
  position: relative;
  min-height: 100vh;
}

.top-hero-header .smb-hero-header__body {
  max-width: 82vw;
}


/*-- ミッション --*/

#mission-area .gap-size {
  gap: 6em;
}

@media screen and (max-width: 781px) {
  #mission-area .gap-size {
    gap: 4em;
  }
}

#mission-area .radius-16 img {
  border-radius: 16px;
}




/*-- ビジョン --*/

#vision-area .gap-size {
  gap: 6em;
}

@media screen and (max-width: 781px) {
  #vision-area .gap-size {
    gap: 4em;
  }

  #vision-area .column-reverse {
    flex-direction: column-reverse;
  }
}


#vision-area .radius-16 img {
  border-radius: 16px;
}


/*-- 導入事例 --*/

#usecase-area {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

#usecase-area .smb-tabs.is-style-simple.tab-area[data-orientation="horizontal"]>.smb-tabs__tabs:where(:not(:has(.smb-tabs__tab.has-background))) .smb-tabs__tab-wrapper:not(:first-child) {
  margin-left: 5px;
}

#usecase-area .tab-area button.smb-tabs__tab {
  border: 1px solid rgba(20, 24, 30, 0.16);
  background: var(--white);
  color: var(--haudi-green);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
}

#usecase-area .tab-area button.smb-tabs__tab[aria-selected="false"] {
  opacity: 1;
}

#usecase-area .tab-area button.smb-tabs__tab[aria-selected="true"] {
  border: 1px solid transparent;
  background: var(--haudi-green);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
}


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

  #usecase-area .tab-area button.smb-tabs__tab,
  #usecase-area .tab-area button.smb-tabs__tab[aria-selected="true"] {
    padding: 4px 8px;
  }
}

/* 事例カードの見た目。トップの #usecase-area（タブ内）と、
   製品ページの「最新事例」で共有する。製品ページ側はクエリーループブロックに
   usecase-cards クラスを付けて呼び出す（例: /business/products/familia-energy/）。 */


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

  .entry-content #usecase-area .tab-area .wp-block-query ul,
  .entry-content .usecase-cards ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .entry-content #usecase-area .tab-area .wp-block-query ul,
  .entry-content .usecase-cards ul {
    grid-template-columns: 1fr;
  }
}

.entry-content #usecase-area .tab-area .wp-block-query ul li::before,
.entry-content .usecase-cards ul li::before {
  display: none;
}

#usecase-area .tab-area .wp-block-query ul li,
.usecase-cards ul li {
  border: 1px solid rgba(20, 24, 30, 0.09);
  border-radius: 10px;
  overflow: hidden;
  background: rgb(255, 255, 255);
  color: rgb(21, 24, 30);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s;
  position: relative;
  padding-left: 0;
  padding-bottom: 32px;
}

#usecase-area .tab-area .wp-block-query ul li::after,
.usecase-cards ul li::after {
  position: absolute;
  content: "";
  bottom: 20px;
  right: 12px;
  width: 30px;
  height: 16px;
  background: url("../images/arrow-right.svg") no-repeat center;
  background-size: contain;
  transition: all 0.3s ease;
}

#usecase-area .tab-area .wp-block-query ul li:hover::after,
.usecase-cards ul li:hover::after {
  transform: translateX(5px);
}

#usecase-area .tab-area .wp-block-query ul li .taxonomy-usecase-category a,
.usecase-cards ul li .taxonomy-usecase-category a {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px;
  background: #50A4A1;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  border-radius: 0 8px 0 4px;
  text-decoration: none;
}

#usecase-area .tab-area .wp-block-query ul li.wp-block-post .wp-block-post-title a::after,
.usecase-cards ul li.wp-block-post .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

#usecase-area .tab-area .wp-block-query ul li h3,
.usecase-cards ul li h3 {
  border-bottom: none;
  padding: 16px;
  font-size: 18px;
  margin: 0;
}

#usecase-area .tab-area .wp-block-query ul li h3 a,
.usecase-cards ul li h3 a {
  color: var(--ink);
  text-decoration: none;
}

#usecase-area .tab-area .wp-block-query ul li p,
.usecase-cards ul li p {
  padding: 16px;
  padding-top: 0;
  font-size: 15px;
}

#usecase-area .tab-area .wp-block-query ul li .wp-block-post-featured-image,
.usecase-cards ul li .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  aspect-ratio: 16/9;
  margin-bottom: 0;
}

#usecase-area .tab-area .wp-block-query ul li .wp-block-post-featured-image img,
.usecase-cards ul li .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease, box-shadow .2s ease;
}

#usecase-area .tab-area .wp-block-query ul li:hover .wp-block-post-featured-image img,
.usecase-cards ul li:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}


/*-- お役立ち情報 --*/
.entry-content #haudi-journal-area .wp-block-query ul {
  margin-top: 40px;
}

.entry-content #haudi-journal-area .wp-block-query ul li::before {
  display: none;
}

.entry-content #haudi-journal-area .wp-block-query ul li {
  margin-left: 0;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 8px;
  border-top: 1px solid rgba(20, 24, 30, 0.1);
  transition: background 0.25s, padding 0.25s;
  position: relative;
}

@media screen and (max-width: 600px) {
  .entry-content #haudi-journal-area .wp-block-query ul li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 4px;
  }
}

.entry-content #haudi-journal-area .wp-block-query ul li:last-child {
  border-bottom: 1px solid rgba(20, 24, 30, 0.1);
}

.entry-content #haudi-journal-area .wp-block-query ul li:hover {
  padding-left: 20px;
  background: rgba(80, 166, 159, 0.05);
}

.entry-content #haudi-journal-area .wp-block-query ul li h3 {
  margin: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  border-bottom: none;
}

.entry-content #haudi-journal-area .wp-block-query ul li h3 a {
  color: var(--ink);
  text-decoration: none;
}

#haudi-journal-area .wp-block-query ul li h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

#haudi-journal-area .wp-block-query ul li time {
  font-size: 13px;
  color: rgb(154, 161, 173);
}




/*-- 支援企業・パートナー企業スライド --*/

#partners-area {
  padding-bottom: 100px;
}

#partners-area .wp-block-splide-carousel {
  margin-top: 40px;
}

#partners-area .wp-block-splide-carousel .splide__slide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  min-width: 194px;
  padding: 0px 30px;
  border: 1px solid rgba(20, 24, 30, 0.09);
  border-radius: 12px;
  background: rgb(255, 255, 255);
}

#partners-area .wp-block-cloudcatch-splide-carousel {
  mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent);
}


/*-- ニュース --*/

#news-area {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

#news-area .smb-tabs.is-style-simple.tab-area[data-orientation="horizontal"]>.smb-tabs__tabs:where(:not(:has(.smb-tabs__tab.has-background))) .smb-tabs__tab-wrapper:not(:first-child) {
  margin-left: 5px;
}

#news-area .tab-area button.smb-tabs__tab {
  border: 1px solid rgba(20, 24, 30, 0.16);
  background: var(--white);
  color: var(--haudi-green);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
}

#news-area .tab-area button.smb-tabs__tab[aria-selected="false"] {
  opacity: 1;
}

#news-area .tab-area button.smb-tabs__tab[aria-selected="true"] {
  border: 1px solid transparent;
  background: var(--haudi-green);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
}

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

  #news-area .tab-area button.smb-tabs__tab,
  #news-area .tab-area button.smb-tabs__tab[aria-selected="true"] {
    padding: 4px 8px;
  }
}


.entry-content #news-area .tab-area .wp-block-query ul li::before {
  display: none;
}

.entry-content #news-area .tab-area .wp-block-query ul li {
  display: grid;
  grid-template-columns: 120px 130px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px 8px;
  border-top: 1px solid rgba(20, 24, 30, 0.1);
  color: rgb(21, 24, 30);
  transition: background 0.25s, padding 0.25s;
}

@media screen and (max-width: 600px) {
  .entry-content #news-area .tab-area .wp-block-query ul li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 4px;
  }
}

.entry-content #news-area .tab-area .wp-block-query ul li:last-child {
  border-bottom: 1px solid rgba(20, 24, 30, 0.1);
}

.entry-content #news-area .tab-area .wp-block-query ul li:hover {
  background: rgba(80, 166, 159, 0.03);
  padding-left: 20px;
}

.entry-content #news-area .wp-block-query ul li h3 {
  margin: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  border-bottom: none;
}

.entry-content #news-area .wp-block-query ul li h3 a {
  color: var(--ink);
  text-decoration: none;
}

#news-area .wp-block-query ul li h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

#news-area .wp-block-query ul li time {
  font-size: 13px;
  color: rgb(154, 161, 173);
}

#news-area .wp-block-query ul li .taxonomy-news-category.wp-block-post-terms {
  justify-self: start;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(80, 166, 159, 0.1);
  color: var(--haudi-green);
}

#news-area .wp-block-query ul li .taxonomy-news-category.wp-block-post-terms a {
  text-decoration: none;
}


/*-- 採用CTA --*/
#recruit-area {
  padding-top: 120px;
  padding-bottom: 120px;
}




/* ---------------------------------------------------------------
   2. 固定ページ  .page

   page.php。ページごとの調整は .page-id-123 で絞り込む。
   --------------------------------------------------------------- */

/*-- タブメニュー --*/
.tab-menu__list {
  display: flex;
  border-bottom: solid 2px #CBCBCB;
  list-style: none !important;
}

.entry-content .tab-menu__list li {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  padding-left: 0;
}

@media (max-width: 767.98px) {
  .entry-content .tab-menu__list li {
    font-size: 14px;
    text-align: center;
    flex-grow: 1;
  }
}

.entry-content .tab-menu__list li:before {
  display: none;
}

.entry-content .tab-menu__list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  position: relative;
  transition: color 0.3s;
  height: 100%;
  color: var(--ink);
  text-decoration: none !important;
}

.entry-content .tab-menu__list li a:hover {
  color: #50A4A1;
}

.entry-content .tab-menu__list li.--active a {
  color: #50A4A1;
}

@media (max-width: 767.98px) {
  .entry-content .tab-menu__list li.--active a {
    padding: 10px;
  }

  .entry-content .tab-menu__list li a {
    padding: 10px 15px;
  }
}

.entry-content .tab-menu__list li.--active a::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-style: solid;
  border-color: #50A4A1 transparent transparent transparent;
  border-width: 14px 8px;
}

.entry-content .tab-menu__list li.--active a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #50A4A1;
}

/* ---------------------------------------------------------------
   2-1. 会社案内  .page
  ---------------------------------------------------------------- */

/*-- 会社概要テーブル --*/




/*-- 地図表示 --*/
.company-map {
  position: relative;
  padding-top: 400px;
  margin-bottom: 2rem;
}

.company-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*-- ミッション・ビジョン・バリュー  .page-id-24 --*/

/* Mission / Vision / Value はそれぞれセクションブロックで囲んである。
   会社の言葉なので本文の見出しと同じ扱いにはせず、冒頭の宣言文の背後に
   会社紹介資料の波線を敷く。波はセクション自身の ::before で出しているので、
   飾りのためだけの囲みブロックを増やさずに済む。 */
.entry-content .mvv-section {
  position: relative;
  margin-top: 4rem;
}

.entry-content .mvv-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* ラベルと宣言文が収まる高さ。宣言文が2行になる幅でも足りるよう余裕を見る。 */
  height: clamp(190px, 22vw, 240px);
  background: url(../images/mvv-wave.svg) center / 100% 100% no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* 宣言文を波の帯の中に収めるための余白。 */
.entry-content .mvv-section .smb-section__body {
  padding-top: 48px;
}

.entry-content .mvv-statement__label {
  /* h3 の既定（24px・上下マージン）を引き継がせない。 */
  margin: 0 0 0.75em;
  color: var(--haudi-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.28em;
  /* 最後の1文字の後ろにも字間が入るぶん、中央がその半分だけ左へずれる。 */
  text-indent: 0.14em;
  text-align: center;
}

.entry-content .mvv-statement__label.value {
  font-size: clamp(22px, 3.4vw, 38px);
}

.entry-content .mvv-statement__text {
  margin: 0 0 2.5rem;
  color: var(--haudi-green);
  font-size: clamp(22px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* 現場写真は上段5枚・下段4枚。カラムブロック2つで組んでいる。 */
.entry-content .mvv-fields-row {
  gap: 16px;
  margin-top: 2.5rem;
}

/* 下段4枚。上段と1枚あたりの大きさをそろえるための幅で、
   (W2 - 3g) / 4 = (W - 4g) / 5 を解くと W2 = 0.8W - 0.2g（g は 16px）。
   結果として下段が半コマ分内側に入り、互い違いに並ぶ。 */
.entry-content .mvv-fields-row--offset {
  width: calc(80% - 3.2px);
  margin-top: 16px;
  margin-inline: auto;
}

.entry-content .mvv-fields-row figure {
  margin: 0;
}

/* 写真は元画像が円形に切り抜かれているので、角丸は付けない。 */
.entry-content .mvv-fields-row img {
  width: 100%;
  height: auto;
}

.entry-content .mvv-fields-row p {
  margin: 0.6em 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* 「AIの前に、データ。」の一行はボックス内の主役なので大きく。 */
.entry-content .mvv-note__lead {
  margin: 0 0 0.6em;
  color: var(--haudi-green);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 700;
}

/* 提供価値の3枚はボックスブロックを縦に並べたもの。
   番号は本文に持たせず、見出しの ::before で出す。 */
.entry-content .mvv-values {
  counter-reset: mvv-value;
}

.entry-content .mvv-value {
  margin-top: 24px;
}

.entry-content .mvv-value h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.entry-content .mvv-value h4::before {
  counter-increment: mvv-value;
  content: counter(mvv-value);
  /* 見出しが折り返しても丸が潰れないよう、伸縮させない。 */
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-image: linear-gradient(90deg, #53C1B7 0%, #4C9E97 100%);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.entry-content .mvv-value__lead {
  margin: 0.2em 0 1em;
  color: var(--haudi-green);
  font-size: 15px;
  font-weight: 700;
}

.entry-content .mvv-closing {
  margin-top: 2.5rem;
  font-size: clamp(16px, 2vw, 19px);
}

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

  .entry-content .mvv-section {
    margin-top: 3rem;
  }

  .entry-content .mvv-section .smb-section__body {
    padding-top: 32px;
  }

  /* 5枚並べると1枚が小さすぎるので3枚ずつで折り返し、余りは中央に寄せる。
     カラムブロックは is-not-stacked-on-mobile 側が nowrap を !important で
     当ててくるため、こちらも !important で上書きする。 */
  .entry-content .mvv-fields-row {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 12px;
  }

  .entry-content .mvv-fields-row .wp-block-column {
    flex-basis: calc(33.333% - 8px) !important;
    flex-grow: 0;
  }

  .entry-content .mvv-fields-row--offset {
    width: 100%;
    margin-top: 12px;
  }

  .entry-content .mvv-fields-row p {
    font-size: 13px;
  }

  .entry-content .mvv-value h4::before {
    width: 32px;
    height: 32px;
    font-size: 15px;
    line-height: 32px;
  }
}




/* ---------------------------------------------------------------
   2-2. 事業紹介  .page
  ---------------------------------------------------------------- */

.genba-outer {
  position: relative;
}

.genba-outer::after {
  content: "";
  border-left: .55rem solid var(--haudi-green);
  border-top: .35rem solid transparent;
  border-bottom: .35rem solid transparent;
  position: absolute;
  right: -42px;
  top: calc(52% - 0.225rem);
}

.genba-outer::before {
  content: "";
  border-top: 2px dashed var(--haudi-green);
  width: 54px;
  display: block;
  top: 52%;
  position: absolute;
  right: -40px;
  z-index: 10;
}

@media screen and (max-width: 1023px) {
  .genba-outer::before {
    border-top: unset;
    border-left: 2px dashed var(--haudi-green);
    width: unset;
    height: 43px;
    right: 50%;
    top: unset;
    bottom: -38px;
  }

  .genba-outer::after {
    content: unset;
  }

}

.genba-outer .with-familia {
  position: relative;
}

.genba-outer .with-familia:after {
  position: absolute;
  content: "";
  background: url(../images/bussiness/icon-familia.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 64px;
  height: 13px;
  display: block;
  top: 0;
  left: calc(50% - 32px);
}

.cloude-interface-outer {
  position: relative;
}

.cloude-interface-outer::after {
  content: "";
  border-left: .55rem solid var(--haudi-green);
  border-top: .35rem solid transparent;
  border-bottom: .35rem solid transparent;
  position: absolute;
  right: -42px;
  top: 369px;
}

.cloude-interface-outer::before {
  content: "";
  border-top: 2px dashed var(--haudi-green);
  width: 54px;
  display: block;
  top: 373px;
  position: absolute;
  right: -30px;
  z-index: 10;
}

@media screen and (max-width: 1023px) {
  .cloude-interface-outer::after {
    content: unset;
  }

  .cloude-interface-outer::before {
    content: "";
    display: block;
    border-left: 2px solid var(--haudi-green);
    height: 48px;
    right: 50%;
    bottom: -44px;
    position: absolute;
    top: unset;
    border-top: unset;
    width: unset;
  }

}

.generation-ai-outer {
  position: relative;
}

.generation-ai-outer::before {
  content: "";
  display: block;
  border-left: 2px solid var(--haudi-green);
  height: 48px;
  right: 50%;
  top: -44px;
  position: absolute;
}

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

  .generation-ai-outer::before {
    content: "";
    display: block;
    border-left: 2px dashed var(--haudi-green);
    height: 43px;
    right: 50%;
    top: unset;
    bottom: -38px;
    position: absolute;
  }

}



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

  .familia-platform-wrap,
  .staff-area-outer {
    flex-direction: column;
  }

}


.collection-outer h3,
.analysis-outer h3,
.optimization-outer h3 {
  padding-bottom: 0;
  border-bottom: 0;
  position: relative;
  padding: 0 1rem;
  margin: 24px 0 0;
}

@media (max-width: 767.98px) {

  .collection-outer h3,
  .analysis-outer h3,
  .optimization-outer {
    font-size: 22px !important;
  }
}

.collection-outer h3:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f1c0";
  position: absolute;
  top: -28px;
  left: calc(50% - 13px);
  color: var(--white);
}

.analysis-outer h3:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f044";
  position: absolute;
  top: -28px;
  left: calc(50% - 13px);
  color: var(--white);
}

.optimization-outer h3:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f085";
  position: absolute;
  top: -28px;
  left: calc(50% - 13px);
  color: var(--white);
}

.database-outer h4 {
  position: relative;
  padding: 0.4em 2.4em;
  border: 2px solid var(--white);
  border-radius: 4px;
  font-size: 16px;
}

.database-outer h4:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f2d3";
  position: absolute;
  top: calc(50% - 13px);
  left: 1em;
  color: var(--white);
}

.database-outer .notice-box {
  padding: 16px;
}

.database-outer .notice-box p {
  margin: 0;
}


/* ---------------------------------------------------------------
   2-3. ソリューション事業  .page
  ---------------------------------------------------------------- */
/*-- 共通 --*/
/*body.solutions h3 {
  font-weight: 700;
  font-size: 24px;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--haudi-green-dark);
  margin-bottom: 0.75em;
}*/

/*-- ソリューション事業 --*/
#solutions-solutions h2 {
  font-size: 40px;
  font-weight: 700;
  padding-bottom: 0.5em;
  padding-left: 0;
  position: relative;
  margin-bottom: 2.4rem;
  border-left: 0;
}

#solutions-solutions h2::before {
  content: "";
  width: 56px;
  height: 4px;
  background: var(--haudi-green);
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (max-width: 767.98px) {
  #solutions-solutions h2 {
    font-size: 28px;
  }
}


#solutions-solutions .wall-outer {
  counter-reset: number 0;
}

#solutions-solutions .wall-outer .wall-box h4 {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 0;
}

#solutions-solutions .wall-outer .wall-box h4:before {
  counter-increment: number 1;
  /* number カウンタの増加数をセット */
  content: counter(number) " ";
  /* 表示形式を指定 */
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: #50A4A1;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px
}

#solutions-solutions .wall-outer .wall-box .solution-assignment-green {
  font-weight: bold;
  color: var(--haudi-green);
  padding-left: 2em;
  position: relative;
}

#solutions-solutions .wall-outer .wall-box .solution-assignment-green::before {
  content: "→";
  position: absolute;
  color: var(--haudi-green);
  top: 0;
  left: 0;
}

/*-- イノベーションパートナー --*/
#innovation-partner .good-box h6 {
  margin-top: 0;
  margin-bottom: 8px;
}

#innovation-partner .good-box ul,
#innovation-partner .good-box p {
  margin-top: 0;
}

/*-- ハウディの技術範囲 --*/
@media (max-width: 781px) {
  #technical-scope .icon-arrow img {
    transform: rotate(90deg);
  }
}

/*-- ハードウェア開発について --*/
#about-hardware-development h5 {
  font-weight: 700;
  font-size: 14px;
  color: #FFFFFF;
  background-color: var(--haudi-green);
  text-align: center;
  padding: 0.25em 0.75em;
  border-radius: 4px;
  margin-bottom: 1.25em;
}

/*-- ソフトウェア・インフラ開発について --*/
#software-infrastructure-development h5 {
  font-weight: 700;
  font-size: 14px;
  color: #FFFFFF;
  background-color: var(--haudi-green);
  text-align: center;
  padding: 0.25em 0.75em;
  border-radius: 4px;
  margin-bottom: 1.25em;
}


/*-- ソリューション事業 --*/

/*-- 共通 --*/
body.solutions h2 {
  padding: 0;
  border-left: none;
  margin-top: 1rem;
}


#solutions h2 {
  font-size: 40px;
  font-weight: 700;
  padding-bottom: 0.5em;
  padding-left: 0;
  position: relative;
  margin-bottom: 2.4rem;
  border-left: 0;
}

@media (max-width: 781px) {
  #solutions h2 {
    font-size: 32px;
  }
}

.sol-flow-grid {
  gap: 5.4em;
}

.sol-flow-grid div.wp-block-image {
  position: relative;
}

.sol-flow-grid div.wp-block-image figcaption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 781px) {
  .sol-flow-grid {
    gap: 2em;
  }
}

.pas-range-col {
  overflow: hidden;
}

.pas-text-box {
  height: 100%;
}

.sol-stage-card {
  height: 100%;
}

.sol-scope-col .sol-scope-body h5 {
  font-size: 16px;
  margin-bottom: 0.4rem;
}

.sol-scope-col .sol-scope-body ul {
  margin-top: 0.2rem;
}

.sol-scope-col .sol-scope-body ul li {
  font-size: 14px;
}

.sol-growth-grid {
  gap: 6em;
}

@media (max-width: 781px) {
  .sol-growth-grid {
    gap: 2em;
  }
}

@media (max-width: 781px) {
  .sol-model-tab-outer .smb-tabs__tab {
    font-size: 12px;
    padding: 8px !important;
  }
}

ul.sol-platform-list li:before {
  display: none;
}

/* ---------------------------------------------------------------
   2-4. プロダクト事業  .page
  ---------------------------------------------------------------- */

/*-- 共通 --*/
.products-tab-menu__list {
  background: #F9F7F7;
  border-radius: 50rem;
  display: flex;
  padding: 10px;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.products-tab-menu__list li {
  padding-left: 0 !important;
}

.products-tab-menu__list li:before {
  display: none;
}

.products-tab-menu__list li a {
  background: #F9F7F7;
  padding: 16px;
  border-radius: 50rem;
  transition: all .3s ease;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  height: 100%;
  display: block;
  min-width: 120px;
  text-align: center;
}

.products-tab-menu__list li.--active a {
  background: var(--haudi-green);
  color: var(--white);
}

.products-tab-menu__list li a:hover {
  background: var(--haudi-green);
  color: var(--white);
}


.familia-energy-outer,
.familia-vision-outer,
.rxt-outer {
  position: relative;
  z-index: 2;
  padding: 0;
}


@media (max-width: 767.98px) {

  .products-tab-menu__list li a {
    font-size: 14px;
    background: unset;
    padding: 8px 14px;
  }
}

@media (max-width: 630px) {

  .products-tab-menu__list {
    gap: 0;
  }
}


/*-- プロダクト事業 --*/
.familia-energy-outer .products-familia-energy-logo-img a::after,
.familia-vision-outer .products-familia-vision-logo-img a::after,
.rxt-outer .rxt-logo-img a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

.familia-energy-outer .smb-section__inner>.c-container,
.familia-vision-outer .smb-section__inner>.c-container,
.rxt-outer .smb-section__inner>.c-container {
  padding-top: 80px;
  padding-bottom: 80px;
}


ul.check-list li {
  font-weight: 500;
  position: relative;
  padding-left: 1.75em;
  margin-top: 1em;
}

ul.check-list li:before {
  position: absolute;
  top: 0;
  left: 0;
  translate: 0 0.25em;
  content: "";
  aspect-ratio: 1/1;
  width: 1em;
  display: block;
  background-image: url(../images/bussiness/icon_check.svg);
  background-repeat: no-repeat;
  background-size: cover;
}


/*-- Familia VISION：すぐに使えるAIモデル一覧 --*/

/* 罫線・余白・セル背景は components.css の table 既定に任せる（!important 付き）。
   同じページの「なぜエッジAIか？」の比較表と同じ罫線・余白になるので、ここでは
   文字サイズと番号の見せ方だけを足す。 */

/* 番号はグループをまたいで 1〜30 を通すため、セクション単位でカウンタを初期化する。 */
.entry-content .vision-models {
  counter-reset: vision-model;
}

/* グループごとに枠で囲み、見出しを帯にして表を収める。 */
.entry-content .vision-model {
  margin-top: 40px;
  border: 1px solid #EDEEEF;
  border-radius: 3px;
  overflow: hidden;
}

.entry-content .vision-model h4 {
  margin: 0;
  padding: 0.625em 1em;
  background-image: linear-gradient(90deg, #53C1B7 0%, #4C9E97 100%);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/* 表の上下端の罫線は枠線と二重になるので落とす。
   components.css 側が !important なので、こちらも合わせる。 */
.entry-content .vision-model .model-table table tr:first-child td {
  border-top: 0 !important;
}

.entry-content .vision-model .model-table table tr:last-child td {
  border-bottom: 0 !important;
}

.entry-content .vision-models .wp-block-flexible-table-block-table.model-table {
  margin: 0;
}

.entry-content .vision-models .model-table table td {
  font-size: 15px;
}

/* 番号は本文に持たせず、モデル名セルの ::before で出す。空セルを作らずに済むので、
   編集画面でも素直な2列の表として扱える。幅を固定した inline-block にして、
   行をまたいでモデル名の頭を揃える。 */
.entry-content .vision-models .model-table table tr {
  counter-increment: vision-model;
}

.entry-content .vision-models .model-table table td:first-child {
  width: 1%;
  white-space: nowrap;
}

/* td の font-weight は既定で normal !important だが、擬似要素には効かないので
   ここで太字にする。モデル名自体は本文の strong が担当。 */
.entry-content .vision-models .model-table table td:first-child::before {
  content: counter(vision-model);
  display: inline-block;
  width: 2em;
  font-weight: 700;
  color: var(--haudi-green);
}

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

  /* 横幅が足りないので、モデル名も折り返させる。 */
  .entry-content .vision-models .model-table table td:first-child {
    white-space: normal;
  }
}

/*-- RxT：ページ本文 --*/

/* 図版は PC 用（横長）とスマホ用（縦長）で絵柄そのものが違う。
   横長のまま縮めると読めないので、768px で画像ごと入れ替える。 */
.entry-content .rxt-fig-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .entry-content .rxt-fig-pc {
    display: none;
  }

  .entry-content .rxt-fig-sp {
    display: block;
  }
}

/* 注記・出典。本文と地続きに見えないよう一段落とす。 */
.entry-content .rxt-note {
  margin-top: 1em;
  color: #767676;
  font-size: 13px;
  line-height: 1.7;
}

/* 選ばれる3つのキーポイント。番号は本文に持たせず ::before で出す。
   空の見出しを作らずに済むので、編集画面では素直な見出し＋段落になる。
   vision-models と同じく、セクション単位でカウンタを初期化する。 */
.entry-content .rxt-keypoints {
  counter-reset: rxt-keypoint;
}

.entry-content .rxt-keypoint {
  position: relative;
  margin-top: 40px;
  padding: 24px 24px 24px 88px;
  border: 1px solid #EDEEEF;
  border-radius: 3px;
}

.entry-content .rxt-keypoint::before {
  counter-increment: rxt-keypoint;
  content: counter(rxt-keypoint);
  position: absolute;
  top: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: linear-gradient(90deg, #53C1B7 0%, #4C9E97 100%);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
}

.entry-content .rxt-keypoint h4 {
  margin-top: 0;
  font-size: 18px;
}

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

  /* 横幅が足りないので、番号は見出しの左ではなく上に置く。 */
  .entry-content .rxt-keypoint {
    padding: 68px 16px 16px;
  }

  .entry-content .rxt-keypoint::before {
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    font-size: 16px;
    line-height: 36px;
  }
}

/* 導入可能な施設。「施設」「装置」は本文中の区切りなので帯にする。 */
.entry-content .rxt-facility h4 {
  margin-top: 2.5rem;
  padding-left: 0.75em;
  border-left: 4px solid var(--haudi-green);
  font-size: 18px;
}

.entry-content .rxt-facility__cards .wp-block-column {
  text-align: center;
}

.entry-content .rxt-facility__cards p {
  margin-bottom: 0.5em;
}

/* カードは4枚。WordPress 既定の 781px 以下だと1列になって間延びするので、
   2列で折り返す。 */
@media screen and (max-width: 781px) {
  .entry-content .rxt-facility__cards {
    flex-wrap: wrap !important;
    gap: 16px;
  }

  .entry-content .rxt-facility__cards .wp-block-column {
    flex-basis: calc(50% - 8px) !important;
  }
}

/* 装置一覧は3列。列ごとの箇条書きなので、上下の余白だけ揃える。 */
.entry-content .rxt-facility__devices ul {
  margin-top: 0;
}

/* 2列の表は見出し列の幅を揃える。スマホでは is-stacked-on-mobile 側が
   width:100%!important を当てるので、ここでの指定は自動的に無効になる。 */
.entry-content .rxt-table table th {
  width: 30%;
}







/* ---------------------------------------------------------------
   3. 投稿一覧・アーカイブ  .blog / .archive

   index.php / archive.php。日付別・著者別アーカイブもここ。
   ニュース: template-parts/cpt-archive.php
   ニュースのターム: template-parts/taxonomy-archive-news.php
   絞り込み: template-parts/news-nav.php
   --------------------------------------------------------------- */

/* ニュースのカテゴリーナビ。項目の間に斜めの区切り線を入れる。 */
.news-nav {
  margin-bottom: 60px;
  text-align: center;
}

.news-nav__list {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1023.98px) {
  .news-nav__list {
    gap: 20px;
  }
}

.news-nav__item:not(:last-child) {
  position: relative;
}

.news-nav__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 1px;
  height: 25px;
  background: #50A4A1;
  transform: rotate(25deg);
}

@media (max-width: 1023.98px) {
  .news-nav__item:not(:last-child)::after {
    top: 4px;
    right: -11px;
    height: 18px;
  }
}

.news-nav__link {
  color: #707070;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s ease;
}

.news-nav__link:hover,
.news-nav__link.--active {
  color: #50A4A1;
}


/* ---------------------------------------------------------------
   4. カテゴリー・タグ・タクソノミー  .category / .tag / .tax-*

   template-parts/taxonomy-archive.php（main に .taxonomy-archive）。
   特定のタームだけ変える場合は .term-slug が使える。
   --------------------------------------------------------------- */


/* ---------------------------------------------------------------
   5. 投稿詳細  .single-post

   single.php。
   「前の記事 / 次の記事」（template-parts/post-nav.php）は、お役立ち情報・事例・
   ニュース等の詳細で共用するのでここに置く。
   --------------------------------------------------------------- */

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 60px;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.post-nav__item--next {
  border-left: 1px solid #dfdfdf;
  text-align: right;
}

.post-nav__link {
  display: block;
  height: 100%;
  padding: 24px;
  color: var(--ink);
  transition: opacity .3s ease;
}

.post-nav__link:hover {
  opacity: .75;
}

.post-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--haudi-green);
  font-size: 14px;
  font-weight: 600;
}

.post-nav__label i {
  font-size: 11px;
}

/* 長いタイトルは2行で省略する。 */
.post-nav__title {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 下に続く「一覧へ戻る」ボタンとの間隔。単独のとき（60px）より詰める。 */
.content-shell:has(> .post-nav)+.content-shell .button {
  margin-top: 40px;
}

@media (max-width: 767.98px) {
  .post-nav {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .post-nav__item--next {
    border-left: none;
    border-top: 1px solid #dfdfdf;
  }

  /* 片方しか無いときは空の枠と区切り線を出さない。 */
  .post-nav__item.is-empty {
    display: none;
  }

  .post-nav__item--prev.is-empty+.post-nav__item--next {
    border-top: none;
  }

  .post-nav__link {
    padding: 20px 4px;
  }

  .content-shell:has(> .post-nav)+.content-shell .button {
    margin-top: 32px;
  }
}


/* ---------------------------------------------------------------
   6. 事例（usecase）

   一覧: template-parts/cpt-archive-usecase.php
   ターム: template-parts/taxonomy-archive-usecase.php
   絞り込み: template-parts/usecase-nav.php
   詳細: template-parts/cpt-single-usecase.php
   --------------------------------------------------------------- */


/* タームアーカイブの見出し。下に短い緑の線を引く。 */
.archive-title {
  position: relative;
  margin: 0 0 60px;
  padding-bottom: 20px;
  color: #50A4A1;
  font-size: 36px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 767.98px) {
  .archive-title {
    margin-bottom: 40px;
    font-size: 28px;
  }
}

.archive-title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  background: #50A4A1;
}

/* 事業区分のタブ。選択中は下線と三角形を出す。 */
.tab-menu {
  margin-bottom: 55px;
}

.tab-menu__list {
  display: flex;
  border-bottom: solid 2px #CBCBCB;
}

.tab-menu__item {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .tab-menu__item {
    flex-grow: 1;
    font-size: 14px;
    text-align: center;
  }
}

.tab-menu__item a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px 30px;
  transition: color .3s;
}

@media (max-width: 767.98px) {
  .tab-menu__item a {
    padding: 10px 15px;
  }
}

.tab-menu__item a:hover,
.tab-menu__item a.--active {
  color: #50A4A1;
}

@media (max-width: 767.98px) {
  .tab-menu__item a.--active {
    padding: 10px;
  }
}

.tab-menu__item a.--active::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: #50A4A1;
}

.tab-menu__item a.--active::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-style: solid;
  border-width: 14px 8px;
  border-color: #50A4A1 transparent transparent transparent;
}

/* 関連サービスの絞り込み。丸いピル型で並べる。 */
.usecase-nav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 820px;
  margin: 0 auto 60px;
  padding: 10px;
  border-radius: 100px;
  background: #F9F7F7;
}

@media (max-width: 767.98px) {
  .usecase-nav__list {
    padding: 5px;
    gap: 5px;
  }
}

.usecase-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1em;
  border-radius: 100px;
  color: #707070;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: all .3s ease;
}

@media (max-width: 767.98px) {
  .usecase-nav__link {
    padding: .5em .8em;
    font-size: 12px;
    line-height: 1.3;
  }
}

.usecase-nav__link:hover,
.usecase-nav__link.--active {
  background: #50A4A1;
  color: #fff;
}

/* 日付・タイトル・カテゴリー・タグを並べる記事ヘッダー。
   content-shell--narrow は他ページでも使うため、専用クラスで指定する。 */
.usecase-article-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.usecase-article-header__date {
  font-size: 14px;
  color: #3B3B3B;
  margin-bottom: 10px;
}

.usecase-article-header__categories {
  display: flex;
  gap: 10px;
}

.usecase-article-header__category {
  color: var(--haudi-green);
  font-weight: 600;
  border: 1px solid var(--haudi-green);
  padding: 2px 12px;
}

@media (max-width: 767.98px) {
  .usecase-article-header__category {
    font-size: 14px;
    padding: 2px 10px;
  }
}

.usecase-article-header__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--haudi-green);
  font-weight: 500;
}

/* タグはタクソノミーアーカイブへのリンク。押せることが分かるよう反応を付ける。 */
.usecase-article-header__tag a {
  transition: opacity .2s ease;
}

.usecase-article-header__tag a:hover {
  opacity: .6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
  .usecase-article-header__tag {
    font-size: 14px;
  }
}

.usecase-article-info {
  background: #F9F7F7;
  padding: 24px 0;
  margin-bottom: 100px;
}

@media (max-width: 767.98px) {
  .usecase-article-info {
    margin-bottom: 60px;
  }
}

.usecase-article-info__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 1023.98px) {
  .usecase-article-info__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.usecase-article-info__item {
  background: #fff;
  border: solid 1px #CBCBCB;
  border-radius: 6px;
  display: grid;
  grid-template-columns: 160px 1fr;
}

@media (max-width: 575.98px) {
  .usecase-article-info__item {
    grid-template-columns: 1fr;
  }
}

.usecase-article-info__item-title {
  border-right: 1px solid #CBCBCB;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #50A4A1;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .usecase-article-info__item-title {
    border-right: none;
    border-bottom: 1px solid #CBCBCB;
    padding: 10px;
    font-size: 14px;
  }

  .usecase-article-info__item-title br {
    display: none;
  }
}

.usecase-article-info__item-content {
  padding: 30px 25px;
}

@media (max-width: 575.98px) {
  .usecase-article-info__item-content {
    padding: 20px 15px;
    margin-left: 0;
  }
}

.usecase-article-info__dl {
  display: grid;
  grid-template-columns: 88px 1fr;
}

.usecase-article-info__dl:first-child {
  margin-bottom: 15px;
}

.usecase-article-info__dl dt {
  border: solid 1px #CBCBCB;
  border-radius: 6px 0 0 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 5px;
}

.usecase-article-info__dl dd {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #50A4A1;
  border-radius: 0 6px 6px 0;
  text-align: center;
  padding: 5px;
  margin-left: 0;
}

.usecase-article-info__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.usecase-article-info__list li {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #50A4A1;
  border: solid 1px #50A4A1;
  border-radius: 6px;
  padding: 5px;
}

.usecase-article-info__list li.--active {
  background: #50A4A1;
  color: #fff;
}

/* 本文下の「一覧へ戻る」ボタン。
   見た目は共通の .button（緑のピル型）に任せ、ここでは配置だけ指定する。 */
.usecase-article-back {
  display: flex;
  width: fit-content;
  min-width: 280px;
  margin: 60px auto 0;
}

@media (max-width: 767.98px) {
  .usecase-article-back {
    width: 100%;
    min-width: 0;
    margin-top: 40px;
  }
}

/* 関連事例。 */
.usecase-related {
  background: #F9F7F7;
  padding: 60px 0;
}

@media (max-width: 767.98px) {
  .usecase-related {
    padding: 40px 0;
  }
}

.usecase-related__title {
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 0;
  border-left: none;
}

@media (max-width: 767.98px) {
  .usecase-related__title {
    margin-bottom: 20px;
    font-size: 20px;
  }
}

.usecase-related__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1023.98px) {
  .usecase-related__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 575.98px) {
  .usecase-related__list {
    grid-template-columns: 1fr;
  }
}

.usecase-related__card {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  padding-bottom: 40px;
  position: relative;
}

.usecase-related__card::after {
  position: absolute;
  content: "";
  bottom: 20px;
  right: 12px;
  width: 30px;
  height: 16px;
  background: url("../images/arrow-right.svg") no-repeat center;
  background-size: auto;
  background-size: contain;
  transition: all 0.3s ease;
}

.usecase-related__card:hover:after {
  transform: translateX(5px);
}

/* サムネイル未設定でも高さが崩れないよう比率を固定する。 */
.usecase-related__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: solid 1px #CBCBCB;
  background: #F1F1F1;
  overflow: hidden;
}

.usecase-related__card .usecase-related__thumb img {
  transition: all 0.3s ease;
}

.usecase-related__card:hover .usecase-related__thumb img {
  transform: scale(1.05);
}

/* カテゴリー。比率を保つため、画像の右上に重ねて置く。 */
.usecase-related .card__category {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px;
  background: #50A4A1;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  border-radius: 0 0 0 4px;
}

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

.usecase-related__name {
  margin: 0;
  padding: 16px 20px 6px;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .usecase-related__name {
    padding: 14px 16px 6px;
    font-size: 15px;
  }
}

.usecase-related__excerpt {
  margin: 0;
  padding: 0 20px 16px;
  color: #687079;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  .usecase-related__excerpt {
    padding: 0 16px 14px;
  }
}

/* ---------------------------------------------------------------
   7. お役立ち情報（haudi-journal）

   一覧: template-parts/cpt-archive-haudi-journal.php
   ターム: template-parts/taxonomy-archive-haudi-journal.php
   絞り込み: template-parts/haudi-journal-nav.php
   詳細: template-parts/cpt-single-haudi-journal.php
   --------------------------------------------------------------- */

/* カテゴリーの絞り込み。事例より項目が多いため、幅に応じて折り返す。 */
.haudi-journal-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 60px;
  padding: 10px;
  border-radius: 30px;
  background: #F9F7F7;
}

@media (max-width: 767.98px) {
  .haudi-journal-nav__list {
    gap: 5px;
    padding: 5px;
    margin-bottom: 40px;
  }
}

.haudi-journal-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: .8em 1.2em;
  border-radius: 100px;
  color: #707070;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: all .3s ease;
}

@media (max-width: 767.98px) {
  .haudi-journal-nav__link {
    min-width: 0;
    padding: .5em .8em;
    font-size: 12px;
    line-height: 1.3;
  }
}

.haudi-journal-nav__link:hover,
.haudi-journal-nav__link.--active {
  background: #50A4A1;
  color: #fff;
}

/* カード下部のタグ。カード全体がリンクのため、タグ自体は文字表示のみ。 */
.post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 14px 0;
  padding: 0 20px;
  list-style: none;
  color: #50A4A1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .post-card__tags {
    display: none;
  }
}

/* 日付・タイトル・カテゴリー・タグを並べる記事ヘッダー。
   content-shell--narrow は他ページでも使うため、専用クラスで指定する。 */
.haudi-journal-article-header {
  margin-bottom: 20px;
}

.haudi-journal-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 10px;
}

.haudi-journal-article-header__date {
  font-size: 14px;
  color: #3B3B3B;
  margin-bottom: 10px;
}

.haudi-journal-article-header__categories {
  display: flex;
  gap: 10px;
}

.haudi-journal-article-header__category {
  color: #50A4A1;
  font-weight: 600;
  border: 1px solid #50A4A1;
  padding: 2px 12px;
}

@media (max-width: 767.98px) {
  .haudi-journal-article-header__category {
    font-size: 14px;
    padding: 2px 10px;
  }
}

.haudi-journal-article-header__tag-wrap {
  margin-top: 20px;
}

.haudi-journal-article-header__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--haudi-green);
  font-weight: 500;
}

/* タグはタクソノミーアーカイブへのリンク。押せることが分かるよう反応を付ける。 */
.haudi-journal-article-header__tag a {
  transition: opacity .2s ease;
}

.haudi-journal-article-header__tag a:hover {
  opacity: .6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
  .haudi-journal-article-header__tag {
    font-size: 14px;
  }
}

/* 本文下の「一覧へ戻る」ボタン。
   見た目は共通の .button（緑のピル型）に任せ、ここでは配置だけ指定する。 */
.haudi-journal-article-back {
  display: flex;
  width: fit-content;
  min-width: 280px;
  margin: 60px auto 0;
}

@media (max-width: 767.98px) {
  .haudi-journal-article-back {
    width: 100%;
    min-width: 0;
    margin-top: 40px;
  }
}


/* ---------------------------------------------------------------
   8. 採用情報（recruit）

   --------------------------------------------------------------- */
.recruit-guidelines-outer {
  gap: 0;
}

.recruit-guidelines-title-outer .recruit-guidelines-title-inner {
  padding-top: 128px;
  padding-bottom: 32px;
  position: relative;
}

.recruit-guidelines-title-outer .recruit-guidelines-title-inner h3 {
  margin: 0;
  border-bottom: 3px solid var(--white);
  font-size: 24px;
  z-index: 2;
  position: relative;
}

.recruit-guidelines-title-outer .recruit-guidelines-title-inner:after {
  content: "";
  position: absolute;
  height: 100%;
  padding-left: 20%;
  right: 0;
  bottom: 0;
  background: var(--haudi-green);
  clip-path: polygon(20% 100%, 100% 0, 100% 100%);
}

@media (max-width: 781px) {
  .recruit-guidelines-title-outer .recruit-guidelines-title-inner {
    padding-top: 40vw;
  }

  .recruit-guidelines-title-outer .c-container {
    justify-content: flex-start !important;
  }

  .recruit-guidelines-title-outer .recruit-guidelines-title-inner:after {
    height: unset;
    padding-left: unset;
    right: unset;
    width: 100%;
    padding-top: 16%;
    left: 0;
    bottom: 0;
    background: #50A4A1;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
  }
}

.recruit-guidelines-text-outer {
  padding: 16px 24px;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.recruit-guidelines-text-outer a.smb-btn {
  background: var(--white) !important;
  color: var(--haudi-green) !important;
  border: 1px solid var(--white);
  padding: 8px 40px !important;
}

.recruit-guidelines-text-outer a.smb-btn:hover {
  background: var(--haudi-green) !important;
  color: var(--white) !important;
}

@media (max-width: 781px) {
  .recruit-guidelines-text-outer {
    padding-bottom: 32px;
  }

  .recruit-guidelines-text-outer a.smb-btn,
  .recruit-guidelines-text-outer .wp-block-snow-monkey-blocks-buttons,
  .recruit-guidelines-text-outer .wp-block-snow-monkey-blocks-btn {
    width: 100%;
  }
}


/* ---------------------------------------------------------------
   8. インタビュー（interview）

   一覧: template-parts/cpt-archive-interview.php
   詳細: template-parts/cpt-single-interview.php

   詳細の見た目は haudi テーマの /recruit/interview/ に合わせている。
   ブレークポイントと配色（#50A4A1 ほか）も参照元に揃えた。
   --------------------------------------------------------------- */

/* --- 一覧カード（/recruit/ にショートコード [interview_list] で差し込む） --- */

.recruit-interview-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1023.98px) {
  .recruit-interview-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 767.98px) {
  .recruit-interview-list {
    grid-template-columns: 1fr;
  }
}

/* 参照元のスライダーと同じく、偶数番目を一段下げて並びに抑揚をつける。 */
.recruit-interview-list .recruit-interview-item:nth-child(even) {
  margin-top: 60px;
}

@media (max-width: 767.98px) {
  .recruit-interview-list .recruit-interview-item:nth-child(even) {
    margin-top: 0;
  }
}

.recruit-interview-item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.recruit-interview-item__img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 20px;
  aspect-ratio: 34 / 44;
}

.recruit-interview-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.recruit-interview-item:hover .recruit-interview-item__img img {
  transform: scale(1.1);
}

.recruit-interview-item__number {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 1;
  font-family: "Poppins", sans-serif;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  color: #50A4A1;
}

@media (max-width: 767.98px) {
  .recruit-interview-item__number {
    top: 15px;
    left: 15px;
    font-size: 48px;
  }
}

.recruit-interview-item__position {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--haudi-green-dark);
}

.recruit-interview-item__title {
  margin: 0 0 15px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

@media (max-width: 767.98px) {
  .recruit-interview-item__title {
    font-size: 18px;
  }
}

.recruit-interview-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #5A6360;
}


/* --- 詳細ページ --- */

/* 「社員インタビュー」の見出し。募集要項の見出しと同じ大きさに揃える。 */
.recruit-interview-header__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .recruit-interview-header__title {
    font-size: 22px;
  }
}

.recruit-interview-article {
  margin-top: 60px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article {
    margin-top: 30px;
  }
}

/* 記事冒頭のメインビジュアルと通し番号。 */
.recruit-interview-article__mv {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 35px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__mv {
    margin-bottom: 20px;
  }
}

.recruit-interview-article__mv img {
  width: 100%;
  display: block;
}

.recruit-interview-article__number {
  position: absolute;
  left: 40px;
  bottom: 40px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

@media (max-width: 1023.98px) {
  .recruit-interview-article__number {
    font-size: 80px;
    left: 20px;
    bottom: 20px;
  }
}

@media (max-width: 767.98px) {
  .recruit-interview-article__number {
    font-size: 30px;
  }
}

/* 「INTERVIEW」のラベル。右に伸びる横線付き。 */
.recruit-interview-article__interview {
  display: inline-block;
  position: relative;
  margin: 0 0 30px;
  padding-right: 45px;
  color: #036763;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__interview {
    margin-bottom: 20px;
  }
}

.recruit-interview-article__interview::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 1px;
  background: #036763;
}

.recruit-interview-article__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 45px;
  border-bottom: 1px solid #707070;
}

@media (max-width: 1023.98px) {
  .recruit-interview-article__header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767.98px) {
  .recruit-interview-article__header-inner {
    gap: 25px;
    padding-bottom: 30px;
  }
}

.recruit-interview-article__title {
  margin: 0;
  font-size: 56px;
  font-weight: 900;
  line-height: 1.2;
}

@media (max-width: 1023.98px) {
  .recruit-interview-article__title {
    font-size: 40px;
  }
}

@media (max-width: 767.98px) {
  .recruit-interview-article__title {
    font-size: 26px;
  }
}

.recruit-interview-article__info {
  text-align: right;
}

@media (max-width: 1023.98px) {
  .recruit-interview-article__info {
    text-align: left;
  }
}

.recruit-interview-article__initial {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__initial {
    font-size: 18px;
  }
}

.recruit-interview-article__job,
.recruit-interview-article__year {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #5A6360;
}

@media (max-width: 767.98px) {

  .recruit-interview-article__job,
  .recruit-interview-article__year {
    font-size: 13px;
  }
}

/* 質問ブロック。番号は左に絶対配置し、本文は右に寄せる。 */
.recruit-interview-article__faq {
  display: grid;
  position: relative;
  padding-top: 60px;
  margin-top: 60px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__faq {
    padding-top: 30px;
    margin-top: 30px;
  }
}

.recruit-interview-article__faq+.recruit-interview-article__faq {
  border-top: 1px solid #aaa;
}

/* ヘッダー直後とギャラリー直後は、上の余白が二重にならないよう詰める。 */
.recruit-interview-article__header+.recruit-interview-article__faq,
.recruit-interview-article__gallery+.recruit-interview-article__faq {
  margin-top: 0;
}

.recruit-interview-article__faq:last-of-type {
  margin-bottom: 60px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__faq:last-of-type {
    margin-bottom: 30px;
  }
}

.recruit-interview-article__faq-number {
  position: absolute;
  left: 0;
  top: 60px;
  padding-bottom: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  color: #50A4A1;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__faq-number {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 40px;
    text-align: center;
  }
}

/* 番号の下に添える「QUESTION」。装飾なので content で持たせる。
   body の overflow-wrap: anywhere が効くと1文字ずつ折り返されるため nowrap で止める。 */
.recruit-interview-article__faq-number::after {
  content: "QUESTION";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  color: #50A4A1;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__faq-number::after {
    font-size: 10px;
    letter-spacing: 0;
  }
}

.recruit-interview-article__faq-inner {
  max-width: 980px;
  margin-left: auto;
  margin-right: 0;
  padding-left: 100px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__faq-inner {
    padding-left: 0;
  }
}

.recruit-interview-article__faq-question {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__faq-question {
    font-size: 16px;
  }
}

.recruit-interview-article__faq-answer {
  margin-top: 20px;
  font-size: 16px;
  line-height: 2;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__faq-answer {
    margin-top: 10px;
    font-size: 14px;
  }
}

/* 質問の合間に挟む写真。1枚でも2枚でも横に並べる。 */
.recruit-interview-article__gallery {
  display: flex;
  gap: 32px;
  margin-top: 60px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__gallery {
    flex-direction: column;
    margin-top: 30px;
  }
}

.recruit-interview-article__gallery:last-of-type {
  margin-bottom: 60px;
}

.recruit-interview-article__gallery figure {
  flex: 1;
  margin: 0;
}

.recruit-interview-article__gallery img {
  display: block;
  border-radius: 20px;
}

/* 福利厚生から趣味までの共通枠。 */
.recruit-interview-article__section {
  padding: 60px 0 80px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__section {
    padding: 40px 0;
  }
}

.recruit-interview-article__heading {
  position: relative;
  margin: 0 0 1.5em;
  padding-bottom: 0.7em;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__heading {
    font-size: 20px;
  }
}

.recruit-interview-article__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 4px;
  margin-left: -28px;
  background: #50A4A1;
}

/* 見出し中の改行はスマホだけ有効にする。 */
.recruit-interview-article__heading-br {
  display: none;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__heading-br {
    display: inline;
  }
}

/* 福利厚生。選択肢は全部並べ、該当するものだけ --active でチェックを立てる。 */
.recruit-interview-article__benefits {
  background: #F5F5F5;
}

/* 枠線は上と左をリストが、右と下を各項目が持つ。
   隣り合う線が二重にならず、表組みの border-collapse と同じ見た目になる。 */
.recruit-interview-article__benefits-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: solid 2px #CBCBCB;
  border-left: solid 2px #CBCBCB;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__benefits-list {
    grid-template-columns: 1fr;
  }
}

.recruit-interview-article__benefits-item {
  position: relative;
  padding: 20px 20px 20px 60px;
  border-right: solid 2px #CBCBCB;
  border-bottom: solid 2px #CBCBCB;
  color: #9A9A94;
}

@media (max-width: 1023.98px) {
  .recruit-interview-article__benefits-item {
    padding: 15px 15px 15px 50px;
    font-size: 15px;
  }
}

.recruit-interview-article__benefits-item.--active {
  color: #16201F;
}

/* 未選択はグレーの空枠、選択済みは緑地にチェック。 */
.recruit-interview-article__benefits-item::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: solid 2px #C4C2BA;
}

.recruit-interview-article__benefits-item::after {
  content: "✓";
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #036763;
  color: #fff;
  font-size: 13px;
}

.recruit-interview-article__benefits-item.--active::after {
  display: flex;
}

@media (max-width: 1023.98px) {

  .recruit-interview-article__benefits-item::before,
  .recruit-interview-article__benefits-item::after {
    left: 20px;
  }
}

.recruit-interview-article__benefits-title {
  margin: 50px 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #036763;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__benefits-title {
    margin-top: 30px;
    font-size: 16px;
  }
}

.recruit-interview-article__benefits-text {
  margin: 0;
  font-size: 16px;
  line-height: 2;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__benefits-text {
    font-size: 14px;
  }
}

/* ある一日のスケジュール。 */
.recruit-interview-article__schedule-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid #707070;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__schedule-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }
}

.recruit-interview-article__schedule-item:first-of-type {
  border-top: 1px solid #707070;
}

.recruit-interview-article__schedule-time {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #036763;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__schedule-time {
    font-size: 16px;
  }
}

.recruit-interview-article__schedule-task {
  margin: 0;
  font-size: 16px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__schedule-task {
    font-size: 14px;
  }
}

/* 良いところ・大変なところ。2枚並べ、2枚目だけ地色を変える。 */
.recruit-interview-article__proscons {
  background: #F5F5F5;
}

.recruit-interview-article__proscons-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767.98px) {
  .recruit-interview-article__proscons-list {
    grid-template-columns: 1fr;
  }
}

.recruit-interview-article__proscons-item {
  padding: 30px 40px;
  background: #fff;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__proscons-item {
    padding: 15px 20px;
  }
}

.recruit-interview-article__proscons-item:last-child {
  background: #D5D5D5;
}

.recruit-interview-article__proscons-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #036763;
}

.recruit-interview-article__proscons-text {
  margin: 0;
  font-size: 16px;
  line-height: 2;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__proscons-text {
    font-size: 14px;
  }
}

/* 趣味・プライベート。左に問答、右に写真。 */
.recruit-interview-article__hobby-inner {
  display: flex;
  gap: 56px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__hobby-inner {
    flex-direction: column;
    gap: 30px;
  }
}

.recruit-interview-article__hobby-content {
  flex-grow: 1;
}

.recruit-interview-article__hobby-faq:not(:first-of-type) {
  margin-top: 40px;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__hobby-faq:not(:first-of-type) {
    margin-top: 20px;
  }
}

.recruit-interview-article__hobby-question {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__hobby-question {
    font-size: 15px;
  }
}

.recruit-interview-article__hobby-answer {
  margin: 0;
  font-size: 15px;
  line-height: 2;
}

@media (max-width: 767.98px) {
  .recruit-interview-article__hobby-answer {
    font-size: 14px;
  }
}

.recruit-interview-article__hobby-img {
  min-width: 45%;
}

.recruit-interview-article__hobby-img img {
  display: block;
  border-radius: 20px;
}


/* ---------------------------------------------------------------
   9. 募集要項（requirements）

   一覧: template-parts/cpt-archive-requirements.php
   詳細: template-parts/cpt-single-requirements.php

   一覧の見た目は haudi テーマの /recruit/requirements/ に合わせている。
   ブレークポイントと配色（#50A4A1 ほか）も参照元に揃えた。
   --------------------------------------------------------------- */

/* 見出しとエントリーバナー。 */
.recruit-requirements-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-bottom: 60px;
}

@media (max-width: 1023.98px) {
  .recruit-requirements-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.recruit-requirements-header__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .recruit-requirements-header__title {
    font-size: 22px;
  }
}

/* 部署へのアンカーナビ。 */
.recruit-requirements-nav {
  margin: 50px 0;
  text-align: center;
}

.recruit-requirements-nav__list {
  display: inline-flex;
  gap: 10px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 100px;
  background: #F9F7F7;
}

@media (max-width: 767.98px) {
  .recruit-requirements-nav__list {
    padding: 5px;
    gap: 5px;
  }
}

.recruit-requirements-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 200px;
  padding: 1em;
  border-radius: 100px;
  color: #707070;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: all .3s ease;
}

@media (max-width: 767.98px) {
  .recruit-requirements-nav__link {
    min-width: 100px;
    padding: .5em .8em;
    font-size: 12px;
    line-height: 1.3;
  }
}

/* 項目の区切り線。最後の項目には出さない。 */
.recruit-requirements-nav__link::after {
  content: "";
  position: absolute;
  top: 25%;
  right: -6px;
  width: 2px;
  height: 50%;
  border-radius: 1px;
  background: #CBCBCB;
}

@media (max-width: 767.98px) {
  .recruit-requirements-nav__link::after {
    right: -3px;
    width: 1px;
  }
}

.recruit-requirements-nav__item:last-child .recruit-requirements-nav__link::after {
  display: none;
}

.recruit-requirements-nav__link:hover {
  background: #50A4A1;
  color: #fff;
}

/* 部署ごとのセクション。 */
.page-section {
  margin-bottom: 70px;
}

.recruit-requirements-section__header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  padding: 20px 30px;
  border-radius: 10px;
  background: #50A4A1;
  color: #fff;
}

@media (max-width: 767.98px) {
  .recruit-requirements-section__header {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 15px;
    gap: 10px;
  }
}

.recruit-requirements-section__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .recruit-requirements-section__title {
    font-size: 20px;
  }
}

.recruit-requirements-section__text {
  margin: 0;
  font-size: 18px;
}

@media (max-width: 767.98px) {
  .recruit-requirements-section__text {
    font-size: 14px;
  }
}

.recruit-requirements-section__list li {
  border-bottom: 1px solid #707070;
}

.recruit-requirements-section__item {
  position: relative;
  display: block;
}

.recruit-requirements-section__item:hover .recruit-requirements-section__item-content {
  opacity: .7;
}

/* 右端の丸い矢印。ホバーで少し右へ動く。 */
.recruit-requirements-section__item::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: solid 1px #50A4A1;
  border-radius: 50%;
  color: #50A4A1;
  font-size: 22px;
  font-weight: 300;
  transition: all .3s;
}

.recruit-requirements-section__item:hover::after {
  transform: translateY(-50%) translateX(10px);
}

@media (max-width: 767.98px) {
  .recruit-requirements-section__item::after {
    right: 0;
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

.recruit-requirements-section__item-content {
  display: block;
  padding: 30px 86px 30px 35px;
  transition: all .3s;
}

@media (max-width: 767.98px) {
  .recruit-requirements-section__item-content {
    padding: 20px 40px 20px 0;
  }
}

.recruit-requirements-section__item-title {
  margin: 0 0 1rem;
  font-size: 27px;
  font-weight: 700;
  transition: all .3s;
}

@media (max-width: 1023.98px) {
  .recruit-requirements-section__item-title {
    font-size: 22px;
  }
}

@media (max-width: 767.98px) {
  .recruit-requirements-section__item-title {
    font-size: 18px;
  }
}

.recruit-requirements-section__item-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  transition: all .3s;
}

@media (max-width: 1023.98px) {
  .recruit-requirements-section__item-text {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .recruit-requirements-section__item-text {
    font-size: 14px;
  }
}

.recruit-requirements-section__empty {
  margin-top: 30px;
  text-align: center;
}

/* 詳細ページの募集要項ブロック（template-parts/cpt-single-requirements.php）。
   見出しは緑地の帯、項目は 2 列の表。配色・余白は参照元に合わせている。 */
.recruit-requirements-article__header {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 20px 30px;
  border-radius: 20px;
  background: #50A4A1;
  color: #fff;
}

@media (max-width: 767.98px) {
  .recruit-requirements-article__header {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px;
  }
}

.recruit-requirements-article__title {
  margin: 0 0 0.5rem;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .recruit-requirements-article__title {
    font-size: 20px;
  }
}

.recruit-requirements-article__text {
  margin: 0;
}

.recruit-requirements-article__table {
  width: 100%;
}

/* components.css の table 共通指定（罫線・余白・太さ）が !important 付きのため、
   ここも !important で上書きしないと当たらない。 */
.recruit-requirements-article__table th,
.recruit-requirements-article__table td {
  padding: 20px 30px !important;
  border-top: none !important;
  border-bottom: 1px solid #707070 !important;
  background-color: transparent !important;
}

.recruit-requirements-article__table th {
  font-weight: 700 !important;
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 1023.98px) {
  .recruit-requirements-article__table th {
    padding: 20px 0 !important;
    white-space: normal;
  }

  .recruit-requirements-article__table td {
    padding: 20px 0 20px 20px !important;
  }
}

/* 狭い画面では項目名と内容を縦に積む。 */
@media (max-width: 767.98px) {

  .recruit-requirements-article__table th,
  .recruit-requirements-article__table td {
    display: block;
    width: auto;
  }

  .recruit-requirements-article__table th {
    padding: 20px 0 0 !important;
    border-bottom: none !important;
  }

  .recruit-requirements-article__table td {
    padding: 10px 0 20px !important;
  }
}

/* 最下部のエントリー導線。 */
.recruit-entry-box {
  margin-top: 80px;
  margin-bottom: 40px;
  padding: 35px 20px;
  border-radius: 16px;
  background: linear-gradient(to bottom, #4C9E97, #72C1BA);
  color: #fff;
}

@media (max-width: 767.98px) {
  .recruit-entry-box {
    margin-top: 60px;
    padding: 20px;
  }
}

.recruit-entry-box__title {
  margin: 0 0 1rem;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* 見出しの改行はSPだけ。PCは1行に収める。 */
.recruit-entry-box__title br {
  display: none;
}

@media (max-width: 767.98px) {
  .recruit-entry-box__title {
    font-size: 18px;
  }

  .recruit-entry-box__title br {
    display: block;
  }
}

.recruit-entry-box__text {
  margin: 0 0 1rem;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 767.98px) {
  .recruit-entry-box__text {
    font-size: 14px;
    text-align: left;
  }
}

.recruit-entry-box__btns {
  display: grid;
  grid-template-columns: repeat(2, 194px);
  justify-content: center;
  gap: 28px;
  margin-top: 30px;
}

@media (max-width: 767.98px) {
  .recruit-entry-box__btns {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* 緑地の上に置くため、共通の .button を白抜きにする。 */
.recruit-entry-box__btns .button {
  min-height: 0;
  padding: 1em;
  border-color: #fff;
  background: #fff;
  color: #50A4A1;
  font-size: 15px;
  font-weight: 500;
}

.recruit-entry-box__btns .button:hover {
  background: #50A4A1;
  color: #fff;
  transform: none;
}


/* ---------------------------------------------------------------
   10. 検索結果  .search

   専用テンプレートはなく index.php が使われる。
   結果の有無で .search-results / .search-no-results が付く。
   --------------------------------------------------------------- */


/* ---------------------------------------------------------------
   11. 404  .error404

   404.php。
   --------------------------------------------------------------- */


/* ---------------------------------------------------------------
   12. フォーム（お問い合わせ / エントリー）

   /contact/ と /recruit/entry/。どちらも Snow Monkey Forms のブロックで
   組まれている。

   見た目は haudi テーマの同じ2ページに合わせている。参照元は Contact Form 7 で
   マークアップが違うため、体裁だけを SMF のクラスへ移している。
   ブレークポイントと配色（#50A4A1 ほか）は他の recruit 系と揃えた。
   --------------------------------------------------------------- */

.snow-monkey-form {
  max-width: 800px;
  margin-inline: auto;
}

/* 1行＝ラベル240px＋入力欄。SMF 既定の flex（ラベル14em）を打ち消してグリッドにする。 */
.snow-monkey-form .smf-form--simple-table .smf-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  margin-bottom: 40px;
  padding: 0;
}

@media (max-width: 767.98px) {
  .snow-monkey-form .smf-form--simple-table .smf-item {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-bottom: 30px;
  }
}

.snow-monkey-form .smf-form--simple-table .smf-item__col {
  flex: none;
  max-width: none;
  padding: 0;
}

/* ラベルと「必須」を1行に並べる。参照元の dt と同じ余白にする。 */
.snow-monkey-form .smf-form--simple-table .smf-item__col--label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  padding: 0.5em;
  font-weight: 500;
}

.snow-monkey-form .smf-item__label {
  margin: 0;
}

/* 「必須」はフォーム側で説明欄に入力されている。赤枠のバッジとして見せる。
   説明欄に別の文言を入れると、それもこの見た目になる点に注意。 */
.snow-monkey-form .smf-item__description {
  margin: 0;
  padding: 0 0.5em;
  border: 1px solid #dc3232;
  border-radius: 5px;
  color: #dc3232;
  font-size: 14px;
  line-height: 1.7;
}

/* 入力欄。 */
.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-textarea-control__control,
.snow-monkey-form .smf-select-control__control {
  width: 100%;
  max-width: 100%;
  padding: 0.5em;
  border: 1px solid #CBCBCB;
  border-radius: 5px;
  background: var(--white);
  color: var(--ink);
}

.snow-monkey-form .smf-text-control__control:focus,
.snow-monkey-form .smf-textarea-control__control:focus,
.snow-monkey-form .smf-select-control__control:focus {
  border-color: #50A4A1;
  outline: 2px solid rgba(80, 164, 161, .25);
  outline-offset: 0;
}

.snow-monkey-form .smf-textarea-control__control {
  min-height: 10em;
}

/* ラジオ・チェックボックスは横並びで折り返す。 */
.snow-monkey-form .smf-radio-buttons-control__control,
.snow-monkey-form .smf-checkboxes-control__control {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 0.5em;
}

.snow-monkey-form .smf-label {
  margin: 0;
}

.snow-monkey-form .smf-label label {
  display: block;
  cursor: pointer;
}

/* チェック（ラジオ）と文言を1行に揃える。
   インライン表示のままだとマークアップの改行が空白として入り、
   ネイティブ入力の既定マージンと合わさって隙間が開くうえ、縦位置もずれる。 */
.snow-monkey-form .smf-checkbox-control,
.snow-monkey-form .smf-radio-button-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.snow-monkey-form .smf-checkbox-control__control,
.snow-monkey-form .smf-radio-button-control__control {
  flex-shrink: 0;
  margin: 0;
}

/* 送信ボタン。確認画面つきで複数並ぶ場合も中央に収まるよう flex にする。 */
.snow-monkey-form .smf-action {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* Cloudflare Turnstile のウィジェット。送信ボタンに揃えて中央に置く。 */
.snow-monkey-form .snow-monkey-forms-turnstile {
  display: flex;
  justify-content: center;
}

/* Turnstile を送信ボタンの直前に出す。確認が済むまでボタンが押せないため、上にあるほうが分かりやすい。
   DOM 上はフォームの最後に出力されるので、flex の order で並べ替える。
   flex にすると入力欄側の余白（最後の .smf-item の margin-bottom）とボタンの margin-top が
   相殺されずに足されるので、ウィジェットの上は 0、ボタンの上は詰めた値にする。
   Turnstile が無いフォームには効かないよう :has で絞る。 */
.snow-monkey-form:has(> .snow-monkey-forms-turnstile) {
  display: flex;
  flex-direction: column;
}

.snow-monkey-form:has(> .snow-monkey-forms-turnstile) > .snow-monkey-forms-turnstile {
  order: 1;
  margin-top: 0;
}

.snow-monkey-form:has(> .snow-monkey-forms-turnstile) > .smf-action {
  order: 2;
  margin-top: 24px;
}

.snow-monkey-form .smf-button-control__control {
  width: 160px;
  max-width: 100%;
  padding: 1em;
  border: solid 1px #50A4A1;
  border-radius: 100px;
  background: #50A4A1;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}

@media (max-width: 767.98px) {
  .snow-monkey-form .smf-button-control__control {
    font-size: 13px;
  }
}

.snow-monkey-form .smf-button-control__control:hover {
  background: var(--white);
  color: #50A4A1;
}

/* エラー表示は入力欄の下に赤字で出す。 */
.snow-monkey-form .smf-error-messages {
  margin-top: 6px;
  color: #dc3232;
  font-size: 14px;
}

.snow-monkey-form .smf-item__label a {
  text-decoration: underline;
  color: var(--haudi-green);
}