@charset "UTF-8";

/* 共通部分
--------------------------------- */
html{
    font-size:100%;
    font-family:"Noto Sans JP",sans-serif;
    background-color:#fffff4;
    color:#333333;
}
html,body{
    overflow-x:hidden;
    margin:0;
    min-height:100vh;
}
body{
    display:flex;
    flex-direction:column;
}
a{
    text-decoration:none;
}

/* ヘッダー
--------------------------------- */
.main-title{
    font-family:"Dela Gothic One",sans-serif;
    font-weight:400;
    text-align:center;
    font-size:5vw;
}
.sub-title{
    font-family:"Dela Gothic One",sans-serif;
    font-weight:400;
    text-align:center;
    font-size:4vw;
}

/* メイン部分
--------------------------------- */
main{
    flex:1;
}

/* 飲食ブースボタン
--------------------------------- */
.button001 a{
    background:#A6E97F;
    border-radius:3px;
    position:relative;
    display:flex;
    justify-content:space-around;
    align-items:center;
    margin:0 auto;
    width:300px;
    height:90px;
    padding:10px 20px;
    color:#333;
    transition:0.3s ease-in-out;
    font-weight:500;
    font-size:30px;
    box-sizing:border-box;
}
.button001 a:hover{
    background:#FFF692;
    color:#fff;
}
.button001 a:after{
    content:'';
    width:5px;
    height:5px;
    border-top:3px solid #313131;
    border-right:3px solid #313131;
    transform:rotate(45deg) translateY(-50%);
    position:absolute;
    top:50%;
    right:20px;
    border-radius:1px;
    transition:0.3s ease-in-out;
}
.button001 a:hover:after{
    border-color:#FFF;
}

.in h1{
    font-size:9vw;
    color:#A6E97F;
    text-align:center;
}

/* 屋外・屋内タイトル
--------------------------------- */
main > h1{
    text-align:center;
    font-size:clamp(30px,4vw,50px);
    margin:80px 0 50px;
}

/* 飲食ブース一覧
--------------------------------- */
.zenbu{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:80px;
    width:calc(100% - 100px);
    max-width:1400px;
    margin:60px auto 100px;
    box-sizing:border-box;
}

/* 現在のHTMLの.yokoを無視して中身だけグリッドにする */
.yoko{
    display:contents;
}

/* カード
--------------------------------- */
.about,
.okunai{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    height:auto;
    min-height:400px;
    border-radius:60px;
    padding:clamp(20px,3vw,40px);
    outline:20px solid #A6E97F;
    margin:0;
    overflow:hidden;
    background:#fffff4;
}
.okunai{
    outline:20px solid #E90004;
}

/* 見出し
--------------------------------- */
.about h2,
.okunai h2{
    text-align:center;
    font-size:clamp(24px,3vw,44px);
    margin:10px 0 40px;
    line-height:1.4;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* 場所
--------------------------------- */
.about h3,
.okunai h3{
    margin:0;
    font-size:clamp(18px,2vw,30px);
    line-height:1.5;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* 画像＋文章
--------------------------------- */
.gazou{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

/* 画像
--------------------------------- */
.about img,
.okunai img{
    width:40%;
    max-width:250px;
    height:auto;
    object-fit:contain;
    flex-shrink:0;
}

/* 文章
--------------------------------- */
.moji{
    flex:1;
    min-width:0;
}

.about p,
.okunai p{
    margin:2rem 0 0;
    font-size:clamp(16px,2vw,30px);
    line-height:1.7;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* フッター
--------------------------------- */
.page-footer{
    width:100%;
    position:relative;
    background-color:#FFF692;
    border-radius:10vw 0 0 0;
}
.footer-box{
    background-color:#FFF692;
    width:100%;
    min-height:40vw;
    height:auto;
    position:relative;
    border-radius:10vw 0 0 0;
    padding-bottom:5vw;
    box-sizing:border-box;
}
.eye4{
    width:13vw;
    position:absolute;
    top:2vw;
    left:3vw;
    transform:rotate(-22deg);
}
.textlink2{
    font-size:2vw;
    font-weight:500;
    transition:color 0.4s;
    text-decoration:none;
    color:#333333;
}
.textlink2:hover{
    color:#E90004;
}
h3{
    margin-top:10vw;
}

/* 連絡先
--------------------------------- */
.info{
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding-top:8vw;
    margin-top:-5vw;
}
.info-tit{
    position:absolute;
    top:5vw;
    left:23vw;
    font-size:2.3vw;
}

/* 関連ページ
--------------------------------- */
.footer-content{
    display:flex;
    justify-content:space-around;
    align-items:flex-start;
    padding-top:20vw;
    padding-bottom:3vw;
}
.contact-area,
.link-area{
    font-size:2vw;
}
.link-area ul{
    padding:0;
    margin-top:5vw;
}
.link-area li{
    list-style:none;
}
.SNS{
    display:flex;
    gap:2vw;
    margin-top:3vw;
    margin-left:10vw;
}
.SNS img{
    width:4vw;
}

/* コピーライト
--------------------------------- */
.copyright{
    margin:0;
    padding:1.5vw 0;
    text-align:center;
    font-size:1.5vw;
    background-color:#FFF692;
}

/* ハンバーガーボタン
--------------------------------- */
#menu-bar{
    width:45px;
    height:40px;
    position:fixed;
    top:20px;
    right:20px;
    cursor:pointer;
    z-index:999;
}
.bar{
    height:5px;
    width:100%;
    background-color:#E90004;
    display:block;
    border-radius:5px;
    transition:0.3s ease;
}
#bar1{
    transform:translateY(-4px);
}
#bar3{
    transform:translateY(4px);
}

/* ナビ
--------------------------------- */
.nav{
    position:fixed;
    top:0;
    right:0;
    width:250px;
    height:100vh;
    font-weight:500;
    background-color:transparent;
    transform:translateX(100%);
    transition:transform 0.3s ease;
    padding-top:50px;
    z-index:998;
}
.nav.change{
    transform:translateX(0);
}
.nav ul{
    padding:0 10px;
    padding-left:30px;
    padding-right:15px;
    margin-left:3vw;
}
.nav li{
    list-style:none;
    padding:12px 0;
}
.nav li a{
    color:white;
    font-size:20px;
    text-decoration:none;
}
.nav li a:hover{
    font-weight:bold;
    color:#333333;
}

/* 円形背景
--------------------------------- */
.menu-bg{
    position:fixed;
    top:0;
    right:0;
    z-index:993;
    width:0;
    height:0;
    margin:30px 20px 0 0;
    background:radial-gradient(circle,#E90004,#E90004);
    border-radius:50%;
    transition:0.4s ease;
}
.change-bg{
    width:70vw;
    height:80vw;
    transform:translate(30%,-30%);
}

/* ☰ → × */
.change .bar{
    background-color:white;
}
.change #bar1{
    transform:translateY(4px) rotate(-45deg);
}
.change #bar2{
    opacity:0;
}
.change #bar3{
    transform:translateY(-6px) rotate(45deg);
}

/* スマホ
--------------------------------- */
@media screen and (max-width:750px){

    html,
    body{
        width:100%;
        margin:0;
        padding:0;
        overflow-x:hidden;
    }

    body{
        position:relative;
    }

    /* ボタン */
    .button001 a{
        width:200px;
        height:80px;
        margin-top:30px;
        font-size:15px;
    }

    .main-title{
        font-size:30px;
        margin-top:10px;
    }

    /* 屋外・屋内タイトル */
    main > h1{
        font-size:32px;
        margin:60px 0 40px;
    }

    /* ブース一覧 */
    .zenbu{
        grid-template-columns:1fr;
        width:calc(100% - 50px);
        gap:80px;
        margin:40px auto 100px;
    }
    /* カード */
    .about,
    .okunai{
        min-height:auto;
        padding:20px;
        border-radius:35px;
    }

    /* 見出し */
    .about h2,
    .okunai h2{
        font-size:clamp(22px,6vw,32px);
        margin:5px 0 25px;
        line-height:1.4;
    }

    /* 画像＋文章 */
    .gazou{
        flex-direction:column;
        gap:15px;
    }

    /* 画像 */
    .about img,
    .okunai img{
        width:min(60%,250px);
        max-width:100%;
    }

    /* 文章 */
    .moji{
        width:100%;
    }

    .about h3,
    .okunai h3{
        font-size:clamp(17px,4.5vw,24px);
    }

    .about p,
    .okunai p{
        margin:1.5rem 0 0;
        font-size:clamp(14px,3.8vw,18px);
        line-height:1.7;
    }

    /* フッター */
    footer{
        position:relative;
        width:100%;
    }

    .page-footer{
        position:relative;
        width:100%;
        margin-top:50vw;
        background-color:#FFF692;
        border-radius:12vw 0 0 0;
    }

    .footer-box{
        position:relative;
        width:100%;
        height:auto;
        min-height:145vw;
        margin:0;
        padding:12vw 8vw 15vw;
        box-sizing:border-box;
        background-color:#FFF692;
        border-radius:12vw 0 0 0;
    }

    /* 目 */
    .eye4{
        position:absolute;
        top:3vw;
        left:4vw;
        width:23vw;
        margin:0;
        transform:rotate(-22deg);
    }

    /* フッター全体 */
    .footer-content{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        width:100%;
        margin:0;
        padding:20vw 0 0;
        gap:8vw;
        box-sizing:border-box;
        text-align:left;
    }

    /* 連絡先 */
    .contact-area{
        width:100%;
        margin:0;
        padding:0;
        font-size:3.3vw;
        text-align:left;
    }

    .info-tit{
        position:static;
        margin:0 0 5vw 30vw;
        font-size:5vw;
    }

    .info{
        display:block;
        width:100%;
        margin:0;
        padding:0;
        font-size:3.3vw;
        line-height:1.8;
    }

    .info table{
        width:100%;
        border-collapse:collapse;
    }

    .info th{
        width:8vw;
        padding:0;
        vertical-align:top;
        white-space:nowrap;
    }

    .info td{
        padding:0;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    /* 関連ページ */
    .link-area{
        width:100%;
        margin:0;
        padding:0;
        font-size:3.5vw;
        text-align:left;
    }

    .link-tit{
        position:static;
        margin:0 0 4vw;
        font-size:5vw;
    }

    .link-area ul,
    .related-link{
        position:static;
        width:100%;
        margin:0;
        padding:0;
    }

    .link-area li,
    .related-link li{
        list-style:none;
        margin:0 0 2vw;
        padding:0;
    }

    .textlink2{
        display:inline-block;
        color:#333333;
        font-size:3.8vw;
        line-height:1.8;
        text-decoration:none;
    }

    .textlink2:hover{
        color:#E90004;
    }

    /* SNS */
    .SNS{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        width:100%;
        gap:8vw;
        margin:2vw 0 0;
        padding-left:5vw;
        box-sizing:border-box;
    }

    .SNS a{
        display:block;
        line-height:0;
    }

    .SNS img{
        display:block;
        width:9vw;
        margin:0;
    }

    .X img,
    .insta img{
        position:static;
        width:9vw;
    }

    /* コピーライト */
    .copyright{
        position:static;
        width:100%;
        margin:0;
        padding:3vw 0;
        background-color:#FFF692;
        font-size:3vw;
        text-align:center;
        box-sizing:border-box;
    }

    /* ハンバーガー */
    #menu-bar{
        position:fixed;
        top:22px;
        right:20px;
        width:40px;
        height:32px;
        cursor:pointer;
        z-index:1002;
    }

    .bar{
        display:block;
        width:100%;
        height:5px;
        background-color:#E90004;
        border-radius:10px;
        transition:0.3s ease;
    }

    #bar1{
        transform:translateY(-4px);
    }

    #bar3{
        transform:translateY(4px);
    }

    /* ナビ */
    .nav{
        position:fixed;
        top:0;
        right:0;
        width:230px;
        height:270px;
        padding:75px 20px 20px 42px;
        box-sizing:border-box;
        background-color:transparent;
        transform:translateX(110%);
        transition:transform 0.4s ease;
        z-index:1001;
    }

    .nav.change{
        transform:translateX(0);
    }

    .nav ul{
        margin:0;
        padding:0;
    }

    .nav li{
        margin:0;
        padding:7px 0;
        list-style:none;
        line-height:1;
    }

    .nav li a{
        display:block;
        color:#ffffff;
        font-size:18px;
        font-weight:800;
        line-height:1.25;
        text-decoration:none;
        white-space:nowrap;
    }

    .nav li a:hover{
        color:#333333;
    }

    /* 赤い円 */
    .menu-bg{
        position:fixed;
        top:0;
        right:0;
        width:0;
        height:0;
        margin:0;
        background-color:#E90004;
        border-radius:50%;
        transform:translate(38%,-38%);
        transition:width 0.4s ease,height 0.4s ease;
        z-index:1000;
    }

    .menu-bg.change-bg{
        width:450px;
        height:550px;
        transform:translate(38%,-38%);
    }

    /* ☰ → × */
    .change .bar{
        background-color:#ffffff;
    }

    .change #bar1{
        transform:translateY(5px) rotate(-45deg);
    }

    .change #bar2{
        opacity:0;
    }

    .change #bar3{
        transform:translateY(-5px) rotate(45deg);
    }
}

/* タブレット
--------------------------------- */
@media screen and (min-width:768px) and (max-width:1023px){

    .change-bg{
        width:800px;
        height:800px;
        transform:translate(25%,-25%);
    }

    .nav li a{
        font-size:25px;
    }
}

/* PC
--------------------------------- */
@media screen and (min-width:1024px){

    .change-bg{
        width:600px;
        height:600px;
        transform:translate(20%,-20%);
    }

    .nav{
        width:400px;
    }

    .nav li a{
        padding:0;
        font-size:30px;
    }
}

/* 大画面
--------------------------------- */
@media screen and (min-width:1440px){

    .change-bg{
        width:50vw;
        height:50vw;
        transform:translate(15%,-15%);
    }
}