/*--------------------------------------------------------------
注文フォーム
--------------------------------------------------------------*/
#appform {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0px;
	text-align: center;
}
#inner_box{
	margin: 6px;
	text-align: left;
	font-size: 12pt;
	line-height: 16pt;
}
.query{
	display: inline-block;
	padding: 4px;
	text-align: left;
	min-width: 300px;
	vertical-align: top;
	height:27px;
	margin-left: 10px;
}

.reply{
	display: inline-block;
	padding: 4px;
	text-align: left;
	margin-left: 0px;
	vertical-align: top;
/*	max-width: 800px;*/
}
.replybox{
	display: inline-block;
	padding: 4px;
	text-align: left;
	margin-left: 0px;
	line-height: 24pt;
	vertical-align: top;
}

input,select,textarea {
	border-radius: 4px;
	/* このプロパティを変更します*/
	border: solid 1px #ccc;
	/*このプロパティを変更します*/
	box-shadow: none;
	/*フォーカスしたときのトランジション設定 すべてのプロパティが0.5秒で切り替わる*/
	transition: all 0.5s;
}
input[type="image"]{
	border: none;
}

input:focus {
	outline: none;
  border-color: red;
  box-shadow: 0px 0px 10px 3px rgba(255,0,0,0.8);
}
select:focus {
	outline: none;
  border-color: red;
  box-shadow: 0px 0px 10px 3px rgba(255,0,0,0.8);
}
textarea:focus {
	outline: none;
  border-color: red;
  box-shadow: 0px 0px 10px 3px rgba(255,0,0,0.8);
}


/*------------------------------------------------------*/
/*	チェックボックスカスタマイズ	*/
/*------------------------------------------------------*/

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

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 10px;
/*	font-family:'Noto Serif JP', sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 200;
	font-size: 12pt;
/*  font: 14px/20px 'Open Sans', Arial, sans-serif;*/
  color: #000000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"]:checked + label {
color: #ff0000; /* マウス選択時のフォント色を指定する */
	border-bottom: 1px #000000 solid;
}


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

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #000000;
  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 15px rgba(255, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0px 0px 0px 15px rgba(255, 0, 0, 0);
  }
}
.md-radio {
  margin-bottom: 10px;
	display: inline-block;
}
.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: #F4F4F4;/*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:#F4F4F4;
/*	font-family:'Noto Serif JP', sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family: "ヒラギノ角ゴ 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: 2px solid rgba(244,244,244,0.8);
}
.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;}
.clearance02{clear:both;height:2px;}
.clearance03{clear:both;height:3px;}
.clearance04{clear:both;height:4px;}
.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;}
.clearance50{clear:both;height:50px;}
.clearance_ul{
	clear:both;
	height:0px;
	border-bottom:1px #515151 solid;
	margin-bottom:10px;
}
.clearance_ulspace{
	clear:both;
	height:0px;
/*	border-bottom:1px #515151 solid;*/
	margin-bottom:10px;
}

.inBox{
	padding: 10px;
}

@media screen and (max-width: 640px) {
.query{
	display: block;
	height:auto;
}
.reply, .replybox{
	display: block;
	margin-left: 10px;
}
}
.di50{
	margin:2px;
	height:25px;
	width:50px;
}
.di100{
	margin:2px;
	height:25px;
	width:100px;
}
.di150{
	margin:2px;
	height:25px;
	width:150px;
}
.di200{
	margin:2px;
	height:25px;
	width:200px;
	max-width: 98%;
}
.di250{
	margin:2px;
	height:25px;
	width:250px;
	max-width: 98%;
}
.di350{
	margin:2px;
	height:25px;
	width:350px;
	max-width: 98%;
}
.si{
	margin:2px;
	height:25px;
}
.ci{
	margin:2px;
	height:25px;
}
select{
	height:25px;
	margin: 2px;
}
textarea{
	margin:2px;
	height:100px;
	width:calc(100% - 25px);
}


.label {
	line-height: 14pt;
	font-size: 12pt; 
	color: #000; 
	background-color: #87f4eb;
	border-bottom: 1px dotted #6F6F6F;
}
.label2 {
	line-height: 14pt;
	font-size: 12pt; 
	color: #000; 
	background-color: #e793da;
	border-bottom: 1px dotted #6F6F6F;
}
.input1 {
	line-height: 14pt;
	font-size: 12pt; 
	color: #000000; 
	background-color: #eafafe;
	border-bottom: 1px dotted #6F6F6F;
}
.input2 {
	line-height: 14pt;
	font-size: 12pt; 
	color: #000000; 
	background-color: #ffffff;
	border-bottom: 1px dotted #6F6F6F;
}
.essential {
	float:right;
}
.Instructions {
	line-height: 12pt;
	font-size: 10pt; 
	color: #000000;
}
.Instred {
	line-height: 12pt;
	font-size: 10pt; 
	color: #ff0000; 
}
input,textarea {
background-color: #ffffff;
}
.under_dot{
	border-bottom: 1px dotted #6F6F6F;
}
.size8{
	font-size:8pt;
	line-height:10pt;
}
.size8r{
	color:#FF0000;
	font-size:8pt;
	line-height:10pt;
}
.submitbutton{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
/*----------------------------------------------
必須
----------------------------------------------*/
.i_req{
	height:10px;
	margin-left: 4px;
	padding:1px 6px 1px 6px;
	background-color:#FF0000;
	color:#ffffff;
	font-size:8pt;
	line-height:8px;
	font-weight:bold;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
}
/*----------------------------------------------
任意
----------------------------------------------*/
.i_blu{
	height:10px;
	margin-left: 4px;
	padding:1px 6px 1px 6px;
	background-color:rgba(9,128,255,1.00);
	color:#ffffff;
	font-size:8pt;
	line-height:8px;
	font-weight:bold;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
}
/*----------------------------------------------
必須入力促し
----------------------------------------------*/
.prompt_box{
	display: block;
	margin-top: 0pt;
}
.prompt{
	height:12px;
	margin-left: 4px;
	padding:1px 6px 1px 6px;
	background-color:#FF0000;
	color:#ffffff;
	font-size:8pt;
	line-height:12px;
	font-weight:bold;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
	display: inline-block;
	margin-top: 1px;
}
/*-----------------------------
	点滅
-----------------------------*/
.blinking{
	-webkit-animation:blink 1.0s ease-in-out infinite alternate;
    -moz-animation:blink 1.0s ease-in-out infinite alternate;
    animation:blink 1.0s ease-in-out infinite alternate;
}
.blinking2{
	-webkit-animation:blink 0.7s ease-in-out infinite alternate;
    -moz-animation:blink 0.7s ease-in-out infinite alternate;
    animation:blink 0.7s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*----------------------------------------------*/
input[type="image"]{
	background-color: rgba(0,0,0,0);
}