@charset "utf-8";

/*-------------------------------------------------------------------------------------*/
.solidborder {
	border-collapse: collapse;
	border: 1px solid #555555;
	margin: 10px;
}
.solidborder td {
  border: 1px solid #555555;
}

#data_view{
	width:calc( 100% - 10px);
	height: auto;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
}
.PrBox{
	width: calc(100% - 10px);
	height:auto;
	margin: 0 auto;
}
.PrBox ul{
	width: 100%;
	display: block;
}
.PrBox ul li{
	font-size: 12pt;
	line-height: 16pt;
	display: inline-block;
	margin-right: 15px;
	float: left;
}
.PrBox ul li.attach{
	font-size: 12pt;
	line-height: 16pt;
	display: inline-block;
	margin-right: -4px;
	float: left;
}
.w50{
	width:calc(50% - 10px); /*590px;*/
	height: auto;
	display: inline-block;
	vertical-align: top;
	padding: 5px;
/*  border: 1px solid #555555;*/
}
.notes{
	font-size: 8pt;
	line-height: 10pt;
	color: #ff0000;
}
#Delete{
	position: fixed;
	bottom: 1px;
	left:1px;
}
#PersonInput{
	position: fixed;
	bottom: 1px;
	right:1px;
}
/*--------------------------------------
LeftBox
--------------------------------------*/

.PrBoxL{
	width: 100%;
	height:auto;
}
.PrBoxL ul{
	width: 100%;
	display: block;
	text-align: center;
}
.PrBoxL ul li{
	font-size: 12pt;
	line-height: 16pt;
	display: inline-block;
/*	margin-right: 20px;
	float: left;*/
}
.PrBoxL ul li.attach{
	font-size: 12pt;
	line-height: 16pt;
	display: inline-block;
	margin-right: 0px;
	float: left;
}
/*--------------------------------------
RightBox
--------------------------------------*/

.PrBoxR{
	width: 100%;
	height:auto;
}
.PrBoxR ul{
	width: 100%;
	display: block;
}
.PrBoxR ul li{
	font-size: 12pt;
	line-height: 16pt;
	display: inline-block;
/*	margin-right: 20px;*/
	float: left;
}
.PrBoxR ul li.attach{
	font-size: 12pt;
	line-height: 16pt;
	display: inline-block;
	margin-right: 0px;
	float: left;
}
/*--------------------------------------
textbox
--------------------------------------*/

.InputBox{
  position: relative;
  width: 100%;
  padding-top: 5px;
  height: 50px;
  display: inline-flex;
  margin-bottom: 0px;
	margin-top: 20px;
/*	border: 1px #9F9F9F dashed;*/
}
.InlineSelectBox{
  width: 100%;
  padding-top: 18px;
  height: 20px;
  display: inline-flex;
  margin-bottom: 0px;
/*	border: 1px #9F9F9F dashed;*/
	
}
.InputBox .text {
  width: calc(100% - 7px);
  height: 25px;
  padding-left:5px;
  background-color: transparent;
  color: white;
  position: absolute;
  bottom: 0px;
  outline: none;
  border-style: solid;
  border-color: #9a9a9a;
  border-width: 0px 0px 1px 0px;
  font-size: 12pt;
  -webkit-transition: border-color 0.45s linear;
  transition: border-color 0.45s linear;
	color:#000000;
}
.InputBox .sBox {
  width: calc(100% - 7px);
  height: 29px;
	padding-top: 2px;
  padding-left:5px;
  background-color: transparent;
  color: white;
  position: absolute;
  bottom: -2px;
  outline: none;
  border-style: solid;
  border-color: #9a9a9a;
  border-width: 0px 0px 1px 0px;
  font-size: 12pt;
  -webkit-transition: border-color 0.45s linear;
  transition: border-color 0.45s linear;
	color:#000000;
}

.InputBox > input.text:focus {
  border-color: #ff0000;
}

.InputBox > select.sBox:focus {
  border-color: #ff0000;
}

.InputBox .label {
  color: #0000ff;
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 12pt;
	font-weight: normal;
}


.rBox{
	position: relative;
  width: 100%;
  margin-top: 10px;
  height: auto;
  display:inline-block;
  margin-bottom: 10px;
  border-style: solid;
  border-color: #9a9a9a;
  border-width: 0px 0px 1px 0px;
  font-size: 12px;
	color:#000000;
	padding-bottom: 10px;
/*	border: 1px #9F9F9F dashed;*/
}
.rBox .label {
	position: absolute;
	top:0px;
	left:0px;
	display: block;
	text-align: left;
	height:12pt;
  font-size: 12pt;
	font-weight: normal;
  color: #0000ff;
}
.rBox .rBList {
  margin-top: 20px;
  margin-left: 5px;
  min-height: 27px;
  padding-left:5px;
	width: calc(100% - 7px);
  outline: none;
	text-align: left;
	font-size: 12pt;
}
.rBox .rBList ul{
	width: 100%;
}
.rBox .rBList ul li{
	min-width: calc(12% - 10px);
	height:20px;
	margin: 5px;
	float: left;
}



.cBox{
	position: relative;
  width: 100%;
  margin-top: 10px;
  height: auto;
  display:inline-block;
  margin-bottom: 0px;
  border-style: solid;
  border-color: #9a9a9a;
  border-width: 0px 0px 1px 0px;
  font-size: 12px;
	color:#000000;
	padding-bottom: 10px;
/*	border: 1px #9F9F9F dashed;*/
}
.cBox .label {
	position: absolute;
	top:0px;
	left:0px;
	display: block;
	text-align: left;
	height:12px;
  font-size: 12pt;
	font-weight: normal;
  color: #0000ff;
}
.cBox .cBList {
  margin-top: 15px;
  margin-left: 5px;
  min-height: 27px;
  padding-left:5px;
	width: calc(100% - 7px);
  bottom: 0px;
  outline: none;
	text-align: left;
}
.cBox .cBList ul{
	width: 100%;
}
.cBox .cBList ul li{
	min-width: calc(33% - 10px);
	min-height:22px;
	margin: 5px;
	float: left;
}

.cBox .FlList {
  margin-top: 25px;
  margin-left: 5px;
  min-height: 27px;
  padding-left:5px;
	width: calc(100% - 7px);
  bottom: 0px;
  outline: none;
	text-align: left;
}
.cBox .FlList ul{
	width: 100%;
}
.cBox .FlList ul li{
	min-width: calc(20% - 20px);
	height:20px;
	margin: 5px;
	float: left;
}


/*------------------------------------------------------*/
/*	セレクトボックスカスタマイズ	*/
/*------------------------------------------------------*/
.SelBox{
	width: 100%;
	text-align: center;
	display: block;
}
.selectdiv {
  position: relative;
  /*Don't really need this just for demo styling*/
  
/*  float: left;*/
	width: 200px;
  min-width: 200px;
	margin: 0 auto;
/*  margin: 50px 33%;*/
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
display: none;
}

.selectdiv:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  /*Adjust for position however you want*/
  
  top: 18px;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  display: block;
  width: 100%;
  max-width: 320px;
  height: 50px;
  float: right;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}

.rBList select{
	font-size: 12pt;
	line-height: 14pt;
	height:30px;
}
/*------------------------------------------------------*/
/*	チェックボックスカスタマイズ	*/
/*------------------------------------------------------*/
input[type=checkbox] {
	margin-left: 5px;
	width:			16px;
	height:			16px;
	-moz-transform:		scale(1.2);
	-webkit-transform:	scale(1.2);
	transform:		scale(1.2);
}

/*
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
font-size: 12pt;
  color: #000000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"]:checked + label {
color: #ff0000;
}


input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #9a9a9a;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  border: 1px solid #ff0000;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
*/
/*------------------------------------------------------*/
/*	ラジオボタンカスタマイズ	*/
/*------------------------------------------------------*/
@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 0);
  }
  50% {
    box-shadow: 0px 0px 0px 10px rgba(255, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0px 0px 0px 10px rgba(255, 0, 0, 0);
  }
}
.md-radio {
  margin-bottom: 10px;
}
.md-radio.md-radio-inline {
  display: inline-block;
}
.md-radio input[type=radio] {
  opacity: 0;
  z-index: -1;
	margin-left: -10px;
}
.md-radio input[type=radio]:checked + label:before {
  border-color: #000000;/*OutlineColor*/
  animation: ripple 0.2s linear forwards;
}
.md-radio input[type=radio]:checked + label:after {
  transform: scale(1);
}
.md-radio label {
  display: inline-block;
  min-height: 20px;
  position: relative;
  padding: 0 30px;
  margin-bottom: 0;
  cursor: pointer;
  vertical-align: bottom;
	color:#000000;
	font-family:'Noto Serif JP', sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 200;
	font-size: 12pt;
	line-height: 20px;
}
.md-radio label:before, .md-radio label:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  transition: all 0.3s ease;
  transition-property: transform, border-color;
}
.md-radio label:before {
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.md-radio label:after {
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  transform: scale(0);
  background: #ff0000;
}

*, *:before, *:after {
  box-sizing: border-box;
}
/*-----------------------------
	- clearance
-----------------------------*/

.clearance{	clear:both;	height:0px;}
.clearance05{	clear:both;	height:5px;}
.clearance10{	clear:both;	height:10px;}
.clearance20{	clear:both;	height:20px;}
.clearance30{	clear:both;	height:30px;}
.clearance40{	clear:both;	height:40px;}
/*-----------------------------
	- width
-----------------------------*/
	
.di50 {	width:50px;text-align: right;}
.di60 {	width:60px;text-align: right;}
.di70 {	width:70px;text-align: right;}
.di80 {	width:80px;text-align: right;}
.di100{	width:100px;text-align: right;}
.di100l{	width:100px;text-align: left;}
.di150{	width:150px;}
.di200{	width:200px;	max-width: 98%;}
.di250{	width:250px;	max-width: 98%;}
.di350{	width:350px;	max-width: 98%;}
.di400{	width:400px;	max-width: 98%;}
.di600{	width:600px;	max-width: 98%;}
.diMax{	width: 98%;}
.DPr{text-align: right;}
.si{
	margin:2px;
	height:25px;
}
.ci{
	margin:2px;
	height:25px;
}
select{
	height:25px;
	margin: 2px;
}
textarea{
	margin:2px;
	height:100px;
	width:calc(100% - 25px);
}
/*-----------------------------
	Flatpicker 曜日色
-----------------------------*/
/* 日曜日：赤 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
    color: red;
}

/* 土曜日：青 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
    color: blue;
}

#lamp{
/*  width:33.3%;*/
  width:20%;
  height:1px;
  background:#ff0000;
  display:block;
  position:absolute;
  top:30px;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content1{
  left:0;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content2{
/*  left:33.3%;*/
	left:20%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content3{
/*  left:66.6%;*/
	left:40%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content4{
/*  left:66.6%;*/
	left:60%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content5{
/*  left:66.6%;*/
	left:80%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}

#Send{
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.btn-circle-fishy {
  display: inline-block;
  text-decoration: none;
  color: #FFF;
  width: 90px;
  height: 90px;
	font-size: 16pt;
  line-height: 80px;
	border: 1px #707070 solid;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);

}

.btn-circle-fishy:hover {
  background-image: linear-gradient(45deg, #91fdb7 0%, #709dff 100%);}




p.Req {
	display: inline;
  color: red;
}


.TxInput{
	position: relative;
  width: 100%;
  margin-top: 15px;
  height: auto;
  display:inline-block;
  margin-bottom: 0px;
/*  border-style: solid;
  border-color: #9a9a9a;
  border-width: 0px 0px 1px 0px;
*/
	font-size: 12pt;
	color:#000000;
	padding-bottom: 10px;
/*	border: 1px #9F9F9F dashed;*/
}
.TxInput .label {
	position: absolute;
	top:0px;
	left:0px;
	display: block;
	text-align: left;
	height:12pt;
  font-size: 12pt;
	font-weight: normal;
  color: #0000ff;
	margin-bottom: 5px;
}
.TxInput textarea{
	margin-top: 5px;
	padding: 5px;
	width: calc(100% - 10px);
	height:300px;
}


#inquiry::placeholder{
  color: #ff9090;
}
#inquiry{
	font-family: "メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


::placeholder{
	color: #c3c3c3;
	font-size: 12pt;
}



.TBoxUb{
	border: 0px;
	height:30px;
	font-size: 12pt;
	line-height: 14pt;
	border-bottom: 1px #989898 solid;
}

.rBList br{
    display: none;
}
@media screen and (max-width: 800px){
	.rBList br {
    display: inline;
  }
	.TBoxUb{
		margin-bottom: 4px;
	}
}
.Commentary{
	display: block;
	width: 100%;
	text-align: left;
	color:#ff0000;
	font-size:8pt;
	line-height: 10pt;
}