/*
Theme Name: Techto Child (Yasui Seiki)
Theme URI: https://www.yasuiseiki.com/
Description: Techto の子テーマ。yasuiseiki.com のカスタマイズはすべてここに置く。親テーマを直接編集するとテーマ更新で消えるため厳禁。
Author: SAKETREAT
Template: techto
Version: 1.0.0
Text Domain: techto-child
*/

/* ===========================================================
   カスタムCSSはここから下に書く。
   親テーマ(techto)のCSSは functions.php で先に読み込まれるため、
   ここでの指定が後勝ちで適用される。
   =========================================================== */

/* --- yasuiseiki ブランドカラー -------------------------------
   現行サイト static/css/styles.css の :root 定義をそのまま移植。
   変数名も元サイトに合わせてあるので、後からの照合がしやすい。
   ----------------------------------------------------------- */
:root {
  --ys-blue:   #003579;  /* ブランド青（メイン） */
  --navy:      #132257;  /* 濃紺 */
  --accent:    #3457d3;
  --highlight: #14a2c8;
  --teal:      #0367aa;
}

/* --- 旧サイトから引き継いだユーティリティクラス ---------------
   WXRでインポートした本文HTMLが以下のクラスを使っている。
   Elementorへの置き換えが完了するまでの暫定スタイル。
   置き換え完了後はこのブロックごと削除してよい。

   .highlight-blue-bkg と .navy-blue-bkg は元サイトでは背景画像を敷いている。
   ⚠ 画像は**ルート相対**でメディアライブラリを指すこと。
     旧サイトの絶対URL（www.yasuiseiki.com/static/…）のままだと、
     本番切替後に同じドメインの存在しないパスを見に行って404になる。
   ----------------------------------------------------------- */
.white-bkg { background-color: #fff; }

.blue-bkg {
  background-color: var(--ys-blue);
  color: #fff;
}

.navy-blue-bkg {
  background-color: var(--navy);
  color: #fff;
  background: no-repeat center center
    url("/wp-content/uploads/2026/08/slot-die-coater-bkg.png");
  background-size: cover;
  text-shadow: 1px 1px #000;
}

.highlight-blue-bkg {
  color: #fff;
  background: url("/wp-content/uploads/2026/08/machines-header.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-shadow: 1px 1px var(--navy);
}

.blue-bkg a,
.navy-blue-bkg a,
.highlight-blue-bkg a { color: #9ecbff; }


/* --- ヘッダーロゴ ---------------------------------------------
   メディア上のロゴは 480x160（3:1）。素のままだと高さ80pxで表示され、
   mirwec のロゴ（192x30）に比べて明らかに大きい。

   ただし yasuiseiki のロゴは社名＋タグラインの2段組みなので、
   mirwec と同じ30pxまで下げるとタグラインが潰れて読めない。
   → 一度46pxまで下げたが、ユーザー要望で+10pxし
     高さ 56px（幅約168px）に収める。
   ----------------------------------------------------------- */
.ys-headerbar img {
  height: 56px !important;
  width: auto !important;
  max-width: none;
}

/* サイトアイコン等で使われる custom-logo 側も念のため抑える */
.custom-logo-link .custom-logo,
img.custom-logo {
  max-height: 56px;
  width: auto;
  height: auto;
}

@media (max-width: 1024px) {
  .ys-headerbar img { height: 48px !important; }
}
@media (max-width: 480px) {
  .ys-headerbar img { height: 40px !important; }
}


/* ===========================================================
   フローティングヘッダー
   mirwec-coating.com と同じ「角丸のバーがコンテンツに重なる」構成。
   techto側の transparent-position は Elementor 依存で不透明なため、
   ここで自前に実装して挙動を管理下に置く。
   =========================================================== */

/* ⚠ #rs-header は「テーマ既定のヘッダー」ではなく、
   Techto H&F Builder のテンプレートを内包するラッパー
   （mirwec-coating.com も同じ構造）。ここを display:none にすると
   自作ヘッダーごと消えるので絶対に隠さないこと。 */

/* ヘッダーの重ね方（mirwec と同じ構造）
   - トップバーは**通常フロー**（白いページ地の上に文字だけ）
   - ナビバーだけを絶対配置でヒーローカードの上端に重ねる

   ⚠ 以前はヘッダー全体を absolute にし、カード側に margin-top を付けていたが、
      **マージンの相殺**でヘッダーごと押し下げられてしまった。
      フローに残す今の形なら相殺の影響を受けない。 */
.ys-header-wrap {
  position: relative;
  z-index: 999;
  /* 以前はトップバー（電話・住所）がこの高さを作っていたが、
     2026-08-06 にトップバーを非表示にしたため、
     ヒーローカード上端までの余白をここで確保する。
     mirwec 実測（1440px・ログアウト時）: カード top70 / ナビバー top116。
     差はちょうど 46px。 */
  min-height: 70px;
}

/* ⚠ ナビバーの `top: calc(100% + 46px)` が基準にするのは
   .ys-header-wrap ではなく、Elementor が position:relative を持たせている
   内側の .elementor-container。
   ここに高さが無いと 100% が 0 と評価され、バーがカードの上へ飛び出す。
   → 余白と同じ 70px を持たせて、100% が確実に 70px になるようにする。 */
.ys-header-wrap > .elementor-container {
  min-height: 70px;
}

/* Elementorのカラム既定パディング(10px)のせいでヘッダーが左右に食い込み、
   背後の紺が細く覗いてしまう。ヘッダー内では打ち消して全幅にする。 */
.ys-header-wrap > .elementor-container > .elementor-column > .elementor-element-populated {
  padding: 0;
}

/* --- トップバー（住所・電話）---
   ⚠ 2026-08-06 のユーザー判断で**現在は非表示**（Elementor側から除外済み）。
     復活させる可能性があるためスタイルは残してある。

   mirwec は背景を持たず、白いページ地の上に文字だけが乗っている。
   グレーの帯を敷くと別物になるので背景は付けない。 */
.ys-topbar {
  background: transparent;
  font-size: 16px;                    /* mirwec と同じ */
  color: rgba(19, 34, 87, .72);       /* 本文より一段落とした navy */
  padding-top: 22px !important;
  padding-bottom: 18px !important;
}
/* mirwec は左右20pxの位置に置いている（コンテンツ幅ではなく画面端基準） */
.ys-topbar > .elementor-container {
  max-width: none !important;
  padding: 0 20px;
}
.ys-topbar a { color: inherit; text-decoration: none; }
.ys-topbar a:hover { color: var(--highlight); }
.ys-topbar-phone a { font-weight: 600; }

/* 住所は右端に寄せる。
   ショートコードウィジェットの align 設定は効かないためCSSで指定する。 */
.ys-topbar-right,
.ys-topbar-right .elementor-widget-container,
.ys-topbar-right .elementor-shortcode { text-align: right; }

/* --- メインバー（すりガラスのフローティングバー） ---
   mirwec 実測: w1350 / left45 / radius 10px
   白65%のグラデ ＋ backdrop-filter: blur(30px)。
   不透明な白にすると背後の写真が透けず、まったく別の見た目になる。 */
.ys-headerbar {
  /* トップバーの直下から 46px 下げた位置に置き、カード上端に重ねる
     （mirwec 実測: カード top102 / ナビバー top148 ＝ 46px 差） */
  position: absolute;
  top: calc(100% + 46px);
  left: 45px;
  right: 45px;
  /* Elementorのセクションは width:100% を持つため、left/right を指定しても
     幅が親いっぱいに広がり右へはみ出す。auto にして left/right を効かせる。 */
  width: auto !important;
  margin: 0 !important;

  background: linear-gradient(rgba(255, 255, 255, .70), rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
}

@media (max-width: 1280px) {
  .ys-headerbar { left: 24px; right: 24px; }
}

/* --- グローバルナビ ---
   ul は幅いっぱいの flex なので、既定の flex-start だと項目がロゴ直後に
   固まり、CTAとの間に大きな空白ができる。mirwec と同じく中央に展開させる。 */
.ys-nav .ys-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ys-nav .ys-nav-list > li { position: relative; }
.ys-nav .ys-nav-list > li > a {
  display: block;
  padding: 10px 0;
  font-weight: 600;
  font-size: 16px;   /* mirwec と同じ */
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.ys-nav .ys-nav-list > li > a:hover,
.ys-nav .ys-nav-list > li.current-menu-item > a,
.ys-nav .ys-nav-list > li.current-menu-ancestor > a { color: var(--highlight); }

/* 子を持つ項目に矢印を付ける */
.ys-nav .ys-nav-list > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* ドロップダウン */
.ys-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--ys-blue);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ys-nav .ys-nav-list > li:hover > .sub-menu,
.ys-nav .ys-nav-list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ys-nav .sub-menu a {
  display: block;
  padding: 9px 20px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.ys-nav .sub-menu a:hover { background: rgba(255, 255, 255, .14); }

/* --- CTAボタン --- */
.ys-header-cta .elementor-button {
  background-color: var(--highlight);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ys-header-cta .elementor-button:hover { background-color: var(--teal); }

/* ===========================================================
   ヒーローカード（角丸の写真カード）
   mirwec 実測: w1360 / left40 / radius 30px / 背景写真
   ナビバーがこのカードの上端に重なる構図。
   =========================================================== */
.ys-page-banner {
  /* トップバーは通常フローで上に積まれているので、ここでは左右の余白だけ。
     margin-top を付けるとマージン相殺でヘッダーごと押し下がるので使わない。 */
  margin: 0 40px;

  /* ⚠ mirwec のカードは写真の縁に**白い15pxのボーダー**が入っている。
     これが無いと写真が直接カードの角丸で切られ、印象がかなり変わる。 */
  border: 15px solid #fff;
  border-radius: 30px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, .06);
  overflow: hidden;

  /* mirwec 実測: padding 206px 130px 104px
     上余白は重なるナビバーを避ける分

     ⚠ そこから**上下に35pxずつ足して、カードを70px高くしてある**
       （2026-08-08 ユーザー指示。写真を大きく見せたいため）。
       片側に70px寄せると見出しの位置が上下どちらかに偏るので、
       必ず等分に足すこと。実測 422px → 493px。 */
  padding: 241px 130px 139px !important;
}

/* 写真の上に敷くオーバーレイ。
   ⚠ **明るいグラデーションは廃止した（2026-08-07 ユーザー指摘）。**
     左60%を不透明な灰青で覆う指定だったため、せっかくの写真がほとんど見えなかった。
     mirwec のトップも**オーバーレイ無しで写真をそのまま見せ、見出しは白**にしている。

   ⚠ ただし完全に無くすことはできない。見出しを白にすると、
     hero-machines.jpg のような**白い壁の明るい写真では文字が消える**。
     そこで「写真を隠さない程度の薄い暗幕」を左下から掛ける。
     不透明度は最大45%で、写真の主題（右側・上側）はほぼ素通しになる。 */
.ys-page-banner > .elementor-background-overlay {
  background-color: transparent !important;
  background-image: linear-gradient(
    100deg,
    rgba(10, 22, 48, .55) 0%,
    rgba(10, 22, 48, .30) 38%,
    rgba(10, 22, 48, .05) 65%,
    rgba(10, 22, 48, 0) 100%
  ) !important;
  opacity: 1 !important;
}

/* --- ヒーローカードと本文の間隔 ---
   techto は `.site-content` に `padding: 120px 0` を入れている。
   ヒーローカードの下端から本文の先頭までが**202px**空いてしまい、
   間延びして見える（mirwec 実測は 110px）。

   本文の先頭セクション側にも Elementor の padding が 72px＋カラム10px あるので、
   ここは差分だけを持たせる。30 + 82 = 112px となり mirwec とほぼ同じになる。
   ⚠ セクション側の 72px を触ると全ページのセクション間隔まで変わるので、
     この1箇所（.site-content）で調整すること。

   ⚠ セレクタは `#content.site-content` にすること。
     techto 側の 120px はクラス1つより詳細度が高く、`.site-content` だけでは負ける
     （実測: 指定しても 120px のまま）。ID＋クラス（1,1,0）なら
     !important 無しで確実に勝てるので、後からの微調整も効く。 */
#content.site-content {
  padding-top: 30px;
  /* フッター手前も 120px は空きすぎなので 70px に詰める（2026-08-07 ユーザー指示）。
     ⚠ ログイン中はこの下に管理者用の「Edit」リンク（68px）が入るため、
       管理画面から見ると70pxより広く見える。一般訪問者には出ない。 */
  padding-bottom: 70px;
}

.ys-page-banner-inner {
  /* mirwec は左寄せ。中央寄せにすると印象がかなり変わる。
     左右の余白はセクション側の padding で持たせているのでここでは持たない。 */
  text-align: left;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ⚠ 写真の上に直接乗るので**白文字**。mirwec のトップも白（実測 #fff / 80px / 700）。
     以前は濃紺だったが、これは「左を明るく塗りつぶすグラデーション」が
     前提の色だった。グラデーションを外した以上、紺のままでは写真に沈む。
   ⚠ 影は必須。薄い暗幕だけでは、明るい写真（白い壁など）で白文字が消える。 */
.ys-page-title {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4.2vw, 56px);   /* mirwec 実測 56px */
  line-height: 1.12;
  text-shadow: 0 2px 18px rgba(6, 16, 38, .55);
}

/* --- 写真そのものを載せる層（Ken Burns 用）---
   ⚠ 背景プロパティに直接指定せず ::before に載せているのは、
     ゆっくり拡大させるため。`background-size` を animate すると
     GPU合成が効かず重いので、transform: scale() を使う。
     画像URLは ys_hero_inline_style() が --ys-hero で渡す。
   ⚠ ::before は Elementor も親テーマも使っていないことを実測で確認済み。 */
.ys-page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ys-hero);
  background-size: cover;
  background-position: center center;
  transform: scale(1.06);
}
/* オーバーレイ（暗幕）と中身は写真より前に出す */
.ys-page-banner > .elementor-background-overlay { z-index: 1; }
.ys-page-banner > .elementor-container { position: relative; z-index: 2; }

/* --- トップページ：mirwec に合わせて全画面級の高さ＋動きを付ける ---
   mirwec 実測: 高さ1088px（ビューポート1131pxのほぼ全面）／
   Techto Addons の rs-hero-slider に ken-burn-effect ／
   見出し・説明・ボタンが fadeInUp 1.2s。
   ⚠ こちらは1枚もののカード型なので**スライダーは使わない**。
     同じ見え方（ゆっくり拡大＋文字のせり上がり）はCSSだけで出せる。 */
.ys-hero-home .ys-page-banner {
  /* ⚠ 82vh → 70vh に下げた（2026-08-08 ユーザー指示）。
       下の機種タイルを画面幅いっぱいにしたことで、ヒーローが縦に長すぎて
       タイルが最初の画面に入らなくなったため。実測 738px → 630px。
     ⚠ 上の padding は 150px 以下にしないこと。
       ナビバーがこのカードの上端に**重なる**作りで、
       それより小さいと見出しがナビの下へ潜る。 */
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 180px 130px 104px !important;
}
.ys-hero-home .ys-page-title {
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.08;
}

/* ゆっくり拡大（Ken Burns）。トップだけに掛ける。 */
.ys-hero-home .ys-page-banner::before {
  animation: ys-kenburns 22s ease-out forwards;
}
@keyframes ys-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.18); }
}

/* --- トップのリード文とボタン（mirwec と同じ3点構成）---
   ⚠ 幅を絞ること。全幅のままだと1行が長すぎて読みにくく、
     写真の主題（右側）にも文字が重なる。mirwec も左半分に収めている。 */
.ys-page-lead {
  max-width: 620px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.75;
  text-shadow: 0 1px 12px rgba(6, 16, 38, .5);
}
.ys-page-cta { margin: 34px 0 0; }
.ys-hero-btn {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--highlight);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease;
}
.ys-hero-btn:hover,
.ys-hero-btn:focus { background: var(--ys-blue); color: #fff; }

/* --- 見出し・リード文・ボタンのせり上がり（全ページ）---
   mirwec と同じ 1.2s。下層ページは見出しだけなので1本で終わる。
   ⚠ トップは3要素あるので少しずつ遅らせて順に出す。同時だと重く見える。 */
.ys-page-title,
.ys-page-lead,
.ys-page-cta {
  animation: ys-fade-up 1.2s cubic-bezier(.22, .61, .36, 1) both;
}
.ys-page-lead { animation-delay: .15s; }
.ys-page-cta { animation-delay: .3s; }
@keyframes ys-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ⚠ 動きを減らす設定にしている利用者には出さない（酔いや前庭障害への配慮）。 */
@media (prefers-reduced-motion: reduce) {
  .ys-hero-home .ys-page-banner::before,
  .ys-page-title,
  .ys-page-lead,
  .ys-page-cta { animation: none; }
}

.ys-breadcrumb {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(19, 34, 87, .72);
}
.ys-breadcrumb a { color: rgba(19, 34, 87, .68); text-decoration: none; }
.ys-breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.ys-breadcrumb .bcn-aria-current { color: var(--navy); }

/* --- ハンバーガーボタン（1024px以下でのみ表示） --- */
.ys-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ys-nav-toggle-bar {
  display: block;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .2s ease, opacity .2s ease;
}
.ys-nav-wrap.is-open .ys-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ys-nav-wrap.is-open .ys-nav-toggle-bar:nth-child(2) { opacity: 0; }
.ys-nav-wrap.is-open .ys-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* サブメニュー開閉ボタン（JSが挿入。デスクトップでは不要） */
.ys-sub-toggle { display: none; }


/* ===========================================================
   1024px 以下（タブレット・スマホ）
   ナビをパネルに畳む。畳まないと全項目＋サブメニューが
   縦に展開されてヘッダーが700px超になる。
   =========================================================== */
@media (max-width: 1024px) {
  /* 重ねるのをやめて通常配置に戻す。
     バーがフローに戻るので、余白確保用の min-height は不要。 */
  .ys-header-wrap,
  .ys-header-wrap > .elementor-container { position: static; min-height: 0; }

  /* ⚠ ここは position だけを上書きしてはいけない。
     デスクトップ側の `top: calc(100% + 46px)` と `left/right` は
     position:relative でも**相対オフセット**として生き続けるため、
     バーが 214px 下へずれて本文に潜り込む。
     さらに親が flex 行なので width:auto だとバーが幅379pxまで縮む。
     → top/left/right を auto に戻し、幅を 100% に固定する。
     （パネルの位置基準にしたいので static ではなく relative を使う） */
  .ys-headerbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100% !important;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 10px 20px !important;
  }

  /* 3カラム（ロゴ20% / ナビ60% / CTA20%）のままだと
     ハンバーガーがロゴ直後の宙ぶらりんな位置に出る。
     カラム幅を内容なりにし、order で「ロゴ … CTA ハンバーガー」に並べ替える。 */
  .ys-headerbar > .elementor-container { align-items: center; }
  .ys-headerbar > .elementor-container > .elementor-column { width: auto !important; }
  .ys-headerbar > .elementor-container > .elementor-column:nth-child(2) { order: 3; }
  .ys-headerbar > .elementor-container > .elementor-column:nth-child(3) {
    order: 2;
    margin-left: auto;
    margin-right: 12px;
  }

  /* ⚠ Elementor は container / column / widget-wrap / widget と、
     入れ子のあちこちに position:relative を付ける。
     パネルは position:absolute なので、いちばん内側の relative（＝ハンバーガー
     ボタンだけを含む44px幅の要素）が包含ブロックになり、
     **パネルが44px幅に潰れてメニュー文字が縦1文字ずつになる**。
     1つずつ潰しても別の階層が拾ってしまうので、バー内はまとめて static にし、
     包含ブロックを .ys-headerbar（position:relative）に確定させる。 */
  .ys-headerbar > .elementor-container,
  .ys-headerbar .elementor-column,
  .ys-headerbar .elementor-widget-wrap,
  .ys-headerbar .elementor-widget { position: static !important; }

  .ys-nav-wrap { position: static; }
  .ys-nav-toggle { display: block; }

  /* ナビ本体はパネル化して既定で隠す */
  .ys-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 8px 20px 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
  }
  .ys-nav-wrap.is-open .ys-nav { display: block; }

  .ys-nav .ys-nav-list { display: block; }
  .ys-nav .ys-nav-list > li {
    border-bottom: 1px solid rgba(0, 0, 0, .07);
  }
  .ys-nav .ys-nav-list > li > a { padding: 13px 0; }
  .ys-nav .ys-nav-list > li.menu-item-has-children > a::after { display: none; }

  /* サブメニューは既定で閉じ、[+] で開く */
  .ys-nav .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 0 0 10px 14px;
  }
  .ys-nav .ys-nav-list > li.is-open > .sub-menu { display: block; }
  .ys-nav .sub-menu a { color: var(--navy); padding: 8px 0; font-size: 15px; }

  .ys-sub-toggle {
    display: block;
    position: absolute;
    top: 6px;
    right: 0;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .ys-sub-toggle::before,
  .ys-sub-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 2px;
    background: var(--navy);
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
  }
  .ys-sub-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
  .ys-nav .ys-nav-list > li.is-open > .ys-sub-toggle::after { transform: translate(-50%, -50%); }

  /* 重ねない配置に戻すので、カードの位置と余白を通常に戻す */
  .ys-page-banner {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* PCと同じ理由で高くしてあるが、画面が狭いぶん増分は +50px に抑える
       （PCと同じ +70px だと、写真だけで1画面の半分近くを占めてしまう） */
    padding: 81px 20px 73px !important;
  }

  /* ⚠ ここには以前 rgba(218,221,232,.90) の**明るいグレー**を全面に敷いていた。
       見出しが濃紺だった頃の名残で、白見出しに変えた後もそのまま残っており、
       タブレット・スマホで写真が白く飛んで見えていた（2026-08-07 ユーザー指摘）。

     狭幅では見出しが幅いっぱいに折り返すため、PCと同じ「左だけ暗い」横グラデでは
     右端の文字が素通しの写真に乗ってしまう。斜めに倒して、
     見出しが置かれる**左上→下側**を軽く落とす。写真は最大50%までしか隠さない。 */
  .ys-page-banner > .elementor-background-overlay {
    background-color: transparent !important;
    background-image: linear-gradient(
      160deg,
      rgba(10, 22, 48, .50) 0%,
      rgba(10, 22, 48, .30) 55%,
      rgba(10, 22, 48, .10) 100%
    ) !important;
    opacity: 1 !important;
  }
  .ys-topbar > .elementor-container { padding: 0 20px; }
  .ys-topbar { font-size: 14px; }

  /* フッターの6カラムは 768px では1枠128pxしかなく、
     リンク文字（Medical & Pharmaceutical 等）が折り返して読めない。
     3カラム×2段に組み替える。

     ⚠ セレクタは `.ys-footer .elementor-section .elementor-column` にすること。
       `.ys-footer .elementor-column` だと、フッター全体を包む100%カラムまで
       33%になり、内側がさらにその33%（＝79px）に潰れる。 */
  .ys-footer .elementor-section .elementor-column {
    width: 33.333% !important;
    margin-bottom: 30px;
  }
}

/* --- 中間幅（1025〜1200px）でナビとCTAが詰まりすぎないよう調整 --- */
@media (min-width: 1025px) and (max-width: 1200px) {
  .ys-nav .ys-nav-list { gap: 16px; }
  .ys-nav .ys-nav-list > li > a { font-size: 15px; }
  .ys-headerbar { padding-left: 18px !important; padding-right: 18px !important; }
}

/* --- スマホ（767px以下） --- */
@media (max-width: 767px) {
  .ys-topbar > .elementor-container { flex-wrap: wrap; }
  .ys-topbar .elementor-column { width: 100% !important; }
  .ys-topbar-right,
  .ys-topbar-right .elementor-widget-container,
  .ys-topbar-right .elementor-shortcode { text-align: left; }
  .ys-topbar { font-size: 13px; padding-top: 14px !important; padding-bottom: 12px !important; }

  /* スマホは増分 +40px。844pxの画面でこれ以上は本文が見えなくなる */
  .ys-page-banner { padding: 60px 20px 56px !important; }
  .ys-page-title { font-size: 30px; }
  /* スマホは見出しが2〜3行に折り返して縦にも広がるので、縦方向に落とす。
     ⚠ background-color も毎回 transparent に戻すこと。
       1024px 側で色を指定していた頃、ここで background-image だけ上書きしていたため
       明るいグレーが下に残り、グラデを重ねても写真が白いままだった。 */
  .ys-page-banner > .elementor-background-overlay {
    background-color: transparent !important;
    background-image: linear-gradient(
      175deg,
      rgba(10, 22, 48, .18) 0%,
      rgba(10, 22, 48, .34) 50%,
      rgba(10, 22, 48, .56) 100%
    ) !important;
  }
  /* スマホは82vhだと縦長すぎて本文が見えないので抑える */
  /* PCと同じ理由で下げる（62vh → 54vh）。
     スマホは画面が縦長なぶん、ヒーローだけで1画面を使い切りやすい。 */
  .ys-hero-home .ys-page-banner {
    min-height: 54vh;
    padding: 60px 20px 52px !important;
  }
  .ys-hero-home .ys-page-title { font-size: 34px; }

  /* --- トップのヒーロー写真：スマホで社名看板が画面外に出る（2026-08-16 指摘）---
     hero-home.jpg は 1916x821 の横長で、「yasui seiki / MIRWEC COATING」の
     看板は**左端**（横位置 9〜36%）にある。390px幅では cover の切り抜き窓が
     画像幅の約31%しか映らないため、中央基準のままだと看板がまるごと外れ、
     木と芝生だけの写真になっていた。→ 切り抜きを左へ寄せて看板を収める。

     ⚠ 6.5% は Ken Burns の拡大込みで逆算した値。
       0% にすると左が突き当たって看板が右へ寄り、ボタンとの重なりが増える。
     ⚠ **Ken Burns（1.06→1.18）はスマホでは止めること。**
       拡大するほど切り抜き窓が狭まり、22秒かけて看板の右端
       （MIRWEC COATING）が画面外へ押し出されていく。
       端に隙間が出ないよう 1.02 だけ掛けて固定する。 */
  .ys-hero-home .ys-page-banner::before {
    background-position: 6.5% center;
    transform: scale(1.02);
    animation: none;
  }

  /* 看板は**白地**なので、この幅の既定の暗幕（下ほど濃いグラデ）のままでは
     見出し・リード文の白文字が看板の上で消える。上〜中ほどを濃くして
     文字側を確保し、下（芝生と看板の青帯）は素通しにして写真の色を残す。

     ⚠ 上の `.ys-page-banner > .elementor-background-overlay`（767px用）より
       詳細度が高く、かつ後ろにあるので上書きされる。
       background-color は向こうで transparent に戻しているのでここでは触らない。 */
  .ys-hero-home .ys-page-banner > .elementor-background-overlay {
    background-image: linear-gradient(
      180deg,
      rgba(6, 16, 38, .62) 0%,
      rgba(6, 16, 38, .58) 46%,
      rgba(6, 16, 38, .20) 72%,
      rgba(6, 16, 38, .10) 100%
    ) !important;
  }

  /* --- 本文セクションの余白（2026-08-07 ユーザー指摘）---
     縦72px・横22pxはPC向けの比率で、390px幅では上下が空きすぎ・左右が詰まりすぎになる。
     縦を詰めて、その分を横に回す。

     ⚠ 横は `.elementor-element-populated` 側で足すこと。
       セクションに padding を付けると、色付きセクション（.ys-dark など）の
       背景まで内側に寄って、画面端との間に中途半端な帯ができる。
       背景は画面幅いっぱい（#content の 12px まで）に残したまま、
       文字だけを内側へ入れたい。 */
  #content .elementor-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  #content .elementor-column > .elementor-element-populated {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* ⚠ 見出し・段落の下マージン（26px）がセクションの下余白に足し算されるため、
       これを消さないと上50px・下76pxで**上下が揃わない**。
       ウィジェット内の最後の要素だけを対象にするので、
       ウィジェット同士の間隔は今までどおり空く。

     ⚠ セレクタに `.elementor-widget-container` は使えない。
       Elementor 4 の最適化マークアップではこのクラスが付かず、
       ウィジェット直下は**クラス無しの div** になっている（実測）。
       自前で付けている .ys-prose を起点にすること。 */
  #content .ys-prose > *:last-child,
  #content .ys-prose > div > *:last-child { margin-bottom: 0; }
  /* 仕様表のパネルは横40pxだと文字幅が足りなくなるので、こちらも詰める */
  #content .elementor-section.ys-spec-section {
    padding: 40px 16px !important;
  }

  /* フッターは1カラムに積む（セレクタの注意は上のブロックと同じ） */
  .ys-footer .elementor-section .elementor-column { width: 100% !important; margin-bottom: 26px; }
}

/* --- 小さいスマホ（480px以下） ---
   ロゴ120 + CTA115 + ハンバーガー44 に Elementor のカラム余白が乗ると
   390px では 1px 足らずに折り返し、ヘッダーが2段になる。
   左右の余白とCTAを詰めて1段に収める。 */
@media (max-width: 480px) {
  .ys-headerbar { padding-left: 16px !important; padding-right: 16px !important; }
  .ys-headerbar > .elementor-container > .elementor-column { padding-left: 0; padding-right: 0; }
  .ys-headerbar > .elementor-container > .elementor-column:nth-child(3) { margin-right: 6px; }
  .ys-header-cta .elementor-button {
    padding: 11px 18px !important;
    font-size: 14px;
  }
}


/* ===========================================================
   フッター
   現行サイトの COMPANY / MACHINES / APPLICATIONS / TECHNOLOGY
   4列構成を踏襲する。
   =========================================================== */
.ys-footer { background: var(--navy); color: rgba(255, 255, 255, .82); }

/* ロゴは紺文字の透過PNGなので、そのままだと紺背景に沈んで見えない。
   白抜きにして視認性を確保する（白版アセットを別途持たずに済む）。 */
.ys-footer img { filter: brightness(0) invert(1); opacity: .92; }
.ys-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.ys-footer a:hover { color: #fff; text-decoration: underline; }

.ys-footer .elementor-heading-title {
  color: #fff;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ys-footer-links { margin: 0; padding: 0; list-style: none; }
.ys-footer-links li { margin-bottom: 9px; }
.ys-footer-links a { font-size: 14px; line-height: 1.5; }

/* 6カラムなので1列が狭い。長い項目（Medical & Pharmaceutical /
   Advanced Slot Die Design 等）が溢れないよう折り返しを許可する。 */
.ys-footer .elementor-column { min-width: 0; }
.ys-footer-links a { display: inline-block; overflow-wrap: anywhere; }

.ys-contact-block p { margin: 0 0 14px; font-size: 14px; line-height: 1.65; }
.ys-contact-label {
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.ys-contact-phone a { font-weight: 700; font-size: 17px; }
.ys-contact-cta a {
  display: inline-block;
  margin-top: 4px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.ys-contact-cta a:hover {
  background: var(--highlight);
  border-color: var(--highlight);
  text-decoration: none;
}

.ys-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}


/* --- お問い合わせフォーム (Contact Form 7) ---------------------
   /contact/ のフォーム。マークアップ定義は
   wp-migration/import/contact-form-7.md を参照。
   techto が Bootstrap を同梱しているため form-control / form-select /
   row はそのまま効く。ここは必須マークと余白の微調整のみ。
   ----------------------------------------------------------- */
.ys-form .form-label {
  display: block;
  width: 100%;
  font-weight: 600;
  margin-bottom: .35rem;
}
.ys-form .ys-req {
  color: #c0392b;
  font-weight: 700;
}
.ys-form .form-control,
.ys-form .form-select {
  margin-top: .35rem;
}
/* ⚠ 送信ボタンはサイト共通の丸ボタンに揃える。
     Bootstrap の .btn-primary のままだと角丸4pxの紺ボタンになり、
     ヘッダーCTAや本文中のボタン（すべてピル型）と不揃いになる。

   ⚠ `min-width: 200px` は入れないこと（2026-08-08 ユーザー指摘で削除）。
     ラベルが短いと、200pxの横長ピルの中に小さな文字が浮いて間延びする。
     実測 200x53px に対して文字は 14px しかなく、明らかに不釣り合いだった。
     文字量に合わせて伸縮させ、下限だけ 150px で押さえる。

   ⚠ font-size は明示すること。指定しないと Bootstrap の .btn から
     14px を継承し、サイト内の他のピルボタン（15px）と揃わない。 */
.ys-form-submit .wpcf7-submit,
.ys-form .wpcf7-submit {
  min-width: 150px;
  padding: 15px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--highlight);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ys-form-submit .wpcf7-submit:hover,
.ys-form .wpcf7-submit:hover { background: var(--ys-blue); }

/* CF7のバリデーションメッセージをフォーム幅に合わせる */
.ys-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
}
.ys-form .wpcf7-spinner {
  margin-left: .75rem;
}


/* ===========================================================
   T4以外の型（T0〜T3・T5〜T7）で使うブロック
   scripts/build_templates.py が出力するクラスに対応する。
   =========================================================== */

/* --- 本文（長文・リスト・リンク） ---
   元サイトの原稿をそのまま載せているので、
   見出し階層と行間だけ整えて可読性を確保する。 */
.ys-prose { line-height: 1.85; }
.ys-prose h3 { margin: 1.8em 0 .6em; font-size: 22px; color: var(--ys-blue); }
.ys-prose h4 { margin: 1.4em 0 .5em; font-size: 18px; color: var(--navy); }
.ys-prose p { margin: 0 0 1.1em; }
.ys-prose ul,
.ys-prose ol { margin: 0 0 1.2em 1.4em; }
.ys-prose li { margin-bottom: .5em; }
.ys-prose a { color: var(--teal); text-decoration: underline; }
.ys-prose a:hover { color: var(--highlight); }

/* --- 濃色（紺）背景のセクション ---
   ⚠ Elementor の text_color 設定だけでは**見出しが濃紺のまま残る**。
     Elementor が出すのは `.elementor-widget-text-editor { color }` で、
     テーマの `#content h2 { color:#001F4F }` に負けるため、
     紺地に紺文字になってほぼ読めない（/slot-die/ /microgravure/ /advanced-slot-die/）。
     セクション側の .ys-dark で、見出し・リンクまで含めて白に倒す。
   ⚠ #content を付けてテーマの見出し色より詳細度を上げること。 */
#content .ys-dark h1,
#content .ys-dark h2,
#content .ys-dark h3,
#content .ys-dark h4,
#content .ys-dark h5,
#content .ys-dark h6,
#content .ys-dark p,
#content .ys-dark li,
#content .ys-dark td,
#content .ys-dark th { color: #FFFFFF; }

/* 紺地の上ではリンクの teal が沈むので、水色寄りにして下線を残す */
#content .ys-dark a { color: var(--highlight); }
#content .ys-dark a:hover { color: #FFFFFF; }

/* --- 本文中の素の <button> ---
   元サイトが `<a><button>ラベル</button></a>` と書いている箇所
   （/slot-die/ の Advanced Slot Die Design、/media/ の記事リンク）。
   ⚠ ブラウザ既定の角ばったボタンのまま出るとサイトの丸ボタンと不揃いになる。
     ヘッダーCTA・カード内ボタンと同じピル型に揃える。 */
.ys-prose a > button,
.ys-prose button,
.ys-contact-info a > button,
.ys-contact-info button {
  display: inline-block;
  padding: 14px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--highlight);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ys-prose a > button:hover,
.ys-prose button:hover,
.ys-contact-info a > button:hover,
.ys-contact-info button:hover { background: var(--ys-blue); }

/* ボタンを包む <a> には本文リンクの下線・色を効かせない */
.ys-prose a:has(> button),
.ys-contact-info a:has(> button) { text-decoration: none; color: inherit; }

/* --- 見出しサイズの2段階の落とし込み（クライアント判断 2026-08-07）---
   元サイトは「FACT: 〜」のようなリード**文章**を h2 で書いている箇所があり、
   共通の48pxだと4〜5行に折り返して圧迫感が強い。

     .ys-long (100字超)  → 24px  文章になっている見出し
     .ys-mid  (ページ単位) → 36px  50字超の見出しがあるページの通常見出し

   ⚠ .ys-mid は**ページ内の全見出しに一括で**付ける。閾値で個別に縮めると
     /advanced-slot-die/ の手順1〜4が「1と4は48px・2と3は24px」のように
     割れて崩れる。揃えることが目的で、縮めること自体が目的ではない。

   ⚠ 見出しウィジェット側はクラスがラッパに付くため `.ys-long h2`、
     本文中の見出しは要素自身に付くため `h2.ys-long` になる。両方書くこと。 */
#content .ys-mid h1,
#content .ys-mid h2,
#content h1.ys-mid,
#content h2.ys-mid {
  font-size: 36px;
  line-height: 48px;
}
#content .ys-long h1,
#content .ys-long h2,
#content h1.ys-long,
#content h2.ys-long {
  font-size: 24px;
  line-height: 36px;
}
@media (max-width: 767px) {
  #content .ys-mid h1,
  #content .ys-mid h2,
  #content h1.ys-mid,
  #content h2.ys-mid { font-size: 26px; line-height: 36px; }

  #content .ys-long h1,
  #content .ys-long h2,
  #content h1.ys-long,
  #content h2.ys-long { font-size: 20px; line-height: 31px; }
}

/* --- 本文中の画像は左に回り込ませる（2026-08-07 ユーザー指示）---
   画像は本文カラム(1140px)より小さいものが多く、ブロック表示だと
   右に大きな余白ができて中途半端に見えるため。

   ⚠ float するのは **1ブロックにつき1枚だけ**（生成時に .ys-float を付与）。
     ブロック内の画像を全部 float にすると、538px の画像が横に2枚並んで
     本文が幅120pxの帯に潰れたり（/slot-die/ Workmanship）、
     回り込む文字が無い画像の右に数百pxの空白が残ったりする。
     既定は通常のブロック要素のままにしておくこと。

   ⚠ 横長の図（図面・地図など・縦横比2.0以上）は .ys-float を付けない。
     幅が半分になると寸法値やラベルが読めなくなるため。 */
.ys-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0 24px;
}
.ys-prose img.ys-float {
  float: left;
  display: inline;
  max-width: 48%;
  margin: 6px 30px 20px 0;
}

/* ⚠ 親テーマ（techto/style.css）が `h1,h2,h3,h4,h5,h6 { clear: both }` を
     当てており、これが**本文中の見出しを float の下へ突き落とす**。
     /about/ の社長挨拶では、写真の横に「CEO, Taku Kusano / April 2024」だけが並び、
     見出しと本文はすべて写真の下（top 646px）へ落ちていた。
     本文内だけ解除して、見出しごと回り込ませる。
   ⚠ 解除してよいのは .ys-prose の中だけ。ページ見出しやフッターの
     見出しまで解除すると別のレイアウトが崩れる。 */
.ys-prose h1,
.ys-prose h2,
.ys-prose h3,
.ys-prose h4,
.ys-prose h5,
.ys-prose h6 { clear: none; }

/* ⚠ 回り込みを解除しないと、次のセクションが画像の横に潜り込む。 */
.ys-prose::after {
  content: "";
  display: block;
  clear: both;
}

/* --- 連続セクションの余白の二重取りを解消する ---
   「見出し＋リード文」の直後にカード一覧が続く箇所（機種一覧ページ等）は、
   セクション下72px ＋ セクション上72px ＋ 内側の余白で**197px**空いてしまい、
   リード文とカードが切り離されて見える（クライアント指摘 2026-08-07）。
   ⚠ 単独のカード一覧まで詰めないよう、隣り合う組にだけ
     生成時に .ys-tight-bottom / .ys-tight-top を付けている。 */
#content .elementor-section.ys-tight-bottom { padding-bottom: 24px; }
#content .elementor-section.ys-tight-top { padding-top: 0; }

/* --- 掲載記事の一覧（/media/）---
   「左に写真か動画、右に日付・見出し・説明」の記事が十数件並ぶページ。
   元サイトは Bootstrap の row/col で横並びだったが、移行時にクラスを落とすため
   縦に積み上がり、1ページ12,600pxの縦長になっていた（クライアント指摘 2026-08-07）。
   生成時に .ys-media-item を付けているので、ここで2カラムに戻す。 */
.ys-prose .ys-media-item {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 30px 0;
}
.ys-prose .ys-media-item figure { margin: 0; }
.ys-prose .ys-media-item img {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 8px;
}
/* ⚠ iframe は width/height 属性を持っているので、比率を固定しないと
     カラム幅に対して不格好に潰れる。 */
.ys-prose .ys-media-item iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
}
.ys-prose .ys-media-item figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.ys-prose .ys-media-item h3 {
  margin-top: 0;
  font-size: 22px;
  line-height: 1.45;
}
/* 日付は本文より小さく、控えめに */
.ys-prose .ys-media-item > div:last-child > p:first-child em {
  font-size: 14px;
  font-style: normal;
  color: #6F6C90;
}
.ys-prose .ys-media-item p:last-child { margin-bottom: 0; }

/* --- プレスリリース1件（/media/ 後半）---
   元サイトは figure に float-md-start を当てて本文を回り込ませていた。
   移行時にクラスが落ちて画像が全幅になり、記事が間延びしていたので戻す。 */
.ys-prose .ys-press-item {
  padding: 30px 0;
  border-top: 1px solid #E5E7EF;
}
.ys-prose .ys-press-item:first-of-type { border-top: 0; }
.ys-prose .ys-press-item::after { content: ""; display: block; clear: both; }
.ys-prose .ys-press-item figure {
  float: left;
  width: 300px;
  max-width: 45%;
  margin: 6px 28px 14px 0;
}
.ys-prose .ys-press-item img {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 8px;
}
.ys-prose .ys-press-item h3 { margin-top: 0; font-size: 22px; line-height: 1.45; }
.ys-prose .ys-press-item p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .ys-prose .ys-press-item figure {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
  }
}

/* ⚠ 区切り線は記事ごとの <hr> に任せる。グリッドの padding と二重にならないよう
     余白は打ち消しておく。 */
.ys-prose hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid #E5E7EF;
}

@media (max-width: 767px) {
  .ys-prose .ys-media-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }
}

/* --- 顧客ロゴのグリッド（/customers/）---
   旧サイトはロゴ約75社を1枚のコラージュ画像に詰め込んでおり、
   大きさも色もバラバラで読みにくかった（クライアント指摘 2026-08-07）。
   姉妹サイト mirwec-coating.com と同じ「等間隔グリッド」に揃える。

   ⚠ ロゴは縦横比がバラバラ（横長・正方形が混在）。
     セルの高さを固定し object-fit: contain で収めないと、
     行ごとに高さが変わってガタつく。 */
.ys-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px 32px;
  align-items: center;
  margin: 8px 0 0;
}
.ys-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}
.ys-logo-grid img {
  display: block;
  float: none;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
}
@media (max-width: 767px) {
  .ys-logo-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 28px 20px;
  }
  .ys-logo-cell { height: 48px; }
}

/* --- 写真を横並びにする（生成時に .ys-figrow を付与）---
   元サイトが `<div><a><figure><img><figcaption>` を並べている箇所
   （/about/ の Yasui Seiki Facilities など）。
   ⚠ そのままだと縦に積まれ、右側に数百pxの空白が残る。
     枚数が変わっても破綻しないよう auto-fit で組む。 */
.ys-prose .ys-figrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin: 8px 0 24px;
}
.ys-prose .ys-figrow figure { margin: 0; }
.ys-prose .ys-figrow img {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 8px;
}
.ys-prose .ys-figrow figcaption {
  margin-top: 10px;
  font-size: 15px;
}
@media (max-width: 767px) {
  .ys-prose .ys-figrow { grid-template-columns: 1fr; gap: 20px; }
}

/* 狭い画面では回り込ませない。
   本文カラムが狭く、画像の隣に置ける文字数が足りなくなるため。 */
@media (max-width: 767px) {
  .ys-prose img.ys-float {
    float: none;
    display: block;
    max-width: 100%;
    margin: 8px 0 20px;
  }
}

/* --- 表（Specifications / 会社概要 / 比較表）---
   ⚠ 元サイトは Bootstrap の .table に依存していたが、
     生成時にクラスを落としているのでここで一から当てる。
     狭い画面でははみ出すため、必ず .ys-table-wrap で横スクロールさせる。 */
.ys-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.4em;
}
/* --- 仕様表のパネル（機種詳細7ページ）---
   mirwec は表を**青いグラデーションのパネル**に載せている。
   実測: linear-gradient(135deg, #1B3D6E 0%, #2660A4 40%, #4A9AB5 100%)
         余白 60px 40px ／ 表は800px中央
   ⚠ 色は yasuiseiki のパレットへ読み替える（--navy → --ys-blue → 落ち着いた青緑）。
     mirwec の色をそのまま持ってくるとブランドカラーが混ざる。
   ⚠ Elementor がセクションに白背景を出しているので !important が要る。 */
#content .elementor-section.ys-spec-section {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, #132257 0%, #003579 45%, #1B7FA8 100%) !important;
  padding: 60px 40px !important;
}
#content .ys-spec-section h1,
#content .ys-spec-section h2,
#content .ys-spec-section h3 { color: #fff; }
#content .ys-spec-section .ys-prose,
#content .ys-spec-section .ys-prose p { color: rgba(255, 255, 255, .92); }

/* 表はパネルの中で中央に置く（mirwecは800px幅） */
.ys-spec-section .ys-table-wrap {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  #content .elementor-section.ys-spec-section { padding: 36px 16px !important; }
}

/* 見た目は mirwec の /capabilities/coating-equipment/ に合わせる（2026-08-07）。
   実測値: 余白 18px 28px ／ 罫線 1px #B0D0E0 ／ 縞 白と #D4E8F5 ／
           1列目は大文字・色 #2C5F7A・weight 500 ／ 本文14px。
   ⚠ 色だけは yasuiseiki のパレット（--ys-blue 系）に読み替える。
     mirwec の水色をそのまま使うとブランドカラーが混ざる。
   ⚠ yasuiseiki の表は**3列でヘッダー行がある**（機種名 / Standard / Options）。
     mirwec の表にヘッダーは無いが、こちらは意味を持つので紺帯のまま残す。 */
.ys-table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}
.ys-table-wrap th,
.ys-table-wrap td {
  padding: 16px 24px;
  border: 1px solid #C9D8EC;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
/* ⚠ `thead th` だけでなく **`thead td` も**対象にすること。
     旧サイトのHTMLは見出し行を <th> ではなく <td><strong> で組んでいる表があり
     （/microgravure/ の MICROGRAVURE™ Mesh Chart など）、
     th だけを狙うとその表だけ見出しが白地のまま浮いてしまう。
   ⚠ 中の <strong> は色を継承しないことがあるので明示的に白にする。 */
/* ⚠ 見出し行に `text-transform: uppercase` を掛けてはいけない。
     ここには**製品名と単位**が入るため、大文字化すると意味が変わる（実測）：
       μCoater™ 350 → ΜCoater（ギリシャ大文字Μ。Mと見分けがつかない）
       βCoater ™    → ΒCoater
       (μm)         → (ΜM) ＝ ミリメートルに読める。1000倍の誤り
     該当は /mu-coater-350/ /mu-coater-650/ /beta-coater/ /microgravure/ の4ページ。
     1列目（tbody td:first-child）は項目名だけで、全64ページを走査しても
     μ・β・Ω・°を含むセルは0件だったため、そちらの uppercase は残してある。 */
.ys-table-wrap thead th,
.ys-table-wrap thead td {
  background: var(--ys-blue);
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
}
.ys-table-wrap thead th strong,
.ys-table-wrap thead td strong { color: inherit; font-weight: 600; }
/* 縞。mirwec は白と薄い水色の交互。 */
.ys-table-wrap tbody tr:nth-child(even) { background: #E7EFF9; }
.ys-table-wrap tbody tr:nth-child(odd) { background: #fff; }

/* 1列目は項目名。大文字＋字間で見出しらしくする（mirwecと同じ扱い）。 */
.ys-table-wrap tbody td:first-child {
  color: var(--ys-blue);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* ⚠ 項目名が長い表（/about/ の沿革など）まで nowrap にすると横に伸びるので戻す。 */
.ys-table-wrap.ys-table-longlabel tbody td:first-child {
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
}

/* --- 画像キャプション --- */
.ys-caption {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(19, 34, 87, .66);
  text-align: center;
}

/* --- カード一覧（用途カテゴリ・機種一覧）---
   mirwec と同じ Techto Addons の `rs-service-grid`（style13）の
   マークアップを出しているので、見た目の大半はプラグインCSSが当てる。
   ここでは色と、プラグインが持っていない微調整だけを足す。

   mirwec 実測: 角丸12px / padding 35px 20px 20px /
                見出し Barlow 24px・行間32px / 本文 16px・行間28px /
                画像は見出しと本文の**下** */
.ys-card .rs-addon-services.style13 .services-inner {
  border-radius: 12px;
  padding: 35px 20px 20px;
  height: 100%;
}
.ys-card .services-title .title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.ys-card .services-title .title a { color: var(--navy); text-decoration: none; }
.ys-card .services-title .title a:hover { color: var(--highlight); }
.ys-card .desc-text { font-size: 16px; line-height: 28px; }

/* 矢印は mirwec が #001F4F 直書き。こちらはブランド青に合わせる */
.ys-card .services-btn { color: var(--ys-blue); }
.ys-card .services-btn:hover { color: var(--highlight); }
.ys-card .services-btn svg path { fill: currentColor; }


/* ⚠ ここは**プラグインと同じ詳細度以上**で書くこと。
   プラグインは `.rs-addon-services.style13 .services-inner .grid_footer_part`
   （クラス4つ）で指定しており、`.ys-card .grid_footer_part`（クラス2つ）では負ける。
   実際に負けて padding:30px が残り、カード幅346pxに対し画像が246pxまで縮んだ。 */

/* --- カード全体を薄いグレーの角丸で囲む（mirwec と同じ見え方）---
   グレーの地とその右上の切り欠きは、プラグインの
   `.corner-curve .services-inner::after` が #f7f7f7 ＋ SVGマスクで描いている。

   ⚠ .services-inner を display:flex にしてはいけない。
     ::after が flex アイテム扱いになって背景が出なくなる
     （実際にカードが白いままになった）。
   ⚠ ::after は position:absolute のため、そのままだと本文の上に乗る。
     z-index で地と中身の重なり順を明示すること。 */
.ys-card .rs-addon-services.style13 .services-inner {
  display: block;
  /* z-index:0 を付けて**このカード内に閉じた重なり順**を作る。
     これが無いと ::after の z-index:-1 がカードの外まで潜り、
     セクションの白背景の裏に回ってグレーが見えなくなる。 */
  position: relative;
  z-index: 0;
}
/* ⚠ グレーの地は必ず中身の**背面**へ。
   ::after は absolute なので既定では中身より前面に描かれ、
   実際にタイトルと本文がグレーに隠れて消えた。 */
.ys-card .rs-addon-services.corner-curve .services-inner::after { z-index: -1; }

/* --- 矢印はカードの右上へ ---
   mirwec 実測: カード上端から18px / 右端から27px。
   在庫の位置（本文の下）だとカードごとに高さが変わって位置が揃わず、
   宙に浮いて見える。

   ⚠ .content_part を position:static にしておくこと。
     relative のままだと絶対配置の基準がそちらになり、
     .services-inner の padding(35/20) の分だけずれる。 */
.ys-card .rs-addon-services.style13 .services-inner .content_part { position: static; }
.ys-card .rs-addon-services.style13 .services-inner .btn-part {
  position: absolute;
  top: 18px;
  right: 27px;
  z-index: 2;
}
/* 見出しが矢印の下に潜らないよう右を空ける */
.ys-card .services-title .title { padding-right: 44px; }

/* --- 画像 ---
   mirwec は .grid_footer_part の padding を 0 にして画像を幅いっぱいに使い、
   角丸12pxで切り抜いている（プラグイン既定の padding:30px のままだと
   カード幅346pxに対し画像が246pxまで縮む）。 */
.ys-card .rs-addon-services.style13 .services-inner .grid_footer_part {
  padding: 0;
  margin-top: 18px;
  /* ⚠ ここが**カード写真の見た目の角丸**（写真自体ではなく、この枠が
       overflow:hidden で切り抜いている）。本文写真と揃えて 8px（2026-08-16 指示）。
       カード自体の枠 .services-inner は 12px のまま。写真8px・枠12px の
       入れ子は .ys-gallery-item と同じ関係になっている。 */
  border-radius: 8px;
  overflow: hidden;
  background: transparent;   /* 地はカード全体のグレーに任せる */
}
.ys-card .rs-addon-services.style13 .services-inner .grid_footer_part .grid_footer_img img {
  display: block;
  width: 100%;
  height: 265px;   /* mirwec の 513:395 をカード幅346pxへ換算 */

  /* ⚠ `cover` にしてはいけない（2026-08-08 ユーザー指摘）。
       枠は 306x265（約1.15:1）だが、機種写真の縦横比はバラバラで、
       mini-labo.png は 418x250（約1.67:1）と横長。
       cover だと枠を埋めるために左右が大きく削られ、**装置が見切れる**。
       contain なら全体が必ず収まり、余った分はカードのグレーが見える
       （Mini-Labo Deluxe と同じ見え方になる）。
     ⚠ 写真は機種の形そのものが情報。構図を優先して切り落とさないこと。 */
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

/* --- 機種カードだけは切り抜き済み写真を全面に敷く ---
   `card-*.jpg` は make_card_images.py が**カード枠と同じ縦横比で**書き出した
   写真なので、contain だと周りにグレーの帯が出るだけで意味がない。
   cover にして枠いっぱいに使う（縦横比が一致しているので切れない）。

   ⚠ ファイル名で判定しているのは、カードのマークアップが Techto Addons の
     ウィジェット由来で、こちら側からクラスを足せる場所が無いため。
     命名規則（card-<機種>.jpg）を変えるときはこのセレクタも直すこと。
   ⚠ 製品を白背景で切り抜いた PNG（CAD/CAG カタログなど）は
     従来どおり contain のまま。cover にすると図版が切れる。 */
.ys-card .rs-addon-services.style13 .services-inner .grid_footer_part .grid_footer_img img[src*="/card-"] {
  object-fit: cover;
  padding: 0;
}

/* --- 用途カードの写真を「切らずに角丸」にする（2026-08-16 指示）---
   枠 .grid_footer_part には角丸8px＋overflow:hidden が入っているのに、
   写真が `object-fit: contain` ＋ `padding:10px` で**レターボックス**に
   なっており、写真の角が枠の丸みに届いていなかった。
   結果、枠は丸いのに写真だけ四角いまま
   （/applications/electronic/ などで指摘・2026-08-16）。

   直し方は **height: auto**。枠の高さを写真の縦横比に合わせてしまえば
   写真と枠が完全に一致し、枠の overflow:hidden ＋ 8px でそのまま丸く切れる。

   ⚠ **cover で埋めないこと。** 用途カードの写真は 450x360 が45点・
     600x400 が1点・500x404 が1点で、枠（約1.1:1）に cover で合わせると
     左右が 11〜26% 切り落とされる（全10ページ実測）。
     height:auto なら切り落としはゼロ。
   ⚠ `card-*.jpg`（機種カード）は枠と同じ縦横比で書き出し済みで、
     すぐ上のルールで cover ＋ padding:0 にしてあるため対象から外す。
   ℹ️ 600x400 の1点（advanced-3d-ic-packaging）だけ写真が41px低くなり、
     そのカードも少し短くなる。カードの高さは元々揃えていないので許容する。 */
.ys-card .rs-addon-services.style13 .services-inner .grid_footer_part .grid_footer_img img:not([src*="/card-"]) {
  height: auto;
  padding: 0;
}

/* ⚠ カードの高さは揃えない。mirwec 自身も揃えていないため。 */

.ys-card-grid .elementor-widget-heading { margin-bottom: 34px; }

/* ===========================================================
   大きなタイル（トップページの機種一覧）
   apple.com トップの2分割タイルに寄せる。2026-08-08 ユーザー指示。

   構造は tile_grid_section() が作る:
     .ys-tiles > … > .elementor-inner-section > .elementor-container
       └ .ys-tile-col ×2  →  <a class="ys-tile">
                               <span class="ys-tile-head">  名前＋ボタン
                               <span class="ys-tile-media"> 写真
   =========================================================== */

/* ⚠ セクションを**ブラウザ幅いっぱい**に広げる（2026-08-08 ユーザー指示）。
     max-width を外すだけでは足りない。本文は親テーマの container の中にあり、
     左右に余白を持っているため、そのぶん内側に留まってしまう
     （実測 1450px の画面で 1406px ＝ 左右22pxずつ残っていた）。
     いったん container の外へ引き出す必要がある。

   ⚠ `overflow-x: clip` を body に掛けているのは、100vw が
     スクロールバーの幅を含むため。これが無いと**横スクロールが出る**。
     `hidden` ではなく `clip` を使うこと。hidden はスクロールコンテナを作り、
     ヘッダーの position: sticky を壊す。 */
body { overflow-x: clip; }

#content .ys-tiles {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ⚠ max-width は **!important が要る**。テーマ側が
     `.elementor-container { max-width: 1140px }` を当てており、
     同じ詳細度では後勝ちで負ける（実測 1140px のままだった）。 */
#content .ys-tiles > .elementor-container,
#content .ys-tiles .elementor-inner-section > .elementor-container {
  max-width: none !important;
  width: 100%;
}
#content .ys-tiles .elementor-inner-section > .elementor-container {
  gap: 12px;              /* タイル同士の白い隙間 */
  align-items: stretch;
}
#content .ys-tiles .elementor-inner-section { margin-bottom: 12px; }
#content .ys-tiles .elementor-inner-section:last-child { margin-bottom: 0; }

/* ⚠ カラムを `width: 50%` のままにしてはいけない。
     50% + 50% + gap 12px = 100%超 となり、2枚目が**次の行へ折り返す**。
     実測でタイルが1列に6段並ぶ状態になった。
     flex: 1 1 0 にして「残り幅を等分」させ、gap は自動的に差し引かせる。 */
#content .ys-tiles .ys-tile-col {
  flex: 1 1 0;
  width: auto !important;
  max-width: none;
  min-width: 0;
}

/* ⚠ カラムの padding は 0 にする。残っているとタイルの背景色が
     隙間だらけになり、隣のタイルと揃わない。 */
#content .ys-tiles .ys-tile-col > .elementor-widget-wrap { padding: 0; }
#content .ys-tiles .ys-tile-col .elementor-widget-html { width: 100%; }

.ys-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 540px;
  padding: 54px 24px 0;
  box-sizing: border-box;

  text-align: center;
  text-decoration: none;
  background: #F5F6F8;
  overflow: hidden;
}
.ys-tile:hover { text-decoration: none; }

.ys-tile-head { display: block; }

.ys-tile-title {
  display: block;
  color: var(--ys-blue);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* 一行説明。⚠ 文言は各機種ページの見出しをそのまま使っている
   （build_templates.py の TILE_TAGLINES）。ここで書き換えないこと。 */
.ys-tile-lead {
  display: block;
  max-width: 30em;
  margin: 12px auto 0;
  color: #4B5563;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
}
#content .ys-tiles .ys-tile-dark .ys-tile-lead { color: rgba(255, 255, 255, .85); }

.ys-tile-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--highlight);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background .2s ease;
}
.ys-tile:hover .ys-tile-btn { background: var(--ys-blue); }

/* 写真は下端いっぱいに。上の余白は名前の分だけ空ける。 */
.ys-tile-media {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-top: 34px;
  flex: 1 1 auto;
  min-height: 0;
}
.ys-tile-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 下端はタイルに接するので上2つだけ。半径は本文写真と揃えて 8px
     （2026-08-16 指示。以前は 14px で、ここだけ他と違っていた）。 */
  border-radius: 8px 8px 0 0;
}

/* ⚠ 濃い背景のタイルを混ぜて単調さを避ける（Appleも黒と白を混ぜている）。
     3行目の左（5枚目）だけ紺にする。文字色は必ずセットで変えること。
     nth-child は見出しウィジェットを1つ数えるため、行は 2〜4 番目になる。 */
#content .ys-tiles .elementor-inner-section:nth-of-type(3) .ys-tile-col:first-child .ys-tile {
  background: var(--ys-blue);
}
#content .ys-tiles .elementor-inner-section:nth-of-type(3) .ys-tile-col:first-child .ys-tile-title {
  color: #fff;
}
#content .ys-tiles .elementor-inner-section:nth-of-type(3) .ys-tile-col:first-child .ys-tile-lead {
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 1024px) {
  .ys-tile { min-height: 440px; padding: 40px 20px 0; }
}

/* ⚠ スマホは1列に積む。2列のままだとタイル幅が175pxになり、
     機種名が5行に折り返して読めなくなる。 */
@media (max-width: 767px) {
  #content .ys-tiles .elementor-inner-section > .elementor-container {
    flex-wrap: wrap;
  }
  #content .ys-tiles .ys-tile-col {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100%;
  }
  .ys-tile { min-height: 400px; padding: 36px 20px 0; }
  .ys-tile-media { margin-top: 26px; }
}

/* --- 画像ギャラリー（機種詳細の Examples / Alternate Views）---
   カード一覧と同じく、1項目ずつ薄いグレーの角丸で囲んで見やすくする。
   ここは矢印や切り欠きは付けない（リンク先を持たない図版のため）。 */
.ys-gallery-item > .elementor-widget-wrap,
.ys-gallery-item.elementor-column > .elementor-element-populated {
  background: #F7F7F7;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
}
.ys-gallery-item img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;   /* 機械の図版なので切らずに全体を見せる */
  background: #fff;
  border-radius: 8px;
}
.ys-gallery-item .ys-caption {
  margin-top: 14px;
  margin-bottom: 0;
  text-align: left;
}

/* 1カラム表示（Drawing など図面1枚）のときは囲まない。
   図面は横長で、グレーの枠に入れるとかえって窮屈に見える。 */
.ys-gallery .elementor-inner-section > .elementor-container > .ys-gallery-item:only-child > .elementor-widget-wrap {
  background: transparent;
  padding: 0;
}
.ys-gallery .elementor-inner-section > .elementor-container > .ys-gallery-item:only-child img {
  height: auto;
  background: transparent;
}

/* --- 引用（トップのお客様の声）--- */
.ys-quotes blockquote {
  margin: 0 0 24px;
  padding: 20px 26px;
  background: #fff;
  border-left: 4px solid var(--highlight);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.8;
  /* 親テーマの blockquote は min-height:170px。
     装飾引用符を収めるための高さなので、引用符を消した以上は不要。
     残すと本文の短い引用で下に大きな空白ができる。 */
  min-height: 0;
}

/* 発言者。元の静的サイトでは引用本文とは別段落・斜体で分けていた。
   移行時に1つの blockquote へ統合され、名前が本文の続きに
   見えてしまっていたため復元する。 */
.ys-quotes blockquote p { margin: 0; }
.ys-quotes blockquote cite {
  display: block;
  margin-top: 14px;
  font-style: italic;
  font-size: 15px;
}

/* 親テーマ techto の default.css が blockquote::before に
   remixicon の巨大な引用符（183px / 黒6%）を絶対配置で出している。
   「What our customers say」では不要なので消す（2026-08-15 クライアント指示）。

   ⚠ default.css 側は content に !important を付けている。
     セレクタの詳細度ではこちらが勝つが、!important には勝てないため
     こちらも !important が必須。付け忘れると position だけ効いて
     引用符が本文に重なるという中途半端な状態になる（実際にはまった）。 */
.ys-quotes blockquote::before {
  content: none !important;
}

/* --- About 冒頭の写真（左寄せ回り込み）---
   元サイトは Bootstrap の
     img-fluid display-block float-lg-start border border-black me-4 mb-4
   を当てていた。移行時にクラスが落ちてブロック配置になり、
   写真が本文の上に単独で乗る状態だったため復元する。 */
.ys-float-wrap::after {
  content: "";
  display: table;
  clear: both;
}
/* ⚠ セレクタを .ys-float-left だけにすると効かない。
     Elementor の `.elementor img`（枠線リセット）と
     このファイル内の `.ys-prose img`（マージン）がどちらも
     詳細度 (0,1,1) で、クラス単独の (0,1,0) では負ける。
     親クラスと要素型を足して (0,2,1) にしてから当てること。 */
.ys-float-wrap img.ys-float-left {
  float: left;
  /* 元画像は 500x375。元サイトも等倍で出していたが、
     Elementor のカラムが広く写真が目立ちすぎるため
     360px に縮小する（2026-08-15 クライアント指示）。 */
  width: 360px;
  margin: 0 24px 24px 0;
  max-width: 100%;
  height: auto;
}
/* ※ 元サイトは border border-black で黒枠を付けていたが、
     2026-08-15 の指示で About の画像は全て枠なし・角丸に統一した。
     枠線と角丸の指定は下の body.page-id-1002 のルールに集約している。 */
/* 回り込みは元サイト（float-lg-start）と同じく 992px 以上のみ。
   狭い画面で回り込ませると本文の行長が足りず読みにくくなる。 */
@media (max-width: 991px) {
  .ys-float-wrap img.ys-float-left {
    float: none;
    margin: 0 0 24px;
  }
}

/* --- CEO 写真（Commitment to Excellence）---
   元サイトは col-md-4 / col-md-8 の2カラムだったが、
   1枚目の写真と揃えて左寄せ回り込みにする（2026-08-15 指示）。
   1枚目と違い枠線なし・角丸。
   figure ごと float させて、キャプションを写真に追従させる。 */
.ys-float-fig {
  float: left;
  width: 360px;
  max-width: 100%;
  margin: 0 24px 16px 0;
}
/* ⚠ `.elementor img`（詳細度 0,1,1）に負けないよう要素型を2つ重ねる。 */
.ys-float-fig figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 8px;   /* サイト全体で 8px に統一（2026-08-15 指示） */
}
.ys-float-fig figure { margin: 0; }
.ys-float-fig figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 991px) {
  .ys-float-fig {
    float: none;
    width: auto;
    margin: 0 0 24px;
  }
}

/* --- Yasui Seiki Facilities（3列）---
   元サイトは col-12 col-md-4 の3カラム。移行でグリッドクラスが
   落ちて縦積みになっていたため、Grid で組み直す。
   768px 未満で1列にするのは元サイト（col-12）と同じ挙動。 */
.ys-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ys-cols-3 figure { margin: 0; }
.ys-cols-3 figure img {
  display: block;
  width: 100%;
  height: auto;
}
.ys-cols-3 figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .ys-cols-3 { grid-template-columns: 1fr; }
}

/* --- 本文の写真は角丸 8px でサイト全体を統一（2026-08-16 指示）---
   以前は /about/（page-id-1002）と /advanced-slot-die/（1003）だけを
   ページIDで名指ししていた。そのため機種ページや用途ページの写真が
   角のまま取り残されていた（例: /mini-labo/ の ML-with-an-operator-2025.jpg）。
   全64ページ・本文画像481点を実測したところ、角丸が無かったのは
   画像ウィジェットの写真43点＋テキストウィジェットの図版10点の計53点。
   ページIDをやめ、本文（#content）の画像ウィジェットと
   テキストウィジェットの画像をまとめて対象にする。

   ⚠ 詳細度は #content を足して (1,1,1) にすること。打ち消す相手は
       .elementor img                       (0,1,1)
       .ys-float-wrap img.ys-float-left     (0,2,1)
     で、ID が1つ入るこちらなら !important 無しで確実に勝つ。
   ⚠ 半径は他の本文図版（.ys-figrow / .ys-figs-row / .ys-gallery-item /
     .ys-media-item / .ys-press-item / .ys-video）と同じ 8px に揃えてある。
     ここだけ変えると本文の中で角丸が2種類になるので、変えるなら全部一緒に。
   ℹ️ 用途ページの icon-1〜6.png もこの指定に入るが、背景が透明な
     円形アイコンなので角丸は見た目に出ない（実測で確認済み）。
   ℹ️ トップの横スクロールロゴ（.ys-logo-marquee）と機種カードの写真は
     HTMLウィジェットなので、このセレクタには最初から入らない。 */
#content .elementor-widget-image img,
#content .elementor-widget-text-editor img {
  border-radius: 8px;
}

/* ⚠ **ロゴは角丸にしない。**
   /customers/ の取引先ロゴ68点はテキストウィジェットで組んであるため、
   上のセレクタにそのまま入ってしまう。ここで打ち消す。
   ヘッダーとフッターのロゴは #content の外にあるので指定は要らない
   （全64ページで `closest('#content')` が false になることを実測済み）。 */
#content .ys-logo-grid img {
  border-radius: 0;
}

/* --- 図版2枚を左右に並べる（/slot-die/ の Workmanship）---
   元サイトは Bootstrap の col-sm-4 / col-sm-8 だったが移行でクラスが落ち、
   代わりに cmm の img へ .ys-float が当たっていた。その float に引っぱられて
   2枚目（Precision Grinder）の figcaption だけが図から切り離され、
   CMM画像の下に落ちていた（クライアント指摘 2026-08-15）。
   指示により「キャプションを画像の上」「2枚を左右並び」に組み直す。

   ⚠ キャプションの行数が左右で違う（CMM側は2行に折り返す）ため、
     素直に組むと画像の上端がズレる。subgrid で行を親と共有して揃える。 */
.ys-prose .ys-figs-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 8px 32px;
  max-width: 760px;
  margin: 0 0 32px;
}
.ys-prose .ys-figs-row figure {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  margin: 0;
}
.ys-prose .ys-figs-row figcaption {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  align-self: end;
}
.ys-prose .ys-figs-row img {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 8px;   /* 角丸は維持（2026-08-15 指示） */
}
/* subgrid 非対応ブラウザ向け。揃いは崩れるが並びは保たれる。 */
@supports not (grid-template-rows: subgrid) {
  .ys-prose .ys-figs-row figure { display: block; }
  .ys-prose .ys-figs-row figcaption { margin-bottom: 8px; }
}
@media (max-width: 767px) {
  .ys-prose .ys-figs-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
  }
  .ys-prose .ys-figs-row figure { display: block; grid-row: auto; }
  .ys-prose .ys-figs-row figcaption { margin-bottom: 8px; }
}

/* --- トップの取引先ロゴ（横スクロール）---
   mirwec は Techto Addons の rs-logo ウィジェットで実現しているが、
   こちらはプラグインの設定に依存させず CSS だけで動かす。
   理由: プラグイン更新で設定が飛ぶリスクを避けたいのと、
        ロゴの差し替えが HTML の並び替えだけで済むため。

   ⚠ ロゴは**2セット並べて** -50% までずらすことで途切れなくループする。
     セット数を変える／片方を消すと、折り返しで飛ぶので注意。
   ⚠ 2セット目は読み上げ不要なので aria-hidden にしてある。 */
.ys-logo-marquee {
  overflow: hidden;
  position: relative;
  padding: 8px 0;
  -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);
}
.ys-logo-marquee .ys-logo-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: ys-logo-marquee 40s linear infinite;
}
.ys-logo-marquee img {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
}
/* ホバー中は止めて、ロゴを読み取れるようにする */
.ys-logo-marquee:hover .ys-logo-track { animation-play-state: paused; }
@keyframes ys-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 動きを減らす設定の利用者には流さない */
@media (prefers-reduced-motion: reduce) {
  .ys-logo-marquee .ys-logo-track { animation: none; }
}
@media (max-width: 767px) {
  .ys-logo-marquee .ys-logo-track { gap: 40px; }
  .ys-logo-marquee img { height: 30px; }
}

/* --- 本文中の動画（/multi-applicator/）---
   移行後の iframe は width / height 属性を持たないため、既定の 300×150 のまま
   横だけ伸ばされ、極端に平たい枠の中で映像が細い帯になっていた
   （クライアント指摘 2026-08-15）。16:9 を固定して収める。 */
.ys-prose .ys-video {
  display: block;
  max-width: 760px;
  margin: 0 0 24px;
}
.ys-prose .ys-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
}
.ys-prose .ys-video figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* --- Mini-Labo「Components and Options」の選択欄 ---
   元サイトは Bootstrap の d-flex gap-5 mt-2 で
   Coating Method と Option(s) を横並びにしていた。
   移行でクラスが落ちて縦積みになっていたため復元する。 */
.ys-opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 8px;
}
.ys-opt-row > div { min-width: 200px; }
@media (max-width: 575px) {
  .ys-opt-row { gap: 24px; }
}

/* --- CTA帯 --- */
.ys-cta .elementor-widget-heading { margin-bottom: 26px; }

/* --- お問い合わせ --- */
.ys-contact-info { line-height: 1.9; }
.ys-contact-info h2 { font-size: 26px; color: var(--ys-blue); margin-bottom: .6em; }
.ys-map iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 767px) {
  .ys-table-wrap table { min-width: 420px; font-size: 13px; }
  /* 狭い画面では 24px の左右余白が効きすぎるので詰める */
  .ys-table-wrap th,
  .ys-table-wrap td { padding: 12px 14px; }
  .ys-card .grid_footer_img img { height: 200px; }
  /* ⚠ 用途カードの写真はスマホでも縦横比のまま（height:auto を維持）。
       200px 固定に戻すと、また枠との間にレターボックスが出て
       角が四角く見える。機種カード（card-*.jpg）は 200px のままでよい。 */
  .ys-card .grid_footer_img img:not([src*="/card-"]) { height: auto; }
  .ys-map iframe { height: 300px; }
}


/* ===========================================================
   mirwec に合わせたタイポグラフィと本文幅
   実測値（www.mirwec-coating.com/services/ · 1440px）:
     H2   Barlow 48px / 行間60px / 700
     H3   Barlow 30px / 行間42px / 700
     本文 Roboto 16px / 行間28px / #6F6C90
     本文カラム幅 1140px（ヒーローやナビバーの1350〜1400pxとは別物）

   ⚠ 色は yasuiseiki のパレットを維持する方針（2026-08-07 ユーザー判断）。
     mirwec の見出し #001F4F ではなく --ys-blue #003579 のままにする。
   =========================================================== */
#content h2 { line-height: 60px; }
#content h3,
#content .ys-prose h3 { font-size: 30px; line-height: 42px; }
#content .ys-prose h4 { font-size: 24px; line-height: 32px; }
#content .ys-prose { font-size: 16px; line-height: 28px; }

/* 本文の行長。1400pxのままだと1行が長すぎて mirwec より読みにくい。
   カード一覧は横に並べる都合があるので対象から外す。 */
#content .elementor-section:not(.ys-card-grid) > .elementor-container {
  max-width: 1140px;
}

@media (max-width: 767px) {
  #content h2 { font-size: 32px; line-height: 42px; }
  #content h3,
  #content .ys-prose h3 { font-size: 24px; line-height: 34px; }
  .ys-card .services-title .title { font-size: 20px; line-height: 28px; }
}

/* ===========================================================
   マウスオーバーの動き（2026-08-16 ユーザー指示）
   ・機種タイルの写真をゆっくり拡大
   ・ボタンは色を変えて少し浮かせる
   =========================================================== */

/* --- 1) 動きの下地 ---
   色だけでなく浮き上がりも付けるので transform / box-shadow も渡す。
   ⚠ ここに列挙したセレクタは、実際にサイト上にあるボタン7種を
     全ページ実測して洗い出したもの（2026-08-16）。増やすときは
     下の :hover 側と必ず対で足すこと。 */
#content .ys-cta .elementor-button,
.ys-header-cta .elementor-button,
.ys-hero-btn,
.ys-tile-btn,
.ys-contact-cta a,
.ys-form .wpcf7-submit,
.ys-contact-info a > button,
.ys-prose a > button {
  transition: background-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}

/* --- 2) 各ページ下部のCTAボタン（"Schedule a Consultation" 全26個）---
   ⚠ ここだけ**ホバーがまったく効いていなかった**（2026-08-16 指摘）。
     techto の `.elementor-button:hover { color:#fff }`(0,2,0) が
     ブートストラップ由来の `a:hover` の色指定を打ち消しており、
     結果としてマウスを乗せても何も変わらない状態だった。

   ⚠ **色は暗くではなく明るくすること。**
     このボタンが乗る .ys-cta は濃紺 #132257。他のボタンと同じ
     --ys-blue(#003579) に暗くすると背景とのコントラスト比が
     **1.28 まで落ちてボタンが消える**（実測）。白なら 15.06 で、
     文字を紺に反転させれば文字自体も読みやすくなる。
   ⚠ 詳細度は #content ＋ .ys-cta ＋ .elementor-button で (1,2,0)。
     techto の (0,2,0) に !important 無しで勝てる。 */
#content .ys-cta .elementor-button:hover,
#content .ys-cta .elementor-button:focus-visible {
  background-color: #fff;
  color: var(--ys-blue);
}

/* --- 3) 浮き上がり ---
   「色が変わるだけでは動きが足りない」というユーザー指摘への対応。

   ⚠ 影は --ys-blue ではなく黒寄りの rgba(6,16,38,…) にすること。
     青系の影にすると濃紺のCTAの上では影ではなく**青い光輪**に見える
     （実際にそう描画されたので差し替えた）。
   ⚠ `@media (hover: hover)` で囲むこと。タッチ端末はタップ後も
     :hover が残るため、押したボタンが浮いたままになる。 */
@media (hover: hover) {
  #content .ys-cta .elementor-button:hover,
  .ys-header-cta .elementor-button:hover,
  .ys-hero-btn:hover,
  .ys-tile:hover .ys-tile-btn,
  .ys-contact-cta a:hover,
  .ys-form .wpcf7-submit:hover,
  .ys-contact-info a > button:hover,
  .ys-prose a > button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(6, 16, 38, .28);
  }
}

/* --- 4) 機種タイルの写真をゆっくり拡大 ---
   ⚠ overflow:hidden と角丸は **.ys-tile-media 側**に持たせること。
     .ys-tile にも overflow:hidden はあるが、そちらに任せると
     拡大した写真が上の説明文の領域まではみ出してから切られる。
   ⚠ img 側の `border-radius: 8px 8px 0 0` はそのまま残してある。
     拡大中は img の角丸も一緒に拡大して枠の外へ出るので、
     実際に見えている角丸はここ（.ys-tile-media）のもの。
   ⚠ 倍率は 1.06。1.1 まで上げると、機種写真の足回りが枠から
     切れて「置かれている感じ」が失われる。 */
.ys-tile-media {
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.ys-tile-media img {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) {
  .ys-tile:hover .ys-tile-media img { transform: scale(1.06); }
}

/* --- 5) 動きを減らす設定の利用者には動かさない ---
   ⚠ !important が要る。打ち消す相手の `.ys-tile:hover .ys-tile-media img`
     などが (0,3,1) で、こちらのセレクタより詳細度が高いため。
     色の変化はそのまま残す（動きではないので減らす必要がない）。 */
@media (prefers-reduced-motion: reduce) {
  .ys-tile-media img,
  #content .ys-cta .elementor-button,
  .ys-header-cta .elementor-button,
  .ys-hero-btn,
  .ys-tile-btn,
  .ys-contact-cta a,
  .ys-form .wpcf7-submit,
  .ys-contact-info a > button,
  .ys-prose a > button {
    transition: none !important;
    transform: none !important;
  }
}