@charset "UTF-8";

html {
    font-size: 100%;
}

body {
	color: #555;
    font-family: sans-serif;
    text-align: center;
}
p {
    line-height: 1.7;
}

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

.siro{
	color:white;
}

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

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

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

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

/* 各エリアの背景 */
.area1 {
background-color: #f4f4f7;
opacity: 0.8;
background-image:  linear-gradient(135deg, #eee9e4 25%, transparent 25%), linear-gradient(225deg, #eee9e4 25%, transparent 25%), linear-gradient(45deg, #eee9e4 25%, transparent 25%), linear-gradient(315deg, #eee9e4 25%, #f4f4f7 25%);
background-position:  5px 0, 5px 0, 0 0, 0 0;
background-size: 5px 5px;
background-repeat: repeat;
}

.area2 {
background-color: #f4f4f7;
opacity: 0.6;
background-image: linear-gradient(0deg, #f4f4f7 50%, #d2aa82 50%);
background-size: 7px 7px;
}

.area3 {
background-color: #f4f4f7;
opacity: 0.6;
background-image: radial-gradient(#819bb4 0.35000000000000003px, #f4f4f7 0.35000000000000003px);
background-size: 7px 7px;
}

.area4 {
background-color: #fdf8fd;
opacity: 0.7;
background-image:  linear-gradient(135deg, #f7e5b7 25%, transparent 25%), linear-gradient(225deg, #f7e5b7 25%, transparent 25%), linear-gradient(45deg, #f7e5b7 25%, transparent 25%), linear-gradient(315deg, #f7e5b7 25%, #fdf8fd 25%);
background-position:  9px 0, 9px 0, 0 0, 0 0;
background-size: 18px 18px;
background-repeat: repeat;
}

.area5{
background-color: #f8ddf4;
opacity: 0.6;
background: radial-gradient(circle, transparent 20%, #f8ddf4 20%, #f8ddf4 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #f8ddf4 20%, #f8ddf4 80%, transparent 80%, transparent) 17.5px 17.5px, linear-gradient(#f058db 1.4000000000000001px, transparent 1.4000000000000001px) 0 -0.7000000000000001px, linear-gradient(90deg, #f058db 1.4000000000000001px, #f8ddf4 1.4000000000000001px) -0.7000000000000001px 0;
background-size: 35px 35px, 35px 35px, 17.5px 17.5px, 17.5px 17.5px;
}
 
/*
モバイルサイズ
================================================ */
@media (max-width: 400px) {
h1 {
     font-size: 3rem;
    }
}