/***************************************************
 ポータルサイト共通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 10px 0px 10px;
  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-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 .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: center;/* flex-start center space-around*/
  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: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:12;
  background-color: rgba(48,48,48,0.75);
  align-items: center;
  justify-content: center;
  animation: fadeIn 1s ease 0s 1 normal;
}
.progress-area > .progress{

}

/***************************************************
【共通】
 メイン（大外枠）
 ***************************************************/
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 div.error-area{
  background-color: #E0E0E0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 54px 0px 54px 0px;
}

/***************************************************
【トップページ/マイページ/検索ページ】
 PLACEイベントリスト
 ***************************************************/
main div.area-title{
  background-color:#E0E0E0;/* #E0E0E0; */
  width: 100%;
  text-align: center;
  font-size: 28px;
  color: #2196F3;
  font-weight: bold;
  padding: 12px 0px 12px 0px;
}
main div.place-event-area{
  background-color:#E0E0E0;/* #E0E0E0; */
  width: 100%;
  position: relative;
  padding: 8px 0px 60px 0px; /* はみ出して横スクロールでてしまう・・ */
}
.place-event-area div.no-place-text{
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: lightgray;
  font-weight: bold;
  padding: 12px 0px 12px 0px;
}
.place-event-area div.place-event-list{
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 8px 32px 8px 32px;

  /* width: 100%; */
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: flex-start;/* 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*/
  /* padding: 16px 0px 60px 0px; */ /* はみ出して横スクロールでてしまう・・ */
}
.place-event-area .place-event-card{
  flex: 1 1 360px;/* 要調整 */
  max-width: 400px; /* 要調整 */
  min-width: 360px; /* 要調整 */
  height: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  border: 0px solid #000000;
  border-radius: 12px;
  background-color: white;
  margin: 8px 8px 8px 8px;
  animation: fadeIn 2s ease 0s 1 normal;
}
/* カードヘッダ */
.place-event-card > .card-head{
  width: 100%;
  height: 68px;
  position: relative;
  margin: 12px 12px 12px 12px;
  cursor: pointer;
}
.card-head .card-head-ico{
  position:absolute;
  top: 0px;
  left:0px;
  width: 68px;
  height: 68px;
}
.card-head > .card-head-state{
  width: 64px;
  position:absolute;
  top: 0px;
  left: 76px;
  border: 0px solid #000000;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  color: white;
  padding: 4px 4px 4px 4px;
}
.card-head-state.idle{
  background-color: #2196F3;
}
.card-head-state.ready{
  background-color: green;
}
.card-head-state.open{
  background-color: red;
}
.card-head-state.closed{
  background-color: gray;
}
.card-head > .card-head-scope{
  width: 88px;
  position:absolute;
  top: 0px;
  left: 156px;
  background-color: white;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  padding: 2px 2px 2px 2px;
}
.card-head-scope.public{
  border: 2px solid #2196F3;
  color: #2196F3;
}
.card-head-scope.private{
  border: 2px solid purple;
  color: purple;
}
.card-head > .card-head-title{
  position:absolute;
  top: 24px;
  left: 76px;
  right: 24px;
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* カード画像部分 */
.place-event-card > div.card-media{
  width: 100%;
  height: auto;
}
.card-media > .card-img{
  width: 100%;
  object-fit: cover;
}
/* カード開催要項部分 */
.place-event-card .card-item{
  width: 100%;
  display: flex;
  margin: 4px 12px 4px 12px;
}
.card-item > .card-item-label{
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
}
.card-item > .card-item-val{
  text-align: left;
  font-size: 16px;
  color: #000000;
  padding: 0px 4px 0px 0px;
}
/* カード概要文章部分 */
.place-event-card > .card-summary-wrapper{
  width: 100%;
  position: relative;
}
.card-summary-wrapper > .card-summary{
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  text-align: left;
  font-size: 16px;
  color: #000000;
  margin: 8px 12px 8px 12px;
  overflow: hidden;
  white-space: pre-line;
  cursor: pointer;
}
.card-summary.short{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-summary.short:hover {
  color: #2196F3;
}
/* カード操作部分 */
.place-event-card > .card-ope{
  width: 100%;
  display: flex;
  justify-content: flex-end;/* center space-around */
  padding: 4px 0px 4px 0px;
  overflow: hidden;
  border: 1px solid #E0E0E0;
  border-width: 1px 0px 0px 0px;
}
.card-ope .card-ope-button{
  text-align: center;
  font-size: 20px;
  color: #2196F3;
  background-color: white;
  padding: 8px 8px 8px 8px;
  margin: 2px 8px 2px 8px;
  border: 0px solid #E0E0E0;
  border-radius: 12px;
  cursor: pointer;
}
.card-ope-button.disable{
  color: lightgray;
  cursor: default;
}
.card-ope-button:hover {
  background-color: white;
  border: 1px solid #2196F3;
  margin: 1px 7px 1px 7px;
  font-weight: bold;
}
.card-ope-button.disable:hover {
  border: 0px solid #2196F3;
  margin: 2px 8px 2px 8px;
  font-weight: normal;
}

.place-event-card div.hide{
  /* display: none; */
}

/***************************************************
【共通】
 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;
}
.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;
}

/***************************************************
　【共通】
 フッター
 ***************************************************/
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}
}