@charset "utf-8";
*,::before,::after{box-sizing: border-box;}
::before,::after{text-decoration: inherit;vertical-align: inherit;}
html{cursor: default;line-height: 1.5;-moz-tab-size: 4;tab-size: 4;-webkit-tap-highlight-color: transparent ;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;}
body{margin: 0;}
h1{font-size: 2em;margin: 0.67em 0;}
dl dl,dl ol,dl ul,ol dl,ul dl{margin: 0;}
ol ol,ol ul,ul ol,ul ul{margin: 0;}
hr{height: 0;overflow: visible;}
main{display: block;}
nav ol,nav ul{list-style: none;padding: 0;}
pre{font-family: monospace, monospace;font-size: 1em;}
a{background-color: transparent;}
abbr[title]{text-decoration: underline;text-decoration: underline dotted;}
b,strong{font-weight: bolder;}
code,kbd,samp{font-family: monospace, monospace;font-size: 1em;}
small{font-size: 80%;}
audio,canvas,iframe,img,svg,video{vertical-align: middle;}
audio,video{display: inline-block;}
audio:not([controls]){display: none;height: 0;}
iframe{border-style: none;}
img{border-style: none;}
svg:not([fill]){fill: currentColor;}
svg:not(:root){overflow: hidden;}
table{border-collapse: collapse;}
button,input,select{margin: 0;}
button{overflow: visible;text-transform: none;}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance: button;}
fieldset{border: 1px solid #a0a0a0;padding: 0.35em 0.75em 0.625em;}
input{overflow: visible;}
legend{color: inherit;display: table;max-width: 100%;white-space: normal;}
progress{display: inline-block;vertical-align: baseline;}
select{text-transform: none;}
textarea{margin: 0;overflow: auto;resize: vertical;}
[type="checkbox"],[type="radio"]{padding: 0;}
[type="search"]{-webkit-appearance: textfield;outline-offset: -2px;}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height: auto;}
::-webkit-input-placeholder{color: inherit;opacity: 0.54;}
::-webkit-search-decoration{-webkit-appearance: none;}
::-webkit-file-upload-button{-webkit-appearance: button;font: inherit;}
::-moz-focus-inner{border-style: none;padding: 0;}
:-moz-focusring{outline: 1px dotted ButtonText;}
:-moz-ui-invalid{box-shadow: none;}
details{display: block;}
dialog{background-color: white;border: solid;color: black;display: block;height: -moz-fit-content;height: -webkit-fit-content;height: fit-content;left: 0;margin: auto;padding: 1em;position: absolute;right: 0;width: -moz-fit-content;width: -webkit-fit-content;width: fit-content;}
dialog:not([open]){display: none;}
summary{display: list-item;}
canvas{display: inline-block;}
template{display: none;}
a,area,button,input,label,select,summary,textarea,[tabindex]{-ms-touch-action: manipulation;touch-action: manipulation;}
[hidden]{display: none;}
[aria-busy="true"]{cursor: progress;}
[aria-controls]{cursor: pointer;}
[aria-disabled="true"],
[disabled]{cursor: not-allowed;}
[aria-hidden="false"][hidden]{display: initial;}
[aria-hidden="false"][hidden]:not(:focus){clip: rect(0, 0, 0, 0);position: absolute;}
/* ◆ ここまでサニタイズ.css
---------------------------------------------------------------------------*/
/* ◆ 基本css
---------------------------------------------------------------------------*/
/* ◆ タグ関連
---------------------------------------------------------------------------*/
body{
	color : black;
	line-height: 140%;
	letter-spacing: 0.05em;
	font-size: 100%;
	font-family: "Meiryo UI", "メイリオ", "MS PGothic","ヒラギノ角ゴシック",sans-serif;
}

h1{
	font-weight: bold;
	font-size: 140%;
	color: mediumseagreen;
}

h2,h3,h4{
	font-size: 100%;
}

table{
	text-align: justify;
	line-height: 140%;
	border-collapse: collapse;
	border: 1px solid black;
}

td{border: 1px solid black;}

a,a:link{font-weight: bold;}

a:visited{
	color: purple;
	font-weight: bold;
}

a:hover{
	text-decoration: none;
	color: red;
	font-weight: bold;
}

/* ◆ クラス関連
---------------------------------------------------------------------------*/
/*ヘッダーの設定*/
.header{
	/*ヘッダーをスクロールしても表示*/
	position: sticky;
	width: 100%;
	top: 0;
	/*背景色をグラデーション*/
	background:  linear-gradient(20deg, white, #cff);
	height: 72px;
	border-style: outset;
	border-color: lavender;
}

/*サイト名の設定*/
.sitename{
	color: #fff;
	font-size: 140%;
	font-style: oblique;
	width: 96%;
	text-shadow: 1px 1px 0px #fff, 4px 4px 2px gray;
}

/*外枠の設定*/
.container{
	margin-top: 16px;
	margin-bottom: 16px;
	padding-left: 2em;
	padding-right: 2em;
	background-color: #fff;
	-webkit-box-shadow: 0px 1px 16px #666;
	-moz-box-shadow: 0px 1px 16px #666;
	box-shadow: 0px 1px 16px #666;
	border: 1px solid #808080;
}

/* ◆ ハンバーガーメニュー
---------------------------------------------------------------------------*/
/*チェックボックスを非表示にする*/
.drawer_hidden{display: none;}

/*ハンバーガーアイコンの設置スペース*/
.drawer_open{
	/*アイコンをスクロールしても表示*/
	position: absolute;
	height: 60px;
	width: 40px;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	z-index: 9999;/*重なり順を一番上にする*/
	right: 8px;
}

/*ハンバーガーメニューのアイコン*/
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after{
	/*アイコンをスクロールしても表示*/
	position: absolute;
	content: '';
	height: 3px;
	width: 40px;
	background: #f60; /*ハンバーガーアイコンの棒の色*/
	transition: 0.3s;
}

/*三本線の一番上の棒の位置調整*/
.drawer_open span:before{bottom: 8px;}

/*三本線の一番下の棒の位置調整*/
.drawer_open span:after{
	top: 8px;
	content: 'menu';
	text-align: center;
	font-size: x-small;
	/*menuの文字色*/
	color: #f60;
	font-weight: bold;
}

/*アイコンがクリックされたら真ん中の線を透明にする*/
#drawer_input:checked ~ .drawer_open span{
	background: rgba(255, 255, 255, 0);
}

/*アイコンがクリックされたらアイコンが×印になように上下の線を回転*/
#drawer_input:checked ~ .drawer_open span::before{
	bottom: 0;
	transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after{
	top: 0;
	transform: rotate(-45deg);
	/*menuの文字を消す*/
	content: '';
}

/*メニューコンテンツのデザイン*/
.menu_content{
	position: fixed;
	height: 100%;
	/*メニューコンテンツの背景色*/
	background: #9f6;

	padding: 5em 3% 2em;
	z-index: 9998;

	transition: .3s;
	/*メニュー内容が多い場合に縦スクロールする*/
	overflow-y: scroll;

	top: 0;
	left: 100%; /*メニューを画面の外に飛ばす*/
	width: 70%;
}

/*メニュー黒ポチを消す*/
.menu_item{
	border-bottom: solid 1px #f60;
	list-style: none;
}

/*メニュー項目のリンク*/
.menu_link{
	display: block;
	width: 100%;
	box-sizing: border-box;
	color: #f60;
	text-decoration: none;
}

.menu a:hover{
	color: red;
	font-weight: bold;
	text-decoration: none;
	border-bottom: solid red;
}

/*アイコンがクリックされたらメニューコンテンツを表示*/
#drawer_input:checked ~ .menu_content{
	left: 30%;/* メニューを画面に入れる */
}

/*メニューコンテンツのカバー*/
#drawer_input:checked ~ .menu_cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}

/* ◆ details
---------------------------------------------------------------------------*/
/*detailsの入れ子にインデント*/
details details{margin-left: 1em;}

summary{
	padding: 8px;
	border-top: 1px solid gray;
	transition: 0.2s;
}

/*detailsの閉じる速度*/
summary::after{transition: all 0.3s;}

/*detailsの開く速度*/
details[open]{animation: fadeIn 2.3s ease;}

@keyframes fadeIn{
	0%{
		opacity: 0;
		transform: translateY(-10px);
	}
	100%{
		opacity: 1;
	}
}

/* ◆ フレックスボックス
---------------------------------------------------------------------------*/
/* ◆ アクセスカウンター
---------------------------------------------------------------------------*/
/*アクセスカウンターの設定*/
.cnt_box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px;
}

/*gapの値を全体から引いて2分割*/
.cnt_item{width: calc((100% - 4px) / 2);}

/* ◆ SPECIAL BOXの横並び画像
---------------------------------------------------------------------------*/
.sp_box{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
}

/* ◆ キスドラ
---------------------------------------------------------------------------*/
/*キスドラの設定*/
.kod_box{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}

.kod{
	display: flex;
	align-items: center;
	flex-basis: auto;
	height: 168px;
}

.kod_glow{flex-grow: 1;}

/* ◆ そっくりさん
---------------------------------------------------------------------------*/
/*縦並びの設定*/
.near_c_box{
	display: flex;
	flex-direction: column;
}

.near_no{
	border-top: 4px double gray;
	border-bottom: 4px double gray;
}

/*横並びの設定*/
.near_box{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.near_l{border-right: 1px solid gray;}

.near_cmt{border-top: 4px double gray;}

/* ◆ パーツ各種
---------------------------------------------------------------------------*/
/*文字のセンタリング*/
.center{text-align: center;}

/*右端に配置*/
.right{text-align: right;}

/*文字を太字にする*/
.bold{font-weight: bold;}

/*文字のインデント*/
.indent{margin: 1em;}

/*コメント欄に下線*/
.cmt{border-bottom: 2px dotted gray;}

/*コメント欄の最後は下線なし*/
.cmt:last-of-type{border-bottom: none;}

/*リストの画像*/
.ul_green{list-style-image: url(../image/ball0210.gif)}

/*角を丸める*/
.radius{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

/*パンくずリスト*/
.breadcrumb{
	margin-top: .5rem;
	margin-bottom: .5rem;
}

/*外枠テーブルの設定*/
.outer{
	margin-top: 1em;
	margin-bottom: 1em;
}

/*リンクのバナーの画像位置*/
.link img{
	padding-right: 4px;
	padding-bottom: 4px;
}

/*フッターの設定*/
.copyright{
	margin-top: 8px;
	margin-bottom: 16px;
}

/* ◆ 配置関連
---------------------------------------------------------------------------*/
.p4{padding: 4px;}

.pl4{padding-left: 4px;}

.pt4{padding-top: 4px;}

.m_center{
	margin-left: auto;
	margin-right: auto;
}

.m0{margin: 0;}

.ml0{margin-left: 0px;}

/* ◆ ボーダー関連
---------------------------------------------------------------------------*/
.brd1sg{border: 1px solid gray;}

/* ◆ フォント関連
---------------------------------------------------------------------------*/
/*画像用の小文字*/
.fontsmall{font-size: x-small;}

.fnt80{font-size: 80%;}

/* ◆ カラー関連
---------------------------------------------------------------------------*/
/*カラーフォント(赤色)*/
.crred{color: red;}

/*カラーフォント(水色)*/
.cr36f{color: #36f;}

/*カラーフォント(オレンジ)*/
.crf60{color: #f60;}

/*カラーフォント(緑色)*/
.crgreen{color: #008000;}

/*テーブル背景用水色*/
.bgcff{background-color: #cff;}

/*テーブル背景用緑色*/
.bg9f9{background-color: #9f9;}

/*テーブル背景用肌色*/
.bgffc{background-color: #ffc;}

/* ◆ 幅関連
---------------------------------------------------------------------------*/
/*テーブル幅調整用*/
.w50{width: 50%;}

/*テーブル幅調整用*/
.w60{width: 60%;}

/*テーブル幅調整用*/
.w80{width: 80%;}

/*テーブル幅調整用*/
.w112{width: 112px;}

/* ◆ ここからワイドモニタ用（801px以上）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:801px){

/*外枠の設定*/
.container{width: 768px;}

}

/* ◆ ここからタブレット用（601px～800px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:601px) and (max-width:800px){

/*外枠の設定*/
.container{margin: 15px;}

.w60{width: 80%;}

.kod{
	flex-basis: 100%;
	justify-content: center;
	height: auto;
}

}

/* ◆ ここからタブレット用（481px～600px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:481px) and (max-width:600px){

/*外枠の設定*/
.container{margin: 15px;}

table,.w60,.w80{width: auto;}

.cnt_item{width: 100%;}

.kod{
	flex-basis: 100%;
	justify-content: center;
	height: auto;
}

}

/* ◆ ここからスマートフォン用（480px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width:480px){

/*外枠の設定*/
.container{
	margin: 10px;
	width: auto;
}

.sitename,h1{font-size: 100%;}

.copyright{font-size: x-small;}

.indent{margin: 0;}

.w60,.w80,.cnt_item,.menu_content{width: 100%;}

/* メニューを画面に入れる */
#drawer_input:checked ~ .menu_content{left: 0%;}

.kod{
	flex-basis: 100%;
	height: auto;
}

}