@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700;800&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');



body{
font-size:16px;
line-height:1.6;
font-family:'Zen Kaku Gothic New', sans-serif,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo; margin:0;
padding:0;
color:#000;
background:#fff;
}


html,body {
  height: 100vh;
}


a {
  text-decoration: none;
  color: #BF2631; transition: all 300ms 0s ease;
}

a:hover{position:relative;
top:1px;
}



.pc{display: block;}
.smp{display: none;}

@media (max-width: 480px){
.pc{display: none;}
.smp{display: block;}
    body{font-size:14px;}
}

section,article{margin:0;　padding:0; box-sizing: border-box;}
h1,h2,h3,h4,h5{margin:0; padding:0;}


header{padding:0; margin:0; box-sizing: border-box;}

#top, #iteminfo{background:url(../images/bg_ptn_ill.png), #FE7F84; margin: 0;}

#top h1 img{width:100%; height:auto; max-width:1333px; display: block; margin:0 auto;}

#top .main_mb{width:calc(100% - 28px); margin: 0 auto; overflow: hidden;}
#top .main_mb img{height:auto; display: block; padding:0 0 12px 0;}
#top .main_mb .main_mb_a{width:78%;}
#top .main_mb .main_mb_b{width:68%;}
#top .main_mb .main_mb_c{width:96%;}
#top .main_mb .main_mb_d{width:80%;}
#top .main_mb .main_mb_e{width:65%;}
#top .main_mb .main_mb_f{width:75%;}
#top .main_mb img:nth-child(even){margin-right:0; margin-left: auto;}

p{margin: 1em;}

h2 img{display: block; height:52px; width:auto; border-bottom:solid 3px #FE545C; padding:0 20px; margin:1em auto;}
h3{border-radius: 12px; background: #0078D6; padding:8px 12px 0 12px; margin:1em auto; text-align: center; box-sizing: border-box;}
h3 img{display: inline-block; height:28px; width:auto;}


#play, #trial, #movie, #news{width:calc(100% - 2em); margin:3em auto;}

@media (min-width: 480px){
#play, #trial, #news{max-width:860px;}
}

#news>div{margin:3em auto; padding:1em; background:#fff; border-radius: 18px; border:solid 2px #FE7F84;}
#news>div a{background: #e7ff00; padding:2px 5px;}
#news>div i{margin-right:10px;}

.playimg{width:100%; max-width:320px; height:auto; display: block; margin:10px auto;}

@media (min-width: 480px){
    .columns{display: flex; justify-content: space-between;
     align-items: flex-start;}
    .half{width:50%; max-width:400px;}
    .space{margin-top:2em;}
}

#iteminfo{padding:1em; margin:3em 0;}

#movie{overflow: hidden;}

#movie h2 img{border-bottom :none; width:90%; max-width:760px; height:auto; margin:auto;}
#movie h4 img{display: block; margin:1em auto; height:auto; width:160px;}
#movie h5{font-size:1em; text-align: center}

#movie .castlist{display: flex; align-items: flex-start; justify-content: center; margin: 0 auto 3em auto; width:100%; max-width:600px;} 
#movie .castlist a{display: block; width:30%; padding:1em .5em; text-align: center;} 
#movie .castlist a img{width:90%; height:90%; max-width:160px; max-height:160px; border-radius: 50%; margin:auto;}
#movie .castlist a:hover{background:#e7ff00; border-radius: 12px;}

@media (max-width: 480px){
    #movie h5{font-size:0.8em;}
    }


.playmovie {
  width: 100%; max-width:750px;
    margin:1em auto;
  aspect-ratio: 16 / 9;
}
.playmovie iframe {
  width: 100%;
  height: 100%;
}


#trial{display: none;}


#iteminfo{}

#iteminfo>div{max-width:860px; margin:1em auto; padding:1em; background:#fff; border-radius: 18px; border:solid 2px #FE7F84;}
    
.items img{display: block; width:90%; max-width:240px; height:auto; margin:10px auto;}

.buylink{font-weight: 700; background:#e7ff00; padding:12px; text-align: center; border-radius: 12px; display: block; margin:1em; font-size:1.2em; color:#000;
  box-shadow: 0px 10px 7px -7px rgba(0, 0, 0, 0.3);
}



.logo_jjg{display: block; width:60px; height:auto; margin:.5em auto;}

@media (min-width: 480px){
    .items{display: flex; 
     justify-content:center;
     align-items:center}
    .items img{margin:10px 20px;}
    .items img.item2{max-width:300px;}
}


.copyright{text-align: center; font-size:12px; margin-top:3em;}

/*　footer　*/

footer {
color:#000;
margin-top:3vw;
padding: 20px 0;
background:url(../images/bg_ptn_ill.png), #FE7F84;
}

footer .footer__copy {
    text-align: center;
    font-size: 12px;
}

footer .footer_link {
    margin: 10px 0;
}

footer .footer_link ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: -10px;
}

footer .footer_link ul li {
    list-style: none;
}

footer .footer_link ul li:not(:first-child)::before {
    content: "｜";
}



.share-button{display: flex;
    justify-content: center;
    margin:2vw auto;
    background: transparent;
}

.caption{font-size:12px; text-align: center;}


/*page-top リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(233 79 83 / 0.8);
  opacity: .8;
  width: 50px;
  height: 50px;
  border: none;
  color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: rgb(254 84 92 / 1);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 999;
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}




/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-overlay__line {
  position: absolute;
  left: 11px;
  width: 28px;
  height: 3px;
  background-color: #333;
  transition: all .6s;
}

.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #fff;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(254, 127, 132, 0.95);
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }

.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: color .3s;
}

.nav-overlay__link:hover {
  color: #BF2631;
}