body {
    font-family: Yu Gothic UI, Arial, sans-serif;
}

.container {
    width: 1160px;
    margin: 0 auto;
}

.menus {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    padding: 0;
}


.menus li a {
    text-decoration: none;
    color: #696969;
    font-size: 16px;
    display: inline-block;
    transition: transform 0.3s;
}

.menus li a:hover {
    transform: scale(1.125); /* 拡大率を適切に調整 */
}

.line {
    border-top: 1px solid #ccc;
    margin: 15px 0 30px 0;
}

.category {
    margin: 0 140px;
}

.category-title {
　　font-weight: 1000;
    font-size: 26px;
    margin: 20px 0;
}

.content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.content-item {
    width: 200px;
    /*text-align: center;*/
    text-align: left;

}

.content-item img {
    width: 210px;
    height: 160px;
    border: 1px solid #c0c0c0;
}

.content-item a {
    text-decoration: none;
    color: black;
}

/* 新しいクラスを追加 */
.custom-font-size {
    font-size: 14px; /* ここで希望のフォントサイズを指定 */
}

/* 新しいクラスを追加 */
.bullet-size {
    font-size: 14px; /* 希望の「•」のフォントサイズ */
}

.text-size {
    font-size: 15px; /* 希望のテキストのフォントサイズ */
}


/* banner-box */
        .container {
            max-width: 1100px;
            width: 100%;
            margin: 20px;
            text-align: center;
        }

        .image-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        .image-container a {
            display: inline-block;
            overflow: hidden;
            border-radius: 15px; /* 常に角を丸くする */
            transition: border-radius 0.3s ease; /* 角の変化にアニメーションを適用 */

        }
        .image-container img {
            transition: transform 0.3s ease; /* 変化にアニメーションを適用 */
            width: 400px; /* 横幅 */
            height: 150px; /* 縦幅 */
            display: block; /* 画像が親要素のサイズに合わせて拡大するように */
            border-radius: 15px; /* 角を丸くする */

        }
        .image-container a:hover {
            border-radius: 15px; /* 角を丸くする */
        }
        .image-container img:hover {
            transform: scale(1.1); /* 10%拡大 */

        }
@media (max-width: 768px) {
	.container { width: 100%; margin-left: 0;}
	.category { margin: 0 15px; }
	.container {width: auto; margin:auto;}
        .image-container {
		margin-left:3%;
                flex-direction: column;
                gap: 10px;
        }
	.image-container a {width: 360px;}
	.image-container img {width: 380px;}

}