@charset "utf-8";
/* CSS Document */

/*2017自慢の逸品リニューアル用*/
#cont {overflow: visible;}
#htnpride {width:100%;background: #000;position: relative;box-sizing: border-box;color: #fff;font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;/*margin-bottom: 200px;*/}
#htnpride * {position: relative;box-sizing: border-box;display: block;margin: 0;}
#htnpride h3 {margin-bottom: -200px;}
#htnpride h3 img {width:100%;}
#htnpride ol,ul,li {list-style:none;list-style-type:none;padding:0;}
#htnpride ul.conbass {font-size: 0.75rem;}
#htnpride ul:after {content:"";display:block;position:relative;clear:both;}
#htnpride > ul li {float:left;background: rgba(255,255,255,0.1);padding: 0.75%;transition: all 0.4s ease 0.3s;}
#htnpride ul.large3 {width:99.99%;}
#htnpride ul.large3 > li {width:33.33%;height: 260px;}
#htnpride ul.small4 {width:99.99%;}
#htnpride ul.small4 > li {width:25%;height: 200px;}

#htnpride ul li a {overflow: hidden;width:100%;height: 100%; color: #fff;text-decoration: none;}
/*#htnpride ul.large3 li a {}*/
#htnpride ul li a > img {width: 100%;top:-10%;}
#htnpride ul.conbass li a > img {width: 100%;top:-40%;}
#htnpride ul li a > img.yoko {height: 100%;width:auto;left:-30%;}
#htnpride ul li a > p {position: absolute;bottom:0;left: 0; background: rgba(0,0,0,0.6);font-size: 1.45em;text-align: left;line-height: 1.3em;padding: 0.375em;width: 100%;}
#htnpride ul.small4 li a > p {font-size:1.2em;}
#htnpride ul li a > span {position: absolute;background: rgba(200,150,0,0.6);top:1em;left:0.5em;right:0.5em;font-size: 1.375em;text-align: center;opacity: 0;transition: 0.5s 0.2s;}
#htnpride ul li a > span:after {content:url(../img/linkout.png);display: inline-block;padding: 0.25em 0 0.125em;}

#htnpride ul.addimg {width: 100%;height: 100%; position: absolute;top:0;right:0;padding: 0;margin: 0;overflow: visible;transition: 0.3s 0.2s;}
#htnpride ul.addimg li {overflow: hidden;width: 100%; position: absolute;border:1px solid rgba(255,255,255,0.6);padding: 0;margin: 0; border-radius: 15%;visibility: hidden;top:0;right:0;transition: 0.3s 0.2s;}
#htnpride > ul li:hover {}
#htnpride > ul li:hover > ul.addimg {z-index: +1000;top:-100%;right:0;}
#htnpride > ul li:hover > ul.addimg li {visibility: visible;box-shadow: 1px 1px 5px rgba(0,0,0,0.8);transform: rotate(360deg);}
#htnpride > ul li:hover > ul.addimg li:nth-child(1) {}
#htnpride > ul li:hover > ul.addimg li:nth-child(2) {top:100%;right:-100%;}
#htnpride > ul li:hover > ul.addimg li:nth-child(3) {top:100%;right:100%;}
#htnpride > ul li:hover > ul.addimg li:nth-child(4) {top:200%;right:0;}
#htnpride ul li a:hover > span {opacity: 1;}

#htnpride ul.large3 ul.addimg li {height: 260px;}
#htnpride ul.small4 ul.addimg li {height: 200px;}
#htnpride ul.addimg li img {width: 100%;top:-30%;}
#htnpride ul.addimg li img.yoko {width: auto;height: 100%; bottom:0;left: -35%;top:0;}