/* CSS Document */
body {
    font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "Lucida Grande", Osaka, 'ＭＳ Ｐゴシック', "MS PGothic", sans-serif;
    font-weight: 500;
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    word-break: break-all;
    overflow-x: hidden;
}

#wrapper {
    position: relative;
    width: 100%;
}

#wrapper.fixed {
    position: fixed;
    height: 100%;
}

a {
    color: #53a3d6;  
    text-decoration: underline;
}

a:hover {
    color: #ff6633;
    text-decoration: none;
}

a:hover img {
    text-decoration: none;
    opacity: 0.7;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

img, video, object {
    max-width: 100%;
    height: auto;
    border: none;
    vertical-align: bottom;
    display: block;
}

section {}

/*----inner（標準）----*/
.inner {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    overflow: hidden;
}

/*----inner（テキスト左寄せ）----*/
.innerLeft {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
    overflow: hidden;
}

/*----inner（左右100％）----*/
.inner100 {
    width: 100%;
    margin: 0 auto;
}

/*----inner（ニュース用）----*/
.inner_news {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    overflow: hidden;
}

/*----inner（about用）----*/
.inner_about {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    overflow: hidden;
}

/*---------------------------------------------------
　header
----------------------------------------------------*/
/*menu.css*/

/*---------------------------------------------------
　タイトル（共通）
----------------------------------------------------*/
/*h1の指定はmenu.css*/

h3.title_jp {
    font-weight: 900;
    font-size: 1.4em;
    line-height: 1.2em;
    margin-bottom: 0.5em;
    color: #1a2f6a;
}

h4.title_eng {
    font-weight: 900;
    font-size: 4em;
    line-height: 1.2em;
    color: #6cbcef;
}

/*---------------------------------------------------
　メインイメージ
----------------------------------------------------*/
#mainvisual {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/main.jpg) center center no-repeat;
    background-size: cover;
}

@media screen and (max-width: 767px) {
   #mainvisual {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/main_sp.jpg) center center no-repeat;
    background-size: cover;
}

}




.mv_titleWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 100px auto 50px;
}

.mv_title {
    width: 72%;
}

.mv_beat {
    max-width: 520px;
    width: 100%;
    height: auto;
    margin: 55px 0 15px;
}

.mv_date {
    width: 75%;
}

@media screen and (max-width: 767px) {
    .mv_date {
        width: 75%;
    }
}

.mv_scroll {
    margin: 10px 0;
}

.mv_arrow {}

/*scroll,arrowのアニメーション用CSS*/
.updown {
    /* アニメーションの名前 */
    animation-name: UpDown;
    /* アニメーションの１回分の長さ */
    animation-duration: 0.8s;
    /* アニメーションの回数 */
    animation-iteration-count: infinite;
    /* アニメーションの進行具合 */
    animation-timing-function: ease-in-out;
    /* アニメーション再生の向き */
    animation-direction: alternate;
}

/* アニメーションの設定 */
@keyframes UpDown {

    /* 開始地点 */
    0% {
        /* Y軸0px */
        transform: translateY(15px);
    }

    /* 終了地点 */
    100% {
        /* Y軸50px */
        transform: translateY(30px);
    }
}

/*---------------------------------------------------s
　NEWS
----------------------------------------------------*/
.newslistWrap {
    /*height: 180px; 
overflow-y: scroll; 
background-color:#FFFFFF;
 border-radius:15px;*/
    padding: 10px;
}

.newslist {
    list-style: none outside;
    margin: 0;
    padding: 0;
}

.newslist .item {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #CCC;
    padding: 10px 10px;
}

.newslist .item:first-child {
    border-top: 1px solid #CCC;
}

.newslist .item .date {
    margin: 0;
    min-width: 120px;
    font-size: 16px;
    color: #333;
    padding: 0 20px 0 0;
}

.newslist .item .title {
    margin: 0;
    width: 100%;
    /*text-align:left;*/
}

.newslist .item a:hover .title {
    color: #00F;    color: #00F;
}

@media screen and (max-width: 767px) {
    .newslist .item {
        flex-wrap: wrap;
    }

    .newslist .item .date {
        min-width: 100px;
    }

    .newslist .item .title {
        margin-top: 10px;
    }
}

/*---------------------------------------------------
　Event
----------------------------------------------------*/
#event {
    padding: 100px 0;
   background: linear-gradient(to right, #fceaf0,#ffffff,#daf2fb);

}

@media screen and (max-width: 768px) {
    #event {}
}

.event_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.event_list li {
    padding: 20px 0;
}

.event_item{
 position: relative;
}

.event_arrow{
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(-50%, -50%);
    width:60px;
  }

@media screen and (max-width: 768px) {
    .event_arrow{
    top: 50%;
    right: 0px;
    transform: translate(-30%, 0%);
    width:50px;
  }
}


.event_arrow img:hover {
  transform: translate(20px,0);
  opacity: 1.0;
}

.coming_soon{
background-color: #888;
color: #fff;
width:100%;
max-width: 980px;
font-size:1.3em;
line-height:1em;
margin:10px 0;
}
@media screen and (max-width: 768px) {
.coming_soon{

}
}


/*---------------------------------------------------
　ABOUT
----------------------------------------------------*/
#about {
    padding: 70px 0;
    background: linear-gradient(to right, #2d4d94, #44aaec);
}

@media screen and (max-width: 768px) {
    #about {}
}

.aboutWrap {
    display: flex;
    padding: 0 10px;
    margin-top:60px;
}

@media screen and (max-width: 768px) {
    .aboutWrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.aboutLeft {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: calc(100% - 250px);
    padding-right: 50px;
}

@media screen and (max-width: 768px) {
    .aboutLeft {
        padding-right: 0;
        width: 100%;
    }
}

.about_title {
    font-size: 1.5em;
    line-height: 1.2em;
    font-weight: 700;
    color: #6cbcef;
    padding-bottom: 10px;
}

.about_text {
    font-size: 1em;
    line-height: 1.4em;
    padding-bottom: 50px;
    color: #ffffff;
}

.aboutRight {
    width: 250px;
}

.aboutRight img {
    width: 100%;
    border: 5px solid #FFF;
}

@media screen and (max-width: 768px) {
    .about_pamphlet img {
        width: 60%;
    }
}

#beat_theme {
    position: relative;
    margin-top: 50px;
}

@media screen and (max-width: 768px) {
    #beat_theme {
        margin-top: 30px;
    }
}

#beat_theme img {
    position: absolute;
    top: -20px;
    left: 200px;
    width: 120px;
}

/*---------------------------------------------------
　SNS
----------------------------------------------------*/
#sns {
    padding: 30px 0;
    border: 30px solid #f7b006;
    border-image: linear-gradient(to right, #f2bee7, #a291d0);
     border-image-slice: 1;
}

.sns-style01 {
    margin: 30px auto;
    display: flex;
    justify-content: center;
}

.sns-style01 ul {
    display: flex;
    align-items: center;
}

.sns-style01 ul li {
    padding-left: 20px;
    padding-right: 20px;
}

@media screen and (max-width: 768px) {
    .sns-style01 ul li {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.line_icon img {
    width: 100px;
}

.sns_info{
    font-size: 1.3em;
    font-weight: bold;
    color:#f673b1;
}

/*---------------------------------------------------
　Photoギャラリー
----------------------------------------------------*/
#photo {
    padding: 10px 0;
}

ul.slick01 {
    display: flex;
}

ul.slick01 li {
    padding: 0 5px;
}

/*---------------------------------------------------
　アクセス
----------------------------------------------------*/
#access {
    padding: 70px 0;
    background: linear-gradient(to right, #fceaf0,#ffffff,#daf2fb);
}

@media screen and (max-width: 768px) {
    #access {}
}
.ac_note{
 color:#1a2f6a;
}

@media screen and (max-width: 768px) {
    .ac_note{
 text-align:left;
 font-size: 0.9em;
}
}
.ac_address {
    font-size: 1.2em;
    line-height: 1.6em;
}

@media screen and (max-width: 768px) {
    .ac_address {
        font-size: 1.1em;
    }
}

.access-map {
    width: 100%;
    height: 53.33333vw;
    border: 7px solid #fff;
}

@media screen and (min-width: 768px), print {
    .access-map {
        width: 70vw;
        height: 33.33333vw;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1200px) {
    .access-map {
        width: 840px;
        height: 450px;
    }
}

.access-map iframe {
    width: 100%;
    height: 100%;
}

/*---------------------------------------------------
  Footer
----------------------------------------------------*/
#footer {
    background-color: #333;
    padding: 20px 0;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 768px) {
    #footer {}
}

.footer_name {
    font-size: 1.2em;
}

.copyright {
    font-size: 0.8em;
}

.footer_email a {
    color: #6cbcef;
    text-decoration: none;
}

.footer_email a:hover {
    color: #ff6633;
    text-decoration: underline;
}



/*---------------------------------------------------
 PARTSその他
----------------------------------------------------*/
/*-------PCのみ表示 ------*/
.pc {
    display: block !important;
}

.sp {
    display: none !important;
}

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


/*-------スマホのみ表示 ------*/
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}

/*---トップへボタン----*/
#pagetop {
    position: fixed;
    bottom: 50px;
    right: 30px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    #pagetop {
        bottom: 20px;
        right: 10px;
    }
}

/*-------color ------*/
.white {
    color: #fff;
}

.red {
    color:#f73c3e;
}

.blue {
    color:#6cbcef;
}


.darkblue {
    color:#1a2f6a;
}

/*-------Margin Padding ------*/
.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 30px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mt35 {
    margin-top: 35px;
}

.mt40 {
    margin-top: 40px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb35 {
    margin-bottom: 35px;
}

.mb40 {
    margin-bottom: 40px;
}

/*-------Margin Padding ------*/
.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 30px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}