@charset "utf-8";

/* HEADER */
@media only screen and (min-width:768px) {
	/* PC */
	
	#header-outter {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #000;
		z-index: 2;
	}
	
	#header {
		box-sizing: border-box;
		margin: 0 auto;
		width: 100%;
		padding: 0 35px;
		max-width: 1177px;
		font-size: 0;
		line-height: 0;
	}
	
	#header #nav-icn {
		display: none;
	}
	
	#header p.logo {
		float: left;
		display: inline-block;
		margin: 6px 0 8px 0;
		width: 21%;
		text-align: left;
	}
	
	#header p.logo a {
		display: inline-block;
		box-sizing: content-box;
		background: url(../img_rn/header/logojp.png) no-repeat center top;
		background-size: 124px;
		padding: 5px;
		width: 134px;
		height: 26px;
		font-size: 0;
		line-height: 0;
	}
	
	#nav {
		float: left;
		width: 79%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}
	
	#nav li {
		text-align: left;
	}
	
	#nav li.sp {
		display: none;
	}
	
	#nav li a,
	#nav li span.printing {
		display: inline-block;
		box-sizing: content-box;
		padding: 5px;
		font-size: 0;
		line-height: 0;
	}

	#nav li.news {
		margin: 11px 0 0 0;
	}
	
	#nav li.news a {
		background-image: url(../img_rn/header/nav_news.png);
		background-repeat: no-repeat;
		background-position: center 5px;
		background-size: 41px;
		width: 41px;
		height: 15px;
	}
	
	#nav li.news a:hover {
		background-position:  center -46px;
	}

	#nav li.introduction {
		margin: 11px 0 0 0;
		width: 19%;
	}
	
	#nav li.introduction a {
		background-image: url(../img_rn/header/nav_introduction.png);
		background-repeat: no-repeat;
		background-position: center 5px;
		background-size: 92px;
		width: 92px;
		height: 15px;
	}

	#nav li.introduction a:hover {
		background-position:  center -46px;
	}
	
	#nav li.movie {
		margin: 11px 0 0 0;
	}
	
	#nav li.movie a {
		background-image: url(../img_rn/header/nav_movie.png);
		background-repeat: no-repeat;
		background-position: center 5px;
		background-size: 47px;
		width: 47px;
		height: 15px;
	}

	#nav li.movie a:hover {
		background-position:  center -46px;
	}
	
	#nav li.ar {
		margin: 11px 0 0 0;
		width: 11%;
	}
	
	#nav li.ar a {
		background-image: url(../img_rn/header/nav_ar.png);
		background-repeat: no-repeat;
		background-position: center 5px;
		background-size: 22px;
		width: 22px;
		height: 15px;
	}

	#nav li.ar a:hover {
		background-position:  center -46px;
	}
	
	#nav li.od {
		margin: 11px 0 0 0;
	}
	
	#nav li.od a {
		background-image: url(../img_rn/header/nav_od.png);
		background-repeat: no-repeat;
		background-position: left 5px;
		background-size: 29px;
		width: 29px;
		height: 15px;
	}

	#nav li.od a:hover {
		background-position:  left -46px;
	}
	
	#nav li.evastore,
	#nav li.evainfo,
	#nav li.khara {
		margin: 11px 0 0 0;
	}
	
	#nav li.evastore a,
	#nav li.evainfo a,
	#nav li.khara a {
		background-repeat: no-repeat;
		background-position: left 5px;
		background-size: auto 81px;
		height: 15px;
	}
	#nav li.evastore a {
		background-image: url(../img_rn/header/nav_evastore.png);
		width: 78px;
	}
	#nav li.evainfo a {
		background-image: url(../img_rn/header/nav_evainfo.png);
		width: 68px;
	}
	#nav li.khara a {
		background-image: url(../img_rn/header/nav_khara.png);
		width: 48px;
	}

	#nav li.evastore a:hover,
	#nav li.evainfo a:hover,
	#nav li.khara a:hover {
		background-position:  left -47px;
	}
	
	#nav li.link {
		margin: 11px 0 0 0;
	}
	
	#nav li.link a {
		background-image: url(../img_rn/header/nav_link.png);
		background-repeat: no-repeat;
		background-position: center 5px;
		background-size: 54px;
		width: 54px;
		height: 15px;
	}

	#nav li.link a:hover {
		background-position:  center -46px;
	}
	
	#nav li.lang {
		margin: 12px 0 0 0;
		width: 16%;
		text-align: right;
	}

	#nav li.lang span.slash {
		display: inline-block;
		box-sizing: content-box;
		background-image: url(../img_rn/header/nav_lang_slash.png);
		background-size: 6px;
		width: 6px;
		background-repeat: no-repeat;
		background-position: center center;
		height: 15px;
		font-size: 0;
		line-height: 0;
	}
	
	#nav li.lang a.jpn {
		background-image: url(../img_rn/header/nav_lang_jpn.png);
		background-size: 27px;
		background-repeat: no-repeat;
		background-position: center 5px;
		width: 27px;
		height: 15px;
	}

	#nav li.lang a.jpn:hover {
		background-position:  center -46px;
	}
	
	#nav li.lang a.eng {
		background-image: url(../img_rn/header/nav_lang_eng.png);
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: center 5px;
		width: 30px;
		height: 15px;
	}

	#nav li.lang a.eng:hover {
		background-position:  center -46px;
	}
	
	#nav li a.crnt {
		background-position:  center -46px !important;
	}
	
	#nav-link {
		clear: both;
		box-sizing: border-box;
		margin: 0 auto;
		width: 100%;
		max-width: 1107px;
		background-color: #000;
		height: 0;
		overflow: hidden;
		z-index: 10;
	}
	
	#nav-link-h {
		display: none;
	}
	
	#nav-link-list {
		font-family: "FOT-マティス Pro EB", serif;
		font-size: 23px;
		font-weight: normal;
/*
		letter-spacing: -.07em;
*/
		line-height: 1.4;
		background-color:rgba(255,255,255,0.01);
		max-height: 100%;
		height: 0;
		transform-origin: center top;
		-moz-transform-origin: center top;
		-webkit-transform-origin: center top;
		transform: scaleY(1.1);
		-moz-transform: scaleY(1.1);
		-webkit-transform: scaleY(1.1);
		color: #fff;
	}
	
	#nav-link-list li {
		display: inline-block;
	}
	
	#nav-link-list li a {
		text-decoration: none;
		color: #fff;
		background-color: #000;
		max-height: 100%;
	}
	
	#nav-link-list li a:hover {
		color: #9a9a9a;
	}
	
/*
	#nav-link-list li:not(:first-child):before {
		padding: 0 20px;
		font-family: "FOT-マティス Pro EB", serif;
		font-size: 16px;
		font-weight: normal;
		line-height: 1.4;
		transform-origin: center top;
		-moz-transform-origin: center top;
		-webkit-transform-origin: center top;
		transform: scaleY(1);
		-moz-transform: scaleY(1);
		-webkit-transform: scaleY(1);
		content: "／";
	}
*/
	
	#nav-link-list li span.slash {
		padding: 0 7px;
		font-family: "FOT-マティス Pro EB", serif;
		font-size: 23px;
		font-weight: normal;
		line-height: 1.4;
		transform-origin: center top;
		-moz-transform-origin: center top;
		-webkit-transform-origin: center top;
		transform: scaleY(1);
		-moz-transform: scaleY(1);
		-webkit-transform: scaleY(1);
	}
	
	#nav-arcive-info {
		display: inline-block;
		margin: 0 auto;
		padding: 0 20px 0 35px;
		text-align: left;
		font-size: 12px;
		text-indent: -15px;
		line-height: 15px;
		background-color: #000;
		max-width: 790px;
		max-height: 100%;
		height: 0;
		color: #fff;
	}
	
	#nav-arcive {
		overflow: hidden;
		margin: 0 auto;
		width: 100%;
		height: 25px;
	}
	
	#nav-arcive ul {
		position: relative;
		bottom: 0px;
		box-sizing: border-box;
		margin: 0 auto;
		background-color: #fff;
		width: 100%;
		text-align: left;
	}
	
	#nav-arcive li {
		float: left;
		display: block;
		width: 20%;
	}
	
	#nav-arcive li a {
		display: block;
		width: 100%;
		height: 25px;
		background-repeat: no-repeat;
		background-position: center 7px;
	}

	#nav-arcive #nav-link-ng a {
		background-image: url(../img_rn/header/link_ng_02.png);
		background-size: 81px;
	}

	#nav-arcive #nav-link-1 a {
		background-image: url(../img_rn/header/link_1_0_02.png);
		background-size: 19px;
	}

	#nav-arcive #nav-link-2 a {
		background-image: url(../img_rn/header/link_2_0_02.png);
		background-size: 23px;
	}

	#nav-arcive #nav-link-3 a {
		background-image: url(../img_rn/header/link_3_0_02.png);
		background-size: 23px;
	}

	#nav-arcive #nav-link-3p1 a {
		background-image: url(../img_rn/header/link_3_0_plus_1_0_02.png);
		background-size: 49px;
	}

}

@media only screen and (max-width:767px) {
	/* SP */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		padding-top: 3.6em;
		width: 100%;
		font-size: calc(10px + 20 * ((100vw - 320px) / 704));
		z-index: 2;
	}
	
	#header-inner {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 6.5em;
		background-color: #000;
		z-index: 10;
	}
	
	#header #nav-icn {
		position: absolute;
		top: 0.3em;
		left: 0;
		font-size: 0.8rem;
		font-size: calc(10px + 20 * ((100vw - 320px) / 704));
		width: 4em;
		height: 3em;
	}
	
	#header #nav-icn .nav-icn-top,
	#header #nav-icn .nav-icn-mdl,
	#header #nav-icn .nav-icn-btm {
		position: absolute;
		top: 1.1em;
		left: 1.5em;
		display: block;
		width: 1.8em;
		height: 1.2em;
	}
	
	#header #nav-icn .nav-icn-top span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #fff;
	}
	
	#header #nav-icn .nav-icn-mdl span {
		position: absolute;
		top: 0.6em;
		left: 0;
		width: 100%;
		height: 1px;
		background: #fff;
	}
	
	#header #nav-icn .nav-icn-btm span {
		position: absolute;
		top: 1.2em;
		left: 0;
		width: 100%;
		height: 1px;
		background: #fff;
	}
	
	.nav-icn-top-on {
		transform-origin: left top;
		transform: rotate(45deg);
		transition : all 400ms;
	}
	
	.nav-icn-top-off {
		transform-origin: left top;
		transform: rotate(0);
		transition : all 400ms;
	}
	
	.nav-icn-mdl-on {
		opacity: 0;
		transition : all 400ms;
	}
	
	.nav-icn-mdl-off {
		opacity: 1;
		transition : all 400ms;
	}
	
	.nav-icn-btm-on {
		transform-origin: right bottom;
		transform: rotate(135deg);
		transition : all 400ms;
		top: 1.2em !important;
		left: -0.3em !important;
	}
	
	.nav-icn-btm-off {
		transform-origin: right bottom;
		transform: rotate(0);
		transition : all 400ms;
	}
	
	#header p.logo {
		margin: 0 auto;
		width: 28%;
	}
	
	#header p.logo a {
		display: block;
		background: url(../img_rn/header/logojp.png) no-repeat center center;
		background-size: 100%;
		width: 100%;
/*
		padding-top: 38.4%;
*/
		padding-top: 12vw;
		font-size: 0;
		line-height: 0;
	}
	
	#nav-wrap {
		overflow-y: hidden;
/*
		height: 0.4em;
*/
		height: 3.5em;
	}
	
	#nav-inner {
		position: relative;
		height: 0.5em;
	}
	
	#nav {
		display: none;
		width: 100%;
		padding-top: 14%;
	}
	
	#nav li {
		position: relative;
		bottom: 1px;
		border-bottom: 1px solid #434343;
		font-size: 0;
		line-height: 0;
	}
	
	#nav li:first-child {
		border-top: 1px solid #434343;
	}
	
	#nav li.lang {
		border-top: 0;
	}
	
	#nav li a {
		display: block;
		padding-top: 10%;
		background-repeat: no-repeat;
		background-position: center -33%;
	}
	
	#nav li span.printing {
		display: block;
		padding-top: 10%;
		background-repeat: no-repeat;
		background-position: center 50%;
	}
	
	#nav li.news a {
		background-image: url(../img_rn/header/nav_news.png);
		background-size: 10%;
	}
	
	#nav li.introduction a {
		background-image: url(../img_rn/header/nav_introduction.png);
		background-size: 22.2%;
	}
	
	#nav li.movie a {
		background-image: url(../img_rn/header/nav_movie.png);
		background-size: 11.4%;
	}
	
	#nav li.ar a {
		background-image: url(../img_rn/header/nav_ar.png);
		background-size: 5.3%;
	}
	
	#nav li.od a {
		background-image: url(../img_rn/header/nav_od.png);
		background-size: 7.0%;
	}

	#nav li.evastore a {
		background-image: url(../img_rn/header/nav_evastore.png);
		background-size: 18.5%;
	}

	#nav li.evainfo a {
		background-image: url(../img_rn/header/nav_evainfo.png);
		background-size: 16.5%;
	}

	#nav li.khara a {
		background-image: url(../img_rn/header/nav_khara.png);
		background-size: 11.5%;
	}

	#nav li.link {
		display: none;
	}
	
	#nav li.lang {
		background-image: url(../img_rn/header/nav_lang_slash.png);
		background-size: 1.8%;
		background-repeat: no-repeat;
		background-position: center 50%;
	}
	
	#nav li.lang span.slash {
		display: none;
	}
	
	#nav li.lang a.jpn {
		float: left;
		display: block;
		margin-left: 26%;
		background-image: url(../img_rn/header/nav_lang_jpn.png);
		background-position: right -27%;
		background-size: 36%;
		padding-top: 10%;
		width: 20%;
	}
	
	#nav li.lang a.eng {
		float: left;
		display: block;
		margin-left: 8%;
		background-image: url(../img_rn/header/nav_lang_eng.png);
		background-position: left -27%;
		background-size: 40%;
		padding-top: 10%;
		width: 20%;
	}
	
	#nav li a.crnt {
		background-position: center 95% !important;
	}
	
	#nav li.lang a.jpn.crnt {
		background-position: right 91% !important;
	}
	
	#nav li.lang a.eng.crnt {
		background-position: left 92% !important;
	}
	
	#nav-link {
		display: none;
	}
	
	#nav-link-s {
		position: relative;
		height: 100%;
	}
	
	#nav-link-h {
		font-size: 0;
		line-height: 0;
		background-image: url(../img_rn/header/nav_link_h.png);
		background-repeat: no-repeat;
		background-position: center -33%;
		background-size: 7%;
		padding-top: 10%;
	}
	
	#nav-link-list {
		margin: 4% auto;
		background-image: url(../img_rn/header/nav_link_list_02.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100%;
		font-size: 0;
		line-height: 0;
	}
	
	#nav-link-list li {
		display: block;
		float: left;
	}
	
	#nav-link-list li.evainfo {
		width: 50%;
	}
	
	#nav-link-list li.khara {
		width: 50%;
	}
	
	#nav-link-list li.kingcr {
		width: 50%;
	}
	
	#nav-link-list li.gworks {
		width: 50%;
	}
	
	#nav-link-list a {
		display: block;
		padding-top: 13%;
	}
	
	#nav-arcive-info {
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: #000;
		max-height: 100%;
		opacity: 0;
	}
	
	#nav-arcive-info p {
		margin: 0 auto;
		width: 90.5%;
		padding: 6% 0 2% 0;
		text-align: left;
		font-size: 0.6rem;
		font-size: calc(10px + 15 * ((100vw - 320px) / 704));
		line-height: 0;
		color: #fff;
	}
	
	#nav-arcive-wrap {
	}
	
	#nav-arcive {
/*
		overflow: hidden;
*/
		width: 100%;
/*
		height: 0.5em;
*/
		height: 10vw;
		line-height: 0;
	}
	
	#nav-arcive ul{
		position: relative;
/*
		top: -2.9em;
*/
		top: 0;
		left: 0;
	}
	
	#nav-arcive li {
		float: left;
		display: inline-block;
		width: 20%;
	}
	
	#nav-arcive li a {
		display: block;
		width: 100%;
		padding-top: 53%;
		font-size: 0;
	}
	
	#nav-arcive #nav-link-ng a {
		background-image: url(../img_rn/header/link_ng_02.png);
		background-size: 81.5%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	#nav-arcive #nav-link-1 a {
		background-image: url(../img_rn/header/link_1_0_02.png);
		background-size: 20.5%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	#nav-arcive #nav-link-2 a {
		background-image: url(../img_rn/header/link_2_0_02.png);
		background-size: 25.3%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	#nav-arcive #nav-link-3 a {
		background-image: url(../img_rn/header/link_3_0_02.png);
		background-size: 24.7%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	#nav-arcive #nav-link-3p1 a {
		background-image: url(../img_rn/header/link_3_0_plus_1_0_02.png);
		background-size: 54%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
}

/* FOOTER */

@media only screen and (min-width:768px) {
	/* PC */
	
	#footer-wrap {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 0 35px;
		max-width: 1177px;
		width: 100%;
	}
	
	#footer {
		width: 100%;
	}

	#footer-copyright {
		padding: 50px 0 46px 0;
		border-top: 2px solid #434343;
		font-size: 10px;
		line-height: 1.3;
		color: #95989a;
	}
}

@media only screen and (max-width:767px) {
	/* SP */
	#footer {
		margin: 0 auto;
		width: 90.5%;
	}

	#footer-copyright {
		padding: 8.4% 0 2.3% 0;
		border-top: 2px solid #434343;
		font-size: 0.8rem;
		font-size: calc(7px + 20 * ((100vw - 320px) / 704));
		line-height: 1.3;
		color: #95989a;
	}
}