@charset "utf-8";




/*------------------------------------
　slider
------------------------------------*/ 

#slider_block {
	position: fixed;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#slider_block:after {
    background: rgba(0,0,0,0.3);
	position: fixed;
	content: "";
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}	
#slider_block img {
	width: 100vw;
	max-width: none;
	height: 100vh;
	object-fit: cover;
	object-position: center;
}
_:lang(x)::-ms-backdrop, #slider_block img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 767px) {

#slider_block {
	bottom: auto;
	height: calc( 30em + 6.5rem);
	padding-top: 6.5rem;
}
#slider_block img {
	height: 30em;
}


}




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

#mainVisual:after {
    background: rgba(0,0,0,0.3);
	position: fixed;
	content: "";
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}	
#mainVisual > figure img {
	width: 100%;
	max-width: none;
	height: 100vh;
	object-fit: cover;
	object-position: center;
}	
#mainVisual > * {
	position: relative;
    z-index: 1;
}	
#youtube {
	position: fixed;
	z-index: 0;
	top: -60px;
	bottom: -60px;
	left: 0;
    right: 0;
	width: -webkit-calc( 100vw - 15em);
	width: -moz-calc( 100vw - 15em);
	width: calc( 100vw - 15em);
	max-width: none;
	height:  -webkit-calc( 100vh + 120px);
	height:  -moz-calc( 100vh + 120px);
	height:  calc( 100vh + 120px);
}
@media only screen and (max-width: 767px) {

#youtube {
	bottom: auto;
	height: -webkit-calc( 30em + 8.5rem);
	height: -moz-calc( 30em + 8.5rem);
	height: calc( 30em + 8.5rem);
	padding-top: 6.5rem;
    box-sizing: content-box;
    width: 100vw !important;
}


}

/*iPad 縦向きのみ*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {


#youtube {
	bottom: auto;
	height:  -webkit-calc( 40em + 120px);
	height:  -moz-calc( 40em + 120px);
	height:  calc( 40em + 120px);
}

}




/*------------------------------------
　mainVisual
------------------------------------*/ 

#mainVisual .container p {
	letter-spacing: .1em;
	line-height: .75em;
}
@keyframes fadeInOut {
  0% {
    top: -.3125em;
    left: -.3125em;
    opacity: 0;
  }
  25% {
    top: 0;
    left: 0;
    opacity: 1;
  }
  50%,
  100% {
    top: .3125em;
    left: .3125em;
    opacity: 0;
  }
}



@media only screen and (max-width: 767px) {

#mainVisual > .container {
    height: 30em;
}
#mainVisual .container .title {
	font-size: 11.5vw;
}
#mainVisual .container .sub_title {
	font-size: 5.5vw;
	line-height: 1.5em;
}




}
@media only screen and (max-width: 576px) {

}
@media print, screen and (min-width: 768px) {

#mainVisual {
    min-height: 50em;
	height: 100vh;
}
#mainVisual > .container {
    height: 100%;
}
#mainVisual .container .title {
	font-size: 8vw;
	padding-bottom: 2.25em;
}
#mainVisual .container .sub_title {
	font-size: 5.5vw;
	line-height: 1.5em;
}

/* メインCSS */
.scrolldown {
  	margin: 0 auto;
  	padding: 0;
  	width: 3.125em;
  	height: 3.125em;
  	position: absolute;
  	bottom: 0;
	-webkit-transform: translateY(-9em) translateX(-50%) rotate(45deg);
	transform: translateY(-9em) translateX(-50%) rotate(45deg);
	left:50%;
}
.scrolldown span {
  	position: absolute;
  	top: 0;
  	left: 0;
  	display: block;
  	width: 100%;
  	height: 100%;
  	border-bottom: 3px solid #f29939;
  	border-right: 3px solid #f29939;
  	animation: fadeInOut 1.5s linear infinite;
  	opacity: 0;
}
.scrolldown span:nth-child(1) {
  	transform: translate(-.9375em, -.9375em);
  	animation-delay: -0.4s;
}
.scrolldown span:nth-child(2) {
  	transform: translate(0, 0);
  	animation-delay: -0.2s;
}
.scrolldown span:nth-child(3) {
  	transform: translate(.9375em, .9375em);
  	animation-delay: 0s;
}



}
@media print, screen and (min-width: 992px) {

#mainVisual .container .title {
	font-size: 6.25em;
}
#mainVisual .container .sub_title {
	font-size: 3.125em;
}


}
@media print, screen and (min-width: 1200px) {
}


/*iPad 縦向きのみ*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {


#mainVisual {
    min-height: 40em;
	height: 40em;
}


}






/*------------------------------------
　TOPICS
------------------------------------*/ 

.topics_block {}
.topics_block > div {
	position: relative;
	overflow: hidden;
}
.topics_block > div a:after{
	content: "";
	width: 100vw;
	height: 100vw;
	position: absolute;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	left:50%;
	top:50%;
}
.topics_block .data_ul li {
	color: #fff;
}


@media only screen and (max-width: 767px) {

#topics {
	background-color: #ac9c9c;
	margin-top: -.4em;
}
.topics_block > div {
	padding-top: .75em;
	padding-bottom: .75em;
	font-size: 1.25em;
}
.topics_block .data_ul,
.topics_block .data_ul li {
	width: 100%;
	text-align: center;
}
.topics_block .data_ul li {
	line-height: 1em;
}




}
@media only screen and (max-width: 576px) {

}
@media print, screen and (min-width: 768px) {

#topics {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,.39);
	text-align: center;
}
#topics .topics_block > div {
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}




}
@media print, screen and (min-width: 992px) {

}
@media print, screen and (min-width: 1200px) {
}







/*------------------------------------
インスタグラム
------------------------------------*/ 

.instagram_block > * {
filter:  alpha(opacity=0) !important;  opacity:0 !important;
}
.instagram_block > * {
max-width: none !important;
width: 100% !important;
min-width: auto !important;
margin: 0 !important;
display: block !important;
border-radius: 3px !important;
border: 1px solid rgb(219, 219, 219) !important;
}
.instagram_block.set_up > .instagram-media.instagram-media-rendered {
filter:  alpha(opacity=100%) !important;  opacity:1 !important;
}

@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 575px) {

}
@media print, screen and (min-width: 768px) {


}
@media print, screen and (min-width: 992px) {
}
@media print, screen and (min-width: 1200px) {
}