@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: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
}

.area2 {
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}

.area3 {
background:
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 42% 22%, #d35 43%, rgba(221,51,85,0) 45%),
radial-gradient(circle closest-side at 58% 22%, #d35 43%, rgba(221,51,85,0) 45%),
radial-gradient(circle closest-side at 50% 35%, #d35 32%, rgba(221,51,85,0) 27%),

radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 22%, #d35 40%, rgba(221,51,85,0) 45%) 52px 50px,
radial-gradient(circle closest-side at 60% 22%, #d35 40%, rgba(221,51,85,0) 45%) 48px 50px,
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 37%) 50px 50px;
background-color:#b03;
background-size:100px 100px;
}

.area4 {
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

.area5{
background: linear-gradient(#ffffff 50%, rgba(255,255,255,0) 0) 0 0,
radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 0) 0 0,
radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 0) 55px 0 #48B;
background-size: 110px 200px;
background-repeat: repeat-x;
}
 
/*
モバイルサイズ
================================================ */
@media (max-width: 400px) {
h1 {
     font-size: 3rem;
    }
}