@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration:none;
}
/* Clearfix */
.clearfix:after{
    content:" ";
    display:block;
    clear:both;
}


.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb3{margin-bottom:3px;}
.mb5{margin-bottom:5px;}
.mb6{margin-bottom:6px;}
.mb7{margin-bottom:7px;}
.mb8{margin-bottom:8px;}
.mb9{margin-bottom:9px;}
.mb10{margin-bottom:10px;}
.mb13{margin-bottom:13px;}
.mb15{margin-bottom:15px;}
.mb18{margin-bottom:18px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}


.border_bottom{
	border-bottom:1px solid #414548;
	padding-bottom:10px;
	margin-bottom:10px;
}

.text{
	display:inline-block;
}
/*
font-family: 'M PLUS Rounded 1c', sans-serif;　丸ゴシック
weight:300/400/500/700
font-family: 'Noto Sans JP', sans-serif;　ゴシック
weight:300/400/500/700
font-family: 'Noto Serif JP', serif;　明朝
weight:300/400/500/600/700
font-family: 'Josefin Sans', sans-serif;　英字のみ
500/600
font-family: 'Lobster', cursive; 英字のみ
*/



/*@media screen and (min-width:960px) {}*/



/*body
****************************/
body {
	height: 100%;
	width: 100%;
	font-family: 'Yu Gothic UI', Noto Sans JP, sans-serif;
	color:#383835;
}
body::before {
	background: url(zai/back.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size: cover;
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
}






/*header
************************************************************************/
header{
	background-image:url(zai/header_back.jpg);
	background-position:center;
	width:100%;
	height:135px;
}
header #header_back{
	width:200%;/*headerの背景画像のサイズを調整できる*/
}
header #header_container{
	width:960px;
	height:135px;
	margin:0 auto;
	position:relative;
}
header #header_container #si_logo{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:260px;/*ロゴサイズを調整できる*/
}
header #header_container #si_logo img{
	width:100%;
}
header #header_container #light{
	width:70px;/*飾りの電球のサイズを調整できる*/
	position:absolute;
	top:50%;
	right:5%;
	transform:translate(-5%,-50%);
}
#hamburger_container{
	display:none;
}











/*main
************************************************************************/
main{
	width:900px;
	margin:0 auto;
	display:block;
	margin-top:30px;
	height:650px;
}
main aside{
	float:left;
	width:30%;
}
main article{
	float:right;
	width:70%;
}


/*aside　更新情報
******************/
aside h3{
	background-color:#0088C2;
	width:85%;
	height:30px;
	font-size:16px;
	font-weight:400;
	color:white;
	text-align:center;
	line-height:30px;
}
aside #updateinfo{
	width:85%;
	height:640px;/*更新情報のボックスの高さを調整できる*/
	overflow-y:scroll;
	background-color:white;
	padding:15px;
	box-sizing:border-box;
}
aside #updateinfo dl{
	margin-bottom:26px;
}
aside #updateinfo dl dt{
	font-size:14px;/*更新日の文字サイズを調整できる*/
	font-weight:400;
	margin-bottom:6px;
}
aside #updateinfo dl .new{
	font-size:15px;/*新連載の文字サイズを調整できる*/
	font-weight:400;
	color:red;/*新連載の文字色を調整できる*/
}
aside #updateinfo dl .text_id{
	font-size:15px;/*更新内容の文字サイズを調整できる*/
	line-height:20px;
	font-weight:500;
	text-indent:-15px;
	padding-left:15px;
	margin-bottom:3px;
	}
aside #updateinfo dl a{
	color:#383835;
}
aside #updateinfo dl a:hover{
	border-bottom:1px solid #0088C2;
	color:#0088C2;
}





/*article　項目
****************/
article #flex_contaiter{
	display: flex;
	height:670px;/*aside h3と更新情報のボックスを足した長さと揃える*/
	flex-wrap: wrap;
	justify-content:space-between;
	align-content:space-between;
}
article .item{
	height:65px;
	width:48%;
	font-size:22px;
	line-height:26px;
	font-weight:500;
	display:table;
}

article .item .btn{
	text-align:center;
	height:65px;
	display:table-cell;
	vertical-align:middle;
	padding:0 16px;
	color:white;
	border-radius: 12px;
}
article .item_b{
	height:50px;
	width:100%;
	font-size:21px;
	line-height:26px;
	font-weight:500;
	display:table;
}

article .item_b .btn{
	text-align:center;
	height:50px;
	display:table-cell;
	vertical-align:middle;
	padding:0 16px;
	color:white;
	border-radius: 12px;
}


/*ここからボタンの色指定*/
.color_1{
	background: #00A0E9;/*ボタン色*/
	border-bottom: solid 5px #025B70;/*シャドーの色*/
}
.color_1:hover{
	background: #0483A0;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;
}
.color_2{
	background: #EC78B4;/*ボタン色*/
	border-bottom: solid 5px #952E5A;/*シャドーの色*/
}
.color_2:hover{
	background: #D54180;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;
}
.color_3{
	background: #50B474;/*ボタン色*/
	border-bottom: solid 5px #205F36;/*シャドーの色*/
}
.color_3:hover{
	background: #2D874D;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_4{
	background: #FC9053;/*ボタン色*/
	border-bottom: solid 5px #99431E;/*シャドーの色*/
}
.color_4:hover{
	background: #DA602B;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_5{
	background: #AE7DBB;/*ボタン色*/
	border-bottom: solid 5px #623A5F;/*シャドーの色*/
}
.color_5:hover{
	background: #8D5388;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_6{
	background: #0867AA;/*ボタン色*/
	border-bottom: solid 5px #06345C;/*シャドーの色*/
}
.color_6:hover{
	background: #084B85;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_7{
	background: #FB564E;/*ボタン色*/
	border-bottom: solid 5px #981E1D;/*シャドーの色*/
}
.color_7:hover{
	background: #D92A29;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_8{
	background: #028940;/*ボタン色*/
	border-bottom: solid 5px #005020;/*シャドーの色*/
}
.color_8:hover{
	background: #00722E;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_9{
	background: #CD48A1;/*ボタン色*/
	border-bottom: solid 5px #791750;/*シャドーの色*/
}
.color_9:hover{
	background: #AD2072;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_10{
	background: #886D64;/*ボタン色*/
	border-bottom: solid 5px #47312B;/*シャドーの色*/
}
.color_10:hover{
	background: #65463D;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_11{
	background: #7ECFE2;/*ボタン色*/
	border-bottom: solid 5px #407077;/*シャドーの色*/
}
.color_11:hover{
	background: #5BA0AA;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_12{
	background: #F996C9;/*ボタン色*/
	border-bottom: solid 5px #964865;/*シャドーの色*/
}
.color_12:hover{
	background: #D76790;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_13{
	background: #ADAA9F;/*ボタン色*/
	border-bottom: solid 5px #61574D;/*シャドーの色*/
}
.color_13:hover{
	background: #8A7C6E;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_14{
	background: #288396;/*ボタン色*/
	border-bottom: solid 5px #03414D;/*シャドーの色*/
}
.color_14:hover{
	background: #055D6E;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_15{
	background: #F96A85;/*ボタン色*/
	border-bottom: solid 5px #972B3D;/*シャドーの色*/
}
.color_15:hover{
	background: #D73E57;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}
.color_16{
	background: #D32945;/*ボタン色*/
	border-bottom: solid 5px #760619;/*シャドーの色*/
}
.color_16:hover{
	background: #B70926;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}

.color_17{
	background: #04426e;/*ボタン色*/
	border-bottom: solid 5px #03243b;/*シャドーの色*/
}
.color_17:hover{
	background: #083352;/*ホバー時ボタン色*/
	letter-spacing: 5px;
	transition: .15s;

}


/*ここまで*/

article .item .btn:active {
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  border-bottom: none;
}




















/*footer
************************************************************************/
footer{
	width:900px;
	margin:0 auto;
	height:auto;
	margin-top:40px;
	padding-bottom:120px;
}
footer ul{
	display:inline-block;
	width:900px;
	text-align:center;
}
footer ul li{
	display:inline-block;
	border-right:1px solid #383835;
	padding-right:18px;
	border-left:1px solid #383835;
	padding-left:18px;
}
footer ul li:nth-child(2),footer ul li:nth-child(3),footer ul li:nth-child(4) ,footer ul li:nth-child(5),footer ul li:nth-child(6) {
	border-left:none;
}
footer ul li a{
	color:#383835;
	font-size:14px;
	font-weight:400;
}
footer ul li a:hover{
	color:#0088C2;
	transition:0.6s;
}