/* stylelint-disable-line */
/*!
  https://github.com/andy-piccalilli/modern-css-reset/blob/master/LICENSE
*/
.content-inner.-bg-2::before {
  background-image: url("/KEIYO/img/portal_bg-account.gif");
  background-size: 225px auto;
}
.content-inner.-bg-3::before {
  background-image: url("/KEIYO/img/portal_bg-recommend.gif");
  background-size: 195px auto;
}
.content-inner.-bg-4::before {
  background-image: url("/KEIYO/img/portal_bg-service.gif");
  background-size: 225px auto;
}
.content-inner.-bg-5::before {
  background-image: url("/KEIYO/img/portal_bg-news.gif");
  background-size: 195px auto;
}
.content-inner.-bg-6::before {
  background-image: url("/KEIYO/img/portal_bg-news.gif");
  background-size: 240px auto;
}

/* ----------------------------------------------------------------
    Footer (.footer and .f[-*])
----------------------------------------------------------------- */
/* .f-contact
----------------------------------------------- */
.f-contact__col:first-child::before {
  background: url("/KEIYO/img/portal_icon-tel.gif") no-repeat center center, linear-gradient(-45deg, #101f99, #1a33ff);
  background-repeat: no-repeat;
}
.f-contact__tel {
  color: #101f99 !important;
}
/* ----------------------------------------------------------------
    Header (.header and .h[-*])
----------------------------------------------------------------- */
/* .h-ss-menu
----------------------------------------------- */
.h-ss-menu__btn {
  background-color: #f3f4ff;
}
.h-ss-menu__btn::before {
  background-color: #101f99;
}
.h-ss-menu__btn[aria-expanded=true] {
  background-color: #101f99;
}
.h-ss-menu__alt::before, .h-ss-menu__alt::after {
  background-color: #101f99;
}
.h-ss-menu__link::before {
  background-image: url("/KEIYO/img/portal_icon-angle.gif");
}
.h-ss-menu__link.-help::after {
  background-image: url("/KEIYO/img/portal_icon-help.gif");
  background-size: contain;
}

/* .h-ss-profile
----------------------------------------------- */
.h-ss-profile__btn {
  background-color: #f3f4ff;
}
.h-ss-profile__btn[aria-expanded=true] {
  background-color: #101f99;
}
.h-ss-profile__btnPath {
  fill: #101f99;
  -webkit-transform: translate(-3px, -3px);
  transform: translate(-3px, -3px);
}
.h-ss-profile__link::before {
  background-image: url("/KEIYO/img/portal_icon-angle.gif");
}
.h-ss-profile__link.-signout::after {
  background-image: url("/KEIYO/img/portal_icon-signout_sp.gif");
}
.h-ss-profile__link.-manual::after {
  background-image: url("/KEIYO/img/portal_icon-manual.gif");
}

/* .h-ls-sub
----------------------------------------------- */
@media only screen and (min-width: 768px) {
  .h-ls-sub__link::after {
    background-color: #c0c7ff;
  }
  .h-ls-sub__link::before {
    background-image: url("/KEIYO/img/portal_icon-manual.gif");
  }
}

/* ----------------------------------------------------------------
    Navigation (.n[-*])
----------------------------------------------------------------- */
/* .n-aside
----------------------------------------------- */
@media only screen and (min-width: 768px) {
  .n-aside__btn::after {
    background-color: #c0c7ff;
  }
  .n-aside__btnAlt::before, .n-aside__btnAlt::after {
    background-color: #101f99;
  }
  .n-aside__contentLink::before {
    background: url("/KEIYO/img/portal_icon-angle.gif") no-repeat;
  }
  .n-aside__contentTxt {
    background: linear-gradient(#1a33ff, #101f99);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
  }
  .n-aside__link::after {
    background-color: #c0c7ff;
  }
  .n-aside__link::before {
    background: url("/KEIYO/img/portal_icon-angle.gif") no-repeat 100% center;
  }
  .n-aside__link.-help .n-aside__txt::after {
    background: url("/KEIYO/img/portal_icon-help.gif") no-repeat 100% center;
  }
}
/* ----------------------------------------------------------------
    Button (.btn[-*])
----------------------------------------------------------------- */
/* .btn
----------------------------------------------- */
.btn {
  background: linear-gradient(to right bottom, #101f99, #1a33ff);
}
.btn::before {
  background: linear-gradient(to right bottom, #1a33ff, #101f99);
}
/* .btn-2
----------------------------------------------- */
.btn-2 {
  background: linear-gradient(to left top, #101f99, #1a33ff);
}
/* ----------------------------------------------------------------
    Heading (.hdg[-*])
----------------------------------------------------------------- */
/* .hdg-l2
----------------------------------------------- */
.hdg-l2::before {
  background-color: #1a33ff;
}
/* .hdg-l3
----------------------------------------------- */
.hdg-l3::before {
  background-color: #1a33ff;
}
/* ----------------------------------------------------------------
    Link (.link[-*])
----------------------------------------------------------------- */
/* .link
----------------------------------------------- */
.link::before {
  background: url("/KEIYO/img/portal_icon-angle.gif") no-repeat;
}
@media only screen and (min-width: 768px) {
  .link {
    background: linear-gradient(#1a33ff, #101f99);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
  }
}

/* .link-list-info
----------------------------------------------- */
.link-list-info__txt::before {
  background: url("/KEIYO/img/portal_icon-angle.gif") no-repeat;
}
@media only screen and (min-width: 768px) {
  .link-list-info__txt > span {
    background: linear-gradient(#1a33ff, #101f99);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.3s cubic-bezier(0.4, 0.1, 0.3, 1);
  }
}

/* ----------------------------------------------------------------
    List (.list[-*])
----------------------------------------------------------------- */
/* .list-recommend
----------------------------------------------- */
.list-recommend__panelTxt::before {
  background: url("/KEIYO/img/portal_icon-angle.gif") no-repeat 100% center;
}
.list-recommend__link {
  background-color: #f3f4ff;
}
.list-recommend__link::before {
  border-bottom: 28px solid #f3f4ff;
}
.list-recommend__linkTxt::before {
  background: url("/KEIYO/img/portal_icon-recommend.gif") no-repeat 100% center;
}
.list-recommend__linkTxt::after {
  background: url("/KEIYO/img/portal_icon-angle.gif") no-repeat 100% center;
}
@media only screen and (min-width: 768px) {
  .list-recommend__linkTxt > span {
    background: linear-gradient(#1a33ff, #101f99);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.3s cubic-bezier(0.4, 0.1, 0.3, 1);
  }
}

/* .list
----------------------------------------------- */
.list-bullet > li::before {
  background-color: #1a33ff;
}

/* ----------------------------------------------------------------
    Panel (.panel[-*])
----------------------------------------------------------------- */
/* .panel-account
----------------------------------------------- */
.panel-account.-mainBank::before {
  background: linear-gradient(to right bottom, #d9ddff, #c0c7ff);
  background-color: #eaf9f4;
}
.panel-account.-mainBank::after {
  background: url("/KEIYO/img/portal_icon-angle.gif") no-repeat 100% center;
}
.panel-account:hover::after, .panel-account:active::after, .panel-account:focus::after {
  background: url("/KEIYO/img/portal_icon-angle-wht.gif");
}
@media print, screen and (min-width: 768px) {
  .panel-account:hover.-mainBank::before, .panel-account:active.-mainBank::before, .panel-account:focus.-mainBank::before {
    background: linear-gradient(to right bottom, #1a33ff, #101f99);
  }
}
/* .panel-register
----------------------------------------------- */
.panel-register__txt::before {
  background: url("/KEIYO/img/portal_icon-register.gif") no-repeat;
}
/* ----------------------------------------------------------------
    Widget (.widget[-*])
----------------------------------------------------------------- */
/* .widget-switcher
----------------------------------------------- */
.widget-switcher__btn[aria-pressed=true] {
  background: linear-gradient(to right bottom, #101f99, #1a33ff);
}
.widget-switcher__btn[aria-pressed=true]::after {
  background: linear-gradient(to right bottom, #1a33ff, #101f99);
}
/* .widget-carousel
----------------------------------------------- */
.widget-carousel__btn.-prev {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background: url("/KEIYO/img/portal_icon-arrow.gif") no-repeat center center, linear-gradient(to right bottom, #1a33ff, #101f99);
}
.widget-carousel__btn.-next {
  background: url("/KEIYO/img/portal_icon-arrow.gif") no-repeat center center, linear-gradient(to right bottom, #101f99, #1a33ff);
}
.widget-carousel__btn.-prev .widget-carousel__btnIcon {
  background: linear-gradient(to right bottom, #101f99, #1a33ff);
}
.widget-carousel__btn.-next .widget-carousel__btnIcon {
  background: linear-gradient(to right bottom, #1a33ff, #101f99);
}
.widget-carousel__indicatorBtn[aria-checked=true] {
  background: linear-gradient(to right bottom, #101f99, #1a33ff);
}
.widget-carousel__play[aria-pressed=false] .widget-carousel__playAlt::before, .widget-carousel__pause[aria-pressed=false] .widget-carousel__playAlt::before, .widget-carousel__play[aria-pressed=false] .widget-carousel__playAlt::after, .widget-carousel__pause[aria-pressed=false] .widget-carousel__playAlt::after, .widget-carousel__play[aria-pressed=false] .widget-carousel__pauseAlt::before, .widget-carousel__pause[aria-pressed=false] .widget-carousel__pauseAlt::before, .widget-carousel__play[aria-pressed=false] .widget-carousel__pauseAlt::after, .widget-carousel__pause[aria-pressed=false] .widget-carousel__pauseAlt::after {
  background-color: #101f99;
}
@media only screen and (min-width: 768px) {
  .widget-carousel__play:hover[aria-pressed=false], .widget-carousel__play:active[aria-pressed=false], .widget-carousel__play:focus[aria-pressed=false], .widget-carousel__pause:hover[aria-pressed=false], .widget-carousel__pause:active[aria-pressed=false], .widget-carousel__pause:focus[aria-pressed=false] {
    background-color: #f3f4ff;
  }
}

/* ----------------------------------------------------------------
    modal (.modal)
----------------------------------------------------------------- */
/* .modal
----------------------------------------------- */
.modal_btn_close {
  background: linear-gradient(to right bottom, #101f99, #1a33ff);
}

/* ----------------------------------------------------------------
    boxSearch-03
----------------------------------------------------------------- */
div.boxSearch-03 {
	background: rgb(255, 255, 255);
	border: 2px solid #f3f4ff;
}
div.boxSearch-03 div.hdg-01 {
	background: #f3f4ff;
}
/* ----------------------------------------------------------------
    boxSearch-01
----------------------------------------------------------------- */
.boxSearch-01 {
  border: 2px solid #f3f4ff;
  background-color: #fff;
}
.boxSearch-01 > .hdg {
  background-color: #f3f4ff;
}
table.tbl-sp { 
   margin:1px; 
   width:100%; 
} 
/* 他行 */ 
/* 1行明細 */ 
table.tbl-sp > tbody > tr > td.tbl-sp1 { 
   background-color: rgb(255, 255, 255); 
   font-weight: bold; 
} 
/* 見出し */ 
table.tbl-sp > tbody > tr > td.tbl-sp2 { 
   width: 25%; 
   background-color: rgb(242, 242, 242); 
   padding-left:12px; 
} 
/* 明細 */ 
table.tbl-sp > tbody > tr > td.tbl-sp3 { 
   background-color: rgb(242, 242, 242); 
   font-weight: bold; 
   padding-right:12px; 
} 
/* 自行　他行 */ 
/* 1行明細 */ 
table.tbl-sp > tbody > tr > td.tbl-sp4 { 
   background-color: rgb(255, 255, 255); 
   font-weight: bold; 
} 
/* 見出し */ 
table.tbl-sp > tbody > tr > td.tbl-sp5 { 
   width: 25%; 
   background-color: rgb(242, 242, 242); 
   padding-left:12px; 
} 
/* 明細 */ 
table.tbl-sp > tbody > tr > td.tbl-sp6 { 
   background-color: rgb(242, 242, 242); 
   font-weight: bold; 
   padding-right:12px; 
} 
/* 自行　自行 */ 
/* 1行明細 */ 
table.tbl-sp > tbody > tr > td.tbl-sp7 { 
   background-color: rgb(255, 255, 255); 
   font-weight: bold; 
} 
/* 見出し */ 
table.tbl-sp > tbody > tr > td.tbl-sp8 { 
   width: 25%; 
   background-color: rgb(242, 242, 242); 
   padding-left:12px; 
} 
/* 明細 */ 
table.tbl-sp > tbody > tr > td.tbl-sp9 { 
   background-color: rgb(242, 242, 242); 
   font-weight: bold; 
   padding-right:12px; 
} 




/* ポップアップ用定義 ******************************************************* */

/* 文言 */
.poptext{
  font-size: 16px;
}

/* チェックボックス用文言 */
.popcmtext{
  font-size: 16px;
  padding-left: 25px;
}

/* エラーメッセージ */
.poperrmsg{
  font-size: 16px;
  color: red;
  font-weight: bold;
}

/* 横線 */
.pop-line{
  border-top: 1px solid #dadce0;
  left: 0;
  width: 100%;
  margin: 10px 0px 15px 0px;
}

/* 設問外枠 */
.pop-Qes {
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom:15px;
}

/* 設問見出し */
.poptitle {
  position: relative;
  margin-bottom: 15px;
  padding-left: 0px;
}

/* 次回表示しない */
.pop-dontshowagain {
  padding: 10px 0px 3px 0px;
  text-align: center;
}

/* ボタンレイアウト */
.popup-btn-lyt {
  text-align: center;
}

/* ボタン間隔 */
.pupup-btn {
  margin-right: 10px;
}

/* レイアウト調整 */
._mt20{
  margin-top: 20px !important;
}

/* アンケートタイプ指定(非表示) */
.popup-questype {
  visibility: hidden;
  margin-top: -21px;
}


/* ラジオ、チェック用CSS **************************************************** */

/* チェックボックス全体 */
.checknox-wrap {
  display: block;
  position: relative;
  //padding-left: 30px;
  padding-right: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}
/* デフォルトチェックボックス非表示 */
.checknox-wrap input {
  display: none;
}
/* チェックボックスのスタイル */
.checknox-wrap .checkmark {
  position: absolute;
  top: 0;
  height: 20px;
  width: 20px;
  border: 2px solid #999999;
  box-sizing: border-box;
  border-radius: 4px;
}
/* チェックマーク作成 */
.checknox-wrap .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: 2px solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* チェック時のスタイル */
.checknox-wrap input:checked + .checkmark {
  background-color: #0070bd;
  border: 2px solid #0070bd;
}
/* チェック時 チェックマーク表示 */
.checknox-wrap input:checked + .checkmark:after {
  display: block;
}
label {
  display: block;
}
input[type="radio"] {
  appearance: none;
  display: none;
  opacity: 0;
  width: 1px;
  position: absolute;
  height: 1px;
}
input[type="radio"] + span {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  padding: 0px 11px 0px 36px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}
input[type="radio"] + span::before,
input[type="radio"] + span::after {
  position: absolute;
  content: "";
  display: block;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  margin: auto 10px auto 0;
  box-sizing: border-box;
}
input[type="radio"] + span::before {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #999999;
  left: 9px;
}
input[type="radio"] + span::after {
  width: 10px;
  height: 10px;
  background: #999999;
  left: 14px;
  opacity: 0;
}
input[type="radio"]:checked + span::before {
  border: 2px solid #0070bd;
}
input[type="radio"]:checked + span::after {
  background: #0070bd;
  opacity: 1;
}

@media (max-width: 650px) {
  input[type="radio"] + span {
    padding: 10px 11px 8px 36px;
  }
}


/* 棒グラフ ***************************************************************** */

/* 1位色 */
.ub-bar-graph-rank1{
  background: #6bb6ff;
  margin-top: -4px;
}

/* 2位色 */
.ub-bar-graph-rank2{
  background: #a9d8ff;
  margin-top: -4px;
}

/* 3位色 */
.ub-bar-graph-rank3{
  background: #c8e4ff;
  margin-top: -4px;
}

.ub-bar-graph{
}
.ub-bar-graph__title{
  letter-spacing: 1.5px !important;
  line-height:1.8 !important;
  font-size: 1em  !important;
  margin: 0 auto 2.5em !important;
  padding: 5px 0 !important;
  border-bottom: 1px dashed #aaa;
  text-align:center;
  font-weight:600 !important;
}
.ub-bar-graph dl > div{
  margin: 0 auto 0.8em !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 31px;
  font-size: 0.9rem;
  position:relative;
}
.ub-bar-graph dl > div:last-child{
  margin: 0 !important;
}
.ub-bar-graph dl > div dt{
  border-right: 2px solid #fff;
  border-radius: 4px;
}
.ub-bar-graph dl > div dd{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex:1;
  margin:0 !important;
  font-size:1em;
  background:#fff;
}
.ub-bar-graph dl > div dt > span,.ub-bar-graph dl > div dd > span{
  position:absolute;
  z-index: 1;
  color:#333;
  font-size: 16px;
  line-height: 1.5;
}
.ub-bar-graph dl > span{
  z-index: 1;
  color:#333;
  font-size: 16px;
  line-height: 1.5;
}
.ub-bar-graph dl > div dd >  .ub-bar-graph__value{
  right:5px;
  top:5px;
}
@media screen and (max-width: 560px) {
  .ub-bar-graph dl > div{
    margin: 0 auto 1.5em !important;
  }
}