@charset "utf-8";
/*
Name: 映像投稿サイト
URL: http://www./
*/
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/



/* 初期値
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
table td.center {
	text-align: center;
}
caption,
th,
td {
	font-weight: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: thin dotted;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
address {
	font-style: normal;
}
small {
	font-size: smaller;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}
a {
  color: #0089ff;
  text-decoration: none;
}
a:hover {
	color: #FF0000;
}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

span.check,
.check {
	color: #CC0000;
}

.flex-reverse {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}


/*共通
-------------------------------------------------------------- */
body {
	background: #f0f0f0;
	font-size: 100%;
	font-family: 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #222;
	text-align: center;
	margin: 0;
	padding: 0;
}


/* Header */
#header {
	background: #FFF url(../images/header_bg.png) no-repeat right bottom;
	margin: 0 auto 0px;
	padding: 0;
	display: block;
	width: 100%;
	border-bottom: solid 1px #ccc;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
	text-align: left;
	overflow: hidden;
	zoom: 1;
}

.site-title {
	margin: 0;
	padding: 3px 16px;
	font-weight: bold;
	background: #00a7c7 url(../images/bg.jpg) no-repeat left top;
	background-size: 100% 150%;
}
.site-title a {
	text-decoration: none;
	color: #FFF;
}


/* サイト名 */
#header h1 {
	margin: 0 !important;
	padding: 25px 5% 5px 5% !important;
	text-align: left;
}
#header h1 a {
	font-family: 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #f90000;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
	font-weight: bold;
	font-size: 120%;
	line-height: normal;
}
#header .copy {
  margin: 0;
  padding: 0 5% 30px 5%;
  text-align: left;
  font-size: 90%;
  color: #888;
}



/* 共通 */
#content {
	width: 100%;
	margin: 0 auto 0;
	padding: 0;
	overflow: hidden;
	zoom: 1;
	text-align: left;
}


/* main */
#content .main {
	margin: 0px auto 0px auto;
	padding: 20px 8px 30px 8px;
}
#content .section {
	width: 100%;
	display: block;
}




/* Footer */

#footer {
	background: #00a7c7 url(../images/bg.jpg) no-repeat left top;
	background-size: 100% 100%;
	clear: both;
	line-height: 1.5;
	margin: 0 auto 0;
	padding: 8px 0 0 0;
	width: 100%;
	text-align: center;
	overflow: hidden;
	zoom: 1;
}
#footer .pagetop a {
	display: inline-block;
	background: #F0F0F0;
	padding: 5px 0 0 0;
	margin: 0 5% 0 0;
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	box-shadow: 2px -3px 4px 0px #008197;
	float: right;
}
#footer .pagetop a:hover {
	box-shadow: 1px -2px 3px 1px #3ca9bc;
}
#footer .pagetop img {
	width: auto;
	margin: 0;
	padding: 0;
}
#footer ul {
	width: 100%;
	background: #F0F0F0;
	margin: 0;
	padding: 16px 0;
	overflow: hidden;
	zoom: 1;
	text-align: center;
}
#footer ul li {
	display: inline;
	margin: 0;
	padding: 3px 16px;
	border-right: solid 1px #999;
	font-size: 85%;
}
#footer ul li.home {
	border-left: solid 1px #999;
}
#footer ul li a {
	color: #777;
	text-decoration: none;
}
#footer ul li a:hover {
	text-decoration: underline;
	color: #666;
}
#footer #copy,
#footer #copy a {
	background: #FFF;
	color: #999;
	text-decoration: none;
	padding: 5px;
	margin: 0;
	font-size: 12px;
}
#footer #copy a:hover {
	color: #666;
}
/* Footer　ここまで */





/* メインエリア　用CSS
-------------------------------------------------------------- */

/* メイン　エリア */
#content .main .mainBox {
	width: 64%;
	margin: 15px 0 15px 2.5%;
	padding: 0;
}
	

/*ピックアップ*/
#content .main .pickup {
	width: 92%;
	margin: 2%;
	padding: 2%;
	background-color: #FFF;
	border: solid 1px #ccc;
	border-radius: 8px;
	box-shadow: 0 0px 10px rgba(0,0,0,0.2);
}
#content .main .mainBox h2 {
	color: #00a7c7;
	margin: 0;
	padding: 8px 8px 8px 12px;
	font-weight: bold;
}
#content .main .mainBox h3 {
	color: #00a7c7;
	font-weight: bold;
	margin: 3px 8px;;
	padding: 5px 5px 5px 10px;
}
#content .main .mainBox h3 a {
	text-decoration: none;
}
#content .main .mainBox h3.info {
	color: #222;
}
#content .main .mainBox p {
	margin: 3px 8px;
	padding: 3px;
	color: #555;
}
#content  .main .pickup .detail img {
	width: 100%;
}
#content  .main .pickup .detail .comment {
	margin: 16px 0;
	padding: 16px;
	border-top: solid 1px #ccc;
	color: #666;
	line-height: 180%;
}
#content  .main .pickup .detail a.back {
	display: inline-block;
	background: url(../images/arrow_back.png) no-repeat left bottom;
	margin: 0px 16px 16px 16px;
	padding: 3px 20px 5px 30px;
	font-size: 110%;
	font-weight: 500;
}

/*映像リスト*/
#content .main ul.listBox {
	width: 100%;
	margin: 15px 0 15px;
	padding: 8px 0;
	overflow: hidden;
	zoom: 1;
}
.listBox-in {
	display: flex;
	flex-wrap: wrap;
}
#content .main .listBox h2 {
	color: #00a7c7;
	margin: 0;
	padding: 16px 8px 8px 16px;
	font-weight: bold;
}
#content .main ul.listBox li {
	width: 31%;
	float: left;
	margin: 1% 0.5% 1.5% 1.5%;
	padding: 0 0 8px 0;
	background-color: #FFF;
	border: solid 1px #ccc;
	border-radius: 5px;
	box-shadow: 0 0px 10px rgba(0,0,0,0.2);
}
#content .main ul.listBox li img {
	width: 100%;
	height: auto;
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
}
#content .main ul.listBox li  h3 {
	color: #000;
	font-weight: bold;
	margin: 3px 8px;
	padding: 5px 5px 5px 10px;
	line-height: 140%;
	font-size: 100%;
}
#content .main ul.listBox li h3 a {
	text-decoration: none;
}
#content .main ul.listBox li p {
	color: #555;
	margin: 0px 8px;
	padding: 0;
	font-size: 90%;
}




/* サイドエリア　用CSS
-------------------------------------------------------------- */
#content .main .sideBox {
	width: 28%;
	margin: 30px 8px 0 3%;
	padding: 0;
}

/* 投稿　*/
#content .main .sideBox .box {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 8px 8px 30px 8px;
	background: #FFF url(../images/header_bg.png) no-repeat right bottom;
	background-size: 100%;
	border: solid 1px #ccc;
}
#content .main .sideBox h3{
	margin: 0;
	padding: 8px 0 8px 0;
	border-bottom: solid 1px #2989d8;
	text-align: center;
	color: #2487cb;
	font-size: 110%;
}
#content .main .sideBox p {
	color: #555;
	margin: 0;
	padding: 16px;
	font-size: 90%;
}

#content .main .sideBox .info a {
	margin: 8px 8px 8px 16px;
	padding: 0 0 0 20px;
	background: url(../images/icon_shiryou_on.png) no-repeat left center;
	font-size: 115%;
	text-decoration: none;
}

/*投稿ボタン*/
#content .main .sideBox .btn a {
	width: 90%;
	display: block;
    text-align: center;
	margin: 8px auto 16px;
    padding: 0;

    background-image:-moz-linear-gradient(
    top,
    #49a9d4 0%,
    #2989d8 40%,
    #2285d6 52%,
    #2989d8);
 
    background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#49a9d4),
    color-stop(0.49,#2989d8),
    color-stop(0.52,#2285d6),
    to(#2989d8));

	border-radius: 5px;
	box-shadow: 0 0px 10px rgba(0,0,0,0.2);
}
#content .main .sideBox .btn a:hover {
	width: 90%;
	display: block;
    text-align: center;
	margin: 10px auto 14px;
    padding: 0;

    background-image:-moz-linear-gradient(
    top,
    #ffe117 0%,
    #ffc600 40%,
    #ffbc00 52%,
    #ffa00b);
 
    background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#ffe117),
    color-stop(0.49,#ffc600),
    color-stop(0.52,#ffbc00),
    to(#ffa00b));

	border-radius: 5px;
	box-shadow: 0 0px 3px rgba(0,0,0,0.1);

}
#content .main .sideBox .btn a:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}


/* カテゴリ　*/
#content .main .sideBox .box2 {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 8px 8px 30px 8px;
	background: #FFF;
	border: solid 1px #ccc;
}
#content .main .sideBox .box2 h3{
	margin: 0;
	padding: 8px 0 8px 0;
	border-bottom: solid 1px #2989d8;
	text-align: center;
	color: #555;
	font-size: 125%;
}
	
#content .main .sideBox .box2 ul.list {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
#content .main .sideBox .box2 ul.list li a {
	display: block;
	font-weight: bold;
	line-height: 140%;
	margin: 0;
	border-bottom: solid 1px #ccc;
	background: #FFF url(../images/icon_arrow_on.png) no-repeat 8px center;
	padding: 16px 8px 16px 30px;
	text-decoration: none;
}
#content .main .sideBox .box2 ul.list li a:hover {
	background: #F7F7F7 url(../images/icon_arrow_on.png) no-repeat 8px center;
}





/* その他CSS
-------------------------------------------------------------- */


/*詳細ページ　SNS ボタン*/
#sns
{
	width: 100%;
	margin: 10px auto 10px;
	padding: 0;
	overflow: hidden;
	zoom: 1;
}
#sns p {
	font-size: 90%;
	color: #888 !important;
}
.snsb {
	width: 300px;
	float: right;
	margin: 0;
	padding: 0;
}
.snsb li {
	float: right;
	margin-right: 4px;
	text-align: center;
}
.snsb iframe {
	margin: 0 !important;
}
.snsb li.g {
	width: 70px;
}
.snsb li.t {
	width: 90px;
}
.g-plusone{
	margin: 0 -100px 0 0;
	padding: 0;
}


.caption {
	font-size: 80%;
	color: #999;
	font-weight: normal;
}


/*　トップ　リストのページ送り　*/
.formFeed2 {
	float: none;
	padding: 8px 0px;
	border-top: solid 1px #aaa;
	border-bottom: solid 1px #aaa;
	margin: 0px;
	overflow: hidden;
	zoom: 1;
}
.formFeed2 p.previous {
	float: left;
	width: 5em;
	font-size: 100%;
	line-height: 140%;
	padding: 0px 5px 2px 5px;
	margin: 0 2px 16px 2px;

}
.formFeed2 p.after {
	float: right;
	width: 5em;
	font-size: 100%;
	line-height: 140%;
	padding: 0px 5px 2px 5px;
	margin: 0 2px 16px 2px;
	text-align: right;
}
.formFeed2 p a {
	text-decoration: none;
	font-weight: bold;
}
.formFeed2 div.pagination
 {
	 text-align: center;
}	
.formFeed2 div.pagination div.digg2 a
 {
	font-size: 105%;
	font-weight: normal;
}	
div.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #AAAADD;
	text-decoration: none; /* no underline */
	background: #F0F0F0;
	color: #000099;
}
div.pagination a:hover {
	background: #F9F9F9;
	border: 1px solid #0089ff;
	color: #0089ff;
}
div.digg2 a:active {
	background: #EDEDED;
	border: 1px solid #0089ff;
	color: #0089ff;
}
div.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #999999;
	font-weight: bold;
	background-color: #666666;
	color: #FFF;
}



/* 規約　用CSS
-------------------------------------------------------------- */
.box2 {
	background: #F9F9F9;
	border: solid 1px #EDEDED;
	margin: 3em 0;
	padding: 24px 8px 36px 8px;
}
.box2 h3 {
	margin: 0;
	padding: 8px;
	text-align: center;
	font-size: 140%;
}
.box2 dl dt {
	margin: 0;
	padding: 24px 8px 8px 24px;
	text-align: left;
	font-weight: bold;
	font-size: 110%;
}
.box2 dl dd ol {
	margin: 0 0 8px 0;
	padding: 0 16px;
}
.box2 dl dd ol li {
	margin: 0;
	padding: 8px;
	list-style-position: outside;
	list-style-type: decimal;
}

/* フォーム　用CSS
-------------------------------------------------------------- */

/*　入力フォーム　*/
form#fileform {
	padding: 5px;
}
dl.fileform {
	width: 100%;
	margin: 0 0 1em 0;
	padding: 0px;
	overflow: hidden;
	zoom: 1;
	background: #F0F0F0;
}
dl.top {
	margin-top: 30px;
}
dl.fileform dt,
dl.fileform dd
 {
	text-align: left;
	font-weight: normal;
	font-size: 90%;
	line-height: 140%;
	margin: 0;
	padding: 2%;
}
dl.fileform dt {
	width: 25%;
	font-weight: bold;
	float: left;
}
dl.fileform dt .caption,
dl.fileform dt .caption
 {
	color: #999;
	font-size: 80%;
	margin: 0!important;
	padding: 0 !important;
}
dl.fileform dd {
	width: 65%;
	float: left;
	border-left: solid 1px #999999;
	color: #666;
}
dl.fileform dd input {
	margin: 8px 0;
}
dl.fileform dd textarea {
	width: 90%;
	height: 120px;
}
dl.fileform dd .error {
	font-size: 100%;
	font-weight: bold;
	color: #C00;
	margin: 5px;
	padding: 5px 20px 5px 20px;
	background: url(../images/icon_error.png) no-repeat left center;
}

.error {
	font-size: 100%;
	font-weight: bold;
	color: #C00;
	margin: 5px;
	padding: 5px 20px 5px 20px;
	list-style-type: circle;
}


/* 入力フォーム　ボタン */
table.formbotn {
	width: 100%;
	height: auto;
	border-top: solid 1px #999;
}
table.formbotn td {
	text-align: center;
}
.formbotn1
{
	color: #222;
	font-size: 110%;
	line-height: 200%;
	list-style-type: none;
	text-align: center;
	margin: 10px auto;
	background-color: #0089ff;
	padding: 8px;
	display: inline-block;
}
.formbotn2
{
	color: #222;
	font-size: 110%;
	line-height: 200%;
	list-style-type: none;
	text-align: center;
	margin: 10px auto;
	background-color: #F0F0F0;
	padding: 8px;
	display: inline-block;
}
.formbotn1 input,
.formbotn2 input
{
	padding: 8px;
}
.comp {
	margin: 20px 0 0 0;
	padding: 20px 8px;
	font-size: 90%;
	line-height: 180%;
	text-align: center;
	background: #F2F2F2;
}
.comp .check {
	font-size: 115%;
	font-weight: bold;
}


/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 980 pixels. */
@media screen and (max-width: 980px) {

.flex-reverse {
	display: block;
}

#header {
	background: #FFF url(../images/header_bg.png) no-repeat right bottom;
	background-size: 100% auto;
}
#header h1 a {
	font-size: 100%;
}

#selector { property: value; }

/* Header */
#header {
	width: 100%;
	margin: 0px 0px 0px 0px;
}
	
/* 共通 */
#content {
	width: 100%;
}
#footer ul li {
	font-size: x-small;
}
#footer #copy,
#footer #copy a {
	font-size: x-small;
}


/* main */
#content .main {
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 24px 0px 24px 0px;
	float: left;
}


/* メインエリア　用CSS
-------------------------------------------------------------- */

/* メイン　エリア */
#content .main .mainBox {
	width: 96%;
	margin: 3px 2% 24px 2%;
	padding: 0;
}

/*ピックアップ*/
#content .main .mainBox h2 {
	font-size: 115%;
}
#content .main .mainBox h3 {
	font-size: 100%;
}
#content .main .mainBox p {
	font-size: 90%;
	margin: 0px 8px;
}

/*映像リスト*/
#content .main ul.listBox li {
	width: 47%;
	float: left;
	margin: 1% 0.5% 1.5% 1.5%;
	padding: 0 0 8px 0;
	background-color: #FFF;
	border: solid 1px #ccc;
	border-radius: 5px;
	box-shadow: 0 0px 10px rgba(0,0,0,0.2);
}
#content .main ul.listBox li  h3 {
	font-size: small;
	margin: 3px 0;
	font-weight: normal;
}
#content .main ul.listBox li p {
	font-size: x-small;
	border-top: solid 1px #ccc;
}
#content .main ul.listBox li p strong{
	display: block;
	margin-left: -4px;
}


/* サイドエリア　用CSS
-------------------------------------------------------------- */
#content .main .sideBox {
	width: 96%;
	margin: 0;
	padding: 2% 2%;
}
#content .main .sideBox .box {
	width: 92%;
	float: none;
	margin: 4% 2%;
	padding: 2%;
}

/*投稿*/
#content .main .sideBox h3{
	font-size: 100%;
}
#content .main .sideBox p {
	font-size: small%;
}
#content .main .sideBox .info a {
	display: block;
	margin: 8px 8px 30px 16px;
	font-size: 110%;
	text-decoration: none;
}

/*カテゴリ*/
#content .main .sideBox .box2 h3{
	font-size: 100%;
}
#content .main .sideBox .box2 ul.list {
	margin: 0;
	padding: 0;
	font-size: 90%;
}
#content .main .sideBox .box2 ul.list li a {
	padding: 12px 8px 12px 30px;
}


/* サイドエリア　用CSS
-------------------------------------------------------------- */
/*　トップ　リストのページ送り　*/
.formFeed2 div.pagination
 {
	 display: none;
}


/* 規約　用CSS
-------------------------------------------------------------- */
#content .main .pickup h2 {
	font-size: 115%;
}
#content .main .pickup h3 {
	font-size: 100%;
}
#content .main .pickup p {
	font-size: small;
	margin: 8px;
}
.box2 {
	background: #F9F9F9;
	border: solid 1px #EDEDED;
	margin: 1.5em 0;
	padding: 8px;
}
.box2 h3 {
	font-size: 110%;
}
.box2 dl dt {
	margin: 0;
	padding: 3px;
	text-align: left;
	font-weight: bold;
	font-size: 90%;
}
.box2 dl dd {
	margin: 0;
	padding: 0px 8px 8px 8px;
}
.box2 dl dd p {
	font-size: small;
}
.box2 dl dd ol {
	margin: 0 0 8px 8px;
	padding: 0 8px;
}
.box2 dl dd ol li {
	font-size: small;
}

/* フォーム　用CSS
-------------------------------------------------------------- */

/*　入力フォーム　*/
dl.fileform {
	width: 98%;
	margin: 0;
	padding: 5px;
	overflow: hidden;
	zoom: 1;
}
dl.top {
	margin-top: 20px;
}
dl.fileform dt,
dl.fileform dd,
 {
	text-align: left;
	font-weight: normal;
	font-size: medium;
	line-height: 140%;
	margin: 0;
}
dl.fileform dt {
	width: 100%;
	float: none;
	padding : 8px 5px 5px 5px;
	margin: 0;
}
dl.fileform dd {
	width: 96%;
	float: none;
	background: #FDFDFD;
	padding : 10px 5px;
	margin: 0;
	line-height: 140%;
	border: none;
	font-size: small;
}
dl.fileform dd textarea {
	width: 98%;
	height: 120px;
}
dl.fileform dd input[type="text"]
{
	width: 98%;
}
dl.fileform dt .caption
dl.fileform dd .caption {
	font-size: x-small;
	line-height: normal;
	margin: 0;
	padding: 0;
}
dl.fileform dd.btn
{
	background:  transparent;
}


/* 入力フォーム　ボタン */
table.formbotn {
	width: 100%;
	height: auto;
	border-top: solid 1px #999;
}
table.formbotn td {
	text-align: center;
}
.formbotn1
{
	color: #222;
	font-size: 110%;
	line-height: 200%;
	list-style-type: none;
	text-align: center;
	margin: 10px auto;
	background-color: #0089ff;
	padding: 8px;
	display: inline-block;
}
.formbotn2
{
	color: #222;
	font-size: 110%;
	line-height: 200%;
	list-style-type: none;
	text-align: center;
	margin: 10px auto;
	background-color: #F0F0F0;
	padding: 8px;
	display: inline-block;
}
.formbotn1 input,
.formbotn2 input
{
	padding: 8px;
}
.comp {
	margin: 20px 0 0 0;
	padding: 8px;
	text-align: center;
	background: #F2F2F2;
}
.comp .check {
	font-size: 110% !important;
	font-weight: bold;
}
.comp p.text {
	font-size: x-small !important;
}

}