/* style.css */

/* 基本的なリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
    /* 修正: overflow-x: hidden を削除またはコメントアウト */
    overflow-x: hidden !important;
    width: 100%; /* 幅は100%に固定 */
}

.mobile-break {
    display: none; 
}

/* カスタムプロパティ (色の定義) */
:root {
    --main-orange: #f8761f; /* ボタンや強調色に使用されている鮮やかなオレンジ */
    --light-orange: #ff9966;
    --text-dark: #333;
    --background-light: #f4f4f4;
}

/* 全体のコンテナ */
.container {
    width: 90%;
    max-width: 1200px; /* PC版の最大幅を想定 */
    margin: 0 auto;
    padding: 20px 0;
}

/* 共通の見出しスタイル */
h2 {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

/* ============================ */
/* 1. ヘッダーのスタイル */
/* ============================ */

header {
    background-color: #cad8ef;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* PC版ヘッダーのスタイル（デフォルトで表示） */
.pc-header {
    display: flex;
    /* ★ 修正: flex-start に戻す (デフォルト) */
    justify-content: flex-start; 
    align-items: center;
    /* ロゴを左端に寄せ、PCコンテンツを中央寄せにするためのコンテナ設定 */
    width: 100%; 
    /* ★ 修正: 不要な padding を削除 */
    padding: 0 60px;
}

.pc-header .logo { 
    /* ロゴ画像の移動量と同じ幅を設定 */
    width: 100px;
    /* 縮小されないようにする */
    flex-shrink: 0;
}

.pc-header .logo-img {
    /* transformが効くように position を設定 */
    position: relative; 
    /* 左に 40px 移動 */
    height: auto; 
    display: block;
}

.pc-header-content {
    display: flex;
    align-items: center;
    gap: 0; /* ナビとボタンの間隔 */
    margin-left: auto; /* ★ 追加：全体を右側へ寄せる */
}

/* PC版ナビゲーションのスタイル */
.pc-nav {
    /* ボタンとの間に適切なマージンを設定 */
    margin-right: 30px; 
}

.pc-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.pc-nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 1.08rem;
    font-weight: 900;
    padding: 0px 0 15px 0;

    /* ★ 修正/追加: アニメーションをスムーズにする transition を追加 ★ */
    transition: transform 0.2s ease-out, color 0.2s; 
    
    /* ★ 追加: transform が効くように inline-block を設定 ★ */
    display: inline-block;
}

.pc-nav a:hover {
    /* 1. 1.1倍に拡大 */
    transform: scale(1.1); 
    
    /* 2. (任意) 文字色をメインカラーに変更して強調 */
    color: var(--main-orange); 
    
    /* 3. マウスカーソルをポインターに変更 */
    cursor: pointer; 
}

/* モバイル版ヘッダーのスタイル（デフォルトで非表示） */
.mobile-header {
    display: none; /* ← PC版では非表示 */
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; /* モバイルの左右パディング */
    width: 100%;
    flex-wrap: nowrap;
    min-width: 0; /* Flexアイテムの最小幅をオーバーライド */
}

.mobile-nav{
    display: none;
}

.contact-button-header {
    background-color: var(--main-orange); /* オレンジ背景 (既存) */
    color: #fff; /* 白文字 (既存) */
    text-decoration: none; /* 既存のアンダーラインを削除 */
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold; /* 文字を太く (既存/維持) */
    transition: background-color 0.3s;
    display: inline-block; /* border-bottomを正しく機能させるために追加 */
    margin-left: auto; /* ナビとの間に適切な間隔を空ける */
}

.menu-toggle {
    /* デフォルトのブラウザスタイルをリセット */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1010; /* モバイルヘッダー内で最前面に */
    display: block; /* モバイルでの表示を保証 */
    width: 40px; /* アイコンの幅 */
    height: 40px; /* アイコンの高さ */
}

/* ハンバーガーアイコン自体 */
.hamburger {
    display: block;
    position: relative;
    width: 30px; /* アイコンの線幅 */
    height: 3px; /* アイコンの線の高さ */
    background-color: var(--main-orange);
    transition: transform 0.3s, background-color 0.3s;
}

/* 上下のアニメーション用の線 */
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--main-orange);
    transition: transform 0.3s;
}

.hamburger::before {
    top: -10px; /* 上の線 */
}

.hamburger::after {
    top: 10px; /* 下の線 */
}

/* メニューが開いたとき (is-active) */
.menu-toggle.is-active .hamburger {
    background-color: transparent; /* 中央の線を透明に */
}

.menu-toggle.is-active .hamburger::before {
    transform: translateY(10px) rotate(45deg); /* 中央の位置に移動して45度回転 */
}

.menu-toggle.is-active .hamburger::after {
    transform: translateY(-10px) rotate(-45deg); /* 中央の位置に移動して-45度回転 */
}

/* ============================ */
/* 2. ヒーローセクションのスタイル */
/* ============================ */
.hero-section {
    text-align: center;
    padding: 150px 0; 
    background: url('../img/title.png') no-repeat center center/cover; /* ← title.png に変更 */
    position: relative;
    color: #000;
}

/* テキストを読みやすくするための半透明のオーバーレイ（必要であれば） */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 暗いオーバーレイ */
    z-index: 1;
}

/* コンテンツをオーバーレイの上に表示させる */
.hero-container {
    position: relative;
    z-index: 2;
    /* .container のスタイルを継承しつつ、text-align: center; を適用 */
    text-align: center;
    /* padding: 20px 0; はそのまま */
}

.hero-title {
    font-size: 5.5rem; /* より大きく */
    font-weight: 900;
    margin-bottom: 50px;
    color: #fff; /* 文字色を白に */
    line-height: 1.2;
}

/* タイトル内の「SaaS」をハイライト */
.saas-highlight {
    /* ★ 修正1: オレンジ色に設定 */
    color: var(--main-orange); 
    
    /* ★ 修正2: 文字サイズを少し大きく（例: 1.1倍） */
    font-size: 1.2em;
    
    /* ★ 修正3: 影を付けて強調 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
    
    /* さらに太字にしたい場合は追加 */
    font-weight: 900;
}

/* 既存の不要な要素を非表示にする */
.problem-container,
.hero-image {
    display: none;
}

/* CTAボタンのスタイル（ヘッダーのボタンとは別に定義） */
.hero-cta-button {
    /* .contact-button のスタイルを上書き */
    display: inline-block;
    background-color: var(--main-orange);
    color: #fff;
    font-size: 1.6rem; /* 大きなフォント */
    font-weight: bold;
    padding: 25px 45px; /* 大きなパディング */
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    border-bottom: none; /* ヘッダーボタンの border-bottom を削除 */
    /* ★ 追加: ボタンの上下にマージンを追加 (下に配置する調整にもなる) ★ */
    margin-top: 50px; /* タイトルとの間に大きなスペースを作る */
}

.hero-cta-button:hover {
    background-color: #e55322;
}

/* ============================ */
/* 3 問題提起セクション (PC版スタイル - 新規) の最終版 */
/* ============================ */
.problem-solution-section {
    position: relative; 
    z-index: 5;         
    
    /* 修正: 複雑な中央寄せコードを削除し、width: 100% に変更 */
    width: 80%; /* 親要素の幅いっぱいに広げる */
    margin: 0 auto; /* 中央寄せ */

    /* 水平方向のパディングをゼロにして、画面いっぱいに広がるのを助ける */
    padding-left: 0;
    padding-right: 0;
    
    padding-bottom: 150px; 
    overflow-x: hidden; 
}

.main-content-chevron-container {
    /* グラデーションの設定 */
    /* 'to bottom' で上から下へ、白 (#ffffff) から薄いグレー (#cccccc) へ */
    background: linear-gradient(to bottom, #ffffff, #cccccc);

    /* 形状の設定: clip-pathを使用して下端をカット */
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 80%, /* 矢印の深さを調整（ここでは95%に設定） */
        50% 100%, 
        0% 80%  /* 矢印の深さを調整 */
    );
    
    /* 要素の幅を親要素いっぱいにする（例として最大幅を設定） */
    margin: 0 auto;
    padding-top: 10px; /* 上部に余白を追加 */
    padding-bottom: 100px; /* 下部シェブロンの形状に合わせて余白を調整 */
    box-sizing: border-box;

    /* ... 既存のスタイルを維持 ... */
    
    /* ★ 修正/追加: アニメーションを定義 ★ */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    

}

/* ★★★ 新規追加: 初期状態を定義するクラス ★★★ */
.main-content-chevron-container:not(.is-visible) {
    opacity: 0;
    transform: translateY(-30px);
}

.main-content-chevron-container.is-visible {
    /* フェードインして元の位置に戻る */
    opacity: 1;
    transform: translateY(0); 
}

/* ★★ 修正: コンテンツ（見出し）に z-index と position を適用し、手前に出す ★★ */
.question-title {
    position: relative; 
    z-index: 2;
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
    text-align: center;
}

/* ★★ 修正: コンテンツ（問題コンテナ）に z-index と position を適用し、手前に出す ★★ */
/* 問題コンテナのグリッドを標準に戻す */
.problem-container {
    /* グリッドを解除し、絶対配置の基準とする */
    position: relative; 
    z-index: 2;
    display: block; /* グリッドを解除 */
    max-width: 900px;
    height: 500px; /* アイテムを配置するための高さを確保 */
    margin: 0 auto;
    padding-top: 30px;
}

.problem-item {
    position: relative; 
    z-index: 3;
    padding: 25px;
    border: 2px dashed #999; 
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    line-height: 1.4;
    background-color: #fff;
    width: 100%; /* 親要素の幅に合わせておく */
}

/* 1. 誰がどのSaaSを使っているのか分からない（HTMLの1番目の要素） */
.problem-container .problem-item:nth-child(1) { 
    position: absolute; /* 強制配置 */
    left: -50px;
    top: 250px; /* 左下に配置 */
    z-index: 5; 
    transform: none; /* 移動をリセット */
    width: 350px; /* 幅を固定 */
}

/* 2. 人物アイコン (HTMLの2番目の要素) */
.problem-container .icon-center  { 
    position: absolute; /* 強制配置 */
    left: 50%;
    top: 200px;
    transform: translateX(-50%); /* 中央寄せ */
    z-index: 3;
    margin-top: 0; 
    text-align: center;
}

/* ★★ 必須要素: 人物画像のサイズ調整 ★★ */
.problem-container .icon-center img {
    max-width: 600px; /* 画像の最大幅を制限してサイズを調整 */
    height: auto;
    display: block;
    margin: 0 auto;
}
/* ------------------------------------- */

/* 3. 退職・異動のたびにアカウント整理が大混乱（HTMLの3番目の要素） */
.problem-container .problem-item:nth-child(3) { 
    position: absolute; /* 強制配置 */
    left: 50%;
    top: 0; /* 上中央に配置 */
    transform: translateX(-50%); /* 中央寄せ */
    z-index: 5;
    width: 450px; /* 幅を固定 */
    margin-bottom: 0; 
}

/* 4. 契約の重複・見落としでコストが膨らむ...（HTMLの4番目の要素） */
.problem-container .problem-item:nth-child(4) { 
    position: absolute; /* 強制配置 */
    right: -80px;
    top: 250px; /* 右下に配置 */
    z-index: 5;
    transform: none; /* 移動をリセット */
    width: 350px; /* 幅を固定 */
    margin-bottom: 0; 
}

.problem-item p {
    /* 修正: フォントサイズを大きくする */
    font-size: 1.5rem; 
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

/* 問題解決の導入メッセージのスタイルを追加 */
/* 問題解決の導入メッセージの強調スタイル */
.josys {
    /* コンテナ全体を親の幅いっぱいにし、左右のパディングで調整 */
    position: relative;
    z-index: 2; 
    max-width: none; /* 親要素の幅いっぱいに広げる */
    margin: 0 auto;
    padding-top: 50px; /* ★★ 追記: シェブロンとの間に上部の余白を作成 ★★ */
    padding-bottom: 30px; 
}

.solution-intro {
    font-size: 5.5rem; 
    font-weight: 900; 
    text-align: center;
    color: var(--main-orange); 
    line-height: 1.4;
    text-shadow: 
        3px 3px 5px rgba(248, 118, 31, 0.4);
    /* 位置の指定は不要 */
    position: static; 
    background-color: transparent; 
    padding: 0;
    margin: 0;
}

/* ============================ */
/* 4. ジョーシスでできること セクションのスタイル */
/* ============================ */

.about-josys-section {
    /* 上部の余白を調整し、前のセクションに近づける */
    padding-top: 0px; /* デフォルトより少なめに設定 */
    padding-bottom: 80px; /* 下部の余白は維持 */
    overflow: visible !important;
    margin-top: -50px;
}

.about-josys-section h2 {
    /* 共通の見出し(2.5rem)を上書きして、文字を大きくする */
    font-size: 5.0rem; 
    /* 見出しの下に適切なマージンを設定 */
    margin-bottom: 30px; 
}

.about-josys-section .content-box {
    position: relative;
    
    /* 1. パディングを増やす: 角飾りのスペースを確実に確保 */
    padding: 20px 100px 80px 100px;
    
    margin: 0 auto;
    max-width: 960px;
    border: none;
    
    background-image: 
        url('../img/corner_top_left.svg'),     /* 左上 */
        url('../img/corner_bottom_right.svg'); /* 右下 */
    
    background-repeat: no-repeat;
    
    /* 2. 画像サイズを 100x100px に固定 */
    background-size: 
        150px 150px, 
        150px 150px; 
        
    /* 2. 位置の調整: 画像サイズ 80px に合わせてオフセット値を再調整 */
    background-position: 
        /* 左上: X軸を 45px に増やし、さらに右に移動させます */
        30px 0px,    
        /* 右下: X軸, Y軸ともに、外側へ約 50px はみ出すよう調整 (維持) */
        calc(100% - 30px) calc(100% - 30px);
}

/* 定義文、キャッチコピー、利益リストのフォントサイズを統一 */
/* ★★ 修正: 全てのテキストスタイルを .full-definition に適用 ★★ */
.about-josys-section .full-definition {
    font-size: 1.9rem; 
    font-weight: 500;
    
    /* 詰めた行間を維持 */
    line-height: 1.2; 
    
    /* 上下マージンをゼロに */
    margin: 0 auto; 
    
    /* 上下のセクションとの距離をこの要素のパディングで調整 */
    padding-top: 20px;
    padding-bottom: 20px;
    
    max-width: 1100px; 
    word-break: keep-all;
    text-align: center; 
}

.about-josys-section.container {
    /* デフォルトの 90% や 1200px の設定を上書きし、幅を広げる */
    max-width: 1400px; 
    width: 95%; 
    
    /* セクション全体の左右のパディングを調整（緑色の部分を広げる） */
    padding-left: 50px; 
    padding-right: 50px;
}

/* 強調テキストのスタイルは維持 */
.about-josys-section .highlight-text {
    color: var(--main-orange); 
    font-weight: 900; 
}

/* SaaS管理者のためのクラウドサービス の部分をオレンジ色にする */
.about-josys-section .highlight-text {
    color: var(--main-orange); /* オレンジ色を適用 */
    font-weight: 900; /* ここだけ太字を強調 */
}

/* ============================ */
/* 4. ジョーシスアプリ画面 */
/* ============================ */

.about-josys-visual-wrapper {
    position: relative; 
    width: 100%;
    max-width: 1200px; 
    
    /* 修正1: コンテナ全体を上に引き上げる */
    margin: -50px auto 0 auto; /* 80px から -50px へ変更 */
    
    /* 修正2: 画像全体が収まるように高さを増やす */
    height: 650px; /* 500px から 650px へ変更 */
    
    padding-bottom: 50px; 
    
    /* 修正3: 画像が切れないように overflow を調整（念のため visible に） */
    overflow: visible; 
}

/* 楕円形の背景 */
.ellipse-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%); /* 中央に配置 */
    width: 1000px; /* 修正: ピクセルで固定し、幅を調整 */
    height: 600px; /* 修正: 高さを調整 */
    background-color: #ffb880; 
    border-radius: 50%; 
    z-index: 1; 
    opacity: 0.8; /* 透明度を少し上げて、色を濃くする */
}

/* 結合された画像 */
.combined-screenshot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%); 
    width: 80%; 
    max-width: 900px; 
    height: auto;
    border-radius: 10px; 
    z-index: 2; 
    
    /* 修正: 背景色を強制的に透明に */
    background-color: transparent !important;
}

/* ============================ */
/* 4. ジョーシスでできること セクションのスタイル */
/* ============================ */

.josys-cando-title-box {
    margin: 0 auto 0px auto; /* 中央寄せと下部マージンを設定 */
    max-width: 700px; 
    padding: 35px 40px 55px 40px;

    /* use-case-title-box と同じ枠線と角丸 */
    border: 3px dashed #333; 
    border-radius: 50px; 
    
    /* use-case-title-box と同じグラデーション背景 */
    background: linear-gradient(
        135deg, 
        #ffe0b2,   
        #ffc9c9    
    ); 
    
    /* 影をつけて強調 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    
    text-align: center;
}

.what-josys-can-do-section {
    padding: 80px 0;
    /* 背景画像の設定 */
    background-image: url('../img/background_what_can_do.png'); /* ★★ 画像パスを適切に修正 ★★ */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* セクション全体を覆う */
    
    /* 画像が暗い場合は、文字が読めるように色を調整 */
    color: #fff; /* 必要に応じて文字色を白に変更 */
}

/* h2 の色も、背景画像に合わせて調整が必要かもしれません */
.what-josys-can-do-section h2 {
    /* 背景に合わせて文字色を白にするなど調整 */
    color: #ff6633; 
    margin-bottom: 60px;
    font-size: 3.5rem; 
    line-height: 1.0;
    margin: 0 0 -25px 0;
}


/* style.css の .feature-grid の修正箇所 (PC版 3列) */
.feature-grid {
    display: flex;
    justify-content: center; /* アイテムを中央に寄せる */
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    
}

/* style.css の .feature-item の修正箇所 (PC版 3列の幅) */
.feature-item {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    flex-grow: 0; 
    flex-shrink: 0; 
    margin-bottom: 30px; 
    
    /* ★★ PC版設定: 均等3列の幅 ★★ */
    width: calc(33.333% - 20px); 
    max-width: 380px; 
}

.feature-icon {
    /* サイズを 80x80px に維持 */
    width: 300px; 
    height: 300px;
    
    display: block; 
    margin: 0 auto 25px auto; 
    
}
/* ============================ */
/* Feature Item アニメーションスタイル */
/* ============================ */

/* ターゲット要素の初期状態 (非表示/下にずらしておく) */
.feature-grid .feature-item {
    /* アニメーションを滑らかにするための transition を追加 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    
    /* 初期状態: 透明で、下にずらしておく (下からフェードイン) */
    opacity: 0;
    transform: translateY(20px); 
}

/* JavaScriptで 'is-visible' クラスが付与された後の状態 */
.feature-grid .feature-item.is-visible {
    /* フェードインして元の位置に戻る */
    opacity: 1;
    transform: translateY(0); 
}

/* ★★★ 時間差アニメーションの適用 ★★★ */
/* 各アイテムに遅延時間 (delay) を設定し、順番に現れるようにする */
.feature-grid .feature-item:nth-child(1) {
    transition-delay: 0.1s;
}
.feature-grid .feature-item:nth-child(2) {
    transition-delay: 0.2s;
}
.feature-grid .feature-item:nth-child(3) {
    transition-delay: 0.3s;
}
.feature-grid .feature-item:nth-child(4) {
    transition-delay: 0.4s;
}
.feature-grid .feature-item:nth-child(5) {
    transition-delay: 0.5s;
}
.feature-grid .feature-item:nth-child(6) {
    transition-delay: 0.6s;
}

/* ------------------------------------------- */
/* 既存の .feature-item の子要素のスタイルを復元 */
/* ------------------------------------------- */
.feature-item h3 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 10px;
    height: 3.6em;
    line-height: 1.2;
    color: #000; 
}

.feature-item p {
    font-size: 1.1rem;
    color: #000;
    text-align: left;
}

/* ============================ */
/* 5. JOSYS AI セクションのスタイル */
/* ============================ */
.josys-ai-section {
    /* 修正1: 上部のパディングを減らし、セクション全体を上に詰める */
    padding: 0px 0 60px 0; /* 20px だった値を 0px に変更 */
    text-align: center;
    position: relative;
    z-index: 1;
}

/* 矢印画像とテキストのラッパー */
.ai-title-container {
    position: relative;
    width: 80%;
    max-width: 1000px;
    /* 修正2: 高さを 180px から 400px へ */
    height: 800px; 
    /* 修正3: 上のマージンを減らし、セクション全体を上に詰める */
    margin: -170px auto 40px auto; /* 0px から -50px へ変更 */
    z-index: 10;
}

/* 矢印 SVG 画像 (<img>) のスタイル */
.ai-title-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
    position: relative; /* 👈 相対配置を設定 */
    top: -25px; /* 👈 上に 50px ずらす。この値を調整してください */
    left: -280px;      /* 👈 左にずらすには負の値（マイナス）を使用 */
}

/* 矢印の上のテキストの見出し (h2.ai-heading) */
.ai-heading { /* 👈 HTMLのh2要素のクラス名に合わせて修正 */
    position: absolute; /* 👈 絶対配置を適用 */
    top: 50%; /* 👈 親要素の上端から50%の位置 */
    left: 50%; /* 👈 親要素の左端から50%の位置 */
    transform: translate(calc(-50% - 300px), calc(-50% - 12.5px));
    
    font-size: 3.5rem; /* PC版のフォントサイズ */
    font-weight: 800;
    color: #fff; /* 矢印の濃い青色に合わせて文字色を白に */
    
    width: 70%;
    z-index: 99; /* 矢印（z-index: 1）の上に表示 */
    margin: 0;
    line-height: 1.2;
    text-align: center; /* 👈 h2内部のテキストを中央寄せ */
}

/* JOSYS AI ロゴの配置とスタイル */
.josys-ai-logo {
    font-size: 3rem;
    font-weight: 900;
    color: var(--main-orange);
    letter-spacing: 3px;
    /* ロゴの位置を矢印の下に調整 */
    margin-top: 30px; 
    position: relative;
    z-index: 2; 
    /* ... 略 ... */
}

/* 💡 新規追加: AI機能の導入画像コンテナのスタイル */
.ai-illustration {
    /* ... 略 ... */
    margin-top: -500px; 
    margin-bottom: 20px; 
}

.ai-illustration .ai-feature-img {
    width: 90%; 
    /* 修正: 最大幅を 800px から 1000px へ拡大 */
    max-width: 1000px; 
    height: auto;
    display: block;
    margin: 0 auto;
}

.ai-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    
    /* 修正: 画像の下にカードを近づけるために、負の値を大きくする */
    /* 画像の位置に合わせて調整。画像の下に食い込む場合は負の値を小さくしてください。 */
    margin-top: -150px; 
    position: relative;
    z-index: 5; 
}

.ai-item {
    padding: 30px 20px; 
    border-radius: 15px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    
    /* 修正1: 固定の height を削除し、min-height で最小の高さを保証 */
    width: 350px; 
    min-height: 280px; /* 最小高さを設定 */
    height: auto; /* 高さをコンテンツに合わせて自動調整 */
    
    /* 修正2: Flexboxで中身を制御し、縦方向に要素を配置 */
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; /* アイコンとテキストを上下に分ける */
    
    /* グラデーションは維持 */
    background: linear-gradient(135deg, 
        #ffe0b2,   /* 非常に明るいオレンジ/桃色 */
        #ffc9c9,   /* 明るいピンク */
        #e3c9ff   /* 明るい紫 */
    ); 
    
    color: #333; 
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.ai-icon {
    display: block;
    margin-bottom: 20px; /* テキストとの間に十分な余白を確保 */
}

.ai-item:hover {
    /* 1. 浮き上がらせる */
    transform: translateY(-10px); 
    
    /* 2. シャドウを強調し、キラキラ感を出す */
    box-shadow: 0 15px 30px rgba(255, 120, 0, 0.4), /* オレンジ色の強い影 */
                0 5px 10px rgba(0, 0, 0, 0.1); 
    
    /* 3. マウスカーソルをポインターに変更 */
    cursor: pointer; 
}

.ai-item p {
    font-weight: bold;
    font-size: 1.7rem;
    line-height: 1.4;
    margin-top: auto; /* pタグをカードの下部に自動的に押し下げる */
}

.ai-icon-img {
    /* アイコンのサイズを設定 */
    width: 300px; 
    height: auto; 
    display: block;
    margin: 0 auto 20px auto; /* 中央寄せと下部マージンを設定 */
}

/* ============================ */
/* カテゴリタイトル (左からスライドイン) アニメーションスタイル */
/* ============================ */

/* ターゲット要素の初期状態 (非表示/左にずらしておく) */
.challenge-category-title, 
.cost-category-title, 
.security-category-title {
    /* アニメーションを滑らかにするための transition を追加 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    
    /* 初期状態: 透明で、左にずらしておく (左からフェードイン) */
    opacity: 0;
    transform: translateX(-50px); /* 50px 左にずらす */
}

/* JavaScriptで 'is-visible' クラスが付与された後の状態 */
.challenge-category-title.is-visible, 
.cost-category-title.is-visible, 
.security-category-title.is-visible {
    /* フェードインして元の位置に戻る */
    opacity: 1;
    transform: translateX(0); 
}

/* ============================ */
/* 6. 活用事例 セクションのスタイル */
/* ============================ */
.use-case-section {
    /* 1. 背景画像を指定します。パスをあなたのファイルに合わせて変更してください。 */
    background-image: url('../img/background_img.png'); 
    
    /* 2. 背景画像を画面いっぱいに広げます */
    background-size: cover;
    
    /* 3. 画像が繰り返されるのを防ぎます */
    background-repeat: no-repeat;
    
    /* 4. 画像を画面中央に配置します */
    background-position: center center;
    
    /* （オプション）コンテンツの上下に適切な余白を確保します */
    padding: 80px 0; 
}

.use-case-title {
    /* h2の共通スタイルを上書きし、コンテナに合わせた設定を適用 */
    font-size: 2.5rem; /* サイズはボックスに合わせて調整 */
    font-weight: bold;
    text-align: center;
    margin-bottom: 0; /* ボックスにパディングを持たせるため、h2のマージンはリセット */
    color: var(--text-dark); /* デフォルトの文字色 */
    line-height: 1.4;
}

/* 「活用事例」のオレンジ色を強調 */
.use-case-title .highlight-text {
    color: var(--main-orange);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 「活用事例」の部分を大きく、オレンジ色に強調 */
.use-case-title .use-case-large-text {
    /* 1. 文字サイズを大きく */
    font-size: 2.0em ;/* 親要素 (2.5rem) の 1.8倍に設定 */
    
    /* 2. 色をメインのオレンジに */
    color: var(--main-orange);
    
    /* 3. 影をつけて目立たせる */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
    
    /* 4. 行間を調整して、周りの文字と重ならないようにする */
    display: inline-block; 
    line-height: 1; 
}

/* ★★ 新規追加: 見出しのボックスのスタイル (変更なし) ★★ */
.use-case-title-box {
    margin: 0 auto 60px auto; 
    max-width: 800px; 
    padding: 40px 20px; 
    border: 3px dashed #333; 
    border-radius: 50px; 
    background: linear-gradient(
        135deg, 
        #ffe0b2,   
        #ffc9c9    
    ); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* ★★ 新規追加: カテゴリタイトル（タグ）のコンテナ ★★ */
.challenge-category-container {
    /* コンテナの幅を固定し、左寄せにするための設定 */
    max-width: 1200px;
    width: 100%;
    margin: -20px auto 10px auto; /* 中央寄せにし、下にマージンを設定 */
    text-align: left; /* コンテンツを左寄せにする */
    padding: 0 ; /* 👈 左右の余白を 5px に極端に減らす */
}

/* ★★ 新規追加: カテゴリタイトル（業務効率化タグ）のスタイル ★★ */
.challenge-category-title {
    display: inline-block; /* コンテンツの幅に合わせる */
    background: linear-gradient(to right, #ff9966, #ffb380); /* 薄いオレンジのグラデーション */
    color: var(--text-dark); /* 文字色は黒/濃いグレー */
    font-size: 2.5rem;
    font-weight: 800;
    padding: 20px 100px 20px 30px; /* パディングで形を調整 */
    margin: 0;
    line-height: 1.2;
    
    /* 右側を斜めにカットするための clip-path */
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    
    /* 影をつけて浮き上がらせる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.challenge-title-wrapper {
    /* ラッパーの幅と配置を設定 */
    display: inline-block; 
    margin: 0; 
    line-height: 0; /* h3 のマージンが影響しないように */
    
    /* ★ 修正3: box-shadow を適用 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    /* ★ 修正4: clip-path を適用 */
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    
    /* ★ 修正5: h3と同じ背景をラッパーにも適用（重要） */
    background: linear-gradient(to right, #ff9966, #ffb380); 
}



/* ★★ 新規追加: チャレンジグリッド（男性と吹き出しのコンテナ） ★★ */
.challenge-grid {
    position: relative; /* 子要素の絶対配置の基準となる */
    width: 100%;
    max-width: 1200px; /* 全体の最大幅を調整 */
    height: 600px; /* グリッドの高さ（男性と吹き出しの配置範囲） */
    margin: 0px auto 10px auto; /* 上下のマージンと中央寄せ */
    display: flex; /* 男性画像を中央に配置するため */
    justify-content: center; /* 男性画像を水平中央に */
    align-items: center; /* 男性画像を垂直中央に */
}

/* ★★ 新規追加: 中央の男性のイラスト ★★ */
.challenge-man {
    position: absolute; /* 吹き出しと重なるように絶対配置 */
    width: 350px; /* 画像の幅を調整 */
    height: 300px; /* 高さは自動調整 */
    bottom: 0px; /* 下の方に配置 */
    z-index: 1; /* 吹き出しより手前に表示 */
}
.challenge-man img {
    max-width: 100%;
    height: auto;
    display: block; /* 余白をなくす */
}

/* ★★ 新規追加: 吹き出し共通スタイル ★★ */
.bubble {
    position: absolute; 
    
    /* 1. リセット: 画像に任せるため、元の枠線や背景色を削除 */
    background-color: transparent; 
    border: none;                  
    border-radius: 0;              
    padding: 0;                    
    box-shadow: none;              
    
    /* 2. サイズ定義: 画像とテキストを重ねるための固定サイズ（調整済み） */
    width: 400px;  
    height: 220px; 
    
    /* 3. 配置設定 */
    text-align: center;
    line-height: 1.2; 
    z-index: 2; 
    
    display: block; 
    justify-content: normal; 
    align-items: normal;     
}

.bubble p {
    margin: 0; /* 吹き出し内のpタグのマージンをリセット */
}

/* ★★ 新規追加: 吹き出し背景画像 (.bubble-bg-img) のスタイル ★★ */
.bubble .bubble-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 吹き出しコンテナに合わせて画像を維持 */
    z-index: 1; /* テキストより奥に配置 */
}

/* ★★ 新規追加: 吹き出しテキスト (.bubble-text) のスタイル ★★ */
.bubble .bubble-text {
    position: absolute;
    
    /* ★ 修正1: 上端から少し下に配置するために top の値を調整 (例: 15px) */
    top: 35px; 
    
    left: 50%; /* 水平中央は維持 */
    
    /* ★ 修正2: transform から垂直方向の移動 (Y軸) を削除 */
    transform: translate(-50%, 0); 
    
    /* ↓↓↓ テキストのスタイル調整 (維持) ↓↓↓ */
    margin: 0; 
    padding: 10px;
    font-size: 1.4rem; 
    font-weight: bold; 
    color: #333; 
    line-height: 1.4;
    text-align: center;
    
    width: 100%; 
    z-index: 2; 
}

.bubble-two-lines .bubble-text {
    /* top: 50% に戻し、垂直方向の transform を有効にする */
    top: 45%; 
    transform: translate(-52%, -50%); /* 垂直中央揃えを再適用 */
    
    /* 上部揃えで不要になった padding-top を削除 */
    padding-top: 0px;
    padding-bottom: 0px;
}

.bubble-two-lines-center .bubble-text {
    /* top: 50% に戻し、垂直方向の transform を有効にする */
    top: 45%; 
    transform: translate(-49%, -50%); /* 垂直中央揃えを再適用 */
    
    /* 上部揃えで不要になった padding-top を削除 */
    padding-top: 0px;
    padding-bottom: 0px;
}

/* ★★ 各吹き出しの個別位置と、しっぽの調整 ★★ */

/* 吹き出し 1: 左上 */
.bubble-top-left {
    top: 0px;
    left: 150px;
}
.bubble-top-left::before { /* しっぽの内側 */
    border-top-color: white; /* 吹き出し背景色と同じ */
    left: 50%;
    bottom: -30px; /* 吹き出しの下から突き出す */
    transform: translateX(-50%) rotate(25deg); /* 斜めにする */
}
.bubble-top-left::after { /* しっぽのボーダー */
    border-top-color: #ccc; /* 吹き出しボーダー色と同じ */
    left: 50%;
    bottom: -32px;
    transform: translateX(-50%) rotate(25deg);
}

/* 吹き出し 2: 右上 */
.bubble-top-right {
    top: 0px;
    right: 150px;
}
.bubble-top-right::before { /* しっぽの内側 */
    border-top-color: white;
    right: 50%;
    bottom: -30px;
    transform: translateX(50%) rotate(-25deg);
}
.bubble-top-right::after { /* しっぽのボーダー */
    border-top-color: #ccc;
    right: 50%;
    bottom: -32px;
    transform: translateX(50%) rotate(-25deg);
}

/* 吹き出し 3: 左下 */
.bubble-bottom-left {
    bottom: 200px;
    left: 100px;
}
.bubble-bottom-left::before { /* しっぽの内側 */
    border-bottom-color: white;
    left: 50%;
    top: -30px; /* 吹き出しの上から突き出す */
    transform: translateX(-50%) rotate(-25deg);
}
.bubble-bottom-left::after { /* しっぽのボーダー */
    border-bottom-color: #ccc;
    left: 50%;
    top: -32px;
    transform: translateX(-50%) rotate(-25deg);
}

/* 吹き出し 4: 右下 */
.bubble-bottom-right {
    bottom: 200px;
    right: 100px;
}
.bubble-bottom-right::before { /* しっぽの内側 */
    border-bottom-color: white;
    right: 50%;
    top: -30px;
    transform: translateX(50%) rotate(25deg);
}
.bubble-bottom-right::after { /* しっぽのボーダー */
    border-bottom-color: #ccc;
    right: 50%;
    top: -32px;
    transform: translateX(50%) rotate(25deg);
}

/* ★★ 新規追加: 中央の男性のイラスト ★★ */
.challenge-man {
    position: absolute; /* 吹き出しと重なるように絶対配置 */
    width: 350px; /* 画像の幅を調整 */
    height: 300px; /* 高さは自動調整 */
    bottom: 130px; /* 👈 修正: 0px から 50px へ変更（画像を上に移動） */
    z-index: 1; /* 吹き出しより手前に表示 */
}

.challenge-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.challenge-box {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    font-weight: bold;
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 矢印コンテナのスタイル */
.arrow-container {
    margin: -120px auto 30px auto; /* 👈 修正: 上部のマージンを 0px に設定 */
    /* 矢印のサイズを定義 */
    width: 100px; /* 矢印の幅 */
    height: 30px; /* 矢印の高さ */
    position: relative;
    z-index: 10; /* 👈 追加: 他の要素の上に表示されるようにする */
}

/* 矢印（シェブロン）本体をCSSで作成 */
.arrow-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    
    /* 矢印の形をボーダーで作成 (太さと色を定義) */
    width: 0;
    height: 0;
    border-left: 60px solid transparent; /* 矢印の半分の幅 */
    border-right: 60px solid transparent; /* 矢印の半分の幅 */
    border-top: 60px solid var(--main-orange); /* 矢印の高さと色 */
    
    /* 影をつけて立体感を出す（オプション） */
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.2));
}
.solution-summary {
    text-align: center;
    margin: 60px auto;
    padding: 30px;
    border-top: 5px solid var(--main-orange);
    border-bottom: 5px solid var(--main-orange);
    max-width: 800px;
}

.solution-summary p {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-dark);
    line-height: 1.8;
}

.asset-dashboard {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
    text-align: center;
}

.asset-column {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex: 1;
    max-width: 400px;
}

.asset-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--main-orange);
    border-bottom: 3px solid var(--main-orange);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.asset-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #eee;
    border-radius: 5px;
    margin: 5px;
    font-weight: bold;
    color: #555;
    font-size: 1.2rem;
}

.screen-solution-wrapper {
    /* コンテンツの上下の余白を確保し、中央寄せ */
    padding: 0 0 20px 0; /* 👈 修正: 上部のパディングを 60px から 0px へ変更 */
    max-width: 1000px;
    display: flex; /* 👈 Flexboxを再有効化 */
    justify-content: center; /* 👈 中央寄せ */
    align-items: center;
}

/* ★★ 新規追加: アイコンとテキストを横並びにするラッパー ★★ */
.solution-text-with-icon {
    display: flex; 
    flex-direction: row; 
    align-items: center; /* 👈 垂直方向の中央揃えを維持 */
    gap: 30px; 
    
    max-width: 1000px; 
    margin: 50px auto 0 auto; 
    
    /* 念のため、アイコンが左上に飛び出すのを防ぐ */
    position: relative;
    
}

/* ★★ 新規追加: アイコンのスタイル ★★ */
.solution-lead-icon {
    width: 230px; /* 👈 アイコンのサイズを調整 */
    height: auto;
    flex-shrink: 0; /* 縮小しない */
}

.screen-solution-text {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.6;
    margin-bottom: 0px;
    color: var(--text-dark);
    text-align: center; /* 中央 */
    
    /* 👈 追加: 縦書きになるのを防ぎ、通常の横書きに戻す */
    writing-mode: horizontal-tb; 
    
    /* 👈 追加: 単語の途中で改行されないようにする（特に日本語） */
    word-break: normal; 
}

.screen-solution-text .highlight-text-orange {
    color: var(--main-orange);
    font-weight: 900;
    font-size: 1.9rem
}


/* ダッシュボード画像のスタイル */
/* ★★ 新規追加: 解決策画像コンテナ (PC/共通) ★★ */
.solution-images {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央寄せ */
    gap: 40px; /* 画像間のスペース */
    padding-top: 0px; /* 上部との余白 */
    max-width: 1000px; /* 幅を制限 */
    /* マージンの調整をシンプルに (Flexboxのalign-itemsで中央寄せされる) */
    margin: 0 auto 50px auto;
}

.solution-images .image-with-caption {
    /* 画像を中央寄せの位置から強制的に右に 80px ずらす */
    margin-left: 80px; 
}

.solution-image {
    width: 90%; /* コンテナ内の幅に合わせて調整 */
    max-width: 900px; /* 最大幅を設定 */
    height: auto;
    border-radius: 10px;
    /* 影を付けて画面を強調 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
}

/* 画像と吹き出しのラッパーを相対配置の基準とする */
.image-with-caption {
    position: relative;
    width: 90%; 
    max-width: 900px;
    /* 吹き出しが画像より上に出る分のスペースを確保 */
    padding-top: 50px; 
    transform: translateX(50px);
}
/* 画像コンテナ間のマージンは .solution-images の gap で制御 */


/* 小さな吹き出しのコンテナ */
.solution-bubble {
    /* 吹き出しを画像の境界線の外側（上部）に配置 */
    position: absolute;
    z-index: 10;
    
    /* 吹き出しSVG画像のサイズに合わせて調整 */
    width: 450px; /* SVG画像の幅に合わせて設定 */
    height: 170px; /* SVG画像の高さに合わせて設定 */
    
    background-color: transparent; /* SVGを使うため背景色は透明に */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    
    /* テキストと画像を重ねるための設定 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 吹き出しのSVG画像 */
.solution-bubble .bubble-ui-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1; /* テキストより奥に */
}

/* 吹き出しのテキスト */
.solution-bubble .bubble-ui-text {
    position: relative;
    z-index: 2; /* SVGより手前に */
    font-size: 1.1rem;
    font-weight: bold;
    color: #333; /* SVG画像に合わせて色を調整 */
    line-height: 1.4;
    text-align: center;
    padding: 10px;
    width: 100%;
}

/* 吹き出し (ライセンス管理画面イメージ) の位置調整 */
/* 右上に配置 */
.image-with-caption:first-child .solution-bubble {
    top: 150px; 
    left: -200px; 
}

/* 吹き出し (ITデバイス管理画面イメージ) の位置調整 */
/* 左上に配置 */
.image-with-caption:last-child .solution-bubble {
    top: 40px; 
    right: 0px; 
}

/* ============================ */
/* 7. コストセクションのスタイル */
/* ============================ */

.cost-category-container {
    /* コンテナの幅を固定し、左寄せにするための設定 */
    max-width: 1200px;
    width: 100%;
    margin: -20px auto 10px auto; /* 中央寄せにし、下にマージンを設定 */
    text-align: left; /* コンテンツを左寄せにする */
    padding: 0 ; /* 👈 左右の余白を 5px に極端に減らす */
}

/* ★★ 新規追加: カテゴリタイトル（業務効率化タグ）のスタイル ★★ */
.cost-category-title {
    display: inline-block; /* コンテンツの幅に合わせる */
    background: linear-gradient(to right, #ff9966, #ffb380); /* 薄いオレンジのグラデーション */
    color: var(--text-dark); /* 文字色は黒/濃いグレー */
    font-size: 2.5rem;
    font-weight: 800;
    padding: 20px 100px 20px 30px; /* パディングで形を調整 */
    margin: 0;
    line-height: 1.2;
    
    /* 右側を斜めにカットするための clip-path */
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    
    /* 影をつけて浮き上がらせる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ★★ 新規追加: チャレンジグリッド（男性と吹き出しのコンテナ） ★★ */
.cost-grid {
    position: relative; /* 子要素の絶対配置の基準となる */
    width: 100%;
    max-width: 1200px; /* 全体の最大幅を調整 */
    height: 600px; /* グリッドの高さ（男性と吹き出しの配置範囲） */
    margin: 0px auto 10px auto; /* 上下のマージンと中央寄せ */
    display: flex; /* 男性画像を中央に配置するため */
    justify-content: center; /* 男性画像を水平中央に */
    align-items: center; /* 男性画像を垂直中央に */
}

/* ★★ 新規追加: 中央の男性のイラスト ★★ */
.cost-woman {
    position: absolute; /* 吹き出しと重なるように絶対配置 */
    width: 350px; /* 画像の幅を調整 */
    height: 300px; /* 高さは自動調整 */
    bottom: 100px; /* 下の方に配置 */
    z-index: 1; /* 吹き出しより手前に表示 */
}

.cost-woman img {
    max-width: 100%;
    height: auto;
    display: block; /* 余白をなくす */
}

.bubble-center-cost {
    /* 共通の .bubble スタイルを継承 */
    position: absolute; 
    z-index: 3;
    
    /* SVG画像 bubble_center.svg の形に合わせてサイズを調整 */
    width: 400px; 
    height: 220px; 
    
    /* 中央に配置 */
    left: 50%;
    top: 10px; /* 上端から少し下に配置 */
    transform: translateX(-50%); /* 水平中央寄せ */
}

.bubble-cost-top-left {
    top: 0px;        /* ★★★ ここを調整（上: 負の値、下: 正の値）★★★ */
    left: 100px;     /* ★★★ ここを調整（左へ: 小さく、右へ: 大きく）★★★ */
}

.bubble-cost-top-right {
    top: 0px;        /* ★★★ ここを調整（上: 負の値、下: 正の値）★★★ */
    right: 90px;    /* ★★★ ここを調整（右へ: 小さく、左へ: 大きく）★★★ */
}

/* ============================ */
/* 8. セキュリティのスタイル */
/* ============================ */

.security-category-container {
    /* コンテナの幅を固定し、左寄せにするための設定 */
    max-width: 1200px;
    width: 100%;
    margin: -20px auto 10px auto; /* 中央寄せにし、下にマージンを設定 */
    text-align: left; /* コンテンツを左寄せにする */
    padding: 0 ; /* 👈 左右の余白を 5px に極端に減らす */
}

/* ★★ 新規追加: カテゴリタイトル（業務効率化タグ）のスタイル ★★ */
.security-category-title {
    display: inline-block; /* コンテンツの幅に合わせる */
    background: linear-gradient(to right, #ff9966, #ffb380); /* 薄いオレンジのグラデーション */
    color: var(--text-dark); /* 文字色は黒/濃いグレー */
    font-size: 2.5rem;
    font-weight: 800;
    padding: 20px 100px 20px 30px; /* パディングで形を調整 */
    margin: 0;
    line-height: 1.2;
    
    /* 右側を斜めにカットするための clip-path */
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    
    /* 影をつけて浮き上がらせる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ★★ 新規追加: チャレンジグリッド（男性と吹き出しのコンテナ） ★★ */
.security-grid {
    position: relative; /* 子要素の絶対配置の基準となる */
    width: 100%;
    max-width: 1200px; /* 全体の最大幅を調整 */
    height: 600px; /* グリッドの高さ（男性と吹き出しの配置範囲） */
    margin: 0px auto 10px auto; /* 上下のマージンと中央寄せ */
    display: flex; /* 男性画像を中央に配置するため */
    justify-content: center; /* 男性画像を水平中央に */
    align-items: center; /* 男性画像を垂直中央に */
}

/* ★★ 新規追加: 中央の男性のイラスト ★★ */
.security-pople {
    position: absolute; /* 吹き出しと重なるように絶対配置 */
    width: 350px; /* 画像の幅を調整 */
    height: 300px; /* 高さは自動調整 */
    bottom: 150px; /* 下の方に配置 */
    left: 45%;    /* 追加: 左からの位置を 45% に調整 (全体の中央から少し左へ) */
    transform: translateX(-50%); /* 中央寄せの調整を維持 */
    z-index: 1; /* 吹き出しより手前に表示 */
}

.security-pople img {
    max-width: 150%;
    height: auto;
    display: block; /* 余白をなくす */
}

.bubble-center-security {
    /* 共通の .bubble スタイルを継承 */
    position: absolute; 
    z-index: 3;
    
    /* SVG画像 bubble_center.svg の形に合わせてサイズを調整 */
    width: 400px; 
    height: 220px; 
    
    /* 中央に配置 */
    left: 50%;
    top: 10px; /* 上端から少し下に配置 */
    transform: translateX(-50%); /* 水平中央寄せ */
}

.bubble-security-top-left {
    top: 0px;        /* ★★★ ここを調整（上: 負の値、下: 正の値）★★★ */
    left: 100px;     /* ★★★ ここを調整（左へ: 小さく、右へ: 大きく）★★★ */
}

.bubble-security-top-right {
    top: 0px;        /* ★★★ ここを調整（上: 負の値、下: 正の値）★★★ */
    right: 90px;    /* ★★★ ここを調整（右へ: 小さく、左へ: 大きく）★★★ */
}
.security-solution-section {
    padding: 80px 0;
    background-color: var(--background-light);
}

.section-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 30px;
    text-align: center;
}

.orange-text {
    color: var(--main-orange);
}

.challenge-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.challenge-group .challenge-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    flex: 1;
    max-width: 250px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    border: 1px solid #ccc;
    box-shadow: none;
}

.solution-text {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    padding: 20px 0;
    margin-bottom: 40px;
}

.security-solution-text {
    font-size: 1.3rem;
    color: var(--main-orange);
}

.security-solution-text strong {
    font-weight: 900;
}

.divider {
    border-top: 2px dashed #ccc;
    margin: 60px 0;
}

.demo-image {
    height: 400px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #555;
    margin-top: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* ============================ */
/* 8. 料金プラン CTA セクションのスタイル */
/* ============================ */
.price-section {
    padding: 60px 0;
    text-align: center;
}

.price-cta-button {
    display: inline-block;
    background-color: var(--main-orange);
    color: #fff;
    text-decoration: none;
    padding: 30px 60px;
    border-radius: 10px;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.4;
    box-shadow: 0 5px 15px rgba(255, 102, 51, 0.4);
    transition: background-color 0.3s;
}

.price-cta-button:hover {
    background-color: #e55322;
}

/* ============================ */
/* 9. お問い合わせフォーム セクションのスタイル */
/* ============================ */

/* 1. ロゴの画像サイズを強制的に制限する */
header#header .logo img {
    /* 確認画面のロゴを小さくする（サイズは調整が必要） */
    width: 180px; /* 例: 適切なサイズに調整 */
    height: auto;
}

/* 2. ヘッダーの背景色を白に戻す（style.cssの干渉を防ぐ） */
header#header {
    background-color: #fff;
    padding: 20px 0; /* 上下のパディングも設定 */
}

/* 3. ロゴの位置を調整（左寄せにする） */
header#header .logo {
    margin: 0;
    padding-left: 5%; /* ページの左端に寄せる */
    text-align: left;
}

.contact-form-section {
    padding: 80px 0;
    background-color: #fff;
    background-image: url('../img/company_profile_background.png');
    background-repeat: repeat;
}

.contact-title {
    font-size: 2.0rem;
    font-weight: 900;
    color: var(--main-orange);
    text-align: center;
    margin-bottom: 20px;
}

.contact-subtitle {
    font-size: 3.0rem; /* CONTACT より小さく、説明文より大きく */
    font-weight: bold;
    color: var(--text-dark); /* 黒文字 (#333) に設定 */
    text-align: center;
    margin-top: -10px; /* CONTACT との距離を詰める */
    margin-bottom: 30px; /* 次の説明文との間にスペースを開ける */
}

.form-description {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.5rem;
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff8f0; /* 👈 company-link-box と同じ色（#fff8f0）を推奨 */
}

.form-group {
    margin-bottom: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.form-group:last-of-type {
    border-bottom: none;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
}

/* 必須タグのスタイル */
.required {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.required label {
    margin-right: 10px;
}

.required-tag {
    background-color: #ff6666;
    color: white;
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: bold;
}

/* ラジオボタン/チェックボックスのスタイル */
.large-question {
    display: block;
}

.large-question > label {
    margin-bottom: 15px;
}

.radio-options, .checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
}

.radio-options label, .checkbox-options label {
    display: flex;
    align-items: center;
    font-weight: normal;
    font-size: 1rem;
    cursor: pointer;
    /* ★★ 追記: 折り返しを許容し、幅を柔軟にする ★★ */
    white-space: nowrap; /* テキストの「その他」自体は折り返さないように */
    flex-shrink: 0;
    margin-right: 15px; /* アイテム間の右側の余白を確保 */
}

.other-input {
    width: 60px; /* ★★ 修正: 幅を縮小（例: 60px） ★★ */
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    margin-left: 5px;
    /* ★★ 追記: 親要素の幅に合わせて縮小するよう設定 ★★ */
    flex-shrink: 1;
}


/* 個人情報の取り扱いセクション */
.privacy-policy {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.privacy-policy h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.privacy-policy ol {
    margin-left: 20px;
    padding-left: 5px;
}

.privacy-policy a {
    color: var(--main-orange);
    text-decoration: underline;
}

/* 送信ボタンのスタイル */
.submit-button {
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 30px auto 0;
    background-color: var(--main-orange);
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #e55322;
}

/* フォームフッター（会社概要と電話）のスタイル */
.company-info-footer {
    display: flex; /* ★★ 修正: 横並びにする ★★ */
    flex-direction: row; /* ★★ 修正: 横並びを明確にする ★★ */
    align-items: stretch; /* ★★ 修正: ボックスの高さを揃える ★★ */
    max-width: 900px; /* 幅を 900px に拡大 */
    margin: 60px auto 0;
    padding: 30px 20px;
    gap: 30px; 
    border-radius: 10px;
}

.company-link-box {
    background-color: #fff8f0; /* 薄いオレンジの背景色 */
    text-align: center;
}

.company-link-box p:first-child {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.detail-link {
    /* ★★ 修正: CTAボタンのスタイルに変更 ★★ */
    display: inline-block;
    background-color: var(--main-orange);
    color: #fff;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    border-bottom: none; /* 下線を削除 */
    font-size: 1.1rem;
    transition: background-color 0.3s;
}

.company-link-box, .phone-contact {
    flex: 1; /* ★★ 修正: 横幅を均等に占有させる ★★ */
    max-width: none; /* 最大幅の制限を解除 */
    padding: 30px;
    border-radius: 10px;
    background-color: #fff8f0; 
    text-align: center;
}

.company-link-box p:first-child {
    font-size: 1.5rem; /* タイトルを大きく */
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.phone-contact {
    background-color: #fff8f0; /* 薄いオレンジの背景色 */
    text-align: center;
}

.phone-contact p:first-child { 
    /* 「お電話でのお問合せは、」のスタイル。デフォルトのままでOK */
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 5px;
}

.phone-contact .department {
    font-weight: 900;
    font-size: 1.2rem;
    margin-bottom: 5px;
    /* 部署名と番号を同じ行に表示したい場合は Flexbox を調整 */
    display: inline-block; 
}

.phone-contact .phone-number {
    font-size: 2.2rem; /* 番号を大きく強調 */
    font-weight: 900;
    color: var(--main-orange);
    display: block; /* 新しい行に移動 */
    margin-bottom: 5px;
}

.phone-contact .reception-time {
    font-size: 0.9rem;
    color: #666;
}

/* お問合せ確認の表示*/
.contact {
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 80px 40px;
    background-color: #ededed
}

.contact .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 60px
}

.contact .title p {
    color: #ff6101;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5
}

.contact .title h1,
.contact .title h3 {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3
}

.contact p {
    text-align: center
}

.contact>* {
    max-width: 800px;
    margin-inline: auto
}

.contact form {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto 40px
}

.contact form dl dt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500
}

.contact form dl dt .required {
    color: #ff6101;
    font-size: 12px;
    font-weight: 700
}

.contact form dl dd {
    margin-bottom: 10px
}

.contact form dl dd input,
.contact form dl dd textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d9d9d9;
    font-size: 16px;
    background-color: #fff
}

.contact form dl.inputs {
    margin-top: 60px
}

.contact form dl.inputs dt {
    color: #667676
}

.contact form dl.inputs dd {
    margin-bottom: 32px;
    padding: 8px 0px;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px
}

.contact form .privacy h4 {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .1em
}

.contact form .privacy p {
    font-size: 12px;
    line-height: 1.8;
    text-align: left
}

.contact form .privacy p a {
    color: #ff6101;
    text-decoration: underline
}

.contact .button-form {
    gap: 20px;
    margin-top: 0px;
    position: relative
}

.contact .button-form.protected .btnForward {
    font-size: 0em;
    transition: font-size 0s linear 0s
}

.contact .button-form.protected .btnForward::after {
    content: "送信中...";
    font-size: 1rem;
    font-size: 20px;
    animation: anime_blink 1.333s linear 0s infinite
}

.contact .button-form.protected::after {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    height: 100%;
    background: rgba(255, 0, 0, 0)
}

.contact .nav:not(.button-form) .btn {
    margin: 40px auto
}

.contact .nav {
    padding: 20px 0
}

.contact .nav .btn {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    padding: 15px;
    border: 1px solid #000;
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    background-color: #ff6101;
    transition: all .5s cubic-bezier(0.2, 1, 0.2, 1)
}

.contact .nav .btn.btnBack {
    background: rgba(0, 0, 0, 0);
    color: inherit
}

.contact .nav .btn.pagelink {
    text-align: center;
    line-height: 1.5;
    max-width: 480px;
    margin: 40px auto
}

.contact .nav .btn span {
    font-size: .75em
}

.contact .tel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 30px;
    border-top: 1px solid #000
}

.contact .tel h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em
}

.contact .tel .nav a {
    pointer-events: none;
    color: #fd6e2f;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em
}

.contact .tel .nav .time {
    margin-top: 5px;
    font-size: 15px;
    text-align: center;
    line-height: 1;
    letter-spacing: .1em
}

.footer {
    padding: 40px;
    background-color: #fff
}

.footer .copyright {
    font-size: 12px;
    text-align: center;
    line-height: 1.2
}

/* レスポンシブ調整 (PC版が主ですが、念のため主要部分のみ調整) */
@media (max-width: 1200px) {
    .feature-item {
        width: calc(33.333% - 20px);
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {

    /* ----------------------------------------------------- */
    /* 1. 基本設定と全体の強制リセット */
    /* ----------------------------------------------------- */
    
    .mobile-break {
        display: block !important; /* 強制的にブロック要素として表示し、改行させる */
        /* <br> が持つデフォルトの余白や高さをリセットする */
        content: ""; 
        margin: 0;
        padding: 0;
        line-height: 0;
    }

    /* 全ての要素に対して、画面幅を超えたはみ出しを厳しく制御 */
    * {
        max-width: 100vw !important; /* 最大幅をビューポートに制限 */
        box-sizing: border-box !important; 
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body {
        overflow-x: hidden !important; /* 横スクロールを強制的に無効化 */
        width: 100vw !important;
        min-width: 100vw !important; /* 最小幅も確実に制限 */
    }
    
    main {
        overflow-x: hidden !important; /* メインコンテンツ全体も制御 */
        width: 100vw !important;
        padding-top: 60px; /* 固定ヘッダー下のスペースは維持 */
        margin: 0 !important; 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
    }

    /* .container は 100% にして、左右のパディングで制御 */
    .container {
        width: 100%; 
        padding: 0 15px; 
        box-sizing: border-box;
        max-width: none;
        margin-left: 0 !important;
        margin-right: 0 !important; 
    }
    
    /* PC版ヘッダーを完全に非表示 */
    .pc-header, header .pc-header-content {
        display: none !important;
    }
    
    /* ヘッダー全体の設定 */
    header {
        padding: 0; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        position: fixed; 
        height: 60px; 
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999 !important;
        background-color: #e0e0e0; 
    }

    /* スマホ版ヘッダーを表示し、横並びを確定 */
    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 60px; 
        padding: 0 15px; 
        flex-wrap: nowrap;
        overflow-x: hidden;
        box-sizing: border-box;
        position: relative;
        z-index: 10000 !important;
    }
    
    /* ロゴの配置 */
    .mobile-header .logo img {
        height: 20px; 
        flex-shrink: 0;
        order: 1; 
    }
    
    /* お問い合わせボタンの配置と調整 */
    .contact-button-header {
        order: 2; 
        margin: 0 auto 0 15px; 
        font-size: 0.9rem; 
        padding: 8px 15px;
        flex-shrink: 1;
        white-space: nowrap;
    }

    /* ハンバーガーボタンの配置 */
    .menu-toggle {
        order: 3; 
        flex-shrink: 0;
        padding: 10px;
        z-index: 10001 !important;
    }

    /* モバイルナビゲーション（ハンバーガーメニュー本体）*/
    .mobile-nav {
        display: block; 
        position: fixed; 
        top: 60px; 
        left: 0;
        width: 100%;
        height: calc(100vh - 60px); 
        background-color: #cad8ef; 
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 9998 !important; /* header のすぐ下に配置 */
        transition: transform 0.3s ease-out;
        transform: translateY(-100%);
        overflow-y: auto; 
    }
    
    .mobile-nav.is-open {
        transform: translateY(0); /* 画面内に移動して表示 */
    }

    .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-nav li {
        border-bottom: 1px solid #eee;
    }
    .mobile-nav a {
        display: block;
        padding: 15px 15px;
        text-align: left;
        font-size: 1rem;
        font-weight: bold;
    }
    
    /* ----------------------------------------------------- */
    /* 2. ヒーロー/問題提起セクション */
    /* ----------------------------------------------------- */
    
    .hero-section {
       padding: 80px 0;
        min-height: 45vh; 
        height: auto; 
        background: url('../img/title.png') no-repeat center center;
        background-size: cover; 
        overflow-x: hidden;
    }

    .hero-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
        color: #fff;
    }
    
    .hero-cta-button {
        font-size: 1.2rem;
        padding: 12px 30px;
        width: 80%;
        max-width: 300px;
    }

    /* 問題提起セクション (PC版スタイル - 新規) のリセット */
    .problem-solution-section {
        width: 100% !important; /* 80% から 100% に戻す */
        margin: 0 auto !important; /* 中央寄せを再適用 */
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important; /* 念のため強制 */
        padding-bottom: 50px; 

    }

    .main-content-chevron-container {
        clip-path: none; 
        padding-bottom: 20px; 
    }

    .question-title {
        font-size: 1.3rem;
    }

    .problem-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto; 
        padding-top: 0;
        gap: 15px; 
        /* 💥 修正: 幅を 100% にし、左右の強制 padding/margin を削除 */
        margin: 0 auto !important; 
        padding: 0 !important; 
        width: 100%; /* 100vw ではなく 100% に戻す */ 
    }
    
    .problem-item {
        /* calc(100% - 30px) から 100% にし、padding で制御 */
        width: 90% !important; /* 画面幅に対して 90% に縮小 */
        margin: 0 auto 15px auto !important; 
        padding: 15px;
        box-sizing: border-box;
    }
    
    .problem-item p {
        font-size: 1.1rem; 
    }

    .icon-center {
        display: none;
    }
    
    /* すべての problem-item の絶対配置とズレを無効化 */
    .problem-container .problem-item:nth-child(1),
    .problem-container .problem-item:nth-child(3),
    .problem-container .problem-item:nth-child(4) { 
        position: static !important; 
        left: auto !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 90% !important; /* 90% に統一 */
        margin: 0 auto 15px auto !important; 
    }

    .solution-intro {
        font-size: 2rem; 
        line-height: 1.3;
        padding: 30px 0 0;
    }
    
    /* ----------------------------------------------------- */
    /* 3. ジョーシスとは / 機能一覧 */
    /* ----------------------------------------------------- */
    
    .about-josys-section h2 {
        font-size: 2.2rem; 
        margin-bottom: 20px; 
    }
    
    .about-josys-section .content-box {
        padding: 40px 15px; 
        background-image: none;
    }
    
    .about-josys-section .full-definition {
        font-size: 1.1rem; 
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.5;
    }

    .about-josys-visual-wrapper {
        margin: -30px auto 0 auto; 
        height: 350px; 
    }

    .ellipse-background {
        display: none;
    }

    .combined-screenshot {
        width: 90%;
        transform: translate(-50%, -50%); 
        max-width: none;
    }
    
    .what-josys-can-do-section {
        padding: 40px 0;
    }
    
    .what-josys-can-do-section h2 {
        font-size: 2.0rem; 
    }

    .feature-grid {
        gap: 15px; 
        padding: 0;
        /* 💥 修正/確認: 縦方向（column）でアイテムを中央寄せにする */
        display: flex; /* 既存の設定を維持 */
        flex-direction: column; /* 💥 追加: 縦並びを明示 */
        align-items: center; /* 💥 追加: アイテムを水平方向の中央に寄せる */
    }

    .feature-item {
        /* 💥 修正: 幅を明示的に設定し、画面の 90% にすることで、左右に余白を設ける */
        width: 90%; 
        margin-bottom: 15px;
        flex-grow: 1;
        max-width: none;
    }
    
    /* ----------------------------------------------------- */
    /* 4. JOSYS AI セクション */
    /* ----------------------------------------------------- */
    
    .ai-title-container {
        position: relative; 
        width: 100%;
        
        /* 💥 修正: 高さを確保し、画像が収まるようにする */
        height: 100px; /* 👈 150px から 250px に増やす */
        margin-bottom: 0px; /* 20px から 0px へ変更 */
        /* 上のマージンは -50px を維持 */
        margin-top: 0px;
    }

    .ai-title-banner-img {
        position: absolute;
        top: 0; 
        left: 0 !important; 
        width: 100%;
        /* 💥 修正: height: 100% にし、親要素の高さに画像を合わせる */
        height: 95%; 
        transform: none !important; 
        
        /* 💥 修正: object-fit を cover にして、コンテナ全体を覆い隠す */
        object-fit: cover !important;
    }

    .ai-heading {
        /* 💥 修正: テキストの表示と階層を維持 */
        display: block !important; 
        position: absolute !important; 
        z-index: 10 !important; 
        
        /* 中央寄せを強制的に適用 */
        top: 50% !important; 
        left: 50% !important;
        transform: translate(-50%, -50%) !important; 
        
        /* テキストのスタイルを維持 */
        font-size: 1.6rem;
        width: 90%;
        color: #fff; 
        text-align: center;
    }

    .ai-illustration {
        /* 修正: 上のマージンを減らす */
        margin-top: -30px; /* -50px から -30px へ調整（必要に応じて調整） */
        /* 下のマージンは 10px を維持 */
        margin-bottom: 10px;
    }
    
    .ai-illustration .ai-feature-img {
        width: 100%; 
        max-width: none; 
    }

    .ai-features {
        flex-direction: column; 
        gap: 15px;
        margin-top: 10px; 
        padding: 0 15px;
    }

    .ai-item {
        width: 100%; 
        min-height: auto;
        padding: 20px;
    }

    .video-demo-section video {
        width: 100%; 
        height: auto; 
        max-width: none; 
        display: block; 
        margin: 0 auto; 
        object-fit: contain; 
    }

    /* ----------------------------------------------------- */
    /* 5. 活用事例セクション - 最終調整（画像非表示） */
    /* ----------------------------------------------------- */
    
    .screen-solution-text {
        font-size: 1.3rem; /* 👈 ここを調整してください（例: 1.0rem、0.9rem など） */
        line-height: 1.4;
        text-align: center;
        /* margin-bottom は 0 を維持 */
    }
    
    /* 💥 修正: 内部の強調テキストのサイズも合わせて調整 */
    .screen-solution-text .highlight-text-orange {
        font-size: 1.6rem; /* 👈 基本サイズと合わせるか、少し大きく調整 */
        font-weight: 900;
    }

    .use-case-title-box {
        /* 幅を 90% に固定し、左右に適切な余白を持たせる */
        width: 90% !important; 
        max-width: none !important; /* PC版の最大幅を無視 */
        
        /*  最重要: 左右のマージンを auto に強制し、中央に寄せる */
        margin-left: auto !important; 
        margin-right: auto !important; 
        margin-top: 20px !important;
        margin-bottom: 30px !important; 
        
        /* パディングは維持 */
        padding: 20px 15px; 
        border-radius: 30px; 
    }
    
    /*  修正: 内部の見出し (h2.use-case-title) のフォントサイズを縮小 */
    .use-case-title {
        font-size: 1.3rem; /* h2 の基本サイズを縮小 */
    }

    /* 修正: 内部の強調テキスト（use-case-large-text）のサイズも縮小 */
    .use-case-title .use-case-large-text {
        font-size: 1.5em; /* 親要素 (1.4rem) の 1.5倍に設定 */
        line-height: 1.2; 
    }
    
    /* 修正: 中央の人物イラストを完全に非表示にする */
    .challenge-man, .cost-woman, .security-pople {
        display: none !important; /* 人物画像を非表示 */
        position: static !important; 
        transform: none !important; 
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important; 
        padding: 0 !important;
    }

    /* 💥 修正: チャレンジグリッド (吹き出しのコンテナ) */
    .challenge-grid, .cost-grid, .security-grid {
        position: relative; 
        width: 100%;
        height: auto; 
        padding: 10px 0; 
        margin: 0 auto 30px auto; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    }

    /* 💥 修正: 吹き出しの背景画像を完全に非表示にする */
    .bubble .bubble-bg-img,
    .bubble .bubble-ui-img {
        display: none !important; 
    }
    
    /* 💥 修正: すべての吹き出しをボックス形式で表示し、絶対配置を無効化 */
    .bubble, 
    .bubble-top-left, .bubble-cost-top-left, .bubble-security-top-left,
    .bubble-top-right, .bubble-cost-top-right, .bubble-security-top-right,
    .bubble-bottom-left, .bubble-bottom-right, 
    .bubble-center-cost, .bubble-center-security {
        position: static !important; /* 絶対配置を無効化 */
        transform: none !important; 
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        
        display: block !important; /* ブロック要素として縦に並べる */
        width: 90%; 
        height: auto; 
        margin: 0 auto 10px auto !important; /* センターマージン */
        
        /* テキストを読みやすくするためのデザイン */
        background-color: #fff8f0; 
        border: 1px dashed var(--main-orange); /* 点線にして吹き出し感を残す */
        border-radius: 8px;
        padding: 15px;
        box-sizing: border-box;
    }

    /* 吹き出しのテキスト (モバイル向け) */
    .bubble .bubble-text {
        position: static !important; 
        transform: none !important;
        font-size: 1.0rem; 
        line-height: 1.4;
        font-weight: bold; /* テキストを目立たせる */
        color: var(--text-dark);
        width: 100%;
        text-align: center;
        padding: 0;
    }
    
    .solution-lead-icon {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
    }

    /* 解決策テキストのラッパーの調整 */
    .screen-solution-wrapper .solution-text-with-icon {
        /* アイコンがなくなった分、中央寄せを維持 */
        justify-content: center;
        /* 上下の余白を調整 */
        margin: 15px auto 0 auto;
    }
    
    /* 解決策画像内の吹き出しも非表示 */
    .solution-bubble {
        display: flex !important; 
        position: absolute !important;
        
        /* サイズを維持（または少し大きく調整） */
        width: 250px; /* 140px から 150px に微調整 */
        height: 100px; /* 50px から 60px に微調整 */
        
        top: 10px !important; 
        left: 50% !important; 
        right: auto !important;
        transform: translateX(-50%); 
        
        /* 追加: 背景色を透明に強制し、四角形の表示を防ぐ */
        background-color: transparent !important; 
        border: none !important; 
        
        z-index: 10;
        justify-content: center;
        align-items: center;
    }

    /* 吹き出し (ライセンス管理画面イメージ) の位置調整 */
    /* この吹き出しは「security-ui.png」の上にあるため、画像コンテナの左上に配置 */
    .image-with-caption:first-child .solution-bubble { 
        top: 10px !important; 
        left: 5% !important; /* 左端から 5% の位置に配置 */
        transform: none !important; /* 中央寄せを無効化 */
    }

    /* 吹き出し (ITデバイス管理画面イメージ) の位置調整 */
    /* この吹き出しは非表示でOKとのことですが、念のため右上に配置 */
    .image-with-caption:last-child .solution-bubble {
        top: 10px !important; 
        right: 5% !important; /* 右端から 5% の位置に配置 */
        left: auto !important; 
        transform: none !important;
    }

    /* 💥 修正: 吹き出しのSVG画像とテキストを再表示し、サイズを調整 */
    .solution-bubble .bubble-ui-img {
        display: block !important;
        /* 💥 修正: contain から fill に変更し、コンテナ全体を埋めるようにする */
        object-fit: fill !important; 
        
        /* 念のため、画像が親要素のサイズになるよう調整 */
        width: 100%;
        height: 100%;
    }
    
    .solution-bubble .bubble-ui-text {
        display: block !important;
        font-size: 0.65rem; 
        line-height: 1.2;
        /* テキストを中央に再配置 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    /* 吹き出し (ライセンス管理画面イメージ) の位置調整 */
    .image-with-caption:first-child .solution-bubble { 
        top: 10px !important; 
        left: 5% !important; 
        transform: none !important;
    }
    /* 吹き出し (ITデバイス管理画面イメージ) の位置調整 */
    .image-with-caption:last-child .solution-bubble {
        top: 10px !important; 
        right: 5% !important; 
        left: auto !important; 
        transform: none !important;
    }

    
    .arrow-container {
        /* コンテナのサイズを縮小 */
        width: 60px !important; /* 100px から 60px に縮小 */
        height: 20px !important; /* 30px から 20px に縮小 */
        
        /* 中央寄せの設定は維持 */
        margin: 20px auto !important;
        text-align: center !important; 
        padding: 0 !important;
    }
    
    /* 💥 修正: 疑似要素（矢印本体）のサイズを縮小 */
    .arrow-container::after {
        /* 矢印の幅を縮小 (60px から 30px に) */
        border-left: 30px solid transparent !important; 
        border-right: 30px solid transparent !important; 
        
        /* 矢印の高さを縮小 (60px から 30px に) */
        border-top: 30px solid var(--main-orange) !important; 
        
        /* 中央寄せの transform は維持 */
        transform: translateX(-50%) !important; 
        
        /* 影を維持 */
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
    }

    .solution-images .image-with-caption {
        /* PC版で設定されていた右への強制的なズレを完全に無効化 */
        margin-left: 0 !important; /* PC版の 100px のズレをリセット */
        transform: none !important; /* PC版の 50px のズレをリセット */
        
        /* 中央寄せを強制 */
        margin-right: auto !important; 
        margin-left: auto !important;
        
        /* 幅を調整し、画面中央に配置されるようにする */
        width: 100%;
        max-width: none;
        
        /* 吹き出しのための上部パディングを維持 */
        padding-top: 50px; 
    }

    .solution-image {
        width: 90%; /* 画面幅に対して 90% に縮小 */
        max-width: none;
        height: auto;
        
        /* 画像をブロック要素として扱い、中央に配置 */
        display: block !important; 
        margin-left: auto !important; 
        margin-right: auto !important; 
    }

    /* ----------------------------------------------------- */
    /* 6. お問い合わせフォーム / フッター */
    /* ----------------------------------------------------- */
    
    .price-section {
        padding: 30px 15px;
    }

    .price-cta-button {
        padding: 15px 30px;
        font-size: 1.2rem;
        width: 100%;
        max-width: none;
    }
    
    .contact-form-section {
        padding: 40px 15px;
    }

    .contact-subtitle {
        font-size: 1.8rem; 
        margin-bottom: 20px;
    }

    .contact-form {
        padding: 20px 15px; 
    }

    .radio-options, .checkbox-options {
        flex-direction: column; 
        gap: 10px;
    }

    .company-info-footer {
        flex-direction: column;
        gap: 20px;
        margin: 40px auto 0;
        padding: 20px 0;
    }

    .company-link-box, .phone-contact {
        width: 100%;
        flex: none;
        padding: 20px;
    }

    .phone-contact .phone-number {
        font-size: 1.8rem;
    }
    .phone-contact .department {
        font-size: 1rem;
    }

    .submit-button {
        display: block !important; /* ブロック要素であることを強制 */
        width: 80% !important; /* 幅は 80% を維持 */
        max-width: 400px;
        
        /* 💥 最重要: 左右のマージンを auto に強制し、中央に寄せる */
        margin: 30px auto 0 auto !important; /* 上下のマージンを維持しつつ、左右を auto に */
        
        /* フォントサイズとパディングは既存のモバイル設定を維持 */
        padding: 15px 30px;
        font-size: 1.4rem;
    } 

        /* ============================ */
    /* 9. お問い合わせフォーム セクションのスタイル */
    /* ============================ */

    /* 1. ロゴの画像サイズを強制的に制限する */ 
    header#header .logo img {
        /* 確認画面のロゴを小さくする（サイズは調整が必要） */
        width: 180px; /* 例: 適切なサイズに調整 */
        height: auto;
    }

    /* 2. ヘッダーの背景色を白に戻す（style.cssの干渉を防ぐ） */
    header#header {
        background-color: #fff;
        padding: 20px 0; /* 上下のパディングも設定 */
    }

    /* 3. ロゴの位置を調整（左寄せにする） */   
    header#header .logo {
        margin: 0;
        padding-left: 5%; /* ページの左端に寄せる */
        text-align: left;
    }

    .contact-form-section {
        padding: 80px 0;
        background-color: #fff;
        background-image: url('../img/company_profile_background.png');
        background-repeat: repeat;
    }

    .contact-title {
        font-size: 2.0rem;
        font-weight: 900;
        color: var(--main-orange);
        text-align: center;
        margin-bottom: 20px;
    }

    .contact-subtitle {
        font-size: 2.5rem; /* CONTACT より小さく、説明文より大きく */
        font-weight: bold;
        color: var(--text-dark); /* 黒文字 (#333) に設定 */
        text-align: center;
        margin-top: -10px; /* CONTACT との距離を詰める */
        margin-bottom: 30px; /* 次の説明文との間にスペースを開ける */
    }

    .form-description {
        text-align: center;
        margin-bottom: 40px;
        font-size: 1.0rem;
    }

    .contact-form {
        max-width: 800px;
        margin: 0 auto;
        padding: 30px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background-color: #fff8f0; /* 👈 company-link-box と同じ色（#fff8f0）を推奨 */
    }

    .form-group {
        margin-bottom: 20px;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    .form-group:last-of-type {
        border-bottom: none;
    }

    .form-group label {
        display: block;
        font-weight: bold;
        margin-bottom: 8px;
        font-size: 1.1rem;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1rem;
        box-sizing: border-box;
    }

    .form-group textarea {
        resize: vertical;
    }

    /* 必須タグのスタイル */
    .required {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .required label {
        margin-right: 10px;
    }

    .required-tag {
        background-color: #ff6666;
        color: white;
        font-size: 0.75rem;
        padding: 3px 6px;
        border-radius: 3px;
        font-weight: bold;
    }

    /* ラジオボタン/チェックボックスのスタイル */
    .large-question {
        display: block;
    }

    .large-question > label {
        margin-bottom: 15px;
    }

    .radio-options, .checkbox-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15px 30px;
    }

    .radio-options label, .checkbox-options label {
        display: flex;
        align-items: center;
        font-weight: normal;
        font-size: 1rem;
        cursor: pointer;
        /* ★★ 追記: 折り返しを許容し、幅を柔軟にする ★★ */
        white-space: nowrap; /* テキストの「その他」自体は折り返さないように */
        flex-shrink: 0;
        margin-right: 15px; /* アイテム間の右側の余白を確保 */
    }

    .other-input {
        width: 60px; /* ★★ 修正: 幅を縮小（例: 60px） ★★ */
        display: inline-block;
        vertical-align: middle;
        padding: 5px;
        margin-left: 5px;
        /* ★★ 追記: 親要素の幅に合わせて縮小するよう設定 ★★ */
        flex-shrink: 1;
    }

    /* 個人情報の取り扱いセクション */
    .privacy-policy {
        background-color: #f0f0f0;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 30px;
        font-size: 0.9rem;
    }

    .privacy-policy h3 {
        font-size: 1.2rem;
        color: var(--text-dark);
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
    }

    .privacy-policy ol {
        margin-left: 20px;
        padding-left: 5px;
    }

    .privacy-policy a {
        color: var(--main-orange);
        text-decoration: underline;
    }

    /* 送信ボタンのスタイル */
    .submit-button {
        display: block;
        width: 80%;
        max-width: 400px;
        margin: 30px auto 0;
        background-color: var(--main-orange);
        color: #fff;
        border: none;
        padding: 15px 30px;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .submit-button:hover {
        background-color: #e55322;
    }

    /* フォームフッター（会社概要と電話）のスタイル */
    .company-info-footer {
        display: flex !important; /* 強制的にFlexboxを適用 */
        flex-direction: column !important; /* 強制的に縦並びにする */
        align-items: center !important; /* アイテム全体を中央寄せ */
        max-width: none !important; /* PC版の最大幅の制限を解除 */
        width: 100% !important; /* 幅を100%に */
        margin: 40px auto 0 !important;
        padding: 20px 15px !important; /* 左右にパディングを追加 */
        gap: 20px !important;
        border-radius: 10px;
    }

    .company-link-box {
        background-color: #fff8f0; /* 薄いオレンジの背景色 */
        text-align: center;
    }


    .company-link-box, .phone-contact {
        flex: none !important; /* flex-growなどの影響をなくす */
        width: 90% !important; /* ボックス自体の幅を画面の90%に */
        max-width: 400px !important; /* 最大幅を設定しておくと安心 */
        padding: 20px !important;
        border-radius: 10px;
        background-color: #fff8f0; 
        text-align: center;
    }

    .detail-link {
        /* ★★ 修正: CTAボタンのスタイルに変更 ★★ */
        display: inline-block;
        background-color: var(--main-orange);
        color: #fff;
        text-decoration: none;
        padding: 10px 30px;
        border-radius: 5px;
        font-weight: bold;
        margin-top: 20px;
        border-bottom: none; /* 下線を削除 */
        font-size: 1.1rem;
        transition: background-color 0.3s;
    }

    .company-link-box, .phone-contact {
        flex: 1; /* ★★ 修正: 横幅を均等に占有させる ★★ */
        max-width: none; /* 最大幅の制限を解除 */
        padding: 30px;
        border-radius: 10px;
        background-color: #fff8f0; 
        text-align: center;
    }

    .company-link-box p:first-child {
        font-size: 1.3rem; /* タイトルを大きく */
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 5px;
    }

    .phone-contact {
        background-color: #fff8f0; /* 薄いオレンジの背景色 */
        text-align: center;
    }

    .phone-contact p:first-child { 
        /* 「お電話でのお問合せは、」のスタイル。デフォルトのままでOK */
        font-size: 1rem;
        font-weight: normal;
        margin-bottom: 5px;
    }

    .phone-contact .department {
        font-weight: 900;
        font-size: 1.2rem;
        margin-bottom: 5px;
        /* 部署名と番号を同じ行に表示したい場合は Flexbox を調整 */
        display: inline-block; 
    }

    .phone-contact .phone-number {
        font-size: 2.2rem; /* 番号を大きく強調 */
        font-weight: 900;
        color: var(--main-orange);
        display: block; /* 新しい行に移動 */
        margin-bottom: 5px;
    }

    .phone-contact .reception-time {
        font-size: 0.9rem;
        color: #666;
    }

    /* お問合せ確認の表示*/
    .contact {
        max-width: none;
        margin: 0 calc(50% - 50vw);
        padding: 80px 40px;
        background-color: #ededed
    }

    .contact .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 60px
    }

    .contact .title p {
        color: #ff6101;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5
    }

    .contact .title h1,
    .contact .title h3 {
        font-size: 38px;
        font-weight: 700;
        line-height: 1.3
    }

    .contact p {
        text-align: center  
    }

    .contact>* {
        max-width: 800px;
        margin-inline: auto
    }

    .contact form {
        display: flex;
        flex-direction: column;
        gap: 40px;
        max-width: 800px;
        margin: 0 auto 40px
    }

    .contact form dl dt {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 500
    }

    .contact form dl dt .required {
        color: #ff6101;
        font-size: 12px;
        font-weight: 700
    }

    .contact form dl dd {
        margin-bottom: 10px
    }

    .contact form dl dd input,
    .contact form dl dd textarea {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #d9d9d9;
        font-size: 16px;
        background-color: #fff
    }

    .contact form dl.inputs {
        margin-top: 60px
    }

    .contact form dl.inputs dt {
        color: #667676
    }

    .contact form dl.inputs dd {
        margin-bottom: 32px;
        padding: 8px 0px;
        border: none;
        border-bottom: 1px solid #d9d9d9;
        font-size: 16px
    }

    .contact form .privacy h4 {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .contact form .privacy p {
        font-size: 12px;
        line-height: 1.8;
        text-align: left
    }

    .contact form .privacy p a {
        color: #ff6101;
        text-decoration: underline
    }

    .contact .button-form {
        gap: 20px;
        margin-top: 0px;
        position: relative
    }   

    .contact .button-form.protected .btnForward {
        font-size: 0em;
        transition: font-size 0s linear 0s
    }

    .contact .button-form.protected .btnForward::after {
        content: "送信中...";
        font-size: 1rem;
        font-size: 20px;
        animation: anime_blink 1.333s linear 0s infinite
    }

    .contact .button-form.protected::after {
        content: "";
        position: absolute;
        top: 0;
        left: -20px;
        width: calc(100% + 40px);
        height: 100%;
        background: rgba(255, 0, 0, 0)
    }

    .contact .nav:not(.button-form) .btn {
        margin: 40px auto
    }

    .contact .nav {
        padding: 20px 0
    }

    .contact .nav .btn {
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 12px;
        width: 100%;
        max-width: 400px;
        padding: 15px;
        border: 1px solid #000;
        border-radius: 50px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        background-color: #ff6101;
        transition: all .5s cubic-bezier(0.2, 1, 0.2, 1)
    }

    .contact .nav .btn.btnBack {
        background: rgba(0, 0, 0, 0);
        color: inherit
    }

    .contact .nav .btn.pagelink {
        text-align: center;
        line-height: 1.5;
        max-width: 480px;
        margin: 40px auto
    }

    .contact .nav .btn span {
        font-size: .75em
    }

    .contact .tel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 800px;
        margin: 0 auto;
        padding-top: 30px;
        border-top: 1px solid #000  
    }

    .contact .tel h4 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .contact .tel .nav a {
        pointer-events: none;
        color: #fd6e2f;
        font-size: 34px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .05em
    }

    .contact .tel .nav .time {
        margin-top: 5px;
        font-size: 15px;
        text-align: center;
        line-height: 1;
        letter-spacing: .1em
    }

    .footer {
        padding: 40px;
        background-color: #fff
    }

    .footer .copyright {
        font-size: 12px;
        text-align: center;
        line-height: 1.2
    }
}

@media screen and (min-width: 768px) {
    
    /* 1. ボタンコンテナ (.button-form) を横並び (Flexbox) に設定し、間隔を調整 */
    .button-form.nav {
        display: flex;
        justify-content: center; /* ボタン全体を中央に配置 */
        gap: 20px; /* ボタン間の間隔を確保 */
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. ボタンの固定幅を解除し、均等な幅を割り当てる */
    /* form.css で設定されている固定幅(em)を上書きします */
    .button-form.nav a,
    .button-form.nav button {
        width: auto !important; /* 固定幅を解除 */
        max-width: 45%; /* ボタンの最大幅を制限（任意） */
        flex-grow: 1; /* 均等に幅を占有させる */
        margin: 0 !important; /* form.css のマージンをリセット */
    }
    
    /* 3. 元の .btn-back に設定されている右マージンをリセット */
    .btn-back {
        margin-right: 0 !important;
    }
}