@charset "utf-8";

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: none;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    overflow-y: scroll;
    background-color: #F5FAFB;
    color: #46464F;
    font-size: 1.6rem;
    line-height: 1.5;
}
.oi8-container {
    width: 1286px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.oi8-container .oi8-container-inner {
    padding-left: 8.5rem;
    padding-right: 8.5rem;
}
.oi8-main-contents {
    padding-top: 3.2rem;
    background: url(../image/bg_contents.jpg) no-repeat top left;
}

/*-------------- ヘッダー（PC版旧デザイン） --------------*/
header.oi8-header,
header.oi8-member-header {
    width: 100%;
    background-color: #FFFFFF;
    line-height: 1;
    font-family: 'Meiryo', 'メイリオ', Verdana, 'ＭＳ Ｐゴシック', sans-serif;
}
.oi8-header-flame {
    width: 1286px;
    height: 53px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.oi8-header-right {
    display: flex;
}
/*ロゴ*/
.oi8-header-flame .oi8-logo {
    flex: auto;
    display: inline-block;
    vertical-align: middle;
}
.oi8-logo .oi8-logo-hokuden {
    padding-top: 1.6rem;
    float: left;
    margin-right: 1.2rem;
}
.oi8-logo .oi8-logo-hokulink {
    padding-top: 1rem;
    float: left;
}
.oi8-logo .oi8-logo-hokulink img {
    width: 100px;
}
/* よくあるご質問 */
.oi8-headar-faq {
    display: inline-block;
    vertical-align: middle;
    padding-top: 1.4rem;
}
.oi8-headar-faq button {
    font-family: 'Meiryo', 'メイリオ', Verdana, 'ＭＳ Ｐゴシック', sans-serif;
    border: none;
    border-radius: 1px;
    background-color: rgb(83,141,213);
    width: 112px;
    height: 30px;
    padding-left: 0.6rem;
    padding-right:0;
    padding-left: 0.5rem;
    display: flex;
    align-items: center;
}
.oi8-headar-faq button img {
    width: 22px;
    margin-top: 0.4rem;
    margin-right: 0.2rem;
}
.oi8-headar-faq button span {
    color: #ffffff; 
    font-size: 1.1rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
.oi8-member-header .oi8-headar-faq {
    padding-top: 1.4rem;
    margin-left: 1rem;
    margin-right: auto;
}
/*ユーザー名*/
.oi8-header-user-area {
    margin-top: 13px;
    margin-left: 0px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 30px;
}
.oi8-header-user-area > div {
    font-size: 65%;
    color: #003b51;
    float: left;
    line-height: 1.3;
}
.oi8-header-user-area > div:nth-child(1) {
    margin-right: 15px;
    height: 10px;
}
.oi8-header-user-area > div:nth-child(2) {
    width: 95px;
}
.oi8-header-name {
    width: 172px;
    word-break: break-all;
}
.oi8-header-name table td {
    font-size: 100%!important;
}
.oi8-header-name-td {
    float: right;
    font-size: 100%!important;
}
.oi8-header-name-td-td {
    text-align: right;
    vertical-align: bottom;
}
/*グローバルナビ（PC版）*/
.oi8-header-nav {
    margin-top: 21px;
    flex: 0 0 auto;
}
.oi8-header-nav li {
    text-align: right;
    margin-left: 6px;
    padding-left: 10px;
    display: inline;
    background-repeat: no-repeat;
    background-position: left center;
}
.oi8-header-nav li button {
    font-size: 75%;
    text-decoration: underline;
    color: #004351;
}
.oi8-header-nav li button:hover {
    color: #538DD5;
}
.oi8-header-nav li:nth-child(1) {
    margin-left: 0;
}
.oi8-header-nav li:nth-child(1) {
    background-image: url(../image/glo_header_p01.gif);
}
.oi8-header-nav li:nth-child(2) {
    background-image: url(../image/glo_header_p02.gif);
    position: relative;
}
.oi8-header-nav li:nth-child(3) {
    background-image: url(../image/glo_header_p03.gif);
}
.oi8-header-nav-mobile,
.oi8-member-header .oi8-menu-area2 {
    display: none;
}
/* ヘッダ共通領域 */
header .oi8-menu-area {
    position: absolute;
    top: 36px;
    display: none;
    z-index: 10;
    left: 0;
}
header .oi8-func .oi8-menu-area ul li {
    width: auto;
    height: auto;
    clear: both;
    margin: 0px;
    padding: 0px;
}
header .oi8-func .oi8-menu-area 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: 1.3rem;
    text-decoration: none;
}
header .oi8-func .oi8-menu-area 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;
}
header .oi8-func .oi8-menu-area ul li button:hover {
    background-color: #e9f2fe;
    color: #034081;
}
.oi8-overray-area,
.oi8-dialog-overlay-area {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    z-index: 9;
}

/*-------------- フッター（PC版旧デザイン） --------------*/
footer {
    line-height: 1;
    font-family: 'Meiryo', 'メイリオ', Verdana, 'ＭＳ Ｐゴシック', sans-serif;
    width: 100%;
    height: 45px;
    clear: both;
    background-color: #005271;
}
.oi8-footer-flame {
    font-size: 70%;
    color: #FFFFFF;
    width: 1286px;
    margin: 0 auto;
    padding: 18px 0 0 0;
    box-sizing: border-box;
}
.oi8-footer-flame ul {
    width: 50%;
    float: left;
}
.oi8-footer-flame ul:after {
    content: "";
    display: block;
    clear: both;
}
.oi8-footer-flame ul li {
    margin-right: 20px;
    padding-left: 10px;
    float: left;
    position:relative;
    top:0;
    left:0;
    font-size: 110%;
}
.oi8-footer-flame ul li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #FFFFFF;
}
.oi8-footer-flame ul a {
    color: #FFFFFF;
    text-decoration: underline;
}
.oi8-footer-flame ul a:hover {
    cursor: pointer;
}
.oi8-footer-flame .oi8-copyright {
    float: right;
    font-size: 11.2px;
}
.oi8-page-top-mobile {
    display: none !important;
}
.oi8-page-top {
    margin: 0 auto;
    position: relative;
    clear: both;
    z-index: 3;
}
.oi8-page-top a {
    width: 46px;
    height: 46px;
    display: block;
    box-sizing: border-box;
    position: fixed;
    right: 50%;
    bottom: 45px;
    margin-right: -644px;
}
.oi8-page-top a span {
    display: none;
}
/*-------------- フォーム --------------*/
/*入力系デフォルト*/
button, input {
    /* 一部ブラウザにフォントが継承されない事象の対処 */
    font-family : inherit;
    font-size: inherit;
}
/*初期：未入力状態のデザイン*/
input[type="text"],
input[type="password"] {
    border: 2px solid #777680;
    border-radius: 0.4rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #FFF8EF;
    padding: 1.7rem 1.4rem;
    font-size: 1.8rem;
    font-weight: 400;
    outline: none;
}
/*差分：入力中*/
input[type="text"]:focus,
input[type="password"]:focus {
    background-color: #F8FAFA;
    border-color: #2E3D9B !important;
    border-width: 2px !important;
    padding: 1.7rem 1.4rem !important;
}
/*差分：入力後、任意の入力フォーム状態*/
input[type="text"]:valid,
input[type="password"]:valid {
    background-color: #F8FAFA;
    border-color: #777680;
    color: #191C1D;
    border-width: 1px;
    padding: 1.8rem 1.5rem;
}
/*フォーム*/
.oi8-input-block .oi8-input-block-title {
    margin-bottom: 1rem;
    font-weight: 700;
}
/*-------------- ボタン --------------*/
/*CTAボタン（強調）*/
.oi8-cta-emphasis-button button {
    border: 1px solid #263DB5;
    width: 100%;
    height: 64px;
    border-radius: 7rem;
    padding-left: 2.5rem;
    padding-right: 5.2rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    position: relative;
    background-color: #263DB5;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.2s;
}
.oi8-cta-emphasis-button button::after {
    content: "";
    width: 40px;
    height: 40px;
    display: inline-block;
    position: absolute;
    top: auto;
    bottom: auto;
    right: 1.1rem;
    background: no-repeat center center;
    background-image: url(../image/icon_arrow_right.svg);
    background-color: #F7D856;
    border-radius: 50%;
}
.oi8-cta-emphasis-button button:not(:disabled):hover {
    cursor: pointer;
    border-color: #3953d5;
    background-color: #3953d5;
}
/*primaryボタン 共通*/
.oi8-primary-emphasis-button button,
.oi8-primary-button a,
.oi8-primary-button button {
    border: 1px solid #6ADDFF;
    width: 100%;
    border-radius: 5rem;
    padding-left: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    position: relative;
    background-color: #6ADDFF;
    color: #191C1D;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.2s;
}
.oi8-primary-emphasis-button button::after,
.oi8-primary-button a::after,
.oi8-primary-button button::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: auto;
    bottom: auto;
    right: 1.1rem;
    background: no-repeat center center;
    background-image: url(../image/icon_arrow_right.svg);
    background-color: #F5FAFB;
    border-radius: 50%;
}
.oi8-primary-emphasis-button button:not(:disabled):hover,
.oi8-primary-button a:hover,
.oi8-primary-button button:not(:disabled):hover {
    cursor: pointer;
    border-color: #9ee8ff;
    background-color: #9ee8ff;
}
/*primaryボタン 共通（強調）*/
.oi8-primary-emphasis-button button {
    height: 64px;
    padding-right: 5rem;
    font-size: 2rem;
}
.oi8-primary-emphasis-button button::after {
    width: 40px;
    height: 40px;
}
/*primaryボタン（通常）*/
.oi8-primary-button a,
.oi8-primary-button button {
    height: 48px;
    padding-right: 4rem;
}
.oi8-primary-button a::after,
.oi8-primary-button button::after {
    width: 24px;
    height: 24px;
}
/*secondaryボタン（強調）*/
.oi8-secondary-emphasis-button a,
.oi8-secondary-emphasis-button button {
    border: 1px solid #777680;
    width: 100%;
    height: 64px;
    border-radius: 7rem;
    padding-left: 2.5rem;
    padding-right: 5.2rem;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
    position: relative;
    background-color: #fff;
    color: #191C1D;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.2s;
}
.oi8-secondary-emphasis-button a::after,
.oi8-secondary-emphasis-button button::after {
    content: "";
    width: 40px;
    height: 40px;
    display: inline-block;
    position: absolute;
    top: auto;
    bottom: auto;
    right: 1.1rem;
    background: no-repeat center center;
    background-image: url(../image/icon_arrow_right.svg);
    background-color: #6ADDFF;
    border-radius: 50%;
}
/*secondaryボタン（通常）*/
.oi8-secondary-button button {
    border: 1px solid #777680;
    width: 100%;
    height: 48px;
    border-radius: 5rem;
    padding-left: 2.5rem;
    padding-right: 4rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    position: relative;
    background-color: #fff;
    color: #191C1D;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.2s;
}
.oi8-secondary-button button::after {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: auto;
    bottom: auto;
    right: 1.1rem;
    background: no-repeat center center;
    background-image: url(../image/icon_arrow_right.svg);
    background-color: #6ADDFF;
    border-radius: 50%;
}
.oi8-secondary-button button:not(:disabled):hover,
.oi8-secondary-emphasis-button a:hover,
.oi8-secondary-emphasis-button button:not(:disabled):hover {
    cursor: pointer;
    border-color: #3dd2ff;
    color: #46464F;
}
/*ボタン　アイコン付き*/
*[class*="oi8-icon-button-"] a::before,
*[class*="oi8-icon-button-"] button::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: auto;
    bottom: auto;
    left: 2.4rem;
    background-repeat: no-repeat;
    background-position: center center;
}
*[class*="oi8-icon-button-"] a,
*[class*="oi8-icon-button-"] button {
    padding-left: 5.6rem;
}
.oi8-icon-button-power-outage a::before {
    background-image: url(../image/icon_power_outage.svg);
}
.oi8-icon-button-graph button::before {
    background-image: url(../image/icon_graph.svg);
}
/*ボタン無効化*/
.oi8-cta-emphasis-button button:disabled,
.oi8-secondary-emphasis-button.disabled a,
.oi8-secondary-emphasis-button button:disabled,
.oi8-secondary-button button:disabled,
.oi8-primary-button button:disabled {
    border-color: #DADADC;
    background-color: #DADADC;
    color: #8D8E90;
    cursor: unset;
    pointer-events: none;
}
.oi8-cta-emphasis-button button:disabled::after,
.oi8-secondary-emphasis-button.disabled a::after,
.oi8-secondary-emphasis-button button:disabled::after,
.oi8-secondary-button button:disabled::after,
.oi8-primary-button button:disabled::after {
    display: none;
}
*[class*="oi8-icon-button-"] button:disabled::before {
    opacity: 0.4;
}
/*リストボタン*/
.oi8-list-button a,
.oi8-list-button button {
    display: inline-block;
    color: #263DB5;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    padding: 1.4rem 1.2rem 1.4rem 4.5rem;
    position: relative;
    cursor: pointer;
    text-align: left;
    transition: 0.2s;
}
.oi8-list-button a::before,
.oi8-list-button button::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: 1.3rem;
    left: 1.3rem;
    background: url(../image/icon_arrow_right.svg) no-repeat center center;
    background-color: #E9EFF0;
    border-radius: 50%;
}
.oi8-list-button a:hover,
.oi8-list-button button:not(:disabled):hover {
    opacity: 0.75;
}
/*リストボタン無効化*/
.oi8-list-button button:disabled {
    color: #8D8E90;
    cursor: unset;
}
.oi8-list-button button:disabled::before {
    opacity: 0.5;
}
@media all and (-ms-high-contrast: none) {
    .oi8-primary-emphasis-button button::after,
    .oi8-secondary-emphasis-button button::after,
    .oi8-secondary-button button::after {
        top: 1.1rem;
    }
}
/*-------------- メッセージ：警告ブロック --------------*/
.oi8-message-attention-block {
    border: 2px solid #FF7E4E;
    background-color: #FAEAE7;
    padding: 0 0.9rem 1rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
}
.oi8-message-attention-block a {
    color: #191C1D;
    padding-bottom: 0.2rem;
    text-decoration: none;
}
.oi8-message-attention-block a:hover {
    text-decoration: underline;
}
.oi8-message-attention-block .oi8-message-attention-link-blank a {
    padding-right: 2.2rem;
    position: relative;
}
.oi8-message-attention-block .oi8-message-attention-link-blank a::after {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url(../image/icon_blank.svg) no-repeat center center;
    position: absolute;
    bottom: 0.2rem;
    right: 0;
}
.oi8-message-attention-block ul li {
    overflow: hidden;
    display: flex;
    color: #191C1D;
    background: url(../image/icon_important.svg) no-repeat top 0.8rem left 0.5rem;
    padding-left: 3.5rem;
    padding-top: 1rem;
}
.oi8-message-attention-block ul li:not(:first-child) {
    margin-top: 1rem;
    border-top: 1px solid #f5beaa;
}
.oi8-message-attention-block .oi8-message-attention-button {
    margin-left: auto;
}
.oi8-message-attention-block .oi8-message-attention-button button {
    color: #263DB5;
    font-weight: 700;
}

/*-------------- ダイアログ --------------*/
.oi8-dialog-area {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 10;
    max-width: 100%;
    display: none;
}
.oi8-dialog-area .oi8-dialog-block {
    box-shadow: 0 0.3rem 1.6rem rgba(0, 0, 0, 0.07);
    background-color: #fff;
    border-radius: 1.6rem;
    padding: 3.2rem;
}
.oi8-dialog-block .oi8-dialog-button-area {
    margin-top: 2.4rem;
}
.oi8-dialog-block .oi8-dialog-button-area .oi8-secondary-button {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
.oi8-dialog-block .oi8-dialog-button-area .oi8-secondary-button button {
    justify-content: center;
    padding-right: 2.4rem;
}
.oi8-dialog-block .oi8-dialog-button-area .oi8-secondary-button button::after {
    display: none;
}
/*-------------- 共通コンテンツ --------------*/
/*改行*/
.oi8-br-molile {
    display: none;
}
@media screen and (max-width: 440px), screen and (max-width: 956px) and (orientation: landscape) {
    .oi8-main-contents {
        padding-top: 5.6rem;
        background: url(../image/idx_bg_contents_mobile.jpg) no-repeat top left;
        background-size: 100%;
    }
    .oi8-container {
        width: auto;
    }
    .oi8-container .oi8-container-inner {
        padding-left: 0;
        padding-right: 0;
    }
/*-------------- ヘッダー（mobile版旧デザイン） --------------*/
    header.oi8-header,
    header.oi8-member-header  {
        position: fixed;
        width: 100%;
        z-index: 9;
        top: 0;
    }
    .oi8-header-flame {
        width: 100%;
        height: 40px;
    }
    .oi8-logo .oi8-logo-hokuden {
        padding-top: 1rem;
        margin-right: 0.5rem;
        margin-left: 1rem;
    }
    .oi8-logo .oi8-logo-hokuden img {
        width: 80px;
    }
    .oi8-logo .oi8-logo-hokulink img {
        width: 53px;
    }
    .oi8-header .oi8-headar-faq {
        padding-top: 0.5rem;
        padding-right: 0.4rem;
    }
    .oi8-member-header .oi8-headar-faq {
        padding-top: 0.5rem;
        margin-left: auto;
        margin-right: 0;
    }
    .oi8-header-user-area,
    .oi8-header-nav {
        display: none;
    }
    .oi8-header-nav-mobile {
        display: block;
        width: 81px;
    }
    .oi8-header-nav-mobile li {
        float: left;
        position: relative;
    }
    .oi8-header-nav-mobile li:first-child::after {
        width: 1px;
        height: 20px;
        border-right: 1px solid rgb(204, 204, 204);
        content: "";
        position: absolute;
        top: 10px;
        right: -1px;
    }
    .oi8-header-nav-mobile li a img {
        width: 40px;
        height: auto;
    }
    header .oi8-menu-area,
    header .oi8-menu-area2 {
        position: fixed;
        top: 40px;
        right: 0;
        left: auto;
        display: none;
        z-index: 10; /* oi8-overray-area以上 */
    }
    header .oi8-menu-area ul li button,
    header .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;
    }
    header .oi8-menu-area ul li button:after,
    header .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;
    }
    header .oi8-menu-area ul li button:hover,
    header .oi8-menu-area2 ul li button:hover {
        background-color: #e9f2fe;
        color: #034081;
    }
/*-------------- フッター（mobile版旧デザイン） --------------*/
    footer {
        height: auto;
    }
    .oi8-footer-flame {
        width: auto;
        padding-top: 0;
    }
    .oi8-footer-flame ul {
        width: auto;
        float: none;
    }
    .oi8-footer-flame ul li {
        float: none;
        margin-right: 0;
        padding-left: 0;
    }
    .oi8-footer-flame ul li:before {
        display: none;
    }
    .oi8-footer-flame ul a,
    .oi8-footer-flame ul button {
        display: block;
        box-sizing: border-box;
        height: 35px;
        background-color: #005271;
        border-bottom: 1px solid #29667d;
        line-height: 3.0;
        text-decoration: none;
        font-size: 12px;
        text-align: center;
    }
    footer ul li:last-child a {
        border-bottom: none;
    }
    .oi8-footer-flame .oi8-copyright {
        float: none;
        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-page-top {
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: right;
        font-size: 12px;
        font-size: 1.2rem;
        padding-right: 20px;
        clear: both;
        background-color: #fff;
        margin-top: 15px;
    }
    .oi8-page-top a {
        color: #165ea9;
        position: relative;
        padding-right: 23px;
        width: 100%;
        height: auto;
        right: inherit;
        right: auto;
        bottom: auto;
        margin-right: 0;
    }
    .oi8-page-top a span {
        display: block;
    }
    .oi8-page-top a img {
        display: none;
    }
    .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);
    }
/*-------------- メッセージ：警告ブロック --------------*/
    .oi8-message-attention-block {
        margin: 0 2.4rem;
    }
    .oi8-message-attention-block ul li {
        display: list-item;
    }
    .oi8-message-attention-block .oi8-message-attention-button {
        text-align: right;
    }
/*-------------- ダイアログ --------------*/
    .oi8-dialog-area {
        width: calc(100% - 3.2rem);
    }
    .oi8-dialog-area .oi8-dialog-block {
        padding: 2.4rem;
    }
    .oi8-dialog-block .oi8-dialog-button-area {
        margin-top: 2.4rem;
        display: block;
    }
    .oi8-dialog-block .oi8-dialog-button-area > div {
        width: auto;
        margin: 0 0.8rem;
    }
/*-------------- 共通コンテンツ --------------*/
    .oi8-br-molile {
        display: inline-block;
    }
    .oi8-br-pc {
        display: none;
    }
}