@charset "UTF-8";
/* Hero */
.hero-bg{background: url(../imgs/hero.webp) no-repeat center center/cover;}
@media screen and (max-width: 768px) {
.hero-bg{background: url(../imgs/hero_sp.webp) no-repeat center center/cover;}
}

/* Common */
.txt-large {margin-bottom: clamp( 20px , 4.7vw , 50px); font-size: clamp( 18px , 3vw , 29px);}
.txt-normal{line-height: 2;}

/* Topics */
.topics{margin-bottom: 80px;}
.topics-img{line-height: 1; position: relative; margin: 70px 0 0 0;}
.topics-img p{position: absolute; line-height: 1; font-size: 36px; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.15em; color: #fff; text-align: center;}
.topics-txt1{top: 56%; left: 0; width: 47%;}
.topics-txt2{top: 23%; left: 41%; width: 59%;}
.topics-txt3{top: 73%; left: 54%; width: 46%;}
.topics-cap{text-align: right; padding-top: 5px;}

@media screen and (max-width: 768px) {
    .topics{margin: 0 -20px 40px;}
    .topics-img{margin: 30px 0 0 0;}
    .topics-img p{font-size: 18px;}
}

/* Location Head */
.locationHead{position: relative; line-height: 1; margin: 0 auto 50px; max-width: 1050px; width: 100%;}
.locationHead-tit{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
font-size: 48px; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.15em; color: #fff; text-align: center;}
.locationHead .cap{position: absolute; bottom: -18px; right: 0;}
.locationHead-tit span.space{margin: 0 0.2em; display: inline-block;}

@media screen and (max-width: 768px) {
    .locationHead{margin: 0 auto 40px;}
    .locationHead-tit{font-size: min(5.3vw,24px);}
}

/* Location Slider */
.locationSlider{margin: 0 -25px 90px;}
.locationSlider .slide-item{margin: 0 10px;position: relative;}

@media screen and (max-width: 768px) {
    .locationSlider{margin: 0 -20px 40px;}
    .locationSlider .slide-item{width: 260px; margin: 0 7px}
}

/* Location List */
.locationList{display: flex; flex-wrap: wrap; width: 100%;}
.locationList .item{width: 44.77%; margin: 0 10.46% 60px 0; font-size: 14px; line-height: 1.7;}
.locationList .item:nth-of-type(2n){margin-right: 0;}
.locationList .img{line-height: 1; position: relative;}
.locationList .img .cap{position: absolute; bottom: -18px; right: 0;}
.locationList .tit{font-size: 24px; line-height: 1.5; padding: 7px 0;}
.locationList .tit span{font-size: 14px; display: inline-block; letter-spacing: 0;}
.locationList .tit.lspace{letter-spacing: -0.05em;}

.locationList .desc{border-top: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; padding: 5px 0;}

.locationList .time{margin-top: 5px;}
.locationList .time li:nth-of-type(1){margin-left: 4.5em; text-indent: -4.5em;}
.locationList .time li:nth-of-type(2){margin-left: 3.5em; text-indent: -3.5em;}

@media screen and (max-width: 768px) {
    .locationList .item{width: 100%; margin: 0 0 30px;}
    .locationList .img .cap{display: none;}
    .locationList .tit{font-size: 16px;}
    .locationList .tit span{font-size: 12px;}
    .locationList .desc{border-bottom: none;}
    .locationList .time{width: 100%; border-top: 1px solid #bfbfbf; margin-top: 0; padding-top: 5px; font-size: 12px;}
}

@media screen and (max-width: 768px) and (min-width: 481px) {
    .locationList .item{display: flex; justify-content: space-between; flex-wrap: wrap;}
    .locationList .img{width: 45.5%; margin-top: 7px;}    
    .locationList .tit{padding-top: 0;}
    .locationList .info{width: 50%;}
    
    .locationList .item:nth-of-type(2n+1) .info{order: -2;}
    .locationList .item:nth-of-type(2n+1) .img{order: -1;}
    .locationList .item:nth-of-type(2n+1) .time{order: 0;}    
}

/* Shopping */
.shopping{position: relative; z-index: 1; padding-bottom: 60px;}

@media screen and (max-width: 768px) {
    .shopping{padding-bottom: 30px;}
    .shopping .txt-large{margin-left: -20px; margin-right: -20px;}
}

/* Gourmet */
.gourmet{padding-bottom: 60px;}

@media screen and (max-width: 768px) {
    .gourmet{padding-bottom: 30px;}
}

/* Around */
.around{text-align: center; margin-bottom: 120px;}
.around h3{margin: 0 !important; position: relative; z-index: 4;}
.around-map{width: 100%; max-width: 1240px; margin: -1% auto 0; position: relative; mix-blend-mode: multiply;}
.around-map .cap{position: absolute; bottom: 2%; right: 10.5%; padding: 0;}

@media screen and (max-width: 768px) {
    .around{margin-bottom: 60px;}
    .around-map{margin: -5% -20px 0; width: calc(100% + 40px);}
    .around-map .cap{bottom: 0;}
}

/* Nature */
.nature{padding-bottom: 60px;}

@media screen and (max-width: 768px) {
    .nature{padding-bottom: 30px;}
}

/* Accordion */
.accordion{border-radius: 5px; overflow: hidden; background: #ffffff;}
.accordion-tit{font-size: 24px; line-height: 1.4; background: #3b100e; color: #fff; position: relative; cursor: pointer;
height: 116px; display: flex; align-items: center; align-content: center; border-radius: 5px; overflow: hidden; text-align: left; padding: 0 110px 0 30px;}
.accordion-tit i{width: 72px; height: 72px; position: absolute; top: 50%; right: 30px; margin-top: -36px; background: #929292; border-radius: 100%; display: flex; justify-content: center; align-items: center; line-height: 0;}
.accordion-tit i::after{content: ""; border: solid white; border-width: 0 2px 2px 0; display: inline-block; padding: 7px; transform: rotate(45deg); line-height: 0; position: relative; top: -3px;}
.accordion-tit.is-open i::after{transform: rotate(-135deg); top: 3px;}

.accordion-cont{display: none;}

@media screen and (max-width: 768px) {
    .accordion-tit{font-size: 14px; padding: 0 55px 0 15px; height: 90px;}
    .accordion-tit i{width: 36px; height: 36px; right: 10px; margin-top: -20px;}
    .accordion-tit i::after{border: solid white; border-width: 0 1px 1px 0; padding: 4px;}
}

/* Event */
.event{margin-bottom: 50px;}
.event .accordion-cont{padding: 40px 50px;}
.event-box{display: flex; justify-content: space-between; font-size: 14px; line-height: 1.7;}
.event-col{max-width: 425px; width: calc(50% - 25px);}
.event-item:not(:last-of-type){margin-bottom: 50px;}
.event-row:not(:last-of-type){margin-bottom: 20px;}

.event-head{font-size: 22px; line-height: 1.4; text-align: center; background: #d3caba; padding: 6px 0; margin-bottom: 20px; position: relative;}
.event-head:before,
.event-head:after{content: ""; position: absolute; width: 0; height: 0;}
.event-head:before{border-top: 8px solid #fff; border-right: 8px solid transparent; top: 0; left: 0;}
.event-head:after{border-bottom: 8px solid #fff; border-left: 8px solid transparent; bottom: 0; right: 0;}

.event-tit{display: flex; margin-bottom: 10px;}
.event-tit .month{font-size: 18px; line-height: 1; background: #666666; color: #fff; flex: 0 0 auto; padding: 3px 10px; min-width: 70px; margin-right: 10px; display: flex; align-items: center; justify-content: center; align-content: center;}
/*.event-tit .month span{font-size: 26px; display: inline-block; line-height: 0.8;}*/
.event-tit .name{font-size: 24px; line-height: 1.2; border-bottom: 1px solid #666666; flex: 1 1 auto; padding: 0 0 0 6px;}

.event-img{margin-top: 15px;}
.event-img .cap{text-align: right; padding-top: 2px;}

@media screen and (max-width: 768px) {    
    .event{margin-bottom: 20px;}
    .event .accordion-cont{padding: 20px 12px;}
    .event-box{font-size: 10px;}
    .event-col{width: calc(50% - 6px);}
    .event-item:not(:last-of-type){margin-bottom: 20px;}
    
    .event-head{font-size: 12px; margin-bottom: 10px;}
    .event-head:before{border-top: 4px solid #fff; border-right: 4px solid transparent;}
    .event-head:after{border-bottom: 4px solid #fff; border-left: 4px solid transparent;}
    
    .event-tit .month{font-size: 10px; padding: 2px; min-width: 25px; margin-right: 3px;}
    .event-tit .month span{font-size: 12px;}
    .event-tit .name{font-size: 12px; padding: 0 0 0 2px;}
    
    .event-img{margin-top: 10px;}
}

/* Support */
.support .accordion-cont{padding: 10px 30px;}
.support-list{display: flex; flex-wrap: wrap;}
.support-list li{width: 50%; height: 180px; padding: 0 10px; text-align: center; display: flex; flex-wrap: wrap; align-content: center; align-items: center; position: relative;}

.support-list .txtS{width: 100%; font-size: 18px; line-height: 1.4; margin-bottom: 0.2em;}
.support-list .txtB{width: 100%; font-size: 26px; line-height: 1.4; color: #3b100e; font-weight: bold;}

@media screen and (min-width: 768px) {
    .support-list li:nth-of-type(2n+1):before{content: ""; top: 20px; bottom: 20px; right: 0; position: absolute; width: 1px; background: #cccccc; display: block;}

    .support-list li:after{content: ""; position: absolute; bottom: 0; height: 1px; background: #cccccc; display: block;}
    .support-list li:nth-of-type(2n+1):after{left: 0; right: 20px;}
    .support-list li:nth-of-type(2n):after{left: 20px; right: 0;}
    .support-list li:nth-of-type(5):after,
    .support-list li:nth-of-type(6):after{display: none;}
}

@media screen and (max-width: 768px) {
    .support .accordion-cont{padding: 0 20px;}
    .support-list{margin-top: 10px;}
    .support-list li{width: 100%; padding: 20px 0; height: auto; border-bottom: 1px solid #cccccc;}
    .support-list li:last-of-type{border-bottom: none;}
    .support-list .txtS{font-size: 13px;}
    .support-list .txtB{font-size: 17px;}
}

/* Info */
#info { padding: 150px 0 100px;}
#info .areaInfo-tit{font-size: 32px; text-align: center; background: #3b100e; color: #fff; padding: 8px 0 3px; line-height: 1.4; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.2em;}
#info .nav-tab { margin-bottom: 40px;}
#info .nav-tab a { width: 15%; text-align: center; line-height: 1; padding: 0 0 20px; border-bottom: 4px solid #EAE8E1;}
#info .nav-tab a:hover,
#info .nav-tab a.active { border-color: #80724A;}
#info .col-l { width: 68%;}
#info .col-r { width: 30%; font-size: 14px; height: 550px; overflow-y: scroll}
#info .col-r ul li { margin-bottom: 15px; letter-spacing: 0.1em;}
#info .col-r p:first-child { position: relative; padding-left: 35px;}
#info .col-r p span { background: #80724A; left: 0; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; color: #fff; line-height: 1; width: 24px; height: 24px;}

/*
#info .tab { display: none;}

#info #tab1 { display: block;}
*/

@media screen and (max-width: 768px) {
    #info { padding: 60px 0 80px;}
    #info .areaInfo-tit{ font-size: 12px;}
    #info .nav-tab a { width: 48%; margin-bottom: 4%; padding: 10px 0; font-size: min(4vw, 16px); border-width: 2px;}
    #info .col-l { width: 100%; margin-bottom: 40px;}
    #info .col-l iframe { height: 300px;}
    #info .col-r { width: 100%;}
    #info .col-r p { width: 100%;}
    #info .col-r p:last-child { margin-left: 34px;}
}