@charset "UTF-8";

#container.topContainer{
	width:1260px;
	margin: 0 auto;
}

.topContainer section.bigButton{ margin-bottom:30px; }
.topContainer section.bigButton dl{
	float: left;
	width: calc(50% - 10px);
	margin-right: 20px;
}
.topContainer section.bigButton dl dt
, .topContainer section.bigButton dl dd {
	text-align: center;
}
.topContainer section.bigButton dl dt {
	padding-top: 30px;
}
.topContainer section.bigButton dl dt img { height: 80px; }
.topContainer section.bigButton dl dd {
	padding:5px 0 35px;
	color: #FFF;
	font-size: 169%;
	font-weight: bold;
}
.topContainer section.bigButton dl.listen{ background: #E57320; }
.topContainer section.bigButton dl.play{ margin-right:0; background: #3C8D3E; }
.topContainer section.bigButton dl a{ display: block; }

@media (max-width: 1024px) and (min-width: 768px) {
	#container.topContainer{
		width: 100%;
		padding: 0 20px;
	}
}

@media (max-width: 767px) {
	#container.topContainer{ width: 100%; }
	.topContainer section.bigButton { margin-bottom: 20px; border:1px solid #FFF; border-right:none; }
	.topContainer section.bigButton dl {
		width: calc(50% - 1px);
		margin-right:1px;
	}
	.topContainer section.bigButton dl dt{ padding-top: 15px; }
	.topContainer section.bigButton dl dt img{	height:40px; }
	.topContainer section.bigButton dl dd{
		padding-bottom: 15px;
		font-size:108%;
		font-weight: normal;
	}
}


/** NEWS **/
.topNewsBox { margin-bottom:30px; }
.topNewsBox .topNewsBoxInn{
	padding: 20px 20px 15px;
	border: #CCC 4px solid;
}

.topNewsBox .topNewsBoxInn ul li{
	display: inline-block;
	width: 100%;
	margin-bottom: 15px;
}
.topNewsBox .topNewsBoxInn ul li:last-child{ margin-bottom:0; }
.topNewsBox .topNewsBoxInn ul li a {
	display: block;
	color: #000;
	font-size: 108%;
}
.topNewsBox .topNewsBoxInn ul li a dl dt
, .topNewsBox .topNewsBoxInn ul li a dl dd { float: left; }
.topNewsBox .topNewsBoxInn ul li a dl dd {
    margin:0 0 0 10px;
    width: calc( 100% - 115px )
}


@media (max-width: 767px) {
	.topNewsBox .topNewsBoxInn ul li a dl dt, .topNewsBox .topNewsBoxInn ul li a dl dd{
		float: none;
	}
	.topNewsBox .topNewsBoxInn ul li a dl dt{ margin-bottom:5px; font-weight: bold;	}
	.topNewsBox .topNewsBoxInn ul li a dl dd{
		margin-left:0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 92%;
        width:auto;
	}
}


/** EVENT **/
.topEventBox { margin-bottom:20px; }
.topEventBox .topEventBoxInn{ margin-bottom:5px; }

.topEventBox .topEventBoxInn .eventBigBox a
, .topEventBox .topEventBoxInn .eventRightBox a
, .topEventBox .topEventBoxInn .eventBottomBox a {
	position: relative;
	display: block;
}
.topEventBox .topEventBoxInn .eventBigBox{
	float: left;
	width: 501px;
	height: 501px;
	margin-right: 5px;
}
.topEventBox .topEventBoxInn .eventBigBox img {
	max-width:501px;
	max-height:501px;
}

.topEventBox .topEventBoxInn .eventBigBox a .infoArea{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 8px 15px;
	background: rgba(0,0,0,0.8);
}
.topEventBox .topEventBoxInn a .infoArea p{ 
	line-height: 1.2;
	color: #FFF;
}
.topEventBox .topEventBoxInn a .infoArea p.date{
	margin-bottom: 5px;
	font-size: 92%;
}
.topEventBox .topEventBoxInn .eventBigBox a .infoArea p.eventName{font-size: 108%;}
.topEventBox .topEventBoxInn .eventRightBox a .infoArea
, .topEventBox .topEventBoxInn .eventBottomBox a .infoArea {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 8px;
	background: rgba(0,0,0,0.8);
}
.topEventBox .topEventBoxInn .eventRightBox{
	float: right;
	width: calc(100% - 506px);
}
.topEventBox .topEventBoxInn .eventRightBox ul li
, .topEventBox .topEventBoxInn .eventBottomBox ul li {
	float: left;
	width: 248px;
	height: 248px;
	margin: 0 5px 5px 0;
}
.topEventBox .topEventBoxInn .eventRightBox ul li:nth-child(3)
, .topEventBox .topEventBoxInn .eventRightBox ul li:nth-child(6){
	margin-right: 0;
}
.topEventBox .topEventBoxInn .eventRightBox ul li img
, .topEventBox .topEventBoxInn .eventBottomBox ul li img{
	max-width: 248px;
	max-height: 248px;
}
.topEventBox .topEventBoxInn .eventBottomBox{ clear: both; }
.topEventBox .topEventBoxInn .eventBottomBox ul li:nth-child(5n){ margin-right: 0; }

@media (max-width: 1024px) and (min-width: 768px) {
	.topEventBox .topEventBoxInn{ width: 100%; margin-bottom:0; }
	.topEventBox .topEventBoxInn ul li{
		float: left;
		width:calc(33.333%);
		height: auto;
	}
	.topEventBox .topEventBoxInn ul li a {
		position: relative;
	    display: block;
	}
	.topEventBox .topEventBoxInn ul li a img {
		max-width: 100%;
	}
	.topEventBox .topEventBoxInn ul li a .infoArea {
		position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    padding: 8px;
	    background: rgba(0,0,0,0.8);
	}
}

@media (max-width: 767px) {
	.topEventBox .topEventBoxInn{ width: 100%; margin-bottom:0; }
	.topEventBox .topEventBoxInn ul li{
		float: left;
		width:calc(50%);
		height: auto;
	}
	.topEventBox .topEventBoxInn ul li a {
		position: relative;
	    display: block;
	}
	.topEventBox .topEventBoxInn ul li a img {
		max-width: 100%;
	}
	.topEventBox .topEventBoxInn ul li a .infoArea {
		position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    padding: 8px;
	    background: rgba(0,0,0,0.8);
	}

}

/** OTHER MENU **/
.otherMenuBox { margin:0 0 40px 0; }
.otherMenuBox ul li{
	float: left;
	width: 300px;
	height: 180px;
	margin: 0 20px 0 0;
	border:#CCC 4px solid;
}
.otherMenuBox ul li:last-child{ margin-right:0; }
.otherMenuBox ul li a {
    display: table-cell;
    width: 292px;
    height: 172px;
    vertical-align: middle;
    text-align: center
}
.otherMenuBox ul li a img{
	max-height:40px;
	margin-bottom: 20px;
}
.otherMenuBox ul li:nth-child(3) a img{
	max-height:60px;
	margin-bottom: 10px;
}
.otherMenuBox ul li a p{ 
	font-size:139%;
	font-weight: bold;
}
.otherMenuBox ul li a p.subNavi01{ color: #D93939; }
.otherMenuBox ul li a p.subNavi02{ color: #E88B00; }
.otherMenuBox ul li a p.subNavi03{ color: #468733; }
.otherMenuBox ul li a p.subNavi04{ color: #006699; }
.otherMenuBox ul li a i{
    font-size: 38px;
    color: #468733;
    height: 40px;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .otherMenuBox ul li a i{
        font-size: 45px;
        height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    section.otherMenuBox ul li a img{
        max-height: 50px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
	.otherMenuBox ul li {
		width: calc(50%);
		height: auto;
		margin:0;
	}
	.otherMenuBox ul li:nth-child(1)
	, .otherMenuBox ul li:nth-child(2){
		border-bottom: none;
	}
	.otherMenuBox ul li:nth-child(1)
	, .otherMenuBox ul li:nth-child(3){
		border-right: none;
	}
	.otherMenuBox ul li a {
		display: block;
		width: initial;
		height: initial;
		width: auto;
		height: auto;
	    padding: 10px 0 25px 0;
	}
	.otherMenuBox ul li a p {
		font-size: 100%;
	}
	.otherMenuBox ul li:nth-child(3) a img{margin-bottom:0;}
}

@media (max-width: 767px) {
    section.otherMenuBox ul li a img{
        max-height: 50px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
	.otherMenuBox ul li {
		width: calc(50%);
		height: auto;
		margin:0;
        max-height: 134px;
	}
	.otherMenuBox ul li:nth-child(1)
	, .otherMenuBox ul li:nth-child(2){
		border-bottom: none;
	}
	.otherMenuBox ul li:nth-child(1)
	, .otherMenuBox ul li:nth-child(3){
		border-right: none;
	}
	.otherMenuBox ul li a {
		display: block;
		width: initial;
		height: initial;
		width: auto;
		height: auto;
	    padding: 10px 0 25px 0;
	}
	.otherMenuBox ul li a p {
		font-size: 100%;
	}
	.otherMenuBox ul li:nth-child(3) a img{margin-bottom:0;}
}

/** バナーリスト **/
.topBannerList {
	margin-bottom: 60px;
}
.topBannerList .slide{
	height:70px;
}
.topBannerList .carousel{
	width: 100%;
	margin-left: 40px;
    max-width:calc(100% - 81px);
}
.topBannerList .carousel ul li{
	width: 186px;
	margin-right: 12px;
	/*border:1px solid #CCC;*/
	text-align: center;
}
.topBannerList .carousel ul li a{
    display: table-cell;
    width: 186px;
    height: 68px;
    text-align: center;
    vertical-align: middle;
}
.topBannerList .carousel ul li a img{
	max-width: 186px;
}

.topBannerList .slidePrev
, .topBannerList .slideNext{
	width: 40px;
	height: 70px;
	line-height: 70px;
}
.topBannerList .slidePrev:before
, .topBannerList .slideNext:before{
	font-size: 36px;
	color: #000;
}

@media (max-width: 767px) {
	.slide{ height: 70px!important; }
    /*
	.carousel{
		width: 100%;
		margin: 0!important;
	}
	.topBannerList .carousel ul li{
		float:none;
		margin: 0 auto;
	}
    */
	.topBannerList .slidePrev, .topBannerList .slideNext{
		line-height: 70px!important;
		background: transparent;
	}
}

/** TOPページ共通タイトル **/
.topContainer .topTitBox{
	position: relative;
	height: 55px;
	line-height: 55px;
}
.topContainer .topTitBox h2 { font-size:200%; }
.topContainer .topTitBox a {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 120px;
	height: 55px;
	line-height: 55px;
	color: #FFF;
	font-size: 12px;
	text-align: center;
}
.topContainer .topTitBox a.moreInfo{ background:#999; }
.topContainer .topTitBox a.moreEvent{ background:#D93939; }

@media (max-width: 767px) {
	.topContainer .topTitBox{padding: 0 0 0 10px;}
	.topContainer .topTitBox,
	.topContainer .topTitBox a{
		height:40px;
		line-height:40px;
	}
}

/** PAGE TOP **/
a.pageTop{
	display: block;
	width: 70px;
	height: 40px;
	margin:0 auto 30px auto;
	font-size: 92%;
	font-weight: bold;
	color: #000;
	text-align: center;
}
a.pageTop::before {
	display: block;
	width: 30px;
	height: 16px;
	margin: 0 auto 10px;
	background: url(/img/top/arrowTop.png) no-repeat;
	background-size: 30px auto;
    content: '';
	text-align: center;
}
@media (max-width: 767px) {
	#contentsBox nav#lowerNav{
		margin: 90px 0 30px 0;
	}
}

.topBannerList ul.slideInner{
    /* display: flex; */
    align-items:center;
}