@charset "utf-8";

@font-face {
	font-family:MyFont;
	src:url(../font/Christina.eot);
}
@font-face {
	font-family:MyFont;
	src:url(../font/Christina.ttf) format("truetype");
}

html{
	width: 100%;
/*	height: 100%;
	overflow-y: hidden;*/
}
body{
	font-family: "Helvetica","meiryo","ヒラギノ角ゴシックW3","Osaka","HiraKakuProN-W3","Arial";
	margin: 0px; padding: 0px;
/*	height: 100%;
	background-image: url(../img/back3.jpg);
	background-size: cover;
	background-repeat: no-repeat;*/
	overflow: auto;
}
.error {
	font-size: 12px;
	color: red;
}
.error-msg {
	margin-left: 20px;
	font-size: 12px;
	color: red;
	line-height: 1.7em;
}
#back_img{
	width:100%;
	height:1000px;
	background-image: url(../img/back3.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	position:fixed;
	z-index: -1;
}
input , textarea{
	font-family: "Helvetica","meiryo","ヒラギノ角ゴシックW3","Osaka","HiraKakuProN-W3","Arial";
	font-size: 90%;
}
#load{
	position: absolute;
	margin: 0px; padding: 0;
	width: 100%;
	height: 100%;
	z-index:9999;
	text-align:center;
	background-color: rgba(0,0,0,0.50);
	display: none;
}

#load > div {
	width:200px;
	margin:10px auto;
	border-radius:10px;
	background-color:#A9F5D0;
	
	background: -moz-linear-gradient(
		top,
		#91f2c2 0%,
		#6dd6a2);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#91f2c2),
		to(#6dd6a2));
}

.close_flyer {
	background-color: #ddd;
    border: 3px solid #333;
    border-radius: 50%;
    color: #333 !important;
    font-size: 40px;
    height: 35px;
    left: 50%;
    line-height: 0.9;
    margin-left: 350px;
    position: absolute;
    top: 5px;
    width: 35px;
}

@media screen and (max-width : 830px){
	.close_flyer {
		margin-left: 0;
		left: auto;
		right: 2%;
	}
}

#load a:hover{ color:black; }

a { text-decoration: none; }
a:link { color: black; }
a:visited { color: black; }
a:hover { color: blue; }
a:active { color: blue; }
img { border: none; }

#top-box{
	position: relative;
	width: 96%;
	margin: auto;
	padding: 30px 2% 10px;
	text-align: left;
	z-index:2;
	top:0;
	overflow: hidden;
}

#top-box h1 {
	margin: 0;
}

#content-box{
	position:relative;
	width: 100%;
	margin: auto;
	overflow-x:hidden;
}

#top_img{ 
	border-top:10px solid black;
	border-bottom:10px solid black;
}

#end-box{
	clear:left;
	margin: 5px;
	padding: 5px;
	width: 900px;
	margin: auto;
	text-align: center;
	font-size: 80%;
}

#top_bar_box{
	position:fixed; top: 0px; left: 0px;
	width: 100%;
	height: 20px;
	background-color: black;
	z-index: 100;
}

#top_bar{
	position: relative;
	left: 50%; margin-left: -300px;
	width: 600px; height: 15px;
	font-size: 9px;
	color: white;
}
#top_bar a:link { color: white; }
#top_bar a:visited { color: white; }
#table_top{
	width: 870px; padding: 5px;
	margin-left: 15px;
	border-bottom: 1px dotted black;
	display: inline-block;
	_display: inline;
	font-size: 120%;
	background-color: black;
}
#table_top a{
	color: white;
}
#table_top a:hover{
	color: #ff4500;
}
th{
	width: 150px;
	font-size: 130%;
	text-align: center;
}
#sns{
	position: absolute; top: 30px; right: 10px;
	text-align: right;
}
.twitter-share-button{ vertical-align:bottom; display:inline-block; _display:inline; }
#twitter{
	position: relative;
	margin: 10px;
	width: 280px;
	float: left;
	text-align:center;
}
.icon{
	position: relative;
	margin:10px 1%;
	padding:10px 1%;
	width: 46%;
	float: left;
	background-color: rgba(255,255,255,0.8);
	-moz-border-radius: 20px;    /* Firefox */
   -webkit-border-radius: 20px; /* Safari,Chrome */
   border-radius: 20px;         /* CSS3 */
}
.icon div{
	margin: 10px 1%;
	width:18%;
	float: left;
	text-align: center;
}
.banner div{
	width:48%;
}
.icon p{
	margin: 5px;
	font-size: 80%;
}
#banner{
	position: relative;
	margin: 10px;
	width: 880px;
	float: left;
}
#content_all{
	position: relative; top: -5px;
	margin: 1%;
	width: 98%;
	margin:auto;
	width: 960px;
}
#news_content{
	margin: 1%;
	padding:1%;
	border-radius:10px;
	background-color: rgba(255,255,255,0.8);
}
#news_content h2{
	line-height: 80%;
	margin: 0px 0px;
	padding: 5px;
	color: white;
	background-color: black;
}
#news_content h4{
	margin: 2px 0px;
}
#news_content_div div{
	margin: 5px; padding: 5px;
	border-bottom: 1px dotted black;
}
#news_content_div p{
	position: relative; left: 20px;
	margin-top: 5px;
	font-size: 90%;
}
#live_content{
	margin:10px 1% 0;
	padding:10px 1%;
	width:46%;
	height:330px;
	border-radius:10px;
	background-color: rgba(255,255,255,0.8);
	float:left;
}
#live_content h2{
	line-height: 80%;
	margin: 0px 0px;
	padding: 5px;
	color: white;
	background-color: black;
}
#live_content h4{
	margin: 2px 0px;
}
#live_content_div{
	height:300px; overflow-x:hidden; overflow-y:auto;
}
#live_content_div div{
	margin: 5px; padding: 5px;
	border-bottom: 1px dotted black;
}
#live_content_div p{
	position: relative; left: 20px;
	margin-top: 5px;
	font-size: 90%;
}
#soundcloud{ float:left; margin:10px; text-align:center; }
#soundcloud iframe{ width:640px; height:320px; }
#soundcloud h4{ margin:5px; }
#youtube{ float:left; margin:10px; width:660px; text-align:center; }
#youtube iframe{ width:640px; height:360px; }
#youtube_channel{ float:left; width:660px; margin:10px; text-align:center; }
#youtube_channel a{ padding:5px 10px; border-radius:10px; background-color:rgba(0,0,0,0.7); font-size:120%; color:white; }
#youtube_channel a:hover{ color:skyblue; }
#tys{ width:980px;margin:auto;clear:left; }
#twitter-widget-1{ height:780px; overflow:auto; }


#content_biography{
	position: relative;
	margin: 10px 10px; padding: 10px;
	width: 880px;
	float: left;
	background-color: rgba(255,255,255,0.8);
}
#content_biography p{
	position: relative; left: 20px;
	margin-top: 5px;
	width: 840px;
	font-size: 90%;
	line-height: 1.6em;
}
#content_biography h4{
	margin: 2px 0px;
}
#content_biography img{
	max-width:870px;
}

#content_goods{
	position: relative;
	margin: 0px 10px; padding: 0px;
	width: 880px;
}
#content_goods h2{
	font-size: 170%;
	margin: 10px 10px 0px 10px;
	padding: 30px 7px 3px;
	font-family: helvetica;
	border-bottom: 2px dotted black;
	color: black;
	clear:left;
}
#cd{ position:relative; }
#cd div{
	width: 260px; height: 220px;
	margin: 10px; padding: 5px;
	background-color: rgba(255,255,255,0.8);
	float: left;
}
#cd h4{
	margin: 0px 0px 10px 0px;
}
#cd p{
	margin: 5px; width: 130px;
	font-size: 75%;
	float: left;
}
#cd img{
	margin: 5px 10px 0px 0px;
	width: 100px;
}

#goods div{
	width: 260px;
	margin: 10px; padding: 5px;
	background-color: rgba(255,255,255,0.8);
	float: left;
	text-align: center;
}
#goods img{ max-width: 240px; margin:10px 0; }
#goods p{ font-size:90%; margin:5px; }
#goods span{ color:red; font-size:90%; }
#goods_explain{ background-color: rgba(255, 255, 255, 0.9); font-size: 90%; margin: 20px; padding: 10px; clear: both; }
#goods_explain a{ text-decoration:underline; }


.content-box-photo{ background-color:rgba(255,255,255,0.5); overflow-x:auto; }
#content_photo_box{ width:400%; height:640px; }
.content_photo{
	position: relative;
	margin: 0;
	width: 25%; height: 630px;
	display: inline-block;
}
#content_photo_sp a{ display:inline-block; _display:inline; overflow:hidden; width: 140px; }
#content_photo_sp{ display:none; text-align:center; }
#content_photo_sp img{ position:relative; top:0; left:0; height:140px; width:auto; float:none; display:inline-block; _display:inline; }
.photo{
	margin: 10px;
	float: left;
}
#photo_move{ max-width:880px; margin:10px auto; text-align: right; }
.photo_active{ color:red !important; }

.img_1 { position:absolute; top: 0px; left: 0px; width:450px; height: 300px; }
.img_2 { position:absolute; top: 0px; left: 470px; width:200px; height: 200px; }
.img_3 { position:absolute; top: 0px; left: 690px; width:186px; height: 124px; }
.img_4 { position:absolute; top: 220px; left: 470px; width:200px; height: 200px; }
.img_5 { position:absolute; top: 143px; left: 690px; width:186px; height: 279px; }
.img_6 { position:absolute; top: 320px; left: 0px; width:300px; height: 300px; }
.img_7 { position:absolute; top: 325px; left: 320px; width:132px; height: 88px; }
.img_8 { position:absolute; top: 440px; left: 320px; width:270px; height: 180px; }
.img_9 { position:absolute; top: 440px; left: 610px; width:270px; height: 180px; }



#content_mail{
	position: relative;
	margin: 10px 30px; padding: 10px 30px;
	width: 750px;
	background-color: rgba(255,255,255,0.8);
}
.contact_input{
	position: absolute;
	left: 170px;
	margin-top: 3px;
	width: 200px;
	border: 1px solid grey;
}
/*
#content_mail textarea{
	position: absolute;
	left: 170px;
	margin-top: 3px;
	width: 450px; height: 100px;
}
#content_mail div{
	width: 120px;
	text-align: right;
	display: inline-block;
	_display: inline;
	line-height : 200% ;
	font-size: 90%;
}
*/
#content_mail_table {
	margin-left: 20px;
}
#content_mail_table tr td {
	padding: 3px 15px;
	font-size: 14px;
}
#content_mail_table select {
	padding: 3px;
}
#content_mail_table input[type="text"],
#content_mail_table input[type="email"] {
	padding: 3px;
	width: 300px;
}
#content_mail_table input[type="submit"],
#content_mail_table input[type="reset"],
#content_mail_table input[type="button"] {
	background-color: #ccc;
	padding: 4px;
	margin: 0 4px;
	line-height: 1.5em;
}
#content_mail_table textarea {
	padding: 4px;
	border: 1px solid #aaa;
}
#content_mail p{
	font-size: 80%;
}
#sendbutton{
	position: relative; left: 260px;
}
#resetbutton{
	position: relative; left: 280px;
}

.fb_iframe_widget{ display:inline-block; _display:inline !important; }



@media screen and (max-width : 900px){
	#live_content{ float:none; width:auto; height:auto; margin:10px 1%; }
	#tys{ width:100%; }
	#twitter, #youtube, #youtube_channel, #soundcloud{ width: 96%; margin: 2%; }
	#content_all{
		width: 98% !important; padding: 1%; margin: auto;
	}
	#banner{
		width: 98%; margin: 1%;
	}
	
	.icon{ width: 96%; margin:10px 1%; text-align: center;
	}
	#end-box{
		width: 300px; margin: auto; padding: 0px;
		font-size: 75%;
		text-align: center;
	}
	
	#content_biography{
		margin: 1%; padding: 1%;
		width: 96%;
	}
	#content_biography p{
		left: 5%; width: 95%;
	}
	
	#content_goods{
		margin: 2%;
		width: 98%;
		text-align: center;
	}
	#cd{
		margin: auto;
	}
	
	#content_mail{
		margin: 10px 1%; padding: 10px 1%;
		width: 96%;
	}
	.contact_input{
		left: 25%; width: 60%;
	}
	#content_mail textarea{
		left: 25%; height: 100px;
	}
	#content_mail div{
		font-size: 80%;
	}
	#sendbutton{
		left: 30%;
	}
	#resetbutton{
		left: 35%;
	}

	#content_photo_sp{ display:block; }
	#content_photo_box{ display:none; }
	#photo_move{ display:none; }

	#live_content, #live_content div{ height:auto; }
}

@media screen and (max-width : 640px){
	#soundcloud iframe{ width:284px; height:320px; }
	#youtube iframe{ width:284px; height:160px; }
	#top-box{ position:relative; }
	.bgpmt div{ width:31%; }
	.fb_iframe_widget{ display: block !important; margin-bottom: 10px; text-align: left; }
	.twitter-share-button{ text-align:left; }
	#twitter-widget-1{ overflow:hidden; }
	#news_content_div p{　left: 5px;　}
	#content_mail_table tr td { padding: 3px 0; }
}

@media screen and (max-width : 550px){
	#top-box a img{
		width: 75%;
	}
	#top_bar{
		width: 100%; left: 0px; margin: 0px;
	}
	#sns{
		position: relative; width: 100%; top: 0px; left: 10px;
		text-align: left;
		margin: 5px 0px 0px;
	}
	#content_mail_table { margin-left: 5px; }
	#content_mail_table input[type="text"], #content_mail_table input[type="email"], #content_mail textarea { width: 220px; }
}

@media screen and (max-width : 480px){
	.banner div{ float: none; margin: 10px auto; width:191px; }
}