/*==-----------------------------------------------
CSS Information

 File name:      common.css
 Author:         Crea.,Inc.
 Style Info:     レイアウト関連のスタイル

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



/*============================================
全サイズ基本ベース　（スモールサイズ　320px～599px）
============================================*/

/*==-----------------------------------------------
header
-------------------------------------------------*/
header section{
	position:relative;
}
header section p.btn_menu{
	clear:both;
}
header section p.btn_menu a{
	background:url(/src/pc/image/common/header/menu.png) 0 0 no-repeat;
	background-size:contain;
	text-indent:-9999px;
	display:block;
	width:80px;
	height:40px;
	position:absolute;
	top:0;
	right:0;
}


/*==------header_nav------*/
header #header_nav{
	display:none;
}
header #header_nav section{
	max-width:960px;
	margin:0 auto;
}
header #header_nav section ul{
	background: #fff200;
}
header #header_nav section ul li{
	float:left;
	width:20%;
}

header #header_nav section ul li a{
	display:block;
	width:92%;
	padding:4%;
	border-bottom:solid 1px #FFF;
	border-left:solid 1px #FFF;
	border-collapse: collapse;
	text-decoration:none;
	color:#FFF;
	text-align:center;
	background:#FFF200;
}

/*==-----------------------------------------------
container
-------------------------------------------------*/
#container .breadcrumb,
#topic{
	max-width:960px;
	margin:0 10px 20px 10px;
}

/*==------breadcrumb------*/
#container .breadcrumb{
	font-size:1.2rem;
	font-size:12px;
	text-shadow:1px 1px 0 #FFF;
}

#container .breadcrumb a{
	text-decoration:none;
	background:#FFF200;
	padding:1px 2px;
}

#container .breadcrumb a:hover{
	background:#00a0b3;
	color:#FFF;
	text-shadow:1px 1px 0 #095769;
}

/*==------pagetop------*/
.footer_area p.pagetop{
    position: absolute;
    right:0;
    bottom:20px;
    z-index:100;
}
.footer_area p.pagetop a{
	text-indent:-9999px;
    width: 70px;
    height: 70px;
    display: block;
   	background:url(/src/pc/image/common/pagetop.png) 0 0 no-repeat;
	background-size:contain;
}
/*==------pagetop1------*/
p.pagetop1{
    position: fixed;
    right: 1%;
    bottom: 0;
    z-index:50;
    text-indent:-9999px;
    margin-bottom:50px;
}
p.pagetop1 a{
    width: 90px;
    height: 100px;
    display: block;
   	background:url(/src/pc/image/common/pagetop1.png) 0 0 no-repeat;
}
p.pagetop1 a:hover{
	background-position:0 -100px;
}

/*==------pagetop2------*/
p.pagetop2{
    position: fixed;
    right: 0%;
    bottom:0;
    z-index:100;
    text-indent:-9999px;
    margin-bottom:10px;
}
p.pagetop2 a{
	width: 90px;
	height: 90px;
	display: block;
	background:url(/src/pc/image/common/pagetop2.png) 0 0 no-repeat;
}
p.pagetop2 a:hover{
	background-position:0 -90px;
}
/*==-----------------------------------------------
main
-------------------------------------------------*/
/*==------sns------*/
#container #main .sns{
	margin:0 0 10px 0;
}
#container #main .sns ul{
	margin:0;
}
#container #main .sns ul li{
	float:left;
	margin:0 0 0 10px;
}
#container #main .sns ul li.btn_twitter{
	width:90px;
}
#container #main .sns ul li.btn_friend{
	width:85px;
	height:20px;
}

#container #main .sns ul li.btn_friend a{
	display:block;
	text-indent:-9999px;
	background:url(/src/pc/image/schedule/detail/btn_friend.png) 0 0 no-repeat;
	width:85px;
	height:20px;
	background-size:85px 20px;
}

/*-----ミディアムサイズ-----*/
@media only screen and (min-width:600px){
	#container #main .sns ul{
		float:right;
		margin:0 30px 10px 30px;
	}
}
/*-----ラージサイズ-----*/
@media only screen and (min-width:960px){
	#container #main .sns ul{
		float:right;
		margin:0 30px 10px 30px;
	}
}


/*==------event_area------*/
#container #event_area h1.square{
	margin-bottom:-5px;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-o-border-radius:0;
	-ms-border-radius:0;
	-webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
	-moz-box-shadow: 0 0 0 1px #FFFFFF inset;
	-ms-box-shadow: 0 0 0 1px #FFFFFF inset;
	-o-box-shadow: 0 0 0 1px #FFFFFF inset;
	box-shadow: 0 0 0 1px #FFFFFF inset;
	background:#095769 url(/src/pc/image/common/h1_mark.png) 7px 50% no-repeat;
	background-size:19px auto;
    border: 3px solid #095769;
}
#container article#event_area{
	margin:0 0 20px 0;
	background:none;
}
#container #event_area section.event{
	background: #fff;
	margin:20px 0 10px 0;
	display:block;
}
#container #event_area section.event h2{
	background: #000;
	color:#fff;
	text-shadow:none;
	font-size:1.8rem;
	font-size:18px;
	padding: 3px 3px 2px 10px;
	margin:0;
}

#container #event_area section.event a{
	text-decoration: none;
	color:#000;
	padding:3px;
	display: block;
	box-shadow: 0 0 8px 8px rgba(236, 223, 166, 0.7) inset;
	-webkit-box-shadow: 0 0 8px 8px rgba(236, 223, 166, 0.7) inset;
	-o-box-shadow: 0 0 8px 8px rgba(236, 223, 166, 0.7) inset;
	-ms-box-shadow: 0 0 8px 8px rgba(236, 223, 166, 0.7) inset;
	border:2px solid #000;
}
#container #event_area section.event a:hover{
	background:#FFF200;
}
#container #event_area section.event a .field{
	border: 1px solid #000;
	padding:10px 10px 30px 10px;
	background:url(/src/pc/image/schedule/detail/schedule_detail_kanren_btn.png) 96% 90% no-repeat;
	background-size:60px;
}

#container #event_area section.event a .field div.image{
	width:85px;
	height:85px;
	float: left;
	margin:0;
}

#container #event_area section.event a .field .text p.date{
	font-family:Bodoni MT;
	font-weight:bold;
	font-size:2.0rem;
	font-size:20px;
	border-bottom:1px #cccccc dotted;

}
#container #event_area section.event a .field .text p.date > span{
	font-size:1.2rem;
	font-size:12px;
	font-family:"メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container #event_area section a .field .text p.place{
	font-weight:bold;
	font-size:1.4rem;
	font-size:14px;
	border-bottom:1px #cccccc dotted;
}
#container #event_area section.event a .field .text{
	padding-left:95px;
	min-height:85px;
}
#container #event_area section.event a .field .text p span.time{
	display:block;
	font-size:1.2rem;
	font-size:12px;
}

@media only screen and (min-width:600px){
	#container #event_area h1.square{
		background-size:23px auto;
	}
	#container #event_area section.event{
		margin:20px 10px 10px 10px;
	}
	#container #event_area section.event a .field .text p.date{
		font-size:2.8rem;
		font-size:28px;
	}
	#container #event_area section.event a .field .text p.date > span{
		font-size:1.4rem;
		font-size:14px;
	}
	#container #event_area section.event a .field div.image{
		width:120px;
		height:120px;
	}
	#container #event_area section.event a .field .text{
		padding-left:130px;
		min-height:120px;
	}
	#container #event_area section.event a .field .text p{
		margin:0 15px 10px 15px;
	}
	#container #event_area section.event a .field .text p.place{
		font-size:1.8rem;
		font-size:18px;
	}
	#container #event_area section.event a .field{
		padding:10px 15px;
		background-size:auto;
	}
	#container #event_area section.event a .field .text p span.time{
		display:inline;
		margin-left:10px;
	}
}
@media only screen and (min-width:960px){
	#container #event_area h1.square{
		background-size:30px auto;
	}
}

/*==------feed------*/
#container #main .feed li{
	padding:7px 0;
	border-bottom:1px dotted #878787;
}
#container #main .feed li a{
	text-decoration:none;
	color:#333;
	display:block;
	width:100%;
	padding:3px 0;

	/* CSS3 Transition Magic */
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
}
#container #main .feed li span.date{
	display:block;
	background:#095769;
	color:#FFF;
	width:9em;
	padding:3px 0;
	font-size:80%;
	text-align:center;
	text-shadow:none;
	margin-bottom:5px;
}
#container #main .feed li a:hover{
	background:#FFF200;
	color:#00a0b3;
}
#container #main .feed li a:hover span.date{
	background:#00a0b3;
}

/*==--------------------------------
ミディアムサイズ　600px～
----------------------------------*/
@media only screen and (min-width:600px){
	#container #main .feed li span.date{
		float:left;
		margin:0 15px 0 0;
	}
}
/*==--------------------------------
ラージサイズ　960px～
----------------------------------*/
@media only screen and (min-width:960px){
}

/*==-----------------------------------------------
footer
-------------------------------------------------*/
footer{
	color:#000;
	text-shadow:1px 1px 0 #FFF;
}
footer .logo{
	clear:both;
	margin:0 10px;
}
footer .logo .copyright{
	font-size:0.85rem;
	font-size:8.5px;
}
footer .logo .image{
	margin-bottom:5px;
	width:100px;
}

footer .menu{
   position:relative;
   overflow:hidden;
}
footer .menu ul {
	position:relative;
	left:50%;
	float:left;
	list-style:none;
	margin:0 0 15px 0;
}
footer .menu li{
	position:relative;
	left:-50%;
	float:left;
	margin:0 10px;
	width:56px;
}


/*==------footer_nav------*/
footer #footer_nav{
	font-size:1.1rem;
	font-size:11px;
	float:left;
	margin:0 0 20px 0;
}

footer #footer_nav ul{
	margin:0 10px;
}
footer #footer_nav ul li{
	float:left;
	margin:0 2% 8px 2%;
	background:url(/src/pc/image/common/icon.png) 0 50% no-repeat;
	background-size:10px 10px;
	width:46%;
}

footer #footer_nav ul li a{
	padding-left:15px;
	text-decoration:none;
	color:#000;
}
footer #footer_nav ul li a:hover{
	color:#095769;
}

footer .menu li{
	width:45px;
	height:45px;
}
footer .menu li a{
	display:block;
	width:100%;
	height:100%;
	text-indent:-9999px;
}
footer .menu li.btn_mobile a{background:url(/src/pc/image/common/footer/btn_instagram.png) 0 0 no-repeat; background-size:100%;}
footer .menu li.btn_twitter a{background:url(/src/pc/image/common/footer/btn_x.png) 0 0 no-repeat; background-size:100%;}
footer .menu li.btn_contact a{background:url(/src/pc/image/common/footer/btn_contact_211104.png) 0 0 no-repeat; background-size:100%;}


/*============================================
ミディアムサイズ　600px～959px
============================================*/

@media only screen and (min-width:600px){
/*==------header------*/
	header p.btn_menu a{
		width:80px;
		height:40px;
	}
	header #header_nav section ul li{
		width:10%;
	}
/*==------footer------*/
	footer .logo .copyright{
		font-size:1.1rem;
		font-size:11px;
	}
	footer .logo .image{
		width:175px;
	}
	/*==------pagetop------*/
	p.pagetop a{
	    width: 90px;
	    height: 90px;
	}
	footer #footer_nav ul{
		clear:both;
	}
	footer #footer_nav ul li{
		width:auto;
		margin:0 10px 10px 0;
		width:120px;
	}
}


/*============================================
ラージサイズ　960px～
============================================*/

@media only screen and (min-width:960px){
/*==------container------*/
	#container .breadcrumb,
	#topic{
		margin:0 auto 20px auto;
		width:960px;
	}
/*==------footer------*/
	footer .menu{
		float:right;
	}
	footer .menu ul {
			margin:0;
	}
	footer #footer_nav{
		width:700px;
	}
	footer #footer_nav ul{
		margin:0;
	}
	footer #footer_nav ul li{
		width:130px;
		margin:0 10px 5px 0;
	}
	footer .menu li{
		width:56px;
		height:56px;
	}
	footer .menu li a{
		display:block;
		width:100%;
		height:100%;
		text-indent:-9999px;
	}
	footer .menu li.btn_mobile a{background:url(/src/pc/image/common/footer/footer_nav_240228.png) no-repeat; background-position:0 0;}
	footer .menu li.btn_twitter a{background:url(/src/pc/image/common/footer/footer_nav_240228.png) no-repeat; background-position:-66px 0;}
	footer .menu li.btn_contact a{background:url(/src/pc/image/common/footer/footer_nav_240228.png) no-repeat; background-position:-132px 0;}
	footer .menu li.btn_mobile a:hover{background-position:0 -56px;}
	footer .menu li.btn_twitter a:hover{background-position:-66px -56px;}
	footer .menu li.btn_contact a:hover{background-position:-132px -56px;}
	footer .logo{
		margin:0;
	}
}