@charset "utf-8";
h1{padding:12px 0; text-align:center;}

h3{background-color:#E3EDF4; color:#003366; border:none; border-left:12px solid #003366;}
img{ max-width:100%;}

#question{width:80%; margin:24px auto;}

/*ご注文情報*/
table.form_table{border-bottom:1px solid #999999; width:100%; margin-bottom:40px;}
table.form_table caption{color:#FFFFFF; padding:4px 12px; text-align:left; font-size:1.3em; font-weight:bold; background-color:#003366;}
table.form_table th, table.form_table td{padding:18px 6px; border-top:1px solid #999999;}
table.form_table th{white-space:nowrap; width:24%; background-color:#EEEEEE; color:#333333; border-right:1px solid #CCCCCC;}
table.form_table td p{font-size:0.8em; margin:8px 0 0; padding:0;}
table.form_table td p.note{color:#336699; font-size:0.9em; margin-top:0; margin-bottom:6px;}
table.form_table td p.nomal{font-size:1em; margin-top:12px;}
table.form_table td.order{padding:0;}

table.form_table th span{display:block;}
table.form_table th span.required{font-size:0.9em; white-space:normal; font-weight:normal;}
table.form_table th span.center{ display:block; text-align:center; font-size:0.75em;}

.myError{color:#CC0000;}


/*診察券番号入力*/
.examination_repeat{ border:1px solid #0099FF; padding:12px; margin:12px auto;}

.q1{color:#0E80C0;  padding-bottom:12px;}
.q1 p.txt{font-size:0.8em; color:#666666;}
p.number_ttl{margin-left:4px;}

p.notes{color:#CC0000;}


/*質問の表示非表示**/
.question_radio{opacity: 0;}
#question label{margin:12px 0;}
/*スマイルクリニックでED薬を購入するのは初めてですか*/
ul#examination_label{ list-style:none;}
ul#examination_label li{margin:12px auto;}
ul#examination_label span{
  border-radius: 50%;
  border: 1px solid #666666;
  width:14px;
  height:14px;
  background: #FFF;
  display: inline-block;
  position: relative;
  margin-right: 8px;
}
ul#examination_label span::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: #0078D4;
  top: 50%;
  transform: translateY(-50%);
  left:2px;
  opacity: 0;
}


#examination-no-ctrl:checked ~ #examination_label #label-1 span::after{opacity: 1;}
#examination-no-no-ctrl:checked ~ #examination_label #label-2 span::after{opacity: 1;}
#examination-yes-ctrl:checked ~ #examination_label #label-3 span::after{opacity: 1;}

.examination_repeat, .examination_repeat_no, .examination_first{display:none;}

#q2, #q3{display:none;}

#examination-no-ctrl:checked ~ .examination_repeat{max-height: initial; opacity: 1; filter: alpha(opacity=100);/*IE*/ zoom:1; display:block; overflow:visible;}

#examination-no-no-ctrl:checked ~ .examination_repeat_no, #examination-no-no-ctrl:checked ~ #q2{max-height: initial; opacity: 1; filter: alpha(opacity=100);/*IE*/ zoom:1; display:block; overflow:visible;}

#examination-yes-ctrl:checked ~ .examination_first{max-height: initial; opacity: 1; filter: alpha(opacity=100);/*IE*/ zoom:1; display:block; overflow:visible;}
#examination-yes-ctrl:checked ~ .oederlist{display:none;}
#examination-yes-ctrl:checked ~ .box, #examination-yes-ctrl:checked ~ .buttons{display:none;}

.examination_first{text-align:center; line-height:2em;}
.examination_first a{display:inline-block; background-color:#BCE2E8; padding:8px 18px; border-radius:30px; color:#336600; text-decoration:none;}
.examination_first a:hover{background-color:#A5E2CD;}


/******/

.oederlist{margin-top:60px;}



/************/
/*********************************/
/**formタグ***********************/
/*はいいいえ*/
.radiobox{display:block;}
.radiobox input[type=radio] {display: none;}
.radiobox label{display:inline-block; cursor: pointer; padding:10px 20px; margin:0 5px; display:inline-block; -webkit-border-radius:8px;	-moz-border-radius:8px; border-radius:8px; background:#EFEFEF; border:1px solid #939393; color:#4C4C4C; font-size:18px; text-align: center; line-height: 1; transition: .2s;}
.radiobox label:hover{ background-color:#CDD9E9;}
.radiobox input[type="radio"]:checked + .switch-on {background-color:#006699; color: #fff;}
.radiobox input[type="radio"]:checked + .switch-off {background-color: #006699; color: #fff;}

ul.radiobox .btn{float:left; text-align:center; margin-right:12px;}
ul.radiobox .btn span{font-size:0.85em;}
ul.radiobox .btn span{ margin-top:18px; position:relative; background:#F3EEE4; padding:2px; text-align:center; color:#666600; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;}
ul.radiobox .btn span:after{border: solid transparent; content:''; height:0; width:0; pointer-events:none; position:absolute; border-color: rgba(255, 224, 235, 0); border-top-width:10px; border-bottom-width:10px; border-left-width:10px; border-right-width:10px; margin-left: -10px; border-bottom-color:#F3EEE4;   bottom:100%; left:50%;}
ul.radiobox:after{float:none; clear:both; content:""; display:block;}

/*ED治療薬を服用したことがありますか-はい*/
.used{border:1px solid #999999; padding:12px;}
.used p{margin-top:16px;}

/*希望の製剤*/
table.order_table{width:auto; border:none;}
table.order_table th, table.order_table td{border:none;}
table.order_table th{background-color:#FFFFFF; text-align:left; vertical-align:top; width:auto; border-top:1px solid #999999;}
table.order_table td{padding:8px; text-align:right; border-top:1px solid #999999;}
table.order_table tbody tr:first-child td, table.order_table tbody tr:first-child th{border:none;}


/*電話診療日確定のお知らせ方法*/
/*お支払方法*/
/*お届け方法*/
ul.howto{margin:0; list-style:none;}
ul.howto li{margin:0 0 16px 0;}

/*販売事業者 返品について*/
div.box{font-size:0.9em;}
dl.shop{display: flex; margin:0; padding:1%; border:1px solid #CCCCCC; flex-wrap: wrap; width:98%;}
dl.shop dt, dl.shop dd{box-sizing: border-box;margin:0; padding:4px 0; border-bottom: 1px solid #EEE; display: flex;}
dl.shop dt{width:16%;}
dl.shop dd{width:84%;}
dl.shop dt:last-of-type{border:none;}
dl.shop dd:last-of-type{border:none;}

/*患者様情報とご本人確認書類をお願いします。*/
div.files_up{display:block; margin:20px auto 20px 0;}
div.files_up p{margin-left:12px;}
input.files{border:none; font-size:1em;}


/*初診用問診票*/
.box_line{border:1px solid #CCCCCC;}

.questions{width:100%; margin:20px auto;}
.questions dl dt, .questions dl dd{margin:0; padding:4px;}
.questions dl dt{color:#0E80C0; font-weight:bold; background-color:#EFF5FA;}
.questions dl dt:before{content:"■";}
.questions dl dd{margin-left:12px; margin-bottom:20px; margin-top:8px;}
.questions dl dd label{margin-right:16px; margin-top:6px; margin-bottom:6px; display:inline-block;}
.questions dl dd.therapy label{}



/*当院は何でお知りになりましたか？(複数選択可)*/
div.vist_q{text-align:center; margin-top:40px; margin-bottom:22px;}
.vist_q label{margin-right:16px; margin-top:6px; margin-bottom:6px; display:inline-block;}

/*送信内容の確認ボタン*/
p.buttons{text-align:center; margin-top:24px;}
input.submit{
	width:290px; margin:0 auto; display:block;
	color:#FFFFFF; font-weight:bold; font-size:1.4em; cursor:pointer;	
	padding:16px;
	border:1px solid #666666;
	background-color:#161D62;
	background-image: linear-gradient(#004490 0%, #161D62 100%);	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	zoom: 1;
	}


/*カレンダー*/
.date_calender{display:block; margin-bottom:12px;}
.calender_hour{}
input.calender_area{}

/*input*/
input[type=text]{
	padding: 6px 10px;
	margin:0 6px 0 0; background: #fff;	
	border:1px solid #666666;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
input.order_num{width:20px; text-align:right; margin:0 4px;}
input.ch_other{ width:80%;}
input.mail, input.nname{width:300px;}
input.card_number{ width:160px;}
input.age{width: 30px;}
input.body_data{width:80px;}
input.bp_data{width:50px;}

input[type=button]{width:200px; padding:12px; margin:0 auto;}
input[type=submit]{margin:0 auto;}

/*select*/
select.dropdown{
	border:1px solid #666666;
	padding: 6px 10px;
	color: #333;
	background: #fff;
	border-radius: 5px;
	cursor:pointer;
	-webkit-border-radius: 5px;
	background-image:linear-gradient(#EFEFEF 0%, #CCCCCC 100%);
	-moz-border-radius: 5px;
	zoom: 1;
	}

/*テキスト欄*/
textarea{
	width:500px;
	background: #fff;	
	border:1px solid #666666;
	padding: 6px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

/*ラジオボタン*/
.radio{display:flex;}
.radio span{}
.radio .txt{flex:1;}


@media screen and (max-width:1098px) {
textarea{width:80%;}
}

	
@media screen and (max-width:880px) {
#online{width:100%; margin:0 auto 60px;}

}

@media screen and (max-width:800px) {
#question{width:100%; margin:24px auto;}
div.terms_conditions span{display:block;}
input.mail,
input.nname{width:80%;}

}

@media screen and (max-width:780px) {
textarea.protxt{width:90%;}

input.mail,
input.nname{width:80%;}
}


@media screen and (max-width:640px) {
div.thanks{width:auto; text-align:left;}

div.reserves{text-align:left;}
h2 span{display:block;}

p.info{text-align:left;}


table.form_table{margin:20px auto; width:100%;}
table.form_table th{ border-right:none; width:auto;}
table.form_table th, table.form_table td{display:block; text-align:left;}
table.form_table th span.center{display:inline;}

table.form_table th span.bl:before{content:"・";}
table.form_table th span.bl{display:inline;}

table.form_table th span{display:inline-block; margin-right:12px;}

table.form_table table.order_table{width:100%;}
table.form_table table.order_table th, table.form_table table.order_table td{display:table-cell;}


dl.shop dt{width:100%; display:block; border:none; padding-bottom:0;}
dl.shop dd{width:100%; display:block;}

p.send{text-align:left;}
p.info{text-align:left;}
}

@media screen and (max-width:560px) {
table.form_table table.order_table th span{display:block;}
}

@media screen and (max-width:480px) {
table.form_table table.order_table td{display:block;}

div.vist_q{text-align:left;}

}

@media screen and (max-width:360px) {
h2{font-size:1.2em;}
}