@charset "UTF-8";

body	{margin: 0;
	background-color: #fdfdfd; /* ボディ全体のカラー */
	font-family:  'M PLUS 1p','ヒラギノ角ゴシック','Hiragino Sans','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Helvetica Neue','Helvetica','Arial',sans-serif;}

/* サイト名（ヘッダーの設定） */
.site	{padding: 30px 0; /* ヘッダーの上下の幅 */
	background-color: #fdfdfd; /* ヘッダーの背景色 */
	border-bottom: solid 1px #2b2b2b; /* ヘッダー下のバー */
	text-align: right /* テキスト右揃え */;}

.site a	{color: #fff950; /* ヘッダーの文字色 */
	font-size: 20px; /* ヘッダーの文字サイズ */
	font-family: 'Paytone One', sans-serif; /* ヘッダーのフォント */
	text-decoration: none /* リンクのデコレーションを無しに */}

.site img {max-width: 100%;
	height: auto
}

iframe {width: 560px;
	height: 315px
}


/* メニュー */
.menu	{grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 1;
	grid-row-end: -1;
	z-index: 100;
	/* メニューの位置設定 */

	width: 350px; /* メニューの横幅 */
	margin-left: -350px; /* 上を閉じるための設定 */
	background-color: rgba(0,0,0,0.8); /* メニューの透過 */
	transition: margin-left 0.2s ease-out /* メニュー開閉のアニメーションスピード */}

body.open .menu	{margin-left: 0}

.menu ul	{margin: 0;
	margin-top: 120px; /* メニューボタンの上からの距離 */
	padding: 0; /* メニューボタンの左からの距離 */
	list-style: none;
	height: calc(100vh - 120px); /* メニューを開いた時、メニューのみをスクロール許可 */
	overflow: auto}

.menu li a	{display: block;
	padding: 20px; /* メニューの文字まわりの余白 */
	color: #ffffff; /* メニューボタンの色 */
	font-size: 20px; /* メニューボタンの文字サイズ */
	text-decoration: none /* メニューボタンのリンクのデコレーションを無し */}

.menu li a:hover	{background-color: #bababa /* メニューボタンのマウスホバー時の背景色 */}

body.open .page-cover
	{grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 1;
	grid-row-end: -1;
	z-index: 50;
	/* メニューの位置設定 */

	background-color: rgba(0,0,0,0.2)}

body.open	{height: 100vh; /* ボックスの高さを固定 */
	overflow: hidden /* ボックスの中身のスクロール禁止 */}

html	{overflow-y: scroll /* メニューを開いた時のレイアウトのずれを防止 */}


/* メニューの開閉ボタン */
button	{grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 1; /* メニューの位置設定 */
	justify-self: start;
	align-self: center;
	margin-left: 14px; /* ボタンの表示位置微調整 */
	padding: 6px;
	border: none; /* ドロワーメニューのデザイン */
	background-color: transparent;
	color: #757575; /* ドロワーメニューのボタン色 */
	font-size: 28px; /* ドロワーメニューの文字サイズ */
	cursor: pointer}

button:focus {outline: none /* ドロワーメニューのボタンスタイル */}

body.open button	{z-index: 200;
	color: #757575 /* メニューの閉じるボタン */}

body:not(.open) .fa-close	{display: none /* メニュー閉時に閉じるアイコン非表示 */}

body.open .fa-bars	{display: none /* メニュー開時の3本線アイコン非表示 */}






/* 記事 */
.kiji	{padding: 40px}

.kiji img	{max-width: 100%;
	height: auto}

.kiji h1	{margin-top: 0;
	margin-bottom: 20px;
	border-bottom: dotted 2px #2b2b2b;
	font-size: 36px}

.kiji h2	{margin-top: 0;
	margin-bottom: 20px;
	border-bottom: dotted 2px #2b2b2b;
	font-size: 24px}


.kiji h1 span	{display: block;
	margin-bottom: 20px;
	color: #2b2b2b; 
	font-size: 20px;
	font-weight: bold}

.kiji p	{margin-top: 0;
	margin-bottom: 20px;
	line-height: 2;
	text-align: justify}

.kiji a	{display: block;
	padding: 5px;
	color: #000000;
	text-decoration: none}


.kijiinfo	{margin-bottom: 20px;
	color: #666666}

.kijimarkera {background: linear-gradient(transparent 60%, #66ffcc 60%);}/* 文字に緑色のマーカーをいれる設定 */

.kijimarkerb {background: linear-gradient(transparent 60%, #66ccff 60%);}/* 文字に青色のマーカーをいれる設定 */

.kijimarkerc {background: linear-gradient(transparent 60%, #ffcc66 60%);}/* 文字に橙色のマーカーをいれる設定 */


/* 関連記事メニュー */
.kanren	{padding: 40px 20px;
	background-color: #f0f0e9}

.kanren ul	{margin: 0;
	padding: 0;
	list-style: none}

.kanren li a	{
	display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none;}

.kanren li a:hover	{background-color: #ffffff}

.kanren img	{max-width: 100%;
	height: auto}

figcaption	{font-size: 12px}

figcaption strong	{display: block}


/* ページの上に戻るボタン */

.pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.pagetop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #ffffff;
  color: #757575;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
.pagetop a:hover {
  text-decoration: none;
  opacity: 0.7;
}




/* コピーライト（フッターの設定） */
.copyright	{padding: 0px; /* フッターの上下の幅 */
	background-color: #2b2b2b; /* フッターの背景色 */
	text-align: center /* テキスト中央揃え */}

.copyright p	{margin: 1px; /* フッターのマージン */
	color: #fdfdfd; /* フッターの文字色 */
	font-size: 12px /* フッターの文字サイズ */}

/* 左のバー */
.redbar	{grid-column-start: 1;
	grid-row-start: 2;
	grid-row-end: -2;
	width: 25px; /* バーの幅 */
	background-color: #b7b7b7 /* バーの色 */}


/* グリッド */
body	{display: grid;
	grid-template-areas:
		"head head"
		"main side2"
		"foot foot";
	grid-template-columns: 1fr 200px;
	grid-template-rows: auto auto 60px}
	/* テーブル属性的な感覚で、ヘッド、メイン、サイド、フットを配置している */

.site	{grid-area: head}
.kiji	{grid-area: main}
.kanren	{grid-area: side2}
.copyright	{grid-area: foot} /* だいたい全体の表示設定 */



/* ########### 600px以下の表示設定 ########### */
@media (max-width: 600px) {

/* グリッド */
body	{grid-template-areas:
		"head"
		"main"
		"side2"
		"foot";
	grid-template-columns: 1fr ;
	grid-template-rows: auto 1fr}
	/* 1列表示設定 */

iframe {width: 80%;
	height: auto}

.site img {max-width: 50%;
	height: auto
}
/* 記事 */
.kiji	{padding: 40px 20px}
	/* 記事のまわりの余白を上書きしている */

/* 関連記事メニュー */
.kanren	{background-color: #f0f0e9}

.kanren ul	{display: flex;
	flex-wrap: wrap}

.kanren li {flex: 1 0 50%}


.kiji h1	{margin-top: 0;
	margin-bottom: 20px;
	border-bottom: dotted 1px #2b2b2b;
	font-size: 24px}

.kiji h2	{margin-top: 0;
	margin-bottom: 20px;
	border-bottom: dotted 1px #2b2b2b;
	font-size: 20px}


.kiji h1 span	{display: block;
	margin-bottom: 20px;
	color: #2b2b2b; 
	font-size: 18px;
	font-weight: bold}






/* ########### 600px以下の左のバーの表示変更 ########### */
@media (max-width: 600px) {

.redbar	{grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 2;
	grid-row-end: 3;
	width: auto;
	height: 10px}

}


/* ### グリッドレイアウトに未対応なブラウザ（IE11以外）用の設定 ### */
@supports not (display: grid) {

/* P.315のhtmlとbodyの設定 */
html	{background: #dddddd}
body	{max-width: 768px;
	margin: 0 auto;
	padding: 10px 20px;
	background-color: #ffffff}

/* 記事の上の余白サイズを調整 */
.kiji	{margin-top: 20px}

/* 記事に関する情報の表示を整える */
.kijiinfo time	{display: inline}

.kijiinfo span	{display: inline;
	font-size: 16px}

/* 画像とキャプションの表示を整える */
.kiji figure	{display: block;
	margin-bottom: 30px}

.kiji img	{width: 100%;
	margin: 0}

.kiji figcaption	{width: 100%}

/* メニューの表示を整える */
.menu	{width: 100%;
	margin-left: 0;
	margin-bottom: 20px;}

.menu ul	{height: auto}

.menu li a	{padding: 10px;
	font-size: 12px}

/* メニューのリンクを段組みにする */
.menu ul	{display: flex;
	flex-wrap: wrap}
.menu li	{flex: 1 0 150px}


/* ボタンを非表示にする */
button	{display: none}

}



/* ### IE11用の設定 ### */
@media all and (-ms-high-contrast: none), not all and (-ms-high-contrast: none) {

/* P.315のhtmlとbodyの設定 */
html	{background: #dddddd}
body	{max-width: 768px;
	margin: 0 auto;
	padding: 10px 20px;
	background-color: #ffffff}

/* 記事の上の余白サイズを調整 */
.kiji	{margin-top: 20px}

/* 記事に関する情報の表示を整える */
.kijiinfo time	{display: inline}

.kijiinfo span	{display: inline;
	font-size: 16px}

/* 画像とキャプションの表示を整える */
.kiji figure	{display: block;
	margin-bottom: 30px}

.kiji img	{width: auto;
	margin: 0}

.kiji figcaption	{width: 100%}

/* メニューの表示を整える */
.menu	{width: 100%;
	margin-left: 0;
	margin-bottom: 20px;}

.menu ul	{height: auto}

.menu li a	{padding: 10px;
	font-size: 12px}

/* メニューのリンクを段組みにする */
.menu ul	{display: flex;
	flex-wrap: wrap}
.menu li	{flex: 1 0 150px}


/* ボタンを非表示にする */
button	{display: none}

}