/* 全体の基本的なスタイル */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
}

/* h1 {
    color: #0056b3;
    text-align: center;
}

main {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 20px auto;
}

h2 {
    color: #007bff;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 15px;
}

button:hover {
    background-color: #0056b3;
}
/* 
/* ------------------------------------- */
/* ここからがレスポンシブの表示切り替え */
/* ------------------------------------- */

/* デフォルトではPCコンテンツを表示し、スマホコンテンツを非表示にする */
.pc-content {
    display: block; /* PC版コンテンツを表示 */
}

.sp-content {
    display: none;   /* スマホ版コンテンツを非表示 */
}

/* 画面幅が768px以下の時に適用するスタイル（スマホ用） */
@media screen and (max-width: 768px) {
    .pc-content {
        display: none;   /* PC版コンテンツを非表示 */
    }

    .sp-content {
        display: block; /* スマホ版コンテンツを表示 */
    }
}

/* 
/* ------------------------------------- */
/* 画像のズームアップ */
/* ------------------------------------- */

.img-wide {
 	width: 300px;
 	overflow: hidden;
}
 
.img-wide img {
	transition: 0.3s;
}
 
.img-wide img:hover {
	transform: scale(1.1);