@charset "utf-8";
/* CSS Document */


/* ====== Nightfun Moment Modal: full-screen like Shorts ====== */
.movie-shopname .field {
  font-size:32px;
  font-weight: 600;
}
.movie-category{
  display: flex;
  gap:10px;
  margin-bottom: 10px;
}

/* ダイアログ全体を画面いっぱいに */
.ui-dialog.nightfun-moment-modal-dialog{
  position: fixed !important;
  inset: 0 !important;          /* top/right/bottom/left を全部0に */
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: none !important;   /* translateXなどを解除 */
  border: none;
  z-index:9999;
}


/* タイトルバーは非表示（×ボタンだけ残すなら下のCSSで調整） */
.ui-dialog.nightfun-moment-modal-dialog .ui-dialog-titlebar{
  background: transparent;
  border: 0;
  padding: 0;
  height: 0;
}

/* 1) titlebar をレイアウトから消す（幅を持たせない） */
.ui-dialog.nightfun-moment-modal-dialog .ui-dialog-titlebar{
  display: none !important; /* height:0 より強い */
}

/* 2) その結果 close ボタンも消えるので、close を content 内に固定表示する */
.ui-dialog.nightfun-moment-modal-dialog .ui-dialog-titlebar-close{
  display: none !important; /* titlebarごと消すので保険 */
}

/* 3) 代わりの閉じるボタン（自作）を置く：nf-short内に出す想定 */
.ui-dialog.nightfun-moment-modal-dialog .nf-short__close{
  position: fixed;
  right: 12px;
  top: 62px;
  z-index: 100000;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
}

/* 4) content を必ず左端起点に（押し出し対策） */
.ui-dialog.nightfun-moment-modal-dialog,
.ui-dialog.nightfun-moment-modal-dialog .ui-dialog-content,
.ui-dialog.nightfun-moment-modal-dialog #drupal-modal{
  left: 0 !important;
  margin-left: 0 !important;
}

/* content領域も全画面に */
.ui-dialog.nightfun-moment-modal-dialog .ui-dialog-content{
  padding: 0 !important;
  height: 100vh !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #000;
}

/* モーダル本文を縦画面サイズに */
.ui-dialog.nightfun-moment-modal-dialog #drupal-modal,
.ui-dialog.nightfun-moment-modal-dialog .nf-short{
  height: 100vh;
}

/* 動画領域を画面いっぱい */
.ui-dialog.nightfun-moment-modal-dialog .nf-short__video{
  position: relative;
  height: 100vh;
}

/* video をショート風に「画面にフィット（はみ出しOK）」 */
.ui-dialog.nightfun-moment-modal-dialog .nf-short__video video{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 重要：縦画面いっぱいに */
  display: block;
}

/* 右側アクションを縦中央あたりに */
.ui-dialog.nightfun-moment-modal-dialog .nf-short__actions{
  position: absolute;
  right: 12px;
  top: 45%;
  transform: translateY(-50%);
  z-index: 10;
}

/* 下部のタイトル/説明を動画上に重ねる */
.ui-dialog.nightfun-moment-modal-dialog .nf-short__meta{
  position: absolute;
  
  bottom: 50px;
  z-index: 10;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  width:100%;
  padding:0px 15px;
}

/* 背景のスクロール禁止（モーダル開いてる間） */
body.ui-dialog-open{
  overflow: hidden;
}
/* ---- FIX: center crop + dialog height ---- */
.ui-dialog.nightfun-moment-modal-dialog #drupal-modal{
  max-height: none !important;
  height: 100vh !important;
}

.ui-dialog.nightfun-moment-modal-dialog .ui-dialog-content{
  max-height: none !important;
  height: 100vh !important;
}

.ui-dialog.nightfun-moment-modal-dialog .nf-short__video video{
  width: 100% !important;
  height: 100vh !important;
  object-fit: cover;
  object-position: 50% 50% !important; /* 中央固定 */
}
.nf-short__share{
  width: 40px;
  height: 100px;
  border: 0;
  padding: 0;
  border-radius: 999px;                 /* 丸くしたいなら */
  background:url("/themes/custom/onerise_front_shop/img/icon/share.png") no-repeat center;
  background-size:100%;           /* アイコンのサイズ */
  cursor: pointer;
}
/* いいねリンクをアイコン化 */
.nf-short__like a.use-ajax{
  display: inline-block;
  width: 40px;
  height: 80px;
  border-radius: 999px; /* 丸背景にしたいなら */
  background: url("/themes/custom/onerise_front_shop/img/icon/iine.png") no-repeat center;
  background-size: 100%;
  overflow: hidden;
  text-indent: -9999px;   /* テキストを画面外へ */
  white-space: nowrap;
}

/* タップしやすく */
.nf-short__like a.use-ajax:active{
  transform: scale(0.96);
}
/* 共有ポップオーバーを画面中央に固定 */
.nf-share-popover{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 997 !important;
  width: 260px;                 /* 好きに調整 */
}

/* 背景オーバーレイ（あれば） */
.nf-share-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 998;
}
.nf-share-popover .nf-share{
 border-radius:10px;
 padding:20px;
 background:#fff;
 display:flex;
 gap:20px;
 flex-wrap:wrap;
}
.ui-dialog.nightfun-moment-modal-dialog .nf-short {
     position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
}
.nightfun-moment-modal-dialog .field--name-field-moment-movie video{
  border-radius:0px;
}
.movie-fotter .field--name-field-moment-comment {
 font-size:16px;
}
.movie-fotter {
 
}
.ui-widget-content .movie-link{
  background: var(--main-color-1);
  height: 44px;
  line-height: 44px;
  color: #fff;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  max-width: 382px;
  text-align: center;
  display: block;
  padding: 0px 15px;
  font-family: "Inria Serif", 'NotoSansJP', Hiragino Sans, ヒラギノ角ゴシック, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN, Meiryo, メイリオ, MS PGothic, helvetica, sans-serif;
  margin-top: 15px;
  margin-bottom:20px;
  color:#fff;
  text-shadow: none;
  margin-left:auto;
  margin-right:auto;
}