@charset "utf-8";

/* ベース */
body {
	background-color: #061112;
	margin: 0 auto 0 auto;
	color: #efefef;
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
	line-height: 1.8;
}

/* ラップ - 共通・375px */
#wrap {
	width: 375px;
	background-color: #16382c;
	margin: 0 auto;
}

/* ヘッダ - 375px */
#header {
	width: 375px;
	height: 108px;
}

/* ヘッダ画像 - 375px */
.headimg {
	width: 375px;
	height: 108px;
}

/* コンテナ - 共通 */
.container {
	display-webkit-flex; /* safari */
	display: flex;
}

/* スライド - 共通 */
.widget--sticky {
	position: sticky;
	top: 10px;
}

/* item1 - 共通・375px */
.item1 {
	width: 355px;
	background-color: #16382c;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	height: auto;
	margin: 0 10px 20px 10px;
}

/* item2 - 375px（非表示）*/
.item2 {
	display: none;
}

/* パンくずリスト */
.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li {
	display: inline; /*横に並ぶように*/
	list-style: none;

}

.breadcrumb li:after { /* >を表示*/
	content: '>';
	padding: 0 0.2em;
}

.breadcrumb li:last-child:after {
	content: '';
}

/* アニメ仕様 - 共通 */
.anim {
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* メインテーブル - 375 px */
.kisot {
	width: 315px;
	font-size: 16px;
	padding: 20px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 10px 0;
	color: #e2e2e2;
	background-color: #2e5447;
	border-radius: 10px;
}

/* 画像サイズ可変クラス - 共通 */
.resizeimg {
	width: 100%;
}

/* 点線の設定 - 共通・375px */
.tensen {
	border-width: 1px;
	border-style: dashed;
	border-color: gray;
	margin-bottom: 20px;
	width: 335px;
}

/* 目次テーブル - 375px */
.indext {
	padding: 20px 0 5px 0;
	width: 355px;
	font-weight: 500;
	line-height: 2.0;
	margin: 0 0 10px 0;
	color: #efefef;
	background-color: #4b3d3c;
	border-radius: 10px;
}

/* 目次の各項目設定 - 共通・375px */
.toc {
	line-height: 2.0;
	padding-left: 0;
	list-style: none;
	font-size: 16px;
}

/* 「目次」の文字の大きさ - 375px */
.toc_title {
	font-size: 18px;
	margin-left: 20px;
	font-weight: bold;
}

/* ページボタン右寄せ */
.pbright {
	text-align: right;
	margin-bottom: 200px;
}

.bgdq11 {
	padding: 12px;
	background-color: #303030;
	border-radius: 10px;
	font-size: 17px;
	line-height: 2.0;
	text-align: left;
	width: 276px;
}

.bgside {
	padding: 12px 0 12px 0;
	background-color: #3a2c2b;
	border-radius: 10px;
	font-size: 17px;
	line-height: 2.0;
	text-align: left;
	width: 300px;
}

/* アンカー - 375px*/
.anchor {
	display: block;
	padding-top: 100px;
	margin-top: -100px;
}

/* フッター - 375px*/
#footer {
	clear: both;
	width: 375px;
	height: 10px;
	background-color: #16382c;
}

/* ページトップ - 共通 */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
}

a:link {
	color: #9bcfb7;
}

a:visited {
	color: #9bcfb7;
}

a:active {
	color: #fff;
}

a:hover {
	color: #8abea6;
}

.side_a {
	padding-left: 30px;
	display:block;
}

.side_a:hover {
	background-color: #5c4e4d;
}

.index_a {
	padding-left: 40px;
	display:block;
}

.index_a:hover {
	background-color: #5c4e4d;
}

.mds0 {
	font-size: 24px;
	padding: .25em 0 .5em .75em;
	border-left: 8px solid #ffa500;
	border-bottom: 1px solid #ffa500;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 10px;
}

.mds {
	font-size: 18px;
	font-weight: 500;
	padding: .25em 0 .5em .75em;
	border-left: 8px solid #005bc0;
	border-bottom: 1px solid #5e5c5c;
	margin-bottom: 10px;
}

/* メインで使う見出し - 375px */
.mdsg {
	line-height: 1.2;
	color: #ffa500;
	font-size: 17px;
	font-weight: 500;
	padding: .25em 0 .5em .75em;
	border-left: 8px solid #ffa500;
	border-bottom: 1px solid #ffa500;
	margin-bottom: 10px;
}

.indexmdsg {
	line-height: 1.2;
	font-size: 18px;
	color: #ffa500;
	font-weight: 500;
	padding: .25em 0 .5em .75em;
	border-left: 8px solid #ffa500;
	border-bottom: 1px solid #ffa500;
	margin: 0 20px 20px 20px;
}

.mdg {
	color: #00ff00;
}


/* 画像ホバー透過 - 共通 */
.opac:hover img {
	opacity: .5;
}

.opac img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* 共通 - 文字カラー */
/* アイテムオレンジ */
.or {
	color: #ffa500;
	font-weight: bold;
}

/* ドキュメントブルー */
.ib {
	color: #32f5f4;
	font-weight: bold;
}

/* キーアイテムグリーン */
.gr {
	color: #68f414;
	font-weight: bold;
}

/* キャプション - 375 px*/
.capf {
	width: 295px;
	padding: 10px;
	color: #efefef;
	font-size: 12px;
	line-height: 1.6;
	background-color: #4b4b4b;
}

.ptop {
	margin-top: 0;
}

.p0 {
	margin-bottom: 0;
}

.p1 {
	margin-bottom: 10px;
}

.p2 {
	margin-bottom: 20px;
}

.p3 {
	margin-bottom: 30px;
}

.p4 {
	margin-bottom: 40px;
}

.p6 {
	margin-bottom: 60px;
}

.chu {
	vertical-align: super;
	font-size: 12px;
	transform: scale(0.8);
	display: inline-block;
	margin-left: -3px;
}

.bgad {
	margin: 10px 0 10px 0;
	text-align: center;
	width: 300px;
}

.bgadbox {
	width: 640px;
	border: none;
	border-collapse: collapse;
}

/* 広告枠 - 375 px */
.adbox {
	width: 355px;
	margin: 10px 0 10px 0;
	text-align: center;
}


/* アブソリュート */
.abs {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.rel640 {
	position: relative;
	width: 640px;
}



.rd {
	color: #eb556d;
	font-weight: bold;
}

/* 画面下部ボタン - 共通・375px */
.button {
	font-size: 16px;
	height: 17px;
	display: inline-block;
	text-align: center; /* 文字位置 */
	text-decoration: none;
	cursor: pointer; /* カーソル */
	padding: 15px; /* 余白 */
	background: #16382c; /* 背景色 */
	color: #9bcfb7; /* 文字色 */
	line-height: 1em; /* 1行の高さ */
	border: 1px solid #9bcfb7; /* 枠の指定 */
}

/* 画面下部ボタン左 - 共通・375px */
.button_l {
	border-radius: 26px 0 0 26px; /* 角丸 */
	margin-right: 5px;
}

/* 画面下部ボタン右 - 375px */
.button_r {
	border-radius: 0 26px 26px 0; /* 角丸 */
}

/* 画面下部ボタン左右ホバー - 共通 */
.button_l:hover, .button_r:hover {
	color: #140f15; /* 文字色 */
	background: #9bcfb7; /* 背景色 */
}

/*タイトル横のアイコン*/
.outline__title2::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f03a';
	margin-right: 10px;
}

/* ■■■■■■■■■■■■■■■■■■700px■■■■■■■■■■■■■■■■■■ */
@media screen and (min-width:700px) {

/* ラップ - 700px */
#wrap {
	width: 700px;
}

/* ヘッダ - 700px */
#header {
	width: 700px;
	height: 202px;
}

/* ヘッダ画像 - 700px */
.headimg {
	width: 700px;
	height: 202px;
}

/* 目次の各項目設定 - 700px */
.toc {
	font-size: 20px;
}

/* 目次テーブル - 700px */
.indext {
	width: 680px;
}

/* メインテーブル - 700 px */
.kisot {
	width: 640px;
}

/* メインで使う見出し - 700px */
.mdsg {
	font-size: 20px;
}

/* item1 - 700px */
.item1 {
	width: 680px;
	font-size: 16px;
}

/* キャプション - 700 px*/
.capf {
	width: 620px;
	font-size: 14px;
}

/* 「目次」の文字の大きさ - 700px */
.toc_title {
	font-size: 20px;
}

/* 目次テーブル - 700px */
.index_tbl {
	width: 680px;
}

/* 点線の設定 - 700px */
.tensen {
	width: 640px;
}

/* メインで使うテーブル - 700px */
.ztable {
	width: 640px;
	padding: 20px;
}

/* 広告バー - 700px */
.adbar640 {
	width: 640px;
	height: 20px;
}

/* 画面下部ボタン - 700px */
.button {
	font-size: 20px;
	height: 21px;
}

/* 画面下部ボタン右 - 700px */
.button_r {
	border-radius: 0 30px 30px 0; /* 角丸 */
}

/* 画面下部ボタン左 - 700px */
.button_l {
	border-radius: 30px 0 0 30px; /* 角丸 */
}

/* 広告ボックス - 700px */
.adbox {
	width: auto;
	height: auto;
}

/* フッター - 700px */
#footer {
	width: 700px;
}

}

/* ■■■■■■■■■■■■■■■■■■1010px■■■■■■■■■■■■■■■■■■ */
@media screen and (min-width:1010px) {

/* ラップ - 1010px */
#wrap {
	width: 1010px;
}

/* スマホメニュー非表示 - 1010px */
header {
	display: none;
}

/* ヘッダ - 1010px */
#header {
	width: 1010px;
	height: 300px;
}

/* ヘッダ画像 - 1010px */
.headimg {
	width: 1010px;
	height: 300px;
}

/* item2 - 1010px */
.item2 {
	display: block;
	width: 300px;
	background-color: #16382c;
	margin: 0 10px 10px 0;
	text-align: center;
}

/* アンカー - 1010 px*/
.anchor {
	display: block;
	padding-top: 0;
	margin-top: 0;
}

/* フッター - 1010px */
#footer {
	width: 1010px;
}

}