@charset "utf-8";

html {
    background-color: #DDD !important;
}


@media screen and (max-width: 750px) {
  body {
    background: #FFF;
  }
}

@media screen and (min-width: 751px) {
  body {
    background: #FFF;
    width: 700px;
    margin: 0 auto;
  }
}


/*body {
  background: #FFF;
}
*/
#wrapper {
margin: 10px;
}
/************************************************
Header
*************************************************/
#header {
width: 100%;
margin-bottom: 30px;
}
#header h1 {
}
#header #logo {
text-align: center;
margin: 10px 0;
}
.anno {
font-size: 12px;
padding: 6px 10px 0px 10px;
}
/************************************************
section
*************************************************/
section {
margin-top: 20px;
}
section p {
margin-bottom: 18px;
}
section ul {
margin-bottom: 8px;
}
section .chain {
margin: 0px 0px 40px 0px;
padding: 0px;
vertical-align: bottom;
}
section .chain_mb20 {
margin: 0px 0px 20px 0px;
}
section .chain p,
section .chain_mb20 p {
margin: 0px;
}
/************************************************
Footer
*************************************************/
#footer {
padding: 10px;
margin-top: 60px;
background:#f1f4e1;
}
#footer-inner {
overflow:hidden;
text-align: left;
}
#footer nav {
margin-bottom: 15px;
font-size: 14px;
float:none;
}
#footer nav a {
color: #333;
text-decoration: underline;
}
#copy{
clear:both;
}
#copy p {
text-align: center;
font-size: 10px;
margin-top: 8px;
color: #333;
}
#footer-link{
float:right;
}
#footer-link li{
text-align:left;
padding-top:4px;
}
#footer_li {
list-style: none;
}
/************************************************
Box
*************************************************/
.box_a {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #fffacd;
padding: 10px;
}
.box_b {
margin: 0 10px 20px;
}
.box_b dl dt {
font-weight: bold;
font-size: 110%;
margin-bottom: 5px;
padding-bottom: 2px;
border-bottom: 1px dotted #CCC;
}
.box_c {
margin: 0 10px;
}
.clm2_box .left_box {
width: 49%;
float: left;
}
.clm2_box .right_box {
width: 49%;
float: right;
}
/*アップセルアンケート*/
.box_d {
margin: 30px auto 50px auto;
background: none repeat scroll 0 0 #FFFFCB;
padding: 8px 10px 10px 10px;
text-align: left;
}
/************************************************
unit
*************************************************/
.unit_a {
background: url(../../s2_hts/s3_c4_box_all.jpg) repeat-y center top;
background-size: 100%;
padding: 10px 15px 10px 15px;
}
.unit_s16 {
background: url(../../s16_ns/s16_c3_box_all.jpg) repeat-y center top;
background-size: 100%;
padding: 10px 15px 10px 15px;
}
.unit_a2 {
border: 3px solid #87cefa;
padding: 10px 10px 0px 10px;
}
.unit_a3 {
border: 3px solid #ff8bac;
padding: 10px 10px 0px 10px;
}
.unit_b {
padding: 0px 10px 10px 10px;
margin: 0px;
border-top: none;
background: url(../../s16_ns/s16_c4_box_all.jpg) repeat-y center top;
background-size: 100%;
line-height: 160%;
}
.unit_c {
background: #FFF;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 5px solid #F5E07A;
padding: 10px;
}
.unit_d {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 5px solid #F36;
padding: 10px;
}
.unit_e {
background:#FCC;
box-shadow: 2px 2px 5px #666;
-moz-box-shadow: 2px 2px 5px #666;
-webkit-box-shadow: 2px 2px 5px #666;
}
.unit_f {
width: 98%;
background: url(../../s0_hts/s0_clo1_bg01.jpg) no-repeat 5% 5%;
background-size: 16%;
background-color: #FFF;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 5px solid #F5E07A;
padding: 10px;
margin: 0px auto 18px auto;
box-sizing: border-box;
}
.unit_f_ver2 {
width: 98%;
background-color: #FFF;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 5px solid #f00;
padding: 10px;
margin: 0px auto 18px auto;
box-sizing: border-box;
}
.unit_g {
border-top: none;
border-right: 3px solid #b56b0a;
border-bottom: 3px solid #b56b0a;
border-left: 3px solid #b56b0a;
padding: 20px 10px 0px 10px;
margin: -10px 0px 0px 0px;
}
.unit_info {
border-top: none;
border-right: 3px solid #e2cd82;
border-bottom: 3px solid #e2cd82;
border-left: 3px solid #e2cd82;
padding: 20px 10px 0px 10px;
margin: -28px 0px 0px 0px;
}
/************************************************
Title
*************************************************/
.ttl01,
.form_title {
background-color:#a6bb39;
color: #FFF;
font-weight: bold;
padding: 10px 10px;
margin-bottom: 10px;
}
/************************************************
Btn
*************************************************/
.btn_topc00 {
background: -moz-linear-gradient(top, #FFF, #EFEFEF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EFEFEF));
border-top: 1px solid #CCC;
width: 100%;
-moz-box-shadow: 1px 1px 2px #999;
-webkit-box-shadow: 1px 1px 2px #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/************************************************
border
*************************************************/
.border_box01 {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding: 50px 0;
margin: 10px 0;
}
/************************************************
Table
*************************************************/
.table_a {
width: 100%;
}
.table_a td {
vertical-align: middle;
text-align: center;
}
.order_info_table {
margin-bottom: 5px;
}
.table_b,
.order_info_table {
border-left: 1px solid #999;
border-top: 1px solid #999;
width: 100%;
font-size: 15px;
}
.table_b th,
.order_info_table th {
background: #f4edd2;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
padding: 8px;
vertical-align: middle;
text-align: center;
color: #333;
width: 30%;
}
.table_b td,
.order_info_table td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
padding: 8px;
vertical-align: middle;
}
.table_c {
border-left: 1px solid #999;
border-top: 1px solid #999;
width: 100%;
}
.table_c th {
background: #e0ecfa;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
padding: 8px;
vertical-align: middle;
text-align: left;
color: #333;
width: 30%;
}
.table_c td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
padding: 8px;
vertical-align: middle;
}
.table_d {
width: 100%;
}
.table_d th {
vertical-align: top;
width: 30px;
}
.table_d td {
vertical-align: top;
padding: 8px 0px 0px 0px;
font-size: 92%;
}
/************************************************
icon
*************************************************/
.must {
color: #FFF;
background: #F00;
font-weight: bold;
padding: 3px;
font-size: 12px;
margin-left: 10px;
vertical-align: middle;
}
/************************************************
form
*************************************************/
select,
input {
padding: 10px 5px;
font-size:100%;
}
input[type="checkbox"],
input[type="radio"] {
-webkit-transform: scale(1.8);
transform: scale(1.8);
height: 35px;
vertical-align: middle;
}
.form-section01 {
border: 3px solid #926a1b;
border-radius: 10px 10px 10px 10px;
padding: 10px;
background-color: #f4f0e8;
margin-bottom:10px;
}
.form-section01 li {
margin-bottom: 10px;
}
.form_notice {
font-size: 13px;
color: #666;
vertical-align: middle;
}
#agreement {
background: #ede4c4;
padding: 10px;
margin-top: 10px;
}
#annotation {
background:#ffffff;
padding: 10px;
}
/************************************************
border
*************************************************/
.border_b01 {
border-bottom: 2px solid #ede4c4;
background:#fff4cb;
padding: 5px 0px;
}
.border_b02 {
border-bottom: 3px double #F00;
}
.border_b03 {
border-bottom: 1px solid #FF0000;
padding-bottom: 2px;
}
.border_b04 {
border-bottom: 1px dashed #000000;
padding-bottom: 30px;
}
/************************************************
Margin Padding
*************************************************/
.m0 {margin: 0px;}
.m10 {margin: 10px;}
.mt-10 {margin-top: -10px;}
.mt5 {margin-top: 5px;}
.mt7 {margin-top: 7px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mr5 {margin-right: 5px;}
.mr7 {margin-right: 7px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr40 {margin-right: 40px;}
.mr50 {margin-right: 50px;}
.mb5 {margin-bottom: 5px;}
.mb7 {margin-bottom: 7px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.ml5 {margin-left: 5px;}
.ml7 {margin-left: 7px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;}
.pt5 {padding-top: 5px;}
.pt7 {padding-top: 7px;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt40 {padding-top: 40px;}
.pt50 {padding-top: 50px;}
.pr5 {padding-right: 5px;}
.pr7 {padding-right: 7px;}
.pr10 {padding-right: 10px;}
.pr20 {padding-right: 20px;}
.pr30 {padding-right: 30px;}
.pr40 {padding-right: 40px;}
.pr50 {padding-right: 50px;}
.pb5 {padding-bottom: 5px;}
.pb7 {padding-bottom: 7px;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pl5 {padding-left: 5px;}
.pl7 {padding-left: 7px;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}
.pl40 {padding-left: 40px;}
.pl50 {padding-left: 50px;}
/************************************************
Float Align
*************************************************/
.f_left {float: left;}
.f_right {float: right;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
/************************************************
form
*************************************************/
#landing_form {
background: #FFF;
border-bottom: 1px solid #999;
}

.form_box {
border-right: 1px solid #999999;
border-left: 1px solid #999999;
}
span.form_required,
span.form_notice {
color: #FFF;
background: #F00;
font-weight: bold;
padding: 3px;
font-size: 12px;
margin-left: 10px;
vertical-align: middle;
}
.form_box_label {
background: #f4edd2;
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
padding: 8px;
vertical-align: middle;
text-align: left;
color: #333;
margin-bottom: 0;
}
.form_input_box {
padding: 8px;
}
.form_example {
padding: 0 8px 8px;
color: #666666;
font-size: 13px;
}
.form_input_box input[type="text"],
.form_input_box input[type="email"] {
width: 95%;
}
.form_input_box input.zip1,
.form_input_box input.zip2 {
width: 25%;
}
.form_input_box input.tel_no {
width: 95%;
}
.form_input_box input.input_year {
width: 80px;
}
.form_input_box label {
margin: 0 7px;
vertical-align: bottom;
}
#agreement table {
width: 100%;
border: 0;
margin: 0 5px;
}
#agreement table .agreement_check {
vertical-align: top;
width: 38px;
}
#agreement table .agreement_label {
vertical-align: middle;
}
#CheckBlockTextareaCheckarea {
width: 95%;
}
.error-message {
margin: 8px;
color: #F00;
font-weight: bold;
background: #FFD0D0;
font-size: 13px;
}
#form_payment_method_credit {
display: none;
}
#form_payment_method_credit .credit_box {
width: 99% !important;
}

.customer_info,
#order_info_payment_box {
margin-top: 20px;
}

#order_info_checkout,
#form_upsell {
background: #FFF;
border-bottom: 1px solid #999;
}
#order_info_payment {
border-bottom: 1px solid #999;
border-top: 1px solid #999;
color: #333333;
}
.form_box {
border-right: 1px solid #999;
border-left: 1px solid #999;
}
span.form_required,
span.form_notice {
color: #FFF;
background: #F00;
font-weight: bold;
padding: 3px;
font-size: 12px;
margin-left: 10px;
}
.form_box_label {
background: #ede4c4;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
padding: 8px;
vertical-align: middle;
text-align: left;
color: #333;
margin-bottom: 0;
}
.form_input_box {
padding: 8px;
margin-bottom: 0;
background: #FFFFFF;
}
.credit_input {
width: 97%;
}
.credit_box {
margin-bottom: 5px;
}
.form_example,
.credit_example {
padding: 0 8px 8px;
color: #666666;
font-size: 13px;
}
.form_input_box input.tel_no,
.form_input_box input.card_date{
width: 20%;
}
.before_go {
text-align:center;
}
/************************************************
form
*************************************************/
#np_area,
#daibiki_area {
border: 1px solid #000;
margin: 10px 0;
padding: 10px;
}
#np_area img {
width: 100%;
}
#np_area p {
margin: 20px 0px 0px;
}
#daibiki_area p {
margin: 0px;
}
.service_charge {
  color: red;
  font-size: 150%;
  font-weight: bold;
}
/************************************************
半角・全角制御
*************************************************/
#OrderFamilyKana,
#OrderGivenKana {
ime-mode: active;
}
#OrderZip1,
#OrderZip2 {
ime-mode: disabled;
}
#OrderTelNo1,
#OrderTelNo2,
#OrderTelNo3,
#OrderEmail,
#OrderEmailConfirm,
#OrderBirthdayYear {
ime-mode: disabled;
}
/************************************************
s4・URL
*************************************************/
.url {
background: none repeat scroll 0 0 #FFE7E7;
border: 1px solid #F07BA2;
margin: 0 auto 30px;
padding: 5px 0;
width: 100%;
}
.url p{
width: 100%;
padding: 10px;
word-break: break-all;
box-sizing: border-box;
}