@charset "UTF-8";
/* ==========================================================================
   【基盤デザイン：ドット背景と基本設定】
   ・管理メモ：全ページ共通の質感（ドット）をここで担保する。
   ========================================================================== */

body {
    background-color: #f0f6fa;
    /* 1.5pxのドットを25px間隔で配置する共通の質感 */
    background-image: radial-gradient(#dce4ec 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    margin: 0;
    padding: 0;
}

/* 基本のテキストカラーとフォント設定 */
body, p, li, h1, h2, h3 {
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 共通タグの装飾（用途地域の横にあるグレーのタグなど） */
.u-tag {
    background: #e0e7ed;
    color: #0070b8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin: 0 4px;
    vertical-align: middle;
}/* ==========================================================================
   【基盤デザイン：ドット背景と基本設定】
   ・管理メモ：全ページ共通の質感（ドット）をここで担保する。
   ========================================================================== */

body {
    background-color: #f0f6fa;
    /* 1.5pxのドットを25px間隔で配置する共通の質感 */
    background-image: radial-gradient(#dce4ec 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    margin: 0;
    padding: 0;
}

/* 基本のテキストカラーとフォント設定 */
body, p, li, h1, h2, h3 {
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 共通タグの装飾（用途地域の横にあるグレーのタグなど） */
.u-tag {
    background: #e0e7ed;
    color: #0070b8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin: 0 4px;
    vertical-align: middle;
}/* ==========================================================================
   【基盤デザイン：ドット背景と基本設定】
   ・管理メモ：全ページ共通の質感（ドット）をここで担保する。
   ========================================================================== */

body {
    background-color: #f0f6fa;
    /* 1.5pxのドットを25px間隔で配置する共通の質感 */
    background-image: radial-gradient(#dce4ec 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    margin: 0;
    padding: 0;
}

/* 基本のテキストカラーとフォント設定 */
body, p, li, h1, h2, h3 {
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 共通タグの装飾（用途地域の横にあるグレーのタグなど） */
.u-tag {
    background: #e0e7ed;
    color: #0070b8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin: 0 4px;
    vertical-align: middle;
}@charset "UTF-8";

/**
 * ファイル名: style.css
 * 作成日: 2026-04-01
 * 管理部署: システム管理課
 * --------------------------------------------------------------------------
 * 【管理メモ】
 * 1. サイト全体の基盤。余白計算のミスを防ぐため box-sizing を徹底。
 * 2. 企業指定色をユーティリティクラス化。
 * ==========================================================================
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ==========================================================================
   【基盤デザイン：ドット背景と基本設定】
   ・管理メモ：全ページ共通の質感（ドット）をここで担保する。
   ========================================================================== */

body {
    background-color: #f0f6fa;
    /* 1.5pxのドットを25px間隔で配置する共通の質感 */
    background-image: radial-gradient(#dce4ec 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    margin: 0;
    padding: 0;
}

/* 基本のテキストカラーとフォント設定 */
body, p, li, h1, h2, h3 {
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 共通タグの装飾（用途地域の横にあるグレーのタグなど） */
.u-tag {
    background: #e0e7ed;
    color: #0070b8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin: 0 4px;
    vertical-align: middle;
}
/* ユーティリティクラス */
.u-blue  { color: #0070b8 !important; } /* 御幸ブルー */
.u-pink  { color: #e6007e !important; } /* ミユキピンク */
.u-bold  { font-weight: bold; }
.u-small { font-size: 0.8rem; }
.u-pc-only { display: block; }

.l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media screen and (max-width: 768px) {
    .u-pc-only { display: none !important; }
}

/* --------------------------------------------------------------------------
   Common Component: パンくずリスト (Breadcrumb)
   Memo: 全ページ共通の階層ナビゲーション。
   階層が増えた場合も <li> を追加するだけでデザインが適用されます。
   -------------------------------------------------------------------------- */

/* パンくずエリア全体の背景と余白 */
.c-breadcrumb {
    background-color: #f9fbfc; /* 薄いグレーでメインコンテンツと視覚的に分離 */
    padding: 15px 0;
    border-bottom: 1px solid #dce4ec;
    margin-bottom: 30px;
}

/* リスト構造の初期化と横並び設定 */
.c-breadcrumb__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    font-weight: bold;
}

/* 各階層のテキストカラー（現在地はグレー） */
.c-breadcrumb__item {
    display: flex;
    align-items: center;
    color: #888;
}

/* 区切り文字「 > 」の挿入設定（最後の項目以外に適用） */
.c-breadcrumb__item:not(:last-child)::after {
    content: '>';
    margin: 0 12px;
    color: #ccc;
    font-size: 0.7rem;
}

/* リンク（TOPなど）のカラー：御幸ブルー */
.c-breadcrumb__link {
    color: #0070b8; 
    text-decoration: none;
    transition: color 0.2s ease;
}

/* ホバー時のアクション：ミユキピンクへの変化 */
.c-breadcrumb__link:hover {
    color: #e6007e;
    text-decoration: underline;
}

/* スマートフォン表示時の最適化 */
@media screen and (max-width: 768px) {
    .c-breadcrumb {
        padding: 10px 0;
    }
    .c-breadcrumb__list {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   【ヘッダー統一設計：基礎知識シリーズ専用】
   ・目的：全ページのヘッダー構造を統一し、重厚感と読みやすさを両立させる。
   ========================================================================== */

.hero-header-full {
    position: relative;
    width: 100%;
    height: 450px; /* PC時の高さを統一 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* 垂直中央 */
    margin-bottom: 0;
    overflow: hidden;
}

/* 背景画像を少し暗くして文字を浮かび上がらせるオーバーレイ */
.hero-header-full::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

/* テキストエリアの配置 */
.hero-inner-left {
    position: relative;
    z-index: 2;
    padding-left: 10%; /* 画面左端から少し離す（コンテナと合わせる） */
    max-width: 800px;
    box-sizing: border-box;
}

/* シリーズ名のラベル（ピンクの文字） */
.hero-inner-left p.u-pink {
    color: #e6007e !important; /* ミユキピンク */
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

/* メインタイトル（h1） */
.hero-header-full h1 {
    color: #ffffff !important;
    font-size: 3rem; /* どっしりとしたサイズ */
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* 視認性確保の影 */
}

/* スマホ対応：画面に合わせて文字サイズを調整 */
@media screen and (max-width: 768px) {
    .hero-header-full {
        height: 350px;
    }
    .hero-inner-left {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero-header-full h1 {
        font-size: 2rem;
    }
}
/* スマートフォン表示（崩れ防止用の高さ調整） */
@media screen and (max-width: 768px) {
    .hero-header-full {
        height: 280px !important; /* スマホ時は280pxに固定 */
    }
    .hero-inner-left h1 {
        font-size: 2rem;
    }
}
/* ----------------------------------------------------------------------
   印刷用最適化：100%設定で用紙いっぱいに表示（自動縮小防止）
   ---------------------------------------------------------------------- 
   【管理メモ】
   ・ブラウザの「縮小して全体を表示」を回避するため、絶対数値を指定。
   ・A4横幅（210mm）に対し、余白を除いた有効幅をフル活用。
   ---------------------------------------------------------------------- */

@media print {
    /* 1. ページ全体の余白を最小化 */
    @page {
        margin: 10mm; /* 上下左右の余白を10mmに固定 */
    }

    /* 2. 基本フォントサイズを大きく底上げ */
    html, body {
        width: 210mm; /* A4幅を明示 */
        font-size: 14pt !important; /* 標準(10.5pt)より大きく設定 */
        line-height: 1.6 !important;
        color: #000 !important;
        background: #fff !important;
    }

    /* 3. コンテナの制限を解除し、用紙幅にフィットさせる */
    .l-container, .c-cs-section, .c-cs-content, .c-claim-paper {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px !important;
        box-shadow: none !important;
    }

    /* 4. カードレイアウトの調整（横幅を稼ぐ） */
    .c-skill-grid--2col, .c-psychology-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15mm !important;
        margin: 20px 0 !important;
    }

    .c-skill-grid--3col {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10mm !important;
    }

    /* 5. 各パーツの視認性強化 */
    .c-skill-card, .c-psychology-card, .c-point-card {
        padding: 25px !important;
        border: 1.5pt solid #0070b8 !important; /* 枠線を太くして視認性を確保 */
        background-color: #fcfdfe !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        page-break-inside: avoid; /* カード内での改ページを禁止 */
    }

    /* タイトルの文字サイズをさらに大きく */
    .c-cs-section__main-title { font-size: 20pt !important; }
    .c-cs-content__sub-title { font-size: 16pt !important; }
    .c-skill-card__title { font-size: 14pt !important; }

    /* 6. 不要な要素の非表示 */
    .c-breadcrumb, .p-index-card__footer {
        display: none !important;
    }
}

/* * 1. 動画セクションの外枠設定
 * セクション間の余白を確保し、視認性を高めるためのブロック定義です。
 */
.c-curriculum-section {
    margin-top: 60px;
    margin-bottom: 60px;
}

/* * 2. フレックスボックスによる横並び配置
 * 動画アイテムを並列に配置し、画面幅が狭い場合は自動で折り返す設定です。
 */
.c-video-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 24px; /* アイテム間の余白を均等に保持 */
}

/* * 3. 各動画アイテムのレスポンシブ幅設定
 * PCでは2カラム、モバイルでは1カラムになるよう最小幅を300pxに制限しています。
 */
.c-video-item {
    flex: 1;
    min-width: 300px;
}

/* * 4. 16:9のアスペクト比維持コンテナ
 * 動画の埋め込み（iframe）が親要素の幅に合わせて正しく拡大縮小するための設定です。
 * padding-top: 56.25% は 9 / 16 の計算結果に基づいています。
 */
.c-video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    margin-top: 15px;
}

/* * 5. iframeの絶対配置
 * コンテナ内の全面に動画を広げるためのスタイルです。
 */
.c-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px; /* 角を丸くし、社内HPとしての親しみやすさを演出 */
}

/* 章タイトル：御幸ブルーとミユキピンク（アクセント）の組み合わせ */
.c-section-title {
    font-size: 1.8rem;
    color: #0070b8;
    border-left: 6px solid #e6007e; /* 左側のピンクの縦線 */
    padding-left: 15px;
    margin-bottom: 25px;
    font-weight: bold;
}

/* ==========================================================================
   【外郭構造：御幸ブルーの外枠と余白の復元】
   ========================================================================== */

/* セクション間の大きな余白 */
.p-pop-section {
    margin-bottom: 100px;
}

/* コンテンツボックス：御幸ブルーの太枠（これが消えていた青い枠です） */
.p-term-box {
    background: #ffffff;
    border: 3px solid #0070b8; /* 御幸ブルーの3px線 */
    border-radius: 24px;
    padding: 45px 40px;
    box-shadow: 10px 10px 0px rgba(0, 112, 184, 0.1); /* 影も復元 */
    box-sizing: border-box;
    width: 100%;
}

/* 導入テキストの基本スタイル */
.p-detail-text {
    line-height: 1.8;
    margin-bottom: 24px;
    color: #333;
    font-size: 1.05rem;
}

/* 導入見出しのミユキピンク・アクセント */
.p-intro-title {
    font-size: 1.3rem;
    color: #0070b8;
    margin: 0 0 15px 0;
    padding-left: 10px;
    border-left: 8px solid #e6007e; /* ピンクのアクセント */
    border-bottom: 2px solid #0070b8;
    display: inline-block;
    padding-right: 20px;
}

/* スマホ時の余白調整 */
@media screen and (max-width: 768px) {
    .p-pop-section { margin-bottom: 60px; }
    .p-term-box { padding: 30px 20px; }
}

/* --------------------------------------------------------------------------
   9. カラーバリエーション（ページ1復活版）
   ・管理メモ：共通CSSの定義が読み込まれない場合でも、確実に色を表示させる。
   -------------------------------------------------------------------------- */

.u-bg-blue   { background: linear-gradient(135deg, #0052d4, #4364f7) !important; }
.u-bg-green  { background: linear-gradient(135deg, #11998e, #38ef7d) !important; }
.u-bg-orange { background: linear-gradient(135deg, #f2994a, #f2c94c) !important; }
.u-bg-teal   { background: linear-gradient(135deg, #134e5e, #71b280) !important; }
.u-bg-navy   { background: linear-gradient(135deg, #232526, #414345) !important; }
.u-bg-sky    { background: linear-gradient(135deg, #2980b9, #6dd5fa) !important; }

/* 枠線のアクセントカラーも同期 */
.u-border-residence  { border-color: #4caf50 !important; }
.u-border-commercial { border-color: #ff9800 !important; }
.u-border-industrial { border-color: #607d8b !important; }

/* --------------------------------------------------------------------------
   【修正：カード内テキストの白抜き徹底】
   -------------------------------------------------------------------------- */

/* カード本体の文字色を白に固定 */
.p-info-card {
    color: #ffffff !important; /* 全ての文字を白にする */
}

/* アイコンを白（透過率90%）にする */
.p-info-card .material-icons {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* タイトルを白にする */
.p-card-title {
    color: #ffffff !important;
}

/* 本文（p-card-body）を白にする */
.p-info-card .p-card-body {
    color: #ffffff !important;
    opacity: 1; /* 透過を解除してハッキリ見せる */
}

/* リンク等が含まれる場合も白にする */
.p-info-card a {
    color: #ffffff;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   【修正：ナビゲーション（前へ・次へ）のレイアウト復元】
   ・管理メモ：左右両端への配置を強制し、文字のガタつきを解消。
   -------------------------------------------------------------------------- */

/* ナビゲーション全体のコンテナ */
.p-page-nav-simple {
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid #dce4ec; /* 区切り線 */
    width: 100%;
    box-sizing: border-box;
}

/* 左右に分けるインナーコンテナ */
.p-page-nav-simple__inner {
    display: flex;
    justify-content: space-between; /* 左右の両端に配置 */
    align-items: center;
    gap: 20px;
}

/* ナビゲーションリンク基本設定 */
.c-link-nav {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0070b8 !important; /* 御幸ブルーを維持 */
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
    white-space: nowrap; /* 意図しない改行を防ぐ */
}

/* ホバー時の挙動 */
.c-link-nav:hover {
    color: #e6007e !important; /* ミユキピンクへ変化 */
}

/* アイコン（◀ ▶）の余白調整 */
.c-link-nav__icon-prev { 
    margin-right: 8px; 
    font-size: 1.2rem;
}

.c-link-nav__icon-next { 
    margin-left: 8px; 
    font-size: 1.2rem;
}

/* スマホ表示：左右並びが窮屈な場合は縦並びに */
@media screen and (max-width: 768px) {
    .p-page-nav-simple__inner {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
    .c-link-nav {
        justify-content: center;
    }
}