html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,button{margin:0;padding:0;}

li {list-style-type:none;}

body{ background-color:rgb(236,236,232); background-image: url(../images/bg.gif); color: rgb(136,136,132); font-family: 'PT Sans Narrow', sans-serif; font-size: 0; }
input, button { font-family: 'PT Sans Narrow', sans-serif; }

img { background-color:rgb(196,196,192); border:0 none; }

a { color:rgb(36,36,32); text-decoration:none; }
a:hover{ color:rgb(63,188,212); }

h1 { color: rgb(36,36,32); font-size: 24px; line-height: 26px; font-weight: bold; margin: 10px 5px 0 5px; }
h2 { color: rgb(36,36,32); font-size: 20px; line-height: 22px; font-weight: bold; margin: 10px 5px 0 5px; text-transform: uppercase; }
h2 span { color:rgb(63,188,212); }

.up-part { background-color: rgba(255,255,255,0.2); border-bottom: 1px solid rgb(216,216,212); padding: 0 0 10px 0; overflow: hidden; }

.big-name { display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; }
.big-name a { color: rgb(36,36,32); font-size: 28px; line-height: 30px; height: 30px; display: block; text-transform: uppercase; font-weight: bold; }
.big-name a span { color: rgb(63,188,212); }

.find-part { background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); border-bottom: 4px solid rgb(206,206,202); margin: 10px auto 0 auto; width: 96%; max-width: 540px; overflow: hidden; }
.find-part form { overflow: hidden; border-radius: 15px; margin: 8px; position: relative; box-shadow: 0 0 0 1px rgb(226,226,222); }
.find-part input { font-weight: bold; background-color: rgb(255,255,255); color: rgb(106,106,102); text-transform: uppercase; width: 94%; padding: 0 3%; border: 0 none; outline: none; height: 30px; line-height: 30px; font-size: 14px; }
.find-part input:focus { color: rgb(36,36,32); }
.find-part button { background: none; color: rgb(36,36,32); display: block; width: 30px; position: absolute; top: -1px; right: 0; height: 30px; line-height: 30px; cursor: pointer; border: 0 none; outline: none; font-size: 14px; }
.find-part button:hover { color: rgb(63,188,212); }

.up-part-navi { padding-top: 4px; }
.up-part-navi li { font-weight: bold; display: inline-block; vertical-align: top; margin: 6px 3px 0 3px; }
.up-part-navi li a { background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); color:rgb(106,106,102); border-bottom: 4px solid rgb(206,206,202); display: block; height: 25px; line-height: 25px; font-size: 14px; text-transform: uppercase; padding: 0 8px; }
.up-part-navi li.active a, .up-part-navi li a:hover { background-color:rgb(63,188,212); background: linear-gradient(to bottom,rgb(83,202,232),rgb(43,168,192)); color:rgb(255,255,255); border-color: rgb(3,128,152); }

.center-part { margin: 0 auto; width: 100%; text-align: center; }

.top-part { background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); margin: 10px 5px 0 5px; padding: 0 5px 10px 5px; overflow: hidden; }

.top-part-navi li { border-left: 2px solid rgb(236,236,232); font-size: 16px; line-height: 18px; display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; padding-left: 10px; }
.top-part-navi li.active a { color: rgb(63,188,212); }
.top-part-navi li:first-child { border-left-width: 0; padding-left: 0; }

.prev-part { display: inline-block; vertical-align: top; width: 50%; }
.prev { background-color:rgb(226,226,222); border-bottom: 2px solid rgb(206,206,202); padding-bottom: 5px; margin: 10px 5px 0 5px; text-align: left; position: relative; overflow: hidden; }
.prev .poster-part { position: relative; display: block; }
.prev .poster-part::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-shadow: inset 0 0 0 7px rgba(255,255,255,0.2); }
.prev:hover .poster-part::after { box-shadow: inset 0 0 0 7px rgba(26,26,22,0.7); }
.prev a { display: block; }
.prev img { width: 100%; height: auto; max-height: 220px; }
.prev .prev-name { background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); display: block; overflow: hidden; font-size: 14px; line-height: 16px; height: 32px; padding: 5px 10px 0 10px; }
.prev .prev-count, .prev .prev-elapsed { display: none; background-color: rgba(26,26,22,0.7); color: rgb(255,255,255); position: absolute; height: 20px; line-height: 20px; overflow: hidden; font-size: 14px; }
.prev .prev-count { bottom: 49px; left: 7px;  padding: 0 10px 0 3px; }
.prev .prev-elapsed { top: 7px; right: 7px;  padding: 0 3px 0 5px; }
.prev:hover .prev-count, .prev:hover .prev-elapsed  { display: block; }
.prev .prev-count span, .prev .prev-elapsed i { color: rgb(83,208,232); }
.prev:hover { border-bottom-color: rgb(63,188,212); }

.prev-cat .prev-name { font-size: 15px; line-height: 20px; height: 20px; }
.prev-cat .prev-count { bottom: 37px; }

.prev-more:hover { border-bottom-color: rgb(206,206,202); }
.prev-more a { color: rgb(56,56,52); }
.prev-more a i { color: rgb(99,151,24); }
.prev-more a:hover { text-decoration: underline; }

.bottom-part-navi { background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); margin: 10px 5px 0 5px; padding: 0 5px 10px 5px; overflow: hidden; }
.bottom-part-navi li { border-left: 2px solid rgb(236,236,232); display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; padding-left: 10px; }
.bottom-part-navi li:first-child { border-left-width: 0; padding-left: 0; }
.bottom-part-navi li a, .bottom-part-navi li span { display: block; height: 20px; line-height: 20px; font-size: 16px; }
.bottom-part-navi li span { color: rgb(126,126,122); }
.bottom-part-navi li.active a { color: rgb(63,188,212); }

.sp-part { margin-top: 10px; }
.sp { background-color: rgb(196,196,192); width: 300px; height: 250px; margin: 10px 5px 0 5px; display: inline-block; vertical-align: top; }
.sp-2, .sp-3, .sp-4 { display: none; }

.main-categories-part a { background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); border-bottom: 2px solid rgb(206,206,202); display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; height: 25px; line-height: 25px; font-size: 16px; padding: 0 10px; }
.main-categories-part a:hover { background-color:rgb(63,188,212); background: linear-gradient(to bottom,rgb(83,202,232),rgb(43,168,192)); color:rgb(255,255,255); border-color: rgb(3,128,152); }

.searches-part { background-color: rgba(36,36,32,0.1); margin: 0 5px; font-size: 18px; line-height: 25px; padding: 10px; }
.searches-part a { color: rgb(76,76,72); display: inline-block; vertical-align: top; }
.searches-part a:hover { color: rgb(63,188,212); text-decoration: underline; }
.searches-part a i { color: rgb(63,188,212); font-size: 14px; }

.more-list-part ul { display: inline-block; vertical-align: top; width: 50%; margin-top: 5px; }
.more-list-part li { background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); font-size: 14px; padding: 0 10px; line-height: 30px; height: 30px;overflow: hidden; margin: 5px 5px 0 5px; text-align: left; }
.more-list-part li a { color: rgb(56,56,52); }
.more-list-part li a:hover { text-decoration: underline; }
.more-list-part li i { color: rgb(99,151,24); }

.video-part { background-color:rgb(226,226,222); background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); border-bottom: 4px solid rgb(206,206,202); margin: 5px 5px 0 5px; padding: 10px; }

.online-part { position: relative; background-color: rgb(6,6,2); width: 100%; height: 200px; }
.online-part iframe, .online-part object, .online-part embed { width: 100%; height: 100%; }

.vid-sp-part { background-color: rgb(206,206,202); padding: 0 0 10px 0; margin-top: 10px; }
.vid-sp { background-color: rgb(196,196,192); width: 300px; height: 250px; margin: 10px 5px 0 5px; display: inline-block; vertical-align: top; }
.vid-sp-2, .vid-sp-3 { display: none; }

.vid-wide-part { display: none; background-color: rgb(6,6,2); padding: 3px 0; }
.vid-wide-sp { background-color: rgb(38,45,50); width: 728px; height: 90px; display: inline-block; vertical-align: top; }

.vid-bottom-part { padding-top: 5px; overflow: hidden; text-align: left; }
.vid-about { overflow: hidden; }
.vid-about li { display: block; float: left; margin: 5px 5px 0 0; height: 30px; line-height: 30px; background-color: rgb(208,208,204); border-bottom: 4px solid rgb(196,196,192); font-size: 16px; padding: 0 10px; }
.vid-about span, .vid-about i { color: rgb(36,36,32); }

.vid-categories-part { overflow: hidden; margin-top: 5px; }
.vid-categories-part li { display: block; float: left; margin: 5px 5px 0 0; }
.vid-categories-part li a { color: rgb(63,188,212); display: block; height: 30px; line-height: 30px; background-color:rgb(226,226,222); background: linear-gradient(to bottom,rgb(255,255,252),rgb(226,226,222)); border-bottom: 4px solid rgb(255,255,252); font-size: 16px; padding: 0 10px; }
.vid-categories-part li a:hover { background-color:rgb(63,188,212); background: linear-gradient(to bottom,rgb(83,202,232),rgb(43,168,192)); color:rgb(255,255,255); border-color: rgb(3,128,152); }

.down-part { border-top: 1px solid rgb(206,206,202); padding: 10px 5px 20px 5px; overflow: hidden; font-size: 16px; margin: 20px 5px 0 5px; }
.down-part p { margin-top: 10px; }
.down-part span { color: rgb(63,188,212); font-weight: bold; }
.down-part a { color: rgb(106,106,102); text-decoration: none; }
.down-part a:hover { text-decoration: underline; }

.lnks { all: initial; position: relative;}
.lnks ul { padding-top: 10px; }
.lnks li { display:inline-block; font-size: 18px; padding: 5px 10px 5px 10px;}


@media all and (min-width:360px) {
    .prev-cat .prev-name { font-size: 16px; }
}

@media all and (min-width:400px) {
    .online-part { height: 250px; }
}

@media all and (min-width:500px) {
    .online-part { height: 300px; }
}

@media all and (min-width:600px) {
    .prev-part, .more-list-part ul { width: 33.3333%; }
    .online-part { height: 350px; }
}

@media all and (min-width:640px) {
    .sp-2, .vid-sp-2 { display: inline-block; }
}

@media all and (min-width:700px) {
    .online-part { height: 400px; }
}

@media all and (min-width:800px) {
    .online-part { height: 450px; }
    .prev-part { width: 25%; }
    .prev img { max-height: 180px; }
}

@media all and (min-width:900px) {
    .online-part { height: 500px; }
}

@media all and (min-width:1020px) {
    h1, h2 { text-align: left; }
    h1 { font-size: 30px; }
    .up-part { padding: 10px 0; }
    .big-name { float: left; margin: 0 0 0 6px; }
    .big-name a { font-size: 38px; line-height: 40px; height: 40px; }
    .up-part-navi { float: right; overflow: hidden; padding-top: 0; }
    .up-part-navi li { display: block; float: left; margin: 0 0 0 6px; }
    .up-part-navi li a { font-size: 16px; height: 36px; line-height: 36px; }
    .find-part { float: right; margin: 0 6px 0 6px; width: 300px; }
    .find-part form { margin: 3px 10px; }
    .find-part input { width: 90%; padding: 0 5%; }
    .center-part { width: 1000px; }
    .top-part { padding: 0 10px; }
    .top-part h1 { float: left; margin: 0; height: 40px; line-height: 40px; }
    .top-part h2 { margin: 0; height: 40px; line-height: 40px; }
    .top-part-navi { float: right; overflow: hidden; }
    .top-part-navi li { border-left-width: 5px; display: block; float: left; font-size: 18px; line-height: 40px; margin: 0 0 0 10px; padding-left: 10px; }
    .top-part-navi li:first-child { border-left-width: 5px; padding-left: 10px; }
    .prev-part { width: 250px; }
    .prev img { width: 240px; height: 180px; }
    .prev .prev-name { height: 16px; }
    .prev .prev-count { bottom: 33px; }
    .prev-cat .prev-name { font-size: 20px; height: 25px; line-height: 25px; }
    .prev-cat .prev-count { bottom: 42px; }
    .bottom-part-navi { padding: 0; }
    .bottom-part-navi li { border-left-width: 5px; margin: 0 5px; }
    .bottom-part-navi li a, .bottom-part-navi li span { height: 40px; line-height: 40px; min-width: 30px; }
    .bottom-part-navi li:first-child { border-left-width: 5px; padding-left: 10px; }
    .bottom-part-navi li:last-child { border-right: 5px solid rgb(236,236,232); padding-right: 10px; }
    .more-list-part li { font-size: 18px; height: 35px; line-height: 35px; }
    .vid-table { display: table; width: 100%; }
    .vid-main-part, .vid-sp-part { display: table-cell; vertical-align: top; }
    .vid-main-part { padding-right: 10px; }
    .online-part { height: 440px; }
    .vid-sp-part { width: 320px; }
    .vid-sp { margin: 10px 10px 0 10px; }
    .sp-3 { display: inline-block; }
    .main-categories-part a { height: 30px; line-height: 30px; font-size: 18px; }
}

@media all and (min-width:1270px) {
    .big-name a { font-size: 50px; line-height: 60px; height: 60px; }
    .up-part-navi li a { font-size: 18px; height: 56px; line-height: 56px; padding: 0 20px; }
    .find-part { width: 360px; }
    .find-part form { margin: 13px 20px; }
    .center-part { width: 1250px; }
    .sp-4 { display: inline-block; }
    .more-list-part ul { width: 16.6666%; }
    .main-categories-part a { height: 38px; line-height: 38px; font-size: 18px; padding: 0 20px; }
    .online-part { height: 520px; }
    .vid-about { float: left; }
    .vid-categories-part { float: right; margin-top: 0; }
    .vid-categories-part li { margin: 5px 0 0 5px; }
    .vid-wide-part { display: block; }
}


@media all and (min-width:1520px) {
    .up-part-navi li a { min-width: 90px; }
    .center-part { width: 1500px; }
    .vid-about li, .vid-categories-part li a { height: 40px; line-height: 40px; padding: 0 20px; font-size: 18px; }
    .online-part { height: 640px; }
    .vid-sp-3 { display: inline-block; }
}