@charset "UTF-8";

/* =======================================================================

CSSの名前：hagakisozai.css GFPはがき素材用

/ext/hagakisozai.xhtml

--------------------------------------------------------------------------*/
#couponBox {width:950px; margin:0 auto 50px;padding:20px 50px;border:3px solid #ff7a04;background: #fffad8;text-align: center;}
#couponBox #couponTtl{font-size: 3.0em;font-weight: bold;color:#d44e26;}
#couponBox #couponBnr{background: url("../images/detail/hagakisozai_lp/coupon20260108.png")no-repeat;width:835px;height: 175px;margin: 0 auto;padding-top: 115px;}
#couponBox #couponCode{width:320px;height: 40px;margin: 0 0 0 320px;;font-size: 2.4em;font-weight: bold;text-align: center;color:#072dbb;padding: 0 0 0 0;}
#couponBox  p{font-size:1.5em;}

#jstore {clear:both;width:100%!important;margin:0 auto!important;padding:0 0 0!important;box-sizing: border-box;}
#jstore #hagakisozaiInner{background: url("../images/detail/hagakisozai_lp/bg2026.png");padding:0 0 80px;}
#jstore .red {color: #c80010;}
#jstore .small{font-size:75%;}
#jstore a:hover{text-decoration: none;}
#jstore p{font-size: 1.6em;line-height: 1.8em;color:#333;}
#jstore p+p{margin-top:5px;}

#hagakisozaiTOP {background: url("../images/detail/hagakisozai_lp/main_bg2026.png");margin: 0;}
#hagakisozaiTOP h1{width:1285px;height: 505px;margin: 0 auto; background: url("../images/detail/hagakisozai_lp/ttl_hagakisozai_nenga2026.png")no-repeat;font-size:1.8em;text-align: center;padding:360px 50px 0;box-sizing: border-box;line-height: 1.6;}

#hagakisozai h3{background: #df7648;border-radius: 10px; font-size:2.8em;font-weight: normal;color:#fff;padding:5px 0 0 30px;margin: 0 0 20px;}
#hagakisozai h4{color: #df7648;font-size:2.0em;font-weight: bold;margin: 20px 0 0 0;}
#hagakisozai .mark{color: #FFEF00;font-size:80%;}


#menuCatArea{width:1095px;margin:50px auto 0;}
#menuCatArea a:link{color:#fff;}

#menuCatArea .genre{font-size:15px!important;height: 20px;}
#menuCatArea .nengaA{background: #fb4700;}
#menuCatArea .nengaB{background: #ff7a04;}
#menuCatArea .mochuu{background: #576c70;}
#menuCatArea .nengaA:hover{background: #e74100;border:2px solid #d03b00;}
#menuCatArea .nengaB:hover{background: #f96706;border:2px solid #eb4b20;}
#menuCatArea .mochuu:hover{background: #425a5e;border:2px solid #334a4e;}
#menuCatArea .menuArw{margin: 20px 0 0!important;}

#menuCatArea ul{display: flex;margin:0 auto 70px;}
#menuCatArea li{width: 219px;height: 150px;font-size:24px;color:#fff;font-weight: bold;text-align: center;padding: 35px 0 0;box-sizing: border-box;}
#menuCatArea a:hover img{opacity: 1.0;}

#hagakisozaiBtm h2 {position: relative; display: block; padding: 20px 55px!important;width:1000px!important;margin:30px auto 30px!important;text-align: center;color:#333;font-size: 3.5em;font-weight: normal}
#hagakisozaiBtm h2:before, #hagakisozaiBtm h2:after { content: '';  position: absolute; top: 50%; display: inline-block;width: 250px; height: 1px;  background-color: #333;}
#hagakisozaiBtm h2:before { left:50px;}
#hagakisozaiBtm h2:after { right:50px;}

#hagakisozaiBtm a:hover img{opacity: 1.0;}
#hagakisozaiBtm .sozaiBox{display: block; width:1095px;border:4px solid #fff;border-radius: 10px;padding:0 15px 30px;margin: 0 auto ;background: #FFF;text-align: center;box-sizing: border-box;}

ul#tmpList {text-align: center ;width:1030px;box-sizing: border-box;margin: 20px auto 30px!important;background: #fff;padding:15px;overflow: hidden;z-index:1;}
ul#tmpList li {display: block; float: left; width:250px;margin:0 auto;padding:15px 10px 10px;background: #f2f2f2;border:1px solid #DDD;}
ul#tmpList li .imgTPL {height:200px!important;vertical-align: middle;}
ul#tmpList  li img{border: 1px solid #666;}
ul#tmpList  li img.tate {width:125px;height: auto;}
ul#tmpList  li img.yoko {width: auto;height:125px;margin-top: 40px;}
ul#tmpList  li img.test {width:185px;height:185px;border: none;}
ul#tmpList  li .imgTPL:hover{opacity: 0.5;background:url("../images/detail/kadokawa_hagaki/zoom.png")no-repeat right top;z-index: 1;}


#tmpList .btnBuy{ position: relative;margin:10px auto 10px;text-align: center;background: #434343;color:#FFF;width:190px;font-size:1.6em;font-weight: bold; padding:8px 0 4px!important;border-radius: 30px;border:2px solid #c80010;}
#tmpList a .btnMBuy span{font-size: 110%;font-weight: bold;margin:0 5px;}
#tmpList a .btnBuy{background: #c80010;}
#tmpList a:hover .btnBuy{background: #fff;color: #c80010;}

#tmpList .btnBuy:after { position: absolute; content: "\f054"; font-family: 'Font Awesome 5 Free';font-weight: 900;   right: 15px;}