/*--------------------
icon-font
--------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('fontsindex/icomoon.eot?nvqynb');
  src:  url('fontsindex/icomoon.eot?nvqynb#iefix') format('embedded-opentype'),
    url('fontsindex/icomoon.ttf?nvqynb') format('truetype'),
    url('fontsindex/icomoon.woff?nvqynb') format('woff'),
    url('fontsindex/icomoon.svg?nvqynb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-up2:before {
  content: "\ea3a";
}
.icon-arrow-down2:before {
  content: "\ea3e";
}


/*--------------------
gloval navi
--------------------*/
#gNav.no{
	position: fixed;
	top: -102px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

p.btn.no{
	margin-top: 30px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

p.btn.no .icon-arrow-down2{
	display: inline-block;
	width: 40px;
	height: 40px;
	font-size: 1.4rem;
	line-height: 40px;
	color: #c0c0c0;
	border:3px solid #c0c0c0;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	-o-border-radius:25px;
	-ms-border-radius:25px;	
	border-radius: 25px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

p.btn.no .icon-arrow-down2:hover{
	margin-top: 10px;
}

p.btn.no .icon-arrow-up2{
	display: none;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

p.btn.no .off{
	display: inline-block;
	margin-bottom: 6px;	
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

#gNav{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	border-bottom: 2px solid #c0c0c0;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

p.btn{
	float: right;
	cursor: pointer;	
	text-align: center;
	margin-top: 16px;
	margin-right: 100px;
	z-index: 2;
	font-family: sans-serif;
	font-size: .8rem;	
	line-height: 1.2em;
}

p.btn .icon-arrow-down2{
	display: none;
}

p.btn .icon-arrow-up2{
	display: inline-block;
	width: 40px;
	height: 40px;
	font-size: 1.4rem;
	line-height: 40px;
	color: #c0c0c0;
	border:3px solid #c0c0c0;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	-o-border-radius:25px;
	-ms-border-radius:25px;	
	border-radius: 25px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

p.btn .icon-arrow-up2:hover{
	margin-top: -10px;
}

p.btn .off{
	display: none;
}

#mNav{
	display: none;
}


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

#contents{
	width: 980px;
	height: 500px;
	background: url("../img/topbgPc.png") no-repeat center 0;
	position: relative;
	margin: 120px auto 50px;
}


#contents div a {
    display: inline-block;
}
 
#contents div a:hover {
    background-color: transparent; /* IE6対応 */
}

#contents div a img{
	-webkit-transition:opacity .3s;
	-moz-transition:opacity .3s;
	-o-transition:opacity .3s;
	-ms-transition:opacity .3s;
	transition:opacity .3s;
}

.patoraBtn{
	position: absolute;
	top: 12px;
	left: 324px;
}

.rijeBtn{
	position: absolute;
	top: 188px;
	left: 570px;
}

.newsBtn{
	position: absolute;
	left: 702px;
	background-image: none;
}

.eventBtn{
	position: absolute;
	top: 130px;
	left: 126px;
	background-image: none;
}

.patoraBtn a:hover img,
.rijeBtn a:hover img{
	opacity: .5;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}
 
.newsBtn a:hover img,
.eventBtn a:hover img,
.contactBtn a:hover img{
    opacity: 0;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
}

.newsBtn:hover{
	cursor: pointer;		
	background: url("../img/newsBtnon.png") no-repeat;
}

.eventBtn:hover{
	cursor: pointer;	
	background: url("../img/eventBtnon.png") no-repeat;
}

img.beam{
	position: absolute;
	top: 240px;
	left: 278px;
}

.logo{
	position: absolute;
	bottom: 0;
	left: 274px;
}

.arrowpc{
	position: absolute;
	right: 220px;
	bottom: 26px;
}

.arrowsp{
	display: none;
}

.contactBtn{
	position: absolute;
	bottom: 0;
	right: 50px;
}

.contactBtn:hover{
	cursor: pointer;
	background: url("../img/contactBtnon.png") no-repeat;
}


/*--------------------
モバイル対応(600px以下)
--------------------*/
@media screen and ( max-width:600px ){

	/* mobile nav */
	#gNav{
		display: none;
	}

	#mNav.no{
	position: fixed;
	top: -80px;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	transition: .3s;
	}

	p.btn.no{
		margin-top: 20px;
	}

	p.btn.no .icon-arrow-down2{
		width: 40px;
		height: 40px;
		font-size: 1.4rem;
		line-height: 40px;
		border:3px solid #c0c0c0;
		-webkit-border-radius:25px;
		-moz-border-radius:25px;
		-o-border-radius:25px;
		-ms-border-radius:25px;	
		border-radius: 25px;
	}

	p.btn.no .icon-arrow-down2:hover{
		margin-top: 0;
	}

	p.btn.no .off{
		margin-bottom: 6px;	
	}

	#mNav{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		border-bottom: none;
		-webkit-transition:all .3s;
		-moz-transition:all .3s;
		-o-transition:all .3s;
		-ms-transition:all .3s;
		transition: .3s;
	}

	p.btn{
		margin-top: 6px;
		margin-right: 10%;
		font-size: .8rem;	
		line-height: 1.2em;
	}

	p.btn .icon-arrow-up2{
		width: 40px;
		height: 40px;
		font-size: 1.4rem;
		line-height: 40px;
		border:3px solid #c0c0c0;
		-webkit-border-radius:25px;
		-moz-border-radius:25px;
		-o-border-radius:25px;
		-ms-border-radius:25px;	
		border-radius: 25px;
	}

	p.btn .icon-arrow-up2:hover{
		margin-top: 0px;
	}


	/* contents */
	#contents{
		width: 300px;
		height: 700px;
		background: url('../img/topbgSp.png') no-repeat center 0;
		background-size: contain;
		margin:50px auto 30px;
	}

	.patoraBtn{
		width: 34%;
		height: auto;		
		top: 60px;
		left: 30px;
	}

	.rijeBtn{
		width: 34%;
		height: auto;		
		position: absolute;
		top: 350px;
		left: auto;
		right: 0;
	}

	.newsBtn{
		width: 44%;
		height: auto;		
		position: absolute;
		left: auto;
		top:60px;
		right: 0;
		background-image: none;
	}

	.eventBtn{
		width: 54%;
		height: auto;
		position: absolute;
		top: 250px;
		left: 0;
		background-image: none;
	}

	.patoraBtn a:hover img,
	.rijeBtn a:hover img,	 
	.newsBtn a:hover img,
	.eventBtn a:hover img,
	.contactBtn a:hover img{
	    opacity: 1;
	}

	.newsBtn:hover,
	.eventBtn:hover,
	.contactBtn:hover{
		background-image: none;
	}

	img.beam{
		width: 80%;
		height: auto;
		position: absolute;
		top: 450px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.logo{
		width: 82%;
		height: auto;
		position: absolute;
		top: 530px;
		left: 9%;
	}

	.arrowpc{
		display: none;
	}

	img.arrowsp{
		display: block;
		position: absolute;
		bottom: 54px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.contactBtn{
		width: 40%;
		height: auto;
		bottom: 0;
		left: 30%;
		}

	.patoraBtn a,.patoraBtn a img,
	.rijeBtn a,.rijeBtn a img,
	.newsBtn a,.newsBtn a img,
	.eventBtn a,.eventBtn a img,
	.beam a,.beam a img,
	.logo img,
	.contactBtn a,.contactBtn a img{
		width: 100%;
		height: auto;
	}	

}