@charset "UTF-8";
/*------------------------------------------------------*/
/*スマホ設定*/
.pc {
  display: none;
}
.sp {
  display: block;
}
/*------------------------------------------------------*/
/* メイン背景 */
body {
  width: 100%;
  background: #fff000;
  margin: 0 auto;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  overflow-x: hidden;
}
/*------------------------------------------------------*/
/*NEWS 最新情報レイアウト*/
#wrapper {
  max-width: 675px; /*幅750*90%*/
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
/*------------------------------------------------------*/
/*ニュースレイアウト*/
article#news {
  position: relative;
  background: #fff000 url("_img/cmn_news_BG.png")no-repeat center top/100% auto;
  margin: 0;
  padding: 0;
}
/*------------------------------------------------------*/
/*ロゴ*/
article#news h1 {
  position: absolute;
  width: 21%;
  border-right: 1px solid #e60033;
  border-bottom: 1px solid #e60033;
}
/*ページタイトル*/
article#news h2 {
  display: block;
  max-width: 90%;
  margin: 0 auto;
  padding: 5% 0 3%;
}
/*------------------------------------------------------*/
/*ニュース記事レイアウト*/
article#news .column {
  display: block;
  width: 94%;
  background: #e7e7e7;
  margin: 1rem auto;
  padding: 5% 4%;
  font-size: 15px;
}
/*全体を中央寄せ*/
article#news .column.center {
  text-align: center;
}
/*------------------------------------------------------*/
/*テキスト通常*/
article#news .column p {
  width: 94%;
  margin: 0 auto;
  padding: 0 0 3%;
  font-size: 13px;
  line-height: 1.8;
}
/*テキスト左寄せ*/
article#news .column p.txtLeft {
  text-align: left;
}
/*テキスト注釈*/
article#news .column p.caution {
  width: 94%;
  margin: 0 auto;
  padding: 0 0 3%;
  font-size: 13px;
  line-height: 1.2;
}
/*------------------------------------------------------*/
/*強調*/
article#news .column strong {
  display: block;
  margin: 0 auto;
  padding: 2% 0;
  font-size: 18px;
  line-height: 1.2;
  color: #d32b3b;
  font-weight: bold;
  text-align: center;
}
/*------------------------------------------------------*/
/*編集部署名など、右寄せテキスト*/
article#news .column .signature {
  padding: 0 0 5%;
  text-align: right;
}


/*------------------------------------------------------*/
 /*2列のテキストボックス*/
.txtBox {
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

.txtBox li{
    display: inline-block;
    width: 46%;
    margin: 0 auto 24px;
    padding: 0 4px;
    font-size: 15px;
    line-height: 1.8;
    vertical-align: top;
    box-sizing: border-box;
}

article#news .column p.txtLeft.str strong {
    display: inline-block;
    width: 5em;
    padding: 0 8px 0 0 ;
}




/*------------------------------------------------------*/
/*画像通常*/
article#news .column .imgBox {
  display: block;
  max-width: 94%;
  margin: 2.5% auto;
}
/*------------------------------------------------------*/
/*画像+テキスト*/
/*------------------------------------------------------*/
article#news .column .imgtxtBox {
  max-width: 94%;
  margin: 2.5% auto 60%;
  padding: 0 0 2%;
}
/*テキスト幅*/
article#news .column .imgtxtBox dt {
  width: 60%;
  font-size: 13px;
  line-height: 1.8;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  float: left;
  clear: both;
}
/*画像幅*/
article#news .column .imgtxtBox dd {
  width: 40%;
  padding: 0 0 0 4%;
  vertical-align: top;
  float: right;
  box-sizing: border-box;
}
/*------------------------------------------------------*/
/*付録カード*/
/*------------------------------------------------------*/
/*横並び3枚*/
article#news .column .cardBox li {
  padding-bottom: 2%;}
article#news .column .cardBox img {
  display: block;
  width: 80%;
}
article#news .column .cardBox li p,article#news .column .cardBox p {
  width: 94%;
  margin: 0 auto;
  padding: 3% 0;
  font-size: 13px;
  line-height: 1.2;
}
/*カード1枚*/
article#news .column .cardBox.ph1 {
	display: block;
	width: 100%;
    margin: 0 auto;
}


/*------------------------------------------------------*/
/*ニュース：タイトル*/
article#news h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94%;
  height: auto;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

article#news h3.mb {
  margin: 0 auto 16px;
}
article#news h4.br.wd94 {
    width: 94%;
  margin: 0 auto 16px;
}

/*背景：斜めのライン(黄色)*/
article#news h3 i {
  position: relative;
  display: block;
  width: 100%;
  background: url("_img/cmn_news_h3_BG_Y.svg") no-repeat right -10px bottom/40px auto;
  padding: 2% 4% 1.4%;
  font-style: normal;
  text-align: center;
}
/*ニュースタイトルのアイコン*/
article#news h3 i img {
    display: inline;
  width: 6%;
  height: auto;
  margin-bottom: 0.6%;
}
/*------------------------------------------------------*/
/*ニュース：見出し*/
#news h4 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 2px auto 3%;
  text-decoration: none;
}
/*背景：斜めのライン（グレー）*/
#news h4 i {
  display: block;
  width: 100%;
  background: url("_img/cmn_news_h3_BG.svg") no-repeat right -10px bottom/40px auto;
  padding: 2% 4% 1.4%;
  font-size: 15px;
  color: #fff;
  font-style: normal;
  font-weight: bold;
  text-align: center;
}
/*----------------------------------------------------------*/
/*見出し：赤*/
#news h3.rd, #news h4.rd {
  background:
    linear-gradient(45deg, transparent 0px, #e60033 0px), linear-gradient(135deg, transparent 10px, #e60033 10px), linear-gradient(225deg, transparent 0px, #e60033 0px), linear-gradient(315deg, transparent 10px, #e60033 10px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 53% 53%;
  background-repeat: no-repeat;
}
/*見出し：茶*/
#news h4.br {
  background:
    linear-gradient(45deg, transparent 0px, #33060b 0px), linear-gradient(135deg, transparent 10px, #33060b 10px), linear-gradient(225deg, transparent 0px, #33060b 0px), linear-gradient(315deg, transparent 10px, #33060b 10px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 53% 53%;
  background-repeat: no-repeat;
}
/*----------------------------------------------------------*/
/*リンクボタン設定*/
#news a.link {
  display: block;
  width: 80%;
  height: auto;
  background:
    linear-gradient(45deg, transparent 0px, #e60033 0px), linear-gradient(135deg, transparent 10px, #e60033 10px), linear-gradient(225deg, transparent 0px, #e60033 0px), linear-gradient(315deg, transparent 10px, #e60033 10px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 53% 53%;
  background-repeat: no-repeat;
  margin: 5% auto 0;
  padding: 2.5% 4% 1.9%;
  text-align: center;
  text-decoration: none;
}
/*矢印アイコン*/
#news a.link i {
  background: url("../_img/cmn_arrow_y.svg") no-repeat left center/13px auto;
  padding-left: 15px;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  color: #FFF000;
}
/*----------------------------------------------------------*/
/*リンクボタン設定（外部リンク）*/
#news a.linkExt {
  display: block;
  width: 80%;
  height: auto;
  background: #FFF;
  margin: 0 auto;
  padding: 2.5% 4% 1.9%;
  text-decoration: none;
  border-radius: 140px;
  border: 1px solid #CCC;text-align: center;
}
/*矢印アイコン*/
#news a.linkExt i {
  background: url("../_img/cmn_arrow_bk.svg") no-repeat left center/13px auto;
  padding-left: 15px;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  color: #FFF000;
  color: #333;
}
/*----------------------------------------------------------*/
/* フッター */
/*----------------------------------------------------------*/
footer {
  position: relative;
  width: 100%;
  background: #000;
  margin: 3% auto 0;
  padding: 4% 0 4%;
  text-align: center;
  box-sizing: border-box;
  z-index: 999;
}
/*テキスト*/
footer p {
  margin: 0 auto;
  padding: 2% 4% 0;
  font-size: 13px;
  line-height: 1.8;
  color: #FFF;
}
/*バナー*/
footer ul#bns {
  display: flex;
  flex-wrap: wrap;
  width: 94%;
  margin: 0 auto;
  padding: 0;
}
/*バナー2列*/
footer ul#bns li {
  width: 48%;
  margin: 0 1% 2%;
  text-align: center;
}
/*-------------------------------------------------end@media*/
@media screen and (min-width:670px) {
  /*------------------------------------------------------*/
  /*PC設定*/
  /*------------------------------------------------------*/
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
  /*------------------------------------------------------*/
  /*------------------------------------------------------*/
  /*テキスト通常*/
  article#news .column p {
    font-size: 15px;
  }
  article#news .column strong {
    font-size: 20px;
  }
  /*------------------------------------------------------*/
  /*画像+テキスト*/
  /*------------------------------------------------------*/
  article#news .column .imgtxtBox {
    max-width: 94%;
    margin: 2.5% auto 60%;
    padding: 0 0 2%;
  }
  /*テキスト幅*/
  article#news .column .imgtxtBox dt {
    font-size: 15px;
    line-height: 1.8;
  }
  /*------------------------------------------------------*/
  /*付録カード*/
  /*------------------------------------------------------*/
    /*横並び3枚*/
  article#news .column .cardBox {
    display: flex;
    flex-wrap: wrap;
    width: 94%;
    margin: 0 auto;
  }
  article#news .column .cardBox li {
    width: 33.3%;
    margin: 0 auto;
      padding: 0 4px;
  }
  article#news .column .cardBox img {
    width: 100%;
  }
  article#news .column .cardBox li p {
    font-size: 15px;
    line-height: 1.2;
  }
   /*カード一枚*/
article#news .column .cardBox.ph1 {
	display: block;
	width: 94%;
	margin: 0 auto;
}
article#news .column .cardBox.ph1 img {
	display: block;
	width: 33.3%;
	margin: 0 auto;
}
    
    article#news .column .cardBox p {
 width: 94%;
  margin: 0 auto;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.2;
        
    }
  /*ニュース：タイトル*/
  article#news h3 {
    font-size: 20px;
  }
  /*ニュースタイトルのアイコン*/
  article#news h3 i img {
      display: inline;
    width: 4%;
  }
  /*矢印アイコン*/
  #news a.link i {
    padding-left: 18px;
    font-size: 15px;
  }
  /*----------------------------------------------------------*/
  /*リンクボタン設定（外部リンク）*/
  /*矢印アイコン*/
  #news a.linkExt i {
    padding-left: 18px;
    font-size: 15px;
  }
  /*----------------------------------------------------------*/
  /*バナー3列*/
  footer ul#bns li {
    width: 31.3%;
  }
  /*-------------------------------------------------end@media*/
}

/*個別画像サイズ*/
article#news .column .imgBox {
    display: block;
    width: 75%;
}
article#news .column .imgBox.ph1 {
    display: block;
    width: 100%;
}
article#news .column .imgBox.ph2 {
    display: block;
    width: 70%;
}
article#news .column .cardBox img {
    display: block;
    width: 65%;
}
#news h4.br2 {
    background: linear-gradient(45deg, transparent 0px, #33060b 0px), linear-gradient(135deg, transparent 10px, #33060b 10px), linear-gradient(225deg, transparent 0px, #33060b 0px), linear-gradient(315deg, transparent 10px, #33060b 10px);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 53% 53%;
    background-repeat: no-repeat;
    float: right;
}
#news h4.br2 {
    float: right
}
/*ロゴ*/
#news h4 img {
    position: absolute;
    height: 100px;
    left: -24px;
}
article#news .column .check {
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding: 5px;
    font-size: 15px;
    font-weight: bold;
}
.ph {
    display: flex;
    flex-flow: row wrap;
    width: 94%;
    margin: 0 auto;
    padding: 0 0 3%;
    font-size: 13px;
    line-height: 1.8;
    align-items: center;
    text-align: left;
}
.ph dt {
    flex-basis: 24%;
    padding: 2%;
}
.ph dd {
    flex-basis: 76%;
    padding: 2% 1%;
}

@media screen and (min-width:670px) {
/*------------------------------------------------------*/
/*PC設定*/
/*------------------------------------------------------*/
article#news .column .imgBox {
    display: block;
    width: 60%;  /*--48%----*/
}
article#news .column .imgBox.ph1 {
    display: block;
    width: 100%;/*--80%----*/
}
article#news .column .imgBox.ph2 {
    display: block;
    width: 58%;/*--46.4%%----*/
}
article#news .column .cardBox img {
    display: block;
    width: 100%;
}
#news h4 img {
    position: absolute;
    width: auto;
    height: 90px;
    /*    margin-top: -40px;*/
/*    top: 65%;*/
    left: 15px;
}
article#news .column .check {
    width: 60%;
    height: auto;
    margin: 0 auto;
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
}
.ph {
    display: flex;
    flex-flow: row wrap;
    width: 75%;
    margin: 0 auto;
    padding: 0 0 3%;
    font-size: 15px;
    line-height: 1.8;
    align-items: center;
}
.ph dt {
    flex-basis: 24%;
    padding: 2%;
}
.ph dd {
    flex-basis: 76%;
    padding: 2%;
}
}
/*------------------------------------------------------*/
/*追加*/
/*------------------------------------------------------*/
.read{margin-bottom:1rem;}
.newComics{width:70%; margin:0 auto;}
.comicsList{display:flex;flex-wrap:wrap;justify-content:space-between;}
.comicsList li{width:46%;margin:2%; margin-bottom:1rem;}
#news .comicsList li a.linkExt {width:100%;margin-top:1rem;}
.mangaList{display:flex;flex-wrap:wrap;}
.mangaList li{width:31.333%;margin:1%; margin-bottom:0.5rem;}
article#news .mangaList li p{ font-size:10px; line-height:1.1;margin-top:0.5rem;text-align: center;}
article#news .mangaList li p.mini{ font-size:8.5px;}
.slick-slider {width:90%;margin:1rem auto;}
.slick-prev {left: -2rem !important;}
.slick-next {right: -2rem !important;}

article#news .column {
 padding: 5% 2%;
}
article#news .column p{text-align: left;}

.charaList{display:flex; flex-wrap:wrap;}
.charaList li{width:46%; margin:2%; margin-bottom:1rem;}
.charaList li img{display:block; width:100%; height:auto;margin-bottom:1rem;}
.charaList li p{line-height:1.4!important;}
.charaList li span.name{display:block; font-size:1.2em; font-weight:bold; margin-bottom:0.1rem;}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  box-sizing: border-box;margin-bottom:2rem;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.youtube.shorts{
  aspect-ratio:9/16;
  width:100%;
  max-width:400px;margin:0 auto 2rem;
}


.shineBtn{
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.shineBtn img{
  display:block;
  width:100%;
  height:auto;
}

/* 光 */
.shineBtn::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-60%;
  width:100%;
  height:160%;
  transform: rotate(20deg);
  pointer-events:none;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.0) 20%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0.0) 80%,
    rgba(255,255,255,0) 100%
  );

  animation: shine 3s ease-out infinite;
}

/* キラッ */
@keyframes shine{
  0%   { left:-60%; opacity:0; }
  5%   { opacity:1; }
  25%  { left:130%; opacity:0; }
  100% { left:130%; opacity:0; }
}

.shorts-embed {
width: 85%; max-width: 360px; aspect-ratio: 9 / 16; margin: 0 auto 2rem;
}

.shorts-embed iframe {
  width: 100%;
  height: 100%;
}