@charset "UTF-8";


*{
margin: 0;
padding: 0;
}

.container{
width: 860px;
margin: 0 auto;
height: 1200px;
/*sectionにheightがあるとsticky効かない
親のcontaneirにつける*/
}

section{
padding: 100px 0;
/*height: 1200px;*/
background-size: cover;
background-position: center;
}

.section01{
background-image: url("../images/01.jpg");
}

.section02{
background-image: url("../images/02.jpg");
}

.section03{
background-image: url("../images/03.jpg");
}

.section04{
background-image: url("../images/04.jpg");
}

article{
background-color: rgba(255,255,255,0.75);
padding: 30px;
position: sticky;
top: 100px;
width: 420px;
margin-left: auto;
}

.traveller{
width: 320px;
position: fixed;
top: 100px;
left:200px;
left: calc((100% - 860px) / 2);
}

img{
max-width: 100%;
height: auto;
}