@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*head*/
div.sun{
  font-size: 15pt;
}
div#basesun {
  padding: 5px;
  height: 1055px;
  width: 623px;
  position: relative;
  border-color: #BDBDBD;
  background-color: #E6E6E6;
  border-style: dashed;
  border-width: 5px;
}

div.imsun{
  margin : 0px important;
  padding: 5px;
  height: 80px;
  width: 80px;
  position: absolute;
  border-style: outset;
  font-size: 17pt;
  vertical-align: middle !important;
  text-align: center;
  border-width: 5px;
}

div.exp{
  padding: 5px;
  height: 200px;
  width: 210px;
  position: absolute;
  font-size: 10pt;
  vertical-align: middle !important;
}

div.casun{
  padding: 5px;
  height: 80px;
  width: 120px;
  line-height: 20pt;
  position: absolute;
  font-size: 11pt;
  vertical-align: middle !important;
  text-align: east;
  float: right;
}

/*sample*/
.samplehead1{
  font-size: 15pt;
}
.samplehead2{
  font-size: 13pt;
}
.boxexp{
  padding: auto !important;
  text-align: center;
  line-height: 30px;
  position: absolute;
  font-size: 12pt;
}
.swboxa {
  width: 150px;
  height: 150px;
  margin: 0px 0px 0px 10px;
  position: absolute;
}
.swboxb {
  width: 150px;
  height: 150px;
  margin: 0px 0px 0px 160px;
  position: absolute;
}
.swboxc {
  width: 150px;
  height: 150px;
  margin: 0px 0px 0px 310px;
  position: absolute;
}
.swboxd {
  width: 150px;
  height: 150px;
  margin: 0px 0px 0px 460px;
  position: absolute;
}


/*header*/
body {
  margin : 0px;
  padding: 5px;
  background-color : #eff5ff;
}
h1 {
  font-size: 30pt;
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin : 20px;
  padding: 5px;
}

.head3 {
  font-size: 18pt;
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  padding: 5px !important;
  margin : 20px;
}

/*kizyu*/
div.kizyu {
  margin : 0px;
  padding: 5px;
  position: relative;
  border-style: outset;
  border-width: 5px;
  float: !important;
}
#swkizyu{
  margin: auto;
  height: 490px;
  width: 625px;
  border-color: #045FB4;
  background-color: #CEE3F6;
}
#slkizyu{
  margin: auto;
  height: 835px;
  width: 598px;
  border-color: #B40404;
  background-color: #F8E0E0;
}
#srkizyu{
  margin: auto;
  height: 835px;
  width: 721px;
  border-color: #AEB404;
  background-color: #F5F6CE;
}
#sekizyu{
  margin: auto;
  height: 675px;
  width: 430px;
  border-color: #08088A;
  background-color: #E0E0F8;
}
#smtkizyu{
  margin: auto;
  height: 661px;
  width: 661px;
  border-color: #088A08;
  background-color: #D8F6CE;
}
#swtkizyu{
  margin: auto;
  height: 660px;
  width: 185px;
  border-color: #B45F04;
  background-color: #F5D0A9;
}

/*h3*/
#swh3 {
  background-color : #CEE3F6;
  color: #000000 !important;
}
#slh3 {
  background-color : #F8E0E0;
  color: #000000 !important;
}
#srh3 {
  background-color : #F5F6CE;
  color: #000000 !important;
}
#seh3 {
  background-color : #E0E0F8;
  color: #000000 !important;
}
#smth3 {
  background-color : #BCF5A9;
  color: #000000 !important;
}
/*bodyset*/
.sbox {
  font-size: 15px;
  text-align: center !important;
  border-style: outset !important;
  border-width: 5px !important;
  position: absolute;
}


.sbox.vacant {
  color : #000000;
}
.sbox.soldout {
  border-color: #000000;
  background-color: #A4A4A4;
  color : #FAFAFA;
}

/*SWBOX*/
.swa {
  line-height: 30px;
  width: 90px !important;
  height: 90px !important;
}

.swb {
  line-height: 40px;
  width: 90px !important;
  height: 120px !important;
}

.swc {
  line-height: 30px;
  width: 120px !important;
  height: 90px !important;
}

.swd {
  line-height: 30px;
  width: 60px !important;
  height: 90px !important;
}

.swa.vacant {
  border-color: #B45F04;
  background-color: #F7BE81;
}

.swb.vacant {
  border-color: #B18904;
  background-color: #F5DA81;
}

.swc.vacant {
  border-color: #AEB404;
  background-color: #F3F781;
}

.swd.vacant {
  border-color: #86B404;
  background-color: #D8F781;
}

/*SLBOX*/
.sla {
  line-height: 30px;
  width: 108px !important;
  height: 90px !important;
}

.slb {
  line-height: 30px;
  width: 63px !important;
  height: 90px !important;
}

.slc {
  line-height: 30px;
  width: 186px !important;
  height: 90px !important;
}

.sla.vacant {
  border-color: #31B404;
  background-color: #9FF781;
}

.slb.vacant {
  border-color: #0489B1;
  background-color: #81DAF5;
}

.slc.vacant {
  border-color: #0431B4;
  background-color: #819FF7;
}

.sea {
  line-height: 23px;
  width: 130px !important;
  height: 70px !important;
}

.sea.vacant {
  border-color: #B40486;
  background-color: #F781D8;
}


.smta {
  line-height: 26px;
  width: 80px !important;
  height: 80px !important;
}

.smtb {
  line-height: 26px;
  width: 80px !important;
  height: 80px !important;
}

.smta.vacant {
  border-color: #FF0000;
  background-color: #F5A9A9;
}

.smtb.vacant {
  border-color: #8000FF;
  background-color: #E3CEF6;
}

.swta {
  line-height: 27px;
  width: 175px !important;
  height: 80px !important;
}

.swtb {
  line-height: 27px;
  width: 80px !important;
  height: 80px !important;
}

.swta.vacant {
  border-color: #FF00BF;
  background-color: #F6CEEC;
}

.swtb.vacant {
  border-color: #01DFA5;
  background-color: #A9F5E1;
}