@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

body {
	font-family: 'Noto Sans JP', Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	width: 94%;
	max-width: 800px;
	margin: 15px auto;
	background-color: #ccf0ff; 
}

.background_box {
	max-width: 800px;
	background-color: white;
	padding: 5% 5% 10% 5%;
}	

h1 {
	font-size: 3rem;
	margin: 8% 0;
	text-align: center;
}
h2 {
	font-size: 2rem;
	margin: 5% 0;
	text-align: center;
}
p {
	font-size: 1.2rem;
	margin: 5% 0;
	text-align: left;
}

.p_s {
	font-size: 1rem;
}

.box {
	display: flex;
	flex-wrap: no-wrap;
	width: 90%;	
}
.box div {
	padding: 30px;
	flex: 1;
}
.box a img {
	width: 100%;
}
.box div figure {
	margin: 10px 0;
	text-align: center;
}

.center {
	text-align: center;
}

.center_mp3 {
	display: block;
	margin: 0 auto;
	}

.button_mp3 a {
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 20px;
    max-width: 255px;
    padding: 14px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: rgb(149,202,252);
    background: linear-gradient(270deg, rgba(149,202,252,1) 0%, rgba(107,182,255,1) 100%);
	text-align: center;
}
.button_mp3 a:hover {
    background: rgb(117,188,255);
    background: linear-gradient(270deg, rgba(117,188,255,1) 0%, rgba(62,159,252,1) 100%);
}