/* ==========================================================================
   宮岸(株) トップ — レスポンシブ統合版(忠実移植)
   数値ソース:
     ~1023px : SP_web414px.html + index.css の値をそのまま使用
     1024px~ : PC_web1366px.html + web13664.css の値をそのまま使用
   追加の装飾・ホバー・独自解釈なし。
   ========================================================================== */

/* Tailwind Preflight と元デザインの画像既定値の差だけを補正 */
img {
  /* Tailwind Preflight（main.css）が img を display:block / max-width:100% に
     変更するため、このページ本来のブラウザ既定挙動へ戻す。
     これを入れないと、インラインの矢印画像(.p-card__arrow 等)が独立行に落ちる。
     ※ display:block や幅高を明示している個別ルールはそのまま優先される。 */
  display: inline;
  max-width: none;
  vertical-align: bottom;
}
/* SP左上ロゴ: inline化した影響でline-height分の余白が乗り、
   親<a>(top:16px)よりロゴ自体が下にずれるため、ここだけblockに戻す。 */
#site-mobile-header img {
  display: block;
}

/* ==========================================================================
   MV
   SP: 27404.svg 414x768 / ロゴ26217.svg 76.6x44.3 top361.87
   PC: 51-1.svg 1730x1176 top-35 left-297(=50%-980px)
   ========================================================================== */
/* MV背景: タイル面(::before)を右上へゆっくりループ移動。
   SPは旧表示比の約1.5倍、PCは1/2で表示し、1ループで各1タイル分移動する。 */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 4347px); /* 3タイル分の外余白(1.2倍後) */
  width: calc(100% + 8694px);
  height: calc(100% + 2484px);
  background: url("./Assets/bg-mv_01.webp") repeat;
  background-size: 1449px 828px; /* 1207.5x690の1.2倍 */
  animation: mv-drift-sp 60s linear infinite;
}
@keyframes mv-drift-sp {
  to {
    transform: translate3d(1449px, -828px, 0); /* 1タイル分(1.2倍後) */
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }
}
@media (min-width: 1024px) {
  .hero::before {
    /* 等倍スケール: 3220x1840の@2x書き出し → CSS 1610x920 */
    top: 0;
    left: calc(50% - 3220px); /* 2タイル分の外余白 */
    width: calc(100% + 6440px);
    height: calc(100% + 1840px);
    background-size: 1610px 920px; /* 7:4 */
    animation: mv-drift-pc 60s linear infinite;
  }
  @keyframes mv-drift-pc {
    to {
      transform: translate3d(1610px, -920px, 0); /* atan(920/1610)≒29.7度 */
    }
  }
}

@media (min-width: 1366px) {
  .hero::before {
    /* 1366px時の見え方を基準に、画面幅に合わせて背景タイルを拡大する */
    left: calc(50% - 235.7247437775vw); /* タイル幅の2倍 */
    width: calc(100% + 471.4494875549vw); /* タイル幅の4倍 */
    height: calc(100% + 134.6998535871vw); /* タイル高の2倍 */
    background-size: 117.8623718887vw 67.3499267936vw;
    animation-name: mv-drift-pc-wide;
  }
  @keyframes mv-drift-pc-wide {
    to {
      transform: translate3d(117.8623718887vw, -67.3499267936vw, 0);
    }
  }
}

/* ---------- MENUボタン (SP .div66/.div67/.icon48/.menu と同値) ---------- */

/* ---------- ナビパネル (PC .div97 一式と同値) ----------
   SP: 元HTMLには存在しないため、閉時は非表示。開時のみ同パネルを表示 */
/* ==========================================================================
   わたしたちについて
   SP: .div24 414x768 fs14 / PC: .div68 1368x790 fs18(継承)
   ========================================================================== */
/* PLAY JOB! 破裂アニメ(svgに差し替え。位置・寸法は旧img(.about__slogan)と同値) */
.about__slogan--shatter svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
  opacity: 1;
  transition: opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
.about.is-playjob-drawn .about__slogan--shatter svg {
  opacity: 0;
}
.about.is-playjob-drawn .about__slogan-image {
  opacity: 1;
}
.about.is-playjob-drawn .about__slogan-image.is-changing {
  opacity: 0;
}
/* ==========================================================================
   幕間ビジュアル (SP/PC とも高さ530)
   ========================================================================== */
/* 固定背景: clip-path窓 + fixed画像(iOS Safari含め全環境で動作) */
.visual-band-clip {
  display: block;
  width: 100%;
  /* SP: 414px時に天地530px。414px未満はアスペクト比で追従して縮小、
     414px超は天地530pxで頭打ちにする(414/530のまま伸ばすと1023px手前で
     天地が1300px超まで膨張してしまうため) */
  aspect-ratio: 414 / 530;
  max-height: 530px;
  clip-path: inset(0); /* fixedの子をこの窓でクリップ */
  position: relative;
}
.visual-band {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .visual-band-clip {
    /* PC: 1366px時に天地530px。他の幅はアスペクト比で追従 */
    aspect-ratio: 1366 / 530;
  }
}
@media (min-width: 1366px) {
  .visual-band-clip {
    /* 1366px以上はmax-height:530pxで頭打ちにせず、アスペクト比のまま天地も広げる */
    max-height: none;
  }
}

/* ==========================================================================
   取扱製品＆メーカー (背景 #f2f2f2)
   SP: 全高1966 見出しtop100.6 カード2列(198x150) ボタン354x60
   PC: 全高1864 見出しtop100 カード3列(250幅) ボタン963x60 right54
   ========================================================================== */
/* 見出し: 和文・英文とも中央揃えの縦積み(確定デザイン) */
/* 最終行(文字+▶)は折り返さずひとまとまり */
/* ▶: ベースライン揃え(ブラウザ標準)。下端が文字のベースラインに乗り、
   ▶中心≒和文の視覚中心。全OS共通の仕様で決定論的。
   ※グローバルの img{vertical-align:bottom} を明示的に打ち消す */

/* 1366px未満の追加調整（忠実移植の1024/414px設計値には無いため、ここで独自に補完）:
   左固定メニュー(230px)が残る1024〜1365pxは、固定963px幅の3列グリッドが
   収まりきらず(963+230=1193pxが必要)、実測でも1193px未満から横スクロールが発生していた。
   3列は維持したまま列幅・gapを可変にして必ず収める。 */
@media (min-width: 1024px) and (max-width: 1365px) {
  .products__grid {
    width: 100%;
    max-width: 880px;
    margin: 100px auto 0;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
  }
  .products__grid .p-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 250 / 190;
  }
  /* メーカー一覧ボタンもグリッドと同じ固定963px幅のため、同様にはみ出していた */
  .maker-btn {
    width: 100%;
    max-width: 880px;
    margin: 120px auto 0;
  }
}

/* 1366px以上: 250x190pxの画像を画面幅に比例して拡大する。
   1366px時の列間106.5pxは固定し、画像の増加分だけグリッドを広げる。 */
@media (min-width: 1366px) {
  .products__grid {
    width: calc(54.9048316252vw + 213px);
    grid-template-columns: repeat(3, 18.3016105417vw);
    column-gap: 106.5px;
  }
  .products__grid .p-card__img {
    width: 18.3016105417vw;
    height: auto;
    aspect-ratio: 250 / 190;
  }
}

/* 421〜1023px: メニューがハンバーガーに変わり左230pxの制約が消えるため、
   SP用2列(414px固定センタリング)のままだと画面幅に対して余白が大きくなりすぎる。
   3列・可変幅に変更し、幅に応じてカードとgapを詰める。
   420px前後以下(実機スマホ相当)は3列だと窮屈なため、この範囲には適用せず
   元のSP用2列(198px固定・max-width:414pxセンタリング)のままにする。 */
@media (min-width: 421px) and (max-width: 1023px) {
  .products__grid {
    width: 100%;
    max-width: 700px;
    margin: 50px auto 0;
    padding: 0 24px;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    row-gap: 40px;
  }
  .products__grid .p-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 198 / 150;
  }
  .products__grid .p-card__name {
    font-size: clamp(10px, 3vw, 16px);
    letter-spacing: 0.4px;
    line-height: 1.5;
  }
}
@media (min-width: 421px) and (max-width: 479px) {
  .products__grid {
    padding: 0 16px;
    column-gap: 10px;
  }
}

/* 623px以下: 3列では窮屈になるため、入口画像を2列に切り替える。 */
@media (min-width: 421px) and (max-width: 623px) {
  .products__grid {
    max-width: 414px;
    padding: 0;
    grid-template-columns: repeat(2, 198px);
    column-gap: 18px;
    row-gap: 60px;
  }
}

/* 420px以下(既存の潜在バグ修正): 元のSP用2列は198px固定×2列=396pxのため、
   396px未満の実機スマホ幅(375/360/320px等)では横スクロールが発生していた。
   列幅のみ可変にして解消し、視覚上のgap(414px時18px相当)は維持する。 */
@media (max-width: 420px) {
  .products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
  .products__grid .p-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 198 / 150;
  }
}

/* 390px以下(既存の潜在バグ修正): メーカー一覧ボタン・ONLINE SHOPバナーも
   354px固定のため、384px未満(354+左右30px)の実機スマホ幅で横スクロールしていた。 */
@media (max-width: 390px) {
  .maker-btn,
  .shop__banner {
    width: calc(100% - 24px);
    max-width: 354px;
  }
  .shop__banner {
    height: auto;
    aspect-ratio: 354 / 450;
  }
}

/* ==========================================================================
   NEWS
   SP: 見出しtop60 カード縦積み(269x257 gap60) 一覧を見る最下部
   PC: 見出しtop120 一覧を見るtop128右100 カード3枚(right100アンカー gap30)
   ========================================================================== */
.n-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.n-card__thumb--recruit {
  background-image: url(./public/24408@3x.png);
}

/* 421〜1365px: 固定867px幅(230+867=1097px)が収まらずオーバーフローしていたため、
   3列→2列にし、カードもaspect-ratioで可変幅にする。
   「一覧を見る」の右寄せ絶対配置(right:calc((100%-1097px)/2))も固定1097px前提
   のため、この範囲ではグリッド下の中央寄せに戻す。
   420px前後以下(実機スマホ相当)はこの範囲に含めず、元の1列縦積みのままにする。 */
@media (min-width: 421px) and (max-width: 1365px) {
  .news__grid {
    grid-template-columns: repeat(2, minmax(0, 269px));
    column-gap: 24px;
    row-gap: 40px;
    width: 100%;
    max-width: 562px;
    justify-content: center;
    margin: 41px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .n-card {
    width: 100%;
    height: auto;
    aspect-ratio: 269 / 257;
  }
  .n-card__cat {
    left: 1px;
  }
  .n-card__title {
    width: 100%;
  }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .news__more {
    position: relative;
    top: auto;
    right: auto;
    margin: 40px auto 0;
  }
}

/* ==========================================================================
   RECRUIT / 会社情報 (高さ768固定・背景写真)
   ========================================================================== */
/* キャッチ: SP 46px / PC 52px */
/* リンク: 和文(+▶)と英文をセンター縦積み(確定デザイン) */
/* ▶: 文字の直後14px・ベースライン揃え(製品カードと同方式) */

/* ==========================================================================
   ONLINE SHOP
   SP: バナー354x450(左右30) 前後60 / PC: 950x300中央 前後120
   ========================================================================== */

/* 624〜1023px: メニューが消えて横幅に余裕ができるため、縦長(354x450)ではなく
   PCと同じ横長比率(950:300)の可変バナーにする。文言はflexで中央配置に統一。
   623px以下(実機スマホ〜小型タブレット相当)はこの範囲に含めず、元の縦長バナーのままにする。 */
@media (min-width: 624px) and (max-width: 1023px) {
  .shop__banner {
    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 950 / 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .shop__scrim {
    position: absolute;
    top: 15%;
    right: 6%;
    bottom: 15%;
    left: 6%;
    width: auto;
    height: auto;
    z-index: 0;
  }
  .shop__ja,
  .shop__en {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
  }
  .shop__en {
    font-size: clamp(24px, 5.5vw, 36px);
  }
}

/* ==========================================================================
   お問い合わせ / 拠点
   SP: 写真414x1167 ラベルtop70 白ボタン100x100 top129.24 拠点縦積みtop279.24
   PC: 写真768 ラベル左(50%-441.5) 丸ボタン(50%-190.5) 拠点2列右側
   ========================================================================== */

/* 1023px以下: ラベルと矢印ボタンは縦2行、拠点リストは2列にする。 */
@media (max-width: 1023px) {
  .contact {
    /* 先頭・末尾の内包要素から天地100pxを確保し、2列化後の内容高に合わせる */
    height: clamp(672px, calc(94.6721311475vw + 368.9180327869px), 865px);
  }
  .contact__btn {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .contact__label {
    position: static;
    top: auto;
    left: auto;
  }
  .contact__btn-icon {
    /* position:relativeのまま維持: 中の白ボタン(.contact__btn-box)等は
       inset:0の絶対配置でこの要素を基準にしているため、staticにすると崩れる */
    position: relative;
    top: auto;
    left: auto;
    flex: none;
  }
  .branches {
    left: 50%;
    width: calc(100% - 24px);
    max-width: 500px;
    grid-template-columns: repeat(2, minmax(0, 244px));
    column-gap: 12px;
    transform: translateX(-50%);
  }
  .branches .b-card {
    width: 100%;
    height: auto;
    aspect-ratio: 244 / 154;
  }
  .branches .b-card__name {
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(12px, 3.8vw, 18px);
    letter-spacing: clamp(0.5px, 0.3vw, 1.8px);
    white-space: nowrap;
  }
  .branches .b-card__tel {
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(11px, 3.8vw, 18px);
    line-height: clamp(18px, 6vw, 30px);
    letter-spacing: clamp(0.5px, 0.3vw, 1.8px);
    white-space: nowrap;
  }
}

/* 523px以下: 拠点カードを1列に戻し、最終カード下の余白100pxを維持する。 */
@media (max-width: 523px) {
  .contact {
    height: 1197px;
  }
  .branches {
    width: calc(100% - 24px);
    max-width: 244px;
    grid-template-columns: minmax(0, 244px);
  }
}

/* ==========================================================================
   ▲ロゴ背景 footer_strip_01〜06.webp (contact と footer の間)
   高さ418pxを維持し、画面幅に応じて表示列数が増える。
   ========================================================================== */

/* ==========================================================================
   Footer
   SP: .div3 高873 / PC: .div71 高774 (中央基準の絶対配置を原文どおり移植)
   ========================================================================== */