@charset "UTF-8";

/* ------------------------------
BASE
------------------------------ */
html {
    font-size: 62.5%;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: "游ゴシック", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
    color: #333;
    background: #fff;
    text-align: center;
}

div, p, h1, h2, h3, h4, h5, h6, form, li, ul, ol, dl, dd, dt, table {
    margin: 0;
    padding: 0;
}

.clear {
    clear: both;
}

/* Micro clearfix */
.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.wrap {
    zoom: 1;
}

.wrap:before,
.wrap:after {
    content: "";
    display: table;
}

.wrap:after {
    clear: both;
}

/* サイズ調整用 */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.error_msg_center {
    color: #FF0000;
    font-size: 16px;
    box-sizing: border-box;
    display: block;
    text-align: center;
}

.error_msg_left {
    color: #FF0000;
    font-size: 16px;
    box-sizing: border-box;
    display: block;
    text-align: left;
}

/*** 4インチ、7インチ スマホサイト（PB75PayEntryInput.jsp）のリセット設定 PCサイトで必要な設定 ***/
.sp4 {
    display: none;
}

.sp7 {
    display: none;
}

#left1em_sp4 {
    margin-left: 0em;
}

#left1em_sp7 {
    margin-left: 0em;
}

/* ------------------------------
フォーム共通
------------------------------ */
input[type="submit"]:hover {
    opacity: 0.7;
}

#left1em {
    margin-left: 1em;
}

/* ie独自clear機能バツボタンのdisable */
input::-ms-clear {
    display: none;
}

/* ----------------------------------------------------------------------------

▼▼▼ ウィンドウサイズ600px以下にのみ適用されるcss ▼▼▼

---------------------------------------------------------------------------- */

/* ------------------------------
7インチ以下をレスポンシブWEBデザインを適用
------------------------------ */
@media only screen and (max-width: 600px) {

    p {
        line-height: 1.8;
    }

    .small {
        font-size: 10px;
        font-size: 1rem;
    }

    .large {
        font-size: 16px;
        font-size: 1.6rem;
    }

    .sp {
        display: block;
    }

    .pc {
        display: none;
    }

    input[type="text"], button, textarea {
        -webkit-appearance: none;
        border-radius: 0;
    }

    /* ------------------------------
    薄めの注意書き
    ------------------------------ */
    .notice {
        opacity: 0.6;
    }

    #master {
        width: 100%;
        background-image: none;
    }

    #master .close {
        text-align: left;
    }

    h1.toptitle {
        padding: 0;
        font-size: 1rem;
        text-align: center;
        background: #df0128;
        color: #fff;
    }

    #header {
        position: relative;
        width: 100%;
        height: auto;
        padding: 10px 0%;
        background-image: none;
        border-bottom: solid 2px #df0128;
    }

    #header_logo {
        float: none;
        margin: 0px 0 20px 15px;
    }

    #header_logo img {
        width: 60%;
        height: 60%;
    }

    #header_title {
        float: none;
        margin: 0;
        padding: 0 0 0px 0;
    }

    #header_title strong {
        display: block;
        overflow: hidden;
        padding: 0 0px 0 0;
        font-size: 2.0rem;
        color: #000;
        line-height: 1.1;
        font-weight: normal;
        text-align: center;
    }

    #logoutButton {
        float: none;
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        padding: 0;
        text-decoration: right
    }

    #logoutButton .btn {
        display: inline-block;
        padding: 0.4em 0.6em;
        background: #df0128;
        border-bottom: solid 1px #b7001f;
        border-radius: 5px;
        color: #fff;
        font-size: 1.4rem;
        text-decoration: none;
    }

    #logoutButton .btn:hover {
        opacity: 0.7;
    }

    #logoutButton .btn:before {
        content: '×';
        display: inline-block;
        width: 1em;
        height: 1em;
        margin: 0 0.5em 0 0;
        padding: 0.2em;
        background: #fff;
        color: #df0128;
        font-size: 1rem;
        line-height: 1em;
        text-align: center;
        border-radius: 50%;
    }

    /* ------------------------------- メインコンテンツ：ログイン画面 */
    #loginBox3 {
        float: none;
        width: 94%;
        border: 2px solid #3a56e3;
        padding: 10px;
        border-radius: 10px;
        background-color: #399ee521;
        margin: 15px auto 0px auto;
        text-align: center;
        font-weight: bold;
    }

    #loginBox {
        width: 94%;
        height: auto;
        background-image: none;
        margin: 5% auto 5% auto;
        text-align: center;
    }

    #loginBoxTop {
        float: none;
        width: 100%;
        height: auto;
    }

    #loginBoxLeft {
        float: none;
        width: 100%;
        height: auto;
    }

    #loginBoxTable {
        float: none;
        width: 100%;
        height: auto;
        margin-bottom: 1em;
        padding: 1em;
        background-color: #D5EAFF;
        border-radius: 8px;
    }

    #loginBoxTable table {
        width: 100%;
        margin: 0;
    }

    #loginBoxTable table td {
        padding: 0.5em 0;
        font-size: 1.4rem;
        line-height: 1.6;
    }

    .logionCaution {
        width: 80%;
        margin: 0 auto;
        padding-left: 0px;
    }

    #explBox {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .loginButton {
        margin: 10px 0;
        text-align: center;
    }

    .loginButton button {
        display: block;
        margin: 1em auto;
        padding: 1.3em 0.3em;
        border: none;
        border-radius: 5px;
        font-size: 1.6rem;
        text-align: center;
        line-height: 1;
    }

    .loginButton button:hover {
        opacity: 0.7;
    }

    .loginButton button.submit {
        width: 80%;
        border-bottom: solid 2px #b7001f;
        background: #df0127;
        color: #fff;
    }

    .explBoxSP {
        width: 94%;
        margin: 60px auto 0 auto;
    }

    .explBoxSP h3 {
        margin: 0 0 0.5em 0;
        padding-bottom: 0.3em;
        font-size: 1.6rem;
        font-weight: normal;
        color: #000;
        border-bottom: solid 1px #df0127;
    }

    .explBoxSP h4 {
        font-size: 1.4rem;
    }

    .explBoxSP li {
        list-style: none;
        margin: 0.5em 0 1em 0;
        padding: 1em;
        background: #efefef;
        border: solid 1px #ccc;
    }

    .explBoxSP li strong {
        color: orange;
    }

    .explBoxSP li .tel {
        font-size: 2rem;
    }

    /* ------------------------------- メインコンテンツ */
    #maincontent {
        margin: 0;
        padding: 0 3%;
        font-size: 1.4rem;
    }

    #maincontent_centered {
    }

    #maincontent_blue {
    }

    #maincontent h3 {
        margin: 1em 0;
        padding: 0 0 0.2em 0;
        color: #002d88;
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 1;
        border-bottom: solid 1px #002d88;
    }

    /* ------------------------------- メインコンテンツ：FLOW図 */
    .flow {
        display: table;
        width: 94%;
        margin: 1em auto;
        list-style: none;
        background: #efefef;
        border: solid 1px #ddd;
        border-radius: 5px;
    }

    .flow li {
        /*	float: left;
            width: 20%;
        */
        display: table-cell;
        padding: 1em 0;
        color: #666;
        font-size: 1.0rem;
        line-height: 1.5;
        text-align: center;
        vertical-align: top;

        /*border:solid 1px #eee;*/
    }

    .flow li.current {
        font-size: 1.2rem;
        color: #df0128;
        background: #fff;
        border-right: solid 1px #ddd;
        border-left: solid 1px #ddd;
    }

    .flow li:first-child {
        border-left: solid 0px #ddd;
        border-radius: 5px 0 0 5px;
    }

    .flow li:last-child {
        border-right: solid 0px #ddd;
        border-radius: 0 5px 5px 0;
    }

    ol {
        counter-reset: li;
        padding: 0;
        list-style: none;
    }

    ol li {
        position: relative; /* Create a positioning context */
        margin: 0 0 0px 0em; /* Give each list item a left margin to make room for the numbers */
        list-style: none;
    }

    ol li:before {
        content: counter(li); /* Use the counter as content */
        counter-increment: li; /* Increment the counter by 1 */
        /* Position and style the number */
        width: 2em;
        height: 2em;
        margin: 0 auto 10px auto;
        color: #fff;
        background: #aaa;
        font-weight: bold;
        font-family: "Helvetica Neue", Arial, sans-serif;
        line-height: 2em;
        text-align: center;
        display: block;
        border-radius: 100%;
    }

    .flow li.current:before {
        background: #df0128;
        font-size: 1.0rem;

    }

    /* ------------------------------- メインコンテンツ：規約確認画面 */
    iframe {
    }

    .ifrm-container {
        width: 100%;
        height: 200px;
        margin: 1em 0;
        border: solid 1px #ccc;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        display: inline-block;
    }

    .ifrm {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

    /* ------------------------------- メインコンテンツ：入力画面 */
    table.input {
        width: 100%;
        font-size: 1.4rem;
    }

    table.input th {
        display: block;
        width: 100%;
        padding: 0.5em;
        background: #D5EAFF;
        border: solid 0px #000;
        border-left: solid 1px #ccc;
        border-right: solid 1px #ccc;
        border-top: solid 1px #ccc;
        font-weight: bold;
    }

    table.input .KAISU th {
        background: #FFD5AA;
    }

    table.input th p {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: normal;
    }

    table.input td {
        display: block;
        margin-bottom: 1.5em;
        padding: 1em 1em 1em 1em;
        background: #fff;
        border: solid 0px #000;
        border-left: solid 1px #ccc;
        border-right: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
    }

    table.input .name td {
        margin-bottom: 0;
        border-bottom: solid 1px #ccc;
    }

    table.input td.blue {
        padding: 0.5em;
        background: #eef6fd;
        border-bottom: solid 0px #ccc;
        border-left: solid 1px #ccc;
        border-right: solid 1px #ccc;
    }

    table.input .KAISU th {
        margin-top: 1.5em;
    }

    table.input td p {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    #loginBoxTable table td input {
        height: 30px;
        border: solid 1px #aaa;
        -moz-box-shadow: inset 1px 4px 6px -6px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 1px 4px 6px -6px rgba(0, 0, 0, 0.2);
        box-shadow: inset 1px 4px 6px -6px rgba(0, 0, 0, 0.2);
    }

    .cardList,
    .code {
        margin: 1em 0 0em 0;
        text-align: center;
    }

    .cardList dt,
    .code dt {
        padding: 1em;
        background: #ccc;
        line-height: 1.4;
        text-align: left;
    }

    .cardList dt:hover,
    .code dt:hover {
        cursor: pointer;
    }

    .cardList dd {
        width: 100%;
        padding: 1em 0;
        display: none;
        border: solid 1px #ccc;
    }

    .code dd {
        width: 100%;
        padding: 1em;
        display: none;
        border-bottom: solid 1px #ccc;
        border-left: solid 1px #ccc;
        border-right: solid 1px #ccc;
    }

    .cardList dd img,
    .code dd img {
        width: 100%;
    }

    table.input td .cardList dd p {
        margin: 0;
        padding: 0 1em;
    }

    table.input td .code dd p {
        margin: 0;
        padding: 0;
    }

    input[type="text"] {
        height: 30px;
        border: solid 1px #aaa;
        -moz-box-shadow: inset 1px 4px 6px -6px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 1px 4px 6px -6px rgba(0, 0, 0, 0.2);
        box-shadow: inset 1px 4px 6px -6px rgba(0, 0, 0, 0.2);
    }

    input[type="text"].wide {
        width: 100% !important;
    }

    input[type="text"].middle {
        width: 50% !important;
    }

    input[type="text"].policyNumber {
        width: 10em !important;
    }

    input[type="text"].short {
        width: 40px !important;
    }

    input[type="text"].medium {
        width: 50px !important;
    }

    input[type="text"].long {
        width: 60px !important;
    }

    .SS {
        font-size: 1.1rem;
    }

    .S {
        font-size: 1.3rem;
    }

    /* ------------------------------- メインコンテンツ：確認画面 */
    /* 契約内容table */
    table.payment {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        font-size: 1.4rem;
    }

    table.payment th {
        display: block;
        width: 100%;
        padding: 0.5em;
        color: #000;
        font-weight: normal;
        text-align: left;
        background: #efefef;
        border-top: solid 1px #ddd;
        border-bottom: solid 0 #ddd;
        border-right: solid 1px #ddd;
        border-left: solid 1px #ddd;
        line-height: 1.6;
    }

    table.payment th.title {
        display: block;
        width: 100%;
        border: solid 0 #ddd;
        background: transparent;

        margin: 1em 0;
        padding: 0 0 0.2em;
        color: #002d88;
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 1;
        text-align: left;
        border-bottom: 1px solid #002d88;
    }

    table.payment th.title br {
        display: none;
    }

    table.payment td {
        display: block;
        margin-bottom: 1em;
        padding: 0.5em;
        border-top: solid 0 #ddd;
        border-bottom: solid 1px #ddd;
        border-right: solid 1px #ddd;
        border-left: solid 1px #ddd;
        line-height: 1.6;
    }

    /* 契約内容table：カード内容 */
    table.card {
        width: 100%;
    }

    table.card th {
        width: 100%;
        padding: 0.5em;
    }

    table.card td {
        padding: 0.5em;
    }

    /* 契約内容table：EntryDetailページのみ */
    table.EntryDetail {
        width: 100%;
        margin-left: 0px;
    }

    table.EntryDetail th {
        width: 100%;
    }

    p.EntryDetail {
        margin-left: 0px;
    }

    /* ------------------------------- メインコンテンツ：完了画面 */
    #subcontent_blue {
        width: 94%;
        margin: 0 auto;
        padding: 1em;
        border: solid 0px #eee;
        font-size: 12px;
        font-size: 1.2rem;
    }

    .redTitle12 {
        margin: 1em 0;
    }

    h3.waring {
        margin: .5em 0;
        font-size: 1.8rem;
    }

    /* 契約内容 完了確認（日付） table */
    table.date {
        width: 100%;
        max-width: 100%;
        border: 1px solid #aaa;
        font-size: 12px;
        font-size: 1.2rem;
    }

    table.date th,
    table.date td {
        width: 100%;
        display: block;
        padding: 1em;
        text-align: center;
    }

    /* 契約内容 完了確認 table */
    table.complete {
        width: 100%;
        font-size: 1.4rem;
    }

    table.complete th {
        display: block;
        width: 100%;
        padding: 0.5em;
        color: #000;
        font-weight: normal;
        text-align: left;
        background: #efefef;
        border-top: solid 1px #ddd;
        border-bottom: solid 0 #ddd;
        border-right: solid 1px #ddd;
        border-left: solid 1px #ddd;
        line-height: 1.6;
    }

    table.complete td.colon {
        display: none;
    }

    table.complete td {
        display: block;
        margin-bottom: 1em;
        padding: 0.5em;
        border-top: solid 0 #ddd;
        border-bottom: solid 1px #ddd;
        border-right: solid 1px #ddd;
        border-left: solid 1px #ddd;
        background-color: #fff;
        line-height: 1.6;
    }

    /* hidden_M table */
    table.hidden_M {
        width: auto;
    }

    table.hidden_M th {
        display: table-cell;
        padding: 0.5em;
        background: #fff;
        border-top: solid 0 #ddd;
        border-right: solid 0 #ddd;
        border-left: solid 0 #ddd;
        line-height: 1;
    }

    table.hidden_M td {
        display: table-cell;
        margin-bottom: 0em;
        padding: 0.5em 0.3em;
        border-bottom: solid 0 #ddd;
        border-right: solid 0 #ddd;
        border-left: solid 0 #ddd;
        line-height: 1;
    }

    /* ------------------------------- subtitle */
    .subtitle {
        width: 100%;
        height: auto;
        margin: 1em auto;
        padding: 0 3%;
        background-image: none;
    }

    .subtitle p {
        margin: 0;
        padding: 0;
        color: #002d88;
        font-size: 2.0rem;
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
        font-family: "游ゴシック", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
    }

    /* ------------------------------- buttonbar */
    #buttonbar {
        width: 100%;
        height: auto;
        padding: 0 3%;
        background-color: transparent;
    }

    #buttonbar button {
        display: block;
        margin: 1em auto;
        padding: 1.3em 0.3em;
        border: none;
        border-radius: 5px;
        font-size: 1.6rem;
        text-align: center;
        line-height: 1;
    }

    #buttonbar button:hover {
        opacity: 0.7;
    }

    #buttonbar button.submit {
        float: right;
        width: 55%;
        border-bottom: solid 2px #b7001f;
        background: #df0127;
        color: #fff;
    }

    #buttonbar .end button.submit {
        float: none;
    }

    #buttonbar button.ok {
        float: right;
        width: 40%;
        border-bottom: solid 2px #b7001f;
        background: #df0127;
        color: #fff;
    }

    #buttonbar button.return {
        float: left;
        width: 35%;
        border-bottom: solid 2px #bbb;
        background: #ccc;
        color: #fff;
    }

    #buttonbar button.return:before {
        content: '<';
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 0.3em 0 0;
        /*padding: 0.1em ;*/
        background: #fff;
        color: #999;
        font-size: 1.1rem;
        line-height: 12px;
        text-align: center;
        border-radius: 50%;
        vertical-align: middle;
    }

    #buttonbar button.edit {
        float: left;
        width: 55%;
        border-bottom: solid 2px #999;
        background: #aaa;
        color: #fff;
    }

    #buttonbar button.edit:before {
        content: '<';
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 0.3em 0 0;
        /*padding: 0.1em ;*/
        background: #fff;
        color: #999;
        font-size: 1.1rem;
        line-height: 12px;
        text-align: center;
        border-radius: 50%;
        vertical-align: middle;
    }

    /* ------------------------------- エラー */
    #subcontent_yellow {
        border: solid 0px #000;
    }

    /* ------------------------------- オーソリNG */
    /* #maincontent > #authori_ng_center_red { */
    /* 	color:#FF0000;                         */
    /* 	margin-top: 0px;                       */
    /* 	margin-bottom: 0px;                    */
    /* 	margin-right: 0px;                     */
    /* 	margin-left: 0px;                      */
    /* 	font-size:20px;                        */
    /* 	box-sizing:border-box;                 */
    /* 	display:block;                         */
    /* 	text-align:Left;                       */
    /* }                                       */
    /*                                         */
    /* maincontent > #authori_ng_left_red {    */
    /* 	color:#FF0000;                         */
    /* 	font-size:16px;                        */
    /* 	box-sizing:border-box;                 */
    /* 	display:block;                         */
    /* 	text-align:Left;                       */
    /* }                                       */
    #maincontent > #authori_ng_center {
        color: #FF0000;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 0px;
        margin-left: 0px;
        box-sizing: border-box;
        display: block;
        text-align: Left;
    }

    #maincontent > #authori_ng_center > #info_main {
        font-size: 20px;
    }

    #maincontent > #authori_ng_center > #info_sub {
        font-size: 16px;
    }

    /* ------------------------------- footer */
    #footerSP {
        width: 100%;
        height: auto;
        margin-top: 5em;
        background-image: none;
        border-bottom: solid 0px #fff;
    }

    #footerSP p {
        text-align: center;
    }

    #footCommentSP {
        width: 100%;
        height: auto;
        padding: 1em 2%;
        font-size: 1rem;
        line-height: 1.2;
        color: #df0127;
        background-color: #f2f2f2;
    }

    #authorSP {
        width: 100%;
        height: auto;
        padding: .5em 2%;
        background-image: none;
        color: #FDB3C0;
        background-color: #df0128;
    }

    #companyNameSP {
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 1rem;
    }

    #copyrightSP {
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 1rem;
        font-family: "Helvetica", "Arial";
    }

    /* Page PB75PayEntryInput.jsp 用 */
    .sp4 {
        display: none;
    }

    #left1em_sp4 {
        margin-left: 0em;
    }

    .sp7 {
        display: block;
    }

    #left1em_sp7 {
        margin-left: 1em;
    }

}

@media only screen and (max-width: 600px) {
    .include_body {
        /*background-color: #fff;*/
    }

    .include_body .comment_M td {
        display: block;
    }

    .example1 {
        width: 100%;
    }

}

/* ------------------------------
4インチ以下をレスポンシブWEBデザインを適用
------------------------------ */
@media only screen and (max-width: 320px) {
    .sp4 {
        display: block;
    }

    #left1em_sp4 {
        margin-left: 1em;
    }

    .sp7 {
        display: none;
    }

    #left1em_sp7 {
        margin-left: 0em;
    }

}