@charset "UTF-8";
#contents.wide nav.tv-categories { display: block; }

#page-content .read { margin: 0 11%; padding-bottom: 25px; }
#page-content .read strong { display: block; font-size: 36px; line-height: 1.2em; padding: 45px 0; text-align: center; color: #000; }
#page-content .read p { font-size: 13px; }
#page-content .tv-categories { margin-bottom: 50px; }
#page-content .tv-categories > ul { text-align: center; }
#page-content .tv-categories > ul li { display: inline-block; vertical-align: bottom; *vertical-align: auto; *zoom: 1; *display: inline; margin: 10px 22px; }
#page-content .tv-categories > ul li a { display: block; padding: 5px 0 10px 0; color: #333; }
#page-content .tv-categories > ul li a.selected { border-bottom: 8px solid #eeeeee; padding-bottom: 2px; }
#page-content .tv-categories > ul li a:hover, #page-content .tv-categories > ul li a:active, #page-content .tv-categories > ul li a:focus { outline: none; text-decoration: none; color: #777; }
#page-content .tv-archives { overflow: hidden; *zoom: 1; width: 960px; position: relative; }
#page-content .tv-archives p { margin: 0; padding: 0; }
#page-content .tv-archives li { width: 25%; min-height: 135px; margin: 0; padding: 0; list-style: none; }
#page-content .tv-archives li img { max-width: 100%; display: block; }
#page-content .tv-archives li p { display: none; position: absolute; top: 0; left: 0; background: #4BC1B9; color: #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 10px; line-height: 1.5em; }
#page-content .tv-archives li p span { display: block; font-size: 11px; margin-top: 8px; }
#page-content .tv-archives li:hover p { display: block; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
#page-content .tv-archives li a { display: block; }
#page-content .tv-archives li a.lightbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#page-content .tv-archives li a.lightbox:after { content: " "; position: absolute; bottom: 10px; right: 10px; display: block; width: 49px; height: 49px; background: url(/images/common/play.png) 50% 50% no-repeat; }
#page-content .tv-archives li a.lightbox img { display: none; }
#page-content .tv-archives li a.more { position: absolute; bottom: 10px; left: 10px; z-index: 2; border: 1px solid #fff; padding: 1px 5px; color: #fff; }
#page-content .tv-archives li a.more:after { content: "もっと詳しく \00bb"; margin-top: 5px; }
#page-content .tv-archives li.trans { -moz-transition-property: opacity, -moz-transform, top, left; -o-transition-property: opacity, -o-transform, top, left; -webkit-transition-property: opacity, -webkit-transform, top, left; transition-property: opacity transform top left; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#page-content .tv-archives li:not(.loaded) img { display: none; }
#page-content .tv-archives li.disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); }
#page-content .tv-archives.all { min-height: 150px; }
#page-content .tv-archives.all li { position: absolute; }
#page-content .tv-archives.pickup li { width: 50%; min-height: 270px; float: left; position: relative; }
#page-content .tv-archives.pickup li p { background: #FFD54F; }
#page-content .tv-archives.pickup li a.lightbox:after { position: absolute; bottom: 50%; right: 50%; margin: 0 -25px -25px 0; }
#page-content .tv-archives.pickup li a.more { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; position: relative; bottom: auto; left: auto; margin-top: 10px; }
#page-content .tv-archives.pickup li b { display: block; width: 70px; height: 70px; position: absolute; top: 20px; right: 20px; color: #fff; font-weight: bold; text-align: center; line-height: 18px; padding-top: 18px; -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#lg-slider .lg-slide { background-position: 50% 42%; }
#lg-slider .lg-slide:before { height: 42%; }

@media screen and (max-width: 767px) { #page-content .tv-archives.all li { width: 50%; min-height: 270px; } }