﻿@charset "shift_jis";

/* 全ページ共通の基本設定群 */
/* <テーマカラー>
#de0029;  赤 文鳥カラー
#e07001;  柿色 ライン
#4060a1;  青 ワンポイント
*/

/* 基本フォントサイズ ------------- */

:root { font-size:16px; }

@media (max-width:640px) {
	:root { font-size:14px; } /*15px*/
   }

/* ------------------------------- */
body {
	background-color: #ffffff; /*世界の果ての色*/
	color: #000000; /*#202020;*/
	font-size: 1rem;
	line-height: 1.25;	/*行間*/
	padding:0px;
	border:0px;
	margin:0px;
	-webkit-text-size-adjust: 100%; /*スマートホンの縦横での文字変化抑制*/
}

/* 全ページラップ ------------------*/

/* (1)pcで広げた時、左右に”帯”が出るように (2)TopMenuの幅*/
.AllWrap { 
	padding:0px;
	border:0px;
	margin:0px;
	max-width: 840px; /* ※ TopMenu幅：headerと連動すべき */
	min-height:98vh; /*100vhだったがバーが出たので小さく*/
	margin: 0px auto;	/*センター揃え*/
	background-image: url("_Image/wall.gif");
	background-repeat: repeat;
}

/* (1)狭い画面時左右マージン設ける (2)TopMenu分上を空ける (3)コンテンツが広がりすぎないよう */
.MarginWrap { 
	padding: 2.5rem	/*TopMenu分上を空ける*/ /* ※●TopMenu高さと連動すべき:上下あるので2倍*/
		 5px	/*右マージン*/
		 0px
		 5px;	/*左マージン*/
	max-width:700px;    /* コンテンツ広がり過ぎないよう*/
	margin-left:auto;   /*センター揃え1*/
	margin-right:auto;  /*センター揃え2*/
}


/* TopMenu(メニューバー) ----------------- */

/* TopMenuの全ラップ＆配置: 絶対値指定で,画面上+左右中央: これ自体高さは0,内部要素で実体表示 */
header {
	 /* 画面上,左右中央に来るよう絶対値指定 start*/
	position: absolute;
	top: 0; 
	left: 0;
	right:0;
	bottom:0;
	margin: 0px auto auto auto;
	 /* 画面上,左右中央＆上寄せに来るよう絶対値指定 end*/

	z-index: 100; /* ヘッダのレイヤーを、一番上にすべく大きな数字を*/
	width:100%;   /*初期化不全封じ*/
	max-width: 840px; /* .AllWrap::max-widthと連動すべき */
	height: 0rem; /*本体の高さは0*/

	background-color: #ff0000; /* フェイルセーフ、わかりやすい色で */
}

/* (1/2)メニューバー部分 ---- */
.TopNavi  {
	border:0px;
	margin:0px;
	background-color:#4060a1;
	display: flex;
	justify-content: space-between; /*左右に広げる*/
}

.TopNavi a {
	display: inline-block;
	padding:0.5rem 4px;	/*高さを支配*/
	background-color:#inherit;
	color: #ffffff;
	font-size:1.15rem;
	font-weight: bold;
	text-decoration: none;
}
.TopNavi ul { /* パンくずリスト用 */
	display:flex;
	margin:0px;
	padding:0px;
	list-style:none;
}
.TopNavi ul a::after { /*パンくずリスト用*/
	margin-left:3px;
	margin-right:0px;
	content: '>';
	opacity: 0.5;
}


.TopNavi .MenuButton { /* Menuボタン */
	margin:0px;
	padding: 0px 0.3rem 0px 0.3rem;

	outline: none; /* ボタン飾り消す*/
	background: none; /* ボタン飾り消す*/
	border: none; /* ボタン飾り消す*/
	border-left:solid 2px #7090d1; /* 区切り */

	cursor: pointer;

	font-size:1.1rem;
	color:#ffffff;
}
.TopNavi .MenuButton:hover { /*MENUボタン*/
	background-color: rgba(255,192,192,0.66);
}

/* (2/2)プルダウン部分 ---- */
.PullDown {
	display: none; /* 初期状態は消えている*/
	background-color: rgba(0,0,0, 0.33); /* 左の透明部分色 */
}
.PullDown a {
	display: block;
	padding:0.5rem 4px; /*高さを支配*/
	background-color:#inherit;
	color: #ffffff;
	font-size:1.15rem;
	font-weight: bold;
	text-decoration: none;
}
.PullDown ul { 
	margin:0px;
	padding:0px;
	list-style:none;

	margin-left:auto; /* テーブル右寄せ */
	margin-right:0;
	text-align:right;

	max-width:10rem; /* プルダウンメニュー部の幅 */
}
.PullDown ul li {
	background-color: #4060a1;
	border-top:solid 2px #7090d1; /* 区切り */
}
.PullDown ul .SubMenu{
	background-color: #707070;
	border-top:solid 2px #909090; /* 区切り */
}

/* タイトル--------------------------*/
.Title {
	margin: 0px 0px 0px 0px;
	bottom: 0;
}
.TitleLine {
	border-collapse:separate;
	border-bottom: solid 3px #e07001;
	display: flex; /* タイトルと日付を、左右いっぱいに広げるため 1/2*/
	align-items: flex-end; /* 下ラインに揃える */
	justify-content: center;
	margin:0;
	padding:0;
	padding-top:0px;
}
.TitleLine .Accent {	/* 赤アクセント */
	width:1.1rem;
	height:2.2rem;

	display: block;
	text-align:left;
	border-radius:20%;
	margin-bottom: 3px;
	margin-right: 3px;
	background-color: #de0029;
	color: #ffffff;
}
.TitleLine h2 {
	display: block;
	text-align:left;
	font-weight: bold;
	margin-top:0;
	margin-bottom:0;
	border:0;
	padding:0;
	font-size: 2rem;
	flex: 1;/* タイトルと文鳥を、左右いっぱいに広げるため 2/2*/
}
.TitleLine h2 span { /* <nobr>タグは廃止されているので代替*/
	/* なお、spanをつなげるときは、改行や空白などが間に必要！*/
	white-space: nowrap; /*改行禁止 <nobr>(css3で廃止)に相当 */
}
.TitleLine .Tori { /* 文鳥 ＆ 日付や注釈*/
	display:block;
	text-align:right;
	vertical-align: bottom;
	margin-top:0;
	margin-bottom:0;
	border:0;
	padding:0;
	font-size:1rem;
	font-weight:normal;
}


/* ボタン型リンク ----------------*/

.Button {	/* ボタン用リンク */
	display: inline-block;
	margin: 0px;
	padding:4px 22px;
	border: solid 1px #808080; /* クリックした時に枠を残すために、同色ながら区別 */
	background-color: #808080;
	border-radius: 6px;
	color: #ffffff;
	font-size: 1.0rem;
	font-weight: bold;
	text-decoration: none;
}

/* フォームのボタン-----------------*/
input[type="submit"] , input[type="button"] {
	display: inline-block;
	margin:0px;
	padding:4px 22px;
	border: solid 1px #808080; /* クリックした時に枠を残すために、同色ながら区別 */
	background-color: #808080;
	border-radius: 6px;
	color: #ffffff;
	font-size: 1.0rem;
	font-weight: bold;
	text-decoration: none;
	-webkit-appearance: none; /* iPhoneだと 設定が無効にされるのを回避 */
}

/* 左右に広げる --------------------- */
.LayoutLR {
	display: flex;
	justify-content: space-between; /*左右に広げる*/
}

/* テーブル的(iPhoneバグ対策)-------- */ /* iPhoneはdivが重なるというバカなバグがある*/
.TableLike { display:table; }
.TableLike .TrLike { display:table-row; }
.TableLike .TrLike>div {
	display:table-cell;
	margin:0px;
	padding:0px;
	border:0px;
}
.TableLike .TrLike .ThLikeNoBr { /*改行禁止セル*/
	display:table-cell;
	font-weight:bold;
	white-space: nowrap; /*改行禁止 <nobr>(css3で廃止)に相当 */
	margin:0px;
	padding:0px;
	border:0px;
}
.TableLike .TrLike .TdLikeNoBr { /*改行禁止セル*/
	display:table-cell;
	white-space: nowrap; /*改行禁止 <nobr>(css3で廃止)に相当 */
	margin:0px;
	padding:0px;
	border:0px;
}
.TableLike .TrLike .TdLike { /*改行ok版*/
	display:table-cell;
	margin:0px;
	padding:0px;
	border:0px;
}

/* フッター --------------------------*/
footer .container {
	border-top: solid 3px #e07001;
	text-align:center;
	margin-bottom:0.3rem;
}

footer .Copyright {
	border:0px;
	margin:4px 0px;
	padding:0px;
	font-size:1rem;
	font-weight:normal;
}

/* --------------------------*/
/* a に対する「上書き」なので、一番最後！*/
a:hover {
	background-color: rgba(255,192,192,0.66);
}

