@charset "utf-8";

/*
ブルー
    color: #003680;

オレンジ
    color: #FF6100;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);

    display:-ms-flexbox;
    display: -webkit-flex;
    display:-webkit-box;
    display: flex;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -ms-flex-align: center;
  -webkit-align-items: center;
    align-items: center;

    -ms-flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
*/



/* ------------ 見出し ------------ */
h1.h1Design1 {
    font-size: 32rem;
    margin: 32px 0 0;
    width: 100%
}
h1.h1Design1 span {
    display: block;
    max-width: 1220px;
    /*min-width: 980px;*/
    margin: 0 auto;
    padding: 0 10px;
}

h1.h1Design2 {
    position: relative;
    font-size: 32rem;
    margin: 24px 0 0;
    width: 100%;
}
h1.h1Design2:after {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #DDD;
}
h1.h1Design2 span {
    display: block;
    max-width: 1220px;
    /*min-width: 980px;*/
    margin: 0 auto 20px;
    padding: 0 10px;
}

@media screen and (max-width: 768px) {
    h1.h1Design1,
    h1.h1Design2 {
        font-size: 24rem;
    }
}

@media screen and (max-width: 480px) {
    h1.h1Design1,
    h1.h1Design2 {
        font-size: 20rem;
    }
}

h2.h2Design1 {
    font-size: 26rem;
    margin: 0 0 24px;
}

h2.h2Design2 {
    position: relative;
    font-size: 26rem;
    padding: 0 0 6px;
    margin: 0 0 24px;
}

h2.h2Design2:before {
    content: "";
    position: absolute;
    width: 100px;
    border-bottom: 2px solid #F62006;
    z-index: 2;
    left: 0;
    bottom: 0;
}
h2.h2Design2:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 2px solid #DDD;
    z-index: 1;
    left: 0;
    bottom: 0;
}
h2.h2Design2 .indent01 {
    text-indent: -3.5em;
    padding-left: 3.5em;
    display: block;
}

@media screen and (max-width: 768px) {
    h2.h2Design1,
    h2.h2Design2 {
        font-size: 20rem;
    }
}

@media screen and (max-width: 480px) {
    h2.h2Design1,
    h2.h2Design2 {
        font-size: 18rem;
    }
}

h3.h3Design1 {
    font-size: 20rem;
    padding: 0 0 8px;
    margin: 30px 0 24px;
    border-bottom: 1px dotted #DDD;
}

h3.h3Design1 a::after{
    margin-left: 16px;
}

h3 a:hover::after{
    text-decoration: none;
}

h3.h3Design2 {
    font-size: 20rem;
    margin-bottom: 24px;
    padding: 6px 16px;
    background-color: #EFEFEF;
}

h3.h3Design2 a::after{
    margin-left: 16px;
}

@media screen and (max-width: 768px) {
    h3.h3Design1,
    h3.h3Design2 {
        font-size: 18rem;
    }
}

@media screen and (max-width: 480px) {
    h3.h3Design1,
    h3.h3Design2 {
        font-size: 16rem;
    }
}

h2 a:hover::after{
    text-decoration: none;
}


/* テーブル
=================================*/

table {
    border-collapse:collapse;
    width:90%;
    height:auto;
    border-left:1px solid #d6d6d6;
    border-top:1px solid #d6d6d6;
    margin:0 auto 40px auto;
    font-size: 15rem;
    text-align: left;
}

td,th {
    border-right:1px solid #d6d6d6;
    border-bottom:1px solid #d6d6d6;
    padding: 16px 8px;
    text-align:left;
    line-height: 1.2;
}

td small,th small{
    font-weight: normal;
    font-size: 12rem;
}

thead th, .bg_blue {
    background:#DDD;
    /* background:#d8e7fb; */
}

tbody th {
    background:#EFEFEF;
    /* background:#ebf1f9; */
}


strong,th {
    font-weight:bold;
}

/* テキストリンクデザインパターン
=================================*/
.txtLink1 {
    color: #002790;
    text-decoration: underline;
}

.txtCenter {
    text-align: center;
}


/* リスト
=================================*/
.listDisc,
.listDecimal {
    padding: 0 0 0 24px;
    margin: 0 0 16px 0;
}

.listDisc li {
    list-style: disc;
}

.listDecimal li {
    list-style: decimal;
}

/* 追加クラス
=================================*/

.listTable {
    display: table;
    width: 100%;
    margin: 60px auto 30px;
    border-collapse: collapse;
}

.listTable li {
    display: table-cell;
    width: 25%;
    text-align: center;
    border: solid 1px #DDD;
    padding: 10px;
}
.listTable li span {
    font-size: 18rem;
}
.listTable .current {
    background-color: #F3F4F8;
}

@media screen and (max-width: 480px) {
    .listTable li{
        font-size: 10rem;
    }
    .listTable li span {
        font-size: 14rem;
    }
}
.InputErrMsg{
    padding:32px 0;
}
.InputErrMsg li{
    color: #FF0004;
    list-style-type: disc;
    font-size: 16rem;
    margin-left:16px;
    padding-left:16px;
}


.red {color: #FF0004 !important;}

.redbox{
    text-align: center;
    margin: 0 0 16px 0;
    color: #ff0000;
    font-weight: bold;
    font-size: 140%;
}

fieldset {
    border: 0;
}

fieldset legend {
    visibility: hidden;
    height: 0;
}

textarea {
    border: solid 1px #DDD;
    width: 100%;
    padding: 4px;
    line-height: 1.3;
}

@media screen and (max-width: 480px) {
    table {
        width: 100%;
    }
    th,td {
        display: block;
        width: 100%;
        padding: 10px;
        line-height: 1.2;
    }
    input[type="text"], select {
        width: 100%;
    }
}



/* 汎用クラス
=================================*/
/*display*/
.displayNone{display: none;}
.blankNone::after{content:none !important;}
.noWrap{white-space:nowrap;}

/*vertical-align*/
.vaBtm {vertical-align: bottom !important;}
.vaMid {vertical-align: middle !important;}
.vaTop {vertical-align: top !important;}

/*text-align*/
.taLeft {text-align: left !important;}
.taRight {text-align: right !important;}
.taCenter {text-align: center !important;}
.tar {text-align: right !important;}

/*width*/
.w5 {width: 5% !important;}
.w10 {width: 10% !important;}
.w15 {width: 15% !important;}
.w20 {width: 20% !important;}
.w25 {width: 25% !important;}
.w30 {width: 30% !important;}
.w35 {width: 35% !important;}
.w40 {width: 40% !important;}
.w45 {width: 45% !important;}
.w50 {width: 50% !important;}
.w55 {width: 55% !important;}
.w60 {width: 60% !important;}
.w65 {width: 65% !important;}
.w70 {width: 70% !important;}
.w75 {width: 75% !important;}
.w80 {width: 80% !important;}
.w85 {width: 85% !important;}
.w90 {width: 90% !important;}
.w95 {width: 95% !important;}
.w100 {width: 100% !important;}

/*margin*/
.mt0 {margin-top: 0px !important;}
.mt4 {margin-top: 4px !important;}
.mt8 {margin-top: 8px !important;}
.mt12 {margin-top: 12px !important;}
.mt16 {margin-top: 16px !important;}
.mt24 {margin-top: 24px !important;}
.mt32 {margin-top: 32px !important;}
.mt40 {margin-top: 40px !important;}
.mt48 {margin-top: 48px !important;}
.mt64 {margin-top: 64px !important;}
.mt80 {margin-top: 80px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb4 {margin-bottom: 4px !important;}
.mb8 {margin-bottom: 8px !important;}
.mb12 {margin-bottom: 12px !important;}
.mb16 {margin-bottom: 16px !important;}
.mb24 {margin-bottom: 24px !important;}
.mb32 {margin-bottom: 32px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb48 {margin-bottom: 48px !important;}
.mb64 {margin-bottom: 64px !important;}
.mb80 {margin-bottom: 80px !important;}
.ml0 {margin-left: 0px !important;}
.ml4 {margin-left: 4px !important;}
.ml8 {margin-left: 8px !important;}
.ml12 {margin-left: 12px !important;}
.ml16 {margin-left: 16px !important;}
.ml24 {margin-left: 24px !important;}
.ml32 {margin-left: 32px !important;}
.ml40 {margin-left: 40px !important;}
.ml48 {margin-left: 48px !important;}
.ml64 {margin-left: 64px !important;}
.ml80 {margin-left: 80px !important;}

/*padding*/
.pt0 {padding-top: 0px !important;}
.pt4 {padding-top: 4px !important;}
.pt8 {padding-top: 8px !important;}
.pt12 {padding-top: 12px !important;}
.pt16 {padding-top: 16px !important;}
.pt24 {padding-top: 24px !important;}
.pt32 {padding-top: 32px !important;}
.pt40 {padding-top: 40px !important;}
.pt48 {padding-top: 48px !important;}
.pt64 {padding-top: 64px !important;}
.pt80 {padding-top: 80px !important;}
.pb0 {padding-bottom: 0px !important;}
.pb4 {padding-bottom: 4px !important;}
.pb8 {padding-bottom: 8px !important;}
.pb12 {padding-bottom: 12px !important;}
.pb16 {padding-bottom: 16px !important;}
.pb24 {padding-bottom: 24px !important;}
.pb32 {padding-bottom: 32px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb48 {padding-bottom: 48px !important;}
.pb64 {padding-bottom: 64px !important;}
.pb80 {padding-bottom: 80px !important;}





/* 2017.12.05 中野追加 */
body, header, main, footer, .noLocalNav, .layoutWrap {
    /*min-width: auto;*/
}

main {
}

input[size="50"],
input[size="60"]{
    width: 100%;
}


.listTable span {
    font-weight: bold;
}

.listTable .current {
    background-color: #00367F;
    color: #ffffff;
}

.listDecimal li {
    margin-bottom: 24px;
}



button#agreeBtn, button#confirmBtn, button#submitBtn {
    border: 3px solid #00367F;
    border-radius: 2px;
    padding: 12px;
    width: 25%;
    font-size: 18rem;
    font-weight: bold;
}

button#disagreeBtn, button#backBtn {
    background: #ffffff;
    color: #999999;
    border: 3px solid #E0E0E0;
    padding: 12px;
    width: 25%;
    margin-top: 15px;
    font-size: 18rem;
}

button#closeBtn {
    background: #ffffff;
    color: #999999;
    border: 3px solid #E0E0E0;
    padding: 8px;
    width: 15%;
    margin: 40px 0;
    font-size: 14rem;
}

button#disagreeBtn:hover,
button#backBtn:hover {
    background: #00367F;
    color: #ffffff;
    border-color: #00367F;
}

form[name='formsend']{
    margin-top: 10px;
}

.nowrap{white-space:nowrap;}

header {
    height: 83px;
}

h2.h2Design2+ul {
    margin-bottom: 24px;
}

.noIcon li {
    margin-left: 20px;
}

td span.box_label {
    width: 4%;
    display: inline-block;
    margin-bottom: 10px;
}

td #country {
    margin-right: 20px;
}

input[type="text"], select {
    vertical-align: middle;
}

td label[for="country"],
td label[for="city"] {
    display: block;
    height: 32px;
    float: left;
}

.cf:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 1024px){


    table {
        width:100%;
    }
    .noLocalNav, footer, body, header, main, #file_contact_1, .layoutWrap {
        min-width: 100%;
    }

    h2.h2Design2+ul li {
        list-style: disc;
        margin-left: 2em;
    }

    header {
        height: auto;
    }

    button#agreeBtn, button#disagreeBtn, button#confirmBtn, button#submitBtn, button#backBtn, button#closeBtn {
        width: 47%;
        margin-bottom: 15px;
        padding: 16px;
        font-size: 16rem;
    }

    button#backBtn{
        margin-top: 15px;
    }

    input[type='radio']:not(:first-child),
    input[type='checkbox']:not(:first-child){
        margin-top: 15px;
    }
    p.copyright small {
        font-size: 10rem;
    }

    th:not([rowspan="2"]){
        background-color: #EFEFEF;
        /* background-color: #f9fbfd; */
    }
    th[colspan="2"]+th {
        display: none;
    }
    thead tr th {
        display: none;
    }
    tbody {
        border-top: 1px solid #d6d6d6;
    }
    th[rowspan="3"],th[rowspan="5"],th[colspan="2"], th[colspan="3"], th[colspan="2"]+th{
        background-color: #ebf1f9;
    }
    input[name^="tel"],input[name^="fax"],input[name*="zip"] {
        width: 29%;
        vertical-align: middle;
    }
    input[name*="zip"]{
        width: 43%;
    }

    select[name="year_1"],
    select[name="year_2"],
    input[name="hikkoshi_year"],
    input[name="kikoku_year"]{
        width: 22%;
    }


    select[name="month_1"],
    select[name="month_2"],
    input[name="hikkoshi_month"],
    input[name="kikoku_month"] {
        width: 16.5%;
    }

    select[name="day_1"],
    select[name="day_2"],
    input[name="hikkoshi_day"],
    input[name="kikoku_day"] {
        width: 16.5%;
    }

    select[name="time_1"],
    select[name="time_2"] {
        width: 20%;
    }

    select[name="year_visa"],
    select[name="tokoujiki1"],
    select[name="tokoujiki2"]{
        width: 90%;
    }

    input[name="weight"],
    input[name="from_1"],
    input[name="to_1"]{
        width: 80%;
    }

    input[name="from_2"],
    input[name="to_2"]{
        width: 78%;
    }

    input[name="size_1"],
    input[name="size_2"],
    input[name="size_3"]{
         width: 13%;
    }

    input[name="kosu"]{
        width: 73%;
    }

    select[name="month_visa"] {
        width: 50%;
    }

    select[name="familynum"]{
        width: 65%;
    }

    input[name="box_s"],
    input[name="box_m"],
    input[name="box_l"] {
        width: 70%;
    }

    input[size="50"],
    input[size="60"]{
        width: 100%;
    }

    td span.box_label {
        width: 6%;
        margin-bottom: 10px;
    }

    td #country {
        margin-right: 0;
    }

    td label[for="country"],
    td label[for="city"] {
    float: none;
    height: auto;
    display: inline-block;
    width: 90%;
}

    td label[for="country"] input,
    td label[for="city"] input{
        width: 80%;
}

}