@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

#container .text-title {
	text-align: center;
    font-size: 3.3em;
	margin:0 0 70px;
}

 

#index .box {
	overflow:hidden;
	zoom:1;
	margin:0 0 70px;
}

 

#index  .box .photo {
    float: right;
	width: 50%;
}

 

#index .box .text-head {
	/*
    margin-left: 30%;
    padding-top: 100px;
	*/
    font-size: 2.2em;
}

 

#index .box .text-detail {
	/*
    margin-left: 30%;
    padding-top: 100px;
	*/
    font-size: 1.6em;
}

 

#index .flex_box {
    padding:  0px;
    display: flex;
    align-items:stretch;
	margin:0 0 70px;
}

 

#index .flex_box-item {
    padding: 0px;
    margin:  10px;
    width: 100%;
}

 

#index .flex_box-item .text-head {
	/*
    margin-left: 30%;
    padding-top: 100px;
	*/
    font-size: 2.2em;
}

 

#index .flex_box-item .text-detail {
	/*
    margin-left: 30%;
    padding-top: 100px;
	*/
    font-size: 1.6em;
}

img {
	max-width:100%;
}

body,html,#wrap {
	width:100%;
	height:100%;
}

#demo {
	width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
	background:#fff;
	z-index:9999;
}

#demo p {
	font-size:1.8em;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

/*-------------------------------------------------------------------
	#contents
-------------------------------------------------------------------*/


#contents {
	width:1460px;
	margin:0 auto;
}

/*===============================================
  画面の横幅が1400px以下に適用
===============================================*/
@media screen and (max-width: 1450px){
	
	#container .text-title {
		text-align: center;
	    font-size: 2.5em;
		margin:0 0 70px;
	}

	#index .flex_box {
		flex-flow: column;
	}

	#contents {
		width:94%;
	}

}

/*-------------------------------------------------------------------
	#mainimg
-------------------------------------------------------------------*/

#mainimg .symbol {
	position:absolute;
	left:5%;
	bottom:-40px;
	z-index:10;
	/*
	animation: rotate-anime 10s linear infinite;
	*/
	animation: test-anime 1s linear;
}

#mainimg .symbol2 {
	position:absolute;
	right:5%;
	top:200px;
	z-index:10;
	/*
	animation: rotate-anime 10s linear infinite;
	*/
	animation: test-anime 0.5s linear;
}

@keyframes rotate-anime {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}

@keyframes test-anime {
	0%  {transform: scale(0.0);}
	100%  {transform: scale(1.8);}
}

#mainimg .title {
	position:absolute;
	top:100px;
	left:0;
	width:100%;
	text-align:center;
	z-index:15;
}


#movie {
}

#movie video{
	width: 100%;
}

#movie .links {
	position:absolute;
	bottom:50px;
	right:50px;
	z-index:995;
}

#movie .links a {
	display:block;
	width:60px;
	height:40px;
	text-indent:-9999px;
	/*font-size:1.4em;
	line-height:1.0;
	color:#FFF;
	background:#0083c7;
	padding:7px 20px 10px;
	border-radius:10px;*/
}

#movie .links a.sound_off {
	background:url(../image/index/sound_off.png) center center no-repeat;
}

#movie .links a.sound_on {
	background:url(../image/index/sound_on.png) center center no-repeat;
}

/*
#movie .links a:hover {
	text-decoration:none;
	background:#006397;
}
*/

/*-------------------------------------------------------------------
	#index
-------------------------------------------------------------------*/

#index {
}

#index .box01,
#index .box02 {
	margin:0 0 15px;
}

#index .box01 .left {
	float:left;
}

#index .box01 .right {
	float:right;
	width:720px;
}

#index .box01 .right ul {
	margin:0 0 15px;
}

#index .box01 .right ul.sec {
	margin:0;
}

#index .box01 .right ul li {
	float:left;
}


#index .box01 .right ul li.end {
	float:right;
}

#index .box02 ul {
}

#index .box02 ul li {
	margin:0 20px 0 0;
	float:left;
}

#index .box02 ul li.end {
	margin:0;
	float:right;
}

#index .box02.last {
	margin:0;
}

/*===============================================
  画面の横幅が1450px以下に適用
===============================================*/
@media screen and (max-width: 1450px){
	
	#index .box01 .left {
		max-width:49.5%;
	}

	#index .box01 .right {
		width:auto;
		max-width:49.5%;
	}

	#index .box01 .right ul li {
		max-width:48.5%;
		margin:0 1% 0 0;
	}

	#index .box02 ul li {
		width:24.2%;
		margin:0 1% 0 0;
	}
	
	#index .box02 ul li.end {
		margin:0;
		float:right;
	}
	
	#index .box02 ul li.ev {
		margin:0 1% 0 0;
	}


	#index .box02 ul li.big {
		width:49.2%;
	}

}



/*===============================================
  画面の横幅が1080px以下に適用
===============================================*/
@media screen and (max-width: 1080px){
	


}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	
	#mainimg .symbol {
		position:absolute;
		left:5%;
		bottom:-5%;
		z-index:10;
		animation:none;
	}

	#mainimg .symbol2 {
		position:absolute;
		right:5%;
		top:5%;
		z-index:10;
		animation:none;
		text-align:right;
	}
	
	#mainimg .symbol img,
	#mainimg .symbol2 img {
		max-width:40%;
	}
	
	
	#movie .links {
		display:none;
	}

	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	/*
	#movie {
		position:relative;
		overflow:hidden;
		height:300px;
	}

	#movie video{
		width: auto;
		height:100%;
		position:absolute;
		left:-15%;
	}
	*/
	
	
	
	#mainimg .title {
		top:25%;
		width:80%;
		padding:0 10%;
		text-align:center;
	}
	
	#index .box02 {
		margin:0;
		overflow:hidden;
		zoom:1;
	}
	
	#index .box02 ul li {
		width:48%;
		text-align:center;
		margin:0 0 15px;
	}
	
	#index .box02 ul li.ev {
		float:right;
		margin:0 0 15px;
	}
	
	#index .box02 ul li.end {
		margin:0 0 15px;
	}
	
	#index .box02 ul li.big {
		width:100%;
		margin:0 0 15px;
	}

	#movie .links.special {
		display:block;
		bottom:10%;
		right:5%;
	}
	
	#movie .links a {
		width:30px;
		height:20px;
		
	}
	
	#movie .links a.sound_off {
		background-size:cover;
	}

	#movie .links a.sound_on {
		background-size:cover;
	}

}