/* service-sections.css */

/* --- サービス案内セクション全体 --- */
#menu {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    display: grid;
    /* デスクトップ：4列 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
}

/* 各メニュー項目（コンテナ） */
.menu-item {
    position: relative;
    background-color: transparent;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* リンクと画像の枠 */
.menu-item a {
    display: block;
    text-decoration: none;
    overflow: hidden; 
    border-radius: 8px; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); 
    transition: box-shadow 0.4s ease;
    background-color: #fff;
}

/* 画像のスタイル */
.menu-item img {
    width: 100%;
    height: auto;      
    display: block;    
    object-fit: contain; 
    transition: transform 0.6s ease;
}

/* --- ホバーアクション（PC・マウス操作時のみ） --- */
@media (hover: hover) {
    .menu-item:hover {
        transform: translateY(-8px);
    }
    .menu-item:hover img {
        transform: scale(1.08);
    }
    .menu-item:hover a {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }
}

/* --- レスポンシブデザイン --- */

/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    #menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* スマートフォン（640px以下）：1列・余白重視 ★ここを修正 */
@media (max-width: 640px) {
    #menu {
        grid-template-columns: 1fr; /* 1列 */
        /* カード間の垂直方向の隙間をしっかり確保 */
        gap: 40px; 
        margin: 40px auto;
        padding: 0 20px; 
    }
    
    .menu-item {
        width: 100%;
        max-width: none;
        /* Gridのgapが効かない古いブラウザ対策として念のためmarginも追加 */
        margin-bottom: 10px; 
    }

    .menu-item a {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); 
    }

    /* 最後の項目の下の余白をリセット */
    .menu-item:last-child {
        margin-bottom: 0;
    }
}