@charset "utf-8";
/*-------------------------------------------
topページ
-------------------------------------------*/

/*  

top共通
バナースライダー
共通パーツ
news/live共通
news
live
movie
sns

*/

/* top共通 */
.main {
padding-top: 133px;
font-family:'Hiragino Kaku Gothic ProN';
min-height: calc(100vh - 200px);
}

.kv {
position: relative;
width: auto;
margin: 0 auto 24px;
height: 520px;
text-align: center;
}

.kv img {
height: 100%;
padding-top:20px;
}

@media (max-width:499px) {
.kv {
    height: 400px;
}
.kv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
}

/* バナースライダー */
.slick_wrapper {
margin: 0 auto;
padding: 0 20px;
max-width: 1100px;
box-sizing: content-box;
}

.slick_wrapper > .banner-slick {
list-style: none;
}

.banner-slick img {
width: 100%;
}

.banner-slick li {
margin: 6px;
}

.slick-arrow:before {
content: "" !important;
}

.slick-arrow {
width: 20px;
height: 20px;
z-index: 10;
transition: .3s;
}

.slick-arrow:hover {
width: 26px;
height: 26px;
}

.slick-prev {
border-left: 4px solid #0d2a67;
border-top: 4px solid #0d2a67;
top: 50%;
left: 0px !important;
transform: translateY(-50%) rotate(315deg) !important;
-webkit-transform: translateY(-50%) rotate(315deg) !important;
}

.slick-next {
border-left: 4px solid #0d2a67;
border-top: 4px solid #0d2a67;
top: 50%;
right: 0px !important;
transform: translateY(-50%) rotate(135deg) !important;
-webkit-transform: translateY(-50%) rotate(135deg) !important;
}

button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
padding: 0;
}

/* 共通パーツ */
.top-h2 {
font-family: Palatino, Georgia;
color: #0d2a67;
font-weight: bold;
font-size: 2rem;
margin-bottom: 50px;
text-align: left;
}

.top_btn {
background-color: #fff;
width: 298px;
padding: 16px 0;
border: 1px solid #0d2a67;
margin: 30px auto 50px;
font-size: 0.875rem;
text-decoration: none;
color: #0d2a67;
font-weight: 600;
position: relative;
transition: .3s;
}

.top_btn:hover {
background-color: #0d2a67;
color: #fff;
}

.top_btn.to-live:hover {
background-color: #d4ddf1;
color: #0d2a67;
}

.top_btn::after {
content: "";
border-top: 2px solid #0d2a67;
border-left: 2px solid #0d2a67;
width: 10px;
height: 10px;
transform: translateY(-50%) rotate(135deg);
-webkit-transform: translateY(-50%) rotate(135deg);
top: 50%;
right: 40px;
position: absolute;
}

@media (max-width:499px) {
.top-h2 {
    font-size: 1.5rem;
    margin-bottom: 32px;
    text-align: left;
}

.top_btn {
    background-color: #fff;
    max-width: 298px;
    width: 100%;
    padding: 14px 0;
    margin: 24px auto 32px;
}
}

/* news・live共通 */
.article_list {
list-style: none;
text-align: left;
}

.article_list > li + li {
margin-top: 16px;
}

.article_list > li > a {
display: flex;
border-bottom: 1px solid #dddddd;
padding-bottom: 16px;
text-decoration: none;
cursor: pointer;
}

.article_list li h3 {
font-size: 0.875rem;
line-height: 180%;
color: #222;
}

.article_list li .date {
font-size: 0.75rem;
line-height: 100%;
color: #666;
}

.article_list > li > a > div + div {
margin-left: 16px;
}

/* news */
#top_news {
margin: 50px auto 0;
padding: 0 20px;
max-width: 1100px;
box-sizing: content-box;
text-align: center;
}

.article_list li .cat {
font-size: 0.625rem;
background-color: #0d2a67;
color: #fff;
padding: 4px 0;
width: 56px;
text-align: center;
margin-bottom: 8px;
}

.cat_wrapper{
display: flex;
flex-direction: column;
}

.cat.members-only{
background-color: #bcb63f!important;
order: -1;
}

/* live */
#top_live {
text-align: center;
background-color: #0d2a67;
color: #fff;
padding-top: 50px;
}

#top_live>.inner>.top-h2 {
color: #fff;
}

#top_live>.inner {
margin: 0 auto;
padding: 0 20px;
max-width: 1100px;
box-sizing: content-box;
}

#top_live .article_list li h3 {
color: #fff;
}

.article_list li .live_cat {
font-size: 0.625rem;
background-color: #0d2a67;
color: #fff;
border: 1px solid #fff;
padding: 4px 0;
width: 56px;
text-align: center;
font-weight: 300;
}

.article_list li .live_cat.live-live {
font-size: 0.625rem;
background-color: #fff;
color: #0d2a67;
border: none;
padding: 4px 0;
width: 56px;
text-align: center;
font-weight: 300;
}

#top_live .article_list>li>a {
border-bottom: 1px solid #314368;
}

#top_live .article_list li .date {
font-size: 0.75rem;
line-height: 100%;
color: #ccc;
}

/* movie */
#top_movie{
text-align: center;
background-color: #d4ddf1;
color: #222;
padding-top: 50px;
}

#top_movie > .inner {
margin: 0 auto;
padding: 0 20px;
max-width: 1100px;
box-sizing: content-box;
}

#top_movie .movie_list {
list-style: none;
display: flex;
justify-content: space-between;
align-items:flex-start;
}

#top_movie .movie_list > li > a{
text-decoration: none;
}


#top_movie .inner .movie_list li {
width: calc((100% - 20px) / 3);
height: auto;
aspect-ratio: 16/9;
}

#top_movie .inner .movie_list li .VideoWrapper {
width: 100%;
height: 100%;
}

#top_movie .inner .movie_list li .VideoWrapper iframe {
width: 100%;
height: 100%;
}

@media(max-width: 669px) {
#top_movie .inner .movie_list li{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}
#top_movie .movie_list {
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    align-items: center;
}
}

@media (max-width:499px) {
#top_live,#top_movie {
    padding-top: 32px;
}
}

/* sns */
#top_sns {
margin: 0 auto 64px;
padding: 0 20px;
max-width: 1100px;
box-sizing: content-box;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}

.fb_timeline,
.tw_timeline {
flex: 1;
width: 100%;
}

#top_sns .fb_wrapper {
width: 100%;
height: 700px;
}

@media(max-width: 799px){
.main {
    padding-top: 70px;
}
#top_sns iframe {
    height: 400px !important;
}
#top_sns .fb_wrapper {
    width: 100%;
    height: 400px;
}
.tw_timeline{
margin-bottom: 24px;
}
}

@media(max-width: 499px) {
#top_sns {
    padding: 0 20px;
    max-width: 1160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
}

.btm-banner{
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(266px, 1fr));
    margin: 60px auto;
    padding: 0 20px;
    max-width: 1100px;
    box-sizing: content-box;
}

.btm-banner li{
    width: 100%;
    height: 100%;
    list-style: none;
    box-shadow: 0 0 5px rgb(0 0 0 / 15%);
}

.btm-banner li:hover{
    opacity: .8;
}

.btm-banner li img{
    width: 100%;
    height: 100%;
}

@media(max-width: 1140px) {
    .btm-banner{
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
        margin: 20px auto;
        padding: 0 20px;
        max-width: 1100px;
        box-sizing: content-box;
    }
    }