@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ▼ レイアウト
 * .hyk-container / --narrow / --form / --farm  - 左右24px paddingを内包したコンテナ（共通.containerは左右padding無し）
 * .hyk-sec / --lg / --md / --sm / --blog       - clamp()ベースのセクション上下余白
 * .hyk-photo-sec / __bg / __inner              - 写真背景（brightness 0.4）+ テキストのセクション
 *
 * ▼ 見出し
 * .hyk-sec__en / --light / --hero / --under    - セクション英字ラベル（12px 700 ls.24em）
 * .hyk-sec__ja / --sm / --white / --lead       - セクション日本語見出し（Noto Serif 600）
 * .hyk-sec-head / --center                     - 見出しブロック
 * .hyk-h3 / .hyk-h3--lg                        - セクション内の明朝小見出し
 *
 * ▼ ボタン
 * .hyk-btn / --white / --sm     - 丸ピル型（枠線→hoverで塗り）+ 右端シェブロン
 * .hyk-btn-ghost               - 暗背景上の白枠ボタン
 * .hyk-btn-outline / -fill     - 記事下の小ボタン
 * .hyk-btn-submit              - フォーム送信ボタン
 *
 * ▼ ヘッダー / フッター
 * .hyk-header / --overlay / --sticky / __inner / __logo / __nav / __nav-item / __nav-ja / __right / __mail
 * .hyk-sp-nav__tel / __note
 * .hyk-footer / __grid / __logo / __info / __nav / __bottom / __copyright
 *
 * ▼ 共通パーツ
 * .hyk-clip-28 / -34 / -48     - 左上・右下を落とした八角クリップパス
 * .hyk-cta / __bg / __inner / __lead / __btns  - 全ページ共通のお問い合わせCTA
 * .hyk-hero__bg                - ページヒーロー写真（brightness 0.4）
 * .hyk-hero__inner             - ページヒーロー内側余白
 * .hyk-dl / __wide             - dt/dd 2カラム定義リスト（会社概要・募集要項）
 * .hyk-lead / .hyk-note        - リード文 / 注記
 * .hyk-row-link                - 行リンクのhover（薄水色背景）
 * .hyk-anchor                  - アンカー着地点のヘッダー分オフセット
 * .hyk-br-sp                   - SP(639px以下)でのみ改行する <br>
 * .hyk-mv / __slideshow / __shade / __inner / __catch  - メインビジュアル
 *
 * ▼ TOP
 * .hyk-news / __list / .hyk-news-list          - お知らせ（共通.news-listの色差分）
 * .hyk-biz__grid / __stats / __stat / __label / __value / __unit / __illust
 * .hyk-work__grid / __item / __cap
 * .hyk-env__grid / __img / __box / .hyk-env__cards / __card / __badge / __num / __title / __text
 * .hyk-recruit__grid / __box
 *
 * ▼ 下層
 * .hyk-msg__grid / __img                       - 会社メッセージ
 * .hyk-stats / __item / __label / __value / __unit  - 数値グリッド（枠線1px区切り）
 * .hyk-compost / __grid / __imgs
 * .hyk-history / __row / __dot / __year / __sub / __text
 * .hyk-map
 * .hyk-farm-intro / __bg / __fade / __inner    - 農場紹介リード（白フェード）
 * .hyk-group-head / __title / __text           - ギャラリーのグループ見出し
 * .hyk-gallery / __link                       - 正方形ギャラリーグリッド（Lightboxリンク）
 * .hyk-flow / __row / --single / __icon / --rest / __time / __title / __text / __img
 * .hyk-job / __item / __title / __icon / __text
 * .hyk-want / __card / __img / __title / __text
 * .hyk-voice / __card / __avatar / __quote / __text / __meta
 * .hyk-notice / __title / __text
 * .hyk-entry-bnr / __bg / __inner
 * .hyk-form / __field / __label / __req / __row / __radios / __radio / __input / __submit-wrap
 * .hyk-tel-box / __label / __num / __time
 * .hyk-blog / __main / __side / __list
 * .hyk-blog-row / __thumb / __meta / __date / __title / __excerpt
 * .hyk-pager / __item / --current / --next
 * .hyk-side / __en / __ttl / __list / __link
 * .hyk-crumb                                   - パンくず帯（共通.breadcrumbの色差分）
 * .hyk-article / __meta / __date / __title / __img / __body / __foot
 * .hyk-thanks__text                            - 送信完了ページ本文（SPで左寄せ）
 * .hyk-fade                                    - スクロールイン時のフェードアップ
 *
 * ▼ CMSフォーム上書き（この区画のみ !important 使用）
 * .submit-btn / .form-pattern-1 .submit-btn    - 送信ボタンをサイトの塗りボタン＋中央配置に
 * .form-pattern-1 ... span.required::before    - 必須バッジの色を #D26363 に
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 【値の粒度不足】
 *  - セクション余白が 120/60px 固定で、clamp() による連続可変に対応できない
 *    → .hyk-sec 系を追加。共通側に clamp ベースの .section--fluid があると良い
 *  - .container に左右 padding が無く、1320px 以下でしか padding が付かない
 *    → .hyk-container を追加
 *  - font-size utility が 0.1rem 刻みのため 13.5px / 14.5px / 12.5px を表現できない
 *
 * 【構造不足】
 *  - auto-fit の可変列グリッド（repeat(auto-fit,minmax(Npx,1fr))）が無い
 *    （.grid-2/3/4 は固定列数）→ 各セクションで個別に定義
 *  - dt/dd を grid 2カラムで組む定義リストコンポーネントが無い
 *    （.dl-timeline は沿革専用、.table-basic は table 前提）→ .hyk-dl を追加
 *  - 縦線 + 円アイコンの「1日の流れ」型タイムラインが無い
 *    （.timeline は dot 8px のみ）→ .hyk-flow を追加
 *  - カード上端に画像バッジを重ねるパターンが無い → .hyk-env__badge / .hyk-want__img
 *
 * 【装飾パターン不足】
 *  - 角を斜めに落とす clip-path（八角形）装飾が無い → .hyk-clip-* を追加
 *  - 背景写真を filter: brightness() で暗くするパターンが無い
 *    （共通は __overlay の重ね方式）→ .hyk-photo-sec__bg / .hyk-hero__bg を追加
 *
 * 【状態不足】
 *  - 行全体をhoverで薄背景に変える汎用クラスが無い → .hyk-row-link を追加
 */

/* ==========================================================================
   Base
   ========================================================================== */
/* main.css の body { overflow-x: hidden } は body をスクロールコンテナに
   してしまい、子孫の position:sticky（ヘッダー）が効かなくなる。
   clip は横はみ出しを同じく抑えつつスクロールコンテナを作らないため、
   sticky が正しく機能する。 */
body {
  overflow-x: clip;
}

a {
  color: #2F8DB8;
}
a:hover {
  color: #123A4A;
  opacity: 1;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.hyk-container {
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}
.hyk-container--narrow { max-width: 928px; }
.hyk-container--form   { max-width: 948px; }
.hyk-container--farm   { max-width: 908px; }

.hyk-sec        { padding: clamp(52px, 6vw, 92px) 0; }
.hyk-sec--lg    { padding: clamp(56px, 7vw, 104px) 0; }
.hyk-sec--md    { padding: clamp(56px, 7vw, 96px) 0; }
.hyk-sec--sm    { padding: clamp(48px, 6vw, 84px) 0; }
.hyk-sec--blog  { padding: clamp(44px, 5vw, 80px) 0; }
.hyk-sec--tint  { background: #F5FAFD; }
.hyk-sec--tint2 { background: #EFF6FA; }

/* 写真背景セクション（brightness で暗くする） */
.hyk-photo-sec {
  position: relative;
  overflow: hidden;
  background: #123A4A;
}
.hyk-photo-sec--deep { background: #0C1C26; }
.hyk-photo-sec__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
}
.hyk-photo-sec__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

/* ==========================================================================
   Heading
   ========================================================================== */
.hyk-sec__en {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.24em;
  color: #4EACD8;
}
.hyk-sec__en--light { color: #B4B7EC; }
.hyk-sec__en--hero  { letter-spacing: 0.28em; color: #A9DCF2; }
.hyk-sec__en--pale  { color: #8FC8E4; }
.hyk-sec__en--under {
  margin: 12px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.28em;
}

.hyk-sec__ja {
  margin: 14px 0 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #123A4A;
}
.hyk-sec__ja--sm    { font-size: clamp(22px, 2.6vw, 30px); }
.hyk-sec__ja--news  { font-size: clamp(23px, 2.6vw, 32px); }
.hyk-sec__ja--hero  { font-size: clamp(26px, 3.6vw, 42px); letter-spacing: 0.06em; color: #fff; }
.hyk-sec__ja--white { color: #fff; }
.hyk-sec__ja--lead  { margin: 0; letter-spacing: 0.1em; }
.hyk-sec__ja--illust{ margin: 18px 0 0; letter-spacing: 0.1em; }
.hyk-sec__ja--wide  { font-size: clamp(24px, 3.2vw, 36px); letter-spacing: 0.1em; }

.hyk-h3 {
  margin: 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #123A4A;
}
.hyk-h3--lg { font-size: clamp(21px, 2.6vw, 30px); letter-spacing: 0.06em; }
.hyk-h3--sm { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: 0.04em; line-height: 1.6; }
.hyk-h3--white { color: #fff; }

.hyk-lead {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 2;
}
.hyk-lead--wide  { line-height: 2.1; }
.hyk-lead--white { color: #E6F1F6; }
.hyk-lead--flush { margin-top: 0; }
.hyk-note {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.9;
  color: #7C99A5;
}
.hyk-note--sm { margin-top: 18px; }

/* ==========================================================================
   Button
   ========================================================================== */
.hyk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: min(300px, 100%);
  padding: 17px 48px 17px 32px;
  border: 1px solid #4EACD8;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #2F8DB8;
  transition: all 0.3s ease;
}
.hyk-btn::after {
  position: absolute;
  right: 26px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054";
  font-size: 13px;
  line-height: 1;
}
.hyk-btn:hover {
  background: #4EACD8;
  color: #fff;
  opacity: 1;
}
.hyk-btn--mt24 { margin-top: 24px; }
.hyk-btn--mt26 { margin-top: 26px; }
.hyk-btn--mt28 { margin-top: 28px; }
.hyk-btn--mt32 { margin-top: 32px; }
.hyk-btn--mt34 { margin-top: 34px; }
.hyk-btn--white {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.hyk-btn--white:hover {
  background: #4EACD8;
  border-color: #4EACD8;
  color: #fff;
}
/* 小サイズ（お知らせの「一覧を見る」等、主動線でないボタン） */
.hyk-btn--sm {
  min-width: min(200px, 100%);
  padding: 12px 38px 12px 24px;
  font-size: 13px;
}
.hyk-btn--sm::after {
  right: 20px;
  font-size: 11px;
}

/* 横幅は .hyk-btn（丸ピル型）と同じ 300px で統一。
   最長ラベル「フォームからお問い合わせ」の実寸は約260px（12文字×15px＋左右padding80px）
   のため、300px 指定で並列するボタンがすべて同一幅に揃う。 */
.hyk-btn-ghost {
  display: inline-block;
  min-width: min(300px, 100%);
  padding: 16px 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  transition: all 0.3s ease;
}
.hyk-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  opacity: 1;
}

.hyk-btn-outline,
.hyk-btn-fill {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  transition: all 0.3s ease;
}
.hyk-btn-outline {
  border: 1px solid #CDE4EE;
  color: #2F8DB8;
}
.hyk-btn-outline:hover { background: #EAF6FB; color: #2F8DB8; opacity: 1; }
.hyk-btn-fill {
  background: #4EACD8;
  color: #fff;
}
.hyk-btn-fill:hover { background: #2F8DB8; color: #fff; opacity: 1; }

.hyk-btn-submit {
  padding: 17px 60px;
  border: 0;
  border-radius: 4px;
  background: #4EACD8;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hyk-btn-submit:hover { background: #2F8DB8; }

/* ==========================================================================
   Header
   ========================================================================== */
.hyk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid #E2EEF4;
}
/* TOP：MV上は透過で重ねたまま画面に追従し、
   スクロール後（JSで .is-fixed 付与）に白バーへ切り替える。 */
.hyk-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.hyk-header--overlay.is-fixed {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid #E2EEF4;
}
.hyk-header--overlay.is-fixed .hyk-header__logo img {
  filter: none;
  opacity: 1;
}
.hyk-header--overlay.is-fixed .hyk-header__nav-ja { color: #123A4A; }
.hyk-header--overlay.is-fixed .hyk-header__nav-item a:hover .hyk-header__nav-ja { color: #2F8DB8; }
.hyk-header--overlay.is-fixed .hyk-header__nav-item.header__nav-item--current a::before { background: #1D2088; }
/* ロゴは左端、ナビ＋メールアイコンは1グループで右寄せ。
   gap は 0 にして、ナビ〜メールの間隔を .hyk-header__right で個別に指定する。 */
.hyk-header__inner {
  max-width: 100%;
  height: auto;
  min-height: 76px;
  padding: 0 45px;
  justify-content: flex-start;
  gap: 0;
}
.hyk-header__logo {
  display: flex;
  align-items: center;
  padding: 14px 0;
}
.hyk-header__logo img {
  display: block;
  height: clamp(30px, 3.4vw, 42px);
  width: auto;
}
.hyk-header--overlay .hyk-header__logo img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.hyk-header__nav {
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 26px);
  margin-left: auto;
  margin-right: 0;
  padding-bottom: 2px;
}
.hyk-header__nav-item a {
  display: block;
  position: relative;
  padding: 10px 2px;
}
.hyk-header__nav-item a::after { display: none; }
.hyk-header__nav-ja {
  display: block;
  margin-top: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #123A4A;
}
.hyk-header--overlay .hyk-header__nav-ja { color: #fff; }
.hyk-header__nav-item a:hover .hyk-header__nav-ja { color: #2F8DB8; }
.hyk-header--overlay .hyk-header__nav-item a:hover .hyk-header__nav-ja { color: #A9DCF2; }
.hyk-header__nav-item.header__nav-item--current a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #1D2088;
}
.hyk-header--overlay .hyk-header__nav-item.header__nav-item--current a::before { background: #fff; }
.hyk-header__right {
  gap: 0;
  margin-left: 14px;
}
.hyk-header__mail {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #4EACD8;
  font-size: 17px;
  color: #fff;
  transition: all 0.3s ease;
}
.hyk-header__mail:hover { background: #2F8DB8; color: #fff; opacity: 1; }

/* SPナビ：項目右端の矢印に余白を足す（共通 .sp-nav__link::after の上書き）。
   共通側は font-family が "Font Awesome 5 Free" だが、このサイトは v6 CDN を
   読み込んでいるためグリフが出ない。フォント名もあわせて上書きする。 */
.sp-nav__link::after {
  font-family: "Font Awesome 6 Free";
  margin-left: 10px;
}
/* SPナビ：英字ラベルのサイズ（共通 .sp-nav__en の上書き） */
.sp-nav__en {
  font-size: 1.5rem;
}

.hyk-sp-nav__tel {
  display: inline-flex;
  align-items: center;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  color: #fff;
  letter-spacing: 0.04em;
}
.hyk-sp-nav__tel::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f095";
  margin-right: 10px;
  font-size: 0.72em;
}
.hyk-sp-nav__note {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.hyk-footer {
  background: #4EACD8;
  color: #fff;
}
.hyk-footer__grid {
  max-width: 1248px;
  margin: 0 auto;
  padding: clamp(44px, 5vw, 72px) 24px 28px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hyk-footer__logo {
  display: flex;
  align-items: center;
}
.hyk-footer__logo img {
  display: block;
  height: clamp(34px, 3.6vw, 44px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.hyk-footer__info {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 2;
  color: #fff;
}
.hyk-footer__nav {
  display: grid;
  gap: 12px;
  align-content: start;
}
.hyk-footer__nav a {
  font-size: 13.5px;
  line-height: 1.5;
  color: #fff;
}
.hyk-footer__nav a:hover { color: #123A4A; opacity: 1; }
.hyk-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.hyk-footer__copyright {
  max-width: 1248px;
  margin: 0 auto;
  padding: 20px 24px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #fff;
}

/* ==========================================================================
   共通パーツ
   ========================================================================== */
.hyk-clip-28 {
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.hyk-clip-34 {
  clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
}
.hyk-clip-48 {
  clip-path: polygon(48px 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%, 0 48px);
}

/* アンカーリンクの着地点が追従ヘッダーに隠れないようにする */
.hyk-anchor { scroll-margin-top: 96px; }

/* SP(639px以下)でだけ改行する <br>。
   共通の .sp-only は 897px 以上で非表示＝タブレットでも改行されてしまうため、
   スマホ幅だけに効く専用クラスを用意する。br は display:inline で使う。 */
.hyk-br-sp { display: none; }

.hyk-row-link { transition: background 0.3s ease, color 0.3s ease; }
.hyk-row-link:hover { background: #F7FBFD; color: #123A4A; opacity: 1; }

/* ページヒーロー（共通 .page-hero の写真を brightness で暗くする差分） */
.hyk-hero__bg { filter: brightness(0.4); }
.hyk-hero__inner { padding: clamp(56px, 7vw, 104px) 24px; }

/* お問い合わせCTA */
.hyk-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
  background: #123A4A;
}
.hyk-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
}
.hyk-cta__inner {
  position: relative;
  z-index: 1;
}
.hyk-cta__lead {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 2;
  color: #DCEEF6;
}
.hyk-cta__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* 定義リスト（会社概要・募集要項） */
.hyk-dl {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  border-top: 1px solid #D7E9F2;
  font-size: 14.5px;
}
.hyk-dl dt {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid #D7E9F2;
  line-height: 1.95;
  color: #7C99A5;
}
.hyk-dl dd {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid #D7E9F2;
  line-height: 1.95;
  color: #123A4A;
}
.hyk-dl__inline { display: inline-block; margin-top: 10px; }

/* 数値グリッド（1px区切り） */
.hyk-stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 36px;
  background: #E2EEF4;
  border: 1px solid #E2EEF4;
}
.hyk-stats__item {
  background: #fff;
  padding: 22px 24px;
}
.hyk-stats__label {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #7C99A5;
}
.hyk-stats__value {
  margin: 8px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 28px;
  line-height: 1.3;
  color: #123A4A;
}
.hyk-stats__unit {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
}

/* ==========================================================================
   TOP：メインビジュアル
   ========================================================================== */
.hyk-mv {
  position: relative;
  overflow: hidden;
  background: #123A4A;
}
/* 重なり順： #slideshow(0) → __shade(2) → __inner(3)
   CMSスライダーは内部Swiperが .swiper に z-index:1 を当てるため、
   暗幕・テキスト側に明示的な z-index が無いとスライダーの下に潜る。 */
#slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100vh;
  min-height: 480px;
  max-height: 900px;
}
#slideshow .swiper,
#slideshow .swiper-wrapper,
#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  width: 100%;
  height: 100%;
}
#slideshow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hyk-mv__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 28, 38, 0.5) 0%, rgba(12, 28, 38, 0.18) 40%, rgba(12, 28, 38, 0.5) 100%);
}
.hyk-mv__inner {
  position: relative;
  z-index: 3;
  pointer-events: none;
  width: 100%;
  padding: clamp(110px, 12vw, 150px) clamp(20px, 3vw, 45px) clamp(48px, 6vw, 80px);
  height: 100vh;
  min-height: 480px;
  max-height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.hyk-mv__catch {
  margin: 0;
  pointer-events: auto;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   TOP：お知らせ
   ========================================================================== */
.hyk-news {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.hyk-news__list {
  grid-column: span 2;
  min-width: 280px;
}
.hyk-news-list {
  border-top: none;
}
.hyk-news-list .news-list__item {
  border-bottom: none;
  border-top: 1px solid #E2EEF4;
}
.hyk-news-list .news-list__item:last-child {
  border-bottom: 1px solid #E2EEF4;
}
.hyk-news-list .news-list__link {
  gap: 20px;
  padding: 20px 4px;
  align-items: baseline;
  color: #3F5A66;
}
.hyk-news-list .news-list__link:hover { background: #F7FBFD; }
.hyk-news-list .news-list__date {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: #7C99A5;
}
.hyk-news-list .news-list__title {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: #123A4A;
}

/* ==========================================================================
   TOP：事業紹介
   ========================================================================== */
.hyk-biz__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  margin-top: clamp(40px, 5vw, 68px);
}
.hyk-biz__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.hyk-biz__stat {
  padding: 18px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.hyk-biz__label {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #B7CFDA;
}
.hyk-biz__value {
  margin: 6px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  line-height: 1.3;
  color: #fff;
}
.hyk-biz__unit {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
}
.hyk-biz__illust {
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 24px);
}
.hyk-biz__illust img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* ==========================================================================
   TOP：仕事の様子
   ========================================================================== */
.hyk-work__head {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.hyk-work__head p {
  max-width: 640px;
  margin: 0;
  font-size: 15px;
  line-height: 2;
}
.hyk-work__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 40px;
}
.hyk-work__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.hyk-work__cap {
  position: relative;
  margin: 26px 0 0;
  padding: 14px 18px;
  border: 1px solid #4EACD8;
  border-radius: 8px;
  background: #fff;
}
.hyk-work__cap p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #123A4A;
}

/* ==========================================================================
   TOP：働く環境
   ========================================================================== */
.hyk-illust {
  display: block;
  width: clamp(120px, 14vw, 190px);
  height: auto;
  margin: 0 auto;
}
/* 写真と白ボックスの高さを揃える。
   両方 height:auto ＋ align-items:stretch にすることで、行の高さ
   （= 下限 min-height と中身の高いほう）に両方が引き伸ばされる。
   min-height は2つで同値にしておく。 */
.hyk-env__grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
  margin-top: clamp(40px, 5vw, 64px);
}
.hyk-env__img {
  display: block;
  width: 100%;
  height: auto;
  min-height: clamp(280px, 38vw, 520px);
  object-fit: cover;
}
.hyk-env__box {
  min-height: clamp(280px, 38vw, 520px);
  background: #fff;
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* flex子要素の伸長でボタンが全幅化するのを防ぐ */
.hyk-env__box .hyk-btn {
  align-self: flex-start;
}
.hyk-env__cards {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(52px, 6vw, 80px);
}
.hyk-env__card {
  position: relative;
  border: 1px solid #CDE4EE;
  border-radius: 14px;
  background: #fff;
  padding: 38px 26px 30px;
  text-align: center;
}
.hyk-env__badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 52px;
}
.hyk-env__badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hyk-env__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  line-height: 1;
  color: #123A4A;
}
.hyk-env__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #123A4A;
}
.hyk-env__text {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.95;
}

/* ==========================================================================
   TOP：募集情報
   ========================================================================== */
.hyk-recruit__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}
.hyk-recruit__box {
  background: #fff;
  border: 1px solid #4EACD8;
  border-radius: 14px;
  padding: clamp(24px, 3vw, 36px);
}
.hyk-recruit__dl {
  margin: 0;
  display: grid;
  gap: 14px 20px;
  grid-template-columns: auto 1fr;
  font-size: 14px;
}
.hyk-recruit__dl dt { color: #7C99A5; line-height: 1.6; }
.hyk-recruit__dl dd { margin: 0; font-weight: 700; line-height: 1.6; color: #123A4A; }

/* ==========================================================================
   私たちについて
   ========================================================================== */
.hyk-msg__grid {
  display: grid;
  gap: 44px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.hyk-msg__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* PC時に <br> どおりの2行で収まる幅を確保する（2行目が約810px必要） */
.hyk-biz-lead {
  max-width: 960px;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 2;
}
.hyk-compost {
  margin-top: 48px;
  padding-top: 44px;
  border-top: 1px solid #D7E9F2;
}
.hyk-compost__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.hyk-compost__en { letter-spacing: 0.2em; }
.hyk-compost__ttl { margin-top: 12px; }
.hyk-compost__text { margin: 18px 0 0; font-size: 15px; line-height: 2; }
.hyk-compost__imgs {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.hyk-compost__imgs img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hyk-history {
  margin-top: 36px;
  border-left: 1px solid #CDE4EE;
}
.hyk-history__row {
  position: relative;
  display: grid;
  gap: 6px 28px;
  grid-template-columns: minmax(120px, auto) 1fr;
  padding: 22px 0 22px 28px;
}
.hyk-history__row + .hyk-history__row { border-top: 1px solid #E2EEF4; }
.hyk-history__dot {
  position: absolute;
  left: -4.5px;
  top: 30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4EACD8;
}
.hyk-history__year {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  line-height: 1.4;
  color: #4EACD8;
}
.hyk-history__sub {
  display: block;
  margin-top: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #7C99A5;
}
.hyk-history__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: #123A4A;
}

.hyk-map {
  margin-top: 36px;
  width: 100%;
  height: clamp(220px, 32vw, 380px);
  border: 1px solid #D7E9F2;
  border-radius: 0;
  background: #DFEDF4;
}

/* ==========================================================================
   農場紹介
   ========================================================================== */
.hyk-farm-intro {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.hyk-farm-intro__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hyk-farm-intro__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.96) 34%, rgba(255, 255, 255, 0.7) 66%, rgba(255, 255, 255, 0.2) 100%);
}
.hyk-farm-intro__inner {
  position: relative;
  z-index: 1;
  max-width: 908px;
  margin: 0 auto;
  padding: clamp(52px, 6vw, 96px) 24px clamp(150px, 20vw, 300px);
  text-align: center;
}
.hyk-farm-intro__text {
  margin: 32px 0 0;
  font-size: 15px;
  line-height: 2.4;
  color: #123A4A;
}
.hyk-farm-intro .hyk-sec__en--under { margin-top: 16px; }

.hyk-group-head {
  border-top: 1px solid #CDE4EE;
  border-bottom: 1px solid #CDE4EE;
  padding: 18px 0;
  text-align: center;
}
.hyk-group-head__title {
  margin: 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #123A4A;
}
.hyk-group-head__text {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: #5C7B88;
}
.hyk-gallery {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 28px;
}
/* Lightbox 用に a > img 構造にしたため、a をグリッドアイテムとして扱う */
.hyk-gallery__link {
  display: block;
  overflow: hidden;
}
.hyk-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}
/* ラフ指定：写真ホバー時にごくわずかな拡大（1.03倍程度） */
.hyk-gallery__link:hover img {
  transform: scale(1.03);
}
.hyk-gallery__link:hover {
  opacity: 1;
}

/* ==========================================================================
   仕事を知る
   ========================================================================== */
.hyk-flow {
  display: grid;
  margin-top: 44px;
  margin-left: 29px;
  border-left: 2px solid #CDE4EE;
}
.hyk-flow__row {
  position: relative;
  display: grid;
  gap: 20px 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: 26px 0 26px 62px;
}
.hyk-flow__row--single { grid-template-columns: 1fr; }
.hyk-flow__row + .hyk-flow__row { border-top: 1px solid #E2EEF4; }
.hyk-flow__icon {
  position: absolute;
  left: -29px;
  top: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4EACD8;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #fff;
}
.hyk-flow__icon--rest { background: #1D2088; }
.hyk-flow__time {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #4EACD8;
}
.hyk-flow__title {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #123A4A;
}
.hyk-flow__text {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
}
.hyk-flow__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.hyk-job {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  margin-top: 36px;
  background: #E2EEF4;
  border: 1px solid #E2EEF4;
  box-shadow: 0 6px 24px rgba(18, 58, 74, 0.08);
}
.hyk-job__item {
  background: #fff;
  padding: 28px 26px;
}
.hyk-job__title {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #123A4A;
}
.hyk-job__icon {
  font-size: 16px;
  line-height: 1.6;
  color: #4EACD8;
}
.hyk-job__text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.95;
}
.hyk-job-note {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 2;
}

.hyk-want {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 112px;
}
.hyk-want__card {
  position: relative;
  border: 2px solid #4EACD8;
  background: #fff;
  padding: 96px 26px 34px;
  text-align: center;
}
.hyk-want__img {
  position: absolute;
  top: -84px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 168px;
  height: 168px;
  object-fit: contain;
  background: #fff;
  padding: 0 14px;
}
.hyk-want__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #123A4A;
}
.hyk-want__text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.95;
  text-align: left;
}

/* ==========================================================================
   働く環境（下層）
   ========================================================================== */
.hyk-voice {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 36px;
}
.hyk-voice__card {
  background: #fff;
  border: 1px solid #D7E9F2;
  box-shadow: 0 6px 24px rgba(18, 58, 74, 0.08);
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  gap: 22px;
  grid-template-columns: 96px 1fr;
  align-items: start;
}
.hyk-voice__avatar {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #EAF6FB;
  border-radius: 50%;
}
.hyk-voice__avatar img {
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
}
.hyk-voice__quote {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.7;
  color: #123A4A;
}
.hyk-voice__text {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.95;
}
.hyk-voice__meta {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7C99A5;
  text-align: right;
}

/* PC：本文の行数が違っても、肩書き（入舎○年）の高さを2枚のカードで揃える */
@media (min-width: 897px) {
  .hyk-voice__card { align-items: stretch; }
  .hyk-voice__avatar { align-self: start; }
  .hyk-voice__card > div:last-child {
    display: flex;
    flex-direction: column;
  }
  .hyk-voice__meta { margin-top: auto; padding-top: 14px; }
}

.hyk-notice {
  border: 1px solid #1D2088;
  background: #EEF0FA;
  padding: clamp(24px, 3vw, 34px);
}
.hyk-notice__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: #123A4A;
}
.hyk-notice__text {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 2;
}

.hyk-entry-bnr {
  position: relative;
  overflow: hidden;
  margin-top: 44px;
  background: #4EACD8;
  padding: clamp(32px, 4vw, 52px);
  text-align: center;
}
.hyk-entry-bnr__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
}
.hyk-entry-bnr__inner { position: relative; z-index: 1; }
/* バナー内の白抜きボタン（CTAセクションと同デザイン）の上余白 */
.hyk-entry-bnr .hyk-btn-ghost { margin-top: 28px; }
.hyk-entry-bnr__ttl { margin-top: 14px; letter-spacing: 0.04em; }
.hyk-entry-bnr__lead {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 14.5px;
  line-height: 2;
  color: #F1FAFD;
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.hyk-tel-box {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 22px;
  padding: 18px 22px;
  background: #F5FAFD;
  border: 1px solid #D7E9F2;
}
.hyk-tel-box__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #7C99A5;
}
.hyk-tel-box__num {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #123A4A;
}
.hyk-tel-box__time {
  font-size: 13px;
  color: #5C7B88;
}

.hyk-form {
  margin-top: 44px;
  display: grid;
  gap: 26px;
}
.hyk-form__field { display: grid; gap: 10px; }
.hyk-form__label {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #123A4A;
}
.hyk-form__req { color: #D26363; }
.hyk-form__row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hyk-form__radios {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hyk-form__radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid #CDE4EE;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: #123A4A;
  cursor: pointer;
}
.hyk-form__radio input { accent-color: #4EACD8; }
.hyk-form__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #CDE4EE;
  border-radius: 3px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: #123A4A;
}
textarea.hyk-form__input {
  line-height: 1.9;
  resize: vertical;
}
.hyk-form__input:focus {
  border-color: #4EACD8;
  outline: none;
}
.hyk-form__submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* ==========================================================================
   CMSフォーム（form-pattern-1）の見た目上書き
   --------------------------------------------------------------------------
   CMSフォームは JS が実行時に <style> を head の末尾へ差し込むため、
   site.css の指定が後勝ちで負ける。この区画だけ !important を使う。
   （通常の実装では !important は使わない）
   ========================================================================== */

/* 送信ボタン：サイト共通の塗りボタン（.hyk-btn-submit と同値）＋中央配置 */
.form-pattern-1 .submit-btn,
.submit-btn {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 6px auto 0 !important;
  padding: 17px 60px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #4EACD8 !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}
.form-pattern-1 .submit-btn:hover,
.submit-btn:hover {
  background: #2F8DB8 !important;
  opacity: 1 !important;
}

/* 必須バッジ：claude-design-output の必須ラベル色 #D26363 に合わせる */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  color: #fff !important;
  background: #D26363 !important;
}

/* ==========================================================================
   お知らせ一覧 / 詳細
   ========================================================================== */
.hyk-blog {
  display: grid;
  gap: 48px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.hyk-blog__main {
  grid-column: span 2;
  min-width: 300px;
}
.hyk-blog__side {
  display: grid;
  gap: 36px;
  align-content: start;
  min-width: 240px;
}
/* カテゴリタブを廃止したため、一覧の先頭行に上罫線を持たせる */
.hyk-blog__list {
  border-top: 1px solid #E2EEF4;
}

.hyk-blog-row {
  display: grid;
  gap: 20px;
  grid-template-columns: 180px 1fr;
  padding: 26px 0;
  border-bottom: 1px solid #E2EEF4;
  color: #3F5A66;
}
.hyk-blog-row__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #E2EEF4;
}
.hyk-blog-row__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.hyk-blog-row__date {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: #7C99A5;
}
.hyk-blog-row__title {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #123A4A;
}
.hyk-blog-row__excerpt {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.9;
}

.hyk-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 38px;
}
.hyk-pager__item {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border: 1px solid #CDE4EE;
  font-size: 14px;
  font-weight: 700;
  color: #2F8DB8;
  transition: all 0.3s ease;
}
.hyk-pager__item:hover { background: #EAF6FB; color: #2F8DB8; opacity: 1; }
.hyk-pager__item--current {
  border-color: #4EACD8;
  background: #4EACD8;
  color: #fff;
}
.hyk-pager__item--next { padding: 0 18px; }

.hyk-side__en {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #4EACD8;
}
.hyk-side__ttl {
  margin: 10px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  line-height: 1.4;
  color: #123A4A;
}
.hyk-side__list {
  display: grid;
  margin-top: 14px;
  border-top: 1px solid #E2EEF4;
}
.hyk-side__link {
  padding: 13px 2px;
  border-bottom: 1px solid #E2EEF4;
  font-size: 14px;
  line-height: 1.7;
  color: #3F5A66;
}
.hyk-side__link--sm { font-size: 13.5px; }

.hyk-crumb {
  padding: 0;
  border-bottom: 1px solid #E2EEF4;
  background: #F7FBFD;
}
.hyk-crumb .breadcrumb__list {
  max-width: 1248px;
  margin: 0 auto;
  padding: 16px 24px;
  gap: 10px;
  font-size: 12.5px;
  color: #7C99A5;
}
.hyk-crumb .breadcrumb__item:not(:last-child)::after { margin: 0; }
.hyk-crumb .breadcrumb__link { color: #2F8DB8; }
.hyk-crumb .breadcrumb__current { color: #3F5A66; }

.hyk-article__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.hyk-article__date {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #7C99A5;
}
.hyk-article__title {
  margin: 18px 0 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(23px, 3.2vw, 34px);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #123A4A;
}
.hyk-article__img {
  display: block;
  width: 100%;
  margin-top: 32px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #E2EEF4;
}
.hyk-article__body {
  margin-top: 36px;
  font-size: 15px;
  line-height: 2.1;
}
.hyk-article__body p { margin: 0; }
.hyk-article__body p + p { margin-top: 26px; }
.hyk-article__body h2 {
  margin: 38px 0 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.6;
  color: #123A4A;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2EEF4;
}
.hyk-article__body h2 + p { margin-top: 18px; }
.hyk-article__foot {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid #E2EEF4;
}

/* ==========================================================================
   スクロールフェード（ラフ指定：移動20px程度の軽いフェードイン）
   ========================================================================== */
/* html に .js が付いたとき（＝JS有効時）だけ初期状態を隠す。
   JSが無効・失敗しても中身が消えないようにするため。 */
.js .hyk-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .hyk-fade.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .hyk-fade { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .hyk-header__inner {
    padding: 0 15px;
    min-height: 64px;
  }
  .hyk-header__logo { padding: 10px 0; }
}

@media (max-width: 896px) {
  .hyk-voice__card { grid-template-columns: 72px 1fr; gap: 16px; }
  .hyk-blog__main { grid-column: auto; }
}

@media (max-width: 639px) {
  .hyk-container,
  .hyk-footer__grid,
  .hyk-footer__copyright,
  .hyk-hero__inner,
  .hyk-crumb .breadcrumb__list { padding-left: 16px; padding-right: 16px; }
  .hyk-br-sp { display: inline; }
  /* SPではハンバーガーメニューが導線を担うため、フッターナビは出さない */
  .hyk-footer__nav { display: none; }
  .hyk-mv__catch { letter-spacing: 0.08em; }
  .hyk-dl { grid-template-columns: 1fr; }
  .hyk-dl dt { padding: 16px 0 0; border-bottom: none; }
  .hyk-dl dd { padding: 6px 0 16px; }
  .hyk-clip-48 {
    clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
  }
  /* 仕事の様子：SPでは横長（640×480相当＝4:3）で表示する */
  .hyk-work__item img { aspect-ratio: 4 / 3; }
  /* 働く環境 01〜03：1カラムになるSPでは、上にはみ出す豚アイコン（-30px）が
     前のカードに近づくため、カード間の余白を広げる */
  .hyk-env__cards { gap: 60px; }
  .hyk-flow { margin-left: 22px; }
  .hyk-flow__row { padding-left: 44px; }
  .hyk-flow__icon { left: -22px; top: 22px; width: 44px; height: 44px; font-size: 18px; }
  /* 求める人物像：1カラムになるSPでは、上に84pxはみ出すイラストが
     前のカードに重なるため、カード間を余白で逃がす */
  .hyk-want { margin-top: 96px; gap: 104px; }
  /* 「掃除・きれいにすることが苦にならない方」を1行に収めるため、
     左右paddingを詰めて見出しを1段階小さくする */
  .hyk-want__card { padding: 96px 16px 30px; }
  .hyk-want__title { font-size: 15px; }

  /* 会社概要＞事業内容の数値：SPは2カラム */
  .hyk-stats { grid-template-columns: 1fr 1fr; }
  .hyk-stats__item { padding: 16px 14px; }
  .hyk-stats__label { font-size: 11px; letter-spacing: 0.06em; }
  .hyk-stats__value { font-size: 22px; }
  .hyk-stats__unit { font-size: 12px; }

  /* 農場紹介リード：SPは左寄せ（見出し・イラストは中央のまま） */
  .hyk-farm-intro__text { text-align: left; }
  /* ギャラリー：SPは2カラム */
  .hyk-gallery { grid-template-columns: 1fr 1fr; }

  /* 先輩の声：SPは似顔絵を中央に置き、その下に小見出しと説明文を積む */
  .hyk-voice__card { grid-template-columns: 1fr; gap: 18px; }
  .hyk-voice__avatar { width: 96px; margin: 0 auto; }
  .hyk-voice__quote { text-align: center; }

  /* 送信完了ページの本文：SPは左寄せ */
  .hyk-thanks__text { text-align: left; }

  .hyk-blog-row { grid-template-columns: 120px 1fr; gap: 14px; }
  .hyk-blog-row__title { font-size: 15px; }
  .hyk-history__row { grid-template-columns: 1fr; padding-left: 22px; }
  .hyk-history__dot { top: 26px; }
  .hyk-compost__imgs { grid-template-columns: 1fr; }
  .hyk-tel-box { padding: 16px; }
}