@import url(html5reset-1.6.1.css);
/*================================ 
初期設定
================================*/ 
* {
	box-sizing: border-box;
}
body {	
	height: 100%;
	margin: 0;
	background-color:#c6b6a2;/*内容全体の背景色*/
	font-size:1.0rem;
}
#wrapper{
	width:100%;
	margin:0 auto;
/*	min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
/*	min-height: calc(100vh - 250px);*/
}
a{
	color:#333;
}
a:hover{
	opacity:0.7;
}
.illust{
	font-size:0.8rem;
	text-align:right;
}
/*================================ 
メニュー
================================*/ 
header{
	width:100%;
	margin:0;
	position: fixed;
	left: 0;
	top: 0px;
	background: #997f72;
	z-index: 99;
	box-shadow:0 5px 10px rgba(0, 0, 0, 0.12);
}

header h1{
	text-align:center;
	font-size:1.0rem;
	line-height:1.0;
	font-weight:normal;
	padding:20px 0 20px 0;
	color:#d1c0a9;

}

header nav{
	width:960px;
	margin: 0 auto;
	position:relative;
	font-size:1.0rem;
}

header nav p{
	position:absolute;
	top:-40px;
	right:0;
}

header nav .sns{
	top:-40px;
	right:0;
}

header nav .language{
	top:105px;
	right:0;
}

header nav p a{
	color:#d1c0a9;
	line-height:25px;
}

header nav .sns a img{
	width:25px;
	height:25px;
}

header nav .language a img{
	width:38px;
	height:25px;
}


header nav ul{
	width:100%;
	padding: 0;
	text-align: center; 

}
header nav ul li{	
	display: inline-block;/*横並び*/
	width:115px;
	margin:0;
}
header nav ul li a {	
	display: block;
	padding:70px 0 10px 0;
/*	color: #7b645d;*/
	font-size: 0.8;
	text-decoration: none;
	background-size:60px 60px;
	background-repeat: no-repeat;
	background-position:top center;
	height:100px;
	color:#d1c0a9;

}
header nav ul li a:hover {	
	padding-bottom:4px;
	border-bottom:6px solid #7b645d;
	color:#111;
}

header nav ul li.menu_1 a{
	background-image: url("https://garonne.jp/img/menu_1.png");
}
header nav ul li.menu_2 a{
	background-image: url("https://garonne.jp/img/menu_2.png");
}
header nav ul li.menu_3 a{
	background-image: url("https://garonne.jp/img/menu_4.png");
}
header nav ul li.menu_4 a{
	background-image: url("https://garonne.jp/img/menu_3.png");
}
header nav ul li.menu_5 a{
	background-image: url("https://garonne.jp/img/menu_5.png");
}
header nav ul li.menu_6 a{
	background-image: url("https://garonne.jp/img/menu_6.png");
}
header nav ul li.menu_7 a{
	background-image: url("https://garonne.jp/img/menu_7.png");
}
header nav ul li.menu_8 a{
	background-image: url("https://garonne.jp/img/menu_8.png");
}
header nav ul li.menu_1 a:hover{
	background-image: url("https://garonne.jp/img/menu_1a.png");
}
header nav ul li.menu_2 a:hover{
	background-image: url("https://garonne.jp/img/menu_2a.png");
}
header nav ul li.menu_3 a:hover{
	background-image: url("https://garonne.jp/img/menu_4a.png");
}
header nav ul li.menu_4 a:hover{
	background-image: url("https://garonne.jp/img/menu_3a.png");
}
header nav ul li.menu_5 a:hover{
	background-image: url("https://garonne.jp/img/menu_5a.png");
}
header nav ul li.menu_6 a:hover{
	background-image: url("https://garonne.jp/img/menu_6a.png");
}
header nav ul li.menu_7 a:hover{
	background-image: url("https://garonne.jp/img/menu_7a.png");
}
header nav ul li.menu_8 a:hover{
	background-image: url("https://garonne.jp/img/menu_8a.png");
}

main{
	width:960px;
	margin:150px auto 0 auto;
	text-align:center;
/*	min-height: 40vh;*/
	padding-top:1vh;
	overflow:hidden;
}
main a:hover{
	opacity: 0.5;
}

.mobile_nav{
	display:none;
}

.mobile_la{
	display:none;
}
/*================================ 
footer
================================*/ 
.footer{
	height: 120px;
	width:100%;
	background:#eee;
	padding:1em;
	overflow:hidden;
}
footer div{
	width:960px;
	margin:0 auto 0 auto;
	font-size:0.8rem;
	border-right:1px solid #333;
}

footer ul{
	width:20%;
	float:left;
	border-left:1px solid #333;
}
footer ul.end{
	border-right:1px solid #333;
}

footer ul li{
	padding:5px;
}
footer a{
	color:#111;
}
footer a:hover{
	opacity: 0.7;
}
/*================================ 
section
================================*/ 
section{
	margin:0 0 0 0;
	width: 100%;
}

/*================================ 
 メイン(共通部分)
================================*/ 
main .page_guide{
	width:100%;
	text-align:left;
	margin:10px auto;
	line-height:1.5;
}
main .page_guide p{
	margin:0;
	padding:0;
	font-size:0.8rem;
}
main .newsarea{
	width:100%;
	text-align:left;
	margin:10px auto;
	line-height:1.5;
	position:relative;
}

main .newsarea h2{
	position:absolute;
	top:-1px;
	left:0px;
}

main .newsarea ul{
	margin-left:150px;
}
main .newsarea ul li{
	font-size:0.8rem;
	text-align:left;
}

main .newsarea ul li a{
	font-size:0.9rem;
	text-decoration:underline;
}

main .newsarea .more{
	position:absolute;
	top:2px;
	left:520px;
	text-align:center;
	line-height:1.0;
	font-size:0.8rem;
	width:100px;
	margin:0 0 0 auto;
}

main .newsarea .more a{
	display:block;
	line-height:1.0;
	background:#997f72;
	padding:2px 0;
	text-decoration:none;
	color:#eee;
}

main .information{
	width:640px;
	float:left;
}
main .sns{
	width:300px;
	float:right;
}

main .sns .youtube{
	width:100%;
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
	border:5px solid #997f72;
	margin:0 0 2px 0;
}

main .sns .youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

main .sns .twitter{
	width:100%;
	font-size:13px;
	border:5px solid #997f72;
	box-shadow: 5px 5px 15px -10px;
	margin:0 0 10px 0;
}


/*================================ 
 index
================================*/ 
main .about_index{
	width:100%;
	margin:0 auto;
}
main .about_index img{
	width:100%;
	border:5px solid #997f72;
	box-shadow: 5px 5px 15px -10px;
}

main .topics_area{
	width:100%;
	text-align:left;
	margin:35px auto;
	line-height:1.5;
	position:relative;
}
main .topics_area h2{
	position:absolute;
	top:-2px;
	left:0px;
}

main .topics_area ul li p a{
	text-decoration:underline;
}

main .topics_area ul{
	margin-left:120px;
}

main .topics_area ul li{
	text-align:left;
	position:relative;
}

main .topics_area ul li a{
	text-decoration:underlile;
}

main .topics_area ul li div h3{
	font-size:0.9rem;
	font-weight:normal;
	position:absolute;
	top:-1px;
	left:0px;
}

main .topics_area ul li p{
	font-size:0.8rem;
	padding:0 0 0.5rem 0;
	margin-left:90px;
}

main .topics_area ul.live_schedule li p{
	margin-left:0px;
}

main .mobile_mode{
	display:none;
}

main .topics_area .more{
	text-align:center;
	line-height:1.0;
	font-size:0.8rem;
	width:100px;
	margin:0 0 0 auto;
}

main .topics_area .more a{
	display:block;
	line-height:1.0;
	background:#997f72;
	padding:2px 0;
	text-decoration:none;
	color:#eee;
}
/*================================ 
 index 以外共通
================================*/ 
main .contents{
	width:100%;
	text-align:left;
}
main .contents h2 img{
	width:100%;
	border:none;
	box-shadow: 5px 5px 15px -10px;
}
/*================================ 
.live
================================*/
.live ul{
	margin:10px 0 30px 0;
}
.live ul li{
	font-size:0.9rem;
	position:relative;
	margin:0 0 10px 0;
	padding:0 0 10px 5px;
	border-bottom:1px solid #ddc;
}
.live ul li a{
	display:block;
	min-height:20px;
	text-decoration:none;
}
.live ul li a:hover{
	opacity:0.5;
}

.live ul li h3{
	position:absolute;
	top:0px;
	left:10px;
	width:160px;
	font-weight:bold;
	font-size:0.9rem;
}
.live ul li h4{
	position:absolute;
	top:0px;
	left:170px;
	width:400px;
	font-weight:bold;
	font-size:0.9rem;
}
.live ul li p{
	padding-top:20px;
	padding-left:165px;
	font-size:0.8rem;
	line-height:1.2;
}
/*================================ 
.discography
================================*/
.discography{
	padding-bottom:20px;
}
.discography ul{

}
.discography ul li{
	margin:15px 0 0 0;
	overflow:hidden;
}
.discography ul li img{
	float:left;
	width:30%;
}
.discography ul li div{
	float:right;
	width:65%;
}
.discography ul li div p{
	font-size:0.9rem;
	line-height:1.2;
}
/*================================ 
.about
================================*/
.about{
	font-size:0.9rem;
	line-height:1.3;
}
.about h2{
	margin-bottom:15px;
}

.about p{
	padding:0px 0 20px 0;
}

.about ul li{
	width:100%;
	position:relative;
}
.about ul li h3{
	position:absolute;
	top:0px;
	left:0px;
}
.about ul li p{
	padding:0 0 20px 100px;
}
.about .about_image{
	width:100%;
	margin-bottom:0px;
}

.about .illust{
	padding:0;
	margin-bottom:20px;
}
/*================================ 
.topics
================================*/

.topics ul{
	margin-top:15px;
}

.topics ul li{
	position:relative;
	padding:0 0 10px;
	margin:0 0 10px;
	border-bottom:1px solid #ddc;
}

.topics ul li a{
	text-decoration:underlile;
}

.topics ul li div h3{
	font-size:0.9rem;
	font-weight:bold;
	position:absolute;
	top:-1px;
	left:0px;
}
.topics ul li div p{
	font-size:0.9rem;
	margin-left:100px;
	line-height:1.3;
}
/*================================ 
.music
================================*/

.music ul{
	margin-top:15px;
}

.music ul li{
	position:relative;
	padding:0 0 10px 10px;
	margin:0 0 10px;
	border-bottom:1px solid #ddc;
}

.music ul li h3{
	font-size:0.9rem;
	font-weight:bold;
	position:absolute;
	top:0px;
	left:10px;
}
.music ul li div{
	font-size:0.9rem;
	margin-left:200px;
	line-height:2rem;
	overflow:hidden;
}
.music ul li div a{
	display:block;
	float:left;
	line-height:2rem;
	margin-right:3px;
}

.music ul li div a.list_yt{
	background:#222;
	color:#eee;
	padding:0 0.5rem;
	text-decoration:none;
	border-radius: 8px;
}

.music ul li p{
	font-size:0.9rem;
	margin-left:200px;
	line-height:1.2rem;
}
.music ul li .m_icon{
	width:2rem;
}

.music .songdetail{
	background:#eee;
	padding:1rem;
	margin-bottom:1rem;
	border-radius: 10px;
}

.music .songdetail h2{
	font-size:2rem;
	line-height:4rem;
}

.music .songdetail p{

}

.music .songdetail ul{

}

.music .songdetail ul li{
	padding:0;
	height:4rem;
	border:none;
	background:#fff;
	margin-bottom:2px;
}
.music .songdetail ul li img{
	float:left;
	height:4rem;
}
.music .songdetail ul li p{
	padding:0 0 0 1rem;;
	margin:0;
	display:block;
	float:left;
	line-height:4rem;
	font-size:2rem;
	font-weight:bold;
}
.music .songdetail ul li a{
	text-decoration:none;
	display:block;
	width:100%;
}

.music .songdetail ul li a:hover{

}
.music .songdetail div a{
	display:block;
	width:100%;
	line-height:4rem;
	font-size:2rem;
	text-align:center;
	text-decoration:none;
	background:#fff;
	border-radius: 10px;
}

.music .songdetail .lyric{
	padding:0 1rem 1rem 1rem;
}

.music .songdetail .lyric h3{
	line-height:4rem;
	font-size:2rem;
}

.music .songdetail .lyric p{
	line-height:1.5rem;
	font-size:1.2rem;
}

.music .songdetail .lyric p a{
	display:inline;
	background:none;
	border-radius: 0;
	line-height:1.5rem;
	font-size:1.2rem;
	text-align:leftr;
	text-decoration:underline;
}

/*================================ 
.contact
================================*/
.contact .story{
	width:80%;
	margin:15px auto;
	font-size:0.9rem;
	line-height:1.5;
}

.contact ul{
	margin:15px 0 0 0;
	width:100%;

}
.contact ul li{
	overflow:hidden;
	width:100%;
	margin-bottom:1px;
}
.contact ul li h4{
	float:left;
	width:30%;
	line-height:2.0;
	padding:6px 5px 7px 5px;

}
.contact ul li p{
	float:right;
	width:69%;
	line-height:2.0;
	background:#eee;
	padding:5px;
}

.contact ul li p span{
	color:#ff3333;
	font-weight:bold;
	line-height:2.2;
}

.contact ul li p input[type="text"]{
	line-height:2.0;
	width:100%;
}
.contact ul li p textarea{
	width:100%;
	line-height:2.0;
	height:200px;
}

.contact .submit{
	width:100%;
	margin-top:10px;
}

.contact .submit input[type="submit"]{
	width:100%;
	padding:10px;
}
/*================================ 
.horoscope
================================*/
.horoscope {
	font-size:0.9rem;
	padding:0 0 20px 0;
}
.horoscope .story{
	width:100%;
	margin:15px 0;
	line-height:1.3;
}
.horoscope .story p{
	margin:0 0 25px 0;
}
.horoscope .story h3{
	font-size:1.2rem;
	border-bottom:5px solid #7b645d;
}

.horoscope .story ul li{
	width:100%;
	text-align:center;
}
.horoscope .story ul li.select{
	padding:20px 0;
	font-size:1.3rem;
	line-height:1.5;
}
.horoscope .story ul li.select select, .horoscope .story ul li.select option{
	font-size:1.3rem;
	line-height:1.5;
}
.horoscope .story ul li.submit{
	padding:0 0 20px 0;
	border-bottom:5px solid #7b645d;
}
.horoscope .story ul li.submit input{
	font-size:1.3rem;
	line-height:1.5;
	width:40%;
}

.horoscope .result{
	margin:25px 0 0 0;
	font-size:0.9rem;
	line-height:1.2;
	overflow:hidden;
}
.horoscope .result h3{
	font-size:1.1rem;
	line-height:1.4;
	border-bottom:5px solid #7b645d;
	margin:0 0 10px 0;
}

.horoscope .result img{
	float:left;
	padding:0 10px 10px 0;
	width:200px;
}

.horoscope .result div{
	float:right;
	width:420px;
}

.horoscope .result p{
	padding:0 0 20px 0;
	line-height:1.4;
}
.horoscope .result h4{
	font-size:1.1rem;
	border-bottom:2px solid #7b645d;
	padding:0 0 5px 0;
}
.horoscope .result ul li{
	width:50%;
	float:left;
	overflow:hidden;
	padding:5px 0;
	border-bottom:1px solid #7b645d;
}
.horoscope .result .honbun{
	clear: both;

}
.horoscope .result .honbun ul{
	height:80px;

}
.horoscope .result .honbun ul li{
	border:none;
	width:50px;
	height:60px;
	float:left;
	padding:10px 0 0 0;

}

.horoscope .result .honbun ul li img{
	width:50px;
	height:50px;
}

.horoscope .result ul li h5{
	float:left;
	width:50%;
}
.horoscope .result ul li p{
	padding:0;
}
.horoscope .result p#return{
	width:100%;
	padding:0;
}
.horoscope .result p#return a{
	width:100%;
	display:block;
	padding:5px;
	text-align:center;
	text-decoration:none;
	background:#7b645d;
	color:#eee;
}

/*================================ 
.live_detail
================================*/
.live_detail .information{
	font-size:0.9rem;
	line-height:1.2;
	margin:20px 0 0 0;
	width:100%;
	overflow:hidden;
}
.live_detail .information .data_img{
	float:right;
	width:68%;
}
.live_detail .information .data_all{
	width:100%;
}

.live_detail .information div h3{
	border-bottom:5px solid #7b645d;
	font-size:1.2rem;
	line-height:1.2;
}
.live_detail .information div ul{
	margin:10px 0 0 0;
}
.live_detail .information div ul li{
	padding:10px 0 0 0;
}

.live_detail .information div p{
	margin:10px 0 0 0;
	padding:10px 0 0 0;
	line-height:1.5;
	border-top:1px solid #7b645d;
}

.live_detail .information .flyer{
/*	float:left;*/
	width:100%;
	text-align:center;
	margin:20px 0;
}
.live_detail .information .flyer img{
	width:75%;
}