@charset "utf-8";

/*========= 紙芝居風レイアウトのためのCSS ===============*/

section.fixed{
    position: -webkit-sticky;/*Safari*/
    position: sticky;
  top: 10.5%;/*Header高さ分で止まるようにする*/
  /*装飾のためのCSS*/
  background:#fff;
  padding:80px 30px 170px 30px;
  min-height: 100vh;
}

section.fixed:nth-of-type(2nd){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}
section.fixed:nth-of-type(3rd){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}
section.fixed:nth-of-type(4th){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}
section.fixed:nth-of-type(5th){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}
section.fixed:nth-of-type(6th){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}
section.fixed:nth-of-type(7th){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}
section.fixed:nth-of-type(8th){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}
section.fixed:nth-of-type(9th){
/*装飾のためのCSS*/
  color:#fff;
  text-align: center;
  padding:300px 30px;
  min-height: auto;
}

section.fixed:last-of-type{
  padding:170px 30px 100px 30px;/*最後のセクションだけ止まらないため、エリア内の情報が少ない時は、HEADER分の高さをpadding-topに追加して上部が見えるようにする*/
}

section.fixed:nth-of-type(2){
  background:url("../img/wcr-169.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}

section.fixed:nth-of-type(4){
  background:url("../img/atworkshop.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}

section.fixed:nth-of-type(6){
  background:url("../img/reverso.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}

section.fixed:nth-of-type(8){
  background:url("../img/biennalen2021_kaori01.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}

section.fixed:nth-of-type(10){
  background:url("../img/biennalen2021_kaori02.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}
section.fixed:nth-of-type(12){
  background:url("../img/kaorijuzustudio01.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}
section.fixed:nth-of-type(14){
  background:url("../img/munich.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}
section.fixed:nth-of-type(16){
  background:url("../img/kaorijuzustudio03.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}
section.fixed:nth-of-type(18){
  background:url("../img/kaorijuzustudio05.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}
section.fixed:nth-of-type(20){
  background:url("../img/kaorijuzustudio04.jpg") no-repeat center;
  background-size:cover;
  opacity: 30%;
}



/*＝＝＝＝＝＝＝＝＝＝＝iphone max以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:414){
  section.fixed,
  section.fixed:last-of-type{
    position:relative!important;/*sticky解除*/
  top:0;/*85px⇒0pxに戻す*/
  min-height: auto;
  padding:30px;
}

  section.fixed:first-of-type{
  padding:100px 30px 30px 30px;/*最初の要素は上部にHeaderの高さ以上の余白をとる*/
  }
  
  section.fixed:nth-of-type(2nd){
  padding:100px 30px;
  }
  
  section.fixed:nth-of-type(3rd){
  padding:100px 30px;
  }
   section.fixed:nth-of-type(4th){
  padding:100px 30px;
  }
  
  section.fixed:nth-of-type(5th){
  padding:100px 30px;
  }
 section.fixed:nth-of-type(6th){
  padding:100px 30px;
  }
section.fixed:nth-of-type(7th){
  padding:100px 30px;
  }
  section.fixed:nth-of-type(8th){
  padding:100px 30px;
  }
  section.fixed:nth-of-type(9th){
  padding:100px 30px;
  }
   section.fixed:nth-of-type(10th){
  padding:100px 30px;
  }
}


/*========= レイアウトのためのCSS ===============*/




#header{
  position: fixed;/*Header固定*/
  top:0;
  height: 85px;/*高さ指定*/
  margin-left: -2%;
  z-index: 2;
  width:100%;
  /*装飾のためのCSS*/
  
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}




#container{
  position: relative;
  z-index: 1;/*header とfooterを手前にするため数字を小さく*/
}



#footer{
  position: relative;
  z-index: 2;
  text-align: center;
  
}