html,body{
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
    }

    

    /* ===== スクロールフェードイン ===== */
    .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
    }

    .fade-in.show {
    opacity: 1;
    transform: translateY(0);
    }

.header{
    display: none;
}


    /* ナビゲーション */

    #main{
        scroll-margin-top:200px ;
    }

    #about {
    scroll-margin-top: -230px;
    }

    #news{
        scroll-margin-top: -150px;
    }
    
    #booth{
        scroll-margin-top: 50px;
    }

    #contest{
        scroll-margin-top: -300px;
    }

    #access{
        scroll-margin-top: -150px;
    }

    a{
        text-decoration: none;
    }

  nav a:hover{
        color: #fcaf6b;
    }

    .breadcrumb {
        display: flex;
        justify-content: space-around; /* リンク間を均等に */
        width: 100%; 
        align-items: center;        
        text-align: center;  
        padding: 0 100px;
        box-sizing: border-box;
        font-family: "Bungee", sans-serif;
        font-size:25px;
    }


    .breadcrumb-header{
        position: fixed;
        display: flex;
        width: 100vw;
        height: 70px;
        z-index: 999;
        background-color: #fcfcfc;
        top: 0;
        opacity: .9;
    }

    /* トップボタン */
    .topbtn{
        position: fixed;
        width: 15vh;
        bottom: 30px;  
        right: 60px; 
        z-index: 1000;

        opacity: 0;               /* 最初は非表示 */
        pointer-events: none;     /* クリック無効 */
        transition: opacity 0.5s ease; /* ふわっと表示 */
    }

    /* 表示状態 */
        .topbtn.show {
        opacity: 1;
        pointer-events: auto;     /* 表示時はクリック有効 */
        }



    /* メインビジュアル */

    .main{
        height: 1300px;
        overflow: hidden;
        position: relative;
        margin-top: 70px;
    }

    .main::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: #fcfcfc;
        background-image:  linear-gradient(#69829f 1.8px, transparent 1.8px),
                        linear-gradient(to right, #69829f 1.8px, #fcfcfc 1.8px);
        background-size: 50px 50px;
        z-index: 0; 
        opacity: 0.2;
        height: 1000px;
    }


            @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            }

    .date{
        position: absolute;
        z-index: 11;
        width: 35vh;
        top: 50vh;
        left: 140vh;
    }


    .TEC{
        position: absolute;
        z-index: 10;
        width: 65vh;
        top: 3vh;
        left: 5vh;

        transition: transform 0.3s ease;
    }

    .TEC:hover{
        transform: scale(1.02);
    }

    .TECdenpa{
        position: absolute;
        z-index: 11;
        width: 54vh;
        top: 2vh;
        left: 16.8vh;

        animation-name: blink;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;

        transition: transform 0.3s ease;
    }

    .TECdenpa:hover{
        transform: scale(1.02);
    }

    @keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
    }

    @keyframes rotateAnimation2{
        from{
            transform: rotate(30deg);
        }
        to{
            transform: rotate(-390deg);
        }
    }

    .gear1{
        position: absolute;
        z-index: 9;
        animation: rotateAnimation 100s linear infinite  ;
        width: 120vh;
        left: -20vh;
        top: -40vh;
    }

    .gear1 img{
        transition: transform 0.3s ease;
    }

    .gear1 img:hover{
        transform: scale(1.02);
    }


    .gear2{ 
        position: absolute;
        z-index: 9;
        animation: rotateAnimation 100s linear infinite;
        width: 100vh;
        left: 113vh;
        top: 30vh;
    }

    .gear2 img{
        transition: transform 0.3s ease;
    }

    .gear2 img:hover{
        transform: scale(1.02);
    }

    .gear3{
        position: absolute;
        z-index: 9;
        animation: rotateAnimation2 60s linear infinite;
        width: 70vh;
        top: 65vh;
        left: 48vh;
    }

    .gear3 img{
        transition: transform 0.3s ease;
    }

    .gear3 img:hover{
        transform: scale(1.02);
    }


    /* バック歯車 */

    .back1{
        position: absolute;
        z-index: 8;
        animation: rotateAnimation2 100s linear infinite; 
        width: 100vh;
        left: 120vh;
        top: -65vh;
    }

    .back2{
        position: absolute;
        z-index: 8;
        animation: rotateAnimation2 200s linear infinite; 
        width: 100vh;
        left: -30vh;
        top: -10vh;
    }


    /* セパレーション */    
    .separator1{
        position: relative;
        margin-top: -380px;
        height: 200px;
        z-index: 998;
    }
    /* クローズ表記 */
    .separator1 .close-txt {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 999;
        color: #333;
        letter-spacing: 0.08em;
        white-space: nowrap;
        width: auto;
        max-width: calc(100% - 40px);
        box-sizing: border-box;
        padding: 0 10px;
        background: transparent;
        letter-spacing: 0.5em;
        font-family: "M PLUS 1", sans-serif;
    }
    .separator1 .close-txt h2 {
        font-size: 1.6rem;
        margin: 0;
        font-weight: 600;
        line-height: 1.2;
    }
    .separator1 .close-txt p {
        margin: 1rem 0 0 0;
        line-height: 1.4;
        font-size: 1rem;
    }

    .separator1 img{
        position: absolute;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
        width: 100%;
    }
    @media (max-width: 768px) {
        .separator1 .close-txt {
            top: 40%;
            padding: 0 12px;
            letter-spacing: 0.2em;
        }
        .separator1 .close-txt h2 {
            font-size: 1.2rem;
        }
        .separator1 .close-txt p {
            font-size: 0.8rem;
        }
    }
    @media (min-width: 1920px) {
        .separator1 .close-txt {
            top: 120%;
        }
    }

    .separator1 .sepa1{
        z-index: 10;
    }
    .separator1 .sepa2{
        z-index: 9;
    }
    .separator1 .sepa3{
        z-index: 8;
    }

    .separator1.show .sepa3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s; /* 最初に表示 */
    }

    .separator1.show .sepa2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s; /* 少し遅れて表示 */
    }

    .separator1.show .sepa1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s; /* 一番最後に表示 */
    }



    /* 見出し */
    .heading{
        display: flex;
        flex-direction: column;
    }


    /* アバウト */

    .about-all {
        position: relative;
        background-color: #ffffff;
        background-size: cover;
        z-index: 7;
        overflow: hidden;
    }


    .about-all .backgear {
        position: absolute;
        top: -200px;   
        right: -500px;
        width: 150vh;  
        z-index: -1; 
        animation: rotateAnimation 120s linear infinite;
        transform-origin: center center;
    }

    .about-all .backgear2 {
        position: absolute;
        top: 700px;   
        left: -300px;
        width: 120vh;  
        z-index: -1; 
        animation: rotateAnimation2 120s linear infinite;
        transform-origin: center center;
    }

    .about{
        position: relative;
        padding-top:300px;
    }

    .about img{
        display: block;
        width: 700px;
    }


    .about h1{
        font-family: "Bungee", "M PLUS 1p", "Noto Sans JP", sans-serif;
        color: #fff;
        -webkit-text-stroke-width: 1.8px;
        -webkit-text-stroke-color: rgb(249, 39, 168);                   
        font-size: 80px;
        text-align: center; 
    }

    .about h2{
        margin-left: 50px;
    }

    .about .accent{
        color:rgb(249, 39, 168) ;
    }


    .about .heading .text-accent{
        background-color: rgb(255, 243, 132);
        font-weight: bold;
    }

    .about .heading .about-content{
        display: flex;
        justify-content: left;
        position: relative;
    }

    .about .heading .about-content .dots{
        position: absolute;
        z-index: -1;
        top: 30px;
        left: 30px;
    }

    .mess .dots2{
        position: absolute;
        z-index: -1;
        bottom: 30px;
        right: 30px;
    }



    .about .heading .about-content div h2{
        padding-top: 250px;
        padding-left: 30px;
    }

    .about .heading .about-content p{
        font-size: 20px;
        line-height: 2;
        padding-left: 80px;
    }

    p{
        font-family: "M PLUS 1", sans-serif;
    }

    .mess{
        display: flex;
        justify-content: right;
        padding-top: 50px;
    }

    .mess img{
        display: block;
        width: 700px;
    }

    .mess span{
        font-weight: 700;
        font-size: 20px;
        display: inline-block;
        margin-bottom: 1.5em;
    }

    summary:hover{
        background-image: url(img/mesh-gradient.png);
        background-size: cover;
        transform: translateY(-0.1875em);
    }

    .mess-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-right: 60px;
    }

    .accordion-007 {
        max-width: 500px;
        margin-bottom: 7px;
        width: 600px;
        
    }

    .accordion-007 summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 1em 2em;
        border: 2px solid #a90081;
        border-radius: 25px;
        color: #a90081;
        font-family: "M PLUS 1", sans-serif;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease 0s;
        background-color: #fff;
    }

    .accordion-007 summary::-webkit-details-marker {
        display: none;
    }

    .accordion-007 summary::after {
        transform: translateY(-25%) rotate(45deg);
        width: 7px;
        height: 7px;
        border-bottom: 3px solid #a90081;
        border-right: 3px solid #a90081;
        content: '';
        transition: transform .3s;
    }

    .accordion-007[open] summary::after {
        transform: rotate(225deg);
        transform: translateY(-25%) rotate(225deg) scale(1);
    }

    .accordion-007 p {
        position: relative;
        transform: translateY(-10px);
        opacity: 0;
        margin-top: 20px;
        padding: .8em 1.2em;
        border: 2px solid #a90081;
        border-radius: 25px;
        background-color: #fff;
        color: #333333;
        transition: transform .5s, opacity .5s;
        
    }

    .accordion-007[open] p {
        transform: none;
        opacity: 1;
    }

    .accordion-007 p::before,
    .accordion-007 p::after {
        position: absolute;
        top: -15px;
        left: 1.2em;
        width: 30px;
        height: 15px;
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        content: '';
    }

    .accordion-007 p::before {
        background-color: #a90081;
    }

    .accordion-007 p::after {
        top: -12px;
        background-color: #fff;
    }

    /* セパレーション2 */

    .separator2{
        position: relative;
        margin-top: 100px;
        height: 450px;
        z-index: 998;
        overflow: hidden;
        margin-bottom: -200px;
    }

    .separator2 img{
        position: absolute;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }


    .separator2 .sepa1{
        z-index: 10;
    }
    .separator2 .sepa2{
        z-index: 9;
    }
    .separator2 .sepa3{
        z-index: 8;
    }

    .separator2.show .sepa3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s; /* 最初に表示 */
    }

    .separator2.show .sepa2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* 少し遅れて表示 */
    }

    .separator2.show .sepa1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s; /* 一番最後に表示 */
    }




    /* ニュース */

    .news{
        position: relative;
        height: 1300px;
        background-color: #ffe0a8;
        margin-bottom: 100px;
    }

    .news .backgear {
        position: absolute;
        opacity: 0.8;
        top: -200px;   
        left: -500px;
        width: 150vh;  
        z-index: 0; 
        animation: rotateAnimation 120s linear infinite;
        transform-origin: center center;
    }

    .news .news-content{
        text-align: center;
        padding-bottom: 20px;
        margin-top: 250px;
    }

    .news h1{
        font-family: "Bungee", "M PLUS 1p", "Noto Sans JP", sans-serif;
        color: #fff;
        -webkit-text-stroke-width: 1.8px;
        -webkit-text-stroke-color: rgb(248, 186, 0);
        font-size: 80px;
        padding-top: 300px;
    }


    .news .accent{
        color: rgb(248, 186, 0);
    }

    .news ul{
        list-style: none;
        padding: 50px;

        margin: 0 auto;

        /* width: fit-content; ←スマホ用 */

        width: 700px; 

        background-color: #fdfff6;
        opacity: 0.8;
        background-image: radial-gradient(#fcaf6b 2px, transparent 2px), radial-gradient(#fcaf6b 0.5px, #fdfff6 0.5px);
        background-size: 50px 50px;
        background-position: 0 0,10px 10px;

        border: solid 2px #000;
        border-radius: 40px;
    }


    .news ul li{
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 1;
        border-bottom: 1px solid #333; 
        padding: 10px 0; 
    }

    .day{
        font-size: 20px;
        font-family: "M PLUS 1", sans-serif;
        font-weight: 800;
    }

    .text{
        font-family: "M PLUS 1", sans-serif;
        padding-top:10px ;
        font-weight: 500;

    }

    .link{
        color: #0057FF;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .link:hover{
        color: rgb(255, 106, 0);
    }




    /* ブース */

    .booth{
        text-align: center  ;
        background-color: rgb(255, 238, 244);
        height: 1000px;
        margin-top: 300px;
        position: relative;
        top: -300px;
        overflow: hidden;
        
    }

    .booth .backgear{
        position: absolute;
        opacity: 0.8;
        top: -200px;   
        left: -500px;
        width: 70vh;  
        z-index: 0; 
        animation: rotateAnimation 120s linear infinite;
        transform-origin: center center;
    }

    .booth-content{
        position: relative;
        top: 20px;
    }

    .booth h1{
    font-family: "Bungee", "M PLUS 1p", "Noto Sans JP", sans-serif;
        color: #fff;
        -webkit-text-stroke-width: 1.8px;
        -webkit-text-stroke-color: rgb(210, 74, 94);
        font-size: 80px;
        margin: 0;
        padding-top: 100px;
    }

    .booth .accent{
        color:rgb(210, 74, 94) ;
    }

/* 横スクロール用コンテナ */
  .booth .booth-content ul {
    display: flex;
    /*  flex-direction: row;*/
    gap: 16px;
    padding: 20px 16px;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 16px;
    box-sizing: border-box;
    justify-content: center;
  }

  .booth .booth-content ul li {
    flex: 0 0 78%;
    max-width: 420px;
    scroll-snap-align: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 300px;
  }

  .booth .booth-content ul::-webkit-scrollbar {
    display: none;
  }

    .booth ul li div {
        text-align: center;
    }

    .booth ul li div .main-booth{
        width: 80px;
        height: auto;
        border-radius: 50px;
      /*  margin: 40px;*/
        transition: transform 0.3s ease;
    }

    .booth ul li div .class-booth{
        width: 70px;
        height: auto;
        border-radius: 50px;
      /*  margin: 40px;*/
        transition: transform 0.3s ease;
    }

    .booth ul li div .school-map{
        width: 70px;
        height: auto;
        border-radius: 50px;
        /*  margin: 40px;*/
        transition: transform 0.3s ease;
    }

    .booth ul li div img:hover{
        transform: scale(1.1);
        cursor: pointer;
    }

    .booth ul li div h5{
        font-size: 15px;
        font-family:"M PLUS 1", sans-serif;
        color: #919191;
    }

    .booth .backgear {
        position: absolute;
        width: 100vh;
        top: -30vh;
        right: -30vh;
        opacity: 0.6;
        animation: rotateAnimation 100s linear infinite  ;
    }

    .all-btn{
        display: inline-block;
        margin: 50px;
        padding: 20px 100px;
        border-radius: 70px;
        background-color:rgb(210, 74, 94) ;
        color: #fff;
        border: none;
        font-family: "M PLUS 1", sans-serif;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
    }


    .separator2{
        position: relative;
        margin-top: 100px;
        height: 450px;
        z-index: 998;
        overflow: hidden;
        margin-bottom: -480px;

    }

    .separator2 img{
        position: absolute;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }


        /* セパレーション４ */

    .separator4{
        position: relative;
        margin-top: -400px;
        height: 450px;
        z-index: 998;
        overflow: hidden;
        margin-bottom: -300px;
    }

    .separator4 img{
        position: absolute;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .separator4 .sepa4{
        z-index: 10;
    }
    .separator4 .sepa5{
        z-index: 9;
    }
    .separator4 .sepa6{
        z-index: 8;
    }

    .separator4.show .sepa6 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s; /* 最初に表示 */
    }

    .separator4.show .sepa5 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* 少し遅れて表示 */
    }

    .separator4.show .sepa4 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s; /* 一番最後に表示 */
    }




    /* クリスマスツリーコンテスト */
    .contest{
        text-align: center;
        background-image: radial-gradient(circle at center, #b6ddbe 3px, transparent 3px);
        background-size: 50px 50px;
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        height: 1300px;
    }

    .contest-content{
        position: relative;
        top: 100px;
    }

    .contest h1{
        font-family: "Bungee", "M PLUS 1p", "Noto Sans JP", sans-serif;
        color: #fff;
        -webkit-text-stroke-width: 1.8px;
        -webkit-text-stroke-color: rgb(91, 170, 150);
        font-size: 80px;
        padding-top: 300px;
        margin: 0;
    }

    .contest .accent{
        color:rgb(91, 170, 150); 
    }

    .contest .contest-text{
        margin: 30px auto 0;
        padding:50px 150px;
        border: solid 10px #3b7d71;
        border-radius: 40px;
        width: fit-content;
        text-align: center;
        background-color: #fff;
        box-shadow: #333;
            display: flex;
            flex-direction: column;
    }

    .contest .contest-text img{
        border-radius: 30px;
        height: 300px;
        width: auto;
    }

    .contest .contest-text .contest-btn{
        margin-top: 25px;
        padding: 20px 70px;
        border-radius: 70px;
        background-color:rgb(52, 137, 116);
        color: #fff;
        border: none;
        font-family: "M PLUS 1", sans-serif;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
    }

    /* アクセス */

    .access{
        text-align: center;
        background-image: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 10px, transparent 0, transparent 50%);
        background-size: 130px 130px;
        background-color: #e0ffd9;
        position: relative;

        height: 1100px;
    }

    .access h1{
        font-family: "Bungee", "M PLUS 1p", "Noto Sans JP", sans-serif;
        color: #fff;
        -webkit-text-stroke-width: 1.8px;
        -webkit-text-stroke-color: rgb(137, 185, 56);
        font-size: 80px;
        padding-top: 300px;
    }

    .access .accent{
        color:rgb(137, 185, 56)  ;
    }

    .access .map{
        display: flex;
        justify-content: center;
    }

    .access .map div li{
        list-style: none;
         font-family: "Noto Sans JP", sans-serif;
    }

    .access .map iframe{
        width: 500px;
        height: 400px;
        border-radius: 30px;
    }

    .map-content{
        text-align: left;
        margin: 50px;
        padding-top: 80px;
    }

        .map-content .map-btn{
        margin-top: 25px;
        padding: 10px 50px;
        border-radius: 70px;
        background-color:rgb(162, 183, 46);
        color: #fff;
        border: none;
        font-family: "M PLUS 1", sans-serif;
        font-size: 15px;
        font-weight: 900;
        cursor: pointer;
    }

    /* スポンサー */
.sponsor {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
    background-image: radial-gradient(circle at center, #ffffff 7px, transparent 7px);
    background-size: 72px 72px;
    background-color: #dbe7ff;
  padding-bottom: 200px;
}

.sponsor .accent {
  color: #0057FF;
}

.sponsor h1 {
  font-family: "Bungee", "M PLUS 1p", "Noto Sans JP", sans-serif;
  color: #fff;
  -webkit-text-stroke-width: 1.8px;
  -webkit-text-stroke-color: #0057FF;
  font-size: 80px;
  padding-top: 100px;
}

.sponsor div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* ✅ 折り返しを許可 */
  gap: 30px; /* 画像の間の余白 */
  padding: 20px;
  max-width: 1000px; /* 全体幅の上限 */
  margin: 0 auto; /* 中央寄せ */
}

.sponsor ul {
  display: flex;
  flex-wrap: wrap; /* ✅ liを折り返す */
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sponsor ul li {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

.sponsor img {
  height: 150px;
  width: auto;
  transition: transform 0.3s ease;
}

.sponsor img:hover {
  transform: scale(1.05);
  cursor: pointer;
}

    /* フッター */

        footer{
        position: relative;
        position: relative;
        background-image: url(img/mesh-gradient.png);
        background-size: cover;
        background-position: center;
        height: 100px;

        display: flex;  
        justify-content: center;       
        align-items: center;        
        text-align: center;     
        }





        /* ========== スマホ用（幅768px以下） ========== */
        
        @media screen and (max-width: 768px) {

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


    /* ===== 全体 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.header {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  z-index: 1000;
  background: transparent; /* 背景透過にしてもOK */
}

.logo {
  font-family: "Bungee", "Noto Sans JP", sans-serif;
  font-size: 24px;
  color: #fff;
}


.hamburger {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px; /* 線の間隔 */
  width: 50px;
  height: 50px;
  background:rgb(179, 205, 235); /* 背景色 */
  border: none;
  border-radius: 20%; /* 丸ボタン */
  cursor: pointer;
  z-index: 1100;
  transition: background 0.3s ease;
}

.hamburger:hover {
  background: rgb(179, 205, 235);
}

/* 三本線 */
.hamburger span {
  display: block;
  height: 3px;
  width: 26px; /* 長さを固定 */
  background-color: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center; /* 中心を軸に回転させる！ */
}

/* アクティブ時（✖の形） */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}



/* ===== メニュー ===== */
nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 70%;
  height: 100vh;
  background: rgba(179, 205, 235,0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: right 0.3s ease;
}

.nav ul {
  list-style: none;
  text-align: center;
}

.nav li {
  margin: 20px 0;
}

.nav a {
  color: white;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
  transition: color 0.3s;
   font-family: "Bungee", sans-serif;   
}



/* メニュー開いた状態 */
.nav.show {
  right: 0;
}

      /* ナビゲーション */

    #main{
        scroll-margin-top:-200px ;
    }

    #about {
    scroll-margin-top: 500px;
    }

    #news{
        scroll-margin-top: -150px;
    }
    
    #booth{
        scroll-margin-top: 100px;
    }

    #CONTEST{
        scroll-margin-top:200px;
    }

    #access{
        scroll-margin-top: 50px;
    }

/* ===== PC版では非表示（スマホ専用） ===== */
@media (min-width: 769px) {
  .hamburger {
    display: none;
  }

  .nav {
    position: static;
    width: auto;
    height: auto;
    background: none;
    flex-direction: row;
  }

  .nav ul {
    display: flex;
    gap: 30px;
  }
}


    /* ナビゲーション */
    .breadcrumb {
        display: none;
    }

    .breadcrumb-header{
        display: none;
    }

    .main{
        margin: 0;
        padding: 0;
    }

        .date{
        position: absolute;
        z-index: 11;
        width: 16vh;
        top: 62vh;
        left: 28vh;
    }



    .TEC{
        position: absolute;
        z-index: 10;
        width: 35vh;
        top: 5vh;
        left: 10px;

        transition: transform 0.3s ease;
    }

    .TEC:hover{
        transform: scale(1.02);
    }

    .TECdenpa{
        position: absolute;
        z-index: 11;
        width: 28.5vh;
        left: 7.6vh;
        top: 4.8vh;
        animation-name: blink;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;

        transition: transform 0.3s ease;
    }

    .TECdenpa:hover{
        transform: scale(1.02);
    }

    @keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
    }

    @keyframes rotateAnimation2{
        from{
            transform: rotate(30deg);
        }
        to{
            transform: rotate(-390deg);
        }
    }

    .gear1{
        position: absolute;
        z-index: 9;
        animation: rotateAnimation 100s linear infinite  ;
        width: 70vh;
        top: -20vh;
        left: -3    0vh;
    }

    .gear1 img{
        transition: transform 0.3s ease;
    }

    .gear1 img:hover{
        transform: scale(1.02);
    }


    .gear2{ 
        position: absolute;
        z-index: 9;
        animation: rotateAnimation 100s linear infinite;
        width: 55vh;
        left: 20vh;
        top: 45vh;
    }

    .gear2 img{
        transition: transform 0.3s ease;
    }

    .gear2 img:hover{
        transform: scale(1.02);
    }

    .gear3{
        position: absolute;
        z-index: 9;
        animation: rotateAnimation2 60s linear infinite;
        width: 30vh;
        top: 50vh;
        left: -10vh;
    }

    .gear3 img{
        transition: transform 0.3s ease;
    }

    .gear3 img:hover{
        transform: scale(1.02);
    }


    /* バック歯車 */

    .back1{
        display: none;
    }

    .back2{
        display: none;
    }



    .separator1 {
        position: relative;
        margin-top: -450px;
        margin-bottom: 50px;
        height: 200px;
        z-index: 998;
    }

    .separator1 img {
        position: absolute;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }


    /* トップボタン */
    .topbtn{
        width: 10vh;
        right: 20px;
    }


    /* アバウト */

    .about img{
        width: 80%;
        display: block;
        margin-left: 0;
        margin-right: auto;
    }

    .mess img{
        display: none;
    }

    /* ドット左 */
    .about .heading .about-content .dots {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 80%;
        height: auto;
        margin: 0;
        padding: 0;
        z-index: -1;
    }

    /* ドット右 */
    .mess .dots2 {
        display: none;
    }


    .about-all .backgear {
        position: absolute;  
        top: -300px;
        width: 100vh; 
        right: -50vh;
        z-index: -1; 
        animation: rotateAnimation 120s linear infinite;
        transform-origin: center center;
    }


    .about-all .backgear2 {
        display: none;
    }

    .about-all{
        top: -200px;
        z-index: 10;
        
    }

    .about .heading .about-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;

    }

    .about .heading .about-content div{
        display: flex;
        flex-direction: column;
        width: 90%;
    }

    .about h1{
        margin-top: -150px;
        font-size: 30px;
    }

    .about h2{
        margin: 0;
        margin-top: -200px;
        width: 100%;
        font-size: 20px;
        align-items: flex-start;
        font-family: "Bungee", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .about .heading .about-content p {
        font-size: 13px;
        padding-left: 30px;

    }


    .mess {
    transform: scale(0.6); /* ← 80%に縮小 */
    transform-origin: center center; 
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
    text-align: left;
    box-sizing: border-box;
    margin-top: -180px;
    overflow: visible;

    }

    .mess-content{
        height: auto;        /* 自動で高さを調整 */
        overflow: visible;   /* コンテンツがはみ出しても隠さない */
        font-size:20px;
        margin-top: 0;
    }

 


    /* セパレーション */
    .separator2{
        margin-bottom: -800px;
        margin-top: -260px;
    }


    /* ニュース */

/*     .news{
    } */

    .news ul {
        width: 90%;
        padding: 40px;
    }

    

    .news ul li {
        font-size: 14px;
    }

    .news h4,.link{
        font-family: "Bungee", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .news .backgear{
        width: 100vh;
        top: 20vh;
    }

    /* ブース */
    .booth{
        /*   height:900px; */
        top: -300px;
    }

    .booth h1{
        font-size: 60px;
    }

    .booth ul {
        flex-direction: column;
        align-items: center;
    }

    .booth ul li {
        width: 50%;
    }

    .booth ul li div img {
        width: 60vw;
        margin: 20px auto;
    }

    .booth h4{
        font-family: "Bungee", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .all-btn {
        padding: 15px 40px;
        font-size: 16px;
    }

    

   /*  コンテスト */
    .contest{
        height: 1000px;
    }
    .contest h1{
        padding-top:10px   ;
        font-size:60px;
    }

    .contest .contest-text img {
        width: 75vw;   /* ビューポート幅の60%に調整 */
        height: auto;  /* 自動で高さ調整 */
        display: block;
        margin: 0 auto;
        margin: 5px;
    }

    .contest div {
        padding: 20px;
    }

    .contest-content{
        padding-top: -300px;
    }

    .contest .contest-text {
        width: fit-content;
        max-width: 700px;
        margin: 0 auto;
        margin-top: 30px;
        padding: 20px;
        border: 10px;
        border: solid 5px #3b7d71;
    }

    .contest-content .map-btn{
        height: 50px;
        line-height: 10px;
    }

    .contest-content h4{
        font-family: "Bungee", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    /* アクセス */
.access {
   height: 900px;
   top: -200px;
}

.access h1{
    padding-top: 100px;
}

    .access .map {
        flex-direction: column;
    }

        .access .map iframe {
            width: 70%;
            height: 200px;
            display: block;
            margin: 0 auto;
        }

    .map-content {
        margin: 20px auto 0;
        padding: 0;
        text-align: left;
        margin-top: 50px;
    }

    .map-content li{
        font-family: "Bungee", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .map-content div{
        margin-top: 50px;
    }


    /* スポンサー */
    .sponsor{
        height: 1100px;
        margin-top: -200px;
        margin-bottom: -50px;
    }


    .sponsor .sponsor-content {
        flex-direction: column;
        width: 90%;
        height: auto;
        margin: 0 auto;
    }

    .sponsor h1{
        padding-top:100px ;
        font-size:60px;
    }

    .sponsor h4{
        font-family: "Bungee", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .sponsor-content img{
        height: 120px;
    }

      .sponsor-content ul {
    display: flex;
    flex-wrap: wrap;
  } 

/* 並び順を変更したいならここに order を指定 */
.img1 { order: 1; }
.img2 { order: 2; }
.img3 { order: 3; }
.img4 { order: 4; }
.img5 { order: 6; }
.img6 { order: 7; }
.img7 { order: 5; }



    /* フッター */
    footer {
        height: auto;
        padding: 20px 0;
    }

    footer .footer-text{
        margin: 0 40px;
        font-size: 10px;
    }

    }