@charset "UTF-8";

:root {
	--main-color: #5D9AB2;
	--accent-color: #3F729D;
	--dark-main-color: #2B5566;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--large-width: 1000px;
　　　
}


body {  
　　　　　display: flex;
        flex-direction: column;
	margin: 0;
	font-family: "メイリオ",
	"Hiragino Kaku Gothic Pro", sans-serif;
}

.page-loader {
  position: fixed;
  z-index: 10001;
  top: 0;
  width: 100%;
  height: 100%;
  background: #efefef;
}
/*===アニメーション==========*/
#fountainTextG {
  margin: 0 auto;
  margin-top: 20vh;
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fountainTextG {
  color: rgb(0,0,0);
  font-family: Arial;
  font-size: 4vmin;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  float: left;
  animation-name: bounce_fountainTextG;
  -o-animation-name: bounce_fountainTextG;
  -ms-animation-name: bounce_fountainTextG;
  -webkit-animation-name: bounce_fountainTextG;
  -moz-animation-name: bounce_fountainTextG;
  animation-duration: 2.09s;
  -o-animation-duration: 2.09s;
  -ms-animation-duration: 2.09s;
  -webkit-animation-duration: 2.09s;
  -moz-animation-duration: 2.09s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  transform: scale(.5);
  -o-transform: scale(.5);
  -ms-transform: scale(.5);
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
}
#fountainTextG_1 {
  animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  -ms-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
}
#fountainTextG_2 {
  animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
}
#fountainTextG_3 {
  animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  -ms-animation-delay: 1.05s;
  -webkit-animation-delay: 1.05s;
  -moz-animation-delay: 1.05s;
}
#fountainTextG_4 {
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}
#fountainTextG_5 {
  animation-delay: 1.35s;
  -o-animation-delay: 1.35s;
  -ms-animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
  -moz-animation-delay: 1.35s;
}
#fountainTextG_6 {
  animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}
#fountainTextG_7 {
  animation-delay: 1.64s;
  -o-animation-delay: 1.64s;
  -ms-animation-delay: 1.64s;
  -webkit-animation-delay: 1.64s;
  -moz-animation-delay: 1.64s;
}
#fountainTextG_8 {
  animation-delay: 1.79s;
  -o-animation-delay: 1.79s;
  -ms-animation-delay: 1.79s;
  -webkit-animation-delay: 1.79s;
  -moz-animation-delay: 1.79s;
}
#fountainTextG_9 {
  animation-delay: 1.94s;
  -o-animation-delay: 1.94s;
  -ms-animation-delay: 1.94s;
  -webkit-animation-delay: 1.94s;
  -moz-animation-delay: 1.94s;
}
#fountainTextG_10 {
  animation-delay: 2.09s;
  -o-animation-delay: 2.09s;
  -ms-animation-delay: 2.09s;
  -webkit-animation-delay: 2.09s;
  -moz-animation-delay: 2.09s;
}
#fountainTextG_11 {
  animation-delay: 2.24s;
  -o-animation-delay: 2.24s;
  -ms-animation-delay: 2.24s;
  -webkit-animation-delay: 2.24s;
  -moz-animation-delay: 2.24s;
}
#fountainTextG_12 {
  animation-delay: 2.39s;
  -o-animation-delay: 2.39s;
  -ms-animation-delay: 2.39s;
  -webkit-animation-delay: 2.39s;
  -moz-animation-delay: 2.39s;
}
#fountainTextG_13 {
  animation-delay: 2.54s;
  -o-animation-delay: 2.54s;
  -ms-animation-delay: 2.54s;
  -webkit-animation-delay: 2.54s;
  -moz-animation-delay: 2.54s;
}
#fountainTextG_14 {
  animation-delay: 2.69s;
  -o-animation-delay: 2.69s;
  -ms-animation-delay: 2.69s;
  -webkit-animation-delay: 2.69s;
  -moz-animation-delay: 2.69s;
}
#fountainTextG_15 {
  animation-delay: 2.84s;
  -o-animation-delay: 2.84s;
  -ms-animation-delay: 2.84s;
  -webkit-animation-delay: 2.84s;
  -moz-animation-delay: 2.84s;
}

 @keyframes bounce_fountainTextG {
   0% {
   transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-o-keyframes bounce_fountainTextG {
   0% {
   -o-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -o-transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-ms-keyframes bounce_fountainTextG {
   0% {
   -ms-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -ms-transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-webkit-keyframes bounce_fountainTextG {
   0% {
   -webkit-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -webkit-transform:scale(.5);
   color:rgb(255,255,255);
  }
}
 @-moz-keyframes bounce_fountainTextG {
   0% {
   -moz-transform:scale(1);
   color:rgb(0,0,0);
  }
   100% {
   -moz-transform:scale(.5);
   color:rgb(255,255,255);
  }
}


.menu{
	height: 20px;
  position: fixed;
  right: 3vw;
  top: 82vh;
  width: 25px;
  z-index: 99;
	display: flex;
}

.menu__line{
  background: black;
  display: block;
  height: 2px;
  position: absolute;
  transition:transform .3s;
  width: 100%;
  box-shadow: 0 0 1px 1px rgba(255,255,255,1);
}
.menu__line--center{
  top: 9px;
}
.menu__line--bottom{
  bottom: 0;
}
.menu__line--top.active{
  top: 8px;
  transform: rotate(45deg);
}
.menu__line--center.active{
  transform:scaleX(0);
}
.menu__line--bottom.active{
  bottom: 10px;
  transform: rotate(135deg);
}

.gnav{
  background: rgba(0,0,0,0.8);
  display: none;
  height: 100vh;
  position: fixed;
	width: 100%;
  z-index: 98;
}

.gnav__wrap{
  align-items: center;
  
}

.gnav__menu{
  position: relative;
  
  min-height: 100%;
  width: 100%;
  list-style: none;
  margin-top: 30vh;

  text-align: center;
}

.gnav__menu__item {
  
  margin: 0 80px -1vh 0;
  filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0));
  background-color:;
}

.gnav__menu a:hover {
  opacity: 0.5;
}

/*.gnav__menu__item{
  width: 100%;
  height: 100%;
  background-color: purple;
}
*/

a {
  text-decoration: none;
  outline: none;
}

.gnav__menu__item a{
  width: 100vw;
  color: #666;
  font-size: 5vh;
  font-weight: bold;
  text-decoration: none;
  transition: .3s;
  
  outline: none;
  
}

.homelogo {
  width: 12vh;
  margin-bottom: 0;
}

.infologo {
  width: 40vh;
  margin-bottom: 1vh;
}

.collectlogo {
  width: 28vh;
  margin-left: 0vh;
  margin-bottom: 0;
}

.aboutlogo {
  width: 16vh;
  margin-left: 0vh;
  margin-bottom: 1vh;
}

.oslogo {
  width: 35vh;
  margin-left: 0vh;
  margin-bottom: 2vh;
}

.iglogo {
  width: 30vh;
  margin-left: 0vh;
  margin-bottom: 1vh;
}

.fblogo {
  width: 22vh;
  margin-left: 0vh;
  margin-bottom: 0;
}

.contactlogo {
  width: 20vh;
  margin-left: 0vh;
  margin-bottom: -2vh;
}

@media screen and (orientation:landscape) {
  .menu {
    top: 5vh;
    right: 3vw;
  }
  
  .gnav {
    
  }
  
  .gnav__wrap {
    
    
  }  

  .gnav__menu { 
    margin-top: 15vmin;

  }

  .gnav__menu__item {
    text-align: right;
    margin: 0 10vw 0.5vmin 0;
  }
  
  .gnav__menu__item img{
    
  }

  .homelogo {
    width: 16vh;
  }

  .infologo {
    width: 44vh;
  }

  .collectlogo {
    width: 32vh;
  }

  .aboutlogo {
    width: 20vh;
  }

  .oslogo {
    width: 39vh;
  }

  .fblogo {
    width: 26vh;
  }

  .contactlogo {
    width: 24vh;
  }
}

.fv {
  　　　
}

@supports (-webkit-touch-callout: none) {
  .fv {
   
  }
}

.headerhome {
	height: 16%;
	width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
	z-index: 99;
}

.header {
	height: 16vh;
	width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99;
}

.puzzlelogo {
	max-height: 12vh;
	max-width: 100%;
	min-height: auto;
        min-width: auto;
        filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}

.logo {
	max-height: 10vh;
	max-width: 100%;
	min-height: auto;
        min-width: auto;
        filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}

.mv {
	display: flex;
	position: relative;
	height: 80%;
	width: auto;
	justify-content: center;
        align-items: center;
	z-index: 3;
        flex: 1;
}



.mv-bg {
	position: absolute;
	max-width: 90vw;
	max-height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;

}

.blogo {
	position: absolute;
	
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
        margin: auto;
}

@media screen and (orientation:landscape) {
  .blogo {
          display: none;
  }
}

.footer {
	height: 4%;	
        width: 100%;
	display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
	z-index: 1;
}

.footer img {
        max-height: 4vh;
	max-width: 100%;
	min-height: auto;
	min-width: auto;
}


/*info ----------------------------------------------- */
.grid {
  display: grid;
  grid-gap: 20px;
  padding-left: 10vw;
  padding-bottom: 2vw;
  width: 80vw;
  grid-template-columns: repeat(auto-fill, minmax(80vw,1fr));
  grid-auto-rows: 1vw;
}

/* Non-grid specific CSS */
body {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.15em;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

.item {
	border-radius: 10px;
	background-color: #e8e8e8;
}

.desc{
  padding: 10px 10px 5px 10px;
  
}

.desc img{
  width: 100%;
  height: auto;
  margin: 0 10px 10px 0;
  float: left;
}

.photothumb{
  width: 100%;
	margin: 0 10px 10px 0;
  float: left;
}

.title {
  padding: 7px;
	border-radius: 10px 10px 0 0;
 }

.title h3{
  font-size: 0.7em;
  color: #ffffff;
  text-transform: uppercase;
}

.project .title{
  background-color: #607D8B;
}

.blog .title{
  background-color: #ff9800;
}

.photo .title{
  background-color: #f44336;
}

.desc video {
	width: 100%;
}

.desc p{
  margin-bottom: 10px;
}

.date {
	font-size: 0.5em;
	list-style: none;
	margin-left: 0px;
}

@media screen and (orientation:landscape) {
	.grid {
		grid-template-columns: repeat(auto-fill, minmax(30vw,1fr));
		grid-auto-rows: 1vw;
	}
}

@media (min-width: 1900px) {
  .grid {
		grid-template-columns: repeat(3, minmax(20vw,1fr));
		grid-auto-rows: 1vw;
	}
}

/* collectionーーーーーーーーーーーーーーーーーーーーーー */

#photos {
	width: 90vw;
	margin-left: 5vw;
  line-height: 0;

	/*-webkit-column-count: 4;
	-webkit-column-gap: 0px;
	-moz-column-count: 4;
	-moz-column-gap: 0px;
	column-count: 4;
	column-gap: 0px;*/

}

#photos img {
	width: 100%;
	height: auto;
	margin-left: 0%;
	padding-bottom: 5%;
}

/*のどかさん*/
.box01 {
  width: 70vw;
  margin-left: 10vw;
}

.box02 {
  width: 80vw;
  margin-left: 5vw;
}

.box03 {

  width: 70vw;
  margin-left: 10vw;
}

 /*河野さん*/
 .box04 {
  float: right;
  width: 70vw;
  margin-right: 10vw;
}

.box05 {
  width: 80vw;
  margin-left: 5vw;
}

/*ファンファンさん*/
.box06 {
  width: 70vw;
  margin-left: 10vw;
}

.box07 {
  width: 80vw;
  margin-left: 5vw;

}

/*浦山さん*/
.box08 {
  width: 70vw;
  margin-left: 10vw;
}

.box09 {
  width: 80vw;
  margin-left: 5vw;
}

/*野村さん*/
.box10 {
  width: 70vw;
  margin-left: 10vw;
}

.box11 {
  width: 80vw;
  margin-left: 5vw;
 
}

/*優紀さん*/
.box12 {
  width: 70vw;
  margin-left: 10vw;
}

.box13 {
 width: 80vw;
 margin-left: 5vw;
}

/*茉奈さん*/
.box14 {
  width: 70vw;
  margin-left: 10vw;
}

.box15 {
  width: 80vw;
  margin-left: 5vw;
}

.box16 /*山本さん*/{
  width: 70vw;
  margin-left: 10vw;
}

.box17 {
  width: 70vw;
  margin-left: 10vw;
}

@media screen and (orientation:landscape) {

  #photos img {
    margin-bottom: 5%;
  }

  /*のどかさん*/
  .box01 {
    width: 35vw;
    margin-left: 27.5vw;
  }
  
  .box02 {
    float: right;
    width: 40vw;
    margin-top: 26.5vw;
    margin-right: 5vw;
  }
    
  .box03 {
    float: left;
    width: 35vw;
  
    margin-left: 5vw;
  }
  
  /*河野さん*/
  .box04 {
    clear: both;
    float: right;
    width: 35vw;
    margin-right: 5vw;
    margin-left: 0vw;
  
  }
  
  .box05 {
    float: left;
    width: 40vw;
    margin-left: 5vw;
    margin-top: 26.5vw;
  }
  
  /*ファンファンさん*/
  .box06 {
    clear: both;
    float: left;
    width: 35vw;
    margin-left: 5vw;
   
  }
  
  .box07 {
    float: right;
    width: 40vw;
    margin-top: 26vw;
    margin-right: 5vw;
  }
  
  /*浦山さん*/
  .box08 {
    clear: both;
    float: right;
    width: 35vw;
    margin-right: 5vw;
  }
  
  .box09 {
    clear: both;
    float: left;
    width: 40vw;
    margin-top: -30.1vw;
    margin-left: 5vw;
  }
  
  /*野村さん*/
  .box10 {
    float: left;
    width: 35vw;
    margin-left: -40vw;

  }
  
  .box11 {
    float: right;
    width: 40vw;
    margin-right: 5vw;
    margin-top: 33.5vw;
   
  }
  
  /*優紀さん*/
  .box12 {
    float: right;
    width: 35vw;
    margin-left: 20vw;
    margin-right: 5vw;
   
  }
  
  .box13 {
    float: left;
    width: 40vw;
    margin-left: 5vw;
    margin-top: -30vw;
  }
  
  /*茉奈さん*/
  .box14 {
    clear: both;
    width: 35vw;
    margin-left: 27.5vw;
    margin-top: -1vw;
  }
  
  .box15 {
    width: 60vw;
    margin-left: 15vw;
  }
  
  /*山本さん*/
  .box16 {
    width: 35vw;
    margin-left: 8vw;
    margin-top: -2vw;
  }
  
  .box17 {
    float: left;
    width: 35vw;
    margin-left: 47vw;
    margin-top: -57vw;
  }
}

.box-fadein img {
  opacity: 0;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
}
.box-fadein.lazyloaded img.lazyloaded {
  opacity: 1;
}


@media (max-width: 1200px) {
  #photosbox {
    width:;
    padding-left: 0;
  }
  #photos {
    -moz-column-count:    ;
    -webkit-column-count: ;
    column-count:         ;
  }
}
@media (max-width: 1000px) {
  #photos {
    -moz-column-count:    ;
    -webkit-column-count: ;
    column-count:         ;
  }
}
@media (max-width: 800px) {
  #photos {
    -moz-column-count:    ;
    -webkit-column-count: ;
    column-count:         ;
  }
}
@media (max-width: 400px) {
  #photos {
    -moz-column-count:    ;
    -webkit-column-count: ;
    column-count:         ;
  }
}

/*about---------------------------*/

.card {
  display: flex;
	flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto 32px;
	
}

#fade1 {

	animation-name: fadein1;
	animation-duration: 2s;
}


@keyframes fadein1 {
	from {
		opacity:0;
		transform: translateY(20px);
	}
		
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#fade2 {
	animation-name: fadein2;
	animation-duration: 2.5s;
	
}

@keyframes fadein2 {
	from {
		opacity:0;
		transform: translateY(40px);
		}
		
	to {
		opacity: 1;
		transform: translateY(0);
		}
	}
	
	#fade3 {
	animation-name: fadein3;
	animation-duration: 3s;
	
}

@keyframes fadein3 {
	from {
		opacity:0;
		transform: translateY(60px);
		}
		
	to {
		opacity: 1;
		transform: translateY(0);
		}
	}

.card-thumbnail {
   width: 100%;
}
	
.card-img {
  width: 100%;
  display: block;
}

.card-caption {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
}



@media screen and (orientation:landscape){

/* 偶数番目に登場する.cardは右から左に要素が配置されるようにする */

	.card {
		flex-direction: row-reverse;
	}
	
	.card:nth-child(even) {
		flex-direction: row;
	}
	
	.card-thumbnail {
		width: 49%;
	}
	
	
	.card-caption {
		width: 50%;
	}

}