@charset "utf-8";
@font-face{
  font-family:'Noto Sans JP';
  font-style:normal;
  font-weight:300;
  src:url('../fonts/NotoSansCJKjp-Light.otf')
}
@font-face{
  font-family:'Noto Sans JP';
  font-style:normal;
  font-weight:500;
  src:url('../fonts/NotoSansCJKjp-Medium.otf')
}
html,body,div,span,iframe,h1,h2,h3,h4,p,img,small,strong,dl,dt,dd,ul,li,table,tr,th,td,footer,header,main,nav,section{margin:0;padding:0;vertical-align:bottom;border:0;background:transparent;outline:0;}
html{font-size:10px;}
body{position:relative;line-height:1;color:#372a31;font-family:'Noto Sans JP',sans-serif;font-weight:300;-webkit-text-size-adjust:100%;}
footer,header,main,nav,section{display:block;}
ul{list-style:none;}
a{margin:0;padding:0;vertical-align:bottom;background:transparent;}
.clearfix:after{clear:both;display:block;content:'';}
header{
  position:relative;
  display:flex;
  width:100%;
  min-width:850px;
  padding:50px 25px;
  box-sizing:border-box;
}
header h1,
header h1 img{
  width:auto;
  height:17px;
  vertical-align:top;
}
#menu-button{
  position:fixed;
  top:46px;
  right:25px;
  display:none;
  width:31px;
  height:25px;
  cursor:pointer;
  z-index:1000;
}
#menu-button span{
  position:absolute;
  display:block;
  top:12px;
  left:0;
  width:31px;
  height:1px;
  background:#372a31;
}
#menu-button span:nth-of-type(1){
  transition:all .3s;
  opacity:1;
}
#menu-button span:nth-of-type(2){
  margin-top:-12px;
  animation:menu-bar02 .3s forwards;
}
#menu-button span:nth-of-type(3){
  margin-top:12px;
  animation:menu-bar03 .3s forwards;
}
#menu-button.active span:nth-of-type(1){
  opacity:0;
}
#menu-button.active span:nth-of-type(2){
  animation:active-menu-bar02 .3s forwards;
}
#menu-button.active span:nth-of-type(3){
  animation:active-menu-bar03 .3s forwards;
}
@keyframes menu-bar02{
  0%{
    background:#fff;
    transform:translateY(12px) rotate(45deg);
  }
  50%{
    transform:translateY(12px) rotate(0);
  }
  100%{
    background:#372a31;
    transform:translateY(0) rotate(0);
  }
}
@keyframes menu-bar03{
  0%{
    background:#fff;
    transform:translateY(-12px) rotate(-45deg);
  }
  50%{
    transform:translateY(-12px) rotate(0);
  }
  100%{
    background:#372a31;
    transform:translateY(0) rotate(0);
  }
}
@keyframes active-menu-bar02{
  0%{
    background:#372a31;
    transform:translateY(0) rotate(0);
  }
  50%{
    transform:translateY(12px) rotate(0);
  }
  100%{
    background:#fff;
    transform:translateY(12px) rotate(45deg);
  }
}
@keyframes active-menu-bar03{
  0%{
    background:#372a31;
    transform:translateY(0) rotate(0);
  }
  50%{
    transform:translateY(-12px) rotate(0);
  }
  100%{
    background:#fff;
    transform:translateY(-12px) rotate(-45deg);
  }
}
nav.pc{
  position:fixed;
  top:124px;
  left:0;
  display:inline-block;
  z-index:1000;
}
nav.pc li{
  padding-top:13px;
}
nav.pc a{
  display:inline-block;
  padding:6px 25px;
  font-size:1.2rem;
  color:#372a31;
  font-weight:400;
  text-decoration:none;
  background:transparent;
  transition:.5s;
}
nav.pc a:hover{
  color:#fff;
  background:#372a31;
}
nav.sp{
  position:fixed;
  top:0;
  right:0;
  display:none;
  width:320px;
  height:100vh;
  background:rgba(55,42,49,.95);
  justify-content:center;
  z-index:999;
}
nav.sp ul{
  margin-top:120px;
}
nav.sp li{
  padding:5px 0;
}
nav.sp li a{
  display:block;
  padding:8px 0;
  font-size:1.8rem;
  color:#fff;
  font-weight:100;
  text-align:center;
  text-decoration:none;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
footer{
  width:100%;
  min-width:850px;
  padding:29px 25px 30px;
  text-align:center;
  background:#372a31;
  box-sizing:border-box;
}
footer small{
  font-size:1.2rem;
  line-height:1;
  color:#fff;
}
/* main */
#main-image{
  min-width:800px;
  padding:0 200px;
}
#main-image img{
  width:100%;
  height:auto;
}
/* common */
main section{
  width:800px;
  margin:0 auto;
  padding:74px 25px 120px;
}
main section h2{
  font-size:4rem;
  color:#af8a82;
  font-weight:100;
  font-feature-settings:'palt';
  letter-spacing:10px;
  text-align:center;
}
.btn{
  position:relative;
  display:block;
  width:210px;
  padding:0 15px;
  font-size:1.8rem;
  line-height:46px;
  color:#fff;
  font-weight:400;
  text-decoration:none;
  background:#af8a82;
  transition:.5s;
}
.btn:after{
  position:absolute;
  display:block;
  top:50%;
  right:13px;
  width:8px;
  height:8px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  transform:translateY(-50%) rotate(45deg);
  content:'';
}
.btn:hover{
  opacity:.8;
}
/* #news */
#news dl{
  display:flex;
  margin-top:66px;
  justify-content:center;
}
#news dt,
#news dd{
  font-size:2rem;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#news dt{
  padding:6px 20px;
  color:#fff;
  background:#372a31;
}
#news dd{
  padding:6px 0 6px 10px;
}
#twitter{
  width:660px;
  margin:70px auto 0;
  border-radius:10px;
  border:1px solid #e7dcd9;
  box-sizing:border-box;
  overflow:hidden;
}
/* #introduction */
#introduction{
  min-width:850px;
  background:#f7f3f2;
}
#introduction section{
  padding-bottom:112px;
}
#introduction h3{
  margin-top:59px;
  font-size:2.8rem;
  line-height:40px;
  font-weight:500;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#introduction .text{
  margin-top:25px;
  font-size:1.8rem;
  line-height:34px;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#introduction .description{
  margin-top:72px;
  padding-top:51px;
  font-size:1.8rem;
  line-height:34px;
  font-weight:500;
  text-align:justify;
  font-feature-settings:'palt';
  letter-spacing:1px;
  border-top:1px solid #e7dcd9;
}
/* #cd-data */
#cd-data section{
  padding-bottom:113px;
}
#cd-data dl{
  display:flex;
  margin-top:67px;
  justify-content:center;
}
#cd-data dt{
  display:flex;
  width:240px;
  height:240px;
  background:#eee;
  align-items:center;
  justify-content:center;
  background:url('../images/cd-jacket.jpg') no-repeat top center;
  background-size:cover;

}
/*#cd-data dt:after{
  font-size:2.6rem;
  line-height:1.25;
  color:#ccc;
  text-align:center;
  letter-spacing:3px;
  white-space:pre;
  content:'NOW\aPRINTING'
}*/
#cd-data dd{
  padding-left:50px;
}
#cd-data dd h3{
  font-size:2.6rem;
  font-weight:500;
  font-feature-settings:'palt';
  letter-spacing:4px;
}
#cd-data dd h3 span{
  display:block;
  padding:3px 0 6px;
  font-size:1.6rem;
  letter-spacing:1px;
}
#cd-data dd .author{
  margin-top:32px;
  font-size:1.8rem;
  line-height:30px;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#cd-data dd .details{
  margin-top:27px;
  font-size:1.8rem;
  line-height:30px;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
/* #character */
#character{
  min-width:850px;
  background:#f7f3f2;
}
#character section{
  padding-bottom:114px;
}
#character ul{
  display:flex;
  margin-top:67px;
  justify-content:center;
}
#character li{
  width:340px;
  padding:0 50px;
  box-sizing:border-box;
}
#character dl{
  text-align:center;
}
#character dt{
  width:200px;
  height:200px;
  margin:0 auto;
  border-radius:50%;
  overflow:hidden;
}
#character dt img{
  width:100%;
  height:100%;
}
#character dd{
  width:260px;
  margin-top:22px;
  text-align:left;
}
#character dd h3{
  font-size:2rem;
  font-weight:500;
  text-align:center;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#character dd h3 rt{
  font-weight:400;
}
#character dd h4{
  margin-top:9px;
  font-size:1.6rem;
  font-weight:500;
  text-align:center;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#character dd p{
  margin-top:20px;
  font-size:1.8rem;
  line-height:28px;
  text-align:justify;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
/* #comics */
#comics dl{
  display:flex;
  margin-top:67px;
  justify-content:center;
}
#comics dt{
  width:260px;
}
#comics dt img{
  width:258px;
  height:auto;
  border:1px solid #372a31;
}
#comics dd{
  width:490px;
  margin-left:50px;
}
#comics dd h3{
  padding-top:3px;
  font-size:2.6rem;
  font-weight:500;
  font-feature-settings:'palt';
  letter-spacing:4px;
}
#comics dd .author,
#comics dd .sale{
  font-size:2rem;
  font-weight:500;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#comics dd .author{
  margin-top:39px;
}
#comics dd .sale{
  margin-top:14px;
}
#comics dd h4,
#comics dd h4+p{
  font-size:1.8rem;
  line-height:34px;
  font-weight:300;
  text-align:justify;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#comics dd h4{
  margin-top:40px;
}
#comics dd h4:before,
#comics dd h4:after{
  display:inline-block;
  content:'\2015';
}
#comics dd h4:before{
  padding-right:4px;
}
#comics dd h4:after{
  padding-left:4px;
}
#comics dd h4+p{
  margin-bottom:44px;
}
#comics dd .btn{
  width:320px;
}
#comics dd .btn:nth-of-type(2),
#comics dd .btn:nth-of-type(3){
  margin-top:12px;
}
/* #interview */
#cast-interview{
  min-width:850px;
  background:#f7f3f2;
}
#cast-interview dl{
  display:flex;
  width:500px;
  margin:66px auto 0;
  position:relative;
}
#cast-interview dt{
  width:200px;
  height:200px;
}
#cast-interview dd{
  margin-left:40px;
}
#cast-interview dd a{
  font-size:2rem;
  line-height:38px;
  color:#372a31;
  font-weight:500;
  text-decoration:none;
}
#cast-interview .btn{
  position:absolute;
  left:240px;
  top:90px;
  font-size:1.8rem;
  color:#fff;
  line-height:46px;
}
#interview-page article{
  display:block;
  margin:80px 60px 120px;
}
#interview-page h1{
  font-size:2.4rem;
}
#interview-page .interview-cast{
  width:400px;
  margin:80px auto 5px;
}
#interview-page li{
  font-size:1.6rem;
  line-height:28px;
  font-weight:500;
  text-align:center;
}
#interview-page p{
  margin-top:20px;
  font-size:1.6rem;
  line-height:2;
  text-align:justify;
}
#interview-page p b{
  font-weight:500;
}
#interview-page .interviewer{
  position:relative;
  margin-top:65px;
  padding-left:48px;
  font-weight:500;
}
#interview-page .interviewer:before{
  position:absolute;
  top:17px;
  left:0;
  display:block;
  width:38px;
  height:1px;
  background:#000;
  content:'';
}
#interview-page ul+.interviewer{
  margin-top:70px;
}
#interview-page .interview-image{
  float:right;
  width:400px;
  padding:73px 0 0 40px;
}
/* #shop */
#shop{
  min-width:850px;
  background:#fff;
}
#shop ul{
  display:flex;
  margin-top:66px;
  justify-content:center;
}
#shop li{
  position:relative;
  width:270px;
  padding-bottom:46px;
  margin-left:40px;
}
#shop li:last-child{
  margin-right:0;
}
#shop h3{
  font-size:1.8rem;
  font-weight:500;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#shop p{
  margin:18px 0 30px;
  font-size:1.4rem;
  line-height:26px;
  font-feature-settings:'palt';
  letter-spacing:1px;
}
#shop a{
  position:absolute;
  bottom:0;
  left:0;
}
@media screen and (max-width:1220px){
  #menu-button{
    display:block;
  }
  nav.pc{
    display:none;
  }
  #main-image{
    padding:0 25px;
  }
}