@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

.top-SlideItem{
    width:1280px;
    position:relative;
    z-index:1;
}

#top-Caution{
    width:100%;
    background:#fff;
}

#top-Caution a{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
       align-items: center;
    width:100%;
    max-width:800px;
    margin:0 auto;
    padding:20px;
    font-size:1.6rem;
    box-sizing:border-box;
}

#top-Caution__date{
    color:#999999;
    font-size:inherit;
    padding:0 3em 0 1.5em;
}

#top-Caution__text{
    flex:1;
    color:#e74c3c;
    font-size:inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*------------------------------------------------------------ 
    MENU 
------------------------------------------------------------*/  

#top-Menu{
    width:100%;
    padding:40px 0;
    margin-bottom: 60px;
    background: #f2f2f2;
}

.top-Menu__item{
    width:22.96875%;
    height:254px;
}

.top-Menu__item a{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
        flex-direction: column;
    width:100%;
    height:100%;
    text-align: center;
    color:#333333;
    font-size:1.8rem;
    font-weight: bold;
    background:#fff;
    border-top:15px solid;
    padding: 0 15px 15px;
    box-sizing:border-box;
    transition:all 0.2s ease-out;
    position: relative;
}

.top-Menu__item a div{
    font-size:inherit;
    font-weight: inherit;
}

.top-Menu__item a rt{
    position:relative;
    top:.3em;
    font-size:.5em;
}

.top-Menu__item span{
    font-size: 1.4rem;
    display: block;
    font-weight: bold;
    text-align:center;
    margin-top:0.4em;
    color:inherit;
}

.top-Menu__item a::before,
.top-Menu__item a::after{
    content:"";
    position:absolute;
}

.top-Menu__item a::before{
    width:30px;
    height:1px;
    right:24px;
    bottom:39px;
}

.top-Menu__item a::after{
    width:1px;
    height:30px;
    right:39px;
    bottom:24px;
}

.top-Menu__item .style1{ border-color:#9acc67;}
.top-Menu__item .style2{ border-color:#67b3ff;}
.top-Menu__item .style3{ border-color:#a5e4ed;}
.top-Menu__item .style4{ border-color:#448b56;}

.top-Menu__item .style1:hover{ background:rgba(154,204,103,.2);}
.top-Menu__item .style2:hover{ background:rgba(103,179,255,.2);}
.top-Menu__item .style3:hover{ background:rgba(165,228,237,.2);}
.top-Menu__item .style4:hover{ background:rgba(68,139,86,.2);}

.top-Menu__item .style1::before,
.top-Menu__item .style1::after{ background:#9acc67;}

.top-Menu__item .style2::before,
.top-Menu__item .style2::after{ background:#67b3ff;}

.top-Menu__item .style3::before,
.top-Menu__item .style3::after{ background:#a5e4ed;}

.top-Menu__item .style4::before,
.top-Menu__item .style4::after{ background:#448b56;}


.top-MenuDetail{
    display: none;
    width:100%;
    margin-top:60px;
    background: #fff;
    position: relative;
    z-index: 1;
}

.top-MenuDetail__title{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
    width:294px;
    min-height: 250px;
    text-align: center;
    font-size:1.8rem;
    font-weight: bold;
    color:#333;
}

.top-MenuDetail__list{
    flex:1;
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
    padding:30px 30px 30px 50px;
}

.top-MenuDetail__item:not(:last-child){ margin-right: 70px;}
.top-MenuDetail__item a{
    display:block;
    color:#333;
    font-size:1.6rem;
    line-height:2.2;
    padding-left:22px;
    position: relative;
    transition:all 0.2s ease-out;
}

.top-MenuDetail__item a::before{
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid;
    border-right: 1px solid;
    transform:rotate(45deg) translate(-25%,-25%);
    position: absolute;
    left: 0;
    top: 50%;
}

.top-MenuDetail.style1 .top-MenuDetail__title{ background: rgba(154,204,103,.5);}
.top-MenuDetail.style1 .top-MenuDetail__item a::before{ border-color: #9acc67;}
.top-MenuDetail.style1 .top-MenuDetail__item a:hover{ color: #9acc67;}

.top-MenuDetail.style2 .top-MenuDetail__title{ background: rgba(103,179,255,.5);}
.top-MenuDetail.style2 .top-MenuDetail__item a::before{ border-color: #67b3ff;}
.top-MenuDetail.style2 .top-MenuDetail__item a:hover{ color: #67b3ff;}

.top-MenuDetail.style3 .top-MenuDetail__title{ background: rgba(165,228,237,.5);}
.top-MenuDetail.style3 .top-MenuDetail__item a::before{ border-color: #a5e4ed;}
.top-MenuDetail.style3 .top-MenuDetail__item a:hover{ color: #a5e4ed;}

.top-MenuDetail.style4 .top-MenuDetail__title{ background: rgba(68,139,86,.5);}
.top-MenuDetail.style4 .top-MenuDetail__item a::before{ border-color: #448b56;}
.top-MenuDetail.style4 .top-MenuDetail__item a:hover{ color: #448b56;}

.top-MenuDetail__close{
    display:block;
    width:22px;
    height:22px;
    position:absolute;
    right:24px;
    top:24px;
    z-index:10;
}

.top-MenuDetail__close .cls-1{
    fill:none;
    stroke:#999;
    stroke-miterlimit:10;
}

/*------------------------------------------------------------ 
    NEWS 
------------------------------------------------------------*/  

.top-Headline{
    width:100%;
    margin-bottom: 40px;
}

.top-Headline__title{
    color:#465ea6;
    font-size:2.4rem;
    font-weight: bold;
}

.top-Headline__title span{
    font-size:inherit;
    font-weight: bold;
}

.top-Headline__title::after{
    display:block;
    content:"";
    width:134px;
    height:6px;
    margin-top:10px;
    background:#465ea6;
}

.top-Headline__more a{
    display:block;
    color:#000;
    font-size:1.4rem;
    padding:0 14px 11px 0;
    position: relative
}

.top-Headline__more a::after{
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid #465ea6;
    border-right:1px solid #465ea6;
    transform:rotate(45deg);
    position:absolute;
    right:2px;
    top: 8px;
}

.top-Headline__more a::before{
    display:block;
    content:"";
    width:100%;
    height:1px;
    background:#465ea6;
    position:absolute;
    left:0;
    bottom:0;
    transition: all 0.6s cubic-bezier(0.21, 1, 0.84, 1.01);
    transform-origin: right top;
}

.top-Headline__more a:hover::before{ animation: hover-anime01 1.2s cubic-bezier(0.19, 1, 0.22, 1);}

@keyframes hover-anime01 {
    0% {
		transform-origin: right top;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    25% {
		transform-origin: right top;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

	50% {
		transform-origin: left top;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
	100% {
		transform-origin: left top;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

#top-News{
    flex:1;
    padding-right:50px;
}


#top-Fb{ width:280px;}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe{
    width: 100% !important;
}

/*------------------------------------------------------------ 
    EVENT 
------------------------------------------------------------*/  

#top-Event{
    width:100%;
    margin-top:80px;
}

/*------------------------------------------------------------ 
    MAP 
------------------------------------------------------------*/  

#top-Map{
    width:100%;
    height:460px;
    margin-top:100px;
    position: relative;
}

#top-Map iframe{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
}

/*------------------------------------------------------------ 
    Advertising 
------------------------------------------------------------*/  

#top-Advertising{
    width:100%;
    margin-top: 80px;
}

#top-Advertising dt{
    color:#666;
    font-size:1.6rem;
    margin-bottom: 0.6em;
}

.top-Advertising__item{
    width:calc(25% - 25px);
    box-sizing:border-box;
}

.top-Link__text{ margin-top:24px;}
.top-Link__text + .top-Link__text{ margin-top:calc(24px*.75);}

.top-Link__text a{
    display:inline-block;
    color:#666;
    font-size:1.6rem;
    padding-right:16px;
    position: relative;
    transition:all 0.2s ease-out;
}

.top-Link__text a::before{
    content:"";
    width:8px;
    height:8px;
    border-right:2px solid #465ea6;
    border-top:2px solid #465ea6;
    position:absolute;
    right:0;
    top:50%;
    transform:rotate(45deg) translate(0%,-50%);
    transition:all 0.2s ease-out;
}

.top-Link__text a::after {
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: #465ea6;
    position: absolute;
    left: 0;
    bottom: -20%;
    transform-origin: right top;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    transform: scaleX(0);
}

.top-Link__text a:hover::after{
	transform: scaleX(1);
    transform-origin: left top;
}


/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

@media screen and (max-width: 1280px){

    .top-Menu__item a{ font-size:1.6rem;}

}

/* TABLET */
@media screen and (min-width: 835px){
    .top-SlideItem.swiper-slide-next::before,
    .top-SlideItem.swiper-slide-prev::before,
    .top-SlideItem.swiper-slide-duplicate-next::before,
    .top-SlideItem.swiper-slide-duplicate-prev::before{
        content:"";
        width:100%;
        height:100%;
        background:rgba(0,0,0,.5);
        position:absolute;
        left:0;
        top:0;
        z-index: 10;
    }
}

@media screen and (max-width: 834px){

.top-SlideItem{ width:100%;}
.top-SlideItem img{
    height:45vw;
    object-fit:cover;
    object-position: 50%;
}

#top-Caution a{
    font-size:1.4rem;
    padding:16px 20px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

#top-Caution__date{ padding:0 1.5em 0 1em;}

/* MENU */

#top-Menu{
    padding:30px 0;
    margin-bottom: 48px;
    position: relative;
}

.top-Menu__item{
    width:calc(50% - 10px);
    height:calc(254px*.8);
}

.top-Menu__item:nth-child(n+3){ margin-top:20px;}

.top-Menu__item a{
    font-size:1.6rem;
    border-top-width:12px;
    padding: 0 12px 12px;
}

.top-Menu__item a::before{
    width:24px;
    right:20px;
    bottom:32px;
}

.top-Menu__item a::after{
    height:24px;
    right:32px;
    bottom:20px;
}

.top-MenuDetail{
    margin-top:0;
    width:calc(100% - 40px);
    min-height: calc(100% - 60px);
    position:absolute;
    top:30px;
    left:20px;
    box-shadow:rgba(149, 157, 165, .2) 0px 0 10px;
}

.top-MenuDetail__title{
    width:100%;
    min-height:90px;
    font-size:1.6rem;
}

.top-MenuDetail__list{
    flex:unset;
    padding:30px;
}

.top-MenuDetail__item:not(:last-child){ margin-right: 40px;}

.top-MenuDetail__close{ top:34px;}

/* NEWS */

.top-Headline{ margin-bottom: 30px;}
.top-Headline__title{ font-size:2rem;}

.top-Headline__title::after{
    width:108px;
    height:4px;
    margin-top:8px;
}

#top-News{
    flex:unset;
    width:100%;
    padding-right:0;
}

#top-Fb{
    width:100%;
    max-width:500px;
    margin:60px auto 0;
    position:relative;
}

/* MAP */
#top-Map{
    height:400px;
    margin-top:40px;
}

/* Advertising */

#top-Advertising{ margin-top: 40px;}

.top-Advertising__item{ width:calc(50% - 10px);}
.top-Advertising__item:nth-child(n+3){ margin-top:20px;}





}


/* SP */

@media screen and (max-width: 480px){

.top-SlideItem img{ height:50vw;}

#top-Caution a{
    padding:15px;
    flex-wrap:wrap;
}

#top-Caution svg{
    width:calc(28px*.8);
    height: auto;
}

#top-Caution__date{ padding-left: 0.8em;}

#top-Caution__text{
    flex:unset;
    width:100%;
    padding-left:33px;
    box-sizing:border-box;
}

/* MENU */

#top-Menu{
    padding:20px 0;
    margin-bottom: 30px;
}

.top-Menu__item{
    width:calc(50% - 6px);
    height:calc(100vw * 160/480);
}

.top-Menu__item:nth-child(n+3){ margin-top:12px;}

.top-Menu__item a{
    font-size:1.4rem;
    border-top-width:8px;
    padding: 0 8px 8px;
}

.top-Menu__item span{ font-size:1.2rem;}

.top-Menu__item a::before{
    width:16px;
    right:10px;
    bottom:18px;
}

.top-Menu__item a::after{
    height:16px;
    right:18px;
    bottom:10px;
}

.top-MenuDetail{
    width:calc(100% - 30px);
    min-height: calc(100% - 40px);
    top:20px;
    left:15px;
}

.top-MenuDetail__title{
    min-height:60px;
}

.top-MenuDetail__list{
    padding:15px;
    display: block;
}

.top-MenuDetail__item{ width:100%;}
.top-MenuDetail__item:not(:last-child){ margin:0;}
.top-MenuDetail__item a{ font-size:1.4rem;}

.top-MenuDetail__close{
    top:19px;
    right:19px;
}

/* NEWS */

.top-Headline{ margin-bottom: 26px;}
.top-Headline__title{ font-size:1.8rem;}

.top-Headline__title::after{
    width:92px;
    height:3px;
}

/*
.top-Headline__more{
    margin-top:24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; 
}
*/

.top-Headline__more a{ font-size:1.3rem;}

#top-Fb{ margin-top:40px;}
#top-Event{ margin-top:60px;}

/* MAP */

#top-Map{
    height:300px;
    margin-top:30px;
}

/* Advertising */

#top-Advertising{ margin-top: 40px;}

.top-Advertising__item{ width:calc(50% - 6px);}
.top-Advertising__item:nth-child(n+3){ margin-top:12px;}

.top-Link__text{ margin-top:20px;}
.top-Link__text + .top-Link__text{ margin-top:calc(20px*.75);}

.top-Link__text a{ font-size: 1.4rem;}



}



@media screen and (max-width: 380px){

    .top-Menu__item a{ font-size: 1.2rem;}

}