/* =====================================================================
 * 細大株式会社 TOPページ専用レスポンシブCSS
 * PCはノータッチ／tablet(1180px)・SP(800px)・小型SP(430px)の3断点
 * 参考: kamikumashinrin.com 同型ブレイクポイント
 * 読み込み順は最後（最後勝ち）
 * ===================================================================== */

/* =========================================================
 * オープニングアニメーション (PC+SP共通・kamikuma同型/saidaiトンマナ)
 * ========================================================= */
.load {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  z-index: 99999;
  background: linear-gradient(180deg, #BAE6FD 0%, #7DD3FC 50%, #0EA5E9 100%);
  overflow: hidden;
  pointer-events: none;
}
.load::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.5;
  pointer-events: none;
}
.load .bado01 {
  position: absolute;
  width: 120px;
  height: 170px;
  left: calc(50% + 140px);
  bottom: calc(50% + 30px);
  opacity: 1;
  margin: 0;
  transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 5;
  overflow: hidden;
}
.load .bado01 img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.load .bado02 {
  position: absolute;
  width: 140px;
  height: 200px;
  right: calc(50% + 80px);
  bottom: calc(50% - 60px);
  opacity: 0;
  margin: 0;
  z-index: 4;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.6));
  overflow: hidden;
}
.load .bado02 img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.load .bado03 {
  position: absolute;
  width: 220px;
  height: auto;
  left: calc(50% - 110px);
  bottom: 20px;
  margin: 0;
  transform: translateY(120%);
  transition: transform 0.7s cubic-bezier(0.17, 0.88, 0.30, 1.28);
  z-index: 6;
}
.load .bado03 img { width: 100%; height: auto; display: block; }
/* img sizing handled per-bado above */

.load .text {
  position: absolute;
  width: 92%;
  max-width: 720px;
  left: 0; right: 0;
  bottom: calc(50% + 200px);
  margin: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1), transform 0.6s cubic-bezier(0.17, 0.88, 0.30, 1.28);
  font-family: 'LineSeedJP_Eb','Yu Gothic',sans-serif;
  z-index: 10;
}
.load .text span {
  display: block;
  font-style: italic;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-shadow: 4px 4px 0 #0977D2, 8px 8px 0 #034F6D, 0 0 24px rgba(11,59,90,0.4);
  -webkit-text-stroke: 2px #0B3B5A;
}
.load .text .word1 { font-size: clamp(28px, 5vw, 56px); }
.load .text .word2 { font-size: clamp(40px, 8vw, 90px); margin: 4px 0; }
.load .text .word3 { font-size: clamp(28px, 5vw, 56px); }

/* loaded state（アニメ起動） */
.load.loaded { opacity: 0; transition: opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1) 3.5s; }
.load.loaded .bado01 { opacity: 0; transition-delay: 0.6s; }
.load.loaded .bado02 { animation: bling 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.9s forwards; }
.load.loaded .bado03 { transform: translateY(0); transition-delay: 2.2s; }
.load.loaded .text { opacity: 1; transform: translateY(0); transition-delay: 2.4s; }

/* finalState - 完全に非表示 */
.load.loaded02 { z-index: -9999; display: none; pointer-events: none; }

@keyframes bling {
  0% { opacity: 0; transform: scale(0.6); }
  20% { opacity: 1; transform: scale(1.1); }
  50% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(0.8); }
}

@media screen and (max-width: 800px) {
  .load { min-height: 100vh; }
  .load .bado01 {
    width: 80px;
    height: 114px;
    left: calc(50% + 70px);
    bottom: calc(50% + 30px);
  }
  .load .bado02 {
    width: 100px;
    height: 144px;
    right: calc(50% + 50px);
    bottom: calc(50% - 50px);
  }
  .load .bado03 {
    width: 180px;
    left: calc(50% - 90px);
    bottom: 20px;
  }
  .load .text { bottom: calc(50% + 130px); }
  .load .text .word2 { font-size: clamp(28px, 9vw, 50px); }
  .load .text .word1, .load .text .word3 { font-size: clamp(18px, 5vw, 32px); }
}

/* =========================================================
 * LAPTOP (max-width: 1400px) — ヘッダー寸法縮小＋メニュー位置調整
 * ========================================================= */
@media screen and (max-width: 1400px) {
  /* .head の縦中央寄せ用に高さ確保 */
  .head { height: 240px !important; padding-top: 36px !important; padding-left: 180px !important; display: flex !important; align-items: center !important; }
  .head .logo { width: 220px !important; height: 240px !important; }
  .head .logo img { width: 150px !important; }
  /* weather pill: コンパクト＋全コンテンツが収まるサイズ */
  .head .weather_area { width: 540px !important; height: 160px !important; }
  .head .weather_area .text_area { width: 540px !important; padding-top: 38px !important; padding-left: 30px !important; box-sizing: border-box !important; }
  .head .weather_area .text_area .b_txt { font-size: 14px !important; margin-bottom: 2px !important; }
  .head .weather_area .text_area .en.day { font-size: 28px !important; }
  /* メニュー: weather pill と被らないようサイズダウン＋左シフト強化 */
  .head .menu_area {
    width: 360px !important;
    transform: translateX(-290px) translateY(0) !important;
    grid-column-gap: 14px !important;
    grid-row-gap: 12px !important;
    top: 50% !important;
    margin-top: -8px !important;
  }
  .head .menu_area a .en { font-size: 20px !important; }
  .head .menu_area a .ja { font-size: 11px !important; padding: 3px 10px !important; }
  /* おすすめ製品: weather pill 内右半分にコンパクト配置 */
  .head .weather_area .recommend_area {
    position: absolute !important;
    top: 10px !important;
    left: 180px !important;
    right: auto !important;
    width: 340px !important;
    gap: 4px !important;
  }
  .head .weather_area .rec_title { font-size: 10px !important; margin: 0 0 2px !important; }
  .head .weather_area .rec_item { padding: 4px 8px !important; gap: 8px !important; border-radius: 10px !important; }
  .head .weather_area .rec_badge { width: 30px !important; height: 30px !important; font-size: 10px !important; flex: 0 0 30px !important; }
  .head .weather_area .rec_name { font-size: 9px !important; line-height: 1.2 !important; }
  .head .weather_area .rec_name strong { font-size: 12px !important; }
  #fv h1.fv-tit { left: 4vw !important; bottom: 40px !important; gap: 8px !important; }
  #fv h1.fv-tit > span { font-size: clamp(28px, 4vw, 44px) !important; padding: 12px 22px !important; }
  section.works .text_area, section.works .text_area p { font-size: 15px; }
  section.recruit .recruitment { padding: 50px 24px !important; }
  footer.footer .inr { padding: 50px 24px !important; }
  /* ローディング画面の "Have a PURE Water day!" がノートPCで上に見切れるのを防ぐ */
  .load .text { bottom: calc(50% + 100px) !important; }
  .load .text .word1,
  .load .text .word3 { font-size: clamp(24px, 4vw, 44px) !important; }
  .load .text .word2 { font-size: clamp(36px, 6.5vw, 72px) !important; }
  /* フッターのリンクリスト: 4リンクを2列で見やすく配置 */
  .footer .link_list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 40px !important;
    row-gap: 14px !important;
    max-width: 520px !important;
    width: auto !important;
    margin: 24px auto !important;
  }
  .footer .link_list div { margin-bottom: 0 !important; }
  .footer .link_list a { font-weight: 700 !important; }
  /* 中央の水キャラ＋シリンダー: ノートPCではリンクの右側に小さく配置（リンクを覆わない） */
  .footer > .bado {
    display: block !important;
    width: 180px !important;
    height: auto !important;
    bottom: 20px !important;
    top: auto !important;
    left: auto !important;
    right: 18% !important;
  }
  .footer > .bado figure,
  .footer > .bado img { width: 100% !important; height: auto !important; }
  /* 左右の木イラストは画面外側に大きく押し出して連絡情報と被らないように */
  .footer .lb_illust {
    right: auto !important;
    left: -450px !important;
    width: 700px !important;
  }
  .footer .rt_illust {
    left: auto !important;
    right: -450px !important;
    width: 700px !important;
  }
}

/* =========================================================
 * SHORT VIEWPORT — 縦が低いノートPCで上が切れないように追加調整
 * ========================================================= */
@media (max-height: 800px) and (min-width: 801px) {
  .load .text { bottom: calc(50% + 70px) !important; }
  .load .text .word2 { font-size: clamp(32px, 5.5vw, 60px) !important; }
  .load .text .word1,
  .load .text .word3 { font-size: clamp(20px, 3.6vw, 38px) !important; }
}
@media (max-height: 700px) and (min-width: 801px) {
  .load .text { bottom: calc(50% + 40px) !important; }
  .load .text .word2 { font-size: clamp(28px, 5vw, 52px) !important; }
  .load .text .word1,
  .load .text .word3 { font-size: clamp(18px, 3.2vw, 32px) !important; }
}

/* =========================================================
 * NARROW LAPTOP (max-width: 1200px) — さらに縮小
 * ========================================================= */
@media screen and (max-width: 1200px) and (min-width: 801px) {
  .head { height: 180px !important; padding-top: 20px !important; padding-left: 180px !important; }
  .head .logo { width: 200px !important; height: 220px !important; }
  .head .logo img { width: 140px !important; }
  .head .weather_area { width: 380px !important; height: 110px !important; }
  .head .weather_area .text_area { width: 150px !important; padding-top: 26px !important; padding-left: 32px !important; }
  .head .weather_area .text_area .b_txt { font-size: 13px !important; }
  .head .weather_area .text_area .en.day { font-size: 24px !important; }
  .head .menu_area {
    width: 320px !important;
    transform: translateX(-130px) !important;
    grid-column-gap: 12px !important;
    grid-row-gap: 8px !important;
  }
  .head .menu_area a .en { font-size: 16px !important; }
  .head .menu_area a .ja { font-size: 9px !important; padding: 2px 6px !important; }
  /* 1200px以下: 構造維持で少し縮小 */
  .head .weather_area { width: 540px !important; height: 160px !important; }
  .head .weather_area .text_area { padding-left: 28px !important; padding-top: 42px !important; }
  .head .weather_area .text_area .b_txt { font-size: 15px !important; }
  .head .weather_area .text_area .en.day { font-size: 30px !important; }
  .head .weather_area .recommend_area { width: 280px !important; left: 220px !important; }
  .head .weather_area .rec_badge { width: 34px !important; height: 34px !important; font-size: 11px !important; flex: 0 0 34px !important; }
  .head .weather_area .rec_name strong { font-size: 13px !important; }
}

/* =========================================================
 * SP (max-width: 800px) — 全体見直し版
 * ========================================================= */
@media screen and (max-width: 800px) {

  /* ===== 0. 横スクロール抑止＋全幅化 ===== */
  html, body { width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow-x: clip; }
  /* フッター下の70px余白を消す（.s-float フローティングCTA用だが要素が存在しないため不要） */
  body { padding-bottom: 0 !important; }
  main, .head, footer.footer, section { width: 100% !important; max-width: 100% !important; }

  /* スクロールバーをオーバーレイにして中央配置のズレを防ぐ */
  html { scrollbar-width: none !important; -ms-overflow-style: none !important; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

  /* ===== 1. ヘッダー：シンプル一段に ===== */
  .head { height: 64px !important; padding: 10px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: rgba(255,255,255,0.96) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(11,59,90,0.06); position: sticky; top: 0; z-index: 100; }
  .head .logo { width: 127px !important; height: auto !important; position: static !important; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
  .head .logo:before, .head .logo:after { display: none !important; }
  .head .logo img { width: 100% !important; height: auto !important; }
  .head .head_link-area { display: none !important; }
  .head .weather_area { display: none !important; }
  .head .menu_area { display: none !important; }
  .hamburger { position: fixed !important; top: 14px !important; right: 14px !important; z-index: 1100 !important; }

  /* ===== 2. MV (FV) — 画像と h1 を密着、空白を除去 ===== */
  #fv { height: auto !important; min-height: 0 !important; width: 100% !important; padding: 0 !important; position: relative; }
  #fv .slide_box, #fv .slides, #fv .swiper-container, #fv .swiper, #fv .fv-slide { width: 100% !important; }
  #fv .swiper-slide, #fv .slides > * { width: 100% !important; }
  #fv .swiper-slide img, #fv .slides img, #fv figure img { width: 100% !important; height: auto !important; display: block !important; }
  /* h1 は画像下端にオーバーレイ（kamikuma PCと同様、ただし #fv は auto高で空白ゼロ） */
  #fv h1.fv-tit {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    bottom: 14px !important;
    top: auto !important;
    margin: 0 !important;
    gap: 6px !important;
    max-width: calc(100vw - 32px) !important;
    width: auto !important;
    z-index: 30;
  }
  #fv h1.fv-tit > span { font-size: clamp(18px, 5vw, 26px) !important; padding: 8px 14px !important; }

  /* ===== 3. .intro ===== */
  .intro { padding: 0 !important; }
  .intro .inr { padding: 32px 16px 0 !important; }
  .intro .text_area { padding: 0 !important; font-size: 14px !important; line-height: 1.9 !important; }
  .intro .img_area { width: 100% !important; }
  .intro .img_area .img img { width: 100% !important; height: auto !important; }
  .intro .bg_area { width: 100% !important; }
  .intro .bg_area img { width: 100% !important; height: auto !important; }

  /* ===== 4. .works (重要：縦書きタイトル＋イラスト重なり修正) ===== */
  .works { margin-top: 0 !important; padding-bottom: 24px !important; }
  .works .slide_area { margin-top: 0 !important; margin-bottom: 0 !important; }
  .works .-w1300 { padding: 20px 16px !important; margin-top: 0 !important; }
  .works .-w1200 { padding: 8px 16px 0 !important; margin-top: 0 !important; }

  /* 縦書きを解除して横書きに */
  .works .-w1300 h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    height: auto !important;
  }
  .works .-w1300 h2 .tit01,
  .works .-w1300 h2 .tit02,
  .works .-w1300 h2 .tit03 {
    writing-mode: horizontal-tb !important;
    -ms-writing-mode: lr !important;
    text-orientation: mixed !important;
    display: block !important;
    text-align: center !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    transform: none !important;
    position: static !important;
  }
  .works .-w1300 h2 .tit01,
  .works .-w1300 h2 .tit02 { font-size: clamp(14px, 4vw, 18px) !important; color: #FFFFFF !important; }
  .works .-w1300 h2 .tit03 { font-size: clamp(28px, 8vw, 40px) !important; letter-spacing: 0.08em !important; color: #FFFFFF !important; }

  /* イラストエリアをタイトル下に */
  .works .-w1300 .illust_area {
    position: relative !important;
    width: 100% !important;
    margin: 0 auto 24px !important;
  }
  .works .-w1300 .illust_area figure.base img,
  .works .-w1300 .illust_area .base img {
    width: 100% !important;
    height: auto !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .works .-w1300 .illust_area .shine { display: none !important; }

  /* worksセクションの -w1200 を中央寄せ＆padding */
  .works .-w1200 {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 16px !important;
    text-align: center !important;
    display: block !important;
  }
  /* テキストカード — 中央寄せ */
  section.works .text_area {
    padding: 18px 16px !important;
    margin: 0 auto 24px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.08) !important;
    max-width: 320px !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  section.works .text_area p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #FFFFFF !important;
    text-align: left !important;
  }
  .works .item { width: 100% !important; }
  /* CTAボタンも中央寄せ */
  section.works .link_btn,
  .works .-w1200 .link_btn {
    margin: 8px auto !important;
    max-width: 320px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ===== 5. .interview (重要：タイトル2行＋空カード修正) ===== */
  .interview {
    padding: 40px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .interview .inr,
  body .interview .inr {
    padding-top: 0 !important;        /* 70pxの余白を削除 */
    padding-bottom: 0 !important;
  }

  .interview .tit_area { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; }
  .interview .tit_area .iv-sub { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; margin-bottom: 10px !important; }
  .interview .tit_area .iv-sub .tit01,
  .interview .tit_area .iv-sub .tit02 {
    font-size: 12px !important;
    padding: 4px 12px !important;
    display: inline-block !important;
  }

  /* "Have a PURE Water Day!" 2行ちゃんと分ける */
  .interview .tit_area .iv-tit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
  }
  .interview .tit_area .iv-tit .iv-tit-line1,
  .interview .tit_area .iv-tit .iv-tit-line2 {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.15 !important;
    display: block !important;
    width: 100% !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* "Have a PURE Water Day!" SPでは白文字＋濃紺シャドウで視認性確保 */
  .interview .tit_area .iv-tit,
  .interview .tit_area .iv-tit .iv-tit-line1,
  .interview .tit_area .iv-tit .iv-tit-line2 {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 0 #0B3B5A, 0 0 8px rgba(11,59,90,0.4) !important;
    -webkit-text-stroke: 0.5px #0B3B5A !important;
  }

  /* read_area カード本文の文字色が消える問題を修正 */
  .interview .inr,
  body .interview .inr {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .interview .read_area,
  body .interview .read_area {
    padding: 70px 18px 32px !important;  /* badoが上にオーバーラップする余白を確保 */
    margin: 50px auto 24px !important;   /* 横中央 */
    max-width: 320px !important;
    width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 6px 18px rgba(11,59,90,0.12);
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* badoキャラはカード上端の真上に独立配置（kamikuma同型） */
  .interview .read_area .illust {
    position: absolute !important;
    top: -52px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 10 !important;
  }
  .interview .read_area .illust img { width: 100% !important; height: auto !important; }
  /* read_area カード自体を中央揃えに（pill/text/btnすべて中央に） */
  body section.interview .read_area,
  .interview .read_area { text-align: center !important; }

  .interview .read_area .iv-c-tit {
    font-size: 14px !important;
    padding: 6px 14px !important;
    background: #FACC15 !important;
    color: #0B3B5A !important;
    display: block !important;
    width: fit-content !important;
    border-radius: 999px !important;
    margin: 0 auto 14px !important;
    text-align: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }
  body section.interview .read_area .b_txt,
  body .interview .read_area .b_txt {
    font-size: 14px !important;
    line-height: 1.85 !important;
    color: #0B3B5A !important;
    text-align: center !important;
    margin-bottom: 18px !important;
  }
  .interview .read_area .b_txt br { display: none !important; }
  /* CTAボタン: works CTA と完全に同じデザイン */
  .interview .read_area .link_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    height: 60px !important;
    width: 100% !important;
    max-width: 320px !important;
    background: #FFFFFF !important;
    color: #0B3B5A !important;
    border: 0 !important;
    border-radius: 40px !important;
    text-decoration: none !important;
    margin: 0 auto !important;
    box-shadow: 0 6px 14px rgba(11,59,90,0.14) !important;
    position: relative !important;
    overflow: visible !important;
  }
  .interview .read_area .link_btn::before,
  .interview .read_area .link_btn::after { display: none !important; content: none !important; }
  .interview .read_area .link_btn p {
    color: #0B3B5A !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: static !important;
    z-index: auto !important;
    flex: 0 0 auto !important;
    text-align: center !important;
  }
  /* 矢印: 右端の青ボーダー丸 */
  .interview .read_area .link_btn .arrow {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 2.7px solid #2282EF !important;
    border-radius: 999px !important;
    width: 35px !important;
    height: 35px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
  }
  .interview .read_area .link_btn .arrow img {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
  }

  /* swiperスライダー */
  .interview .slide_area { margin-top: 8px !important; }
  .interview .interview-slide .swiper-slide .img img { width: 100% !important; height: auto !important; }
  .interview .interview-slide .swiper-slide .text_area h4 { font-size: 16px !important; }
  .interview .tree { display: none !important; }

  /* ===== 6. .recruit — SPカード風UI改善 ===== */
  .recruit { padding: 0 !important; }
  section.recruit .recruitment {
    padding: 32px 16px 36px !important;
    position: relative;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .recruit .recruitment .inr,
  body .recruit .recruitment .inr {
    padding: 28px 22px 30px !important;
    margin: 0 auto !important;
    max-width: 340px !important;
    width: 100% !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 24px rgba(11,59,90,0.16) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  /* タイトル：無料水質検査 + 受付中 を密着＋黄色アクセント */
  section.recruit .recruitment h2,
  body section.recruit .recruitment h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }
  section.recruit .recruitment h2 .text {
    font-size: clamp(22px, 6.5vw, 28px) !important;
    line-height: 1.15 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-shadow: 1px 1px 0 rgba(11,59,90,0.3) !important;
    display: block !important;
  }
  /* 「受付中」を黄色ピル風アクセントに */
  section.recruit .recruitment h2 .text:nth-of-type(2) {
    background: #FACC15 !important;
    color: #0B3B5A !important;
    padding: 5px 18px !important;
    border-radius: 999px !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-shadow: none !important;
    box-shadow: 0 3px 8px rgba(11,59,90,0.18) !important;
    display: inline-block !important;
    width: fit-content !important;
    margin: 0 !important;
  }
  /* badoキャラ：タイトルとテキストの間にコンパクト配置 */
  section.recruit .recruitment h2 .illust {
    width: 72px !important;
    height: 72px !important;
    position: static !important;
    transform: none !important;
    margin: 4px auto 8px !important;
    display: block !important;
  }
  section.recruit .recruitment h2 .illust img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  section.recruit .recruitment .c_txt,
  section.recruit .recruitment .c-s_txt {
    font-size: 13px !important;
    line-height: 1.85 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }
  /* recruit illusts (波形イラスト) はSP非表示 */
  section.recruit .recruitment .illusts { display: none !important; }
  .recruit .recruitment .inr * { margin-top: 0 !important; }
  /* 復元 */
  .recruit .recruitment .inr h2 { margin-bottom: 14px !important; }
  .recruit .recruitment .inr .c_txt { margin-bottom: 12px !important; }
  .recruit .recruitment .inr .c-s_txt { margin-bottom: 18px !important; }
  /* recruit CTA — interview CTA と同型・矢印込みでパディング確保 */
  .recruit .recruitment .link_btn,
  .recruit .recruitment .inr .link_btn,
  body .recruit .recruitment .link_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 60px 0 24px !important;
    font-size: 16px !important;
    height: 60px !important;
    width: 100% !important;
    max-width: 320px !important;
    background: #FFFFFF !important;
    color: #0B3B5A !important;
    border: 0 !important;
    border-radius: 40px !important;
    text-decoration: none !important;
    margin: 4px auto 0 !important;
    box-shadow: 0 6px 14px rgba(11,59,90,0.18) !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .recruit .recruitment .link_btn::before,
  .recruit .recruitment .link_btn::after { display: none !important; content: none !important; }
  .recruit .recruitment .link_btn p,
  .recruit .recruitment .link_btn .text {
    color: #0B3B5A !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    flex: 1 !important;
  }
  .recruit .recruitment .link_btn .arrow {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 2.7px solid #2282EF !important;
    border-radius: 999px !important;
    width: 35px !important;
    height: 35px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
  }
  .recruit .recruitment .link_btn .arrow img {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
  }
  .recruit .slide_area,
  body .recruit .slide_area { margin: 0 !important; padding: 0 !important; }
  .recruit .text_deg,
  .recruit .text_deg.-rev {
    font-size: clamp(11px, 3vw, 14px) !important;
    padding: 6px 0 !important;
    transform: rotate(-6deg) !important;
  }

  /* キャラクターのはみ出しを制御 */
  .recruit .recruitment > .illust:not(h2 .illust),
  .recruit .character_peek {
    display: none !important;
  }

  /* ===== 7. .news ===== */
  .news { padding: 30px 16px 30px !important; margin: 0 !important; }
  .news .inr { padding: 0 !important; }
  .news .circle { display: none !important; }
  .news .news-list .item { padding: 14px 0 !important; font-size: 14px !important; }
  .news h2 { font-size: clamp(32px, 9vw, 48px) !important; }
  .news .sub_tit { font-size: 13px !important; padding: 4px 12px !important; }

  /* ===== 8. footer — kamikuma同型SPレイアウト ===== */
  footer.footer {
    padding: 5px 5px 0 !important;
    background: #0B3B5A !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    position: relative !important;
    overflow: visible !important;
  }
  footer.footer .w_bg {
    width: calc(100% - 10px) !important;
    border-radius: 25px 25px 0 0 !important;
    margin: 0 auto !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #E0F2FE 100%) !important;
    position: relative !important;
    z-index: 5 !important;
  }
  footer.footer .inr,
  body footer.footer .inr,
  body footer.footer .w_bg .inr,
  footer.footer .w_bg .inr {
    width: 82% !important;
    max-width: 100% !important;
    padding: 50px 0 0 !important;
    margin: 0 auto !important;
    display: block !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
    gap: 0 !important;
    position: relative !important;
    background: transparent !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  /* PC inline CSS の flex order を SP では無効化 */
  footer.footer .inr > *,
  body footer.footer .inr > * {
    order: 0 !important;
    flex: initial !important;
  }
  /* info_area の内部 info も display: flex を解除 */
  footer.footer .info_area,
  body footer.footer .info_area {
    display: block !important;
    flex: initial !important;
  }

  /* logo_area */
  footer.footer .inr .logo_area,
  footer.footer .logo_area {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    flex: initial !important;
  }
  footer.footer .inr .logo_area h2,
  footer.footer .logo_area h2 {
    width: 76% !important;
    margin: 0 auto 30px !important;
  }
  footer.footer .inr .logo_area h2 img,
  footer.footer .logo_area h2 img,
  body footer.footer .logo_area h2 img {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    filter: none !important;          /* PC側のwhite反転を解除 */
    -webkit-filter: none !important;
    opacity: 1 !important;
  }
  footer.footer .inr .logo_area p,
  footer.footer .logo_area p {
    font-size: 14px !important;
    line-height: 1.57 !important;
    color: #0B3B5A !important;
    text-align: center !important;
  }

  /* top-bado: 白いパネルの上に左から覗くキャラ */
  footer.footer .top-bado {
    position: absolute !important;
    width: 109px !important;
    height: auto !important;
    left: -10px !important;
    top: -69px !important;
    z-index: 20 !important;
  }
  footer.footer .top-bado img { width: 100%; height: auto; display: block; }

  /* info_area: 縦並びの問い合わせブロック */
  footer.footer .info_area {
    margin: 0 !important;
    flex: initial !important;
    width: 100% !important;
  }
  footer.footer .info_area .info,
  body footer.footer .info_area .info,
  body footer.footer .info_area .info:nth-child(1),
  body footer.footer .info_area .info:nth-child(2),
  body footer.footer .info_area .info:nth-child(3),
  body footer.footer .info_area .info:nth-child(4) {
    display: block !important;
    padding: 25px 0 19px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(11,59,90,0.18) !important;
    border-radius: 0 !important;
    text-align: center !important;
    gap: 0 !important;
    align-items: initial !important;
    flex-direction: initial !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  footer.footer .info_area .info:last-child,
  body footer.footer .info_area .info:last-child { border-bottom: 1px solid rgba(11,59,90,0.18) !important; }
  footer.footer .info_area .info .gb_txt,
  body footer.footer .info_area .info .gb_txt,
  body footer.footer .info_area .info:nth-child(1) .gb_txt,
  body footer.footer .info_area .info:nth-child(2) .gb_txt,
  body footer.footer .info_area .info:nth-child(3) .gb_txt {
    display: table !important;
    font-size: 13px !important;
    padding: 6px 18px !important;
    width: auto !important;
    border-radius: 22px !important;
    margin: 0 auto 12px !important;
    background: #034F6D !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    opacity: 1 !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
  }
  body footer.footer .info_area .info .en,
  body footer.footer .info_area .info a.en,
  body footer.footer .info_area .info a,
  body footer.footer .info_area .info:nth-child(1) .en,
  body footer.footer .info_area .info:nth-child(2) .en,
  body footer.footer .info_area .info:nth-child(2) a.en,
  body footer.footer .info_area .info:nth-child(3) .en,
  body footer.footer .info_area .info:nth-child(3) a.en {
    display: block !important;
    text-align: center !important;
    padding: 0 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0977D2 !important;
    text-decoration: none !important;
    word-break: break-all !important;
    line-height: 1.2 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    text-shadow: none !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
  }
  /* Tel. プレフィックスを電話番号の前に付与（kamikuma同型） */
  body footer.footer .info_area .info:nth-child(1) a.en[href^="tel"]::before,
  body footer.footer .info_area .info:nth-child(1) a[href^="tel"]::before {
    content: 'Tel. ' !important;
    display: inline !important;
    color: #0977D2 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin: 0 4px 0 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
  }
  /* 受付:平日 ::after は表示する（kamikumaにはないが残す） */
  body footer.footer .info_area .info:nth-child(1)::after {
    content: '受付：平日 9:00 – 18:00' !important;
    display: block !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    color: rgba(11,59,90,0.7) !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
  }
  footer.footer .info_area .info a:before,
  footer.footer .info_area .info a:after { display: none !important; content: none !important; }

  /* link_list: 2カラム左寄せ（kamikuma同型）— 上下の余白を均等に */
  footer.footer .link_list,
  body footer.footer .link_list {
    width: 100% !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    margin: 40px auto 40px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 16px !important;
    grid-row-gap: 14px !important;
    flex: initial !important;
    text-align: left !important;
  }
  footer.footer .link_list div,
  body footer.footer .link_list div {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  footer.footer .link_list a,
  body footer.footer .link_list a {
    display: inline-block !important;
    padding: 0 0 0 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0B3B5A !important;
    text-decoration: none !important;
    position: relative !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }
  footer.footer .link_list a .icon,
  body footer.footer .link_list a .icon {
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    transform: none !important;
    width: 13px !important;
    height: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  footer.footer .link_list a .icon img,
  body footer.footer .link_list a .icon img {
    width: 100% !important;
    height: auto !important;
    filter: brightness(0) saturate(100%) invert(31%) sepia(96%) saturate(1640%) hue-rotate(193deg) brightness(94%) contrast(101%) !important;
  }

  /* SPでは bado/lb_illust/rt_illust 装飾はすべて非表示 */
  footer.footer .bado,
  footer.footer .lb_illust,
  footer.footer .rt_illust,
  footer.footer .top-bado,
  body footer.footer .bado,
  body footer.footer .lb_illust,
  body footer.footer .rt_illust,
  body footer.footer .top-bado { display: none !important; }

  /* copyright */
  footer.footer .copy {
    display: none !important;
  }
  footer.footer .copy img { width: 100%; height: auto; display: block; }

  /* 追従ヘッダーはSPでは非表示 */
  .saidai-sticky { display: none !important; }

  /* ===== 9. グローバルナビ（ハンバーガー展開時）— kamikuma同型 ===== */
  /* ハンバーガー本体（×開閉ボタン） — kamikumaのアニメ無効化＋クリーンな3バー/X */
  body .hamburger,
  .hamburger {
    width: 36px !important;
    height: 28px !important;
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 1200 !important;
    display: block !important;
  }
  body .hamburger .border,
  .hamburger .border {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: 3px !important;
    background: #0B3B5A !important;
    border: 0 !important;
    border-radius: 2px !important;
    transition: transform 0.35s ease, opacity 0.25s ease, top 0.35s ease, background 0.25s ease !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform-origin: 50% 50% !important;
    margin: 0 !important;
  }
  /* 閉じている状態（デフォルト）: 3本の横線 */
  body .hamburger .border:nth-child(1),
  .hamburger .border:nth-child(1) { top: 4px !important; bottom: auto !important; transform: rotate(0) !important; }
  body .hamburger .border:nth-child(2),
  .hamburger .border:nth-child(2) { top: 13px !important; bottom: auto !important; transform: rotate(0) !important; opacity: 1 !important; }
  body .hamburger .border:nth-child(3),
  .hamburger .border:nth-child(3) { top: 22px !important; bottom: auto !important; transform: rotate(0) !important; }

  /* 開いている状態（nav-open）: × アイコン */
  body.nav-open .hamburger .border:nth-child(1) {
    top: 13px !important;
    transform: rotate(45deg) !important;
    background: #0977D2 !important;
  }
  body.nav-open .hamburger .border:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  body.nav-open .hamburger .border:nth-child(3) {
    top: 13px !important;
    transform: rotate(-45deg) !important;
    background: #0977D2 !important;
  }

  /* global-nav: フルスクリーンオーバーレイ */
  .global-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 1050 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #E0F2FE 100%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 70px 16px 40px !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  body.nav-open .global-nav { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  body:not(.nav-open) .global-nav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

  /* nav_inr: コンテナ */
  .global-nav .nav_inr {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .global-nav .nav_inr::before,
  .global-nav .nav_inr::after { display: none !important; content: none !important; }

  /* ロゴ：中央寄せ */
  .global-nav .logo {
    display: block !important;
    width: 220px !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
    position: relative !important;
  }
  .global-nav .logo a { display: block !important; }
  .global-nav .logo img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    filter: none !important;
  }

  /* 住所：中央寄せ */
  .global-nav .c_txt {
    font-size: 13px !important;
    text-align: center !important;
    color: #0B3B5A !important;
    line-height: 1.7 !important;
    margin: 0 0 30px !important;
    padding: 0 0 24px !important;
    border-bottom: 1px solid rgba(11,59,90,0.18) !important;
  }
  .global-nav .c_txt::before,
  .global-nav .c_txt::after { display: none !important; content: none !important; }

  /* ナビリスト：2カラム+区切り線（kamikuma同型） */
  .global-nav ul {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  .global-nav ul li {
    position: relative !important;
    width: 47% !important;
    border-bottom: 1px solid rgba(11,59,90,0.18) !important;
    margin: 0 !important;
    list-style: none !important;
  }
  /* 3番目だけ全幅 (kamikumaパターン) */
  .global-nav ul li:nth-child(3) { width: 100% !important; }

  .global-nav ul li a {
    position: relative !important;
    display: block !important;
    padding: 16px 0 16px 28px !important;
    color: #0B3B5A !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
  }
  .global-nav ul li .icon {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .global-nav ul li .icon img {
    width: 100% !important;
    height: auto !important;
    vertical-align: top !important;
    /* 元アイコンを saidai 青に着色 */
    filter: brightness(0) saturate(100%) invert(31%) sepia(96%) saturate(1640%) hue-rotate(193deg) brightness(94%) contrast(101%) !important;
  }

  /* 装飾類はSPでは非表示 */
  .global-nav .bado,
  .global-nav .circle_area,
  .global-nav .lb_illust,
  .global-nav .rt_illust,
  .global-nav .copy,
  .global-nav .s-footer-sitemap { display: none !important; }

  /* ナビ下のCTAエリア */
  .global-nav .nav-cta-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 32px 0 0 !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(11,59,90,0.18) !important;
  }
  .global-nav .nav-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    text-decoration: none !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-align: center !important;
  }
  /* 電話CTA: 白背景・濃紺ボーダー */
  .global-nav .nav-cta--tel {
    background: #FFFFFF !important;
    border: 2px solid #0B3B5A !important;
    color: #0B3B5A !important;
    box-shadow: 0 4px 12px rgba(11,59,90,0.12) !important;
  }
  .global-nav .nav-cta--tel .nav-cta__label {
    font-size: 12px !important;
    color: #034F6D !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
  }
  .global-nav .nav-cta--tel .nav-cta__value {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0977D2 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
    font-family: 'Belanosima', 'Yu Gothic', sans-serif !important;
  }
  .global-nav .nav-cta--tel .nav-cta__hours {
    font-size: 11px !important;
    color: rgba(11,59,90,0.65) !important;
    margin-top: 2px !important;
  }
  /* 無料水質検査CTA: 黄色グラデ */
  .global-nav .nav-cta--test {
    background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%) !important;
    color: #0B3B5A !important;
    border: 0 !important;
    box-shadow: 0 6px 16px rgba(245,158,11,0.35) !important;
    flex-direction: row !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  .global-nav .nav-cta--test .nav-cta__icon { font-size: 18px !important; }
  /* お問い合わせCTA: 青塗り */
  .global-nav .nav-cta--contact {
    background: #0977D2 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(9,119,210,0.3) !important;
    flex-direction: row !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  .global-nav .nav-cta--contact .nav-cta__icon { font-size: 16px !important; }
}

/* =========================================================
 * 小型SP (max-width: 430px) — 文字サイズの微調整
 * ========================================================= */
@media screen and (max-width: 430px) {
  #fv h1.fv-tit > span { font-size: clamp(18px, 6vw, 26px) !important; padding: 8px 14px !important; }
  .head .logo { width: 110px !important; }
  .interview .tit_area .iv-tit .iv-tit-line1,
  .interview .tit_area .iv-tit .iv-tit-line2 { font-size: clamp(22px, 7vw, 30px) !important; }
  section.recruit .recruitment h2,
  section.recruit .recruitment h2 .text { font-size: clamp(22px, 6.5vw, 28px) !important; }
  .works .-w1300 h2 .tit03 { font-size: clamp(26px, 8vw, 36px) !important; }
}