@charset "UTF-8";

/*¡¡header»Ø¤ê */
body .fade{
    opacity: 0;
    transition: all 1.5s ease 0s;
}

body.skipfade .fade{
    opacity: 1;
}

header.white {
	border-bottom: none;
}

header.white.min {
    border-bottom-color:transparent;
}

header.black {
	background: #fff;
}

header.black.none {
	border: none;
}

header.white.min{
	border-bottom: none;
}

.none{
	display: none;
}

.show{
	display: block;
}

.fade{
	opacity: 0;
}

.area {
	position: relative;
	font-size: 16px;
	padding-top: 115px;
	height: 100vh;
    height: -webkit-fill-available;
}

.area:not(#key) {
	padding-top: 85px;
}

#key{
    width: 100%;
    text-align: center;
    height: 100vh;
    display: table;
    background-size: cover !important;
	overflow: hidden;
	margin-bottom: 1px;
	}

#animation_container01{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);	
}
#animation_container02{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);	
}

.gooddesing{
    position:absolute;
    top: 100px;
    left: 50px;
    width: 170px;
    overflow: hidden;
    line-height: 1;
    font-size: 1;
}

#key:not(.is-main07) .gooddesing {
    display: none !important;
}

/*¥¹¥¯¥í©`¥ë¥À¥¦¥óÈ«Ìå¤ÎˆöËù*/
.scrolldown{
    position:absolute;
    left:calc(50% - 50px);
    bottom:0;
    height:130px;
    overflow: hidden;
    line-height: 1;
    font-size: 1;
}

.scrolldown span{
    position: relative;
    z-index: 10;
}

.scrolldown img{
	max-width: 101px;
}

.skipfade .scrolldown,
.scrolldown.pointer{
	cursor: pointer;
}

/* ¾€¤ÎÃèд */
.scrolldown::after{
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #fff;
  animation: pathmove 2s ease-in-out infinite;
  opacity:0;
}

.scrolldown.black::after{
  background: #000;
}

/*¸ß¤µ?λÖÃ?͸ß^¤¬‰ä»¯¤·¤Æ¾€¤¬ÉϤ«¤éϤ˄Ӥ¯*/
@keyframes pathmove{
  0%{
    height:0;
    top:30px;
    opacity: 0;
  }
  30%{
    height:70px;
    opacity: 1;
  }
  100%{
    height:0;
    top:130px;
    opacity: 0;
  }
}

/*¡¡¹²Í¨ */
section h2{
	font-size: 60px;
    letter-spacing: 0;
    font-weight: normal;
    line-height: 1;
	padding: 50px 0 50px;
}

section h2 span{
	font-size: 20px;
	margin-left: 20px;
}

section h2 span.arrow{
    display: inline-block;
    width: 30px;
    height: 11px;
	margin: 0 20px 0 0;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: skew(45deg);
}

/* feature */
#featureBl .feature_content{
  margin: 0 -60px;
}

#featureBl .feature_content .swiper{
/*    max-height: 530px;*/
/*    height: calc(100vh - 160px - 87px - 60px);*/
    height: calc(100vh - 160px - 87px - 60px);
    margin-bottom: 0;
}

#featureBl .feature_content .swiper-wrap{
/*    padding: 0 60px;*/
}

#featureBl .feature_content .swiper .swiper-slide{
    text-align: center;
    position: relative;
    display: table;
}

#featureBl .feature_content .swiper .swiper-slide  a{
    display: table-cell;
    vertical-align: middle;
}

#featureBl .feature_content .swiper .swiper-slide  a > div{
    position: relative;
}

#featureBl .feature_content .swiper .swiper-slide img {
    max-height: calc(100vh - 160px - 87px - 60px);
    width: auto;
    box-sizing: border-box;
    padding: 0 60px 60px 60px;
}

#featureBl .feature_content .swiper .swiper-slide .caption{
    position: absolute;
    bottom: 80px;
    width: 35%;
    z-index: 10;
    left: 32.5%;
    color: #fff;
    text-shadow: 0 0 15px rgb(0,0,0,1), 0 0 15px rgb(0,0,0,1);
    font-size: 20px;
}


#featureBl .feature_content .swiper .swiper-slide .black{
    color: #000;
    text-shadow: none;
}

#featureBl .feature_content .swiper .swiper-slide .black .arrow{
    border-color: #000;
}

#featureBl .feature_content .swiper .swiper-slide  .arrow{
	margin-left: 30px;
    display: inline-block;
    width: 30px;
    height: 11px;
	margin: 0 20px 0 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: skew(45deg);
}

#featureBl .feature_content .swiper-button-prev{
    left: 15px;
}

#featureBl .feature_content .swiper-button-next{
    right:20px;
}

#featureBl .feature_content .swiper-button-prev:after, 
#featureBl .feature_content .swiper-button-prev:before, 
#featureBl .feature_content .swiper-button-next:after, 
#featureBl .feature_content .swiper-button-next:before{
	display: block;
    content: " ";
    position: absolute;
    top: 16px;
    left: 15px;
    width: 1px;
    height: 25px;
    background: #000;
}

#featureBl .feature_content .swiper-button-prev:before{
    margin: 9px 0 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#featureBl .feature_content .swiper-button-prev:after{
    margin: -9px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#featureBl .feature_content .swiper-button-next:before{
    margin: 9px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#featureBl .feature_content .swiper-button-next:after{
    margin: -9px 0 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media screen and (max-height: 800px) {
   /* ¸ß¤µ800pxÒÔϤΈöºÏ */
    #featureBl .feature_content .swiper{
        height: calc(100vh - 160px - 87px);
        max-height: calc(100vh - 160px - 87px);
    }
    
    #featureBl .feature_content .swiper .swiper-slide img {
        max-height: calc(100vh - 160px - 87px);
        padding: 0 60px 0 60px;
    }    
    
    #featureBl .feature_content .swiper .swiper-slide .caption{
        font-size: 16px;
        bottom: 20px;        
    }
}

/* works */
#worksBl .categoryImgLink{
	justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    transition: all 0.5s ease 0s;
}

#worksBl .categoryImgLink li{
	width: calc(calc(100% - 15px) / 6 );
	height: calc(100vh - 160px - 87px);
	text-align: center;
	background: #525252;
	overflow: hidden;
	position: relative;
	opacity: 0;
}

#worksBl .categoryImgLink li div{
	width: 100%;
	height: 100%;
}

#worksBl .categoryImgLink li img{
    width: 100%;
    height: 100%;
	object-fit: cover;
	transition-duration: 0.3s;
    transition-delay: 0s;
}

#worksBl .categoryImgLink li.active,
#worksBl .categoryImgLink li:hover{
    opacity:1 !important;
}

#worksBl .categoryImgLink li.active img,
#worksBl .categoryImgLink li:hover img{
    transform: scale(1.1);
    opacity:1;
}

#worksBl .categoryImgLink li {
  opacity: 0;
  transform: translateY(500px); 
  transition: opacity .3s, transform 1s;
}

/* ¥Õ¥§©`¥É¥¤¥ó(¥¹¥¯¥í©`¥ë¤·¤¿áá) */
#worksBl .categoryImgLink .fadeUp.is-inview {
    opacity: 1;
    transform: translateY(0);
}

#worksBl .categoryImgLink li:nth-child(1){
    transition-delay: 0s;
}

#worksBl .categoryImgLink li:nth-child(2){
    transition-delay: .15s;
}

#worksBl .categoryImgLink li:nth-child(3){
	transition-delay: .3s;
}

#worksBl .categoryImgLink li:nth-child(4){
	transition-delay: .45s;
}

#worksBl .categoryImgLink li:nth-child(5){
	transition-delay: .6s;
}

#worksBl .categoryImgLink li:nth-child(6){
	transition-delay: .75s;
}

#worksBl .categoryImgLink li span{
	border-top: 3px solid #fff;
	display: block;
	padding: 15px 0;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 1;
	background: #525252;
}

/*¡¡JOURNAL */
#journalBl{
	padding-bottom: 100px;	
}

#journalBl .journal_content{
	justify-content: space-between;
    display: flex;
    flex-wrap: wrap;	
}

#journalBl .journal_content article{
	width: 47.827%;
	margin-bottom: 60px;
}

#journalBl .journal_content article a{
	justify-content: space-between;
    display: flex;
    flex-wrap: wrap;		
}

#journalBl .journal_content article:nth-child(3),
#journalBl .journal_content article:nth-child(4){
	margin-top: 60px;
}

#journalBl .journal_content article .pic{
	width: 42.425%;
}

#journalBl .journal_content article .txt{
	font-size: 16px;
	line-height: 1.8;
	width: 53.032%;
}

#journalBl .journal_content article .tit{
	font-size: 20px;
	font-weight: bold;
}

#journalBl .journal_content article .date{
	text-align: right;
}

@media only screen and (max-width: 1240px) {
    /* feature */
    #featureBl .feature_content .swiper .swiper-slide .caption{
        font-size: 16px;
    }	
}	    
@media only screen and (max-width: 1000px) {
    /*¡¡¹²Í¨ */
    section h2{
        font-size: 50px;
        padding: 30px 0;
    }

    section h2 span{
        font-size: 16px;
    }

    /* feature */
    #featureBl .feature_content{
        margin: 0 -30px;
    }

    #featureBl .feature_content .swiper-wrap {
        padding: 0 30px;
    }

    #featureBl .feature_content .swiper .swiper-slide img{
        padding: 15px;
    }
    
    #featureBl .feature_content .swiper .swiper-slide .caption{
        font-size: 16px;
    }
	
    #featureBl .feature_content .swiper-button-prev {
        left: 5px;
    }
    
    #featureBl .feature_content .swiper-button-next {
        right: 5px;
    }
    
    
    /* works */
    #worksBl .categoryImgLink li{
        height: calc(100vh - 110px - 87px);
    }

    #worksBl .categoryImgLink li span{
        font-size: 14px;
    }

	
    /*¡¡JOURNAL */
    #journalBl .journal_content article .txt{
        font-size: 14px;
    }

    #journalBl .journal_cont    ent article .tit{
        font-size: 16px;
    }
	
}	


@media only screen and (max-width: 1000px) {
  .gooddesing{
      left: 25px;
  }   
}
@media only screen and (max-width: 768px) {

header.white ul{
	background: rgb(0,0,0,0.45);
	border: none;
}
	
.area:not(#key) {
	padding-top: 65px;
}

#key{
	overflow: hidden;
	background-attachment: inherit;
	margin-bottom: 2px;
}
	
#animation_container,
#animation_container2{
	width: 100% !important;
}

#animation_container #canvas,
#animation_container2 #canvas2{
	width: 100% !important;
	height: auto !important;
}

.gooddesing{
    width: 23.5vw;
    max-width: 300px;
    left: 2.5%;
    top: 13vw;
}    
    
/*¥¹¥¯¥í©`¥ë¥À¥¦¥óÈ«Ìå¤ÎˆöËù*/
.scrolldown{
    bottom:0;
    height:80px;
}
    
.scrolldown::after {
  height: 50px;
  animation: pathmoveSP 1s ease-in-out infinite;
}
    

/*¸ß¤µ?λÖÃ?͸ß^¤¬‰ä»¯¤·¤Æ¾€¤¬ÉϤ«¤éϤ˄Ӥ¯*/
@keyframes pathmoveSP{
  0%{
    height:0;
    top:30px;
    opacity: 0;
  }
  30%{
    height:40px;
    opacity: 1;
  }
  100%{
    height:0;
    top:80px;
    opacity: 0;
  }
}    
    
/*¡¡¹²Í¨ */
section h2{
    font-size: 40px;
    padding: 5vw 0;
}

section h2 span{
	font-size: 16px;
	margin-left: 15px;
}

section h2 span.arrow{
	margin: 0 15px 0 0;
}
	
/* feature */
#featureBl .feature_content{
    margin-left: calc(-100% * 1.25 / 20);
    margin-right: calc(-100% * 1.25 / 20);
}

#featureBl .feature_content .swiper{
    height: calc(100vh - 65px - 85px - 170px);
}

#featureBl .feature_content .swiper-wrap{
    padding: 0 5%;
/*    max-height: inherit;
    height: inherit;*/
    max-height: calc(100vh - 65px - 85px - 170px);
    height: calc(100vh - 65px - 85px - 170px);
}
    
#featureBl .feature_content .swiper{
    max-height: calc(100vh - 65px - 85px - 170px);
    height: calc(100vh - 65px - 85px - 170px);
}    

#featureBl .feature_content .swiper .swiper-slide img{
    padding: 0 3%;
/*    max-height: inherit;*/
    max-height: calc(100vh - 65px - 85px - 170px);
    }    

#featureBl .feature_content .swiper .swiper-slide .caption{
    font-size: 14px;
    bottom: 10px;
}

#featureBl .feature_content .swiper .swiper-slide  .arrow{
	margin-left: 30px;
    display: inline-block;
    width: 30px;
    height: 11px;
	margin: 0 20px 0 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: skew(45deg);
}

#featureBl .feature_content .swiper-button-prev{
    left: 1%;
}

#featureBl .feature_content .swiper-button-next{
    right: 0.8%;
}

#featureBl .feature_content .swiper-button-prev:after, 
#featureBl .feature_content .swiper-button-prev:before, 
#featureBl .feature_content .swiper-button-next:after, 
#featureBl .feature_content .swiper-button-next:before{
    top: 16px;
    left: 10px;
    height: 15px;
}

#featureBl .feature_content .swiper-button-prev:before,
#featureBl .feature_content .swiper-button-next:before{
    margin: 5px 0 0;
}

#featureBl .feature_content .swiper-button-prev:after,
#featureBl .feature_content .swiper-button-next:after{
    margin: -5px 0 0;
}
	
/* works */
#worksBl{
}
#worksBl .categoryImgLink{
  margin-left: calc(-100% * 1.25 / 20);
  margin-right: calc(-100% * 1.25 / 20);
}

#worksBl .categoryImgLink li{
    height: calc(100vh - 65px - 85px - 35px);
}

#worksBl .categoryImgLink li span{
    border-top: 2px solid #fff;
    padding: 10px 0;
    font-size: 2.3vw;
}
	
/*¡¡JOURNAL */
#journalBl{
	padding-bottom: 15vw;
}

#journalBl .journal_content article{
	width: 100%;
	margin-bottom: 0 !important;
}

#journalBl .journal_content article + article{
	margin-top: 8vw !important;
}

#journalBl .journal_content article .pic{
	width: 42.425%;
}

#journalBl .journal_content article .txt{
	font-size: 14px;
	line-height: 1.6;
}

#journalBl .journal_content article .tit{
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 5px;
}
}