/* ==========================================================================
   1. Hero Section (Detail Page)
   ========================================================================== */
/* Base Styles */
.article-hero-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  line-height: 0;
  margin: 0;
}

.article-hero-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  aspect-ratio: 9 / 4;
}

/* PC Styles (>= 769px) */
@media (min-width: 769px) {
  .article-hero-container {
    margin-bottom: 0;
  }

  .article-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    color: var(--color-text);
    box-sizing: border-box;

    background-color: #fff;
    border: 3px solid;
    padding: 8px 16px 16px 16px;
  }

  .article-hero-title,
  .article-hero-subtitle {
    text-align: left !important;
    margin-left: 0;
    margin-right: 0;
    color: var(--color-text) !important;
  }

  .article-hero-title {
    font-size: var(--fontsize-h1);
    margin-bottom: 0 !important;
    width: 100%;
    font-weight: 700;
  }

  .article-hero-subtitle {
    font-size: var(--fontsize-base);
    line-height: var(--lineheight-lead);
    width: 100%;
    margin-bottom: 0 !important;
    margin-top: 0.5em;
  }
}

/* Smartphone Styles (<= 768px) */
@media (max-width: 768px) {
  .article-hero-container {
    margin-bottom: 0px;
    width: 100%;
    /* border-radius: var(--radius); */
  }

  .article-hero-content {
    position: static;
    padding: 0;
    text-align: center;
    width: auto;
    height: auto;
    display: block;
    color: var(--color-text);
    background-color: #fff;
    border: 3px solid;
    padding: 8px;
  }

  .article-hero-title {
    margin-top: 16px;
    margin-bottom: 8px;
    color: var(--color-text) !important;
    text-shadow: none;
    text-align: left;
    font-size: var(--fontsize-h1);
    /* font-weight: 400; */
  }

  .article-hero-subtitle {
    font-size: var(--fontsize-base);
    line-height: var(--lineheight-lead);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-shadow: none;
    text-align: left;
  }
}


/* ==========================================================================
   2. Article Body (Content)
   ========================================================================== */
.article-body {
  text-align: left;
}

.article-body h2 {
  font-size: var(--fontsize-h2);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--color-text);
  border-bottom: 2px solid var(--brand-keycolor);
  padding-bottom: 0.3em;
}

.article-body .lead {
  color: var(--color-muted) !important;
  font-size: var(--fontsize-base) !important;
  line-height: var(--lineheight-lead) !important;
  margin: 0 !important;
}

.article-body p {
  font-size: var(--fontsize-base);
  line-height: var(--lineheight-lead);
  margin-bottom: 1.5em;
  color: var(--color-text);
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body p span {
  text-decoration: none !important;
  background: linear-gradient(transparent 50%, #ffff00 50%);
}

.article-lead {
  margin-top: 16px;
  text-align: left;
}

.faq-section .lead {
  margin: 0 !important  ;
}

/* リストボタンカラ */
.article-body ul {
  list-style: none !important; /* 標準の点は消す */
  padding-left: 0;
  margin: 1.5em 0;
}

.article-body ul li {
  position: relative;
  padding-left: 1.5em; /* 点のスペースを確保 */
  margin-bottom: 0.8em; /* 項目ごとの間隔 */
  line-height: 1.6;
}

/* 点のデザイン */
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0.4em;    /* 左からの位置 */
  top: 0.6em;     /* 上からの位置（行の高さに合わせて微調整） */
  width: 6px;     /* 点の幅 */
  height: 6px;    /* 点の高さ */
  background-color: var(--brand-keycolor); /* ★ブランドカラー適用 */
  border-radius: 50%; /* 丸くする（0%なら四角になります） */
}

/* ==========================================================================
   3. Recruitment Cards (Detail Page)
   ========================================================================== */
.recruitment-card-list {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.recruitment-card {
  display: flex;
  flex-direction: column;
  padding: 24px;

  /* Background & Border */
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);

  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recruitment-card:hover:not(.recruitment-card--closed) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Closed Status */
.recruitment-card--closed {
  background-color: var(--color-border);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
  box-shadow: none;
}

.recruitment-card--closed:hover {
  background-color: var(--color-border);
  transform: none;
  box-shadow: none;
}

/* Card Content */
.recruitment-card-title {
  font-size: var(--fontsize-h3);
  margin: 0 0 8px 0;
  color: var(--color-text);
  font-weight: 700;
}

.recruitment-card-text {
  font-size: var(--fontsize-small);
  line-height: var(--lineheight-lead);
  color: var(--color-text);
  flex-grow: 1;
  margin-bottom: 16px;
}

.recruitment-card .detail-link {
  font-size: var(--fontsize-small);
  font-weight: 700;
  color: var(--brand-keycolor);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  margin-top: auto;
}

.recruitment-card .detail-link::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.2s ease;
}

.recruitment-card:hover:not(.recruitment-card--closed) .detail-link::after {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
  .recruitment-card-list {
    margin-top: 24px;
    gap: 16px;
  }
}


/* ==========================================================================
   4. Interview Cards (Detail Page Grid)
   ========================================================================== */
.interview-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

/* Responsive */
@media (max-width: 768px) {
  .interview-card-list {
    margin-top: 24px;
    gap: 16px;
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   5. Office Gallery
   ========================================================================== */
.office-gallery {
  display: grid;
  gap: 48px;
  margin-top: 32px;
}

.office-gallery .section-title {
  margin-top: .5em;
}


.office-title {
  font-size: var(--fontsize-h3);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text);
  text-align: left;
}

.office-description {
  font-size: var(--fontsize-base);
  line-height: var(--lineheight-lead);
  color: var(--color-text);
  margin-bottom: 24px;
  text-align: left;
}

.office-image {
  margin: 0;
  margin-bottom: 40px;
  line-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 100%;
}

.office-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.office-item p {
  margin-top: 0 !important;
}

.office-item iframe {
  margin: 0;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .office-gallery {
    gap: 32px;
    margin-top: 24px;
  }
  .office-image {
    margin-bottom: 24px;
  }
}

/* グーグルマップの高さを合わせる */
/* 1. カラムブロック全体の高さを揃える設定を強制 */
.office-item .wp-block-columns {
  align-items: stretch !important;
}

/* 2. 右カラム（テキストと地図が入っている方）を縦並びのFlexボックスにする */
.office-item .wp-block-columns .wp-block-column:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between; /* 要素を上下に配置 */
}

/* 3. Googleマップ（iframe）を余ったスペースいっぱいに広げる */
.office-item .wp-block-columns iframe {
  width: 100% !important;
  flex-grow: 1;       /* 余白を自動で埋める */
  height: auto !important; /* 固定の高さを解除して可変に */
  min-height: 300px;  /* スマホなどで潰れすぎないように最低高さを確保 */
  border-radius: 8px; /* お好みで角丸に */
}

/* 1. 左カラムの画像枠（figure）の余白と高さを調整 */
.office-item .wp-block-columns .wp-block-column:first-child figure.wp-block-image {
  margin-bottom: 0 !important; /* 画像下の余白を強制削除 */
  height: 100% !important;     /* カラムの高さに合わせて枠を伸ばす */
  display: flex !important;    /* 内部の画像を扱いやすくする */
}

/* 2. 左カラムの画像本体（img）を枠いっぱいに広げる */
.office-item .wp-block-columns .wp-block-column:first-child figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;        /* 高さを強制的にカラムに合わせる */
  object-fit: cover !important;   /* 画像が歪まないようにトリミング表示 */
  vertical-align: bottom !important; /* 画像下の微小な隙間（ベースライン）を消す */
}

/* --- スマホ対応 (781px以下) --- */
/* スマホでは縦積みになるため、無理に伸ばさず固定の高さにする */
@media (max-width: 781px) {
  .office-item .wp-block-columns iframe {
    height: 300px !important; /* スマホで見やすい高さに固定 */
    flex-grow: 0;
  }
}

/* ==========================================================================
   6. Components (Company Table)
   ========================================================================== */

/* テーブル全体の設定 */
.company-table table {
  width: 100%;
  border-collapse: collapse;
  /* 上の線を強制的にグレーに統一 */
  border-top: 1px solid var(--color-border) !important;
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin-top: 40px;
  font-size: var(--fontsize-base);
  background: transparent;
}

/* セル共通の設定 */
.company-table th,
.company-table td {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  border-top: none;
  border-left: none;
  border-right: none;
  vertical-align: top;
  line-height: var(--lineheight-lead);
  text-align: left;
  background: transparent;
}

/* 左側（項目名） */
.company-table th {
  width: 200px;
  font-weight: 700;
  color: var(--color-text);
  padding-right: 24px;
}

/* 右側（内容） */
.company-table td {
  color: var(--color-text);
}

/* リスト（事業内容など） */
.company-table td ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .company-table thead {
    display: none;
  }

  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: none;
  }

  /* 項目名 */
  .company-table th {
    padding-top: 24px;
    padding-bottom: 4px;
    font-size: var(--fontsize-small);
    color: var(--color-muted);
  }

  /* 内容 */
  .company-table td {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   7. Time Schedule (1日の流れ)
   ========================================================================== */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* border-top: 1px solid var(--color-border); */
  margin-top: 32px;
}

.schedule-row {
  display: grid;
  /* 左: 時間(固定幅), 右: 内容(残り全部) */
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

/* 時間 (左側) */
.schedule-time {
  font-weight: 700;
  color: var(--brand-keycolor);
  /* キーカラーで強調 */
  font-size: var(--fontsize-h5);
  text-align: right;
  /* 時間を右寄せにして境界線に近づける */
  margin: 0;
  line-height: 1.4;
}

/* 内容 (右側) */
.schedule-desc {
  margin: 0;
  font-size: var(--fontsize-base);
  line-height: var(--lineheight-lead);
  color: var(--color-text);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .schedule-row {
    /* スマホでは縦積みにせず、横並びを維持しつつ幅を調整 */
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 16px 0;
  }

  .schedule-time {
    font-size: var(--fontsize-base);
    text-align: left;
    /* スマホでは左寄せの方が見やすい場合が多い */
  }
}

/* ==========================================================================
   5. welfare Page Styles
   ========================================================================== */

/* 1. カバーブロックを角丸にする */
.wp-block-cover {
  border-radius: 16px; /* 角丸のサイズ（お好みで調整してください） */
  overflow: hidden;    /* 画像が角丸からはみ出ないようにする */

  /* 1. 高さを200pxに固定 */
  min-height: 200px !important;
  height: 200px !important;

  /* 2. 見出しの位置を「下」にする */
  display: flex !important;
  align-items: flex-end !important; /* 下寄せ */
  justify-content: center !important; /* 左右は中央寄せ（左にしたい場合は flex-start） */
  /* 下端の余白調整（ペタッと底につかないように） */
  padding-bottom: 24px !important;
  box-sizing: border-box;
}


@media (max-width: 768px) {
.wp-block-cover {
    /* 1. 画面幅いっぱいに広げる（親要素の枠を無視） */
    margin-left: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    padding: 24px;

    /* 2. 帯状のデザインにする */
    border-radius: 0;             /* 角丸を解除 */
    min-height: 200px !important; /* 高さを抑える（数値はお好みで） */
    height: 200px !important;

    /* 3. 中身の配置設定 */
    display: flex !important;
    align-items: flex-end !important; /* 下寄せ */
  }

  /* 4. テキスト位置を本文のラインに合わせる */
  .wp-block-cover .wp-block-cover__inner-container {
    width: 100%;

    /* ★重要: サイトの共通コンテナ（.container）の余白と同じ値を設定します */
    /* 一般的には 20px か 24px 程度です。ズレる場合はここを調整してください */
  }

  /* 見出しの左揃えを強制 */
  .wp-block-cover h2 {
    text-align: left !important;
    width: 100%;
  }

  .wp-block-cover h2,
  .wp-block-cover h2.has-large-font-size {
    margin: 0 !important;
  }
}




/* 2. カバー内のH2見出しを、他のH2と合わせる */
/* WordPress標準のフォントサイズ指定を上書きして統一します */
.wp-block-cover h2,
.wp-block-cover h2.has-large-font-size {
  font-size: var(--fontsize-h2) !important;
  line-height: var(--lineheight-heading);
  margin: 16px;
  font-weight: 700;
}

/* スマホ表示時のH2サイズ調整 */
@media (max-width: 768px) {
  .wp-block-cover h2,
  .wp-block-cover h2.has-large-font-size {
    font-size: 1.5rem !important; /* スマホでのサイズ */
  }
}

/* 3. 区切り線（セパレーター）のカスタマイズ */
/* デフォルトの二重線などを打ち消して、指定の色・太さにします */
.wp-block-separator {
  border: 1px solid rgba(0, 0, 0, .1); /* 線の色 */
  margin: 40px auto;              /* 上下の余白 */
  width: 100%;                    /* 幅（短くしたい場合は 80% などに） */
  max-width: 100%;
}