@charset "UTF-8";
#calendar td, #calendar th {
  border: 1px solid #CCC;
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;
  text-align: center
}

* {
  font-family: "メイリオ", Meiryo, sans-serif;
  outline: #000 0!important
}

table {
  border-spacing: 0;
  border-collapse: collapse
}

#calendar table {
  float: left;
  border: 1px solid #CCC
}

#calendar td {
  width: 80px;
  height: 80px;
  font-size: 24px;
  position: relative;
  z-index: -1;
}

#calendar .application {
  position: absolute;
  border: 2px solid #70B059;
  width: 36px;
  height: 36px;
  border-radius: 34px;
  margin: auto;
  z-index: 1;
  left: 22px;
  top: 20px
}

#calendar .application::before {
  content: "申込受付日";
  font-size: 12px;
  width: 100px;
  color: #70B059;
  display: block;
  z-index: 1;
  margin-left: -34px;
  margin-top: -21px
}

#calendar .purchase {
  position: absolute;
  border: 2px solid #6E34C6;
  width: 44px;
  height: 44px;
  border-radius: 34px;
  margin: auto;
  z-index: 1;
  left: 18px;
  top: 16px
}

#calendar .purchase::after {
  content: "買付・約定日";
  font-size: 12px;
  width: 100px;
  color: #6E34C6;
  display: block;
  z-index: 1;
  margin-top: 44px;
  margin-left: -30px
}

#calendar .settlement {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 24px
}

#calendar .saturday {
  color: #1B8DC9;
  background-color: #D1EDF9
}

#calendar .holiday {
  color: #D43A30;
  background-color: #FADDD9
}

#calendar .not-applicable {
  color: #353229;
  background-color: #FEEDA5
}

#calendar .holiday, #calendar .not-applicable, #calendar .saturday {
  border: 1px solid #CCC
}


/**
 解約カレンダー
 ※大元でidが振られている為、解約カレンダー用に一部再定義
**/
#calendar2 td, #calendar th {
  border: 1px solid #CCC;
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;
  text-align: center
}

#calendar2 table {
  float: left;
  border: 1px solid #CCC
}

#calendar2 td {
  width: 80px;
  height: 80px;
  font-size: 24px;
  position: relative;
  z-index: -1;
}

#calendar2 .application {
  position: absolute;
  border: 2px solid #70B059;
  width: 36px;
  height: 36px;
  border-radius: 34px;
  margin: auto;
  z-index: 1;
  left: 22px;
  top: 20px
}

#calendar2 .application::before {
  content: "申込受付日";
  font-size: 12px;
  width: 100px;
  color: #70B059;
  display: block;
  z-index: 1;
  margin-left: -34px;
  margin-top: -21px
}

#calendar2 .exchange {
  position: absolute;
  border: 2px solid #6E34C6;
  width: 44px;
  height: 44px;
  border-radius: 34px;
  margin: auto;
  z-index: 1;
  left: 18px;
  top: 16px
}

#calendar2 .exchange::after {
  content: "換金日";
  font-size: 12px;
  width: 100px;
  color: #6E34C6;
  display: block;
  z-index: 1;
  margin-top: 44px;
  margin-left: -30px
}

#calendar2 .delivery {
  position: absolute;
  border: 2px solid #FF6A00;
  width: 44px;
  height: 44px;
  border-radius: 34px;
  margin: auto;
  z-index: 1;
  left: 18px;
  top: 16px
}

#calendar2 .delivery::after {
  content: "受渡日";
  font-size: 12px;
  width: 100px;
  color: #FF6A00;
  display: block;
  z-index: 1;
  margin-top: 44px;
  margin-left: -30px
}

#calendar2 .settlement {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 24px
}

#calendar2 .saturday {
  color: #1B8DC9;
  background-color: #D1EDF9
}

#calendar2 .holiday {
  color: #D43A30;
  background-color: #FADDD9
}

#calendar2 .not-applicable {
  color: #353229;
  background-color: #FEEDA5
}

#calendar2 .holiday, #calendar2 .not-applicable, #calendar2 .saturday {
  border: 1px solid #CCC
}