/*CSSカスタムプロパティ変数*/
:root{
	/*JSで変動される値*/
	/*
	--innerWidth:360px;
	--innerHeight:520px;
	*/
	--innerWidth:800px;
	--innerHeight:980px;
	
	/*計算式*/
	--contents-body-left-open:calc(var(--innerWidth) / 2);
	--contents-body-right-open:calc(-1 * var(--innerWidth) / 2);
	--nav-left-open-translate:calc(-1 * var(--innerWidth) / 2);
}

/*全体の設定*/
.wrapper{
	max-width:800px;
	width:100%;
	height:100%;
	box-sizing:border-box;
	overflow-x:hidden;
	overflow-y:hidden;
	position:relative;
}
/*固定ヘッダー*/
div#header-fixed{
	position:fixed;
	z-index:10;
	width:100%;
	max-height:65px;
	height:65px;
	top:0px;
	left:0px;
	background-color:rgba(0,0,0,0.8);
	background-size:auto 100%;
	background-position:center;
	background-repeat:no-repeat;
	background-image:url('../img/site/sp/480/all/parts/header/logo.png');
}
/*固定フッター*/
div#footer-fixed{
	position:fixed;
	z-index:10;
	width:100%;
	min-height:65px;
	max-height:136px;
	height:auto;
	bottom:-1%;
	left:0px;
	background-color:rgba(0,0,0,0.8);
	/*
	background-size:auto 100%;
	background-position:center;
	background-repeat:no-repeat;
	background-image:url('../img/site/sp/480/all/parts/header/logo.png');
	*/
}
/*オーバーレイの設定*/
.overlay{
	z-index:2;
	position:absolute;
	content:"";
	display:block;
	width:0;
	height:0;
	background-color:rgba(12,17,23,0.9);
	top:0;
	left:0;
	opacity:0;
	transition:opacity 0.8s;
}
.overlay.open{
	width:100%;
	/*コンテンツが長くなった際にoverlay背景が途切れないように最大値を持たす*/
	height:1000%;
	background-color:rgba(12,17,23,0.9);
	opacity:1;
}
/*コンテンツ部分の設定*/
contents-body{
	/*position:fixed;*/
	position:relative;
	max-width:var(--innerWidth); /*画面の幅*/
	width:100%;
	min-height:100vh;
	height:auto;
	box-sizing:border-box;
	padding-top:0%;
	top:65px;
	
	display:-webkit-flex;
	display:flex;
	flex-direction:column;
	
	/*justify-content:center;*/
	transition:all 0.6s;
}
.data{
	max-width:var(--innerWidth); /*画面の幅*/
	width:100%;
	box-sizing:border-box;
	padding:0%;
}
.scroll_box{
	overflow:scroll;
	overflow-x:hidden;
	width:100%;
	height:auto;
	box-sizing:border-box;
	padding:0%;
	max-width:var(--innerWidth);
	max-height:var(--innerHeight);
	/*border:solid 1px #0C1117;*/
}
.scroll_box::-webkit-scrollbar{
	width:0px;
	background-color:#0C1117;
}
/*PCのみスクロール表示をしたいとのこと*/
.scrollon_box{
	overflow:scroll;
	overflow-x:hidden;
	width:100%;
	height:auto;
	box-sizing:border-box;
	padding:0%;
	max-width:var(--innerWidth);
	max-height:var(--innerHeight);
	/*border:solid 1px #0C1117;*/
}
.scrollon_box::-webkit-scrollbar{
	width:8px;
	background-color:rgba(204, 204, 204, 0.5);
}
/*PCのみスクロール表示　JAPAHO一部追加*/
.scrollon_box::-webkit-scrollbar
{
	-webkit-border-radius:30px;
	border-radius:30px;
}
.scrollon_box::-webkit-scrollbar-thumb
{
	-webkit-border-radius:30px;
	border-radius:30px;
	background:rgba(207, 15, 49, 0.5);
}

/*左メニューボタン*/
.menu-trigger-left{
	z-index:100;
	position:fixed;
	display:inline-block;
	width:36px;
	height:28px;
	vertical-align:middle;
	cursor:pointer;
	top:20px;
	left:20px;
}
.menu-trigger-left span{
	position:absolute;
	display:inline-block;
	width:100%;
	height:4px;
	box-sizing:border-box;
	left:0px;
	transition:all 0.6s;
	background-color:#2579cc;
}
.menu-trigger-left.active span{
	background-color:#aaaacc;
}
.menu-trigger-left span:nth-of-type(1){
	top:0;
}
.menu-trigger-left.active span:nth-of-type(1){
	transform:translateY(12px) rotate(-45deg);
}
.menu-trigger-left span:nth-of-type(2){
	top:12px;
}
.menu-trigger-left.active span:nth-of-type(2){
	opacity:0;
}
.menu-trigger-left span:nth-of-type(3){
	bottom:0;
}
.menu-trigger-left.active span:nth-of-type(3){
	transform:translateY(-12px) rotate(45deg);
}


/*左から右のスライドメニュー*/
contents-body.leftopen{
	transform:translateX(var(--contents-body-left-open));
}
nav-left{
	z-index:10;
	position:fixed;
	max-width:var(--innerWidth); /*画面の幅*/
	width:50%;
	height:100%;
	box-sizing:border-box;
	padding-top:0%;
	top:0%;
	right:calc(var(--innerWidth) - var(--innerWidth));
	transform:translate(calc(-1 * var(--innerWidth))); /*-画面の幅*/
	transition:all 0.6s;
	background-color:rgba(0,0,0,0.5);
	text-align:left;
	font-size:1.2rem;
}
nav-left.open{
	transform:translate(var(--nav-left-open-translate),0); /*-画面の幅の半分*/
}

/*右から左のスライドメニュー*/
contents-body.rightopen{
	transform:translateX(var(--contents-body-right-open));
}
nav-right{
	z-index:10;
	position:fixed;
	max-width:var(--innerWidth); /*画面の幅*/
	width:50%;
	height:100%;
	box-sizing:border-box;
	padding-top:0%;
	top:0%;
	right:calc(var(--innerWidth) - var(--innerWidth));
	transform:translate(calc(var(--innerWidth) / 2)); /*画面の幅の半分*/
	transition:all 0.6s;
	background-color:rgba(0,0,0,0.5);
	text-align:left;
	font-size:1.2rem;
}
nav-right.open{
	transform:translateZ(0);
}
/*右メニューボタン*/
.menu-trigger-right{
	z-index:100;
	position:fixed;
	display:inline-block;
	width:36px;
	height:28px;
	vertical-align:middle;
	cursor:pointer;
	top:20px;
	right:20px;
}
.menu-trigger-right span{
	position:absolute;
	display:inline-block;
	width:100%;
	height:4px;
	box-sizing:border-box;
	left:0;
	transition:all 0.6s;
	background-color:#ff0000;
}
.menu-trigger-right.active span{
	background-color:#ffcccc;
}
.menu-trigger-right span:nth-of-type(1){
	top:0;
}
.menu-trigger-right.active span:nth-of-type(1){
	transform:translateY(12px) rotate(-45deg);
}
.menu-trigger-right span:nth-of-type(2){
	top:12px;
}
.menu-trigger-right.active span:nth-of-type(2){
	opacity:0;
}
.menu-trigger-right span:nth-of-type(3){
	bottom:0;
}
.menu-trigger-right.active span:nth-of-type(3){
	transform:translateY(-12px) rotate(45deg);
}
.nav-body{
	max-width:calc(var(--innerWidth) / 2); /*画面の幅*/
	width:100%;
	box-sizing:border-box;
	padding-top:calc(65px + 3%);
	color:#ffffff;
}
.nav-item{
	max-width:calc(var(--innerWidth) / 2); /*画面の幅*/
	width:100%;
	box-sizing:border-box;
	padding:4% 3% 4% 3%;
}
.nav-item.icons{
	width:90%;
}
.nav-item.texts{
	width:87%;
	padding:0% 0% 1% 0%;
}