*{
  margin: 0px;
  padding: 0px;
  font-family: Roboto,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3';
  font-size: calc(12px + 0.25vw);
  color: #333;
  outline: none;
  caret-color: transparent;
}
a{
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

li {
  list-style: none;
}
h1,h2,h3,,h5,h6{
  line-height: 1em;
}
h1{
  font-size: calc(32px + 0.25vw);
}
h2{
  font-size: calc(26px + 0.25vw);
}
h3{
  font-size: calc(21px + 0.25vw);
}
h4{
  font-size: calc(18px + 0.25vw);
}
h5{
  font-size: calc(15px + 0.25vw);
  font-weight: normal;
}
h6{
  font-size: calc(11px + 0.25vw);
  color: #666;
}
p{
  line-height: 1.4em;
}
input{
  background: transparent;
  border: 0px;
  caret-color: #ddf;
}
input[type="button"]{
  width: 100%;
  height: 100%;
  color: #333;
  text-align: center;
  cursor: pointer;
}
input[type="text"]{
  background: #cacadc;
  color: #32323c;
}
input[type="text"]:focus{
  background: #32323c;
  color: #fff;
}
table{
  width: 100%;
  height: 210px;
  border-collapse: collapse;
  text-align: center;
}
caption{
  padding-top: 20px;
  height: 30px;
  line-height: 1.4em;
}
.capspan1{
  font-size: 10pt;
  font-weight: normal;
}
.capspan2{
  font-size: 18pt;
}
thead{
  border-bottom: 1px solid #ddd;
}
table th{
  height: 29px;
  border: 0;
}
table td{
  height: 30px;
  border: 0;
}
.dayC1{
  background: url('img/dayc1.png') no-repeat;
  background-position: center;
}
.dayC2{
  background: url('img/dayc2.png') no-repeat;
  background-position: center;
  font-weight: bold;
  color: #a23;
}
.dayC3{
  background: url('img/dayc3.png') no-repeat;
  background-position: center;
  font-weight: bold;
  color: #a23;
}
.dayC4{
  background: url('img/dayc4.png') no-repeat;
  background-position: center;
}
.dayC5{
  background: url('img/dayc5.png') no-repeat;
  background-position: center;
}
.dayC6{
  background: url('img/dayc6.png') no-repeat;
  background-position: center;
  font-weight: bold;
  color: #a23;
}
.dayC7{
  background: url('img/dayc7.png') no-repeat;
  background-position: center;
  font-weight: bold;
  color: #a23;
}
audio{
  width: 100%;
  background: #f4f4f4;
  border-bottom: 1px solid #ddd;
  border-radius: 6px;
}
/*--------[z-index ____ CBOX-4000 , CBOXPBOX-4500 , CBOXPBOX:after-4501 , MAR-5000 , header-7000 , footer-8000 , chatview-9000 , PG-10000]--------*/
/*-----------------------------------------------*/
/*-------------------▼全体の設定------------------*/
/*-----------------------------------------------*/
body{
  background: #fafafa;
}
/*====================*/
/*====================*/
/*====================*/
/*=======[#WALLPAPER]=*/
/*====================*/
/*====================*/
/*====================*/
#WALLPAPER{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#eee,#fff);
  overflow: hidden;
  z-index: 0;
}
/*====================*/



/*====================*/
/*====================*/
/*====================*/
/*=======[#ALL]=======*/
/*====================*/
/*====================*/
/*====================*/
#ALL{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1000;
  /*animation: anime1 3s ease 3s infinite;*/
}
@keyframes anime1{
  0%{
    background: url('img/wall1.png') 0px 0px;
  }
  100%{
    background: url('img/wall1.png') 100px 0px;
  }

}





/*====================*/
/*====================*/
/*====================*/
/*======[#header]=====*/
/*====================*/
/*====================*/
/*====================*/
#header{
  width: 100%;
  height: 60px;
}
#hI{
  margin-left: calc( 50% - 30px);
  padding: 7px;
  width: 46px;
  height: 46px;
  overflow: hidden;
}
#HIUI{
  width: 46px;
  height: 46px;
  background: url('img/img1.png') no-repeat 0px 0px;
  background-size: 46px;
}
#HIUI:hover{
  opacity: 0.6;
}








#hI2{
  width: 194px;
  padding: 3px;
  height: 40px;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
}
#hI2icon{
  float: left;
  margin-right: 10px;
  width: 38px;
  height: 38px;
  background: url('imgui/iu1.png') no-repeat 0px 0px;
  border-radius: 6px;
}
#hI2 p{
  height: 40px;
  line-height: 40px;
  font-size: 12pt;
}
#hI2:after{
  position: absolute;
  content: "";
  margin-top: -40px;
  width: 200px;
  height: 46px;
  background: transparent;
}








/*====================*/
/*====================*/
/*====================*/
/*======[#main]=======*/
/*====================*/
/*====================*/
/*====================*/
#main{
  width: 100%;
  height: calc( 100% - 60px);
}
/*====================*/
/*====================*/
/*======[#MAL]========*/
/*====================*/
/*====================*/
#mI{
  padding: 0px 10px;
  height: calc( 100% - 60px);
}
#mI1{
  position: absolute;
  margin-top: 0px;
  width: 290px;
  height: calc( 100% - 122px);
  background: #505064;
  border-bottom: 2px solid #ddd;
  overflow: hidden;
  z-index: 2100;
}


#mItitle{
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 34px 36px 50px;
  height: 120px;
  background: url('imgui/iu2.png') no-repeat 0px 0px #505064;
}
#mIticon{
  grid-column: 1/2;
  grid-row: 1/3;
}
#mItclose{
  display: none;
  width: 40px;
  height: 40px;
  background: url('imgui/mItclose1.png') no-repeat 0px 0px;
  opacity: 0.6;
  cursor: pointer;
}
#mItclose:hover{
  opacity: 1;
}

#mItS{
  grid-column: 2/3;
  grid-row: 1/2;
  padding-top: 10px;
  padding-right: 10px;
}
#mItSBU{
  float: right;
  width: 39px;
  background: #334;
  border-bottom: 1px solid #223;
  font-size: 8pt;
  color: #fff;
}
#mItSBU:hover{
background: #223;
}
#mItR1{
  grid-column: 2/3;
  grid-row: 2/3;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
#mItR2{
  grid-column: 2/3;
  grid-row: 3/4;
}
#mItR2 p{
  font-size: 10pt;
  color: #fff;
}

#mIthidden{
  display: none;
  width: 100%;
  height: 40px;
  background: url('imgui/mItopen1.png') no-repeat 0px 0px #334;
  line-height: 40px;
  font-size: 10pt;
  color: #fff;
}
#mItopen{
  float: left;
  width: 40px;
  height: 40px;
}


#mIulone{
  display: none;
  width: 100%;
  overflow: hidden;
}
#mIulone li{
  display: grid;
  grid-template-columns: 1fr 50px;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #bebec7;
}
#mIulone li:hover{
  background: #334;
}
#mIuoli{
  height: 40px;
  line-height: 40px;
  text-indent: 2em;
  cursor: pointer;
  font-size: 12pt;
  color: #fff;
}


#mIul{
  width: 100%;
}
#mIul li{
  display: grid;
  grid-template-columns: 1fr 50px;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #bebec7;
}
#mIul li:last-child{
  border: 0px solid transparent;
}
#mIul li:hover{
  background: #334;
}
.mIli1{
  height: 40px;
  line-height: 40px;
  text-indent: 2em;
  cursor: pointer;
  font-size: 12pt;
  color: #fff;
}
.mIpin1{
  cursor: pointer;
  background: url('imgui/iupin1.png') 0px 0px no-repeat;
  opacity: 0.6;
}
.mIpin1:hover{
  opacity: 1;
}






#mI2{
  position: absolute;
  margin-top: 0px;
  margin-left: 300px;
  width: calc( 100% - 320px );
  height: calc( 100% - 120px);
  z-index: 2200;
  overflow-x: hidden;
  overflow-y: auto;
}

#mI2MEMO{
                                    display: none;
  width: 100%;
  height: 100%;
}

#mI2A{
  float: left;
  width: calc( 40% - 2px );
  height: calc( 100% - 2px );
  background: #fff;
  border:1px solid #ddd;
}
#mI2B{
  float: left;
  width: 60%;
  height: 100%;
  background: transparent;
}

#mI2c1{
  background: #fff;
  border: 1px solid #ddd;
}
#mI2c2{
  background: #fff;
  border: 1px solid #ddd;
}
#mI2c3{
  background: #fff;
  border: 1px solid #ddd;
}
#mI2c4{
  background: #fff;
  border: 1px solid #ddd;
}
#mI2c5,#mI2c6,#mI2c7{
  background: #fff;
  border: 1px solid #ddd;
}


#mI3C{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  height: 100%;
  column-gap: 4px;
  row-gap: 6px;
  margin-bottom: 10px;
  opacity: 0.6;
    background: #754;
}
#mI3c1{
  background: #fff;
  border: 1px solid #ddd;
}
#mI3c2{
  background: #fff;
  border: 1px solid #ddd;
}
#mI3c3{
  background: #fff;
  border: 1px solid #ddd;
}
#mI3c4{
  background: #fff;
  border: 1px solid #ddd;
}
#mI3c5,#mI3c6,#mI3c7{
  background: #fff;
  border: 1px solid #ddd;
}





/*====================*/
/*====================*/
/*====================*/
/*======[#mIdata1]=====*/
/*====================*/
/*====================*/
/*====================*/
#mIdata1{
  /*display: none;*/
  width: calc( 100% - 2px );
  min-height: calc( 100% - 2px );
  /*background: url('img/transwhite80.png');*/
  border: 1px solid #ddd;
}
.m_blank1{
  width: 100%;
  height: 50px;
}
#mIdata1A{
  padding: 30px;
  width: calc( 100% - 60px );
}

#mIdata1A h3{
  text-indent: 1.4em;
  background: url('img/h3img1.png') no-repeat 0px 0px;
  background-size: contain;
}

#mIdata1A h5{
  padding: 4px 0px;
  background: linear-gradient(90deg,#78788c,transparent);
  text-indent: 1em;
  color: #fff;
}
.mIdata1Ap1{
  padding: 20px 0px 30px 0px;
}
.mIdata1Ap2{
  padding: 6px 20px 20px 20px;
}

/*====================*/
/*====================*/
/*======[画像のタイプ]=====*/
/*====================*/
/*====================*/
.mIdata1Aultype1{
  display: grid;
  grid-template-columns: 60px 60px 60px 1fr;
  grid-template-rows: 60px;
  padding: 5px 20px;
  column-gap: 10px;
}
.mIdata1Aultype1 li{
  background: #ddf;
}
/*====================*/
.mIdata1Aultype2{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 4px;
  row-gap: 6px;
  padding: 10px 20px;
}
.mIdata1Aultype2 li{
  height: 100px;
  background: #bbe;
}
/*====================*/
.mIdata1Aultype3{
  padding: 10px 20px;
}
.mIdata1Aultype3 img{
  padding: 4px;
  width: calc( 100% - 8px );
  background: #fff;
  border: 1px solid #ddd;
}
/*====================*/
/*====================*/
/*====================*/
#mIdata2{
  display: none;
  width: 100%;
  height: 100%;
  background: #643;
}
#mIdata2A{
  width: 100%;
  height: 1000px;
  background: #73a;
}



/*====================*/
/*====================*/
/*====================*/
/*======[#mbox1]=====*/
/*====================*/
/*====================*/
/*====================*/
#mbox1{
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  padding: 0px 10px;
  width: calc( 100% - 20px );
  height: calc( 100% - 120px );
  background: transparent;
  z-index: 7100;
}
#mb1I{
  width: 100%;
  height: calc( 100% - 2px );
  background: #505064;
  border-bottom: 2px solid #ddd;
  overflow: hidden;
}
#mb1Itop{
  padding: 10px;
  width: calc( 100% - 20px );
  height: 40px;
}
#mb1Iclose{
  width: 40px;
  height: 40px;
  background: url('ui/mb1Iclose.png') no-repeat 0px 0px;
}
#mb1Iul{
  width: 100%;
  height: calc( 100% - 60px );
}
#mb1Iul li{
  display: grid;
  grid-template-columns: 1fr 50px;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #bebec7;
  line-height: 40px;
  text-indent: 2em;
  cursor: pointer;
  font-size: 12pt;
  color: #fff;
}
#mb1Iul li:last-child{
  border: 0px solid transparent;
}
#mb1Iul li:hover{
  background: #334;
}






/*====================*/
/*====================*/
/*====================*/
/*======[#footer]=====*/
/*====================*/
/*====================*/
/*====================*/
#footer{
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 6px 0px 8px 0px;
  width: 100%;
  height: 46px;
  z-index: 8000;
}
#FI{
  margin-left: 20px;
  width: 254px;
  height: 46px;
}
/*======[#FIUL]========*/
#FIUL{
  width: 254px;
  height: 46px;
}
#FIUL li{
  float: left;
  margin-right: 6px;
  width: 46px;
  height: 46px;
  background-size: 46px;
  background: #75;
}
#FIUL li:last-child{ margin: 0;}

#FIULli1{background: url('ui/fibu1.png') no-repeat 0 0;}
#FIULli2{background: url('ui/fibu2.png') no-repeat 0 0;}
#FIULli3{background: url('ui/fibu3.png') no-repeat 0 0;}
#FIULli4{background: url('ui/fibu4.png') no-repeat 0 0;}
#FIULli5{background: url('ui/fibu5.png') no-repeat 0 0;}


#FIUL input[type="button"]{
  background-size: 46px;
}
#FIUL input[type="button"]:hover{
  opacity: 0;
}


#FIBU1{background: url('ui/fibu1_off.png') no-repeat 0 0;}
#FIBU2{background: url('ui/fibu2_off.png') no-repeat 0 0;}
#FIBU3{background: url('ui/fibu3_off.png') no-repeat 0 0;}
#FIBU4{background: url('ui/fibu4_off.png') no-repeat 0 0;}
#FIBU5{background: url('ui/fibu5_off.png') no-repeat 0 0;}










/*====================*/
/*====================*/
/*======[#PG]=========*/
/*====================*/
/*====================*/
#PG{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ea3;
  opacity: 0.8;
  z-index: 9999;
}