@charset "utf-8";

/* Base
--------------------------------------------------- */
html,
body {
    position: relative;
}

body {
    background:-moz-linear-gradient(top, #fff, #D8E0E8); /* Firefox */
    background:-webkit-linear-gradient(top, #fff, #D8E0E8);/* safari Chrome */
    background:-ms-linear-gradient(top, #fff, #D8E0E8); /* IE */
    background: linear-gradient(#fff 140px,#D8E0E8 100%);
    font-family: "メイリオ", "MSゴシック", sans-serif;
    font-size: 14px;
    color: #565656;
    margin: 0;
    padding: 0;
}

/* 環境ごとに背景カラーを変える */
.body-dev {
  background: #FFE4C4;
}

.body-stg {
  background: #E6FFE9;
}

a {
    text-decoration: none;
    color: #565656;
}

a:hover {
    text-decoration: underline;
    color:#0056B3;
}

ul,
li {
    list-style-type: none;
}
#wrapper {
    width: 100%;
    min-height: 100vh;
    position: relative;
    /* padding-bottom: 96px; */
    box-sizing: border-box;
}

p{
  margin: 0 0 0.2em 0;
}


input {
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #565656;
    border-bottom: 3px solid #E9F1F4 !important;
}

input:focus {
    outline: none;
}
table th span{
  color:#E94A31;
  padding-left:3px;
}
h3 span{
  color:#E94A31;
  padding-left:10px;
  font-size:72%;
}
.description{
    margin: 0px 10px 30px 10px;
    font-size: 135%;
    line-height: 30px;
}
.description_s{
    margin: 30px 10px 10px 10px;
    font-size: 115%;
}
.fw_n { font-weight: normal;}
.fw_b { font-weight: bold;}
.fz_ss { font-size:  72%;}/* base 14px -> 10px */
.fz_s { font-size:  86%;}/* base 14px -> 12px */
.fz_m { font-size: 100%;}
.fz_l { font-size: 115%;}/* base 14px -> 16px */
.fz_ll { font-size: 129%;}/* base 14px -> 18px */
.fz_lll { font-size: 143%;}/* base 14px -> 20px */
.fz_22 { font-size: 157%;}/* base 14px -> 22px */
.fz_23 { font-size: 164%;}/* base 14px -> 23px */
.fz_24 { font-size: 171%;}/* base 14px -> 24px */

/* Width
-------------------------- */
.w960 { width: 960px;}
.w800   { width: 800px;}
.w640   { width: 640px;}
.w480   { width: 480px;}
.w320   { width: 320px;}
.w160   { width: 160px;}

.w_half{width: 49%;}
.w_tri { width: 33%;}
.w_quart { width: 24%;}
.w_full{ width: 99.9%;}
.w_max { width: 100%;}

.w03per { width: 3%  !important;}
.w05per { width: 5%  !important;}
.w07per { width: 7%  !important;}
.w10per { width: 10% !important;}
.w12per { width: 12% !important;}
.w13per { width: 13% !important;}
.w14per { width: 14% !important;}
.w15per { width: 15% !important;}
.w17per { width: 17% !important;}
.w20per { width: 20% !important;}
.w25per { width: 25% !important;}
.w28per { width: 28% !important;}
.w30per { width: 30% !important;}
.w35per { width: 35% !important;}
.w40per { width: 40% !important;}
.w45per { width: 45% !important;}
.w50per { width: 50% !important;}
.w55per { width: 55% !important;}
.w60per { width: 60% !important;}
.w65per { width: 65% !important;}
/* Floats
-------------------------- */
.fl_l  { display: inline; float: left;}
.fl_r  { display: inline; float: right;}
.flImg_l { display: inline; float: left; margin-right: 20px;}
.flImg_r { display: inline; float: right; margin-left: 20px;}
.ft_box{ overflow: hidden; *zoom: 1;}
.div_hover{cursor:pointer;}

/* Tools
-------------------------- */
.clear { clear: both;}
.block { display: block;}
.hide{ display: none;}
.bg_n { background: none !important;}
.td_u { text-decoration: underline;}
.td_n { text-decoration: none;}
.bold { font-weight:bold;}
.red{color:#E94A31;}
.subinfo{color: #808080;margin: 15px 0 0 0;font-size:86%;}

/* Table
-------------------------- */
table {
    border-collapse: collapse;
    vertical-align: middle;
    width: 100%;
    border: 2px solid #E9F1F4;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
}
table tr {
    background-color: #fff;
}
table th,
table td {
    border-bottom: 2px solid #E9F1F4;
    padding: 10px;
}
table tbody tr:hover {
    background-color: #E7F9F4;
}
table label {
    line-height: 34px;
    margin: 0;
}

table .checkbox_design input[type="checkbox"] + label,
table .checkbox_design_multi input[type="checkbox"] + input[type="hidden"] + label {
    margin: 7px 0px 0px 10px;
}
table thead {
    font-size: 129%;
}
/* Header
--------------------------------------------------- */
#header {
    width: 100%;
    background: #FFF;
    height: 134px;
    position: relative;
    z-index: 9999;
    margin-bottom: 50px;
}

.top_header {
    background: -moz-linear-gradient(left, #1A75BB, #1A5EA6);
    /* Firefox */
    background: -webkit-linear-gradient(left, #1A75BB, #1A5EA6);
    /* safari Chrome */
    background: -ms-linear-gradient(left, #1A75BB, #1A5EA6);
    /* IE */
    background: linear-gradient(to left,#1A75BB,#1A5EA6);
    height: 27px;
    color: #fff;
    width: 100%;
    position: relative;
}

.sub_nav {
    width: 100%;
    margin: 0 auto;
    text-align: right;
    line-height: 27px;
    margin-right: 10px;
}

.top_header p {
    float: left;
    text-align: left;
    margin: 0px 0px 0px 15px;
    line-height: 25px;
}

.top_header a {
    color: #FFFFFF;
}

.link_end {
    margin-right: 10px;
}

nav {
    margin: 0 auto;
    position: fixed;
    width: 100%;
    background-color: #FFF;
}

.header_area {
    display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flexbox;
    display: -webkit-flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width:100%;
    margin-top: 0;
    padding-top: 0;
}

.siteTitle {
    padding-left: 47px;
    margin-top: 30px;
    max-width: 270px;
    float: left;
    font-weight: 100;
    font-size: 135%;
    width: 30%;
    line-height: 25px;
}

/* GlobalNavigation
-------------------------- */
.gnav_container {
    height: 113px;
    float: right;
    width: 70%;
    max-width: 535px;
}

#menu {
    display: block;
}

.gnav_container a {
    color: #07569f;
    display: block;
    height: 113px;
    text-decoration: none;
}

.gnav_menu01 {
    background: url(/customer/img/menu01_off-b7169ad86117bbc77296888fe52ccb18.png) no-repeat;
}

.gnav_menu02 {
    background: url(/customer/img/menu02_off-26f10d17e95bec63ef44e6eb4e89c340.png) no-repeat;
}

.gnav_menu03 {
    background: url(/customer/img/menu03_off-be6f87c3a74ea15741cf548370aa174e.png) no-repeat;
}

.gnav_menu04 {
    background: url(/customer/img/menu04_off-22483fc2db161653825c3acbc91ce1ac.png) no-repeat;
}

.gnav_menu05 {
    background: url(/customer/img/menu05_off-cb6199fc80636f15958f1077a91763c7.png) no-repeat;
}

.gnav_menu01:hover,
.gnav_menu01active {
    background: url(/customer/img/menu01_on-7d8aa76b0b799cd6123c95d5af92e271.png) no-repeat;
}

.gnav_menu02:hover,
.gnav_menu01active {
    background: url(/customer/img/menu02_on-aad1906114fe8594c25d88454c3585e0.png) no-repeat;
}

.gnav_menu03:hover,
.gnav_menu01active {
    background: url(/customer/img/menu03_on-7e8deb1af1f1fd6db78095cb28581c1e.png) no-repeat;
}

.gnav_menu04:hover,
.gnav_menu01active {
    background: url(/customer/img/menu04_on-d8fe96eb98b9ffc45f1027423ed0bf33.png) no-repeat;
}

.gnav_menu05:hover,
.gnav_menu01active {
    background: url(/customer/img/menu05_on-dfbc49a72c70244cb76377b075200035.png) no-repeat;
}

.gnav_menu01,
.gnav_menu02,
.gnav_menu03,
.gnav_menu04,
.gnav_menu05,
.gnav_menu01:hover,
.gnav_menu02:hover,
.gnav_menu03:hover,
.gnav_menu04:hover,
.gnav_menu05:hover,
.gnav_menu01active,
.gnav_menu02active,
.gnav_menu03active,
.gnav_menu04active,
.gnav_menu05active {
    float: left;
    width: 20%;
    height: 113px;
    text-align: center;
    line-height: 165px;
    background-size: 100% 100%;
    max-width: 113px;
}

/* Footer
--------------------------------------------------- */
footer {
    float: left;
    width: 100%;
    background: #B1B1B1;
    text-align: center;
    padding-top: 10px;
    /* z-index: 9999; */
    /* position: absolute; */
    bottom: 0;
}

.footer_link {
    padding-top: 27px;
    padding-bottom: 10px;
    /* position: relative; */
    color: #fff;
}

.footer_link a {
    color: #fff;
    text-align: right;
}

.copyright {
    color: #fff;
    font-size: 86%;
    padding-bottom: 10px;
}


/* main
--------------------------------------------------- */
#content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

h2 {
    border-bottom: 2px solid #CCD5DB;
    margin-bottom: 50px;
    padding-bottom: 5px;
    padding-left: 10px;
    font-size: 161%;
}

/* top only
-------------------------- */
.seikyu_area {
    border: 1px solid #D0DBE2;
}

.seikyu_total {
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 70px;
    /* border-bottom: 1px solid #D0DBE2; */
    width: 100%;
}

.seikyu_total h2 {
    font-size: 171%;
    padding-left: 30px;
    padding-top: 20px;
    float: left;
    border-bottom: 0px;
    width: 50%;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.seikyu_total p {
    float: right;
    font-size: 164%;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: right;
    font-weight: bold;
}

.swiper-container {
    width: 100%;
    height: 100%;
    background: #ECF0F4;
    border-left: 1px solid #D0DBE2;
    border-right: 1px solid #D0DBE2;
    border-bottom: 1px solid #D0DBE2;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.seikyu_container {
    width: 90%;
    max-width: 795px;
    margin: 0 auto;
    background-color: #F4F6F8;
    margin-top: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.seikyu_container .left {
    float: left;
    line-height: 62px;
    margin-left: 20px;
}

.seikyu_container .seikyu_before_left {
    float: left;
    /* line-height: 31px; */
    text-align: left;
    margin-left: 20px;
    margin-top: 7px;
}
.seikyu_container .seikyu_before_left .shopname{
  font-size:72%;
}

.seikyu_container .right {
    float: right;
    line-height: 72px;
    padding-right: 8%;
}

.seikyu_container a {
    display: block;
}

.seikyu_container a:hover {
    text-decoration: none;
    opacity: 0.5;
}

.seikyu_total_over {
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 70px;
    /* border-bottom: 1px solid #D0DBE2; */
    width: 100%;
}

.seikyu_total_over h2 {
    font-size: 171%;
    padding-left: 30px;
    padding-top: 20px;
    float: left;
    border-bottom: 0px;
    width: 30%;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.seikyu_total_over p {
    float: right;
    font-size: 124%;
    padding-right: 30px;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: right;
    font-weight: bold;
}

/* add-start
-------------------------- */
.seikyu_container .div_hover:hover {
    text-decoration: none;
    opacity: 0.5;
}
/* add-end
-------------------------- */

.seikyu_overdue,
.seikyu_paying,
.seikyu_paid {
    height: 100px;
    border-radius: 10px;
    background: url(/customer/img/arrow_right-8dbe4268d1156d79931b1b0644dd750e.png) no-repeat right;
    background-size: 10px;
    background-position: right 20px bottom 50%;
    background-color: #fff;
}
.seikyu_before {
    height: 100px;
    border-radius: 10px;
    background-size: 10px;
    background-position: right 20px bottom 50%;
    background-color: #fff;
}

.seikyu_none {
    height: 100px;
    background: #F4F6F8;
    border-radius: 10px;
}

.seikyu_overdue .status,
.seikyu_paying .status,
.seikyu_before .status {
    width: 20%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 100px;
    color: #fff;
    line-height: 100px;
    font-size: 115%;
    float: left;
    font-weight: 600;
}

.seikyu_overdue .status {
    background: #E94A31;
}

.seikyu_paying .status {
    background: #6ACCC0;
}

.seikyu_before .status {
    background: #93B0BE;
}

.seikyu_paid .status {
    background: #C5D1D6;
}

.news_area {
    margin-top: 40px;
    padding: 25px 20px 30px 20px;
    background: #ECF0F4;
}

.top_news_title {
    border-bottom: 2px solid #CCD5DB;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 45px;
}

.top_news_title h3 {
    font-size: 164%;
    float: left;
    padding-bottom: 8px;
    font-weight: bold;
}

.news_list {
    float: right;
    padding-top: 13px;
    padding-right: 20px;
    background: url(/customer/img/arrow_right-8dbe4268d1156d79931b1b0644dd750e.png) no-repeat right;
    background-size: 7px;
    background-position: right bottom 8px;
    padding-bottom: 8px;
}

.top_news_list {
    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 20px;
}

.top_news_list li {
    display: table;
    width: 100%;
    padding: 4px 0px;

}

.top_news_list li a {
    color: #575757;
    text-decoration: none;
    display:block;
}
.top_news_list li a .top_news_newIcon {
    width: 3em;
    text-decoration: none;
    font-size:11px;
    color:#E94A31;
    text-align:center;
    vertical-align:middle;
}
.top_news_list li a .top_news_importantIcon {
    width: 2em;
    text-decoration: none;
}
.top_news_importantIcon_on {
    background: url(/customer/img/icon_megaphone-df4bf3e347ab25b8e3c0bea7c9dbead4.png) no-repeat left;
}

.top_news_list li a .top_news_type {
    width: 100px;
    text-align:center;
    text-decoration: none;
    font-size:11px;
    color:#E94A31;
    border: 1px solid #E94A31;
    border-radius:10px;
    vertical-align: middle;
}
.news_type_info{
    width: 100px;
    height:22px;
    text-align:center;
    text-decoration: none;
    font-size:11px;
    color:#E94A31;
    background:#fff;
    border: 1px solid #E94A31;
    border-radius:10px;
    vertical-align: middle;
}
.news_type_alert{
  width: 100px;
    text-align:center;
    text-decoration: none;
    font-size:11px;
    border-radius:10px;
    vertical-align: middle;
    color:#fff;
    background-color: #E94A31;
}
.top_news_list li a .top_news_date {
    width: 7em;
    padding-left: 10px;
    text-decoration: none;
    vertical-align:middle;
}

.top_news_list li a p {
    display: table-cell;
}
.top_news_content {
    padding-left: 28px;
    vertical-align: middle;
}

.top_news_content:hover {
    text-decoration: underline;
}
.news_area1{
  width: 265px;
  padding-top:17px;
}
td p.top_news_importantIcon{
  width:25px;
  float:left;
}

td p.news_type_info{
  width:120px;
  float:left;
}
td p.top_news_date{
  width:95px;
  float:left;
  padding-left:10px;
}
td p.top_news_content{
  float:left;
  padding-left:0px;
}
td p.top_news_newIcon{
    width: 40px;
    float:left;
    padding-left:10px;
    text-decoration: none;
    font-size:11px;
    color:#E94A31;
    text-align:center;
}
/* Massage
-------------------------- */
.message_container {
    width: 100%;
    border: 1px solid #D0DBE2;
    padding: 27px 27px 20px 28px;
    font-size: 129%;
    margin-bottom: 50px;
}

.message_container p {
    margin-left: 45px;
}

.message_container p span {
    color: #E94A31;
}

.icon_warning {
    background: url(/customer/img/icon_warning-320ac99f9111572fa21734bcb99d0565.png) no-repeat left;
    background-color:rgb(256,256,256,0.6);
    background-position: 27px 50%;
    z-index: 3;
}
.icon_check {
    background: url(/customer/img/icon_check-cd779c607419c24eac4b1c00830a672b.png) no-repeat left;
    background-color:rgb(256,256,256,0.6);
    background-position: 27px 50%;
    z-index: 3;
}

.error_message_container {
    width: 100%;
    max-width: 900px;
    border: 1px solid #D0DBE2;
    margin: 0 auto;
    margin-top: 20px;
    padding: 18px 27px;
    font-size: 129%;
    background-color: #fff;
    z-index: 2;
}

.error_message_container p {
    margin-left: 45px;
    margin-top: 5px;
    padding: 0;
}

.message_container p span {
    color: #E94A31;
}

/* btn
-------------------------- */
button,
.back_btn{
    width: 250px;
    height: 40px;
    display: block;
    color: #1A5EA6 !important;
    background: #fff;
    border:2px solid #1A5EA6;
    font-size: 129%;
    text-align: center;
    margin: 0 auto;
    line-height: 42px;
    border-radius: 45px;
    text-decoration: none;
}
button:hover {
    opacity:0.8;
    text-decoration: none;
}

.blue_btn {
    width: 250px;
    height: 40px;
    display: block;
    color: #fff !important;
    margin: 0 auto;
    background: -moz-linear-gradient(left, #1A75BB, #1A5EA6);
    background: -webkit-linear-gradient(left, #1A75BB, #1A5EA6);
    background: -ms-linear-gradient(left, #1A75BB, #1A5EA6);
    background: linear-gradient(to right,#1A75BB,#1A5EA6);
    font-size: 129%;
    text-align: center;
    line-height: 42px;
    border-radius: 45px;
    text-decoration: none;
}

.blue_btn:hover {
    opacity:0.8;
    text-decoration:none;
}
.btn_s {
    width: 130px;
    height: 34px;
    display: inline-block;
    margin: 0 auto;
    color: #fff !important;
    background: -moz-linear-gradient(left, #1A5EA6, #1A75BB);
    background: -webkit-linear-gradient(left, #1A5EA6, #1A75BB);
    background: -ms-linear-gradient(left, #1A5EA6, #1A75BB);
    background: linear-gradient(to right, #1A5EA6, #1A75BB);
    font-size: 85%;
    text-align: center;
    line-height: 30px;
    border-radius: 45px;
    text-decoration: none;
}

.btn_s2 {
    width: 130px;
    height: 34px;
    display: inline-block;
    margin: 0 auto;
    color: #1A5EA6 !important;
    background: #fff;
    border:2px solid #1A5EA6;
    font-size: 85%;
    text-align: center;
    line-height: 30px;
    border-radius: 45px;
    text-decoration: none;
}

.btn2_download:hover {
    opacity:0.8;
    color: #fff !important;
    background: -moz-linear-gradient(left, #1A75BB, #1A5EA6);
    background: -webkit-linear-gradient(left, #1A75BB, #1A5EA6);
    background: -ms-linear-gradient(left, #1A75BB, #1A5EA6);
    background: linear-gradient(to right,#1A75BB,#1A5EA6);
    text-decoration: none;
    cursor: pointer;
}

.main_btn_container .blue_btn {
    width: 90%;
    max-width: 440px;
    height: 70px;
    display: block;
    font-size: 171%;
    line-height: 72px;
    text-decoration: none;
}

.main_btn_container {
    margin-bottom: 50px;
}

.btn_area .blue_btn {
    /* margin-bottom: 60px; */
    /* margin-top: 20px; */
}
.btn_area {
    margin-bottom: 100px;
    margin-top: 60px;
    height: 50px;
}
.col1 {
  width:100%;
  max-width: 700px;
  height: auto;
  margin:0 auto;
}

 .col1 .colCenter {
  width:100%;
  max-width: 700px;
  height: auto;
  float: left;
  overflow: visible;
  padding: 5px 0px 0px 0px;
}

.col2 {
  width: 700px;
  height: auto;
  margin:0 auto;
}

 .col2 .colLeft,.col2 .colRight {
  width: 350px;
  height: auto;
  float: left;
  overflow: visible;
  padding: 5px 0px 30px 0px;
}

/* search area
-------------------------- */

.search_area {
    background: #fff;
    margin-bottom: 60px;
    border: 1px solid #D0DBE2;
}

.search_area h3 {
    width: 100%;
    height: 80px;
    font-size: 161%;
    font-weight: bold;
    padding-left: 30px;
    line-height: 85px;
    border-bottom:1px solid #D0DBE2;
}

.search_area .blue_btn {
    margin-bottom: 40px;
    margin-top: 20px;
}

.search_table {
    font-size: 143%;
    width: 100%;
    position: relative;
    border-collapse: collapse;
    border:0px;
}

.search_table tr {
    vertical-align: inherit;
    border-color: inherit;
    background:none;
}
.search_table tr:hover {
    background:none;
}

.search_table th {
    width: 24%;
    vertical-align: middle !important;
    text-align: left;
    float: none;
    position: relative;
    padding: 15px 0 15px 30px;
    border-bottom:0px;
}

.search_table td {
    padding: 15px 30px 15px 0px;
    border-bottom:0px;
}
.selectbox_design,
.selectdate_start,
.selectdate_end{

    line-height: 1.42857143;
    color: #565656;
    border-bottom: 3px solid #E9F1F4;
    background: url(/customer/img/arrow_under-906399190012b5f0dd10a5243a62359a.png) no-repeat right;
    background-size: 10px;
    background-position: right 10px bottom 50%;
    height: 55px;
}

.icon_billding_s{
    background: url(/customer/img/icon_billding-93c3ef3b19c1c8d0f08b366dcca66346.png) no-repeat left,url(/customer/img/arrow_under-906399190012b5f0dd10a5243a62359a.png) no-repeat right;
    background-size: 20px,10px;
    background-position: left 10px bottom 50%,right 10px bottom 50%;
    padding-left: 40px;
}

.selectbox_design:focus,
.selectdate_start:focus,
.selectdate_end:focus {
    outline: none;
}

.err_input {
    display: block;
    color: #E94A31;
    font-size: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.selectdate_start {
    background: url(/customer/img/icon_calender01-af234a83edefa5a13f223b3824a0a205.png) no-repeat left;
    float: left;
}
.selectdate_end {
    background: url(/customer/img/icon_calender02-f7cfe49c4e5f56fc89ac7aea65999129.png) no-repeat left;
    float: right;
}
.selectmonth_start {
    background: url(/customer/img/icon_calender01-af234a83edefa5a13f223b3824a0a205.png) no-repeat left;
    float: left;
}
.selectmonth_end {
    background: url(/customer/img/icon_calender03-d42e92269500ac7c92447baac43cff65.png) no-repeat left;
    float: right;
}
.selectdate_start,
.selectdate_end,
.selectmonth_start,
.selectmonth_end{
    padding-left: 45px;
    background-size: 25px;
    background-position: left 10px bottom 50%;
    width: 49%;
}


.checkbox_design {
    text-align: left;
}

/* 元々のチェックボックス（非表示） */
.checkbox_design input[type="checkbox"] {
    display: none;
}

/* チェックボックスの代わりを成すラベル */
.checkbox_design input[type="checkbox"] + label {
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 10px 25px 10px 30px;
}

/* ラベルの左に表示させる正方形のボックス□ */
.checkbox_design input[type="checkbox"] + label::before {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color: #D0DBE2;
    background-color: #FFF;
}

/* レ点 */
.checkbox_design input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 10px;
    margin-top: -9px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border-bottom: 4.5px solid;
    border-left: 4.5px solid;
    border-color: #5ED6B3;
}

/* add-start
-------------------------- */
.checkbox_design_multi {
    text-align: left;
}

/* 元々のチェックボックス（非表示） */
.checkbox_design_multi input[type="checkbox"] {
    display: none;
}

/* チェックボックスの代わりを成すラベル */
.checkbox_design_multi input[type="checkbox"] + input[type="hidden"] + label {
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 10px 25px 10px 30px;
}

/* ラベルの左に表示させる正方形のボックス□ */
.checkbox_design_multi input[type="checkbox"] + input[type="hidden"] + label::before {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color: #D0DBE2;
    background-color: #FFF;
}

/* レ点 */
.checkbox_design_multi input[type="checkbox"]:checked + input[type="hidden"] + label::after {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 10px;
    margin-top: -9px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border-bottom: 4.5px solid;
    border-left: 4.5px solid;
    border-color: #5ED6B3;
}
/* add-end
-------------------------- */

/* search result area
-------------------------- */
.search_result_area {
    margin-bottom: 50px;
}
.search_result_table {
    border: 1px solid #D0DBE2;
}

.search_result_table td:last-child {
    background: url(/customer/img/arrow_right-8dbe4268d1156d79931b1b0644dd750e.png) no-repeat right;
    background-size: 7px;
    background-position: left bottom 50%;
}
.search_result_table tr:last-child td{
    border-bottom: 0px;
}

.arrow_right{
    background: url(/customer/img/arrow_right-8dbe4268d1156d79931b1b0644dd750e.png) no-repeat right;
    background-size: 10px;
    background-position: right 15px bottom 50%;
}

.search_result_table .seikyu_before,
.search_result_table .seikyu_paying,
.search_result_table .seikyu_overdue,
.search_result_table .seikyu_paid {
    color: #fff;
    width: 100%;
    height: 42px;
    text-align: center;
    display: inline-block;
    line-height: 42px;
    max-width: 127px;
}

.search_result_table .seikyu_before {
    background: #93B0BE;
}

.search_result_table .seikyu_paying {
    background: #6ACCC0;
}

.search_result_table .seikyu_overdue {
    background: #E94A31;
}

.search_result_table .seikyu_paid {
    background: #C5D1D6;
}

/* add-start
-------------------------- */
/* search result table2
-------------------------- */

.search_result_table2 {
    border: 1px solid #D0DBE2;
    background:#fff;
}

.search_result_table2 td:last-child {
    background: url(/customer/img/arrow_right-8dbe4268d1156d79931b1b0644dd750e.png) no-repeat right;
    background-size: 7px;
    background-position: left bottom 50%;
}

/* search result table3
-------------------------- */
.search_result_table3 th{
  font-weight: bold;
  font-size:86%;
}

.search_result_table3 th,
.search_result_table3 td {
    border-bottom: 2px solid #E2E9ED;
}

.search_result_table3 td:last-child {
    background: url(/customer/img/arrow_right-8dbe4268d1156d79931b1b0644dd750e.png) no-repeat right;
    background-size: 7px;
    background-position: left bottom 50%;
}

/* add-end
-------------------------- */

/* footer menu　*/
/*
.footer_menu {
    position: -webkit-sticky;
    Safari
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #E3E9EF;
    z-index: 9999;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 2px solid #fff;
}
 */
.operation_menu {
    width: 100%;
    max-width: 900px;
    height: 46px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.operation_menu .toggle_area,
.operation_menu .dl_area {
    width: 33%;
    height: 40px;
    display: block;
    float: left;
}

.operation_menu .peger_area {
    width: 33%;
    height: 40px;
    display: block;
    float: right;
}

/* add-start
-------------------------- */
.operation_menu .btn_area {
    width: 50%;
    height: 40px;
    display: block;
    float: left;
}
/* add-end
-------------------------- */

.pager_pre,
.pagination,
.pager_next {
    float: left;
}

/* peger　*/
.pagination {
    position: block;
    float: left;
    padding: 0px 5px;
    background-color: #fff;
    border-radius: 40px;
    height: 40px;
    line-height: 0px;
    margin-top: 0px;
}

.pagination li {
    display: inline-block;
    list-style: none;
}

.pagination li a {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 0px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.pagination li a:hover,
.pagination li a.active {
    background-color: #DEFCF3;
    border-radius: 40px;
    width:25px;
    height:25px;
    margin: 0px;
}

.pager_pre a,
.pager_next a {
    position: block;
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 5px;
    background-color: #fff;
    border-radius: 40px;
    height: 30px;
    line-height: 0px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.pager_pre a {
    margin-right: 5px;
    background: url(/customer/img/arrow_left-7ecd32e91148332b01c398d1e473577c.png) no-repeat right;
    background-size: 10px;
    background-position: right 12px bottom 6.5px;
    background-color: #fff;
}

.pager_next a {
    margin-left: 5px;
    background: url(/customer/img/arrow_right-8dbe4268d1156d79931b1b0644dd750e.png) no-repeat right;
    background-size: 10px;
    background-position: right 9px bottom 6.5px;
    background-color: #fff;
}

.pager_pre a:hover,
.pager_next a:hover {
    background-color: #DEFCF3;
}

.note{
    height: 42px;
    float:left;
    background: url(/customer/img/icon_note-5920de658bcbad6b7a30e666e6515b4b.png) no-repeat left;
    background-size: 20px;
    background-position: left 0px bottom 60%;
    padding-left:30px;
    line-height: 42px;
    font-size: 115%;
}
.summary{
  margin-bottom:10px;
  display:block;
  font-size:115%;
}

/* hover info */
.info{
  margin-left: 5px;
  margin-top: 9px;
  float: left;
  height: 42px;
}

.tooltip {
    visibility: hidden;
    text-align: center;
  position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 500ms;
    width: 120px;
  bottom: 90px;
    margin-left: -60px;
}
.tooltip > .text {
  background-color: #FFA200;
    color: #fff;
    padding: 5px 10px;
  border-radius:6px;
    font-size: 12px;
    display: inline-block;
}
.tooltip > .text::after {
  content: "";
  position: absolute;
  top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FFA200 transparent transparent transparent;
}
.info:hover > .tooltip {
    visibility: visible;
    opacity: 1;
}

@keyframes popup {
  100% {
  opacity:1;
  }
}

/* toggle switch */
.switch{
    margin-left: 2%;
  float: left;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

/* update-start
-------------------------- */
.cmn-toggle + input[type="hidden"] + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round + input[type="hidden"] + label {
  padding: 2px;
  width: 70px;
  height: 40px;
  background-color: #dddddd;
  border-radius: 60px;
}

input.cmn-toggle-round + input[type="hidden"] + label:before,
input.cmn-toggle-round + input[type="hidden"] + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.cmn-toggle-round + input[type="hidden"] + label:before {
  right: 1px;
  background-color: #D0D2D3;
  border-radius: 60px;
  transition: background 0.4s;
}

input.cmn-toggle-round + input[type="hidden"] + label:after {
  width: 30px;
  background-color: #fff;
  border-radius: 100%;
  transition: margin 0.4s;
  height: 30px;
  margin-top: 4px;
  margin-left: 6px;
}

input.cmn-toggle-round:checked + input[type="hidden"] + label:before {
  background-color: #6ACCC0;
}

input.cmn-toggle-round:checked + input[type="hidden"] + label:after {
    margin-left: 31px;
}
/* update-end
-------------------------- */

/* detail_area
--------------------------------------------------- */
.detail_area {
    background: #fff;
    border: 1px solid #D0DBE2;
    margin-bottom: 50px;
}

.detail_area h3 {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #D0DBE2;
    font-size: 143%;
    font-weight: bold;
    padding-left: 60px;
    line-height: 64px;
}

.detail_table {
    padding: 10px 30px 10px 30px;
    font-size: 135%;
    width: 100%;
    border-collapse:collapse;
    border: 0px;
}

.detail_table tr {
    border-bottom: 1px solid #E9F1F4;
    display: table-row;
    vertical-align: inherit;
    border: 0px;
    background:none;
}
.detail_table tr:hover{
  background:none;
}
.detail_table tr:last-child {
    border:0px;
}

.detail_table th {
    margin:0;
    width:35%;
    height: 60px;
    padding-left: 30px;
    vertical-align: middle !important;
    text-align: left;
}

.detail_table td {
    padding: 10px 0px;
}
.detail_table tr:last-child th,
.detail_table tr:last-child td{
  border-bottom:0px;
}

.icon_user{
    background: url(/customer/img/icon_user-b1ebfc7b937b6c7356312a88edde93e4.png) no-repeat left;
    background-size: 30px;
    background-position: left 15px bottom 50%;
}

.icon_billding{
    background: url(/customer/img/icon_billding-93c3ef3b19c1c8d0f08b366dcca66346.png) no-repeat left;
    background-size: 20px;
    background-position: left 20px bottom 50%;
}

.icon_purchase{
    background: url(/customer/img/icon_purchase-d02e66bf7d29682c08567fc2e7a12807.png) no-repeat left;
    background-size: 30px;
    background-position: left 15px bottom 50%;
}
.icon_passbook{
    background: url(/customer/img/icon_passbook-e9b2703690f3968939866fdc86c97a9c.png) no-repeat left;
    background-size: 30px;
    background-position: left 15px bottom 50%;
}
/* edit_area
--------------------------------------------------- */
.edit_btn_area{
  margin-top:20px;
  margin-bottom:30px;
  height:50px;
}
/* total_area
--------------------------------------------------- */
.total_area {
    background: #fff;
    /* border: 1px solid #D0DBE2; */
    margin-bottom: 50px;
}

.calc_title {
    height: 70px;
    border: 1px solid #D0DBE2;
    width: 100%;
    border-bottom:0px;
}

.calc_title .seikyu_overdue{
    background: #E94A31;
    width: 127px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 42px;
    color: #fff;
    font-size: 115%;
    float: left;
    font-weight: 600;
    line-height:42px;
    text-align: center;
    margin: 15px 25px 15px 15px;
}
.calc_title .seikyu_paying{
    background: #6ACCC0;
    width: 127px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 42px;
    color: #fff;
    font-size: 115%;
    float: left;
    font-weight: 600;
    line-height:42px;
    text-align: center;
    margin: 15px 25px 15px 15px;
}
.calc_title .seikyu_paid{
    background: #C5D1D6;
    width: 127px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 42px;
    color: #fff;
    font-size: 115%;
    float: left;
    font-weight: 600;
    line-height:42px;
    text-align: center;
    margin: 15px 25px 15px 15px;
}

.calc_title .shiharai_piriod{
  display:block;
  font-size: 157%;
  padding:20px 0px 0px 20px;
}

/*  detail-calc
--------------------------------------------- */
.calc_area{
    padding: 33px 10.56% 30px;
    background-color: #ECF0F4;
    border: 1px solid #D0DBE2;
}

.detail-calc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

}

.detail-calc__item {
  display: -ms-flexbox;
  display: flex;
  width: 28.17%;
    height: 140px;
  border-radius: 10px;
  background-color: #fff;
  justify-content: center;
  /* align-items: center; */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.detail-calc__item-inner {
    height: 97px;
    border-radius: 10px;
}

.detail-calc__item--conf {
  position: relative;
}

.detail-calc__item--conf:before {
  position: absolute;
  top: 50%;
  left: -19%;
  margin-top: -1.5px;
  width: 20px;
  height: 3px;
  background-color: #1A75BB;
  content: "";
}

.detail-calc__item--not {
  position: relative;
}

.detail-calc__item--not:before,
.detail-calc__item--not:after {
  position: absolute;
  top: 53%;
  left: -19%;
  display: block;
  width: 20px;
  height: 3px;
  background-color: #1A75BB;
  content: "";
}

.detail-calc__item--not:before {
  margin-top: -8px;
}

.detail-calc__txt {
  display: block;
  width: 100%;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
    height: 50px;
  color: #fff;
    line-height: 52px;
    font-size: 143%;
  float: left;
  background: #8CA3C7;
    font-weight: bold;
}

.detail-calc__txt--red {
  background: #E94A31;
}

.detail-calc__num {
  display: block;
  /* margin-top: 10px; */
  width: 100%;
  text-align: center;
    font-size: 1.28571rem;
    line-height: 52px;
}

.detail-calc__num--red {
  margin-top: 3px;
  color: #E94A31;
  font-size: 1.28571rem;
}

/*  meisai_table
--------------------------------------------- */
.meisai_table {
    border-collapse: collapse;
    vertical-align: middle;
    width: 100%;
    border:0px;
}

.meisai_table thead {
    font-size: 129%;
}

.meisai_table tr{
  border-bottom: 2px solid #E9F1F4;
}

.meisai_table th,
.toggle td {
    padding: 20px 10px;
}

.meisai_table td p{
  margin:3px 0px;
}

.meisai_table tr:hover{
 cursor:pointer;
}

.meisai_table .hidden_row{
 display:none;
}

.hidden_row{
    background-color:#E9F1F4;
}

.hidden_row td {
    border-bottom: 2px solid #fff;
    padding: 20px 10px;
}

.hidden_row td:first-child{
  border-bottom:0px;
}

.hidden_row td:last-child{
  border-bottom:0px;
}

.menu-list .menu-submenu {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color:#E9F1F4;
}

.menu-list {
    padding-left: 0;
    /* display: block; */
    width: 100%;
    background: none;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    left: -100%;
}

.menu-list li.accordion-toggle,
.menu-list .menu-login {
    font-size: 16px;
    padding: 20px;
    text-transform: uppercase;
    border-top: 1px solid #dbdcd2;
}

.menu-list li:first-of-type {
    border-top: 0;
}

.accordion-toggle,
.accordion-content {
    cursor: pointer;
    position: relative;
    letter-spacing: 1px;
}

.accordion-content {
    display: none;
}

.accordion-toggle a:before,
.accordion-toggle a:after {
    content: '';
    display: block;
    position: absolute;
    /* top: 50%; */
    /* right: 30px; */
    width: 20px;
    height: 3px;
    margin-top: -1px;
    background-color: #1A5EA6;
    transform-origin: 50% 50%;
    transition: all 0.3s ease-out;
    margin-left: 0;
}

.accordion-toggle a:before {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    opacity: 1;
    z-index: 2;
}

.accordion-toggle.active-tab {
  transition: all 0.3s ease;
  border-bottom: 2px solid #E9F1F4;
}

.accordion-toggle a.active:before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.accordion-toggle a.active:after {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    background: #fff !important;
    opacity: 0;
}

.menu-submenu td ul {
  margin-left:15%;
  margin-right:10%;
  border-bottom: 2px solid #fff;
    display: -ms-flexbox;
  display: flex;
  padding: 10px 0px;
}

.menu-submenu td ul:last-child{
  border-bottom: 0px;
}

.menu-submenu td ul li:first-child{
  padding:0px 10px;
  width:80%;
}

.menu-submenu td ul li:last-child{
  padding:0px 10px;
  width:20%;
}

.meisai_total {
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 70px;
    width: 100%;
}

.meisai_total p {
    float: right;
    font-size: 164%;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    text-align: right;
}

/* input area
-------------------------- */

.input_area {
    background: #fff;
    border: 1px solid #D0DBE2;
    margin-bottom: 60px;
}

.input_area_short_bottom {
    margin-bottom: 5px;
}

.input_area h3 {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #D0DBE2;
    font-size: 161%;
    font-weight: bold;
    padding-left: 60px;
    line-height: 85px;
}

.input_area .blue_btn {
    margin-bottom: 40px;
    margin-top: 20px;
}

.input_table {
    font-size: 143%;
    width: 100%;
    position: relative;
    border-collapse: collapse;
    border: none;
}

.input_table tr {
    vertical-align: inherit;
    border-color: inherit;
    background:none;
}
.input_table tbody tr:hover{
  background:none;
}

.input_table th {
    width: 30%;
    vertical-align: top !important;
    margin-top:10px;
    text-align: left;
    float: none;
    position: relative;
    padding: 20px 0 15px 30px;
    border-bottom:0px;
    /* border-left: 1px solid #D0DBE2 */
}

.input_table td {
    padding: 15px 30px 15px 0px;
    border-bottom:0px;
}

.input_area input, textarea {
    width: 100%;
}
textarea{
  border: 2px solid #E9F1F4 !important;
  height:200px;
}

.zip_btn {
    width: 30%;
}

.bank_btn {
    width: 100%;
}

.edit_btn {
    /* display: inline-block; */
    margin-bottom: 10px;
}

.consent {
    border: solid 2px;
    width: 98%;
    height: 150px;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
    font-size: 62.5%;
}

/* 三点リーダー
-------------------------- */
.threeDots {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* login area
-------------------------- */

.login_area {
    margin:0 auto;
    margin-top:50px;
    background: #fff;
    margin-bottom: 60px;
    border: 1px solid #D0DBE2;
    padding-bottom: 15px;
    max-width: 550px;
}
.login_area h3 {
    width: 100%;
    height: 76px;
    line-height: 85px;
    font-size: 161%;
    font-weight:bold;
    border-bottom: 1px solid #D0DBE2;
    padding-left: 30px;
    margin:0;
}
.login_area .btn_area{
    margin-top:20px;
    margin-bottom:30px;
}

.login_area .blue_btn {
    margin-bottom: 40px;
    margin-top: 20px;
}

.login_table {
    width: 90%;
    margin:0 auto;
    font-size: 115%;
    position: relative;
    border-collapse: collapse;
    border: none;
    margin-top:20px;
    margin-bottom:20px;
}

.login_table tr {
    vertical-align: inherit;
    border-color: inherit;
}

.login_table tr:hover {
    background: none;
}

.login_table th {
    width: 40%;
    vertical-align: middle !important;
    text-align: left;
    float: none;
    position: relative;
    padding: 15px 0 15px 30px;
    border-bottom:0px;
}

.login_table td {
    padding: 15px 30px 15px 0px;
    border-bottom:0px;
}
/* logout area
-------------------------- */
.logout_area{
  width: 100%;
  max-width: 550px;
  margin:0 auto;
  margin-top: 50px;
  margin-bottom: 35px;
  background: #fff;
  border: 1px solid #D0DBE2;
}
.logout_area p{
      font-size: 129%;
       text-align:center;
       margin-top:30px;
}
.logout_area h3 {
    width: 100%;
    height: 76px;
    line-height: 85px;
    font-size: 161%;
    font-weight:bold;
    border-bottom: 1px solid #D0DBE2;
    padding-left: 30px;
    margin:0;
}
.logout_area .btn_area{
    margin-top: 40px;
    margin-bottom: 20px;
}
.input_invoiceuniqueno{
    width:80%;
    max-width:600px;
    margin:0 auto;
}
.input_regist_key{
    width:80%;
    max-width:600px;
    margin:0 auto;
}
.repayment_area{
    display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flexbox;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.repayment_area_innner{
    display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flexbox;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  width:50%;
}
.repayment_area_innner2{
 display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flexbox;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  width:100%;
}
.item_name{
  padding: 20px 0 15px 30px;
  font-size:141%;
  font-weight:bold;
  width:40%;
}
.item_name2{
  padding: 20px 0 15px 30px;
  font-size:141%;
  font-weight:bold;
  width:20%;
}
.item_20{
  padding: 15px 15px 15px 0px;
  width:20%;
}
.item_40{
  padding: 15px 15px 15px 0px;
  font-size:141%;
  width:40%;
}
.item_60{
  padding: 15px 15px 15px 0px;
  font-size:141%;
  width:60%;
}
.item_80{
  padding: 15px 15px 15px 0px;
  font-size:141%;
  width:80%;
}