@charset "utf-8";
@import url("style_reset.mobile.css");
@import url("style_page.mobile.css");

html {
    font-size: 62.5%;    /*基準10px*/
    }

body {
    font-size: 12px;
    font-size: 1.2rem;
    -webkit-text-size-adjust: none;
    color: #000000;
    font-family: Verdana,Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    word-break: break-all;
    position: relative;
    left: 0;
    overflow-x: hidden;
    }

/* テキストボックス
--------------------*/
input[type="text"],
input[type="password"] {
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    font-family: Verdana,Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    height: 32px;
    width: 93%;
    padding: 0 10px;
    border: 1px solid #c7cfd4;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }

/* テキストエリア
--------------------*/
textarea {
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    font-family: Verdana,Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    height: 60px;
    width: 93%;
    resize: none;
    padding: 10px;
    border: 1px solid #c7cfd4;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }

/* ボタン
--------------------*/
button {
    font-family: Verdana,Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    cursor: pointer;
    }

/*緑*/
.oi8-btn-green button {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #046377;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    box-sizing: border-box;
    height: 45px;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    }

.oi8-btn-green button:after {
    content: "";
    position: absolute;
    top: 17px;
    right: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #ffffff;
    }

.oi8-btn-green button:hover {
    background-color: #81b1bb;
    }

/*水色*/
.oi8-btn-lightblue button {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #b1d8f8;
    border: none;
    border-radius: 5px;
    color: #000000;
    box-sizing: border-box;
    height: 45px;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    }

.oi8-btn-lightblue button:after {
    content: "";
    position: absolute;
    top: 17px;
    right: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #003b51;
    }

.oi8-btn-lightblue button:hover {
    background-color: #d8ebfb;
    }

/*青*/
.oi8-btn-blue button {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #165ea9;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    box-sizing: border-box;
    height: 45px;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    }

.oi8-btn-blue button:after {
    content: "";
    position: absolute;
    top: 17px;
    right: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #ffffff;
    }

.oi8-btn-blue button:hover {
    background-color: #8aaed4;
    }

/*濃いグレイ*/
.oi8-btn-darkgray-before button,
.oi8-btn-darkgray-after button,
.oi8-btn-darkgray-nomark button {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #686d6f;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    box-sizing: border-box;
    height: 45px;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    }

.oi8-btn-darkgray-before button:before {
    content: "";
    position: absolute;
    top: 17px;
    left: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #ffffff;
    }

.oi8-btn-darkgray-after button:after {
    content: "";
    position: absolute;
    top: 17px;
    right: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #ffffff;
    }

.oi8-btn-darkgray-before button:hover,
.oi8-btn-darkgray-after button:hover,
.oi8-btn-darkgray-nomark button:hover {
    background-color: #b3b6b7;
    }

/*薄いグレイ*/
.oi8-btn-gray button {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #dde6eb;
    border: none;
    border-radius: 5px;
    color: #000000;
    box-sizing: border-box;
    height: 45px;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    }

.oi8-btn-gray button:before {
    content: "";
    position: absolute;
    top: 17px;
    left: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #046377;
    }

.oi8-btn-gray button:hover {
    background-color: #eef2f5;
    }

/*disabled*/
button[disabled] {
    color: #FFFFFF!important;
    background-color: #D2DAE4!important;
    cursor:auto!important;
    }

/*リンク風ボタン*/
.oi8-link-style-button-left {
    position: relative;
    float: left;
    }

.oi8-link-style-button-right {
    position: relative;
    float: right;
    }

.oi8-link-style-button-left:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid #046377;
    }

.oi8-link-style-button-right:after {
    content: "";
    position: absolute;
    top: 5px;
    right: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #046377;
    }

.oi8-link-style-button-left button {
    text-decoration: underline;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-size: 1.2rem;
    padding-left: 10px;
    line-height: 1.2;
    }

.oi8-link-style-button-right button {
    text-decoration: underline;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-size: 1.2rem;
    padding-right: 10px;
    line-height: 1.2;
    }

.oi8-link-style-button-left button:hover,
.oi8-link-style-button-right button:hover {
    color: #046377;
    }

/* ドロップダウン
--------------------*/
select {
    font-size: 12px;
    font-size: 1.2rem;
    padding-left: 8px;
    border: 1px solid #c7cfd4;
    height: 32px;
    width: 100%;
    background-color: #FFFFFF;
    background: url(../image/signup_select.mobile.png) no-repeat right center;
    background-size: 32px;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }

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

/* ラジオボタン
--------------------*/
/* ラジオボタン（横２リスト） */
.oi8-step-radio {
    display: inline-block;
    width: 100%;
    }

.oi8-step-radio li {
    width: calc(50% - 5px);
    float: left;
    box-sizing: border-box;
    }

.oi8-step-radio li:nth-child(1) {
    margin-right: 5px;
    }

.oi8-step-radio li:nth-child(2) {
    margin-left: 5px;
    }

.oi8-step-radio li label {
    font-size: 12px;
    font-size: 1.2rem;
    height: 32px;
    line-height: 32px;
    padding-left: 10px;
    display: block;
    box-sizing: border-box;
    border: none;
    background-color: #eaf4fa;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    }

.oi8-step-radio li:nth-child(1) label {
    border-radius: 3px 0 0 3px;
    }

.oi8-step-radio li:nth-child(2) label {
    border-radius: 0 3px 3px 0;
    }

.oi8-step-radio input[type=radio] {
    margin-top: 0;
    }

/* ラジオボタン（縦複数リスト） */
.oi8-step-vertical-radio li:nth-child(n+2) {
    padding-top: 10px;
    }

.oi8-step-vertical-radio li label {
    font-size: 12px;
    font-size: 1.2rem;
    height: 32px;
    line-height: 32px;
    width: 100%;
    padding-left: 10px;
    display: block;
    box-sizing: border-box;
    border: none;
    background-color: #eaf4fa;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    border-radius: 3px 3px 3px 3px;
    }

.oi8-step-vertical-radio p {
    font-size: 12px;
    font-size: 1.2rem;
    padding-top: 10px;
    }

.oi8-step-vertical-radio input[type=radio] {
    margin-top: 0;
    }

/* チェックボックス */
input[type="checkbox"] {
    border-radius: 0;
    }

/* テーブル
--------------------*/
/* テーブルA */
.oi8-table-a {
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    width: 100%;
    }

.oi8-table-a thead {
    font-weight: normal;
    border-bottom: 2px solid #d8e1e6;
    }

.oi8-table-a tr:nth-child(2n+3) {
    border-top: 1px solid #d8e1e6;
    }

.oi8-table-a th,td {
    height: 15px;
    }

.oi8-table-a th {
    font-weight: normal;
    padding-top: 7px;
    padding-left: 20px;
    text-align: left;
    }

.oi8-table-a td {
    padding-top: 7px;
    padding-right: 20px;
    text-align: right;
    }

.oi8-table-a tr:nth-child(2n) td {
    padding-bottom: 7px;
    color: #999999;
    }

/* テーブルB */
.oi8-table-b {
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    width: 100%;
    }

.oi8-table-b tr:nth-child(n+2) {
    border-top: 1px solid #d8e1e6;
    }

.oi8-table-b th,
.oi8-table-b td {
    height: 30px;
    vertical-align: middle;
    }

.oi8-table-b th {
    font-weight: normal;
    padding-left: 20px;
    text-align: left;
    }

.oi8-table-b td {
    padding-right: 20px;
    text-align: right;
    }

/* テーブルC */
.oi8-table-c {
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    width: 100%;
    }

.oi8-table-c tr:nth-child(2n+3) {
    border-top: 1px solid #d8e1e6;
    }

.oi8-table-c th,td {
    height: 15px;
    }

.oi8-table-c th {
    font-weight: normal;
    padding-top: 7px;
    padding-left: 20px;
    text-align: left;
    }

.oi8-table-c td {
    padding-right: 20px;
    padding-bottom: 7px;
    text-align: right;
    }

.oi8-table-c sub {
    font-size: 75%;
}

.oi8-table-kaitori,
.oi8-table-kaitori2,
.oi8-table-kaitori3 {
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    width: 100%;
    }

.oi8-table-kaitori tr:nth-child(6n+7) {
    border-top: 1px solid #d8e1e6;
    }

.oi8-table-kaitori th,td {
    height: 15px;
    }

.oi8-table-kaitori th,
.oi8-table-kaitori2 th,
.oi8-table-kaitori3 th {
    font-weight: normal;
    padding-top: 7px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    }

.oi8-table-kaitori td,
.oi8-table-kaitori2 td,
.oi8-table-kaitori3 td {
    padding-right: 20px;
    padding-bottom: 7px;
    text-align: right;
    }

.oi8-table-kaitori3 tr:nth-child(2n+3) {
    border-top: 1px solid #d8e1e6;
    }

.oi8-table-kaitori2 h4 {
    border-bottom: 1px solid #d8e1e6;
}

/* 見出し
--------------------*/
h1 {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 12px 20px 11px;
    border-top: 1px solid #d8e1e6;
    border-bottom: 2px solid #3c7bb9;
    box-sizing: border-box;
    min-height: 40px;
    color: #003b51;
    line-height: 1;
    }

h2 {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 7px 20px;
    background-color: #d7ecfa;
    box-sizing: border-box;
    min-height: 30px;
    line-height: 1;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    }

h2 span.oi8-h2-font12 {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
    }

h2.oi8-h2-green {
    color: #003b51;
    background-color: #bde5eb;
    }

h3 {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 7px 20px;
    background-color: #eef2f5;
    box-sizing: border-box;
    height: 30px;
    }

h5 {
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: normal;
    padding: 10px 20px 10px;
    color: #003b51;
    }

h6 {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
    padding: 10px 20px 10px;
    color: #003b51;
    line-height: 1.5;
    }

/* アコーディオンh1
--------------------*/
.oi8-ac-h1 {
    padding: 0;    /*横のpaddingをリセット*/
    }

.oi8-ac-h1 a {
    color: #003b51;
    text-decoration: none;
    display: block;
    padding: 12px 20px 11px;
    position: relative;
    }

.oi8-ac-h1 a:after {
    border-right: 1px solid #003b51;
    border-top: 1px solid #003b51;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 20px;
    top: 12px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    }

.oi8-ac-h1-open a:after {
    top: 17px;
    -webkit-transform: rotate(-45deg)!important;
    -ms-transform: rotate(-45deg)!important;
    transform: rotate(-45deg)!important;
    }

/* アコーディオンh2
--------------------*/
.oi8-ac-h2 {
    padding: 0;    /*横のpaddingをリセット*/
    height: 38px;
    border-bottom: 1px solid #ffffff;
    }

.oi8-ac-h2 a {
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 11px 20px;
    position: relative;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

.oi8-ac-h2 a:after {
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 20px;
    top: 12px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    }

.oi8-ac-h2 a sub {
    font-size: 75%;
}

.oi8-ac-h2-open a:after {
    top: 17px;
    -webkit-transform: rotate(-45deg)!important;
    -ms-transform: rotate(-45deg)!important;
    transform: rotate(-45deg)!important;
    }

.oi8-ac-h2-02 {
    padding: 0;    /*横のpaddingをリセット*/
    height: 50px;
    border-bottom: 1px solid #ffffff;
    }

.oi8-ac-h2-02 a {
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 11px 26px 11px 20px;
    position: relative;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }

.oi8-ac-h2-03 {
    padding: 0;    /*横のpaddingをリセット*/
    height: 50px;
    border-bottom: 1px solid #ffffff;
    }

.oi8-ac-h2-03 a {
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 11px 20px;
    position: relative;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    }


.oi8-ac-h2-02 a:after {
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 20px;
    top: 11px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    }

.oi8-ac-h2-03 a:after {
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    }

_::-webkit-full-page-media, .oi8-ac-h2-02 a:after {
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    }

_::-webkit-full-page-media, .oi8-ac-h2-03 a:after {
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    }

.oi8-ac-h2-open2 a:after {
    top: 17px;
    -webkit-transform: rotate(-45deg)!important;
    -ms-transform: rotate(-45deg)!important;
    transform: rotate(-45deg)!important;
    }

.oi8-ac-h2-open3 a:after {
    top: 17px;
    -webkit-transform: rotate(-45deg)!important;
    -ms-transform: rotate(-45deg)!important;
    transform: rotate(-45deg)!important;
    }

.oi8-ac-h2.oi8-h2-green {
    border-bottom: 0;
    }

.oi8-ac-h2.oi8-h2-green a {
    color: #003b51;
    }

.oi8-ac-h2.oi8-h2-green a:after {
    border-right: 1px solid #003b51;
    border-top: 1px solid #003b51;
    }

/* 表示エリア拡大
--------------------*/
.oi8-btn-remaining a,
.oi8-btn-remaining-infomation-area a,
.oi8-btn-remaining-meisai a {
    display: block;
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    background-color: #dde6eb;
    text-align: center;
    height: 30px;
    line-height: 1;
    box-sizing: border-box;
    padding-top:9px;
    text-decoration: none;
    position: relative;
    }

.oi8-btn-remaining a:after,
.oi8-btn-remaining-infomation-area a:after,
.oi8-btn-remaining-meisai a:after {
    border-right: 1px solid #003b51;
    border-top: 1px solid #003b51;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 20px;
    top: 13px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }

.oi8-btn-remaining a:hover,
.oi8-btn-remaining-infomation-area a:hover,
.oi8-btn-remaining-meisai a:hover {
    background-color: #eef2f5;
    }

.oi8-btn-remaining-open a:after,
.oi8-btn-remaining-infomation-area-open a:after,
.oi8-btn-remaining-meisai-open a:after {
    top: 9px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    }

/* 例
--------------------*/
.oi8-example {
    font-size: 10px;
    font-size: 1.0rem;
    color: #464646;
    display:block;
    padding-bottom: 5px;
    }

/* 必須マーク
--------------------*/
.oi8-required-mark {
    font-size: 11px;
    font-size: 1.1rem;
    color: #FFFFFF;
    padding: 2px 9px;
    border-radius: 9px;
    background-color: #1E7B89;
    margin-left: 5px;
    height: 11px;
    }

/* メッセージ
--------------------*/
.oi8-message,
.oi8-message2 {
    font-size: 12px;
    font-size: 1.2rem;
    color: #003b51;
    background-color: #e8f6ff;
    line-height: 18px;
    box-sizing: border-box;
    }

.oi8-message {
    padding: 10px 20px;
    background-position: 20px 12px;
    }

.oi8-message2 {
    margin: 10px 20px;
    padding: 10px;
    background-position: 10px 12px;
    }

.oi8-message span,
.oi8-message2 span {
    font-weight: bold;
    }

.oi8-message:before,
.oi8-message2:before {
    content: "";
    background: url(../image/signup_p01.mobile.png) no-repeat left center;
    background-size: 14px 14px;
    display: block;
    height: 18px;
    width: 20px;
    float: left;
    }

/* エラーメッセージ
--------------------*/
.oi8-notes-error-p {
    font-size: 12px!important;
    font-size: 1.2rem!important;
    font-weight: normal!important;
    color: #b00823!important;
    padding: 10px 5px 10px 30px!important;
    background: url(../image/signup_error_p01.mobile.png) no-repeat 10px 10px!important;
    background-size: 14px 14px!important;
    background-color: #fbe1e6!important;
    line-height: 120%!important;
    }

.ifm-message-area {
    line-height: 1.5;
    padding: 10px 20px;
    background-color: #fbe1e6;
    box-sizing: border-box;
    display: none;
    }

.ifm-message-area:after {
    content: "";
    display: block;
    clear: both;
    }

.ifm-message-area h2 {
    font-size: 12px;
    font-size: 1.2rem;
    min-height: 14px;
    color: #b00823;
    padding: 0.5px 0 0 20px;
    margin-bottom: 10px;
    background: url(../image/signup_error_p01.mobile.png) no-repeat left center;
    background-size: 14px 14px;
    line-height: 1;
    }

.ifm-message-area-div {
    font-size: 12px!important;
    font-size: 1.2rem!important;
    font-weight: bold!important;
    color: #b00823!important;
    padding: 0 0 0 18px!important;
    margin-top: 5px!important;
    background: url(../image/signup_error_p01.mobile.png) no-repeat left top;
    background-size: 14px 14px;
    line-height: 1.2;
    }

.ifm-message-target-item {
    background-color: #fbe1e6;
    border: 1px solid #b00823!important;
    }

.ifm-message-target-item:focus {
    background-color: #fbe1e6!important;
    }

/* 注釈
--------------------*/
.oi8-annotation {
    font-size: 10px;
    font-size: 1.0rem;
    color: #666666;
    padding: 10px 20px;
    }

/* スライダー
--------------------*/
.bx-wrapper {
    margin: 0 auto;
    }

.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    }

.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: none repeat scroll 0 0 #abc4d3;
    border-color: #abc4d3;
    }

.bx-wrapper .bx-pager.bx-default-pager a {
    background: none repeat scroll 0 0 #ffffff;
    border-radius: 5px;
    border-color: #ffffff;
    display: block;
    height: 7px;
    margin: 3px 6px 3px 0;
    outline: 0 none;
    text-indent: -9999px;
    width: 7px;
    }

.bx-controls-direction {
    position: absolute;
    top: 38%;
    }

.bx-controls-direction a {
    position: relative;
    }

.bx-controls-direction img {
    width: 7px;
    height: 13px;
    }

.bx-prev {
    left: 10px;
    }

.bx-next {
    left: 295px;
    }

/* ダイアログ
--------------------*/
.oi8-dialog {
    padding: 0 0 0 20px;
    margin-bottom: 10px;
    background: url(../image/signup_p02.mobile.png) no-repeat left center;
    background-size: 14px 14px;
    }

.oi8-dialog a {
    font-size: 12px;
    font-size: 1.2rem;
    color: #165ea9;
    }

.oi8-common-dialog.ui-widget {
    font-family: inherit;
    font-size: 100%;
    padding: 0;
    z-index: 9000;
}

.oi8-common-dialog.ui-widget-content {
    border-width: 0px;
}

.oi8-common-dialog.ui-dialog .ui-dialog-content {
    padding: 0px;
    overflow: hidden;
}

.oi8-common-dialog.ui-corner-all,
.oi8-common-dialog.ui-corner-bottom,
.oi8-common-dialog.ui-corner-right,
.oi8-common-dialog.ui-corner-br {
    border-bottom-right-radius: 0px;
}

.oi8-common-dialog.ui-corner-all,
.oi8-common-dialog.ui-corner-bottom,
.oi8-common-dialog.ui-corner-left,
.oi8-common-dialog.ui-corner-bl {
    border-bottom-left-radius: 0px;
}

.oi8-common-dialog.ui-corner-all,
.oi8-common-dialog.ui-corner-top,
.oi8-common-dialog.ui-corner-right,
.oi8-common-dialog.ui-corner-tr {
    border-top-right-radius: 0px;
}

.oi8-common-dialog.ui-corner-all,
.oi8-common-dialog.ui-corner-top,
.oi8-common-dialog.ui-corner-left,
.oi8-common-dialog.ui-corner-tl {
    border-top-left-radius: 0px;
}

.oi8-common-dialog.ui-widget button {
    font-family: inherit;
    font-size: inherit;
}

.oi8-common-dialog.ui-dialog .ui-dialog-buttonpane {
    border-top-width: 0px;
    margin: 0px;
    padding: 0px;
}

.oi8-common-dialog .ui-widget-content {
    background-color: transparent;
}

.oi8-common-dialog .oi8-dialog-close-button img {
    height: 20px;
    width: 20px;
    float: right;
}

.oi8-common-dialog p {
    font-size: 12px;
    font-size: 1.2rem;
    color: #000000;
    padding: 20px;
}

.oi8-common-dialog p img {
    width: 100%;
}

/* ヘッダー
--------------------*/
header {
    height: 40px;
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    z-index: 3000;
    box-sizing: border-box;
    }

header p {
    float: left;
    padding: 10px;
    }

header ul {
    float: right;
    }

header ul li {
    float: left;
    position: relative;
    }

header ul li:first-child:after {
    width: 1px;
    height: 20px;
    border-right: 1px solid #cccccc;
    content: "";
    position: absolute;
    top: 10px;
    right: -1px;
    }

.oi8-func {
    margin-right: 1px;
    }

.oi8-func-active {
    background-color: #8cbdfa;
    }

.oi8-menu-area,
.oi8-menu-area2 {
    position: fixed;
    top: 40px;
    right: 0;
    display: none;
    z-index:7000; /* oi8-overray-area以上 */
    }

.oi8-menu-area ul li button,
.oi8-menu-area2 ul li button {
    box-sizing: border-box;
    background-color: #8cbdfa;
    border: none;
    margin: 0;
    padding: 10px 10px;
    color: #000000;
    width: 210px;
    text-align: left;
    position: relative;
    height: 45px;
    font-size: 13px;
    font-size: 1.3rem;
    border-radius: 0;
    }

.oi8-menu-area ul li button:after,
.oi8-menu-area2 ul li button:after {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #165ea9;
    border-top: 5px solid transparent;
    content: "";
    position: absolute;
    right: 10px;
    top: 18px;
    }

.oi8-menu-area ul li button:hover,
.oi8-menu-area2 ul li button:hover {
    background-color: #e9f2fe;
    color: #034081;
    }

.oi8-overray-area {
    display: none;
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    z-index: 6000;
    }

.oi8-cont-area {
    padding-top: 40px;
    }

/* ページ上部へ
--------------------*/
.oi8-page-top {
    margin-top: 15px;
    text-align: right;
    font-size: 12px;
    font-size: 1.2rem;
    padding-right: 20px;
    clear: both;
    }

.oi8-page-top a {
    color: #165ea9;
    position: relative;
    padding-right: 23px;
    }

.oi8-page-top a:after {
    border-right: 1px solid #165ea9;
    border-top: 1px solid #165ea9;
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    right: 2px;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }

/* フッター
--------------------*/
footer {
    margin-top: 15px;
    }

footer ul {
    text-align: center;
    }

footer ul li a,
footer ul li button {
    display: block;
    box-sizing: border-box;
    height: 35px;
    background-color: #005271;
    color: #ffffff;
    border-bottom: 1px solid #29667d;
    line-height: 3.0;
    text-decoration: none;
    }

footer ul li:last-child a {
    border-bottom: none;
    }

footer ul li.oi8-pcsite button {
    text-decoration: none;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 12px;
    font-size: 1.2rem;
    }

footer ul li.oi8-pcsite button img {
    width: 18px;
    height: 14px;
    vertical-align: middle;
    margin-right: 5px;
    }

.oi8-copyright {
    font-size: 7px;
    font-size: 0.7rem;
    box-sizing: border-box;
    background-color: #023a4f;
    color: #ffffff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    }

/* 共通マージン */
.oi8-mrgn-t5 {
    margin-top: 5px;
    }

.oi8-mrgn-b15 {
    margin-bottom: 15px;
    }

.oi8-mrgn-b25 {
    margin-bottom: 25px;
    }

.oi8-mrgn-tb15 {
    margin-top: 15px;
    margin-bottom: 15px;
    }

.oi8-mrgn-r10 {
    margin-right: 10px;
    }

.oi8-pdng-l35 {
    padding-left: 35px;
    }

.oi8-pdng20-area {
    padding-left: 20px;
    padding-right: 20px;
    }

.oi8-headar-url-faq{
    margin-top: 0px;
    padding-right: 0px;
    float: right;
    height: 40px;
    }

.oi8-headar-url-faq button{
    border-radius: 1px;
    background-color: rgb(83,141,213);
    width: auto;
    height: 30px;
    max-width: 112px;
    padding-left: 6px;
    padding-right: 4px;
    border: 0px;
    margin-top: 5px;
    margin-left: 0px;
    margin-right: 0px;
    /*margin*/
    }

#oi8-headar-url-faq-img{
    width: 22px; 
    vertical-align: middle;
    }

.oi8-headar-url-faq img{
    width: 22px;
    margin-top:4px;
    margin-right: 2px!important;
    }

#oi8-headar-url-faq-div{
    width: auto;
    max-height: 30px;
    height: 30px;
    vertical-align: middle;
    }

.oi8-headar-url-faq div{
    color: #ffffff;
    padding-top: 0px;
    font-size: 11px;
    line-height: 11px;
    width: auto;
    }

.oi8-headar-url-faq-nologin{
    margin-top: 5px;
    padding-right: 4px;
    float: right;
    }

.oi8-headar-url-faq-nologin button{
    border-radius: 1px;
    background-color: rgb(83,141,213);
    width: 112px;
    height: 30px;
    padding-left: 6px;
    padding-right: 4px;
    border: 0px;
    }

.oi8-headar-url-faq-nologin img{
    width: 22px;
    margin-top:4px;
    margin-right: 2px!important;
    float: left;
    }

.oi8-headar-url-faq-nologin span{
    color: #ffffff; 
    float: left; 
    padding-top: 8px!important; 
    font-size: 11px; 
    line-height: 11px;"
    }

/* clearfix */
.oi8-clearfix:after {
    display: block;
    clear: both;
    content: "";
    }

/* グラフメニュードロワー
--------------------*/
.oi8-graph-menu a img {
    width: 28px;
    height: 47px;
    float: left;
    margin-top: 15px;
    position: relative;
}

.oi8-graph-menu-area-left,
.oi8-graph-menu-area-right {
    position: absolute;
    height: 100%;
    top: 0;
    left: -265px;
    width: 265px;
    background: #8cbdfa;
    }

.oi8-graph-menu-area-left>ul:first-child li,
.oi8-graph-menu-area-right>ul:first-child li {
    box-sizing: border-box;
    background-color: #8cbdfa;
    margin: 0;
    padding-left: 10px;
    color: #000000;
    width: 265px;
    text-align: left;
    position: relative;
    height: 45px;
    line-height: 45px;
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: bold;
    border: none;
    border-bottom: 1px solid #6fabf6;
    }

.oi8-graph-menu-area-left>ul:nth-child(2) li button {
    box-sizing: border-box;
    background-color: #8cbdfa;
    border: none;
    margin: 0;
    padding: 10px 10px;
    color: #000000;
    width: 265px;
    text-align: left;
    position: relative;
    height: 45px;
    font-size: 13px;
    font-size: 1.3rem;
    }

.oi8-graph-menu-area-left>ul:nth-child(2) li:nth-child(1) button {
    background: url(../image/consumption_menu_btn01.mobile.png) no-repeat 10px center;
    background-size: 15px 17px;
    padding-left: 35px;
    }

.oi8-graph-menu-area-left>ul:nth-child(2) li:nth-child(2) button {
    background: url(../image/consumption_menu_btn02.mobile.png) no-repeat 10px center;
    background-size: 15px 14px;
    padding-left: 35px;
    }

.oi8-graph-menu-area-left>ul:nth-child(2) li:nth-child(3) button {
    background: url(../image/consumption_menu_btn03.mobile.png) no-repeat 10px center;
    background-size: 15px 14px;
    padding-left: 35px;
    }

.oi8-graph-menu-area-left>ul:nth-child(2) li button:after {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #165ea9;
    border-top: 5px solid transparent;
    content: "";
    position: absolute;
    right: 10px;
    top: 18px;
    }

.oi8-graph-menu-area-left>ul:last-child li button,
.oi8-graph-menu-area-right>ul:last-child li button {
    width: 245px;
    margin-top: 15px;
    margin-left: 10px;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) {
    box-sizing: border-box;
    background-color: #8cbdfa;
    clear: both;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) li>p,
.oi8-graph-menu-area-right>ul:nth-child(2) li>button {
    box-sizing: border-box;
    background-color: #8cbdfa;
    border: none;
    margin: 0;
    padding: 15px 10px;
    color: #000000;
    width: 265px;
    text-align: left;
    position: relative;
    height: 45px;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) .oi8-graph-menu-area-right-jibun>p {
    background: url(../image/comparison_menu_btn02.mobile.png) no-repeat 10px center;
    background-size: 15px 17px;
    padding-left: 35px;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) .oi8-graph-menu-area-right-tenki>p {
    background: url(../image/comparison_menu_btn03.mobile.png) no-repeat 10px center;
    background-size: 15px 14px;
    padding-left: 35px;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) .oi8-graph-menu-area-right-take>button {
    background: url(../image/comparison_menu_btn01.mobile.png) no-repeat 10px center;
    background-size: 15px 14px;
    padding-left: 35px;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) .oi8-graph-menu-area-right-take>button:after {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #165ea9;
    border-top: 5px solid transparent;
    content: "";
    position: absolute;
    right: 10px;
    top: 18px;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) li ul li button {
    box-sizing: border-box;
    background-color: #6fabf6;
    border: none;
    margin: 0;
    padding: 10px 10px 10px 35px;
    color: #000000;
    width: 265px;
    text-align: left;
    position: relative;
    height: 40px;
    font-size: 12px;
    font-size: 1.2rem;
    }

.oi8-graph-menu-area-right>ul:nth-child(2) li ul li button:after {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #165ea9;
    border-top: 5px solid transparent;
    content: "";
    position: absolute;
    right: 10px;
    top: 15px;
    }

.oi8-graph-menu-area-left>ul:nth-child(2) li button:hover,
.oi8-graph-menu-area-right>ul:nth-child(2) li button:hover {
    background-color: #e9f2fe;
    color: #034081;
    }

.oi8-graph-overray-area {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    z-index:4000;
    }

/* グラフエリア
--------------------*/
.oi8-graph {
    clear: both;
    }

.oi8-graph-area-mobile {
    padding: 15px 20px;
    }

.oi8-graph-area-mobile .oi8-graph-message {
    font-size: 10px;
    font-size: 1.0rem;
    font-weight: bold;
    background-color: #f5fbff;
    margin-top: 15px;
    padding: 5px 10px;
    }

.oi8-graph-area-mobile .oi8-graph-legend {
    font-size: 10px;
    font-size: 1.0rem;
    background-color: #f5fbff;
    margin-top: 15px;
    padding: 10px;
    }

.oi8-graph-area-mobile .oi8-graph-legend dt:nth-child(n+2) {
    margin-top: 5px;
    }

.oi8-graph-area-mobile .oi8-graph-legend table tr td {
    width: 140px;
    }

.oi8-graph-area-mobile .oi8-graph-legend img {
    width: 8px;
    height: 8px;
    vertical-align: middle!important;
    }

.oi8-graph-area-mobile .oi8-graph-legend img.oi8-graph-legend-imgsize11-8 {
    width: 11px;
    height: 8px;
    vertical-align: middle!important;
    }

.oi8-graph-area-mobile .oi8-graph-legend img.oi8-graph-legend-imgsize12-12 {
    width: 12px;
    height: 12px;
    vertical-align: middle!important;
    }

.oi8-graph-area-mobile .oi8-dialog {
    margin: 10px 0 0 0;
    }

/* グラフ照会対象期間切り替えボタン
--------------------*/
.oi8-graph-period-area {
    padding: 5px 20px 5px 35px;
    background-color: #d7ecfa;
    }

.oi8-graph-period-area-pdng-tb15 {
    padding-top: 15px;
    padding-bottom: 15px;
    }

/* 照会対象期間（上部） */
.oi8-graph-period1 {
    height: 20px;
    display: table;
    }

/*--- ▽[ADD]--- 2022/02/22 FJ高澤 -----------------------------------*/
.oi8-ka006-scr001 #legend_graph_lst013 .oi8-graph-period1 {
    display: unset;
    }

.oi8-ka006-scr001 #legend_graph_lst016 .oi8-graph-period1 {
    display: unset;
    }
/*--- △[ADD]--- 2022/02/22 FJ高澤 -----------------------------------*/

/* 表示する期間（下部） */
.oi8-graph-period2 {
    height: 20px;
    margin: 0 0 10px 15px;
    display: table;
    }

.oi8-graph-period-area .oi8-graph-period1 p {
    text-align: left;
    height: 25px;
    padding: 2px 5px;
    margin: 0 30px;
    box-sizing: border-box;
    border: 1px solid #C7CFD4;
    background-color: #FFFFFF;
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    float: left;
    line-height: 1.5;
    }

.oi8-graph-period-area .oi8-graph-period1-01 p {
    width: 96px;
    }

.oi8-graph-period-area .oi8-graph-period1-01 .oi8-period-next-button {
    margin-left: 105px;
    margin-right: 10px;
}

.oi8-graph-period-area .oi8-graph-period1-02 p {
    width: 190px;
    }

.oi8-graph-period-area .oi8-graph-period1-02 .oi8-period-next-button {
    margin-left: 200px;
    margin-right: 10px;
}

.oi8-graph-period-area div:nth-child(2) {
    padding-top: 5px;
}

.oi8-graph-area-mobile .oi8-graph-period2 span {
    padding: 0 16px 0 17px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }

.oi8-period-prev-button,
.oi8-period2-prev-button {
    background: url(../image/memder_date_graph_hnavi_left.png) no-repeat center center;
    background-size: 8px 12px;
}

.oi8-period-next-button,
.oi8-period2-next-button {
    background: url(../image/memder_date_graph_hnavi_right.png) no-repeat center center;
    background-size: 8px 12px;
}

.oi8-period-prev-button,
.oi8-period-next-button,
.oi8-period2-prev-button,
.oi8-period2-next-button {
    width: 25px;
    height: 25px;
    padding: 7px 0 0 6px;
    display: inline-block;
    box-sizing: border-box;
    border:none;
    background-color: #538DD5;
    float: left;
}

.oi8-period-prev-button:disabled,
.oi8-period-next-button:disabled,
.oi8-period2-prev-button:disabled,
.oi8-period2-next-button:disabled {
    background-color: #D2DAE4;
    cursor:auto;
    }

.oi8-graph-period-area .oi8-datepicker {
    padding: 0 10px;
    width: 130px;
    height: 25px;
    box-sizing: border-box;
    border: 1px solid #C7CFD4;
    }

.oi8-graph-period-area .oi8-datepicker:focus {
    background-color: #EAF8FF;
    }

.oi8-graph-period-area .oi8-graph-period1-03 .oi8-graph-period-label {
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    }

.oi8-graph-period-area .oi8-graph-period1-03 .oi8-graph-period-label span {
    padding: 0 10px;
    position: relative;
    top: -5px;
    }

.oi8-graph-period-area .oi8-graph-period-label {
    display:inline-block;
    }

.oi8-graph-period-area .oi8-graph-period-label span {
    padding-top: 5px;
    display: inline-block;
    vertical-align: bottom;
    line-height: 1.2;
    white-space: nowrap;
    }

#ui-datepicker-div {
    z-index: 100!important;
    }

/* Body: Read-only lists, text inputs, collapsible content */
.ui-body-a {
    background:             #fff /*{a-body-background-color}*/;
    border-color:             #ddd /*{a-body-border}*/;
    color:                     #333 /*{a-body-color}*/;
    text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/     #f3f3f3 /*{a-body-shadow-color}*/;
    border-width: 1px;
    border-style: solid;
    }

/* Loading screen */
.ui-loading .ui-loader {
    display: block;
    }

.ui-loader {
    display: none;
    z-index: 9999999;
    position: fixed;
    top: 50%;
    left: 50%;
    border:0;
    }

.ui-loader-default {
    background: none;
    filter: Alpha(Opacity=18);
    opacity: .18;
    width: 2.875em;
    height: 2.875em;
    margin-left: -1.4375em;
    margin-top: -1.4375em;
    }

.ui-loader-default h1 {
    display: none;
    }

.ui-loader .ui-icon-loading {
    display: block;
    margin: 0;
    width: 3.5em;
    height: 3.5em;
    padding: .0625em;
    -webkit-border-radius: 2.25em;
    border-radius: 2.25em;
    background: transparent url(../../pjcommon/style/jquery.mobile-1.4.0/images/ajax-loader.gif) no-repeat center;
    }

/* datepicker
--------------------*/
.ui-datepicker-trigger {
    width: 25px;
    height: 25px;
    cursor: pointer;
    }

.ui-datepicker {
    font-size: 120%!important;
    }

/* 共通
--------------------*/
.oi8-hidden {
    display: none;
    }

.oi8-hidden-force {
    display: none !important;
}