/* ▼ セクション全体 */
.ist-hero-simple {
  background: #e6e6e8; /* 明るいグレー */
  padding: 70px 0 60px;
}

/* ▼ 左右レイアウト：テキスト＋画像 */
.ist-hero-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ▼ テキスト部分 */
.ist-hero-text {
  flex: 0 0 50%;   /* 55% → 50% にして、テキストを少し右へ寄せる */
  padding-left: 80px;  /* ★さらに右へ寄せるための微調整 */
}


.ist-hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #555;
}

.ist-hero-title {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.3;
  margin: 0 0 18px;
}

.ist-hero-lead {
  font-size: 14px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 24px;
}

.ist-hero-btn {
  display: inline-block;
  padding: 10px 26px;
  border-radius: 999px;
  background: #007bff;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ist-hero-btn:hover {
  transform: translateY(-2px);
  background: #0064cc;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

/* 右側の画像コンテナ */
.ist-hero-images {
  flex: 0 0 40%;        /* 少し広めにして画像に余裕を持たせる */
  position: relative;
  min-height: 300px;
}

/* テーブル画像：左寄せ＋上側 */
.hero-img-table {
  position: absolute;
  top: 0;
  left: -8%;               /* ★マイナスにすると「文字側（左）」に近づく */
  width: 60%;              /* 大きさ（小さめ） */
  max-width: 220px;
}

/* 油圧OH作業員（机の右下にもっと離して配置） */
.hero-img-oh {
  position: absolute;
  top: 60%;             /* 52% → 60%：机から少し離す */
  left: 40%;            /* 30% → 40%：より右側にずらす */
  width: 65%;
  max-width: 160px;
}

/* ▼ スマホ対応：縦積みに */
@media (max-width: 900px) {
  .ist-hero-flex {
    flex-direction: column;
    align-items: flex-start;
  }
  .ist-hero-images {
    align-items: flex-start;
  }
  .hero-img-table,
  .hero-img-oh {
    width: 60%;
    max-width: 260px;
  }
}

@media (max-width: 600px) {
  .ist-hero-simple {
    padding: 56px 0 48px;
  }
  .ist-hero-title {
    font-size: 26px;
  }
}


/* 黒帯（ページヘッダー）のタイトル */
.page-header-title {
  color: #302833 !important;  /* ←タイトル文字色（青に例） */
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック体", "メイリオ", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px;  /* お好みで */
}

/* ▼ グローバルナビのサブメニュー（下層メニュー）の文字色を黒にする */
.global-nav .sub-menu a,
.global-nav-list .sub-menu a,
.vk-menu-acc .sub-menu a {
  color: #000 !important;
}

/* ▼ サブメニューの背景色も白に強制（必要なら） */
.global-nav .sub-menu,
.global-nav-list .sub-menu,
.vk-menu-acc .sub-menu {
  background-color: #fff !important;
}

/* ▼ VKボタンのカスタムデザイン（IST カラー仕様） */
.vk_button_link {
  display: inline-block;
  padding: 12px 28px;
  background-color: #005bac !important;  /* ISTブルー */
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;       /* 角丸 */
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 3px 10px rgba(0, 50, 120, 0.25);  /* 軽い影 */
}

/* ▼ ホバー時のアニメーション */
.vk_button_link:hover {
  background-color: #0070d1 !important;   /* 少し明るい青 */
  transform: translateY(-2px);            /* 浮いて見える */
  box-shadow: 0 6px 16px rgba(0, 50, 120, 0.35);
}

/* ▼ ボタン内の文字 */
.vk_button_link_txt {
  color: #fff !important; 
  font-weight: 600;
  letter-spacing: 0.03em;
}

kiki-button
/* ▼ KiKiボタン専用（かわいいピンク） */
.kiki-button {
  display: inline-block;
  padding: 12px 28px;
  background-color: #ff7da9 !important;   /* かわいい濃いめピンク */
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 125, 169, 0.35);
  transition: all 0.25s ease;
}

/* ▼ ホバー時アニメーション */
.kiki-button:hover {
  background-color: #ff99bd !important;  /* 明るいピンク */
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 125, 169, 0.45);
}

/* ▼ ボタン内テキストも白に統一 */
.kiki-button .vk_button_link_txt {
  color: #fff !important;
}

/* お問い合わせフォーム デザイン（CF7用） */

.contact-wrapper {
  max-width: 720px;
  margin: 50px auto;
  background: #fff;
  padding: 40px 32px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.contact-title {
  font-size: 1.9rem;
  margin-bottom: 6px;
  font-weight: 700;
  color: #005bac;
  border-left: 6px solid #005bac;
  padding-left: 12px;
}

.contact-sub {
  margin-top: 0;
  color: #666;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 22px;
}

.form-label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

/* CF7 の input / textarea にも適用 */
.contact-wrapper input,
.contact-wrapper textarea,
.contact-wrapper select {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  font-size: 1rem;
  background: #fafafa;
  transition: 0.2s;
}

.contact-wrapper input:focus,
.contact-wrapper textarea:focus {
  border-color: #005bac;
  outline: none;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 91, 172, 0.25);
}

.contact-wrapper textarea {
  height: 150px;
  resize: vertical;
}

/* 送信ボタン（submit-btn クラス） */
.submit-btn {
  width: 100%;
  padding: 14px;
  background: #005bac;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s;
  box-shadow: 0 4px 12px rgba(0, 91, 172, 0.3);
}

.submit-btn:hover {
  background: #0070d1;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 91, 172, 0.4);
}

@media (max-width: 600px) {
  .contact-wrapper {
    padding: 28px 20px;
    margin: 24px;
  }
  .contact-title {
    font-size: 1.6rem;
  }
}
/* お問い合わせフォーム送信ボタンをはっきり表示する */
.contact-wrapper input[type="submit"].submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: none;
  background: #005bac !important;   /* ISTブルーで上書き */
  color: #ffffff !important;        /* 文字を白で上書き */
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 91, 172, 0.3);
  opacity: 1 !important;            /* 薄くならないように */
  text-align: center;
}

/* ホバー時 */
.contact-wrapper input[type="submit"].submit-btn:hover {
  background: #0070d1 !important;
  box-shadow: 0 6px 18px rgba(0, 91, 172, 0.4);
}

/* 送信中（スピナー表示中）も薄くならないように */
.contact-wrapper input[type="submit"].submit-btn:disabled {
  background: #9bbfe5 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* === スマホ：右側イラストは表示するが小さめにする === */
@media (max-width: 900px) {
  .ist-hero-flex { flex-direction: column; }

  .ist-hero-images{
    display: flex !important;
    width: 100%;
    max-width: 360px;     /* ←ここでデカさ制限（320〜420で好み） */
    margin: 14px auto 0;
    gap: 12px;
    order: 0;
  }

  .ist-hero-images img{
    width: 100%;
    height: auto;
    max-height: 220px;    /* ←縦に伸びすぎ防止（180〜260で好み） */
    object-fit: contain;  /* 切り抜き透過画像なら contain が安全 */
    box-shadow: none;     /* 枠(影)も消したい場合 */
    border-radius: 0;     /* 角丸も不要なら */
  }
}
/* === スマホ：右側イラストは表示するが小さめにする === */
@media (max-width: 900px) {
  .ist-hero-flex { flex-direction: column; }

  .ist-hero-images{
    display: flex !important;
    width: 100%;
    max-width: 360px;     /* ←ここでデカさ制限（320〜420で好み） */
    margin: 14px auto 0;
    gap: 12px;
    order: 0;
  }

  .ist-hero-images img{
    width: 100%;
    height: auto;
    max-height: 220px;    /* ←縦に伸びすぎ防止（180〜260で好み） */
    object-fit: contain;  /* 切り抜き透過画像なら contain が安全 */
    box-shadow: none;     /* 枠(影)も消したい場合 */
    border-radius: 0;     /* 角丸も不要なら */
  }
}
/* ===== スマホ：右側イラストが文字に被るのを防ぐ（絶対配置を解除） ===== */
@media (max-width: 900px){
  .ist-hero-flex{
    flex-direction: column;
    align-items: stretch;
  }

  /* ←ここが重要：絶対配置/変形が残ってると被るので全部無効化 */
  .ist-hero-images{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;

    width: 100%;
    max-width: 340px;
    margin: 12px auto 18px;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    order: -1; /* 画像を上に出したくないなら 0 に */
  }

  .ist-hero-images img{
    width: 100%;
    height: auto;
    max-height: 180px;   /* 大きすぎ防止 */
    object-fit: contain; /* 透過画像向け */
    box-shadow: none;    /* 枠(影)を消す */
    border-radius: 0;    /* 角丸不要なら */
  }
}
/* ===== スマホ：イラストがページ最上部に飛ぶ＆文字に被るのを防ぐ ===== */
.ist-hero-simple { 
  position: relative; 
  overflow: hidden;  /* はみ出し防止 */
}

@media (max-width: 900px){
  /* 画像を上に出さない（orderを無効化） */
  .ist-hero-images{
    order: 0 !important;          /* ←重要：上に行かせない */
    position: static !important;  /* ←重要：absolute等を無効化 */
    inset: auto !important;
    transform: none !important;
    z-index: 0 !important;

    width: 100%;
    max-width: 340px;
    margin: 16px auto 0;
  }

  /* 画像が巨大化/浮遊しないように */
  .ist-hero-images img{
    display: block;
    position: static !important;
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    box-shadow: none;
    border-radius: 0;
  }

  /* テキストを前面にして被りを回避 */
  .ist-hero-text{
    position: relative;
    z-index: 1;
  }
}

.hero-img-table{ 
  position: static !important; 
  top:auto !important; left:auto !important; 
}
@media (max-width: 900px) {
  .ist-hero-images{ flex-direction: row; }
  .ist-hero-images img{ width: 50%; max-height: 160px; }
}