@charset "utf-8";

/* PukiWikiレスポンシブ設定 */

/* コンテンツ（メニューバー＋ページ本体）全体 */
div#contents {
	display: table;						/* 表示をテーブル（TABLE要素）同様にする */
	table-layout: fixed;				/* テーブル列幅固定 */
	border-spacing: 8px 0;				/* 隣接セル間隔：左右8ピクセル */
	width: 100%;						/* 幅100％ */
}

/* メニューバー*/
div#menubar {
	display: table-cell;				/* 表示をテーブルセル（TD要素）同様にする */
	vertical-align: top;				/* 上端揃え */
	width: 300px;						/* 幅300ピクセル（任意の数字） */
}

/* ページ本体 */
div#body {
	display: table-cell;				/* 表示をテーブルセル（TD要素）同様にする */
}

/* 低解像度（スマホ等）メディアクエリ */
@media (max-width: 800px)				/* 横幅800ピクセル未満のデバイス */
{
	div#contents {
		display: table;					/* 表示をテーブル（TABLE要素）同様にする */
		table-layout: fixed;			/* テーブル列幅固定 */
		border-spacing: 8px 0;			/* 隣接セル間隔：左右8ピクセル */
		width: 100%;					/* 幅100％ */
	}
	div#menubar {
		display: table-footer-group;	/* 表示をテーブルフッタ（TFOOT要素）同様にする */
		width: 100%;					/* 幅100％ */
	}
	div#body {
		display: table-row-group;		/* 表示をテーブルボディ（TBODY要素）同様にする */
		width: 100%;					/* 幅100％ */
	}
}

#page-top-button {
	position: fixed;					/* 固定表示 */
	right: 20px;						/* 右から20ピクセル（任意の位置に設定） */
	bottom: 60px;						/* 下から60ピクセル（任意の位置に設定）*/
	transition: opacity 1s;				/* 透過変化時間（1秒） */
	opacity: 0;							/* 透過（非表示） */
}

#page-top-button.fadeIn {
	position: fixed;					/* 固定表示 */
	display: block;						/* ブロック表示 */
	right: 20px;						/* 右から20ピクセル（任意の位置に設定） */
	bottom: 60px;						/* 下から60ピクセル（任意の位置に設定）*/
	outline-style: none;				/* アウトライン非表示 */
	box-shadow: none;					/* 影表示なし */
	cursor: pointer;					/* ポインタカーソル設定 */
	z-index: 9999;						/* Zオーダで最上位に設定 */
	transition: opacity 1s;				/* 透過変化時間（1秒） */
	opacity: 0.8;						/* 非透過80％ */
}

#page-top-button.fadeIn:hover {
	transition: opacity 1ms;			/* 透過変化時間（0.001秒） */
	opacity: 1;							/* 非透過100％ */
}

/* ページ本体の画像のレスポンシブ設定 */
div#body img {
    max-width: 100%;					/* 幅の最大値を100％指定 */
    height: auto;						/* 縦は幅により自動設定 */
}