@charset "UTF-8";
/* ======================================================================
   新しい採用コンテンツ用スタイル (JSIR Brand Unified Design)
   ====================================================================== */

/* --- Google Fonts (数字をかっこよくするため) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* --- ベースレイアウト --- */
.jsir-numbers-section {
    background-color: #F5F5F5; /* ライトグレー */
    padding: 80px 20px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333; /* チャコールグレー */
    box-sizing: border-box;
}

.jsir-container {
    /* 親要素からの幅の干渉を断ち切り、最大幅を1100pxに強制 */
    max-width: 1100px !important;
    margin: 0 auto !important; /* 中央寄せを強制 */
    padding: 0 15px !important; /* 画面端にくっつかないよう余白を確保 */
    width: 100% !important; /* 狭い画面でも100%幅を使う */
    box-sizing: border-box !important;
}
/* --- ヘッダーエリア --- */
.jsir-header {
    text-align: center;
    margin-bottom: 60px;
}

.jsir-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #1A237E; /* ディープネイビー */
    margin: 0;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.jsir-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A237E;
    margin: 10px 0 20px;
}

.jsir-description {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.8;
}

/* --- グリッドレイアウト --- */
.jsir-grid {
    /* PCでは300px minの可変グリッド */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* --- カードデザイン --- */
.jsir-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 柔らかい影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent; /* ホバー時のアクセント用 */
}

/* ホバー時の動き */
.jsir-card:hover {
    transform: translateY(-5px); /* 少し浮き上がる */
    box-shadow: 0 10px 25px rgba(26, 35, 126, 0.1); /* 影を濃く */
    border-bottom: 4px solid #00BCD4; /* 下線にアクセントカラー */
}

/* --- アイコン --- */
.jsir-icon {
    font-size: 2.5rem;
    color: #1A237E; /* アイコンはネイビー */
    margin-bottom: 15px;
    opacity: 0.2; /* 主張しすぎないように薄く */
}

/* --- ラベル（項目名） --- */
.jsir-label {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 15px;
    color: #333333;
}

/* --- 数字エリア --- */
.jsir-value-area {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 15px;
    line-height: 1;
}

.jsir-value {
    font-family: 'Montserrat', sans-serif; /* 数字専用フォント */
    font-size: 4rem; /* かなり大きく */
    font-weight: 700;
    color: #00BCD4; /* シアンブルー */
    letter-spacing: -0.02em;
}

.jsir-unit {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333333;
    margin-left: 5px;
}

/* --- 詳細テキスト --- */
.jsir-detail {
    font-size: 0.85rem;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* --- Voiceセクション専用スタイル --- */

.jsir-voice-section {
    background-color: #FFFFFF; 
    padding: 80px 20px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
}

.jsir-voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

/* カード全体 */
.jsir-voice-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee; 
}

.jsir-voice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(26, 35, 126, 0.15);
}

/* 写真エリア */
.jsir-voice-img-area {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.jsir-voice-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jsir-voice-card:hover .jsir-voice-img {
    transform: scale(1.05);
}

/* テキストエリア */
.jsir-voice-content {
    padding: 25px;
}

.jsir-voice-role {
    font-size: 0.8rem;
    color: #00BCD4;
    font-weight: 700;
    margin: 0 0 10px;
}

.jsir-voice-catch {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 15px;
    color: #1A237E;
}

.jsir-voice-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.8;
    margin: 0 0 20px;
}

/* リンクボタン */
.jsir-voice-link {
    text-decoration: none;
    color: #1A237E;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
}

.jsir-voice-link i {
    margin-left: 5px;
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.jsir-voice-link:hover {
    color: #00BCD4;
}

.jsir-voice-link:hover i {
    transform: translateX(5px);
}

/* --- CTAボタンエリア --- */
.jsir-cta-area {
    text-align: center;
    padding: 60px 20px;
    background-color: transparent;
}

/* ボタン共通スタイル（枠線のみのゴーストボタンスタイル） */
.jsir-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 16px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
    margin: 10px;
    min-width: 300px;
    
    background-color: #FFFFFF;
    color: #1A237E;
    border: 2px solid #1A237E; 
}

/* ホバー時の動き（落ち着いた変化） */
.jsir-cta-btn:hover {
    background-color: #F0F2F8; 
    color: #1A237E;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(26, 35, 126, 0.1);
}

/* 矢印アイコン */
.jsir-cta-btn i {
    margin-left: 15px;
    transition: transform 0.3s ease;
}

/* ホバー時に矢印だけ右に動く */
.jsir-cta-btn:hover i {
    transform: translateX(5px);
}

/* --- データページ誘導バナーエリア --- */
.jsir-data-link-container {
    padding: 40px 20px;
    text-align: center;
    background-color: #FFFFFF;
}

/* バナー本体 */
.jsir-data-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 左側にネイビーのラインアクセント */
.jsir-data-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: #1A237E;
    transition: width 0.3s ease;
}

/* 左側のコンテンツ（アイコン＋テキスト） */
.jsir-data-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* アイコンデザイン */
.jsir-data-icon {
    font-size: 2rem;
    color: #00BCD4;
    background: #E0F7FA;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* テキスト部分 */
.jsir-data-text {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.jsir-data-sub {
    font-size: 0.85rem;
    color: #666;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Noto Sans JP', sans-serif;
}

.jsir-data-main {
    font-size: 1.4rem;
    color: #1A237E;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
}

/* 右側の矢印エリア */
.jsir-data-arrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1A237E;
}

.jsir-view-more {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.1em;
}

/* --- ホバー時のアニメーション --- */
.jsir-data-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(26, 35, 126, 0.15);
    border-color: #1A237E;
}

/* ホバー時に左のラインが少し太くなる */
.jsir-data-banner:hover::before {
    width: 10px;
}

/* ホバー時に矢印が右に動く */
.jsir-data-banner:hover .jsir-data-arrow i {
    transform: translateX(5px);
    color: #00BCD4;
}

.jsir-data-banner:hover .jsir-view-more {
    color: #00BCD4;
}

/* --- 募集要項ページ専用スタイル（ブランド統一版） --- */

/* ページ全体のベース（これを親divに指定してください） */
.jsir-recruit-body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
    line-height: 1.8;
    background-color: #FFFFFF;
}

/* --- 見出しデザイン --- */

/* 大見出し (H1: 募集職種名など) */
.jsir-recruit-body h1 {
    font-size: 2rem;
    color: #1A237E;
    border-bottom: 2px solid #E0E0E0;
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-weight: 700;
}

/* 中見出し (H2: 業務内容、応募資格など) */
.jsir-recruit-body h2 {
    font-size: 1.4rem;
    color: #1A237E;
    background-color: #F0F2F8;
    padding: 12px 20px;
    border-left: 5px solid #00BCD4;
    margin-top: 50px;
    margin-bottom: 25px;
    border-radius: 0 4px 4px 0;
}

/* 小見出し (H3) */
.jsir-recruit-body h3 {
    font-size: 1.1rem;
    color: #333333;
    border-bottom: 1px dashed #00BCD4;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* 「募集職種一覧」と同じデザインにするクラス */
.jsir-same-style-title {
    font-size: 2rem;
    color: #1A237E;
    border-bottom: 2px solid #E0E0E0;
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-weight: 700;
    line-height: 1.4;
}

/* --- 募集要項の表 (Table) デザイン --- */
.jsir-recruit-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 1rem;
}

.jsir-recruit-table th,
.jsir-recruit-table td {
    padding: 20px;
    border-bottom: 1px solid #E0E0E0; /* 横線は残す */
    text-align: left;
    vertical-align: top;
}

/* 項目名 (左側) */
.jsir-recruit-table th {
    width: 25%;
    background-color: #FFFFFF;
    color: #1A237E; /* ネイビー文字 */
    font-weight: 700;
    white-space: nowrap;
    
    /* ▼▼▼ 縦のバーを復活 ▼▼▼ */
    border-right: 1px solid #E0E0E0; /* 項目と内容を区切る縦線 */
    /* ▲▲▲ ここまで ▲▲▲ */
}

/* 内容 (右側) */
.jsir-recruit-table td {
    background-color: #FFFFFF;
}

/* スマホ対応：表を縦並びにする */
@media (max-width: 768px) {
    .jsir-recruit-table th,
    .jsir-recruit-table td {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        border: none !important; /* スマホでは縦線を削除 */
    }
    .jsir-recruit-table th {
        color: #00BCD4 !important;
        font-size: 0.9rem !important;
        padding-bottom: 0 !important;
    }
    .jsir-recruit-table td {
        padding-top: 5px !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid #E0E0E0 !important;
    }
}
/* --- アコーディオン（開閉メニュー）のスタイル --- */

/* アコーディオン全体 */
.jsir-accordion {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #FFFFFF;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 閉じている時のホバー効果 */
.jsir-accordion:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-color: #00BCD4;
}

/* クリックするバー部分 (summary) - 横並びを強制適用 */
.jsir-accordion-header {
    display: flex !important; /* 強制適用 */
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 25px;
    cursor: pointer;
    background-color: #fff;
    list-style: none;
    position: relative;
    width: 100% !important; /* 親要素の幅に合わせる */
    box-sizing: border-box !important;
}

/* デフォルトの▼を消す（Safari/Chrome用） */
.jsir-accordion-header::-webkit-details-marker {
    display: none;
}

/* 職種名タイトル - 横並びを強制適用 */
.jsir-job-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1A237E;
    margin: 0;
    display: flex !important; /* 強制適用 */
    align-items: center !important;
    gap: 15px;
    flex-grow: 1 !important; /* 可能な限り幅をとる */
    flex-shrink: 1 !important; /* 潰れてもOK */
}

/* ラベル（NEWや募集中など） */
.jsir-tag {
    font-size: 0.8rem;
    background-color: #00BCD4;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    flex-shrink: 0; /* ラベルは縮まない */
}

/* 右側の「＋」アイコン */
.jsir-icon-plus {
    font-size: 1.2rem;
    color: #00BCD4;
    font-weight: 700;
    transition: transform 0.3s ease;
    flex-shrink: 0 !important; /* ＋アイコンは絶対に縮まない */
}

/* 開いている時のスタイル */
.jsir-accordion[open] {
    border-color: #1A237E;
    box-shadow: 0 4px 20px rgba(26, 35, 126, 0.1);
}

.jsir-accordion[open] .jsir-accordion-header {
    background-color: #F0F2F8;
    border-bottom: 1px solid #E0E0E0;
}

/* 開いている時は「＋」を45度回して「×」にする */
.jsir-accordion[open] .jsir-icon-plus {
    transform: rotate(45deg);
    color: #1A237E;
}

/* 中身のエリア */
.jsir-accordion-content {
    padding: 30px 25px;
    animation: fadeIn 0.4s ease;
}

/* ふわっと表示のアニメーション定義 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- リスト (ul/ol) デザイン --- */
.jsir-recruit-body ul {
    list-style: none !important; /* 強制的にデフォルトの点を消す */
    padding-left: 0 !important; /* 強制的に左の余白をリセット */
    margin: 15px 0;
}

.jsir-recruit-body ul li {
    position: relative;
    padding-left: 25px !important; /* 左の余白を確保 (マーカーの位置) */
    margin-bottom: 10px;
    list-style: none !important; /* 念のためここにも再度指定 */
}

/* リストの頭にシアンのチェックマークをつける（外部フォント不要版） */
.jsir-recruit-body ul li::before {
    content: '';
    display: block !important; /* 強制的に表示させる */
    position: absolute;
    left: 0;
    top: 3px; 
    width: 7px;
    height: 12px;
    border: solid #00BCD4; 
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* --- テキストリンク --- */
/* (以下は変更なし。テキストリンクの色設定) */
.jsir-recruit-body a {
    color: #00BCD4;
    text-decoration: underline;
    transition: color 0.3s;
}

.jsir-recruit-body a:hover {
    color: #1A237E;
    text-decoration: none;
}
/* ======================================================================
   データ詳細ページ向け 3カラムレイアウト
   ====================================================================== */
.jsir-data-grid-3col {
    display: grid;
    /* PCでは min 300px で最大3列、スマホでは1列に自動調整 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.jsir-data-item {
    padding: 25px;
    background-color: #F8F8F8; /* わずかにグレーの背景 */
    border-radius: 8px;
    border-left: 5px solid #00BCD4; /* シアンのアクセントライン */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 100%; /* 高さ揃え */
    box-sizing: border-box;
}

.jsir-data-item h3 {
    font-size: 1.1rem;
    color: #1A237E; /* ネイビー */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 5px;
}

.jsir-data-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
/* ======================================================================
   共通待遇セクション (JSIR COMMON INFO)
   ====================================================================== */

.jsir-common-info-section {
    padding: 80px 20px;
    background-color: #F8F8F8; /* Voiceセクションと差別化する薄い背景色 */
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
}

.jsir-recruit-body.h2-common-info {
    /* H2スタイルの再利用と調整 */
    font-size: 1.6rem;
    color: #1A237E;
    background-color: #E0F7FA; /* シアンを強調 */
    padding: 15px 20px;
    border-left: 6px solid #00BCD4; 
    margin: 0 auto 40px;
    max-width: 900px; /* 中央寄せを前提に幅を制限 */
    text-align: left;
}

/* 共通情報カードのグリッドレイアウト */
.jsir-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 個別カードのスタイル */
.jsir-info-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 5px solid #1A237E; /* ネイビーのライン */
}

/* カード内のアイコン付き見出し */
.jsir-info-card h3 {
    font-size: 1.1rem;
    color: #1A237E;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.jsir-info-card h3 i {
    color: #00BCD4; /* シアンアイコン */
    font-size: 1.4rem;
}

/* 共通情報テーブル（シンプル版） */
.jsir-common-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.jsir-common-table th,
.jsir-common-table td {
    padding: 8px 0;
    border-bottom: 1px dashed #E0E0E0;
    vertical-align: top;
}

.jsir-common-table th {
    width: 30%;
    color: #666;
    font-weight: 500;
}

.jsir-common-table td {
    color: #333;
    font-weight: 700;
}

/* 共通情報リスト（福利厚生など） */
.jsir-info-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.jsir-info-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* リストの頭にネイビーの点 */
.jsir-info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    background-color: #1A237E;
    border-radius: 50%;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
    .jsir-common-info-section {
        padding: 40px 10px;
    }
    .jsir-recruit-body.h2-common-info {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }
}
/* --- 採用エントリー CTAエリア内の文字調整 --- */
.jsir-cta-content-left {
    /* 他のコンテンツ（募集職種一覧など）と同じコンテンツ幅にする */
    max-width: 1000px; /* 他のコンテンツに合わせた最大幅を設定 */
    margin: 0 auto;    /* 中央寄せ */
    
    /* 文字を左寄せ */
    text-align: left;
    
    /* スマホで左右の余白が確保できるように調整 */
    padding: 0 20px; 
}

/* CTAエリア全体（ボタン）は中央寄せのままにする */
.jsir-cta-area {
    /* text-align: center; が設定されている場合は維持してください */
    /* text-align: center; */ 
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-cta-content-left {
        /* スマホでは端に寄せすぎないように余白を調整 */
        padding: 0 10px;
    }
}
/* --- 見出しデザイン --- */

/* 大見出し (H1: 募集職種名など) */
.jsir-recruit-body h1 {
    font-size: 2.2rem; /* サイズを微増 */
    color: #1A237E;
    border-bottom: 2px solid #E0E0E0;
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-weight: 800; /* さらに太く */
}

/* 中見出し (H2: 業務内容、応募資格など) */
.jsir-recruit-body h2 {
    font-size: 1.5rem; /* サイズを微増 */
    color: #1A237E;
    background-color: #F8F8FC; /* 背景色をさらに薄く */
    padding: 14px 20px;
    border-left: 6px solid #00BCD4; /* シアンを強調 */
    margin-top: 50px;
    margin-bottom: 25px;
    border-radius: 0 4px 4px 0;
}
/* --- カードデザイン (jsir-card / NUMBERS) --- */
.jsir-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    /* 影を統一し、枠線は削除 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent; 
}

/* ホバー時の影をよりネイビーベースに */
.jsir-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(26, 35, 126, 0.15); /* 影を濃く */
    border-bottom: 4px solid #00BCD4;
}


/* --- データバナーのデザイン修正 (jsir-data-banner) --- */
.jsir-data-banner {
    /* 枠線や角丸はそのまま、よりシャープに */
    border: none; /* 枠線は削除 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 影で浮かす */
    /* ... 他のプロパティはそのまま ... */
}
/* --- アコーディオンのスタイル --- */
/* 開いている時の背景色を落ち着かせる */
.jsir-accordion[open] .jsir-accordion-header {
    background-color: #F5F7FA; /* 以前より白に近い、落ち着いたトーン */
    border-bottom: 1px solid #E0E0E0;
}
/* ======================================================================
   採用エントリー CTAセクション (IT企業風リッチデザイン)
   ====================================================================== */

/* エリア全体の余白 */
.jsir-cta-wrapper {
    padding: 60px 20px 100px; /* 下に少し多めの余白 */
    width: 100%;
    box-sizing: border-box;
}

/* カード本体のデザイン */
.jsir-cta-card {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #FFFFFF;
    border-radius: 12px;
    /* 深い影で浮遊感を出す */
    box-shadow: 0 20px 50px rgba(26, 35, 126, 0.1); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    position: relative;
    overflow: hidden; /* 装飾のはみ出し防止 */
    border: 1px solid #F0F2F5; /* ごく薄い枠線で上品に */
}

/* 左端のグラデーションライン装飾（テック感の演出） */
.jsir-cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px; /* ラインの太さ */
    height: 100%;
    /* ネイビーからシアンへのグラデーション */
    background: linear-gradient(to bottom, #1A237E, #00BCD4); 
}

/* --- 左側：テキストエリア --- */
.jsir-cta-text {
    flex: 1; /* 余った幅を全部使う */
    padding-right: 40px; /* ボタンとの距離 */
}

.jsir-cta-title {
    font-size: 1.8rem;
    font-weight: 800; /* 太字で力強く */
    color: #1A237E; /* ネイビー */
    margin: 0 0 15px;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.jsir-cta-lead {
    font-size: 1.2rem;
    font-weight: 700;
    /*color: #333;*/
    margin: 0 0 10px;
}

.jsir-cta-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* --- 右側：ボタンエリア --- */
.jsir-cta-action {
    flex-shrink: 0; /* ボタンの幅を確保 */
}

/* リッチなボタンデザイン */
.jsir-cta-btn-rich {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 18px 45px;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color:#FFF; 
    color: #00BCD4;
    /* ボタン自体にも影をつけて立体的に */
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3); 
    position: relative;
    overflow: hidden;
}

/* ボタンのホバー効果 */
.jsir-cta-btn-rich:hover {
    background-color: #1A237E; /* 少し濃く */
    color:#FFF;
    transform: translateY(-3px); /* 浮き上がる */
    box-shadow: 0 15px 30px rgba(0, 188, 212, 0.4); /* 影が広がる */
}

.jsir-cta-btn-rich i {
    margin-left: 15px;
    transition: transform 0.3s ease;
}

.jsir-cta-btn-rich:hover i {
    transform: translateX(5px);
}

/* --- スマホ対応（縦積みに変更） --- */
@media (max-width: 768px) {
    .jsir-cta-card {
        flex-direction: column; /* 縦並び */
        padding: 40px 25px;
        text-align: center; /* スマホでは中央揃えの方が見やすい */
    }

    .jsir-cta-card::before {
        width: 100%;
        height: 6px; /* 上部のラインに変更 */
        top: 0;
        left: 0;
    }

    .jsir-cta-text {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: left; /* ご希望通り左寄せを維持する場合はここをleftに */
    }

    .jsir-cta-action {
        width: 100%;
    }

	.jsir-cta-btn {
	    display: inline-flex !important; /* インラインブロックにして中央配置可能に */
	    margin: 0 auto !important;
	}
}
/* ===================================================================
 * recruit.css (競合対策・修正版)
 * 採用ページ（recruit_test_20251031.html）専用スタイル
 * =================================================================== */

/* --------------------------------------
 * 共通・ユーティリティ（HTML内のクラス定義）
 * -------------------------------------- */
.section-padding {
    padding: 80px 0;
}
.bg-light-gray {
    background-color: #f8f9fa; /* 薄いグレー */
}
.text-center {
    text-align: center;
}
.bold {
    font-weight: bold;
}
.size-18 { font-size: 18px; }
.size-14 { font-size: 14px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mt20 { margin-top: 20px; }
.mt50 { margin-top: 50px; }
.mt80 { margin-top: 80px; }

/* --------------------------------------
 * [修正] レイアウト (競合対策)
 * HTML側で .recruit-layout を追加したセクション内でのみ有効
 * -------------------------------------- */
.recruit-layout .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.recruit-layout .col-1_3 {
    width: 33.333%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* 隙間を考慮 */
}
.recruit-layout .col-1_2 {
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* 隙間を考慮 */
}

/* --------------------------------------
 * 1. ヒーローセクション
 * -------------------------------------- */
.recruit-hero {
    position: relative;
    padding: 120px 40px;
    color: #ffffff; /* 白文字 */
    background-image: url('../image/recruit/hero-background.jpg'); /* 背景画像 */
    background-size: cover;
    background-position: center center;
    background-color: #333;
    text-align: center;
}
.recruit-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 透過オーバーレイ */
    z-index: 1;
}
.recruit-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.recruit-hero-title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}
.recruit-hero-subtitle {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 30px;
}
.recruit-hero-btn {
    padding: 15px 40px;
    font-size: 18px;
}

/* --------------------------------------
 * 2. JSIRで働く魅力
 * -------------------------------------- */
.why-work-jsir {
    background-color: #fff;
}
.feature-item {
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
}
.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.feature-icon {
    margin-bottom: 20px;
}
.feature-icon img {
    width: 80px; /* アイコンサイズ */
    height: 80px;
    object-fit: contain;
}
.feature-item h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50;
}
.feature-item p {
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
}

/* --------------------------------------
 * 3. 社員の声
 * -------------------------------------- */
.employee-card {
    display: flex;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}
.employee-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}
.employee-thumb {
    width: 200px; /* PCでの画像幅 */
    flex-shrink: 0;
}
.employee-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-info {
    padding: 30px;
}
.employee-info h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
.employee-quote {
    font-size: 20px;
    font-weight: bold;
    color: #005a9c;
    margin-bottom: 15px;
    line-height: 1.4;
}
.employee-info p {
    font-size: 15px;
    line-height: 1.7;
}

/* --------------------------------------
 * 4. 募集要項
 * -------------------------------------- */
.recruit-category h3.head-style-2 {
    border-left: 5px solid #005a9c;
    padding-left: 10px;
    font-size: 24px;
}
.recruit-table th {
    width: 25%;
    background-color: #f4f7fa;
    text-align: left;
    padding: 20px;
}
.recruit-table td {
    padding: 20px;
    line-height: 1.7;
}

/* --------------------------------------
 * 5. ボタン（HTML内のクラス定義）
 * -------------------------------------- */
.button {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button-primary {
    background-color: #007bff;
    color: #ffffff;
    border-color: #007bff;
}
.button-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.button-secondary {
    background-color: #6c757d;
    color: #ffffff;
    border-color: #6c757d;
}
.button-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}
.button-large {
    padding: 15px 30px;
    font-size: 18px;
}

/* --------------------------------------
 * 6. 見出し（HTML内のクラス定義）
 * -------------------------------------- */
.head-style-1 {
    font-size: 32px;
    font-weight: bold;
    color: #333;
}
.head-style-2 {
    font-size: 24px;
    font-weight: bold;
    /*color: #333;:/
}

/* --------------------------------------
 * 7. レスポンシブ対応 (スマホ表示 最終修正版)
 * -------------------------------------- */
@media (max-width: 768px) {
    
    /* [修正] レイアウトのスマホ対応 */
    .recruit-layout .col-1_3 {
        width: 100%; /* 魅力セクションは1カラム */
        margin-bottom: 30px;
    }
    .recruit-layout .col-1_2 {
        /* 社員カードのセクション */
        width: 100%;
        margin-bottom: 20px;
    }

    /* [修正] セクション全体の余白を調整 */
    .section-padding {
        padding: 40px 15px; /* 左右にも余白を追加 */
    }
    .mb50 { margin-bottom: 30px; }
    .mt50 { margin-top: 30px; }
    .mt80 { margin-top: 40px; }
    
    /* [修正] ヒーローセクションの文字サイズ */
    .recruit-hero {
        padding: 60px 20px;
    }
    .recruit-hero-title {
        font-size: 26px;
        line-height: 1.4;
    }
    .recruit-hero-subtitle {
        font-size: 16px;
        line-height: 1.7;
    }

    /* [修正] 見出しの文字サイズ */
    .head-style-1 {
        font-size: 24px;
    }
    .head-style-2 {
        font-size: 20px;
    }

    /* * [重要] 社員カードのレイアウトを修正
     * (顔写真 左 / コメント 右 のレイアウト)
     */
    .employee-card {
        flex-direction: row; /* 縦積み(column)をやめて横並び(row)に戻す */
        align-items: stretch; /* カードの高さを揃える */
    }
    .employee-thumb {
        width: 35%; /* [修正] 写真の幅を35%に */
        height: auto; /* [修正] 高さを自動に */
        flex-shrink: 0; /* 縮まないように */
    }
    .employee-thumb img {
        width: 100%;
        height: 100%; /* [修正] コンテナの高さに合わせる */
        object-fit: cover; /* [修正] 枠に合わせてトリミング */
    }
    .employee-info {
        width: 65%; /* [修正] テキストの幅を65%に */
        padding: 15px; /* [修正] 余白を少し小さく */
        box-sizing: border-box; /* paddingを幅に含める */
        display: flex; /* テキストを中央揃え（オプション） */
        flex-direction: column;
        justify-content: center;
    }
    .employee-info h3 {
        font-size: 14px; /* [修正] テキストサイズ調整 */
        margin-bottom: 8px;
    }
    .employee-quote {
        font-size: 15px; /* [修正] テキストサイズ調整 */
        margin-bottom: 8px;
        line-height: 1.5;
    }
    .employee-info p {
        font-size: 13px; /* [修正] テキストサイズ調整 */
        line-height: 1.6;
    }


    /* * [重要] 募集要項テーブルを修正
     * (「でかく表示される」＝はみ出す問題の対策)
     */
    .recruit-table th,
    .recruit-table td {
        display: block; /* テーブルを行ごとにブロック表示 */
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
        text-align: left !important;
    }
    .recruit-table th {
        background-color: #f4f7fa;
        font-weight: bold;
        border-bottom: none;
    }
    .recruit-table td {
        border-bottom: 1px solid #eee;
    }
    .recruit-table tr {
        margin-bottom: 10px;
        display: block;
        border: 1px solid #eee;
    }
    .recruit-table tr:last-child td:last-child {
        border-bottom: none;
    }

    /* [修正] 中途採用の応募資格などの文字サイズ */
    .recruit-category .size-18 {
        font-size: 17px;
    }
    .recruit-category p {
        font-size: 15px;
    }
}
/* --------------------------------------
 * 8. 募集要項の可読性 修正 (上書き)
 * -------------------------------------- */

/* 中途採用の「仕事内容」「応募資格」テキスト */
.recruit-category p,
.recruit-category li {
    color: #333; /* 文字色を黒（濃いグレー）に */
}
.recruit-category .size-18 {
    color: #333; /* 見出しの文字色も黒に */
}

/* 新卒・中途のテーブル */
.recruit-table {
    background-color: #ffffff; /* テーブル全体の背景を白に */
}
.recruit-table th {
    background-color: #f4f7fa; /* 見出しセルは薄いグレー */
    color: #333; /* 文字色を黒（濃いグレー）に */
}
.recruit-table td {
    background-color: #ffffff; /* データセルを白に */
    color: #333; /* 文字色を黒（濃いグレー）に */
}

/* スマホ表示のテーブル文字色 */
@media (max-width: 768px) {
    .recruit-table th,
    .recruit-table td {
        color: #333; /* 文字色を黒（濃いグレー）に */
    }
}
/* --------------------------------------
 * 9. 募集要項ヘッダーの文字色 修正
 * -------------------------------------- */
.recruit-category h3.head-style-2 {
    color: #ffffff !important; /* 文字色を白に (強制上書き) */
}
/* --------------------------------------
 * 10. 募集要項 横並びレイアウト
 * -------------------------------------- */

/* PC表示 (デフォルト) */
.recruit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* 左右のブロック間の隙間 */
}
.recruit-grid-item {
    flex: 1; /* 均等に幅を分ける */
    min-width: 300px; /* 最小幅 */
}

/* 768px以下のスマホ表示 */
@media (max-width: 768px) {
    .recruit-grid {
        flex-direction: column; /* 横並びをやめて縦積みに */
        gap: 0;
    }
    .recruit-grid-item {
        width: 100%; /* スマホでは全幅に */
    }
    
    /* 縦積みにした際、下のブロックのテーブルが上のヘッダーにくっつきすぎないように調整 */
    .recruit-grid-item:last-child .recruit-table {
        margin-top: 20px;
    }
}
/* --------------------------------------
 * 11. 追加調整（PC・スマホ）
 * -------------------------------------- */

/* 1. PC版：社員の写真を小さくする (バランス調整) */
.employee-thumb {
    width: 180px; /* 200pxから180pxに少し小さく */
}

/* --------------------------------------
 * 12. 追加調整（スマホ版）
 * -------------------------------------- */
@media (max-width: 768px) {

    /* 2. スマホ版：文字を全体的に大きくする */
    
    /* ヒーロー */
    .recruit-hero-subtitle {
        font-size: 17px; /* 16px -> 17px */
    }
    /* 社員の声 */
    .employee-info h3 {
        font-size: 15px; /* 14px -> 15px */
    }
    .employee-quote {
        font-size: 16px; /* 15px -> 16px */
    }
    .employee-info p {
        font-size: 15px; /* 13px -> 15px */
    }
    /* 募集要項 */
    .recruit-category p,
    .recruit-category .size-18 {
        font-size: 16px; /* 15px, 17px -> 16px (統一) */
    }
    .recruit-table th,
    .recruit-table td {
        font-size: 15px; /* テーブル内も少し大きく */
    }

    /* 3. スマホ版：「JSIRで働く魅力」を横並びにする */
    
    /* [重要] 縦積みの指定を解除 */
    .why-work-jsir .recruit-layout .col-1_3 {
        width: 33.333%; /* 100%を上書きして横並びを維持 */
        padding-left: 5px;  /* 窮屈なので隙間を調整 */
        padding-right: 5px;
        margin-bottom: 0; /* 縦積みの余白を削除 */
    }
    
    /* 横並びで収めるため、中の要素を小さく調整 */
    .why-work-jsir .feature-icon img {
        width: 60px; /* 80px -> 60px */
        height: 60px;
    }
    .why-work-jsir .feature-item h3 {
        font-size: 14px; /* 他は大きく、ここは小さく */
    }
    .why-work-jsir .feature-item p {
        font-size: 13px; /* 他は大きく、ここは小さく */
        line-height: 1.5;
        text-align: center; /* 小さくなるので中央揃えに変更 */
    }
}
}
/* ======================================================================
   選考フロー (Flow) セクション用スタイル
   ====================================================================== */

.jsir-flow-section {
    margin: 60px 0 80px;
}

.jsir-flow-lead {
    text-align: center;
    margin-bottom: 40px;
    font-size: 0.95rem;
    color: #666;
}

/* フローリスト全体（PCは横並び） */
.jsir-flow-list {
    display: flex;
    justify-content: space-between;
    padding: 0 !important; /* リセット */
    margin: 0;
    list-style: none !important;
    position: relative;
    gap: 15px;
}

/* 各ステップのカード */
.jsir-flow-item {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 20px 10px;
    text-align: center;
    flex: 1; /* 等幅で広げる */
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.jsir-flow-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(26, 35, 126, 0.1);
    border-color: #00BCD4;
}

/* 矢印（PC版：右向き） */
.jsir-flow-item:not(:last-child)::after {
    content: '\f105'; /* FontAwesomeの右矢印 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -14px; /* カードの外側 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #00BCD4;
    z-index: 1;
}

/* ステップ番号 */
.jsir-flow-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #00BCD4;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

/* アイコンエリア */
.jsir-flow-icon {
    font-size: 2rem;
    color: #1A237E;
    margin-bottom: 15px;
    height: 40px; /* 高さ揃え */
}

/* タイトル */
.jsir-flow-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1A237E;
    margin: 0 0 10px;
    line-height: 1.4;
    border: none !important; /* h3のデフォルト線を消す */
    padding: 0 !important;
}

/* 説明テキスト */
.jsir-flow-text {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 内定（最後のステップ）だけ強調する */
.jsir-flow-last {
    background-color: #E0F7FA; /* 薄いシアン背景 */
    border-color: #00BCD4;
}

/* --- レスポンシブ対応（スマホ：縦並び） --- */
@media (max-width: 768px) {
    .jsir-flow-list {
        flex-direction: column;
        gap: 30px; /* 縦の間隔を広めに */
        max-width: 400px;
        margin: 0 auto;
    }

    /* 矢印（スマホ版：下向き） */
    .jsir-flow-item:not(:last-child)::after {
        content: '\f107'; /* 下矢印 */
        right: 50%;
        top: auto;
        bottom: -25px; /* カードの下側 */
        transform: translateX(50%);
    }
}
/* ----- 選考フローのタイトル修正（左寄せ・下線あり） ----- */
.jsir-flow-section h2 {
    font-size: 2rem !important;      /* 文字サイズを「募集職種一覧」と同じに */
    font-weight: 700 !important;     /* 太字 */
    color: #1A237E !important;       /* ネイビー色 */
    text-align: left !important;     /* 左寄せ */
    border-bottom: 2px solid #E0E0E0 !important; /* 下にグレーの線 */
    padding-bottom: 15px !important; /* 線との隙間 */
    margin-bottom: 40px !important;  /* 下の文章との隙間 */
    background: none !important;     /* 不要な背景を消す */
    border-left: none !important;    /* 不要な左線を消す */
    border-top: none !important;     
    border-right: none !important;
}
/* ======================================================================
   追従エントリーボタン（フローティングボタン）
   ====================================================================== */

.jsir-float-entry-btn {
    /* 画面上の定位置に固定 */
    position: fixed;
    bottom: 20px;   /* 下からの距離 */
    right: 90px;    /* 右からの距離 */
    z-index: 9999;  /* 他の要素より手前に表示 */
    
    /* デザイン */
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #00BCD4; /* シアン（アクセントカラー） */
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif; /* 英語フォント */
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    
    /* 形と影 */
    padding: 15px 35px;
    border-radius: 50px; /* 丸みのあるピル型 */
    box-shadow: 0 5px 20px rgba(0, 188, 212, 0.4); /* ふんわり光る影 */
    border: 2px solid #FFFFFF; /* 白いフチをつけて目立たせる */
    
    /* アニメーション */
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.jsir-float-entry-btn:hover {
    background-color: #FFF; /* 白に変化 */
    transform: translateY(-5px); /* 少し浮き上がる */
    box-shadow: 0 10px 25px rgba(26, 35, 126, 0.4);
    border-color: #00BCD4; /* フチをシアンに */
}

/* --- スマホ対応（画面の下・中央に配置） --- */
@media (max-width: 768px) {
    .jsir-float-entry-btn {
        /* X軸（横方向）を画面中央にする設定 */
        left: 50%;                   /* 左から50%の位置に配置 */
        right: auto;                 /* 元の「右から〇〇px」を解除 */
        transform: translateX(-50%); /* ボタンの幅の半分だけ左に戻して完全な中央にする */

        /* Y軸（縦方向）の設定 */
        bottom: 20px;                /* 下からの距離（お好みで調整してください） */

        /* サイズ調整（既存のまま） */
        padding: 12px 25px;
        font-size: 1rem;
        
        /* 念のため幅が崩れないように */
        width: max-content; 
    }

    /* ★重要：スマホでタップした時に位置が右にズレないように、PC用の変形を上書きする */
    .jsir-float-entry-btn:hover {
        /* X軸中央揃え(-50%)を維持しつつ、Y軸の浮き上がりアニメーションは無効化(0)する */
        transform: translateX(-50%) translateY(0); 
    }
}
/* ======================================================================
   新しいトップメッセージエリア（The Fast風レイアウト）
   ====================================================================== */

.recruit-top-message {
    padding: 80px 0 60px; /* 上下の余白 */
    background-color: #FFFFFF;
    text-align: center;
}

/* --- メインコピー（H2）：明朝体バージョン --- */
.main-copy {
    /* ここで「しっぽり明朝」を指定し、なければ端末の明朝体を使う */
    font-family: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif !important;
    
    font-size: 3.6rem; /* 明朝体は少し細く見えるので、サイズを少し大きく */
    font-weight: 700;
    color: #1A237E;
    line-height: 1.4;  /* 行間をゆったりと */
    margin-bottom: 30px;
    letter-spacing: 0.1em; /* 文字の間隔を広げて「格式」を出す */
    
    /* 文字に少しだけ影をつけて立体感（高級感）を出す */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .main-copy {
        font-size: 2.2rem; /* スマホでも少し大きく */
        line-height: 1.5;
        text-align: center; /* 強いメッセージなのでスマホでも中央揃えがおすすめ */
    }
}

/* --- サブコピー（P） --- */
.sub-copy {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.1rem;
    color: #333;
    line-height: 2.0;
    margin-bottom: 40px;
    font-weight: 500;
}

/* --- エントリーボタン周り --- */
.hero-btn-area {
    margin-bottom: 60px; /* 画像との間隔 */
}

/* --- ヒーロー画像 --- */
.hero-image-wrapper {
    width: 100%;
    max-width: 1100px; /* 横幅の最大値 */
    margin: 0 auto;
    position: relative;
}

.hero-img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* 角を丸くして今っぽく */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* ふんわり影をつける */
    display: block;
}

/* --- スマホ対応 --- */
.sp-only { display: none; }

@media (max-width: 768px) {
    .recruit-top-message {
        padding: 50px 0 40px;
    }
    
    .main-copy {
        font-size: 2.0rem; /* スマホでは少し小さく */
        text-align: left;  /* スマホは左寄せの方が読みやすい場合あり */
        padding: 0 15px;
    }
    
    .sub-copy {
        font-size: 0.95rem;
        text-align: left;
        padding: 0 15px;
    }
    
    .sp-only { display: block; } /* スマホでのみ改行 */
    
    .hero-img {
        border-radius: 10px; /* スマホでは角丸を少し小さく */
    }
}
/* ======================================================================
   社員の声 (Voice) セクション
   ====================================================================== */

.recruit-voice-section {
    margin-bottom: 80px;
    margin-top: 100px; 
}

.section-lead {
    text-align: center;
    margin-bottom: 40px;
    color: #666;
    line-height: 1.8;
}

/* グリッドレイアウト（PCは3列） */
.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動で列数を調整 */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* カードデザイン */
.voice-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden; /* 角丸からはみ出た画像を隠す */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.voice-card:hover {
    transform: translateY(-5px); /* ホバーで少し浮く */
    box-shadow: 0 10px 25px rgba(26, 35, 126, 0.15);
}

/* 画像エリア */
.voice-img-area {
    width: 100%;
    height: 200px; /* 写真の高さ */
    background-color: #f0f0f0; /* 写真がない時のグレー背景 */
}

.voice-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいにトリミングして表示 */
}

/* テキストエリア */
.voice-content {
    padding: 25px;
}

.voice-role {
    font-size: 0.85rem;
    color: #00BCD4; /* シアン色 */
    font-weight: 700;
    margin-bottom: 10px;
}

.voice-catch {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A237E; /* ネイビー */
    line-height: 1.5;
    margin-bottom: 15px;
    border: none !important; /* h3のデフォルト線を消す */
    padding: 0 !important;
}

.voice-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.8;
}

/* ======================================================================
   【修正版】社員の声 (Voice) スマホ表示の文字被り防止
   ====================================================================== */
@media (max-width: 768px) {
    /* 1. グリッドを1列にする */
    .voice-grid {
        grid-template-columns: 1fr !important;
        padding: 0 10px;
        gap: 30px !important; /* カード間の余白もしっかり確保 */
    }

    /* 2. カードを「ブロック表示」に強制変更（これが一番確実です） */
    .voice-card {
        display: block !important; /* flexをやめてただの箱にする */
        height: auto !important;   /* 高さは中身に合わせて伸びるように */
        position: relative !important;
    }

    /* 3. 画像エリアの高さを固定し、幅を100%に */
    .voice-img-area {
        display: block !important;
        width: 100% !important;
        height: 200px !important; /* 高さを確保 */
        overflow: hidden;
    }

    .voice-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 4. 文字エリアの設定 */
    .voice-content {
        display: block !important;
        width: 100% !important;
        height: auto !important;   /* 文字数に合わせて伸びる */
        padding: 25px !important;  /* 余白を確保 */
        box-sizing: border-box;
        background-color: #fff;    /* 背景色を念のため指定 */
    }
}
/* ======================================================================
   よくある質問 (FAQ) セクション
   ====================================================================== */

.recruit-faq-section {
    margin-bottom: 80px;
    margin-top: 100px; /* 上との余白 */
}

/* FAQリストの枠 */
.faq-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 質問同士の間隔 */
}

/* アコーディオン全体（閉じた状態） */
.jsir-faq-item {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 開いた時の枠線の色 */
.jsir-faq-item[open] {
    border-color: #1A237E;
    box-shadow: 0 4px 15px rgba(26, 35, 126, 0.1);
}

/* 質問部分（クリックエリア） */
.jsir-faq-question {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    font-weight: 700;
    color: #1A237E;
    background-color: #fff;
    list-style: none; /* デフォルトの▼を消す */
    position: relative;
    font-size: 1.05rem;
}

/* デフォルトの▼を消す（Safari/Chrome用） */
.jsir-faq-question::-webkit-details-marker {
    display: none;
}

/* Qマーク */
.faq-q-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1A237E;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* 右側の＋アイコン作成 */
.faq-icon-plus {
    margin-left: auto; /* 右端に寄せる */
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.faq-icon-plus::before,
.faq-icon-plus::after {
    content: '';
    position: absolute;
    background-color: #00BCD4; /* シアン色 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq-icon-plus::before { width: 100%; height: 2px; } /* 横棒 */
.faq-icon-plus::after  { width: 2px; height: 100%; } /* 縦棒 */

/* 開いた時に＋を×（回転）にする */
.jsir-faq-item[open] .faq-icon-plus::before { transform: translate(-50%, -50%) rotate(45deg); }
.jsir-faq-item[open] .faq-icon-plus::after  { transform: translate(-50%, -50%) rotate(45deg); }

/* 回答エリア */
.jsir-faq-answer {
    padding: 20px 25px 30px;
    background-color: #F8F8FC; /* 薄い背景色 */
    border-top: 1px solid #eee;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    animation: fadeIn 0.3s ease;
}

.faq-a-body {
    display: flex;
    align-items: flex-start;
}

/* Aマーク */
.faq-a-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00BCD4; /* シアン */
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px; /* テキストとの位置調整 */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-faq-question {
        padding: 15px;
        font-size: 0.95rem;
    }
    .faq-q-mark, .faq-a-mark {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
        margin-right: 10px;
    }
}
/* ======================================================================
   企業理念ページ専用スタイル (Philosophy)
   ====================================================================== */

/* --- 理念メインセクション --- */
.jsir-philosophy-section {
    padding: 60px 20px 80px;
    background-color: #FFFFFF;
    text-align: center;
}

.jsir-phi-block {
    margin-bottom: 80px;
    position: relative;
}

/* 英語ラベル (PURPOSE / MISSION) */
.jsir-phi-label {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #00BCD4; /* シアン */
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    position: relative;
}

.jsir-phi-label::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: #00BCD4;
    margin: 10px auto 0;
}

/* メインの見出し */
.jsir-phi-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #1A237E; /* ネイビー */
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 説明テキスト */
.jsir-phi-text {
    font-size: 1.1rem;
    color: #333;
    line-height: 2;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 品質方針セクション --- */
.jsir-policy-section {
    background-color: #F8F8FC; /* 薄いネイビーグレー背景 */
    padding: 80px 20px;
}

.jsir-policy-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

/* H2スタイル（採用ページと共通感を持たせる） */
.jsir-policy-header h2 {
    font-size: 1.8rem;
    color: #1A237E;
    font-weight: 800;
    margin-bottom: 15px;
}

/* グリッドレイアウト（2列×2行にする修正版） */
.jsir-policy-grid {
    display: grid;
    /* PCでは強制的に2列にする */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;
    /* 2列だと横長になりすぎないよう、全体の幅を少し絞ると読みやすいです */
    max-width: 1000px; 
    margin: 0 auto;
}

/* --- スマホ対応（変更なし：1列のまま） --- */
@media (max-width: 768px) {
    .jsir-policy-grid {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
}

/* 方針カード */
.jsir-policy-card {
    background: #FFFFFF;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    border-top: 4px solid #1A237E; /* 上にネイビーのライン */
}

.jsir-policy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(26, 35, 126, 0.1);
}

/* 背景にうっすら数字を表示 */
.jsir-policy-num {
    position: absolute;
    top: -10px;
    right: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    color: #F0F2F5; /* ごく薄いグレー */
    z-index: 0;
    pointer-events: none;
}

.jsir-policy-card h3 {
    font-size: 1.3rem;
    color: #1A237E;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.jsir-policy-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-phi-heading {
        font-size: 1.6rem;
    }
    .jsir-phi-text {
        font-size: 0.95rem;
        text-align: left; /* スマホでは左寄せの方が読みやすい場合あり */
    }
    .pc-only {
        display: none; /* スマホで改行を消す用 */
    }
    .jsir-policy-grid {
        grid-template-columns: 1fr; /* 1列に */
    }
}
/* ======================================================================
   企業理念ページ専用スタイル (Modern Tech Design)
   ====================================================================== */

/* --- 1. PURPOSE & MISSION エリア --- */
.jsir-philosophy-area {
    padding: 100px 20px;
    background-color: #F5F7FA; /* ベースは薄いグレー */
    position: relative;
    overflow: hidden;
}

/* デジタル感のあるドット背景 */
.jsir-tech-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ドット柄の生成 */
    background-image: radial-gradient(#CCD1D9 1px, transparent 1px);
    background-size: 30px 30px; /* ドットの間隔 */
    opacity: 0.5;
    z-index: 0;
}

/* コンテンツボックス */
.jsir-phi-box {
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
    text-align: center;
}
.jsir-phi-box:last-child {
    margin-bottom: 0;
}

/* 背景の巨大な透かし文字 (Watermark) */
.jsir-phi-eng-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 8rem; /* 巨大に */
    font-weight: 900;
    color: #FFFFFF;
    white-space: nowrap;
    z-index: -1;
    letter-spacing: 0.1em;
    /* テキストにグラデーションをかけてリッチに */
    background: linear-gradient(to bottom, #FFFFFF 30%, #E3F2FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.6;
}

/* 小さなラベル */
.jsir-phi-label {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #00BCD4; /* シアン */
    letter-spacing: 1.2em;
    text-indent: 1.2em;
    margin-bottom: 15px;
    background: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* メイン見出し */
.jsir-phi-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #1A237E; /* ネイビー */
    line-height: 1.5;
    margin-bottom: 30px;
}

/* 説明文 */
.jsir-phi-text {
    font-size: 1.05rem;
    color: #333;
    line-height: 2;
    max-width: 800px;
    margin: 0 auto;
    font-weight: 500;
}


/* --- 2. 品質方針エリア (01-04) --- */
.jsir-policy-section {
    background-color: #FFFFFF;
    padding: 80px 20px 100px;
    position: relative;
}

.jsir-section-title {
    font-size: 2rem;
    color: #1A237E;
    font-weight: 800;
    margin-bottom: 10px;
    text-align: center;
}

.jsir-policy-header {
    text-align: center;
    margin-bottom: 60px;
}

/* グリッドレイアウト（PCは2列×2行） */
.jsir-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* カードデザイン */
.jsir-policy-card {
    background: #FFFFFF;
    border-radius: 12px;
    /* 浮遊感のある影 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* 下にグラデーションのライン */
    border-bottom: 4px solid #00BCD4; 
}

/* ホバー時のアクション */
.jsir-policy-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(26, 35, 126, 0.15);
}

/* カードの中身 */
.jsir-card-inner {
    padding: 40px 35px;
    position: relative;
    z-index: 1;
}

/* 背景の数字（中抜き・アウトライン文字） */
.jsir-policy-num-outline {
    position: absolute;
    top: -10px;
    right: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    z-index: -1;
    opacity: 0.15;
    
    /* 文字の縁取りだけを表示するテクニック */
    color: transparent;
    -webkit-text-stroke: 2px #1A237E;
}

.jsir-policy-card h3 {
    font-size: 1.3rem;
    color: #1A237E;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* 見出しの左に小さなアクセント */
.jsir-policy-card h3::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 24px;
    background-color: #00BCD4;
    margin-right: 12px;
    border-radius: 2px;
}

.jsir-policy-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-phi-heading {
        font-size: 1.5rem;
    }
    .jsir-phi-eng-bg {
        font-size: 4rem; /* スマホでは透かし文字を小さく */
    }
    
    .jsir-policy-grid {
        grid-template-columns: 1fr; /* 1列に戻す */
    }
    
    .jsir-policy-num-outline {
        font-size: 4rem; /* 数字も少し小さく */
    }
}
/* --- 背景の巨大透かし文字 (WindSong Style) --- */
.jsir-bg-text {
    position: absolute;
    /* WindSongは縦に長いので、位置を少し調整 */
    top: 40%; 
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg); /* 少し斜めにしてサインっぽく */
    
    /* ▼▼▼ フォント指定（ここを変えれば別のフォントになります） ▼▼▼ */
    font-family: 'WindSong', cursive; 
    /* -------------------------------------------------------
       候補2なら: font-family: 'Kaushan Script', cursive;
       候補3なら: font-family: 'Homemade Apple', cursive;
    ------------------------------------------------------- */

    text-transform: capitalize; 
    
    /* WindSongは線が細いので、思い切り大きくしても邪魔になりません */
    font-size: 13rem; 
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    z-index: 0;
    letter-spacing: 0;

    color: transparent;
    /* 線をネイビーにしつつ、かなり薄くして背景に溶け込ませる */
    -webkit-text-stroke: 1px rgba(26, 35, 126, 0.1); 
    
    pointer-events: none;
    user-select: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-bg-text {
        font-size: 5rem;
        top: 30%;
        -webkit-text-stroke: 0.5px rgba(26, 35, 126, 0.15);
    }
}

/* --- 修正2：ポリシーカードの背景数字 (位置と薄さの調整) --- */
.jsir-policy-num-outline {
    position: absolute;
    /* 位置を微調整してタイトルと被らないように */
    top: -15px;
    right: 10px;
    
    font-family: 'Montserrat', sans-serif;
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    z-index: 0; /* 重要：z-indexを下げて文字の下に確実に潜らせる */
    opacity: 1; /* opacityではなく色で調整するため1に戻す */
    
    color: transparent;
    /* 線を薄く（2px -> 1px / 色も薄く） */
    -webkit-text-stroke: 1px rgba(26, 35, 126, 0.1); 
}
/* コンテンツが透かし文字の上に来るように調整 */
.jsir-phi-content {
    position: relative;
    z-index: 2; /* 背景文字(z=0)より手前に */
}
/* --- スマホ表示修正：企業理念のテキストを中央寄せにする --- */
@media (max-width: 768px) {
    .jsir-phi-text {
        text-align: center !important; /* 強制的に中央寄せ */
        text-align-last: center !important; /* 念のため最終行も中央に */
    }
    
    /* ついでに見出しの改行も調整（スマホで変な位置で改行されないように） */
    .jsir-phi-heading {
        word-break: keep-all; /* 単語の途中で改行させない */
        overflow-wrap: break-word;
    }
}
/* ======================================================================
   ページタイトルのかっこいいアニメーション
   ====================================================================== */

/* 1. アニメーションの動きを定義（下からフワッと） */
@keyframes jsirHeroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px); /* 30px下からスタート */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 元の位置へ */
    }
}

/* 2. サブタイトル（株式会社日本SI研究所）への適用 */
.main-head-bg span {
    display: block; /* 動きを適用するためにブロック化 */
    opacity: 0;     /* 最初は隠す */
    
    /* 0.8秒かけてアニメーション実行 */
    animation: jsirHeroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s; /* 0.2秒待ってから開始 */
}

/* 3. メインタイトル（数字で見る...）への適用 */
.main-head-bg h1 {
    opacity: 0;     /* 最初は隠す */
    
    /* サブタイトルより少し遅れて登場させることで「リズム」を作る */
    animation: jsirHeroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.4s; /* 0.4秒待ってから開始 */
}
/* ======================================================================
   社長メッセージページ専用スタイル (Top Message)
   ====================================================================== */

.jsir-greeting-section {
    padding: 80px 20px 100px;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden; /* 背景文字のはみ出し防止 */
}

/* --- レイアウト（グリッド） --- */
.jsir-greeting-grid {
    display: grid;
    /* 写真エリア(4) : 文章エリア(6) の黄金比に近いバランス */
    grid-template-columns: 4fr 6fr; 
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center; /* 上下中央揃え */
    position: relative;
    z-index: 1; /* 背景文字より手前に */
}

/* --- 左側：写真エリアのデザイン --- */
.jsir-greeting-visual {
    position: relative;
    text-align: center;
}

.jsir-portrait-frame {
    position: relative;
    display: inline-block;
    z-index: 1;
}

/* 写真の装飾 */
.jsir-portrait-img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 4px;
    /* 少し影をつけて浮かす */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
    display: block;
    position: relative;
    z-index: 2;
}

/* 写真の下に敷くネイビーのボックス（ズラして配置） */
.jsir-portrait-frame::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    background-color: #E0F7FA; /* 薄いシアン */
    border: 2px solid #00BCD4; /* シアンの枠 */
    z-index: 1;
    border-radius: 4px;
}

/* 名前エリア */
.jsir-portrait-name {
    margin-top: 40px;
    text-align: left;
    padding-left: 10px;
}

.jsir-role {
    display: block;
    font-size: 0.9rem;
    color: #00BCD4; /* シアン */
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Noto Sans JP', sans-serif;
}

.jsir-name {
    display: block;
    font-size: 1.8rem;
    color: #1A237E; /* ネイビー */
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.jsir-name-en {
    display: block;
    font-size: 1rem;
    color: #999;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
    margin-top: 5px;
}


/* --- 右側：文章エリアのデザイン --- */
.jsir-greeting-text-area {
    padding-top: 20px;
}

/* キャッチコピー */
.jsir-greeting-catch {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.6;
    margin-bottom: 30px;
    border-left: 6px solid #00BCD4; /* 左にアクセントライン */
    padding-left: 20px;
}

/* 本文 */
.jsir-greeting-body p {
    font-size: 1rem;
    line-height: 2;
    color: #333;
    margin-bottom: 25px;
    text-align: justify; /* 両端揃えできれいに見せる */
}

/* 引用（強調メッセージ） */
.jsir-greeting-quote {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A237E;
    text-align: center;
    margin: 40px 0;
    padding: 30px;
    background-color: #F8F8FC; /* 薄いネイビーグレー */
    border-radius: 8px;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 引用マーク */
.jsir-greeting-quote::before {
    content: '\201C'; /* 左ダブルクォーテーション */
    position: absolute;
    top: 0;
    left: 10px;
    font-family: 'Times New Roman', serif;
    font-size: 4rem;
    color: #00BCD4;
    opacity: 0.3;
}

/* 手書きサイン */
.jsir-signature {
    text-align: right;
    font-family: 'WindSong', cursive; /* 企業理念ページと同じ手書きフォント */
    font-size: 2.5rem;
    color: #1A237E;
    margin-top: 40px;
    opacity: 0.8;
}


/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-greeting-grid {
        grid-template-columns: 1fr; /* 縦積み */
        gap: 40px;
    }

    /* スマホでは写真を少し小さく、中央寄せ */
    .jsir-greeting-visual {
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .jsir-portrait-img {
        max-width: 280px;
    }
    
    .jsir-portrait-name {
        text-align: center;
        padding-left: 0;
    }

    .jsir-greeting-catch {
        font-size: 1.4rem;
        padding-left: 15px;
        border-left-width: 4px;
    }

    .jsir-greeting-quote {
        font-size: 1rem;
        padding: 20px;
    }
    
    .jsir-greeting-body p {
        text-align: left;
    }
}
/* --- 2. 会社概要リストのデザイン刷新 (IT企業風モダンテーブル) --- */

.jsir-company-section {
    /* 背景の透かし文字が見えるように、セクション自体の背景は透明または薄く */
    background-color: transparent; 
    padding: 60px 20px 100px;
    position: relative;
    z-index: 1;
}

/* リスト全体のラッパー */
.jsir-profile-wrapper {
    max-width: 960px; /* 参考サイトに合わせて少し幅広に */
    margin: 0 auto 80px;
    background-color: #FFFFFF; /* リスト部分の背景は白 */
    border-radius: 8px; /* 角丸 */
    /* 全体を少し浮かせてリッチに見せる */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* 角丸からはみ出さないように */
    border: 1px solid #E0E0E0; /* 薄い枠線 */
}

/* 各行のスタイル */
.jsir-profile-row {
    display: flex;
    border-bottom: 1px solid #E0E0E0; /* 各行の区切り線 */
    transition: background-color 0.3s;
}

/* 最後の行だけ下線を消す */
.jsir-profile-row:last-child {
    border-bottom: none;
}

/* ホバー時に少し色を変える */
.jsir-profile-row:hover {
    background-color: #F9FCFF;
}

/* 左側：項目名 (dt) - ここをIT企業らしくクールに */
.jsir-profile-row dt {
    width: 220px; /* 固定幅で見やすく */
    flex-shrink: 0; /* 幅を縮めない */
    /* ネイビーのグラデーション背景でリッチに */
    background: linear-gradient(to right, #1A237E, #283593);
    color: #FFFFFF; /* 白文字 */
    font-weight: 700;
    padding: 25px 20px;
    display: flex;
    align-items: center; /* 上下中央揃え */
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
    /* 右側にシアンのアクセントライン */
    border-right: 3px solid #00BCD4;
}

/* 右側：内容 (dd) */
.jsir-profile-row dd {
    flex-grow: 1; /* 残りの幅を全部使う */
    padding: 25px 30px;
    color: #333;
    line-height: 1.8;
    font-size: 1rem;
}

/* 社名の強調スタイル */
.jsir-profile-row dt:first-child {
    font-size: 1.1rem; /* 社名の項目だけ少し大きく */
}
.jsir-profile-row dd:first-child {
    font-size: 1.2rem; /* 社名だけ少し大きく強調 */
    font-weight: 700;
    color: #1A237E;
}

/* 英語表記のスタイル（社名の下） */
.jsir-profile-row .en {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
    font-weight: 400;
}


/* --- スマホ対応 (リスト) --- */
@media (max-width: 768px) {
    .jsir-profile-row {
        flex-direction: column; /* 縦積みに変更 */
    }

    .jsir-profile-row dt {
        width: 100%; /* 幅いっぱい */
        padding: 15px 20px;
        border-right: none; /* 右の線を消す */
        /* スマホでは少し落ち着いたデザインに */
        background: #1A237E; 
        border-bottom: 3px solid #00BCD4; /* 下にアクセントライン */
    }

    .jsir-profile-row dd {
        width: 100%;
        padding: 20px;
        background-color: #fff;
    }
}
/* 取引先リスト (2列表示・位置調整版) */
.jsir-clients-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px 30px;
    list-style: none;
    
    /* ▼▼▼ 修正箇所：左右に余白を入れて、はみ出しを防止 ▼▼▼ */
    padding: 0 20px; 
    /* ▲▲▲ ▲▲▲ */
    
    margin: 30px 0 10px;
}

/* (以下のliやbeforeは変更なしでOKですが、念のため記載します) */
.jsir-clients-list li {
    padding-left: 20px; /* 点との距離を少し広げて読みやすく */
    position: relative;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 5px;
}

.jsir-clients-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #00BCD4;
    border-radius: 50%;
}
/* ======================================================================
   テキスト・ボタン登場アニメーション（下からフワッと）
   ====================================================================== */

/* 1. 動きの定義 */
@keyframes jsirFadeUpSimple {
    from {
        opacity: 0;
        transform: translateY(30px); /* 30px下からスタート */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* 元の位置へ */
    }
}

/* 2. クラスへの適用 */
.jsir-fade-up {
    opacity: 0; /* 最初は隠しておく */
    /* 0.8秒かけてアニメーション実行 */
    animation: jsirFadeUpSimple 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3. 順番に表示させる（時間差攻撃） */
/* 1番目（タイトル） */
.message-content .jsir-fade-up:nth-child(1) {
    animation-delay: 0.4s; /* 0.2秒待つ */
}
/* 2番目（サブコピー） */
.message-content .jsir-fade-up:nth-child(2) {
    animation-delay: 0.7s; /* 0.5秒待つ */
}
/* 3番目（ボタン） */
.message-content .jsir-fade-up:nth-child(3) {
    animation-delay: 1.0s; /* 0.8秒待つ */
}
/* ======================================================================
   沿革 (History) - モダンタイムラインデザイン
   ====================================================================== */

.jsir-history-container {
    max-width: 800px;
    margin: 40px auto;
    position: relative;
    padding-left: 30px; /* 左側にスペースを確保 */
}

/* 縦のライン */
.jsir-history-container::before {
    content: '';
    position: absolute;
    left: 110px; /* 年号と内容の間を通るラインの位置 */
    top: 10px;
    bottom: 10px;
    width: 2px;
    background-color: #E0E0E0; /* 薄いグレーの線 */
}

/* 各項目のラッパー */
.jsir-history-item {
    display: flex;
    margin-bottom: 30px;
    position: relative;
    align-items: flex-start; /* 上揃え */
}

.jsir-history-item:last-child {
    margin-bottom: 0;
}

/* 年号 (左側) */
.jsir-history-date {
    width: 90px; /* 固定幅 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1A237E; /* ネイビー */
    text-align: right;
    padding-right: 35px; /* ラインまでの距離 */
    line-height: 1.4;
    padding-top: 2px; /* 少し下げて点と合わせる */
}

/* ライン上の点 (ドット) */
.jsir-history-item::after {
    content: '';
    position: absolute;
    left: 106px; /* ラインの中心に合わせる */
    top: 8px;    /* 年号の高さに合わせる */
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 3px solid #00BCD4; /* シアンの縁取り */
    border-radius: 50%;
    z-index: 1;
}

/* 内容 (右側) */
.jsir-history-content {
    flex: 1; /* 残りの幅を使う */
    padding-left: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #eee; /* 薄い区切り線 */
}

.jsir-history-content p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-history-container {
        padding-left: 0;
    }
    
    /* 縦ラインを左端に移動 */
    .jsir-history-container::before {
        left: 7px;
    }
    
    .jsir-history-item {
        flex-direction: column; /* 縦積みに変更 */
        padding-left: 30px; /* 左端のライン分空ける */
        margin-bottom: 25px;
    }
    
    .jsir-history-item::after {
        left: 3px; /* 点も左端へ */
        top: 5px;
    }
    
    .jsir-history-date {
        text-align: left;
        width: auto;
        padding-right: 0;
        margin-bottom: 5px;
        color: #00BCD4; /* スマホでは年号をシアンに */
        font-size: 1rem;
    }
    
    .jsir-history-content {
        padding-left: 0;
        border-bottom: none;
    }
}
/* ======================================================================
   採用メッセージセクション (Recruit Message)
   ====================================================================== */

.jsir-recruit-message-section {
    padding: 100px 20px; /* 透かし文字が入る分、少し余白を広めに */
    background-color: #FFFFFF;
    
    /* ▼▼▼ 追加：背景文字を閉じ込めるための設定 ▼▼▼ */
    position: relative;
    overflow: hidden;
    /* ▲▲▲ ここまで ▲▲▲ */
}

/* メッセージボックス（本文）を背景文字より手前に表示 */
.jsir-message-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative; /* 追加 */
    z-index: 1;         /* 追加：背景文字の上に表示 */
}

/* (以下は変更なし) */
.jsir-msg-heading {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.6;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.jsir-msg-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #00BCD4;
    margin: 20px auto 0;
    border-radius: 2px;
}

.jsir-msg-text {
    font-size: 1rem;
    line-height: 2;
    color: #333;
    margin-bottom: 30px;
    text-align: justify;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-recruit-message-section {
        padding: 60px 20px;
    }
    /* スマホでは透かし文字の位置を微調整 */
    .jsir-recruit-message-section .jsir-bg-text {
        font-size: 5rem;
        top: 10%; /* 少し上に */
    }
    
    .jsir-msg-heading {
        font-size: 1.4rem;
        text-align: left;
        display: block;
    }
    
    .jsir-msg-heading::after {
        margin: 15px 0 0;
    }
    
    .jsir-msg-text {
        text-align: left;
    }
}
/* --- 画像の登場アニメーション調整 --- */
.hero-image-wrapper.jsir-fade-up {
    /* ボタン(0.8s)の後に表示されるように調整 */
    animation-delay: 1.0s; 
    
    /* 画像は少しゆっくり出すと優雅に見えます */
    animation-duration: 1.2s; 
}

/* スマホでは画像を先に（または早めに）出したい場合 */
@media (max-width: 768px) {
    .hero-image-wrapper.jsir-fade-up {
        animation-delay: 0.2s; /* スマホなら早めに出す */
    }
}
/* ======================================================================
   透かし英語＋日本語見出し (Watermark Header)
   ====================================================================== */

.jsir-watermark-header {
    position: relative;
    text-align: center;
    margin-bottom: 60px; /* 下のコンテンツとの余白 */
    padding-top: 50px;
    /*overflow: hidden;*/ /* はみ出し防止 */
}

/* 背景の英語（透かし・筆記体） */
.jsir-wm-eng {
    display: block;
    font-family: 'WindSong', cursive; /* 手書きフォント */
    font-size: 6rem; /* 大きく */
    color: transparent;
    /* 薄いネイビーの線画にする */
    -webkit-text-stroke: 1px rgba(26, 35, 126, 0.15); 
    line-height: 1;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg); /* 真ん中に配置して少し傾ける */
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
}

/* 手前の日本語（メイン見出し） */
.jsir-wm-jp {
    position: relative;
    z-index: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1A237E; /* ネイビー */
    margin: 0;
    letter-spacing: 0.1em;
}

/* 日本語の下にシアンのアクセントライン */
.jsir-wm-jp::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #00BCD4;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-watermark-header {
        margin-bottom: 40px;
    }
    .jsir-wm-eng {
        font-size: 4rem; /* スマホでは透かしを小さく */
    }
    .jsir-wm-jp {
        font-size: 1.6rem;
    }
}

/* ======================================================================
   JSIRで働く魅力 (Photo Card Design)
   ====================================================================== */

.jsir-charm-section {
    padding: 100px 20px;
    background-color: #FFFFFF;
}

/* グリッドレイアウト */
.jsir-charm-grid {
    display: grid;
    /* PCでは3列、画面が狭くなると自動で折り返し */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* カード本体 */
.jsir-charm-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden; /* 画像のはみ出し防止 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #F0F0F0;
    position: relative;
    top: 0;
}

/* ホバー時の動き（浮き上がる） */
.jsir-charm-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(26, 35, 126, 0.15);
    border-color: #00BCD4; /* 枠線をシアンに */
}

/* 画像エリア */
.jsir-charm-img-box {
    width: 100%;
    height: 220px; /* 写真の高さ */
    position: relative;
    overflow: hidden;
}

/* 写真 */
.jsir-charm-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミング */
    transition: transform 0.5s ease;
}

/* ホバー時に写真がズームする */
.jsir-charm-card:hover .jsir-charm-img {
    transform: scale(1.1);
}

/* 画像の下部にアクセントライン */
.jsir-charm-img-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #1A237E, #00BCD4);
}

/* テキストエリア */
.jsir-charm-content {
    padding: 30px;
    position: relative;
}

/* 背景の数字（01, 02...） */
.jsir-charm-num {
    position: absolute;
    top: -30px; /* 画像エリアに少し食い込ませる */
    right: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #FFFFFF;
    /* 文字の縁取り（ドロップシャドウ）で視認性を確保 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1;
    opacity: 0.9;
    line-height: 1;
}

/* タイトル */
.jsir-charm-content h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1A237E; /* ネイビー */
    margin: 10px 0 15px;
    line-height: 1.4;
}

/* 説明文 */
.jsir-charm-content p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-charm-section {
        padding: 60px 20px;
    }
    
    .jsir-charm-grid {
        gap: 30px; /* 間隔を少し詰める */
    }
    
    .jsir-charm-img-box {
        height: 200px;
    }
    
    .jsir-charm-num {
        font-size: 3rem;
        top: -25px;
    }
}
/* ======================================================================
   採用メッセージセクション (背景色を追加して境界を明確化)
   ====================================================================== */

.jsir-recruit-message-section {
    padding: 100px 20px;
    
    /* ▼▼▼ 修正：背景色を薄いグレーブルーに変更 ▼▼▼ */
    background-color: #F5F7FA; 
    /* ▲▲▲ ▲▲▲ */

    /* ▼▼▼ 追加：上下に薄い線を入れてさらにクッキリさせる ▼▼▼ */
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    /* ▲▲▲ ▲▲▲ */
    
    position: relative;
    overflow: hidden;
}

/* （以下のスタイルは変更なしでOK） */
.jsir-message-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.jsir-msg-heading {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.6;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.jsir-msg-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #00BCD4;
    margin: 20px auto 0;
    border-radius: 2px;
}

.jsir-msg-text {
    font-size: 1rem;
    line-height: 2;
    color: #333;
    margin-bottom: 30px;
    text-align: justify;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-recruit-message-section {
        padding: 60px 20px;
    }
    .jsir-recruit-message-section .jsir-bg-text {
        font-size: 5rem;
        top: 10%;
    }
    
    .jsir-msg-heading {
        font-size: 1.4rem;
        text-align: left;
        display: block;
    }
    
    .jsir-msg-heading::after {
        margin: 15px 0 0;
    }
    
    .jsir-msg-text {
        text-align: left;
    }
}
/* Googleマップで見るボタン */
.jsir-map-link {
    display: inline-block !important;
    padding: 10px 20px !important;
    border: 1px solid #1A237E !important;
    color: #1A237E !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    background: #fff !important;
    transition: all 0.3s !important;
    margin-left: 24px !important;
    
    /* ▼▼▼ 追加：ボタンを最前面に持ってくる ▼▼▼ */
    position: relative !important;
    z-index: 100 !important; 
    cursor: pointer !important; /* カーソルも指マークに強制 */
    /* ▲▲▲ ▲▲▲ */
}

.jsir-map-link:hover {
    background-color: #1A237E !important;
    color: #FFFFFF !important;
}
/* 右側：地図エリア */
.jsir-office-map {
    width: 400px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    
    /* ▼▼▼ 追加：地図を最前面にしてクリック可能にする ▼▼▼ */
    position: relative !important;
    z-index: 50 !important;       /* 他の要素より手前に */
    pointer-events: auto !important; /* クリック操作を強制的に許可 */
    /* ▲▲▲ ▲▲▲ */
}

.jsir-office-map iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 250px !important;
    border-radius: 8px !important;
    background-color: #eee !important;
    border: none !important;
    
    /* ▼▼▼ 追加：iframe自体も手前に ▼▼▼ */
    position: relative !important;
    z-index: 51 !important;
    /* ▲▲▲ ▲▲▲ */
}
/* ======================================================================
   フッター直前エリア (Contact & Policy)
   ====================================================================== */

.jsir-footer-cta-section {
    padding: 80px 20px 60px;
    background-color: #F9FAFC; /* 全体のベースは薄い色 */
}

/* --- 1. お問い合わせカード (Dark Card) --- */
.jsir-contact-card {
    background: linear-gradient(135deg, #1A237E, #283593); /* ネイビーグラデーション */
    border-radius: 16px;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(26, 35, 126, 0.2);
    color: #FFFFFF;
    margin-bottom: 80px; /* 下のポリシーエリアとの間隔 */
    position: relative;
    overflow: hidden;
}

/* 背景の装飾（薄い円） */
.jsir-contact-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.jsir-contact-text {
    flex: 1;
    padding-right: 40px;
}

.jsir-contact-label {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #00BCD4; /* シアン */
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.jsir-contact-card h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 20px;
    line-height: 1.4;
    color: #FFF !important; /* 強制白文字 */
    border: none !important;
    padding: 0 !important;
}

.jsir-contact-card p {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.8;
    margin: 0;
}

/* お問い合わせボタン */
.jsir-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00BCD4;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.4);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.jsir-contact-btn:hover {
    background-color: #FFFFFF;
    color: #1A237E;
    transform: translateY(-3px);
}

.jsir-contact-btn i {
    margin-left: 10px;
}


/* --- 2. 認証・ポリシーエリア (Clean Style) --- */
.jsir-policy-area {
	max-width: 1100px !important;
	margin: 0 auto !important;
    border-top: 1px solid #E0E0E0;
    padding-top: 60px;
}

.jsir-policy-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* ISOロゴ */
.jsir-iso-logo {
    width: 120px;
    flex-shrink: 0;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
}
.jsir-iso-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキスト情報 */
.jsir-policy-content {
    flex: 1;
    font-size: 0.9rem;
    color: #333;
}

.jsir-iso-number {
    font-weight: 700;
    margin-bottom: 15px;
    color: #1A237E;
}

.jsir-iso-desc {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.jsir-iso-title {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #666;
}

.jsir-iso-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.jsir-iso-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    line-height: 1.6;
}
.jsir-iso-list li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #00BCD4;
    font-weight: bold;
}

/* リンク群 */
.jsir-policy-links {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.jsir-policy-links a {
    color: #1A237E;
    text-decoration: none;
    border-bottom: 1px solid #1A237E;
    font-weight: 700;
    transition: color 0.3s;
}
.jsir-policy-links a:hover {
    color: #00BCD4;
    border-color: #00BCD4;
}

/* 問い合わせ先画像 */
.jsir-privacy-contact p {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 10px;
}
.jsir-mail-img {
    max-width: 415px;
    height: auto;
}


/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-footer-cta-section {
        padding: 40px 15px;
    }

    /* お問い合わせカード */
    .jsir-contact-card {
        flex-direction: column;
        padding: 40px 25px;
        text-align: center;
        border-radius: 12px;
    }
    .jsir-contact-text {
        padding-right: 0;
        margin-bottom: 30px;
    }
    .jsir-contact-card h2 {
        font-size: 1.6rem;
    }
    .jsir-contact-btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* ポリシーエリア */
    .jsir-policy-flex {
        flex-direction: column;
        gap: 20px;
    }
    .jsir-iso-logo {
        margin: 0 auto; /* ロゴを中央に */
    }
    .jsir-policy-links {
        flex-direction: column;
        gap: 10px;
    }
}
/* ======================================================================
   トップページ専用スタイル (Top Page Modern & Clean)
   ====================================================================== */

.jsir-top-section {
    padding: 80px 0;
    position: relative;
    background-color: #F8F8FC; /* 全体を薄いグレーベースに */
}

/* --- 1. 見出し（ブロック体英語＋日本語） --- */
.jsir-watermark-header-top {
    position: relative;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 40px;
}

.jsir-wm-eng-top {
    display: block;
    font-family: 'Montserrat', sans-serif; /* 筆記体ではなくブロック体 */
    font-weight: 900;
    font-size: 5rem; /* 大きく */
    color: #F0F2F5; /* 非常に薄いグレー */
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 0;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* --- 2. 事業案内 (Service) --- */
.jsir-service-grid-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 中央寄せ */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.jsir-service-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 35px 15px !important; /* 上下の余白を増やして窮屈さを解消 */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #EAEAEA;
    width: 240px !important; /* カード幅も少し広げる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.jsir-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(26, 35, 126, 0.15);
    border-color: #00BCD4;
}

.jsir-service-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1A237E;
    margin: 0;
    line-height: 1.4;
}
/* ======================================================================
   事業案内アイコン (CSS Design Version)
   ====================================================================== */

/* 丸いアイコンのベースデザイン */
.jsir-service-circle {
    width: 110px;  /* 丸の大きさ */
    height: 110px;
    border-radius: 50%; /* 完全な円にする */
    
    /* ネイビーのグラデーション背景 */
    background: linear-gradient(135deg, #1A237E, #283593);
    
    /* アイコンを中央配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin: 0 auto 25px; /* 下の文字との隙間 */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弾むような動き */
    
    /* 影をつけて立体的に */
    box-shadow: 0 10px 25px rgba(26, 35, 126, 0.3);
    border: 4px solid #fff; /* 白いフチ取りで清潔感を出す */
}

/* 中のアイコン (FontAwesome) */
.jsir-service-circle i {
    font-size: 3.5rem; /* アイコンの大きさ */
    color: #FFFFFF;    /* アイコンの色 */
    transition: transform 0.3s ease;
}

/* カードにマウスを乗せた時の変化 */
.jsir-service-card:hover .jsir-service-circle {
    /* 背景をシアンに変更 */
    background: #00BCD4;
    transform: scale(1.1) translateY(-5px); /* 少し大きくなって浮く */
    box-shadow: 0 15px 30px rgba(0, 188, 212, 0.4);
    border-color: #E0F7FA;
}

.jsir-service-card:hover .jsir-service-circle i {
    transform: scale(0.9); /* アイコン自体は少し縮めてバランスを取る */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-service-circle {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
    }
    .jsir-service-circle i {
        font-size: 2.5rem;
    }
}
/* --- 3. 製品情報 (Product) --- */
.jsir-product-area {
    background-color: #FFFFFF; /* 背景を白にしてメリハリ */
}

/* 2列グリッド */
.jsir-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 強制2列 */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.jsir-product-card {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    background: #fff;
    border: 1px solid #eee;
}

.jsir-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(26, 35, 126, 0.15);
}

.jsir-prod-img-box {
    width: 100%;
    height: 200px; /* 高さを揃える */
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jsir-prod-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jsir-prod-info {
    padding: 20px;
}

.jsir-prod-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A237E;
    margin-bottom: 10px;
}

.jsir-prod-info p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* ワイドカード（スポーツ管理） */
.jsir-product-grid-single {
    max-width: 1000px;
    margin: 0 auto;
}
.jsir-prod-flex {
    display: flex;
    align-items: center;
}
.jsir-prod-img-box-wide {
    width: 50%;
    padding: 20px;
    background-color: #f0f4f8;
    text-align: center;
}
.jsir-prod-img-box-wide img {
    max-height: 150px;
    width: auto;
    max-width: 100%;
}

/* --- 4. 導入事例 (Case Study) --- */
/* スライダーを中央に寄せる */
.jsir-case-slider-wrapper {
    max-width: 900px;
    margin: 0 auto 40px;
}

.jsir-case-card-new {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    margin: 0 15px; /* スライダー間の余白 */
    border: 1px solid #eee;
}

.jsir-case-link {
    display: block;
    text-decoration: none;
    color: #333;
}

.jsir-case-thumb {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    margin: 0;
}

.jsir-case-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jsir-case-card-new:hover .jsir-case-thumb img {
    transform: scale(1.1);
}

.jsir-case-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #00BCD4;
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
}

.jsir-case-body {
    padding: 20px;
    text-align: left;
}

.jsir-case-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A237E;
    margin-bottom: 8px;
    line-height: 1.4;
}

.jsir-case-body p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* --- 5. ISOロゴエリア (小さく統一) --- */
.jsir-iso-logos {
    width: 140px; /* 幅を制限 */
    flex-shrink: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px; /* ロゴ間の余白 */
    align-items: center;
}

.jsir-iso-logos img {
    max-width: 80px; /* 画像サイズを強制的に小さく */
    height: auto;
    display: block;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-wm-eng-top {
        font-size: 3.5rem; /* スマホでは透かしを小さく */
    }
    
    .jsir-product-grid {
        grid-template-columns: 1fr; /* 1列に */
    }
    
    .jsir-prod-flex {
        flex-direction: column;
    }
    .jsir-prod-img-box-wide {
        width: 100%;
    }
    
    /* サービスカードを横並びスクロールにするか、2列にするか */
    .jsir-service-grid-center {
        gap: 15px;
    }
    .jsir-service-card {
        width: 46%; /* スマホでは2列っぽく */
        padding: 25px 10px;
    }
    .jsir-service-icon img {
        height: 80px !important;
    }
}
/* ======================================================================
   TOPページ修正 (導入事例中央寄せ ＆ 事業案内アイコン拡大)
   ====================================================================== */

/* --- 1. 導入事例 (Case Study) の中央寄せ --- */
/* スライダーのリスト自体をフレックスボックスにして中央寄せ */
.jsir-case-slider-wrapper .slick-list {
    display: flex !important;
    justify-content: center !important;
    width: auto !important; /* 幅をコンテンツに合わせる */
    margin: 0 auto;         /* 全体を中央に */
}

/* スライダーのトラック（要素が並ぶ部分）も調整 */
.jsir-case-slider-wrapper .slick-track {
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* もしアイテムが左寄せのままなら、念のためこれも追加 */
.jsir-case-card-new {
    /* slickがfloatを使っている場合のリセット */
    float: none !important; 
}


/* --- 2. 事業案内 (Service) のアイコン拡大 --- */
/* 以前の指定（height: 50px）を上書きして大きくします */
.jsir-service-icon img {
    height: 85px !important; /* 50pxから85pxに拡大して文字が見えるように */
    width: auto !important;
    margin-bottom: 20px !important;
    object-fit: contain !important;
}

/* アイコンが大きくなった分、カードのバランスも微調整 */
.jsir-service-card {
    padding: 30px 15px !important; /* 横のパディングを少し狭めてスッキリと */
    width: 230px !important; /* カード幅を少し広げて余裕を持たせる */
}

/* --- スマホ対応の調整 --- */
@media (max-width: 768px) {
    /* スマホでもアイコンが大きすぎないように調整 */
    .jsir-service-icon img {
        height: 70px !important;
    }
    /* スマホでのカード幅 */
    .jsir-service-card {
        width: 46% !important; /* 2列表示を維持 */
        padding: 20px 10px !important;
    }
}
/* --- 1. 導入事例一覧へ ボタンの中央寄せ --- */
.jsir-btn-area {
    text-align: center !important; /* 強制的に中央寄せ */
    margin-top: 40px;
    width: 100%;
}
/* --- SVGアイコン用のスタイル調整 --- */
.jsir-service-circle svg.jsir-custom-icon {
    width: 3.5rem;  /* FontAwesomeのサイズに合わせる */
    height: 3.5rem;
    color: #FFFFFF; /* アイコンの色 */
    transition: transform 0.3s ease;
    display: block; /* ズレ防止 */
}

/* ホバー時の動き（FontAwesomeと同じ挙動に） */
.jsir-service-card:hover .jsir-service-circle svg.jsir-custom-icon {
    transform: scale(0.9);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-service-circle svg.jsir-custom-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}
/* ドットとして表示する場合 */
.slick-dots {
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}
.slick-dots li {
    margin: 0 5px;
}
.slick-dots li button {
    font-size: 0; /* 数字を隠す */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    border: none;
    cursor: pointer;
    padding: 0;
}
.slick-dots li.slick-active button {
    background-color: #1A237E; /* 現在のページはネイビー */
}
/* ======================================================================
   TOPページ用 会社概要＆採用ナビゲーション
   ====================================================================== */

.jsir-nav-area {
    padding: 80px 0;
    background-color: #FFFFFF; /* 背景は白ですっきり */
}

/* グリッドレイアウト（PCは2分割） */
.jsir-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* カード共通スタイル */
.jsir-nav-card {
    display: block;
    position: relative;
    height: 400px; /* 高さを揃えて迫力を出す */
    border-radius: 20px;
    text-decoration: none;
    overflow: hidden;
    color: #FFFFFF;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.jsir-nav-card:hover {
    transform: translateY(-10px); /* 浮き上がる */
    box-shadow: 0 20px 50px rgba(26, 35, 126, 0.25);
}

/* 個別カラー設定 */
.nav-company {
    /* ネイビーのグラデーション */
    background: linear-gradient(135deg, #1A237E 0%, #0D47A1 100%);
}

.nav-recruit {
    /* シアンのグラデーション */
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
}

/* 背景の巨大透かし文字 */
.jsir-nav-bg-text {
    position: absolute;
    top: -20px;
    right: -20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 6rem;
    color: #FFFFFF;
    opacity: 0.1; /* 薄く表示 */
    line-height: 1;
    pointer-events: none;
    transition: transform 0.5s ease;
}

/* ホバー時に透かし文字が動く */
.jsir-nav-card:hover .jsir-nav-bg-text {
    transform: scale(1.1) translate(-10px, 10px);
}

/* コンテンツ配置 */
.jsir-nav-content {
    position: absolute;
    bottom: 50px;
    left: 50px;
    z-index: 2;
    padding-right: 30px;
}

.jsir-nav-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 20px;
    font-family: 'Noto Sans JP', sans-serif;
}

.jsir-nav-desc {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* ボタン風リンク */
.jsir-nav-btn {
    display: inline-flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    border: 2px solid #FFFFFF;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.jsir-nav-btn i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* ホバー時のボタン変化（Company側：文字をくっきり濃く修正） */
.nav-company:hover .jsir-nav-btn {
    background-color: #FFFFFF !important;  /* 背景は真っ白 */
    color: #1A237E !important;             /* 文字は濃いネイビー（読みやすさ重視） */
    border-color: #FFFFFF !important;      /* 枠線も白 */
    font-weight: 800 !important;           /* 文字を少し太くして強調 */
}

/* Recruit側（変更なしでOKならこのまま、統一するなら以下） */
.nav-recruit:hover .jsir-nav-btn {
    background-color: #FFFFFF !important;
    color: #00BCD4 !important;             /* 文字は濃いシアン */
    border-color: #FFFFFF !important;
}

/* 矢印アイコンも文字色に合わせる */
.jsir-nav-card:hover .jsir-nav-btn i {
    transform: translateX(5px);
    color: inherit !important; /* 親の文字色を引き継ぐ */
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-nav-grid {
        grid-template-columns: 1fr; /* 1列に */
        gap: 20px;
    }

    .jsir-nav-card {
        height: 250px; /* 高さを少し抑える */
        border-radius: 12px;
    }

    .jsir-nav-bg-text {
        font-size: 3.5rem;
    }

    .jsir-nav-content {
        bottom: 30px;
        left: 30px;
    }

    .jsir-nav-title {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }

    .jsir-nav-desc {
        display: none; /* スマホでは説明文を隠してスッキリさせる（任意） */
    }
}
/* ======================================================================
   ナビゲーションカード ホバー時の修正 (背景白・文字ネイビー)
   ====================================================================== */

/* ホバー時にカードの背景を「白」にする */
.jsir-nav-card:hover {
    background: #FFFFFF !important; /* グラデーションを白で上書き */
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(26, 35, 126, 0.25);
}

/* ホバー時にタイトルと説明文を「濃いネイビー」にする */
.jsir-nav-card:hover .jsir-nav-title,
.jsir-nav-card:hover .jsir-nav-desc {
    color: #1A237E !important;
}

/* ホバー時に背景の透かし文字（COMPANY等）を薄いグレーにする */
/* （白背景に白文字だと消えてしまうため） */
.jsir-nav-card:hover .jsir-nav-bg-text {
    color: #F0F2F5 !important;
    opacity: 1 !important; /* 色を指定したので不透明度は戻す */
    transform: scale(1.1) translate(-10px, 10px);
}
/* ======================================================================
   モダンヘッダー (IT Corporate Style)
   ====================================================================== */

/* ヘッダー本体 */
.jsir-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* ヘッダーの高さ */
    z-index: 10000;
    background-color: rgba(255, 255, 255, 0.95); /* 少し透けさせる */
    backdrop-filter: blur(10px); /* すりガラス効果 */
    box-shadow: 0 2px 20px rgba(0,0,0,0.05); /* 薄い影 */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.jsir-header-container {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
}

/* ロゴ */
.jsir-logo {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.jsir-logo img {
    height: 40px; /* ロゴサイズ調整 */
    width: auto;
    vertical-align: bottom;
}

/* PCナビゲーション */
.jsir-nav {
    flex: 1;
    display: flex;
    justify-content: center; /* メニューを中央に */
}

.jsir-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px; /* メニュー間の間隔 */
}

.jsir-nav-list li a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    transition: color 0.3s;
    position: relative;
    padding: 5px 0;
}

/* 英語表記 */
.jsir-nav-list li a .en {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #1A237E; /* ネイビー */
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 4px;
    transition: color 0.3s;
}

/* 日本語表記 */
.jsir-nav-list li a .jp {
    font-size: 0.85rem;
    font-weight: 700;
    color: #666;
}

/* ホバー時のアニメーション（下線が伸びる） */
.jsir-nav-list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #00BCD4; /* シアン */
    transition: width 0.3s ease;
}

.jsir-nav-list li a:hover::after {
    width: 100%;
}

.jsir-nav-list li a:hover .en {
    color: #00BCD4;
}

/* CTAボタン（お問い合わせ） */
.jsir-header-cta {
    margin-left: 20px;
}

.jsir-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1A237E, #283593); /* ネイビーグラデ */
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(26, 35, 126, 0.2);
}

.jsir-header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(26, 35, 126, 0.3);
    background: linear-gradient(135deg, #00BCD4, #0097A7); /* ホバーでシアンに */
}

/* --- ハンバーガーメニュー (スマホ用) --- */
.jsir-hamburger {
    display: none; /* PCでは非表示 */
    width: 30px;
    height: 24px;
    cursor: pointer;
    position: relative;
    z-index: 10002;
}
.jsir-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #1A237E;
    position: absolute;
    transition: all 0.3s;
}
.jsir-hamburger span:nth-child(1) { top: 0; }
.jsir-hamburger span:nth-child(2) { top: 11px; }
.jsir-hamburger span:nth-child(3) { bottom: 0; }

/* メニュー展開時のハンバーガー変形 */
.nav-open .jsir-hamburger span:nth-child(1) { transform: rotate(45deg); top: 11px; }
.nav-open .jsir-hamburger span:nth-child(2) { opacity: 0; }
.nav-open .jsir-hamburger span:nth-child(3) { transform: rotate(-45deg); bottom: 11px; }

/* スマホ用メニュー画面 */
.jsir-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: #fff;
    z-index: 10001;
    padding: 80px 30px;
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-open .jsir-mobile-menu {
    right: 0; /* 出現 */
}

.jsir-mobile-menu a {
    text-decoration: none;
    color: #333;
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.jsir-mobile-menu .mobile-cta {
    background-color: #1A237E;
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border: none;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 900px) {
    .jsir-nav, .jsir-header-cta { display: none; } /* PCメニューを消す */
    .jsir-hamburger { display: block; } /* ハンバーガーを出す */
    .jsir-header-fixed { height: 60px; }
    .jsir-logo img { height: 30px; }
}
/* ======================================================================
   モダンヘッダー修正版 (ロゴ拡大・ドロップダウン・被り防止)
   ====================================================================== */
/* --- 2. ヘッダー本体 --- */
.jsir-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 10000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.jsir-header-container {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
}

/* --- 3. ロゴの拡大 --- */
.jsir-logo img {
    height: 55px !important; /* 40px -> 55px に拡大 */
    width: auto;
    vertical-align: middle;
}

/* --- 4. ナビゲーション & ドロップダウン --- */
.jsir-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 100%; /* 高さをヘッダーに合わせる */
}

.jsir-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
    height: 100%;
}

.jsir-nav-list > li {
    position: relative; /* ドロップダウンの基準 */
    height: 100%;
    display: flex;
    align-items: center;
}

.jsir-nav-list > li > a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    transition: color 0.3s;
    padding: 10px 0;
}

/* ドロップダウンメニュー本体 */
.jsir-dropdown-menu {
    position: absolute;
    top: 80px; /* ヘッダーの下 */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 最初は少し下に */
    background-color: #FFFFFF;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    
    /* 最初は隠す */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-top: 3px solid #00BCD4; /* シアンのアクセントライン */
}

/* ホバー時にドロップダウンを表示 */
.jsir-has-dropdown:hover .jsir-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ドロップダウン内のリンク */
.jsir-dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    transition: background 0.3s, color 0.3s;
    border-bottom: 1px solid #f5f5f5;
}

.jsir-dropdown-menu li:last-child a {
    border-bottom: none;
}

.jsir-dropdown-menu li a:hover {
    background-color: #F0F7FF;
    color: #1A237E;
    padding-left: 25px; /* 右に少し動く */
}

/* 英語・日本語表記 */
.jsir-nav-list li a .en {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #1A237E;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 4px;
}
.jsir-nav-list li a .jp {
    font-size: 0.85rem;
    font-weight: 700;
    color: #666;
}

/* --- 5. お問い合わせボタン --- */
.jsir-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1A237E, #283593);
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(26, 35, 126, 0.2);
}
.jsir-header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(26, 35, 126, 0.3);
    background: #E15A28;
    color:#FFF;
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
    /* スマホでは固定ヘッダーの高さとボディの余白を調整 */
    .jsir-header-fixed { height: 60px; }
    body { padding-top: 60px !important; }
    .jsir-logo img { height: 35px !important; }
    
    /* PCメニュー非表示 */
    .jsir-nav, .jsir-header-cta { display: none; }
    .jsir-hamburger { display: block; }
}
/* ======================================================================
   モダンフッター (Dark Navy Footer)
   ====================================================================== */

/* --- 全体設定 --- */
.jsir-footer {
    background-color: #0D1B2A; /* 非常に濃いネイビー（ほぼ黒に近い） */
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
}

/* --- 1. パンくずリスト --- */
.jsir-footer-breadcrumb {
    background-color: #1A237E; /* ヘッダーより少し明るいネイビー */
    padding: 15px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.jsir-crumbs a {
    color: #A0C4FF; /* 薄い水色 */
    text-decoration: none;
    transition: color 0.3s;
}
.jsir-crumbs a:hover { color: #FFFFFF; }
.jsir-crumbs i { margin-right: 5px; }
.jsir-crumbs span { color: #FFFFFF; margin-left: 5px; }
.jsir-crumbs a::after {
    content: '\f105'; /* FontAwesomeの矢印 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin: 0 10px;
    color: rgba(255,255,255,0.3);
}

/* --- 2. メインエリア --- */
.jsir-footer-main {
    padding: 60px 0;
}

.jsir-footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

/* 左側：ロゴ・住所 */
.jsir-footer-col-logo {
    width: 300px;
    flex-shrink: 0;
}

.jsir-f-logo img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.jsir-f-address {
    line-height: 1.8;
    color: #CCC;
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.jsir-f-banners {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jsir-f-banners img {
    max-width: 200px;
    border-radius: 4px;
    transition: opacity 0.3s;
}
.jsir-f-banners a:hover img { opacity: 0.8; }


/* 右側：サイトマップ */
.jsir-footer-col-links {
    flex: 1;
}

.jsir-f-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.jsir-f-nav-item {
    min-width: 140px;
}

/* 大項目（見出しリンク） */
.jsir-f-head {
    display: block;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #00BCD4; /* シアンの下線 */
    display: inline-block;
    transition: color 0.3s;
}
.jsir-f-head:hover { color: #00BCD4; }

/* 小項目（リスト） */
.jsir-f-nav-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jsir-f-nav-item ul li {
    margin-bottom: 10px;
}

.jsir-f-nav-item ul li a {
    color: #BBBBBB;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s;
    display: inline-block;
}

.jsir-f-nav-item ul li a:hover {
    color: #00BCD4;
    transform: translateX(5px);
}


/* --- 3. コピーライトエリア --- */
.jsir-footer-bottom {
    background-color: #000000;
    padding: 20px 0;
    text-align: center;
    font-size: 0.8rem;
    color: #666;
}

.jsir-f-sublinks {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.jsir-f-sublinks a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s;
}
.jsir-f-sublinks a:hover { color: #FFFFFF; }

.jsir-copyright {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
}


/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-footer-grid {
        flex-direction: column;
        gap: 40px;
    }
    
    .jsir-footer-col-logo {
        width: 100%;
        text-align: center;
    }
    
    .jsir-f-logo img {
        margin: 0 auto 20px;
    }
    
    .jsir-f-banners {
        align-items: center;
    }

    .jsir-f-nav-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .jsir-f-nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 10px;
    }
    
    .jsir-f-head {
        border-bottom: none;
        margin-bottom: 5px;
        display: block;
    }
    
    .jsir-f-nav-item ul {
        padding-left: 10px;
        margin-top: 5px;
    }
    
    .jsir-f-sublinks {
        /*flex-direction: column;*/
        gap: 10px;
    }
}
/* ======================================================================
   JSIRの強みページ (Strengths Page - Image Version)
   ====================================================================== */

/* (セクションやタイトルの設定は同じ) */
.jsir-strength-section {
    padding: 80px 0 100px;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.jsir-strength-lead {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
    position: relative;
    z-index: 1;
}

.jsir-strength-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.4;
    margin-bottom: 30px;
}

.jsir-strength-desc {
    font-size: 1.1rem;
    line-height: 2;
    color: #333;
}

/* グリッドレイアウト */
.jsir-strength-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* カードデザイン */
.jsir-strength-card {
    background: #FFFFFF;
    border-radius: 16px;
    /* paddingは削除し、中身で余白を作る */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid #F0F0F0;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* 画像のはみ出し防止 */
    display: flex;
    flex-direction: column;
}

.jsir-strength-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(26, 35, 126, 0.15);
    border-color: #00BCD4;
}

/* ▼▼▼ 画像エリアのスタイル ▼▼▼ */
.jsir-strength-img-box {
    width: 100%;
    height: 250px; /* 画像の高さ */
    overflow: hidden;
    position: relative;
    background-color: #eee; /* 画像がない時の背景 */
}

.jsir-strength-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミング */
    transition: transform 0.5s ease;
}

/* ホバー時に画像ズーム */
.jsir-strength-card:hover .jsir-strength-img {
    transform: scale(1.1);
}

/* 画像の下にアクセントライン */
.jsir-strength-img-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #1A237E, #00BCD4);
}
/* ▲▲▲ ▲▲▲ */

/* 背景の数字（配置調整） */
.jsir-strength-num {
    position: absolute;
    top: -20px;
    right: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 6rem;
    color: #FFFFFF; /* 画像の上に乗るので白文字に */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* 影をつけて読みやすく */
    line-height: 1;
    z-index: 2; /* 画像より手前 */
    pointer-events: none;
}

/* テキストコンテンツエリア */
.jsir-strength-content {
    padding: 30px; /* カード内部の余白 */
    flex: 1;
}

.jsir-strength-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1A237E;
    margin: 0 0 20px;
    line-height: 1.5;
    border-bottom: 3px solid #00BCD4;
    padding-bottom: 15px;
    display: inline-block;
}

.jsir-strength-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-strength-grid {
        grid-template-columns: 1fr;
    }
    
    .jsir-strength-title {
        font-size: 1.6rem;
    }
    
    .jsir-strength-img-box {
        height: 200px;
    }
    
    .jsir-strength-num {
        font-size: 4rem;
        top: -10px;
    }
    
    .jsir-strength-content {
        padding: 25px;
    }
    
    .jsir-strength-content h3 {
        font-size: 1.2rem;
    }
}
/* ======================================================================
   製品情報ページ (Products Page)
   ====================================================================== */

.jsir-products-section {
    padding: 80px 0 100px;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* リード文 */
.jsir-product-lead {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
    position: relative;
    z-index: 1;
}

.jsir-product-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.4;
    margin-bottom: 30px;
}

.jsir-product-desc {
    font-size: 1.1rem;
    line-height: 2;
    color: #333;
}

/* --- 製品アイテム（カード） --- */
.jsir-prod-item {
    display: flex;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #EAEAEA;
    margin-bottom: 60px;
    transition: transform 0.3s ease;
}

.jsir-prod-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(26, 35, 126, 0.15);
    border-color: #00BCD4;
}

/* 画像エリア */
.jsir-prod-img-area {
    width: 45%;
    position: relative;
    overflow: hidden;
}

.jsir-prod-img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jsir-prod-item:hover .jsir-prod-img-area img {
    transform: scale(1.05);
}

/* ラベル（基幹システムなど） */
.jsir-prod-label {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #00BCD4;
    color: #fff;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* --- スマホ対応：製品ラベルを右上に移動 --- */
@media screen and (max-width: 768px) {
    .jsir-prod-label {
        left: auto !important;   /* 元の「左から20px」を無効化 */
        right: 20px !important;  /* 「右から20px」に設定 */
    }
}
/* テキストコンテンツエリア */
.jsir-prod-content {
    width: 55%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jsir-prod-content h3 {
    margin-bottom: 20px;
}

.jsir-prod-content h3 .en {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.2;
}

.jsir-prod-content h3 .jp {
    display: block;
    font-size: 1.1rem;
    color: #666;
    margin-top: 5px;
    font-weight: 700;
}

.jsir-prod-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 30px;
}

/* タグ（おすすめ企業など） */
.jsir-prod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.jsir-prod-tags .tag {
    background-color: #F0F7FF;
    color: #1A237E;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 700;
    border: 1px solid #D0E0FF;
}

/* ボタン */
.jsir-prod-btn {
    text-align: left;
}

/* --- 偶数番目のアイテムを左右反転（ジグザグレイアウト） --- */
.jsir-prod-item:nth-child(even) {
    flex-direction: row-reverse;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-product-title {
        font-size: 1.6rem;
    }
    
    .jsir-prod-item, 
    .jsir-prod-item:nth-child(even) {
        flex-direction: column; /* 縦積みに */
        margin-bottom: 40px;
    }
    
    .jsir-prod-img-area {
        width: 100%;
        height: 220px;
    }
    
    .jsir-prod-content {
        width: 100%;
        padding: 30px 20px;
        box-sizing: border-box;
    }
    
    .jsir-prod-content h3 .en {
        font-size: 1.6rem;
    }
    
    .jsir-prod-btn .jsir-cta-btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}
/* ======================================================================
   製品画像のレイアウト修正（端切れ防止）
   ====================================================================== */

/* TOPページ & 製品一覧ページの画像エリア */
.jsir-prod-img-box,
.jsir-prod-img-area {
    /* 背景色を白（または薄いグレー）にして、画像サイズが合わない時の余白を埋める */
    background-color: #FFFFFF !important; 
    
    /* 枠のデザインを整える */
    border-bottom: 1px solid #eee;
}

/* 画像自体の設定 */
.jsir-prod-img-box img,
.jsir-prod-img-area img,
.jsir-prod-img {
    /* ▼▼▼ 修正：cover（切り取り）から contain（全体表示）に変更 ▼▼▼ */
    object-fit: contain !important; 
    /* ▲▲▲ ▲▲▲ */
    
    width: 100% !important;
    height: 100% !important;
    
    /* 余白ができた時に真ん中に来るようにする */
    margin: 0 auto;
    display: block;
}
/* ======================================================================
   SIR-CAS原価 ページ専用スタイル
   ====================================================================== */

/* --- Hero Section --- */
.jsir-sircas-hero {
    padding: 100px 20px;
    background: linear-gradient(135deg, #F8F8FC 0%, #FFFFFF 100%);
    text-align: center;
    position: relative;
    border-bottom: 1px solid #eee;
}

.jsir-sircas-lead .tag {
    display: inline-block;
    background-color: #00BCD4;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.jsir-sircas-lead h2 {
    font-size: 2.4rem;
    font-weight: 800;
    color: #1A237E;
    line-height: 1.4;
    margin-bottom: 30px;
}

.jsir-sircas-lead p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}

/* --- Steps Section (段階的導入) --- */
.jsir-sircas-steps {
    background-color: #FFFFFF;
}

.jsir-step-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.jsir-step-card {
    flex: 1;
    background: #F8F8FC;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    transition: transform 0.3s;
}

.jsir-step-card.highlight {
    background: #FFFFFF;
    border: 2px solid #00BCD4;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.15);
}

.jsir-step-label {
    display: inline-block;
    background: #1A237E;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

.jsir-step-icon {
    font-size: 2.5rem;
    color: #1A237E;
    margin-bottom: 15px;
}

.jsir-step-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A237E;
    margin-bottom: 15px;
}

.jsir-step-card .desc {
    font-size: 0.9rem;
    color: #666;
    text-align: left;
    line-height: 1.6;
}

.jsir-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #00BCD4;
}

/* --- Functions Section (機能紹介) --- */
.jsir-sircas-func {
    background-color: #F5F7FA;
}

.jsir-func-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.jsir-func-item {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.jsir-func-item .icon-box {
    width: 50px;
    height: 50px;
    background: #E0F7FA;
    color: #00BCD4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.jsir-func-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A237E;
    margin: 0 0 10px;
}

.jsir-func-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-sircas-lead h2 {
        font-size: 1.8rem;
    }
    
    .jsir-step-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .jsir-step-arrow {
        transform: rotate(90deg); /* 矢印を下向きに */
        margin: -15px 0;
    }
    
    .jsir-func-list {
        grid-template-columns: 1fr;
    }
}
/* ======================================================================
   SIR-CAS原価 ページ追加スタイル
   ====================================================================== */

/* --- 見出し中央寄せ (TOPページ用スタイルの流用) --- */
.jsir-sub-heading-center {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1A237E;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    width: 100%;
}
.jsir-sub-heading-center::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #00BCD4;
    margin: 10px auto 0;
}

/* --- 画像フレーム (全体像・フロー図) --- */
.jsir-img-frame {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #EAEAEA;
    text-align: center;
}
.jsir-img-frame img {
    max-width: 100%;
    height: auto;
}

/* --- 機能一覧リスト (Functions List) - レイアウト修正版 --- */
.jsir-func-grid-list {
    display: grid;
    /* PCでは4列、狭くなると自動で3列,2列,1列と減る設定 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px; /* ボックス間の隙間 */
    align-items: stretch; /* 行ごとの高さを揃える */
}

/* 不要になったクラス（もし残っていれば削除） */
/* .jsir-func-col { ... } */

.jsir-func-group {
    /* margin-bottom: 30px; <- gapで代用するので削除 */
    background: #FFFFFF;
    padding: 25px; /* 少し広めに */
    border-radius: 8px;
    border-top: 4px solid #1A237E; /* 上の線を少し太く */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 影を少し濃くして立体感を出す */
    height: 100%; /* 親グリッドの高さに合わせる */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.jsir-func-group h4 {
    font-size: 1.05rem;
    color: #1A237E;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid #F0F2F8; /* 見出しの下線を少し太く、色を薄く */
    padding-bottom: 12px;
}

.jsir-func-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* リスト部分が縦に伸びて余白を埋める */
}

.jsir-func-group ul li {
    font-size: 0.95rem;
    color: #444;
    padding-left: 18px;
    position: relative;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* リストの点（シアン） */
.jsir-func-group ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background-color: #00BCD4;
    border-radius: 50%;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-func-grid-list {
        grid-template-columns: 1fr; /* スマホでは1列に */
        gap: 20px;
    }
    .jsir-func-group {
        padding: 20px;
    }
}
/* ======================================================================
   PDCAサイクル図 (CSS再現版)
   ====================================================================== */

.jsir-pdca-wrapper {
    max-width: 900px;
    margin: 40px auto;
    position: relative;
    padding: 20px;
}

/* グリッドレイアウト（2列×2行） */
.jsir-pdca-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* 共通アイテムスタイル */
.jsir-pdca-item {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 2px solid transparent; /* 枠線用 */
    position: relative;
    z-index: 2; /* 矢印より上に */
}

/* ヘッダー部分 */
.pdca-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.pdca-step {
    font-size: 1.2rem;
    font-weight: 800;
}

.pdca-eng {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    opacity: 0.2;
}

/* 見出しとリスト */
.jsir-pdca-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.jsir-pdca-item ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.jsir-pdca-item li {
    font-size: 0.9rem;
    padding-left: 15px;
    position: relative;
    margin-bottom: 5px;
    line-height: 1.4;
}

.jsir-pdca-item li::before {
    content: '・';
    position: absolute;
    left: 0;
    font-weight: bold;
}

.pdca-note {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
}

/* 色別設定 */
/* 1. Plan (青) */
.item-plan { border-color: #0055ff; background-color: #F0F7FF; }
.item-plan .pdca-step, .item-plan h4 { color: #0055ff; }

/* 2. Do (赤) */
.item-do { border-color: #ff0044; background-color: #FFF0F4; }
.item-do .pdca-step, .item-do h4 { color: #ff0044; }

/* 3. Check (黄/オレンジ) */
.item-check { border-color: #ffaa00; background-color: #FFFAEB; }
.item-check .pdca-step, .item-check h4 { color: #ffaa00; }

/* 4. Action (緑) */
.item-action { border-color: #00aa44; background-color: #F0FFF4; }
.item-action .pdca-step, .item-action h4 { color: #00aa44; }

/* --- スマホ対応 --- */
@media (max-width: 768px) {
	.pdca-header{ 
		padding-top:20px;
	}

}
/* ハイライトボックス（改善のアクション） */
.pdca-highlight {
    background-color: #fff;
    border: 2px solid #ffff00; /* 蛍光イエローの枠 */
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    background: linear-gradient(to bottom, #ffffcc, #ffff99); /* マーカー風背景 */
    border-radius: 4px;
    margin-top: 10px;
}

/* 中央の円 (PDCAサイクル) */
.jsir-pdca-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    z-index: 3;
    border: 5px solid #fff; /* 白いフチ */
}

.pdca-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #333;
    line-height: 1;
}

.pdca-sub {
    font-size: 0.8rem;
    font-weight: 700;
    color: #666;
}

/* 矢印（背景の円環） */
.jsir-pdca-arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 15px solid #E0E0E0; /* グレーの円環 */
    border-top-color: #0055ff; /* Plan */
    border-right-color: #ff0044; /* Do */
    border-bottom-color: #ffaa00; /* Check */
    border-left-color: #00aa44; /* Action */
    z-index: 1;
    opacity: 0.3; /* 薄く表示 */
}

/* ======================================================================
   システム機能ご紹介 (Function Navigation)
   ====================================================================== */

.jsir-sircas-func-nav {
    background-color: #1A237E; /* 背景を濃いネイビーにして引き締める */
    padding: 80px 0 100px;
    color: #fff;
}

/* 透かし文字の色調整（濃い背景用） */
.jsir-sircas-func-nav .jsir-wm-eng-top {
    color: rgba(255, 255, 255, 0.05); /* 白の透明 */
}
.jsir-sircas-func-nav .jsir-wm-jp {
    color: #fff;
}
.jsir-sircas-func-nav .jsir-wm-jp::after {
    background-color: #00BCD4;
}

/* グリッドレイアウト (4列) */
.jsir-func-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0; /* 隙間なしで並べる（画像のようなデザインなら） */
    /* 隙間をあけてカードっぽくするなら gap: 20px; に変更 */
    max-width: 1100px;
    margin: 0 auto;
}

/* カード共通スタイル */
.jsir-func-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 50px 20px;
    background-color: #FFFFFF; /* 白背景 */
    color: #1A237E; /* ネイビー文字 */
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #eee; /* 薄い枠線 */
}

/* 青背景のカード (交互配置用) */
.jsir-func-nav-card.card-blue {
    background-color: #6A85B6; /* 画像に近い少し淡いネイビーブルー */
    background: linear-gradient(135deg, #6A85B6, #4A69A0);
    color: #FFFFFF;
    border: none;
}

/* アイコン */
.func-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    /* 四角い枠で囲む場合 */
    width: 80px;
    height: 80px;
    border: 2px solid currentColor; /* 文字色と同じ色の枠 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* タイトル */
.jsir-func-nav-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 20px;
    border-bottom: 2px solid currentColor;
    padding-bottom: 5px;
    display: inline-block;
}

/* 矢印ボックス */
.func-arrow {
    width: 30px;
    height: 30px;
    background-color: #DCE775; /* 黄緑色のアクセント（画像参考） */
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

/* ホバー時の動き */
.jsir-func-nav-card:hover {
    transform: translateY(-10px); /* 浮き上がる */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 1; /* 重なり順を上へ */
}

.jsir-func-nav-card:hover .func-arrow {
    transform: translateX(5px);
    background-color: #00BCD4; /* ホバー時はシアンに */
    color: #fff;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-func-nav-grid {
        grid-template-columns: 1fr 1fr; /* 2列に */
        gap: 10px;
    }
    
    .jsir-func-nav-card {
        padding: 30px 10px;
        border-radius: 8px; /* スマホでは角丸にしても可愛い */
    }
    .pdca-eng{
    	display: none;
    }
    .func-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    .jsir-func-nav-card h3 {
        font-size: 1rem;
    }
}
/* --- 機能ナビゲーション：アクティブ状態（現在のページ） --- */
.jsir-func-nav-card.active {
    background-color: #1A237E; /* 背景を濃いネイビーに */
    color: #FFFFFF; /* 文字を白に */
    border-color: #1A237E;
    pointer-events: none; /* クリック無効化 */
    box-shadow: 0 10px 30px rgba(26, 35, 126, 0.2);
    z-index: 2;
}

.jsir-func-nav-card.active .func-arrow {
    background-color: #FFFFFF;
    color: #1A237E;
    font-weight: 700;
    font-size: 0.8rem;
}
/* ======================================================================
   実際原価計算フロー図 (Actual Cost Flow)
   ====================================================================== */

.jsir-act-flow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #EAEAEA;
    overflow-x: auto;
}

/* 外部システムグループ */
.act-system-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.act-sys-box {
    background: #FFF;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    width: 200px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.act-sys-box.system-prod { border-color: #FBC02D; } /* 黄色系 */
.act-sys-box.system-acc  { border-color: #4CAF50; } /* 緑系 */

.sys-tag {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 5px;
    color: #fff;
}
.system-prod .sys-tag { background-color: #FBC02D; color: #333; }
.system-acc .sys-tag  { background-color: #4CAF50; }

.sys-content {
    padding: 15px;
    text-align: center;
}
.sys-content i {
    font-size: 2rem;
    color: #555;
    margin-bottom: 10px;
}
.sys-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 0.85rem;
}
.sys-content li::before {
    content: '・';
}

/* 矢印エリア */
.act-flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1A237E;
    font-size: 1.5rem;
    min-width: 50px;
}
.arrow-label {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 5px;
    white-space: nowrap;
}

/* 中央：SIR-CAS計算ボックス */
.act-main-box {
    background: #F0F7FF;
    border: 2px solid #1A237E;
    border-radius: 12px;
    width: 280px;
    overflow: hidden;
}

.main-header {
    background: #1A237E;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.main-body {
    padding: 20px;
}

.calc-step {
    background: #fff;
    border: 1px solid #1A237E;
    border-radius: 6px;
    padding: 10px;
    position: relative;
    text-align: center;
}
.step-num {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 24px;
    height: 24px;
    background: #00BCD4;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 24px;
}
.calc-step h4 {
    margin: 0;
    font-size: 1rem;
    color: #1A237E;
    font-weight: 700;
}
.calc-step p {
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: #666;
}

.arrow-down {
    text-align: center;
    color: #1A237E;
    margin: 5px 0;
}

/* 右側：アウトプット */
.act-output-box {
    background: linear-gradient(135deg, #1A237E, #283593);
    color: #fff;
    border-radius: 12px;
    width: 160px;
    padding: 30px 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(26, 35, 126, 0.3);
}

.out-label {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.out-icon {
    font-size: 3rem;
    margin: 10px 0 15px;
    color: #00BCD4;
}

.act-output-box h3 {
    font-size: 1.2rem;
    margin: 0 0 10px;
    font-weight: 700;
}

.out-sub {
    font-size: 0.8rem;
    color: #E0E0E0;
    margin: 0;
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
    .jsir-act-flow-wrapper {
        flex-direction: column;
    }
    
    .act-system-group {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }
    
    .act-flow-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    .act-main-box {
        width: 100%;
    }
    
    .act-output-box {
        width: 100%;
        padding: 20px;
        flex-direction: row;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
    .out-icon { margin: 0; font-size: 2.5rem; }
    .out-label { display: none; }
}
/* ======================================================================
   差異分析ページ (Variance Analysis)
   ====================================================================== */

/* --- 差異分析 概念図 (Diagram) --- */
.jsir-variance-diagram {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background-color: #FFFFFF;
    /* 図全体を少し浮かせる */
}

/* 1. 上段：計算式エリア */
.var-formula {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.formula-box {
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-width: 140px;
}

.formula-box.standard {
    background-color: #E3F2FD;
    color: #1565C0;
    border: 2px solid #1565C0;
}

.formula-box.actual {
    background-color: #FFEBEE;
    color: #C62828;
    border: 2px solid #C62828;
}

.formula-box.result {
    background: linear-gradient(135deg, #1A237E, #283593);
    color: #fff;
    border: 2px solid #1A237E;
    position: relative;
}

.formula-box.result .small {
    display: block;
    font-size: 0.75rem;
    margin-top: 5px;
    opacity: 0.9;
    font-weight: normal;
}

.formula-op {
    font-size: 1.5rem;
    color: #999;
    font-weight: 900;
}

/* 2. 下段：アクションエリア（2カラム） */
.var-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.var-action-card {
    background: #F9FAFC;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    border-top: 5px solid #ccc;
    position: relative;
    transition: transform 0.3s;
}

/* 左：価格差異（青系） */
.var-action-card.card-price {
    border-top-color: #00BCD4;
    background: linear-gradient(to bottom, #E0F7FA 0%, #FFFFFF 100%);
}
.card-price .action-icon { color: #00BCD4; }

/* 右：数量差異（オレンジ系） */
.var-action-card.card-qty {
    border-top-color: #FF9800;
    background: linear-gradient(to bottom, #FFF3E0 0%, #FFFFFF 100%);
}
.card-qty .action-icon { color: #FF9800; }


.action-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.var-action-card h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
}

.action-cause {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    min-height: 3em; /* 高さを揃える */
}

.action-arrow {
    font-size: 1.5rem;
    color: #ccc;
    margin-bottom: 20px;
}

.action-target {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 0.9rem;
    color: #333;
}

.action-target strong {
    display: block;
    font-size: 1.1rem;
    color: #1A237E;
    margin-bottom: 5px;
}

/* --- 差異一覧リスト --- */
.jsir-var-list-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.jsir-var-list-grid li {
    background: #F5F7FA;
    padding: 15px 20px;
    border-radius: 6px;
    border-left: 4px solid #1A237E;
    font-size: 0.95rem;
    line-height: 1.6;
}

.jsir-var-list-grid strong {
    color: #1A237E;
    margin-right: 10px;
    font-size: 1rem;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .var-formula {
        flex-direction: column;
        gap: 10px;
    }
    .formula-op {
        transform: rotate(90deg); /* 演算子を縦向きに */
    }
    .formula-box {
        width: 100%;
    }
    
    .var-action-grid {
        grid-template-columns: 1fr; /* 縦積みに */
    }
}
/* ======================================================================
   配賦計算ページ (Allocation Page)
   ====================================================================== */

/* --- 配賦フロー図 (Allocation Flow) --- */
.jsir-alloc-flow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #FFFFFF;
    padding: 40px 20px;
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    overflow-x: auto;
}

/* ステップボックス */
.alloc-step-box {
    background: #F8F8FC;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    width: 200px;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}

/* ハイライト（Step 3） */
.alloc-step-box.highlight {
    background: #E0F7FA;
    border-color: #00BCD4;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.2);
}

.alloc-header {
    background: #666;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 2px 0;
    border-radius: 6px 6px 0 0;
}

.alloc-step-box.highlight .alloc-header {
    background: #00BCD4;
}

.alloc-content {
    padding: 20px 10px;
}

.alloc-content i {
    font-size: 2rem;
    color: #1A237E;
    margin-bottom: 10px;
}

.alloc-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1A237E;
    margin-bottom: 5px;
}

.alloc-content p {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

/* 補助部門の流れ */
.alloc-sub-flow {
    margin-top: 10px;
    background: #fff;
    border: 1px dashed #999;
    padding: 5px;
    font-size: 0.7rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* 矢印 */
.alloc-arrow {
    color: #ccc;
    font-size: 1.5rem;
}

/* 結果ボックス */
.alloc-result-box {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A237E, #283593);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(26, 35, 126, 0.3);
}

.alloc-res-icon {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: #00BCD4;
}

.alloc-result-box h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}
.alloc-result-box p {
    font-size: 0.7rem;
    opacity: 0.8;
    margin: 0;
}

/* --- 配賦基準リスト --- */
.jsir-alloc-criteria {
    text-align: center;
}
.jsir-alloc-criteria h4 {
    font-size: 1.1rem;
    color: #1A237E;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 2px solid #00BCD4;
    padding-bottom: 5px;
}

.criteria-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.criteria-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-weight: 700;
    color: #555;
}

.criteria-item i {
    color: #00BCD4;
    font-size: 1.2rem;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-alloc-flow-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .alloc-arrow {
        transform: rotate(90deg);
    }
    
    .criteria-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .criteria-item {
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
}
/* ======================================================================
   資料スライダー (Progress Bar Style) - 修正版
   ====================================================================== */

.jsir-deck-section {
    padding: 80px 0 100px;
    background-color: #F5F7FA;
    overflow: hidden;
}

.jsir-deck-container {
    width: 100%;
    max-width: 900px; /* 幅を制限して見やすく */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* スライダー本体 */
.jsir-deck-slider {
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 12px; /* ★修正：本体の角を丸く */
    overflow: hidden;    /* ★修正：はみ出した部分（角）を隠す */
    background: #fff;
}

/* スライド画像 */
.deck-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* 画像自体の角丸は不要（親要素で切るため） */
}

/* --- 矢印ボタンのデザイン --- */
.jsir-slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background-color: rgba(26, 35, 126, 0.8); /* 半透明ネイビー */
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.jsir-slick-arrow:hover {
    background-color: #00BCD4; /* ホバーでシアン */
    transform: translateY(-50%) scale(1.1);
}

.slick-prev { left: 20px; }
.slick-next { right: 20px; }

/* 矢印が無効（最初/最後）の時 */
.slick-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* --- プログレスバー（進捗バー） --- */
/* ドット（ul.slick-dots）をバーに変身させる */
.jsir-deck-slider .slick-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: #E0E0E0; /* バーの背景色 */
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex !important; /* 横並び強制 */
    gap: 0;
}

.jsir-deck-slider .slick-dots li {
    flex: 1; /* 均等割 */
    height: 100%;
    margin: 0;
}

.jsir-deck-slider .slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    text-indent: -9999px; /* 数字を隠す */
    cursor: pointer;
    transition: background 0.3s;
}

/* アクティブなスライドまでのバーを色付け */
.jsir-deck-slider .slick-dots li.slick-active button {
    background-color: #00BCD4; /* 現在地はシアン */
}

/* ======================================================================
   mcframe ページ専用スタイル
   ====================================================================== */

/* ヒーロータグの色（mcframeグリーンに合わせる） */
.tag[style*="#008F39"] {
    background-color: #008F39 !important;
    box-shadow: 0 4px 10px rgba(0, 143, 57, 0.3);
}

/* セクション背景（JSIRの実績エリア） */
.jsir-mc-strength {
    background-color: #F0F7FF; /* 薄い青背景 */
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}

/* --- 機能アイコンの調整 --- */
.jsir-func-group h4 i {
    margin-right: 8px;
}
/* ======================================================================
   mcframe ページ専用スタイル
   ====================================================================== */

/* --- Hero画像の拡大 --- */
.jsir-mcframe-hero-img {
    text-align: center;
    margin-bottom: 30px;
}

.jsir-mcframe-hero-img img {
    /* 画面幅に合わせて大きく表示 */
    width: 100%;
    max-width: 800px; /* 最大幅を広げる */
    height: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border-radius: 12px;
}

/* --- Award画像エリア --- */
.jsir-mcframe-award-imgs {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 60px;
}

.jsir-mcframe-award-imgs img {
    max-height: 200px; /* 高さを制限して並べる */
    width: auto;
    max-width: 100%;
    transition: transform 0.3s;
}

.jsir-mcframe-award-imgs img:hover {
    transform: scale(1.05);
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-mcframe-award-imgs {
        flex-direction: column;
    }
    .jsir-mcframe-award-imgs img {
        max-height: 150px;
    }
}
@media screen and (max-width: 768px) {

    /* 1. Award受賞（数字グリッド内）を中央寄せ */
    .jsir-grid {
        display: flex !important; /* グリッドではなくフレックスにする */
        flex-direction: column;   /* 縦並び */
        align-items: center;      /* ★これでカード自体を中央寄せ */
        width: 100%;       /* グリッド自体の幅をコンテナに合わせる */
        gap: 30px;         /* カード間の隙間 */
    }
    
    .jsir-card {
        width: 100% !important;   /* 幅いっぱい（または 90%） */
        max-width: 100% !important;  /* 念のため最大幅も制限 */
        box-sizing: border-box !important; /* paddingを幅に含める設定（必須） */
        margin: 0 auto 30px;      /* 中央配置 + 下の余白 */
    }

    /* 2. 下のAward画像（盾やロゴ）を大きく表示 */
    .jsir-mcframe-award-imgs {
        flex-direction: column;   /* 縦並び */
        align-items: center;      /* 中央寄せ */
        gap: 30px;                /* 画像同士の間隔 */
    }

    .jsir-mcframe-award-imgs img {
        width: 80% !important;    /* ★画面幅の80%まで大きくする */
        max-width: 300px !important; /* PC用より大きく制限を緩和 */
        height: auto !important;  /* 比率維持 */
        max-height: none !important; /* 高さ制限を解除 */
    }
}
/* --- 事業案内ページの微調整 --- */
/* アイコンの色を少し変更したい場合など */
.jsir-service-card p {
    color: #1A237E; /* 説明文をネイビーにして落ち着かせる */
}
/* ======================================================================
   インパクト・ブランドカラースタイル
   ====================================================================== */
.jsir-footer-cta {
    background-color: #1A237E; /* ★エリア全体をメインカラーに（ロゴの青など） */
    padding: 30px 0;
    text-align: center;
    color: #fff; /* 文字色を白に */
}

.jsir-cta-box {
    max-width: 800px;
    margin: 0 auto;
}

.jsir-cta-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff; /* 白文字 */
}

.jsir-cta-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.9); /* 少し透明度のある白 */
}

/* ボタンのデザイン（背景が青なので、ボタンは白やオレンジで抜く） */
.jsir-cta-btn {
    display: inline-block;
    background-color: #fff;    /* 白ボタン */
    color: #0056b3;            /* 文字を青に */
    padding: 16px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.jsir-cta-btn:hover {
    background-color: #f0f0f0;
    color: #003d82;
    transform: translateY(-2px);
}
/* ======================================================================
   フッター上部：お問い合わせカード（画像再現デザイン）
   ====================================================================== */

/* エリア全体の余白調整 */
.jsir-cta-section {
    padding: 60px 0;
    /*background-color: #fff; *//* 背景は白（カードが浮き立つように） */
}

/* 青いカード本体 */
.jsir-cta-card {
    background-color: #00BCD4; 
    border-radius: 20px;
    padding: 50px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 40px rgba(27, 38, 120, 0.3); /* ふんわりとした青系の影 */
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* 少しリッチな光沢感を出すための装飾（右上の薄っすらした光） */
.jsir-cta-card::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

/* テキストエリア */
.jsir-cta-text-area {
    flex: 1;
    padding-right: 40px;
}

.jsir-cta-label {
    color: #00bcd4; /* シアン色 */
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    font-family: sans-serif;
}

.jsir-cta-heading {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.2;
}

.jsir-cta-desc {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* ボタンエリア */
.jsir-cta-btn-area {
    flex-shrink: 0;
}



/* スマホ対応（レスポンシブ） */
@media (max-width: 768px) {
    .jsir-cta-card {
        flex-direction: column; /* 縦並びに */
        padding: 40px 30px;
        text-align: center;
    }

    .jsir-cta-text-area {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .jsir-cta-desc br {
        display: none; /* スマホでは改行を無視 */
    }

    .jsir-cta-btn-v2 {
        width: 100%; /* ボタンを幅いっぱいに */
        padding: 16px 20px;
        box-sizing: border-box;
    }
}
/* ======================================================================
   レイアウト修正 & 新ヘッダーデザイン (修正版)
   ====================================================================== */

/* ★重要：#wrapper や body への padding-top は削除してください。
   代わりに、新デザイン固有のパーツ(.jsir-breadcrumbs-area)で位置を調整します。
*/

/* 1. パンくずリストエリア（グレーの帯） */
.jsir-breadcrumbs-area {
    background-color: #f5f5f5;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
    
    /* ▼▼▼ ここでヘッダー被りを解消します ▼▼▼ */
    /* ヘッダーの高さ(約80px)分だけ、上に隙間を空ける */
    /*margin-top: 80px; */
    /* ▲▲▲ 修正ポイント ▲▲▲ */
}

.jsir-breadcrumbs-area .jsir-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.jsir-breadcrumbs-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #666;
}

.jsir-breadcrumbs-list li:not(:last-child)::after {
    content: "\f054"; /* FontAwesome 右矢印 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin: 0 10px;
    font-size: 10px;
    opacity: 0.5;
}
/* FontAwesomeがない場合の予備 */
.jsir-breadcrumbs-list li:not(:last-child)::after {
    content: ">"; 
}

.jsir-breadcrumbs-list a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}
.jsir-breadcrumbs-list a:hover {
    color: #1A237E;
    text-decoration: underline;
}

/* 2. H1タイトルエリア（青グラデーション） */
.jsir-page-title-section {
    background: linear-gradient(135deg, #1b2678 0%, #263491 100%);
    padding: 50px 0;
    width: 100%;
    color: #fff;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.jsir-page-title-section::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -20px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    border-radius: 50%;
}

.jsir-page-title-section .jsir-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.jsir-title-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #00bdd4;
    margin: 0 0 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.jsir-title-main {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    line-height: 1.2;
    text-align: left !important;
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    /* スマホ時はヘッダーが低くなる(60px想定)ので合わせる */
    /*.jsir-breadcrumbs-area {
        margin-top: 60px;
    }*/

    .jsir-page-title-section {
        padding: 40px 0;
        margin-bottom: 40px;
    }
    .jsir-title-main {
        font-size: 28px;
    }
}
/* タイトルエリアの背景を画像で上書き */
.jsir-page-title-section {
    /* 文字を読みやすくするため、少し暗いフィルター(rgba)を重ねつつ、
       指定された画像を読み込んでいます 
    */
    background: linear-gradient(rgba(20, 30, 80, 0.6), rgba(20, 30, 80, 0.6)),
                url('/image/common/title_bg.jpg');
    
    /* 画像のサイズ調整（画面幅いっぱいに広げる） */
    background-size: cover;
    /* 画像の位置（常に真ん中を表示） */
    background-position: center;
    background-repeat: no-repeat;
    
    /* 文字色を白で強制（既存CSSで指定されていると思いますが念のため） */
    color: #fff;
}

/* お好みで：文字に少し影をつけて読みやすくする */
.jsir-title-main, .jsir-title-sub {
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* ==========================================================================
   Page Specific Styles: Solution (Stylish Version)
   ========================================================================== */

/* --------------------------------------------------
   1. タイトル背景画像
   -------------------------------------------------- */
/*.jsir-page-title-section {
    background: linear-gradient(rgba(20, 30, 80, 0.7), rgba(20, 30, 80, 0.7)),
                url('../image/common/title_bg_solution.jpg');
    background-size: cover;
    background-position: center;
}*/

/* --------------------------------------------------
   2. ソリューションナビゲーション（ボタン）
   -------------------------------------------------- */
.jsir-sol-nav-section {
    background-color: #f0f2f5;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}
.jsir-sol-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.jsir-sol-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    padding: 15px;
    text-align: center;
    background: #fff;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.jsir-sol-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-color: #1A237E;
    color: #1A237E;
}
.jsir-sol-nav a.active {
    background: #1A237E;
    color: #fff;
    border-color: #1A237E;
    pointer-events: none;
}

/* --------------------------------------------------
   3. 製品紹介エリア（スタイリッシュレイアウト）
   -------------------------------------------------- */
.jsir-products-section {
    padding: 100px 0; /* 上下の余白を広げてゆったりと */
    background-color: #f8f9fa;
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px); /* 薄いドット柄背景を追加 */
    background-size: 20px 20px;
}

/* レイアウト枠 */
.jsir-pkg-layout {
    display: flex;
    align-items: center; /* ★重要：垂直方向の中央揃えで安定感を出す */
    gap: 80px;           /* 画像と文章の間隔を広めに */
    max-width: 1140px;
    margin: 0 auto;
}

/* 左カラム：画像エリア */
.jsir-pkg-image-col {
    width: 45%; /* 画像の比率を少し大きく */
    position: relative;
}
/* 画像に立体感のあるシャドウを追加 */
.jsir-pkg-image-col img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* 角丸を少し大きく */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* 濃く広い影で浮かせる */
    transition: transform 0.3s ease;
}
.jsir-pkg-image-col img:hover {
    transform: scale(1.02); /* ホバーで少し拡大 */
}

/* 右カラム：テキストエリア */
.jsir-pkg-text-col {
    width: 55%;
    /* 背景色をなくし、背景のドット柄となじませることで、
       「画像」対「テキストブロック」の対比を強調 */
    padding: 20px 0; 
}

/* 個別の製品説明ブロック */
.jsir-pkg-item {
    margin-bottom: 30px;
}

/* タイトルとラベルのヘッダー */
.pkg-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

/* タイトル（英語を強調） */
.pkg-title {
    font-size: 2.4rem; /* サイズを大きく */
    font-weight: 800;  /* より太く */
    color: #1A237E;    /* メインカラーに変更して強調 */
    line-height: 1;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* よりモダンなフォント指定 */
    letter-spacing: -0.02em;
}

/* ラベル */
.pkg-sub {
    font-size: 0.85rem;
    background-color: #1A237E;
    color: #fff;
    padding: 5px 14px;
    border-radius: 50px; /* 完全な丸みに変更 */
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 説明文 */
.pkg-desc {
    font-size: 1rem; /* 少し大きく読みやすく */
    line-height: 1.9;
    color: #555;
    margin-bottom: 25px;
}

/* スタイリッシュな区切り線 */
.pkg-divider-styled {
    height: 1px;
    background: transparent;
    border-bottom: 2px dashed #ccc; /* 点線に変更 */
    margin: 40px 0;
    opacity: 0.6;
}

/* タグ */
.pkg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pkg-tags .tag {
    background: #fff; /* タグの背景を白にして際立たせる */
    color: #555;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #e0e0e0; /* 薄い枠線を追加 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* --------------------------------------------------
   スマホ対応 (768px以下)
   -------------------------------------------------- */
@media (max-width: 768px) {
    .jsir-products-section {
        padding: 60px 0;
    }
    .jsir-sol-nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .jsir-sol-nav a {
        width: 100%;
        max-width: 400px;
    }
	.jsir-title {
        font-size: 2rem !important; /* 3rem -> 2rem (約32px) に縮小 */
        word-wrap: break-word;      /* 万が一はみ出る場合は改行 */
    }
    /* メインレイアウトを縦並びに */
    .jsir-pkg-layout {
        flex-direction: column;
        gap: 40px;
    }
    .jsir-pkg-image-col, 
    .jsir-pkg-text-col {
        width: 100%;
    }
    
    .jsir-pkg-image-col img {
        box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* スマホでは影を少し抑える */
    }
    
    .pkg-title {
        font-size: 2rem;
    }
}
/* ==========================================================================
   Page Specific Styles: Case Study
   ========================================================================== */
/* --------------------------------------------------
   2. 注目事例セクション (Featured Cases)
   -------------------------------------------------- */
.jsir-case-section {
    padding: 100px 0;
    background-color: #fff;
}

.jsir-case-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

/* 事例カード */
.jsir-case-card {
    display: flex;
    flex-direction: column;
    width: 360px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #333;
    position: relative;
    border: 1px solid #eee;
}

.jsir-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: #cce5ff;
}

/* 画像エリアの共通設定 */
.jsir-case-img {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa; /* 薄いグレー背景 */
    display: flex;             /* 中身を中央寄せ */
    align-items: center;
    justify-content: center;
}

/* 通常の写真（coverモード：枠いっぱいに広げる） */
.jsir-case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* ▼▼▼ 修正箇所：ロゴ用（containモード：サイズを制限して中央配置） ▼▼▼ */
.jsir-case-img img.contain-mode {
    width: auto;        /* 幅の強制を解除 */
    height: auto;       /* 高さの強制を解除 */
    max-width: 80%;     /* 枠の80%まで */
    max-height: 80%;    /* 高さも80%まで */
    object-fit: contain;
    padding: 0;         /* paddingは削除（flexで中央に来るため） */
}

.jsir-case-card:hover .jsir-case-img img {
    transform: scale(1.05);
}

/* ラベル */
.jsir-case-tags {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.jsir-case-tag {
    background: rgba(26, 35, 126, 0.95);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.jsir-case-tag.product {
    background: #00897B;
}

/* テキストエリア */
.jsir-case-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.jsir-case-client {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #1A237E;
    line-height: 1.4;
}

.jsir-case-title {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
    flex-grow: 1;
}

.jsir-case-link {
    font-size: 0.9rem;
    color: #00897B;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.jsir-case-card:hover .jsir-case-link {
    color: #00695c;
    text-decoration: underline;
}

/* --------------------------------------------------
   3. 実績一覧リスト (Project List)
   -------------------------------------------------- */
.jsir-list-section {
    padding: 80px 0 100px;
    background-color: #f8f9fa;
}

/* 業種ごとのブロック */
.jsir-list-group {
    margin-bottom: 60px;
}

/* 業種タイトル */
.jsir-list-heading {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    padding-left: 15px;
    border-left: 6px solid #1A237E;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* テーブルデザイン */
.jsir-list-table-wrapper {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}

.jsir-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.jsir-list-table th, 
.jsir-list-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.jsir-list-table th {
    background-color: #1A237E;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
}

.jsir-list-table tr:hover {
    background-color: #f0f7ff;
}

/* ステータスアイコン */
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #eee; /* なし（-）の場合は薄いグレー */
    margin: 0 auto;
}
.status-dot.active {
    background-color: #00897B; /* あり（●）の場合は緑 */
    box-shadow: 0 0 5px rgba(0, 137, 123, 0.5);
}

/* 中央寄せ用クラス */
.text-center {
    text-align: center !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-case-card {
        width: 100%;
        max-width: 400px;
    }
    
    .jsir-list-table-wrapper {
        overflow-x: auto;
    }
    .jsir-list-table th, 
    .jsir-list-table td {
        padding: 12px 10px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    /* 種別とフェーズだけは改行許可して幅を持たせる */
    .jsir-list-table td:first-child {
        white-space: normal;
        min-width: 140px;
    }
    .jsir-list-table td:last-child {
        white-space: normal;
        min-width: 180px;
    }
}
/* --------------------------------------------------
   詳細ページのメインエリア
   -------------------------------------------------- */
.jsir-detail-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 20px 100px;
}

/* クライアントヘッダー */
.jsir-client-header {
    margin-bottom: 60px;
    border-bottom: 1px solid #eee;
    padding-bottom: 40px;
}

.jsir-client-badge {
    display: inline-block;
    background-color: #0071bc; /* 製品カラー */
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 15px;
}

.jsir-client-name {
    font-size: 2rem;
    font-weight: bold;
    color: #1A237E;
    margin-bottom: 15px;
    line-height: 1.3;
}

.jsir-client-catch {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    line-height: 1.6;
}

/* --------------------------------------------------
   メイン画像 & 概要
   -------------------------------------------------- */
.jsir-detail-hero-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 50px;
}

/* セクション共通 */
.jsir-detail-section {
    margin-bottom: 80px;
}

.jsir-detail-h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    border-left: 6px solid #1A237E;
    padding-left: 15px;
    margin-bottom: 30px;
}

.jsir-detail-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/* --------------------------------------------------
   導入効果（Before/After風リスト）
   -------------------------------------------------- */
.jsir-effect-box {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 40px;
    border: 1px solid #eee;
}

.jsir-effect-list {
    list-style: none;
    padding: 0;
}

.jsir-effect-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 1.05rem;
    font-weight: bold;
    color: #333;
    line-height: 1.6;
}

.jsir-effect-item:last-child {
    margin-bottom: 0;
}

.jsir-effect-item::before {
    content: '\f00c'; /* FontAwesome check icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #00897B; /* チェックマークの色 */
}

/* --------------------------------------------------
   企業概要テーブル
   -------------------------------------------------- */
.jsir-company-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.jsir-company-table th,
.jsir-company-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.jsir-company-table th {
    width: 30%;
    background-color: #f0f2f5;
    font-weight: bold;
    color: #333;
}

/* ページ下部リンク */
.jsir-back-link {
    text-align: center;
    margin-top: 60px;
}

.jsir-btn-outline {
    display: inline-block;
    padding: 12px 40px;
    border: 2px solid #1A237E;
    color: #1A237E;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s;
}

.jsir-btn-outline:hover {
    background-color: #1A237E;
    color: #fff;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .jsir-detail-container {
        padding: 40px 20px 60px;
    }
    .jsir-client-name {
        font-size: 1.5rem;
    }
    .jsir-detail-h2 {
        font-size: 1.3rem;
    }
    .jsir-company-table th,
    .jsir-company-table td {
        display: block;
        width: 100%;
    }
    .jsir-company-table th {
        background: none;
        padding-bottom: 5px;
        color: #1A237E;
    }
    .jsir-company-table td {
        padding-top: 0;
        border-bottom: 1px solid #eee;
    }
}
/* --------------------------------------------------
   ▼▼▼ 今回の追加スタイル ▼▼▼
   -------------------------------------------------- */

/* トップ画像（ロゴ用調整） */
/* contain-mode クラスが付いている場合、サイズを制限して中央寄せ */
.jsir-detail-hero-img.contain-mode {
    width: auto;        /* 幅の強制を解除 */
    height: auto;       /* 高さの強制を解除 */
    max-width: 80%;     /* 枠の80%まで */
    max-height: 400px;  /* 高すぎるのも防ぐ */
    display: block;
    margin: 0 auto 50px; /* 中央寄せ */
    object-fit: contain;
    box-shadow: none;    /* ロゴの場合は影をなくす（お好みで） */
}

/* 導入製品セクションのロゴ */
.jsir-product-logo {
    max-width: 200px;   /* 適切なサイズに制限 */
    height: auto;
    margin-bottom: 20px;
    display: block;
}

/* 導入効果（Before/After） */
.jsir-ba-container {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.jsir-ba-box {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    position: relative;
}

/* Before/After ラベル */
.jsir-ba-label {
    position: absolute;
    top: -15px;
    left: 30px;
    background: #555;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 20px;
}
.jsir-ba-label.after {
    background: #00897B; /* Afterは緑色 */
}

/* Before/After リスト */
.jsir-ba-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.jsir-ba-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    line-height: 1.6;
    color: #555;
}
.jsir-ba-list li:last-child {
    margin-bottom: 0;
}

/* アイコン（×と〇） */
.jsir-ba-box.before .jsir-ba-list li::before {
    content: '\f00d'; /* FontAwesome xmark */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    color: #e74c3c; /* 赤色 */
}
.jsir-ba-box.after .jsir-ba-list li::before {
    content: '\f00c'; /* FontAwesome check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    color: #00897B; /* 緑色 */
}

/* スマホ対応（Before/Afterを縦並びに） */
@media (max-width: 768px) {
    .jsir-ba-container {
        flex-direction: column;
        gap: 40px;
    }
}
/* ======================================================================
   【重要】レスポンシブ崩れ防止の修正コード（決定版）
   画面幅が1024px以下の時（タブレットや小さいPC含む）に、
   強制的に「幅960px固定」を解除して、画面幅いっぱいに合わせる設定
   ====================================================================== */
@media screen and (max-width: 1024px) {

    /* 1. ページ全体の横幅制限を解除し、横スクロールを防止 */
    /*html, body, #wrapper, #main {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important; /* 横へのはみ出しを隠す */
    }:/

    /* 2. ヘッダーやメインエリアの「960px固定」を解除 */
    /*.main-head,
    .main-head-bg {
        width: 100% !important;
        min-width: 0 !important;
        /* 余白調整：画面端に張り付かないように */
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }*/

    /* 3. 幅指定クラス（.w960など）をすべて画面幅に合わせてリセット */
    /*.w1024, .w1012, .w960, .w800, .w680, .w630, .w610, .w570 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* コンテンツが端に張り付かないように左右に余白を入れる */
        padding-left: 20px !important;  
        padding-right: 20px !important; 
    }*/

    /* 4. ヘッダー内テキストの左余白が広すぎるのを調整 */
    /*.main-head-bg h1,
    .main-head-bg span {
        padding-left: 20px !important;
    }*/

    /* 5. 社長メッセージ等のコンテナ幅も画面に合わせる */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    
    /* 6. 画像がはみ出さないように調整 */
    /*img {
        max-width: 100% !important;
        height: auto !important;
    }*/
}
/* ----- 企業情報ページのボタンレイアウト専用スタイル ----- */

/* company-page-menuの中の.rowだけに適用 */
.company-page-menu .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* company-page-menuの中の.col-1_3だけに適用 */
.company-page-menu .row .col-1_3 {
  flex: 1 1 calc(50% - 10px);
  width: calc(50% - 10px);
  margin-bottom: 0;
}

/* company-page-menuの中の.btn-activeだけに適用 */
.company-page-menu .row .btn-active a {
  background-color: #004488;
  color: #ffffff;
  border-color: #004488;
}
/* ======================================================================
   【重要】レスポンシブ崩れ防止の修正コード（決定版・余白ゼロ化）
   画面幅が1024px以下の時（タブレットや小さいPC含む）に、
   強制的に固定幅と余白を解除して、画面幅いっぱいに合わせる設定
   ====================================================================== */
@media screen and (max-width: 1024px) {

    /* 1. ページ全体の横幅制限と余白を完全解除 */
    html, body, #wrapper, #main {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        /* ここが修正点：左右のパディングも強制的に0にする */
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important; /* 横へのはみ出しを隠す */
    }

    /* 2. ヘッダーやメインエリアの「960px固定」を解除 */
    .main-head,
    .main-head-bg {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. 幅指定クラス（w960など）をすべて画面幅に合わせてリセット */
    .w1024, .w1012, .w960, .w800, .w680, .w630, .w610, .w570, .container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* コンテンツ内の文章は端に張り付かないように余白を入れる */
        padding-left: 15px !important;  
        padding-right: 15px !important; 
    }

    /* 4. ヘッダー内テキストの左余白が広すぎるのを調整 */
    .main-head-bg h1,
    .main-head-bg span {
        padding-left: 20px !important;
    }
    
    /* 5. 画像がはみ出さないように調整（ロゴは固定サイズ維持） */
    img {
        max-width: 100% !important;
        /* height: auto !important; ← ロゴ巨大化防止のため削除 */
    }

    /* 6. ロゴ画像のサイズを明示的に指定（崩れ防止） */
    #logo img, .jsir-logo img {
        height: 40px !important; /* スマホ・タブレット時のロゴ高さ */
        width: auto !important;
    }
    
    /* 7. すべての要素の幅計算を「枠線を含める」モードに統一（ズレ防止の強力な保険） */
    * {
        box-sizing: border-box;
    }
}
/* ======================================================================
   TOPページ＆フッター スマホ表示修正パッチ (最終調整版)
   ====================================================================== */

@media screen and (max-width: 768px) {

    /* --- 1. TOPページスライダーの左右余白（padding: 0 50px）を強制削除 --- */
    /* JSが付けるインラインスタイルを上書きして、画面幅いっぱいに広げます */
    .banner-slider .slick-list {
        padding: 0 !important;
    }

    /* 画像の高さを固定して、ガタつきや間延びを防ぐ */
    .banner-slider .item img {
        width: 100% !important;
        height: 250px !important; /* スマホで見やすい高さに固定 */
        object-fit: cover !important; /* トリミングして枠いっぱいにする */
    }


    /* --- 2. 導入事例 (Case Study) の縦並び＆画像修正 --- */
    
    /* スライダーを強制的に解除し、縦並びのブロックに変更 */
    .jsir-case-slider-wrapper .slick-track {
        display: block !important;
        width: 100% !important;
        transform: none !important; /* 横移動を無効化 */
    }

    /* 各事例カードを縦に並べる */
    .jsir-case-slider-wrapper .case-item,
    .jsir-case-card-new {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 30px 0 !important; /* 下に余白 */
        opacity: 1 !important; /* 隠れているスライドも全て表示 */
        height: auto !important;
    }

    /* 画像が縦長になるのを防ぐ（高さ固定＆トリミング） */
    .jsir-case-thumb {
        height: 200px !important; 
        width: 100% !important;
    }
    
    .jsir-case-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* --- 3. フッター ISOロゴエリアのレイアウト修正 --- */
    
    /* 全体を縦積みに変更 */
    .jsir-policy-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* ロゴ群を横並びにして中央寄せ */
    .jsir-iso-logos {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    /* 各ロゴのサイズ調整 */
    .jsir-iso-logos img {
        width: 80px !important;
        height: auto !important;
    }

    /* テキストエリアも中央寄せ */
    .jsir-policy-content {
        width: 100% !important;
        text-align: center !important;
    }
    
    .jsir-policy-links {
        justify-content: center !important;
    }
}
/* ======================================================================
   Page Specific Styles: Site Map
   ====================================================================== */
/* --------------------------------------------------
   2. サイトマップ コンテナ
   -------------------------------------------------- */
.jsir-sitemap-section {
    padding: 80px 0 100px;
    background-color: #f8f9fa; /* 薄いグレー背景 */
}

/* グリッドレイアウト（PCは3列 -> 2列 -> スマホ1列） */
.jsir-sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* 各セクションのカード */
.jsir-sitemap-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-top: 4px solid #1A237E; /* 上にアクセントライン */
    transition: transform 0.3s ease;
}

.jsir-sitemap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(26, 35, 126, 0.1);
}

/* セクション見出し */
.jsir-sitemap-heading {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1A237E;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.jsir-sitemap-heading i {
    color: #00BCD4; /* アイコンはシアン */
    font-size: 1.1rem;
}

/* リンク画像のアイコン（トップページへのリンクなど） */
.jsir-sitemap-home-link {
    display: block;
    background-color: #1A237E;
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s;
    margin-bottom: 30px;
}
.jsir-sitemap-home-link:hover {
    background-color: #00BCD4;
}

/* リンクのリストスタイル */
.jsir-sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jsir-sitemap-list li {
    margin-bottom: 12px;
    position: relative;
}

.jsir-sitemap-list a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s, padding-left 0.3s;
    display: block;
    position: relative;
    padding-left: 15px; /* アイコン分のスペース */
}

/* リストの頭のアイコン（矢印） */
.jsir-sitemap-list a::before {
    content: '\f054'; /* FontAwesome right angle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 0.7rem;
    color: #ccc;
    transition: color 0.3s;
}

/* ホバー時の挙動 */
.jsir-sitemap-list a:hover {
    color: #00BCD4;
    padding-left: 20px; /* 右に少し動く */
}
.jsir-sitemap-list a:hover::before {
    color: #00BCD4;
}

/* 第2階層（サブメニュー）のインデント */
.jsir-sitemap-sub {
    list-style: none;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 2px solid #f0f0f0;
}

.jsir-sitemap-sub li {
    margin-bottom: 8px;
}

.jsir-sitemap-sub a {
    font-size: 0.9rem;
    color: #666;
}

/* 外部リンクアイコン */
.fa-external-link-alt {
    font-size: 0.8rem;
    margin-left: 5px;
    opacity: 0.6;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .jsir-sitemap-grid {
        grid-template-columns: 1fr; /* 1列に */
        gap: 20px;
    }
    .jsir-sitemap-section {
        padding: 60px 20px;
    }
}
/* ======================================================================
   導入事例テーブルのスマホ表示崩れ修正（カード型レイアウトへの変換）
   ====================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. テーブルの構造をブロック崩し（表組みを解除） */
    .jsir-list-table, 
    .jsir-list-table tbody, 
    .jsir-list-table tr, 
    .jsir-list-table td {
        display: block !important;
        width: 100% !important;
    }

    /* 2. ヘッダー行（種別、販売...）を非表示にする */
    .jsir-list-table thead {
        display: none !important;
    }

    /* 3. ラッパーの枠線等をリセット */
    .jsir-list-table-wrapper {
        border: none !important;
        background: transparent !important;
        overflow: visible !important; /* スクロールさせない */
    }

    /* 4. 各行を「カード」としてデザイン */
    .jsir-list-table tr {
        background: #fff;
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border: 1px solid #EAEAEA;
    }

    /* 5. 各セルのスタイル調整 */
    .jsir-list-table td {
        padding: 5px 0 !important;
        border: none !important;
        text-align: left !important;
        font-size: 0.9rem !important;
        min-width: 0 !important;
        white-space: normal !important; /* 文字の折り返しを許可 */
    }

    /* --- 1列目（種別）：見出しとして強調 --- */
    .jsir-list-table td:first-child {
        font-size: 1.1rem !important;
        font-weight: 800;
        color: #1A237E;
        margin-bottom: 10px;
        border-bottom: 2px solid #00BCD4 !important;
        padding-bottom: 10px !important;
    }

    /* --- 2〜5列目（丸印）：横並びにする --- */
    .jsir-list-table td:nth-child(2),
    .jsir-list-table td:nth-child(3),
    .jsir-list-table td:nth-child(4),
    .jsir-list-table td:nth-child(5) {
        display: inline-block !important; /* 横に並べる */
        width: auto !important;
        margin-right: 15px;
        color: #555;
        font-size: 0.8rem !important;
    }

    /* 疑似要素でラベル（項目名）を追加 */
    .jsir-list-table td:nth-child(2)::before { content: '販売: '; font-weight: bold; }
    .jsir-list-table td:nth-child(3)::before { content: '生産: '; font-weight: bold; }
    .jsir-list-table td:nth-child(4)::before { content: '原価: '; font-weight: bold; }
    .jsir-list-table td:nth-child(5)::before { content: '保守: '; font-weight: bold; }

    /* --- 6列目（担当フェーズ）：下に配置 --- */
    .jsir-list-table td:last-child {
        margin-top: 10px;
        padding-top: 10px !important;
        border-top: 1px dashed #eee !important;
        line-height: 1.6;
    }
    .jsir-list-table td:last-child::before {
        content: '担当フェーズ：';
        display: block;
        font-weight: 700;
        color: #1A237E;
        font-size: 0.8rem;
        margin-bottom: 5px;
    }
}
/* --- 個人情報同意エリア --- */
.privacy-agreement-area {
    text-align: center;
    margin: 40px 0;
    padding: 30px 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}

.privacy-note {
    font-size: 1rem;
    margin-bottom: 20px;
}

/* リンクのデザイン */
.privacy-link {
    color: #1A237E; /* ネイビー */
    font-weight: 700;
    text-decoration: underline;
    margin: 0 5px;
    transition: color 0.3s;
}

.privacy-link:hover {
    color: #00BCD4; /* ホバー時はシアン */
    text-decoration: none;
}

.privacy-link i {
    font-size: 0.8em;
    margin-left: 3px;
}

/* チェックボックスのデザイン調整 */
.agreement-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.agreement-checkbox input[type="checkbox"] {
    transform: scale(1.5); /* チェックボックスを少し大きく */
    cursor: pointer;
}

.agreement-checkbox label {
    cursor: pointer;
}
/* エラーメッセージのスタイル */
.error-text {
    color: #ff0000;       /* 赤文字 */
    font-size: 0.9rem;    /* 少し小さく */
    font-weight: bold;    /* 太字 */
    margin-top: 5px;
    display: block;
}

/* 入力欄自体を赤枠にする場合（お好みで） */
input.is-error {
    background-color: #ffe6e6;
    border: 1px solid #ff0000;
}
/* エラー時の枠線（ラジオボタンなどを囲むdiv用） */
.is-error-box {
    border: 1px solid #ff0000;
    background-color: #fff0f0;
    padding: 10px;
    border-radius: 4px;
}
/* --- パンくずリストの隙間調整（スマホ） --- */
@media screen and (max-width: 900px) {
    .jsir-breadcrumbs-area {
        margin-top: 0 !important;      /* 不要なマージンを削除 */
    }
}
/* ============================================
   外部リンク警告モーダル (全ページ共通)
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999; /* ヘッダーより上に来るように大きく */
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-overlay.is-visible {
    display: flex;
    opacity: 1;
}

.modal-box {
    background: #fff;
    width: 90%;
    max-width: 500px;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s;
}

.modal-overlay.is-visible .modal-box {
    transform: translateY(0);
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A237E;
    margin-bottom: 15px;
}

.modal-text {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.modal-url {
    display: block;
    background: #f4f7fc;
    padding: 10px;
    font-size: 0.85rem;
    color: #555;
    word-break: break-all;
    margin-bottom: 30px;
    border-radius: 4px;
}

.modal-btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.modal-btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}

.btn-cancel {
    background: #eee;
    color: #333;
}
.btn-cancel:hover { background: #ddd; }

.btn-proceed {
    background: #00BCD4;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-proceed:hover {
    background: #00acc1;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3);
}
/* ============================================
   共通ページヘッダー (画像右・文字左)
   ============================================ */
.jsir-new-page-header {
    display: flex;
    align-items: stretch; /* 高さを揃える */
    background-color: #fff;
    width: 100%;
    height: 300px; /* PCでの高さ固定 */
    border-bottom: 1px solid #eee;
    /* ヘッダーが固定の場合は、その分マージンを開ける必要があります */
    margin-top: 110px;
    padding-bottom: 30px;
    overflow: hidden;
}

/* 左側：テキストエリア */
.jsir-header-text-area {
    width: 40%; /* 左側4割 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10%; /* 左端からの余白 */
    box-sizing: border-box;
    background-color: #fff;
}

/* 英語タイトル (薄い文字) */
.jsir-header-en {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #00BCD4; /* シアン */
    margin-bottom: 15px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* 日本語タイトル (太いシアン文字) */
.jsir-header-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.05em;
    margin: 0;
}

/* 右側：画像エリア */
.jsir-header-img-area {
    width: 60%; /* 右側6割 */
    position: relative;
    overflow: hidden;
}

.jsir-header-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミング */
    object-position: center;
    display: block;
}

/* --- スマホ対応 (768px以下) --- */
@media (max-width: 768px) {
    .jsir-new-page-header {
        flex-direction: column-reverse; /* 画像を上に、文字を下に */
        height: auto; /* 高さは自動 */
        margin-top: 60px; /* スマホのヘッダー高さに合わせる */
    }

    .jsir-header-text-area {
        width: 100%;
        padding: 40px 20px; /* 上下左右に余白 */
        text-align: center; /* 中央揃え */
        padding-left: 20px; /* 左余白リセット */
    }

    .jsir-header-en {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .jsir-header-img-area {
        width: 100%;
        height: 200px; /* スマホでの画像の高さ */
    }
}
.message-content {
	margin-top: 80px;
}
/* ============================================
   画像保存防止（スマホ長押しメニュー禁止）
   ============================================ */
img {
    -webkit-touch-callout: none; /* iOS長押しメニュー無効 */
    -webkit-user-select: none;   /* 選択不可 */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto; /* クリック（リンク）は有効のままにする */
}
/* ============================================
   共通ヘッダーのアニメーション設定
   ============================================ */

/* 1. アニメーションの定義（動きのルール） */
@keyframes revealRight {
    0% { clip-path: inset(0 100% 0 0); } /* 最初は右側が隠れている */
    100% { clip-path: inset(0 0 0 0); }    /* 最後は全部見える */
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 2. 画像エリアへの適用（左から右へワイプ） */
.jsir-header-img-area {
    /* 初期状態：右側を隠す */
    clip-path: inset(0 100% 0 0);
    /* 1.2秒かけて出現させる */
    animation: revealRight 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* 3. テキストへの適用（下からふわっと） */
.jsir-header-en,
.jsir-header-jp {
    opacity: 0; /* 最初は透明 */
    transform: translateY(20px); /* 少し下に配置 */
}

/* 英語タイトル：0.5秒遅れで開始 */
.jsir-header-en {
    animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

/* 日本語タイトル：0.7秒遅れで開始 */
.jsir-header-jp {
    animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

/* ▼▼▼ 追加：スクロール連動フェードイン用のクラス ▼▼▼ */
.fade-up-target {
    opacity: 0;
    transform: translateY(30px); /* 初期位置は少し下 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up-target.is-visible {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻る */
}
/* ============================================
  個人情報保護方針、特定個人情報保護方針、情報セキュリティ保護方針の見出し下げる
   ============================================ */

.main-head h1 {
    margin-top: 50px;
}