/* =========================================
   LIBFORK Smartphone Override (Android)
   - PC用 style.css の「後に」読み込む前提
   - Androidはフォント/行間/タップ領域を少し厚めに
========================================= */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {


html{
  /* Android Chromeで文字サイズが勝手に変わるのを抑えたい場合 */
  -webkit-text-size-adjust: 100%;
}

body{
  overflow-x: hidden;
}

/* ---------- 共通コンテナ ---------- */
.container{
  width: min(1120px, calc(100% - 24px));
}

/* ---------- Header ---------- */
.site-header{
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  height: auto !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  z-index: 2000;
}

/* ヘッダー内：縦積み */
.header__inner{
  padding: 10px 0 !important;
  gap: 10px !important;
  flex-wrap: wrap;
}

.brand__logo{
  height: 28px !important;
}

/* ナビ：折り返し */
.gnav{
  width: 100%;
  order: 3;
  justify-content: center;
  margin: 4px 0 0 !important;
  margin-top: 0 !important;
  gap: 14px;
  flex-wrap: wrap;
}

.gnav__link{
  font-size: 12px !important;
  padding: 9px 7px !important; /* Androidは少しタップ厚め */
}

/* CTA：折り返し */
.header-cta{
  width: 100%;
  order: 2;
  justify-content: center;
  margin-left: 0 !important;
  gap: 8px !important;
  flex-wrap: wrap;
}

.header-phone img{
  height: 34px !important;
}

.header-img-btn img{
  height: 46px;
  width: auto;
  display: block;
}

/* ---------- Hero ---------- */
.hero__inner{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding-bottom: 18px;
}

.hero__copy{
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding-top: 16px;
}

.hero__title{
  margin-top: 0 !important;
  font-size: 27px !important;
  line-height: 1.28;
  letter-spacing: .2px;
  font-weight: 900; /* Androidは見え方が軽くなる事があるので少し上げる */
}

.hero__lead{
  margin: 12px 0 10px !important;
  font-size: 14px !important;
  line-height: 1.75;
  font-weight: 700;
}

.btn-p{
  position: static !important;
  width: 100% !important;
  height: 50px !important;      /* Androidは指で押しやすい */
  line-height: 50px !important;
  margin-top: 10px !important;
  left: auto !important;
  top: auto !important;
  border-radius: 10px !important;
  text-align: center !important;
  padding-left: 0 !important;
  font-size: 15px !important;
}

.hero__bg{
  background-position: center top;
  min-height: 520px;
}

/* ---------- Sections ---------- */
.section{
  padding: 44px 0 !important;
}

.section--reasons{
  margin-top: 0 !important;
}

.section__title{
  font-size: 22px !important;
}

/* ---------- Reasons ---------- */
.reason-grid{
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding-bottom: 10px !important;
  max-width: 720px;
}

.reason-card:nth-child(n+3){
  margin-top: 0 !important;
}

.reason-card{
  padding: 22px 18px 18px !important;
  border-radius: 16px !important;
}

.reason-card__num{
  width: 96px !important;
  height: 38px !important;
  font-size: 22px !important;
  top: -14px !important;
}

.reason-card__icon img{
  width: 64px !important;
  height: 64px !important;
}

.reason-card__title{
  font-size: 16px !important;
}

.reason-card__text{
  font-size: 13px !important;
  line-height: 1.8;
}

/* ---------- Banner ---------- */
.section--banner{
  margin-top: 0 !important;
  padding-top: 18px !important;
}

/* ---------- Contact ---------- */
.section--contact{
  margin-top: 0 !important;
}

.contact{
  grid-template-columns: 1fr !important;
  padding: 18px !important;
  max-width: 720px !important;
}

.contact__title{
  font-size: 26px !important;
}

.contact__text{
  font-size: 14px !important;
  line-height: 1.75;
}

.contact__actions{
  padding: 10px !important;
}

.contact-cta img{
  border-radius: 14px !important;
}

/* ---------- Footer ---------- */
.footer__bottom{
  justify-content: center !important;
}

.footer__addr{
  text-align: center !important;
  font-size: 12px !important;
}


/* =========================================
   LIBFORK Smartphone Override (iOS)
   - PC用 style.css の「後に」読み込む前提
   - HTML/PHPは触らず、崩れやすい箇所を上書き
========================================= */

/* iOSは勝手に文字拡大される事があるので抑制 */
html{
  -webkit-text-size-adjust: 100%;
}

/* iOSのセーフエリア対応（ノッチ等） */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body{
  overflow-x: hidden;
}

/* ---------- 共通コンテナ ---------- */
.container{
  width: min(1120px, calc(100% - 24px));
}

/* ---------- Header（PCはabsolute固定＆幅固定なので、SPでは通常フローに戻す） ---------- */
.site-header{
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  height: auto !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  z-index: 2000;
  padding-top: var(--safe-top);
}

/* ヘッダー内を縦積みにして、溢れないように */
.header__inner{
  padding: 10px 0 !important;
  gap: 10px !important;
  flex-wrap: wrap;
}

.brand__logo{
  height: 28px !important;
}

/* ナビは折り返し2行まで許容 */
.gnav{
  width: 100%;
  order: 3;
  justify-content: center;
  margin: 4px 0 0 !important;
  margin-top: 0 !important;
  gap: 14px;
  flex-wrap: wrap;
}

.gnav__link{
  font-size: 12px !important;
  padding: 8px 6px !important;
}

/* CTAは横スクロールしないように縮める */
.header-cta{
  width: 100%;
  order: 2;
  justify-content: center;
  margin-left: 0 !important;
  gap: 8px !important;
  flex-wrap: wrap;
}

.header-phone img{
  height: 34px !important;
}

.header-img-btn img{
  height: 44px;
  width: auto;
  display: block;
}

/* ---------- Hero ---------- */
/* PC版はhero内で絶対配置や大きなマージンがあるのでSPで整える */
.hero{
  position: relative !important;
}

.hero__inner{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding-bottom: 18px;
}

.hero__copy{
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding-top: 18px;
}

/* タイトル：PCのmargin-top:170px を無効化 */
.hero__title{
  margin-top: 0 !important;
  font-size: 28px !important;
  line-height: 1.25;
  letter-spacing: .2px;
}

.hero__lead{
  margin: 14px 0 10px !important;
  font-size: 14px !important;
  font-weight: 700;
}

/* 検索ボタン（.btn-p）が absolute なので、SPでは通常フローに戻す */
.btn-p{
  position: static !important;
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  margin-top: 10px !important;
  left: auto !important;
  top: auto !important;
  border-radius: 10px !important;
  text-align: center !important;
  padding-left: 0 !important;
  font-size: 15px !important;
}

/* 背景画像は高さが不安定になりがちなので最小高さを確保 */
.hero__bg{
  background-position: center top;
  min-height: 520px;
}

/* ---------- REASONS ---------- */
.section{
  padding: 44px 0 !important;
}

/* PCの margin-top:180px を無効化して詰める */
.section--reasons{
  margin-top: 0 !important;
}

.section__title{
  font-size: 22px !important;
}

.reason-grid{
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding-bottom: 10px !important;
  max-width: 680px;
}

/* PCで3枚目以降に margin-top 付けてるのをSPでは解除 */
.reason-card:nth-child(n+3){
  margin-top: 0 !important;
}

.reason-card{
  padding: 22px 18px 18px !important;
  border-radius: 16px !important;
}

.reason-card__num{
  width: 96px !important;
  height: 38px !important;
  font-size: 22px !important;
  top: -14px !important;
}

.reason-card__icon img{
  width: 64px !important;
  height: 64px !important;
}

.reason-card__title{
  font-size: 16px !important;
}

.reason-card__text{
  font-size: 13px !important;
  line-height: 1.75;
}

/* ---------- Banner ---------- */
.section--banner{
  margin-top: 0 !important;
  padding-top: 18px !important;
}

/* ---------- Contact ---------- */
.section--contact{
  margin-top: 0 !important;
}

.contact{
  grid-template-columns: 1fr !important;
  padding: 18px !important;
  max-width: 680px !important;
}

.contact__title{
  font-size: 26px !important;
}

.contact__text{
  font-size: 14px !important;
}

.contact__actions{
  padding: 10px !important;
}

.contact-cta img{
  border-radius: 14px !important;
}

/* ---------- Footer ---------- */
.site-footer{
  padding-bottom: calc(28px + var(--safe-bottom));
}

.footer__bottom{
  justify-content: center !important;
}

.footer__addr{
  text-align: center !important;
  font-size: 12px !important;
}

/* ===========================
   SP Fix (Header overflow + Hero button overlap)
=========================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  /* --- 1) ヘッダー横はみ出し対策 --- */
  .site-header{
    position: sticky !important;
    top: 0 !important;

    /* これが決定打：PC用の固定幅を殺す */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;

    border-radius: 0 !important;
    height: auto !important;
  }

  /* ヘッダー内も折り返しを許可して詰める */
  .header__inner{
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  /* PCで位置をいじってる分をSPでリセット */
  .gnav{
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    order: 3;
  }

  .header-cta{
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    order: 2;
  }

  /* --- 2) メイン画像の検索ボタンが文字に被る対策 --- */
  .btn-p{
    position: static !important;   /* absoluteを解除 */
    top: auto !important;
    left: auto !important;
    margin-top: 12px !important;   /* 200pxを解除して自然な位置へ */

    width: 100% !important;
    max-width: 420px;              /* 好みで。不要なら消してOK */
    height: 50px !important;
    line-height: 50px !important;

    text-align: center !important;
    padding-left: 0 !important;
  }

  /* ボタンの親も自然に並ぶように（念のため） */
  .clinkk, .clink{
    display: block;
  }

  /* タイトルも少しだけ詰めるとさらに安全 */
  .hero__title{
    margin-top: 0 !important;      /* 余計な上マージンがあれば殺す */
  }
}
/* =========================
   Header：電話＋WEBボタンを縦並び
========================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  /* 3つを横並び */
  .header-cta{
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  /* 3要素を同じ幅に */
  .header-cta > *{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* 画像ボタンは幅にフィットさせる */
  .header-cta img{
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 電話ブロックも“ボタン化”して高さを揃える（見た目の統一） */
  .header-phone{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 6px !important;
    border-radius: 12px;
    /* 背景を付けたいなら↓（不要なら消してOK） */
    /* background: #fff; */
  }

  /* 電話番号が長いので少しだけ縮める */
  .header-phone{
    font-size: 12px;
    line-height: 1.2;
  }
}

 /* 背景画像の場合（hero背景） */
  .hero__bg{
    background-size: cover !important;         /* 画面いっぱいに */
    background-position: 75% 50% !important;   /* ←数値を動かして調整 */
  }

  /* imgタグの場合（フォークリフト画像が<img>なら） */
  .hero img, .hero__img img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;              /* ここが“疑似トリミング” */
    object-position: 75% 50% !important;       /* ←数値を動かして調整 */
  }

  .hero__title,
  .hero__lead{
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.35); /* 背景が明るくても読める */
  }

  /* 必要なら本文も白寄せ */
  .hero__copy,
  .hero__copy p{
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
  }


@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  /* 下部固定CTA：フォークリフトを再検索する */
  .btn-p{
    position: fixed !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 24px) !important;
    max-width: 480px;

    z-index: 3000;
    margin: 0 !important;

    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }

  /* CTA分、本文の下に余白を確保（隠れ防止） */
  body{
    padding-bottom: 96px;
  }
}


}