@charset "utf-8";
#toppage { background: #fff;}
#navi { padding-top: 30px;}
/*------------------------------------------------------------
    MAINIMG
------------------------------------------------------------*/
.mainimg { position: relative; width: 100%;}
.mainimg::before { 
    position: absolute; bottom:-1px; left: 0; z-index: 99999;
    display: block; clear: both; content:"";
    width: 100%; height: 50px;
    background:url("../img/wave_w.png") no-repeat top center;
    background-size: auto 100%;
}
.mainimg .main_slider img {
    transform-origin: center top;
    transform: scale(1.0);
    transition: 10s ease-out;
}
.mainimg .main_slider .slick-active img {
    transform: scale(1.1);
}
@media only screen and (max-width:768px){
    #navi { padding-top: 20px;}
    .mainimg::before { height: 30px;}
}


/*====================================================================================================
  TOP
====================================================================================================*/
#toppage h3,
#toppage h3 b  { font-family: "Noto Sans JP", sans-serif; font-weight: 700;}
#toppage h3 small { display: block; font-family: "Roboto", "sans-serif"; font-weight: 400; text-align: center;}
#toppage h3 { margin-top:20px; margin-bottom: 60px;}
#toppage h3 b {
    display: block;
    text-align: center;
    font-size: 36px;
    margin-bottom: 20px;
}
#toppage h3 small { font-size: 100%; color: #777;}
#toppage h3.tit {
    margin-left: auto; margin-right: auto;
    max-width: 500px;
    background-image: url("../img/tit_bg1.png"), url( "../img/tit_bg1.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: 65px auto, 65px auto;
}
@media only screen and (max-width:768px){
    #toppage h3 { margin-bottom: 30px;}
    #toppage h3 b { font-size: 175%; margin-bottom: 10px;}
    #toppage h3 small { font-size: 87.5%;}
    #toppage h3.tit { max-width: 400px;}
}
@media only screen and (max-width:468px){
    #toppage h3 { margin-bottom: 20px;}
    #toppage h3 b { font-size: 137.5%; margin-bottom: 5px; letter-spacing: 0;}
    #toppage h3 small { font-size: 75%; line-height: 100%;}
    #toppage h3.tit { background-size: 45px auto, 45px auto;}
    #toppage h3.tit { max-width: 300px; background-size: 40px auto, 40px auto;}
}
#toppage .btn a {
    display: block;
    padding:10px 20px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    background-size: 20px auto !important;
    border-radius: 100px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.10);
}
#toppage .btn.b_blue a { color: #fff; background:#4CB2E6 url("../img/icon_arrow_w.svg") no-repeat 90% center; }
#toppage .btn.b_white a { color: #222; background:#fff url("../img/icon_arrow.svg") no-repeat 90% center; }

/*------------------------------------------------------------
    INFORMATION
------------------------------------------------------------*/
#toppage .information {
    background: url("../img/wave_b.png") no-repeat center bottom;
    background-size: auto 80px;
}
#toppage .information .inner { padding-bottom: 200px;}
#toppage .information h3.tit { max-width: 420px;}
#toppage .information .info_list { overflow: hidden;}
#toppage .information .info_list .box { float: left; width: calc(33.3% - 13.33px);}
#toppage .information .info_list .box + .box { margin-left: 20px;}
#toppage .information .info_list .box .pic { position: relative;}
#toppage .information .info_list .box .pic::before {
    position: absolute; bottom: -1px; left: 0; z-index: 9;
    display: block; clear: both; content:"";
    width: 100%; height: 35px;
    background: url("../img/wave_w.png") no-repeat;
    background-size: auto 100%;
}
#toppage .information .info_list .box:nth-child(1) .pic::before { background-position: center bottom;}
#toppage .information .info_list .box:nth-child(2) .pic::before { background-position: 30% bottom;}
#toppage .information .info_list .box:nth-child(3) .pic::before { background-position: left bottom;}
#toppage .information .info_list .box img {
    object-fit: cover;
    aspect-ratio: 325 / 250;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
#toppage .information .info_list .box a { color: #222; text-decoration: none;}
#toppage .information .info_list .box .cont { padding: 20px;}
#toppage .information .info_list .box .day { font-size: 75%; text-align: center;}
#toppage .information .info_list .box .mid {
    margin-bottom: 10px;
    padding-bottom: 20px;
    text-align: center; text-decoration: underline;
    background:url("../img/tit_bg2.png") no-repeat center bottom;
    background-size: auto 10px;
}
#toppage .information .btn2 { 
    margin: auto;
    max-width: 150px;
    background: url("../img/line1.png") no-repeat center bottom;
    background-size: auto 3px;
}
#toppage .information .btn2 a {
    display: block;
    padding:20px 0;
    font-size: 125%;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    color: #222;
    background:url("../img/icon_arrow.svg") no-repeat right center;
    background-size: 25px auto !important;
}
@media only screen and (max-width:768px){
    #toppage .information { background-size: auto 30px;}
    #toppage .information .info_list .box .pic::before { height: 20px;}

	#toppage .information .inner { padding-bottom: 80px;}

}
@media only screen and (max-width:468px){
    #toppage .information .info_list { overflow: inherit;}
    #toppage .information .info_list .box { width:auto; padding: 0 20px;}
    #toppage .information .info_list .box + .box { margin-left:0;}
}


/*------------------------------------------------------------
    CATEGORY
------------------------------------------------------------*/
#toppage .category {}
#toppage .category .inner { padding: 0; width: 100%; max-width: none;}
#toppage .category .box {
    position: relative;
    background: #EBF9FC url(../img/wave_w.png) no-repeat bottom center;
    background-size: auto 50px !important;
}
#toppage .category .box .inner {
    position: relative;
    margin: auto; padding: 100px 0 150px; width: 90%; max-width: 1010px;
    display: flex; justify-content: space-between;
    min-height: 600px;
}
#toppage .category h4 { position: absolute; top: -20px; left: 0;}
#toppage .category h4  b {
    padding-right: 100px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 66px;
    font-weight: 700;
    background: url("../img/tit_bg1.png") no-repeat right center;
    background-size: 88px auto;
}
#toppage .category .box .cont { width: 300px;}
#toppage .category .box .mid {
    margin-bottom: 35px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 225%;
    letter-spacing: 2px;
    line-height: 120%;
}
#toppage .category .box .come { margin-bottom: 35px;}
#toppage .category .box .btn { width: 185px;}
#toppage .category .box .btn a { text-align: left;}
#toppage .category .box .pic {
    position:absolute; top: 100px; right: -15%;
    display: flex; gap:10px;
    width:80%;
}
#toppage .category .box .pic img { border-radius: 20px;}
#toppage .category .box .ornament3,
#toppage .category .box .ornament,
#toppage .category .box .ornament2 { position: absolute; height: auto;}
#toppage .category .box:nth-child(even) { background: #fff url(../img/wave_b.png) no-repeat bottom center;}
#toppage .category .box:nth-child(even) .inner { flex-direction: row-reverse;}
#toppage .category .box:nth-child(even) h4 { right: 0; left: inherit;}
#toppage .category .box:nth-child(even) .pic { right:  inherit; left:-15%;}

#toppage .category .box:nth-child(1) .bg { background: url("../../img/bg_cate1.png") no-repeat 5% center; background-size: 420px auto;}
#toppage .category .box:nth-child(2) .bg { background: url("../../img/bg_cate2.png") no-repeat 95% center; background-size: 430px auto;}
#toppage .category .box:nth-child(3) .bg { background: url("../../img/bg_cate3.png") no-repeat 5% center; background-size: 350px auto;}
#toppage .category .box:nth-child(4) .bg { background: url("../../img/bg_cate4.png") no-repeat 95% center; background-size: 360px auto;}
#toppage .category .box:nth-child(5) .bg { background: url("../../img/bg_cate5.png") no-repeat 5% center; background-size: 400px auto;}

#toppage .category .box:nth-child(1) .ornament { right: -50px; top: -170px; width: 30%; max-width: 323px;}
#toppage .category .box:nth-child(1) .ornament2 { left: 0; bottom:0;  width: 30%; max-width: 272px;}
#toppage .category .box:nth-child(2) .ornament { right: -100px; top: 80px;  width: 30%; max-width: 165px;}
#toppage .category .box:nth-child(2) .ornament3 { right: 60px; top: 380px;  width: 30%; max-width: 165px;}
#toppage .category .box:nth-child(3) .ornament { left: 250px; top: -50px;  width: 30%; max-width: 375px;}
#toppage .category .box:nth-child(4) .ornament { left: 0; top: -150px;  width: 30%; max-width: 103px;}
#toppage .category .box:nth-child(5) .ornament { left: -50px; bottom: -30px;  width: 30%; max-width: 340px;}
@media only screen and (max-width:1000px){
    #toppage .category .box .pic { width: calc(100% - 200px) !important;}
}
@media only screen and (max-width:768px){
    #toppage .category .box,
    #toppage .category .box:nth-child(even) { background-size: auto 30px !important;}
    #toppage .category h4  b { font-size: 46px; background-size: 60px auto; padding-right: 70px;}
    #toppage .category .box .inner { min-height: inherit;}
    #toppage .category .box .mid { font-size: 187.5%;}
    #toppage .category .box .pic { position:static !important; flex-direction: column; width:50%!important;}
    #toppage .category .box:nth-child(1) .ornament { right: 0; top: -110px;}
    #toppage .category .box:nth-child(1) .ornament2 { left: 0; bottom:0;}    
    #toppage .category .box:nth-child(2) .ornament { right: 0; top: 80px; width: 120px;}
}
@media only screen and (max-width:468px){
    #toppage .category h4  b { font-size: 28px;}
    #toppage .category .box .inner { padding: 50px 0 100px;}
    #toppage .category .box .mid { font-size:137.5%; margin-bottom: 20px;}
    #toppage .category .box .inner { flex-direction: column !important;}
    #toppage .category .box .cont { width:100% !important; margin-bottom: 40px;}
    #toppage .category .box .come { margin-bottom: 20px;}
    #toppage .category .box .pic { width: 100% !important; flex-direction: row !important;}
    #toppage .category .box:nth-child(1) .bg,
    #toppage .category .box:nth-child(2) .bg,
    #toppage .category .box:nth-child(3) .bg,
    #toppage .category .box:nth-child(4) .bg,
    #toppage .category .box:nth-child(5) .bg { background-position: center 50px; background-size: 80% auto;}
    #toppage .category .box:nth-child(2) .ornament { right: 0; top: 30px; width: 100px;}
    #toppage .category .box:nth-child(2) .ornament3 { right: 0; top: 180px; width: 100px;}
    #toppage .category .box:nth-child(3) .ornament { left: 150px; top: -20px; width: 38%;}
    #toppage .category .box:nth-child(4) .ornament { left: 0; top: -70px;  width: 18%;}
    #toppage .category .box:nth-child(5) .ornament { left:0; bottom: 0; width: 40%;}
}


/*------------------------------------------------------------
    EVENT
------------------------------------------------------------*/
#toppage .event {}
#toppage .event .inner { width:100%; max-width: none; padding-bottom: 120px; }
#toppage .event .calendar { display:flex;}
#toppage .event .calendar .cal { position: relative; padding:  0 20px 80px; width: 50%;}
#toppage .event .calendar .cal:nth-child(1) {
    background: url("../img/line3.png") repeat-y right center;
    background-size: 5px auto;
}
#toppage .event .calendar .mid {
    position: absolute; top: -30px; left: 15px; z-index: 9;
    width: 65px; height: 65px; line-height: 65px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: -1px;
    background: #000;
    border-radius: 65px;
    transform: rotate(-17deg);
}
#toppage .event .calendar .mid b { font-size:162.5%;}
#toppage .event .calendar .mid b small { font-size: 87.5%;}
#toppage .event .calendar .cal:nth-child(1)  .mid { background:#4CB2E6;}
#toppage .event .calendar .cal:nth-child(2)  .mid { background:#A5DE65;}
#toppage .event .calendar ul li { padding: 0 7px;}
#toppage .event .calendar ul li a { color: #222;text-decoration: none;}
#toppage .event .calendar ul li img { aspect-ratio: 1 / 1; object-fit: cover;}
#toppage .event .calendar ul li .come { display: block; padding: 10px; line-height: 130%; text-decoration: underline;}
#toppage .event .calendar ul li .day { display: block; padding: 0 10px; font-size: 75%;  line-height: 130%; }
#toppage .event .calendar .btn { position: absolute; right:20px; bottom: 0; width: 185px;}
@media only screen and (max-width:768px){
    #toppage .event .inner { padding-bottom: 80px; }
    #toppage .event .calendar .mid { top:-10px;}
}
@media only screen and (max-width:468px){
    #toppage .event .inner { padding-bottom: 40px; }
    #toppage .event .calendar { flex-direction: column;}
    #toppage .event .calendar .cal { padding: 20px 20px 0; width:100%; background: none !important;}
    #toppage .event .calendar .cal:nth-child(1) { padding-bottom: 40px;}
    #toppage .event .calendar .btn { position:static; margin:20px auto 0;}
    #toppage .event .calendar .mid { top:-10px; width: 50px; height: 50px; line-height: 50px;}
    #toppage .event .calendar .mid b { font-size:125%;}
}


/*------------------------------------------------------------
    COORDINATOR
------------------------------------------------------------*/
#toppage .coordinator {
    position: relative;
    background: #EBF9FC url(../img/wave_w3.png) no-repeat top center;
    background-size: auto 50px;
}
#toppage .coordinator img {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: auto;  padding: 0 25px;
}
@media only screen and (max-width:768px){
    #toppage .coordinator { background-size: auto 30px;}
    #toppage .coordinator img { width: 90%;}
}


/*------------------------------------------------------------
    PICKUP
------------------------------------------------------------*/
#toppage .pickup { position: relative;}
#toppage .pickup .inner { width:90%; max-width: none; padding-bottom: 120px; }
#toppage .pickup .pickup_list {  display: flex; gap:50px;}
#toppage .pickup .pickup_list p { width: 33.3%;}
#toppage .pickup .pickup_list p a { text-decoration: none;}
#toppage .pickup .pickup_list p span { position: relative;}
#toppage .pickup .pickup_list span:nth-child(1) {
    display: block;
    aspect-ratio: 400 / 380;
    background: #F5F2EC;
    border-radius: 20px;
    box-sizing: border-box;
}
#toppage .pickup .pickup_list span:nth-child(1) img { border-radius: 20px;}
#toppage .pickup .pickup_list span:nth-child(2) {
    display: block;
    padding: 25px 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 162.5%;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    color: #222;
    background: url("../img/icon_arrow.svg") no-repeat 97% center;
    border-bottom: 2px solid #707070;
}
#toppage .pickup .pickup_list p:nth-child(2) img {
    position: absolute; top: 0; left: -7%;
    margin: auto;
    width: 114%; height: auto;
    aspect-ratio: 907 / 819;
}
@media only screen and (min-width:768px){
    #toppage .pickup .pickup_list p a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #toppage .pickup .inner { padding-bottom: 100px; }
    #toppage .pickup .pickup_list { gap:20px;}
    #toppage .pickup .pickup_list span:nth-child(2) { font-size:112.5%; text-align: left;}
}
@media only screen and (max-width:468px){
    #toppage .pickup .inner { padding-bottom: 80px; }
    #toppage .pickup .pickup_list { flex-direction: column;}
    #toppage .pickup .pickup_list p { width:100%; padding-bottom: 20px; border-bottom: 2px solid #707070;}
    #toppage .pickup .pickup_list p a { display: flex; gap:20px;}
    #toppage .pickup .pickup_list span:nth-child(1) { width: 80px;}
    #toppage .pickup .pickup_list span:nth-child(2) { 
        width:calc(100% - 80px - 20px);
        letter-spacing: 0;
        border: none;
    }
}


/*------------------------------------------------------------
    CHANNEL
------------------------------------------------------------*/
#toppage .channel {
    position: relative;
    margin: auto;
    width: 90%;
    background: #F5F2EC;
    border-radius: 60px;
}
#toppage .channel h3 {
    position: absolute; top: -20px; left: 0; right: 0;
    margin: auto;
}
#toppage .channel .inner { margin: auto; width:90%; max-width: none; padding-bottom: 50px; }
#toppage .channel .movie {
    display: flex; gap:20px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    background: url("../img/line2.png") repeat-x center bottom;
    background-size: auto 5px;
}
#toppage .channel .movie p { border-radius:20px;  overflow: hidden;}
#toppage .channel .movie p { width: 100%; aspect-ratio: 16 / 9;}
#toppage .channel .movie p iframe { width: 100%; height: 100%;}
#toppage .channel  .sns {
    display: flex; gap:20px;
    margin: auto; width: 90%; max-width: 1010px;
}
#toppage .channel  .sns li {
    width: 33.3%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);;
}
#toppage .channel  .sns li img { width: 70%; height: auto; }
#toppage .channel  .sns li a {
    display: block;
    padding: 12px 0 10px;
    text-align: center;
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #toppage .channel { border-radius: 30px;}
    #toppage .channel .movie { flex-direction: column; gap:10px; margin-bottom: 30px; padding-bottom: 30px;}
    #toppage .channel .movie p { width: 100%;}
    #toppage .channel  .sns { flex-direction: column; gap:10px;}
    #toppage .channel  .sns li { width: 100%;}
}


/*------------------------------------------------------------
    AREA
------------------------------------------------------------*/
#toppage .area { background: #fff;}
#toppage .area .inner {
    display:flex; flex-direction: column; gap:40px;
    width: auto; max-width: none;
}
#toppage .area .map { text-align: center;}
#toppage .area .map iframe { margin: auto; width:90%; height: 500px; }
#toppage .area .map_list {
    display: flex; clear: both; content:"";
    margin: auto; width: 90%; max-width: 1010px;
}
#toppage .area .map_list ul { width: 33.3%;}
#toppage .area .map_list ul li { position: relative; padding-left: 30px;}
#toppage .area .map_list ul li + li { margin-top: 5px;}
#toppage .area .map_list ul li span {
    display: block;
    position: absolute; top: 0; left: 0;
    width: 22px; height: 22px; line-height: 22px;
    font-family: "Roboto", sans-serif;
    font-size: 87.5%;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    text-align: center;
    background: #A5DE65;
    border-radius: 30px;
}
#toppage .area .map_list ul li a { color: #222; font-weight: 700; text-decoration: none;}
@media only screen and (min-width:768px){
    #toppage .area .map_list ul li a:hover { text-decoration:underline;}
}
@media only screen and (max-width:768px){
    #toppage .area .map iframe { height: 400px; }
    #toppage .area .map_list { gap:0 20px;}
    #toppage .area .map_list ul { width: auto;}
    #toppage .area .map_list ul li a { font-size: 87.5%}
}
@media only screen and (max-width:468px){
    #toppage .area .map iframe { height: 300px; }
    #toppage .area .map_list { flex-direction: column;}
}


/*------------------------------------------------------------
    BANNER
------------------------------------------------------------*/
#toppage .banner { background:#FAF8F5;}
#toppage .banner .inner { padding-bottom: 100px; }
#toppage .banner dl + dl { margin-top: 20px;}
#toppage .banner dt { margin-bottom:5px; font-size: 87.5%; letter-spacing: 2px;}
#toppage .banner dd { overflow: hidden;}
#toppage .banner dd p { float: left; width: calc(20% - 8px); margin-bottom: 10px;}
#toppage .banner dd p + p { margin-left: 10px;}
#toppage .banner dd p:nth-child(5n+1) { margin-left:0;}
@media only screen and (max-width:768px){
    #toppage .banner .inner { padding-bottom: 80px; }
}
@media only screen and (max-width:468px){
    #toppage .banner .inner { padding-bottom: 70px; }
    #toppage .banner dd p {width: calc(33.3% - 6.66px);}
    #toppage .banner dd p:nth-child(5n+1) { margin-left:10px;}
    #toppage .banner dd p:nth-child(3n+1) { margin-left:0;}
}