@charset	"utf-8";
@import		"media.css";

/* spacer */
div.sp32		{ width:98%; height:32px; }
div.sp24		{ width:98%; height:24px; }
div.sp16		{ width:98%; height:16px; }
div.sp12		{ width:98%; height:12px; }
div.sp8			{ width:98%; height:8px; }
div.sp4			{ width:98%; height:4px; }
.clr-box  { clear:both; }

/* color */
.c_shadow { text-shadow: 1px 1px 0 black, 1px 0px 0 black; }
.c_edge {
	text-shadow: 
        black  1px 1px 0, black -1px -1px 0,/*右下、左上*/
        black -1px 1px 0, black  1px -1px 0,/*右上、左下*/
        black  0px 1px 0, black  0px -1px 0,/*右、左*/
        black -1px 0px 0, black  1px  0px 0;/*上、下*/
}
.c_warning { color:#F0C000; }

/* string effect */
.font_bold { font-weight:bold; }
.font_title {  font-size:var(--f-size-small); }
.font_normal {  font-size:var(--f-size-text); }
.font_memo {  font-size:var(--f-size-memo); }
.font_small {  font-size:var(--f-size-small); }

.font_ulemphasis { text-decoration: underline red; }

/* div prop */
div.box_title {  font-size:var(--f-size-title); }
div.box_explain {  font-size:var(--f-size-text); }
div.box_memo {  font-size:var(--f-size-memo); }

div.flexItem { flex:auto; border-radius:6px; margin:2px 4px; padding:4px 12px; box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.15); background-color:#f0f0f0; }
div.tbl_common { margin:2px 2px; padding:2px 2px; }

div.center {
	position: absolute;
	top: 0%;
	left: 50%;
	-ms-transform: translate(-50%,0%);
	-webkit-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
	text-align: center;
	width:var(--w-base);
}

div.line_dot	{ margin:2px 0px 4px 0px; border-bottom: 1px dotted #804040; }
div.sp_dot		{ margin:8px 0px 8px 0px; border-bottom: 1px dotted #A0A0A0; }

/* flex */
div.fc_left {
  display:flex;
  justify-content:flex-start;
}
div.fc_right {
  display:flex;
  justify-content:flex-end;
}
div.fc_center {
  display:flex;
  justify-content:center;
}
div.fc_just {
  display:flex;
  justify-content:space-around;
}

.btn_item {
}
.btn_item a {
  display: block;
  text-align:center;
  padding: 0.1em 1em;
  margin: 0 0.2em;
  text-decoration: none;
  color: #F0F0F0;
  background: #A9A9A9;
  border-radius: 3px;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
}
.btn_item a:hover {
//  color: #F0C0F0;
  background: #66CDAA;
}

/* lang button*/
div.btn_lang_on {
  display: block;
  text-align:center;
  padding: 0.1em 1em;
  margin: 0 0.2em;
  text-decoration: none;
  color: #F0F0F0;
  background: #006400;
  border-radius: 3px;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
}

/* -------- */
/* calendar */
/* -------- */
div.calendar {
  width: 100%;
  background: #C00000;
}
div.invalidate {
  opacity: 0.3;
}
/* -------- */
div.calendar .warn_box{
  width: 100%;
  background: #C04040;
  color: #F0F0F0;
}
/* -------- */
div .calendar .month_box {
  background: #f0f0f0;
  text-align: center;
}
/* -------- */
div.calendar .week_box {
  display:flex;
  background: #F0F0F0;
}
	div.calendar .week_box .sun {
	  background: #ffc0cb;
	  width: calc(100% / 7);
	  outline: 1px dotted #404040;
	  outline-offset:-1px;
	}
	div.calendar .week_box .normal {
	  outline: 1px dotted #404040;
	  outline-offset:-1px;
	  width: calc(100% / 7);
	}
	div.calendar .week_box .sat {
	  background: #7fffd4;
	  width: calc(100% / 7);
	  outline: 1px dotted #404040;
	  outline-offset:-1px;
	}
/* -------- */
div.calendar .date_box {
  display:flex;
  justify-content:flex-start;
  background: #e6e6fa;
  flex-wrap: wrap;
  align-content: stretch;
}
	/* -------- */
	div.calendar .date_box .item {
	  width: calc(100% / 7);
	  height: var(--h-calendar-date);
	  text-align:left;
	  border-radius: 0px;
	  outline: 1px dotted #404040;
	  outline-offset:-1px;
	}
	/* -------- */
	div.calendar .date_box .annex {
	  background: #2e8b57;
	  color: #F0F0F0;
	}
	div.calendar .date_box .annex .date {
	  margin:2px 0px 0px 4px;
	}
	div.calendar .date_box .annex .date:after {
	  content:" annex";
	}
	/* -------- */
	div.calendar .date_box .open {
	  background: #98fb98;
	  color: #202020;
	}
	div.calendar .date_box .open .date {
	  margin:2px 0px 0px 4px;
	}
	div.calendar .date_box .open .date:after {
	  content:" open";
	}
	div.calendar .date_box .holiday {
	  background: #FFC0C0;
	}
	/* -------- */
	div.calendar .date_box .close {
	  background: #C0C0C0;
	  color: #202020;
	}
	div.calendar .date_box .close .date {
	  margin:2px 0px 0px 4px;
	}
	div.calendar .date_box .close .date:after {
	  content:" close";
	}
	/* -------- */
	div.calendar .date_box .explain {
	  margin:2px;
	  padding:4px 0px 2px 4px;
	  text-align:center;
	  font-size: var(--f-size-small);
	  line-height: calc(var(--f-size-small) + 2px);
	}
	div.calendar .date_box .explain_r {
	  padding:0px 4px 0px 0px;
	  text-align:right;
	  font-size: var(--f-size-small);
	  line-height: calc(var(--f-size-small) + 2px);
	}
	
	div.calendar .date_box .explain_a {
	  margin:2px;
	  padding:4px 0px 2px 4px;
	  text-align:center;
	  font-size: var(--f-size-small);
	  line-height: calc(var(--f-size-small) + 2px);
	  /* annex */
	  background: #2e8b57;
	  color: #F0F0F0;
	}
	div.calendar .date_box .explain_a:before {
	  white-space:pre;
	  content:"--annex--\A";
	}
	
	div.calendar .date_box .explain_happy {
	  margin:2px;
	  padding:4px 0px 2px 4px;
	  text-align:center;
	  font-size: var(--f-size-small);
	  line-height: calc(var(--f-size-small) + 2px);
	  /* happy */
	 /* background: #ff69b4;*/
	  background: #ffa0b4;
	  color: #404040;
	}