/* ==========================================================================
   A-Form Universal Design System (B2B Standard)
   ========================================================================== */

/* 1. フォーム全体のベース設定 */
.aform {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    padding: 60px 50px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.aform-validation{
    display: block;
}

/* 2. 入力行（dl, dt, dd）の共通レイアウト */
.aform form dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 24px 0;
    margin: 0;
    border-bottom: 1px solid #edf2f7;
}

.aform form dt {
    width: 30%;
    min-width: 200px;
    padding-top: 10px;
    box-sizing: border-box;
}

.aform form dd {
    width: 70%;
    margin: 0;
    flex: 1; /* 残りの幅を埋める */
}

/* 3. すべての入力要素を「メールアドレス欄」と同じ見た目にする */
.aform-input.aform-text,
.aform-input.aform-email,
.aform-input.aform-tel,
.aform-input.aform-select,
.aform-input.aform-textarea,
.aform-input.aform-calendar { /* 日付用セレクトも含む */
    width: 100%;
    max-width: 500px; /* ここを調整すれば全入力欄の最大幅が変わります */
    height: 50px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    color: #1a202c;
    background-color: #fff;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

/* テキストエリアの高さのみ例外処理 */
.aform-input.aform-textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 16px;
}

/* 4. 「研修開始時期」などの日付/カレンダー要素の自動横並び */
.aform form dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; /* 要素間の隙間を一律に設定 */
}

/* 日付セレクトボックスは横に並べるため幅を自動に */
.aform-input.aform-calendar {
    width: auto !important;
    min-width: 90px;
    padding-right: 30px; /* 矢印アイコン用 */
}

/* 5. 選択系（セレクトボックス・カレンダー）に共通の矢印を付与 */
.aform-input.aform-select,
.aform-input.aform-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* 6. ラベルと必須マーク */
.aform-label {
    font-weight: 700;
    color: #333;
}

.aform-required {
    background: #ff0000;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 8px;
    font-weight: normal;
}

/* 7. 送信ボタン（LPデザイン） */
/* --- 確認画面 ボタンエリア --- */
.aform-button-area {
    text-align: center;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 共通設定：沈み込む動きのベース */
#aform_btn_submit, #aform_btn_back {
    cursor: pointer;
    transition: all 0.2s ease; /* 少し速めの反応に設定 */
    position: relative;
    top: 0;
}

/* 送信ボタン（この内容で送信する） */
#aform_btn_submit {
    background: linear-gradient(90deg, #dd2350 0%, #6135bf 100%);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 18px 60px;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 0 #4a2791; /* ボタンの下に厚み（影）を作る */
    appearance: none;
}

/* 送信ボタン：ホバー（沈み込み） */
#aform_btn_submit:hover {
    top: 3px; /* 下に移動 */
    box-shadow: 0 3px 0 #4a2791; /* 影を短くする */
}

/* 送信ボタン：クリック（完全に押し込む） */
#aform_btn_submit:active {
    top: 6px; /* さらに下に移動 */
    box-shadow: none; /* 影をなくす */
}

/* 戻るボタン */
#aform_btn_back {
    background: #fff;
    color: #6135bf;
    border: 2px solid #6135bf;
    font-size: 18px;
    font-weight: bold;
    padding: 16px 60px;
    border-radius: 50px;
    box-shadow: 0 6px 0 #6135bf; /* 紫の厚み */
    appearance: none;
}

/* 戻るボタン：ホバー（沈み込み） */
#aform_btn_back:hover {
    top: 3px;
    box-shadow: 0 3px 0 #6135bf;
    background: #f3f0ff;
}

/* 戻るボタン：クリック（完全に押し込む） */
#aform_btn_back:active {
    top: 6px;
    box-shadow: none;
}

/* レスポンシブ：スマホ */
@media screen and (max-width: 768px) {
    .aform-button-area {
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }
    #aform_btn_submit, #aform_btn_back {
        width: 100%;
        max-width: 300px;
    }
}

/* メッセージ部分の装飾 */
#aform_confirm_msg {
    text-align: center;
    background: #fdfbff;
    border: 1px dashed #6135bf;
    padding: 20px;
    border-radius: 10px;
    color: #1a202c;
    font-weight: bold;
    margin: 40px auto;
}

/* 8. レスポンシブ調整（一律適用） */
@media (max-width: 768px) {
    .aform { padding: 40px 20px; }
    .aform form dl { flex-direction: column; padding: 16px 0; }
    .aform form dt, .aform form dd { width: 100%; }
    .aform form dt { padding-bottom: 8px; }
    .aform-input.aform-text, .aform-input.aform-email, .aform-input.aform-tel, .aform-input.aform-select, .aform-input.aform-textarea {
        max-width: 100%; /* スマホでは全幅に */
    }
}

/* ==========================================================================
   A-Form Header Design (Section Header Style)
   ========================================================================== */

.aform-header {
    font-size: 2.25rem;       /* 大きめのフォントサイズで目を引く */
    font-weight: 800;         /* しっかりとした太字 */
    color: #1a202c;           /* 深みのある黒に近い色 */
    text-align: center;       /* 中央寄せ */
    margin-bottom: 60px !important; /* 下のフォームとの余白 */
    margin-top: 0 !important;
    position: relative;       /* 下線の基準点 */
    padding-bottom: 20px;     /* 文字と下線の間の余白 */
    letter-spacing: 0.05em;   /* 少し文字間隔を広げて高級感を出す */
}

/* 中央のアクセント下線 */
.aform-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 完全に中央へ */
    width: 60px;                 /* 線の長さ */
    height: 4px;                 /* 線の太さ */
    background-color: var(--it-blue);   
    border-radius: 2px;          /* 角を少し丸める */
}

/* スマホ用の調整 */
@media (max-width: 768px) {
    .aform-header {
        font-size: 1.75rem;
        margin-bottom: 40px !important;
    }
}

/* ==========================================================================
   A-Form Name & Kana Field Adjustments (Unified Style)
   ========================================================================== */

/* 姓・名、セイ・メイを包むリストの解除 */
.aform-name-ul, .aform-kana-ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px; /* 姓と名の間隔 */
    width: 100%;
    max-width: 500px; /* 他の入力欄の幅と統一 */
}

.aform-name-ul li, .aform-kana-ul li {
    flex: 1; /* 姓と名を均等な幅にする */
    display: flex;
    flex-direction: column; /* ラベルを上に、入力欄を下に */
}

/* 姓・名などの小さなラベル */
.aform-name-ul label, .aform-kana-ul label {
    font-size: 11px;
    color: #718096;
    margin-bottom: 4px;
    font-weight: 600;
}

/* 姓・名の入力欄自体のスタイル (既存の .aform-input 指定と合流) */
.aform-input.aform-name,
.aform-input.aform-kana {
    width: 100% !important; /* liの幅いっぱいに広げる */
    height: 50px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
    color: #1a202c;
    box-sizing: border-box;
}

/* --- カレンダー(flatpickr) 紫・四角・塗りつぶし設定 --- */
/* --- カレンダー(flatpickr) シンプル＆高安定デザイン --- */
.custom-calendar-container {
    max-width: 340px;
    margin-bottom: 20px;
}

.flatpickr-calendar.inline {
    width: 100% !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    background: #fff !important;
    padding: 10px;
}

/* 日付タイルの形状設定 */
.flatpickr-day {
    border-radius: 4px !important; /* 四角形を維持 */
    color: #2d3748 !important;
    transition: all 0.15s ease;
    border: 1px solid transparent !important;
}

/* ★Flatpickrの標準の「丸」を完全に消去（これがないと四角く塗りつぶせません） */
.flatpickr-day::before, .flatpickr-day::after {
    display: none !important;
}

/* 1. マウスオン（ホバー）した時だけ「薄紫」にする */
.flatpickr-day:not(.flatpickr-disabled):not(.selected):hover {
    background-color: #f3f0ff !important;
    color: #6135bf !important;
    border-color: #d6bcfa !important; /* わずかに枠線をつけて強調 */
}

/* 2. 選択した時：中まで「濃い紫」で塗りつぶす */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: #6135bf !important;
    background-color: #6135bf !important;
    color: #ffffff !important;
    border: none !important;
}

/* 3. 今日（today）：紫の枠線のみ */
.flatpickr-day.today {
    border: 1px solid #6135bf !important;
    color: #6135bf !important;
}
.flatpickr-day.today.selected { color: #ffffff !important; }

/* 選択不可（非活性）の日付：グレー */
.flatpickr-day.flatpickr-disabled {
    color: #cbd5e0 !important;
    background: transparent !important;
}

/* --- 時間帯選択ボタン：紫デザイン --- */
#time-slot-container {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.time-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px;
    border: 2px solid #6135bf;
    background: #fff;
    color: #6135bf;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.2s ease;
}

.time-btn:hover:not(.selected) {
    background: #f3f0ff; /* ホバー時はカレンダーと同じ薄紫 */
}

.time-btn.selected {
    background: #6135bf;
    color: #fff;
}
/* 土日曜の色 */
.flatpickr-day.nth-child(7n+7) { color: #e53e3e !important; }
.flatpickr-day.nth-child(7n+6) { color: #5a67d8 !important; }

/* 会場未選択時のロック */
.calendar-locked { opacity: 0.3; pointer-events: none; filter: grayscale(1); }


/* --- A-Form標準セレクト非表示 --- */
#calendar-date, #calendar-plan-id, #calendar-option-value-id {
    display: none !important;
}

/* --- 確認ボタン：グラデーション --- */
/* --- 確認画面 ボタンエリア --- */
.aform-button-area {
    text-align: center;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 共通設定：沈み込む動きのベース */
#aform_btn_confirm_3, #aform_btn_back {
    cursor: pointer;
    transition: all 0.2s ease; /* 少し速めの反応に設定 */
    position: relative;
    top: 0;
}

/* 確認ボタン（この内容で送信する） */
#aform_btn_confirm_3 {
    background: linear-gradient(90deg, #dd2350 0%, #6135bf 100%);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 18px 60px;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 0 #4a2791; /* ボタンの下に厚み（影）を作る */
    appearance: none;
}

/* 確認ボタン：ホバー（沈み込み） */
#aform_btn_confirm_3:hover {
    top: 3px; /* 下に移動 */
    box-shadow: 0 3px 0 #4a2791; /* 影を短くする */
}

/* 確認ボタン：クリック（完全に押し込む） */
#aform_btn_confirm_3:active {
    top: 6px; /* さらに下に移動 */
    box-shadow: none; /* 影をなくす */
}

/* 戻るボタン */
#aform_btn_back {
    background: #fff;
    color: #6135bf;
    border: 2px solid #6135bf;
    font-size: 18px;
    font-weight: bold;
    padding: 16px 60px;
    border-radius: 50px;
    box-shadow: 0 6px 0 #6135bf; /* 紫の厚み */
    appearance: none;
}

/* 戻るボタン：ホバー（沈み込み） */
#aform_btn_back:hover {
    top: 3px;
    box-shadow: 0 3px 0 #6135bf;
    background: #f3f0ff;
}

/* 戻るボタン：クリック（完全に押し込む） */
#aform_btn_back:active {
    top: 6px;
    box-shadow: none;
}

/* スマホ時（768px以下）：270px幅で確実に7列にする設定 */
@media screen and (max-width: 768px) {
    /* 1. 外枠を270pxに固定 */
    .custom-calendar-container {
        width: 270px !important;
        max-width: 270px !important;
        margin: 0 auto 20px !important;
        padding: 0 !important; /* 外側の余白を消す */
    }

    /* 2. Flatpickr本体：内側の余白(padding)を「0」にするのが最重要 */
    .flatpickr-calendar.inline {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
        padding: 0 !important; /* ★ここを0にしないと6列になります */
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* 3. 日付を入れるコンテナの幅を100%にする */
    .dayContainer {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* 4. 日付の計算を「遊びなし」で設定 */
    .flatpickr-day {
        /* 270px ÷ 7 = 38.57...px */
        flex-basis: 14.28% !important; 
        width: 14.28% !important;
        max-width: 14.28% !important;
        height: 38px !important;
        line-height: 38px !important;
        margin: 0 !important; /* 隙間を一切作らない */
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 5. 曜日の行も同様に余白を消す */
   /* 5. 曜日の行も270pxに完全フィットさせる */
    .flatpickr-months {
        margin: 0 !important;
    }

    .flatpickr-weekdays {
        width: 270px !important;
        max-width: 270px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        height: 30px !important;
        background: #fff !important;
    }
    
    .flatpickr-weekdaycontainer {
        width: 100% !important;
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .flatpickr-weekday {
        /* 日付と同じく14.28%（1/7）に固定 */
        flex: 0 0 14.28% !important;
        width: 14.28% !important;
        max-width: 14.28% !important;
        font-size: 12px !important;
        font-weight: bold !important;
        color: #4a5568 !important;
        text-align: center !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 30px !important;
    }

    /* 6. 月の切り替えエリア */
    .flatpickr-month {
        height: 34px !important;
    }
    .flatpickr-current-month {
        padding: 0 !important;
        font-size: 14px !important;
    }
}


/* ==========================================================================
   セミナー紹介セクション 
   ========================================================================== */

.seminar-intro {
    padding: 30px 20px;
    background-color: #fdfbff; /* フォーム背景と合わせた薄い紫 */
}

.intro-inner {
    max-width: 900px;
    margin: 0 auto;
}

.intro-lead {
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #4a5568;
    font-weight: 500;
}


/* レスポンシブ */
@media screen and (max-width: 768px) {

    .intro-lead {
        font-size: 16px;
    }
}

.intro-lead-area {
    text-align: center;
    perspective: 1000px;
}

.main-catch {
    display: inline-block;
}

.catch-top {
    display: block;
    font-size: 36px; /* PCでは大きく */
    font-weight: 900;
    line-height: 1.4;
    /* ボタンと連動したグラデーション文字 */
    background: linear-gradient(90deg, #dd2350 0%, #6135bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.05));
    margin-bottom: 10px;
}

.catch-bottom {
	display: block;
    font-size: 20px;
    font-weight: 700;
    color: #4a5568;
    letter-spacing: 0.05em;
}

/* 「プログラミング体験」を強調するマーカー */
.catch-bottom mark {
    background: linear-gradient(transparent 60%, #fff3b0 60%); /* 黄色の蛍光ペン風 */
    color: inherit;
    -webkit-text-fill-color: #dd2350; /* マーカー部分は赤っぽく */
    padding: 0 5px;
    font-size: 1.2em;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .catch-top {
        font-size: 24px;
    }
    .catch-bottom {
        font-size: 16px;
        padding: 5px 10px;
    }
    .catch-bottom mark {
        font-size: 1.1em;
    }
}
/* --- スケジュール --- */
.schedule-wrap {
  margin-top: 30px;
}

.schedule-title,
.note{
  font-weight: 800; /* boldやめる */
  font-size: 14px;
  color: #4a5568; 
  margin: 20px;
}

.schedule-list {
  display: inline-block;
  text-align: left;      /* ←中身だけ左揃え */
  line-height: 1.7;

  border-left: 3px solid #6135bf;
  padding-left: 12px;
}

.schedule-list div {
  margin-bottom: 4px;
}

.schedule-list div span {
  font-weight: bold;
}

/* --- フォームへの誘導パーツ（ズレ補正版） --- */
.form-guide {
    text-align: center;
    margin-top: 0px; /* 紹介セクションとの間隔 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 確実に中央寄せ */
}

/* 矢印を収める箱のサイズを固定 */
.guide-arrow-box {
    position: relative;
    width: 30px;
    height: 60px; /* 矢印3つ分が収まる高さを確保 */
    margin: 0 auto;
}

.arrow-item {
    display: block;
    position: absolute;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px; /* 幅の半分をマイナスして中央へ */
    border-left: 3px solid #dd2350;
    border-bottom: 3px solid #dd2350;
    transform: rotate(-45deg);
    animation: sdb-anim 2s infinite;
    opacity: 0;
    box-sizing: border-box;
}

/* 各矢印の初期位置とアニメーションの遅延 */
.arrow-item:nth-of-type(1) {
    top: 0;
    animation-delay: 0s;
}
.arrow-item:nth-of-type(2) {
    top: 15px;
    animation-delay: .15s;
}
.arrow-item:nth-of-type(3) {
    top: 30px;
    animation-delay: .3s;
}

/* アニメーション：上から下へ消えながら流れる */
@keyframes sdb-anim {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translate(0, 0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(-45deg) translate(-10px, 10px);
    }
}

.guide-text {
    font-size: 18px;
    font-weight: bold;
    color: #6135bf;
    line-height: 1.6;
    margin-top: 15px; /* 矢印ボックスとの距離 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .form-guide { margin-top: 60px; }
    .guide-text { font-size: 16px; }
}