/* contact準備中 */

.jyunnbi{
    font-size: 2.5rem !important;
    font-weight: 700;
    color: #f96d00;
    letter-spacing: 3px;
    border: solid 2px #f96d00;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
text-align: center;
}

/* スムーズにジャンプさせる（一番上に固定） */
html {
  scroll-behavior: smooth;
}

.ttle-type01 {
font-size: 1.75rem !important;
font-weight: 700 !important;
letter-spacing: 0.3rem !important;
}
.ttle-type01-2 {
font-size: 1.75rem !important;
font-weight: 700 !important;
/* letter-spacing: 0rem !important; */
}

.subheading {
color: #007bff; }



.add span {
font-size: 1.0rem;
line-height: 1.5rem !important;
display: inline-block;
}

.ftco-bg-blue {
background: #1e50a2; }

/* @media (max-width: 991.98px) {
  .logo-black { display: none !important; }
  .logo-white { display: block !important; }
} */

/* スマホ時のハンバーガーボタンの枠線の色 */
.navbar-toggler {
    border-color: rgba(0, 0, 0, 0.5) !important;
}

/* ハンバーガーアイコン（三本線など）自体の色 */
.navbar-toggler .oi-menu,
.navbar-toggler-icon {
    color: #000 !important; /* 黒色に指定 */
}

/* スマホ画面での「Menu」の文字色を強制的に固定 */
#ftco-navbar .navbar-toggler {
    color: #000000 !important; /* スクロール後と同じ濃い色（黒など）を指定 */
    opacity: 1 !important;     /* 透明度を解除 */
}

/* ついでに三本線アイコンの色も確実に合わせる場合 */
#ftco-navbar .navbar-toggler .oi-menu {
    color: #000000 !important;
}

/* スマホ時のメニュー内リンク文字を最初から表示する */
@media (max-width: 991.98px) {
  /* スクロール前でも文字色を黒（濃色）にする */
  .navbar-collapse .navbar-nav .nav-item .nav-link {
    color: #000000 !important;
    opacity: 1 !important;
  }

  /* メニューを開いた時の背景が白で見づらい場合は、ここも調整してください */
  .navbar-collapse {
    background: #ffffff; /* メニューの背景を白に固定 */
    margin-top: 10px;    /* 少し隙間をあけるときれいになります */
    padding: 10px;
    border-radius: 5px;
  }
}

/* スマホ画面において、現在表示中のページ(active)の文字色を青に固定 */
@media (max-width: 991.98px) {
  /* .ftco-navbar-light の影響を上書きして最初から青くする */
  .ftco_navbar .navbar-nav > .nav-item.active > a.nav-link {
    color: #007bff !important; /* Bootstrap標準のプライマリーカラー(青) */
    opacity: 1 !important;
  }
}

.ftco-gallery img {
width: 100%;
}

/* ジャンプ位置調整 */
/* アンカーリンクのジャンプ位置を調整 */
.anchor {
  display: block;
  padding-top: 100px; /* 固定ヘッダーの高さに合わせて調整 */
  margin-top: -100px;
  visibility: hidden;
  pointer-events: none;
}

/* セクション自体にIDがある場合の対策（必要に応じて） */
section[id] {
  scroll-margin-top: 100px; /* モダンブラウザ向けの指定 */
}

/* ジャンプ対策 */
html {
  /* 固定ヘッダーの高さ（約80px〜100px）分、ジャンプ位置を強制的に下げる */
  scroll-padding-top: 90px;
  scroll-behavior: smooth; /* ブラウザ標準のスムーススクロールを有効化 */
}

/* アンカーリンクのジャンプ位置を補正 */
/* すべてのセクションIDに対して、ヘッダーの高さ分だけ上に余白を作る */
#our-company,
#our-business-details,
#future-vision,
#topic {
  scroll-margin-top: 100px; /* ここをヘッダーの高さに合わせて調整 */
}

/* もしHTML内の <div class="anchor"> を使う場合はこちら */
.anchor {
  display: block;
  height: 0;
  overflow: hidden;
}

/* --- カスタムドロップダウンの表示位置と背景色の調整 --- */
@media (min-width: 992px) {
    /* PC表示時：子メニューを「事業内容」のすぐ下に配置 */
    .nav-item.dropdown.custom-dropdown {
        position: relative;
    }

    .custom-dropdown .dropdown-menu {
        /* 表示位置の調整：100%より小さくすることで上に上げます */
        /* ナビバーの高さやpaddingに合わせて 80%〜90% 程度で調整してください */
        top: 70% !important;
        
        /* 背景色の設定（#7a7979, 70%透過） */
        /* rgba(122, 121, 121, 0.7) が #7a7979 の 70% 透過に相当します */
        background-color: rgba(0, 0, 0, 0.6) !important;
        
        /* その他見た目の調整（枠線を消す場合など） */
        border: none;
        border-radius: 4px;
        padding: 10px 0;
    }

    /* 子メニュー内のテキスト色（背景色に合わせて白系に変更） */
    .custom-dropdown .dropdown-item {
        color: #ffffff !important;
        background: transparent;
    }

    /* ホバー時のメニュー項目の背景色 */
    .custom-dropdown .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
}

/* スマホ表示時：透過させたくない場合はここを調整 */
@media (max-width: 991.98px) {
    .custom-dropdown .dropdown-menu {
        background-color: rgba(122, 121, 121, 0.1); /* スマホは薄めにするなどの調整 */
    }
}


/* 文字関係 */
.kuro-moji {
color: #000 !important;
/* font-weight: 600; */
}

.blue-moji-01{
  color: #39abec !important;
}

.blue-moji-02 {
color: #007bff !important; }

.moji-hutosa-01{
font-weight: 600 !important;
}

.mojikan-01{
letter-spacing: 0.5rem;
}

.mojikan-02{
letter-spacing: -0.2rem;
}

.moji-okisa-01 {
font-size: 1.5rem !important;
}

.ttl-01 {
font-size: 1.25rem !important;
font-weight: 400 !important;
line-height: 2.5rem !important;
margin-bottom: 1.0rem !important;
color: #000 !important;
}

.ttl-01 span {
    line-height: inherit !important; /* 親の2.5remを引き継ぐ */
}

/* セレクタの頭に親要素の .kaihatsu をつけることで優先順位を上げます */
.kaihatsu .ttl-01 {
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    line-height: 2.0rem !important; /* これで打ち消されなくなります */
    margin-bottom: 1.0rem !important;
    color: #000 !important;
    display: block; /* pからdivに変えた場合はこれを入れておくと安心です */
}

/* spanに対しても念のため継承を明示 */
.kaihatsu .ttl-01 span {
    line-height: inherit !important;
}

.ttle-02{
font-size: 1.5rem !important;
font-weight: 600 !important;
line-height: 2.0rem !important;
color: #39abec !important;
}

.ttle-03{
font-size: 2.0rem !important;
font-weight: 600 !important;
line-height: 2.0rem !important;
color: #39abec !important;
margin-bottom: 20px !important;
}

.ttle-04{
    font-size: 1.5rem !important;
    font-weight: 700;
    color: #f96d00;
    letter-spacing: 3px;
    border: solid 2px #f96d00;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
}

.ttle-05 {
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.75rem !important;
margin: 15px 0 25px 0 !important;
color: #000 !important;
letter-spacing: 0.5em;
}

.keitai-01{
  display: inline-block !important;
}

/* --- PC用の基本設定（既存のリストスタイルを維持） --- */
.waku-sen-01 ul li {
    list-style: disc; /* 標準の丸を表示 */
    padding-left: 0;
    margin-bottom: 15px; /* リスト間の余白（お好みで） */
}

/* --- スマホ用の特別設定（ここが重要） --- */
@media (max-width: 767.98px) {
    .waku-sen-01 ul li {
        list-style: none !important; /* 標準の丸を強制的に消す */
        position: relative;
        padding-left: 1.5em; /* 丸の分の余白を確保 */
    }

    /* 擬似要素で「絶対に1行目の高さ」に丸を置く */
    .waku-sen-01 ul li::before {
        content: "■"; /* 山下工作所様のカチッとしたイメージなら■、丸なら● */
        position: absolute;
        left: 0;
        top: 4px; /* ここを調整することで、1行目の文字と高さを合わせます */
        color: #007bff; /* 青色 */
        font-size: 0.8em;
        line-height: 1;
    }
    
    /* スマホ時のみ「（CAD設計）」の前で改行 */
    .sp-only {
        display: block !important;
    }
}

/* PCでは改行タグを無効化 */
@media (min-width: 768px) {
    .sp-only {
        display: none !important;
    }
}

.kasen-01 {
border-bottom: 2px dashed #53a0f3 !important;
padding-bottom: 0.5rem !important;
}

/* スペーサー */
.shita-wo-akeru-01 {
margin-bottom: 2.0rem !important;
}

.ue-wo-akru-01{
  margin-top: 2.0rem !important;
}

.ue-wo-akru-02{
  margin-top: 0.5rem !important;
}

.ue-wo-akru-03{
  margin-top: 1.75rem !important;
}

.ue-wo-akru-04{
  margin-top: 4.0rem !important;
}

.ue-wo-akru-05{
  margin-top: 1.0rem !important;
}

@media (max-width: 767.98px) {
  /* スマホの時だけ、上側に80pxの余白を作る */
  .mt-sp-large {
    margin-top: 80px !important;
  }
}


.ue-ni-ageru-01 {
margin-top: -7.0rem !important;
}

.ue-ni-ageru-02{
  margin-top: -2.0rem !important;
}

.ue-ni-ageru-03 {
margin-top: -10.0rem !important;
}

.ue-ni-ageru-04 {
margin-top: -13.0rem !important;
}

.shita-wo-ageru-01{
margin-bottom: -5.0rem !important;
}

.shita-wo-akeru-01{
margin-bottom: 2.0rem !important;
}

.shita-wo-akeru-02{
margin-bottom: 7.0rem !important;
}

.shita-wo-akeru-03{
margin-bottom: 3.0rem !important;
}

.migi-wo-akeru-01{
  margin-right: 1.5rem !important;
}

/* スペース */
.yohaku-01{
  padding: 1rem 1.5rem 0 1.5rem !important;
}

.yohaku-02{
  padding: 1.5rem 1.5rem 1.5rem 2.5rem !important;
}


/* 枠線種 */
.waku-sen-01{
border: 1px solid #cecece !important;
/* padding: 1.5rem !important; */
}

.kaihatsu p {
font-size: 1.0rem;
line-height: 1.25rem !important;
}

.kaihatsu .icon {
font-size: 2.0rem;
font-weight: 600;
color: #fff;
}

.kaihatsu h3 {
line-height: 1.5rem !important;
}

/* 全体を一度中央揃えにする */
.kaihatsu .services-2.d-flex {
    align-items: center; /* 縦中央揃え */
}
/* トップページ */
.slider-text h1 {
  transform: translateY(-40px);
  text-shadow: 5px 5px 5px black;
}
.in-house-development {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
    color: #fff;
    margin-top: -70px;
    text-shadow: 3px 3px 3px black;
}

/* .slider-text p {
  transform: translateY(60px);
}

.home-slider .btn {
  margin-top: 150px !important;
} */


/* アイコンに付いている不要な上マージンを解除（中央揃えの邪魔になるため） */
.kaihatsu .services-2 .icon {
    margin-top: 0 !important;
}

/* 01項目（リストがあるもの）だけは、文章量が多いので「上揃え」を維持する */
/* 最初の項目(nth-child(1))だけ上揃えに戻す設定 */
.kaihatsu .row > .col-lg-6:nth-child(1) .services-2.d-flex {
    align-items: flex-start; /* 上揃え */
}

/* 01項目のアイコンには少し隙間を持たせる（お好みで調整してください） */
.kaihatsu .row > .col-lg-6:nth-child(1) .icon {
    margin-top: 10px !important;
}

.positin-all{
  width: 100% !important;
}

.list-of-development ul {
  margin-left: -2.0rem !important;
  list-style-type: square;
}

.list-of-development li::marker {
  color: #007bff; /* 記号部分だけの指定 */
}

/* --- メニュー・アコーディオン --- */
@media (min-width: 992px) {
    .dropdown-submenu { position: relative; }
    .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; display: none; }
}

/* 1. 初期状態では孫メニュー（3階層目）を非表示にする */
.custom-dropdown .dropdown-menu .dropdown-menu {
    display: none;
    position: absolute;
    left: 60%;       /* 親メニューの右端に配置 */
    top: 0;           /* 親メニューと同じ高さから開始 */
    margin-top: -1px; /* 境界線のズレを微調整 */
    margin-left: 0.5rem; /* 親メニューと重ならないよう少し離す */
}

/* 2. 「職種紹介」のリスト項目にホバーした時だけ、その直下の孫メニューを表示 */
.custom-dropdown .dropdown-menu li:hover > .dropdown-menu {
    display: block;
}

/* 3. 親メニュー（2階層目）がはみ出さないための位置調整（任意） */
.custom-dropdown .dropdown-menu {
    overflow: visible; /* 孫メニューを表示するために必要 */
}

/* 4. スマホ閲覧時などは重ならないよう解除する設定（レスポンシブ対応） */
@media (max-width: 991.98px) {
    .custom-dropdown .dropdown-menu .dropdown-menu {
        position: static;
        display: block;
        margin-left: 1rem; /* インデントで見やすくする */
        border: none;
        box-shadow: none;
    }
}

/* --- 斬新な見出し A --- */
.heading-modern-solid .sub-title { display: block; font-size: 16px; font-weight: 800; color: #f1453d; letter-spacing: 4px; }
.heading-modern-solid .main-title { font-size: 2.5rem; font-weight: 900; background: linear-gradient(transparent 90%, #1eaaf1 70%); display: inline-block; }

/* --- 【維持】スタッキング構造 --- */
.env-scroll-outer { position: relative; width: 100%; overflow: hidden; background: #fff; }
.env-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.env-panel:first-child { position: relative; }
.env-content { display: flex; width: 100%; height: 100%; }
.env-img-part { flex: 0 0 50%; height: 100vh; }
.env-img-part img { width: 100%; height: 100%; object-fit: cover; }
.env-txt-part { flex: 0 0 50%; height: 100vh; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; }
.env-txt-part .num { font-size: 5rem; font-weight: 900; color: #f8f9fa; margin-bottom: -40px; text-shadow: 1px 1px 0 #eee; }

/* --- 【追加】トビラシステムズ風：画像フロー --- */
.tobila-style-section { padding: 100px 0; overflow: hidden; background: #fdfdfd; }
.tobila-flow-wrapper {
    display: flex;
    gap: 20px;
    height: 600px;
    overflow: hidden;
    position: relative;
}
.flow-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.flow-img {
    width: 100%;
    height: 300px;
    flex-shrink: 0;
}
.flow-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* 就活のヒント */
.tip h3 {
  font-size: 1.5rem;
  font-weight: 600 !important;
}


/* 生産フロー */
/* 1行目（タイトル部分）のスタイル */
.list-title {
    font-weight: 600;
    color: #000;
    display: inline-block; /* 必要に応じて余白を調整しやすくします */
    margin-bottom: 2px;    /* 2行目との微調整用（任意） */
}

/* 2行目以降のテキストの色を明示的に指定する場合（現行どおりなら不要ですが、念のため） */
.waku-sen-01 li {
    color: #666; /* もし現行がグレー系ならその色に合わせてください */
}

/* 設計職 */
/* ロードマップ全体のコンテナ */
.roadmap-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    justify-content: center;
}

/* 各カードのスタイル */
.roadmap-card {
    flex: 1;
    min-width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.roadmap-card:hover {
    transform: translateY(-5px);
}

/* ヘッダー部分の色分け */
.roadmap-header {
    padding: 20px;
    text-align: center;
    color: #fff;
}

.roadmap-header.junior { background: #4a90e2; } /* 青：基礎 */
.roadmap-header.middle { background: #50b7b7; } /* 緑：応用 */
.roadmap-header.pro    { background: #e67e22; } /* オレンジ：熟練 */

.step-label {
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0.9;
    margin-bottom: 5px;
}

.roadmap-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
}

/* リスト部分 */
.roadmap-list {
    list-style: none;
    padding: 20px;
    margin: 0;
}

.roadmap-list li {
    position: relative;
    padding: 12px 0 12px 45px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

.roadmap-list li:last-child {
    border-bottom: none;
}

/* 番号丸アイコン */
.roadmap-list li span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: #666;
}

/* ヘッダーのテキスト（エンジニア区分）を強調 */
.roadmap-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600; /* ここを 600 に設定 */
    letter-spacing: 0.05em; /* 隠し味：少し文字間を広げるとさらに「カッコよく」なります */
}

/* ついでに STEP 01 などのラベルも少し太くしてバランスを取る場合 */
.step-label {
    display: block;
    font-size: 1.25rem;
    font-weight: 700; /* ラベルも少し強調 */
    opacity: 0.9;
    margin-bottom: 5px;
}

/* スマホ対応（レスポンシブ） */
@media (max-width: 768px) {
    .roadmap-container {
        flex-direction: column;
    }
    .roadmap-card {
        min-width: 100%;
    }
}

/* 共通のセクションタイトル */
.section-title {
    display: inline-block; /* これを追加：幅をテキストに合わせる */
    font-size: 1.5rem;
    font-weight: 700;
    /* text-align: center; は親要素に効かせる必要があるため、ここでは不要になります */
    color: #333;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

/* 親要素（containerなど）で中央寄せにするための設定 */
.section-title-wrapper {
    text-align: center; /* タイトルを中央に配置するための親コンテナ */
}

/* タイトルの下の棒線 */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;    /* 左端から */
    right: 0;   /* 右端まで（これでテキスト幅いっぱいになる） */
    height: 4px;
    background-color: #4a90e2;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 1.2rem; /* スマホでは少し小さく */
        margin-bottom: 30px;
    }
}

/* 社員インタビュー */
/* インタビューセクション全体の調整 */
.staff-voice {
    padding: 60px 0;
    background-color: #fcfcfc; /* わずかにグレーにして背景を分ける */
}

.voice-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 900px; /* 読みやすい横幅に制限 */
    margin: 0 auto;
}

/* インタビューセクション全体の調整 */
.staff-voice {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.voice-container {
    display: flex;
    flex-direction: column;
    gap: 50px; /* カード同士の間隔 */
    max-width: 850px;
    margin: 0 auto;
}

/* カードの重なりを実現するラッパー */
.voice-card-wrapper {
    position: relative;
    z-index: 1;
}

/* 下に重なる青いカード（左下にズラす） */
.voice-card-wrapper::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -6px;
    width: 100%;
    height: 100%;
    /* rgba(赤, 緑, 青, 透明度) で指定します。透明度は 0(透明)〜1(不透明) */
    background-color: rgba(35, 39, 43, 0.1); /* 透明度40%の青 */
    border-radius: 15px;
    z-index: -1;
}

/* メインの白いカード */
.voice-card {
    background: #fff;
    border-radius: 15px;      /* 最初のデザインの角丸 */
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: relative;
}

/* STAFF VOICEバッジ */
.voice-badge {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #4a90e2;
    color: #fff;
    padding: 5px 18px;
    border-radius: 20px;      /* 角丸 */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* 見出し：引用マーク付き */
.voice-heading {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

/* 本文 */
.voice-text {
    font-size: 1rem;
    line-height: 1.9;
    color: #555;
    margin: 0;
}

/* スマホ対応（ズレを少し控えめにすると綺麗に見えます） */
@media (max-width: 768px) {
    .voice-card-wrapper::before {
        top: 3px;
        left: -3px;
    }
    .voice-card {
        padding: 30px 20px;
    }
}

/* 生産技術職セクションの画像高さを調整 */
.list-of-development .course .img {
    min-height: 300px;
    background-size: cover;
    background-position: center;
}

/* PC（992px以上）の時だけ高さを300pxにする例 */
@media (min-width: 992px) {
    .list-of-development .course .img {
        min-height: 250px;
    }
}

/* ふんわり表示（フェードイン・アウト）のアニメーション */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/* ポップアップ内の余白調整 */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 0;
  width: auto;
  max-width: 800px;
  margin: 20px auto;
}

/* -------------------------------------------------------------------
   Magnific Popup ふんわりアニメーション (mfp-fade)
------------------------------------------------------------------- */
/* 背景のフェード */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* コンテンツ本体のフェード */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/* 動画ポップアップの映像を表示させるための強制設定 */
.mfp-iframe-scaler video.mfp-iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* ついでに閉じるボタン(×)を見やすく調整 */
.mfp-close {
    color: #FFF !important;
    font-size: 30px;
    right: -10px;
    top: -40px;
}

/* 動画の紫背景と三角アイコンを完全に消去 */
.popup-video .meta-date {
    display: none !important;
}

/* 念のため、リンク自体の背景色や枠線もリセット */
.popup-video {
    background-color: transparent !important;
    border: none !important;
}

/* マウスを乗せた時に画像を少し透過させる（クリックできる感が出る） */
.popup-video:hover {
    opacity: 0.8;
    transition: 0.3s;
}

/* キャリアプラン */

.bg-color-lg {
    background-color: #efeeee;
}

.bg-color-lo {
    background-color: #ffe9df;
}

.step-label-2 {
    display: block;
    font-size: 1.25rem;
    font-weight: 700; /* ラベルも少し強調 */
    opacity: 0.9;
    margin-bottom: 5px;
    color: #e67e22;
}

/* ローダーの鑑賞を抑える */
#ftco-loader {
    pointer-events: none; /* 下にある要素を触れるようにする */
}

body {
    overflow-x: hidden !important;
}
/* パララックスによる意図しない高さをカットする */
.ftco-section {
    overflow: hidden;
}

/* 会社データ */
/* --- Company Data Styles --- */
/* --- Company Data Styles (行間に隙間を作る設定) --- */
/* --- 会社概要テーブルの基本設定 --- */
.company-table {
    border-collapse: separate !important;
    border-spacing: 0 20px !important;
    border: none !important;
    table-layout: fixed; /* テーブル幅を固定 */
    width: 100% !important;
}

.company-table tr {
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.company-table th,
.company-table td {
    border: 1px solid #dee2e6 !important;
    padding: 15px !important;
    word-break: break-all; /* 長い単語の改行対策 */
}

.company-table th {
    font-weight: 600;
    color: #333;
    background-color: #f8f9fa !important;
    vertical-align: middle !important;
    border-left: 4px solid #1eaaf1 !important;
}

.company-table td {
    color: #666;
    background-color: #fff;
    vertical-align: middle !important;
}

/* --------------------------------------------------
   【スマートフォン用設定】テーブルを縦に並べる
   -------------------------------------------------- */
@media (max-width: 767.98px) {
    /* 1. テーブル、ボディ、行、セルすべてをブロック化 */
    .company-table,
    .company-table tbody,
    .company-table tr,
    .company-table th,
    .company-table td {
        display: block !important;
        width: 100% !important;
    }

    /* 2. セルの見た目調整 */
    .company-table th {
        border-bottom: none !important; /* 見出しの下線を消して一体感を出す */
        padding-top: 12px !important;
        padding-bottom: 8px !important;
        background-color: #f1f8ff !important; /* 少し色を変えて見出し感を強調 */
        border-left: 4px solid #1eaaf1 !important;
    }

    .company-table td {
        border-top: 1px solid #eee !important; /* 見出しと内容の間の境界線 */
        padding-top: 10px !important;
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    /* 3. 行と行の間の隙間を調整 */
    .company-table tr {
        margin-bottom: 15px !important;
        display: block !important;
        border: none !important;
    }

    /* Bootstrapの table-responsive の横スクロールを抑制 */
    .custom-table-container {
        overflow-x: hidden !important;
        padding: 0 !important;
    }
}

/* マップアイコン */
.map-mark {
    font-size: 1.5rem;
    color: #007bff;
    vertical-align: middle;
}

/* =================================================
   会社データ：サブテーブル（会社概要との差別化）
================================================= */

.company-table-sub {
    border-collapse: collapse !important;
    border: none !important;
    background-color: #fff;
}

/* 行 */
.company-table-sub tr {
    border-bottom: 1px solid #e5e5e5;
}

/* 見出しセル */
.company-table-sub th {
    width: 25%;
    background-color: #f4f7fb !important; /* company-table より少し濃い */
    color: #1e50a2; /* フッターと同系色 */
    font-weight: 600;
    vertical-align: top !important;
    padding: 16px 18px !important;

    /* 左アクセント（控えめ） */
    border-left: 3px solid #1eaaf1 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* データセル */
.company-table-sub td {
    padding: 16px 20px !important;
    color: #555;
    line-height: 1.8;
    border: none !important;
}

/* 最終行だけ下線を消す */
.company-table-sub tr:last-child {
    border-bottom: none;
}

/* ホバー時：軽く反応させる（主張しすぎない） */
.company-table-sub tr:hover {
    background-color: #fafcff;
}

/* スマホ時の調整 */
@media (max-width: 767.98px) {
    .company-table-sub th,
    .company-table-sub td {
        padding: 14px 15px !important;
        font-size: 0.95rem;
    }

    .company-table-sub th {
        width: 35%;
    }
}

/* 事業内容 */
/* 事業内容セクション用カスタムスタイル */
.business-content-section {
    /* color: #333; */
    line-height: 1.8;
}

.business-card {
    border-radius: 10px;
    border-left: 5px solid #007bff; /* 山下工作所のイメージカラーに合わせて調整してください */
}

.special-tool-item {
    height: 100%;
    padding-bottom: 10px;
}

.special-tool-item h4 {
    color: #222;
    position: relative;
    padding-left: 15px;
}

.special-tool-item h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 4px;
    height: 1.2em;
    background-color: #007bff;
}

.explanation-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6 !important;
}

.product-list-box .badge {
    font-weight: 500;
    font-size: 0.9rem;
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
}

/* レスポンシブ調整 */
@media (max-width: 767.98px) {
    .special-tool-item {
        margin-bottom: 20px;
    }
}


/* 事業内容：親ラッパー */
.business-content-wrapper {
    text-align: left;
}

/* 冒頭の文章：他の項目と色・サイズを統一（通常pタグやtdのデフォルトに合わせる） */
.business-main-text {
    font-size: inherit; /* 親要素(td等)のサイズを継承 */
    color: inherit;     /* 親要素(td等)の色を継承 */
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* ※以下のフォントサイズを1remに固定 */
.tool-note,
.explanation-note {
    font-size: 1rem !important;
    color: #666; /* 少し落とした色にしていますが、お好みで変更可能です */
    margin-top: 5px;
    margin-bottom: 10px;
}

/* 内部見出し */
.business-sub-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}

/* グリッドレイアウト */
.tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.tool-item {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 15px;
}

.tool-number {
    background: #007bff;
    color: #fff;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    margin-right: 15px;
    flex-shrink: 0;
    margin-top: 3px;
}

.tool-name {
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.7rem
}

.tool-sub-list {
    list-style: none;
    padding-left: 1rem;
    margin-top: 5px;
}

.tool-sub-list li::before {
    content: "・";
    margin-left: -1rem;
}

/* 解説ボックス */
.explanation-box-custom {
    background: #fdfdfd;
    border: 1px solid #007bff;
    padding: 20px;
    margin: 30px 0;
    border-radius: 20px;
}

.explanation-title {
    font-weight: bold;
    margin-bottom: 10px;
}
.explanation-desc {
    font-size: 1.0rem;
    line-height: 1.8;
}

.explanation-note {
    color: #d9534f; /* 1社のみという重要情報を強調 */
    font-weight: bold;
}

/* タグ状の表示 */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-tags span {
    background: #eee;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* PC表示の調整 */
@media (min-width: 768px) {
    .tool-grid {
        grid-template-columns: 1fr 1fr; /* 2カラムにする */
    }
}



/* =================================================
   社歴テーブル：年表スタイル（2カラム）
================================================= */

.company-history-table {
    border-collapse: collapse !important;
    width: 100%;
    background-color: #fff;
}

/* 行 */
.company-history-table tr {
    border-bottom: 1px solid #e6e6e6;
}

/* 年（左カラム） */
.company-history-table th {
    width: 120px;
    padding: 18px 20px !important;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e50a2;
    text-align: right;
    vertical-align: top !important;

    /* 年表感の軸 */
    border-right: 3px solid #1eaaf1 !important;
    background-color: #f7f9fd !important;
}

/* 内容（右カラム） */
.company-history-table td {
    padding: 18px 25px !important;
    font-size: 1rem;
    line-height: 1.9;
    color: #555;
    border: none !important;
}

/* ホバー時（控えめ） */
.company-history-table tr:hover {
    background-color: #fafcff;
}

/* スマホ対応 */
@media (max-width: 767.98px) {
    .company-history-table th {
        width: 80px;
        font-size: 1.05rem;
        padding: 15px 10px !important;
        text-align: left;
    }

    .company-history-table td {
        padding: 15px 12px !important;
        font-size: 0.95rem;
    }
}

/* =================================================
   社歴テーブル：●付きタイムライン
================================================= */

/* 年（左カラム）を基準にする */
.company-history-table th {
    position: relative;
}

/* ●（ドット） */
.company-history-table th::after {
    content: "";
    position: absolute;
    top: 28px;
    right: -9px;              /* 縦線の中央に合わせる */
    width: 14px;
    height: 14px;
    background-color: #1eaaf1;
    border-radius: 50%;
    z-index: 2;
}

/* 縦ライン */
.company-history-table th::before {
    content: "";
    position: absolute;
    top: 0;
    right: -3px;
    width: 2px;
    height: 100%;
    background-color: #cfe3f7;
    z-index: 1;
}

/* 最初と最後の処理（線を自然に） */
.company-history-table tr:first-child th::before {
    top: 28px; /* ●の中央から下だけ線を出す */
}

.company-history-table tr:last-child th::before {
    height: 28px; /* ●の中央までで止める */
}

/* ホバー時：●だけ少し反応 */
.company-history-table tr:hover th::after {
    background-color: #168dc8;
}



/* PDFダウンロードボタンのカスタマイズ */
.btn.btn-primary.shadow-sm {
    border-radius: 50px; /* 角を丸くしてモダンに */
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    letter-spacing: 1px;
}

.btn.btn-primary.shadow-sm:hover {
    transform: translateY(-2px); /* ホバー時に少し浮かす */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    background-color: #168dc8; /* 少し濃い青に */
}

.point-seigyo {
display: hidden;
margin-top: -20px;
}

/* リストの間隔を調整する設定 */
.list-koumoku li {
    font-weight: 400 !important;
    font-size: 1.0rem !important;
    line-height: 1.5 !important; /* 行間は標準的な高さに設定 */
    margin-bottom: 0.5rem !important; /* ここで項目ごとの「間隔」を調整 */
    display: block !important; /* 念のためブロック要素として扱う */
}

/* 最後の項目の下の余白を消す（任意） */
.list-koumoku li:last-child {
    margin-bottom: 0 !important;
}

/* 問い合わせフォーム */
.required {
  color: #f00;
  margin-left: 4px;
  font-weight: bold;
}
.form-label {
  font-weight: 500;
  margin-bottom: 5px;
}

/* パール号 */
/* パール号セクション専用デザイン */
/* --- パール号セクション：修正版デザイン --- */
/* --- パール号セクション：背景画像＋透過カラー重ね --- */
.topic-legacy-section {
    /* 下記の指定で、透過色(70%)と画像を重ねて表示します */
    background: linear-gradient(rgba(40, 22, 9, 0.9), rgba(40, 22, 9, 0.7)),
                url("../images-add/pearl-02.jpg");
    
    background-size: cover;        /* 画面いっぱいに広げる */
    background-position: center;   /* 画像の中心を合わせる */
     /* スクロール時に背景を固定（パララックス効果） */
    /* background-attachment: fixed;  */
  
    color: #ffffff;
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}
/* パソコンの時だけパララックス（固定）を有効にする */
@media (min-width: 992px) {
    .topic-legacy-section {
        background-attachment: fixed;
    }
}

.topic-legacy-section .shiro-moji {
    color: #ffffff !important;
}

.topic-legacy-section .aomoji {
    color: #2f89fc !important;
}

/* テキスト装飾 */
.legacy-title {
    font-weight: 800;
    line-height: 1.4;
    border-left: 5px solid #2f89fc;
    padding-left: 20px;
    /* color: #f1453d; */
    color: #8cc152;
}

.blue-highlight {
    color: #2f89fc;
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}

.legacy-content {
    line-height: 1.9;
    color: #e0e0e0;
    margin-top: 30px;
}

.spirit-highlight {
    margin-top: 20px;
    padding: 15px;
    background: rgba(47, 137, 252, 0.2); /* ほんのりブルーの背景 */
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
}

/* --- 画像配置の調整エリア --- */
.legacy-image-wrapper {
    position: relative;
    padding: 60px 0; /* 上下の余白 */
    width: 100%;
}

.legacy-image-wrapper img {
    border: 6px solid #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    border-radius: 3px;
}

/* 1枚目：上側の画像 */
.img-upper {
    width: 80%;
    position: relative;
    z-index: 2;
    margin-left: 0; /* 左寄せ */
    transform: translateY(-10px); /* ★上下のズレ調整：マイナスを大きくすると上へ移動 */
}

/* 2枚目：下側の画像 */
.img-lower {
    width: 80%;
    position: relative;
    z-index: 1;
    margin-top: -480px; /* ★上下の重なり調整：マイナスを大きくすると上に食い込みます */
    margin-left: auto; /* 右寄せ */
    transform: translateY(40px); /* ★上下のズレ調整：プラスを大きくすると下へ移動 */
}

/* --- レスポンシブ調整：スマホ・タブレット --- */
@media (max-width: 991px) {
    /* ラッパーの余白をリセット */
    .legacy-image-wrapper {
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-upper, .img-lower {
        width: 90%;      /* スマホでは横幅いっぱいに近く */
        position: static; /* 複雑な配置を一旦リセット */
        transform: none !important; /* JSのパララックス干渉を防ぐ */
        margin: 0 auto;  /* 中央寄せ */
    }

    .img-upper {
        margin-bottom: 30px; /* ★スマホでの重なり具合。離したい場合はここをプラスの数値に。 */
        z-index: 2;
    }

    .img-lower {
        margin-top: 0;     /* PC用の -480px を完全に打ち消す */
        margin-left: auto; /* 少し右にずらして互い違いにする */
        z-index: 1;
    }
}

/* 新しい見出し */


/* 事業内容用：コーナーフレームアクセント */
.heading-section h2 {
    position: relative;
    display: inline-block;
    padding: 10px 25px 7px 30px; /* 装飾のための余白 */
    margin-bottom: 30px;
}

/* 左上のL字 */
.heading-section h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-top: 6px solid #007bff; /* メインカラー */
    border-left: 6px solid #007bff;
}

/* 右下のL字 */
.heading-section h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-bottom: 6px solid #5d50c6; /* spanと同じ色 */
    border-right: 6px solid #5d50c6;
}

/* モバイル用の調整 */
@media (max-width: 767.98px) {
    .heading-section h2 {
        padding: 10px 20px;
    }
    .heading-section h2::before,
    .heading-section h2::after {
        width: 15px;
        height: 15px;
    }
}

/* 共通：spanの色維持 */
#our-business-details .heading-section h2 span,
#future-vision .heading-section h2 span {
    color: #5d50c6;
}

/* レスポンシブ対応（スマホサイズ） */
@media (max-width: 767.98px) {
    #our-business-details .heading-section h2,
    #future-vision .heading-section h2 {
        font-size: 28px;
        padding: 15px 25px;
    }
}

/* 背景画像の表示高さを調整する新しいCSS */
.custom-bg-height {
    padding: 200px 0; /* 上下の余白を広げることで高さを出します（数値は調整してください） */
    background-size: cover;
    background-position: center center;
    min-height: 400px; /* 最小限確保したい高さを指定します */
    display: flex;
    align-items: center;
}

/* スマホ表示で高さが足りない場合の調整 */
@media (max-width: 767.98px) {
    .custom-bg-height {
        padding: 100px 0;
        min-height: 300px;
    }
}

.kaihatsu a {
    color: rgba(0, 0, 0, 0.7);
}

/* aタグそのものと、その中にあるすべての子要素に対して色を強制する */
.kaihatsu a:hover,
.kaihatsu a:hover * {
  color: #0056b3 !important;
  text-decoration: underline !important;
  text-decoration-color: #007bff !important;
  /* テキストと下線の間隔を指定 */
  text-underline-offset: 3px !important;
}

.thanks-section h2 {
font-size: 44px;
font-weight: 600;
color: #007bff; }
.thanks-section h2 .ao {
color: #5d50c6; }
@media (max-width: 767.98px) {
.thankssection h2 {
font-size: 28px; } }

/* --- 1. ページ全体の基本設定（競合排除） --- */
html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    position: relative !important;
    /* iOSのスクロールを滑らかにしつつ、ブラウザの挙動を優先 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
    overscroll-behavior-y: none;
}

/* --- 2. スライダーの表示崩れ・空白対策 --- */
/* ftco-animateを消したことによるテキスト消滅とズレを強制修正 */
.home-slider .slider-text {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    height: 100vh !important; /* スマホ画面いっぱいに高さを確保 */
    min-height: 500px;
}

.home-slider .slider-text h1,
.home-slider .slider-text .in-house-development,
.home-slider .slider-text p {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* --- 3. スクロール・スワイプの感度調整（20秒フリーズ対策） --- */
/* 全てを「縦スクロール優先」に統一 */
.home-slider,
.owl-stage-outer,
.owl-stage,
.slider-item,
.slider-text,
.overlay {
    touch-action: pan-y !important; /* 左右スワイプより縦スクロールを優先 */
    -webkit-user-drag: none !important;
    pointer-events: auto !important;
}

/* オーバーレイがタッチを遮断しないようにする */
.home-slider .overlay {
    pointer-events: none !important;
}

/* スマホでの背景固定（パララックス）は負荷が高いので解除 */
@media (max-width: 991.98px) {
    .slider-item {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* --- スライダー内テキストの配置制御 --- */

/* 1. 全体の共通土台 */
.slider-text {
    display: block !important;
    text-align: center !important;
    height: 100vh !important;
}

.slider-text .col-md-12 > h1,
.slider-text .col-md-12 > .in-house-development,
.slider-text .col-md-12 > p {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    pointer-events: none !important;
}

/* ==================================================
   【スマートフォン用設定】(991px以下)
   ================================================== */
@media (max-width: 991.98px) {
    .slider-text {
        padding-top: 0vh !important;
    }

    /* A. 見出し (h1) */
    .slider-text h1 {
        top: -160px !important;
        margin-bottom: 30px !important;
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    /* B. 真ん中のテキスト */
    .slider-text .in-house-development {
        top: -150px !important;
        margin-bottom: 40px !important;
        font-size: 1.1rem !important;
    }

    /* C. ボタン (Contact Us) */
    .slider-text p {
        top: 50px !important;
    }
}

/* ==================================================
   【PC用設定】(992px以上)
   ここで社長の顔に被らないよう数値を調整してください
   ================================================== */
@media (min-width: 992px) {
    .slider-text {
        /* PCでは中央付近、またはやや下気味に配置する場合が多いです */
        padding-top: -0vh !important;
    }

    .slider-text h1 {
        top: -240px !important; /* PCではマイナスにせず、0付近から調整 */
        margin-bottom: 20px !important;
        font-size: 3.5rem !important;
    }

    .slider-text .in-house-development {
        top: -240px !important;
        margin-bottom: 30px !important;
    }

    .slider-text p {
        top: -40px !important;
    }
}

/* --- 共通：ボタンの設定 --- */
.slider-text .btn {
    display: inline-block !important;
    pointer-events: auto !important;
    padding: 15px 30px !important;
    position: relative !important;
    z-index: 99 !important;
}

.owl-dots {
    bottom: 20px !important;
    position: absolute !important;
    width: 100% !important;
}

/* 20秒〜8秒の遅延の元凶「Owl Carousel」のドラッグ計算を物理的に強制終了 */
.owl-grab {
    cursor: grab;
}
.owl-drag .owl-item {
    touch-action: pan-y !important; /* 縦スクロールを最優先 */
}

/* PCでスクロールが効かない問題をCSSで強制解決 */
@media (min-width: 992px) {
    html, body {
        overflow: visible !important;
        height: auto !important;
    }
    /* ローダーが消えない場合のための予備策 */
    #ftco-loader.show {
        display: none !important;
    }
}