@charset "utf-8";
/**
 * 縦向き画面のCSS定義
 */

/** 通常フォントの登録 */
@font-face { 
  font-family: "GJShinMGo"; 
  src: url("../fonts/morisawa/GJShinMGo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/** 太字フォントの登録 */
 @font-face { 
  font-family: "GJShinMGo"; 
  src: url("../fonts/morisawa/GJShinMGo-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

/** 登録したフォントを適用 */
 body, input, textarea, * {
  font-family: "GJShinMGo"; 
}

#psv_alert {
  visibility: hidden;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
}

/**
 * F-002-00010_ログイン画面
 */
.loginPage {
  height: 100%;
}

.loginPartsWrapper {
  height: 100%;
  background-color: #ECF3F5;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headerWrapper {
  height: 11%;
  width: 90%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.logo {
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 856 / 107;
  /* 表示サイズ：デザイン横幅 / Screen横幅(1920) / 親要素のwidth(%) */
  width: 85%;
}

.loginParts {
  height: 77%;
  width: 90%;
}

form {
  height: 100%;
}

.contents {
  height: 45%;
  width: 100%;
  background-color: #e0f4ff;
  border-radius: 20px;
  border: 4px solid;
  border-color: #5dc8ff;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .contents {
    height: 40%;
  }
}


.contents .sectionSeparator {
  height: 100%;
  width: 95%;
}

.errorText {
  height: 23%;
  width: 100%;
  font-weight: bold;
  color: #e66767;
  font-size: 2.5vw;
  letter-spacing: 0;
  white-space: pre-wrap;
  position: relative;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .errorText {
    font-size: 2.2vw;
  }
}

.errorText .icon {
  background-image: url("../images/error-icon.png");
  background-repeat: no-repeat;
  background-size: contain;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 24 / 24;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 18px;
  /* 左右の隙間を入れながら配置  */
  margin: 10px;
}

@media (max-width: 500px) {
  .errorText .icon {
    width: 6px;
    margin: 5px;
  }
}

.loginIDPWArea {
  height: 40%;
  width: 100%;

  display: table;
}
/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .loginIDPWArea {
    height: 35%;
  }
}

.loginIDPWArea .loginIDArea {
  width: 100%;

  display: table-row;

  /* idListを重ねる基準要素として宣言 */
  /* position: relative; */


  /* 上下マージンで表示位置調整  */
  margin: 10px 0 ;
}

.loginIDPWArea .loginIDArea .formTitle {
  background-image: url("../images/member_id.png");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: right center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 195 / 48;
  display: table-cell;
  vertical-align: middle;
}

.loginIDPWArea .loginIDArea .formArea {
  width: 75%;
  /* 左の隙間を入れながら配置  */
  padding-left: 5px;

  display: table-cell;
  vertical-align: middle;
}

.loginIDPWArea .loginIDArea .formArea .inputArea {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.loginIDPWArea .loginIDArea .formArea .textInput {
  width: 80%;
  color: #272727;
  font-size: 3.5vw;
  letter-spacing: 0;
  white-space: nowrap;
}
/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .loginIDPWArea .loginIDArea .formArea .textInput {
    font-size: 2.5vw;
  }
}

.loginIDPWArea .loginIDArea .formArea .inputArea .pulldownArea {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: right;
  padding-right: 3%;
}


.loginIDPWArea .loginIDArea #pulldown_button {
  background-image: url("../images/bt-idlist.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 80 / 76;
  /* デザイン横幅 / Screen横幅(1920) の比率 ×２．５ */
  width: 55%;
  display: inline-block;
  vertical-align: middle;
}

.loginIDPWArea .loginIDArea #pulldown_button:active {
  background-image: url("../images/bt-idlist-push.png");
}

#idlist {
  position:absolute;
  visibility: hidden;
  padding: 10px 15px 7px;
  border: 1px solid #d6d2ce;
  background: #ffffff;
  font-size: 3.5vw;
  z-index: 1;
  margin-top: 80px;
}
/* iPad or iPad Pro */
@media (max-width: 1280px) {
  #idlist {
    font-size: 2.5vw;
  }
}

@media (max-width: 1000px) {
  #idlist {
    margin-top: 60px;
  }
}

@media (max-width: 500px) {
  #idlist {
    margin-top: 30px;
  }
}

.loginIDPWArea .loginPWArea {
  width: 100%;

  display: table-row;
}

.loginIDPWArea .loginPWArea .formTitle {
  background-image: url("../images/password.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 240 / 48;
  /* デザイン横幅 / Screen横幅(1920) の比率 ×２．５ */
  width: 25%;
  display: table-cell;
  vertical-align: middle;
}

.loginIDPWArea .loginPWArea .formArea {
  width: 75%;
  display: table-cell;
  /* 左の隙間を入れながら配置  */
  padding-left: 5px;
  vertical-align: middle;
}

.loginIDPWArea .loginPWArea .formArea .inputArea {
  width: 100%;
}

.loginIDPWArea .loginPWArea .formArea #handlename {
  color: #272727;
  font-size: 3.5vw;
  letter-spacing: 0;
  white-space: nowrap;
  width: 95%;
}
/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .loginIDPWArea .loginPWArea .formArea #handlename {
    font-size: 2.5vw;
  }
}

.psvSelectArea {
  font-weight: bold;
  height: 15%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.psvSelectArea .inlineWrapper {
  margin: 0 10px;
}

.psvSelectArea .idSelectWrapper {
  color: #272727;
  font-size: 2.5vw;
  letter-spacing: 0;
  white-space: nowrap;
}

.psvSelectArea input[type="checkbox"] {
  width: 30px;
  height: 30px;
  top: 0;
  left: -40px;
  object-fit: cover;
}

@media (max-width: 800px) {
  .psvSelectArea input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

.psvSelectArea .psvAlertWrapper {
  color: #272727;
  font-size: 2.5vw;
  letter-spacing: 0;
  white-space: nowrap;
}

.offerArea {
  height: 22%;
  width: 100%;
  font-size: 2.5vw;
}

.offerArea .offerCannotLogin {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.offerArea .offerCannotLogin .asterisk {
  color: #272727;
  letter-spacing: 0;
  white-space: nowrap;
}

.offerArea .offerCannotLogin .link {
  color: #0056a2;
  letter-spacing: 0;
  text-decoration: underline;
  white-space: nowrap;
}

.offerArea .offerCannotLogin .link a {
  color: #0056a2;
}

.offerArea .offerDirection {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.offerArea .offerDirection .asterisk {
  color: #e20625;
  letter-spacing: 0;
  white-space: nowrap;
}

.offerArea .offerDirection .message {
  color: #e20625;
  letter-spacing: 0;
  white-space: nowrap;
}

.memberInfoArea {
  height: 15%;
  width: 100%;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}

/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .memberInfoArea {
    height: 20%;
  }
}

.memberInfoArea .header {
  background-image: url("../images/member_info.png");
  background-repeat: no-repeat;
  background-size: contain;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 242 / 58;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 25%;
}

.memberInfoArea .message {
  color: #272727;
  font-size: 2.6vw;
  letter-spacing: 0;
}

.noticeArea {
  height: 15%;
  width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;

  color: #666666;
  font-size: 2.34vw;
}

/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .noticeArea {
    height: 20%;
  }
}

.noticeArea .asterisk {
  letter-spacing: 0;
  white-space: nowrap;
}

.noticeArea .message {
  letter-spacing: 0;
}

/* iPad or iPad Pro */
@media (max-width: 1280px) {
  .noticeArea .message {
    font-size: 2.3vw;
  }
}


.loginParts .btnArea {
  height: 20%;
  width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

.loginParts .btnArea .btn-login {
  border: none;
  background-image: url("../images/login-button-enable.png");
  background-repeat: no-repeat;
  background-size: contain;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 441 / 133;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 42%;
}

.loginParts .btnArea .btn-login:active {
  background-image: url("../images/login-button-push.png");
  background-repeat: no-repeat;
  background-size: contain;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 440 / 133;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 42%;
}

.loginParts .btnArea .btn-login:disabled {
  background-image: url("../images/login-button-disable.png");
  background-repeat: no-repeat;
  background-size: contain;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 440 / 133;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 42%;
}

.footer {
  height: 12%;
  width: 100%;
  background-color: #f2f2f2;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}

.footer .footerItem {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;

  /* 上下左の隙間を入れながら配置  */
  margin: 5px 0 5px 10%;

  font-size: 2.5vw;
}

.footer .footerItem .icon {
  background-image: url("../images/polygon-1-1.svg");
  background-repeat: no-repeat;
  background-size: contain;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 18 / 18;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 18px;
  /* 左右の隙間を入れながら配置  */
  margin: 0 10px;
}

@media (max-width: 800px) {
  .footer .footerItem .icon {
    width: 9px;
  }
}

.footer .footerItem .link {
  color: #0056a2;
  letter-spacing: 0;
  text-decoration: underline;
  white-space: nowrap;
}

.footer .footerItem .link a {
  color: #0056a2;
}

/**
 * F-002-00012_パスワード保存確認ポップアップ
 */
.dialogBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; 
  background-image: url("../images/dialog-base-portrait.svg");

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dialogSavePopup {
  width: 87%;
  height: 33%;
  background-color: #ffffff;
  border: 7px solid;
  border-color: #61a6e7;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialogSavePopup .confirmMessage {
  background-image: url("../images/confirm-save-portrait.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 612 / 139;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 70%;
  height: 25%;
  margin-top: 20px;
}

.dialogSavePopup .icon {
  background-image: url("../images/error-icon-002-2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 106 / 90;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 12%;
  height: 25%;
}

.dialogSavePopup .attention {
  color: #272727;
  font-size: 3vw;
  letter-spacing: 0;

  height: 20%;
  /* 左右の隙間を入れながら配置  */
  margin: 0 20px;
}

.dialogSavePopup .btnArea {
  width: 100%;
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;

  height: 30%;
}

.dialogSavePopup .btnSave {
  all: unset;
  box-sizing: border-box;
  background-image: url("../images/btn-save.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 330 / 100;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 30%;
  /* 左右の隙間を入れながら配置  */
  margin: 0 10px;
}

.dialogSavePopup .btnSave:active {
  background-image: url("../images/btn-save-push.png");
}

.dialogSavePopup .btnNotSave {
  all: unset;
  box-sizing: border-box;
  background-image: url("../images/btn-notsave.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 330 / 100;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 30%;
  /* 左右の隙間を入れながら配置  */
  margin: 0 10px;
}

.dialogSavePopup .btnNotSave:active {
  background-image: url("../images/btn-notsave-push.png");
}

/**
 * F-002-00010_ログイン画面（ロックポップアップ）
 */
.lockPopup {
  height: 57%;

  background-image: url("../images/lockpopup-portrait.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 1300 / 630;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 90%;
}