@charset "UTF-8";

/********************************************************************
  追加
********************************************************************/
/*margin-bottom　外側の下方向にスペースを空けたい時に使用*/
.m_mb15{margin-bottom: -15px!important;}
.m_mb30{margin-bottom: -30px!important;}
.m_mb45{margin-bottom: -45px!important;}
.m_mb70{margin-bottom: -70px!important;}
.mb5{margin-bottom: 5px!important;}
.mb10{margin-bottom: 10px!important;}
.mb15{margin-bottom: 15px!important;}
.mb20{margin-bottom: 20px!important;}
.mb25{margin-bottom: 25px!important;}
.mb30{margin-bottom: 30px!important;}
.mb35{margin-bottom: 35px!important;}
.mb40{margin-bottom: 40px!important;}
.mb45{margin-bottom: 45px!important;}
.mb50{margin-bottom: 50px!important;}
.mb60{margin-bottom: 60px!important;}
.mb65{margin-bottom: 60px!important;}
.mb70{margin-bottom: 70px!important;}
.mb80{margin-bottom: 80px!important;}
.mb90{margin-bottom: 80px!important;}
.mb100{margin-bottom: 100px!important;}
.mb110{margin-bottom: 110px!important;}
.mb120{margin-bottom: 120px!important;}
.mb130{margin-bottom: 130px!important;}
.mb150{margin-bottom: 150px!important;}
.mb180{margin-bottom: 180px!important;}
.mb200{margin-bottom: 200px!important;}

/*margin-top 　外側の上方向にスペースを空けたい時に使用*/
.mt20{margin-top: 20px!important;}
.mt25{margin-top: 25px!important;}
.mt50{margin-top: 50px!important;}
.mt80{margin-top: 80px!important;}

/*margin-right 　外側の右方向にスペースを空けたい時に使用*/
.mr10{margin-right: 10px!important;}
.mr15{margin-right: 15px!important;}

/*margin-left 　外側の右方向にスペースを空けたい時に使用*/
.ml10{margin-left: 10px!important;}
.ml15{margin-left: 15px!important;}
.ml80{margin-left: 80px!important;}

/*padding-top　内側の上方向にスペースを空けたい時に使用*/
.pt10{padding-top: 10px!important;}
.pt20{padding-top: 20px!important;}
.pt30{padding-top: 30px!important;}

/*padding-bottom　内側の下方向にスペースを空けたい時に使用*/
.pb20{padding-bottom: 20px!important;}
.pb30{padding-bottom: 30px!important;}

/*margin マイナス*/
.mb-minus10{margin-bottom: -10px!important;}
.mb-minus15{margin-bottom: -15px!important;}
.mb-minus20{margin-bottom: -20px!important;}
.mb-minus25{margin-bottom: -25px!important;}
.mb-minus30{margin-bottom: -30px!important;}
.mb-minus35{margin-bottom: -35px!important;}
.mb-minus40{margin-bottom: -40px!important;}

/*横幅のサイズ指定*/
.width8{width: 8%!important;}
.width10{width: 10%!important;}
.width15{width: 15%!important;}
.width16{width: 16%!important;}
.width17{width: 17%!important;}
.width18{width: 18%!important;}
.width19{width: 19%!important;}
.width20{width: 20%!important;}
.width21{width: 21%!important;}
.width22{width: 22%!important;}
.width23{width: 23%!important;}
.width24{width: 24%!important;}
.width25{width: 25%!important;}
.width26{width: 26%!important;}
.width27{width: 27%!important;}
.width28{width: 28%!important;}
.width29{width: 29%!important;}
.width30{width: 30%!important;}
.width31{width: 31%!important;}
.width32{width: 32%!important;}
.width33{width: 33%!important;}
.width34{width: 34%!important;}
.width35{width: 35%!important;}
.width36{width: 36%!important;}
.width37{width: 37%!important;}
.width38{width: 38%!important;}
.width39{width: 39%!important;}
.width40{width: 40%!important;}
.width41{width: 41%!important;}
.width42{width: 42%!important;}
.width43{width: 43%!important;}
.width44{width: 44%!important;}
.width45{width: 45%!important;}
.width46{width: 46%!important;}
.width47{width: 47%!important;}
.width48{width: 48%!important;}
.width49{width: 49%!important;}
.width50{width: 50%!important;}
.width51{width: 51%!important;}
.width52{width: 52%!important;}
.width53{width: 53%!important;}
.width54{width: 54%!important;}
.width55{width: 55%!important;}
.width56{width: 56%!important;}
.width57{width: 57%!important;}
.width58{width: 58%!important;}
.width59{width: 59%!important;}
.width60{width: 60%!important;}

.width65{width: 65%!important;}
.width70{width: 70%!important;}
.width80{width: 80%!important;}
.width81{width: 81%!important;}
.width82{width: 82%!important;}
.width83{width: 83%!important;}
.width84{width: 84%!important;}
.width85{width: 85%!important;}
.width88{width: 88%!important;}
.width90{width: 90%!important;}
.width100{width: 100%!important;}

/*text　テキストの揃え方指定　親要素に入れること*/
.text-left{text-align: left!important;}/*左揃え*/
.text-right{text-align: right!important;}/*右揃え*/
.text-center{text-align: center!important;}/*中央ぞろえ*/

/*img　画像の揃え方　クラス名のみ親要素に入れること(margin_○○ img　←imgは不要)*/
.margin-right img{margin: 0 0 0 auto!important;}
.margin-left img{margin: auto 0 0 0!important;}

/*possition　基準となる位置を決める　親要素に入れること*/
.position-relative{position: relative;}/*従来の位置*/
.position-absolute{position: absolute;}/*親の左上が基準*/

/*flex　横並びに使用　親要素に入れる 子要素はwidthで横幅を決めておくこと*/
.flex{display: flex;}

/*flex使用時のコンテンツの配置　flexと同じく親要素に入れること*/
.justify-sb{justify-content: space-between;}/*左右にわける*/
.justify-sa{justify-content: space-around;}/* 各アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置く */
.justify-left{justify-content: left;}/*左配置*/
.justify-flex-end{justify-content: flex-end;}/*要素の終わり*/
.justify-se{justify-content: space-evenly;}/* 各アイテムを均等に配置し各アイテムの周りに同じ大きさの間隔を置く */
.justify-center{justify-content: center;}/*真ん中*/

.items-center{align-items: center;}/*子要素を上下中央で揃える*/
.flex-wrap{flex-wrap: wrap;}/*コンテンツを折り返す*/
.flex-end{align-items: flex-end;}/*下揃え*/
.row-reverse{flex-direction: row-reverse;}/*順番入れ替え*/

.flex-shrink{flex-shrink: 0;}/*要素を折り返しさせない*/
.flex-grow{flex-grow:1;}/*高さを揃える※親要素にflex-direction:columnを入れること*/
.flex-direction{flex-direction:column;}/*上から下に垂直方向に並べる*/
.margin-top-auto{margin-top: auto;}/*親要素にflexとflex-direction:column;で下揃え*/

/*aos用*/
.overflow-hidden{overflow: hidden;}

/********************************************************************
  共通
********************************************************************/
html {
  scroll-behavior: smooth; /* スムーススクロール */
}

/*line-heightリセット*/
#onenight p,#onenight a,#onenight ul li,#onenight h1,#onenight h2,#onenight h3,#onenight h4,#onenight h5,#onenight h6,#onenight h7{
  line-height: 1;
}

/*buttonリセット*/
#onenight button{padding: 0; background: none; border: none;}

/*ページ全体の指定*/
#onenight{
  margin: 0 auto;/*中央揃え*/
  max-width: 770px;/*最大横幅*/
  background: #dcacdf;/*背景色*/
  text-align: center;/*テキスト中央揃え*/
  position: relative;
}

/*ページの内側共通*/
#onenight .wrap{
  margin: 0 auto;/*中央揃え*/
  padding: 50px 0 80px 0;/*要素の上下余白*/
  max-width: 660px;/*最大横幅*/
  box-sizing: border-box;
}

/*ページ内の文章指定*/
#onenight p{
    text-align: center;/*中央揃え*/
    color: #261515;/*文字色*/
    font-size: 1.3rem;/*フォントサイズ*/
  letter-spacing:  0em;/*文字間*/
  line-height: 2.4rem;/*行間*/
}

#onenight img{
  max-width: 100%;
  height: auto;
  margin: 0 auto;
    display: block;
}

#onenight .img_width100 img{width: 100%;}
#onenight .img_auto img{width: auto!important;}

/*色*/
#onenight .orange{color: #f19007!important;}
#onenight .red{color: #f60e39!important;}
#onenight .wine-red{color: #c93b66!important;}
#onenight .blue{color: #0fc3c8!important;}
#onenight .light-blue{color: #0fc3c8!important;}
#onenight .green{color: #00a1be!important;}
#onenight .pink{color: #ee008c!important;}
#onenight .white{color: #fff!important;}
#onenight .black{color: #00000a!important;}

/*太字*/
#onenight .bold{font-weight: bold;}

/*リスト*/
#onenight ul{
  list-style: none;
}
#onenight ul li{
  color: #24281f;
  text-align: center;/*中央揃え*/
    font-size: 1.8rem;/*フォントサイズ*/
  letter-spacing:  0em;/*文字間*/
  line-height: 2.8rem;/*行間*/
}

 /********************************************************************
  アニメーション
********************************************************************/
/*じわっと表示*/
#onenight .blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}

 /********************************************************************
  見出し
********************************************************************/
#onenight h1 img{border: none!important;}

#onenight .bg-box h2{
  padding: 12px 8px  8px  8px;
  color: #fff;
  font-size: 3rem;
  font-weight: normal;
  background: #ee008c;
  border-radius: 20px 20px 0 0;
}

#onenight #celebration h2{font-size: 2.6rem; color: #261515;}
#onenight #celebration h2 span::before{content: "＼"; position: relative;}
#onenight #celebration h2 span::after{content: "／"; position: relative;}

#onenight h3{color: #261515; font-size: 1.6rem;}
#onenight #cast h3{font-size: 2.4rem;}

/********************************************************************
  共通
********************************************************************/
#onenight .bg-box {
    background: #fff;
    border-radius: 20px 20px 20px 20px;
}

#onenight .bg-box > div{
  padding: 30px 30px 30px 30px;
}

/********************************************************************
  キャンペーン
********************************************************************/
#onenight p.campaign{
  color: #ee008c;
  font-size: 5.5rem;
  font-weight: bold;
}

#onenight p.campaign-title{
  font-size: 2.4rem;
  font-weight: bold;
}

/********************************************************************
  ドラマ情報
********************************************************************/
/*共通*/
#onenight #information p{font-size: 1.8rem; line-height: 2.8rem;}

/*2025年1月7日(火)24時30分より*/
#onenight #information p.drama-time{font-size: 2.8rem;}

/*※2025年1月10日(金)深夜2時よりテレビ大阪で放送開始！*/
#onenight #information p.annotation{font-size: 1.3rem;}

#onenight #information a{
  color: #ee008c;
  font-size: 1.8rem;
  text-decoration: underline;
}

#onenight #information .synopsis{
    font-size: 1.3rem;
    line-height: 2.4rem;
}

/********************************************************************
  ドラマ情報
********************************************************************/
#onenight #celebration p {
   padding: 30px 20px 30px 20px;
   font-size: 1.6rem;
  background: #fff;
   border: 2px solid #261515;
   border-radius: 20px 20px 20px 20px;
}

/********************************************************************
  コマサム
********************************************************************/
#onenight #koma .koma-wrap{
  margin: 0 auto;
  width: 700px;
}

#onenight #koma .koma-bg01{
  padding: 0 0 25px 0;
	background: url(/auto/images/fix/title/onenight/pcc/koma-bg/bg01.png) no-repeat;
}

#onenight #koma .koma-bg01 .width55{
  margin: 35px 0 0 0;
}

#onenight #koma .koma-bg02{
  padding: 20px 0 0 0;
	background: url(/auto/images/fix/title/onenight/pcc/koma-bg/bg02.png) no-repeat 0 10px;
}

#onenight #koma .koma-bg03{
  padding: 35px 0 0 0;
	background: url(/auto/images/fix/title/onenight/pcc/koma-bg/bg03.png) no-repeat top right;
}

#onenight #koma .koma-bg04{
	background: url(/auto/images/fix/title/onenight/pcc/koma-bg/bg04.png) no-repeat bottom 95px right;
}

#onenight #koma .koma-bg05{
  padding: 0 0 40px 0;
	background: url(/auto/images/fix/title/onenight/pcc/koma-bg/bg05.png) no-repeat;
}

#onenight #koma .koma-bg06{
	background: url(/auto/images/fix/title/onenight/pcc/koma-bg/bg06.png) no-repeat bottom 138px right 26px;
}

#onenight #koma .koma-bg06 .width20{
    position: relative;
    top: -35px;
}

#onenight #koma .koma-bg07{
  padding: 0 0 20px 0;
	background: url(/auto/images/fix/title/onenight/pcc/koma-bg/bg07.png) no-repeat bottom 10px left 15px;
}

#onenight #koma .koma10{
  margin: 0 0 -10px 0;
  position: relative;
  top: -10px;
  z-index: 5;
}

#onenight #koma .bg-light-blue{background: #74e9dc;}
#onenight #koma .bg-white{background: #fff;}

/********************************************************************
  footer
********************************************************************/
#onenight footer{
  margin: 0 auto;
  width: 770px;
  background: #dcacdf;
}

/*メディア化リンクボタン*/
#onenight footer a{
  padding: 16px 40px 12px 25px;
  width: 100%;
  color:#e3007f;
  font-weight: bold;
  text-align: center;
    font-size: 2.4em;
  background: #fff;
  border: 3px solid #e3007f;
  box-shadow: 0px 2px #e3007f;
  display: inline-block;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    box-sizing: border-box;
  position: relative;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

#onenight footer a:hover{
  background: #74e9dc;
  text-decoration: none;
}

#onenight footer a::before{
  content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    right: 0;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 10px solid transparent;
    border-left: 14px solid #e3007f;   /* 好みで色を変えてください */  
}