
.special{ background-image: url(../images/comicsfair8/bg_ptn.png);
    background-image: image-set(url(../images/comicsfair8/bg_ptn.png) 1x, url(../images/comicsfair8/bg_ptn@2x.png) 2x);
padding:0;}


.special #animate, .special #shopanimate{background-image: url(../images/comicsfair8/bg_ptn_a.png);
    background-image: image-set(url(../images/comicsfair8/bg_ptn_a.png) 1x, url(../images/comicsfair8/bg_ptn_a@2x.png) 2x);
padding:0 1em 2em 1em;}


.comicsfair8 article{margin-bottom:2em;}

h2 img{display: block; width:100%; height:auto; max-width:480px; margin:1em auto 0 auto;}

#ippan, #comics, #comics_sample{
    padding:0 1em;
}

.attention{font-size:12px; width:86%; margin:1em auto;}

h3 img{display:block; margin:0 auto; width:calc(100% - 2em); height:auto; position: relative; top:24px;}
#ippan h3 img{max-width:225px}
#animate h3 img, #comics h3 img,#comics_sample h3 img{max-width:360px;}
#shopippan h3 img{max-width:274px;}
#shopanimate h3 img{max-width:421px}

.bnefit , .benefit_anmt, .target_comics{display:block; margin:0 auto; width:100%; height:auto; max-width:446px;}

.anmt_theme{display:block; margin:1em auto; width:100%; height:auto; max-width:420px;}



@media screen and (min-width: 480px) {
    h3 img{top:40px;}
    .bnefit, .benefit_anmt{max-width:760px;}
    .target_comics{max-width: 490px}    
}

#ippan .lineup{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; align-content:center; width:100%; max-width:840px; margin:1em auto;}

#ippan .lineup img{width:160px; height:auto; display: block; padding:.5em; 0}

@media screen and (min-width: 480px) {
    #ippan .lineup img{width:200px;}
}


.comicsfair8 a.shoplist img, .comicsfair8 a.comicslist img,  a.fairlink img{display: block; width: 90%; max-width:420px; height:auto; margin:1em auto;}

#animate .lineup{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content:center; width:100%; max-width:840px; margin:auto;}
#animate .lineup img{width:90%; max-width:340px; height:auto; display: block; padding:10px}

.seal_info{width:100%; max-width:840px; margin:1em auto;}

.comics_seal, .arrow_seal , .seal{max-width: 480px; display:block; margin:1em auto; width: 98%; height:auto;}

.arrow_seal{max-width: 308px;}
.seal{width:240px;}

@media screen and (min-width: 480px) {
    
    .seal_info{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content:center; }
    .seal{margin:1em;}
    .arrow_seal{max-width: 340px;}
    
}



.comicsfair8 .comicslineup{width:100%; max-width:840px; margin:2em auto;}

.comicsfair8 .comicslineup > div{width: 100%;}

.comicsfair8 .newcomic_thums{display: block; width:280px; height:auto; margin:0 1em 1em 0;}
.comicsfair8 .comicslineup h5{font-size:1.4em; color:#801b31; margin:0; padding:0;}
.comicsfair8 .comicslineup h6{font-size:1.2em; color:#801b31; margin:0; padding:6px; margin:10px 0; background: #fff; border-radius: 6px;}
.comicsfair8 .comicslineup h6 span{font-size:0.8em;}
.comicsfair8 .comicslineup a.btn_sample{display: block; width:240px; height:auto; margin-bottom:2em;} 


@media screen and (min-width: 600px) {
    
.comicsfair8 .comicslineup > div{display: flex; align-items:center; margin:10px auto; justify-content: flex-start; max-width:600px; }

    
}


/*参加店*/



.shoplist ul, .shoplist li{margin:0; padding:10px; list-style: none;}
.shoplist li{display: inline-block; margin:.5em; padding:2px 12px; background: #fff;}


/* 左右に横線 */
.shoplist h4 {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
  color:#801b31;
    margin:0 2em;
}
.shoplist h4::before,
.shoplist h4::after {
  background-color: #801b31; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}

.shoplist h4.animate {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
  color:#801b31;
}
.shoplist h4.animate::before,
.shoplist h4.animate::after {
  background-color: #801b31; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}

.shoplist h5{ font-size:1em; color:#fff; background:#801b31; padding:2px 1em; margin:1em 0;}


#shopippan{margin-bottom:4em;}
.shoplist h3{width:96%; margin:0 auto 2em auto;}
h3#shopippan img{max-width:240px;}
h3#shopanimate img{max-width:300px;}

.link-in{color:#1b806a; border:solid 1px #1b806a; border-radius: 8px;}
.link-in:hover{color:#fff; background:#1b806a; border:solid 1px #1b806a;}
.animate .link-in{color:#1b806a; border:solid 1px #1b806a;}
.animate .link-in:hover{color:#fff; background:#1b806a; border:solid 1px #1b806a;}

