@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: 15%;
  width: 100%;

  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: 45%;
  /* 左右マージンで表示位置調整  */
  margin: 0 10px;
}

.loginParts {
  height: 78%;
  width: 81%;
}

form {
  height: 100%;
}

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

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

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

.errorText {
  height: 20%;
  width: 100%;
  color: #e66767;
  font-size: 1.25vw;
  letter-spacing: 0;
  white-space: nowrap;
  position: relative;

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

@media (max-height: 500px) {
  .errorText {
    font-size: 1.0vw;
  }
}

.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-height: 500px) {
  .errorText .icon {
    width: 6px;
    margin: 5px;
  }
}


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

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

.loginIDPWArea .loginIDArea {
  width: 50%;

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


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

.loginIDPWArea .loginIDArea .formTitle {
  background-image: url("../images/member_id.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 195 / 48;
  /* デザイン横幅 / Screen横幅(1920) の比率　×２.５  */
  width: 25%;
}

.loginIDPWArea .loginIDArea .formArea {
 margin: auto;
 width: 65%;
}

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

.loginIDPWArea .loginIDArea .formArea .inputArea .textInput {
  width: 80%;
  color: #272727;
  font-size: 2.0vw;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-height: 500px) {
  .loginIDPWArea .loginIDArea .formArea .inputArea .textInput {
    font-size: 1.5vw;
  }
}

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


.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: 85%;
  margin-left: 5px;
}

.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: 1.8vw;
  z-index: 1;
  margin-top: 80px;
}

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

@media (max-height: 500px) {
  #idlist {
    margin-top: 40px;
    font-size: 1.5vw;
  }
}

.loginIDPWArea .loginPWArea {
  width: 50%;

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

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

.loginIDPWArea .loginPWArea .formArea {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;

  margin-left: 20px;
}

.loginIDPWArea .loginPWArea .formArea #handlename {
  color: #272727;
  font-size: 2.0vw;
  letter-spacing: 0;
  white-space: nowrap;
  width: 100%;
}

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

  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: 1.25vw;
  letter-spacing: 0;
  white-space: nowrap;

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

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

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

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

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

.offerArea {
  height: 20%;
  width: 80%;
  font-size: 1.25vw;
}

.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: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

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

.memberInfoArea .message {
  font-weight: bold;
  color: #272727;
  font-size: 1.35vw;
  letter-spacing: 0;
  margin: 0 20px;
}



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

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

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

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

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




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

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

.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: 28.5%;
}

.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: 28.5%;
}

.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: 28.5%;
}

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

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

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

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

  font-size: 1.25vw;
}

.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-height: 600px) {
  .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-landscape.svg");

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

.dialogSavePopup {
  width: 66%;
  height: 57%;
  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-landscape.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 1218 / 56;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 90%;
  height: 25%;
}

.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: 8%;
  height: 25%;
}

.dialogSavePopup .attention {
  color: #272727;
  font-size: 1.8vw;
  letter-spacing: 0;
  white-space: nowrap;

  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-landscape.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 画像のアスペクト比：デザイン横幅 / デザイン高さ  */
  aspect-ratio: 1300 / 630;
  /* デザイン横幅 / Screen横幅(1920) の比率  */
  width: 67.7%;
}