/* ============================================================
   京懐石「東山」料飲マネジャー募集ページ — レスポンシブ用スタイル
   Kyo Kaiseki "Higashiyama" Recruitment — Responsive Stylesheet
   ============================================================

   使い方 / HOW TO USE
   style.css の「後」に読み込んでください。
   Load this file AFTER style.css:

     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="responsive.css">

   ブレークポイント / BREAKPOINTS
     タブレット / Tablet ............. 900px 以下
     スマートフォン / Phone .......... 640px 以下
     小型スマートフォン / Small phone . 400px 以下
   ============================================================ */

/* ---------- タブレット / TABLET (≤ 900px) ---------- */
@media (max-width: 900px) {
  .hy-hero { height: 440px; }
  .hy-hero-content { padding: 36px 32px 32px; }
  .hy-hero-title { font-size: 28px; }

  .hy-lead { padding: 52px 40px 40px; }
  .hy-lead-jp { font-size: 21px; }

  .hy-role-text { padding: 40px 32px; }
  .hy-role-img { width: 260px; }

  .hy-details { padding: 48px 40px 20px; }
  .hy-cuisine-caption { padding: 8px 40px 20px; }
  .hy-cuisine-img { height: 260px; }
  .hy-band { height: 300px; }

  .hy-cta { padding: 52px 40px; gap: 32px; }
  .hy-cta-photo { width: 220px; height: 150px; }
}

/* ---------- スマートフォン / PHONE (≤ 640px) ---------- */
@media (max-width: 640px) {
  /* HERO — 高さを下げ、文字を読みやすく / shorter hero, readable text */
  .hy-hero { height: 400px; }
  .hy-hero img { object-position: center 22%; }
  .hy-hero-content { padding: 28px 22px 26px; }
  .hy-hero-content .hy-eyebrow { font-size: 11px; letter-spacing: .1em; }
  .hy-hero-title { font-size: 23px; line-height: 1.55; }
  .hy-hero-sub { font-size: 11.5px; }

  /* LEAD */
  .hy-lead { padding: 40px 22px 32px; }
  .hy-lead-jp { font-size: 18.5px; line-height: 1.9; }
  .hy-lead-en { font-size: 13px; }

  /* ROLE — 横並びを縦積みに / stack side-by-side into vertical */
  .hy-role { flex-direction: column; }
  .hy-role-text { padding: 32px 22px; }
  .hy-role-jp { font-size: 15px; line-height: 1.9; }
  .hy-role-en { font-size: 12.5px; }
  .hy-role-img { width: 100%; height: 260px; }
  .hy-role-img img { min-height: 0; }

  /* 募集要項 — 項目名を上、内容を下に / label above, content below */
  .hy-details { padding: 40px 22px 16px; }
  .hy-details .hy-eyebrow { font-size: 11.5px; }
  .hy-details-title { font-size: 21px; }
  .hy-row {
    flex-direction: column;
    gap: 8px;
    padding: 18px 0;
  }
  .hy-row-label { width: auto; font-size: 14.5px; }
  .hy-row-jp { font-size: 15px; }
  .hy-row-en { font-size: 12px; }

  /* 料理写真 — 2枚を縦並びに / stack the two dish photos */
  .hy-cuisine-caption { padding: 8px 22px 18px; }
  .hy-cuisine-title { font-size: 15.5px; }
  .hy-cuisine-strip { flex-direction: column; gap: 3px; }
  .hy-cuisine-img { height: 240px; }

  .hy-band { height: 240px; }

  /* 応募セクション — 写真を上、テキストを下に / photo above text */
  .hy-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 40px 22px 44px;
    gap: 26px;
  }
  .hy-cta-photo { width: 100%; height: 200px; }
  .hy-cta-title { font-size: 19px; }
  .hy-cta-button {
    display: block;
    text-align: center;
    padding: 16px 24px;
    font-size: 15px;
  }
  .hy-cta-contact { font-size: 13.5px; }
}

/* ---------- 小型スマートフォン / SMALL PHONE (≤ 400px) ---------- */
@media (max-width: 400px) {
  .hy-hero { height: 340px; }
  .hy-hero-title { font-size: 20px; }

  .hy-lead { padding: 34px 18px 28px; }
  .hy-lead-jp { font-size: 17px; }

  .hy-role-text { padding: 28px 18px; }
  .hy-role-img { height: 220px; }

  .hy-details { padding: 34px 18px 14px; }
  .hy-details-title { font-size: 19px; }

  .hy-cuisine-caption { padding: 8px 18px 16px; }
  .hy-cuisine-img { height: 200px; }
  .hy-band { height: 200px; }

  .hy-cta { padding: 34px 18px 38px; }
  .hy-cta-photo { height: 170px; }
}