@charset "utf-8";
/* CSS Document */


/* 基本設定： 画面サイズ */
:root {
	--large-width: 1020px;
	--middle-width: 800px;
	--small-width: 375px;	
}

/* 基本設定： フォントサイズ */
@media (max-width: 349px) {
	:root {
		font-size: 13px;
		--phote-size: 120px;
	}
}

@media (min-width: 350px) and (max-width: 749px) {
	:root {
		font-size: 14px;
		--phote-size: 150px;
	}
}
@media (min-width: 750px) and (max-width: 999px) {
	:root {
		font-size: 16px;
		--phote-size: 200px;
	}
}
@media (min-width: 1000px) {
	:root {
		font-size: 18px;
		--phote-size: 260px;
	}
}


/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}

#wrapper {
	height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

/* ヘッダー */
header {
	position:fixed;
	top: 0;
	left: 0;
	width:100%;
	z-index: 100;
	background-color: rgba(255,255,255,0.9);
}

/* サイト名 */
.headA {
	display: inline-block;
	line-height: 60px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #144DA0;
	color: #f0f8ff;
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	text-decoration: none;
}

/* ナビゲーションメニュー */
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.headB a {
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
}
#select{
	background-color: #63A6DB;
	color:#fff;
}
.headB a:hover {
	background-color: #63A6DB;
	color:#fff;
	opacity: 0.7;
}

/* 閉じるボタン */
.close {
	display:block;
	transition: all 200ms;
	font-size: 40px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
	top: 6px;
	right: 10px;
}
.container .close:hover {
	color: #ff0000;
	cursor: pointer;
}

/* 大きい画面用の設定 */
@media (min-width: 768px) {
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1020px;
		margin-left: auto;
		margin-right: auto;
	}
	.headB ul {
		display: flex;
		align-content:center;
	}
	.close {
		position: relative;
	}
	.headC {display: none;}
	.headB {display: block !important;}
}

/* 小さい画面用の設定 */
@media (max-width: 767px) {
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.headC {
		margin-right: 60px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 40px;
		opacity: 0.6;
		cursor: pointer;
	}
	.headC:hover {
		opacity: 0.3;
	}
	.headB {
		display: none;
	}
	.close {
		position: absolute;
		top:23px;
		right:10px
	}
}

/* コンテンツ */
.main .container {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	max-width: 1020px;
	margin: 70px auto;
	counter-reset: number;
}
.main h1 {
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	border-left: solid 0.75rem #144DA0;
	font-size: 1.5rem;
	line-height: 1.5rem;
	width:100%;
}
.main h2 {
	padding-left: 0.5rem;
	margin: 1.5rem 15px 0 0;
	font-size: 1.2rem;
	line-height: 2rem;
	width:100%;
}
.main h2::before {
	position: relative;
	display: inline-block;
	top:-1px;
	margin-right: 0.5rem;
	color: #fff;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: #144DA0;
	counter-increment: number;
	content: counter(number);
	font-size: 1.2rem;
	text-align: center;
	line-height:2rem;
}
.main p {
	font-size: 1rem;
	line-height: 1.2rem;
	text-indent: 1em;
	margin: 10px 15px 10px 15px;
}
.main ol {
	margin: 10px 10px 25px 0px;
}
.main ol li {
	list-style-type: none;
	counter-increment: cnt;
	text-indent: -1.8rem;
}
.main ol li::before {
	content: "(" counter(cnt) ") ";
}
.main ul {
	margin: 10px 20px 10px 10px;
}
.main li {
	margin-bottom: 8px;
	font-size: 0.9rem;
	line-height: 1.2rem;
}
.main .star  li {
	padding-left: 0.1rem;
	text-indent: -1.2rem;
	list-style: none;
}
.main .star  li::before {
	content: "※ ";
}


/* コンテンツ一覧 */
.list .container {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	max-width: v1020px;
	margin: 70px auto;
}


@media (max-width: 619px) {
  .list article { flex: 1 150px; }
}	


@media  (min-width: 620px) and (max-width: 799px) {
  .list article { flex: 1 180px; }
  
}	
	
@media  (min-width: 800px) and (max-width: 999px) {
  .list article { flex: 1 200px; }
}


@media (min-width: 1000px) {
  .list .container { height: calc(100vh - 100px); }
  .list article { flex: 1 230px; }
}

.list h1 {
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	border-left: solid 0.75rem #144DA0;
	font-size: 1.5rem;
	line-height: 1.5rem;
	width:100%;
}

.list a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.list .select {
	background-color: #63A6DB;
}

.list a:hover {
	background-color: #63A6DB;
	opacity: 0.8;
}

.list .photo {
	min-height: var(--phote-size);
	margin: 4px 4px;
	background-position:center top;
	background-size: cover;
	height:100%;
	width: 97%;
	vertical-align: middle;
}

.list .photo h3 {
	padding-top: 30px;
	text-align: center;
	font-size: 1.8rem;
	color: #ffd700;
	text-shadow: 3px 3px 4px #144DA0;
	line-height: 1.2em;
	margin:0px;
}

.list .photo p {
	padding-top:40px;
	font-size: 0.9rem;
	text-align: left;
	color: #f0f8ff;
	text-shadow: 3px 3px 3px #144DA0;
	margin-left: 5px;
}


/* 用語解説 */
.word .container {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	max-width: 1020px;
	min-width: 375px;
	margin: 70px auto;
	text-align: left;
}

@media (max-width: 449px) {
	
	.word .container {
		height:calc(100vh - 80px);
	}
	
	.word h3 {	
		max-width:23rem;
	}
	
	.word .popup {
		margin: 20px auto;
		padding: 15px 10px;
		background: #fff;
		border-radius: 5px;
		width: calc(100vw - 20px);
		position: relative;
		transition: all 2s ease-in-out;
	}
	.word .popup img {
		position: relative;
		top:10px;
		width:100%;
	}

}

@media  (min-width: 450px) and (max-width: 719px) {

	.word .container {
		height:calc(100vh - 80px);
	}
	
	.word h3 {	
		white-space: nowrap;
	}
	.word .popup {
		margin: 20px auto;
		padding: 15px 10px;
		background: #fff;
		border-radius: 5px;
		width: calc(100vw - 20px);
		position: relative;
		transition: all 2s ease-in-out;
	}
	.word .popup img {
		position: relative;
		top:10px;
		width:100%;
	}

	
}

@media (min-width: 720px) {
	
	.word .container {
		height:calc(100vh - 100px);
	}

	.word h3 {	
		white-space: nowrap;
	}	
	.word .popup {
		margin: 50px auto;
		padding: 15px 15px;
		background: #fff;
		border-radius: 5px;
		width: 700px;
		position: relative;
		transition: all 2s ease-in-out;
	}	
	
	.word .popup img {
		position: relative;
		top:0px;
		left:15px;
		width:90%;
	}
	
}


.word h1 {
	display: inline;
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	border-left: solid 0.75rem #144DA0;
	font-size: 1.5rem;
	line-height: 1.5rem;
	width:5rem;
}
.word h2 {
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	font-size: 1.5rem;
	line-height: 1.5rem;
	width:calc(100% - 10rem);
}
.word h2::before {
	margin-left: 10px;
	content: '\f054';
	font-family: 'FontAwesome';
	color:#144DA0;
	margin-right: 5px;
}

.word h3 {	
	display: table;
	text-align:left;
	vertical-align: top;
	min-width:9rem;
	color: #3e84b5;
	text-shadow: inset 0 2px 1px #ffffff;
	font-size: 1.1rem;
	line-height: 1.2rem;
	padding-left: 2rem;
	margin-bottom: 10px;

	/*behavior: url(PIE.htc);*/
	
}
.word a {
	text-decoration: none;
	display: block;
}
.word h3 a::after {
	margin-left: 2px;
	content: '\f054';
	font-family: 'FontAwesome';
	color:#144DA0;
}

.word a:hover{
	color: #ff0000;
	cursor: pointer;
	text-decoration: underline;
}

.word .overlay {
	position: fixed;
	top: 70px;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
}
.word .overlay:target {
	visibility: visible;
	opacity: 1;
}

.word .popup h3 {
	display:relative;
	padding-left: 1rem;
	margin-bottom: 20px;
	width:100%;
	color: #3e84b5;
	font-size:1.4rem;
	font-family: Tahoma, Arial, sans-serif;
}
.word .popup p {
	font-size:1.0rem;
	line-height: 1.2rem;
	margin: 7px 0px;
}

.word .popup .close {
	position: absolute;
	top: 19px;
	right: 10px;
	transition: all 100ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
.word .popup .close:hover {
	color: #ff0000;
}


/* ヘルプガイド */
.guide .container {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	max-width: 1020px;
	min-width: 375px;
	margin: 70px auto;
	text-align: left;
	counter-reset: number;
}

@media (max-width: 449px) {
	
	.guide .container {
		height:calc(100vh - 80px);
	}
	
	.guide h3 {	
		max-width:23rem;
	}
	
	.guide h2 {
		padding-left: 0.5rem;
		margin-left: 0.5rem;
		font-size: 1.5rem;
		line-height: 1.5rem;
		width:calc(100% - 10rem);
	}
	
	.guide .popup {
		margin: 20px auto;
		padding: 15px 10px;
		background: #fff;
		border-radius: 5px;
		width: calc(100vw - 20px);
		position: relative;
		transition: all 2s ease-in-out;
	}
	.guide .popup img {
		position: relative;
		top:10px;
		width:100%;
	}

}

@media  (min-width: 450px) and (max-width: 719px) {

	.guide .container {
		height:calc(100vh - 80px);
	}
	
	.guide h2 {
		padding-left: 0.5rem;
		margin-left: 0.5rem;
		font-size: 1.5rem;
		line-height: 1.5rem;
		width:calc(100% - 15rem);
	}
	
	.guide .popup {
		margin: 20px auto;
		padding: 15px 10px;
		background: #fff;
		border-radius: 5px;
		width: calc(100vw - 20px);
		position: relative;
		transition: all 2s ease-in-out;
	}
	.guide .popup img {
		position: relative;
		top:10px;
		width:100%;
	}
}

@media (min-width: 720px) {
	
	.guide .container {
		height:calc(100vh - 100px);
	}

	.guide h2 {
		padding-left: 0.5rem;
		margin-left: 0.5rem;
		font-size: 1.5rem;
		line-height: 1.5rem;
		width:calc(100% - 15rem);
	}
	
	.guide .popup {
		margin: 50px auto;
		padding: 15px 15px;
		background: #fff;
		border-radius: 5px;
		width: 700px;
		position: relative;
		transition: all 2s ease-in-out;
	}	
	
	.guide .popup img {
		position: relative;
		top:0px;
		left:15px;
		width:90%;
	}
	
}


.guide h1 {
	display: inline;
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	border-left: solid 0.75rem #144DA0;
	font-size: 1.5rem;
	line-height: 1.5rem;
	width:9rem;
}

.guide h2::before {
	margin-left: 10px;
	content: '\f054';
	font-family: 'FontAwesome';
	color:#144DA0;
	margin-right: 5px;
}

.guide h3 {
	padding-left: 0.5rem;
	margin: 1.5rem 15px 0 0;
	font-size: 1.2rem;
	line-height: 1.8rem;
	width: 100%;
}

.guide h3::before {
	position: relative;
	display: inline-block;
	top:0px;
	margin-right: 0.5rem;
	color: #fff;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: #144DA0;
	counter-increment: number;
	content: counter(number);
	font-size: 1.2rem;
	text-align: center;
	line-height:1.8rem;
}

.guide a {
	text-decoration: none;
	display: inline-block;
}

.guide h3 a::after {
	margin-left: 2px;
	content: '\f054';
	font-family: 'FontAwesome';
	color:#144DA0;
}

.guide a:hover{
	color: #ff0000;
	cursor: pointer;
	text-decoration: underline;
}

.guide .overlay {
	position: fixed;
	top: 70px;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
}
.guide .overlay:target {
	visibility: visible;
	opacity: 1;
}

.guide .popup h3 {
	display:relative;
	text-indent: -0.5rem;
	margin-bottom: 20px;
	color: #3e84b5;
	font-size:1.4rem;
	font-family: Tahoma, Arial, sans-serif;
}

.guide .popup h3::before {
	width: 0px;
	height: 0px;
	font-size: 0px;
}

.guide .popup p {
	font-size:1.0rem;
	line-height: 1.2rem;
	margin: 7px 0px;
}

.guide .popup .close {
	position: absolute;
	top: 19px;
	right: 10px;
	transition: all 100ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
.gude .popup .close:hover {
	color: #ff0000;
}



/* 一覧に戻るボタン */
@media (max-height: 849px) {
	#page_back {
		position: absolute;
		top: 79px;
		right: 5px;
	}
}
@media (min-height: 850px) {
	#page_back {
		position: absolute;
		bottom: 100px;
		left: 0;
		right: 0;
		margin: auto;
	}
}

#page_back {
	display: block;
	width: 6rem;
	height: 2rem;
	text-align: center;
	border-style: solid;
	border-color: #144DA0;
	border-radius: 8px;
}

#page_back a {
	display: block;
	width: 6rem;
	height: 1.4rem;
	padding-top: 0.6rem;
	color: #144DA0;
	text-decoration: none;
}
#page_back a:hover {
	background-color: #144DA0;
	color:#fff;
}
#page_back a:active {
	background-color: transparent;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4) inset;
	color:#144DA0;
}

/* 上移動ボタン */
@media (max-width: 767px) {
	#page_top {
		width: 50px;
		height: 50px;
		position: fixed;
		right: 10px;
		bottom: 20px;
		background: #63A6DB;
		opacity: 0.6;
		border-radius: 50%;
		z-index:100;
	}
	#page_top a {
		position: absolute;
		top: 32px;
		display: block;
		width: 50px;
		height: 50px;
		color:#fff;
		font-weight:bold;
		text-align: center;
		text-decoration: none;
	}
	#page_top a::before {
		font-weight: 900;
		content: '\f102';
		font-family: 'FontAwesome';
		font-size: 48px;
		color: #fff;
		position: absolute;
		top: -22px;
		left:10px;
	}
}

/* タグアイコン */
.tag1,.tag2,.tag3,.tag4,.tag5,.tag6,.tag7{
	display:table-cell;
	vertical-align: middle;
	padding:2px 4px;
	font-size:77%;
	font-weight:bold;
	color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	behavior: url(PIE.htc);
}
.tag1{
	background: #e4016f;
}
.tag2{
	background: #80bf01;
}
.tag3{
	background: #fa7e01;
}
.tag4{
	background: #e5ad01;
}
.tag5{
	background: #119de9;
}
.tag6{
	background: #8c4ecc;
}
.tag7{
	background: #d1193b;
}

/* フッター */
footer {
	color: #f0f8ff;
	background-color: #144DA0;
	min-width: 375px;
	width:100vw;
}
footer .container {
	padding: 10px 10px 10px 10px;
}

@media (max-width: 449px) {
	footer {
		position:relative;
		top:-35px;
	}
	.footC {
		text-align: center;
	}
}
@media (min-width: 450px) and (max-width: 767px) {
	footer {
		position:relative;
		top:-25px;
	}
	.footC {
		text-align: center;
	}
}
@media (min-width: 768px) {
	footer {
		position:fixed;
		bottom:0;
	}
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1020px;
		margin-left: auto;
		margin-right: auto;
	}
	.footA {flex: 1 1 65%;}
	.footC {
		flex: 1 1 35%;
		text-align: right;
		margin-right: 15px;
	}
}

/* フッターA： サイト情報 */
.footA {
	margin-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
}
.footA p {
	margin: 0 20px 0 0;
	font-size: 0.8rem;
}
/* フッターC： コピーライト */
.footC {
	font-size: 0.8rem;
	font-family: 'Montserrat', sans-serif;
}

/* コンテンツページ: パンくずリスト */
.bread  {
	max-width: 1020px;
	margin: 60px auto;
	position:absolute;
	top: 0;
}
.bread ol {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bread a {
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 0.875rem;
	text-decoration: none;
}
.bread a::before {
	margin-left: 10px;
	content: '\f054';
	font-family: 'FontAwesome';
	opacity: 0.3;
}
.bread a:hover {
	background-color: rgba(0,0,0,0.3);
}

/* table */
body {
	font-family: "Open Sans", sans-serif;
	line-height: 1rem;
}
table {
	border-collapse: collapse;
	margin: 10px auto;
	max-width: 1020px;
	width:93%;
	box-shadow: 0 0 15px -6px #00000073;
}
table tr {
	background-color: #fff;
}
table tbody tr:hover{
	background-color: rgb(100, 100, 100, 0.2);
}
table th, table td {
	border-bottom: 1px solid #eee;
}
table thead th {
	font-size: 1rem;
	line-height: 1.6rem;
}
table thead tr{
	background-color: #144DA0;
	color:#fff;
}
table tbody th {
	text-align: center;
	font-size: 0.9rem;
	font-weight: bold;
}
table tbody td {
	text-align: left;
	font-size: 0.9rem;
}