@charset "utf-8";

body {
	/* 全体中央寄せ */
	width: auto;
	min-width: 375px;
	margin: 0;
	padding: 0;;

	color:#666;
	background-color: #BBB;
	
	font-size: 12px;
	font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               	'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
               	'Segoe UI',       /* Windowsの欧文 */
               	YuGothicM,        /* Windows8.1以上は游ゴシック */
               	YuGothic,         /* Macの游ゴシック */
               	Meiryo,           /* 游ゴシックが入っていないWindows */
               	sans-serif;
}

/* Windows */
@font-face {
	font-family: YuGothicM;
	font-weight: normal;
  	src:	local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
       		local('Yu Gothic Medium'), /* Chrome用 */
       		local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
	font-family: YuGothicM;
	font-weight: bold;
  	src:	local('YoGothic-Bold'), /* Boldはそのまま */
    		local('Yu Gothic');     /* Chrome用 */
}

/* Font Awesome */
@font-face {
	font-family: 'Font Awesome 5 Brands';
	font-style: normal;
	font-weight: 400;
	src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"),
		url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
	font-display: swap;
}

li {
	list-style-type: none;
}

a {
	color: #b82;
}
a:hover {
	color: #b82;
}

img {
	vertical-align: top;
}




 /* [ header ] ==================================================================================  */
#header {
	height: 160px;
	position: relative;

	background:url("../img/bg.jpg") repeat;
	background-color: rgba(12, 9, 9, 0.267);
}

#header #top {
	position: absolute;
	left: 10px;
	top: 5px;
}

/* [nav] ---------------------- */
#header #nav {
	position: absolute;
	width : 100%; 
	left: 0px;
	bottom: 0px;

	/* background-color: #333; */
	background-color: #000b;

	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;    /* IE, Edge 対応 */
	scrollbar-width: none;       /* Firefox 対応 */
}
#header #nav ::-webkit-scrollbar {  /* Chrome, Safari 対応 */
	display:none;
}

#header #nav ul {
	margin: 0;
	padding: 0 12px 0 12px;

	list-style:none;

	font-size: 12px;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}

#header #nav li {
	display: table-cell;
	*display: inline;
	*zoom: 1;
	width: 80px;
	padding: 14px 0;

	background-color: #8888;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
}
#header #nav li a {
	padding: 14px;

	/* background-color: #999; */
	color: #fec;
	text-align: center;
	text-decoration:none;
}
#header #nav li a:hover {
	/* color: #333; */
	background-color: #9998;	
}


/* [h_social] ---------------------- */
#header #h_social {
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 10px 0 10px;

	font-size: 15px;
	font-weight: bold;

	background-color: #fff8;
}

#header #h_social ul{
	margin: 0;
	padding: 14px 0 14px 0;
}

#header #h_social li {
	display: inline;
	margin: 0;
	padding: 5px;

	border-left: solid 2px #5558;
	/* border-left-color: #ccc; */
}
#header #h_social a {
	padding: 14px;
	/* color: #fed; */
	color: #333;
	text-decoration: none;
}
#header #h_social a:hover {
	background-color: #fff8;
	color: #333;
	/* color: #d81; */
}


/* [ content ] ================================================================================== */
#main {
	clear: both;
	/* [mobile] ################### */
	/* display: flex; */
	/* ############################ */	
	margin: 0;
	padding: 0;
}
#main img{
	text-align: center;
	margin: 0;
	padding:0;
}





/* [side] -------------------------------------------------- */
#main #side {
	/* [mobile] ################### */
	/* float: left;	 */	
	/* width: 240px; */
	display: none;
	width: 100%;
	height: 100%;
	/* ############################ */
	margin: 0;
	padding: 0;

	font-weight: bold;
	
	/* background-color: #2228; */
}

#main #side ul {
	display: block;
	margin: 0;
	padding: 30px 0 30px 20px;
	
	white-space: nowrap;

	background-color: #555;
	/* background-color: #bbb8; */
}

#main #side li {
	line-height:0;
	background-color: #ccc;
}
#main #side li a {
	display: block;
	font-size: 14px;

	color: #333;
	text-decoration: none;
	background-color: #ddd;

	height: 34px;
	padding: 6px  5px 0 22px;

	line-height: 28px;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #ccc;
	border-left: solid 10px #999;
}

#main #side li a:hover {
	/* color: #eee; */
	color: #111;
	background-color: #999;

	border-left: solid 10px  #ddd;
}


/* article -------------------------------------------------- */
#main #side .news {
	position: relative;
	margin: 40px 10px 14px 10px;
	padding: 0px;
	display: flex;
	/* width: 100%; */

	background-color: #ddd;

	border: solid 3px #666;
}
#main #side .news .title {
	position: absolute;
	display: inline-block;
	top: -33px;
	left: -3px;
	padding: 0px 50px 0 20px;
	height: 30px;

	background: #888;
	font-size: 28px;
	font-weight: bold;
	color: #fff;

	line-height: 32px;
	vertical-align: middle;
	border-left: solid 10px #666;
}
/* h3 */
#main #side .news .title h3 {
	margin: 0; 
	padding: 0;
	font-size: 16px;
}

/* h3 */
#main #side .news .title h1 {
	margin: 0; 
	padding: 0;
	font-size: 18px;
}
/* iframe */
#main #side .news iframe{
	clear: both;
	margin: 0;
	padding: 0 5px;
	/* [mobile] ################### */
    /* width: 200px; */
    height: 80px;
	width: 100%;
	/* ############################ */

	border: none;
	-webkit-overflow-scrolling: touch;
}


/* article -------------------------------------------------- */
#main #side .app {
	position: relative;
	margin: 10px 10px 14px 10px;
	padding: 10px;
	display: inline-block;

	background-color: #888;
	border: solid 3px #666;
	border-radius: 26px;
}

#main #side .app p {
	padding: 15px 20px;

	background: #888;
	font-size: 14px;
	font-weight: bold;
	color: #fff;

	background-color: #555;
	border-radius: 26px;
}

/* img */
#main #side .app img {
	border-radius: 13px;
}




 /* [ footer ] ==================================================================================  */

#footer {
	clear: both;
	height: 80px;
	position: relative;

	background: url("../img/bg2.jpg") repeat;
	/* background-color: #111d; */
}
#footer p {
	font-size: 10px;
	color: #cb9;
	text-align: right;
	position: absolute;
	right: 20px;
	bottom: 16px;
}

#footer img {
	position: absolute;
	left: 10px;
}