@charset "UTF-8";

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

CSSの名前：impress_hagaki.css インプレスはがき素材用

/ext/impress_hagaki.xhtml

--------------------------------------------------------------------------*/
#couponBox {width:950px; margin:70px auto 50px;padding:20px 50px;border:3px solid #2cb65a;background: #ecffec;text-align: center;}
#couponBox #couponTtl{font-size: 3.0em;font-weight: bold;color:#006321;}
#couponBox #couponBnr{background: url("../images/detail/impress_hagaki/coupon20260108.png")no-repeat;width:835px;height: 170px;margin: 0 auto;padding-top: 113px;}
#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  {background: url( "../images/detail/impress_hagaki/bg_washi.png");padding: 0 0;}
#jstore .red {color: #c80010;}
#jstore .small{font-size:75%;}
#jstore a:hover{text-decoration: none;}
#jstore img{vertical-align: middle;}

#jstore p{line-height: 1.8em;color:#333;}
#jstore p+p{margin-top:5px;}
#impressTOP{background: url("../images/detail/impress_hagaki/ttl_impress2026.png") no-repeat center top;height: 432px;background-color:#fff0f9;padding-top: 310px;box-sizing: border-box;}
#impressTOP h1{height: 30px;text-indent:100%;white-space:nowrap;overflow:hidden;}

#impressTOP #menuArea{background: url("../images/detail/impress_hagaki/bg_menu.png") repeat-x;}
#impressTOP #menuAreaInner{display: flex; width:1218px;margin:0 auto;}
#impressTOP #menuArea .mnBase{width:376px;height:120px;margin: 0 12px;color:#167cd3;font-size: 2.2em;font-weight: bold;text-align: center;line-height: 0.8em;}
#impressTOP #menuArea .mnBase span{font-size: 70%;}
#impressTOP #menuArea .mnBase:hover{text-decoration: underline;}
#impressTOP #menuArea .mnHagakiSet{background: url("../images/detail/impress_hagaki/mn_nengaset.png") no-repeat;padding:45px 0 0 50px;}
#impressTOP #menuArea .mnHagaki{background: url("../images/detail/impress_hagaki/mn_nenga.png") no-repeat;padding:45px 0 0 50px;}
#impressTOP #menuArea .mnBook{background: url("../images/detail/impress_hagaki/mn_book.png") no-repeat;padding:53px 0 0 50px;}

#impressContents h2.mizuhiki{margin: 60px auto 30px;padding-top:65px; text-align: center; background: url("../images/detail/impress_hagaki/bar_mizuhiki.png") no-repeat;width: 1095px;height: 150px;color:#ff332e;font-size: 3.8em;}
#impressContents h2.mizuhiki span{font-size: 80%;}
#impressContents h3.bar{width:1045px;margin:0 auto;padding:10px;;color:#fff;text-align: center;font-size: 2.8em;}
#impressContents h3.red{background: #ff817e;border:3px solid #ff332e;}
#impressContents h3.blu{background: #5a82bc;border:3px solid #2b5490;}
#impressContents h3.grn{background: #61b24e;border:3px solid #3c8b34;}

#impressContents .setBox{display: flex; width:1095px;border-radius: 10px;padding:30px 10px 20px 20px;margin: 20px auto 20px!important;background: #FFF;text-align: left;box-sizing: border-box; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.03));}
#impressContents .setBoxv a{display: block;}
#impressContents .recoName{display: flex; margin: 0 0 10px;}
#impressContents .setImg{width:450px;padding-top: 0;}
#impressContents .itemName{font-size: 2.0em;color:#167cd3;font-weight: bold;text-decoration: underline;margin-left:10px;text-align: left;}
#impressContents .itemText{font-size: 1.5em;margin: 0;text-align: left;margin-left:10px;}
#impressContents .priceArea{width:400px;padding: 15px 15px 0 0;text-align: right;}
#impressContents .price{font-size: 140%;}
#impressContents .setBox a:hover img{opacity: 1.0;}

#impressBtm {background: url("../images/detail/impress_hagaki/bg_washi_pnk.png");padding: 30px 0 60px;margin:150px 0 0;}
#impressBtm a:hover img{opacity: 1.0;}
#impressBtm .sozaiBox{display: block; width:1095px;border:4px solid #fff;border-radius: 10px;padding:30px 15px 30px;margin: 0 auto 40px!important;background: #FFF;text-align: center;box-sizing: border-box;}

#mnBox{width:1055px;margin:30px auto 70px!important;padding: 30px 0!important; overflow: hidden;}
#mnBox ul{clear: both; width:1000px;margin:0 auto 0;}
#mnBox ul li{position: relative;float:left;width:311px;color:#FFF;background: #e5312d;margin:10px 11px 0;padding: 20px 0; font-size:1.8em;font-weight: bold;text-align: center;border-radius: 8px;}
#mnBox ul li:after { position: absolute; content: "\f078"; font-family: 'Font Awesome 5 Free';font-weight: 900;right: 15px;}
#mnBox ul li.mochu{background: #2b5490;}
#mnBox ul li.etc{background: #3c8b34;}
#mnBox ul a:hover li{background: #ea5d5a;}
#mnBox ul a:hover li.mochu{background: #5a82bc;}
#mnBox ul a:hover li.etc{background: #61b24e;}

ul#tmpList {text-align: center ;width:1030px;box-sizing: border-box;margin: 20px auto 30px!important;background: #fff;padding:15px;overflow: hidden;}
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{width:185px;height:185px;}
ul#tmpList li .imgTPL:hover{opacity: 0.5;background:url("../images/detail/kadokawa_hagaki/zoom.png")no-repeat right top;z-index: 10;}

#impressContents #bookArea{display: flex; width:1095px;margin:0 auto 80px;}
#impressContents .bookBox{width:355px;margin: 0 5px;background: #f2f2f2;border: 1px solid #c8c8c8;box-sizing: border-box;padding:15px 10px;text-align: center;}
#impressContents .bookImg{width:240px;margin:10px auto!important;}

 .btnBuy{ position: relative;margin:10px auto 10px;text-align: center;background: #c80010;color:#FFF;width:190px;font-size:1.6em;font-weight: bold; padding:8px 0 4px!important;border-radius: 30px;border:2px solid #c80010;}
 a .btnMBuy span{font-size: 110%;font-weight: bold;margin:0 5px;}
 a .btnBuy{background: #c80010;}
a:hover .btnBuy{background: #fff;color: #c80010;}
.btnBuy:after { position: absolute; content: "\f054"; font-family: 'Font Awesome 5 Free';font-weight: 900;   right: 15px;}