﻿/* スマホ向け（画面幅が600px以下） */
@media (max-width: 600px) {
	.responsive-image {
		background-image: url("small-image.jpg");
	}
}

/* タブレット向け（画面幅が601pxから900px） */
@media (min-width: 601px) and (max-width: 900px) {
	.responsive-image {
		background-image: url("medium-image.jpg");
	}
}

/* PC向け（画面幅が901px以上） */
@media (min-width: 901px) {
	.responsive-image {
		background-image: url("large-image.jpg");
	}
}


/*サイト*/
body{
    background-color: white;
    background-image: url("https://moon.x0.to/img/moon.png");
    background-size: cover;
}

/*メイン*/
.h1title{
    font-size: xx-large;
}

/*ヘッダー・フッター*/
.wrapper{
    min-height: 10px;
    position: relative;
    box-sizing: border-box;
}

/*ヘッダー*/
header{
    width: 100%;
    text-align: center;
    padding: 5px 0;
}

/*フッター*/
footer{
    width: 100%;
    text-align: center;
    color: darkblue;
    padding: 5px 0;
	position: fixed;
    bottom: 0;
}