@charset "utf-8";
/* 全体の設定 */

html, body, main, div, span, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, table, caption, tr, th, td, footer, header, menu, nav, topimg {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, p, span {
	max-height: 100%;
}
body {
	background-color: #eeeeee;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	-webkit-text-size-adjust: 100%;
	min-width:	none;	
}

img {
    image-rendering: -webkit-optimize-contrast;
}
	

/* リンクの基本設定 */

a:link {
	color: #CC0000;
	text-decoration: underline;
}
a:visited {
	color: #CC0000;
	text-decoration: none;
}
a:active {
	color: #CC0000;
	text-decoration: underline;
}
a:hover {
	color: #FF0000;
}
/* ロゴのリンク設定 */

#header h1 a:link, #header h1 a:visited, #header h1 a:hover {
	text-decoration: none;
	color: #fff;
}
#m-header h1 a:link, #m-header h1 a:visited, #m-header h1 a:hover {
	text-decoration: none;
	color: #fff;
}
/* 特殊な色 */

.ttc {
	color: #CC0000;
}
.ttcr {
	color: #ff0000;
}

.nnl{
	display: inline-block;	
}


/* 全体の囲み */

#wrap {
	min-height: 100vh;
	margin: 0px;
	padding: 0px;
	font-size: 0px;
	position: relative;/* 相対位置 */
	padding-top: 116px;/* menu分の高さ＋余白*/
	padding-bottom: 200px;/* footerの高さ */
	box-sizing: border-box;/* 全て含めてmin-height:100vhに */	
	
}
/* 「先頭へ戻る」の設定 */

#pagetop {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 9999!important;	
}
#pagetop a {
	background: #CC0000;
	color: #fff;
	padding: 15px;
	text-align: center;
	display: block;
	border-radius: 50%;
}
#pagetop a:hover {
	background: #FF7777;
}
#pagetop a:visited {
	background: #CC0000;
}
/* ヘッダ位置固定のための設定 */
.navi {
	position: fixed;
	top: 0px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	z-index: 9999!important;
}
/*　ヘッダ　*/

#header {
	width: 100%;
	height: 70px;
	background-color: #000000;
	margin: 0px;
	padding: 0px;
	border-top-color: #cc0000;
	border-top-width: 5px;
	border-top-style: solid;
}
#header h1 {
	font-size: 36px;
	margin: 0px;
	padding: 0px;
	clear: both;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	letter-spacing: 0em;
	color: #FFF;
	font-weight: normal;
}
.hd-container {
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 18px;
}
.hd-item {
	text-align: left;
	padding-right: 20px;
	padding-left: 20px;
}


/* ヘッダ 低解像度用 */ 

 @media screen and (max-width:768px) {
#m-header {
	width: 100%;
	height: 53px;
	background-color: #000000;
	margin: 0px;
	padding: 0px;
	border-top-color: #cc0000;
	border-top-width: 5px;
	border-top-style: solid;
}
#m-header h1 {
	font-size: 20px;
	margin: 0px;
	padding: 0px;
	clear: both;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	letter-spacing: 0em;
	color: #FFF;
	font-weight: normal;
}
.hd-container {
	max-width: 768px;
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	margin-right: auto;
	margin-left: auto;
	margin-top: 18px;
	background-color: #000000;
}
.hd-item {
	padding-right: 15px;
	padding-left: 15px;
}
}
/* */


/* ヘッダメニュー設定 */

#menu {
	text-align: center;
	overflow: hidden;
	border-top-style: solid;
	border-top-color: #666;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	padding-right: 10px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-color: #666;
	font-family: 'Arimo', Verdana, Geneva, sans-serif;
	background-color: #333333;
	letter-spacing: 0em;
	margin: 0px;
	clear: both;
	z-index: 9999;
	border-top-width: 1px;
	box-shadow: 0px 1px 5px -2px #000;
}
#menu-wrap {
	text-align: right;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
#menu ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	text-align: right;
}
#menu li {
	font-size: 16px;
	color: #cccccc;
	background-repeat: no-repeat;
	list-style-type: none;
	display: inline;
	margin: 0px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666;
}
.libtm {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
}
/*　メニューのリンクの設定　*/

#menu a:link {
	color: #999999;
	text-decoration: none;
	padding: 3px;
}
#menu a:visited {
	color: #999999;
	text-decoration: none;
}
#menu a:active {
	color: #ffffff;
}
#menu a:hover {
	color: #ffffff;
	background-color: #333333;
	text-shadow: none;
}
/*　アンダーラインが伸びる設定 */

#menu a {
	position: relative;
	display: inline-block;
	transition: .3s;
}
#menu a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #cc0000;
	transition: .3s;
}
#menu a:hover::after {
	width: 100%;
}


/* ----- 解像度別メニュー設定----  */


/* 高解像度では低解像度のパーツを隠す */ 

@media screen and (min-width:769px) {
#nav-drawer {
	display: none;
}
#m-header {
	display: none;
}
}

/* 以下低解像度用 */ 

 @media screen and (max-width:768px) {
/* 低解像度では高解像度用のメニューを隠す */ 
#menu {
	display: none;
}
#header {
	display: none;
}
/* 低解像度用のメニュー */ 

#m-menu {
	font-family: 'Arimo', Verdana, Geneva, sans-serif;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	z-index: 9999;
}
#m-menu ul {
	margin: 0px;
	list-style-type: none;
	text-align: left;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#m-menu li {
	font-size: 16px;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 15px;
	display: block;
	margin: 0px;
	color: #FFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #999;
}
#m-menu li .libtm {
	border-bottom-style: none;
	margin: 0px;
}
/*　低解像度メニューのリンクの設定　*/
#m-menu a:link {
	color: #999;
	text-decoration: none;
}
#m-menu a:visited {
	color: #999;
	text-decoration: none;
}
#m-menu a:active {
	color: #fff;
	text-decoration: none;
}
#m-menu a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #000;
}
/*　アンダーラインが伸びる */
#m-menu a {
	position: relative;
	display: inline-block;
	transition: .3s;
}
#m-menu a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #cc0000;
	transition: .3s;
}
#m-menu a:hover::after {
	width: 100%;
}
}
/* ドロワーメニュー設定　変更注意 ------------ */

#nav-drawer {
	position: relative;
	margin: 0px;
	background-color: #333;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
/*　チェックボックス等は非表示に　*/
.nav-unshown {
	display: none;
}
/*　アイコンのスペース　*/
#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
	z-index: 9999;
}
/*　アイコンをCSSで表現　*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	border-radius: 3px;
	background: #ccc;
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 60%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 320px;/*最大幅（調整してください）*/
	height: 100%;
	background: rgba( 51, 51, 51, 0.90 );/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* ここまで低解像度用メニュー設定　--------------- */


/* ナビ以外の基本設定　--------------- */

main {
	height: 100%;
}
/*　メインコンテナ　*/
.main-container {
	margin-right: auto;
	margin-left: auto;
	max-width: 1200px;
	margin-top: 0px;
	margin-bottom: 0px;
}
/*　パンくずナビ　*/
#bnavi {
	font-size: 14px;
	text-align: right;
	padding-right: 25px;
	padding-left: 25px;
	padding-top: 10px;	
	margin-bottom: 15px;
}
/*　背景色用コンテナ　*/
.bg-wrap {
	width: 100%;
}
/*　フッタ部分　*/

footer {
	max-height: 100%;
	height: 180px;			
	width: 100%;
	margin: 0px;	
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	background-color: #000;
	font-style: normal;
	color: #999;	
	box-shadow: 0px 1px 5px 0px #000;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #999;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #C00;
	position: absolute;/*←絶対位置*/
	bottom: 0; /*下に固定*/
	box-sizing: border-box;/* 全て含めてmin-height:100vhに */	
		
}
.ft-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}
.ft-item {
	font-size: 14px;
	color: #999;
	margin-bottom: 15px;
	margin-right: 15px;
	margin-left: 15px;
}
/*　フッタのリンク設定　*/

footer a:link {
	color: #999;
	text-decoration: none;
}
footer a:visited {
	color: #999;
	text-decoration: none;
}
footer a:hover {
	color: #FFF;
	text-decoration: none;
}
/*　コピーライト　*/


#cpr {
	max-width: 1200px;
	font-size: 14px;
	font-family: 'Arimo', Verdana, Geneva, sans-serif;
	color: #999;
	letter-spacing: 0em;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 60px;
}

	
/*　低解像度用フッタ　*/	
	
 @media screen and (max-width:768px) {

#wrap {
	position: relative;/*←相対位置*/	
	padding-top: 95px;/*menuの高さ*/
	padding-bottom: 258px;/*←footerの高さ*/
	box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

/*　パンくずナビ　*/

#bnavi {
	font-size: 12px;
	text-align: right;
	padding-right: 10px;
	padding-left: 10px;
}
footer {
	width: 100%;
	margin-right: 0px;
	margin-left: 0px;		
	box-shadow: 0px 0px 0px 0px;
	border-top-style: solid;
	padding-top: 30px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 0px;
	border-top-width: 1px;
	border-top-color: #CCC;
	height:258px;
	box-sizing: border-box;	
}
.ft-container {
	display: flex;
	flex-direction: column;
}
.ft-item {
	font-size: 12px;
	color: #999;
	margin-bottom: 15px;
	margin-right: 0px;
	margin-left: 10px;
}
#cpr {
	font-size: 12px;
	letter-spacing: 0em;
	margin-top: 20px;
	margin-left: 10px;
	text-align: left;
}
}