/* 共通設定 */
* {
    box-sizing: border-box;
}

body {
    margin-left: 20%;
    margin-right: 20%;
    background-image: url("Winter Gradient1.jpg");
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;;
}

header,footer {
    width: 100%;
    padding-left: 1em;
    padding: 30px 4% 10px;
    text-align: center;
}

a {	
    color: #4b4b4b;
}

ul {
    list-style: none;
    text-align: center;
    padding-inline-start: 0%
}

h1, h2, h3, p {
    text-align: center;
}

div {
    background-color: rgba(255, 255, 255, 0.5);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

hr {
    border: none;
}

.grid{
    display: -ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}

@media screen and (max-width: 767px){
    .grid{
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        grid-gap: 10px;
    }
}
/* レスポンシブ対応 */
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    body {
        margin-left: 5%;
        margin-right: 5%;
    }
}