@charset "UTF-8";
/* 30th Event */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

#event30{font-family: "Zen Maru Gothic", sans-serif; font-weight: 400; z-index: -1;}

.event30-head{max-width: 1200px; width: 94%; margin: 0 auto; padding: 70px 0 70px;}
.event30-tit{text-align: center; margin-bottom: 60px; width: 100%; font-weight: 600; font-size: 30px; line-height: 1.5;}
.event30-desc{text-align: center; font-size: 18px; line-height: 2; font-weight: 500;;}
.event30-desc p{ margin-bottom: 1em; word-break: keep-all; overflow-wrap: break-word;}
.event30-desc p:last-child{ margin-bottom: 0;}

@media screen and (min-width:1921px) {
    #event30{background: #fffef2 url("../../30event/img/bg_head.jpg") no-repeat top center/100% auto;}
    .event30-head{padding: 7.8vw 0 4vw;}
}

@media screen and (max-width:1920px) and (min-width:769px) {
    #event30{background: #fffef2 url("../../30event/img/bg_head.jpg") no-repeat top center/1920px auto;}
}

@media screen and (max-width:768px) {
    #wrap{background: #fffef2 url("../../30event/img/bg_head_sp.jpg") no-repeat top 105px center/100% auto;}
    
    .event30-head{width: 90%; padding: 10px 0 50px;}    
    .event30-tit{max-width: 70%; margin: 0 auto 37px;}
    .event30-desc{font-size: min(4.6vw,18px);}
    .event30-index .event30-tit{max-width: 100%;}
}

@media screen and (max-width:640px) {
    #wrap{background: #fffef2 url("../../30event/img/bg_head_sp.jpg") no-repeat top 70px center/100% auto;}
}


/* Event Index */
.event30-index{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; max-width: 1200px; width: 90%; margin: 0 auto; padding: 0 0 70px; font-size: 16px;}
.event30-index h3{ color: #00baec; margin-bottom: 30px; width: 100% !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.event30-index h3 > span{ max-width: calc( 100% - 80px); width: fit-content;}
.event30-index h3::before,
.event30-index h3::after { width: 3px; height: 40px; background-color: #00baec;  content: ''; }
.event30-index h3::before { transform: rotate(-35deg); margin-right: 30px; }
.event30-index h3::after { transform: rotate(35deg); margin-left: 30px; }
.event30-index-section{ width: calc( ( 100% - 40px)/3); margin: 0 0 20px; background-color: #fff; font-weight: 500;  padding:1.2em; border:1px solid #00baec; border-radius: 10px;}
.event30-index-section.section-event{ width: 100%;}
.event30-index-section .index-tit{ font-weight: 600; margin: 0 0 1.2rem; font-size: 18px; font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; margin-bottom: 8px; position: relative; padding: 0 0 0 30px; }
.event30-index-section .index-tit:before{ content: ''; position: absolute; top: 2px; left: 0; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center center;}
.event30-index-section .index-tit.tit-kikaku{ color: #ec6519;}
.event30-index-section .index-tit.tit-kikaku:before{ background-image: url( "../../img/icon_kikaku.webp")}
.event30-index-section .index-tit.tit-collection{color: #f5c51d;}
.event30-index-section .index-tit.tit-collection:before{ background-image: url( "../../img/icon_collection.webp")}
.event30-index-section .index-tit.tit-season{color: #d8759b;}
.event30-index-section .index-tit.tit-season:before{ background-image: url( "../../img/icon_season.webp")}
.event30-index-section .index-tit.tit-event{color: #a65897;}
.event30-index-section .index-tit.tit-event:before{ background-image: url( "../../img/icon_event.webp")}
.event30-index-section.caption{ width: 100%; background: none; border: none; padding: 0;}
.event30-index-section.caption ul li{ padding-left: 1em; text-indent: -1em;}

.event30-index-list{ display: flex; justify-content: flex-start; align-items: center; gap: 0.5em 1em; flex-wrap: wrap;  }
.event30-index-list li{padding-left: 1.2em; text-indent: -1.2em;}
.event30-index-list li:before{content:'●'; margin-right: 0.2em; color: #00baec}

@media screen and (max-width:768px) {
.event30-index{padding: 0 0 50px;}   
}
@media screen and (max-width:640px) {
.event30-index-section{ width: 100%;}
.event30-index h3{ font-size: 24px; }
.event30-index h3 span{max-width: 9em;}
}

/* Event List */
.event30-cont{background: url("../../30event/img/bg_main.jpg") repeat-y top center/1920px auto; padding-bottom: 40px;}
.event30-list{display: flex; flex-wrap: wrap; max-width: 1200px; width: 90%; margin: 0 auto;}
.event30-list .item{display: flex; position: relative; z-index: 10;}
.event30-list a{width: 100%; color: inherit; background: #fff; box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 30px 10px 10px 30px; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: flex-end; position: relative; transition: .5s;}
.event30-list a:before{content: ""; position: absolute; display: block; z-index: 1; line-height: 1;}

.event30-list .inner{width: 100%; padding: 26px; font-size: 16px; line-height: 1.75;}
.event30-list .tit{border-radius: 10px; text-align: center; font-size: 24px; line-height: 1.4; font-weight: bold; padding: 28px 0; margin-bottom: 22px;}

.event30-list .info{font-weight: bold; font-size: 14px; line-height: 1.5; padding-bottom: 5px;}
.event30-list .info span{font-size: 24px; line-height: 1.31; display: inline-block;}
.event30-list .info li{position: relative; padding-left: 35px; margin-bottom: 7px;}
.event30-list .info li:before{content: ""; position: absolute; top: 7px; left: 0; display: block;}

.event30-list .date:before{width: 20px; height: 20px; background: url("../../30event/img/ic_calendar.svg") no-repeat top center/100% 100%;}

.event30-list .time:before{width: 20px; height: 20px; background: url("../../30event/img/ic_clock.svg") no-repeat top center/100% 100%;}

.event30-list .addr{font-size: 21px;}
.event30-list .addr:before{width: 20px; height: 19px; background: url("../../30event/img/ic_location.svg") no-repeat top center/100% 100%;}

.event30-list .txt_over{overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; }

/*.event30-list .txt_over{position: relative; max-height: calc(16 * 1.75 * 3 * 1px); word-break: break-all; overflow: hidden;}
.event30-list .txt_over:before{content: '...'; position: absolute; top: calc(16 * 1.75 * (3 - 1) * 1px); right: 0; width: 1.2em; height: 1.75em; background: #fff;}
.event30-list .txt_over:after{content: ''; position: absolute; width: 100%; height: 100%; background: #fff;}*/

.event30-list .btn{font-size: 18px; font-weight: bold; line-height: 1.3; height: 60px; width: calc(100% - 12px); padding: 0 26px 0 30px; display: flex; justify-content: space-between; align-items: center; border-radius: 30px 10px 10px 30px; position: relative; right: -4px;}
.event30-list .btn:after{content: ""; width: 39px; height: 7px; background: url("../../30event/img/line.svg") no-repeat bottom right/100% 100%; transition: .5s;}

.event30-list .item:nth-of-type(4n+1) a{border: 4px solid #FFA0A0;}
.event30-list .item:nth-of-type(4n+1) a:before{width: 38px; height: 43px; background: url("../../30event/img/label_triangle.svg") no-repeat top left/100% 100%; top: 7px; left: 27px;}
.event30-list .item:nth-of-type(4n+1) .tit{background: rgba(255,160,160,0.3);}
.event30-list .item:nth-of-type(4n+1) .btn{background: #FFA0A0;}

.event30-list .item:nth-of-type(4n+2) a{border: 4px solid #F8E250;}
.event30-list .item:nth-of-type(4n+2) a:before{width: 42px; height: 56px; background: url("../../30event/img/label_flag.svg") no-repeat top left/100% 100%; top: -6px; left: 14px;}
.event30-list .item:nth-of-type(4n+2) .tit{background: rgba(248,226,80,0.3);}
.event30-list .item:nth-of-type(4n+2) .btn{background: #F8E250;}

.event30-list .item:nth-of-type(4n+3) a{border: 4px solid #98E5F7;}
.event30-list .item:nth-of-type(4n+3) a:before{width: 59px; height: 48px; background: url("../../30event/img/label_bow_tie.svg") no-repeat top left/100% 100%; top: -3px; left: 11px;}
.event30-list .item:nth-of-type(4n+3) .tit{background: rgba(152,229,247,0.3);}
.event30-list .item:nth-of-type(4n+3) .btn{background: #98E5F7;}

.event30-list .item:nth-of-type(4n+4) a{border: 4px solid #96DED3;}
.event30-list .item:nth-of-type(4n+4) a:before{width: 49px; height: 46px; background: url("../../30event/img/label_crown.svg") no-repeat top left/100% 100%; top: 2px; left: 15px;}
.event30-list .item:nth-of-type(4n+4) .tit{background: rgba(150,222,211,0.3);}
.event30-list .item:nth-of-type(4n+4) .btn{background: #96DED3;}

.event30-list a:hover{transform: translateY(-5px); box-shadow: none;}
.event30-list a:hover .btn:after{transform: translateX(10px);}

@media screen and (min-width:1101px) {
    .event30-list .item{width: 29.167%; margin-right: 6.2495%; margin-bottom: 6.2495%;}
    .event30-list .item:nth-of-type(3n){margin-right: 0;}
    .event30-list .item:nth-of-type(3n+2){top: 40px;}
}

@media screen and (max-width:1100px) and (min-width: 769px){
    .event30-cont{background-size: 104% auto;}
    .event30-list .item{width: 47%; margin-right: 6%; margin-bottom: 6%;}
    .event30-list .item:nth-of-type(2n){margin-right: 0; top: 6vw;}    
}

@media screen and (max-width:768px) {
    .event30-cont{background: url("../../30event/img/bg_main_sp.jpg") repeat-y top center/100% auto; padding: 20px 0 30px;}
    
    .event30-list{width: 80%; margin: 0 auto;}
    .event30-list .item{width: 100%; margin-bottom: 30px;}
    .event30-list a{border-radius: 26px 8px 8px 26px; box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.1);}
    .event30-list .inner{font-size: 15px; padding: 26px 16px;}
    .event30-list .tit{font-size: 21px; padding: 24px 0; margin-bottom: 18px;}
    .event30-list .info span{font-size: 20px;}
    .event30-list .info li:before{top: 4px;}
    .event30-list .addr{font-size: 18px;}
    
    .event30-list .txt_over{max-height: calc(15 * 1.75 * 3 * 1px);}
    .event30-list .txt_over:before{top: calc(15 * 1.75 * (3 - 1) * 1px);}
        
    .event30-list .btn{font-size: min(4.1vw,16px); height: min(13.8vw,54px); right: -3px; padding: 0 min(6.6vw,26px) 0 min(7.6vw,30px); width: calc(100% - 10px);}
    
    .event30-list .item:nth-of-type(4n+1) a{border: 3px solid #FFA0A0;}
    .event30-list .item:nth-of-type(4n+1) a:before{width: 33px; height: 39px; left: 17px;}
    
    .event30-list .item:nth-of-type(4n+2) a{border: 3px solid #F8E250;}
    .event30-list .item:nth-of-type(4n+2) a:before{width: 38px; height: 49px; top: -2px; left: 4px;}
    
    .event30-list .item:nth-of-type(4n+3) a{border: 3px solid #98E5F7;}
    .event30-list .item:nth-of-type(4n+3) a:before{width: 52px; height: 43px; top: 0; left: 3px;}
    
    .event30-list .item:nth-of-type(4n+4) a{border: 3px solid #96DED3;}
    .event30-list .item:nth-of-type(4n+4) a:before{width: 44px; height: 40px; top: 4px; left: 5px;}
}