BODY {
	min-height: 100vh;
	overflow-x: hidden;
	font-family: sans-serif;
/*	font-size: max(1em, 2.2vw);*/
	line-height: max(1.7em, 2.5vh);
}
RUBY {
	display: ruby;
}
RT {
	margin-top: 0.2em;
}
A:link {
	text-decoration: none;
}
A:visited {
	text-decoration: none;
}
A:hover {
	text-decoration: none;
}
A.icon_EL {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url('UI/icon_EL.png');
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	text-decoration: none;
}
A.icon_EL::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #0FBE7C;
	mix-blend-mode: multiply;
	opacity: 1;
}
A.icon_EL:hover::before {
	opacity: 1;
	background-color: #FEB645;
}
A, .NT, #CONTACTDOOR, .pagNum, .hBTN, .sBTN {
	cursor: pointer;
}
DETAILS > DIV {
	display: none;
}
DETAILS[open] > DIV {
	display: block;
}




/* index.php */
#HEADER {
	position: sticky;
	top: 0;
	left: calc(100vw - 100%);
	background-color: #FFFFFF;
	padding-bottom: 1vh;
	z-index: 100;
}
#MAIN {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -6vh);
	padding-top: min(10vh, 7vh);
	padding-bottom: 10vh;
	background-color: #FFFFFF;
}
#FOOTER {
	position: fixed;
	bottom: 0;
	left: calc(100vw - 100%);
	z-index: 100;
}
#CONTAINER_HEADER {
	display: grid;
	grid-template-columns: 14vw auto 12vw;
	position: relative;
}
#LOGO { grid-row: 1 / 2; grid-column: 1 / 2 }
#TITLE { grid-row: 1 / 2; grid-column: 2 / 3 }
#LOG_IO    { grid-row: 1 / 2; grid-column: 3 / 4 }
#DATADIV {
	position: fixed;
	padding: 1em;
	right: 0;
	top: 0;
	width: 30vw;
	height: 100%;
	overflow-y: auto;
	background-color: #ffffff;
	border-left: 1px solid #ccc;
	z-index: 200;
}



/** DIVの表示非表示 **/
.disp, .memList { display: none }
.disp.on, .memList.on { display: block }

.MPnameplate {
	border: 2px double #000;
	border-radius: 10px;
	padding: 10px;
	background-color: #FFFFFF;
}


/* 幅 */
.w5 { width: 5vw } .w10 { width: 10vw } .w15 { width: 15vw } .w20 { width: 20vw } .w30 { width: 30vw } .w40 { width: 40vw } .w485 { width: 48.5vw } .w50 { width: 50vw } .w60 { width: 60vw } .w65 { width: 65vw } .w70 { width: 70vw } .w80 { width: 80vw } .w90 { width: 90vw } .w100 { width: 100vw }
.w100p { width: 100%; }
.w100p_imp {
	width:100%!important;
}
.full-width {
	width: 100%;
	box-sizing: border-box;
}
/** 高さ **/
.h2 { height: 2vh } .h3 { height: 3vh } .h5 { height: 5vh } .h10 { height: 10vh } .h20 { height: 20vh } .h30 { height: 30vh } .h40 { height: 40vh } .h50 { height: 50vh } .h60 { height: 60vh } .h65 { height: 65vh } .h70 { height: 70vh } .h80 { height: 80vh } .h90 { height: 90vh } .h100 { height: 100vh }
/** DIV中央 **/
.outer { position: relative } .inner { position: absolute; left: 0; right: 0 }
.m0a { margin: 0 auto }
.mwa { margin-left: auto; margin-right: auto }
.tma {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tac { text-align: center; }

/** DIV並列 **/
.parallel-mother {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.parallel-child {
	flex-grow: 1;
	flex-direction: row;
}
.fixed-width-child {
	flex: 0 0 20vw;
}
.parallel-child A {
	display: block;
	text-decoration: none;
}
.parallel-child H3 {
	text-align: center;
}
.opus-mother, .tfa-mother {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	overflow: hidden;
}


.opus-child, .tfa-child {
	flex: 1;
	min-width: 0;
	max-width: 100%;
}

.delete-button, .edit-button {
	flex: 1;
	min-width: 80px;
	box-sizing: border-box;
	margin: 5px;
}
.full-width-button {
	width: 100%;
	display: flex;
}
.parallel-child {
	margin-bottom: 10px; /* ボタン間の縦の間隔を追加（必要に応じて調整） */
}
.width-95flex {
	width: 95%;
	display: flex;
}

/** マージン **/
.ma05e { margin: 0.5em; }
.mh05e { margin-top: 0.5em; margin-bottom: 0.5em; }
.mw05e { margin-right: 0.5em; margin-left: 0.5em; }
.mt05e { margin-top: 0.5em; }
.mr05e { margin-right: 0.5em; }
.mb05e { margin-bottom: 0.5em; }
.ml05e { margin-left: 0.5em; }
.ma10e { margin: 1em; }
.mh10e { margin-top: 1em; margin-bottom: 1em; }
.mw10e { margin-right: 1em; margin-left: 1em; }
.mt10e { margin-top: 1em; }
.mr10e { margin-right: 1em; }
.mb10e { margin-bottom: 1em; }
.ml10e { margin-left: 1em; }
.mh20e { margin-top: 2em; margin-bottom: 2em; }
.mw20e { margin-left: 2em; margin-right: 2em; }
.mt20e { margin-top: 2em; }
.mb20e { margin-bottom: 2em; }
.mh30e { margin-top: 3em; margin-bottom: 3em; }
.mt30e { margin-top: 3em; }
.mb30e { margin-bottom: 3em; }

/** パディング **/
.pa05e { padding: 0.5em; }
.ph05e { padding-top: 0.5em; padding-bottom: 0.5em; }
.pw05e { padding-right: 0.5em; padding-left: 0.5em; }
.pt05e { padding-top: 0.5em; }
.pr05e { padding-right: 0.5em; }
.pb05e { padding-bottom: 0.5em; }
.pl05e { padding-left: 0.5em; }
.pa10e { padding: 1em; }
.ph10e { padding-top: 1em; padding-bottom: 1em; }
.pw10e { padding-right: 1em; padding-left: 1em; }
.pt10e { padding-top: 1em; }
.pr10e { padding-right: 1em; }
.pb10e { padding-bottom: 1em; }
.pl10e { padding-left: 1em; }
.ph20e { padding-top: 2em; padding-bottom: 2em; }
.pw20e { padding-right: 2em; padding-left: 2em; }
.pl20e { padding-left: 2em; }
.pr20e { padding-right: 2em; }
.pb20e { padding-bottom: 2em; }

/** 背景色 **/
.bgWhite { background-color: #FFFFFF; } .bgRed { background-color: #FF6962; } .bgGray { background-color: #EAEAEA; } .bgDarkgray { background-color: #333333;} .bgCream { background: rgba(255,255,187,0.3); }
.bgIvory { background-color: ivory; }
/** 文字色 **/
.cEnji { color: #B3424A; }	.cRed { color: #FF6962; } .cGreen { color: #0FBE7C; } .cGray { color: #EAEAEA; } .cOrange { color: orange; }
.cCream { background: rgba(255,255,187,0.3); }
.fwb { font-weight: bold; }
/** 罫線 **/
.line3 { border-top: 3px solid #0FBE7C; border-right: none; border-bottom: none; border-left: none; } .line5 { border-top: 5px solid #0FBE7C; border-right: none; border-bottom: none; border-left: none; }

/** ボタン **/
.ABTN, .MBTN {
	font-size: min(1em, 1.5vw);
	font-weight: bolder;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #0FBE7C;
	border: 0;
	border-radius: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
}
.IBTN {
	font-size: min(1em, 1.5vw);
	font-weight: bolder;
	position: relative;
	display: inline-block;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #0FBE7C;
	border: 0;
	border-radius: 0.5em;
}
.IBTN {
	width: max(10vw,6em);
}
.MBTN {
	width: 100%;
}
.ABTN.off {
	background-color: #666666;
	animation: blink 3s infinite;
}
.IBTN.off {
	background-color: #666666;
}
.disabled {
	opacity: 0.5;
}
.deloff {
	display: none;
}
.icons {
	height: 1em;
	width: 1em;
}
.icon_EL {
	fill: #0FBE7C;
}

.icon_EL:hover {
	fill: #FEB645;
}


/** 柱 **/
.pillar {
	background: linear-gradient(to bottom right, #333333, #FFFFFF);
	border-radius: 0.2vw;
	color: #FFFFFF;
	font-weight: bold;
	padding: 5px;
	padding-left: 15px;
}
.pillar2 {
	background: linear-gradient(to right, #EAEAEA, #FFFFFF);
	border-radius: 0.2vw;
	color: #000000;
	font-size: 1vw;
	font-weight: bold;
	padding: 0.2vw;
	padding-left: 0.5vw;
	margin-bottom: 1em;
}
.pillar3 {
	background: linear-gradient(to right, #000000, #EDEDED);
	color: #FFFFFF;
	font-weight: bold;
	padding-left: 0.5vw;
	text-shadow: 1px 1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000;
}


/* フォント */
.fs05em {
	font-size:0.5em;
}
.fs08em {
	font-size:0.8em;
}
.fs12em {
	font-size:1.2em;
}
.fs15em {
	font-size:1.5em;
}
.fs20em {
	font-size:2em;
}
.w12vw {
	width:12vw;
}
.h20vh {
	height:20vh;
}
.funcexp {
    margin: 1em;
    text-decoration: none;
	color: #B3424A;
	font-weight: bold;
	border: 1px solid #333;
	border-radius: 0.5em;
	padding: 0.5em;
}
.CheckboxHover, .ZeroCount {
	padding-right: 13px;
	padding-left: 12px;
	padding-bottom: -3px;
	padding-top: 1px;
	white-space: nowrap;
}
.CheckboxHover:hover {
	color: #333;
	background: #FBB;
	border: 1px solid #FBB;
	border-radius: 0.5em;
}