/* index_page.css - index.php 専用スタイルシート */

/* ===== 検索機能のスタイル (index.php専用) ===== */
.search-section {
    grid-column: 1 / -1;
    padding: 20px;
    display: flex;
    /* Flexboxで子要素を配置 */
    flex-direction: column;
    /* 縦方向に並べる */
    gap: 15px;
    /* 要素間の間隔 */
    align-items: center;
    /* 中央寄せ */
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.7);
    /* 暗い透明背景 */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    /* ネオン効果 */
}

/* 各検索アイテム（ラベルと入力/選択要素のペア）のコンテナ */
.search-item {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

/* 常時表示される名前検索のスタイル */
.search-item.main-search-item {
    margin-bottom: 10px;
    /* 詳細検索ボタンとの間隔 */
}

#main-search-form {
    width: 85%;
    text-align: center;
}


/* 詳細検索フォームのコンテナ */
#detail-search-form {
    /* JavaScriptで display を flex/none で切り替える */
    display: none;
    /* ★初期状態では非表示★ */
    flex-direction: row;
    /* ★PC版: 横並び★ */
    /* flex-wrap: wrap; */
    /* 要素が収まらない場合に折り返す */
    justify-content: center;
    /* ★中央寄せ★ */
    /* gap: 20px 30px; */
    /* ★縦方向20px, 横方向30pxのギャップ★ */
    width: 100%;
    align-items: flex-start;
    /* 上揃え */
    padding-top: 15px;
    /* 上部にパディング */
    border-top: 1px dashed rgba(255, 0, 0, 0.3);
    /* 区切り線 */
    margin-top: 15px;
    /* 詳細検索ボタンとの間隔 */
}

/* 詳細検索内の各 search-item の幅調整 */
#detail-search-form .search-item {
    /* 3列横並びにする場合の幅計算: (親の全幅 - 左右のギャップの合計) / 3 */
    /* ここでは横方向のgapが30pxなので、2つのgapで60px。 (100% - 60px) / 3 */
    flex-basis: calc((100% - 60px) / 3);
    /* ★3列に均等に中央揃えするための調整★ */
    min-width: 250px;
    /* ★各search-itemの最小幅を設定 (過度に狭くならないように)★ */
    max-width: 350px;
    /* 各項目の最大幅 */
    flex-direction: row;
    /* ★PC版: 各search-item内でラベルとプルダウンを横並び★ */
    justify-content: flex-start;
    /* 左寄せ */
    align-items: center;
    padding: 5px;
    /* 内部パディングで視覚的な区切り */
    border: 1px solid rgba(255, 0, 0, 0.1);
    /* 薄い枠線 */
    border-radius: 5px;
}


/* 詳細検索ボタンのスタイル */
.toggle-button {
    background-color: #ff0000;
    /* 赤い背景 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-right: 20px;
    /* 名前検索フォームとの間隔 */
}

.toggle-button:hover {
    background-color: #cc0000;
    transform: translateY(-2px);
}


/* 検索フォーム内の各要素のスタイル（既存のものを調整） */
.search-section label {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 3px #ff0000;
    white-space: nowrap;
    /* ラベルが折り返さないように */
    min-width: 70px;
    /* ラベルの最小幅を調整 (小さめ) */
    text-align: right;
    /* ラベルを右寄せ（任意） */
    font-size: 0.9em;
    /* テキストサイズを小さめ */
    flex-shrink: 0;
    /* 縮小させない */
}

.search-section select {
    padding: 8px 5px;
    border: 2px solid rgba(255, 0, 0, 0.5);
    border-radius: 5px;
    background-color: rgba(51, 51, 51, 0.9);
    color: #eee;
    font-size: 0.9em;
    /* テキストサイズを小さめ */
    cursor: pointer;
    /* デフォルトの矢印を非表示にしてカスタム矢印を使用 */
    /* -webkit-appearance: none; */
    /* -moz-appearance: none; */
    /* appearance: none; */
    /* カスタム矢印 (SVG data URI) */
    /* background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M7%204L5%206L3%204H7z%22%2F%3E%3C%2Fsvg%3E'); */
    background-repeat: no-repeat;
    background-position: right 8px center;
    /* min-width: 80px; */
    /* ★この指定が横並びの際に邪魔になる可能性があるのでコメントアウトか削除★ */
    flex-grow: 1;
    /* ★残りスペースを埋める (PC版で横並びの際に重要)★ */
    width: auto;
    /* ★幅をautoに設定してflex-growに任せる★ */
}

/* 2つのプルダウンが並ぶ部分の調整 (年齢、身長、バストサイズそれぞれ) */
/* .search-item内で2つのselectが並ぶ場合 */
#detail-search-form .search-item select {
    width: auto;
    /* flex-growが適用されるようにautoにする */
    flex-grow: 1;
    /* 親search-item内で利用可能なスペースを均等に埋める */
    max-width: calc(10% - 10px);
    /* 2つのselectが横に並ぶ場合に50%ずつ、gapを考慮 */
    min-width: 90px;
    /* ★プルダウンの最小幅を少し広めに設定★ */
}


.search-section select:focus {
    outline: none;
    border-color: #ff3333;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

.search-section span {
    color: #eee;
    font-weight: bold;
    margin: 0 5px;
    font-size: 0.9em;
    /* テキストサイズを小さめ */
    flex-shrink: 0;
    /* ～が縮まないように */
}

/* 検索実行ボタンのスタイル */
.search-section .search-button {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
    /* 詳細検索フォームやボタンとの間隔 */
}

.search-section .search-button:hover {
    background-color: #cc0000;
    transform: translateY(-2px);
}

/* ===== 女の子カードグリッドのスタイル (index.php専用) ===== */
/* グリッドコンテナ */
.girl-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 4列表示 */
    gap: 30px;
    /* カード間の間隔 */
    padding: 20px 0;
    justify-content: center;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 1200px;
    width: calc(100% - 40px);
    box-sizing: border-box;
}

/* 各女の子のカード */
.girl-card {
    background-color: #000000bb;
    /* 半透明の黒 */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    color: inherit;
    /* 親から色を継承 */
    border: 2px solid #ff0000;
    /* 赤いボーダー */
    height: 100%;
    /* グリッドの子要素として高さが揃うように */
}

.girl-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(255, 0, 0, 0.7);
    /* ホバーで赤のシャドウ */
}

/* カード内のリンク部分 */
.girl-link-card {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    /* 名前や情報部分が残りスペースを埋める */
    display: flex;
    /* 子要素（h3, p）をflexアイテムとして扱う */
    flex-direction: column;
    /* 子要素を縦に並べる */
    justify-content: space-between;
    /* 上下均等に配置 */
}

.girl-link-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 0, 0, 0.5);
}

.girl-link-card h3 {
    margin: 5px 0;
    font-size: 1.2em;
    color: #ffffff;
    text-shadow: 0 0 3px #ff0000;
    min-height: 1.2em;
    /* 1行分の最小高さを確保 (font-sizeと合わせる) */
    white-space: nowrap;
    /* 名前が折り返さないように */
    overflow: hidden;
    /* はみ出た部分を隠す */
    text-overflow: ellipsis;
    /* はみ出た部分を「...」で表示 */
    line-height: 1.2;
    /* 行の高さを明示的に設定 */
}

.girl-link-card p {
    margin: 2px 0;
    font-size: 0.9em;
    color: #ccc;
    min-height: 0.9em;
    /* 1行分の最小高さを確保 */
    line-height: 1.2;
    /* 行の高さを明示的に設定 */
    flex-grow: 0;
    flex-shrink: 0;
}


/* ===== レスポンシブ対応 (index.php専用) ===== */
@media (max-width: 992px) {
    .girl-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 992px以下で3列 */
        gap: 25px;
    }

    /* 詳細検索の項目を2列にする */
    #detail-search-form .search-item {
        flex-basis: calc(50% - 15px);
        /* (100% - 横gap) / 2 */
        max-width: none;
        /* 2列の場合はmax-widthを解除 */
    }

    /* 2つのプルダウンが並ぶ部分の調整 (年齢、身長、バストサイズそれぞれ) */
    #detail-search-form .search-item select {
        max-width: calc(50% - 5px);
        /* 2つのselectが横に並ぶ場合に50%ずつ、gapを考慮 */
        min-width: 80px;
        /* 最小幅を少し狭める */
    }
}

@media (max-width: 768px) {

    /* 検索セクションの調整 */
    .search-section {
        padding: 15px;
        gap: 10px;
    }

    /* 詳細検索フォームを縦並びに */
    #detail-search-form {
        flex-direction: column;
        /* ★スマホ版: 縦並び★ */
        align-items: center;
        /* 中央寄せ */
        gap: 15px;
        /* スマホ版の項目間のギャップ */
    }

    /* 各検索アイテム（年齢、身長、バストサイズ）を縦並びに */
    #detail-search-form .search-item {
        /* flex-direction: column; */
        /* ★スマホ版: ラベルとプルダウンを縦並び★ */
        align-items: flex-start;
        /* 左寄せ */
        gap: 5px;
        width: 100%;
        /* 親要素の幅いっぱいに */
        flex-basis: auto;
        /* 幅指定を解除 */
        max-width: none;
        /* 最大幅の解除 */
        padding: 5px 10px;
        /* パディング調整 */
        margin: 0;
    }

    .search-item label {
        width: 100%;
        text-align: center;
        min-width: unset;
        font-size: 0.85em;
    }

    .search-section select {
        width: 100%;
        /* プルダウンを全幅に */
        max-width: none;
        /* max-widthを解除 */
        font-size: 0.85em;
        /* ★スマホ版: テキストサイズを小さめ★ */
        padding: 6px 10px;
        /* パディング調整 */
        min-width: unset;
        /* 最小幅の解除 */
        text-align: center;
    }

    /* スマホ版では select が縦並びになるので、max-widthは不要 */
    #detail-search-form .search-item select {
        max-width: none;
        min-width: unset;
    }

    .search-item span {
        align-self: center;
        /* ～を中央に */
        margin: 5px 0;
        font-size: 0.85em;
        /* ★スマホ版: テキストサイズを小さめ★ */
    }

    .toggle-button {
        margin-right: 0;
        /* 名前検索フォームとの間隔 */
    }

    /* 検索ボタンとトグルボタンの幅を調整 */
    .search-section .search-button,
    .toggle-button {
        width: 80%;
        /* 幅を調整 */
        max-width: 300px;
        padding: 10px 15px;
    }

    /* 女の子カードグリッドの調整 */
    .girl-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 768px以下で2列 */
        gap: 20px;
    }

    .girl-link-card img {
        height: 180px;
    }
}

@media (max-width: 480px) {
    #detail-search-form {
        gap: 0;
        padding: 0;
        margin: 0;
    }

    .search-section {
        padding: 10px;
    }

    .search-item {
        gap: 3px;
        width: 90%;
        margin: 0 auto;
    }

    .search-section label {
        font-size: 0.8em;
        /* さらに小さく */
    }

    .search-section select {
        font-size: 0.8em;
        /* さらに小さく */
        padding: 5px 8px;
    }

    .search-section span {
        font-size: 0.8em;
        /* さらに小さく */
    }

    .search-section .search-button,
    .toggle-button {
        width: 90%;
        font-size: 0.9em;
        padding: 8px 12px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .girl-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        width: calc(100% - 30px);
    }

    .girl-link-card img {
        height: 200px;
    }

    .girl-link-card h3 {
        font-size: 1.1em;
    }

    .girl-link-card p {
        font-size: 0.85em;
    }
}