/* IMPORT RESET */ @import url("reset.css"); @import url(http://fonts.googleapis.com/css?family=Roboto); /* IMPORT 12 COLUMN RESPONSIVE GS */ @import url("responsive.gs.12col.css"); /* STYLES */ body { color: white; background-color:#000; background-image:url('../images/top/01.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; background-attachment: fixed; } i{ background:#fff; } header { text-align: center; background-image:url('../images/top/top.jpg'); background-position:center; background-size:cover; height:30em; margin:0 0 20px 0; padding:0; border-bottom:1px solid #330000; position:relative; top:0px; box-shadow:1px 1px 12px 1px rgba(0,0,0,0.5); } .clearfix{ clear:both; } .logo{ width:300px; height:150px; background-image:url(../images/top/logo_com.png); background-repeat:no-repeat; background-position:top left; background-size:cover; position:absolute; top:0; left:5%; z-index:1000; } .menu ul{ width:100%; height:50px; background-color:rgba(0,0,0,0.7); margin:0; padding:0; position:absolute; bottom:0px; z-index:0; } .menu ul li{ position:relative; top:10px; left:20%; width:10%; height:30px; float:left; margin:0px; padding:0; font-weight:bold; color:#CC9966; text-align:center; opacity:0.7; } .menu ul li img{ margin:0; padding:0; } .menu a{ color:#CC9966; text-decoration:none; } .menu ul li:hover{ opacity:1.0; } .menu .current{ color:#fff; opacity:1.0; } #m_menu{ display:none; margin:0 auto; margin-bottom:-15px; width:90%; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #533737), color-stop(0.00, #2e1d14)); background: -webkit-linear-gradient(top, #2e1d14 0%, #533737 100%); background: -moz-linear-gradient(top, #2e1d14 0%, #533737 100%); background: -o-linear-gradient(top, #2e1d14 0%, #533737 100%); background: -ms-linear-gradient(top, #2e1d14 0%, #533737 100%); background: linear-gradient(top, #2e1d14 0%, #533737 100%); box-shadow:rgba(255, 255, 255, 0.3) 0px 0px 6px 3px; -webkit-box-shadow:rgba(255, 255, 255, 0.3) 0px 0px 6px 3px; -moz-box-shadow:rgba(255, 255, 255, 0.3) 0px 0px 6px 3px; } #cbp-spmenu-r img{ margin-left:30px; } #cbp-spmenu-r #hideRight img{ margin-left:0px; } #m_menu p{ width:96%; text-align:right; height:32px; padding-top:5px; } article ul { margin:0; padding:0 5%; } article ul li{ width:100%; margin:10px 0; padding:0; display:inline-block; background:#fff url(../images/02.jpg); border:10px solid rgba(153,102,51,0.4); color:#000; padding:10px; /* border-radius */ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; /* box-shadow */ box-shadow:rgba(161, 97, 18, 0.658824) 0px 0px 6px 3px; -webkit-box-shadow:rgba(161, 97, 18, 0.658824) 0px 0px 6px 3px; -moz-box-shadow:rgba(161, 97, 18, 0.658824) 0px 0px 6px 3px; } article .li_thum{ width:100px; float:left; display:block; margin-top:2px; } article .li_thum img{ border:1px solid #ccc; border:1px solid rgba(153,102,51,1.0); box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; -webkit-box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; -moz-box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; } article .thumb{ width:100px; height:100px; margin:0; padding:0; position:relative; top:0px; left:0px; z-index:0; overflow:hidden; background:#000; border:1px solid rgba(153,102,51,1.0); box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; -webkit-box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; -moz-box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; } article .thumb img{ width:100%; margin-top:22%; border:0px solid rgba(153,102,51,1.0); } article .playbtn{ width:40px; position:relative; top:-70px; left:30px; z-index:100; overflow:hidden; margin-bottom:-40px; } article .playbtn img{ width:100%; border:0px solid rgba(153,102,51,1.0); } article .box_txt{ position:relative; width:80%; float:right; display:block; } .box_txt h3{ width:100%; font-weight:bold; color:#996633; text-shadow:1px 1px 2px rgba(179, 152, 137, 0.8) ; margin-bottom:10px; position:relative; top:0; line-height:1.2em; border-bottom:1px solid #996633; } .box_txt p{ width:100%; font-weight:300; color:#444; position:relative; font-size:0.95em; line-height:1.2em; top:0px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow:1px 1px 2px rgba(255, 255, 255, 0.5) ; } .li_link{ clear:both; width:150px; height:30px; float:right; margin-top:10px; background:url(../images/common/link.jpg); background-size:contain; background-repeat:no-repeat; display:table-cell; cursor:pointer; } .li_link:hover{ opacity:0.8; } /* 新規更新*/ .new{ position:absolute; top:5px; right:3px; font-weight:500; font-size:0.9em; background:#CC0000; padding:0 2px; border-radius:2px; font-family: 'Roboto', sans-serif; } .up{ position:absolute; top:5px; right:2px; font-weight:bold; font-size:0.9em; background:#FF9933; padding:0 2px; border-radius:2px; } /* リボン*/ .heading{ position:relative; width:110px; top:-6px; left:-10px; padding:5px; font-size:0.8em; font-weight:700; background:#333; color:#fff; font-family: 'Roboto', sans-serif; box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; -webkit-box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; -moz-box-shadow:rgba(161, 97, 18, 0.4) 0px 0px 4px 1px; } .h_red{ border-left:#FF3366 solid 3px; } .h_gray{ border-left:#990099 solid 3px; } .h_gr{ border-left:#66CC99 solid 3px; } .h_bl{ border-left:#3399FF solid 3px; } .h_yl{ border-left:#FF9900 solid 3px; } aside { text-align: center; padding:0px; } .twit{ width:100%; height:360px; margin:0px auto; background-image:url(../images/top/twitter.png); background-repeat:no-repeat; background-position:top center; background-size:contain; margin:0 auto; overflow: } .twit img{ margin:0;margin-bottom:-2px; } /* Twitter */ .content_tw{ overflow:hidden; text-align:center; } #twitter-widget-0{ height:260px; width:200px; margin-top:70px; } #loading{ width:30%; height:20%; background-color:#fff; opacity:0.6; border-radius:5px; position:relative; margin:30% 0 0 35%; text-align:center; padding:10px; } /* banner */ .banner{ margin:5px auto; color:#999; text-align:center; padding:5px 17px; } .banner img{ width:100%; margin:0 auto; border:1px solid #996633; /* box-shadow */ /* box-shadow */ box-shadow:rgba(161, 97, 18, 0.658824) 0px 0px 6px 3px; -webkit-box-shadow:rgba(161, 97, 18, 0.658824) 0px 0px 6px 3px; -moz-box-shadow:rgba(161, 97, 18, 0.658824) 0px 0px 6px 3px; } footer { line-height: 3em; text-align: center; color:#CC9966; font-size:0.8em; background: #2e1d14; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #533737), color-stop(0.00, #2e1d14)); background: -webkit-linear-gradient(top, #2e1d14 0%, #533737 100%); background: -moz-linear-gradient(top, #2e1d14 0%, #533737 100%); background: -o-linear-gradient(top, #2e1d14 0%, #533737 100%); background: -ms-linear-gradient(top, #2e1d14 0%, #533737 100%); background: linear-gradient(top, #2e1d14 0%, #533737 100%); } #banner {margin-right:auto;margin-left:auto;width:720px;} #banner li{ float:left; margin:10px 5px;} #banner li img{margin:0;padding:0} #banner li img:hover{cursor:pointer} @media ( max-width : 1600px ) { header { height:30em; } } @media ( max-width : 1200px ) { header { height:30em; } article ul li{ width:100%; } .box_txt p{ font-size:0.9em; } } @media ( max-width : 960px ) { header { height:25em; } .logo{ width:250px; height:150px; background-size:contain; position:absolute; left:3%; } .menu ul li{ left:15%; width:12%; } article ul li{ width:100%; margin:5px 0; /*background:#ccc*/ } article .li_thum{ width:90px; } article .thumb{ width:90px; height:90px; } article .playbtn{ top:-70px; left:25px; } article .box_txt{ width:78%; } .box_txt h3{ margin-bottom:10px; top:0; } .box_txt p{ font-size:0.9em; top:0px; } .heading{ width:100px; } .twit{ background-image:url(../images/top/twitter.png); background-repeat:no-repeat; background-position:top center; background-size:cover; padding:10px; } .li_link{margin-top:10px} .banner img{ width:100%; } } @media ( max-width : 850px ) { article .box_txt{ width:73%; } } @media ( max-width : 760px ) { header { height:20em; } #banner {margin:0 auto;width:600px;} #banner li{margin:3px;padding:0;} .logo{ width:200px; } .menu ul li{ left:10%; width:13%; } article ul li{ left:40%; width:100%; /*background:#ccc*/ } article .li_thum{width:90px;} article .thumb{width:90px;height:90px;} article .playbtn{top:-70px;left:25px;} article .box_txt{width:80%;min-height:90px;} .box_txt h3{margin-bottom:10px;top:0;} .box_txt p{font-size:0.9em;top:0px;} .twit{ background-image:url(../images/top/twitter.png); background-repeat:no-repeat; background-position:top center; background-size:contain; padding:0px; } .banner img{width:100%;} .li_link{margin-top:-25px} } @media ( max-width : 640px ) { header {height:18em;} #banner {margin:0 auto;width:400px;padding:15px 0} #banner li{margin:1px 2px;} .logo{width:200px;} .menu ul li{left:5%;width:15%;} article ul li{left:35%;width:100%;} article .li_thum{width:90px;} article .box_txt{width:76%;} .box_txt h3{font-size:0.9em;line-height:1.2em;margin-bottom:10px;top:0;} .box_txt p{font-size:0.8em;top:0px;} .li_link{margin-top:-15px} .heading{width:100px;}body { background-image:url('../images/top/03.jpg'); background-repeat:repeat; background-position:top center; background-size:100% auto; background-attachment: scroll; } } @media ( max-width : 540px ) { article .box_txt{width:73%;} } @media ( max-width : 480px ) { #banner {margin:0 auto;width:320px;padding:15px 0} #banner li{margin:1px 1px;} #m_menu{display:block;} .menu ul{display:none;} .logo{width:150px;} header {height:12em;} article ul li{left:30%;width:100%;} article .li_thum{ width:80px; } article .thumb{ width:80px; height:80px; } article .playbtn{ top:-60px; left:20px; } article .box_txt{ width:74%; } .box_txt h3{ font-size:0.8em; line-height:1.2em; margin-bottom:10px; top:0; } .box_txt p{ font-size:0.8em; top:0px; } .heading{ width:90px; font-size:0.7em; } .li_link{margin-top:10px} .new{ font-size:0.8em; } .up{ font-size:0.8em;} } @media ( max-width : 420px ) { article ul li{ width:100%; } article .li_thum{ width:70px; } article .thumb{ width:70px; height:70px; } article .playbtn{ top:-55px; left:15px; } article .box_txt{ width:72%; } .box_txt h3{ font-size:0.9em; line-height:1.2em; margin-bottom:10px; top:0; } .box_txt p{ font-size:0.8em; top:0px; } .li_link{ width:125px; height:25px; } .heading{ width:80px; } .new{ font-size:0.8em; margin-left:2px; padding:0 1px; font-weight:200;} .up{ font-size:0.8em; margin-left:2px; font-weight:200; } } @media ( max-width : 380px ) { article .box_txt{ width:65%; } } @media ( max-width : 320px ) { article ul li{ width:100%; display:inline-block; } .box_list{ width:100%; } article .li_thum{ width:70px; } article .thumb{ width:70px; height:70px; } article .playbtn{ top:-55px; left:15px; } article .box_txt{ width:65%; } .box_txt h3{ font-size:0.85em; line-height:1.2em; margin-bottom:10px; top:0; padding-bottom:5px;} .box_txt p{ font-size:0.75em; line-height:1.3em; top:0px; } .li_link{ width:100px; height:20px; } .heading{ width:80px; } } .link_sub{ display:block; } .link_sub a{ text-decoration:none; color:#0099CC; font-size:100%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; border-bottom:dotted 1px #0099CC; }