@charset "UTF-8";

html {
    font-size: 100%;
}

body {
	color: #black;
    font-family: sans-serif;
    text-align: center;
}
p {
    line-height: 1.7;
    text-shadow:
0 0 5px #fff,
0 0 13px #fff,
0 0 13px #fff,
0 0 13px #fff,
0 0 13px #fff;
}

h1{
	font-family: 'Dancing Script', cursive;
	font-size: 5rem;
    margin-bottom: 2rem;
}

.container {
    /* スクロールスナップの設定 */
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
}

.area1,.area2,.area3,.area4 {
    padding: 1rem;

    /* テキストを画面中央に表示 */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* スクロールスナップの設定 */
    scroll-snap-align: start;
    height: 100vh;
}

/* 各エリアの背景 */
.area1 {
    background-color: #ffe4e1;
	background-image: url(img/ph1.jpg);
	background-size: cover;
}
.area2 {
    background-color: #f6ae54;
	background-image: url(img/ph2.jpg);
	background-size: cover;
}

.area3 {
    background-color: #d9aacd;
	background-image: url(img/ph3.jpg);
	background-size: cover;
}
.area4 {
    background-color: #f5f5f5;
	background-image: url(img/ph4.jpg);
	background-size: cover;
}
 
/*
モバイルサイズ
================================================ */
@media (max-width: 400px) {
h1 {
     font-size: 3rem;
    }
}

.siro{
max-width: 700px;
background-color: aliceblue;
opacity: 0.3;
margin: auto;
padding: 20px;
border-radius: 50px;
}