/***************************************************
 ポータルサイト共通CSS

 ※大枠のレイアウト構造に関する定義
 ***************************************************/

body{
  font-family: "Meiryo UI", "Lucida Grande", Arial, "MS PGothic", Helvetica, sans-serif;
  margin: 0;
}

/***************************************************
　【共通】
 ヘッダー
 ***************************************************/
header{
  max-height: 100px; /* 高さ */
  min-height: 54px; /* 高さ */
  /* width: 100%;  長さ */
  background-color: white;
  padding: 0px 44px 0px 18px;
  position: fixed; /* ヘッダーを固定(これが重要) */
  top: 0; /* 固定する位置 */
  left: 0; /* 固定する位置 */
  right: 0;  /* 固定する位置 */
  z-index:10;
  font: 18px "Meiryo UI", "Lucida Grande", Helvetica, Arial, sans-serif;

  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  /* overflow: hidden; */ /* POPUPメニュー出すため */
  justify-content: space-between;/* flex-start center space-around space-between*/
  align-content: center;/* flex-start flex-end center */
  align-items: center;/* flex-start  flex-end center  safe center  unsafe center*/
}
header .header-area-logo{
  flex: 0 0 auto;
}
header .header-area-menu{
  flex: 1 1 auto;
  min-width: 350px; /* 要調整 */

  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  /* overflow: hidden; */ /* POPUPメニュー出すため */
  justify-content: flex-start;/* flex-start center space-around space-between*/
  align-content: center;/* flex-start flex-end center */
  align-items: center;/* flex-start  flex-end center  safe center  unsafe center*/
}
header .header-area-account{
  flex: 1 1 auto;
  min-width: 220px; /* 要調整 */

  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: flex-end;/* flex-start center space-around space-between*/
  align-content: center;/* flex-start flex-end center */
  align-items: center;/* flex-start  flex-end center  safe center  unsafe center*/
}

.header-area-logo .logo{
  margin: 2px 48px 0px 8px;
  object-fit: contain;
  width: auto;
  height: 42px;
  background-color: rgba(255,255,255,0.0);
}
.header-area-menu .menu-unit{
  flex: 0 0 auto;

  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  /* overflow: hidden; */ /* POPUPメニュー出すため */
  justify-content: flex-start;
  align-content: center;/* flex-start flex-end center */
  align-items: center;/* flex-start  flex-end center  safe center  unsafe center*/

  padding: 0px 8px 0px 8px;
}
.header-area-account .user-name{
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2196F3;
  padding: 0px 8px 0px 8px;
}

header .menu{
  /* width: 320px; */
  font-size: 18px;
  /* overflow: hidden; */ /* POPUPメニュー出すため */
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #393F43;
  background-color: white;
  border: 0px solid #E0E0E0;
  cursor: pointer;
  border-radius: 20px;
  text-align: center;
  padding: 4px 8px 4px 8px;

  position: relative;
}
.menu a{
  text-decoration: none;
  color: #393F43;
}
.menu.special a{
  text-decoration: none;
  color: #2196F3;
}
.menu.selected a{
  text-decoration: none;
  color: #2196F3;
}
.menu.selected {
  border: 1px solid #2196F3;
}
.menu:hover {
  background-color: #F0F0F0;
}
.menu a:hover {
  color: #2196F3;
}

.menu .popup-menu{
  z-index:11;
  display: none;
  position:absolute;
  top: 30px;
  left:8px;

  box-shadow: 0 4px 15px rgba(0,0,0,.5);
  border: 0px solid #000000;
  border-radius: 4px;
  background-color: white;
  padding: 8px 0px 8px 0px;
}
.menu:hover .popup-menu{
  display: block;
}
.popup-menu .popup-menu-item{
  font-size: 18px;
  color: #393F43;

  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;/* flex-start center space-around*/

  padding: 8px 16px 8px 16px;
}
.popup-menu-item a{
  text-decoration: none;
  color: #393F43;
}
.popup-menu-item:hover {
  color: #2196F3;
  background-color: #F0F0F0;
}.popup-menu-item a:hover {
  color: #2196F3;
}
/***************************************************
【共通】
 プログレスバー
 ***************************************************/
div.progress-area{
  display: -webkit-flex;
  display: flex;
  position: fixed; /* 固定(これが重要) */
  top: 0px; /* 固定する位置 */
  left: 0px; /* 固定する位置 */
  right: 0px;  /* 固定する位置 */
  bottom: 0px; /* 固定する位置 */
  z-index:10000;
  background-color: rgba(48,48,48,0.75);
  align-items: center;
  justify-content: center;
  animation: fadeIn 1s ease 0s 1 normal;
}
.progress-area > .progress{

}

/*************************************************** //20230928ozeki
【共通】
 ダイアログ　レイヤ
 ***************************************************/
div.dialog-layer{
  display: -webkit-flex;
  display: flex;
  position: fixed; /* 固定(これが重要) */
  /* top: 0;
  left: 280px;
  right:0;
  bottom: 0;
  margin: 108px 0px 54px 0px; */
  top: 0;
  left: 0px;
  right:0;
  bottom: 0;
  padding: 108px 0px 54px 280px;

  z-index:9999;
  background-color: rgba(48,48,48,0.5);
  align-items: center;
  justify-content: center;
  animation: fadeIn 1s ease 0s 1 normal;
}

/***************************************************
【共通】
 メイン（大外枠）
 ***************************************************/
main{
  background-color: #E0E0E0;
  /* position: fixed; */  /* 固定(これが重要) */
  /* top: 0; */ /* 固定する位置 */
  /* left: 0; */ /* 固定する位置 */
  /* right: 0; */  /* 固定する位置 */
  /* bottom: 0; */  /* 固定する位置 */
  z-index:1;
  margin: 54px 0px 54px 0px; /* 背景画像と各Areaとの配置関係のためmarginではなくpadding */
  width: 100%;
  height: -moz-available;          /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  overflow-x: hidden;
}
main.overlap{/* オーバラップ メイン(一時的なページ切替などに使う、メインを覆い隠すメイン) */
  z-index:9;
}

/***************************************************  //20230928ozeki
　【共通】
 　コンテンツ領域（各機能画面毎の専用内容が配置される領域）※垂直スクロール領域
 ***************************************************/
main div.contents-area{
  background-color: #E0E0E0;
  position: fixed;
  top: 0;
  left: 280px;
  right:0;
  bottom: 0;
  padding: 4px 32px 0px 32px;
  margin: 108px 0px 54px 0px;

  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;

  flex-direction: column;

  overflow-x: hidden;
  overflow-y: auto;

  /* justify-content: center;/* flex-start center space-around*/
  align-content: flex-start;/* flex-start flex-end center */
  align-items: flex-start;/* flex-start  flex-end center  safe center  unsafe center*/
}

/***************************************************
【共通】
 基本ボタン
 ***************************************************/
.basic-button{
  /* width: 100px; */
  text-align: center;
  font-size: 18px;
  color: white;
  background-color: #E0E0E0;
  padding: 4px 8px 4px 8px;
  margin: 2px 8px 2px 8px;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  cursor: pointer;
}
.basic-button.blue{
  background-color: #2196F3;
  border: 1px solid #2196F3;
  color: white;
}
.basic-button.blue a{
  text-decoration: none;
  color: white;
  font-size: 18px;
}
.basic-button.white{
  background-color: white;
  border: 1px solid #2196F3;
  color: #2196F3;
}
.basic-button.white a{
  text-decoration: none;
  color: #2196F3;
  font-size: 18px;
}

/***************************************************
【共通】
 Fixedボタン（PLACE作成）
 ***************************************************/
.footer-fixed-btn {
  position: fixed;
  z-index:10;
  bottom: 90px;
  right: 32px;
  width: 160px;
  height: 160px;
  font: 22px "Meiryo UI", "Lucida Grande", Helvetica, Arial, sans-serif;

  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  border-radius: 50%;
}
.footer-fixed-btn:hover {
  transform: translateY(-8px);
  /* box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);*/
  transition: all .5s;
}

/***************************************************
【共通】
 システムエラーページ
 ***************************************************/
main div.error-area{
  background-color: #E0E0E0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 54px 0px 54px 0px;
}

/***************************************************
　【共通】
 フッター
 ***************************************************/
footer{
  height: 54px;
  width: 100%;
  background-color: white;
  position: fixed; /* ヘッダーを固定(これが重要) */
  bottom: 0; /* 固定する位置 */
  left: 0; /* 固定する位置 */
  right: 0;  /* 固定する位置 */
  z-index:10;
  font: 14px "Meiryo UI", "Lucida Grande", Helvetica, Arial, sans-serif;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/***************************************************
　【共通】
 　その他
 ***************************************************/
/* 点滅 */
.blinking{
 -webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* レスポンシブ対応のメディアクエリを追加 */
@media screen and (max-width: 768px) {
  header {
    padding: 0px 16px;
  }

  header .header-area-menu {
    min-width: auto;
  }

  header .header-area-account {
    min-width: auto;
  }

  main {
    margin-top: 54px;
  }

  .header-area-logo .logo {
    margin: 2px 16px 0px 4px;
    height: 36px;
  }

  .menu {
    font-size: 16px;
    padding: 4px 6px;
  }

  .user-name {
    font-size: 16px;
    max-width: 120px;
  }
}