@CHARSET "utf-8";

input,
select,
textarea{
	font-size:16px;
}

body {
	margin:0px;
	background-color:#FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a {
	text-decoration:none;
	color:#000;
}

.balloon {
	padding:5px 5px 5px 5px;
	border-radius:5px;
	border:1px solid #aaaaaa;
}

#headerholder {
	min-width:100px;
	width:100%;
	background-image:url(img/topback.jpg);
	background-repeat:repeat-x;
	height:138px;
}

#header {
	width:1000px;
	margin:0 auto;
	height:138px;
	background-image:url(img/top.jpg);
	background-repeat:no-repeat;
}

#userheaderholder {
	min-width:100px;
	width:100%;
	border-bottom:1px solid #0064b2;
	padding-bottom:2px;
	margin-bottom:3px;
	margin-top:2px;
	padding-top:3px;
	border-top:1px solid #0064b2;
	
}

#userheader {
	max-width:1000px;
	margin:0 auto;
	text-align:center;
}

#userheader img {
	max-width:100%;
}

#maincontainer {
	max-width:1000px;
	width:100%;
	margin:0 auto;
}

#mainleft {
	float:left;
	width:250px;
}

#mainright {
	float:left;
	width:750px;
}

#topleftback {
	width:215px;
}

#loginline {
	margin-left:20px;
	margin-top:5px;
	line-height:20px;
	
	max-width:100%;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom:10px;
}
#logind {
	margin-top:3px;
	line-height:32px;
	margin-right:10px;
}

#logoutbutton {
    background-color: #FFFFFF;
	border:1px solid #AAAAAA;
/*    border: none; */
    color: #000000;
    padding: 5px 15px 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
	border-radius:5px;
	cursor:pointer;
	margin-top:3px;
}

#leftmenu {
	margin-top:10px;
	margin-bottom:20px;
}

.leftmenuitem {
	
	border:2px solid #0065b3;
	border-radius:5px;
	background-color: #88b3d3;
	padding:5px 5px 5px 5px;
	margin:5px 5px 5px 5px;
	text-indent:10px;
	color:#444444;
}

.leftmenuitem:hover {
	background-color:#FFFFFF;
	color:#0065b3;
}


.pagetitle {
	margin-left:20px;
	color:	#0065b3;
	font-size:18px;
	line-height:26px;
	border-bottom:1px solid #78717C;
	margin-top:30px;
	margin-bottom:20px;
}

.kanritable {
	border: 1px solid #aaaaaa;
	margin-left:20px;
	font-size:14px;
}

.kanritable th {
	border: 1px solid $cccccc;
	background-color:#0065b3;
	color:#FFFFFF;
}

.kanritable  td {
	border-bottom:1px #cccccc solid;
	padding-bottom:3px;
	padding-top:2px;
	padding-left:4px;
}

.kanritable tr:nth-child(even) {background: #EEE}
.kanritable tr:nth-ch;ild(odd) {background: #DDD}

.kanritable a:hover {
	text-decoration:underline;
}

.editbox {
	margin-left:20px;
	margin-top:20px;
	margin-bottom:20px;
	border:1px solid #0065b3;
	width:90%;
	padding:10;
}

.opbuttonholder {
	margin-top:5px;
	margin-bottom:15px;	
}

.opbutton {
	margin-left:20px;
	background-color:#dedede;
	height:36px;
	line-height:36px;
}

.inputholder {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom:15px;
}

.inputheader {
	width:25%;
	line-height:30px;
}

.inputdetail {
	width:75%;
}

.inputdetail input[type="text"],
.inputdetail input[type="password"] {
	width:95%;
}

.posterpreview {
	width:300px;
	
}
#videopreview {
	max-width:100%;
	width:300px;
	height:auto;
}

.progressholder {
	width:200px;
	border:1px solid #333333;
	padding:1px 1px 1px 1px;
	display:inline-block;
	border-radius:5px;
}

.progressbar {
	height:24px;
	color:#000000;
	width:0%;
	background:#9da0eb;
	border-radius:5px;
	text-indent:30px;
	line-height:24px;
}

.datetextarea,
.topdescription,
.movierules,
.datesrules,
.accountmailheader,
.accountmailfooter,
.replymailheader,
.replymailfooter {
	width:90%;
	height:100px; 
	
}

.replytextarea {
	width:90%;
	height:250px;
}

.movieholder {
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width:100%;
}

.notwatched {
	background-color:red;
	width:100%;
	color:white;
}

.watched {
	background-color:green;
	width:100%;
	color:white;
}

.videoposter {
	width:300px;
	max-width:80%;
	margin-bottom:15px;
/*	margin-right:30px; */
	margin-left:30px;	
/*	margin-right:auto;  */
}

.videoposter img {
	max-width:100%;
}


.messagelisttitle {
	margin-top:20px;
	font-size:18px;
	margin-bottom:10px;
	border-bottom: 1px solid #acacac;
	padding-left:20px;
}

.messagelistitem {
	border:1px solid #3f3f3f;
	margin-bottom:15px;
	margin-left:5px;
	margin-right:5px;
}

.messagelistdate {
	background-color:#88b3d3;
	color:white;
	font-size:16px;
	line-height:22px;
	padding-left:10px;
}

.messagelisttext {
	padding-left:20px;
	padding-top:20px;
	padding-bottom:10px;
}

.messagelistreplydate {
	padding-left:40px;
	padding-top:5px;
	border-top:1px solid #acacac;
	color:#4a3fe8;
}

.messagelistreplytext {
	padding-left:50px;
	padding-top:20px;
	padding-bottom:10px;
	color:#4a3fe8;
}

.viewed0 {
	color:red;
}

.viewed1 {
	color:blue;
}

.viewed2on {
	color:green;
}

.viewedvideolistitem {
	margin-left:10px;
	
}

.noview {
	color:#6f6f6f;
}

.view {
	color:green;
	font-weight:bold;
}

.vieweddetail {
	display:none;
}

.datesholder {
	border:1px solid #3f3f3f;
	margin-bottom:15px;
	margin-left:20px;
}

.datesheader {
	background-color:#88b3d3;
	color:white;
	font-size:16px;
	line-height:22px;
	padding-left:10px;
}

.datedetail{
	display:inline-block;
	margin-left:30px;
}

.selectedday {
	color:green;
}

.elsewhereday {
	color:#8f8f8f;
	text-decoration: line-through;
}

.notselected {
	
}

.toptitle {
	padding-left:5px;
	padding-right:5px;
	font-size:24px;
	padding-bottom:10px;
	text-align:center;
}

.catchphrase {
	padding-left:5px;
	padding-right:5px;
	font-size:22px;
	padding-bottom:20px;
	text-align:center;
	color:#0064b2;
	font-weight:bold;
}

.topdescriptiontext {
	padding-left:20px;
	padding-right:5px;
	font-size:18px;
	padding-bottom:10px;
}

.movierulestext,
.messaged ,
.datesrulestext {
	padding-left:20px;
	padding-right:5px;
	font-size:18px;
	padding-bottom:20px;
}

#messagetext {
	width:90%;
	height:250px;
	margin-left:10px;
}

.messagesend {
	text-align:center;
	padding-top:5px;
	padding-bottom:20px;
	margin-left:10px;
	width:90%;
}

.datelist {
	margin-left:20px;
	margin-bottom:10px;
}

.avddetail {
	margin-bottom:3px;
	margin-top:5px;
}

.datedescription {
	margin-left:20px;
	margin-bottom:10px;
}

@media screen and (max-width:700px) {

	.toptitle {
		font-size:20px;
	}
	
	.catchphrase {
		.font-size:18px;
	}
	
	#messagetext {
		height:150px;
		margin-left:10px;
	}
	
}

@media screen and (max-width:500px) {
	.toptitle {
		font-size:20px;
		text-align:left;
	}
	
	.catchphrase {
		font-size:20px;
		text-align:left;		
	}
	
	.topdescriptiontext {
		padding-left:5px;
	}

	.movierulestext,
	.messaged,
	.datesrulestext	{
		padding-left:5px;
	}
}