@charset "UTF-8";

/*--------------------------------MV--------------------------------*/

#mv:before{
	content: "楽しいは\A世界をもっと良くできる";
}
#mv:after{
	content: "ENTERTAINMENT FOR THE BETTER WORLD ";
}

#mv_outer{
	/*mvに背景とかはここを利用する*/
	padding-top: 25px;
	position: relative;
}
#mv_outer:before{
    position: absolute;
    left: 0;
    width: 100%;
    top: 35%;
    height: 65%;
    content: "";
    background: #f6f6f6;
}
#mv{
	width: 70%;
	margin-left: 30%;
	height: 90vh;
	min-height: 370px;
	position: relative;
	z-index: 1;
}
#mv:before{
	white-space: pre;
	font-size: 6.6rem!important;
	line-height: 1.16;
	font-weight: 500;
	color: #000;
	letter-spacing: 0.2rem;
	position: absolute;
	left: -21vw;
	top: 50%;
	height: 300px;
	font-family: 'Alata', sans-serif;
}
#mv:after{
	/*スライドに重ねる色*/
	/*background: rgba(0,0,0,0);*/
	pointer-events: none;
	font-size: 3.2rem;
	color: #fff;
	color: #000;
	position: absolute;
	left: -21vw;
	top: calc(50% + 180px);
	height: 50px;
	z-index: 0;
}

#mv .mv_mov{
	background: #000;
}
#mv .mv_mov iframe{
	opacity: 0.7;
}

#mv .mv_text{
	top: 50%;
	height: 300px;
	align-items: flex-start;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	overflow: hidden;
}
#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	padding-left: 0px;
	padding-right: 15px;
	position: relative;
	margin-left: -21vw;
}
#mv .mv_text h2{
	font-size: 6.6rem !important;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.16;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.2rem;
	white-space: nowrap;
	font-family: 'Alata', sans-serif;
  /*以下追記*/
	text-align: left;
	position: absolute;
	left: 0;
}
#mv .mv_text p{
	font-size: 3.2rem;
	color: #fff;
	max-width: 1500px;
	height: 50px;
	position:absolute;
	top: 179px;
	/* font-family: 'Alata', sans-serif; */
	left: -1vw;
}
#mv .mv_scroll{
    width: 120px;
    height: 25px;
    position: absolute;
    top: 30%;
	left: -30vw;
	transform: rotate(90deg);
	overflow: hidden;
}
#mv .mv_scroll a {
    text-indent: 0;
    font-size: 11px;
	letter-spacing: 0rem;
	text-transform: uppercase;
	font-weight: 500;
	color: #000;
	width: 120px;
	position: relative;
	padding-top: 5px;
}
#mv .mv_scroll a::after{
	content: '';
	height: 1px;
	width: 120px;
	background: #ddd;
	position: absolute;
	left: 0px;
	top: auto;
	bottom: 5px;
}

#mv .mv_scroll a::before {
    content: "";
    display: block;
	height: 1px;
    position: absolute;
	top: auto;
	bottom: 5px;
	background-color: #000;
	transform: rotate(0deg);
	animation:indicator 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
	z-index: 1;
}
@keyframes indicator {
	0% {
		left:0;
		transform-origin:left top;
		width:10px
	}
	20% {
		width:30px
	}
	80% {
		width:40px
	}
	100% {
		transform-origin:left top;
		left: 100%;
		width:0px
	}
}

#mv .mv_pointer{
	display: none;
	text-align:center;
	bottom: -26px;
}
#mv .mv_pointer li{
	width: 10px !important;
	margin: 0 5px !important;
}
#mv .mv_pointer li:before{
	width: 10px !important;
	height: 10px !important;
	border-radius: 10px;
	margin-top: 5px !important;
	background: rgba(180,180,180,0.5);

}
#mv .mv_pointer li.current:before{
	background: #000;
}
#mv .mv_arrow{
	display: none;
}
#mv .mv_arrow li.mv_arrow_prev span:before,
#mv .mv_arrow li.mv_arrow_next span:before{
	border-left: 2px solid rgba(180,180,180,0.7);
	border-top: 2px solid rgba(180,180,180,0.7);
}

@media screen and (max-width: 1400px) {
	#mv .mv_text p{
		left: -0.5vw;
	}
}

@media screen and (max-width: 100vh){
	#mv{
		height: 65vh;
	}
}
@media screen and (max-width: 1000px){
	#mv:before,
	#mv .mv_text h2{
		font-size: 4rem!important;
	}
	#mv:after,
	#mv .mv_text p{
		font-size: 2.8rem;
	}
	#mv .mv_text p{
		top: 150px;
	}
	#mv:after{
		top: calc(50% + 150px);
	}
}
@media screen and (max-width: 900px){
	#mv_outer{
		padding-top: 0px;
	}
}
@media screen and (max-width: 600px){
	#mv{
		width: 80%;
		margin-left: 20%;
	}
	#mv:before,
	#mv:after{
		left: -15vw;
	}
	#mv .mv_text,
	#mv:before,
	#mv:after{
		height: 150px;
		top: 70%;
	}
	#mv .mv_text > div{
		margin-left: -15vw;
	}
	#mv .mv_scroll{
		left: -25vw;
	}
	#mv:before,
	#mv .mv_text h2{
		font-size: 3rem!important;
	}
	#mv .mv_text h2{
		left: 0;
	}
	#mv:after,
	#mv .mv_text p{
		font-size: 2rem!important;
		height: 50px;
		line-height: 1.6;
	}
	#mv .mv_text p{
		top: 95px;
		left: 0;
	}
	#mv:after{
		top: calc(70% + 95px);
	}
}
@media screen and (max-width: 400px){
	#mv .mv_scroll{
		left: -25vw;
		width: 80px;
	}
	#mv .mv_scroll a{
		width: 80px;
	}
	#mv:before,
	#mv .mv_text h2{
		font-size: 2.6rem!important;
		letter-spacing: 0.05rem;
	}
	#mv:after,
	#mv .mv_text p{
		font-size: 1.6rem!important;
	}
	#mv .mv_text p{
		top: 85px;
	}
	#mv:after{
		top: calc(70% + 85px);
	}
}

/*------------------自分たちの社会や～------------------------*/

#col01+.contents_box01{
	background-size: 80% 100%!important;
}
#col01+.contents_box01.valign-top .wrapper_item{
	align-items: center;
}
#col01+.contents_box01 .inner_item_img{
	padding-right: 4.5vw;
}
#col01+.contents_box01 .inner_item_txt{
	padding-left: 4.5vw;
	padding-right: 3vw;
}
@media screen and (max-width: 900px){
	#col01+.contents_box01 .inner_item_txt,
	#col01+.contents_box01 .inner_item_img{
		padding: 0 2vw;
	}
}

/*------------------画像4カラム------------------------*/

#service01+.composite_box01 .wrapper_item{
	flex-wrap: nowrap;
}
#service01+.composite_box01.block_images_7 .inner_item_txt{
	min-height: 150px;
}
#service01+.composite_box01.block_images_7 .inner_item{
	height: calc(25vw * 0.8);
	cursor: pointer;
	position: relative;
}
#service01 + .composite_box01.block_images_7 .inner_item:before{
	position: absolute;
	display: block;
	content: "";
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: 0.5;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	z-index: 1;
	transition: 0.2s;
}
#service01 + .composite_box01.block_images_7 .inner_item:hover:before{
	opacity: 0.65;
}
#service01+.composite_box01.block_images_7 .inner_item:nth-of-type(2n){
	margin-top: 4.2vw !important;
}
#service01+.composite_box01 .inner_item_img{
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
#service01 + .composite_box01.block_images_7 .inner_item:hover img{
	transform: scale(1.05);
}
#service01+.composite_box01 .inner_item .heading{
	margin-bottom: 0;
}
#service01+.composite_box01 .heading.block_header_4 .h{
	font-size: 3.7rem;
	letter-spacing: 0.4rem;
	font-weight: 500;
	padding-bottom: 10px;
	position: relative;
	margin-bottom: 20px;
}
#service01+.composite_box01 .heading.block_header_4 .h:before{
	content: "";
	width: 50px;
	height: 4px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 25px);
	background: #fff;
}
#service01+.composite_box01 .heading.block_header_4.align-center .h{
	border-left: none;
	padding-left: 0;
}
#service01+.composite_box01 .inner_item_txt p{
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	padding: 0 10px;
	text-align: center;
	margin-bottom: 0;
}
#service01+.composite_box01 .inner_item_txt:hover p{
	opacity: 1;
}
@media screen and (max-width: 1350px){
	#service01+.composite_box01 .heading.block_header_4 .h{
		font-size: 2.3rem !important;
		letter-spacing: 0.4rem !important;
	}
}
@media screen and (max-width: 900px){
	#service01+.composite_box01 .wrapper_item{
		flex-wrap: wrap;
	}
	#service01+.composite_box01.block_images_7 .inner_item{
		width: 50% !important;
    	height: calc(50vw * 0.8);
    	min-height: 200px;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}
	#service01+.composite_box01.block_images_7 .inner_item:nth-of-type(2n){
		margin-top: 0 !important;
	}
	#service01+.composite_box01.block_images_7 .inner_item:nth-of-type(2){
		margin-top: 0vw !important;
	}
	#service01+.composite_box01.block_images_7 .inner_item:nth-of-type(3){
		margin-top: 0vw !important;
	}
	#service01+.composite_box01.block_images_7 .inner_item:nth-of-type(n+3){
		transform: translateY(-4.5vw);
		z-index: 0;
	}
	#service01+.composite_box01 .inner_item_txt p{
		opacity: 1;
	}
}
@media screen and (max-width: 400px){
	#service01+.composite_box01 .heading.block_header_4 .h{
		letter-spacing: 0.2rem !important;
	}
	#service01+.composite_box01 .inner_item_txt p{
		font-size: 1.2rem;
	}
}
.composite_box01.block_images_7 .inner_item_txt {
    background: none!important;
}
.block_images_7 .inner_item_txt {
    background: none!important;
}
/*------------------メンバーシップ制度------------------------*/

#col02+.contents_box01{
	background-size: 100% 60%!important;
}