@charset "UTF-8";

html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 画面の高さを最低100%確保する */
    min-height: 100vh; 
}

header nav ul {
        padding-left: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
}
header nav ul li {
    list-style: none;
}
/* main の部分を修正 */
main {
    /* 余っているスペースをすべてこの要素が占有する */
    flex: 1; 
    margin-top: 40px;
    /* contentを中央寄せにしたい場合は以下を追加 */
    display: flex;
    flex-direction: column;
    justify-content: center; 
}
.slider {
    display: block; 
    width: 400px;
    /* 矢印が見やすいよう上下に広めの余白 */
    margin: 80px auto; 
    position: relative;
}
.slider img {
    width: 100%;
    height: auto;
}

/* 矢印の記号（< と >）自体の設定 */
.slick-prev:before, .slick-next:before {
    /* 矢印を大きく */
    font-size: 50px !important; 
    /* 矢印を濃いグレー（または黒）に */
    color: #9e9b9b !important;      
}

/* 矢印ボタンの位置調整 */
.slick-prev {
    /* 画像の左外側に配置 */
    left: -50px !important; 
}
.slick-next {
    /* 画像の右外側に配置 */
    right: -50px !important; 
}

/* ボタンが消えないように強制表示 */
.slick-arrow {
    z-index: 10;
}
a {
    text-decoration: none;
    color: inherit;
}

footer p {
    font-size: 12px;
}

/* レスポンシブ */
@media (max-width: 768px) {
    header nav ul li {
        margin-left: 5px;
    }
    
    /* タイトルを少し小さく */
    header h2 { 
        font-size: 1.2rem; 
    } 
    /* アイコンを少し小さく */
    header nav img { 
        width: 18px; 
    }
    .slider {
        display: block; 
        width: 90%;          /* スマホでは画面の90% */
        max-width: 300px;    /* PCでも最大400pxに制限 */
        margin: 30px auto;
        position: relative;
    }
    .slider img {
        width: 100%;
        height: auto;
    }

    /* PCでの矢印位置（画像の外） */
    .slick-prev { 
        left: -25px !important; 
        z-index: 10;
    }
    .slick-next { 
        right: -6px !important; 
        z-index: 10;
    }
    /* 矢印アイコンをボタンの真ん中に固定する */
    .slick-prev:before, .slick-next:before {
        display: block;
        width: 30px; /* ボタンのサイズ */
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    
        
    header h2 { 
        font-size: 1.2rem; 
    } /* タイトルを少し小さく */
    header nav img { 
        width: 20px; 
    }  /* アイコンを少し小さく */


    /* フッター（もし追加する場合の基本形） */
    footer {
        margin-top: 30px;
        padding: 15px 0;
    }
    footer p {
        font-size: 10px;
    }
}