@charset "UTF-8";
/* CSS Document */
#asabun_fes .wrapper{letter-spacing:0; line-height:1.5; color:#111; background:#fff; text-align:center; margin:20px; padding:50px 0;}
#asabun_fes	#cover{border:none; position:relative; z-index:0; margin-bottom:0;}
#asabun_fes #cover div {position:relative; margin-bottom:0px;}
#asabun_fes #cover div .image img{width:100%;}
#asabun_fes #cover h1 img{width:auto; filter:drop-shadow(0 10px 25px rgba(0, 0, 0, 0));}
#asabun_fes h2.headline{ font-size:200%; margin:20px auto;}
#asabun_fes .wrapper p.txt{ font-size:1.6rem; letter-spacing:0.1em}
#asabun_fes .wrapper p.notice{ font-size:1.2rem; letter-spacing:0.05em}
.mt30{margin-top:30px !important;}
.mt50{margin-top:50px !important;}

body#asabun_fes a,body#asabun_fes a:link,body#asabun_fes a:visited{text-decoration:none; color:#111;}
#asabun_fes .wrapper .block {width: 98%; max-width:100%; margin: 0 auto;}
#asabun_fes .wrapper .message{ font-size:100%; letter-spacing:0.2em; line-height:180%;}
#asabun_fes .wrapper .image img{width:100%;}

#asabun_fes .wrapper section:not(#cover,#concept,#foodsshop){padding:30px 0;}
#asabun_fes .wrapper #concept ul li img{ width:100%;}
#asabun_fes .wrapper section h2.headline{font-size:3.6rem; letter-spacing:0.1em; margin:0 auto 10px; font-weight:600; line-height:150%;}
#asabun_fes .wrapper section h3{font-size:2.0rem; letter-spacing:0.1em; margin:20px auto 10px;}
#asabun_fes .wrapper section#showtime h3{font-size:2.4rem; }


#asabun_fes .wrapper section p.txt{font-size:1.4rem; margin-bottom:10px;}
#asabun_fes .wrapper section .btn{margin:10px auto 20px;}
#asabun_fes .wrapper section .btn a{background:#000; padding:6px 30px; color:#fff; display:inline-block; font-size:1.8rem; letter-spacing:0.1em;}
#asabun_fes .wrapper section .btn a:hover{text-decoration:none; transform: scale(1.1,1.1);transition-duration: 0.1s;}

/*カバー・コンセプト*/
#asabun_fes .wrapper #cover div h1{position:absolute; top:250px; left: 50%; transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}

#asabun_fes .wrapper #cover .image>img{opacity: 0;filter: blur(10px);animation: slideUp 3s forwards; z-index:-500; position:relative;}
@keyframes slideUp {
0% {transform: translateY(100px); opacity:0; filter:blur(10px);}
100% {transform: translateY(0); opacity:100; filter:blur(0px);}
}
#asabun_fes .wrapper #cover::after{content:""; background:url("../../images/event/fes2024/bk_mountain.svg") bottom center no-repeat; position:absolute; bottom:0; left:0; z-index:1500; height:300px; width:100%; background-size:cover;}
#asabun_fes .wrapper #concept{margin:0; position:relative; z-index:300; background:#fff;}
#asabun_fes .wrapper #concept article:nth-of-type(1){margin-top:-80px; margin-bottom:100px;}
#asabun_fes .wrapper #concept ul{display:grid; grid-template-columns:repeat(auto-fit, 250px); justify-content:center; gap:30px; margin:50px auto;}


/*アルバム*/
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 340px;
  margin-bottom: 100px;
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 20s infinite linear 1s both;
  animation: loop-slide 20s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.slideshow img{width:auto;}


#asabun_fes .wrapper #bunbunland{ padding:50px 0; background-image: 
    radial-gradient(rgb(255, 255, 255) 16%, transparent 36%),
    radial-gradient(rgb(255, 255, 255) 16%, transparent 36%);
  background-position: 0px 0px, 8px 8px;
  background-size: 16px 16px;
  background-color:#eee;
 }

#asabun_fes .wrapper #showtime{background-image: 
    radial-gradient(#eee 50%, transparent 54.4%),
    radial-gradient(#eee 50%, transparent 54.4%);
  background-position: 0px 0px, 16px 16px;
  background-size: 32px 32px;
  background-color:#fff;
}

#asabun_fes .wrapper #bunbunland{ padding:50px; background:transparent;}

#asabun_fes .wrapper p.caution{background:#ffc; display:inline-block; padding:10px 20px; margin:30px auto; letter-spacing:0.1em; font-size:1.4rem;}
#asabun_fes .wrapper ul.frexList{display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin:20px auto;}
#asabun_fes .wrapper ul.frexList li{position:relative; flex-basis:calc( ( 100% - 90px ) / 4 ); }
#asabun_fes .wrapper #showtime ul.frexList{gap:30px 3%;}
#asabun_fes .wrapper #showtime ul.frexList li{flex-basis:30%; min-width:360px;}
#asabun_fes .wrapper ul.frexList li .image{border:6px solid #fff;}
#asabun_fes .wrapper section#showtime ul.frexList li .image{box-shadow:0px 10px 10px -6px rgba(0, 0, 0, 0.5); margin-bottom:20px; border:10px solid #000; background:#000;}
#asabun_fes .wrapper section#workshop ul.frexList li .image{border:6px solid #333;}



#asabun_fes ul.frexList li .time{ margin:0 20px 10px; display:inline-block;}
#asabun_fes ul.frexList li .time img{width:4.0rem;}
#asabun_fes ul.frexList li .time .txt{ letter-spacing:0; margin:4px 0 0; font-weight:600;}
#asabun_fes ul.frexList li h3{font-size:2.0rem; letter-spacing:0.1em; margin:10px auto 10px; font-weight:600;}


#asabun_fes #bunbunland div.borderBox{display:inline-block; vertical-align:top; padding:0 20px 20px; margin:20px; border-style:solid; border-width:10px; border-radius:10px; background:#fff; }
#asabun_fes #bunbunland div.borderBox.b00{border-image:conic-gradient(#E7380D, #954E0F, #22AC38, #E7380D) 1; border-radius:10px;}
#asabun_fes #bunbunland div.borderBox.b01{border-color:#E7380D;}
#asabun_fes #bunbunland div.borderBox.b02{border-color:#954E0F;}
#asabun_fes #bunbunland div.borderBox.b03{border-color:#22AC38;}
#asabun_fes #bunbunland div.borderBox.b04{border-color:#FDD000;}
#asabun_fes #bunbunland div.borderBox.b05{border-color:#ccc;}
#asabun_fes #bunbunland div.borderBox h3.heading{font-size:2.4rem; margin-bottom:20px;}
#asabun_fes #bunbunland div.borderBox h4{font-size:2rem; margin:10px 0 0;}
#asabun_fes #bunbunland div.borderBox ul.frexList{display:flex;}
#asabun_fes #bunbunland div.borderBox ul.frexList::after{display:none;}
#asabun_fes #bunbunland div.borderBox ul.frexList li{width:20%; min-width:280px; vertical-align:top;　flex-grow:1;}
#asabun_fes #bunbunland div.borderBox ul.frexList li.illust{width:220px; min-width:220px;}
#asabun_fes #bunbunland div.borderBox ul.gridList{display:grid; grid-template-columns:repeat(auto-fit, 250px); gap:20px; justify-items: center;}
#asabun_fes #bunbunland div.borderBox ul.gridList05{grid-template-columns:200px repeat(4, 250px);}
#asabun_fes #bunbunland div.borderBox ul.gridList03{grid-template-columns:200px repeat(2, 250px);}
#asabun_fes #bunbunland div.borderBox ul.gridList02{grid-template-columns:200px 250px;}
#asabun_fes #bunbunland div.borderBox ul.gridList li.illust{width:220px; min-width:220px;}

@media screen and (max-width: 1300px) {
#asabun_fes #bunbunland div.borderBox ul.gridList05{grid-template-columns:repeat(3, 250px);justify-content:end;}
#asabun_fes #bunbunland div.borderBox ul.gridList05 li:first-child{grid-row:1 / 3;}
}

@media screen and (max-width: 768px){
#asabun_fes .wrapper #showtime ul.frexList li{min-width:90%; margin:0 5%;}
#asabun_fes .wrapper #showtime ul.frexList li .image{border:6px solid #000; }
#asabun_fes #bunbunland div.borderBox{display:block; padding:10px 3%; margin:14px 2%; border-width:6px; }
#asabun_fes #bunbunland div.borderBox ul.gridList{display:block!important;}
#asabun_fes #bunbunland div.borderBox ul.gridList li.illust{ width:60%; margin:0 auto 20px;}
#asabun_fes #bunbunland div.borderBox ul.gridList li:not(.illust){ display:grid; grid-template-columns:30% 1fr; gap:5%; margin-bottom:14px; border-top:1px solid #ccc;}
#asabun_fes #bunbunland div.borderBox ul.gridList li:not(.illust) .image img{ object-fit:cover; height:100%;}
#asabun_fes #bunbunland div.borderBox ul.gridList li:not(.illust) div{text-align:left;}
#asabun_fes #bunbunland div.borderBox ul.gridList li:not(.illust) div br{display:none;}
#asabun_fes .wrapper section h3{margin:0;}
}

/*プレゼント*/
#asabun_fes .wrapper .present{display:flex; flex-wrap:wrap; justify-content:center; gap:30px 50px;; margin-bottom:50px;}
#asabun_fes .wrapper .present>div{display:inline-block; margin:50px 10px 0; padding:24px; border:6px dotted #000; border-radius:20px; background:#fff;}
#asabun_fes .wrapper .present>div h3.image{margin-top:-100px;}

/*ぶんぶん食堂*/
#asabun_fes .wrapper #foodsshop{padding:30px 0 0; background:rgba(251, 246, 213, 1); margin-bottom:220px;}
#asabun_fes .wrapper #foodsshop .inner{background-image:radial-gradient(#fff 16%, transparent 36%),radial-gradient(#fff 16%, transparent 36%);
  background-position: 0px 0px, 8px 8px;background-size: 16px 16px;
  background:transparetnt; position:relative; padding:0 30px 30px; margin:0 auto;}
#asabun_fes .wrapper #foodsshop ul.frexList li{flex-basis:240px;}
#asabun_fes .wrapper #foodsshop ul li p.image{ margin-bottom:20px; border:none;}
#asabun_fes .wrapper #foodsshop ul li p.image img{border-radius:50%; width:100%; border:6px solid #fff;}

#asabun_fes .wrapper #store ul li p.image,#asabun_fes #store ul li p.image img{ width:;}
#asabun_fes .wrapper #store ul li p.image img{clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0 25%);}

#asabun_fes .wrapper .bun_color{margin:-6px auto 6px;}
#asabun_fes .wrapper .bun_color span{margin:0 5px;}
#asabun_fes .wrapper .bun_color .b01{color:#E7380D;}
#asabun_fes .wrapper .bun_color .b02{color:#954E0F;}
#asabun_fes .wrapper .bun_color .b03{color:#22AC38;}
#asabun_fes .wrapper .bun_color .b04{color:#FDD000;}
#asabun_fes .wrapper p.txt.border {border:1px solid #666; padding:2px 10px; display:inline-block;}
#asabun_fes .wrapper p.message.border {border-bottom:1px solid #666; padding:4px 12px; display:inline-block;}
#asabun_fes .wrapper .link{font-size:1.3rem; letter-spacing:1.2; letter-spacing:0.1rem; margin:0 10px;}
#asabun_fes .wrapper .link a{background:#fff; padding:4px 10px; color:#666; font-weight:300;}
#asabun_fes .wrapper .link a:hover{background:#666; color:#fff; font-weight:300;}

/*ルオムの森*/
#asabun_fes .wrapper section#luomu{margin:150px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; background-image: 
    radial-gradient(rgb(234, 249, 205) 50%, transparent 54.4%),
    radial-gradient(rgb(234, 249, 205) 50%, transparent 54.4%);
  background-position: 0px 0px, 8px 8px;
  background-size: 16px 16px;
  background-color: rgb(255, 255, 255);}
#asabun_fes .wrapper #luomu>div:nth-child(1){background:url(../../images/event/fes2024/img_luomu.jpg) top left no-repeat; background-size:cover;}
#asabun_fes .wrapper #luomu>div{flex-basis:33.3%;}
#asabun_fes .wrapper #luomu>div.inner{padding:0 0 30px;}
#asabun_fes .wrapper #luomu>div.inner h2{margin-top:-130px;}
#asabun_fes .wrapper #luomu>div.inner .message{margin:0 auto;}
#asabun_fes .wrapper #luomu>div.inner .contact{margin:40px 20px 0; background:#fff; border-radius:10px; padding:0 20px 10px; display:inline-block;}
#asabun_fes .wrapper #luomu>div.inner .contact h3{font-size:1.4rem; margin-top:-1rem; font-weight:normal;}


@media screen and (max-width: 768px){
#asabun_fes .wrapper article{text-align:center;}
#asabun_fes .wrapper #cover div h1{position:absolute; top:150px;}
#asabun_fes .wrapper #cover::after{height:150px;}
#asabun_fes .wrapper #concept {margin:0; padding-top:50px;}
#asabun_fes .wrapper #concept ul{grid-template-columns:repeat(auto-fit,40%); gap:10px 5%; margin:30px auto;}
#asabun_fes .wrapper p.caution{margin:0px auto;}
#asabun_fes .wrapper .bun_color{margin:-10px auto 2px;}
#asabun_fes .wrapper #foodsshop ul.frexList li{flex-basis:38%;}
#asabun_fes .wrapper #foodsshop .inner{padding:0 2%;}
#asabun_fes .wrapper #foodsshop ul.frexList{gap:2%; margin:0; padding-bottom:30px;}
#asabun_fes .wrapper #foodsshop ul.frexList li{flex-basis:46%; min-width:auto;}
#asabun_fes .wrapper #foodsshop ul.frexList li .txt{text-align:left; font-size:1.2rem; letter-spacing:0; line-height:140%; padding:0 2%;}
#asabun_fes .wrapper #foodsshop ul.frexList li .txt br{display:none;}
#asabun_fes .wrapper #luomu>div{flex-basis:100%;}

}
/*ここまで*/
@media(max-width:640px ){
#asabun_fes .wrapper{margin:0; }
#asabun_fes #cover h1 img{width:100%; transform: scale(2.0);}
article{text-align:left; margin:0 5%;}
}
@media screen and (min-width: 481px) and (max-width: 810px) {
#asabun_fes .wrapper{margin:20px 10px;}
#asabun_fes #cover h1 img{width:60%; transform: scale(2.0);}
article{text-align:left; margin:0 5%;}
article br{display:none;}
}

}