/****************************************************
 * global responsive (safe override only)
 * - 既存を壊さない上書き中心
 * - 3ブレークポイント固定（PC / Tablet / Mobile）
 * - 実機/検証で統一した見え方
 ****************************************************/

/* 基礎の安定化 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

html, body {
  max-width: 100%;
  /* iOS古めSafari対策：clip未対応用にフォールバック */
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===== ヘッダー高さを端末ごとに統一 ===== */
.fixed-header {
  height: 64px !important;
  padding: 0 18px !important;
}
.fixed-header .logo img { height: 18px !important; }

/* ====== Breakpoints ====== */
/* Mobile: 〜767.98px / Tablet: 768〜1279.98px / Desktop: 1280px〜 */
@media (max-width: 767.98px) {   /* Mobile 共通 */
  :root { --container: 92vw; }

  .fixed-header{ height: 56px !important; padding: 0 14px !important; }
  .fixed-header .logo img { height: 14px !important; }

  /* ナビ（WPテーマ差分を踏まえた確実な挙動） */
  .menu-container { display: none !important; }
  .hamburger { display: flex !important; }
  .mobile-nav { display: none; }
  .mobile-nav.open { display: flex !important; }

  /* ファーストビュー（クラス共通時のみ上書き） */
  .interview-section { height: 82vw !important; }
  .interview-bg { top: 0 !important; height: 100% !important; object-fit: cover; }

  /* Days 見出し（中央・白・太字・サイズUP） */
  .days-title { color:#fff !important; font-weight:800 !important; font-size: 32px !important; text-align:center !important; }
  .days-sub   { color:#fff !important; font-weight:700 !important; font-size: 16px !important; text-align:center !important; }

  /* フッター：縦積み＆左寄せ */
  .site-footer .footer-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    position: relative;  /* 罫線の基準 */
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .site-footer .footer-main::before {
    content:"";
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:100vw; height:1px;
    background: rgba(255,255,255,.2);
    pointer-events:none;
  }
  .site-footer .footer-logo,
  .site-footer .footer-logo p,
  .site-footer .footer-icon-group {
    text-align:left !important;
    justify-content:flex-start !important;
  }
  .site-footer .footer-nav { margin-left: 0 !important; gap: 24px !important; }
}

@media (min-width: 768px) and (max-width: 1279.98px) {  /* Tablet 共通 */
  :root { --container: 1000px; }

  .fixed-header { height: 60px !important; padding: 0 16px !important; }
  .fixed-header .logo img { height: 16px !important; }

  .interview-section { height: 560px !important; }
  .interview-bg { top: 60px !important; height: 135% !important; object-fit: cover; }

  /* フッター：ロゴ + 3カラム（左寄せ＆間隔最適） */
  .site-footer .footer-main {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) minmax(460px, 2fr);
    gap: 28px 40px !important;
    align-items: start;
    position: relative;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .site-footer .footer-main::before {
    content:"";
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:100vw; height:1px;
    background: rgba(255,255,255,.2);
    pointer-events:none;
  }
  .site-footer .footer-logo { justify-self: start; }
  .site-footer .footer-nav { display:flex; gap: 44px !important; margin-left: 72px !important; }
}

@media (min-width: 1280px) {  /* Desktop 共通 */
  :root { --container: 1200px; }

  .fixed-header { height: 64px !important; padding: 0 18px !important; }
  .fixed-header .logo img { height: 18px !important; }

  .interview-section { height: 640px !important; }
  .interview-bg { top: 64px !important; height: 145% !important; object-fit: cover; }

  /* フッター：ロゴ + 3カラム（左寄せ＆きれいな余白） */
  .site-footer .footer-main {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(560px, 2fr);
    gap: 32px 56px !important;
    align-items: start;
    position: relative;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .site-footer .footer-main::before {
    content:"";
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:100vw; height:1px;
    background: rgba(255,255,255,.2);
    pointer-events:none;
  }
  .site-footer .footer-logo { justify-self: start; }
  .site-footer .footer-nav { display:flex; gap: 56px !important; margin-left: 100px !important; }
  .site-footer .footer-nav > div:first-child { margin-left: -12px; } /* 会社案内をやや左へ */
}

/* ===== 共通の安定化 / ページ横断のご要望 ===== */

/* フッター罫線：上だけ全幅、下は消す（保険） */
.site-footer .footer-main {
  position: relative;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.site-footer .footer-main::before {
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100vw; height:1px;
  background: rgba(255,255,255,.2);
  pointer-events:none;
}

/* Interview タイトル（白・1行・斜体） */
.interview-title{
  color:#fff !important;
  white-space: nowrap !important;
  font-style: italic !important;      /* ← “斜体”の指定 */
  font-weight: 800 !important;
}

/* タイトル/名前/役職を “CSSだけで” 上下左右移動（HTML変更なし） */
:root{
  /* 必要に応じてページ単位で上書き可 */
  --iv-title-left: 0px; --iv-title-top: 0px;
  --iv-name-left:  0px; --iv-name-top:  0px;
  --iv-pos-left:   0px; --iv-pos-top:   0px;
}
.interview-title { margin-left: var(--iv-title-left) !important; margin-top: var(--iv-title-top) !important; }
.name-jp        { margin-left: var(--iv-name-left)  !important; margin-top: var(--iv-name-top)  !important; }
.position       { margin-left: var(--iv-pos-left)   !important; margin-top: var(--iv-pos-top)   !important; }

/* 回答セクション：白ボックス内テキストを下へ（01〜03共通） */
.overlay-text-box h3,
.overlay-text-box .interview-subtitle,
.overlay-text-box .interview-answer {
  position: relative;
  top: var(--ibox-text-shift, 10px); /* 12〜18px で微調整 */
}

/* Days と フッターの間隔を広げる（ページ跨ぎ） */
.days-wrapper{ margin-bottom: 100px !important; }

/* ===== インタビュー系ページの“白くなる”保険 ===== */
/* WPプレビューや検証ツールでiframe縮小時に display/opacity が落ちるケースの復活 */
@media (max-width: 1024px){
  body[class*="page-interview"] .interview-section{
    position:relative;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    min-height: clamp(420px, 70svh, 720px);
    overflow:hidden;
  }
  body[class*="page-interview"] .interview-section .interview-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; display:block;
  }
}
@media (max-width: 767.98px){
  body[class*="page-interview"] .interview-section,
  body[class*="page-interview"] .interview-section img,
  body[class*="page-interview"] .interview-bg{
    opacity:1 !important;
  }
}







/* =========================================================
   追従バナー（PC）：テキストサークルを少し左へ戻す
   ========================================================= */
@media (min-width:1025px){
  .floating-banner{
    --ring-offset-x: 170px;  /* ← 200px → 170px（少し左に戻す） */
    --ring-scale:    1.05;
    --ring-speed:    18s;
  }

  .floating-banner .banner-circle{
    position: relative !important;
    display: inline-block !important;
    line-height: 0;
  }

  .floating-banner .banner-circle .circle-text{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: center center !important;
    pointer-events: none;
    z-index: 1;

    transform: translate(-50%, -50%)
               translateX(var(--ring-offset-x))
               scale(var(--ring-scale));

    animation: circleTextSpin var(--ring-speed) linear infinite !important;
  }

  @keyframes circleTextSpin {
    to {
      transform: translate(-50%, -50%)
                 translateX(var(--ring-offset-x))
                 scale(var(--ring-scale))
                 rotate(360deg);
    }
  }
}

/* =========================================================
   追従バナー（PC）：丸アイコンだけ少し小さく（中心維持）
   ※ テキストサークルの既存調整は触らない
   ========================================================= */
@media (min-width:1025px){
  .floating-banner .banner-circle{
    position: relative !important;
    display: inline-block !important;
    line-height: 0 !important;
  }

  /* 丸アイコンを中心基準で微縮小（親サイズは変えない） */
  .floating-banner .banner-circle img.banner-main{
    display: block !important;
    position: relative !important;
    width: 100% !important;     /* 親サイズ基準は維持 */
    height: auto !important;
    max-width: 100% !important;
    opacity: 1 !important;
    z-index: 3 !important;

    transform-origin: center center !important;
    transform: scale(0.96) !important;   /* ← 0.94〜0.98で微調整可 */
    will-change: transform;
  }
}










/* =========================================================
   事業内容ページ（PC）：テキストサークルだけ小さく（中心そのまま）
   ========================================================= */
@media (min-width:1025px){
  /* businessページ限定 */
  body[class*="business"] .floating-banner .banner-circle .circle-text {
    transform-origin: 50% 50% !important;
    transform-box: fill-box !important;
    pointer-events: none !important;

    /* ? ここでサイズだけ調整（0.90〜0.98の範囲でOK） */
    scale: 0.92 !important;
  }
}

/* =========================================================
   事業内容ページ専用（PC）追従バナー（中心を保ったまま右へ）
   ========================================================= */
@media (min-width:1025px){
  body[class*="business"] .floating-banner .banner-circle {
    position: relative !important;
    display: inline-block !important;
    width: 180px !important;      /* 全体サイズ（必要に応じて調整可） */
    aspect-ratio: 1/1 !important;
    line-height: 0 !important;
  }

  /* 丸アイコン（ほんの少し下げる） */
  body[class*="business"] .floating-banner .banner-circle img.banner-main {
    position: absolute !important;
    top: 52% !important;          /* ↓ 下方向オフセット（50→52） */
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) scale(0.94) !important;
    transform-origin: center center !important;
    z-index: 3 !important;
  }

  /* === テキストサークル（中心を保ったまま右へ） === */
  body[class*="business"] .floating-banner .circle-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: center center !important;
    transform-box: fill-box !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;

    /* ? ここで右方向・サイズ・速度を制御 */
    --ring-offset-x: 60px;   /* ← 数値↑で右へ。40px→60pxで少し右寄せ */
    --ring-offset-y: 0px;
    --ring-scale: 0.95;
    --ring-speed: 18s;

    /* ? 回転時に中心ズレしないtransform順序 */
    transform:
      translate(-50%, -50%)
      translate(var(--ring-offset-x), var(--ring-offset-y))
      scale(var(--ring-scale))
      rotate(0deg);

    animation: bizRingPerfect var(--ring-speed) linear infinite !important;
  }

  /* ? 回転アニメーション（中心固定でくるくる） */
  @keyframes bizRingPerfect {
    to {
      transform:
        translate(-50%, -50%)
        translate(var(--ring-offset-x), var(--ring-offset-y))
        scale(var(--ring-scale))
        rotate(360deg);
    }
  }

  /* テキストの二重アニメ防止 */
  body[class*="business"] .floating-banner .circle-text textPath {
    animation: none !important;
  }
}

/* =========================================================
   事業内容ページ専用（PC）追従バナー
   （中心そのまま、さらに右へ＆少し大きく）
   ========================================================= */
@media (min-width:1025px){
  body[class*="business"] .floating-banner .circle-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: center center !important;
    transform-box: fill-box !important;
    pointer-events: none !important;
    z-index: 2 !important;

    /* ? 右へ寄せる量＆サイズ調整 */
    --ring-offset-x: 167px;   /* ← 右方向オフセット（大きいほど右） */
    --ring-offset-y: -9px;
    --ring-scale: 1.10;       /* ← 少し大きく（0.95 → 1.05） */
    --ring-speed: 18s;

    transform:
      translate(-50%, -50%)
      translate(var(--ring-offset-x), var(--ring-offset-y))
      scale(var(--ring-scale))
      rotate(0deg);

    animation: bizRingPerfect var(--ring-speed) linear infinite !important;
  }

  @keyframes bizRingPerfect {
    to {
      transform:
        translate(-50%, -50%)
        translate(var(--ring-offset-x), var(--ring-offset-y))
        scale(var(--ring-scale))
        rotate(360deg);
    }
  }

  /* textPathの二重回転を防止 */
  body[class*="business"] .floating-banner .circle-text textPath {
    animation: none !important;
  }
}









/*******************************************************
 * 社員インタビュー タイトル：サイズ固定＋右上へ移動
 *******************************************************/
.interview-title {
  position: relative;
  display: inline-block;
  z-index: 3;
  width: 300px !important;          /* ? 元の自然サイズに戻す（px固定） */
  height: auto !important;
  transform: translate(400px, -60px); /* ? 右へ100px・上へ40px */
}

/* タブレット用（やや中央寄りに調整） */
@media (min-width:768px) and (max-width:1024.98px){
  .interview-title {
    width: 340px !important;
    transform: translate(60px, -30px);
  }
}

/* モバイルは中央のまま（動かさない） */
@media (max-width:767.98px){
  .interview-title {
    width: 80vw !important;
    transform: none !important;
  }
}

/********************************************************
 * Interview：マルと説明文だけを個別に動かす（タイトルはそのまま）
 ********************************************************/

/* ?調整しやすいようにCSS変数化 */
:root {
  --iv-circle-left: -30px;   /* マルの左右移動（右＋ / 左−） */
  --iv-circle-top:  25px;   /* マルの上下移動（下＋ / 上−） */

  --iv-desc-left:   50px;   /* 説明文の左右移動（右＋ / 左−） */
  --iv-desc-top:    -10px;   /* 説明文の上下移動（下＋ / 上−） */
}

/* マル（左上の円形） */
.interviewmaru {
  position: relative !important;
  left: var(--iv-circle-left) !important;
  top:  var(--iv-circle-top)  !important;
  transition: all 0.3s ease;
}

/* 説明文（スカイレンタカー〜紹介します。） */
.interview-header .interview-desc {
  position: relative !important;
  left: var(--iv-desc-left) !important;
  top:  var(--iv-desc-top)  !important;
  transition: all 0.3s ease;
}

/* ============================
   Interview（モバイル専用調整＋位置微調整可）
   ============================ */
@media (max-width: 767.98px){

  /* ▼微調整用の変数（必要な時だけ数値を変更） */
  :root{
    --iv-title-x: 90px; /* →右 + / 左 − */
    --iv-title-y: -125px; /* ↓下 + / 上 − */

    --iv-desc-x:  -50px;
    --iv-desc-y:  -100px;
  }

  /* 見出しブロックを縦並びにして順序を制御 */
  .interview-header{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;  /* 中央にしたい時は center */
    gap: 10px !important;
    margin: 0 16px 18px !important;      /* 左右余白＋下余白 */
  }

  /* タイトル画像を“少し小さく” */
  .interview-title{
    width: 50vw !important;        /* お好みで 50〜70vw */
    max-width: 300px !important;   /* 大きくなり過ぎ防止 */
    height: auto !important;
    order: 1 !important;           /* タイトルを先に表示 */
    /* 位置調整（必要なときだけ数値反映） */
    transform: translate(var(--iv-title-x), var(--iv-title-y)) !important;
  }

  /* 説明文はタイトルの下へ */
  .interview-header .interview-desc{
    order: 2 !important;           /* タイトルの下に配置 */
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #333 !important;
    margin: 0 !important;
    max-width: 92vw !important;
    transform: translate(var(--iv-desc-x), var(--iv-desc-y)) !important;
  }
}

/* =========================
   Interview（SP画像サイズ強制）
   ========================= */
@media (max-width: 767.98px){
  /* 画像サイズを統一＆中央寄せ。過去の幅/負のマージンをリセット */
  .interview-card-overlay .overlay-image-container img,
  .card-01 .image-01 img,
  .card-02 .image-02 img,
  .card-03 .image-03 img{
    width: 84% !important;       /* ←お好みで 78〜88% に調整可 */
    max-width: 84% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;   /* 中央寄せ */
    transform: none !important;  /* 変形を無効化（ズレ防止） */
  }

  /* 以前のレイアウト用に入っていた “はみ出し系マージン” を殺す */
  .card-01 .image-01 img,
  .card-02 .image-02 img,
  .card-03 .image-03 img,
  .overlay-image-container img{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* コンテナ側に余計な指定があればリセット */
  .overlay-image-container{
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* 念のため横スクロールの元も断つ */
  html, body { overflow-x: hidden !important; }
}

/* =========================================
   Interview（SPだけ 〜767.98px）
   ボタンをカード直下へ／縦長化を完全防止
   ========================================= */
@media (max-width: 767.98px){
  /* 親は1カラムのグリッドにして順序を制御 */
  .interview{
    display: grid !important;
    grid-template-columns: 1fr;
    row-gap: 16px;
    overflow: visible !important; /* はみ出しで隠れないように */
  }

  /* ヘッダーの“殻”を外して子要素を親グリッドに参加させる */
  .interview-header{
    display: contents !important;
    overflow: visible !important;
  }

  /* 並び順（自動で上から）：
     1) .interview-title（そのまま）
     2) .interview-desc
     3) .interview-cards
     4) .more-button（←ここがカード直下になる）
  */
  .interview-desc{ order: 1; }
  .interview-cards{ order: 2; }

  /* ★ボタン：通常フローで配置＋縦長化を完全に止める */
  .interview .more-button{
    order: 3;
    position: static !important;   /* 絶対配置の名残を無効化 */
    inset: auto !important; top:auto !important; right:auto !important;
    bottom:auto !important; left:auto !important; z-index:auto !important;

    display: inline-flex !important;
    flex: 0 0 auto !important;     /* 伸びない */
    align-items: center; justify-content: center;
    place-self: center;            /* 中央に配置 */
    margin: 28px 0 0 0 !important; /* ←さらに下へは数値を増やす */
    padding: 12px 20px !important;

    width: auto !important; max-width: 90% !important;
    height: auto !important; min-height: 44px !important;
    max-height: 56px !important;   /* 念のため上限 */
    white-space: nowrap !important; line-height: 1 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    transform: none !important;     /* 回転・拡大の名残を無効化 */
    writing-mode: horizontal-tb !important;
  }

  /* カードは2列（必要ならコメントアウトして1列に） */
  .interview-cards{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    transform: none !important;
  }
  /* 1列にしたい場合
  .interview-cards{ grid-template-columns: 1fr; }
  */
}

/* =========================================
   Interview（SPだけ 〜767.98px）
   横スクロールを復活／ボタンはカード下に配置
   ========================================= */
@media (max-width: 767.98px){

  /* 横スクロール復活 */
  .interview-cards{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    scroll-behavior: smooth;
    padding-bottom: 10px; /* スクロールバー分の余白 */
  }

  /* スクロールバーを目立たなく */
  .interview-cards::-webkit-scrollbar{
    height: 6px;
  }
  .interview-cards::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
  }
  .interview-cards::-webkit-scrollbar-track{
    background: transparent;
  }

  /* カードの見た目を整える */
  .interview-cards > a,
  .interview-card{
    flex: 0 0 auto !important;
    width: 75% !important;      /* ← 表示されるカード幅。60〜80%で調整OK */
    box-sizing: border-box;
  }

  /* ボタン：通常フローでカードの直下に配置 */
  .interview .more-button{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    margin: 28px auto 0 !important;
    padding: 12px 20px !important;
    width: auto !important;
    min-height: 44px !important;
    height: auto !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   Interview（SPだけ）
   カードを上へ移動
   ========================================= */
@media (max-width: 767.98px){

  /* カード全体を上に持ち上げる */
  .interview-cards{
    margin-top: -35px !important;   /* ← 上へ詰める。-16〜-32pxでもOK */
  }
}







/* =========================================
   追従バナー（SPのみ）
   テキストをもう少しだけ大きく（自然な範囲）
   ========================================= */
@media (max-width: 767.98px){

  #floatingBanner .circle-text text,
  #floatingBanner .circle-text tspan {
    font-size: 15px !important;        /* ← 前より+1px。大きすぎたら14.5に */
    letter-spacing: 0.06em !important; /* 円周に余裕を持たせる */
  }

  #floatingBanner .circle-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  #floatingBanner .banner-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
}

/* =========================================
   追従バナー（SPだけ）
   SVG全体をわずかに拡大（中心ズレなし・回転維持）
   ========================================= */
@media (max-width: 767.98px){

  #floatingBanner .banner-circle{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* SVG自体を中心基準でわずかに拡大 */
  #floatingBanner .circle-text{
    transform-origin: center center !important;
    scale: 1.08 !important; /* ← 1.05〜1.1の範囲で調整OK */
  }
}

/* =========================================
   追従バナー（SPだけ）
   テキストサークルのみ左へ＆サイズ維持
   ========================================= */
@media (max-width: 767.98px){

  /* 中央ロゴはそのまま。いじらない */
  #floatingBanner .banner-main{
    position: relative !important;
    z-index: 2 !important;
  }

  /* ★ テキストサークルだけ左へ少し移動 */
  #floatingBanner .circle-text{
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform-origin: center center !important;
    translate: -53% -50%; /* ← X方向だけほんの少し左へ。数値で微調整OK */
    scale: 1.08 !important; /* ← 前の大きさそのまま維持 */
    z-index: 1 !important;
  }

  /* 念のため可視化を確保 */
  #floatingBanner{
    overflow: visible !important;
  }
}

/* =========================================
   追従バナー（SPだけ）
   テキストサークルのみ右へ少し＆少し拡大
   ========================================= */
@media (max-width: 767.98px){

  /* 中央の丸アイコンは完全固定 */
  #floatingBanner .banner-main{
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  /* ★ テキストサークルだけ右へ＆少し拡大 */
  #floatingBanner .circle-text{
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform-origin: center center !important;
    /* 既存アニメーション（rotate）を残すため transform は書かない */
    margin-left: 8px !important;   /* ← 少し右へ。6〜10pxで微調整OK */
    scale: 1.10 !important;        /* ← 少し拡大。1.08〜1.12が自然 */
    z-index: 1 !important;
    animation: spin 20s linear infinite !important; /* 回転維持 */
  }

  /* 念のため回転キーがない環境でも動作するように */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  #floatingBanner{
    overflow: visible !important;
  }
}

/* =========================================
   追従バナー（SPだけ）
   丸アイコンのみ右へ少し移動（サークルはそのまま）
   ========================================= */
@media (max-width: 767.98px){

  /* 丸アイコンだけ右へ微調整 */
  #floatingBanner .banner-main{
    position: relative !important;
    left: 6px !important;  /* ← ほんの少し右。4〜8pxで微調整OK */
    z-index: 2 !important;
  }

  /* テキストサークルはそのまま（上書き禁止） */
  #floatingBanner .circle-text{
    /* 変更なし。アニメーション・位置も維持 */
  }

  #floatingBanner{
    overflow: visible !important;
  }
}







/* =========================
   recruit（SPのみ）
   「カンパニー」を途中改行させない（CSSのみ）
   ========================= */
@media (max-width: 767.98px){

  .recruit .recruit-text{
    /* ← 自動改行を止め、<br> のみで改行させる */
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    /* 端末差で1文字押し出されるのを防ぐ */
    letter-spacing: 0 !important;
    line-height: 1.7 !important;
    text-align: left !important;

    /* 必要に応じて微調整（14pxで溢れる機種対策） */
    font-size: 13.8px !important; /* 14pxでOKなら 14px にして可 */
  }

  /* br を確実に改行として扱わせる保険 */
  .recruit .recruit-text br{
    display: inline !important;
  }

  /* 余計な指定は削除：下記プロパティは使わない
     hanging-punctuation, text-wrap: balance/pretty, overflow-wrap:anywhere など */
}








/* =========================
   TOP（home）限定
   タブレットもスマホレイアウトに統一
   ========================= */
/* スマホ 〜 1024px を一括で “SP同等” にする */
@media (max-width: 1024px){

  /* 1) ヘッダー：PCナビ非表示 / ハンバーガー表示 */
  body.home nav.main-navigation,
  body.home .inside-navigation .main-nav,
  body.home .wp-block-navigation{
    display: none !important;
  }
  body.home .menu-toggle{                /* テーマ標準のハンバーガー */
    display: block !important;
  }

  /* 2) コンテンツ幅：1カラム基調（PCグリッドを潰す） */
  body.home .grid,
  body.home [class*="columns"],
  body.home .cards{
    display: block !important;
  }

  /* 3) カード一覧：横スクロール（SPと同じ振る舞い） */
  body.home .interview-cards{
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 72vw;           /* SPと同じ見せ方。必要なら数値調整 */
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px;
  }

  /* 4) 画像やセクション余白：SP準拠 */
  body.home img{ max-width:100%; height:auto; display:block; }
  body.home section{ padding-left:16px; padding-right:16px; }

  /* 5) CTA / 追従バナー：SPサイズのまま */
  body.home .floating-banner{ transform: none; } /* 触っていればSP値を踏襲 */

  /* 6) タイトル文字サイズ（大きすぎ防止） */
  body.home h1, body.home .hero-title{
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.3 !important;
  }
  body.home h2{
    font-size: clamp(18px, 4.6vw, 24px) !important;
    line-height: 1.4 !important;
  }
}














/* =========================================================
   Tablet only（700?1200px）
   ファーストビュー：波のみ非表示／キャッチコピー維持
   ========================================================= */
@media (min-width:700px) and (max-width:1200px){

  /* 波画像（SVGやIMG）のみ非表示 */
  .overlay-wave svg,
  .overlay-wave img,
  .overlay-wave path,
  .overlay-wave::before,
  .overlay-wave::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* キャッチコピーは確実に表示（opacityも復活） */
  .overlay-wave,
  .overlay-wave .catchcopy,
  .overlay-wave .catchcopy * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }
}




/* =========================================================
   Tablet Unified（700?1200px）
   すべてのタブレットで統一表示（PC/スマホ無影響）
   ========================================================= */
@media (min-width:700px) and (max-width:1200px){

  /* --- 全体コンテナを中央固定幅に --- */
  .about, .ourbusiness-section, .karte-visual {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }

  /* --- 企業概要セクション --- */
  .about-content {
    text-align: center;
  }
  .about .about-title {
    height: clamp(26px, 3vw, 30px);
    margin-bottom: 16px;
  }
  .about .about-text {
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.9;
    margin-bottom: 20px;
  }

  /* --- OUR BUSINESS 見出し --- */
  .ourbusiness-overlay {
    font-size: clamp(26px, 2.8vw, 32px);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-align: left;
  }

  /* --- テキスト（2行化＋位置調整） --- */
  .karte-content {
    position: relative;
    margin-top: 48px !important;  /* すべてのタブレットで安定 */
    z-index: 2;
  }
  .karte-content h1 {
    font-size: clamp(22px, 2.4vw, 26px);
    line-height: 1.45;
    margin-bottom: 24px;          /* 見出しと説明文の間 */
  }
  .karte-content h1 .marked-text.first,
  .karte-content h1 .marked-text.second {
    display: block !important;
  }

  /* --- マーカー非表示（全タブレット統一） --- */
  .karte-content h1 .marked-text,
  .karte-content h1 .marked-text::before,
  .karte-content h1 .marked-text::after {
    background: none !important;
    box-shadow: none !important;
    content: none !important;
  }

  /* --- 写真フレーム（サイズ＋位置統一） --- */
  .photo-frame {
    position: absolute;
    width: clamp(240px, 28vw, 300px) !important;
    aspect-ratio: 4 / 3.2 !important;
    z-index: 1;
  }
  .photo-frame .photo-clip img {
    width: 100%; height: 100%;
    object-fit: cover;
  }

  /* 写真位置：比率を維持しながら調整 */
  .photo-frame.photo-orosi {
    right: clamp(12px, 3vw, 24px) !important;
    top: clamp(100px, 14vw, 160px) !important;
  }
  .photo-frame.photo-renta {
    right: clamp(0px, 2vw, 12px) !important;
    top: clamp(360px, 36vw, 420px) !important;
  }

  /* --- タイトルラベル（JP + EN）を上へ --- */
  .photo-label {
    bottom: 24px !important;
    transform: translateY(-20px) !important;
    text-align: center !important;
  }
  .photo-label .jp,
  .photo-label .en {
    display: block;
    margin: 0;
    line-height: 1.2;
  }

  /* --- 不要な影・ズレを防止 --- */
  .photo-frame, .photo-frame * {
    box-shadow: none !important;
    filter: none !important;
  }
}









/* =========================================================
   iPad Pro 等の大きめタブレット対策（1024〜1366px）
   - キャッチコピー位置固定
   - ファーストビュー下の余白を詰める
   - 企業概要を上に引き上げる
   ========================================================= */
@media (min-width:1024px) and (max-width:1366px){

  /* --- キャッチコピーを中央固定 --- */
  body.home .catchcopy{
    position:absolute !important;
    left:50% !important;
    top:54% !important; /* ← 52〜56%で微調整OK */
    transform:translate(-50%,-50%) !important;
    text-align:center !important;
    width:min(90vw,900px) !important;
    z-index:9 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  body.home .catchcopy *{
    background:none !important;
    box-shadow:none !important;
  }

  /* --- 波や背景を完全に非表示 --- */
  body.home .overlay-wave,
  body.home .overlay-wave *,
  body.home [class*="wave"]{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    background:none !important;
  }

  /* --- ファーストビューと企業概要の間の余白を詰める --- */
  body.home .firstview{
    margin-bottom: -60px !important; /* ← 余白を詰める量 */
  }

  /* --- 企業概要を上へ引き上げる --- */
  body.home .about{
    position:relative !important;
    top:-60px !important; /* ← 同じだけ上げる（調整可） */
  }
}

/* ==== iPad Pro 12.9”：FVと企業概要の間に余白を入れる ==== */

/* 縦向き（幅1024 × 高さ1366 付近） */
@media screen and (min-width:1000px) and (max-width:1100px) and (min-height:1300px){
  body.home .firstview{ margin-bottom: 48px !important; }
  body.home .firstview + *{ margin-top: 0 !important; }         /* 二重余白防止 */
  body.home .about{ position: static !important; top:auto !important; margin-top:0 !important; }
}

/* 横向き（幅1366 × 高さ1024 付近） */
@media screen and (min-width:1300px) and (max-width:1400px) and (max-height:1100px){
  body.home .firstview{ margin-bottom: 48px !important; }
  body.home .firstview + *{ margin-top: 0 !important; }
  body.home .about{ position: static !important; top:auto !important; margin-top:0 !important; }
}

/* =========================================================
   iPad Pro 12.9 対応（大きめタブレット専用パッチ）
   - FVと企業概要の間隔を固定
   - 事業内容の水色グラデ背景を全幅(100vw)
   - 既存のmax-width/引き上げ/topを無効化
   ========================================================= */

/* 12.9 縦（1024×1366 付近）*/
@media screen and (min-width:1000px) and (max-width:1100px) and (min-height:1300px){

  /* --- FVと次セクション（企業概要）の間隔を40pxに固定 --- */
  body.home :is(.firstview,.hero,.fv-hero,.kv,.hero-area,.first-view){
    margin-bottom: 40px !important;       /* ← 余白はここで調整（30〜60px） */
    padding-bottom: 0 !important;
  }
  body.home :is(.firstview,.hero,.fv-hero,.kv,.hero-area,.first-view) + *{
    margin-top: 0 !important;             /* 二重余白の打消し */
  }
  /* 以前の「引き上げ」を無効化 */
  body.home .about{
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  /* --- 事業内容 水色グラデ背景を画面いっぱいへ --- */
  body.home .karte-visual{
    max-width: none !important;            /* ラッパーの制限を解除 */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 中身は中央寄せ＆安全な左右余白のみ付与 */
  body.home .karte-visual > *{
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 4vw, 32px) !important;
    padding-right: clamp(16px, 4vw, 32px) !important;
  }
  /* 擬似要素や背景で波／色帯を出している場合も全幅化＆中央 */
  body.home .karte-visual::before,
  body.home .karte-visual::after{
    left: 0 !important; right: 0 !important;
    width: 100vw !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* 12.9 横（1366×1024 付近）*/
@media screen and (min-width:1300px) and (max-width:1400px) and (max-height:1100px){

  /* --- FVと次セクションの間隔を40pxに固定 --- */
  body.home :is(.firstview,.hero,.fv-hero,.kv,.hero-area,.first-view){
    margin-bottom: 40px !important;
    padding-bottom: 0 !important;
  }
  body.home :is(.firstview,.hero,.fv-hero,.kv,.hero-area,.first-view) + *{
    margin-top: 0 !important;
  }
  body.home .about{
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  /* --- 事業内容 水色グラデ背景を画面いっぱいへ --- */
  body.home .karte-visual{
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.home .karte-visual > *{
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 3.5vw, 32px) !important;
    padding-right: clamp(16px, 3.5vw, 32px) !important;
  }
  body.home .karte-visual::before,
  body.home .karte-visual::after{
    left: 0 !important; right: 0 !important;
    width: 100vw !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* =========================================================
   iPad Pro対応：FV左右の余白削除＋企業概要との隙間詰め
   ========================================================= */
@media screen and (min-width:1000px) and (max-width:1400px){

  /* --- ファーストビュー全幅化（左右の余白を削除） --- */
  body.home .firstview,
  body.home .hero,
  body.home .fv-hero,
  body.home .kv,
  body.home .hero-area,
  body.home .first-view {
    width: 100vw !important;                 /* 画面全幅に */
    margin-left: calc(-50vw + 50%) !important; /* コンテンツ中央基準で展開 */
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  /* --- 企業概要との間隔を統一（FVの下の余白を固定） --- */
  body.home .firstview{
    margin-bottom: 32px !important;          /* ← ここの値で間隔を調整（例: 24〜40px） */
  }
  body.home .firstview + .about{
    margin-top: 0 !important;                /* 二重余白防止 */
  }

  /* --- 念のため外ラッパーの制約も解除 --- */
  body.home .site-main,
  body.home .site-content,
  body.home #page {
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
}


/* ===== Large tablet only : 余白を強制で潰す ===== */
@media (min-width:1000px) and (max-width:1400px){

  /* FVコンテナの下余白を全否定 */
  body.home .firstview,
  body.home .hero,
  body.home .fv-hero,
  body.home .kv,
  body.home .hero-area,
  body.home .entry-content > :first-child{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* FV直後に紛れ込む spacer / separator を殺す */
  body.home .firstview + .wp-block-spacer,
  body.home .firstview + .wp-block-separator,
  body.home .hero      + .wp-block-spacer,
  body.home .hero      + .wp-block-separator,
  body.home .entry-content > :first-child + .wp-block-spacer,
  body.home .entry-content > :first-child + .wp-block-separator{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* それでも空く場合の“最終手段”：企業概要を引き上げる */
  body.home .about{
    margin-top: -60px !important; /* 数値は -40〜-120px で微調整 */
  }

  /* FV画像が小さくて隙間が見える場合は背を少し伸ばす */
  body.home .firstview img,
  body.home .hero img,
  body.home .fv-hero img,
  body.home .kv img{
    display:block !important;
    width:100% !important;
    height: calc(100vh - 140px) !important; /* 120〜180px で微調整 */
    object-fit: cover !important;
  }
}

@media (min-width:1000px) and (max-width:1400px){
  /* 余白が発生する帯の背景を白で塗り潰す保険 */
  body.home .firstview,
  body.home .hero,
  body.home .fv-hero,
  body.home .kv{
    background: #fff !important;
  }
  /* FV直後のラッパーや main が色を継承しているケース */
  body.home main,
  body.home .site-content,
  body.home .entry-content{
    background:#fff !important;
  }
}






/* =========================================================
   Tablet Common Layout ? ABOUT & BUSINESS only
   (768〜1200pxすべてのタブレット共通)
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* ---- 企業概要（ABOUT） ---- */
  body.home .about {
    margin-top: 32px !important;    /* FVとの間隔を一定に */
    padding-top: 24px !important;
    max-width: 920px !important;    /* 横幅をそろえる */
    margin-inline: auto !important; /* 中央寄せ */
  }
  body.home .about h2 {
    font-size: 1.6rem !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  body.home .about p {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    text-align: center !important;
  }

  /* ---- 事業内容セクション（OUR BUSINESS / KARTE） ---- */
  body.home .ourbusiness-section,
  body.home .karte-visual {
    width: 100vw !important;                     /* 画面いっぱいに表示 */
    margin-left: calc(-50vw + 50%) !important;   /* 中央基準で補正 */
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden !important;
  }

  /* 背景の左右余白削除（特にiPad Proなど） */
  body.home .karte-visual::before,
  body.home .karte-visual::after {
    display: none !important;
    content: none !important;
  }

  /* 見出しの整列と余白統一 */
  body.home .karte-content {
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
    text-align: left !important;
    position: relative;
    z-index: 2;
  }

  /* 日本語タイトルと英語タイトルの間隔 */
  body.home .karte-content h1 {
    font-size: 1.6rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  body.home .karte-content .subtitle {
    font-size: 1rem !important;
    margin-bottom: 24px !important;
  }

  /* マーカーは非表示に統一（端末差が出るため） */
  body.home .karte-content .marked-text,
  body.home .karte-content .marked-text::before,
  body.home .karte-content .marked-text::after {
    background: none !important;
    box-shadow: none !important;
    content: none !important;
  }

  /* ---- 右側の写真 ---- */
  body.home .photo-frame {
    position: absolute !important;
    width: 300px !important;
    z-index: 1 !important;
  }
  body.home .photo-frame .photo-clip {
    aspect-ratio: 3 / 2.6;
    overflow: hidden;
  }
  @supports not (aspect-ratio: 3 / 2.6) {
    body.home .photo-frame .photo-clip {
      height: 260px;
    }
  }
  body.home .photo-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 位置固定 ? 全タブレット共通 */
  body.home .photo-frame.photo-orosi {
    right: 24px !important;
    top: 120px !important;
  }
  body.home .photo-frame.photo-renta {
    right: 8px !important;
    top: 400px !important;
  }

  /* スクロールやズレ防止 */
  html, body, .site {
    overflow-x: hidden !important;
  }
}












/* =========================================================
   Tablet 共通：事業内容（OUR BUSINESS）背景位置調整
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* ---- 水色グラデーション背景全体を上に移動 ---- */
  body.home .karte-visual {
    position: relative !important;
    top: -250px !important;            /* ← 上に上げる量（調整可：-40〜-80px） */
    width: 100vw !important;          /* 全幅に統一 */
    margin-left: calc(-50vw + 50%) !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    z-index: 1;
  }

  /* ---- 背景色・グラデーション部分を固定して綺麗に見せる ---- */
  body.home .karte-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      #d6eaff 0%,
      #ffffff 100%
    ); /* ← グラデーション指定 */
    z-index: 0;
  }

  /* ---- セクション内テキスト・画像を上のグラデに合わせて位置調整 ---- */
  body.home .karte-content {
    position: relative !important;
    top: 0 !important;                /* 固定位置に戻す */
    padding-top: 80px !important;     /* 背景上げた分の余白を補う */
    padding-bottom: 40px !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    z-index: 2 !important;
  }

  /* ---- 写真も背景移動に合わせて再配置 ---- */
  body.home .photo-frame.photo-orosi {
    top: 100px !important;            /* 少し上げる */
  }
  body.home .photo-frame.photo-renta {
    top: 370px !important;            /* 同様に少し上げる */
  }

  /* ---- 横スク防止 ---- */
  html, body, .site { overflow-x:hidden !important; }
}

/* =========================================================
   Tablet 共通：九州地図 小さく＋右寄せ
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  body.home .kyushu-map-container {
    position: absolute !important;
    left: 80% !important;          /* ← 中央より少し右へ（中央=50%、右寄せ=60〜65%） */
    top: -10px !important;
    transform: translateX(-50%) !important;
    opacity: 0.25 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    width: 570px !important;       /* ← 小さく（前回620px→520px） */
    height: auto !important;
    display: block !important;
  }

  body.home .kyushu-map-container .kyushu-map {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.home .karte-visual::before {
    z-index: 0 !important;
  }

  body.home .karte-content,
  body.home .photo-frame {
    position: relative !important;
    z-index: 4 !important;
  }

}

/* =========================================================
   Tablet 共通：企業概要タイトル中央／説明文余白拡大／マル削除
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* --- タイトル：中央揃えに戻す --- */
  body.home .about .about-title {
    display: block !important;
    margin: 0 auto 16px auto !important;  /* ← 上下中央配置 */
    text-align: center !important;
  }

  /* --- 説明文：左右余白を広く（80px） --- */
  body.home .about .about-content {
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: 0 80px !important;       /* ← 左右余白 */
    text-align: left !important;
  }

  body.home .about .about-text {
    text-align: left !important;
    line-height: 1.9 !important;
    font-size: 16px !important;
    margin: 0 auto 28px auto !important;
    max-width: 720px !important;
  }

  /* --- ボタンは中央 --- */
  body.home .about .about-buttom {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* --- 企業概要マル削除 --- */
  body.home .about .aboutmaru {
    display: none !important;
    visibility: hidden !important;
  }
}

/* =========================================================
   Tablet 共通（768〜1200px）
   事業内容セクション：見出し・説明文の配置統一＆間隔調整
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* ---- テキスト全体ブロック ---- */
  body.home .karte-content {
    position: relative !important;
    margin: 0 auto !important;
    padding: 0 80px !important;        /* ← 左右余白を揃える（企業概要と統一） */
    max-width: 880px !important;       /* ← 全タブレットで同じ横幅に固定 */
    text-align: left !important;
  }

  /* ---- 見出し（2行テキスト） ---- */
  body.home .karte-content h1 {
    display: block !important;
    font-size: 26px !important;
    line-height: 1.5 !important;
    margin: 0 0 28px 0 !important;     /* ← 見出しと説明文の間隔を広げた（前回10〜12px） */
    text-align: left !important;
  }

  body.home .karte-content h1 .marked-text.first {
    display: block !important;
    margin-bottom: 6px !important;     /* ← 行間のバランス調整 */
  }
  body.home .karte-content h1 .marked-text.second {
    display: block !important;
  }

  /* ---- 説明文 ---- */
  body.home .karte-content p {
    font-size: 16px !important;
    line-height: 1.9 !important;
    max-width: 700px !important;
    margin: 0 !important;
  }

  /* ---- マーカーなどの装飾は全タブレットで無効化 ---- */
  body.home .karte-content .marked-text,
  body.home .karte-content .marked-text::before,
  body.home .karte-content .marked-text::after {
    background: none !important;
    box-shadow: none !important;
    content: none !important;
  }
}

/* Tablet 768?1200px：事業内容テキストを“左24px固定”で全端末一致 */
@media (min-width:768px) and (max-width:1200px){

  /* 事業内容側は中央寄せの影響を受けないように全幅化＋基準化 */
  body.home .karte-visual{
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;
    padding: 0 !important;
  }

  /* テキストブロックを“画面左から24px”に絶対配置（全タブレット同一） */
  body.home .karte-content{
    position: absolute !important;
    left: 24px !important;           /* ← 小さめタブレットの位置に統一（必要なら 28/32px に） */
    top: 100px !important;            /* 縦位置はここで固定。もっと下げたければ 48?64px */
    width: 720px !important;         /* 読みやすい固定幅（全端末同一表示） */
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
    z-index: 2 !important;
  }

  /* 見出しと説明文の間隔を広めに固定 */
  body.home .karte-content h1{
    font-size: 26px !important;
    line-height: 1.5 !important;
    margin: 0 0 82px 0 !important;
  }
  body.home .karte-content h1 .marked-text.first{ display:block !important; margin-bottom:8px !important; }
  body.home .karte-content h1 .marked-text.second{ display:block !important; }

  body.home .karte-content p{
    font-size: 16px !important;
    line-height: 1.9 !important;
    margin: 0 !important;
  }
}

/* ===== Tablet 共通：事業内容テキストを左揃えに固定 ===== */
@media (min-width:768px) and (max-width:1200px){
  /* 親で center が掛かっていても上書き */
  .karte-visual,
  .karte-visual .karte-content{
    text-align: left !important;
  }

  /* 見出し・本文・ボタンを左基準に */
  .karte-visual .karte-content h1,
  .karte-visual .karte-content p,
  .karte-visual .business-button{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important; /* 右余白に逃がす */
  }

  /* 見出しの行内スパンも念のため左寄せ */
  .karte-visual .karte-content h1 .marked-text{
    display: inline-block; /* 行内要素でも左基準に */
    text-align: left !important;
  }
}









/* =========================================================
   Tablet（768?1200px）? 真円を“強制”して崩れをゼロに
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* 親を基準化（絶対配置を効かせる） */
  body.home .karte-visual{
    position: relative !important;
    overflow: visible !important;
  }

  /* === 丸：外枠ボックス（幅=高さを明示） === */
  body.home .karte-visual .photo-frame{
    position: absolute !important;
    z-index: 1 !important;

    /* 幅・高さを“同じ値”で固定（←これが最重要） */
    inline-size: clamp(280px, 32vw, 340px) !important;  /* = width */
    block-size:  clamp(280px, 32vw, 340px) !important;  /* = height */

    /* 二重の保険（対応ブラウザでは比率1:1も指示） */
    aspect-ratio: 1 / 1 !important;

    /* 丸マスク（多重保険） */
    border-radius: 9999px !important;
    overflow: hidden !important;
    clip-path: circle(50% at 50% 50%) !important;

    /* 他所からの上書きを無効化 */
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important; margin:0 !important; max-width:none !important; max-height:none !important;
  }

  /* aspect-ratio 非対応ブラウザ向けフォールバック */
  @supports not (aspect-ratio: 1 / 1){
    body.home .karte-visual .photo-frame{
      inline-size: 280px !important;
      block-size: auto !important;
    }
    body.home .karte-visual .photo-frame::before{
      content:""; display:block; padding-top:100%;
    }
  }

  /* === 内側クリップも同じ丸でマスク === */
  body.home .karte-visual .photo-frame .photo-clip{
    position:absolute !important; inset:0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    clip-path: inherit !important;
  }

  /* === 画像：必ず枠いっぱい、歪ませない === */
  body.home .karte-visual .photo-frame .photo-clip img{
    width:100% !important;
    height:100% !important;   /* ← テーマの img{height:auto} を打ち消す */
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
    transform:none !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* === ラベル：丸の中央に固定 === */
  body.home .karte-visual .photo-frame .photo-label{
    position:absolute !important;
    left:50% !important; top:57% !important;
    transform:translate(-50%, -50%) !important;
    text-align:center !important;
    width:90% !important;
    margin:0 !important; pointer-events:none !important;
  }

  /* ★ ここで前後左右に“個別”調整できます（数値だけ変えてOK） */
  body.home .karte-visual .photo-frame.photo-orosi{
    left: 50% !important;     /* 横位置：% を増やすと右へ / 減らすと左へ */
    top:  450px !important;  /* 縦位置：px を増やすと下へ / 減らすと上へ */
  }
  body.home .karte-visual .photo-frame.photo-renta{
    left: 10% !important;
    top:  610px !important;
  }

  /* デバッグ用（OKなら削除） */
  /* body.home .karte-visual .photo-frame{ outline:1px dashed hotpink !important; } */
}

/* =========================================================
   Tablet（768?1200px）
   事業内容ボタンを右下へ固定（競合を全リセット）
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* 親を基準化：これが無いと absolute が効かない */
  body.home .karte-visual{
    position: relative !important;
    overflow: visible !important;
  }

  /* ボタン本体：右下へ固定 */
  body.home .karte-visual .business-button{
    position: absolute !important;
    right: 10% !important;        /* → もっと右にしたいときは 4% などへ */
    bottom: 70px !important;     /* → もっと下にしたいときは 60px などへ */
    z-index: 5 !important;

    /* 競合リセット */
    left: auto !important; top: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: inline-block !important;
    text-align: left !important;
  }

  /* 画像サイズも固定（テーマ側の img{height:auto} を上書き） */
  body.home .karte-visual .business-button img{
    width: auto !important;
    height: 194px !important;     /* 小さくするなら 48px、大きくするなら 60px */
    display: block !important;
  }
}

/* =========================================
   Tablet（768?1200px）事業内容ボタン：サイズだけ拡大
   ========================================= */
@media (min-width:768px) and (max-width:1200px){
  /* 親の高さ制限/行高の影響を無効化（保険） */
  body.home .karte-visual .business-button{
    height: auto !important;
    line-height: 0 !important;
    display: inline-block !important;
  }

  /* 画像の“縦サイズ”を強制。テーマの img ルールより強く */
  body.home .karte-visual .business-button > img,
  body.home .karte-visual a.business-button > img[src$="businessbutton.svg"]{
    height: 50px !important;      /* ← 好きな値に（例: 72〜88px） */
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    display: block !important;
    transform: none !important;
  }
}

/* =========================================================
   Tablet（768?1200px）
   事業内容ボタン：左へ移動
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){
  body.home .karte-visual .business-button{
    position: absolute !important;
    left: 65% !important;      /* ← 左へ移動（例：5〜12%で微調整） */
    bottom: 65px !important;  /* ← 必要に応じて上下も */
    transform: none !important;
  }
}












/* =========================================================
   Tablet 共通（768?1200px）
   Interview：見出し中央＆上に寄せる／4件すべて表示／カード同サイズ
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* 見出し・説明：中央揃え＆まとめて上へ */
  .interview{
    padding: 40px 24px 80px !important;       /* 上の余白を少し詰める */
    max-width: 1040px !important;
    margin: 0 auto !important;
  }
  .interview-header{
    text-align: center !important;
    margin-top: -8px !important;              /* さらに上に寄せたい時は -12〜-16px へ */
  }
  .interview-title{
    display:block !important;
    margin: 0 auto 12px !important;
    width: clamp(220px, 28vw, 280px) !important;
    height: auto !important;
  }
  .interview-desc{
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto 20px !important;
    font-size: clamp(15px, 1.9vw, 17px) !important;
    line-height: 1.9 !important;
  }

  /* 4件すべて表示（pc-hide をタブレットでは無効化） */
  .interview-cards > a.card-link.pc-hide{
    display: block !important;
  }

  /* グリッド：2列×2段で見やすく（全タブレット同じに） */
  .interview-cards{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;   /* 各アイテムを同じ高さに伸ばす */
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
  }
  /* a をグリッドアイテムとして確実に伸びるように */
  .interview-cards > a.card-link{
    display:block !important;
    text-decoration:none !important;
    color: inherit !important;
  }

  /* カード：同サイズ化（高さを揃える） */
  .interview-card{
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
    overflow: hidden !important;
  }

  /* 画像部分：比率固定で統一 */
  .interview-image-container{
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  .interview-image{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* テキスト部分：下側で整える */
  .interview-card .job{
    font-size: clamp(15px, 1.8vw, 17px) !important;
    font-weight: 700 !important;
    margin: 12px 12px 4px !important;
    text-align: center !important;
  }
  .interview-card .info{
    font-size: clamp(13px, 1.6vw, 15px) !important;
    color: #555 !important;
    margin: 0 12px 16px !important;
    text-align: center !important;
  }

  /* 一覧ボタンは中央のまま（必要なら調整） */
  .interview .more-button{
    display:inline-block !important;
    margin: 12px auto 36px !important;
    font-size: clamp(14px, 1.7vw, 16px) !important;
    padding: 10px 24px !important;
    border: 1.6px solid #001f5c !important;
    border-radius: 30px !important;
    background:#fff !important; color:#001f5c !important;
    text-decoration:none !important;
  }
}

/* =========================================================
   Tablet 共通（768?1200px）
   Interview：4枚を同サイズ・2列×2行・中央配置
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* ====== グリッド全体 ====== */
  .interview-cards{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;  /* 2列固定 */
    grid-template-rows: auto auto !important;          /* 2行 */
    gap: 28px !important;                              /* 各カード間の間隔 */
    width: min(90vw, 960px) !important;
    margin: 0 auto !important;
    justify-items: center !important;                  /* 各セルを中央揃え */
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ====== 4枚すべて表示 ====== */
  .interview-cards .pc-hide {
    display: block !important;
  }

  /* ====== 各カード ====== */
  .interview-card{
    width: 100% !important;
    max-width: 420px !important;       /* 1枚あたりの最大幅（調整可） */
    aspect-ratio: 4 / 3 !important;    /* 比率固定 */
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #fff !important;       /* 背景白（透過防止） */
  }

  /* ====== 画像部分 ====== */
  .interview-image-container{
    width: 100% !important;
    height: auto !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
  }

  .interview-image-container img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ====== テキスト部分 ====== */
  .interview-card .job,
  .interview-card .info {
    text-align: center !important;
    margin: 10px 0 4px !important;
    font-size: clamp(14px, 1.6vw, 16px) !important;
    line-height: 1.4 !important;
  }
}

/* =========================================================
   Tablet 共通（768?1200px）
   Interview：肩書き＆イニシャルを画像下に中央配置
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* ===== カード全体 ===== */
  .interview-card{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  /* ===== 画像コンテナ ===== */
  .interview-image-container{
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .interview-image-container img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ===== 肩書き（job） ===== */
  .interview-card .job{
    margin-top: 10px !important;
    font-size: clamp(14px, 1.6vw, 16px) !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.4 !important;
  }

  /* ===== イニシャル（info） ===== */
  .interview-card .info{
    margin-top: 2px !important;
    font-size: clamp(13px, 1.4vw, 15px) !important;
    color: #666 !important;
    line-height: 1.4 !important;
  }
}

/* =========================================================
   Interviewカードの高さを調整（テキスト分の余白を確保）
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  .interview-card{
    aspect-ratio: auto !important;     /* ← 固定比率を解除 */
    height: clamp(260px, 38vw, 380px) !important; /* ← 高さを柔軟に確保 */
    padding-bottom: 12px !important;   /* ← 下余白を確保（文字分） */
    background-color: #fff !important;
    box-sizing: border-box !important;
  }

  .interview-image-container{
    flex-shrink: 0 !important;
    height: 70% !important;  /* ← 画像を上7割・テキストを下3割に */
  }

  .interview-card .job,
  .interview-card .info{
    line-height: 1.4 !important;
  }
}

/* Tablet 共通（768?1200px）? 見出しサイズはそのまま、位置だけ上へ */
@media (min-width:768px) and (max-width:1200px){

  /* 見出しブロック（タイトル＋説明文）を上に詰める */
  .interview-header{
    margin-top: clamp(-48px, -6vw, -24px) !important; /* ← 上へ持ち上げる。数値で微調整可 */
    margin-bottom: clamp(24px, 4vw, 48px) !important;
    text-align: center !important;
  }

  /* タイトルの“サイズは元のまま”に戻す */
  .interview-title{
    width: auto !important;       /* ← 前の固定幅を解除 */
    max-width: none !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto clamp(8px, 1.5vw, 12px) !important; /* 位置だけ中央＆下余白 */
  }

  /* 説明文は中央寄せのまま */
  .interview-desc{
    width: min(92vw, 700px) !important;
    margin: 0 auto !important;
    font-size: clamp(14px, 1.5vw, 16px) !important;
    line-height: 1.7 !important;
  }
}

/* =========================================================
   Tablet共通（768?1200px）
   インタビュータイトル＆説明文：中央固定＋説明文を少し大きく
   ========================================================= */
@media (min-width:768px) and (max-width:1200px){

  /* セクション全体を少し上へ */
  .interview {
    margin-top: -60px !important;
    padding-top: 0 !important;
    position: relative !important;
  }

  /* タイトル画像：中央に完全固定 */
  .interview-title {
    position: relative !important;
    top: -50px !important;
    width: clamp(180px, 26vw, 240px) !important;  /* ← サイズそのまま */
    height: auto !important;
    display: block !important;
    margin: 0 auto 16px auto !important;          /* ← 完全中央寄せ */
    left: auto !important;
    transform: none !important;
  }

  /* タイトル＋説明文ブロック：中央固定 */
  .interview-header {
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 800px !important;
    position: static !important;                  /* ← これで右寄り補正 */
    transform: none !important;
  }

  /* 説明文：少し大きく＋中央固定 */
  .interview-desc {
    width: min(90vw, 700px) !important;
    margin: 0 auto !important;
    font-size: clamp(15px, 1.6vw, 17px) !important; /* ← 少し大きく調整 */
    line-height: 1.8 !important;
    text-align: center !important;
  }
}