/* ==========================================================================
   Project: コミュニケーションスキル向上研修 専用CSS
   Author: 御幸建設グループ システム管理課
   Last Update: 2026-04-03
   Concept: 
   1. 清潔感と信頼感のある「御幸ブルー（#0070b8）」を基調とする。
   2. 親しみやすさを出すため「ミユキピンク（#e6007e）」をアクセントに。
   3. メンテナンス性を高めるため、HTML側でのstyle属性（インライン）を全廃。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ヒーローエリア (Hero Section)
   Memo: ページ最上部の大きな画像エリア。写真の上に文字を載せるため、透過黒を重ねます。
   -------------------------------------------------------------------------- */
.c-comm-hero {
    position: relative;
    height: 400px;           /* PCでの高さ。画像に応じて350px〜500pxで調整 */
    background: #000;        /* 画像未読み込み時の背景色 */
    overflow: hidden;
}

.c-comm-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 画像比率を維持したまま枠を埋める設定 */
    opacity: 0.6;            /* 写真を40%暗くし、上の白文字を際立たせる */
}

.c-comm-hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 上下左右の中央揃えの定石 */
    text-align: center;
    width: 100%;
    z-index: 10;
}

.c-comm-hero__title {
    font-size: 3rem;         /* 「入社時研修」の大きさ */
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 文字の影：読みやすさの肝 */
    margin-bottom: 10px;
}

.c-comm-hero__sub {
    font-size: 1.5rem;       /* 「コミュニケーションスキル向上研修」の大きさ */
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;   /* 文字の間隔を少し広げて高級感を出す */
}

/* --------------------------------------------------------------------------
   2. 導入メッセージ (Intro Message Box)
   Memo: ユーザー様お気に入りの「左アクセント＋青枠」デザイン。
   -------------------------------------------------------------------------- */
.c-comm-intro {
    background: #f8fbff;        /* 非常に薄い青。白背景との境界を優しく作る */
    border: 2px solid #0070b8;  /* 全体を囲むメインカラーの枠線 */
    border-radius: 12px;        /* 角丸：硬すぎない印象に */
    padding: 30px 40px 30px 50px; /* 左側(最後)を広めに取り、ラインとの距離を確保 */
    margin: 60px 0;             /* 前後のセクションとの余白 */
    position: relative;         /* 疑似要素(::before)の基準点 */
}

.c-comm-intro::before {
    content: "";
    position: absolute;
    left: 20px;                 /* 枠線の内側、左端からの距離 */
    top: 25%;                   /* 上からの位置 */
    width: 6px;                 /* 縦ラインの太さ */
    height: 50%;                /* 縦ラインの高さ */
    background-color: #0070b8;  /* 縦ラインの色 */
    border-radius: 10px;        /* ラインの角を丸くして柔らかさを出す */
}

.c-comm-intro__text {
    color: #0070b8;
    font-weight: bold;
    font-size: 1.3rem;
    line-height: 1.6;           /* 行間：詰まりすぎず読みやすい設定 */
    margin: 0;
}

/* --------------------------------------------------------------------------
   3. セクション見出し (Section Titles)
   -------------------------------------------------------------------------- */
.c-comm-section-title {
    text-align: center;
    margin-bottom: 40px;
	margin-top: 40px;
    font-size: 2rem;
    color: #333;
}

.c-comm-section-title span {
    border-bottom: 3px solid #0070b8; /* 下線アクセント */
    padding-bottom: 8px;
}

.c-comm-sub-title {
    font-size: 1.4rem;
    color: #0070b8;
    border-left: 6px solid #0070b8; /* 左側の太いライン */
    padding-left: 15px;
    margin: 40px 0 20px;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   4. 5W1H & 報連相カード (Card Grid)
   Memo: 情報を「箱」に入れることで整理整頓された印象を与えます。
   -------------------------------------------------------------------------- */
.c-comm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動折り返し設定 */
    gap: 20px;
    margin-bottom: 30px;
}

.c-comm-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 軽い影で浮遊感を出す */
}

.c-comm-card--blue { border-top: 4px solid #0070b8; } /* 上部の強調ライン */
.c-comm-card--pink { border-top: 4px solid #e6007e; }

.c-comm-card__label {
    display: block;
    font-weight: bold;
    color: #0070b8;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   5. おひたしパーツ (Ohitashi Round Items)
   Memo: 「柔らかい対応」を象徴するミユキピンクの円形アイコン。
   -------------------------------------------------------------------------- */
.c-ohitashi-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px 0;
}

.c-ohitashi-item {
    width: 140px;
    height: 140px;
    background: #fff;
    border: 3px solid #e6007e;
    border-radius: 50%;          /* 正円にする設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(230, 0, 126, 0.1);
}

.c-ohitashi-char {
    font-size: 2.2rem;
    font-weight: bold;
    color: #e6007e;
    line-height: 1;
}

.c-ohitashi-text {
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   6. 各種リストとチェックボックス
   -------------------------------------------------------------------------- */
.c-comm-list {
    list-style: none;
    padding: 0;
}

.c-comm-list__item {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.c-comm-list__item::before {
    content: "●";               /* 文頭の記号をCSSで制御 */
    position: absolute;
    left: 0;
    color: #0070b8;
}

.c-check-box {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   7. レスポンシブ対応 (Mobile Adjustments)
   Memo: スマホ閲覧時に要素が崩れないよう、1カラム（縦並び）へ切り替えます。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .c-comm-hero { height: 300px; }
    .c-comm-hero__title { font-size: 2.2rem; }
    .c-comm-hero__sub { font-size: 1.1rem; }
    
    .c-comm-intro { padding: 25px 25px 25px 40px; }
    .c-comm-intro::before { left: 15px; }
    .c-comm-intro__text { font-size: 1.1rem; }

    .c-comm-section-title { font-size: 1.6rem; }
    .c-ohitashi-grid { gap: 10px; }
    .c-ohitashi-item { width: 120px; height: 120px; }
}

/* --------------------------------------------------------------------------
   8. 通信チャネル・4列レイアウト & バッジ視認性向上
   Memo: 4列並びを基本にし、バッジの文字を白抜きにして視認性を高めています。
   -------------------------------------------------------------------------- */
.c-comm-grid--channels {
    display: grid;
    /* 画面幅に応じて最大4列まで並べる設定 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 50px 0;
}

/* 各カードの基本装飾 */
.c-comm-card--channel {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

/* バッジの装飾：塗りつぶしにして文字を白抜きに */
.c-comm-badge--fill {
    display: inline-block;
    color: #fff;               /* 文字を白に */
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    line-height: 1;
}

/* バッジの色分け */
.c-comm-badge--blue { background: #0070b8; } /* 御幸ブルー */
.c-comm-badge--pink { background: #e6007e; } /* ミユキピンク */

/* メリット・注意点ラベルの背景色を少し濃くしてメリハリをつける */
.c-label-benefit {
    display: inline-block;
    color: #0070b8;
    background: #e1f0ff; /* 背景を少し濃く */
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.c-label-caution {
    display: inline-block;
    color: #e6007e;
    background: #ffe5f0; /* 背景を少し濃く */
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* スマホでは2列、または1列に調整 */
@media screen and (max-width: 1000px) {
    .c-comm-grid--channels {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 600px) {
    .c-comm-grid--channels {
        grid-template-columns: 1fr;
    }
}
/* --------------------------------------------------------------------------
   5W1H Elements Card: 数字アイコン付きのデザイン
   -------------------------------------------------------------------------- */
.c-5w1h-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.c-5w1h-card {
    background: #fff;
    border: 2px solid #0070b8;  /* 御幸ブルーの枠線 */
    border-radius: 15px;
    padding: 30px 25px 25px;
    position: relative;         /* 数字アイコンの配置基準 */
    box-shadow: 0 4px 15px rgba(0, 112, 184, 0.1);
}

/* カード左上の数字アイコン */
.c-5w1h-card__num {
    position: absolute;
    top: -15px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: #0070b8;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    border: 3px solid #fff;     /* 外側の白枠で浮かせる */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.c-5w1h-card__title {
    display: block;
    font-size: 1.6rem;          /* タイトルを大きく強調 */
    font-weight: bold;
    color: #0070b8;
    margin-bottom: 20px;
    padding-left: 10px;
}

/* カード内の青ドットリスト */
.c-5w1h-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-5w1h-list__item {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

.c-5w1h-list__item::before {
    content: "●";               /* 青いドット */
    position: absolute;
    left: 0;
    color: #0070b8;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   PREP Method Styles: 結論・理由・具体例・結論の構成
   -------------------------------------------------------------------------- */
.c-prep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.c-prep-item {
    background: #fff;
    border: 1px solid #0070b8;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    position: relative;
}

/* 各ステップのアルファベット（P・R・E・P）を強調 */
.c-prep-alpha {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    color: #0070b8;
    margin-bottom: 5px;
}

.c-prep-label {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: #333;
}

/* 使用例の吹き出しデザイン */
.c-example-box {
    background: #fdfdfd;
    border: 1px dashed #ccc;
    padding: 30px;
    border-radius: 10px;
    margin-top: 30px;
}

.c-example-line {
    margin-bottom: 15px;
    padding-left: 5em;
    position: relative;
}

.c-example-tag {
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #0070b8;
}

/* --------------------------------------------------------------------------
   Accordion: PREP法セクション用
   -------------------------------------------------------------------------- */
.c-accordion {
    border: 1px solid #0070b8;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.c-accordion__summary {
    background: #eef7ff;
    color: #0070b8;
    padding: 15px 20px;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* デフォルトの矢印を消す */
    position: relative;
    transition: background 0.3s ease;
}

.c-accordion__summary::-webkit-details-marker {
    display: none; /* Safari用 */
}

.c-accordion__summary:hover {
    background: #e1f0ff;
}

/* ＋アイコンの作成 */
.c-accordion__summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
}

/* 開いている時のアイコン変更 */
details[open] .c-accordion__summary::after {
    content: "−";
}

.c-accordion__content {
    padding: 25px;
    background: #fff;
    border-top: 1px solid #0070b8;
}

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