@charset "UTF-8";

@media screen and (min-width: 600px) {
    

    
.sp{
    display: none !important;
}
.pc{
    display: block !important;
}
    
p{
    font-size: 16px;
}
    
p.address{
    font-size: 14px;
}
    
/*
main{
    margin-top: calc(50vh - 240px);
}
*/
    

     


header h1{
    width: 360px;
    margin: 20px 120px 60px;
}

.header-area-bg{
    top: -420px;
    left: -60px;
}

.footer-area-bg{
    left: -60px;
}

.detail .flow-area
{
    margin-left: 60px;
}

.detail .flow_bg_center {
    right: 30px;}

#detail_creaters{margin-bottom: 150px;}

/*
#detail_creaters .flow_container{
    height: 600px;
}
*/

#map .flow_bg .fluid{
    top: -60px;
    left: -60px;
}



a.scroll-down {
  top: 300px;
}


/*    ----bg-youtube----*/

/*
.overlay, #yt_player {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}
 
.overlay{
    z-index: -1;
}
 
#yt_player{
    z-index: -2;
}
*/

    
#video{position: relative;}
    
#video::after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(#333 20%, transparent 20%),    radial-gradient(#333 20%, transparent 20%);
  background-size: 8px 8px;
  background-position: 0px 0, 8px 8px;
  background-repeat: repeat;
  z-index: -1;
}
    
    
    
    
/*    ----bg-youtube----*/

.fix-area{
display: block;
opacity: 0;
position: fixed;
right: 0;
bottom: 0;
transition: all .5s ease;
z-index: -1;

}

    
    
.fix-area .flow_bg{
right: -100px;
bottom: -250px;
}


.fix-area .flow_bg .fluid{
width: 500px;
height: 500px;
animation: fluidrotate_header-area-bg 30s ease 0s infinite;
z-index: 0;
}

.fix-area>img{
width: 256px;
display: block;
position: relative;
margin: 48px 24px;
}
    

    

    
    
.swiper-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: -2;
}

.swiper-wrapper .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/*    ----teaser----*/
    
    
#greeting .intro{font-size: 20px;}
    
.greeting-content{
    padding: 30px;
}
    
.detail .each>p{
    padding: 60px 30px;
}
    
#detail_creaters.detail .each>p,.nomena-summary{
    padding-left: 30px;
    padding-right: 30px;
}
    
.nomena-summary p{font-size: 18px;}
 
#map p{
    padding: 30px;
}
    
    
.google-map{
    width: calc(100% - 60px);
    max-width: 540px;
    padding-top: calc(100% - 60px);
    margin: 20px 30px 30px;
}
   
    
    
    
    
.bg-slider{position: relative;}
    
.bg-slider::after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(#333 20%, transparent 20%),    radial-gradient(#333 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0px 0, 6px 6px;
  background-repeat: repeat;
  z-index: -1;
}
    
    
.detail .each>p.credits{font-size: 14px;}

    
.detail .flow_bg_01{top: 320px;right: 10px;}

.detail #kuwakubo .flow_bg_center.flow_bg_grey{
 right: 75px;
 top: 90px;
}
    
    
}
    
    


@media screen and (min-width: 900px) {
.fix-area{
opacity: 1;
position: fixed;
z-index: -1;
}
    
}