/*=========================
   Variables
========================= */
:root{
  --nav-h: 74px;
  --rounded: 14px;

  /* OEM overlay opacity（PC）*/
  --oem-ov-a1: .45;
  --oem-ov-a2: .35;
  --oem-ov-a3: .25;

  /* Bootstrap Primary を明示（保護用）*/
  --bs-primary: #0d6efd;              /* ← 半角ハイフン2本 */
  --bs-primary-rgb: 13, 110, 253;
}

/* =========================
   Base
========================= */
html,body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; }
body{                                     /* ← { に修正 */
  padding-top: var(--nav-h);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.navbar-brand img{ height:36px; width:auto; }
.brand-name{ font-weight:700; letter-spacing:.02em; }
#top,
#features,
#company-profile,
#contact {
  scroll-margin-top: var(--nav-h);
}


.navbar-nav .nav-link {
    font-size: 0.9rem; /* 16px → 14.4px */
}

.navbar .btn {
    font-size: 0.9rem; /* ボタン文字は別管理 */
}
/* =========================
   HERO（白帯なし・カード内包・影帯なし）
========================= */

/* ヒーロー本体 */
.hero {
  position: relative;
  /*overflow: hidden; /* 下端をきれいに切る */
  overflow: visible;
  min-height: 720px;
  padding-bottom: clamp(56px, 6vw, 88px); /* カード分の余白 */
  background: #f8faff;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0) 35%),
    linear-gradient(rgba(255,255,255,.15), rgba(240,248,255,.35));
  background-size: cover;
  background-position: center bottom;
}

/* 背景画像（img要素） */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(105%) saturate(115%) brightness(1.02);
}

/* 上面の薄いベール */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.30) 30%,
    rgba(255,255,255,.15) 60%,
    rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(.6px);
}

/* ヒーロー内テキスト */
.hero > .container {
  position: relative;
  z-index: 2;
  padding-top: clamp(32px, 8vh, 120px);
  padding-bottom: clamp(8px, 2vh, 24px);
}
.hero h1 {
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.12);
}
.hero h5,
.hero p {
  color: #222;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.1);
}

@media (min-width: 992px) {
  .hero > .container {
    padding-top: clamp(56px, 12vh, 160px);
  }
}

/* カードデッキ（ヒーロー内に収める） */
.hero .feature-deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px; /* 22〜32pxで調整可 */
  z-index: 3;
}

/* ====== SP：ヒーローに2×2カードをかぶせるレイアウト（決定版） ====== */
@media (max-width: 575.98px){

  /* SP用 背景画像 */
  .hero-bg{
    content: url("../images/hero-factory-bg-sp.jpg?v=2");
    object-fit: cover;
    object-position: center top;
  }

  /* ヒーロー全体：画像＋カードをおさめる */
  .hero{
    min-height: 760px;          /* 必要なら 740〜800 の間で微調整 */
    padding-bottom: 190px;      /* カード分のスペース */
  }

  /* タイトル・リードの位置（←ここが「BEGINの優れた…」の上余白） */
  .hero > .container{
    padding-top: 40px;          /* ★ここを増減するとタイトルが上下に動く */
    padding-bottom: 16px;
  }

  .hero h1{
    font-size: 1.9rem;
    line-height: 1.25;
    margin-bottom: 0.35rem;
  }

  .hero p.lead{
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
  }

    /* カードデッキ（2×2、下に“ぎゅっ”とまとめる） */
  .hero .feature-deck{
    position: absolute;
    left: 50%;
    bottom: 28px;                 /* ← ここで全体の位置を微調整（20〜40で好み調整OK） */
    transform: translateX(-50%);
    width: calc(100% - 16px);
    max-width: 430px;             /* ← 少しだけ幅も締める */
    z-index: 3;
  }

  /* カード自体をコンパクトにする */
  .feature-card{
    padding: 10px 8px;            /* 14→10, 10→8 で高さを圧縮 */
    border-radius: 18px;
  }
  .feature-card .card-body{
    padding: 8px 6px;             /* 内側の余白も減らす */
  }

  .feature-card .feature-icon{
    margin-bottom: 4px !important;
  }
  .feature-card .feature-icon i{
    font-size: 1rem;            /* fa-2x より少し小さめ */
  }

  .feature-card h5{
    font-size: 0.8rem;           /* タイトル文字を一回り小さく */
    margin-bottom: 0.2rem;
  }
    .feature-card p{
    font-size: 0.74rem;
    line-height: 1.4;
    word-break: normal;       /* ← ふつうの折り返しに戻す */
    line-break: strict;       /* ← 日本語の改行ルールを少しきれいに */
  }
}


/* 次セクション（OEM HERO）との接続 */
.oem-hero {
  margin-top: 0;
}

/* =========================
   Film Strip
========================= */

/* フィルム用の変数（PC用） */
:root {
  --film-h: 110px;      /* カードの高さ */
  --film-gap: 16px;     /* カード同士のすき間 */
  --film-speed-1: 40s;
  --film-speed-2: 28s;
}

/* 本体 */
.strip {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(to right,
    transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right,
    transparent, #000 8%, #000 92%, transparent);
}

.track {
  display: inline-flex;
  align-items: center;
  gap: var(--film-gap);
  will-change: transform;
  animation: scroll var(--film-speed-1) linear infinite;
}

.track.reverse {
  animation-duration: var(--film-speed-2);
  animation-direction: reverse;
}

.strip img {
  height: var(--film-h);
  width: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: var(--rounded);
  padding: 6px;
  background: #e8f0ff;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .08);
  display: block;
}

.strip:hover .track {
  animation-play-state: paused;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-50% - var(--film-gap) / 2));
  }
}

/* HEROの下にくっつける余白 */
.hero .row + .strip-carousel {
  margin-top: 1rem;
}

/* スマホ：フィルムを少し低め＆間隔を詰める */
@media (max-width: 575.98px) {
  :root {
    --film-h: 70px;   /* ← 高さを抑える（必要なら 60px まで下げてもOK） */
    --film-gap: 10px;
  }
}

/* =========================
   Film strip 背景（BEGINブルー）
========================= */

.strip-carousel.strip-factory-bg {
  position: relative;
  padding: 40px 0;   /* PC の上下余白 */
  overflow: hidden;
}

.strip-carousel.strip-factory-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/begin-blue-bg.png?v=2");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* パララックスっぽく見える */
  opacity: 0.8;                  /* ← 10.8 になってたので 0.8 に修正 */
  filter: none;
}

.strip-carousel.strip-factory-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at top,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.6) 35%,
      rgba(255,255,255,0.0) 70%),
    radial-gradient(circle at bottom,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.6) 35%,
      rgba(255,255,255,0.0) 70%);
}

/* スマホ：帯をかなり薄くする＋上下マージンを圧縮 */
@media (max-width: 575.98px) {

  /* セクション自体の上下余白を小さく */
  .strip-carousel.strip-factory-bg {
    padding: 10px 0;
  }

  /* container の my-5（上下 3rem）を圧縮 */
  .strip-carousel.strip-factory-bg .container.my-5 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* 背景は固定だとガクつくので通常スクロールに */
  .strip-carousel.strip-factory-bg::before {
    opacity: 0.5;
    background-attachment: scroll;
  }
}


/* =========================
   OEM HERO（PC: Fabless1.png / SP: fabless_s.jpg）
========================= */
.oem-hero{
  position:relative; width:100%; min-height:480px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65);
  overflow:hidden;
  background: url("../images/fabless.jpg") center/cover no-repeat;

  /* ヒーローのfeature-deckがはみ出す分だけ下げる */
  margin-top:40px;
}
.oem-hero .oem-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,var(--oem-ov-a1)) 0%,
      rgba(0,0,0,var(--oem-ov-a2)) 50%,
      rgba(0,0,0,var(--oem-ov-a3)) 100%),
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.25));
}
.oem-hero .container{ position:relative; z-index:2; }

/* SP：画像は画面いっぱい＋やや濃いめ */
@media (max-width:575.98px){
  .oem-hero{
    min-height:420px;
    background: url("../images/fabless_s.jpg") center/cover no-repeat;
    background-color:#0a0a0a;
    margin-top:24px; /* SP側も少し余裕を確保 */
  }
  :root{
    --oem-ov-a1:.60;
    --oem-ov-a2:.50;
    --oem-ov-a3:.40;
  }
}

/*ボタン色が変質しないよう保護 */
.oem-hero .btn-primary{
  background-color:#0d6efd !important;
  border-color:#0d6efd !important;
  color:#fff !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  isolation:isolate;
  position:relative; z-index:3;
}

/* =========================
   Contact band
========================= */
.contact-band{ background:#fff; }
.contact-band .tel-strong{ color:#d92c2c; font-weight:800; letter-spacing:.02em; font-size:clamp(1.4rem,3.2vw,2rem); }
.contact-band .fax-normal{ color:#111; font-weight:600; }
.contact-band small{ font-size:.9rem; color:#6c757d; }
/* PCでは電話ボタンを隠す（画面幅992px以上） */
@media (min-width: 992px) {
  .call-btn {
    display: none !important;
  }
}
/* PCでは電話番号リンクを無効化（992px以上） */
@media (min-width: 992px) {
  .tel-link {
    pointer-events: none;   /* クリック無効 */
    cursor: default;        /* 普通のカーソル */
    text-decoration: none !important; /* 下線なし */
    color: inherit !important;        /* 見た目はただの文字 */
  }
}

/* 電話ボックス内の FAX 表記を強調 */
.call-box-fax {
    font-size: 1.3rem;        /* ← 大きくする（small撤廃） */
    font-weight: 600;         /* ← しっかり太く */
    color: #333;              /* ← 落ち着いた濃グレー */
    margin-top: 0.75rem;      /* ← ボタンとの余白調整 */
}

/* =========================
   Footer
========================= */
.footer{ border-top:1px solid rgba(0,0,0,.05); background:#fff; }
.footer .container{ row-gap:6px; }
.affiliation{ display:inline-flex; align-items:center; gap:.25rem; }
.affiliation .satoseiki-logo{ height:18px; width:auto; opacity:.9; transition:opacity .2s ease; }
.affiliation:hover .satoseiki-logo{ opacity:1; }
.footer .text-muted{ color:#666 !important; }
.vr{ width:1px; height:16px; background:rgba(0,0,0,.08); margin:0 .25rem; }

/* =========================
   Fade-in
========================= */
.fadein{ opacity:0; transform:translateY(20px); transition:opacity .8s ease-out, transform .8s ease-out; }
.fadein.show{ opacity:1; transform:translateY(0); }

/* =========================
   Feature Cards
========================= */
.feature-card{
  background-color:rgba(255,255,255,.6) !important;
  backdrop-filter:blur(14px) saturate(120%) contrast(105%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-radius:16px;
  /* 画像のイメージに寄せたい場合：枠線あり */
  border:3px solid var(--bs-primary);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.feature-card:hover{
  background-color:rgba(255,255,255,.7) !important;
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
@media (max-width:575.98px){
  .feature-card{
    background-color:rgba(255,255,255,.72) !important;
    backdrop-filter:blur(10px) saturate(115%);
    -webkit-backdrop-filter:blur(10px) saturate(115%);
  }
}
.feature-icon{ line-height:1; }

/* =========================
   Cards（共通）
========================= */
.card{
  border-radius:16px;
  background-color:rgba(255,255,255,.92);
  backdrop-filter:blur(3px);
  box-shadow:0 3px 8px rgba(0,0,0,.06);
  transition:all .25s ease-in-out;
}
.card:hover{ box-shadow:0 6px 16px rgba(0,69,216,.15); transform:translateY(-2px); }

/* =========================
   Button（Primary 統一・保護）
========================= */
.btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
}
/* hover / active / focus の公式色に統一 */
.btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus {
  background-color: #0a58ca !important;
  border-color: #0a53be !important;
  box-shadow: none !important;
}
/* OEM HERO や Contact の背景フィルター影響を遮断 */
.oem-hero .btn,
.contact-band .btn {
  mix-blend-mode: normal !important;
  filter: none !important;
  isolation: isolate;
}

/* 袋文字（見出し/本文） */
.fukuro-shadow{
  color:#0d6efd; font-weight:900;
  --w:.8; --b:.9; --c:rgba(0,0,0,.85);
  text-shadow:
    calc(-1*var(--w)*1px) 0 calc(var(--b)*1px) var(--c),
    calc( 1*var(--w)*1px) 0 calc(var(--b)*1px) var(--c),
    0 calc(-1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    0 calc( 1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc(-1*var(--w)*1px) calc(-1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc( 1*var(--w)*1px) calc(-1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc(-1*var(--w)*1px) calc( 1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc( 1*var(--w)*1px) calc( 1*var(--w)*1px) calc(var(--b)*1px) var(--c) !important;
}
@media (max-width:575.98px){ .fukuro-shadow{ --w:.7; --b:.8; } }

.fukuro-white{
  color:#fff !important; font-weight:800;
  --w:1.2; --b:1; --c:#002fa3;
  text-shadow:
    calc(-1*var(--w)*1px) 0 calc(var(--b)*1px) var(--c),
    calc( 1*var(--w)*1px) 0 calc(var(--b)*1px) var(--c),
    0 calc(-1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    0 calc( 1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc(-1*var(--w)*1px) calc(-1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc( 1*var(--w)*1px) calc(-1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc(-1*var(--w)*1px) calc( 1*var(--w)*1px) calc(var(--b)*1px) var(--c),
    calc( 1*var(--w)*1px) calc( 1*var(--w)*1px) calc(var(--b)*1px) var(--c) !important;
}
@media (max-width:575.98px){ .fukuro-white{ --w:.8; --b:.9; } }


/* =========================
   Back to Top
========================= */
.back-to-top{
  position:fixed; right:20px; bottom:24px; width:44px; height:44px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  background:rgba(255,255,255,.58); backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
  border:1px solid rgba(255,255,255,.42); color:#0d6efd; box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, background-color .2s ease; z-index:999;
}
.back-to-top:hover{ background:rgba(255,255,255,.75); transform:translateY(6px); }
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width:575.98px){ .back-to-top{ right:14px; bottom:18px; width:42px; height:42px; } }
.back-to-top, .back-to-top:link, .back-to-top:visited, .back-to-top:hover, .back-to-top:active, .back-to-top:focus{ text-decoration:none !important; }
.back-to-top i{ text-decoration:none !important; line-height:1; pointer-events:none; }

/* =========================
   問い合わせページ専用調整
========================= */
body.contact-page .navbar .btn-contact {
  display: none !important;
}

@media (max-width: 575.98px){
  .feature-card .card-body{
    padding: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .feature-deck.container {
    /*padding-left: 0 !important;
    padding-right: 0 !important;
padding-bottom: 0 !important;*/
padding: 0 !important;
  }
}


/* =========================
   PARALLAX SECTIONS（画像版）
========================= */

/* 共通：細い帯（PC） */
.parallax-section {
  background-image: url("../images/begin-blue-bg.png?v=2");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  text-shadow: 0 2px 10px rgba(0,0,0,0.4);

  height: 6.25vh;        /* PC帯の高さ：かなり薄め */
  padding: 0.75rem 0;    /* ← これが帯の厚みを決める */
  font-size: 2rem;
}

/* =========================
   スマホ
========================= */
@media (max-width: 575.98px) {

  /* 帯をもっと薄くする（スマホ用） */
  .parallax-section {
    height: 4vh;         /* ← かなり薄くなる */
    padding: 0.5rem 0;   /* ← 上下の余白も縮める */
    font-size: 1.6rem;   /* ← 文字も少し小さく */
  }

  /* 会社概要の余白調整 */
  #company-profile {
    padding-top: 1.5rem !important;
  }

  #company-profile h2 {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
  }
}





/* =========================
   Film strip 背景（工場イメージ＋うっすら動く）
========================= */

/* Film strip 背景（工場イメージ＋うっすら動く） */
.strip-carousel.strip-factory-bg {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}

.strip-carousel.strip-factory-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* ⭐ ここだけ差し替え */
  background-image: url("../images/begin-blue-bg.png?v=2");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* スクロールでパララックスっぽく見える */
  opacity: 1;                 /* 図面は線が細いので少し濃いめに */
  filter: none;                  /* ぼかしは不要なのでOFF */
}


.strip-carousel.strip-factory-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at top,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.6) 35%,
      rgba(255,255,255,0.0) 70%),
    radial-gradient(circle at bottom,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.6) 35%,
      rgba(255,255,255,0.0) 70%);
}

@media (max-width: 575.98px) {
  .strip-carousel.strip-factory-bg {
    padding: 24px 0;
  }

  .strip-carousel.strip-factory-bg::before {
    opacity: 0.5;
    background-attachment: scroll;
  }
}


/* OEM HERO の前の余白を完全にゼロにする */
.oem-hero {
  margin-top: 0 !important;
  padding-top: 40px;  /* テキストの余白だけ確保 */
}

.line-spaced {
    line-height: 1.8;  /* ← 行間を広めに（1.6〜1.9くらいが自然） */
}

/* contact.html 専用調整 */
.agree-locked {
  pointer-events: none;
}

.agree-row {
  opacity: 1; /* うすくしない */
}

/* contact.html ではヘッダーの「メールでお問合せ」ボタンを非表示 */
body.contact-page #header a[href$="contact.html"],
body.contact-page #header a[href*="/contact"],
body.contact-page #header .btn-contact {
  display: none !important;
}