@charset "utf-8";

body {
	opacity: 0;
}

.under-mainvisual,
#footer {
	background-color: #f7f7f5;
	position: relative;
	z-index: 50;
}

.pc{
	display:block;
}

.sp{
	display:none;
}

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

#first-movie {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 200;
}
#first-movie video {
	position: absolute;
	top: 0;
}

#first-movie .movie_btn{
	width:33px;
	cursor:pointer;
	position:relative;
	transition: all .4s;
	box-sizing: border-box;
	height:26px;
	float:right;
	margin:8px 5px 0px 0;
	z-index:1;
}

#first-movie .movie_btn span{
	width:33px;
	border-top:1px solid #aaa;
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	position: absolute;
}

#first-movie .movie_btn span.line01{
	-webkit-transform: translateY(11.5px) rotate(-45deg);
	transform: translateY(11.5px) rotate(-45deg);
}

#first-movie .movie_btn span.line02{
	-webkit-transform: translateY(11.5px) rotate(45deg);
	transform: translateY(11.5px) rotate(45deg);
}

.scroll_box{
	position:relative;
	height:100vh;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	margin:0 auto;
	font-family: 'didot';
	font-size:24px;
	margin:0 0 22px;
}

.scroll_box .scroll_text{
	padding:0 0 15px;
}

.scroll_box a{
	position:absolute;
	bottom:-38px;
	left:0;
	right:0;
	margin:0 auto;
	color:#fff;
	text-decoration:none;
	/*display: inline-block;*/
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.scroll_box .scroll_img{
	-webkit-transition:all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition:all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	-o-transition:all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition:all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	
	 animation: fluffy1 3s ease infinite;
	
}


@keyframes fluffy1 {
  0% { transform:translateY(0) }
  50% { transform:translateY(15px) }
  100% { transform:translateY(0px) }
}




/* -------------------------------------------------
	main-visual
------------------------------------------------- */

#main-visual {
	width: 100%;
	overflow-x: hidden;
	position: relative;
	z-index: 10;
}
#main-visual .bg-box {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 5;
}
#main-visual .bg-box.bb1 {
	background: url(../img/pic_main_01.jpg) no-repeat center center / cover;
}
#main-visual .bg-box.bb2 {
	background: url(../img/pic_main_02.jpg) no-repeat center center / cover;
}
#main-visual .bg-box.bb3 {
	background: url(../img/pic_main_03.jpg) no-repeat center center / cover;
}
#main-visual .bg-box.bb4 {
	background: url(../img/pic_main_04.jpg) no-repeat center center / cover;
}
#main-visual .black-screen {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 7;
	background-color: rgba(0,0,0,0.5);
	display: none;
}
#main-visual .text-box-wrapper {
	position: relative;
	z-index: 10;
}
#main-visual .text-box {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}
#main-visual .text-box p {
	color: #fff;
	text-shadow: 0 0 10px rgba(0,0,0,0.8);
	font-size: 24px;
	line-height: 1.6;
	text-align: center;
}
#main-visual .text-box.tb4 p {
	line-height: 1.4;
}

@media (max-width:868px) and (min-width:768px){
	#main-visual .text-box.tb4 p {
		font-size: 35px;
	}
}

@media screen and (max-width:767px){
	#main-visual .bg-box.bb1 {
		background: url(../img/pic_main_01_sp.jpg) no-repeat center center / cover;
	}
	#main-visual .bg-box.bb2 {
		background: url(../img/pic_main_02_sp.jpg) no-repeat center center / cover;
	}
	#main-visual .bg-box.bb3 {
		background: url(../img/pic_main_03_sp.jpg) no-repeat center center / cover;
	}
	#main-visual .bg-box.bb4 {
		background: url(../img/pic_main_04_sp.jpg) no-repeat center center / cover;
	}
	#main-visual .text-box p {
		font-size: 16px;
		line-height: 1.6;
	}
	
.pc{
	display:none;
}

.sp{
	display:block;
}

.scroll_box .scroll_text{
	padding:15px 0 0;
	font-size:16px;
}

.scroll_box .scroll_img img{
	transform:rotateX(180deg);
}
	
	
	
}

/* -------------------------------------------------
	main-visual
------------------------------------------------- */

#info {
	margin-bottom: 40px;
}
#info p {
	min-height: 29px;
	padding-top: 6px;
	background-color: #fff;
	position: relative;
	box-sizing: border-box;
}
#info p .label {
	width: 75px;
	height: 29px;
	padding-top: 6px;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	background-color: #000;
	position: absolute;
	display: block;
	left: 0;
	top: 0;
}
#info p a.text {
	text-decoration: none;
	padding-left: 88px;
	font-size: 13px;
	display: inline-block;
}

@media screen and (max-width:767px){
	#info {
		margin-bottom: 10px;
	}
	#info p a.text {
		font-size: 12px;
	}
}

/* -------------------------------------------------
	categories
------------------------------------------------- */

#categories {
	margin-bottom: 65px;
}
#categories li {
	position: relative;
	overflow: hidden;
}
#categories li + li {
	margin-top: 10px;
}
#categories li > img {
	width: 100%;
	position: relative;
	z-index: 5;
}
#categories li .inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	text-align: center;
	text-decoration: none;
}
#categories li .inner p {
	color: #fff;
	font-size: 36px;
	text-shadow: 0 0 10px rgba(0,0,0,0.8);
	position: relative;
	z-index: 10;
}

@media  screen and (min-width:768px){
	#categories li > img {
		-webkit-transition-property: transform;
		-webkit-transition-duration: 0.8s;
		-webkit-transition-timing-function: ease-in-out;
		transition-property: transform;
		transition-duration: 0.8s;
		transition-timing-function: ease-in-out;
	}
	#categories li:hover > img {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}
	#categories li .inner > div::before {
		width: 100%;
		height: 100%;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 5;
		background-color: transparent;
		transition-property: background-color;
		transition-duration: 0.8s;
		transition-timing-function: ease-in-out;
		-webkit-transition-property: background-color;
		-webkit-transition-duration: 0.8s;
		-webkit-transition-timing-function: ease-in-out;
	}
	#categories li .inner:hover > div::before {
		background-color: rgba(0,0,0,0.6);
	}
}

@media screen and (max-width:767px){
	#categories {
		margin-bottom: 25px;
	}
	#categories li .inner p {
		font-size: 18px;
	}
}

/* -------------------------------------------------
	topic
------------------------------------------------- */

#topic .item p {
	line-height: 1.2;
}

@media screen and (max-width:767px){
	#topic .item p {
		margin: 0 5px;
	}
}

/* -------------------------------------------------
	print
------------------------------------------------- */

@media print {
	#first-movie {
		display: none;
	}
	#main-visual {
		width: 888px;
	}
	#main-visual .bg-box {
		height: 600px !important;
		position: absolute;
	}
	#main-visual .text-box.tb1 {
		height: 50px !important;
	}
	#main-visual .text-box.tb2,
	#main-visual .text-box.tb3 {
		height: 50px !important;
	}
	#main-visual .text-box.tb4 {
		height: 450px !important;
	}
	#main-visual .text-box p {
		font-size: 24px;
	}
	#main-visual .black-screen {
		display: none !important;
	}
	
}