@charset "UTF-8";

@media screen and (max-width: 768px) {
}


:root {
/* コンテンツの空き */
--con_top_ma:min(15vw, 150px);
}



/*-----------------------------------------------------*/
/*------------------共通タイトル--------------------*/
/*-----------------------------------------------------*/
.marche_title{
display: block;
text-align: center;
color: var(--color-white);
padding: 5px;
border-radius: 50px;
margin-bottom: 30px;
background-color: var(--color-green);
}
@media screen and (max-width: 768px) {
.marche_title{
font-size: calc(20 * var(--rem));
}
}



/*-----------------------------------------------------*/
/*------------------main--------------------*/
/*-----------------------------------------------------*/

.main{
    position: relative;
    background-color: #f4f3e7;
}

/* カーテン */
.main::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: url(../img/marche_header.svg);
    background-position: top center;
    background-repeat: repeat-x;
    background-size: auto 150px;
    transform: translateY(-150px);
    animation: marche-header 0.5s ease-out forwards;
    z-index: 2;
}

.main > *{
    position: relative;
    z-index: 1;
}

@keyframes marche-header{
    to{
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px){
    .main::after{
        height: 100px;
        background-image: url(../img/marche_header_sp.svg);
        background-size: auto 100px;

        transform: translateY(-100px);
    }
}


/* 下部の手書き風 */
.main::before{
position: absolute;
z-index: -1;
content: "";
width: 100%;
display: block;
height: 80px;
bottom: -70px;
left: 0;
background-image: url(../img/main_footer.svg);
background-color: var(--color-white);
background-size: 100% 100%;
background-position: top center;
}
@media screen and (max-width: 768px) {
.main::before{
height: 10vw;
bottom: -7vw;
}
}



.main .wrap{
padding-top: 180px;
padding-bottom: 200px;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.main .wrap{
padding-top: 45vmin;
padding-bottom: 30vmin;
}
}



/* logo */
.main_logo{
width: clamp(300px, min(35vw, 45vh), 450px);
/* 最小高さ300px、最小幅450pxで幅縦可変 */
margin: 0 auto;
animation: logo-kachi 3s 3s steps(1) infinite;
}
@keyframes logo-kachi{
  0%{
    transform: rotate(0deg);
  }

  50%{
    transform: rotate(5deg);
  }

  100%{
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 768px) {
.main_logo{
width: 45vw;
}
}



/* 日付時間場所 */
.main .main-data{
width: clamp(600px, min(60vw, 70vh), 700px);
/* 最小高さ600px、最小幅700pxで幅縦可変 */
margin: 20px auto 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: flex-start;
  gap: 5px 3%;
  grid-template-areas:
    "A B"
    "A C"
    "D D";
container-type: inline-size;/*文字サイズの親 */
}
@media screen and (max-width: 980px) {
.main .main-data{
width: 60vw;
  grid-template-areas:
    "A A"
    "B B"
    "C C"
    "D D";
container-type: inline-size;/*文字サイズの親 */
}
}

/* 日付 */
.main .main-data .day{
grid-area: A;
}
@media screen and (max-width: 980px) {
.main .main-data .day{
width: 80%;
margin: 0 auto;
}
}

.main .main-data .day .year{
font-size: calc(16 * var(--rem));
display: block;
margin-top: -20px;
}
.main .main-data .day .day_week{
display: grid;
grid-template-columns: 70% 30%;
container-type: inline-size;
}
.main .main-data .day .day_week .day02{
font-size: 34cqw;
font-weight: 600;
line-height: 85%;
}
.main .main-data .day .day_week .week{
    display: flex;
    align-items:center;
}


/* 時間 */
.main .main-data .time{
grid-area: B;
font-size: 8.3cqw;
font-weight: 600;
line-height: 100%;
}
@media screen and (max-width: 980px) {
.main .main-data .time{
text-align: center;
font-size: 13cqw;
}
}


/* その他 */
.main .main-data .other{
grid-area: C;
display: flex;
column-gap: 5%;
}
.main .main-data .other .item{
width: 47.5%;
background-color: var(--color-green);
text-align: center;
color: var(--color-white);
border-radius: 50px;
padding: 5px 10px;
box-sizing: border-box;
font-size: calc(22 * var(--rem));
font-weight: 500;
}

/* 場所 */
.main .main-data .location{
grid-area: D;
text-align: center;
font-size: 6cqw;
font-weight: 600;
line-height: 100%;
margin-top: 20px;
}
@media screen and (max-width: 980px) {
.main .main-data .other{
display: block;
}
.main .main-data .other .item{
width: 100%;
font-size: 5vw;
width: 60%;
margin: 10px auto 10px auto;
}
.main .main-data .location{
font-size: 8cqw;
margin-top: 10px;
}
}



/* イラスト */
.main_illust_list{
}
.main_illust_list .item{
position: absolute;
width: 10cqmin;
}

/* 雲アニメ */
.main_illust_list .item.cloud01,
.main_illust_list .item.cloud02,
.main_illust_list .item.cloud03,
.main_illust_list .item.cloud04{
opacity: 0;
animation-fill-mode: forwards;
animation-name: cloud;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
@keyframes cloud {
    0% {
        opacity: 0;
        transform: scale(3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* イラストアニメ */
.main_illust_list .item.signboard,
.main_illust_list .item.student,
.main_illust_list .item.company,
.main_illust_list .item.photo,
.main_illust_list .item.shop,
.main_illust_list .item.foodtruck{
opacity: 0;
animation-name: illust;
animation-duration: 2s;
transform: rotate(-10deg);
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
@keyframes illust {
    0% {
        opacity: 0;
        transform: rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}


/* 箭内くんアニメ */
.main_illust_list .item.yanai{
animation: bound 1.7s;
}



/* 雲 */
.main_illust_list .item.cloud01{
top:180px;
left:5vw;
width: 10%;
max-width: 100px;
animation-delay: 0.5s;
}
/* 雲 */
.main_illust_list .item.cloud02{
top:180px;
right:5vw;
width: 10%;
max-width: 100px;
animation-delay: 0.7s;
}
/* 雲 */
.main_illust_list .item.cloud03{
top:45%;
right:20vw;
width: 7%;
max-width: 80px;
animation-delay: 1s;
}
/* 雲 */
.main_illust_list .item.cloud04{
top:40%;
left:23vw;
width: 7%;
max-width: 80px;
animation-delay: 1.3s;
}
/* 看板 */
.main_illust_list .item.signboard{
top:calc(180px + 5%);
left:5vw;
width: 15%;
max-width: 300px;
animation-delay: 1.7s;
}
/* 学生 */
.main_illust_list .item.student{
top:45%;
left:7vw;
width: 12%;
max-width: 250px;
animation-delay: 2.0s;
}
/* 企業 */
.main_illust_list .item.company{
top:73%;
left:10vw;
width: 15%;
max-width: 300px;
animation-delay: 2.3s;
}
/* 記念写真 */
.main_illust_list .item.photo{
top:calc(180px + 5%);
right:15vw;
width: 12%;
max-width: 250px;
animation-delay: 2.0s;
}
/* 店 */
.main_illust_list .item.shop{
top:50%;
right:5vw;
width: 12%;
max-width: 250px;
animation-delay: 2.3s;
}
/* 箭内くん */
.main_illust_list .item.yanai{
top:55%;
right:23vw;
width: 4%;
max-width: 250px;
animation-delay: 2.7s;
}
/* キッチンカー */
.main_illust_list .item.foodtruck{
top:75%;
right:12vw;
width: 9%;
max-width: 300px;
animation-delay: 1.7s;
}

@media screen and (max-width: 768px) {
/* 雲 */
.main_illust_list .item.cloud01{
top:130px;
left:5vw;
width: 10%;
}
/* 雲 */
.main_illust_list .item.cloud02{
top:130px;
right:5vw;
width: 10%;
}
/* 雲 */
.main_illust_list .item.cloud03{
top:42%;
right:5vw;
width: 7%;
}
/* 雲 */
.main_illust_list .item.cloud04{
top:63%;
left:15vw;
width: 10%;
}
/* 看板 */
.main_illust_list .item.signboard{
top:calc(130px + 13%);
left:5vw;
width: 18%;
}
/* 学生 */
.main_illust_list .item.student{
top:52%;
left:3vw;
width: 15%;
}
/* 企業 */
.main_illust_list .item.company{
top:72%;
left:5vw;
width: 18%;
}
/* 記念写真 */
.main_illust_list .item.photo{
top:calc(130px + 13%);
right:5vw;
width: 13%;
}
/* 店 */
.main_illust_list .item.shop{
top:50%;
right:5vw;
width: 14%;
}
/* 箭内くん */
.main_illust_list .item.yanai{
top:60%;
right:13vw;
width: 7%;
}
/* キッチンカー */
.main_illust_list .item.foodtruck{
top:73%;
right:7vw;
width: 12%;
}
}

/* ノートパソコン */
@media screen and (min-width: 769px) and (orientation: landscape) and (max-height: 767px){

/* 日付時間場所 */
.main .main-data{
width: clamp(550px, min(55vw, 65vh), 650px);
}
.main .main-data .time{
font-size: 8cqw;
}

/* 雲 */
.main_illust_list .item.cloud01{
top:180px;
left:7vw;
width: 10%;
}
/* 雲 */
.main_illust_list .item.cloud02{
top:180px;
right:5vw;
width: 10%;
}
/* 雲 */
.main_illust_list .item.cloud03{
top:45%;
right:20vw;
width: 7%;
}
/* 雲 */
.main_illust_list .item.cloud04{
top:45%;
left:23vw;
width: 7%;
}
/* 看板 */
.main_illust_list .item.signboard{
top:calc(170px + 0%);
left:20vw;
width: 15%;
}
/* 学生 */
.main_illust_list .item.student{
top:38%;
left:5vw;
width: 10%;
}
/* 企業 */
.main_illust_list .item.company{
top:60%;
left:11vw;
width: 15%;
}
/* 記念写真 */
.main_illust_list .item.photo{
top:calc(170px + 0%);
right:15vw;
width: 12%;
}
/* 店 */
.main_illust_list .item.shop{
top:45%;
right:5vw;
width: 12%;
}
/* 箭内くん */
.main_illust_list .item.yanai{
top:50%;
right:27vw;
width: 4%;
}
/* キッチンカー */
.main_illust_list .item.foodtruck{
top:68%;
right:15vw;
width: 9%;
}
}




/*-----------------------------------------------------*/
/*------------------about--------------------*/
/*-----------------------------------------------------*/

.about{
background-image: url(../img/about_Illust_01.svg),url(../img/about_Illust_02.svg);
background-position:top left,top right;
background-size: 16%;
}

.about .about_point{
width: 80%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 0;
padding-left: 3vw;
}
.about .about_point .item{
margin-left: -3vw;
opacity: 0;
}
.about .about_point .item.yanai{
margin-top: -1vw;
}
@media screen and (max-width: 768px) {
.about .about_point{
width: 100%;
padding-left: 15vw;
}
.about .about_point .item{
margin-left: -15vw;
}
.about .about_point .item.yanai,
.about .about_point .item.tyiukei{
margin-top: 20vw;
}
}

.about .about_point .item.yanai{animation-delay: 0s;}
.about .about_point .item.yasai{animation-delay: 0.3s;}
.about .about_point .item.tyiukei{animation-delay: 0.7s;}



.about .about_txt{
text-align: center;
margin-top: 40px;
}
.about .about_txt .title{
font-size: min(6vw, calc(50 * var(--rem)));
font-weight: 600;
margin-bottom: 30px;
}
.about .about_txt p{
font-size: min(1.8vw, calc(24 * var(--rem)));
font-weight: 600;
line-height: min(4vw, 190%);
}
@media screen and (max-width: 768px) {
.about .about_txt .title{
margin-bottom: 20px;
}
.about .about_txt p{
text-align: left;
font-size: calc(16 * var(--rem));
font-weight: 500;
line-height: 180%;
}
.about .about_txt p br{
display: none;
}
}





/*-----------------------------------------------------*/
/*------------------point--------------------*/
/*-----------------------------------------------------*/

.point{
margin-top: var(--con_top_ma);
}

.point .point_content{
background-color: #e4efd5;
border-radius: 2vw;
border: 3px solid var(--color-green);
}
.point .point_content .main_title{
text-align: center;
padding: 1.2vw;
height: min(10vw, 110px);
color: var(--color-white);
font-size: min(4vw, calc(40 * var(--rem)));
font-weight: 500;
background-image: url(../img/marche_header_sp.svg);
background-position: top center;
background-repeat: repeat-x;
background-size: auto min(10vw, 110px);
border-radius: 1.6vw 1.6vw 0 0;
}


.point .point_content .wrap{
padding: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  gap: 20px;
  grid-template-areas:
    "A A"
    "B B"
    "C C";
}
@media screen and (max-width: 950px) {
.point .point_content .wrap{
  grid-template-areas:
    "A A"
    "B B"
"C C";
}
}

.point .point_content .wrap .item{
background-color: var(--color-white);
border-radius: 1.5vw;
padding: 40px;
}
@media screen and (max-width: 950px) {
.point .point_content .wrap .item{
padding: 20px;
}
}


.point .point_content .wrap .item .title{
text-align: center;
color: var(--color-white);
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
display: block;
font-weight: 500;
}

/*---------------------野菜----------------------*/
.point .point_content .wrap .item.vegetable{
  grid-area: A;
}
.point .point_content .wrap .item.vegetable .title{
background-color: var(--color-green);
}
.point .point_content .wrap .item.vegetable .vegetable_info{
display: grid;
grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "A B"
    "C C";
gap: 30px 40px;
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.point .point_content .wrap .item.vegetable .vegetable_info{
display: block;
}
}

/*---文章と長芋----*/
.point .point_content .wrap .item.vegetable .vegetable_info .box01{
grid-area: A;
}
.point .point_content .wrap .item.vegetable .vegetable_info .box01 p{margin-bottom: 20px;}

/*---イラスト----*/
.point .point_content .wrap .item.vegetable .vegetable_info .box02{
text-align: center;
grid-area: B;
}
@media screen and (max-width: 768px) {
.point .point_content .wrap .item.vegetable .vegetable_info .box02{
margin-top: 50px;
}
}

.point .point_content .wrap .item.vegetable .vegetable_info .box02 p{
margin-top: 10px;
text-align: left;
font-size: calc(20 * var(--rem));
font-weight: 500;
line-height: 160%;
}

/*---販売時間----*/
.point .point_content .wrap .item.vegetable .vegetable_info .box03{
background-color: #e4efd5;
text-align: center;
padding: 15px;
margin-top: 10px;
border-radius: 7px;
grid-area: C;
}
@media screen and (max-width: 768px) {
.point .point_content .wrap .item.vegetable .vegetable_info .box03{
margin-bottom: 20px;
}
}
.point .point_content .wrap .item.vegetable .vegetable_info .box03 p{
font-size: calc(24 * var(--rem));
font-weight: 500;
}
@media screen and (max-width: 768px) {
.point .point_content .wrap .item.vegetable .vegetable_info .box03 p{
font-size: calc(20 * var(--rem));
}
}




/*---------------------出展ブース----------------------*/
.point .point_content .wrap .item.booth{
  grid-area: B;
}
.point .point_content .wrap .item.booth .title{
background-color: #f7c33a;
}
.point .point_content .wrap .item.booth img{
margin: 15px 0;
}
.point .point_content .wrap .item.booth .booth_info,
.point .point_content .wrap .item.photo .photo_info{
background-color: #fcf9d0;
text-align: center;
padding: 10px;
margin-top: 10px;
border-radius: 7px;
text-align: left;
}

.point .point_content .wrap .item.booth .booth_program{
margin: 20px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
@media screen and (max-width: 768px) {
.point .point_content .wrap .item.booth .booth_program{
display: block;
}
}

.point .point_content .wrap .item.booth .booth_program li{
border: 2px solid #edb811;
border-radius: 10px;
padding: 20px;
}
@media screen and (max-width: 768px) {
.point .point_content .wrap .item.booth .booth_program li{
margin: 20px 0;
}
}

.point .point_content .wrap .item.booth .booth_program li:last-child{
border: 0;
border-radius: 0;
padding: 0;
}



.point .point_content .wrap .item.booth .booth_program .name{
background-color: #edb811;
display: inline-block;
padding: 3px 10px;
border-radius: 5px;
color: var(--color-white);
font-size: calc(16 * var(--rem));
}
.point .point_content .wrap .item.booth .booth_program .title_p{
color: #f4ae00;
font-size: calc(20 * var(--rem));
font-weight: 600;
border-bottom: 2px solid;
padding-bottom: 5px;
margin: 10px 0;
}



/*---------------------フォトスポット----------------------*/
.point .point_content .wrap .item.photo{
  grid-area: C;
}
.point .point_content .wrap .item.photo .title{
background-color: #e56d2b;
}
.point .point_content .wrap .item.photo img{
margin: 15px 0 0 0;
width: 60%;
display: block;
margin: 20px auto;
}
@media screen and (max-width: 768px) {
.point .point_content .wrap .item.photo img{
width: 100%;
}
}

.point .point_content .wrap .item.photo .photo_info{
background-color: #fcf4e3;
}
.point .point_content .wrap .item.photo small{
margin-top: 10px;
display: block;
}


/*---------------------箭内さんコメント----------------------*/
.point_yanai{
width: 80%;
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: flex-end;
  gap: 0;
  grid-template-areas:
    "A B";
margin: 0 auto;
}

.point_yanai .point_yanai_ph{
  grid-area: A;
}

.point_yanai .point_yanai_comment{
position: relative;
background-color: var(--color-green);
padding: 30px;
box-sizing: border-box;
border-radius: 15px;
margin-bottom: 30px;
  grid-area: B;
}
.point_yanai .point_yanai_comment p{color: var(--color-white);}

.point_yanai .point_yanai_comment::before{
    content: "";
    position: absolute;
    left: -20px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 20px solid var(--color-green);
}

@media screen and (max-width: 768px) {
.point_yanai{
width: 90%;
grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "B B "
    "A A ";
}
.point_yanai .point_yanai_ph{
width: 70%;
margin: -30px auto 0 auto;
}
.point_yanai .point_yanai_comment{
padding: 20px;
}
.point_yanai .point_yanai_comment br{
display: none;
}
.point_yanai .point_yanai_comment::before{
    content: "";
    position: absolute;
    left: 50%;
top:auto;
    bottom: -20px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 20px solid var(--color-green);
}

}




/*-----------------------------------------------------*/
/*------------------access--------------------*/
/*-----------------------------------------------------*/

.access{
margin-top: var(--con_top_ma);
}

.access .wrap{
display: grid;
grid-template-columns: 50% 1fr;
gap: 30px;
}
@media screen and (max-width: 768px) {
.access .wrap{
display: block;
}
}

.access .wrap iframe{
height: 300px;
}

.access .wrap .access_info h3{
font-size: calc(24 * var(--rem));
font-weight: 500;
color: var(--color-green);
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.access .wrap .access_info h3{
margin-top: 30px;
}
}

.access .wrap .access_info dl{
display: grid;
grid-template-columns: 70px 1fr;
gap: 10px;
margin: 10px 0;
}
.access .wrap .access_info dt{
background-color: var(--color-brown);
color: var(--color-white);
text-align: center;
padding: 5px;
border-radius: 5px;
font-size: calc(14 * var(--rem));
}

.access .wrap .access_info .access_info_box{
border: 1px solid var(--color-green);
padding: 10px;
color: var(--color-green);
text-align: center;
margin-top: 20px;
}



/*-----------------------------------------------------*/
/*------------------sponsor--------------------*/
/*-----------------------------------------------------*/

.sponsor{
position: relative;
margin-top: var(--con_top_ma);
background-color: #e4efd5;
padding: 50px 0 100px 0;
margin-bottom: -200px;
}
@media screen and (max-width: 768px) {
.sponsor{
background-color: #e4efd5;
padding: 10vw 0 20vw 0;
margin-bottom: -20vw;
}
}


/* 下部の手書き風 */
.sponsor::before{
position: absolute;
z-index: -1;
content: "";
width: 100%;
display: block;
height: 80px;
top: -70px;
left: 0;
background-image: url(../img/sponsor_top.svg);
background-size: 100% 100%;
background-position: top center;
}
@media screen and (max-width: 768px) {
.sponsor::before{
height: 10vw;
top: -7vw;
}
}


/* スポンサーリスト */
.sponsor .sponsor_box{
border-radius: var(--radius);
}

.sponsor .sponsor_box .sponsor_li{
display: grid;
gap: 10px;
grid-template-columns: repeat(3, auto);
padding: 20px;
}
@media screen and (max-width: 768px) {
.sponsor .sponsor_box .sponsor_li{
grid-template-columns: repeat(2, auto);
padding: 10px;
}
}

.sponsor .sponsor_box .sponsor_li .item{
background-color: var(--color-white);
border-radius: var(--radius);
}
/*--UNIVERSAL OVERALLさまのみ--*/
.sponsor .sponsor_box .sponsor_li .item.orange{
background-color:#ea5514;
}

.sponsor .sponsor_box .sponsor_li .item.dami{
background-color: #e4efd5;
}
@media screen and (max-width: 768px) {
.sponsor .sponsor_boxr .sponsor_li .item.dami{
display: none;
}
}

/* 強調企業 */
@media screen and (max-width: 768px) {
.sponsor .sponsor_box .sponsor_li .emphasis{
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 10px) / 2); /* 他の1マス分と同じ幅 */
}
}

.sponsor .sponsor_box .sponsor_li .item a{
display: block;
padding: 5% 10%;
}