/* seminars_index.css */

/* =====================================
   講習会日程・お申し込みフォームのスタイル
   ===================================== */

/* 検索フォームの全体レイアウト */
.search-form-grid {
    display: grid;
    /* 地域名を狭く（例: 0.7fr）、講習会名を広く（例: 1.3fr）、検索ボタンを狭く（例: 0.7fr）調整 */
    grid-template-columns: 0.7fr 1.3fr 0.7fr; /* 3つのカラムを比率で配置 */
    gap: 20px; /* カラム間のスペース */
    align-items: start; /* 各カラムの要素を上揃えにする */
    padding: 20px; /* フォーム全体のパディング */
    background-color: #ECF6FA; /* 背景色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

/* レスポンシブ対応: タブレット (1024px以下) */
@media (max-width: 1024px) {
    .search-form-grid {
        /* タブレットでは2カラム。地域名を狭く、講習会名を広く */
        grid-template-columns: 0.7fr 1.3fr;
    }
}

/* レスポンシブ対応: モバイル (768px以下) */
@media (max-width: 768px) {
    .search-form-grid {
        grid-template-columns: 1fr; /* モバイルでは1カラム */
    }
}

/* 各検索カラムのスタイル */
.search-column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* ラベルと入力フィールドの間のスペース */
}

/* 検索ラベルのスタイル */
.search-label {
    font-weight: bold;
    color: #2C396E;
    font-size: 1.4em;
    margin-bottom: -8px; /* ラベルの下のスペースをさらに狭く */
}
@media (max-width: 768px) {
    .search-label {
        font-size: 1em;
    }
}

/* フォームのセレクトボックスの幅調整 */
.form-container .select-wrap {
    width: 100%; /* 親要素の幅いっぱいに広げる */
}

.form-container .select-box {
    width: 100%; /* セレクトボックスも親要素の幅いっぱいに広げる */
}

/* チェックボックスの行の配置調整 */
.form-checkbox.row {
    display: flex;
    flex-direction: column; /* チェックボックスを縦に並べる */
    gap: 0px; /* チェックボックス間のスペース */
}

/* チェックボックスのラベルの左スペースを狭くする */
.form-checkbox.row .checkbox-wrap {
    width: fit-content; /* 内容の幅に合わせる */
    margin-top: -10px;
    margin-left: -5px;
    margin-right: 0; /* 右マージンをリセット */
}
@media (max-width: 768px) {
    .form-checkbox.row .checkbox-wrap{
        font-size: 14px;
    }
    
}

/* 検索ボタンのグリッド内でのスタイル */
.search-button-grid {
    grid-column: 1 / -1; /* ボタンを全てのカラムにまたがらせる */
    justify-self: center; /* グリッドエリア内でボタンを水平方向に中央揃えにする */
    align-self: center; /* グリッドエリア内でボタンを垂直方向に中央揃えにする */
    margin-top: 20px; /* ボタンの上にスペースを追加 */
    padding-top: 0; /* ボタンエリア上部のパディングをリセット */
}

/* フォーム上部の注意書きのフォントサイズ調整 */
.form-container p.form-top-caution:nth-of-type(2) {
    font-size: 16px !important; /* フォントサイズを14pxに強制適用 */
}
@media (max-width: 768px) {
    .form-container p.form-top-caution:nth-of-type(2) {
        font-size: 14px !important; 
    }
}

/* 特殊リンクのスタイル */
.special-link {
    color: #203A72; /* 青色 */
    text-decoration: underline; /* アンダーライン */
    font-weight: bold; /* 太字 */
}


/* =====================================
   講習会情報のカード表示スタイル
   ==================================== */

/* 各講習会アイテムとメッセージの共通スタイル */
.seminar-item,
.no-seminars-message {
    background-color: #ECF6FA; /* 背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 各講習会アイテムのコンテナ */
.seminar-item {
    margin-bottom: 70px;
    padding: 20px; /* カード全体のパディング */
}

/* 各講習会情報の行スタイル（グリッドレイアウト） */
.seminar-row {
    display: grid; /* グリッドレイアウトを適用 */
    grid-template-columns: 220px 1fr; /* 左側のラベルと右側の値の2カラム */
    gap: 20px; /* 各行の要素間のスペース */
    padding: 14px 0; /* 行の上下パディング */
    border-bottom: 1px solid #D8DBDC; /* 各行の下線 */
}
@media(max-width: 480px){
    .seminar-row {
        grid-template-columns: 130px 1fr; /* モバイルでは左側のラベルを狭く */
    }
}

/* 講習会アイテム内の段落のデフォルトマージンをリセット */
.seminar-item p {
    margin-bottom: 0;
}

/* 講習会アイテムのラベル（項目名）スタイル */
.seminar-item .label {
    font-weight: bold;
    color: #555;
    /* 項目名を罫線間の上下中央にセンタリングするための追加 */
    display: flex;
    align-items: center;
}

/* 講習会アイテムの値のスタイル */
.seminar-item .value {
    color: #333;
}

/* 複数行になる値の行間を広げるためのスタイル */
.seminar-item .value.expanded-line-height {
    line-height: 2;
}

/* 「現在、開催予定の講習会はありません。」メッセージのスタイル */
.no-seminars-message {
    padding: 40px 20px; /* 上下のパディングを増やして高さを出す */
    text-align: center; /* テキストを中央揃え */
    font-size: 1.5em; /* フォントサイズを大きく */
    font-weight: bold; /* フォントを太く */
    color: #333; /* テキストの色 */
    margin: 50px auto; /* 上下のマージンと左右中央揃え */
    display: flex; /* Flexboxを有効にする */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    min-height: 150px; /* 最小高さを設定して、メッセージが短くてもカードらしい見た目を保つ */
}


/* =====================================
   ボタン全般のスタイル
   ==================================== */

/* ボタンエリアの共通スタイル */
.seminar-item .btn-wrap,
.form-container .btn-wrap.center { /* 検索ボタンの親要素にも適用 */
    text-align: center;
    margin-top: 10px; /* ボタンエリア上部のスペース */
    display: flex;
    justify-content: center; /* ボタン全体を中央揃え */
    gap: 10px; /* ボタン間のスペース */
    flex-wrap: wrap; /* ボタンが多すぎる場合に折り返す */
    padding-top: 10px; /* ボタンエリア上部のパディング */
}

/* アイコン付きボタン自体のスタイル調整 */
.btn.btn-icon {
    display: flex; /* ボタンをフレックスコンテナにする */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    min-width: 150px; /* 必要に応じてボタンの最小幅を設定 */
    padding: 10px 15px; /* パディングを調整 */
}

/* ボタン内のテキストラベルのスタイル */
.btn.btn-icon .btn-label {
    flex-grow: 1; /* ラベルが利用可能なスペースをすべて占めるようにする */
    text-align: center; /* ラベル内のテキストを中央揃えにする */
    margin-left: 48px;
}

/* ボタン内のアイコン画像のスタイル */
.btn.btn-icon .btn-icon-img {
    flex-shrink: 0; /* アイコンが縮小されないようにする */
    width: 24px; /* アイコンの幅 */
    height: 24px; /* アイコンの高さ */
    margin-left: 5px; /* テキストとアイコンの間に少しスペースを追加 */
    transform: scaleX(-1);
}

/* 選択不可（無効）のボタンのスタイル */
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #cccccc; /* 灰色にする */
    pointer-events: none; /* クリックイベントを無効化 */
}

/* =====================================
   チェックボックスのスタイル (form_check.css の上書き)
   ==================================== */
.form-checkbox .checkbox-wrap {
  gap: 4px; /* 要素間のギャップを調整 */
}

/* =====================================
   カスタムセレクトボックスのスタイル
   ==================================== */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px; /* 縦幅を少し広げる */
    background-color: #fff;
    border: 1px solid #465381;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 影を調整 */
}

.custom-select-trigger:hover {
    border-color: #9CA3AF;
}

.custom-select-trigger.active {
    border-color: #465381;
    box-shadow: 0 0 0 3px rgba(70, 83, 129, 0.3); /* シャドウの色も調整 */
}

.custom-select-trigger .arrow {
    width: 12px;
    height: 12px;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.custom-select-trigger.active .arrow {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #D1D5DB;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-height: 300px; /* 200pxから300pxに増加 */
    overflow-y: auto;
    display: none; /* デフォルトでは非表示 */
    margin-top: 5px;
}

.custom-options.open {
    display: block; /* openクラスが付与されたら表示 */
}

.custom-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #2C396E;
    border-bottom: 1px solid #E5E7EB; /* 各オプションの下に線を追加 */
}

.custom-option:last-child {
    border-bottom: none; /* 最後の項目には下線を表示しない */
}

.custom-option:hover {
    background-color: #F3F4F6;
}

.custom-option.selected {
    background-color: #E5E7EB;
    font-weight: bold;
}

/* 元のセレクトボックスを非表示にする */
.hidden-select {
    display: none !important; /* 強制的に非表示 */
}

/* 絞り込み検索をする のスタイル */
.search-filter-title {
    background-color: #203A72; /* 背景色 */
    color: #FFFFFF; /* 文字色 */
    padding: 8px 20px; /* 上下のパディングを増やし、左右は既存に合わせる */
    font-size: 1.2em; /* フォントサイズを少し大きく */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 検索アイコンのスタイル */
.search-filter-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* =====================================
   ページネーションのスタイル
   ==================================== */
.pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
    margin-bottom: -15px;
    gap: 20px;
}

.pagination-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #203A72;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.pagination-arrow:hover {
    background-color: #2C396E;
}

.pagination-arrow.disabled {
    background-color: #cccccc;
    opacity: 0.6;
}

.pagination-arrow img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.pagination-arrow .arrow-right {
    transform: scaleX(-1);
}

.pagination-numbers {
    display: flex;
    gap: 2px;
    align-items: center;
}

.pagination-number {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    color: #2C396E;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination-number:hover {
    background-color: #F3F4F6;
}

.pagination-number.active {
    color: #203A72;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.pagination-dots {
    color: #555;
    font-weight: bold;
    padding: 0 5px;
}