@charset "UTF-8";

/**
 * スマホ用固定フッターバーの設定
 */
@media not all and (max-width: 800px) {
  .p-footer-bar { display:none; }
}
body.show_footer_bar { padding-bottom:50px; }
body.error404.show_footer_bar {
  padding-bottom: 0;
}
body.search-no-results.show_footer_bar {
  padding-bottom: 0;
}



/* フッターバー */
.p-footer-bar { opacity:0; transition: opacity 0.5s ease; position:fixed; bottom:0; z-index:1000; height:50px; width:100%; pointer-events: none; box-shadow: 0 0 10px 1px rgba(0,0,0,0.2); }
.p-footer-bar.is-active { opacity:1; }
.p-footer-bar__inner { overflow: hidden; }
.p-footer-bar__list { width:100%; display:flex; }

.p-footer-bar__item { flex:1 1 0%; }
.p-footer-bar__item-link { display:flex; flex-direction: column; align-items: center; justify-content: flex-end; height:50px; padding-bottom:8px; color:inherit; transition:opacity 0.3s ease; }

/* アニメーション - スライドイン */
html:not(.show-drawer) .p-footer-bar.is-active { pointer-events: auto; }
.p-footer-bar__list { }
html:not(.show-drawer) .p-footer-bar.is-active .p-footer-bar__list {  }

/* タイプ 2 - ダークカラー */
.p-footer-bar--type2 { color:#fff; font-size:10px; background:#000; }
.p-footer-bar--type2 .p-footer-bar__item:not(:first-of-type) { border-left:1px solid rgba(255,255,255,0.3); }

/* タイプ 3 - ライトカラー */
.p-footer-bar--type3 { color:#000; font-size:10px; background:#fafafa; border-top:1px solid #ddd; }
.p-footer-bar--type3 .p-footer-bar__item:not(:first-of-type) { border-left:1px solid #ddd; }

/* タイプ 4 - アイコン無し */
.p-footer-bar--type4 { color:#fff; font-size:12px; background:#000; }
.p-footer-bar--type4 .p-footer-bar__item-link { padding-bottom:0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

/* ホバー */
@media (hover: hover) and (pointer: fine) {
  .p-footer-bar__item-link:hover { opacity:0.7; }
}


/* アイコン */
.p-footer-bar .icon_type_google { font-family: 'normal_icon'; font-size:18px; margin:0 0 5px 0; font-weight:100; }
.p-footer-bar .icon_type_sns { font-family: "sns_icon"; font-size:14px; margin:0 0 5px 0; font-weight:400; }
.p-footer-bar .icon_type_sns.User { font-size:20px; }
.p-footer-bar .icon_type_sns.Twitter { font-size:12px; }
.p-footer-bar .icon_type_sns.Facebook { font-size:17px; }
.p-footer-bar .icon_type_sns.LINE { font-size:16px; }

/* モーダル */
.p-footer-bar__modal {
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.p-footer-bar__modal:not(.is-active) { display:none; }
.p-footer-bar__modal-share { position:relative; z-index:1; display:-webkit-box; display:-ms-flexbox; display:flex; padding-bottom:150px; }
.p-footer-bar__modal-share-item { width:50px; }
.p-footer-bar__modal-share-item a { display:block; }
.p-footer-bar__modal-share-item + .p-footer-bar__modal-share-item { margin-left:5px; }
.p-footer-bar__modal-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
.p-footer-bar__modal-share-item img:not(.c-logo__image) { max-width:100%; height:auto; vertical-align: bottom; }