@charset "UTF-8";

html {
    height: 100%;
    font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
    color: #333;
    background: #fff
}

article,
body,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
section,
td,
textarea,
th,
ul {
    padding: 0;
    margin: 0
}

table {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-spacing: 0;
    border-collapse: collapse
}

img {
    vertical-align: top;
    border: 0
}

address,
em,
th {
    font-style: normal;
    font-weight: 400
}

li {
    list-style: none
}

strong {
    font-weight: 700
}

clearfix:after {
    display: block;
    clear: both;
    content: ""
}

.flL {
    float: left !important
}

.flR {
    float: right !important
}

.flN {
    float: none !important
}

.mt0 {
    margin-top: 0 !important
}

.mt5 {
    margin-top: 5px !important
}

.mt10 {
    margin-top: 10px !important
}

.mt15 {
    margin-top: 15px !important
}

.mt20 {
    margin-top: 20px !important
}

.mt25 {
    margin-top: 25px !important
}

.mt30 {
    margin-top: 30px !important
}

.mt35 {
    margin-top: 35px !important
}

.mt40 {
    margin-top: 40px !important
}

.mt45 {
    margin-top: 45px !important
}

.mt50 {
    margin-top: 50px !important
}

.pt0 {
    padding-top: 0 !important
}

.pt5 {
    padding-top: 5px !important
}

.pt10 {
    padding-top: 10px !important
}

.pt15 {
    padding-top: 15px !important
}

.pt20 {
    padding-top: 20px !important
}

.pt25 {
    padding-top: 25px !important
}

.pt30 {
    padding-top: 30px !important
}

.pt35 {
    padding-top: 35px !important
}

.pt40 {
    padding-top: 40px !important
}

.pt45 {
    padding-top: 45px !important
}

.pt50 {
    padding-top: 50px !important
}

.mb0 {
    margin-bottom: 0 !important
}

.mb5 {
    margin-bottom: 5px !important
}

.mb10 {
    margin-bottom: 10px !important
}

.mb15 {
    margin-bottom: 15px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.mb25 {
    margin-bottom: 25px !important
}

.mb30 {
    margin-bottom: 30px !important
}

.mb35 {
    margin-bottom: 35px !important
}

.mb40 {
    margin-bottom: 40px !important
}

.mb45 {
    margin-bottom: 45px !important
}

.mb50 {
    margin-bottom: 50px !important
}

.pb0 {
    padding-bottom: 0 !important
}

.pb5 {
    padding-bottom: 5px !important
}

.pb10 {
    padding-bottom: 10px !important
}

.pb15 {
    padding-bottom: 15px !important
}

.pb20 {
    padding-bottom: 20px !important
}

.pb25 {
    padding-bottom: 25px !important
}

.pb30 {
    padding-bottom: 30px !important
}

.pb35 {
    padding-bottom: 35px !important
}

.pb40 {
    padding-bottom: 40px !important
}

.pb45 {
    padding-bottom: 45px !important
}

.pb50 {
    padding-bottom: 50px !important
}

.pl0 {
    padding-left: 0 !important
}

.pl5 {
    padding-left: 5px !important
}

.pl10 {
    padding-left: 10px !important
}

.pl15 {
    padding-left: 15px !important
}

.pl20 {
    padding-left: 20px !important
}

.pl25 {
    padding-left: 25px !important
}

.pr0 {
    padding-right: 0 !important
}

.pr5 {
    padding-right: 5px !important
}

.pr10 {
    padding-right: 10px !important
}

.pr15 {
    padding-right: 15px !important
}

.pr20 {
    padding-right: 20px !important
}

.pr25 {
    padding-right: 25px !important
}

.taL {
    text-align: left !important
}

.taC {
    text-align: center !important
}

.taR {
    text-align: right !important
}

.fwB {
    font-weight: 700 !important
}

.fwN {
    font-weight: 400 !important
}

.clB {
    clear: both !important
}

#form img {
    display: block;
    width: 100%;
    vertical-align: top
}
@media screen and (min-width:750px) {
    #form{   
        margin: 0 auto;    
        width: 750px;
    }  
}

.offer_head--confirm {
    margin-bottom: 6.5%
}

.form_title,
.ttl01 {
    padding: 8px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background: -moz-linear-gradient(center top, #ee7321 #ee7321);
    background: -webkit-gradient(linear, left top, left bottom, from(#ee7321), to(#ee7321));
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 1px 1px 3px #666;
    -webkit-box-shadow: 1px 1px 3px #666;
    box-shadow: 1px 1px 3px #666
}

.table_a {
    width: 100%
}

.table_a td {
    text-align: center;
    vertical-align: middle
}

.order_info_table {
    margin-bottom: 5px
}

.order_info_table,
.table_b {
    width: 100%;
    border-top: 1px solid #ebae84;
    border-left: 1px solid #ebae84
}

.order_info_table th,
.table_b th {
    width: 32%;
    color: #333;
    text-align: center;
    background: #f4efdb
}

.order_info_table td,
.order_info_table th,
.table_b td,
.table_b th {
    padding: 9pt;
    font-size: 1rem;
    vertical-align: middle;
    border-right: 1px solid #ebae84;
    border-bottom: 1px solid #ebae84
}

.table_c {
    width: 100%;
    border-top: 1px solid #b0133e;
    border-left: 1px solid #b0133e
}

.table_c th {
    width: 30%;
    color: #333;
    text-align: left;
    background: #f4c7d4
}

.table_c td,
.table_c th {
    padding: 8px;
    vertical-align: middle;
    border-right: 1px solid #b0133e;
    border-bottom: 1px solid #b0133e
}

.table_d {
    width: 100%
}

.table_d th {
    width: 38px
}

.table_d td,
.table_d th {
    vertical-align: top
}

.form_area {
    padding: 0 2%
}
#form_area {
    margin: 0 auto;
    padding: 0 2%;
    max-width: 750px;
}
input,
select {
    padding: 10px 5px;
    font-size: 15px
}

input[type=checkbox],
input[type=radio] {
    height: 35px;
    vertical-align: top;
    -webkit-transform: scale(2.2);
    transform: scale(2.2)
}

.form-section01 {
    padding: 10px;
    background-color: #f4c7d4;
    border: 3px solid #b0133e;
    border-radius: 10px 10px 10px 10px
}

.form-section01,
.form-section01 li {
    margin-bottom: 10px
}

.form_notice {
    font-size: 9pt;
    color: #666
}

#agreement {
    padding: 10px;
    margin-top: 10px;
    background: #f4c7d4
}

#agreement a {
    color: #2d6fca;
    text-decoration: underline
}

#annotation {
    padding: 10px
}

#annotation,
#landing_form {
    background: #fff
}

#landing_form,
.form_box {
    border-bottom: 1px solid #ebae84
}

.form_box {
    border-right: 1px solid #ebae84;
    border-left: 1px solid #ebae84
}

span.form_notice,
span.form_required {
    padding: 3px;
    margin-left: 10px;
    font-size: 9pt;
    font-weight: 700;
    color: #fff;
    background: red
}

.form_box_label {
    margin-bottom: 0;
    color: #333;
    text-align: left;
    vertical-align: middle;
    background: #f4efdb;
    border-top: 1px solid #ebae84;
    border-bottom: 1px solid #ebae84
}

.form_box_label,
.form_input_box {
    padding: 8px;
    font-size: 1rem
}

.form_example,
.form_input_box p {
    font-size: 1rem
}

.form_example {
    padding: 0 8px 8px;
    color: #666
}

.form_example p {
    color: #c00
}

.form_input_box input[type=email],
.form_input_box input[type=text] {
    width: 95%
}

.form_input_box input.zip1,
.form_input_box input.zip2 {
    width: 30%
}

.form_input_box input.input_year,
.form_input_box input.tel_no {
    width: 20%
}

.form_input_box #OrderBirthdayDay,
.form_input_box #OrderBirthdayMonth {
    width: 25%
}

.form_input_box label {
    margin: 0 7px;
    vertical-align: bottom
}

#form-order {
    margin-top: 4%
}
#confirm_button, #form .finish_button img{
    margin: 4% auto;
    text-align: center;
}
#confirm_button img,
#form .finish_button img{   
    width: 90%;    
    width: 90%;
} 
@media screen and (min-width:750px) {
    #confirm_button img,
    #form .finish_button img{       
        width: 65%;
    }  
}

#agreement table {
    width: 100%;
    margin: 0 5px;
    border: 0
}

#agreement table .agreement_check {
    width: 38px;
    vertical-align: top
}

#agreement table .agreement_label {
    vertical-align: middle
}

#CheckBlockTextareaCheckarea {
    width: 95%
}

.error-message {
    margin: 8px;
    font-size: 9pt;
    font-weight: 700;
    color: red;
    background: #ffd0d0
}

#form_payment_method_credit {
    display: none
}

#input_payment_method {
    padding-bottom: 70%;
    background: url(../images/cre_sp_230606.jpg)0 bottom no-repeat;
    background-size: contain
}

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

#form_checkout_title {
    display: none
}

#form_upsell,
#order_info_checkout {
    background: #fff;
    border-bottom: 1px solid #ebae84
}

#order_info_payment {
    color: #333;
    border-top: 1px solid #ebae84;
    border-bottom: 1px solid #ebae84
}

#np_area {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #000
}

#np_area p {
    margin: 20px 0 0
}

#OrderFamilyKana,
#OrderGivenKana {
    ime-mode: active
}

#OrderBirthdayYear,
#OrderEmail,
#OrderEmailConfirm,
#OrderTelNo1,
#OrderTelNo2,
#OrderTelNo3,
#OrderZip1,
#OrderZip2 {
    ime-mode: disabled
}

#form_payment_method_select,
select {
    width: 100%
}

.site-footer .box-info {
    margin: 20px 10px 15px;
    text-align: left;
    border-top: 2px solid #ccc
}

.site-footer .footer-logo {
    margin-top: 15px
}

.site-footer .footer-logo img {
    width: 15%
}

.site-footer ul {
    margin-top: 10px
}

.site-footer ul li {
    display: block;
    padding: 4px 0
}

.site-footer ul li a:link {
    color: #0d5eaa
}

.site-footer .copy {
    padding: 6px 0;
    font-size: .8rem;
    color: #fff;
    text-align: center!important;
    background: #0d5eaa
}
@media screen and (min-width:750px) {
    .site-footer .box-info{
      width: 750px;
      margin: 20px auto 15px;
    }
    .site-footer ul li {
        display: inline-block;
        padding-right:2em;
  }
}
/* -------- */

/* 購入時確認画面メッセージ */
#order_info_confirm_message label {
    cursor: pointer;
    text-decoration: underline;
    color: #0169d8
}

#order_info_confirm_message input {
    display: none
}

#order_info_confirm_message .acc_cont {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: .8s;
    display: block
}

#order_info_confirm_message input:checked~.acc_cont {
    padding-bottom: 10px;
    height: auto;
    opacity: 1
}