:root {
	--header-height: 60px;
  --navi-height: 50px;
	--base-icon: 50px;
  --menu-font: 1.5rem;
  --menu-width: 300px;
  --menu-padding: 10px;
	--base-color: steelblue;
	--base-test: mistyrose;
  --font-size_ss: 0.8rem;
  --font-size_s: 0.9rem;
  --font-size: 0.95rem;
  --font-size_m: 1.0rem;
  --font-size_l: 1.1rem;
  --font-size_ll: 1.2rem;
  --color-edit:#F5FFFA;
  --color-view:#FFFAF0;
  --color-2:#FFFFF0;
  --color-3:#F8F8FF;
  --color-clear:Transparent;
}
*{
  font-size: var(--font-size);
}
html,body {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
/* Menu */
header {
  display: flex;
  width: 100%;
  height: var(--header-height);
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
menu {
  display: flex;
  width: 100%;
  height: var(--header-height);
  padding: 0;
  margin: 0;  
  align-items: center;
  font-size: var(--font-size);
  background-color: var(--base-color);
  box-sizing: border-box;
}
menu .left-menu {
  position:absolute;
  left: 5px;
}
menu .center-menu {
  position: absolute;
  flex: 1;  
  left: 50%;
  transform: translateX(-50%);
  color: white;
}
menu .right-menu {
  position: absolute;
  right: 10px;
  font-size: var(--base-icon);
  height: var(--base-icon);
  line-height: var(--base-icon);
  border: none;
  border-radius: 10px;
  text-align: center;
  padding: 0 7px;
  color: white;
  cursor: pointer;
}
menu .right-menu:hover {
  color: #999;
  font-weight: bold;
}
/* HOME */
nav {
  display: flex;
  width: 100%;
  height: var(--navi-height);
  padding-left: 5px;
  align-items: center;
  column-gap: 5px;
  font-size: var(--font-size);
  background-color: #ccc;
  box-sizing: border-box;
}
nav .left-menu {
  position:absolute;
  left: 5px;
}
nav .center-menu {
  position: absolute;
  flex: 1;  
  left: 50%;
  transform: translateX(-50%);
}
nav .right-menu {
  position: absolute;
  right: 10px;
  font-size: var(--base-icon);
  height: var(--base-icon);
  line-height: var(--base-icon);
  text-align: center;
  padding: 0 7px;
  color: black;
  cursor: pointer;
  box-sizing: border-box;
}
nav .right-menu:hover {
  color: #999;
  font-weight: bold;
}

/* Main */
main {
  position: relative;
	width: 100%;
	height: calc(100% - var(--header-height));
  overflow: auto;
	box-sizing: border-box;
}

iframe {
  display: flex;
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  border: none;
  box-sizing: border-box;
}
/* ### メインフレーム ### */
.fx {
	display: flex;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.fxdr {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* ### フレーム位置 ### */
.fx-cn {justify-content: center;}
.fx-lf {justify-content: flex-start;}
.fx-rt {justify-content: flex-end}
.fx-top {align-items: flex-start;}
.fx-mid {align-items: center;}
.fx-btm {align-items: flex-end;}
.fxdr-cn {align-items: center;}
.fxdr-lf {align-items: flex-start;}
.fxdr-rt {align-items: flex-end;}
.fxdr-top {justify-content: flex-start;}
.fxdr-mid {justify-content: center;}
.fxdr-btm {justify-content: flex-end;}
.tx-cn {text-align: center;}
.tx-lf {text-align: left;}
.tx-rt {text-align: right;}


/* ### メインフレームにサイズ ###*/
/* ##### size ##### */
/* --- parcent --- */
.w100p {width: 100%;}
.w95p {width: 95%;}
.w90p {width: 90%;}
.w85p {width: 85%;}
.w80p {width: 80%;}
.w75p {width: 75%;}
.w70p {width: 70%;}
.w65p {width: 65%;}
.w60p {width: 60%;}
.w55p {width: 55%;}
.w50p {width: 50%;}
.w45p {width: 45%;}
.w40p {width: 40%;}
.w35p {width: 35%;}
.w30p {width: 30%;}
.w25p {width: 25%;}
.w20p {width: 20%;}
.w15p {width: 15%;}
.w10p {width: 10%;}
.w5p {width: 5%;}

/* --- pixcel --- */
.w5 {width: 5px;}
.w10 {width: 10px;}
.w15 {width: 15px;}
.w20 {width: 20px;}
.w25 {width: 25px;}
.w30 {width: 30px;}
.w35 {width: 35px;}
.w40 {width: 40px;}
.w45 {width: 45px;}
.w50 {width: 50px;}
.w55 {width: 55px;}
.w60 {width: 60px;}
.w65 {width: 65px;}
.w70 {width: 70px;}
.w75 {width: 75px;}
.w80 {width: 80px;}
.w85 {width: 85px;}
.w90 {width: 90px;}
.w95 {width: 95px;}
.w100 {width: 100px;}

.wflex {flex:1;}
.w-menu {width:var(--menu-width);}

/* --- height --- */
/* --- parcent --- */
.h100p {height: 100%;}
.h95p {height: 95%;}
.h90p {height: 90%;}
.h85p {height: 85%;}
.h80p {height: 80%;}
.h75p {height: 75%;}
.h70p {height: 70%;}
.h65p {height: 65%;}
.h60p {height: 60%;}
.h55p {height: 55%;}
.h50p {height: 50%;}
.hflex {flex:1 1 auto;min-height: 0;}
.flex1 {flex:1;min-height: 0;}
/* --- pixcel --- */

.h10 {height: 10px;}
.h15 {height: 15px;}
.h20 {height: 20px;}
.h25 {height: 25px;}
.h30 {height: 30px;}
.h35 {height: 35px;}
.h40 {height: 40px;}
.h45 {height: 45px;}
.h50 {height: 50px;}
.h55 {height: 55px;}
.h60 {height: 60px;}
.h65 {height: 65px;}
.h70 {height: 70px;}
.h75 {height: 75px;}
.h80 {height: 80px;}
.h85 {height: 85px;}
.h90 {height: 90px;}
.h95 {height: 95px;}
.h100 {height: 100px;}
.h105 {height: 105px;}
.h110 {height: 110px;}


.hrem {height: 1rem;}

.h20-min{min-height: 20px;}
/* GAP */
/* ##### gap ##### */
.gp5 {gap: 5px}
.gp10 {gap: 10px}
.gp15 {gap: 15px}
.gp20 {gap: 20px}
.gp25 {gap: 25px}
.gp30 {gap: 30px}
.gp35 {gap: 35px}
.gp40 {gap: 40px}
.gp45 {gap: 45px}
.gp50 {gap: 50px}

.gp5-row {row-gap: 5px;}
.gp10-row {row-gap: 10px;}
.gp15-row {row-gap: 15px;}
.gp20-row {row-gap: 20px;}

.gp5-col {column-gap: 5px;}
.gp10-col {column-gap: 10px;}
.gp15-col {column-gap: 15px;}
.gp20-col {column-gap: 20px;}
/* Pading */
.pd5 {padding: 5px;}
.pd10 {padding: 10px;}
.pd15 {padding: 15px;}
.pd20 {padding: 20px;}
.pd25 {padding: 25px;}
.pd30 {padding: 30px;}

.pd5-top {padding-top: 5px;}
.pd10-top {padding-top: 10px;}
.pd15-top {padding-top: 15px;}
.pd20-top {padding-top: 20px;}

.pd5-lf {padding-left: 5px;}
.pd10-lf {padding-left: 10px;}
.pd15-lf {padding-left: 15px;}
.pd20-lf {padding-left: 20px;}
.pd25-lf {padding-left: 25px;}
.pd30-lf {padding-left: 30px;}

.pd5-rt {padding-right: 5px;}
.pd10-rt {padding-right: 10px;}
.pd15-rt {padding-right: 15px;}
.pd20-rt {padding-right: 20px;}

.pd5-bt {padding-bottom: 5px;}

.pd5-row {padding: 5px 0 5px 0;}
.pd10-row {padding: 10px 0 10px 0;}

.pd5-col {padding: 0 5px 0 5px;}
.pd10-col {padding: 0 10px 0 10px;}
.pd15-col {padding: 0 15px 0 15px;}
.pd20-col {padding: 0 20px 0 20px;}
.pd25-col {padding: 0 25px 0 25px;}
.pd30-col {padding: 0 30px 0 30px;}

/* ### 修飾 ### */
/* ボーダー */
.border {
  border: 1px solid #999;
}
.border1111 {
  border-style: solid;
  border-width: 1px;
  border-color: #999;
}
.border1101 {
  border-style: solid solid none solid;
  border-width: 1px 1px 0 1px;
  border-color: #999;
}
.border1110 {
  border-style: solid solid solid none;
  border-width: 1px 1px 1px 0;
  border-color: #999;
}
.border1100 {
  border-style: solid solid none none;
  border-width: 1px 1px 0 0;
  border-color: #999;
}
.border1010 {
  border-style: solid none;
  border-width: 1px 0;
  border-color: #999;
}
.border1000 {
  border-style: solid none none none;
  border-width: 1px 0 0 0;
  border-color: #999;
}
.border1101 {
  border-style: solid solid none solid ;
  border-width: 1px 1px 0 1px;
  border-color: #999;
}
.border0100 {
  border-style: none solid none none;
  border-width: 0 1px 0 0;
  border-color: #999;
}
.border0010 {
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  border-color: #999;
}
.border0111 {
  border-style: none solid solid solid;
  border-width: 0 1px 1px 1px;
  border-color: #999;
}
.border0110 {
  border-style: none solid solid none;
  border-width: 0 1px 1px 0;
  border-color: #999;
}
/*  */
.radius5 {border-radius: 5px;}
.radius10 {border-radius: 10px;}
.radius15 {border-radius: 15px;}
.radius20 {border-radius: 20px;}


/* 背景色 */
.bk-cl_eee {
  background-color: #eee;
}
.bk-cl_misty {
  background-color: mistyrose;
}
.bk-cl_sky {
  background-color: lightskyblue;
}
.bk-cl_lime {
  background-color: limegreen;
}


/* ### FORM ### */
input {
  border: none;
  border-radius: 5px;
  padding: 4px;
  font-size: var(--font-size_s);
  margin: 0 5px;
  border: 1px solid #ccc;  
}
select {
  borddr: none;
  border-radius: 5px;
  padding: 3px 4px;
  font-size: var(--font-size_s);
  margin: 0 5px;
  border: 1px solid #ccc;
}
.base-btn {
  padding: 5px;
  border: 1px solid #999;
  border-radius: 5px;
  background-color: #eee;  
  cursor: pointer;
}
.base-btn:hover {
  background-color: #ccc;
}

/* ### label ### */
.label {
  padding: 5px;
}


/* ### font size ### */
.font-ss{font-size: var(--font-size_ss);}
.font-s{font-size: var(--font-size_s);}
.font-m{font-size: var(--font-size_m);}
.font-l{font-size: var(--font-size_l);}
.font-ll{font-size: var(--font-size_ll);}

/* --- fonts --- */
.font05 {font-size: calc(var(--base-font) * 0.5);}
.font06 {font-size: calc(var(--base-font) * 0.6);}
.font07 {font-size: calc(var(--base-font) * 0.7);}
.font08 {font-size: calc(var(--base-font) * 0.8);}
.font09 {font-size: calc(var(--base-font) * 0.9);}
.font10 {font-size: calc(var(--base-font) * 1.0);}
.font11 {font-size: calc(var(--base-font) * 1.1);}
.font12 {font-size: calc(var(--base-font) * 1.2);}
.font13 {font-size: calc(var(--base-font) * 1.3);}
.font14 {font-size: calc(var(--base-font) * 1.4);}
.font15 {font-size: calc(var(--base-font) * 1.5);}
.font20 {font-size: calc(var(--base-font) * 2.0);}
.font25 {font-size: calc(var(--base-font) * 2.5);}
.font30 {font-size: calc(var(--base-font) * 3.0);}