@charset "UTF-8";
/* [[HOME]] - PROMOTION - MEMBER & YTB CHANEL ----------------*/
/* [PROJECT] FOOTER
--------------------------------------------------------------*/
/* [PROJECT] MAIN
--------------------------------------------------------------*/
/* [PROJECT] EXTERNAL-BANK
--------------------------------------------------------------*/
/* [[EXTERNAL-BANK]] - COMMON --------------------------------*/
/*==============================================================
SHARED COLOR-SCHEME for "WEBVIEW"
==============================================================*/
/*--------------------------------------------------------------
FOUNDATION
// - FONT
// - BASE
--------------------------------------------------------------*/
/* [[BASE]] - COMMON -----------------------------------------*/
body {
  background-color: #f2f2f2;
  color: #292929;
}

a:link, a:visited {
  color: #001f7a;
}
a:hover {
  color: #0a38c2;
}
a:active {
  color: #000f3d;
}

.ui-widget-overlay {
  background: rgba(23, 23, 23, 0.65);
  opacity: initial;
}

/*--------------------------------------------------------------
LAYOUT
// - HEADER
// - MENU BAR
// - PAGE
// - MAIN
// - NAV TABS
// - FOOTER
--------------------------------------------------------------*/
/* [LAYOUT] HEADER
--------------------------------------------------------------*/
/* [LAYOUT] PAGE
--------------------------------------------------------------*/
.l-main {
  background-color: #ffffff;
}

/* [LAYOUT] MAIN
--------------------------------------------------------------*/
/* [LAYOUT] NAV TABS
--------------------------------------------------------------*/
/*--------------------------------------------------------------
COMPONENT
// - TEXT
// - IMAGE
// - ICON
// - BUTTON
// - LIST
// - GROUP
// - FORM
// - TABLE
// - GRID
// - NAV
// - PANEL
// - DIALOG
--------------------------------------------------------------*/
/* [COMPONENT] TEXT
--------------------------------------------------------------*/
/* [[TEXT]] - PROFIT AND LOSS --------------------------------*/
/* [[TEXT]] - HEADING ----------------------------------------*/
/* [[TEXT]] - EMPHASIS ---------------------------------------*/
/* [[TEXT]] - LABEL ------------------------------------------*/
/* [[TEXT]] - ERROR ------------------------------------------*/
/* [COMPONENT] IMAGE
--------------------------------------------------------------*/
.c-logo-company {
  background-image: url("images/logo_company.svg");
}

/* [COMPONENT] ICON
--------------------------------------------------------------*/
/* [[ICON]] - WINDOW EXTERNAL  --------------------------*/
.c-with-icon.-icn-external::after {
  background-image: url("images/icn_win_external.svg");
}

.c-btn.-confirm .c-with-icon.-icn-external::after, .c-btn.-em .c-with-icon.-icn-external::after, .c-btn.-submit .c-with-icon.-icn-external::after, .c-btn.-agree .c-with-icon.-icn-external::after, .c-btn.-execute .c-with-icon.-icn-external::after {
  background-image: url("images/icn_win_external_bold.svg");
}

/* [[ICON]] - WINDOW NEW --------------------------------*/
.c-with-icon.-icn-newwin::after {
  background-image: url("images/icn_win_new.svg");
}

.c-btn.-confirm .c-with-icon.-icn-newwin::after, .c-btn.-em .c-with-icon.-icn-newwin::after, .c-btn.-submit .c-with-icon.-icn-newwin::after, .c-btn.-agree .c-with-icon.-icn-newwin::after, .c-btn.-execute .c-with-icon.-icn-newwin::after {
  background-image: url("images/icn_win_new_bold.svg");
}

/* [COMPONENT] BUTTON
--------------------------------------------------------------*/
/* [[BUTTON]] - BASE -----------------------------------------*/
.c-btn,
.c-btn.ui-button {
  background-image: linear-gradient(to right, #ffffff, #f5f5f5);
  border-color: #6c7480;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
  color: #000000;
}
.c-btn:hover,
.c-btn.ui-button:hover {
  background-image: linear-gradient(to right, #ffffff, #ffffff);
}
.c-btn:active,
.c-btn.ui-button:active {
  background-image: linear-gradient(to right, #f5f5f5, #dbdbdb);
  box-shadow: none;
}
.c-btn:focus,
.c-btn.ui-button:focus {
  background-image: linear-gradient(to right, #ffffff, #f5f5f5);
}
.c-btn.is-checked,
.c-btn.ui-button.is-checked {
  border-color: #0a45bf;
  background: #ffffff;
  color: #0a45bf;
}

/* [[BUTTON]] - CANCEL & CLOSE -------------------------------*/
.c-btn.-cancel, .c-btn.-clear, .c-btn.-close,
.c-btn.ui-button.-cancel,
.c-btn.ui-button.-clear,
.c-btn.ui-button.-close {
  background: #ffffff;
  border-color: #d8dbe2;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
  color: #333333;
}
.c-btn.-cancel:hover, .c-btn.-clear:hover, .c-btn.-close:hover,
.c-btn.ui-button.-cancel:hover,
.c-btn.ui-button.-clear:hover,
.c-btn.ui-button.-close:hover {
  background: #f4f5fa;
}
.c-btn.-cancel:active, .c-btn.-clear:active, .c-btn.-close:active,
.c-btn.ui-button.-cancel:active,
.c-btn.ui-button.-clear:active,
.c-btn.ui-button.-close:active {
  background: #e7e8ef;
  box-shadow: none;
}
.c-btn.-cancel:focus, .c-btn.-clear:focus, .c-btn.-close:focus,
.c-btn.ui-button.-cancel:focus,
.c-btn.ui-button.-clear:focus,
.c-btn.ui-button.-close:focus {
  background: #ffffff;
}

/* [[BUTTON]] - EM -------------------------------------------*/
.c-btn.-confirm, .c-btn.-em, .c-btn.-submit, .c-btn.-issue,
.c-btn.ui-button.-confirm,
.c-btn.ui-button.-em,
.c-btn.ui-button.-submit,
.c-btn.ui-button.-issue {
  background: linear-gradient(to right, #1369eb, #0944be);
  border-color: #4172d5;
  color: #ffffff;
}
.c-btn.-confirm:active, .c-btn.-em:active, .c-btn.-submit:active, .c-btn.-issue:active,
.c-btn.ui-button.-confirm:active,
.c-btn.ui-button.-em:active,
.c-btn.ui-button.-submit:active,
.c-btn.ui-button.-issue:active {
  background-image: linear-gradient(to right, #1261d9, #0840b3);
  box-shadow: none;
}
.c-btn.-confirm:focus, .c-btn.-em:focus, .c-btn.-submit:focus, .c-btn.-issue:focus,
.c-btn.ui-button.-confirm:focus,
.c-btn.ui-button.-em:focus,
.c-btn.ui-button.-submit:focus,
.c-btn.ui-button.-issue:focus {
  background: linear-gradient(to right, #1369eb, #0944be);
}

/* [[BUTTON]] - STRONG ---------------------------------------*/
.c-btn.-agree, .c-btn.-execute,
.c-btn.ui-button.-agree,
.c-btn.ui-button.-execute {
  background: linear-gradient(to right, #ff002b, #d90000);
  border-color: #be0005;
  box-shadow: 0 3px 5px rgba(191, 0, 0, 0.25);
  color: #ffffff;
}
.c-btn.-agree:hover, .c-btn.-execute:hover,
.c-btn.ui-button.-agree:hover,
.c-btn.ui-button.-execute:hover {
  background-image: linear-gradient(to right, #ff004e, #e60000);
}
.c-btn.-agree:active, .c-btn.-execute:active,
.c-btn.ui-button.-agree:active,
.c-btn.ui-button.-execute:active {
  background-image: linear-gradient(to right, #e60027, #bf0000);
  box-shadow: none;
}
.c-btn.-agree:focus, .c-btn.-execute:focus,
.c-btn.ui-button.-agree:focus,
.c-btn.ui-button.-execute:focus {
  background: linear-gradient(to right, #ff002b, #d90000);
}

/* [[BUTTON]] - WEAK -----------------------------------------*/
.c-btn.-lineup,
.c-btn.ui-button.-lineup {
  border-color: #b6c0ce;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}

/* [[BUTTON]] - DISABLED --------------------------------------*/
.c-btn[disabled],
.c-btn.ui-button[disabled] {
  background: #f2f2f2;
  border-color: #dadada;
  box-shadow: none;
  color: #a6a6a6;
}
.c-btn[disabled]:hover,
.c-btn.ui-button[disabled]:hover {
  background: #f2f2f2;
}
.c-btn[disabled]:active,
.c-btn.ui-button[disabled]:active {
  background: #f2f2f2;
}
.c-btn[disabled]:focus,
.c-btn.ui-button[disabled]:focus {
  background: #f2f2f2;
}

/* [COMPONENT] FORM
--------------------------------------------------------------*/
input.c-input-text {
  background-color: #ffffff;
  border-color: #a7b0bf;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07) inset;
  color: #000000;
}
input.c-input-text::placeholder {
  color: #bec1cc;
}
input.c-input-text:focus {
  border-color: #4172d5;
}
input.c-input-text:focus-visible {
  border-color: #4172d5;
  outline-color: #4172d5;
}
input.c-input-text.is-error {
  background-color: #ffe6ea !important;
  border-color: #f10011 !important;
}
input.c-input-text[disabled] {
  background: #f2f2f2;
  border-color: #dadada;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.03);
  color: #dadada;
}
input.c-input-text.-preview {
  border-color: #a5a8b1;
  box-shadow: inset 1px 1px 0 rgb(255, 255, 255);
  background-color: #eff1f5;
  color: #000000;
}

/*--------------------------------------------------------------
SHARED BLOCK
// - HEADER
// - FOOTER
// - MENU BAR
// - HEADING
// - GROUP
// - GRID
// - PANEL
// - DIALOG
// - LOADING
--------------------------------------------------------------*/
/* [SHARED BLOCK] HEADING
--------------------------------------------------------------*/
/* [[HEADING]] - P-HDG-LV2-3 ---------------------------------*/
/* [[HEADING]] - P-HDG-LV2-4 ---------------------------------*/
/* [SHARED BLOCK] GROUP
--------------------------------------------------------------*/
/* [[GROUP]] - SELECT ----------------------------------------*/
/* [SHARED BLOCK] PANEL
--------------------------------------------------------------*/
/* [[PANEL]] - CONFIRM ---------------------------------------*/
/* [SHARED BLOCK] DIALOG
--------------------------------------------------------------*/
/* [[DIALOG]] - BUTTONS --------------------------------------*/
/*--------------------------------------------------------------
PROJECT
MAIN
FOOTER
// - SETTING
// - EXTERNAL-BANK
--------------------------------------------------------------*/
/* [PROJECT] MAIN
--------------------------------------------------------------*/
.p-login-company {
  background-color: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.p-login-page .p-login-page__loginBtn .c-btn {
  color: #ffffff;
  border: #005EF5;
  background-color: #005EF5;
  background: #005EF5;
}
.p-login-page .p-login-page__loginBtn .c-btn .c-with-icon.-icn-passkey::before {
  background-image: url("images/icn_passkey.svg");
}
.p-login-page .p-login-page__error {
  color: #FF0000;
}
.p-login-page .p-login-page__separator::after, .p-login-page .p-login-page__separator::before {
  border-bottom-color: #d5deed;
}
.p-login-page .p-login-page__separator span {
  color: #595C70;
  background-color: #ffffff;
}

/* [PROJECT] FOOTER
--------------------------------------------------------------*/
.p-footer {
  background-color: #f1f5ff;
}
.p-footer .p-footer-copyright {
  background-color: #000000;
  color: #ffffff;
}

/*==============================================================
l-mainの横幅(948px)以下の対応
==============================================================*/
@media screen and (max-width: 948px) {
  body {
    background-color: #ffffff;
  }
}