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

body {
height: 100vh;
height: 100svh;
}
.container {
  position: fixed;
  width: 100%;
    height: 100vh;
    height: 100svh;
  top: 0;
  left: 0;
  overflow: auto;
}

/*---------------------------------------------
	mainvisual
  ---------------------------------------------*/

.swiper01.vh .slide-media img{
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
    
.swiper01.vh .slide-media{
    height: 100vh;
    height: 100svh;
}

/*---------------------------------------------
	introduction
  ---------------------------------------------*/

#introduction{
margin-top: 0;
text-align: center;
}
#introduction .inner{
max-width: 950px;
padding-left:1em;
padding-right: 1em;
padding-top: 130px;
}

#introduction .title{width: 310px}

/*#introduction .title img{
max-width: 305px;
}*/

#introduction .intro-cont{
margin: 65px auto 0;
font-size: 1.6rem;
line-height: 3;
}

@media only screen and (max-width:640px){
#introduction .inner{
padding-top: 80px;
}  
/*#introduction .title img{
max-width: 230px;
}*/
#introduction .intro-cont{
margin: 35px auto 0;
width: 100%;
font-size: 1.2rem;
}
}

/*scroll*/


.scroll{
position: absolute;
z-index: 3;
bottom: 55px;
right: 98px;
height: 80px;
}

.scroll p {
margin: 0 0 12px;
color: #fff;
text-align: center;
letter-spacing: 0.15em;
font-size: 1.5rem;
}
.scrolldown{
position: relative;
width:1px;
 height:50px;
 margin-left:auto;
 margin-right:auto;
}
.scrolldown:before,
.scrolldown:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color:#fff;
}
.scrolldown:before {
 opacity:.5;
}
.scrolldown:after {
 transform:scaleY(0);
 transform-origin:top;
 animation:mainscroll 3500ms cubic-bezier(0.215, 0.61, 0.355, 1) 2400ms running infinite;
}
@keyframes mainscroll {
 0% {
  transform-origin:top;
 }
 25% {
  transform:scaleY(1);
  transform-origin:top;
 }
 25.1% {
  transform-origin:bottom;
 }
 25.2% {
  transform:scaleY(1);
 }
 45%,
 100% {
  transform:scaleY(0);
  transform-origin:bottom;
 }
}

@media only screen and (max-width:640px){
.scroll{
right: 35px;
bottom: 50px;
}
.scrolldown{
height: 75px;
}
.scrolldown:after {
height: 75px;  
}
.scroll p {
display: none;
} 
}


/*---------------------------------------------
	movie
  ---------------------------------------------*/

#movie{
margin-top: 130px;
}

/*#movie .title{
max-width: 140px;
}*/

/*#movie .title.narrow{
max-width: 125px;
}*/

#movie .inner{
max-width: 1350px;
}

#yt-wrap {
  max-width: 1350px;
  margin: auto;
}
#yt-block {

  position: relative;
}
.videoWrapper iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  border: none;
}

.videoWrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/movie-thumbnail.webp");
  background-size: cover;
}

.videoWrapper.pv::after {
  display: none;
}

#play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 150px;
  height: 150px;
  display: inline-block;
  background: url("../img/movie-iconplay.png") no-repeat;
  cursor: pointer;
  background-size: contain;
}

@media only screen and (max-width:640px){
#movie{
margin-top: 75px;
}
/*#movie .title {
  max-width: 68px;
}*/
/*#movie .title.narrow{
max-width: 80px;
}*/
#play {
width: 88px;
height: 88px;
background-size: contain;
}
}

/*---------------------------------------------
	column (picks,action)
  ---------------------------------------------*/

.column{
position: relative;
margin-top: 130px;
}

.column .inner{
max-width: 1200px;
padding: 0 50px;
}

.colomn .swiper{
overflow: inherit;
}

#picks .swiper-slide{
    width: 50%;
    padding: 0 3rem 6rem;
}

/*#action .title{
max-width: 135px;
margin-bottom: 40px;
}*/

/*#picks .title{
max-width: 150px;
margin-bottom: 40px;
}*/

.column .picks-intro{
margin: 0 auto;
text-align: center;
line-height: 1.8;
font-size: 1.4rem;
}

.column .swiper-cont{
position: relative;
}

.column .swiper02{
    margin-top: 75px;
    padding-left: 3rem;
    padding-right: 3rem;
}

#action .swiper02{
margin-top: 75px;
}

.column .swiper02 .slide{
display: flex;
flex-direction: column;
align-items: center;
}

.column .swiper02 a{
position: relative;
display: block;
text-align: center;
}

.column .swiper02 .picks-text{
margin-top: 40px;
font-size: 1.8rem;
display: inline-block;
text-align: left;
max-width: 430px;
}

#action .swiper02 .picks-text{
    margin-top: 40px;
}

.column .swiper02 .picks-text h3{
margin-top: 35px;
font-size: 2.2rem;
line-height: 1.7;
font-weight: 400;
}

#action .swiper02 .picks-text h3{
margin-top: 0;
}

.column .swiper02 .picks-text h3 + p{
margin-top: 20px;
font-size: 1.6rem;
line-height: 1.8;
}
.column .swiper02 .picks-text p + p{
margin-top: 20px;
font-size: 1.6rem;
line-height: 1.6;
}
.column .swiper02 .picks-text .data{
 color: #808080;
}

.column .swiper02 a:hover .picks-text{
opacity: 0.7;
}

.column .swiper02 .picks-img{
position: relative;
}

.column .swiper02 a .picks-img::before{
display: block;
content: '';
width: 100%;
max-width: 420px;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;
border-radius: 50%;
opacity: 0;
}

#action .swiper02 a .picks-img::before{
max-width: 420px;
}


.column .swiper02 a:hover .picks-img::before{
opacity: 1;
z-index: 1;
background: rgba(255,227,0,0.7) url("../img/picks-more.png") center;
background-repeat:  no-repeat;
transition:opacity 1s;
}

.column .swiper-button-prev,
.column .swiper-button-next{
text-justify: auto;
}


.swiper-pagination-bullet {
  background: #999999;
  opacity: 1
}
.swiper-pagination-bullet-active,
.swiper-pagination-bullet:hover{
  opacity:1;
  background: #fff000;
    transition: all 0.3s linear;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 0;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: 0px;
  right: auto
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: 0px;
  left: auto
}

@media only screen and (min-width:1000px) and (max-width:1640px){
.column .swiper02 .picks-text .data{
display: block;
margin-left: 0;
}
}
/*@media only screen and (max-width:1000px){
#picks .swiper-slide{
width: 47%;
    }
.column .swiper02 .swiper-a:not(.swiper-initialized){
padding: 0;
}
.column .swiper-button-prev,
.column .swiper-button-next{
display: none !important;        
}
.swiper-a:not(.swiper-initialized) {
}
.column .swiper02 .swiper-wrapper {
justify-content: space-between;
}
.column .swiper02 .swiper-slide{
width: 100%;
}
.column .swiper02 .swiper-slide{
margin-top: 50px;
}

}*/

@media only screen and (max-width:640px){
.column{
margin-top: 100px;
}
.column .inner{
max-width: 1200px;
padding: 0 20px;
}    
#picks .swiper-slide{
    width: 100% !important;
    }
/*#action .title {
  max-width: 88px;
margin-bottom: 30px;
}*/
/*#picks .title {
  max-width: 99px;
margin-bottom: 30px;
}*/
.column .picks-intro{
font-size: 1.3rem;
line-height: 2;
}

#action .swiper02{
margin-top: 60px;
}    
.column .swiper02{
    margin-top: 60px;
    padding-left: 0;
    padding-right: 0;
}
/*.column .swiper02 .swiper-wrapper {
display: block;
}*/
.column .swiper02 .swiper-slide:first-child{
margin-top: 0;
}
.column .swiper02 .picks-text {
  margin-top: 25px;
  font-size: 1.4rem;
}
.column .swiper02 .picks-text h3{
margin-top: 25px;
font-size: 1.8rem;
}
.column .swiper02 .picks-text h3 + p{
margin-top: 15px;
font-size: 1.3rem; 
}
.column .swiper02 .picks-text p + p{
 font-size: 1.4rem;   
}
.column .swiper02 .picks-img img{
width: 100%;
max-width: 285px;
}
.column .swiper02 a .picks-img::before{
    max-width: 285px;
}
#action .swiper02 a .picks-img::before{
 max-width: 285px;    
    }  
.column .swiper02 .picks-text .data{
display: block;
margin-left: 0;
}
#swiper-picks [class^="swiper-button-"]::after{
    font-size: 30px;
}    
}
@media only screen and (max-width:480px){
#picks .swiper-slide {padding: 0 2rem 6rem;}  

}


/*---------------------------------------------
	gallery
  ---------------------------------------------*/

#gallery{
    margin-top: 130px;
}
#gallery .inner{
max-width: inherit;
width: 100%;
}
/*#gallery .title{
max-width: 145px;
}*/
/*#gallery .title.narrow{
max-width: 140px;
}*/
#gallery figure img{
width: 100%;
height: 100%;
}
#gallery .gallery-row{
display: grid;
grid-template-columns:1fr 1fr 1fr;
-ms-grid-columns:1fr 1fr 1fr;
grid-template-rows:auto;
-ms-grid-rows:auto;
}
#gallery .gallery-row.l1m2{
grid-template-columns:1fr 33.34%;
-ms-grid-columns:1fr 33.34%;
}
#gallery .gallery-row.l1m2 figure:first-child{
grid-row: 1 / 3;
grid-column: 1 / 2;
}
#gallery .gallery-row.l1m2 figure:nth-child(2){
grid-row: 1 / 2;
grid-column: 2 / 3;
}
#gallery .gallery-row.l1m2 figure:last-child{
grid-row: 2 / 3; 
grid-column: 2 / 3; 
}
#gallery .gallery-row.l1m2.reverse{
grid-template-columns:33.34% 1fr;
-ms-grid-columns:33.34% 1fr;
}
#gallery .gallery-row.l1m2.reverse figure:first-child{
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#gallery .gallery-row.l1m2.reverse figure:nth-child(2){
grid-row: 2 / 3;
grid-column: 1 / 2;
}
#gallery .gallery-row.l1m2.reverse figure:last-child{
grid-row: 1 / 3; 
grid-column: 2 / 3;
}
.fadein {
  opacity : 0;
  transition : all 1.35s;
}
.fadein.active{
  opacity : 1;
}
.fadein.active:nth-of-type(1) {
  transition-delay: 0s;
}
.fadein.active:nth-of-type(2) {
  transition-delay: 0.2s;
}
.fadein.active:nth-of-type(3) {
  transition-delay: 0.4s;
}
@media only screen and (max-width:640px){
#gallery{
margin-top: 80px;
}    
/*#gallery .title {
  max-width: 100px;
} */  
 /*#gallery .title.narrow{
max-width: 100px;
}*/
#gallery .gallery-row{
    display: block;
}
}

.title.narrow{width: 150px}


/*---------------------------------------------
	en
  ---------------------------------------------*/

.en h1.logo img {
    max-width: 115px;
}

.en #introduction .title img {
  max-width: 375px;
}

.en #picks .title{
max-width: 230px;
}

.en #picks .swiper02 .picks-text h3{
letter-spacing: 0;
}

.en #picks .swiper02 .picks-text h3 + p{
letter-spacing: 0;
}

@media only screen and (max-width: 640px){
.en h1.logo img {
    max-width: 82px;
}    

.en #introduction .title img {
  max-width: 240px;
}
 .en #picks .title {
    max-width: 180px;
}   
 .en #picks .swiper02 .picks-text{
   padding-left: 1em;
  padding-right: 1em;       
    }

}