@charset "utf-8";
@font-face{
  font-family:'Noto Sans JP';
  font-style:normal;
  font-weight:100;
  font-display:swap;
  src:url('../fonts/NotoSansCJKjp-Thin.otf')
}
@font-face{
  font-family:'Noto Sans JP';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/NotoSansCJKjp-DemiLight.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:400;-webkit-text-size-adjust:100%;}
footer,header,main,section{display:block;}
ul{list-style:none;}
a{margin:0;padding:0;vertical-align:bottom;background:transparent;text-decoration:none;}
.clearfix:after{clear:both;display:block;content:'';}
/* header */
#header-wrapper{
  width:100%;
  min-width:980px;
  height:500px;
  padding:0 20px;
  background:url("../images/header_bg.jpg") no-repeat center top;
  box-sizing:border-box;
}
header{
  position:relative;
  width:940px;
  height:500px;
  margin:0 auto;
}
header h1{
  position:absolute;
  top:16px;
  right:0;
  width:448px;
  height:335px;
}
header div{
  position:absolute;
  right:5px;
  bottom:35px;
  width:335px;
  height:118px;
}
header img
{
  width:100%;
  height:auto;
}
/* nav */
nav{
  width:100%;
  height:46px;
  background:url(../images/bg_nav.jpg) repeat 0 0;
}
nav ul{
  display:flex;
  justify-content:center;
}
nav li{
  position:relative;
  height:46px;
}
nav li.news{width:94px;}
nav li.about{width:106px;}
nav li.product{width:124px;}
nav li.character{width:142px;}
nav li.comment{width:133px;}
nav li.shop{width:92px;}
nav li.comics{width:107px;}
nav li:not(:last-of-type){
  padding-right:17px;
}
nav li:not(:last-of-type):after{
  position:absolute;
  top:0;
  right:0;
  display:block;
  width:17px;
  height:46px;
  background:url(../images/nav0.png) no-repeat 0 0;
  content:'';
}
nav a{
  display:block;
  width:100%;
  height:46px;
  transition:.5s;
}
nav a:hover{
  opacity:.65;
}
/* footer */
footer{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-width:980px;
  height:70px;
  padding:0 20px;
  text-align:center;
  background:url(../images/bg_nav.jpg) repeat 0 0;
  box-sizing:border-box;
}
/* 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{
  min-width:980px;
  box-sizing:border-box;
}
main>div>section{
  margin:0 auto;
}
section>h2{
  text-align:center;
}
/* news */
#news{
  background:url(../images/bg_news.jpg) repeat 0 0;
}
#news section{
  width:560px;
  padding:80px 0 100px;
}
#news ul{
  margin-top:65px;
}
#news li{
  padding:2px 0 4px;
  border-bottom:1px solid #000;
}
#news li+li{
  margin-top:20px;
}
#news dt,
#news dd{
  font-size:1.6rem;
  line-height:20px;
}
#news dt{
  float:left;
  width:100px;
  font-weight:600;
}
#news dd{
  padding-left:100px;
}
#news #twitter{
  width:560px;
  height:400px;
  margin-top:70px;
  border-radius:10px;
  border:1px solid #ccc;
  background:#fff;
  box-sizing:border-box;
  overflow:hidden;
}
/* about */
#about{
  background:url(../images/bg_about.jpg) repeat 0 0;
}
#about section{
  width:820px;
  padding:83px 0 93px;
}
#about p{
  margin-top:62px;
  font-size:1.8rem;
  line-height:32px;
}
/* product */
#product{
  background:url(../images/bg_product.jpg) repeat 0 0;
}
#product>section{
  width:820px;
  padding:85px 0 100px;
}
#product .product-details{
  display:flex;
  justify-content:space-between;
  margin-top:70px;
}
#product .product-details+.product-details{
  margin-top:50px;
}
#product .product-details dl{
  font-size:1.6rem;
  line-height:1.5;
}
#product .product-details dt{
  float:left;
  padding:7px 0 9px;
  font-weight:600;
}
#product .product-details dd{
  padding:7px 0 9px;
  border-bottom:1px solid #000;
}
#product .product-details .thumbnail{
  width:280px;
}
#product .product-details .thumbnail img{
  width:100%;
  height:auto;
}
#product .product-details .details{
  width:500px;
}
#product .product-details .details h3{
  font-size:3.2rem;
  font-weight:400;
}
#product .product-details .details h3 span{
  display:block;
  padding:2px 0 6px;
  font-size:1.6rem;
}
#product .product-details .details h3 br{
  display:none;
}
#product .product-details .details dl{
  margin-top:28px;
}
#product .product-details .details dt{
  width:68px;
}
#product .product-details .specs{
  width:390px;
}
#product .product-details .specs h4{
  position:relative;
  display:inline-block;
  margin-left:30px;
  padding:6px 0 8px;
  font-size:1.6rem;
  color:#fff;
  font-weight:400;
  background:#000;
}
#product .product-details .specs h4:before{
  position:absolute;
  top:0;
  left:-30px;
  display:block;
  width:30px;
  height:30px;
  background:url(../svg/bar_left.svg) no-repeat 0 0;
  content:'';
}
#product .product-details .specs h4:after{
  position:absolute;
  top:0;
  right:-30px;
  display:block;
  width:30px;
  height:30px;
  background:url(../svg/bar_right.svg) no-repeat 0 0;
  content:'';
}
#product .product-details .specs dl{
  margin-top:13px;
}
#product .product-details .specs dt{
  width:56px;
}
#product .product-details .specs div{
  padding:7px 0 8px;
  font-size:1.6rem;
  line-height:1.5;
  border-bottom:1px solid #000;
}
#product .product-details .specs div:after{clear:both;display:block;content:'';}
#product .product-details .specs div img{
  float:right;
  padding:1px 0 0 10px;
}
/* character */
#character{
  background:url(../images/bg_character.jpg) repeat top center;
}
#character section{
  width:960px;
  padding:85px 0 90px;
}
#character ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:60px;
}
#character li{
  position:relative;
  width:300px;
  height:510px;
  padding:0 15px;
  background:url(../images/character_bg.png) no-repeat top center;
}
#character li:nth-of-type(3){
  padding-left:0;
  background-position:top left;
}
#character li:nth-of-type(5){
  padding-right:0;
  background-position:top right;
}
#character li:nth-of-type(n+3){
  margin-top:60px;
}
#character li:before{
  position:absolute;
  top:-25px;
  left:50%;
  display:block;
  width:200px;
  height:59px;
  background:url(../images/character_tape.png) no-repeat 0 0;
  transform:translateX(-50%);
  content:'';
}
#character dl{
  width:280px;
  margin:0 10px;
  padding:40px 30px 0;
  box-sizing:border-box;
}
#character dt{
  width:220px;
  height:220px;
}
#character dd{
  padding-top:13px;
}
#character h3{
  font-size:1.8rem;
  line-height:22px;
  text-align:center;
}
#character h3 span{
  font-size:1.4rem;
}
#character p{
  margin-top:12px;
  font-size:1.5rem;
  line-height:24px;
}
/* comment */
#comment{
  background:url(../images/bg_comment.jpg) repeat top center;
}
#comment section{
  width:940px;
  padding:85px 0 90px;
}
#comment ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:70px;
}
#comment li{
  width:280px;
  padding:0 25px;
}
#comment li:nth-of-type(3){
  padding-left:0;
  background-position:top left;
}
#comment li:nth-of-type(5){
  padding-right:0;
  background-position:top right;
}
#comment li:nth-of-type(n+3){
  margin-top:70px;
}
#comment dl{
  position:relative;
  width:280px;
  height:100%;
  padding:30px 30px 36px;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.3);
  box-sizing:border-box;
}
#comment dl:before{
  position:absolute;
  top:-39px;
  left:50%;
  display:block;
  width:62px;
  height:69px;
  background:url(../images/comment_tape.png) no-repeat 0 0;
  transform:translateX(-50%);
  content:'';
}
#comment dt{
  width:220px;
  height:220px;
}
#comment dd{
  padding-top:13px;
}
#comment h3{
  font-size:1.8rem;
  line-height:22px;
  text-align:center;
}
#comment h3 span{
  font-size:1.4rem;
}
#comment p{
  margin-top:12px;
  font-size:1.4rem;
  line-height:22px;
}
/* shop */
#shop{
  background:url(../images/bg_shop.jpg) repeat top center;
}
#shop section{
  width:940px;
  padding:85px 0 100px;
}
#shop .special{
  position:relative;
  width:740px;
  margin:70px auto 0;
  padding:48px 40px 40px;
  background:url(../images/bg_animate.jpg) repeat top center;
  box-sizing:border-box;
  box-shadow:0 1px 5px rgba(0,0,0,.3);
}

#shop .special:before{
  position:absolute;
  top:-29px;
  left:50%;
  display:block;
  width:196px;
  height:59px;
  background:url(../images/animate_tape.png) no-repeat 0 0;
  opacity:.7;
  transform:translateX(-50%);
  content:'';
}
#shop .special h3{
  font-size:2rem;
  text-align:center;
}
#shop .special>p{
  width:400px;
  margin:23px auto 0;
  font-size:1.6rem;
  line-height:26px;
  text-align:center;
}
#shop .special a.btn{
  position:relative;
  display:block;
  width:280px;
  margin:26px auto 0;
  padding:15px 0 15px 20px;
  font-size:1.8rem;
  color:#fff;
  font-weight:400;
  text-decoration:none;
  border-radius:5px;
  background:#e83416;
  box-sizing:border-box;
  transition:.5s;
}
#shop .special a.btn: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.btn:hover{
  background:#ba2a12;
}
#shop #animate{
  position:relative;
  display:flex;
  justify-content:space-between;
  width:660px;
  margin-top:40px;
  padding-top:40px;
  border-top:1px solid #000;
}
#shop #animate .thumbnail{
  width:200px;
  height:200px;
}
#shop #animate .details{
  width:420px;
}
#shop #animate h4{
  font-size:1.8rem;
}
#shop #animate p{
  margin-top:7px;
  font-size:1.5rem;
  line-height:24px;
}
#shop #animate dl{
  margin-top:25px;
}
#shop #animate dt{
  font-size:1.6rem;
  font-weight:600;
}
#shop #animate dt:before{
  content:'\FF1C';
}
#shop #animate dt:after{
  content:'\FF1E';
}
#shop #animate dd{
  margin-top:8px;
}
#shop #animate dd p{
  position:relative;
  padding-left:1em;
}
#shop #animate dd p:before{
  position:absolute;
  top:0;
  left:0;
}
#shop #animate .item1 p:before{
  content:'\2460';
}
#shop #animate .item2 p:before{
  content:'\2461';
}
#shop #animate dd+dd{
  margin-top:25px;
}
#shop #animate ul{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
}
#shop #animate a.btn{
  width:200px;
  margin:0;
  padding:11px 0 12px 15px;
  font-size:1.6rem;
  line-height:1;
}
#shop #animate a.btn:after{
  right:11px;
  width:6px;
  height:6px;
}
/* comics */
#comics{
  background:url(../images/bg_comics.jpg) repeat top center;
}
#comics>section{
  width:820px;
  padding:86px 0 100px;
}
#comics .product-details{
  display:flex;
  justify-content:space-between;
  margin-top:71px;
}
#comics .product-details .thumbnail{
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  width:330px;
}
#comics .product-details .thumbnail li{
  width:160px;
}
#comics .product-details .thumbnail li:nth-of-type(odd){
  margin-right:10px;
}
#comics .product-details .thumbnail li:nth-of-type(-n+2){
  padding-bottom:20px;
}
#comics .product-details .thumbnail a{
  position:relative;
  display:block;
  margin-top:6px;
  padding:6px 0 8px 10px;
  font-size:1.2rem;
  color:#fff;
  font-weight:400;
  text-decoration:none;
  border-radius:3px;
  background:#e83416;
  transition:.5s;
}
#comics .product-details .thumbnail a:after{
  position:absolute;
  top:50%;
  right:8px;
  display:block;
  width:5px;
  height:5px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  transform:translateY(-50%) rotate(45deg);
  content:'';
}
#comics .product-details .thumbnail a:hover{
  background:#ba2a12;
}
#comics .product-details .details{
  width:450px;
}
#comics .product-details .details h3{
  font-size:3.2rem;
  font-weight:400;
}
#comics .product-details .details h3 span:first-child{
  display:block;
  padding:2px 0 6px;
  font-size:1.6rem;
}
#comics .product-details .details h3 span:last-child{
  display:inline-block;
  margin-left:5px;
  font-size:2.4rem;
}
#comics .product-details .details h3 br{
  display:none;
}
#comics .product-details dl{
  margin-top:28px;
  font-size:1.6rem;
  line-height:1.5;
}
#comics .product-details dt{
  float:left;
  width:125px;
  padding:7px 0 9px;
  font-weight:600;
}
#comics .product-details dd{
  padding:7px 0 9px;
  border-bottom:1px solid #000;
}
#comics .product-details dd:last-of-type{
  padding:18px 0 21px;
}
#comics .product-details p{
  padding-top:25px;
  font-size:1.6rem;
  line-height:1.5;
}