@charset "utf-8";
/* 767px以下=SP / 768px以上=PC (事前ヒアリングで合意したブレークポイント) */

/* ==========================================================================
   Utility
   ========================================================================== */
.pc {
  display: none;
}

.sp {
  display: inline;
}

@media (min-width: 768px) {
  .pc {
    display: inline;
  }

  .sp {
    display: none;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--color-bg);
  z-index: var(--z-header);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: none;
}

.header_logo img {
  display: block;
  width: 100px;
  height: auto;
}

/* main.jsのハンバーガーメニューが既定で監視する.nav-menuを兼ねる(header.phpで.gnav.nav-menuを併記) */
.gnav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition: transform 0.3s ease;
}

.gnav_list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.gnav_list a {
  font-size: var(--fs-sm);
}

.gnav_list a:hover {
  color: var(--color-primary);
}

.gnav_contact {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 2.4rem;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: bold;
  border-radius: var(--radius-sm);
}

.gnav_contact:hover {
  opacity: var(--opacity-hover);
}

.gnav_contact_icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.menu-toggle {
  display: none;
  position: relative;
  width: 32px;
  height: 22px;
  color: var(--color-text);
  z-index: var(--z-menu);
}

/* アイコン本体（3本の棒）
   HTML構造:
     <button class="menu-toggle">
       <span class="menu-toggle_bar"></span>
       <span class="menu-toggle_bar"></span>
       <span class="menu-toggle_bar"></span>
     </button>
*/
.menu-toggle_bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.menu-toggle_bar:nth-child(1) {
  top: 0;
}

.menu-toggle_bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.menu-toggle_bar:nth-child(3) {
  bottom: 0;
}

/* is-active(開いた状態)で3本の棒を「✕」に変形させる */
.menu-toggle.is-active .menu-toggle_bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle_bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active .menu-toggle_bar:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 767px) {
  :root {
    --header-height: 60px;
  }

  .header {
    height: var(--header-height);
  }

  .header_logo img {
    width: 70px;
  }

  .menu-toggle {
    display: block;
  }

  .gnav {
    position: fixed;
    top: 0;
    right: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-lg);
    width: 100%;
    max-width: 450px;
    height: 100vh;
    background: var(--color-bg);
    padding: var(--space-xl) var(--space-md);
    transform: translateX(100%);
  }

  .gnav.is-active {
    transform: translateX(0);
    gap: var(--space-md);
  }

  .gnav_list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .gnav_list a {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--space-xs);
    border-bottom: 1px dotted var(--color-border);
  }

  .gnav_contact {
    font-size: 1.6rem;
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  margin-top: var(--header-height);
  padding-left: 5%;
}

.hero_slide {
  display: flex;
  align-items: stretch;
  min-height: 700px;
}

.hero_media {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 200px 0 0 0;
}

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

.hero_body {
  order: -1;
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md) 0 var(--space-md) var(--inner-padding);
  background: var(--color-bg);
}

.hero_label {
  display: block;
  width: 100%;
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--color-primary);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: var(--space-md);
}

.hero_heading {
  font-size: var(--fs-2xl);
  font-weight: bold;
  line-height: var(--lh-heading);
  margin-bottom: var(--space-sm);
}

.hero_sub {
  font-size: var(--fs-md);
  font-weight: bold;
  line-height: var(--lh-heading);
  margin-bottom: var(--space-sm);
}

.hero_en {
  font-size: var(--fs-md);
  color: var(--color-accent);
  line-height: var(--lh-heading);
}

@media (max-width: 767px) {
  .hero {
    margin-top: calc(var(--header-height) + 20px);
  }

  .hero_slide {
    flex-direction: column;
    min-height: 0;
  }

  .hero_media {
    flex: 0 0 auto;
    aspect-ratio: 350 / 392;
    border-radius: 80px 0 0 0;
  }

  .hero_body {
    order: 0;
    flex: 0 0 auto;
    padding: var(--space-sm) 1.6rem;
  }

  .hero_label {
    margin-bottom: var(--space-sm);
  }
}

/* ==========================================================================
   Section共通(見出し)
   ========================================================================== */
.section_label {
  display: block;
  font-size: var(--fs-md);
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}

.section_heading {
  font-size: var(--fs-xl);
  font-weight: bold;
  line-height: var(--lh-heading);
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
  padding: var(--space-xl) 0;
}

.about_inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.about_media {
  flex: 0 0 45%;
}

.about_blob {
  position: absolute;
  z-index: -1;
  top: 70%;
  left: 50%;
  width: 1100px;
  height: auto;
  transform: translate(-50%, -50%);
}

.about_photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 591 / 451; /* about-img01.png(PC)実寸に合わせ、読み込み前のレイアウトずれを防ぐ */
}

.about_body {
  flex: 1 1 auto;
  max-width: 480px;
}

.about_text {
  margin-top: var(--space-sm);
}

.about_text + .about_text {
  margin-top: var(--space-xs);
}

@media (max-width: 767px) {
  .about {
    padding: var(--space-lg) 0 var(--space-md);
  }

  .about_inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .about_media {
    flex: 0 0 auto;
    width: 100%;
  }

  .about_blob {
    top: 30%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
  }

  .about_photo {
    aspect-ratio: 326 / 259; /* about-img01_sp.png実寸に合わせる */
  }
}

/* ==========================================================================
   Services(事業内容)
   ========================================================================== */
.services_head {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
}

.service-block {
  padding: var(--space-md) 0 var(--space-lg);
}

.service-block--tint {
  background: var(--color-accent-light);
}

.service-block_label {
  position: relative;
  display: block;
  font-size: var(--fs-xl);
  font-weight: bold;
  color: var(--color-primary);
  padding-bottom: 0.8rem;
  margin-bottom: var(--space-sm);
}

.service-block_label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
}

.service-block_heading {
  font-size: var(--fs-lg);
  font-weight: bold;
  line-height: var(--lh-heading);
  margin-bottom: var(--space-xs);
  max-width: 640px;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.service-card img {
  display: block;
  width: 100%;
  aspect-ratio: 720 / 460;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.service-card_title {
  margin-top: var(--space-xs);
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--color-primary);
}

.service-card_text {
  margin-top: 0.8rem;
  font-size: var(--fs-xs);
}

@media (max-width: 767px) {
  .services_head {
    padding-top: var(--space-md);
    padding-bottom: var(--space-sm);
  }

  .service-block {
    padding: var(--space-sm) 0 var(--space-md);
  }

  .service-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Message(代表挨拶)
   ========================================================================== */
.message {
  padding: var(--space-xl) 0;
}

.message_inner {
  display: flex;
  gap: var(--space-lg);
}

.message_media {
  flex: 0 0 50%;
  margin-top: var(--space-xs);
}

.message_media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0 100px 0 0;
}

.message_body {
  flex: 1 1 auto;
  max-width: 640px;
}

.message_lead {
  font-size: var(--fs-lg);
  font-weight: bold;
  line-height: var(--lh-heading);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.message_signature {
  margin-top: var(--space-md);
  font-weight: bold;
}

@media (max-width: 767px) {
  .message {
    padding: var(--space-md) 0;
  }

  .message_inner {
    flex-direction: column-reverse;
    gap: var(--space-md);
  }

  .message_media {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
  }

  .message_media img {
    border-radius: 0 60px 0 0;
  }
}

/* ==========================================================================
   Section共通(中央寄せ見出し。会社概要・事業所案内・沿革で使用)
   ========================================================================== */
.section_label--center,
.section_heading--center {
  text-align: center;
}

/* ==========================================================================
   共通パーツ(ボタン。お知らせ「一覧を見る」・採用情報「詳細を見る」等で使用)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 160px;
  padding: 1rem;
  background: #fff;
  color: var(--color-primary);
  font-weight: bold;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

.btn:hover {
  background: var(--color-accent-light);
}

@media (max-width: 767px) {
  .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Company(会社概要・事業所案内)
   ========================================================================== */
.company {
  background: var(--color-bg-alt);
  padding: var(--space-xl) 0;
}

.company_head {
  margin-bottom: var(--space-md);
}

.company_head--sub {
  margin-top: var(--space-xl);
}

.info-table {
  display: grid;
  grid-template-columns: 220px 1fr;
  max-width: 792px;
  margin-inline: auto;
  border-top: 1px solid var(--color-border);
}

.info-table dt,
.info-table dd {
  padding: var(--space-sm) 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.info-table dt {
  font-weight: bold;
  color: var(--color-primary);
}

.info-table dd {
  margin: 0;
}

@media (max-width: 767px) {
  .company {
    padding: var(--space-md) 0;
  }

  .company_head--sub {
    margin-top: var(--space-md);
  }

  .info-table {
    grid-template-columns: 110px 1fr;
  }

  .info-table dt,
  .info-table dd {
    padding: var(--space-xs) 5px;
    font-size: var(--fs-xs);
  }
}

/* ==========================================================================
   News(お知らせ)
   ========================================================================== */
.news {
  padding: var(--space-xl) 0;
}

.news_inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas: "left list";
  column-gap: var(--space-xl);
  align-items: start;
}

.news_left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

/* 35px超の大見出しはclamp()によるフルードタイポグラフィを基本とする(site-quality-standards準拠) */
.news_label {
  font-size: clamp(2.8rem, 2rem + 2vw, 4.2rem);
  font-weight: bold;
  color: var(--color-accent);
  line-height: 1.2;
}

.news_subtitle {
  font-size: var(--fs-sm);
  font-weight: bold;
  margin-top: 0.4rem;
}

.news_more {
  color: var(--color-text);
}

.news_more span {
  color: var(--color-accent);
  margin-left: 0.4rem;
}

.news-list {
  grid-area: list;
  border-top: 1px solid var(--color-border);
}

.news-list_item {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.news-list_date {
  font-size: var(--fs-2xs);
  font-weight: bold;
  margin-right: var(--space-xs);
}

.news-list_tag {
  font-size: var(--fs-2xs);
  color: var(--color-accent);
}

.news-list_text {
  margin-top: 0.6rem;
}

.news-list_item:hover .news-list_text {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .news {
    padding: var(--space-md) 0;
  }

  .news_inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* news_leftを解除し、title→list→ボタンの順で表示する(タブ順・視覚順を一致させる) */
  .news_left {
    display: contents;
  }

  .news_title {
    order: 1;
  }

  .news-list {
    order: 2;
  }

  .news_more {
    order: 3;
  }
}

/* ==========================================================================
   Recruit(採用情報)
   ========================================================================== */
.recruit {
  position: relative;
  z-index: 1; /* 花の画像帯(.bg-band)より前面に置き、重なり部分を覆う */
  padding: var(--space-xl) 0;
}

/* 背景は疑似要素に持たせる。セクション自体を狭めると.innerの中央揃えがずれるため、背景だけ右側を詰める */
.recruit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 max(0px, calc((100% - var(--inner-width)) / 2)) 0 0;
  background: var(--color-accent);
  border-radius: 0 80px 0 0;
}

.recruit_inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-areas: "left list";
  column-gap: var(--space-xl);
  align-items: start;
  padding-right: 8rem; /* デザイン実測: カード右端と背景右端の間の余白 */
}

.recruit_left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.recruit_title {
  color: #fff;
}

/* 35px超の大見出しはclamp()によるフルードタイポグラフィを基本とする(site-quality-standards準拠) */
.recruit_label {
  font-size: clamp(2.8rem, 2rem + 2vw, 4.2rem);
  font-weight: bold;
  line-height: 1.2;
}

.recruit_subtitle {
  font-size: var(--fs-sm);
  font-weight: bold;
  margin-top: 0.4rem;
  margin-bottom: var(--space-sm);
}

.recruit_heading {
  font-size: var(--fs-lg);
  font-weight: bold;
  line-height: var(--lh-heading);
}

.recruit-list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.recruit-item_link {
  display: flex;
  align-items: stretch;
  background: #fff;
  overflow: hidden;
  color: var(--color-text);
}

.recruit-item_link:hover .recruit-item_title {
  text-decoration: underline;
}

.recruit-item_media {
  flex: 0 0 50%;
}

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

.recruit-item_body {
  flex: 1 1 auto;
  min-height: 210px;
  padding: var(--space-sm);
}

.recruit-item_badge {
  display: inline-block;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: var(--fs-2xs);
  font-weight: bold;
  padding: 0 1.2rem;
  margin-bottom: var(--space-2xs);
}

.recruit-item_title {
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--color-primary);
  line-height: var(--lh-heading);
}

.recruit-item_text {
  margin-top: 0.8rem;
  line-height: var(--lh-heading);
}

@media (max-width: 767px) {
  .recruit {
    padding: var(--space-md) 0;
  }

  .recruit::before {
    border-radius: 0 40px 0 0;
  }

  .recruit_inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-right: var(--inner-padding);
  }

  /* recruit_leftを解除し、title→list→ボタンの順で表示する(タブ順・視覚順を一致させる) */
  .recruit_left {
    display: contents;
  }

  .recruit_title {
    order: 1;
  }

  .recruit-list {
    order: 2;
    gap: var(--space-sm);
  }

  .recruit-item_link {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .recruit-item_body {
    min-height: 0;
  }

  .recruit-item_media {
    flex: 0 0 auto;
    width: 100%;
  }

  .recruit-item_media img {
    aspect-ratio: 760 / 424;
    height: auto;
  }
}

/* ==========================================================================
   花の画像帯(Recruitとフッターの間の装飾帯)
   ========================================================================== */
/* Recruitの背景より背面に置き、上に60px潜り込ませる */
.bg-band {
  position: relative;
  z-index: 0;
  margin-top: -60px;
}

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

@media (max-width: 767px) {
  .bg-band {
    margin-top: 0;
    overflow: hidden;
  }

  .bg-band img {
    width: 120%;
    max-width: 120%;
    margin-left: -10%;
  }
}

/* ==========================================================================
   Breadcrumb(フッター直前。TOPページでは非表示)
   ========================================================================== */
.breadcrumb {
  padding-block: var(--space-sm);
  background: var(--color-accent-light);
}

.breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  color: var(--color-text);
}

.breadcrumb_item {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.breadcrumb_item:not(:last-child)::after {
  content: "/";
  color: var(--color-border);
}

.breadcrumb_item a {
  color: var(--color-primary);
}

.breadcrumb_item a:hover {
  opacity: var(--opacity-hover);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer_inner {
  display: flex;
  align-items: flex-start;
  gap: 4vw;
  padding-block: var(--space-lg) var(--space-sm);
}

.footer_info_col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer_info_top {
  display: flex;
  align-items: flex-start;
  gap: 4vw;
}

.footer_logo_col {
  flex: 0 0 auto;
}

.footer_logo img {
  display: block;
  width: min(12vw, 160px);
  height: auto;
}

.footer_catch {
  margin-top: var(--space-2xs);
  /* 1rem=10px基準。画面幅に応じて12px〜16pxの間で可変（clampで固定値から解放） */
  font-size: clamp(1.2rem, 1.034rem + 0.442vw, 1.6rem);
}

.footer_contact_info {
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
}

.footer_contact_info_tel {
  color: var(--color-primary);
}

.footer_contact_info_tel a {
  color: var(--color-primary);
  font-weight: bold;
  text-decoration: none;
}

.footer_contact_info_tel a:hover {
  text-decoration: underline;
}

.footer_contact_info_hours {
  font-size: var(--fs-xs);
}

.footer_nav_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: auto;
}

.footer_nav_row {
  display: flex;
  gap: 6rem;
}

.footer_nav_col > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer_nav_col a {
  font-size: var(--fs-sm);
  font-weight: bold;
}

.footer_nav_col a:hover {
  color: var(--color-primary);
}

.footer_contact_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: var(--space-md);
  padding: 1.4rem 2.4rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: bold;
  border-radius: var(--radius-sm);
}

.footer_contact_btn:hover {
  opacity: var(--opacity-hover);
}

.footer_contact_btn_icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer_bottom {
  border-top: 1px solid var(--color-accent);
}

.footer_bottom_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) 0;
}

.footer_copyright {
  font-size: var(--fs-2xs);
}

@media (max-width: 767px) {
  .footer_inner {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .footer_info_col {
    align-items: center;
  }

  .footer_info_top {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .footer_logo img {
    width: 130px;
  }

  .footer_catch_col {
    flex: 1 1 auto;
  }

  .footer_contact_info {
    flex-direction: column;
    text-align: center;
  }

  .footer_nav_group {
    width: 100%;
    margin-left: 0;
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .footer_nav_row {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .footer_nav_col > ul {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-sm);
  }

  .footer_nav_col a {
    font-size: var(--fs-xs);
  }

  .footer_contact_btn {
    justify-content: center;
    max-width: 70vw;
    margin: var(--space-xs) auto var(--space-sm);
  }

  .footer_catch {
    margin-top: 0;
    text-align: center;
    padding: 0 5%;
  }
}

/* ==========================================================================
   Site Main(下層ページ共通の<main>)
   ヘッダーがposition:fixedのため、下層ページの<main>側でheader分を確保する
   (TOPページはfront-page.php側で.heroにmargin-topを設定済みのため対象外)
   ========================================================================== */
.site-main {
  padding-top: var(--header-height);
}

/* ==========================================================================
   Page Title(下層ページ共通タイトル)
   ========================================================================== */
.page-title {
  background: var(--color-bg-alt);
}

.page-title .inner {
  text-align: center;
  padding-block: var(--space-lg) var(--space-xl);
}

.page-title_label {
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.page-title_heading {
  margin-top: var(--space-2xs);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem);
  font-weight: bold;
  line-height: var(--lh-heading);
}

@media (max-width: 767px) {
  .page-title .inner {
    padding-block: var(--space-md) var(--space-lg);
  }
}

/* ==========================================================================
   News Archive(お知らせ一覧)
   ========================================================================== */
.news-archive {
  padding: var(--space-lg) 0;
}

.news-archive_list {
  max-width: var(--content-width-narrow);
  margin-inline: auto;
}

.news-archive_item {
  border-bottom: 1px solid var(--color-border);
}

.news-archive_link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-sm) 0;
}

.news-archive_link:hover .news-list_text {
  text-decoration: underline;
}

/* サムネイル未登録時はこの要素自体が出力されないため、news-archive_bodyがflex:1で右端まで自動的に広がる */
.news-archive_thumb {
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

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

.news-archive_body {
  flex: 1 1 auto;
  min-width: 0;
}

.news-archive_empty {
  padding: var(--space-md) 0;
  text-align: center;
}

.news-archive_pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
}

.news-archive_pagination .page-numbers.current {
  font-weight: bold;
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .news-archive {
    padding: var(--space-md) 0;
  }

  .news-archive_link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .news-archive_thumb {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   News Single(お知らせ詳細)
   ========================================================================== */
.news-single {
  padding: var(--space-md) 0 var(--space-xl);
}

.news-single_article {
  max-width: var(--content-width-narrow);
  margin-inline: auto;
}

.news-single_title {
  margin-top: var(--space-xs);
  font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
  font-weight: bold;
  line-height: var(--lh-heading);
}

.news-single_thumb {
  margin-top: var(--space-md);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.news-single_thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.news-single_body {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
}

.news-single_body > * + * {
  margin-top: var(--space-xs);
}

.news-single_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--content-width-narrow);
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.news-single_nav_item {
  flex: 1 1 0;
  min-width: 0;
}

.news-single_nav_item--next {
  text-align: right;
}

.news-single_nav_item a span {
  color: var(--color-accent);
  margin: 0 0.4rem;
}

.news-single_nav_back {
  flex: 0 0 auto;
  font-weight: bold;
  color: var(--color-accent);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .news-single {
    padding: var(--space-md) 0 var(--space-lg);
  }

  .news-single_nav {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: var(--space-xs);
  }

  .news-single_nav_item {
    flex: 1 1 100%;
    order: 3;
  }

  .news-single_nav_item--next {
    text-align: center;
  }

  .news-single_nav_back {
    order: 1;
  }
}

/* ==========================================================================
   Contact(お問い合わせ)
   フォーム自体はSnow Monkey Forms(ブロックエディタ)側で組み立てるため、
   ここではコンテンツ幅など最低限のレイアウトのみ指定する
   ========================================================================== */
.contact {
  padding: var(--space-xl) 0;
}

.contact_inner {
  margin-inline: auto;
}

@media (max-width: 767px) {
  .contact {
    padding: var(--space-sm) 0 var(--space-lg);
  }
}

.contact .smf-form--business {
  margin-top: var(--space-md);
}
.contact .smf-form--business .smf-item {
  border-color: var(--color-border);
}

.contact .smf-form--business .smf-item--divider {
  border-top: none;
}

.contact .smf-form--business .smf-item__col {
  padding: var(--_padding2);
}

.contact .smf-form--business .smf-item__col--label {
  background-color: var(--color-accent-light);
  border-color: var(--color-border);
}

.contact .smf-item__description {
  background-color: var(--color-primary);
  color: #fff;
  display: inline-block;
  font-size: var(--fs-2xs);
  padding: 2px 0.7em;
}

.contact .smf-text-control__control,
.contact .smf-textarea-control__control,
.contact .smf-select-control__control {
  padding: 1.5rem;
  width: 100%;
  min-height: 4em;
}

.contact .smf-select-control__control {
  padding-right: 1.5rem;
}

.contact .smf-select-control {
  display: block;
  width: 100%;
}

.contact .smf-select-control__toggle::before {
  right: 1.5rem;
}

.contact #zip {
  width: 10em;
}

.smf-control-description {
  font-size: var(--fs-xs);
}

.wp-block-paragraph {
  margin-top: 10px;
}

/* zipaddr-jpのツールチップ（吹き出し）を非表示にする */
#autozip {
  display: none !important;
}

@media (max-width: 767px) {
  .contact .smf-form--business .smf-item__col {
    padding: var(--_padding1);
  }

  .contact .smf-form--business .smf-item__col--label {
    align-items: center;
    border-bottom: none;
    display: flex;
    gap: var(--space-xs, 8px);
    justify-content: space-between;
  }

  .contact .smf-item__description {
    margin-top: 0;
  }

  .contact .smf-form--business .smf-item__col--controls {
    padding: var(--_padding1) var(--_padding1) var(--_padding2);
  }

  .contact .smf-button-control__control {
    font-size: var(--fs-md);
  }

  .contact_privacy-box {
    height: 25vh;
    max-height: 25vh;
  }
}

/* 個人情報保護方針(プライバシーポリシー)の埋め込みボックス
   別ページを作らず、フォーム直上にスクロール可能なボックスとして本文を表示する */
.contact_privacy-box {
  background-color: #fff;
  border: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.8;
  margin-block: var(--space-sm) var(--space-md);
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-sm);
}

.contact_privacy-box h3 {
  font-size: 16px;
  margin-block: 1.2em 0.5em;
}

.contact_privacy-box h3:first-child {
  margin-top: 0;
}

.contact_privacy-box p {
  margin-block: 0 0.8em;
}

/* 同意チェックボックス行: 下線(項目区切りのborder)を消してセンター揃えにする */
.contact .agree-block {
  border-bottom: none;
}

.contact .agree-block .smf-item__controls > p:first-child {
  margin-top: var(--space-md);
  text-align: center;
}

.contact .agree-block .smf-item__controls > p:first-child strong {
  color: var(--color-primary);
  font-size: var(--fs-lg);
}

.contact .smf-button-control__control {
  appearance: none;
  background-color: var(--color-primary);
  background-image: none;
  border: none;
  color: #fff;
  padding: 0.5em;
  width: 7em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
}

.contact .agree-block .smf-checkboxes-control__control {
  text-align: center;
}

/* 完了画面 */
.smf-complete-content {
  width: 650px;
  max-width: 97%;
  margin: 0 auto;
}
.smf-complete-content .complete_title {
  margin-block: var(--space-md) var(--space-sm);
  font-size: var(--fs-lg);
  font-weight: bold;
  text-align: center;
}

/* ==========================================================================
   採用情報詳細 - FV(TOPページ.heroの「右端フルブリード」構成を流用)
   ========================================================================== */
.recruit-fv {
  display: flex;
  align-items: stretch;
  min-height: 450px;
  border-bottom: 30px solid var(--color-accent-light);
}

.recruit-fv_body {
  position: relative;
  flex: 0 0 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg) 0 var(--space-md) 7%;
}

/* 水色の背景を、画像の左上角丸の下(カーブでくり抜かれた部分)まで回り込ませるための疑似要素 */
.recruit-fv_body::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + 100px); /* 自身の幅 + recruit-fv_mediaの角丸半径 */
  height: 100%;
  background: linear-gradient(
    to bottom,
    #fff 10%,
    var(--color-accent-light) 10%
  );
  z-index: -1;
}

.recruit-fv_badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}

.recruit-fv_badge {
  display: inline-block;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: bold;
  padding: 0 1.2rem;
}

.recruit-fv_badge--fill {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}

.recruit-fv_title {
  font-size: var(--fs-xl);
  font-weight: bold;
  line-height: var(--lh-heading);
}

.recruit-fv_subtitle {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-accent);
  font-size: var(--fs-md);
  font-weight: bold;
}

.recruit-fv_media {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 100px 0 0 0;
}

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

@media (max-width: 767px) {
  .recruit-fv {
    flex-direction: column-reverse;
    min-height: 0;
  }

  .recruit-fv_body::before {
    content: none;
  }

  .recruit-fv_body {
    flex: 0 0 auto;
    padding: var(--space-sm) 5%;
    background: var(--color-accent-light);
  }

  .recruit-fv_media {
    aspect-ratio: 350 / 392;
    border-radius: 60px 0 0 0;
  }
}

/* ==========================================================================
   採用情報詳細 - 紹介文セクション(.about_blobの背景あしらいを流用)
   ========================================================================== */
.recruit-detail {
  padding: var(--space-xl) 0;
}

.recruit-detail_inner {
  position: relative;
}

.recruit-detail_blob {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: -20%;
  width: 1400px;
  height: auto;
  opacity: 0.8;
}

.recruit-detail_lead {
  width: 90%;
  margin-inline: auto;
  font-size: var(--fs-md);
  font-weight: bold;
  line-height: var(--lh-loose);
}

.recruit-detail_heading {
  width: 90%;
  margin-inline: auto;
  margin-top: var(--space-lg);
  font-size: var(--fs-lg);
  font-weight: bold;
  line-height: var(--lh-heading);
}

.recruit-detail_text {
  width: 90%;
  margin-inline: auto;
  margin-top: var(--space-sm);
  font-weight: bold;
}

.recruit-detail_gallery {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.recruit-detail_gallery_item {
  flex: 0 1 32%;
}

.recruit-detail_gallery_item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 220;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
  .recruit-detail {
    padding: var(--space-lg) 0 var(--space-md);
  }

  .recruit-detail_blob {
    top: 20%;
    width: 200%;
    max-width: unset;
  }

  .recruit-detail_heading {
    margin-top: var(--space-md);
  }

  .recruit-detail_gallery {
    gap: var(--space-2xs);
  }

  .recruit-detail_gallery_item {
    flex: 0 1 100%;
  }
}

/* ==========================================================================
   採用情報詳細 - アピールポイント(.service-block_labelの見出しあしらいを流用)
   ========================================================================== */
.recruit-points {
  padding: var(--space-xl) 0;
  background: var(--color-bg-alt);
}

.recruit-points_item + .recruit-points_item {
  margin-top: var(--space-lg);
}

.recruit-points_heading {
  position: relative;
  font-size: var(--fs-lg);
  font-weight: bold;
  color: var(--color-primary);
  padding-bottom: 0.8rem;
  margin-bottom: var(--space-sm);
}

.recruit-points_heading::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
}

@media (max-width: 767px) {
  .recruit-points {
    padding: var(--space-md) 0;
  }

  .recruit-points_item + .recruit-points_item {
    margin-top: var(--space-md);
  }
}

/* ==========================================================================
   採用情報詳細 - 募集要項(TOPページ.company・.info-tableの構成を流用。背景は白)
   ========================================================================== */
.recruit-requirements {
  background: var(--color-bg);
  padding: var(--space-xl) 0;
}

.recruit-requirements_head {
  margin-bottom: var(--space-md);
}

.recruit-requirements_cta {
  margin-top: var(--space-lg);
  text-align: center;
}

.recruit-requirements_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 1.4rem 2.4rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: bold;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition);
}

.recruit-requirements_btn:hover {
  opacity: var(--opacity-hover);
}

.recruit-requirements .info-table {
  grid-template-columns: 150px 1fr;
}

@media (max-width: 767px) {
  .recruit-requirements {
    padding: var(--space-md) 0 var(--space-xl);
  }

  .recruit-requirements_btn {
    width: 80%;
  }

  .recruit-requirements .info-table {
    grid-template-columns: 1fr;
  }

  .recruit-requirements .info-table dt {
    border-bottom: none;
    padding-bottom: 0;
    font-size: var(--fs-sm);
  }
}