@charset "utf-8";


@charset "utf-8";

/* ==========================================================================
   🏥 お問い合わせフォーム：ボックス ＆ ボタン完全再現版
   ========================================================================== */

/* 📦 1. フォームの外枠（消えていたボックスデザイン） */
.form_panel {
    width: 100%;
    max-width: 900px;
    margin: 60px auto;
    padding: clamp(30px, 5vw, 60px);
    background: #ffffff !important; /* 清潔な白背景 */
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 87, 155, 0.12); /* サイトに合わせたブルーの影 */
    border: 1px solid #e1e8ed;
    box-sizing: border-box;
}

/* テンプレートの影響を排除 */
.form_panel__body {
    background-color: transparent !important;
    padding: 0 !important;
}

/* 🏷️ 2. ラベルと入力欄のスタイル */
.form_list dt {
    font-weight: 700;
    color: #01579b; /* サイトカラー：ネイビー */
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.form_list dt span {
    background: #e53935; /* 必須タグ：赤 */
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 15px;
    font-weight: 500;
}

.form_list dd {
    margin-bottom: 35px;
    margin-left: 0;
}

.form_input input, .form_input select, .form_input textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #edeff2;
    border-radius: 10px;
    background: #f8fafc;
    transition: 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

/* 入力中（フォーカス）のエフェクト */
.form_input input:focus, .form_input textarea:focus {
    outline: none;
    border-color: #0091ea;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(0, 145, 234, 0.1);
}

.form_input textarea {
    height: 280px;
    line-height: 1.8;
}
/* ==========================================================================
   🏥 お問い合わせフォーム：送信ボタン完全再現 (home.css 同一仕様)
   ========================================================================== */

.btn_wrap.center {
  text-align: center;
  margin-top: 50px;
}

.kirarin_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 22px 40px 22px 40px; /* アイコン分の余白 */
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  border-radius: 60px; /* カプセル型 */
  border: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  /* 1. 通常時の背景色（紺） */
  background-color: #01579b !important;
  box-shadow: 0 10px 25px rgba(1, 87, 155, 0.2);
  transition: background-color 0.4s ease, transform 0.3s ease;
}

/* 2. ホバー時の背景色（水色へ変化） */
.kirarin_btn:hover {
  background-color: #0091ea !important;
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(1, 87, 155, 0.3);
}

/* 3. ✨ しまーな光（シマー）のエフェクト
   左下に待機し、ホバーで右へ走り抜ける home.css の仕様 */
.kirarin_btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.2) 35%,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0.2) 45%,
    rgba(255, 255, 255, 0) 50%
  );
  pointer-events: none;
  transition: none;
}

/* ホバーした瞬間に光が走る */
.kirarin_btn:hover::before {
  left: 150%;
  transition: left 0.7s ease-in-out;
}



/* フォーム本体のスタイル（ドット排除） */
.form_panel {
    background: #ffffff !important;
    border-radius: 20px;
    padding: clamp(30px, 5vw, 60px);
    box-shadow: 0 15px 50px rgba(0, 87, 155, 0.1);
    border: 1px solid #e1e8ed;
}

/* ==========================================================================
   ✅ チェックボックス専用：ズレ解消 ＆ 整列デザイン
   ========================================================================== */

/* 1. チェックボックスのグループ全体の余白 */
.checkbox_group {
    display: flex;
    flex-wrap: wrap; /* 画面幅に合わせて折り返し */
    gap: 15px 25px;  /* 縦横の隙間を一定にする */
    padding-top: 10px;
}

/* 2. ラベル（文字とボックスのセット）の調整 */
.checkbox_group label {
    display: flex;           /* フレックスボックスで横並び */
    align-items: center;    /* 💡 上下の中央をビシッと揃える */
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    line-height: 1.4;
    transition: 0.2s;
}

/* 3. チェックボックス本体のサイズ固定 */
.checkbox_group input[type="checkbox"] {
    /* 共通設定の width: 100% を打ち消す（最重要） */
    width: 20px !important; 
    height: 20px !important;
    margin: 0 8px 0 0 !important; /* 右側にだけ余白 */
    cursor: pointer;
    flex-shrink: 0; /* ボックスが潰れないように固定 */
}

/* 4. ホバーした時に少し色を変えて「押せる感」を出す */
.checkbox_group label:hover {
    color: #01579b;
}

/* スマホでは1列、または適度な隙間で並べる */
@media screen and (max-width: 767px) {
    .checkbox_group {
        flex-direction: column; /* スマホは縦に並べた方が見やすい */
        gap: 12px;
    }
}

/* ✅ 職種バッジ：パステルカラー ＆ 背面配置設定 */

/* 常勤：パステルグリーン（癒やしと安心の色） */
.checkbox_group .badge-fulltime {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 10px; /* 💡文字の後ろなので左側に余白 */
    color: #ffffff;
    line-height: 1.2;
    min-width: 50px;
    text-align: center;
    flex-shrink: 0;
    background-color: #d99eca; 
}

/* パート：パステルブルー（そのまま維持） */
.checkbox_group .badge-parttime {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 10px; /* 💡左側に余白 */
    color: #ffffff;
    line-height: 1.2;
    min-width: 50px;
    text-align: center;
    flex-shrink: 0;
    background-color: #92d3e3; 
}

/* レイアウト調整：dt/ddに合わせた余白と整列 */
.checkbox_group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5px;
}

.checkbox_group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* ✅ 添付ファイル項目のデザイン */
.file_upload_area {
    background: #f8fafc; /* 入力欄と同じ薄いグレー */
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #cbd5e1; /* 枠線を点線にして「置く場所」感を出す */
}

/* ✅ 追加：「任意」タグ専用のスタイル */
.form_list dt span.optional {
    background: #94a3b8 !important; /* 💡 水色（バッジと同じ色）に上書き */
    color: #ffffff;
}

.file_note {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 15px;
}

.file_note span {
    font-size: 0.8rem;
    display: inline-block;
    margin-right: 10px;
    color: #64748b;
}

.file_inputs input {
    display: block;
    margin-bottom: 10px;
    padding: 8px;
    background: #fff;
    border: 1px solid #edeff2;
    font-size: 0.9rem;
}

/* 最後の入力欄の余白は消す */
.file_inputs input:last-child {
    margin-bottom: 0;
}

/* ✅ フォーム内の注釈（モバイル対応） */
.form_note {
    font-size: 0.85rem;      /* 少し小さめに */
    color: #64748b;         /* 控えめなグレー */
    line-height: 1.6;        /* モバイルでも読みやすい行間 */
    margin-top: 8px;        /* 上の入力欄との隙間 */
    margin-bottom: 0;
    font-weight: 500;
}

/* 💡 モバイル専用の微調整（画面幅767px以下） */
@media screen and (max-width: 767px) {
    .form_note {
        font-size: 0.8rem;   /* スマホではさらに少し小さく */
        margin-top: 6px;
    }
}


/* 📱 モバイル用（画面幅767px以下）の重なり解消設定 */
@media screen and (max-width: 767px) {
    /* 親要素の「縦並び」を確実にする */
    .btn_wrap.center {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;       /* 高さを自動にして、潰れないようにする */
        padding: 0 20px;
    }

    /* ボタン一つひとつに隙間を作る */
    .btn_wrap.center .kirarin_btn {
        display: flex;      /* ボタン内の文字中央寄せを維持 */
        margin-bottom: 20px; /* 💡 下に20pxの隙間を確実に作る */
        width: 100%;
        max-width: 280px;   /* 大きすぎないスリムサイズ */
        min-width: auto;
        padding: 16px 10px;
    }

    /* 一番下のボタンだけは余白を消す（全体のバランスのため） */
    .btn_wrap.center .kirarin_btn:last-child {
        margin-bottom: 0;
    }
}

/* ✅ 「その他」入力欄専用のコンテナ */
.qual_other_container {
    display: none;         /* 初期状態は非表示 */
    margin-top: 12px;      /* 上のチェックボックスとの間隔 */
    margin-left: 28px;     /* PC：チェックボックスのアイコン分だけ右に寄せる */
    width: 100%;
    max-width: 520px;      /* 💡 PC：プレースホルダーが全部見える十分な長さ */
}

/* 入力欄自体の微調整 */
.qual_other_container input[type="text"] {
    width: 100%;
    padding: 12px 16px;    /* 少しスリムにして見やすく */
    font-size: 0.95rem;
}

/* 📱 モバイル用（画面幅767px以下）の調整 */
@media screen and (max-width: 767px) {
    .qual_other_container {
        margin-left: 0;    /* スマホ：左端まで広げる */
        width: 100%;
        max-width: 100%;   /* 画面幅いっぱい */
        margin-top: 10px;
    }
}

/* 入力欄自体のスタイルは既存の input 設定が引き継がれます */

/* 確認画面のボタンが縦並びになった時に隙間をあける */
.btn_wrap.center .kirarin_btn,
.btn_wrap.center button.kirarin_btn {
    margin-top: 10px;
    margin-bottom: 10px;
}
/* プライバシーポリシー同意案内の一文 */
.privacy_note_wrap {
    text-align: center;
    margin-bottom: 20px;
}

.privacy_note_text {
    font-size: 0.85rem;
    color: #666666;
    line-height: 1.6;
}

.privacy_note_link {
    text-decoration: underline !important;
    color: #005588 !important;
    font-weight: bold;
}

/* ==========================================================================
   新卒エントリー：アピールメッセージ用スタイル
   ========================================================================== */
.entry_intro {
    background: #f4fafe; /* 淡いブルーの背景 */
    border-left: 5px solid #0091ea; /* 左側のアクセントライン */
    padding: 25px 30px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.entry_intro__title {
    color: #01579b;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.entry_intro__text {
    line-height: 1.8;
    color: #333;
    font-size: 0.95rem;
}

/* 📱スマホ用の微調整 */
@media screen and (max-width: 767px) {
    .entry_intro {
        padding: 20px;
    }
    .entry_intro__title {
        font-size: 1.15rem;
    }
}

/* ==========================================================================
   新卒エントリー：教育プログラムタイムライン
   ========================================================================== */
.education_block {
    background: #ffffff;
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 50px; /* 下のフォームとの間隔 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.education_title {
    color: #01579b;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.education_desc {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.8;
}

/* ==========================================================================
   🌸 新卒エントリー：柔らかく華やかな教育タイムライン
   ========================================================================== */
.education_block {
    background: #ffffff;
    border: none; /* カッチリした線をなくす */
    border-radius: 20px; /* コロンとした大きな丸み */
    padding: 40px;
    margin-bottom: 50px;
    /* 柔らかく温かみのある影をつけてフワッと浮き上がらせる */
    box-shadow: 0 10px 30px rgba(0, 145, 234, 0.08), 0 5px 15px rgba(255, 182, 193, 0.1);
    position: relative;
    overflow: hidden;
}

/* 💡 ブロックの一番上に、水色〜ピンクの華やかなグラデーションラインを引く */
.education_block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #81d4fa 0%, #f48fb1 100%);
}

.education_title {
    color: #01579b;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 0.05em; /* 文字の隙間を少し開けて優雅に */
}

.education_desc {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.8;
}

/* タイムライン（表）のスタイル */
.education_timeline dl {
    display: flex;
    border-bottom: 2px dotted #e1e8ed; /* 点線にして柔らかく */
    padding: 20px 0;
    margin: 0;
}

.education_timeline dl:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 💡 月の表示（dt）の横に可愛いドットを置く */
.education_timeline dt {
    width: 140px;
    font-weight: bold;
    color: #01579b;
    flex-shrink: 0;
    font-size: 1.05rem;
    position: relative;
    padding-left: 20px;
}
.education_timeline dt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    background-color: #ffb6c1; /* 優しいピンクのドット */
    border-radius: 50%;
}
.education_timeline dl:nth-child(even) dt::before {
    background-color: #81d4fa; /* 偶数行は優しい水色のドットに変化 */
}

.education_timeline dd {
    flex-grow: 1;
    margin: 0;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.7;
}

.education_timeline dd strong {
    color: #222;
    display: block;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

/* 💡 集合教育などのバッジ（角丸で可愛く！） */
.edu_badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px; /* カプセルのような可愛い丸み */
    font-size: 0.85rem;
    font-weight: bold;
    margin-right: 8px;
    margin-bottom: 6px; /* ここで下との隙間を作る（インラインスタイル不要！） */
}
.badge_pink {
    background-color: #fce4ec; /* ふんわり桜色 */
    color: #c2185b;
}
.badge_blue {
    background-color: #e1f5fe; /* ふんわり空色 */
    color: #0277bd;
}

/* 📱スマホ用の調整 */
@media screen and (max-width: 767px) {
    .education_block {
        padding: 25px 20px;
    }
    .education_timeline dl {
        flex-direction: column;
        padding: 15px 0;
    }
    .education_timeline dt {
        margin-bottom: 12px;
        width: 100%;
    }
}