@charset "utf-8";

/* CSS Document */


/* 00=reset
----------------------------------------------------*/

.partition {
	clear: both;
	line-height: 0px;
	font-size: 0px;
	margin: 0px;
	padding: 0px;
	height: 0px;
	border: 0px;
}

/*改行：有無無*/
.br { display:block; }

/*改行：有無有*/
.br2 { display:block; }

/*改行：有有無*/
.br3 { display: block; }

/*改行：無有有*/
.br4 { display: inline; }

/*改行：無有無*/
.br5 { display: inline; }
.lota {
	font-family: Lato,sans-serif;	
}

/* 01=common 320
----------------------------------------------------*/

body {
	font-family:"Arial", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:#000;
	color:#FFF;
	padding:3px 0px 0px;
	background-image:url(../img/common/bg_bk.jpg);
	background-repeat:repeat;
}


#wrapper {
	padding:80px 0px 0px;
	
}

.container {
	max-width: 1280px;
	margin: 0px auto 0px; /*全体の中央寄せ*/
	padding:0px;
}


/* 02=header 320
----------------------------------------------------*/

header {
	margin:0px 0px 20px;
	position: fixed;
	width:100%;
	border-top:solid 3px #e71410;
	top:0;
	height:80;
	z-index:90;
}

#head_box {
	text-align:left;
	padding:0px 0px;
	position:relative;
	height:45px;
	background-color:#000;
}

#head_box_aut {
	background-color: rgba( 0, 0, 0, 0.7 );
	height:62px;
}

div.logobox {
	width:80px;
	height:62px;
	background:url(../img/common/logo_png_on.png) no-repeat;
	background-size:100%;
	background-position:center;
	margin:0px auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
}

.head_logo {
	width:80px;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
}

.head_logo:hover {
	opacity: 0.0;
	filter: alpha(opacity=00);
}

.toggle_box {
	width:48px;
	position:fixed;
	top:8px;
	right:2%;
	background-color:#000;
}

div#menubtn {
	height:45px;
	width:45px;
	border:solid 1px #FFF;
	text-align:center;
	color:#FFF;
	cursor:pointer;
	position:relative;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
}

div#menubtn i {
	font-size:32px;
	padding:3px 0px 0px;
	margin:0px 0px 0px;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
}

span.menu_tog {
	font-size:10px;
	position:absolute;
	bottom:2px;
	left:9px;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
}

#menu {
	background-color: rgba( 0, 0, 0, 0.7 );
	padding:0px 0px;
	display:none;
	position:fixed;
	top:64px;
	width:100%;
	height:100vh;
	z-index:11;
}

#menu_inbox {
	background-color: rgba( 204, 255, 204, 0 );
	padding:0px 0px;
}

.ca-menu li {
	position:relative;
	height:65px;
	z-index:12;
}

.ca-menu li:nth-child(odd) {
	background-color:#e71410;
}
.ca-menu li:nth-child(even) {
	background-color:#cc1612;
}

.ca-menu li:hover{
		background-color: #000;
	}

.ca-menu li a{
	color: #000;
	text-decoration:none;
}

/*アイコンの位置*/
.ca-menu li i {
	margin-right:5px;
	font-size:26px;
	position: absolute;
	width: 35%;
	height: 0%;
	top: 30%;
	left: 5%;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.ca-menu li:hover i{
	color:#e71410;
}

.ca-main{
	color:#000;
	position:absolute;
	top:15%;
	left:0;
	right:0;
	font-weight:bold;
	font-size: 20px;
	opacity: 0.9;
	text-align: center;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.ca-menu li:hover .ca-main{
	color:#FFF;
}

/*W320 上部ナビボタンのルビ*/
.ca-rubi {
	display:block;
	position:absolute;
	bottom:20%;
	left:0;
	right:0;
	color:#FFF;
	font-size: 12px;
	opacity: 0.8;
	text-align: center;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}


#content {
	margin:0px 0px 0px;	
}
footer {
	height:200px;
	margin:0px 0px 0px;
}

.backtotop_box {
	position:relative;
	height:130px;
	margin:40px 0px 0px;
}

.backtotop_bg {
	background-color:#000;	
	height:69px;
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	border-top:solid 1px #e71410;
}

.backtotop_img {
	width:120px;
	height:120px;
	position: absolute;
	top:0;
	left:0;
	right:0;
	margin:0px auto;
	background-image:url(../img/common/btn_backtotop_on.png);
	background-repeat:no-repeat;
	background-position:top center;
	background-size:100%;
}


.backtotop_img a {
	display:block;
	width:100%;
	height:100%;
}

.backtotop_img img {
	opacity:1;
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	-ms-transition: all 150ms linear;
	transition: all 150ms linear;
}
.backtotop_img:hover img {
	opacity:0;
	filter: alpha(opacity=00);
}


/*フッターロゴ*/
.foot_logo_box {
	background-color:#333333;
	padding:20px 0px;
	margin:0px 0px 0px;
	text-align:center;
}

.foot_logo_inbox {
	margin:0px auto 0px;
	width:100px;
}



/*コピーライト*/
.copy_box {
	background-color:#000;
	padding:5px 0px;
	text-align:center;
}


/* 06=medhia
----------------------------------------------------*/

/* -------------------------------------------- */
/* ########  ▼タブレット用            ######## */
/* -------------------------------------------- */
@media all and (min-width: 618px){


/*改行：有無無*/
.br { display:  inline; }

/*改行：有無有*/
.br2 { display: inline; }

/*改行：有有無*/
.br3 { display: block; }

/*改行：無有有*/
.br4 { display: block; }

/*改行：無有無*/
.br5 { display: block; }

header {
}

#head_box_aut {
	height:10px;
}

	#head_box {
		padding:0px 0px;
		height:10px;
	}

	.head_logo {
		width:100px;
	}


div.logobox {
	width:100px;
	height:77px;
}

.toggle_box {
	display:none;
}

div#menubtn {
	height:60px;
	width:60px;
	border:solid 1px #FFF;
	text-align:center;
	color:#FFF;
	cursor:pointer;
	position:relative;
}


div#menubtn:hover {
	border:solid 1px #e71410;
	color:#e71410;
}

div#menubtn i {
	font-size:40px;
	padding:3px 0px 0px;
	margin:0px 0px 0px;
}

span.menu_tog {
	font-size:14px;
	position:absolute;
	bottom:5px;
	left:12px;
}


	/*上部メニューの背景*/
	#menu {
		background-color: rgba( 0, 0, 0, 0.5 );
		padding:0px 0px 10px;
		position:static;
		height:60px;
		display:block !important;
	}

	/*上部メニューの背景*/
	#menu_inbox {
		background-image:url(../img/common/navi_bg.gif);
		background-repeat:repeat-x;
		padding:4px 0px 5px;
		height:56px;
	}

	.ca-menu li{
		width: 20%;
		height: 45px;
		margin:1px 0px 0px;
		padding:0px 0px 0px;
		overflow: hidden;
		position: relative;
		float:left;
		margin-right: 1%;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
		border-radius: 5px;        /* CSS3草案 */  
		-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
		-moz-border-radius: 5px;   /* Firefox用 */ 
	}

	.ca-menu li:nth-child(odd) {
		background-color:transparent;
	}
	.ca-menu li:nth-child(even) {
		background-color: transparent;
	}

	.ca-menu li:nth-child(3),
	.ca-menu li:nth-child(4) {
		float:right;
		margin-left: 1%;
		margin-right: 0;
	}
.ca-main{
	top:5%;
	left:0;
	right:0;
}
.ca-rubi {
	bottom:8%;
	left:0;
	right:0;
}

	/*ナビ内のアイコン*/
	.ca-menu li i {
		display:none;
		top: 20%;
	}

	.ca-menu li:hover{
		background-color: #000;
	}

	.ca-menu li a{
		text-align: left;
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
		opacity:1;
	}

#wrapper {
	padding:125px 0px 0px;
	
}

#content {
	margin:0px 0px 0px;
}

}




/* -------------------------------------------- */
/* ########  ▼PC用            ######## */
/* -------------------------------------------- */
@media all and (min-width: 800px) {

/*W960 */
/*改行：有無無*/
.br { display: inline; }

/*改行：有無有*/
.br2 { display: block; }

/*改行：有有無*/
.br3 { display: inline; }

/*改行：無有有*/
.br4 { display: block; }

/*改行：無有無*/
.br5 { display: inline; }

	.head_logo {
		width:130px;	
	}

#head_box_aut {
	height:30px;
}
	#head_box {
		height:30px;
	}
	div.logobox {
		width:130px;
		height:100px;
	}

	/*ナビ内のアイコン*/
	.ca-menu li i {
		display: block;
	}

}


    /* それ以外はモバイル用サイズ */
	
/* -------------------------------------------- */
/* ########  ▼印刷用CSSの定義           ######## */
/* -------------------------------------------- */
	
@media print{
	header {
		position:static;
	}

	.toggle_box {
		position: absolute;
		right:0;
	}
}