@charset "UTF-8";

/* ==========================================================================
   先輩インタビュー（インライン禁止・全アイコン一括定義コンプリート版）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. H2見出しの上部に配置した英語（.en_title）のフォント制御
   -------------------------------------------------------------------------- */
.interview_section_header .en_title {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-family: "Impact", "Oswald", "Arial Black", -apple-system, sans-serif;
    font-size: clamp(3.0rem, 6vw, 4.8rem);
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1.0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. 吹き出し（Speech Bubble）の共通基本スタイル
   -------------------------------------------------------------------------- */
.interview_bubble_list {
    display: block;
    width: 100%;
}

.interview_bubble_item {
    position: relative;
    background: #ffffff;
    border: 2px solid #e1f5fe;
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 35px;
    box-shadow: 0 6px 20px rgba(0, 145, 234, 0.04);
    
    /* イラストを右下に配置するためのベース設定 */
    background-repeat: no-repeat;
    background-position: right 15px bottom 15px;
    background-size: auto 90px;
    
    /* ❌ Voiceバッジを削らないよう overflow: hidden は絶対に入れない */
}

/* 💻 PC画面：右側にイラスト用の退避スペースを作り、文字が被らないように制御 */
@media screen and (min-width: 768px) {
    .interview_bubble_item {
        padding-right: 130px; 
    }
}

/* --------------------------------------------------------------------------
   🎨 背景イラスト・全27種類個別マッピング
   -------------------------------------------------------------------------- */

/* 上段（1行目） -------------------------------------------- */
/* data_arrangement.png（リハビリ訓練） */
.interview_bubble_item._ico-data-arrange1 {
    background-image: url("../../about/img/data/data_arrangement.png");
}
/* data_arrangement2.png（車椅子サポート） */
.interview_bubble_item._ico-data-arrange2 {
    background-image: url("../../about/img/data/data_arrangement2.png");
}
/* data_deco.png（棒グラフ） */
.interview_bubble_item._ico-data-deco {
    background-image: url("../../about/img/data/data_deco.png");
}
/* data_night_shift.png（懐中電灯と夜間照射） */
.interview_bubble_item._ico-data-night {
    background-image: url("../../about/img/data/data_night_shift.png");
}
/* data_ratio.png（男女スタッフ並び） */
.interview_bubble_item._ico-data-ratio {
    background-image: url("../../about/img/data/data_ratio.png");
}
/* data_taisei.png（9-17時・シフト時間） */
.interview_bubble_item._ico-data-taisei {
    background-image: url("../../about/img/data/data_taisei.png");
}
/* icon_age.png（スタッフ3人集合・年齢構成） */
.interview_bubble_item._ico-age {
    background-image: url("../../about/img/data/icon_age.png");
}
/* icon_baby.png（親子とベビーカー） */
.interview_bubble_item._ico-baby1 {
    background-image: url("../../about/img/data/icon_baby.png");
}
/* icon_baby2.png（ベビーカー単体） */
.interview_bubble_item._ico-baby2 {
    background-image: url("../../about/img/data/icon_baby2.png");
}
/* icon_baby3.png（赤ちゃんを抱っこする男性） */
.interview_bubble_item._ico-baby3 {
    background-image: url("../../about/img/data/icon_baby3.png");
}
/* icon_baby4.png（赤ちゃんをあやすナース） */
.interview_bubble_item._ico-baby4 {
    background-image: url("../../about/img/data/icon_baby4.png");
}

/* 中段（2行目） -------------------------------------------- */
/* icon_beach.png（パラソルとビーチ） */
.interview_bubble_item._ico-beach {
    background-image: url("../../about/img/data/icon_beach.png");
}
/* icon_benefit.png（旗を振るスタッフ） */
.interview_bubble_item._ico-benefit {
    background-image: url("../../about/img/data/icon_benefit.png");
}
/* icon_car.png（車とPマーク） */
.interview_bubble_item._ico-car {
    background-image: url("../../about/img/data/icon_car.png");
}
/* icon_care1.png（リハビリ歩行介助） */
.interview_bubble_item._ico-care1 {
    background-image: url("../../about/img/data/icon_care1.png");
}
/* icon_certified.png（認定バッジ・リボン） */
.interview_bubble_item._ico-certified {
    background-image: url("../../about/img/data/icon_certified.png");
}
/* icon_hoiku.png（保育所と親子） */
.interview_bubble_item._ico-hoiku {
    background-image: url("../../about/img/data/icon_hoiku.png");
}
/* icon_holiday.png（カレンダー） */
.interview_bubble_item._ico-holiday {
    background-image: url("../../about/img/data/icon_holiday.png");
}
/* icon_hp01.png（病院と女性ナース） */
.interview_bubble_item._ico-hp01 {
    background-image: url("../../about/img/data/icon_hp01.png");
}
/* icon_hp02.png（病院と男性ナース） */
.interview_bubble_item._ico-hp02 {
    background-image: url("../../about/img/data/icon_hp02.png");
}
/* icon_men_woman.png（男女ナース2人並び） */
.interview_bubble_item._ico-men-woman {
    background-image: url("../../about/img/data/icon_men_woman.png");
}
/* icon_new.png（病院ビル単体） */
.interview_bubble_item._ico-new {
    background-image: url("../../about/img/data/icon_new.png");
}

/* 下段（3行目） -------------------------------------------- */
/* icon_night.png（夜勤ナースと懐中電灯） */
.interview_bubble_item._ico-night {
    background-image: url("../../about/img/data/icon_night.png");
}
/* icon_records.png（カルテを持つナース） */
.interview_bubble_item._ico-records {
    background-image: url("../../about/img/data/icon_records.png");
}
/* icon_reha.png（歩行訓練サポート） */
.interview_bubble_item._ico-reha {
    background-image: url("../../about/img/data/icon_reha.png");
}
/* icon_shift.png（太陽と月の時計） */
.interview_bubble_item._ico-shift {
    background-image: url("../../about/img/data/icon_shift.png");
}
/* icon_staff.png（ストレッチャーとスタッフ） */
.interview_bubble_item._ico-staff {
    background-image: url("../../about/img/data/icon_staff.png");
}
/* icon_staff02.png（点滴を管理するナース） */
.interview_bubble_item._ico-staff02 {
    background-image: url("../../about/img/data/icon_staff02.png");
}
/* icon_staff03.png（ハイタッチ） */
.interview_bubble_item._ico-staff03 {
    background-image: url("../../about/img/data/icon_staff03.png");
}
/* logo.png（みきやまの3本木ロゴマーク） */
.interview_bubble_item._ico-logo {
    background-image: url("../../about/img/data/logo.png");
}

/* --------------------------------------------------------------------------
   吹き出し内共通パーツ（バッジ・文字レイヤー・マーカー）
   -------------------------------------------------------------------------- */
/* 左上の「Voice」バッジ */
.interview_bubble_item::before {
    content: "Voice";
    position: absolute;
    top: -12px;
    left: 25px;
    background: linear-gradient(135deg, #00b7ee, #005588);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    box-shadow: 0 3px 8px rgba(0, 85, 136, 0.2);
    z-index: 2;
}

.interview_bubble_item p {
    margin: 0;
    position: relative;
    z-index: 2; /* 文字をイラストのレイヤーより手前に出して可読性を死守 */
}

/* 💡 蛍光ペン風のイエローマーカー効果 */
.interview_bubble_item p b {
    font-weight: 700;
    background: linear-gradient(transparent 50%, #fff176 50%);
    padding: 0 2px;
}

/* --------------------------------------------------------------------------
   3. 個別インタビューリンクカード（下部マージン制御）
   -------------------------------------------------------------------------- */
.other_interview_list .interview_card {
    margin-bottom: 50px !important;
}

.interview_card .desc {
    margin-top: 12px;
    margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   4. レスポンシブ対応（スマホ表示：767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
    .interview_bubble_item {
        padding: 20px;
        padding-bottom: 25px;
        margin-bottom: 25px;
        border-radius: 12px;
        
        /* スマホ用：イラストを小さくして右下に上品に配置 */
        background-size: auto 65px;
        background-position: right 10px bottom 10px;
        opacity: 0.95;
    }
    .interview_bubble_item::before {
        left: 15px;
        font-size: 1.0rem;
        padding: 1px 10px;
    }
    .other_interview_list .interview_card {
        margin-bottom: 30px !important;
    }
}