@charset "utf-8";

@import url("style_base.css");
@import url("style_base__margin_Normal.css");
@import url("style_base__series_responsive.css");

/* =============================================================
■□■ reset ■□■
============================================================= */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


/* =============================================================
 　■□■ 1. 全体の定義 ■□■
 ============================================================= */
html {
    background: #fff;
    /* 全体【背景】 */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

a {
    color: #1585F4;
    /* リンク【文字色】 */
}

.font_through {
    text-decoration: line-through;
}

.btn01 {
    width: 540px;
    margin: 0px auto 20px auto;
    padding: 20px 10px 15px 10px;
    text-align: center;
    font-size: 28px;
    line-height: 130%;
    font-family: Arial;
    font-weight: normal;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #d83526;
    text-decoration: none;
    background: -moz-linear-gradient(center top, #fe1a00 37%, #ce0100 68%);
    background: -ms-linear-gradient(top, #fe1a00 37%, #ce0100 68%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background: -webkit-gradient(linear, left top, left bottom, color-stop(37%, #fe1a00), color-stop(68%, #ce0100));
    background-color: #fe1a00;
    color: #ffffff;
    display: inline-block;
    text-shadow: 1px 1px 0px #b23e35;
    -webkit-box-shadow: inset 1px 1px 0px 0px #f29c93;
    -moz-box-shadow: inset 1px 1px 0px 0px #f29c93;
    box-shadow: inset 1px 1px 0px 0px #f29c93;
}

.btn01:hover {
    background: -moz-linear-gradient(center top, #ce0100 37%, #fe1a00 68%);
    background: -ms-linear-gradient(top, #ce0100 37%, #fe1a00 68%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background: -webkit-gradient(linear, left top, left bottom, color-stop(37%, #ce0100), color-stop(68%, #fe1a00));
    background-color: #ce0100;
}

.btn01:active {
    margin: 0px auto;
}

/* =============================================================
 　■□■ 2. ヘッダー ■□■
 ============================================================= */
.siteName {
    color: #5c5c5c;
    /* 会社名【文字色】 */
}

.formTitle {
    color: #5c5c5c;
    /* フォームタイトル【文字色】 */
    text-align: center;
    font-size: 2.5em;
}

/* =============================================================
 　■□■ 3. フッター ■□■
 ============================================================= */
#footer div.jCityLogo {
    border-style: solid none none none;
    border-width: 1px;
    border-color: #7fbfff;
    /* コンテンツの区切り線【色】 */
    text-align: center;
}

/* =============================================================
 　■□■ 4. メイン ■□■
 ============================================================= */

/* ====================================
入力・確認画面
==================================== */
.required {
    color: #ff0000;
    /* 必須マーク【文字色】 */
}


/* ----- グループタイトル -----  */
.subTitle {
    color: #5c5c5c;
    /* グループタイトル【文字色】 */
    padding: 20px 0 10px;
    margin-bottom: 20px;
    border: 0;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #d0d0d0, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #d0d0d0, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #d0d0d0, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #d0d0d0, #f0f0f0);
    background-size: 100% 1px;
    /*background-repeat-y: no-repeat;*/
    background-repeat: repeat-x;
    background-position: bottom;
    font-weight: normal;
    font-size: 1.8em;
}

.formTitle {
    padding-bottom: 0;
}

.textDesc {
    text-align: center;
}

/* ---- 全tableの基本デザイン ---- */
.label {
    background-color: ;
    /* 項目名【背景】 */
    color: #000000;
    /* 項目名【文字色】 */
}

.inputField {
    background-color: ;
    /* 入力欄【背景】 */
    color: #000000;
    /* 入力欄【文字色】 */
}

/* ---- 設問用（table、DL）の全体デザイン ---- */

.label,
.inputField {
    font-size: 1.4em;
    color: #000;
}

.inputItem label {
    color: #8c8c8c;
    padding: 10px 15px 10px 0;
    margin-right: 0;
}

.itemTable .label,
.itemTable .inputField {
    /*border-style: solid none solid none;*/
    border-width: 1px;
    border-color: ;
    /* 表（商品）【罫線色】 */
    padding: 6px 0;
}

.formTable .label,
.formTable .inputField {
    display: block;
    width: 100%;

    text-align: left;
}

.formTable th {
    padding: 0;
}

.formTable td {
    padding: 0;
    padding: 5px 0 40px;
}

.formInput .inputField .textAfter {
    margin-top: 0.5em;
    margin-bottom: 0;
}

input,
select,
textarea,
.choice {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 0.9em;
    color: #000000;
}

table.itemTable span.choice {
    border: none;
    width: 100%;
}

table.formTable span {
    margin: 3px;
}

table.itemTable td.label {
    padding: 0 10px;
    border-top: 1px solid #fff;
}

.other_choice {
    margin-top: 10px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/arw_select_down.png);
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 10px 7px;
    background-position: right 10px center;
    vertical-align: middle;
    color: #000000 !important;
    padding: 10px 40px 10px 10px;

}

select::-ms-expand {
    display: none;
}

textarea {
    width: 100% !important;
}

.textPre,
.textAfter {
    margin-top: 0.5em !important;
    font-size: 0.7em;
}

.choice {
    margin-right: 10px;
}

.inputText_H {
    width: 37%;
}

.inputText_L {
    width: 100%;
}

.inputText_M {
    width: 100%;
}

.inputText_S {
    width: 100%;
}



/* ---- 設問用（table、DL）の詳細レイアウト ---- */

/* ----- プライバシーポリシーとご利用規約 -----  */
.policyWrap,
.agreementWrap {
    border-style: solid solid solid solid;
    border-width: 1px;
    border-color: #add6ff;
    /* 表（商品）【罫線色】 */
}

/* ----- submitボタン -----  */

/* ====================================
完了画面
==================================== */

/* =============================================================
 　■□■ input関連 ■□■
 ============================================================= */



/* =============================================================
タブレット
============================================================= */
@media screen and (min-width:600px) and (max-width:959px) {

    .formTable .inputField {
        padding: 5px 10px 30px 10px;
    }

    .formTable .label {
        padding: 10px 10px 0 10px;
    }

    .btn01 {
        width: 85%;
        max-width: 540px;
    }
}


/* =============================================================
スマホ
============================================================= */
@media screen and (max-width: 599px) {
    .formTable .inputField {
        padding: 0px 10px 20px 10px;
    }

    .formTable .label {
        padding: 10px 10px 0 10px;
    }

    .inputItem label {
        padding: 10px 0px 10px 0;
    }

    input,
    select,
    textarea {
        margin: 4px 0px 4px 0;
    }

    select {
        padding: 10px 25px 10px 10px;
        background-position: 95% 50%;
    }

    .label,
    .inputField {
        font-size: 1.1em;
        color: #000;
    }

    .btn01 {
        width: 90%;
        font-size: 20px;
        padding: 15px 10px 12px 10px;
    }

}