@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}
html  {
	font-size : 62.5%;	
}
body {
	color : #333333;
	font-size : 1.2rem;
	background : #f6f6f6;	
}

ins {
	background-color: transparent;
}

a:link, a:visited, a:hover , a:active {
	color : #d03c56;
	text-decoration : none;	
}
.clearfix::after {
	content : '';
	display : block;	
	clear : both;
}
.hidden {
	display : none;
}
.header {
	width : 100%;
	height : 260px;
	padding : 28px 0 5px; 
	box-shadow : 0 0 10px 1px #1122ff;
	font-size: 1.6rem;
	text-align: center;
	background : url("../images/hoge2.png") #1a4fa5 repeat-x 0% 40%;
	color : #fff;
}
.header .title{
	font-size : 4.8rem;
	padding : 5px 0 5px; 
	text-shadow: 3px 3px 3px #061c3d;	
}
.header .title .title-image{	
	height : 140px;
}
.global-nav {
	margin-top: 15px;
	text-align: center;	
}
.global-nav .nav-item{
	display: inline-block;
	margin : 0 30px;
}
.global-nav .nav-item a {
	display: inline-block;
	width : 100px;
	height : 30px;
	line-height :30px;
	text-align : center;
	border-radius : 8px;
	border-style :solid;
	border-color : #7799bb;
	color: #222;
	background-color : #dcecfa;
	letter-spacing : 1px;
	transition : 0.15s; 
	font-weight : bold;	
}
.global-nav .nav-item a:hover {
	background-color : #00ffff;	
}
.global-nav .active a{
	background-color : #af4;	
}
.wrapper {
	width: 970px;
	margin:10px auto 20px;
	min-height : 580px;	
}
.main {
	display : block;
	float : left;
	width : 600px;
}
.main a:link, .main a:visited, .main a:hover , .main a:active {
	color : #d03c56;
	text-decoration : underline;	
}
.heading {
	display : block;
	font-size : 1.6rem;
	padding : 10px 12px;
	letter-spacing : 1px;
	margin: 8px auto 8px;
	background-color : #478;
	color : #fff;
}
.heading a:link, .heading a:visited, .heading a:hover , .heading a:active{
	color : #fff;
	text-decoration : none;
}
.subheading {
	display : block;
	font-size : 1.4rem;
	padding : 4px 10px;
	letter-spacing : 1px;

	margin: 6px auto 6px;
	background-color : #4a8;
	color : #fff;	
}
.topic .desc {
	padding : 0 5px 0;
}
.scroll-list {
	max-height : 220px;
	overflow-y : auto;
	margin-bottom: 30px;
	list-style-type : none;
}
.topic{
	display : block;
	padding : 10px auto 10px;
	margin-bottom : 10px;
	font-size : 1.6rem;
}
.article {
	width : 100%;
	display : block;
	padding : 10px auto 10px;
	margin-bottom : 10px;
}
.article-box {
	position:relative;
	display:block;
	width :170px;
	height : 200px;
	margin: 12px;
	padding : 130px 8px 0;
	float : left;
	border-style :double;
	border-color : #6789ab;	
	border-radius : 10px;
	background-color : #eee;
	overflow: hidden;
}
.article a:link, a:visited, a:hover , a:active {
	color : #d03c56;
	text-decoration : none;	
}
.article-box:hover {
  opacity: 0.8;  
}
.article-box .image {	
	position:absolute;
	top: 0;
	left:0;
	width : 100%; 	
}
 .article-box .title{ 
	margin-top :5px;
	font-size : 1.4rem;
	line-height : 1.6;
	color : #555;	
 } 
.article-box .desc {
	margin-top : 5px;
	color : #333;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;	
}
.article-box .article-content {
	
}

.sidemenu2 {
	float : right;
	width : 220px;
}

.sidemenu2 .advertisement {
	padding : 4px 0px;
	text-align : center;
	width : 210px;
}
.sidemenu {
	float : right;
	width : 340px;
}
.sidemenu .advertisement {
	padding : 10px 0px;
	text-align : center;
	width : 340px;
}
.sidemenu .advertisement2 {
	padding : 10px 0px;
	text-align : center;
	width : 340px;
	height : 500px;
}
.scroll-list {
	max-height : 220px;
	overflow-y : auto;
	margin-bottom: 30px;
	list-style-type : none;	
}
.scroll-list .scroll-item a:hover{
	background-color : #faf0f5;
}
.scroll-list .scroll-item a{
	display :block;
	padding :10px 15px;
	color : #333;
	font-size : 0;
	transition : background-color 0.1s;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;	
}
.scroll-list .date {
	display : inline-block;
	width : 19%;
	font-size :1rem;
	letter-spacing: 1px;
	font-weight : bold;
}
.scroll-list .title{
	display : inline-block;
	width : 73%;
	font-size: 1rem;
	padding-left : 15px;
}
.back-area{
	margin : 15px;
	padding : 16px;
	text-align : center;
	width : 100%;
	height : 60px;
	float : left;
}
.footer {
	width : 100%;
	height : 60px;
	padding : 10px 0 0px;
	margin : 0; 
	background-color : #112881;
	float : left;
	color : #fff; 
}
.footer-container{
	width: 970px;
	margin:10px auto 10px;
}
.copyright {
	margin-top : 20px;
	text-align : center;
	letter-spacing : 1px;
}
.head-horinavi{
	text-align : left;
	padding : 20px auto 10px;
	margin : 10px 0 20px;
	background : #ddddff;
	height : 30px;
	width : 100%;
}
.hori-navi{
	margin-top : 8px;
	padding : 4px 8px;
	letter-spacing : 1px;
	font-size : 0;	
}
.hori-item{
	font-size : 1.4rem;
	display : inline-block;
	padding : 4px 0px;
	font-weight : bold;
}
.hori-item .arrow::before{
	content: ">";
	display : inline-block;
	padding : 0 10px;
	font-size : 1.4rem;
}
.hori-navi a:link, .hori-navi a:visited, .hori-navi a:hover , .hori-navi a:active {
	color : #d03c56;
	text-decoration : underline;
	padding : 4px 0;	
}
.hori-navi a:hover{
	background-color : #999;
}
.help-a {
	display : block;
	width : 90px;
	height : 20px;
	margin : 5px auto 5px;
	float : right;
	font-size : 1.4rem;
}
.help-container{
	width : 100%;
	height : 20px;	
}
.setting-form {
	margin :18px auto; 
}
.border-canvas {
	border: medium solid #999;
}
.omake {
	display : block;
	width : 100%;
	padding : 5px;
	margin : 10px 0 ;
	border: medium solid #999;
}
.main_bottom {
	width : 100%;
}
.main_advertisement {
	width : 100%;
}
.bottom_advertisement {
	border : double;
	padding : 0px;
	margin : 50px 0px;
	width : 360px;
	height : 330px;
}
.side_advertisement {
	border : double;
	padding : 0px;
	margin : 50px 0px;
	width : 160px;
	height : 330px;
}
.adborder {
	border : double;
}
.help_box {
	margin : 18px 10px 18px;	
	border : double;	
}
.help_box p {

	margin : 4px 4px 18px;
}
.help_box .font_strong {
	
	margin : 4px 4px 18px;
	font-size : 1.4rem;
	font-weight : bold;
}