@charset "UTF-8";

/*
Theme Name:DiGRAJAPAN HP2022
Theme URI:http://digrajapan.org/
Description:DiGRAJAPAN new HP Desigin
Author:Akito INOUE 
Author URI:http://digrajapan.org/
Description:DiGRA JapanのHP
Version:1.0.0

履歴：
・粟飯原さんが2022年まで、更新されてきたCSS・PHPをもとに井上が2022年1月14日～15日にかけて更新。
　主な対応ポイント
　（１）全体に、シンプルなデザインに変更
　（２）レシポンシブルデザインに変更
　（３）htmlタグの文法的対応
*/




/* レスポンシブル対応 

横幅についてのメモ
wrapper:headerと、mainと、sidbarを含むbody内容のほぼ全体。全体のセンタリング調整。
main:ヘッダーより下部分にあたる、左部分の全容
sidebar:右サイドバー部分
#main .page01 ul li:横幅というより縦幅がずれやすいので、対応。
 
 */


/* 画面幅が1281px以上（PC専用スタイル）*/

@media screen and (min-width: 1281px) {
body		{font-size:90%;}
#wrapper	{width:960px;margin:0px auto;}
#main 		{float:left ;max-width: 700px;}
#sidebar 	{float:right;max-width: 250px;}
#main .page01 ul li a{width:200px;height:110px;}
}
/* 画面幅が1280px以下（タブレット・スマホ共通スタイル）*/
@media screen and (max-width: 1280px) {
body		{font-size:90%;}
#wrapper	{width:960px;margin:0px auto;}
#main 		{float:left ;max-width: 700px;}
#sidebar 	{float:right;max-width: 250px;}
#main .page01 ul li a{width:200px;height:110px;}
}
  /* 画面幅が960px～1280px（タブレット専用スタイル）*/
@media screen and (min-width: 960px) and (max-width: 1280px) {
body		{font-size:90%;}
#wrapper	{width:960px;margin:0px auto;}
#main 		{float:left ;max-width: 700px;}
#sidebar 	{float:left ;max-width: 250px;}
#main .page01 ul li a{width:200px;height:110px;}
}
@media screen and (max-width: 960px) {
  /* 画面幅が960px以下（スマートフォン専用スタイル）*/
body		{font-size:100%;}
#wrapper	{width:100%;}
#metaslider-id-4838{max-width:700px;}
#main 		{float:left ;max-width: 100%;}
#sidebar 	{clear:both;max-width: 100%;}
#main .page01 ul li a{max-width:40%;}
}
@media screen and (max-width: 414px) {
  /* 画面幅が414px以下（スマートフォン縦向き専用スタイル）*/
body		{font-size:100%;}
#wrapper	{width:100%;}
#metaslider-id-4838{max-width:100%;}
#main 		{float:left;max-width: 100%;}
#sidebar 	{clear:both;max-width: 100%;}
#main .page01 ul li a{max-width:40%;height:200px;}
}


/*　General Setting　*/

html {
    overflow: auto;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	overflow: hidden;
    position: relative;
	color: #333;
font-family: 'Noto Sans JP', sans-serif;
	line-height: 160%;
}

a{color:#3333CC;}
a:hover{background:#eee;color:red;}
a:visited {color:#993366;} /*訪問済みのリンクの色*/

/* Typography */

h1, h2, h3, h4, h5, h6{
	font-weight: 700;
}

h1 {
	font-size: 110%;
	font-weight:700;
}

figure{
}
figcaption{
}


#header, #contents, #footer {width: 100%;}

/* 個別ページのタイトルのみ別処理 */
h1.independent_pages{
	font-size: 200%;
	line-height:1.5;
}
h1.independent_pages a{
	text-decoration:none;
	color:black;
	display:block;
	border-top:solid 20px #ccc;
	margin-top:-25px;
	padding-top:40px;
	
}

h2 {
	font-size: 110%;
	color: #000; 
	font-weight:700;
}

h4{
	text-align: left;
/*	line-height: 0px; */
}

blockquote{
	margin-bottom: 2em;
	margin-left: 20px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
}




/* List */

ul,ol {
	margin: 0;
	padding: 0;
	list-style-type: circle;
}


ul ul{
	margin-left: 1em;
}

/* table */
td{
	padding:5px;
	
}

figure.wp-block-table td{
	border:solid 1px black;
}

/* img */
 
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }


/* Layout */


#header .inner, #contents .inner, #footer .inner {
    max-width: 100%;
    margin: 0 auto;
}

#container,
.wrapper {
	min-width:  940px;
}

#header {
	height: auto !important;
	height: 100%;
	border-bottom: 0px solid #fff;
	background: #fff;
	color: white;
	/*margin-bottom: 15px;
	padding-top: 40px;*/
	/*background-image:url(DiGRA02.jpg);　/* 画像の設定  */
}




#main,
#sidebar{
	margin-top: 5px;
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom: 15px solid #CCC;
}

#footer {
	clear: both;
	background: #DDDDDD;
	color: #fff;
	width: 100%;
	height: 100%;
    text-align:left;
	padding: 0 500%;
	margin: 0 -500% ;
	list-style-type:none
}


/* header */

*:first-child+html #header > div{ /* IE7 */
	clear: both;
	zoom:1;
}
#top_line{
	margin:30px 0px 30px 0px;
	height:30px;
	background:#fff;
}

#logo{	display:block;
		float: left;}

#logo a{
}

#description {
		margin-top: 0;
		color: #ccc;
}

#description　a:link{color:#ccc;} 
#description a:visited {color:#ccc;} 

/* Navigation */

#header .menu{
		float: left;
		bottom: 0px;
		margin-bottom: 0;
		text-align: left;

}
	
#header div.menu > ul,
#header ul.menu{
			/*メインメニュー部分*/
		float: left;
}
	
#header div.menu > ul > li,
#header ul.menu > li{
	float: left;	
}

#header .menu li{
		position: relative;
		display: inline; 
}
	#header .menu li a{
		/*メインメニュー部分　各ブロック*/
		display: block; 
		background-color:  #fff;
		padding: 10px 20px 10px 20px;
		text-decoration: none;
		color: #000;
		text-align: left;
		font-weight:500;
		font-size:100%;
		}
#header .menu li a:hover{
	color:#F33;
	background:#EEE;
		}
#language {float:right;
			border:solid 1px black;
			margin:5px;}

#language a{text-decoration:none;
			color:black;}

#header ul.sub-menu,
#header ul.children{
			position: absolute;
			display: none;
			margin-left: 0;
			width: auto;
			max-width: 150px;
			z-index: 1;
			left: 0;
			clear: left;
}
#header .sub-menu li,
#header .children li{
	/*position: relative;*/
			border: none;
}

#header .sub-menu li a,
#header .children li a{
	/*position: relative;*/
			border-left: 0px solid white;
}

#header .menu li:hover > ul{
				display: block;
				
}

/* header image */
			
#metaslider-id-4838{
	clear: both;
	display:block;
	border:solid white 1px;
}

#header	.metaslider  {
    padding: 0; /* remove padding */
}

#header-image{
				margin-bottom: 500px;
}


#site-title-logo {
				width: 272px; /* ロゴの高さ */
				height: 60px; /* ロゴの横幅 */
				text-align: left;
}


/* Breadcrumb */

#breadcrumb{
				margin-bottom: 20px;
}
#breadcrumb li{
				float: left;
				margin-right: .5em;
}

/* Main */

#main .post{
				margin:0px;
				height:100%;
				position: relative;
				background:#FFF;
				/* text-shadow: 5px 5px 1px #999987; */
				
}

#main .post:before{
	/* 上３つのポストの見出し */
				content: '';
				position: absolute;
				top: 7px;
				bottom: 7px;
				left: 7px;
				right: 7px;
}
			
#main .post01{
		margin:0px;
		height:80%;
		padding: .3em;
		position: relative;
		background-color: #ffffff;
}
#main .post01 h1.front,h1.archive{
		display:block;
		background:#666;
		padding:8px 12px 8px 12px;
		border-radius:15px;
		line-height:2em;
}
#main .post01 h1.front a,h1.archive a{
	/* トップページの通常ポストの見出し*/
		color:white;
		text-decoration:none;
}
#main .post01 h1.front a:hover,h1.archive a:hover{
	background:#666;
	color:#FFcccc;
}
#main .post01 span.date {
	font-weight:300;
	padding: 3px 3px 3px 3px;
	color:#CCC;
	display:block;
	float:right;
}


.wp_social_bookmarking_light{
	display:block;
	float:right;
}
.wp_social_bookmarking_light_clear{
	clear:both;
}

#main .page{
				overflow: hidden;
				margin-bottom: 59px;
				background:#ffffff; /* 背景を白にする */


				/* box-shadow: 2px 2px 5px rgba(0,0,0,0.5); */
				padding: 0.5em;
				/*角丸くする*/

				height: 300px;
}

#main .page01{
	/* 上３つ囲みのbody部分 */
				overflow: hidden;
				margin-bottom: 30px;

				/*text-decoration: underline; */


/*				overflow: scroll;    スクロール表示 
				height: 100%; */
				
				/*	padding-left:8.5em;*/ /* ２行目行こう日付分下げる */ 
				/*text-indent:8.5em;*/ /* 一行目は戻す */ 
}
#main .page01 ul li{
	list-style-type: none;


}
#main .page01 ul li a{
	display:block;
	text-decoration:none;
	float:left;
	margin:5px;
	padding:10px;
	background:#fff;
	border-radius: 15px;
	border:1px #ddd solid;

}
#main .page01 ul li a:hover{
	background:#EEE;
}
			
#main .page02{
				overflow: hidden;
				margin-bottom: 59px;
				padding: 0.5em;
				margin-bottom: 1.0em;
				color:black;
}
/*
#main .page02 p{
	text-indent:1em;
}
*/
#main .page02 li{
	list-style-type:square;
	margin-left:25px;

}

#main .page03{
	
				overflow: hidden;
				margin-bottom: 59px;
				background:#F8F8FF; 
                                 font-size-adjust:0.58;


				box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
				padding: 0.5em;
				margin-bottom: 1.0em;
				/*text-decoration: underline; */


/*	
				overflow: scroll;    スクロール表示 
				height: 100%; */ 
}
.date{color:#999}

.post-meta{
				margin-bottom: 1.5em;
}
.post-meta .post-date,
.post-meta .category{
				padding-right: 1em;
}
			.comment-num{ white-space: nowrap; }

			.more-link{
				float: right;
			}

			.footer-post-meta{
				margin-top: 40px;
				text-align: right;
			}
			.post-author{ padding-left: 1em; }

			.page-link{
				margin: 3em 0;
			}
			.comment-page-link{
				margin: 0 0 3em;
			}

			.page-link span,
			.comment-page-link span,
			.comment-page-link a{
				display: inline-block;
				margin-right: 3px;
				padding: 5px 8px;
				border: 1px solid #ddd;
				background: #ddd;
			}
			.page-link a span,
			.comment-page-link a{
				background: #fff;
			}

			.page-link a{
				border-bottom: none;
				color: #000;
			}

.page-link a span:hover,
.comment-page-link a:hover{
				background: #ffeff7;
				color: #000;
}

#main .right{
	text-align: right;
}


/* Sidebar */

#sidebar h2{
				margin:50px 10px 10px 10px;
				padding:10px;
				color: #666;
				border-bottom:8px solid #666;
				font-size:110%;
				text-align:center;
}
#sidebar h2 a{
			color:#666;
			text-decoration:none;
}

.widget{
	
}

#sidebar .widget ul{
				padding-left: 1.5em;
				list-style-position: outside;
				list-style-type:none ;
				overflow: hidden;
					border:solid 0px blue;
}
			
#sidebar .widget_sp_image{
				text-align:center;
				list-style-type:none
}

		
#sidebar-recent-posts li,
#sidebar-popular-posts li{
				margin:20px 0;
}

			.sidebar-thumbnail-box{
				float: left;
				max-width: 75px;
			}

			.sidebar-recent-posts-title{
				float: right;
				max-width: 165px;
			}
			#sidebar-recent-posts h3,
			#sidebar-recent-posts p,
			#sidebar-popular-posts h3,
			#sidebar-popular-posts p{
				margin: 0;
			}

			.tagcloud a{
				white-space: nowrap;
			}
			#sidebar .logo {
				max-width: 50px; /* ロゴの高さ */
				 /* height: ;　ロゴの横幅 */
				border: none;
			}
/* Footer */	

#footer .area01 li a, .area02 li a,.area03 li a,.area04 li a{
	color: #33f;
	text-decoration:none;
	padding-left:15px;
}
#footer h2{
	background:transparent;
	color:black;
	margin-right:30px;
	font-weight:300;
	padding:15px;
	border-bottom:2px solid black;
	
	
}
#footer .copyright {
	display:block;
	clear:both;
	color:#666;
    font-size: 90%;
    line-height: 1.2em; 
	margin-top:30px;
	padding-top:30px;
}

#footer .area01{
    float: left;
    min-width: 24%;
	height: 170px;
	margin-left: 3px;
	margin-Top: 3px;
}
 
#footer .area02{
    float: left;
    min-width: 24%;
	height: 170px;
	margin-left: 3px;
	margin-Top: 3px;
}
 
#footer .area03{
    float: left;
    min-width: 24%;
	height: 170px;
	margin-left: 3px;
	margin-Top: 3px;
}
#footer .area04{
    float: left;
    min-width: 24%;
	height: 170px;
	margin-left: 3px;
	margin-Top: 3px;
}