@charset "utf-8";
@font-face{
  font-family:'Noto Sans JP';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/NotoSansCJKjp-Regular.otf')
}
@font-face{
  font-family:'Noto Sans JP';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/NotoSansCJKjp-Bold.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;min-width:980px;line-height:1;color:#000;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 */
header{
  width:100%;
  height:500px;
  background:url("../images/background.jpg") center top;
}
header h1{
  width:980px;
  height:500px;
  margin:0 auto;
}
header h1 img{
  width:100%;
  height:auto;
}
/* footer */
footer{
  width:980px;
  margin:0 auto;
  padding:0 20px;
  text-align:center;
  box-sizing:border-box;
}
footer p{
  padding:50px 0 10px;
  font-size:1.4rem;
}
/* nav */
nav{
  background:#aaa95a;
}
nav ul{
  display:flex;
  width:980px;
  height:43px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
  justify-content:center;
}
nav li{
  position:relative;
  padding-left:1px;
}
nav li:last-of-type{
  padding-right:1px;
}
nav li:before,
nav li:last-of-type:after{
  position:absolute;
  top:11px;
  display:block;
  width:1px;
  height:21px;
  background:#cccb9c;
  content:'';
}
nav li:before{
  left:0;
}
nav li:last-of-type:after{
  right:0;
}
nav a{
  display:block;
  text-decoration:none;
  background:#000;
}
nav a img{
  width:100%;
  height:auto;
  transition:.5s;
}
nav a:hover img{
  opacity:.9;
}
/* pagetop */
#page-top{
  position:fixed;
  right:12px;
  bottom:12px;
  width:50px;
  height:50px;
  border-radius:50%;
  overflow:hidden;
}
#page-top a{
  display:block;
  background:rgba(0,0,0,.6);
  transition:.5s;
}
#page-top a:hover{
  background:rgba(0,0,0,1);
}
/* common */
main>div{
  padding-top:74px;
}
h2{
  position:relative;
  margin:0 auto;
  padding-bottom:21px;
  font-size:4.4rem;
  font-family:'Trebuchet MS';
  font-weight:bold;
  text-align:center;
}
h2 span{
  position:absolute;
  bottom:0;
  left:50%;
  display:inline-block;
  padding:0 28px;
  font-size:1.4rem;
  line-height:1;
  font-family:'Noto Sans JP';
  font-weight:400;
  transform:translateX(-50%);
}
h2 span:before,
h2 span:after{
  position:absolute;
  top:7px;
  display:block;
  width:20px;
  height:1px;
  background:#000;
  content:'';
}
h2 span:before{
  left:0;
}
h2 span:after{
  right:0;
}
/* news */
#news>section{
  width:980px;
  margin:0 auto;
  text-align:center;
  padding:0 20px 100px;
  box-sizing:border-box;
}
#news ul{
  display:inline-block;
  max-width:600px;
  margin-top:30px;
}
#news li{
  padding:24px 3px 4px;
  text-align:left;
  border-bottom:1px solid #000;
}
#news dl{
  display:inline-flex;
  font-size:1.6rem;
}
#news dt{
  padding-right:16px;
  font-weight:600;
}
#twitter{
  width:560px;
  margin:70px auto 0;
  border-radius:8px;
  border:1px solid #ccc;
  box-sizing:border-box;
  overflow:hidden;
}
/* cd */
#cd{
  background:repeating-linear-gradient(-45deg, #a2ff1e 0, #a2ff1e 50px, #beff62 50px, #beff62 100px);
}
#cd>section{
  width:980px;
  margin:0 auto;
  padding:0 20px 80px;
  box-sizing:border-box;
}
#cd .frame{
  width:900px;
  margin:45px auto 0;
  padding:50px 80px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 0 10px 4px rgba(0,0,0,.1);
  box-sizing:border-box;
}
#cd .product-details{
  display:flex;
  justify-content:space-between;
}
#cd .product-details+.product-details{
  margin-top:50px;
}
#cd .product-details dl{
  font-size:1.6rem;
  line-height:1.5;
}
#cd .product-details dt{
  float:left;
  padding:7px 16px 9px 0;
  font-weight:600;
}
#cd .product-details dd{
  padding:7px 0 9px;
  border-bottom:1px dotted #000;
}
#cd .product-details .thumbnail{
  width:260px;
  height:280px;
  position:relative;
  overflow:hidden;
}
#cd .product-details .thumbnail img{
  width:520px;
  height:auto;
  position:absolute;
}
#cd .product-details .thumbnail img:hover, #cd .product-details .thumbnail img.slide {
  animation: slide 2s ease 0s 1 alternate forwards running;
}
#cd .product-details p.jacket span {
  text-decoration:underline;
  cursor:pointer;
}
#cd .product-details .thumbnail p {
  display:none;
  margin-top:266px;
  text-align:center;
}
#cd .product-details .thumbnail p.cap {
  display:block;
  animation: fadein 2s ease 0s 1 alternate forwards running;
}
@keyframes slide {
    0% {margin-left: 0}
    100% {margin-left: -260px;}
}
@keyframes fadein {
    0% {opacity: 0}
    100% {opacity: 1;}
}
#cd .product-details .details{
  width:440px;
}
#cd .product-details .details h3{
  font-size:2.4rem;
}
#cd .product-details .details h3 span{
  display:block;
  padding:3px 0;
  font-size:1.4rem;
  font-weight:400;
}
#cd .product-details .details h3 br{
  display:none;
}
#cd .product-details .details dl{
  margin-top:28px;
}
#cd .product-details .specs{
  width:355px;
}
#cd .product-details .specs h4{
  display:inline-block;
  padding:5px 25px 7px;
  font-size:1.6rem;
  color:#fff;
  background:#000;
}
#cd .product-details .specs dl{
  margin-top:18px;
}
#cd .product-details .specs p{
  padding:6px 0 8px;
  font-size:1.6rem;
  line-height:1.6;
  border-bottom:1px dotted #000;
}
/* story */
#story{
  background:#fafafa;
}
#story>section{
  width:980px;
  margin:0 auto;
  padding:0 20px 96px;
  box-sizing:border-box;
}
#story .summary{
  width:720px;
  margin:73px auto 0;
}
#story .summary+.summary{
  position:relative;
  margin-top:70px;
  padding-top:75px;
}
#story .summary+.summary:before{
  position:absolute;
  top:0;
  left:50%;
  display:block;
  width:40px;
  height:1px;
  background:#000;
  transform:translateX(-50%);
  content:'';
}
#story .summary h3{
  font-size:3.2rem;
  text-align:center;
}
#story .summary h3 span:first-of-type{
  display:block;
  padding-bottom:13px;
  font-size:2.2rem;
}
#story .summary h3 span:last-of-type{
  font-weight:400;
}
#story .summary h3 br{
  display:none;
}
#story .summary p{
  margin-top:35px;
  font-size:1.6rem;
  line-height:1.6;
}
/* character */
#character{
  background:repeating-linear-gradient(45deg, #fffe00 0, #fffe00 50px, #ffff99 50px, #ffff99 100px);
}
#character>section{
  width:980px;
  margin:0 auto;
  padding:0 20px 80px;
  box-sizing:border-box;
}
#character .wrapper{
  display:flex;
  width:610px;
  margin:0 auto;
  padding-top:15px;
  justify-content:space-between;
  flex-wrap:wrap;
}
#character .frame{
  width:290px;
  margin-top:30px;
  padding:40px 25px;
  text-align:center;
  border-radius:10px;
  background:#fff;
  box-shadow:0 0 10px 4px rgba(0,0,0,.1);
  box-sizing:border-box;
}
#character .thumbnail{
  width:160px;
  height:180px;
  margin:0 auto;
}
#character h3{
  margin-top:19px;
  font-size:2.2rem;
}
#character h3 span{
  display:block;
  padding-top:5px;
  font-size:1.2rem;
  font-weight:400;
}
#character h3 br{
  display:none;
}
#character p{
  margin-top:5px;
  font-size:1.6rem;
  line-height:1.6;
}
#character p+p{
  margin-top:10px;
  text-align:left;
}
/* cast interview */
#cast-interview>section{
  width:980px;
  margin:0 auto;
  padding:0 20px 100px;
  box-sizing:border-box;
}
#cast-interview .wrapper{
  display:flex;
  width:750px;
  margin:73px auto 0;
  padding-left:75px;
  justify-content:space-between;
}
#cast-interview .special{
  width:370px;
}
#cast-interview .special h3{
  font-size:2.4rem;
}
#cast-interview .special p{
  margin:19px 0 35px;
  font-size:1.6rem;
  line-height:1.6;
}
#cast-interview .special a{
  position:relative;
  display:block;
  padding:14px 0 14px 18px;
  font-size:1.8rem;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  width:75%;
  background:rgba(54,53,55,1);
  transition:.5s;
}
#cast-interview .special a:after{
  position:absolute;
  top:50%;
  right:14px;
  display:block;
  width:8px;
  height:8px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  transform:translateY(-50%) rotate(45deg);
  content:'';
}
#cast-interview .special a:hover{
  background:rgba(54,53,55,.8);
}
#cast-interview .special a+a{
  margin-top:15px;
}
/* shop */
#shop{
  background:#fafafa;
}
#shop>section{
  width:980px;
  margin:0 auto;
  padding:0 20px 100px;
  box-sizing:border-box;
}
#shop .wrapper{
  display:flex;
  width:800px;
  margin:73px auto 0;
  justify-content:space-between;
}
#shop .special{
  width:240px;
}
#shop .special h3{
  font-size:2.4rem;
}
#shop .special p{
  margin:19px 0 35px;
  font-size:1.6rem;
  line-height:1.6;
}
#shop .special a{
  position:relative;
  display:block;
  padding:14px 0 14px 18px;
  font-size:1.8rem;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  background:rgba(54,53,55,1);
  transition:.5s;
}
#shop .special a:after{
  position:absolute;
  top:50%;
  right:14px;
  display:block;
  width:8px;
  height:8px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  transform:translateY(-50%) rotate(45deg);
  content:'';
}
#shop .special a:hover{
  background:rgba(54,53,55,.8);
}
#shop .special a+a{
  margin-top:15px;
}
/* comic */
#comic{
  background:repeating-linear-gradient(-45deg, #a2ff1e 0, #a2ff1e 50px, #beff62 50px, #beff62 100px);
}
#comic>section{
  width:980px;
  margin:0 auto;
  padding:0 20px 80px;
  box-sizing:border-box;
}
#comic .frame{
  width:900px;
  margin:45px auto 0;
  padding:50px 80px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 0 10px 4px rgba(0,0,0,.1);
  box-sizing:border-box;
}
#comic .product-details{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
#comic .product-details+.product-details{
  margin-top:50px;
  padding-top:50px;
  border-top:1px solid #000;
}
#comic .previous-work{
  width:100%;
  padding-bottom:45px;
}
#comic .previous-work .category{
  display:inline-block;
  padding:4px 20px 5px;
  font-size:1.4rem;
  color:#fff;
  background:#000;
}
#comic .previous-work .title{
  margin-top:10px;
  font-size:2.4rem;
  font-weight:600;
}
#comic .product-details .thumbnail{
  width:260px;
}
#comic .product-details .thumbnail img{
  width:100%;
  height:auto;
}
#comic .product-details .details{
  width:440px;
}
#comic .product-details .details h3{
  font-size:2.4rem;
}
#comic .product-details .details h3 span{
  display:block;
  padding:3px 0;
  font-size:1.4rem;
  font-weight:400;
}
#comic .product-details .details h3 br{
  display:none;
}
#comic .product-details.previous .details h3{
  padding-top:4px;
  font-size:2rem;
}
#comic .product-details .details dl{
  margin-top:28px;
  font-size:1.6rem;
}
#comic .product-details .details dt{
  float:left;
  padding:11px 16px 13px 0;
  font-weight:600;
}
#comic .product-details .details dd{
  padding:11px 0 13px;
  border-bottom:1px dotted #000;
}
#comic .product-details .details h4{
  font-size:1.8rem;
  margin-top:39px;
}
#comic .product-details .details p{
  margin-bottom:36px;
  font-size:1.6rem;
  line-height:1.6;
}
#comic .product-details .details h4+p{
  margin-top:12px;
}
#comic .product-details .details dl+p{
  margin-top:35px;
}
#comic .product-details .details a{
  position:relative;
  display:block;
  width:360px;
  padding:14px 0 14px 18px;
  font-size:1.8rem;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  background:rgba(54,53,55,1);
  transition:.5s;
}
#comic .product-details .details a+a{
  margin-top:15px;
}
#comic .product-details .details a:after{
  position:absolute;
  top:50%;
  right:14px;
  display:block;
  width:8px;
  height:8px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  transform:translateY(-50%) rotate(45deg);
  content:'';
}
#comic .product-details .details a:hover{
  background:rgba(54,53,55,.8);
}

/* interview-page */
#interview-page{
  min-width:780px;
}
#interview-page article{
  margin:80px 60px 120px;
}
#interview-page h1{
  font-size:24px;
  line-height:42px;
  text-align:center;
  margin-bottom:20px;
}
#interview-page figure{
  text-align:center;
}
#interview-page img{
  width:50%;
  height:auto;
}

#interview-page h2{
  margin-top:88px;
  font-size:24px;
  line-height:28px;
}
#interview-page h2+p{
  margin-top:30px;
  font-size:18px;
  line-height:32px;
}
#interview-page h3{
  margin-top:94px;
  padding-top:77px;
  font-size:24px;
  line-height:28px;
  border-top:1px solid #000;
}
#interview-page p{
  margin-top:40px;
  font-size:18px;
  line-height:1.6;
  font-weight:normal;
}
#interview-page p b{
  font-weight:bold;
}
#interview-page .interviewer{
  position:relative;
  margin-top:80px;
  padding-left:48px;
  font-weight:bold;
}
#interview-page .interviewer:before{
  position:absolute;
  top:13px;
  left:0;
  display:block;
  width:38px;
  height:1px;
  background:#000;
  content:'';
}
#interview-page h3+.interviewer{
  margin-top:74px;
}
/*
#interview-page figure{
  float:right;
  padding:40px 0 60px 50px;
}
#interview-page figcaption{
  margin-top:9px;
  font-size:16px;
  line-height:20px;
  font-weight:bold;
  text-align:center;
*/