#topIndex{
    background-image: none;
}

/* heading -----------------------------------------------------------------------------*/
.haeding01{
padding: 30px 10px 20px;
text-align: left;
}

.heading02{
display: block;
margin-bottom: 20px;
text-align: left;
}

.heading02 img{
max-width: 100%;
height: auto;
}

/* flex  -----------------------------------------------------------------------------*/
@media screen and (min-width: 1024px){ /* pc */
    .contentsBlock{
        width: 1023px;
        margin: 0 auto;
        text-align: left;
    }
}

@media screen and (max-width: 1024px) { /* tablet*/
    .contentsBlock{
        padding: 0 10px;
    }
}

/* flex  -----------------------------------------------------------------------------*/

.flexType01__item{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}


.tiwtterBlock iframe {
    width: 100% !important;
}

@media screen and (min-width: 1024px){
    .flexType01.flexType01--style01{
        margin-top: 40px;
    }

    .flexType01{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 1023px;
        margin: 0 auto 40px;
    }

    .flexType01__item:first-child{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 650px;
        flex: 0 0 650px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 836px) {
    .flexType01.flexType01--style01{
        margin-top: 40px;
    }

    .flexType01{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        padding: 0 10px;
        margin: 0 auto 40px;
    }

    .flexType01__item:first-child{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        padding-right: 20px;
    }
}


@media screen and (max-width: 836px) {
    .flexType01{
        width: 100%;
        margin: 0 auto 30px;
        padding: 10px;
        box-sizing: border-box;
    }

    .flexType01__item:last-child{
        margin-top: 40px;
    }

    .tiwtterBlock iframe{
        width: 300px;
        /*width: 100% !important;*/
    }

}

.flexboxList{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 1024px) and (min-width: 836px) {
    /* tablet */
    .flexboxList__item{
        -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    }
}

@media screen and (max-width: 836px) {
    .flexboxList{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
    }

    .flexboxList__item{
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .flexboxList--topSpace{
        margin-top: 10px;
    }

    .flexboxList__item--normal{
        padding-top: 10px;
    }
}

@media screen and (min-width: 1024px) { /* pc */
    .flexboxList__item--normal{
        padding-left: 20px;
    }

    .flexboxList--topSpace{
        margin-top: 20px;
    }

    .flexboxList__item:first-child {
        padding-left: 0;
    }
}

@media screen and (max-width: 1024px) and (min-width: 836px) { /* pc */

    .flexboxList__item--normal{
        padding-left: 20px;
    }

    .flexboxList--topSpace{
        margin-top: 20px;
    }

    .flexboxList__item:first-child {
        padding-left: 0;
    }
}



/* header -----------------------------------------------------------------------------*/
@media screen and (min-width: 1024px) { /* pc */
    .logo{
        margin: 15px 0 0 10px;
    }

    .headerTop{
        background: url(../../img/top/bg_header_01.png) 0 100% no-repeat;
        background-size: 100% auto;
    }

    .headerTop{
        min-height: 176px;
    }

    .logo__img{
        width: auto;
        height: 80px;
    }

    .logo__link{
        position: relative;
    }

    .logo-sub {
        position: absolute;
        width: 69px;
        height: 69px;
        top: -21px;
        right: -1px;
        vertical-align: inherit !important;
    }
}

@media screen and (max-width: 1024px) and (min-width: 836px) { /* tablet */
    .logo{
        margin: 15px 0 0 10px;
    }


    .headerTop{
        min-height: 176px;
    }


    .headerTop{
        background: url(../../img/top/bg_header_01.png) 0 100% no-repeat;
        background-size: 100% auto;
    }

    .logo__link{
        position: relative;
    }

    .logo__img{
        width: auto;
        height: 60px;
    }

    .logo-sub {
        position: absolute;
        width: 51px;
        height: 51px;
        top: -10px;
        right: 0px;
        vertical-align: inherit !important;
    }
}

@media screen and (max-width: 836px) { /* sp */
    .logo{
        padding: 5px 10px;
    }

    .headerTop{
        height: 50px;
        background: rgba(255,255,255,0.6);
        background-size: 100% auto;
    }

    .logo__img{
        width: auto;
        height: 40px;
    }
}

/* gnav -----------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) and (min-width: 836px){ /* tablet */
    .sns_button img{
        width: 35px;
        height: 35px;
    }

    .gnavgationBlock{
        float: right;
        width: 77%;
    }
    .gnavgation__item{
        float: left;
        width: auto;
        margin:10px 0 0 10px;
    }

    .gnavgation__link{
        display: block;
        position: relative;
        width: 116px;
        height: 35px;
        overflow: hidden;
    }
    .gnavgation__img{
        display: block;
        position: absolute;
        top: 0;
        width: 116px;
        height: 70px;
    }
    .gnavgation__img:hover{
        display: block;
        position: absolute;
        top: -35px;
        width: 116px;
        height: 70px;
    }
}

@media screen and (min-width: 1024px) { /* pc */

    .sns_button{
        display: block;
        margin-top: 5px;
    }

    .sns_button:first-child{
        margin-top: 0;
    }

    .sns_button img{
        width: 32px;
        height: 32px;
    }

    .snsItem{
        margin-top: -48px !important;
    }

    .gnavgationBlock{
        float: right;
        width: 75%;
    }


    .gnavgation{
        margin-top: 5px;
    }

    .gnavgation__item{
        float: left;
        width: auto;
        margin:10px 0 0 10px;
    }

    .gnavgation__link{
        display: block;
        position: relative;
        width: 166px;
        height: 50px;
        overflow: hidden;
    }
    a.gnavgation__link:hover {
        -moz-opacity: 1;
        opacity: 1;
    }

    .gnavgation__img{
        display: block;
        position: absolute;
        top: 0;
    }
    .gnavgation__img:hover{
        display: block;
        position: absolute;
        top: -50px;
    }
}

@media screen and (max-width: 836px) { /* sp */

    .sns_button{
        display: inline-block;
        padding-top: 10px;
    }
    .sns_button img{
        width: 42px;
        height: 42px;
    }

    .gnavgation__link{
        display: block;
        position: relative;
        margin: 10px 0 0 10px;
        width: 166px;
        height: 50px;
        text-align: left;
        overflow: hidden;
    }
    .gnavgation__link img{
        display: block;
        margin: 0;
        width: 166px;
        height: auto;
    }
}


/* main picture -----------------------------------------------------------------------------*/
.mainPic__img{
    width: 100%;
    height: auto;
}

@media screen and (min-width: 836px) {
    .mainPic__img{
        position: relative;

    }
    .mainPic__img img{
        position: absolute;
        top: 0;
        -webkit-animation: mainPicAnimation;
        animation: mainPicAnimation;
    }

    .bannerArea__item:nth-child(4){
        text-align: center;
    }
}

@-webkit-keyframes mainPicAnimation {
    0% { }
    100% {width: 200px; height: 50px; background-color: blue;}
}

@keyframes mainPicAnimation {
    0% { }
    100% {width: 200px; height: 50px; background-color: blue;}
}

@media screen and (min-width: 1024px) {
    .sp{
        display: none;
    }
    .pc{
        display: block;
    }


    /* pc */
    #contents{
        position: relative;
        overflow: hidden;
    }

    .mainArea {
        position: absolute;
        top: 183px;
        left: 50%;
        margin-left: -511px;
        width: 1023px;
        height: 100%;
    }

    .bannerArea02{
        position: absolute;
        display: block;
        overflow: hidden;
        bottom: 283px;
        right: 10px;
    }
    .bannerArea02__item{
        float: left;
        margin-left: 10px;
    }
    .bannerArea02__item:first-child{
        margin-right: 0;
    }
    .bannerArea02 img{
        width: 215px;
        height: auto;
    }
}

.bannerArea{
    position: absolute;
    right: 0;
}

.bannerArea__item{
    text-align: right;
    margin-top: 20px;
}

@media screen and (max-width: 1024px) and (min-width: 836px) {
    .sp{
        display: none;
    }
    .pc{
        display: block;
    }

    /* tablet */
    #contents {
        position: relative;
        height: 1110px;
        overflow: hidden;
    }

    .mainArea {
        position: absolute;
        top: 183px;
        width: 100%;
        height: 927px; /* 1110 - 183 */
    }

    .bannerArea{
        right: 10px;
    }

    .bannerArea02{
        position: absolute;
        display: block;
        overflow: hidden;
        bottom: 100px;
        right: 10px;
    }
    .bannerArea02__item{
        margin-left: 10px;
        margin-top: 10px;
    }
    .bannerArea02__item:first-child{
        margin-right: 0;
    }
    .bannerArea02 img{
        width: 215px;
        height: auto;
    }
}

@media screen and (max-width: 836px) {
    .sp{
        display: block;
    }
    .pc{
        display: none;
    }

    /* sp */
    #contents {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .mainArea {
        position: absolute;
        top: 70px;
        width: 100%;
    }

    .mainPic{
       margin-top: 50px;
    }

    .bannerArea{
        width: 100%;
        right: 10px;
        z-index: 10;
    }

    .bannerArea__item{
        margin-top: 10px;
    }

    .bannerArea__link{
        display: block;
    }

    .bannerArea__item:first-child{
        margin-top: 0;
    }

    .bannerArea__item img{
        width: 32%;
        width: 27vw;
        height: auto;
    }
    .bannerArea__item.sp img{
        width: 28%;
        width: 24vw;
    }

    .bannerArea02{
        position: absolute;
        display: block;
        overflow: hidden;
        bottom: 100px;
        right: 10px;
    }
    .bannerArea02__item{
        float: left;
        margin-left: 10px;
    }
    .bannerArea02__item:first-child{
        margin-right: 0;
    }
    .bannerArea02 img{
        width: 215px;
        height: auto;
    }
}

/* topgrid -----------------------------------------------------------------------------*/
#topgrid{
    background: url("../../img/top/bg_index01.png") 0 0 repeat;
}

/* movieBlock -----------------------------------------------------------------------------*/
.movieBlock{
    text-align: left;
}

@media screen and (min-width: 1024px) {

    .movieBlock__titleImg{
        width: 100%;
        height: auto;
    }

    .movieBlockInner{
        width: 1023px;
        margin: -25px auto 0;
        background: url("../../img/top/bg_title01.png") 0 -20px no-repeat;
    }

    .movie_img{
        width: 845px;
        height: 317px;
        margin: 0 auto;
        background: url("../../img/top/bg_movie_01.png") 0 0 no-repeat;
    }

    .movie_img a{
        position: relative;
        display: block;
        width: 510px;
        height: 295px;
        overflow: hidden;
        margin: 0 auto;
    }

    .movie_img  a > img {
        width: 100%;
        height: auto;
    }
    .movie_img  a > span{
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -18px 0 0 -18px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 836px) {
    .movieBlock__titleImg{
        width: 100%;
        height: auto;
    }

    .movieBlockInner{
        width: 100%;
        margin: -25px auto 0;
        text-align: left;
        background: url("../../img/top/bg_title01.png") 0 -20px no-repeat;
    }

    .movie_img{
        width: 845px;
        height: 317px;
        margin: 0 auto;
        background: url("../../img/top/bg_movie_01.png") 0 0 no-repeat;
    }

    .movie_img a{
        position: relative;
        display: block;
        width: 510px;
        height: auto;
        margin: 0 auto;
    }

    .movie_img  a > img {
        width: 100%;
        height: auto;
    }
    .movie_img  a > span{
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -18px 0 0 -18px;
    }

}

@media screen and (max-width: 836px) {
    .movieBlockInner{
        box-sizing: border-box;
        padding: 10px;
        margin: -25px auto 0;
        background: url("../../img/top/bg_title01.png") 0 -20px no-repeat;
        background-size: 230px auto;
    }

    .movieBlock .movieBlock__titleImg{
        width: 100%;
        height: auto;
    }

    .movie_img{
        position: relative;
    }

    .movie_img  a > img {
        width: 100%;
        height: auto;
    }
    .movie_img  a > span{
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -18px 0 0 -18px;
    }
}


/* newsDetailArea -----------------------------------------------------------------------------*/

.bannerBlock a{
    display: block;
    width: 100%;
}
.bannerBlock a img{
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 836px) {
    /*  sp */
    .eventArea{
        margin-top: 40px;
    }

    .eventArea .heading02 img{
        width: 75%;
    }

    .eventBlockArea,
    .newsDetailArea{
        display: block;
        padding: 10px;
        background: rgba(255,255,255,0.6);
    }

    .eventBlockArea__img,
    .newsDetailArea__img{
        position: relative;
    }

    .eventBlockArea__img img,
    .newsDetailArea__img img{
        position: relative;
        width: 100%;
        max-height: 100%;
        margin: 0 auto;
        z-index: 2;

    }
    .newsDetailArea__textArea{
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .newsDetailArea__text{
        position: relative;
        margin-top: 15px;
        padding-bottom: 15px;
        overflow: hidden;
        word-break: break-all;
    }

    .newsDetailArea__text {
        word-break: break-all;
    }

    .newsDetailArea__button{
        margin-top: 20px;
    }

    .newsDetailArea__button a{
        display: block;
        width: 100%;
        padding: 15px 0;
        border-radius: 2px;
        text-align: center;
        background: #f5b2b2;
        color: #fff;
        font-size: 16px;
    }

    .newsDetailArea__button a:after{
        display: inline-block;
        margin-left: 5px;
        width: 8px;
        height: 9px;
        background: url("../../img/top/icon__arrow01.png") 0 0 no-repeat;
        content: "";
    }
}

@media screen and (min-width: 836px){
    /* pc tablet */
    .eventBlockArea,
    .newsDetailArea{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background: rgba(255,255,255,0.6);
    }

    .eventBlockArea{
        padding: 10px;
    }

    .newsDetailArea{
        height: 250px;
    }

    .newsDetailArea__img{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        overflow: hidden;
        max-width: 320px;
        padding: 10px;
    }

    .newsDetailArea__inBox{
        position: relative;
        width: 100%;
        height: 100%;
    }

    .eventBlockArea__img img{
        position: relative;
        display: block;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        z-index: 2;
    }

    .newsDetailArea__img img{
        position: absolute;
        max-width: 100%;
        max-height: 100%;
        left: 50%;
        top: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        -moz-transform: translate3d(-50%, -50%, 0);
        -ms-transform: translate(-50%, -50%);
        transform: translate3d(-50%, -50%, 0);
    }

    .newsDetailArea__textArea{
        display: flex;
        height: 249px;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 400px;
        flex: 1 1 400px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 10px;
    }

    .newsDetailArea__text{
        position: relative;
        margin-top: 3px;
        flex: 0 1 auto;
        overflow: hidden;
        word-break: break-all;
    }

    .newsDetailArea__text {
        word-break: break-all;
    }

    .newsDetailArea__button{
        flex: 0 0 46px;
        padding-top: 20px;
    }

    .newsDetailArea__button a{
        display: block;
        width: 100%;
        padding: 15px 0;
        border-radius: 2px;
        text-align: center;
        background: #f5b2b2;
        color: #fff;
        font-size: 16px;
    }

    .newsDetailArea__button a:after{
        display: inline-block;
        margin-left: 5px;
        width: 8px;
        height: 9px;
        background: url("../../img/top/icon__arrow01.png") 0 0 no-repeat;
        content: "";
    }
}

@media all and (-ms-high-contrast:none) and  (min-width: 836px){
    .newsDetailArea__text { /* ie10 */
        flex: 0 1 102px;
    }
}

@media all and (-ms-high-contrast:none) and  (min-width: 836px){
    *::-ms-backdrop, .newsDetailArea__text{ /* ie11 */
        flex: 0 1 102px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 836px) {
    /*  table  */
    .eventBlockArea__img,
    .newsDetailArea__img{
        position: relative;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        padding-right: 10px;
    }
}

@media screen and (min-width: 1024px) {
    /*  pc  */
    .eventBlockArea__img,
    .newsDetailArea__img{
        position: relative;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 320px;
        flex: 0 0 320px;
        padding-right: 10px;
    }
}

/* tagList -----------------------------------------------------------------------------*/
.tagList__item:first-child{
    padding-left: 0;
}

.tagList__item {
    padding-left: 10px;
}

.tagList__item p{
    padding: 5px 10px;
    border: 1px solid #ffc8c8;
    border-radius: 2px;
    font-size: 12px;
    color: #932121;
    background: #ffe1e1;
}

@media screen and (min-width: 836px) {
    .tagList{
        display: block;
        padding-top: 20px;
    }

    .tagList:after{
        content: "";
        clear: both;
        display: block;
    }

    .tagList__item {
        float: left;
    }
}

@media screen and (max-width: 836px) {
    .tagList{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
        margin-top: 20px;
    }
}

/* newsTopicsBlock -----------------------------------------------------------------------------*/

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

/* eventBlock -----------------------------------------------------------------------------*/
.eventBlock{
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.eventBlockArea{
    height: 100%;
}

.eventBlockArea iframe{
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 836px) {
    .eventBlockArea{
        height: 300px;
        overflow:scroll;
        -webkit-overflow-scrolling:touch;
    }
}

/* radio -----------------------------------------------------------------------------*/
.webradioBlock{
    padding-bottom: 60px;
}

@media screen and (min-width: 1024px){
    .webradioBlock {
        width: 1023px;
        margin: 0 auto;
        text-align: left;
    }
}

@media screen and (max-width: 1024px) and (min-width: 836px) {
    .webradioBlock {
        padding: 0 10px 60px;
    }
}

@media screen and (max-width: 836px) {
    .webradioBlock {
        margin-top: 40px;
        padding: 0 10px 60px;
    }
}

.radioSubTitle{
    text-align: left;
}

.radioSubTitle img{
    max-width: 663px;
    width: 100%;
}

.radioBlock p,
.radioBlock img,
.radioBlock a{
    width: 100%;
}

.radioBlock img{
    height: auto;
}