@charset "UTF-8";
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}
html,body,p,ul{
margin:0;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳＰゴシック","MS PGothic",sans-serif;
}
body{
	background-color: #FFF;
	width:100%;
  max-width:800px;
-webkit-text-size-adjust : 100% ;
}
select {
padding:5px;
margin:4px 0;
width:100%;
}

#page{
width:100%;
padding:10px 0;
}
#contents{
padding-bottom:80px;
}
.input_box{
  margin:20px 10px;
  box-shadow: 0 0.5mm 2mm rgba(0,0,0,.3);
  border:1px solid #999;
}
.input_box_title, .glass_type_layer_title{
padding:5px;
background-color:#CCC;
color: #000;
}
.input_box_inner{
padding:15px;
}
.input_box_inner input{
	box-sizing: border-box;
}

.text_box p{
  padding:2px 0;
}
.input_box_inner_left, .input_box_inner_right{
margin:5px 0;

    width: 100%;
border:1px solid #BBB;
}
.input_box_inner_left{
  display:inline-block;
}
.input_box_inner_right{
display:none;

}
.input_box_inner_left select, .input_box_inner_right select{
width:100%;
}
.glass_select_none, .glass_select_none2{
display:none;
}
.glass_type_layer{

  margin:10px 0;
border:1px solid #BBB;
display:none;
}
.glass_type_layer_title{
  background-color:#DDD;
  filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}
.glass_type_layer_inner{
padding:10px;
}
.glass_type_layer_any{
display: none;

}
.shadow_img{
display:inline-block;
border:1px solid #BBB;
padding:0 2px;

}
.shadow_img img{

}
.glass_type_layer select{
  width:100px;
}
.glass_spec_box{
  margin-top:10px;
}
.glass_spec_box div{
  display: inline-block;
}
.glass_spec_box input{
  width:70px;
  background-color:#EEE;
}
.submit_button{
  padding:6px 8px;
  width:90%;
  margin:0 auto;
  display:block;
}
#alert_box{
    border: 2px solid #c0392b;
    color: #c0392b;
    font-size:13px;
    padding: 10px;
    background-color: #FDD;
    margin:5px;
}
#page_title{
font-size:16px;
font-weight:bold;
margin-bottom:10px;
}
.error{
    display:none;
    border: 2px solid #c0392b;
    color: #c0392b;
    font-size:14px;
    font-weight:bold;
    padding: 10px;
    background-color: #FDD;
    margin:5px;
}
@media (min-width: 1px) {
    input[type=radio],
    input[type=checkbox] {
        display: none;
        margin: 0;

    }
    input[type=radio] + label,
    input[type=checkbox] + label {
        position: relative;
        padding: 0 0 0 24px;
        line-height: 1.8em;
        margin-right:10px;
        display: inline-block;
        cursor:pointer;
    }
    input[type=radio] + label::before,
    input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        background-color: white;

    }
    input[type=radio] + label::before {
        border: 2px solid #c2ced2;
        border-radius: 30px;
    }
    input[type=checkbox] + label::before {
        border: 2px solid #c2ced2;
    }
    input[type=radio]:checked + label::after,
    input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
    }
    input[type=radio]:checked + label::after {
        left: 5px;
        width: 8px;
        height: 8px;
        margin-top: -4px; 
        background: #19c5ff;
        border-radius: 8px;
    }
    input[type=checkbox]:checked + label::after {
        left: 3px;
        width: 16px;
        height: 8px;
        margin-top: -8px;
        border-left: 3px solid #C2272D;
        border-bottom: 3px solid #C2272D;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
  input[type=checkbox] + label:hover{
    background-color:#FFE;
  }
}

@media screen and ( max-width:479px )
{
	p{
	
	}
    .shadow_img {
      width:130px;
      margin:5px 0;
    }
  .shadow_img img{

  }
}
@media screen and (max-width: 768px){
body{

}
input, select{
font-size:16px;
}
}