@charset "UTF-8";

/* ==========================================================================
   【まとめページ（索引）専用スタイル】
   ・目的：索引カードが詳細ページの「文字被り」や「グリッド崩れ」に影響されないよう独立。
   ========================================================================== */

/* まとめ用グリッド：索引カードを美しく並べる（PC3列） */

.hero-header-full{
background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2000&auto=format&fit=crop');
}
.p-index-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 40px 0;
}

/* 索引カードコンポーネント：文字被りを防ぎ、余白を死守 */
.p-index-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* アイコンと文字を中央に */
    justify-content: center;
    text-decoration: none;
    background: #ffffff;
    border: 3px solid #0070b8; /* 御幸ブルー */
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 10px 10px 0px rgba(0, 112, 184, 0.1);
    transition: all 0.3s ease;
    color: #333;
    min-height: 220px; /* カードの高さを揃える */
    box-sizing: border-box; /* 枠外への突き出し防止 */
}

/* 索引カード内のアイコンと文字 */
.p-index-card .material-icons {
    font-size: 3rem;
    color: #0070b8;
    margin: 0 0 15px 0;
}

.p-index-card .p-index-title {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}

/* ホバー時の挙動 */
.p-index-card:hover {
    transform: translate(-2px, -2px);
    border-color: #e6007e; /* ミユキピンク */
    box-shadow: 12px 12px 0px rgba(230, 0, 126, 0.1);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .p-index-grid {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
}