@charset "UTF-8";
/* CSS Document */

#home-main{
  /*position:fixed;
  top::0;
  bottom:0;
  left:0;
  right:0;
  z-index:0;*/
  height: 100vh;
}
#home-main header{z-index:1;}
#home-main .inner{
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:;
   width:100%;
   height:100%;
   }

#home-main header h1{
  font-size:3em;
  font-weight:100;
  }
#home-main header p{
  font-size:.6em;
  }

.mottainai{
  height:100%; width: 100%;
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center center;
  background-image:url(../images/slide01.jpg);

  display:grid;
  gap : 2rem;
  grid-template-rows: auto 1fr auto;
  padding:10rem 2rem 2rem 2rem;
}
.mottainai strong{
  display:flex;
  justify-content: flex-end;
  font-size:clamp(1.2rem, -0.182rem + 6.91vw, 5rem);
  text-shadow: 0px 4px 3px rgba(255,255,255,0.8),
               0px 8px 13px rgba(255,255,255,0.8),
               0px 18px 23px rgba(255,255,255,0.8);
}
.mottainai h1{
  text-align:center;
  place-content:center;
  
  font-size:clamp(1.4rem, 0.455rem + 4.73vw, 4rem);
  font-weight:bold;

  text-shadow: 0px 4px 3px rgba(255,255,255,0.8),
               0px 8px 13px rgba(255,255,255,0.8),
               0px 18px 23px rgba(255,255,255,0.8);
}
/* #home-main .slick-slider,#home-main .slick-list,#home-main .slick-track{ height: 100%;}
#home-main .a-slide{ height:100%; width: 100%; background-size: cover !important;
background-repeat:no-repeat;
background-position:center center;}
#home-main .slide1 {background-image:url(../images/slide01.jpg);}
#home-main .slide2 {background-image:url(../images/slide02.jpg);}
#home-main .slide3 {background-image:url(../images/slide03.jpg);}

#home-main .slide1 header{
  display:grid;
  gap : 2rem;
  grid-template-rows: auto 1fr auto;
  height:100%;
  padding:10rem 4rem 4rem 4rem;
}
#home-main .slide1 header figure{
  display:flex;
  justify-content: flex-end;
}
#home-main .slide1 header figure img{
  max-width:16rem;
  height:auto;
}
#home-main .slide1 header h1{
  text-align:center;
  place-content:center;
}
#home-main .slide1 header div{
}
#home-main .slide1 header h1{
  font-size:clamp(1.4rem, 0.455rem + 4.73vw, 4rem);
  font-weight:bold;
  margin-bottom:1rem;
}
#home-main .slide1 header p{
  font-size:2rem;
  font-weight:bold;
}
#home-main .slide1 header h2{
  font-weight:bold;
  font-size:clamp(1.4rem, 0.455rem + 4.73vw, 4rem);
}
#home-main .slide2 header h1,
#home-main .slide2 header p{
  color:#fff;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
               0px 8px 13px rgba(0,0,0,0.1),
               0px 18px 23px rgba(0,0,0,0.1);
}
#home-main .slide3 header h1,
#home-main .slide3 header p{
  color:#fff;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
               0px 8px 13px rgba(0,0,0,0.1),
               0px 18px 23px rgba(0,0,0,0.1);
} */


main{
  position:relative;
  z-index:2;
  }
.scroll{
  position:absolute;
  bottom:5%;
  left:0;
  right:0;
  z-index:1;
  }


#concept .inner{
  padding-top:8vw;
  padding-bottom:8vw;
  }
#concept header{
  margin-bottom:2em;
  }
#concept header h2{
  font-size:2.2em;
  letter-spacing:.06em;
  }
#concept header + p{
  font-size:.7em;
  line-height:3;
  letter-spacing:.06em;
  color:#666;
  }
  
  
#instagram{
  background-color:#f5f5f5;
  }  
#instagram .inner{
  padding-top:8vw;
  padding-bottom:8vw;
  }
#instagram header{
  margin-bottom:2em;
  }
#instagram header h2{
 font-size:2.2em;
  }
  
#instagram ul.tags{
  list-style:none;
  margin-bottom:2em;
 font-size:.5em;
 line-height:1;
}
#instagram ul.tags li{
  display:inline-block;
  letter-spacing:.02em;
}
#instagram ul.tags a{
 color:#333;
 padding:.56em;
 /* border:1px #838383 solid;*/
  border-radius:4px;
  margin:.2em;
    -webkit-transition: all .35s ease;
  transition: all .35s ease;
  text-decoration:underline;
  }
@media screen and (min-width: 981px){
  #instagram ul.tags a:hover{
   opacity:.6;
  }
 }

#instagram ul.tags + p{
  font-size:.7em;
  letter-spacing:.06em;
  color:#666;
  }
#instagram #api{
  margin-left:auto;
  margin-right:auto;
  }
#instagram #api ul{
  list-style:none;
  }

#instagram #api li .instagram-data{
  position:relative;
  overflow:hidden;
  }
#instagram #api li a{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    text-indent:-999em;
    z-index:2;
}
#instagram #api li a img{
  width:100%;
  height:auto;
  }
#instagram #api li .instagram-info{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  width:100%;
  text-align:center;
  z-index:1;
  opacity:0;
  margin-top:-1em;
  }
  
@media screen and (min-width: 981px){
 #instagram #api li .instagram-data:hover .instagram-info{
   opacity:1;
   }
 #instagram #api li .instagram-data:hover img.instagram-image{
  -webkit-filter: blur(5px) brightness(160%);
  -moz-filter: blur(5px) brightness(160%);
  -o-filter: blur(5px) brightness(160%);
  -ms-filter: blur(5px) brightness(160%);
  filter: blur(5px) brightness(160%);
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -o-transform:scale(1.2);
  -ms-transform:scale(1.2);
  -ms-transform:scale(1.2);
  transform:scale(1.2);
  }    
  }

.instagram-data .date{
  font-size:.6em;
  }
.instagram-data .like,
.instagram-data .cmt{
  padding:.2em;
  }
.instagram-data .like i,
.instagram-data .cmt i{
  font-size:.6em;
  vertical-align:middle;
  margin-right:.5em;
  }
@media screen and (max-width: 767px) {
#instagram #api li {
  width: calc(100% / 2);
 padding:2vw;
}
}
@media only screen and (min-width: 768px) {
#instagram #api li {
  width: calc(100% / 3);
  padding:3vw;
}
}


#pencilflake-art .inner{
 padding-top:8vw;
  padding-bottom:8vw;
  }
#pencilflake-art header{
  margin-bottom:2em;
  }
#pencilflake-art header h2{
   font-size:2.2em;
  }
#pencilflake-art header + p{
  font-size:.7em;
  line-height:2;
  color:#666;
  margin-bottom:3em;
  }
#pencilflake-art .slider-for{
  padding:0 4vw;
  }
#pencilflake-art .slider-for img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  }
#pencilflake-art .slider-nav{
  padding: 04vw;
  }
@media screen and (max-width: 767px) {
  #pencilflake-art .slider-for img{
  height:30em;
  width:auto;
  }
}
@media only screen and (min-width: 768px) {
#pencilflake-art .slider-for img{
  width:auto;
  height:640px;
  }
}

#event{
   background-color:#f5f5f5;
   }
#event .inner{
  padding-top:8vw;
  padding-bottom:8vw;
  }
#event header{
  margin-bottom:2em;
  }
#event header h2{
  font-size:2.2em;
  letter-spacing:.06em;
  }
#event header + p{
  font-size:.7em;
  line-height:2;
  color:#666;
  margin-bottom:3em;
  }
#event header + p a{
 color:#333;
 padding:.56em;
    -webkit-transition: all .35s ease;
  transition: all .35s ease;
  text-decoration:underline;
  }
#event .event-main{
  position:relative;
  margin-bottom:2em;
  }
#event .event-main img{
  margin-bottom:1em;
  }
#event .event-main p{
    font-size:.7em;
    }
#event .event-main p span{
    margin-right:.5em;
    }
#event .event-main a{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
  display:block;
  text-indent:-999em;
  background-color:#fff;
  opacity:0;
  }