@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 : white;
	line-height: 140%;
	letter-spacing: 0.05em;
	font-size: 100%;
	background-color: black;
	font-family:"Meiryo UI", "メイリオ", "MS PGothic","ヒラギノ角ゴシック",sans-serif;
}

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

h2{
	font-size: 100%;
	color: black;
}

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

a:visited{
	color:gray;
	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, black);
	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;
	-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: #fff; /*ハンバーガーアイコンの棒の色*/
	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: #fff;
}

/*アイコンがクリックされたら真ん中の線を透明にする*/
#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: #000;

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

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

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

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

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

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

/*アイコンがクリックされたらメニューコンテンツを表示*/
#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;
}

/* ◆ フレックスボックス
---------------------------------------------------------------------------*/
/*フレックスボックスの設定*/
.flx_box{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}

.flx{
	display: flex;
	align-items: center;
	flex-basis: auto;
	height: 168px;
	color: black;
	background-color: #fff;
}

.flx_glow{flex-grow: 1;}

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

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

/*角を丸める*/
.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;
}

/*アリーヤの設定*/
.aaliyah{
	border: 16px ridge #fff;
	text-align: center;
	width: 280px;
}

/*フッターの設定*/
.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;
}

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

/* ◆ フォント関連
---------------------------------------------------------------------------*/
.fnt80{font-size: 80%;}

/* ◆ カラー関連
---------------------------------------------------------------------------*/
/*テーブル背景用白色*/
.bgfff{background-color: #fff;}

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

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

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

}

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

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

.w60{width: 80%;}

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

}

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

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

.w80{width: auto;}

.flx{
	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;}

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

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

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

}