@charset "UTF-8";
/*****************************
  切り替え
*****************************/
.sp_contents {
  display: none; 
}
.pc_contents {
  display: block; 
}

@media (max-width: 820px) {
  .sp_contents {
    display: block; /* spの時は表示 */
  }
  .pc_contents {
  display: none; /* spの時は非表示 */
  }
}



/*****************************
    topスライド
*****************************/

.topslider {
display: block;
height: auto;
position: relative;
width: 100%;
margin-top: 75px;
background: #000;
}
.topslider_img img{
  width: 100%;
  
}

.main_item{
  margin: 0;
  padding: 0;
  position: absolute;
  width: 45%;
  top: 13%;
  left: 5%;
}

.main_item .itemimg_logo{
    width: 100%;
    margin: 0 auto;
}
.main_item .itemimg_credits{
  width: 88%;
  margin: 0 auto;
  position: relative;
  top: -2vw;
}

.main_item .itemimg_roadshow{
    width: 65%;
    margin: 0 auto 2vw;
}

.main_item .itemimg_btn{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
width: 170px;
margin: 0 auto;
}

.main_item .itemimg_btn li:first-child{
    margin-right: 40px;
    width: 30px;
}
.main_item .itemimg_btn li:last-child{
width: 100px;
}

@media screen and (max-width: 1180px) {
.main_item .itemimg_btn{
width: 135px;
}
.main_item .itemimg_btn li:first-child{
margin-right: 30px;
width: 25px;
}
.main_item .itemimg_btn li:last-child{
width: 80px;
}
}

.comment_bomb{
position: absolute;
width: 170px;
bottom: 5%;
left: 4%;
transform: rotate(-15deg);
}
@media screen and (max-width: 1400px) {
.comment_bomb{
width: 150px;
bottom: 5%;
left: 3%;
}
}

@media screen and (max-width: 1180px) {
.comment_bomb{
width: 125px;
}
}
@media screen and (max-width: 1024px) {
.comment_bomb{
width: 100px;
bottom: 5%;
}
}
@media screen and (max-width: 900px) {
.comment_bomb{
width: 100px;
bottom: 2%;
}
}
@media screen and (max-width: 820px) {
.comment_bomb{
width: 140px;
bottom: -15%;
}
}
@media screen and (max-width: 600px) {
.comment_bomb{
width: 100px;
bottom: -15%;
left: 3%;
}
}
@media screen and (max-width: 480px) {
.comment_bomb{
width: 80px;
bottom: -10%;
left: 3%;
}
}



/* sp_contents */
@media screen and (max-width: 820px) {
.topslider_sp {
height: auto;
position: relative;
width: 100%;
background: #000;
}
.topslider_sp img{
width: 100%;
}

.main_item_sp{
  margin: 0;
  padding: 0;
  z-index: 1;
  position: absolute;
  width: 100%;
  top: 55.5%;
  left: 0%;
}

.main_item_sp .itemimg_logo_sp{
width: 84%;
margin: 0 auto;
}
.main_item_sp .itemimg_credits_sp{
  width: 68%;
  margin: 0 auto;
  position: relative;
  top: -4vw;
}

.main_item_sp .itemimg_roadshow_sp{
  width: 55%;
  margin: 3vw auto 6vw;
}

.main_item_sp .itemimg_btn_sp{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 160px;
  margin: 0 auto;
}

.main_item_sp .itemimg_btn_sp li:first-child{
margin-right: 40px;
width: 35px;
}
.main_item_sp .itemimg_btn_sp li:last-child{
width: 85px;
}
}

@media screen and (max-width: 600px) {
.main_item_sp .itemimg_roadshow_sp{
  width: 55%;
  margin: 1vw auto 5vw;
}
.main_item_sp .itemimg_btn_sp{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 140px;
  margin: 0 auto;
}

.main_item_sp .itemimg_btn_sp li:first-child{
margin-right: 40px;
width: 25px;
}
.main_item_sp .itemimg_btn_sp li:last-child{
width: 75px;
}
}
/* sp_contents END*/


/* SP時メニュー内 */
.sp_area .itemimg_btn{
display: none;
}

@media screen and (max-width: 820px) {
.sp_area .itemimg_btn{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}
.sp_area .itemimg_btn li{
width: 35px;
}
.sp_area .splogo_area img{
width: 90%;
margin: 0 auto 10px;
}
}

/*****************************
  ページ内リンク
*****************************/

.anchor {
  display: block;
  padding-top: 10px;
  margin-top: -10px;
  position: relative;
  z-index: -1;
}

/*****************************
ムビチケエリア
*****************************/

@media (max-width: 820px){
.itemimg_awards_sp{
  width: 80%;
  margin: 60px auto;
}
}
@media (max-width: 600px){
.itemimg_awards_sp{
  width: 90%;
  margin: 40px auto 20px;
}
}

/*****************************
タイトル画像エリア
*****************************/
.title_img {
  position: relative;
  width: 100%;
}

.title_img .pc_contents img,
.title_img .sp_contents img {
  width: 100%;
  height: auto;
  display: block;
}


/* 各タイトル画像 */
.title_area{
  text-align: center;
  padding: 30px 0 30px;
}
@media screen and (max-width: 820px) {
.title_area{
  text-align: center;
  padding: 0px 0 60px;
}
}

/* 各タイトル画像02 */
.title_area02{
  text-align: center;
  padding: 0px 0 0px;
}

.title_img_style {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.title_img_style p.annotation{
font-size: 14px;
font-weight: 600;
color: #FEEF02;
margin-top: 5px;
letter-spacing: 1px;
}


/* 高さ固定、比率維持 */
.title_img_style img {
  height: 50px;
}

@media screen and (max-width: 1600px) {
.title_img_style img{
height: 50px !important;
}
}
@media screen and (max-width: 1400px) {
.title_img_style img{
height: 50px !important;
}
}
@media screen and (max-width: 1180px) {
.title_img_style img{
height: 50px !important;
}
}
@media screen and (max-width: 1024px) {
.title_img_style img{
height: 45px !important;
}
}
@media screen and (max-width: 820px) {
.title_img_style img{
height: 45px !important;
}
}
@media screen and (max-width: 767px) {
.title_img_style img{
height: 40px !important;
}
}

/*****************************
タイトル画像エリア
*****************************/
.text_img{
  position: relative;
  width: 100%;
}
.text_img .pc_contents img,.text_img .sp_contents img{
  width: 100%;
}

/*****************************
ストーリー
*****************************/
.bg_story_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_story_img.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 14vw 0 10vw;
}
@media screen and (max-width: 820px) {
.bg_story_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_story_img_sp.webp);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 20vw 0 10vw;
}
}
.story_img_flex{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  background: #000000;
}
.story_img_flex li{
  width: calc(100% / 4);
}
@media screen and (max-width: 820px) {
.story_img_flex li{
  width: calc(100% / 2);
}
}
.main_story_img{
  width: 100%;
  position: relative;
}

/*****************************
スタッフ
*****************************/
.bg_staff_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_staff_img.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 4vw 0 8vw;
}
@media screen and (max-width: 820px) {
.bg_staff_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_staff_img_sp.webp);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 15vw 0 15vw;
}
}

/*****************************
キャストエリア
*****************************/

.cast_area{
    width: min(1000px, 90%);
    margin: 70px auto 0px;
    padding-bottom: 150px;
}

.cast_flex{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5vw 12%;
}
@media screen and (max-width: 820px) {
.cast_area{
  width: min(500px, 100%);
  margin: 30px auto 0px;
  padding-bottom: 50px;
}
.cast_flex{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3.5vw 12%;
}
}

.cast_flex img{
  width: 90%;
  padding-right: 10%;
}

.cast_flex .text_area{
  text-align: left;
  width: 75%;
  margin-left: 25%;
  position: absolute;
  top: 60%;
}
@media screen and (max-width: 1180px) {
.cast_flex .text_area{
  width: 80%;
  margin-left: 20%;
}
}
@media screen and (max-width: 600px) {
.cast_flex .text_area{
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}
}

/* 特殊設定 */

.cast_flex li{
 position: relative;
}
@media screen and (max-width: 1180px) {
.cast_flex li:nth-child(3),.cast_flex li:nth-child(4){
margin-top: 10%;
}
}
@media screen and (max-width: 1000px) {
.cast_flex li:nth-child(3),.cast_flex li:nth-child(4){
  margin-top: 30%;
}
}
@media screen and (max-width: 820px) {
.cast_flex li:nth-child(3),.cast_flex li:nth-child(4){
  margin-top: 0%;
}
}
@media screen and (max-width: 480px) {
.cast_flex li:nth-child(1){
  margin-top: 0px;
}
.cast_flex li:nth-child(2){
  margin-top: 125px;
}
.cast_flex li:nth-child(3){
  margin-top: 100px;
}
.cast_flex li:nth-child(4){
  margin-top: 10px;
}
.cast_flex li:nth-child(5){
  margin-top: 0px;
}
.cast_flex li:nth-child(6){
  margin-top: 20px;
}
.cast_flex li:nth-child(7){
  margin-top: 10px;
}
.cast_flex li:nth-child(8){
  margin-top: 30px;
}
}
/* 特殊設定 */
.cast_flex li h3{
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 5px;
}
@media screen and (max-width: 820px) {
.cast_flex li h3{
  margin-bottom: 10px;
}
}

.cast_flex li h3 .character_name01{
 color: #07C42A;
 display: block;
 font-size: 16px;
}
.cast_flex li h3 .character_name02{
  color: #EC0310;
  display: block;
 font-size: 16px;
}
@media screen and (max-width: 820px) {
.cast_flex li h3 .character_name01{
 font-size: 24px;
}
.cast_flex li h3 .character_name02{
 font-size: 24px;
}
}
.cast_flex li p{
 color: #fff;
 font-size: 14px;
}

/*****************************
コメント
*****************************/
.bg_comments_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_comments_img.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 4vw 0 4vw;
}
@media screen and (max-width: 820px) {
.bg_comments_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_comments_img_sp.webp);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 8vw 0 35vw;
}
}

/* 特殊画像切り替え */
/*****************************
1024px切り替え
*****************************/
.sp_1024img {
  display: none; /* 1024の時は非表示 */
}
.pc_1024img {
  display: block; /* 1024の時は非表示 */
}

@media (max-width: 1024px) {
  .sp_1024img {
    display: block; /* 1024の時は表示 */
  }
  .pc_1024img {
  display: none; /* 1024の時は非表示 */
  }
}


.cast_text_area h3{
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 30px;
  color: #fff;
}

.cast_text_area p{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
}

@media screen and (max-width: 1180px) {
.cast_text_area h3{
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #fff;
}
}
@media screen and (max-width: 767px) {
.cast_text_area h3{
  font-size: 19px;
  margin-bottom: 10px;
  text-align: left;
}
.cast_text_area p{
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
}

/*****************************
  sec-theater
*****************************/ 
.sec-theater,
.sec-theater .area li a,
.sec-theater .theater-area a{
  color: #fff;
}
.sec-theater .area{
  border: 1px solid #fff;
  margin-top: 40px;
  text-align: center;
}
.sec-theater .area li{
  padding: 5px;
  width: calc(100% / 7);
}
.sec-theater .area li a{
  font-weight: 900;
  display: block;
  transition: .5s;
  opacity: 1 !important;
}
.sec-theater .area li a:hover{
  background: #fff;
  color: #000;
}
.sec-theater .theater-area{
  margin-top: 60px;
}
.sec-theater .theater-area a{
  text-decoration: underline;
}
.sec-theater .theater-area a:hover{
  text-decoration: none;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .sec-theater .area{
    justify-content: center;
    margin: 60px auto 0;
    width: calc(100% - 6rem);
  }
  .sec-theater .area li {
    padding: 5px 10px;
    width: auto;
  }
  .sec-theater .inner1{
    padding: 0 3rem;
  }
  .sec-theater .theater-area {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 600px) {
  .sec-theater .area{
    margin: 0px auto 0;
  }
}
/******************************
  tbl
******************************/
.tblbox table{
  border: 1px solid #fff;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
}
.tblbox th,
.tblbox td{
  padding: 5px;
  vertical-align: middle;
  text-align: center;
}
.tblbox tbody th,
.tblbox tbody td{
  border-top: 1px solid #fff;
}
@media only screen and (max-width: 1180px) {
    
}
@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 820px) {
    
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 767px) {
  .tblbox th,
  .tblbox td{
    font-size: 14px;
  }
}

/******************************
  footer
******************************/

/* footer_img_area */
.footer_img_area{
  position: relative;
}
.footer_img_area .footer_logo{
    margin: 0 auto;
    padding-top: 15vw;
    width: 50%;
}
.footer_img_area .footer_logo a:hover{
  opacity: 0.7;
}
.footer_img_area .footer_credits{
  margin: 0 auto;
  margin-top: 0px;
  width: 60%;
}
.footer_img_area .footer_imgitem{
  margin: 10px auto 7vw;
  width: 40%;
}


@media screen and (max-width: 767px) {
.footer_img_area .footer_logo{
    width: 70%;
}
.footer_img_area .footer_credits{
    width: 75%;
}
.footer_img_area .footer_imgitem{
    width: 55%;
    margin: 10px auto 20vw;
}
}
/******************************
  trailer BG
******************************/
.bg_trailer_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_trailer_img.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 0;
}
@media screen and (max-width: 820px) {
.bg_trailer_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_trailer_img_sp.webp);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 0;
}
}

/******************************
  introduction BG
******************************/
.bg_introduction_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_introduction_img.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 0;
}
@media screen and (max-width: 820px) {
.bg_introduction_img {
  width: 100%;
  height: auto;
  background-image: url(../images/common/popeye_bg_introduction_img_sp.webp);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 0;
}
}

.introduction_imgarea01{
  width: 75%;
  margin: 0px auto 22vw;
}
@media screen and (max-width: 1180px) {
.introduction_imgarea01{
  width: 85%;
  margin: 0px auto 27vw;
}
}
@media screen and (max-width: 1024px) {
.introduction_imgarea01{
  width: 90%;
  margin: 0px auto 33vw;
}
}

@media screen and (max-width: 820px) {
.introduction_imgarea01{
  width: 90%;
  margin: 0px auto 23vw;
}
}
@media screen and (max-width: 600px) {
.introduction_imgarea01{
width: 100%;
margin: 0px auto 35vw;
}
}

.introduction_imgarea02{
  display: none;
}
@media screen and (max-width: 820px) {
.introduction_imgarea02{
  display: block;
  width: 60%;
  margin: 40px auto 0px;
}
}
@media screen and (max-width: 600px) {
.introduction_imgarea02{
width: 75%;
margin: 0px auto 0px;
}
}



.introduction_textarea{
  width: min(900px, 90%);
  margin: 10px auto 30px;
}
.introduction_textarea p{
  font-size: 16px;
  color: #fff;
}
@media screen and (max-width: 820px) {
.introduction_textarea{
  width: 80%;
  margin: 10px auto 20px;
}
.introduction_textarea p{
  margin-bottom: 40px;
}
}
@media screen and (max-width: 767px) {
.introduction_textarea p{
 font-size: 14px;
}
}


.story_textarea{
  width: min(900px, 90%);
  margin: 10px auto 20px;
}
.story_textarea p{
  font-size: 16px;
  color: #fff;
}
@media screen and (max-width: 820px) {
.story_textarea {
  width: 80%;
  margin: 10px auto 20px;
}
.story_textarea  p{
  margin-bottom: 40px;
}
}
@media screen and (max-width: 767px) {
.story_textarea p{
 font-size: 14px;
}
}


.staff_textarea{
  width: min(900px, 90%);
  margin: 10px auto 20px;
}
.staff_textarea p{
  font-size: 16px;
  color: #fff;
}
.staff_textarea h3{
  font-size: 22px;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
}
.staff_textarea h3 span{
  color: #EC0310;
}

@media screen and (max-width: 820px) {
.staff_textarea {
  width: 80%;
  margin: 10px auto 20px;
}
.staff_textarea  p{
  margin-bottom: 40px;
}
}
@media screen and (max-width: 767px) {
.staff_textarea h3{
    font-size: 18px;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 15px;
}
.staff_textarea  p{
 font-size: 14px;
}
}

/******************************
  youtube
******************************/
.video-tab-wrap {
width: 70%;
max-width: 980px;
margin: 0 auto;
padding: 20px 30px 50px;
color: #fff;
box-sizing: border-box;
}
@media screen and (max-width: 1180px) {
.video-tab-wrap {
width: calc(100% - 400px);
}
}
@media screen and (max-width: 1024px) {
.video-tab-wrap {
width: calc(100% - 300px);
}
}
@media screen and (max-width: 820px) {
.video-tab-wrap {
  width: 70%;
  padding: 0px 0px 0px;
}
}
@media screen and (max-width: 600px) {
.video-tab-wrap {
  width: 80%;
  padding: 0px 0px 0px;
}
}

.tab-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
  margin: 15px auto 0px;
}
.tab-menu li{
  background: #A0A0A0;
  text-align: center;
  padding: 5px 0;
}
.tab-menu li p{
  color: #7A0000;
  font-size: 16px;
}
@media screen and (max-width: 820px) {
.tab-menu {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px auto 0px;
}
}
/* カレント */
/* .tab-menu .tab.active {
  filter: invert(100%);
} */
.tab-menu li.active{
  background: #7A0000;
}
.tab-menu li.active p{
  color: #fff;
}
/* カレント END*/

.mov{
  position: relative;
}

/* 過激版予告ボタン */
.mov-bomb-link{
  position: absolute;
  width: 250px;
  aspect-ratio: 3 / 2;
  right: -200px;
  bottom: -80px;
  z-index: 5;

  background-image: url(../images/common/popeye_trailer_bomb.webp);
  background-repeat: no-repeat;
  background-size: cover;

  display: block;
}
@media screen and (max-width: 1024px) {
.mov-bomb-link{
    width: 200px;
    right: -170px;
    bottom: -80px;
}
}
@media screen and (max-width: 820px) {
.mov-bomb-link{
    display: none;
}
}

.popeye_trailer_bomb_spstyle{
  display: none;
}
@media screen and (max-width: 820px) {
.popeye_trailer_bomb_spstyle{
display: block;
text-align: center;
}
.popeye_trailer_bomb_spstyle img{
  width: 250px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  margin: 0 auto;
}
}

@media screen and (max-width: 600px) {
.popeye_trailer_bomb_spstyle img{
  width: 200px;
}
}

.tab-menu .tab {
  cursor: pointer;
}
.tab-menu img {
  width: 100%;
  height: auto;
  display: block;
}

/* 動画のサイズを調整 */
.mov iframe {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.mov iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: none;
}

/* 調整 */
.cast_bg_rela{
  width: 100%;
  position: relative;
}


/*****************************
 ruby
*****************************/
ruby{
  position: relative;
}

rt{
  font-size: 0.42em;
  letter-spacing: 0.12em;
  font-weight: 700;
  /* color: #c9a063; */
}

/*****************************
 comments
*****************************/

.comments_textarea{
  width: min(900px, 90%);
  margin: 10px auto 20px;
}

.comments_flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 30px;
}
@media screen and (max-width: 820px) {
.comments_textarea{
  width: min(500px, 90%);
  margin: 10px auto 20px;
}
.comments_flex {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 35px 30px;
}
}

.commenta_box{
  border: 4px solid #F9FF00;
  padding: 6% 10% 3%;
  border-radius: 30px;
  background: rgba(0,0,0,0.4);
}
@media screen and (max-width: 820px) {
.commenta_box{
  border: 4px solid #F9FF00;
  padding: 6% 6% 3%;
  border-radius: 20px;
}
}

.commenta_box .text{
  font-size: 14px;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.6;
}
.commenta_box .name{
  font-size: 24px;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 820px) {
.commenta_box .name{
  font-size: 20px;
}
}

.commenta_box .name ruby{
  ruby-align: center;
  ruby-position: over;
}

.commenta_box .name rt{
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 3px;
}

/*****************************
theater
*****************************/
.theater_section{
  padding: 4vw 0 4vw;
}
@media screen and (max-width: 820px) {
.theater_section{
    padding: 15vw 0 15vw;
}
}