@media (max-width: 1100px) {
    .container {
        padding: 0 40px;
    }
}
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

/* メインビジュアル */
#mainVisual {
    background-image: url("images/top/mainv_bg1.webp");
    background-position: bottom;
    background-size: cover;
    padding: 145px 0 60px;
}
#mainVisual .container {
    position: relative;
    margin-top: -30px;
}
.catch {
    position: relative;
    display: inline-block;
    width: auto;
    top: -10px;
    left: 49%;
    transform: translateX(-50%) rotate(-3.5deg);
}
.catch img {
    width: 602px;
    height: 144px;
}
.about {
    text-align: center;
    padding-top: 10px;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .catch {
        top: 10px;
        overflow: hidden;
    }
    .catch img {
        width: 292px;
        object-fit: contain;
    }
    .about {
        padding-top: 0;
        line-height: 1.7;
    }
}
@media (max-width: 768px) {
    #mainVisual {
        padding: 75px 0 180px;
        background-image: url("images/top/mainv_bg2.webp");
    }
}



/* スライダー */
.slick-slide img{
    border-radius: 36px;
}
@media screen and (min-width: 768px), print {
    .block {
        opacity: 0;
        height: 730px;
        overflow: hidden;
        margin: 0 auto;
        transition: all 1.5s 1s;
        position: relative;
    }
    .block.active {
        opacity: 1;
    }
    .slider img {
        width: 616px;
    }
    .slider li {
        margin: 0 24px;
        transition: all 0.4s;
    }
    /* 各スライドのスタイル */
.slider .slick-slide {
	-webkit-transform: scale(0.8) rotate(-15deg) translateY(160px);
	filter: blur(2px);
}
/* アクティブスライドのスタイル */
.slider .slick-current {
	-webkit-transform: scale(1) rotate(0) translateY(0);
	transform: scale(1) rotate(0) translateY(0);
	opacity: 1;
	z-index: 2;
	filter: blur(0px);
}
/* 次のスライドのスタイル */
.slider .slick-current + .slick-slide {
	transform: scale(0.8) rotate(15deg) translateY(160px);
	filter: blur(2px);
}
	
.slider.slick-slider .slick-track,.slider.slick-slider .slick-list {
    overflow: visible;
}
}

@media (max-width:768px){
    .slider img {
        width:100%;
    }
    .slider li {
        margin:0;
    }
    .block {
        height:auto;
        position: relative;
    }
    .slider-control {
        bottom: -20px;
    }
    .slick-dots li {
        margin: 2px 10px;
    }
}

/* Live */
#live {
    padding-top: 10px;
    padding-bottom: 50px;
}
#live .live-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
    padding-left: 10px;
}
#live .live-title {
    color: #616161;
    align-items: center;
    display: flex;
    column-gap: 23px;
    font-size: 1.125em;
    font-weight: 500;
}
#live .live-sub {
    margin: 0;
    font-size: 1em;
    font-weight: 500;
    color: #000;
}
#live .lives {
    display: grid;
    grid-template-columns: 226px 331px 1fr;
    grid-template-columns:270px 1fr;
    column-gap: 24px;
    row-gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#live .live-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
#live .live-small {
           height: 297px;
    border-radius: 6px;
}
#live .live-small iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
iframe html{
    overflow: hidden;
}
#live .live-medium {
    height: 205px;
    border-radius: 16px;
}
#live .live-medium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
#live .live-weather {
    margin-top: 56px;
    border-radius: 15px;
}
#live .live-weather .weatherwidget-io {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    color: inherit;
}

@media (max-width: 1100px) {
    #live .lives {
        
    }
    #live .live-weather {
        grid-column: span 2;
        margin-top: 0;
    }
}
@media (max-width: 768px) {
    #live {
        padding-top: 40px;
    }
}
@media (max-width: 600px) {
    #live .lives {
        grid-template-columns: 1fr;
    }
    #live .live-weather {
        grid-column: span 1;
    }
    #live .live-header {
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 8px;
    }
    #live .live-title {
        flex-direction: column;
        row-gap: 16px;
    }
    #live .live-title img {
        width: 85px;
    }
    #live .live-sub {
        font-size: 1.125em;
    }
    #live .live-small {
    height: 32vh;
    }
}


/* News */
.news-title {
    padding-left: 10px;
}
.news-header {
    display: flex;
    align-items: center;
    column-gap: 62px;
}
.news-header span {
    display: flex;
    align-items: center;
}
.news-sns {
    display: flex;
    column-gap: 30px;
}
#news .snsBtn li a {
    width: 40px;
    height: 40px;
}
ul.entrys {
    margin: 35px 0;
}
.entrys li.imp a {
    display: flex;
    flex-direction: row;
    border-radius: 16px;
    background-color: #FCECEC;
    justify-content: space-between;
    align-items: center;
    row-gap: 15px;
    column-gap: 5px;
    padding: 20px 30px 35px;
}
.entrys li.imp > a::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMS41IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjRUY4QTMyIi8+CiAgPHBhdGggZD0iTTEwLjgxODQgOEwxNC4zNTM5IDExLjUzNTVMMTAuODE4NCAxNS4wNzExIiBzdHJva2U9IiNFRjhBMzIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=')
}
.entrys li.imp {
    width: 100%;
}
.entrys li.imp > a p.title {
    display: block;
    font-size: 1.25em;
    font-weight: 700;
    color: #D80000;
}
.entrys li.imp > a p.msg {
    width: 100%;
    display: block;
    flex: none;
}
.imp a .description {
    display: flex;
    flex-wrap: wrap;
    border-radius: 16px;
    row-gap: 15px;
    column-gap: 5px;
    flex-direction: row;
}
.entrys i{
	font-style: normal;
	font-weight: normal;
	font-size: 0.75em;
	margin-left: 1em;
}
@media screen and (min-width: 768px), print {
    .imp a .description {
        max-width: none;
    }
}
@media (max-width: 1100px) {
    .news-header {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 24px;
        padding-left: 10px;
    }
    .news-title {
        padding-left: 0;
    }
}
@media (max-width: 900px) {
    ul.entrys {
        margin-top: 15px;
    }
    .entrys li.imp a {
        padding: 20px 25px 20px;
        flex-direction: column;
    }
    .news-item {
        column-gap: 15px;
        flex-wrap: nowrap;
    }
}
@media (max-width: 600px) {
    .news-header {
        padding: 0;
        align-items: center;
        row-gap: 22px;
    }
    .news-title img {
        width: 270px;
    }
    .news-sns {
        flex-direction: column;
        row-gap: 18px;
        align-items: center;
    }
    .news-sns > span > img {
        width: 250px;
    }
    .imp a .description {
        row-gap: 5px;
    }
    .entrys li.imp > a p.msg {
        line-height: 1.6;
    }
}

/* News modal */
.newsPop .modaal-container {
    padding-top: 0 !important;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    max-width: 830px;
}
.newsPop .modaal-content-container {
    padding-top: 0 !important;
}
.news-modal__bar {
    padding: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin: 0 -30px;
}
.news-modal__title {
    font-weight: 700;
    line-height: 1.4;
    background-color: #01389D;
    color: #FFF;
    border-radius: 20px 20px 0 0 !important;
    font-size: 1.75em;
    width: 100%;
    margin: 0;
    padding: 20px 15px 15px;
}
.news-modal__date {
    margin: 0;
    white-space: nowrap;
    font-size: 0.95em;
    color: #333;
    text-align: right;
    padding-right: 20px;
}
.news-modal__figure {
    margin: 0 0 18px;
    text-align: center;
    padding: 16px 20px 0;
}
.news-modal__figure img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.news-modal__content {
    padding: 14px 20px 22px;
    line-height: 1.9;
}
.news-modal__content p {
    margin: 0 0 1em;
}
@media (max-width: 600px) {
    .modaal-content-container {
        padding: 0 !important;
    }
    .news-modal__bar {
        padding: 0;
        flex-direction: column;
        row-gap: 16px;
        margin: 0;
    }
    .news-modal__figure {
        padding: 14px 14px 0;
    }
    .news-modal__content {
        padding: 12px 14px 18px;
    }
}
/* enjoy cards */
#enjoy {
    background-image: url("images/top/enjoy_bg.webp");
    background-position: top center;
    background-size: cover;
    padding: 90px 0 70px;
    margin-bottom: 75px;
}
#enjoy h2 {
    text-align: center;
}
#enjoy .container {
    padding: 0;
}
.cards li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 700;
    background-image: url("images/top/enjoy_access.webp");
    background-position: bottom center;
    background-size: contain;
    height: 390px;
    width: 100%;
}
.cards li.access a {
    background-image: url("images/top/enjoy_access.webp");
    margin-top: 30px;
}
.cards li.course a {
    background-image: url("images/top/enjoy_course.webp");
    height: 375px;
}
.cards li.lift a {
    background-image: url("images/top/enjoy_lift.webp");
    height: 375px;
}
.cards li.rental a {
    background-image: url("images/top/enjoy_rental.webp");
    margin-top: 55px;
    height: 370px;
}
.card-desc {
    font-size: 1.25em;
    color: #343A4A;
}
.card-title {
    font-size: 2em;
    color: #000;
}

.cards li a:hover,
.cards li a:active{
	transform: scale(1.05);
	text-decoration: none;
}
@media (max-width: 960px) {
    #enjoy .container {
        padding: 0 55px;
    }
    .cards, ul.cards {
        margin-top: 0;
    }
    .cards li.access a {
        height: 410px;
        margin-top: 30px;
    }
    .cards li.course a {
        height: 378px;
        margin-top: 27px;
    }
    .cards li.lift a {
        height: 396px;
        margin-top: 7px;
    }
    .cards li.rental a {
        margin-top: -25px;
        height: 375px;
    }
}
@media (max-width: 660px) {
    .card-title {
        font-size: 1.25em;
    }
    .card-desc {
        font-size: 0.85em;
    }
    #enjoy .container {
        padding: 0;
    }
    .cards li.access a {
        height: 250px;
        margin-top: 30px;
    }
    .cards li.course a {
        height: 230px;
        margin-top: 33px;
    }
    .cards li.lift a {
        height: 210px;
        margin-top: 38px;
    }
    .cards li.rental a {
        margin-top: 17px;
        height: 215px;
    }
    
}