@charset "utf-8";

/*---------------------------------------------------------------------------

common

---------------------------------------------------------------------------*/
.main{
	background-color:#FFF;
	background-size:contain;
}

.bg{
	background-image:url(images/bg.gif);
	background-repeat:repeat;
	background-position:top;
	background-size:contain;
}
.bg a{
	color:#000;
}

/*.side{
	position:relative;
	float:left;
}*/



nav span,h2 span{
	font-family: 'Arvo', serif;
	color:#522e04;
}

h2{
	text-align:center;
	font-size:1.6rem;
	margin-bottom:5%;
	color:#f1d1af;
}

h2 span{
	font-weight:normal;
	font-size:6.0rem;
	line-height:1;
	color:#000;
}

a{
	color:#000;
}

nav span{
	
	font-size:2rem;
}

.side #navTop{
	display:none;
}

footer{
	background-color:#fff;
}

#snsBlock{
	margin:20px 0;
	float:right;
}

.btn{
	text-align:center;
	margin:10px 0;
	display:inline-block;
}

.btn a{
	color:#f1d1af;
	display:block;
	text-align:center;
	padding:5px 10px;
	font-size:80%;
	border:none;
	max-width:280px;
	margin:0 auto;
	text-decoration:none;
	background:#522e04;
}

.btn a:hover{
	background-color:#6b3c05;
	color:#f1d1af;
}

.btnAccess{
	display:block;
}
	
.picRight,.picLeft{
	text-align:left;
}

.caption{
	margin:10px 0;
}

.left{
	float:left;
}

.right{
	float:right;
}

.color1{
	/*background-color:#521303;
	color:#FFF;*/
}

.color1 h2,.color2 h2{
	/*color:#FFF;*/
}

.color2{
	/*background-color:#522e04;
	color:#FFF;*/
}

.color3{
	background-color:#d3d5ba;
}

.commentary{
	padding:20px;
	background-color:#eff6db;
	overflow:hidden;
}

.intro{
	margin-bottom:20px;
}

.ttl{
	margin-bottom:10px;
	text-align:center;
	color: #104E3D;
}

.ttl span{
	font-family: 'Arvo', serif;
	font-size:4rem;
	display:block;
	line-height:1;
	/*letter-spacing: 3px;*/
	color:#104e3d;
	margin-bottom:10px;
}

#special{
	margin:0 auto;
	padding-top:0px;
}
#special div.castBlock{
	/*padding: 5% 5% 0 5%;*/
	margin-bottom:0;
}
#special div.castBlock h3{
	color:#d54c03;
	font-size: 1.7rem;
	margin:10px 0;
}


#special div.castBlock .caption {
font-size: 1.2rem;
}
@media(max-width:480px){
	h2 span{
		font-size:4.0rem;
	}

	footer .btnAccess{
		padding:0 10px;
	}
}

@media(min-width:481px){
	footer{
		padding-bottom:2.0rem;
	}
}

@media(min-width:769px){
	.ttl span{
		font-size:4rem;
	}	
}

@media(max-width:960px){
	body{
		background-color:#FFF;
	}

	.side{
		border-bottom:solid 1px #eee;
	}
	
	.side h1 img{
		width:20%;
		max-width:200px;
		padding:2% 0;
		vertical-align:middle;
	}

	.side nav{
		border-top: solid 1px #eee;
	}

	.naviFooter,.BnrTicket{
		border-top:solid 1px #ddd;
	}
}

@media(min-width:961px){
	.side h1 img{
		width:90%;
	}

	.side h1{
		margin-bottom:20px;
	}

	.naviList{
		padding:10px 30px 30px 30px;
	}

	nav li{
		margin-bottom:4%;
	}
}

/*---------------------------------------------------------------------------

top

---------------------------------------------------------------------------*/
#top .main{
	background-image:none;
}

#top .main .content:first-child{
	padding-top:2%;
}

#top .news{
	font-size:1.4rem;
	line-height:1.6;
}

#top .news a{
	text-decoration:none;
}

#top .news li a{
	display:block;
}

#top .news li .pic{
	position:relative;
}

#top .news li .pic img{
	position:absolute;
	top: 0;
	bottom: 0;
	left:0;
	right:0;
	margin: auto;
}

#top .news .more, .commentMovie{
	text-align:center;
	margin-top:10px;
}

#top .news .more a{
	display:inline-block;
	color:#f1d1af;
	border:none;
	padding:5px 30px;
	text-decoration:none;
	background:#522e04;
}

#top .news .more a:hover{
	background-color:#6b3c05;
	color:#f1d1af;
}

#top .pointBlock{
	overflow:hidden;
}

#top h2{
	text-align:center;
	clear:both;
	margin-bottom:10px;
	color:#f1d1af;
	font-weight:bold;
}

#top .introTtl,#top .point{
	margin-bottom:5%;
	text-align:center;
}

#top .main .btnAccess{
	/*margin-bottom:5%;*/
}

#top .main .btnAccess a{
	max-width:700px;
	box-sizing:border-box;
	text-decoration:none;
	font-size:2.0rem;
}


#top .movie{
	/*max-width:700px;*/
	margin:5% auto;
}

div.index2{
	padding:6%;
	text-align:center;
}

#top .osusume{
	margin:0 auto;
	
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px solid #8e7153;
	text-align:center;
}

#top .osusume img{
	width:60%;
}

#top .otoshidama{
	background:#FFF;
	padding:3%;
	border: 2px solid #C1AC00;
	margin:0 auto;
	width:80%;
	margin-bottom:20px;
	margin-top:20px;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.otoshidama h3{
	color:#d54c03;
	border-bottom:2px dotted #d54c03;
	margin-bottom:10px;
	margin-top:10px;
	font-size: 1.5rem;
	
}


#top #mainvisual{
	text-align:center;
	padding-bottom:30px;
	border-left: solid 1px #eee;
}

#top #mainvisual .PC{
	width:500px;
	margin-left:auto;
	margin-right:auto;
}

#mainvisual2 img{
	width:100%;
}

.arrow_box {
	position: relative;
	background: #d2f1e9;
	margin-top:20px;
	padding:5px 10px;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(210, 241, 233, 0);
	border-bottom-color: #d2f1e9;
	border-width: 10px;
	margin-left: -10px;
}
.arrow_box:before {
	border-color: rgba(0, 0, 0, 0);
	border-width: 16px;
	margin-left: -16px;
}

#hyoutan{
	text-align:center;
	padding:2% 0;
}

@media(max-width:480px){
	#top .point img{
		width:30%;
	}
	
	#top .osusume{
		width:100%
	}
	
	#top .osusume img{
	width:100%;
}
}

@media(max-width:767px){
	#top .news li{
		clear:both;
		margin-bottom:10px;
		overflow:hidden;
	}

	#top .news li .pic{
		float:left;
		width:130px;
		height:90px;
		overflow: hidden;
		margin-right:10px;
	}
	
	#top .news li p{
		overflow:hidden;
	}

	#top .news li p span{
		display:block;
	}

}

@media(min-width:768px){
	#top .bnrOnline{
		text-align:center;
	}

	#top .news ul{
		margin:0 auto;
		overflow:hidden;
		width:640px
	}

	#top .news li{
		margin-bottom:5px;
		width:200px;
		overflow:hidden;
		float:left;
	}
	
	#top .news li:nth-child(even){
		margin:0 20px;
	}
	
	
	#top .news li span{
		font-size:90%;
	}
	
	#top .news li a:hover{
		text-decoration:underline;
	}
	
	#top .news li .pic {
		height:130px;
		overflow: hidden;
		margin-bottom:10px;
	}

}

@media(max-width:960px){
	#top #mainvisual .PC{
		display:none;
	}

	#top #mainvisual .S{
		display:block;
	}
}

@media(min-width:961px){
	#top #mainvisual .PC{
		display:block;
	}

	#top #mainvisual .S{
		display:none;
	}
	
	#hyoutan{
		border-left:solid 1px #f8f8f9;
	}
}

/*---------------------------------------------------------------------------

cast

---------------------------------------------------------------------------*/
div.castBlock{
	overflow:hidden;
	margin-bottom:30px;	
}


#cast h2{
	color:#000000;
}



@media(max-width:765px){
	#cast div.left,#staff div.left{
	float:left;
	width:25%;
}
	#cast div.right,#staff div.right{
		float:right;
		width:70%;
}
}

@media(max-width:480px){
#cast div.left , #cast div.right,#staff div.left , #staff div.right{
	float:none;
	width:100%;
	margin-bottom:6%;
}

#cast div.left div.pic,#staff div.left div.pic{
	width:100%;
	margin:0 auto;
}
}

/*---------------------------------------------------------------------------
pageTop
---------------------------------------------------------------------------*/
#pageTop{
	z-index:1;
	font-size:2.6rem;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color:#ffffff;
	padding:5px 10px;
	text-align:center;
	color:#000;
	clear:both;
}

@media(max-width:480px){
	#pageTop{
		text-align:center;
		margin:0 30%;
		padding:5px 10px 0 10px;
	}
}

@media(min-width:481px){
	#pageTop{
		position: fixed;
		right:10px;
		bottom:10px;
	}

	#pageTop:hover{
		background-color:#000;
		color:#fff;
		cursor:pointer;
	}

}

#wagon h3 span {
background: #104E3D;
color: white;
padding: 1px 5px;
margin-right: 10px;
font-size:1.3rem;
}
#wagon h3{
	font-size:1.6rem;
	color:#D54C03;
}

#wagon .castBlock {
	background:#FFF;
	padding:2%;
	width:42%;
	float:left;
	margin-right:2%;
}

.shopGroup{
	overflow:hidden;
}

#wagon .castBlock {
	background:#FFF;
	padding:2%;
	width:42%;
	float:left;
	margin-right:2%;
}

#wagon .left .pic,#wagon .right .pic,#wagon .pic img{
	width:100%;
}

#nadi div.castBlock,#flower div.castBlock{
	margin-bottom:0;
}
#wagon .date,#nadi .date,#flower .date{
	background:#d2d5a3;
	font-size: 1.2rem;
	padding:2%;
	margin-top:5px;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
}

div.rightMenu{
	overflow:hidden;
	width:44%;
	background:#f4e6cf;
	padding: 2% 2% 1% 2%;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
	
}

div.leftMenu{
	overflow:hidden;
	width:27%;
	margin-bottom:20px;
	background:#f4e6cf;
	padding: 2% 2% 1% 2%;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
	margin-left: 2%;
	/*min-height: 361px;*/
}

div.menuText{
	float:none;
	width:auto;
}

p.leadtext{

	
	font-size:1.5rem;
	text-align:center;
}

p.leadtext b{
	color:#036EB8;
}

p.captionMenu{
	font-size:1.2rem;
	
	padding:2% 0;
}
div.wineBox{
	border:2px  solid #c1ac00;
	padding:2%;
	background:#FFF;
	overflow:hidden;
	width:86%;
	margin:0 auto;
	margin-top:20px;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

div.wineBox h3{
	background:#c1ac00;
	padding: 2% 2%;
	color:#FFF;
	font-weight:bold;
	margin-bottom:20px;
	line-height:1.3;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

div.wineBox h3 span{
	font-size:1rem;
}

div.magotoMenu{
	font-size:1.3rem;
}

@media(max-width:960px){
	div.leftMenu ,div.rightMenu {
		float:none;
		width:90%;
		padding:0% 2% 2% 2%;
		margin-left: 0;
	    min-height: 1px;
	}
	div.leftMenu img ,div.rightMenu img {
		float:left;
		width:45%;
		margin-right:5%;
		
	}	
	
	div.menuText
	{
		float:left;
		width:50%;
	}	
}
@media(max-width:480px){
	div.leftMenu ,div.rightMenu {
		padding: 0% 5% 0 5%;
		margin-left: 0;
		min-height: 1px;
	}
	
	#special div.castBlock h3{
		font-size: 1.5rem;
		
	}
	#special div.castBlock p{
		font-size: 1.4rem;
	}
	div.wineBox h3{
		margin-top:10px;
	}
	
	#special div.castBlock {
		padding:0;
		margin-bottom:20px;
	}
	
	div.wineBox {
		width:94%;
		margin-bottom:30px;
	}
	
	.magotoMenu{
		margin-bottom:20px;
	}
	#wagon h3 {
		margin:15px 0 5px 0;
	}
	
	#top .otoshidama {
		width:94%;
	}
	#wagon div.castBlock{
		width:94%;
		padding:2%;
		min-height:1px;
	}
	
}

#wagon h3 {
		margin:15px 0 5px 0;
	}