body{
    font-family: "ヒラギノ角ゴ Pro", "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, "-apple-system", "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
}
#trmContentWrap2016 { width: 100% !important;}
.seasonal-event-content { background: #F5F5F5; font-size: 16px; line-height: 1.6; margin: 0; overflow: hidden; padding: 50px 0 50px; width: 100%; min-width: 980px;}

.event_logo { margin: 0 auto; text-align: center; background:#f5f5f5; padding: 30px 0;}
.event_logo img{ width: 470px;}

/*-----------------------------
top movie
-----------------------------*/
.container{ position: relative; overflow: hidden;}

.breadcrumbs{ padding-top: 30px; position: relative;}
/*
.breadcrumbs::before{ background: #dfdfdf; content: ''; display: block; height: 1px; max-width: 1220px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: calc(100% - 40px);}
*/

.pageTtl{ margin: 0; font-size: 0;}

.leadImg{ width: 980px; margin: 60px auto 0; text-align: center;}

.mainImage{ width: 100%; padding-top: 0;}
.mainMovie{ display: block; width: 100%;}
.mainMovie.black{ background: #000000;}
.mainImage.home{ display: none;}
.mainMovie video{ margin: 0 auto; width: 100%;}
.mainMovie video.test02{ margin: 0 auto; width: 980px; display: block;}

h2.category-title { margin: 50px 0; text-align: center; font-size: 16px; font-weight: normal;}
h2.category-title:after { background-color: #009b1c; content: ''; display: block; height: 1px; margin: 15px auto 0; width: 40px;}
.youtube-wrap { display: flex; -webkit-justify-content: space-between; /*justify-content: space-between;*/ -webkit-align-items: flex-start; align-items: flex-start; margin: 50px auto 90px; width: 980px; justify-content: center;}
.youtube-wrap .youtube-content,
.youtube-wrap .youtube-content iframe{ width: 480px; height:270px;}
.youtube-wrap .youtube-content h3{ font-size: 16px;}
.youtube-wrap .youtube-content p{ font-size: 16px; font-weight: normal; padding: 5px 0 0; text-align: center; width: auto;}

.youtubeAutoWrap{ width: 650px; margin: 70px auto 50px;}
.youtubeAutoWrap .youtubeAutoContent{ width: 100%; padding-top: 56.25%; position: relative; margin-bottom: 10px;}
.youtubeAutoWrap .youtubeAutoContent iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.youtubeAutoWrap .ttl{ text-align: center;}

#calendarBtn.btn_img{ width: 400px; margin: 40px auto;}
#calendarBtn.btn_img a{ display: block; transition: all 0.5s;}
#calendarBtn.btn_img a:hover{ opacity: 0.7;}
#calendarBtn.btn_img img{ width: 100%;}

ul.pickup-event { display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: stretch; align-items: stretch; margin: 50px auto 50px; width: 980px;}
ul.pickup-event li { background: #fff; display: block; line-height: 1.3; margin: 50px 0 0; overflow: hidden; text-align: center; vertical-align: top; /*width: 470px;*/ width: 300px;}
ul.pickup-event li:first-child,
ul.pickup-event li:nth-child(2){ margin-top: 0;}
ul.pickup-event li:nth-child(-n+10) { width: 470px;}
ul.pickup-event li .img{ overflow: hidden;}
ul.pickup-event li .img img { display: block; height: auto; width: 100%; transform: scale(1); transition: all .7s ease;}
ul.pickup-event li a:hover .img img{ transform: scale(1.05);}
ul.pickup-event li .text { padding: 15px 20px;}
ul.pickup-event li h3 { font-size: 20px; margin-bottom: 10px; color: #009b1c; text-align: left; display: block; font-weight: bold;}
ul.pickup-event li h3 span{ font-size: 14px; }
ul.pickup-event li h3 span.new{ display: inline-block; color: #F02629; font-size: 16px;}
ul.pickup-event li p { display: block; font-size: 14px; font-weight: normal; text-align: left; line-height: 1.6;}
ul.pickup-event li a { color: #333; text-decoration: none; transition: all 0.6s; display: block;}
ul.pickup-event li a:hover { opacity: 1;}
ul.pickup-event li img.sp { display: none;}

ul.related-content { display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: stretch; align-items: stretch; margin: 50px auto 90px; width: 980px;}
ul.related-content.mb50 { margin-bottom: 50px}
ul.related-content li { display: block; line-height: 1.3; margin: 0 0 50px; overflow: hidden; text-align: center; vertical-align: top; width: 227px;}
ul.related-content li h3 { font-size: 16px; padding-top: 10px; font-weight: bold;}
ul.related-content li h3 p { display: block; font-size: 14px; font-weight: normal; padding: 5px 10px 10px; text-align: left;}
ul.related-content li a { color: #000; text-decoration: none; transition: all 0.6s;}
ul.related-content li a:hover { opacity: 0.65;}
ul.related-content li a img { height: auto; width: 100%;}

.bnr-wrap { width: 980px; margin: 0 auto;}
.bnr-wrap a{ transition: all 0.6s; display: block; margin-bottom: 15px; text-align: center;}
.bnr-wrap a:last-child{ margin-bottom: 0;}
.bnr-wrap a:hover { opacity: 0.65;}
.bnr-wrap.bottom { margin: 0 auto 90px;}
.bnr-wrap span{ display: block; margin-bottom: 15px; text-align: right; font-size: 14px;}
.bnr-wrap span:last-child{ margin-bottom: 0;}
.bnr-wrap img { width: 100%; margin: 0 auto 0 !important; text-align: center !important;}
/*.bnr-wrap img:first-child{ margin-bottom: 30px;}*/
.bnr-wrap.mb50 {margin-bottom:50px;}
.bnr-wrap.mb100 {margin-bottom:100px;}
.bnr-wrap.mt60 {margin-top: 60px;}

.bnr-wrap.w940_mb50 { width: 940px; margin:0 auto 50px;}
.bnr-wrap.w940_mb50 img{ width: 940px;}
.bnr-wrap.w940_mb50 p { display: block; font-size: 16px; font-weight: normal; padding: 10px 0 0; text-align: center;}
.bnr-wrap.w940 { width: 940px; margin:0 auto 100px;}
.bnr-wrap.w940 img{ width: 940px;}

.bnr-wrap.plan ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.bnr-wrap.plan ul li{ width: 237px;}
.bnr-wrap.plan ul li a{ background: #009b1c; padding: 10px 20px 10px 10px; box-sizing: border-box; display: block; color: #ffffff; font-size: 16px; text-decoration: none; position: relative; font-weight: bold;}
.bnr-wrap.plan ul li a::after{ content: ""; width: 7px; height: 7px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: calc(50% - 5px); right: 15px; transition: all 0.6s;}
.bnr-wrap.plan ul li a:hover::after{ right: 10px;}

.bnrBox{ margin: 40px auto 60px; padding: 0; width: 450px;}
.bnrBox a{ color:#009b1c; text-decoration:none; width:450px; border:solid 3px #009b1c; padding:10px 15px; text-align:center; font-size:20px; font-weight:bold; box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; }
.bnrBox a:hover{ color:#009b1c; text-decoration:underline;}
.bnrBox a::after{ top:20px; right:20px; width: 10px; height: 10px; border-top: 2px solid #009b1c; border-right: 2px solid #009b1c; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; position: absolute;}

.pickup-banner{ width:980px; margin:0 auto;}
.pickup-banner a{transition:all 0.6s; display:block; margin-bottom:30px; text-align:center; text-decoration:none; color:#595959;}
.pickup-banner a:hover{ opacity:0.65;}
.pickup-banner a .text{ padding:15px 25px 15px 0; margin:0; box-sizing:border-box; text-align:center; background:url(../img/top/arrow01.png) no-repeat right center; background-size:12px; font-size:24px; position:relative; display:inline-block;}
/*.pickup-banner a .text::after{ top:26px; right:0; width: 14px; height: 14px; border-top: 2px solid #22AB5B; border-right: 2px solid #22AB5B; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; position: absolute; }*/



/*-- イベント絞り込み --*/
#all{ width:980px; overflow:hidden; margin:60px auto 0;}
#all .controls{ width: 760px; margin: 0 auto;}
#all .controls .wrapMonth{ margin: 10px auto 0;}
#all .controls .wrapMonth:first-child{ margin-top: 0;}
#all .controls .wrapMonth::after{ content: ""; display: block; clear: both;}
#all .controls p.month{ margin: 0 auto 10px; font-size: 24px; font-weight: bold; float: left; width: 2em; color: #22AB5B;}
#all .controls ul{ width: 690px; margin:0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; float: right;}
#all .controls li{ cursor:pointer; display: block; width: 110px; margin: 5px 5px 0 0; text-align: center; background: #ffffff; border: 1px solid #22AB5B; padding: 5px; box-sizing: border-box; font-weight: bold; font-size: 18px; transition: all 0.3s; color: #22AB5B;}
#all .controls li:nth-child(6n){ margin-right: 0;}
#all .controls li:nth-child(-n+6){ margin-top: 0;}
#all .controls li:hover{ background: #22AB5B; color: #ffffff;}
#all .controls li.active{ background: #22AB5B; color: #ffffff;}
#all .controls li .day{ font-size: 12px;}

#eventTtl{ width:980px; margin:60px 0 0;}
#eventTtl .mix{ display:none; opacity:0; margin:0; line-height:1.4;}
#eventTtl .gap{ display:block; width: 100%;}
#eventTtl p.ttl{ text-align: center; font-size: 26px; font-weight: bold; margin-bottom: 10px;}
#eventTtl p.text{ text-align: center; font-size: 18px;}

#grid{ width:1020px; margin:40px 0 0; display: flex; flex-wrap: wrap;}
#grid li.mix{ display:none; opacity:0; width: 300px; vertical-align:top; margin:0 40px 20px 0; line-height:1.4;}
#grid li.gap{ display:block; width:300px;}
#grid li a{ color:#000; text-decoration:none; display: block;}
#grid li a .imgBox{ position: relative; overflow: hidden; margin-bottom: 10px;}
#grid li a .imgBox .img img{ display: block; width: 100%; transition: all 0.5s;}
#grid li a .textBox .ttl{ font-size: 16px; margin-bottom: 10px; font-weight: bold; line-height: 1.4;}
#grid li a .textBox .text{ font-size: 14px;}
#grid li a:hover .imgBox .img img{ transform: scale(1.05);}

#bnrSlide{ width: 100%; margin: 0 auto 70px;}
#bnrSlide .slick-slide{ width: 300px; margin: 0 20px 0;}
#bnrSlide .slick-slide a{ display: block;}
#bnrSlide .slick-slide a img{ display: block; width: 100%;}
#bnrSlide .slick-dots{ width: 980px; margin: 30px auto 0; position: relative; }
.slick-dotted.slick-slider { padding-bottom: 30px;}
.slick-dots { bottom: 15px !important;}
.slick-dots li button::before { display: none;}
.slick-dots li { background: rgba(0, 0, 0, 0.2) !important; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; cursor: pointer; display: inline-block !important; height: 14px !important; margin: 0 10px !important; padding: 0; position: relative; width: 14px !important;}
.slick-active { background: none !important;}
.slick-dots > .slick-active { background: #009b1c !important;}

#mobipas{ width:100px; height:100px; position:fixed; right: 30px; z-index:200; line-height:0;}
#mobipas img{ width:100px; }
#mobipas:hover img{ opacity:0.7; filter:alpha(opacity=70);}

/*-----------------------------
footer
-----------------------------*/
#footer { margin: 30px auto; overflow: hidden; width: 980px; }


#footer p.note { font-size: 12px; float: left; text-align: center; line-height: 150%; max-width: 100%;}

#footer.footer-notes {
	margin-bottom: 50px;
	margin-bottom: 80px;
}




.sp{ display: none;}