html{
    scroll-behavior:smooth;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
    margin:0;
    line-height:1.7;
    color:#222;
    background:#ffffff;
}

.container{
    max-width:960px;
    margin:auto;
    padding:60px 20px;
}

h1,h2,h3{
    line-height:1.3;
}

h1{
    font-size:36px;
    margin-bottom:10px;
    display:flex;
    justify-content: center;
    align-items:center; 
}

ul{
    padding-left:20px;
}

/* navigation */

.nav{
    position:sticky;
    top:0;
    background:#fff;
    border-bottom:1px solid #eee;
    z-index:1000;
}

.nav-inner{
    max-width:960px;
    margin:auto;
    padding:14px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.nav-logo{
    font-weight:700;
}

.nav a{
    text-decoration:none;
    color:#333;
    margin-left:20px;
    font-size:14px;
}

/* hero */

.hero{
    text-align:center;
    padding:100px 20px 80px 20px;
    background:#f7f7f7;
}

.catch{
    font-size:24px;
    font-weight:600;
    margin-bottom:20px;
}

.sub{
    color:#555;
}

.hero-slider-download {
    display:flex;
    justify-content: space-evenly;
    width:100%;
}

@media screen and (max-width:480px) {
    .hero-slider-download {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
    }
}

.hero-slider{
    position:relative;
    width:30%;
    margin:20px;
    aspect-ratio:9/16;
}

@media screen and (max-width:480px) {
    .hero-slider {
	width:70%;
    }
}

.slide{
    position:absolute;
    left:0px;
    width:100%;
    border-radius:18px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
    opacity:0;
    animation:slideShow 16s infinite;
}

.slide:nth-child(1){animation-delay:0s;}
.slide:nth-child(2){animation-delay:4s;}
.slide:nth-child(3){animation-delay:8s;}
.slide:nth-child(4){animation-delay:12s;}

@keyframes slideShow{

0%{opacity:0;}
10%{opacity:1;}
30%{opacity:1;}
40%{opacity:0;}
100%{opacity:0;}

}

*/
/* sections */

.section-alt{
    background:#fafafa;
}

/* button */

.download{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top:40px;
}

.button{
    display:inline-block;
    margin: 10px;
    padding:14px 30px;
    background:#000;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    font-weight:600;
}

/* footer */

footer{
    text-align:center;
    padding:40px;
    color:#777;
    font-size:14px;
    border-top:1px solid #eee;
}

/* nav links */

.nav-links{
    display:flex;
    align-items:center;
}

.nav-links a{
    margin-left:20px;
    text-decoration:none;
    color:#333;
    font-size:14px;
}

/* hamburger icon */

.menu-icon{
    display:none;
    flex-direction:column;
    cursor:pointer;
}

.menu-icon span{
    width:26px;
    height:3px;
    background:#000;
    margin:4px 0;
    display:block;
}

/* checkbox hidden */

#menu-toggle{
    display:none;
}

/* smartphone */
@media (max-width:768px){

    .nav-links{
	position:fixed;
	top:0;
	right:0;

	width:40%;
	height:100vh;

	background:#fff;

	flex-direction:column;
	align-items:flex-start;

	padding:80px 20px;

	box-shadow:-5px 0 20px rgba(0,0,0,0.1);

	/* スライド用 */
	transform:translateX(100%);
	transition:transform 0.3s ease;

	display:flex;
    }

    .nav-links a{
	margin:16px 0;
	font-size:16px;
    }

    /* ハンバーガー表示 */

    .menu-icon{
	display:flex;
	z-index:1001;
    }

    /* メニュー表示 */

    #menu-toggle:checked + .menu-icon + .nav-links{
	transform:translateX(0);
    }

}

/* スクリーンショット */
.screenshot{
    max-width:320px;
    border-radius:18px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
    display:block;
    margin:40px auto;
}