@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;} /*訪問済みのリンクの色*/


/* ===========================================================
   ここからgemini生成 (ヘッダーの修正版)
   =========================================================== */

/* 1. 外枠：PC・スマホ共通設定 */
#top_line {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    background-color: #ffffff !important; /* 白背景を強制 */
    
    display: flex !important;
    flex-wrap: nowrap !important; /* 横一列に並べる */
    justify-content: center !important; 
    align-items: center !important;
    padding: 10px 10px !important;
    margin: 0 !important;
    height: auto !important; /* 中身の高さに合わせて白背景が自動で伸びるようにする */
}

/* 2. 各要素の並び */
#top_line #logo,
#top_line .menu,
#top_line #language {
    display: inline-flex !important;
    width: auto !important;
    float: none !important;
    margin: 5px 15px !important;
    align-items: center;
}

#top_line #logo,
#top_line #language {
    flex-shrink: 0 !important; /* ロゴとENGボタンが潰れないようにする */
}

/* ENGボタンのフォントサイズと太さをメインメニューに合わせる */
#top_line #language {
    font-size: 110% !important;
    font-weight: 700 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}
#top_line #language a {
    color: #000 !important;
    text-decoration: none !important;
}

#top_line .menu {
    flex-shrink: 1 !important; /* メニューは幅に合わせて縮むことを許可 */
}

/* 3. ロゴ画像 */
#logo img {
    height: 55px !important;
    width: auto !important;
    max-width: 100%;
}

/* 4. メニューリスト（親階層） */
ul#menu-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* トップレベルのメニューリンク */
#header #top_line ul#menu-menu > li > a {
    display: block;
    padding: 10px 15px !important;
    font-size: 110% !important;
    text-align: center !important;
    white-space: nowrap !important; /* 文字を途中で改行させない */
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    writing-mode: horizontal-tb !important; /* スマホでの縦書きを明示的に解除 */
}

#header #top_line ul#menu-menu > li > a:hover {
    color: #F33 !important;
    background: #EEE !important;
    border-radius: 5px;
}

/* 5. PC版 サブメニュー（ドロップダウン）の設定 */
#header #top_line ul#menu-menu ul.sub-menu {
    width: auto !important;
    min-width: 200px !important; /* サブメニューの最低限の幅を確保 */
    max-width: none !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; /* サブメニューには影をつける */
    padding: 5px 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    position: absolute !important;
    left: 0 !important;
    top: 100% !important; /* 親メニューのすぐ下に出す */
    z-index: 100000 !important;
}

#header #top_line ul#menu-menu ul.sub-menu li {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

#header #top_line ul#menu-menu ul.sub-menu li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 20px !important;
    font-size: 95% !important;
    font-weight: normal !important;
    text-align: left !important; 
    white-space: nowrap !important; /* サブメニューの文字を改行させない */
    color: #333 !important;
    border-bottom: 1px solid #eeeeee !important;
    background-color: transparent !important;
}

#header #top_line ul#menu-menu ul.sub-menu li a:hover {
    background-color: #f5f5f5 !important;
    color: #F33 !important;
}

#header #top_line ul#menu-menu ul.sub-menu li:last-child a {
    border-bottom: none !important;
}

/* 6. ページ全体の押し下げ */
body {
    padding-top: 140px !important; 
}


/* -----------------------------------------------------------
   スマホ版のレイアウト再構築 (幅782px以下)
   ----------------------------------------------------------- */
@media screen and (max-width: 782px) {
	#top_line {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important; /* 中央揃えにして上下のバランスを整える */
        padding: 10px 5px !important;  /* 上下に適度な余白を取る */
        height: auto !important;
        min-height: 95px !important;   /* ★縦書き文字（約75px）を確実に包み込める高さにする */
        background-color: #ffffff !important; /* ★白背景を強制適用（透け防止） */
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    #top_line #logo {
        flex-shrink: 0 !important;
        margin: 5px 10px 5px 2px !important;
    }

    #top_line .menu {
        display: block !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* メニューリスト全体をFlexで横並び */
    ul#menu-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    /* 各項目（li）に固定幅を持たせて重なりを防止 */
    #header #top_line ul#menu-menu > li {
        display: block !important;
        flex-shrink: 0 !important;
        position: relative !important;
        width: 26px !important;       /* ★Safariの幅消失バグを防ぐ固定幅 */
        min-width: 26px !important;
        height: auto !important;
        margin: 0 4px !important;      /* 項目同士の隙間 */
        padding: 0 !important;
        box-sizing: border-box !important;
		height: 70px !important;       /* 高さを少しコンパクトに */
    }

    /* リンク文字（縦書き設定） */
    #header #top_line ul#menu-menu > li > a {
        display: block !important;
        writing-mode: vertical-rl !important; 
        -webkit-writing-mode: vertical-rl !important;
        width: 26px !important;       /* ★ここにも幅を明示 */
        font-size: 13px !important;
        line-height: 26px !important; /* 文字を行の中央に配置 */
        text-align: left !important;
        padding: 10px 0 5px 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* ENG（言語切替ボタン） */
	#top_line #language {
        flex-shrink: 0 !important;
        display: block !important;
        align-self: flex-start !important; /* ★最重要：親コンテナの上端に揃える */
        writing-mode: vertical-rl !important;
        -webkit-writing-mode: vertical-rl !important;
        text-align: left !important;       /* ★最重要：縦書きの行頭（上）から文字を開始する */
        width: 26px !important;
        min-width: 26px !important;
        height: auto !important;          /* 高さを固定せず中身に合わせる */
        padding: 10px 0 5px 0 !important; /* ※メニューの a タグの padding-top と数値を合わせる */
        margin: 0 2px 0 6px !important;
        font-size: 13px !important; 
        line-height: 26px !important;
        box-sizing: border-box !important;
    }
    
    /* 過去の縦書き用「■」記号を消去 */
    #header #top_line ul#menu-menu > li > a::before {
        display: none !important;
    }

    /* ドロップダウンのサブメニュー（横書きに戻す） */
    #header #top_line ul#menu-menu ul.sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 180px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        border: none !important;
        margin-top: 0 !important;
        z-index: 100000 !important;
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        white-space: normal !important;
    }

    #header #top_line ul#menu-menu ul.sub-menu li a {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        display: block !important;
        width: auto !important;
        line-height: 1.5 !important;
        padding: 8px 12px !important;
    }
    
    body {
        padding-top: 85px !important; 
    }
}


/* 管理バー補正 */
.admin-bar #top_line { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #top_line { top: 46px; } }

/* ===========================================================
   ここまでgemini生成
   =========================================================== */

/* ログイン中の管理バー（黒い帯）との重なり防止 */
.admin-bar .menu-menu-container {
    top: 32px;
}

/* モバイル表示での管理バー位置調整 */
@media screen and (max-width: 782px) {
    .admin-bar .menu-menu-container {
        top: 46px;
    }
}

/* Typography */

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

h1 {
	font-size: 120%;
	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: 115%;
	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;
		border:solid 0px #ccc;
		padding-left:15px;
}
	
#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:700;
		font-size:100%;	

		}
#header .menu li a:hover{
	color:#F33;
	background:#EEE;
		}
#language {float:right;
			border:solid 0px black;
			margin:6.5px 5px 5px 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;
}