/* レスポンシブ Webデザイン対応 */

/* 共通デザイン */
:root {
}

/*========== 全共通 ==========*/
* {
	margin: 0;
	padding: 0;

	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;

	line-height: 1.6em;
	letter-spacing: 0.1em;
}

a:link { color: rgba(0,0,160,1); text-decoration:none; }
a:visited { color: rgba(0,0,160,1); text-decoration:none; }
a:hover { color: rgba(0,0,0,1); text-decoration:underline; opacity: 0.6;}
a:active { color: rgba(0,0,0,1); text-decoration:none; }

/*========== 基本設定 ==========*/
html {
	width:100%;
}
body {
	width: 100%;
	background-color: rgba(255,255,255,1);
	text-align: center;
	-webkit-text-size-adjust: 100%;	/* iOS Safari ランドスケープ対応 */
}

/*========== ブロック ==========*/
/* ブロック共通 */
h1,h2,h3,p,pre,table,dl,fieldset {
	margin: 10px 10px 15px 5px;
}
p,pre,div.p {
	padding: 5px;
}

h1,h2,h3 {
	padding: 0.5em 0.5em 0.5em 1em;
	line-height: 1.2em;
}

h1 {
	position: relative;
	padding: 1em 10px 1em 10px;
	font-weight: normal;
	font-size: 1.3em;
	box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.6);
}
h1:before {
	position: absolute;
	margin-top: -1em;
	margin-left: -10px;
	border-bottom: solid 3.3em rgba(0,0,0,0);
	border-left: solid 7em rgba(0,0,0,0.2);
	content: "";
}
h2 {
	font-weight: normal;
	font-size: 1.2em;
	border-top: solid 5px rgba(0,0,0,0);
	border-left: solid 10px  rgba(0,0,0,1);
	box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.6);
}
h3 {
	font-weight: normal;
	font-size: 1.1em;
	border-top: solid 5px rgba(0,0,0,0);
	border-left: solid 20px  rgba(0,0,0,0.2);
	box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.3);
}

#update-time {
	position: relative;
	height: 1px;
}
#update-time time {
	z-index: 99;
	position: absolute;
	top: 5px;
	right: 20px;
	padding: 0px 1em 0px 1em;
	font-size: 10px;
	background-color: rgba(255,255,255,1);
	border-bottom: solid 1px rgba(0,0,0,0.6);
	border-radius: 1em;
}

div {
}
p {
}

pre {
	white-space: pre-line;
	font-weight: normal;
}
.pre {
	white-space: pre-line;
	font-weight: normal;
}

table {
	width: calc(100% - 15px);
	border-collapse: separate;
	border-spacing: 1px;
	background-color: rgba(0,0,0,0.2);
}
caption {
	padding: 5px;
}
th {
	padding: 5px;
	background-color: rgba(0,0,0,0.1);
	font-weight: bold;
	text-align: center;
}
td {
	padding: 5px;
	background-color: rgba(255,255,255,1);
	text-align: left;
}
ul {
	padding: 0.1em 0.1px 0.1em 2em; 
}
ol {
	padding: 0.1em 0.1px 0.1em 2em;
}
li {
}
dl {
	padding: 5px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 5px;
}
dt {
	padding: 5px;
	border-bottom: solid 1px rgba(0,0,0,0.2);
/*	border-radius: 5px;
*/
}
dd {
	padding: 5px 10px 0px 10px;
}
hr {
	height: 0px;
	border: 0;
	border-bottom: solid 1px rgba(0,0,0,0.6);
}
hr.site {
	height: 2px;
	border-top: solid 1px rgba(0,0,0,1);
	border-right: solid 1px rgba(255,255,255,1);
	border-bottom: solid 1px rgba(0,0,0,0.2);
	border-left: solid 1px rgba(255,255,255,1);
	background-color: rgba(255,255,255,1);
}
form {

}
input {
	padding: 5px 10px 5px 10px;
	font-size: 12px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 5px;
}
textarea {
	padding: 5px 10px 5px 10px;
	font-size: 12px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 5px;
}
fieldset {
	padding: 10px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 10px;
}
fieldset input {
	margin: 5px;
	padding: 5px;
}

/* 
サイト専用のCSSで定義。
header footer
*/

/*========== インライン ==========*/

img {
	vertical-align: bottom;
}

.w100 { width: 100%; }
.w50 { width: 50%; }
.fs100 { font-size: 1em;}
.fs90 { font-size: 0.9em;}
.fs80 { font-size: 0.8em;}

.frame1 {
	display: inline-block;
	position: relative;
}
.frame1:after {
	display: block;
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 
		1px 1px rgba(255, 255, 255, 1) inset,
		-1px -1px rgba(0,0,0,0.2) inset;
}

rt {
	font-size: 0.5em;
}

.atext {
	display: inline-block;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 0.2em 1em 0.1em 1em;
	border: solid 1px rgba(0,0,0,0.6);
	border-left: solid 3px rgba(0,0,0,0.6);
	border-radius: 0px 1em 1em 0px;
	background-color: rgba(255,255,255,0.2);	
}

/*========== ブロック ==========*/
/* コンテンツ領域 */
#body-contents {
	display: inline-block;
	text-align: left;
}
#contents {
	display: table;
	width: 100%;
}
#contents-main {
	display: table-cell;
	padding: 5px;
	background-color: rgba(255,255,255,1);
}
#contents-left {
	display: table-cell;
	width: 40px;
	padding: 0px;
	vertical-align: top;
	background-color: rgba(0,0,0,0.2);
}
#contents-right {
	display: table-cell;
	width: 140px;
	padding: 0px;
	vertical-align: top;
}

/*========== クラス ==========*/
/*** 汎用部品 ***/
.hide {
	display: none;
}
.col1 {
	margin: 10px 10px 15px 5px;
}
.col2 {
	display: flex;
	margin: 10px 10px 15px 5px;
}
.col2 div {
	width: 50%;
}
.col3 {
	display: flex;
	margin: 10px 10px 15px 5px;
}
.col3 div {
	flex: 1;
}

/* レスポンシブメニュー */
.menu {
	display: block;
	width: 100%;
}
.menu ul {
	overflow: hidden;
	margin: 0;
	padding: 0; 
	list-style: none;
}
.menu li {
	display: inline;
	margin: 0;
	padding: 0;
	float: left;
}

.box {
	padding: 5px 10px 5px 8px;
	border: solid 1px rgba(0,0,0,0.6);
	border-radius: 5px;
}

.extext {
	margin: 0;
	padding: 5px 10px 5px 8px;
	line-height: 1.3em;
}

.color-red {
	color: rgba(255,0,0,1);
}
.btn {
	cursor: pointer;
}
.indent10 {
	margin-left: 10px;
}
.indent20 {
	margin-left: 20px;
}

.memo {
	position: relative;
	margin: 10px 10px 15px 20px;
	padding: 5px 5px 5px 20px;
	border: solid 1px rgba(64,64,64,1);
	border-radius: 5px;
}
.tag {
	position: relative;
	margin: 10px 10px 15px 20px;
	padding: 15px 5px 15px 20px;
	border: solid 1px rgba(64,64,64,1);
}
.tag:before {
	position: absolute;
	margin: -16px 0px 0px -21px;
	content: "";
	border-top: solid 0px rgba(0,0,0,0);
	border-right: solid 0px rgba(0,0,0,0);
	border-bottom: solid 15px rgba(64,64,64,1);
	border-left: solid 15px  rgba(255,255,255,1);
}
.quote {
	position: relative;
	margin: 10px 10px 15px 20px;
	padding: 15px 5px 15px 20px;
	border: solid 1px rgba(64,64,64,1);
	border-left: solid 1px rgba(64,64,64,1);
	border-radius: 5px;
}
.quote:before {
	position: absolute;
	margin: -21px 0px 0px -35px;
	width: 30px;
	background-color: rgba(64,64,64,1);
	border-radius: 15px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: rgba(255,255,255,1);
	content: '"';
}
.caution {
	position: relative;
	margin: 10px 10px 15px 20px;
	padding: 15px 5px 15px 20px;
	border: solid 1px rgba(0,0,223,1);
	border-left: solid 1px rgba(0,0,223,1);
	border-radius: 5px;
}
.caution:before {
	position: absolute;
	margin: -21px 0px 0px -35px;
	width: 30px;
	background-color: rgba(0,0,223,1);
	border-radius: 15px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: rgba(255,255,0,1);
	content: "!";

/*	animation: ani-flash 4s ease 1s infinite normal;
*/
}
.warning {
	position: relative;
	margin: 10px 10px 15px 20px;
	padding: 15px 5px 15px 20px;
	border: solid 1px rgba(223,0,0,1);
	border-left: solid 1px rgba(223,0,0,1);
	border-radius: 5px;
}
.warning:before {
	position: absolute;
	margin: -21px 0px 0px -35px;
	width: 30px;
	background-color: rgba(223,0,0,1);
	border-radius: 15px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: rgba(255,255,0,1);
	content: "!!";

/*	animation: ani-flash 4s ease 1s infinite normal;
*/
}
.subh1 {
	padding: 0px 1em 0px 1em;
	color: rgba(255,255,255,1);
	border-radius: 1em;
	background-color: rgba(0,0,0,1);
}
.subh2 {
	padding: 0px 1em 0px 1em;
	border-radius: 1em;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,1) inset;
}
.subh3 {
	padding: 0px 2em 0px 2em;
	color: rgba(255,255,255,1);
	border-radius: 1em 1em 0px 0px;
	background-color: rgba(0,0,0,1);
}
.subh4 {
	padding: 0px 2em 0px 2em;
	border-radius: 1em 1em 0px 0px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,1) inset;
}
.subh5 {
	padding: 0px 1em 0px 1em;
	color: rgba(255,255,255,1);
	border-radius: 0px 1em 1em 0px ;
	background-color: rgba(0,0,0,1);
}
.subh6 {
	padding: 0px 1em 0px 1em;
	border-radius: 0px 1em 1em 0px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,1) inset;
}
.subh7 {
	padding: 0px 1em 0px 1em;
	border: solid 1px rgba(0,0,0,1);
	border-radius: 5px;
	color: rgba(255,255,255,1);
	background-color: rgba(0,0,0,1);
}
.subh8 {
	padding: 0px 1em 0px 1em;
	border: solid 1px rgba(0,0,0,1);
	border-radius: 5px;
	background-color: rgba(255,255,255,1);
}

.subdate {
	display: inline-block;
	text-align: center;
	width: 8em;
	padding: 0px 1em 0px 1em;
	border-radius: 1em;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.6) inset;
}


@keyframes ani-flash {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}


/* エラーメッセージ */
.error_msg {
	text-align: left;
	color: rgba(255,0,0,1);
	background-color: rgba(0,0,0,0.1);
}

/*========== レスポンシブデザイン ==========*/

/* スクリーン横769px以上 */
@media screen and (min-width: 769px) {
* {
	font-size: 14px;
}
#body-contents {
	width: 768px;
}
:root {
	--contents-w: 768px;
}
}

/* スクリーン横768pxまで */
@media screen and (max-width: 768px) {
* {
	font-size: 14px;
}
#body-contents {
	width: 100%;
}
:root {
	--contents-w: 100%;
}
}

/* スクリーン横320pxまで */
@media screen and (max-width: 320px) {
* {
	font-size: 13px;
}
#body-contents {
	width: 100%;
}
:root {
	--contents-w: 100%;
}
}