@charset "UTF-8";

/**
 * スマホ用固定フッターバーの設定
 */

@media not all and (max-width: 767px) {
  .p-footer-bar, .p-footer-bar--spacer { display:none; }
}

/* フッターバー */
.p-footer-bar { position: fixed; bottom:0px; z-index:999; width:100%; pointer-events: none; }
.p-footer-bar__inner { overflow: hidden; }
.p-footer-bar__list { width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; }

.p-footer-bar__item { -webkit-box-flex:1; -ms-flex:1 1 0%; flex:1 1 0%; }
.p-footer-bar__item-link {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
  height:50px; padding-bottom:8px; color:inherit; transition:opacity 0.3s ease;
}
.p-footer-bar__item-link[href^="tel:"] { text-decoration: none!important; }
.p-footer-bar--spacer { width:100%; height:49px; }

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

/* タイプ 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:before {
  display:block; font-family:"design_plus"; font-size:1.6em; margin-bottom:5px;
}
.p-footer-bar__icon.c-icon { margin-bottom:0.1em; }
.p-footer-bar__icon--twitter:before { content: "\e904"; }
.p-footer-bar__icon--facebook:before { content: "\e944"; font-size:22px; }
.p-footer-bar__icon--instagram:before { content: "\ea92"; }
.p-footer-bar__icon--youtube:before { content: "\ea9d"; }
.p-footer-bar__icon--tiktok:before { content: "\e954"; }
.p-footer-bar__icon--line:before { content: "\e909"; font-size:18px; }

/* モーダル */
.p-footer-bar__modal {
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999;
  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;
  padding-bottom:150px;
}
.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; }
.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); }